UNPKG

20.9 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
3 typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
4 (global = global || self, factory(global.ReactFreeDropDown = {}, global.React, global.styled));
5}(this, (function (exports, React, styled) { 'use strict';
6
7 var React__default = 'default' in React ? React['default'] : React;
8 var styled__default = 'default' in styled ? styled['default'] : styled;
9
10 /*! *****************************************************************************
11 Copyright (c) Microsoft Corporation. All rights reserved.
12 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
13 this file except in compliance with the License. You may obtain a copy of the
14 License at http://www.apache.org/licenses/LICENSE-2.0
15
16 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
17 KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
18 WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
19 MERCHANTABLITY OR NON-INFRINGEMENT.
20
21 See the Apache Version 2.0 License for specific language governing permissions
22 and limitations under the License.
23 ***************************************************************************** */
24
25 var __assign = function() {
26 __assign = Object.assign || function __assign(t) {
27 for (var s, i = 1, n = arguments.length; i < n; i++) {
28 s = arguments[i];
29 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
30 }
31 return t;
32 };
33 return __assign.apply(this, arguments);
34 };
35
36 function __makeTemplateObject(cooked, raw) {
37 if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
38 return cooked;
39 }
40
41 var GlobalStyle = styled.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tbody{\n\t\tbackground-color: #ffffff;\n\t\tfont-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n\t}\n\ta {\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n }\n\tol, ul, li {\n\t\tlist-style: none;\n\t}\n"], ["\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tbody{\n\t\tbackground-color: #ffffff;\n\t\tfont-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n\t}\n\ta {\n\t\tcolor: inherit;\n\t\ttext-decoration: none;\n }\n\tol, ul, li {\n\t\tlist-style: none;\n\t}\n"])));
42 var templateObject_1;
43
44 var statusChangeState = {
45 isFocus: false
46 };
47 var StatusChangeActionType;
48 (function (StatusChangeActionType) {
49 StatusChangeActionType["IS_FOCUS"] = "IS_FOCUS";
50 StatusChangeActionType["ON_BLUR"] = "ON_BLUR";
51 })(StatusChangeActionType || (StatusChangeActionType = {}));
52 function statusChangeReducer(state, action) {
53 switch (action.type) {
54 case StatusChangeActionType.IS_FOCUS:
55 return __assign(__assign({}, state), { isFocus: action.isFocus });
56 case StatusChangeActionType.ON_BLUR:
57 return __assign(__assign({}, state), { isFocus: false });
58 default:
59 return state;
60 }
61 }
62 var StatusChangeStateContext = React.createContext(undefined);
63 var StatusChangeDispatchContext = React.createContext(undefined);
64 function useStatusChangeState() {
65 var state = React.useContext(StatusChangeStateContext);
66 if (!state)
67 throw new Error('StatusChangeStateContext not found');
68 return state;
69 }
70 function useStatusChangeDispatch() {
71 var dispatch = React.useContext(StatusChangeDispatchContext);
72 if (!dispatch)
73 throw new Error('StatusChangeDispatchContext not found');
74 return dispatch;
75 }
76
77 var StatusChangeContextProvider = function (_a) {
78 var children = _a.children;
79 var _b = React.useReducer(statusChangeReducer, statusChangeState), state = _b[0], dispatch = _b[1];
80 return (React.createElement(StatusChangeDispatchContext.Provider, { value: dispatch },
81 React.createElement(StatusChangeStateContext.Provider, { value: state }, children)));
82 };
83
84 var StoreProvider = function (_a) {
85 var children = _a.children;
86 return (React.createElement(React.Fragment, null,
87 React.createElement(GlobalStyle, null),
88 React.createElement(StatusChangeContextProvider, null, children)));
89 };
90
91 var color = {
92 keyColor: '#1076de',
93 lightGray: 'rgb(240,240,240)',
94 opacityLightGray: 'rgba(245,245,245,0.8)',
95 gray: 'rgb(220,220,220)',
96 darkGray: '#333',
97 opacityDarkGray: 'rgba(51,51,51,0.8)',
98 dark: 'rgb(0,0,0,0.8)',
99 light: 'rgb(255,255,255,0.8)',
100 white: '#fff',
101 black: '#000'
102 };
103
104 var isLightMode = function (mode) { return mode === 'light'; };
105 var classes = function () {
106 var arg = [];
107 for (var _i = 0; _i < arguments.length; _i++) {
108 arg[_i] = arguments[_i];
109 }
110 return arg.filter(function (a) { return a; }).join(' ');
111 };
112
113 var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Generator: Adobe Illustrator 24.0.2%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21.3 21.3' style='enable-background:new 0 0 21.3 21.3%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bdisplay:none%3b%7d .st1%7bfill:%23656565%3b%7d%3c/style%3e%3cg id='%eb%a0%88%ec%9d%b4%ec%96%b4_1' class='st0'%3e %3cimage style='display:inline%3boverflow:visible%3b' width='19' height='21' xlink:href='%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba 2020-02-11 %e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae 1.29.38.png' transform='matrix(1 0 0 1 1.6723 -0.3277)'%3e %3c/image%3e%3c/g%3e%3cg id='%eb%a0%88%ec%9d%b4%ec%96%b4_2'%3e %3cpolygon class='st1' points='10.7%2c15.9 1.4%2c6.8 2.7%2c5.5 10.7%2c13.3 18.6%2c5.5 19.9%2c6.8 '/%3e%3c/g%3e%3c/svg%3e";
114
115 var RfddSelectStyle = {
116 Wrapper: styled__default.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tpadding: 4px 4px 4px 8px;\n\t\tbox-sizing: border-box;\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\n\t\tborder: 1px solid ", ";\n\t\twidth: 100%;\n\t\tmin-height: 30px;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tspan {\n\t\t\twidth: 80%;\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: initial;\n\t\t\talign-items: center;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t"], ["\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tpadding: 4px 4px 4px 8px;\n\t\tbox-sizing: border-box;\n\t\tbackground: ", ";\n\t\tcolor: ",
117 ";\n\t\ttransition: color 0.3s;\n\t\t&:hover {\n\t\t\tcolor: ", ";\n\t\t}\n\t\tfont-size: 12px;\n\t\tborder: 1px solid ", ";\n\t\twidth: 100%;\n\t\tmin-height: 30px;\n\t\theight: 100%;\n\t\tposition: relative;\n\t\tspan {\n\t\t\twidth: 80%;\n\t\t\tdisplay: flex;\n\t\t\theight: 100%;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: initial;\n\t\t\talign-items: center;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t"])), function (_a) {
118 var mode = _a.mode;
119 return (isLightMode(mode) ? color.white : color.dark);
120 }, function (_a) {
121 var mode = _a.mode;
122 return isLightMode(mode) ? color.opacityDarkGray : color.opacityLightGray;
123 }, function (_a) {
124 var mode = _a.mode;
125 return (isLightMode(mode) ? color.black : color.white);
126 }, function (_a) {
127 var mode = _a.mode;
128 return (isLightMode(mode) ? color.gray : color.dark);
129 }),
130 Icon: styled__default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\ttop: 50%;\n\t\tmargin-top: -6px;\n\t\ttransform: ", ";\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t}\n\t"], ["\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\ttop: 50%;\n\t\tmargin-top: -6px;\n\t\ttransform: ", ";\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t}\n\t"])), function (_a) {
131 var isFocus = _a.isFocus;
132 return (isFocus ? 'rotate(180deg)' : 'rotate(0deg)');
133 })
134 };
135 var RfddSelect = function (props) {
136 var focusStyle = props.focusStyle, selectClassName = props.selectClassName, selectStyle = props.selectStyle, isValue = props.isValue, mode = props.mode, value = props.value, icon = props.icon, hiddenIcon = props.hiddenIcon;
137 var isFocus = useStatusChangeState().isFocus;
138 var statusChangeDispatch = useStatusChangeDispatch();
139 return (React.createElement(RfddSelectStyle.Wrapper, { className: selectClassName || 'rfdd-select', style: isFocus && focusStyle ? __assign(__assign({}, selectStyle), focusStyle) : selectStyle, onClick: function () { return statusChangeDispatch({ type: StatusChangeActionType.IS_FOCUS, isFocus: !isFocus }); }, isValue: isValue, mode: mode, id: "select", "data-testid": "select" },
140 React.createElement("span", { "data-testid": "select-text" }, value),
141 !hiddenIcon && (React.createElement(RfddSelectStyle.Icon, { isFocus: isFocus },
142 React.createElement("img", { src: icon || img, alt: "default arrow icon" })))));
143 };
144 var templateObject_1$1, templateObject_2;
145
146 var RfddStyle = {
147 Wrapper: styled__default.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\tfont-weight: lighter;\n\t\toutline: none;\n\t\tmin-width: 120px;\n\t\tmin-height: 30px;\n\t\tbackground: white;\n\t"], ["\n\t\tdisplay: inline-block;\n\t\tposition: relative;\n\t\tbox-sizing: border-box;\n\t\tfont-weight: lighter;\n\t\toutline: none;\n\t\tmin-width: 120px;\n\t\tmin-height: 30px;\n\t\tbackground: white;\n\t"]))),
148 Ul: styled__default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tdisplay: block;\n\t\tlist-style: none;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 100%;\n\t\tz-index: 200;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\t", ";\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\ttransition: max-height 0.2s;\n\t\tmax-height: ", ";\n\t\t", ";\n\t"], ["\n\t\tdisplay: block;\n\t\tlist-style: none;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 100%;\n\t\tz-index: 200;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\t",
149 ";\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\toverflow: hidden;\n\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\t\ttransition: max-height 0.2s;\n\t\tmax-height: ", ";\n\t\t", ";\n\t"])), function (_a) {
150 var mode = _a.mode;
151 if (isLightMode(mode)) {
152 return styled.css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: rgb(100, 100, 100);\n\t\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\t\twidth: 10px;\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t\tbackground-color: rgb(220, 220, 220);\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\t\tbackground-color: rgb(190, 190, 190);\n\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"], ["\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tcolor: rgb(100, 100, 100);\n\t\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\t\twidth: 10px;\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\t\tbackground-color: rgb(220, 220, 220);\n\t\t\t\t\t}\n\t\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\t\tbackground-color: rgb(190, 190, 190);\n\t\t\t\t\t\twidth: 8px;\n\t\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t"])), color.light);
153 }
154 return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\twidth: 10px;\n\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\tbackground-color: rgb(60, 60, 60);\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground-color: rgb(150, 150, 150);\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"], ["\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\t&::-webkit-scrollbar {\n\t\t\t\t\twidth: 10px;\n\t\t\t\t\tpadding: 0 2px;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-track {\n\t\t\t\t\tbackground-color: rgb(60, 60, 60);\n\t\t\t\t}\n\t\t\t\t&::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground-color: rgb(150, 150, 150);\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\tborder-radius: 10px;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: rgb(180, 180, 180);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), color.dark, color.white);
155 }, function (_a) {
156 var isFocus = _a.isFocus;
157 return (isFocus ? '100px' : '0');
158 }, function (_a) {
159 var isFocus = _a.isFocus;
160 return (isFocus ? 'overflow-y: auto' : 'overflow: hidden');
161 })
162 };
163 var RfddWrap = function (props) {
164 var children = props.children, selectClassName = props.selectClassName, optionOnClick = props.optionOnClick, optionClassName = props.optionClassName, className = props.className, style = props.style, focusStyle = props.focusStyle, selectStyle = props.selectStyle, hoverStyle = props.hoverStyle, optionStyle = props.optionStyle, onChange = props.onChange, value = props.value, _a = props.mode, mode = _a === void 0 ? 'light' : _a, icon = props.icon, hiddenIcon = props.hiddenIcon, _b = props.placeholder, placeholder = _b === void 0 ? '' : _b;
165 var _c = React.useState(''), selectValue = _c[0], setSelectValue = _c[1];
166 var isFocus = useStatusChangeState().isFocus;
167 var statusChangeDispatch = useStatusChangeDispatch();
168 var handleChange = function (optionValue) {
169 if (onChange) {
170 onChange(optionValue);
171 }
172 statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
173 };
174 var handleSelectChange = function (optionStr) {
175 setSelectValue(optionStr);
176 statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR });
177 };
178 var isValue = value !== '' || selectValue !== '';
179 return (React.createElement(RfddStyle.Wrapper, { tabIndex: 0, onBlur: function () { return statusChangeDispatch({ type: StatusChangeActionType.ON_BLUR }); }, "data-testid": "rfdd", className: className ? classes('rfdd', className) : 'rfdd', style: __assign({}, style) },
180 React.createElement(RfddSelect, { selectClassName: selectClassName, focusStyle: focusStyle, selectStyle: selectStyle, isValue: isValue, mode: mode, value: selectValue || placeholder, icon: icon, hiddenIcon: hiddenIcon }),
181 children && (React.createElement(RfddStyle.Ul, { isFocus: isFocus, mode: mode, id: "list", "data-testid": "list" }, React.Children.map(children, function (child, index) {
182 // Render when RfddOption is enabled only
183 if (child.type.displayName === 'RfddOption') {
184 return React.cloneElement(child, {
185 onChange: handleChange,
186 onSelectChange: handleSelectChange,
187 optionClassName: optionClassName,
188 optionOnClick: optionOnClick,
189 index: index,
190 hoverStyle: hoverStyle,
191 optionStyle: optionStyle
192 });
193 }
194 return null;
195 })))));
196 };
197 var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4;
198
199 var Rfdd = function (props) {
200 return (React.createElement(StoreProvider, null,
201 React.createElement(RfddWrap, __assign({}, props), props.children)));
202 };
203
204 var RfddOptionStyle = {
205 Wrapper: styled__default.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n\t\tcursor: pointer;\n\t\tlist-style: none;\n\t\tpadding: 8px;\n\t\tbox-sizing: border-box;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\tfont-size: 12px;\n\t\tline-height: 12px;\n\t\twidth: 100%;\n\t\theight: 30px;\n\t\ttext-align: left;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #ffffff;\n\t\t\t", "\n\t\t}\n\t\t", "\n\t"], ["\n\t\tcursor: pointer;\n\t\tlist-style: none;\n\t\tpadding: 8px;\n\t\tbox-sizing: border-box;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\tfont-size: 12px;\n\t\tline-height: 12px;\n\t\twidth: 100%;\n\t\theight: 30px;\n\t\ttext-align: left;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t&:hover {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #ffffff;\n\t\t\t",
206 "\n\t\t}\n\t\t",
207 "\n\t"])), color.keyColor, function (_a) {
208 var hoverStyle = _a.hoverStyle;
209 return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n\t\t\t\t", "\n\t\t\t"], ["\n\t\t\t\t", "\n\t\t\t"])), hoverStyle);
210 }, function (_a) {
211 var optionStyle = _a.optionStyle;
212 return styled.css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n\t\t\t", "\n\t\t"], ["\n\t\t\t", "\n\t\t"])), optionStyle);
213 })
214 };
215 var RfddOption = function (props) {
216 var optionClassName = props.optionClassName, className = props.className, value = props.value, children = props.children, onChange = props.onChange, index = props.index, style = props.style, hoverStyle = props.hoverStyle, optionStyle = props.optionStyle, onClick = props.onClick, optionOnClick = props.optionOnClick, onSelectChange = props.onSelectChange;
217 return (React.createElement(RfddOptionStyle.Wrapper, { className: className && optionClassName
218 ? classes(className, optionClassName)
219 : className || optionClassName || 'rfdd-option', key: "option" + index, "data-testid": "option" + index, onClick: function () {
220 if (onClick) {
221 onClick();
222 }
223 else if (optionOnClick) {
224 optionOnClick();
225 }
226 if (onSelectChange) {
227 var textToString = '';
228 if (children) {
229 textToString = String(children);
230 }
231 else if (typeof children === 'string') {
232 textToString = children;
233 }
234 onSelectChange(textToString);
235 }
236 var valueToString = '';
237 if (value) {
238 valueToString = value.toString();
239 }
240 else if (typeof children === 'string') {
241 valueToString = children;
242 }
243 return onChange && onChange(valueToString);
244 }, style: style, hoverStyle: hoverStyle, optionStyle: optionStyle }, children));
245 };
246 RfddOption.displayName = 'RfddOption';
247 var templateObject_1$3, templateObject_2$2, templateObject_3$1;
248
249 exports.Rfdd = Rfdd;
250 exports.RfddOption = RfddOption;
251
252 Object.defineProperty(exports, '__esModule', { value: true });
253
254})));