magneto365.ui 2.48.0 → 2.48.3

package/dist/esm/index.js

@@ -796,8 +796,54 @@ var DrawerPortal = function (_a) {
     return mounted && portalNode.current ? ReactDOM.createPortal(children, portalNode.current) : null;
 };
 
-var style$U = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-drawer_kxkzo","magneto-ui-close-button":"mg_mobile_drawer_magneto-ui-close-button_kxkzo","magneto-ui-container":"mg_mobile_drawer_magneto-ui-container_kxkzo","background-drawer":"mg_mobile_drawer_background-drawer_kxkzo","fadeIn":"mg_mobile_drawer_fadeIn_kxkzo","show":"mg_mobile_drawer_show_kxkzo","hidden":"mg_mobile_drawer_hidden_kxkzo"};
+var style$U = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-drawer_1e2s0","magneto-ui-close-button":"mg_mobile_drawer_magneto-ui-close-button_1e2s0","magneto-ui-container":"mg_mobile_drawer_magneto-ui-container_1e2s0","background-drawer":"mg_mobile_drawer_background-drawer_1e2s0","fadeIn":"mg_mobile_drawer_fadeIn_1e2s0","show":"mg_mobile_drawer_show_1e2s0","hidden":"mg_mobile_drawer_hidden_1e2s0"};
 
+function formatNumber(num) {
+    if (typeof num !== 'number')
+        return num;
+    return new Intl.NumberFormat().format(num);
+}
+var notNumberRegex = new RegExp('\\D*', 'g');
+
+var isDate = function (value) {
+    return value instanceof Date && !isNaN(value.valueOf());
+};
+
+var stubTrue = function () { return true; };
+var stubUndefined = function () { return undefined; };
+
+var classNames = {
+    bind: function (stylesObj) {
+        return function () {
+            var params = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                params[_i] = arguments[_i];
+            }
+            return params
+                // avoid nullish
+                .filter(function (param) { return param != null; })
+                .map(function (cls) {
+                var _a;
+                if (typeof cls === 'string')
+                    return (_a = stylesObj[cls]) !== null && _a !== void 0 ? _a : cls;
+                return Object.entries(cls)
+                    .filter(function (_a) {
+                    var value = _a[1];
+                    return value;
+                })
+                    .map(function (_a) {
+                    var _b;
+                    var key = _a[0];
+                    return (_b = stylesObj[key]) !== null && _b !== void 0 ? _b : key;
+                })
+                    .join(' ');
+            })
+                .join(' ');
+        };
+    }
+};
+
+var cx$6 = classNames.bind(style$U);
 var Component$1X = function (_a) {
     var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c;
     var _d = useState(false), showContent = _d[0], setShowContent = _d[1];
@@ -824,12 +870,12 @@ var Component$1X = function (_a) {
         };
     }, [isOpen]);
     return (React.createElement(React.Fragment, null, renderPortal && (React.createElement(DrawerPortal, null,
-        React.createElement("div", { className: "".concat(style$U['magneto-ui-mobile-drawer'], " ").concat(className) },
+        React.createElement("div", { className: cx$6('magneto-ui-mobile-drawer', className) },
             React.createElement("aside", { className: style$U[showMenu] },
-                React.createElement("button", { title: "cerrar modal", className: style$U['magneto-ui-close-button'], onClick: onClose },
+                React.createElement("button", { title: "close-modal", className: cx$6('magneto-ui-close-button'), onClick: onClose },
                     React.createElement(IconItem, { icon: Add, hover: false })),
-                React.createElement("div", { className: style$U['magneto-ui-container'] }, children)),
-            isOpen && (React.createElement("span", { className: "".concat(style$U['background-drawer']), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
+                React.createElement("div", { className: cx$6('magneto-ui-container') }, children)),
+            isOpen && (React.createElement("span", { className: cx$6('background-drawer'), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
 };
 /**
  * Molecule UI component for Mobile Drawer
@@ -1099,7 +1145,7 @@ var EXPANDABLE_INFO_ACTION_ICONS = {
         _c)
 };
 
-var styles$1Q = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-action_button_11ax1","magneto-ui-expandable-info-action__button--dark-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--dark-blue_11ax1","magneto-ui-expandable-info-action__button--light-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--light-blue_11ax1","magneto-ui-expandable-info-action__button--white":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--white_11ax1","magneto-ui-expandable-info-action__button--green":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--green_11ax1","magneto-ui-expandable-info-action__title":"mg_expandable_info_action_magneto-ui-expandable-info-action_title_11ax1"};
+var styles$1Q = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-action_button_1ajzq","magneto-ui-expandable-info-action__button--dark-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--dark-blue_1ajzq","magneto-ui-expandable-info-action__button--light-blue":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--light-blue_1ajzq","magneto-ui-expandable-info-action__button--white":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--white_1ajzq","magneto-ui-expandable-info-action__button--green":"mg_expandable_info_action_magneto-ui-expandable-info-action_button--green_1ajzq","magneto-ui-expandable-info-action__title":"mg_expandable_info_action_magneto-ui-expandable-info-action_title_1ajzq"};
 
 var Component$1S = function (_a) {
     var className = _a.className, loading = _a.loading, onAction = _a.onAction, prefixIcon = _a.prefixIcon, suffixIcon = _a.suffixIcon, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'blue' : _b;
@@ -1132,16 +1178,16 @@ var Component$1S = function (_a) {
     return (React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action', className] }) },
         React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__container'] }) },
             React.createElement(Component, __assign({}, componentProps),
-                (prefixIcon || loading) && React.createElement(IconItem, __assign({ size: 18 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
+                (prefixIcon || loading) && React.createElement(IconItem, __assign({ size: 12 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
                 React.createElement("span", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__title'] }) }, title),
-                suffixIcon && React.createElement(IconItem, __assign({ size: 18 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
+                suffixIcon && React.createElement(IconItem, __assign({ size: 12 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
 };
 /**
  * Molecule UI child component of expandable info
  */
 var ExpandableInfoAction = Component$1S;
 
-var styles$1P = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-details_container_1l94q","magneto-ui-expandable-info-details__section":"mg_expandable_info_details_magneto-ui-expandable-info-details_section_1l94q","magneto-ui-expandable-info-details__section--multiple":"mg_expandable_info_details_magneto-ui-expandable-info-details_section--multiple_1l94q","magneto-ui-expandable-info-details__sub-section":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section_1l94q","magneto-ui-expandable-info-details__sub-section--initial":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section--initial_1l94q","magneto-ui-expandable-info-details__item":"mg_expandable_info_details_magneto-ui-expandable-info-details_item_1l94q","magneto-ui-expandable-info-details__item--first":"mg_expandable_info_details_magneto-ui-expandable-info-details_item--first_1l94q","magneto-ui-expandable-info-details__text":"mg_expandable_info_details_magneto-ui-expandable-info-details_text_1l94q","magneto-ui-expandable-info-details__text--bold":"mg_expandable_info_details_magneto-ui-expandable-info-details_text--bold_1l94q","magneto-ui-expandable-info-details__footer":"mg_expandable_info_details_magneto-ui-expandable-info-details_footer_1l94q","magneto-ui-expandable-info-details__action":"mg_expandable_info_details_magneto-ui-expandable-info-details_action_1l94q"};
+var styles$1P = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-details_container_1o8tr","magneto-ui-expandable-info-details__section":"mg_expandable_info_details_magneto-ui-expandable-info-details_section_1o8tr","magneto-ui-expandable-info-details__section--multiple":"mg_expandable_info_details_magneto-ui-expandable-info-details_section--multiple_1o8tr","magneto-ui-expandable-info-details__sub-section":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section_1o8tr","magneto-ui-expandable-info-details__sub-section--initial":"mg_expandable_info_details_magneto-ui-expandable-info-details_sub-section--initial_1o8tr","magneto-ui-expandable-info-details__item":"mg_expandable_info_details_magneto-ui-expandable-info-details_item_1o8tr","magneto-ui-expandable-info-details__item--first":"mg_expandable_info_details_magneto-ui-expandable-info-details_item--first_1o8tr","magneto-ui-expandable-info-details__text":"mg_expandable_info_details_magneto-ui-expandable-info-details_text_1o8tr","magneto-ui-expandable-info-details__text--bold":"mg_expandable_info_details_magneto-ui-expandable-info-details_text--bold_1o8tr","magneto-ui-expandable-info-details__footer":"mg_expandable_info_details_magneto-ui-expandable-info-details_footer_1o8tr","magneto-ui-expandable-info-details__action":"mg_expandable_info_details_magneto-ui-expandable-info-details_action_1o8tr"};
 
 var Component$1R = function (_a) {
     var sections = _a.sections, footer = _a.footer;
@@ -1239,7 +1285,7 @@ var Component$1Q = function (_a) {
  */
 var ExpandableInfoMessage = Component$1Q;
 
-var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_mka0n"};
+var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_56w98"};
 
 var Component$1P = function (_a) {
     var toggler = _a.toggler, details = _a.details;
@@ -1347,7 +1393,7 @@ var EXPANDABLE_INFO_TOGGLER_ICONS = {
     coin: CoinBlackOutline
 };
 
-var styles$1I = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container_uiv7v","magneto-ui-expandable-info-toggler__container--no-details":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--no-details_uiv7v","magneto-ui-expandable-info-toggler__container--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--blue_uiv7v","magneto-ui-expandable-info-toggler__container--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--white_uiv7v","magneto-ui-expandable-info-toggler__container--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--small_uiv7v","magneto-ui-expandable-info-toggler__text":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text_uiv7v","magneto-ui-expandable-info-toggler__text--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--blue_uiv7v","magneto-ui-expandable-info-toggler__text--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--white_uiv7v","magneto-ui-expandable-info-toggler__text--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--small_uiv7v","magneto-ui-expandable-info-toggler__summary":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary_uiv7v","magneto-ui-expandable-info-toggler__summary--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--small_uiv7v","magneto-ui-expandable-info-toggler__summary--large":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--large_uiv7v"};
+var styles$1I = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container_x381d","magneto-ui-expandable-info-toggler__container--no-details":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--no-details_x381d","magneto-ui-expandable-info-toggler__container--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--blue_x381d","magneto-ui-expandable-info-toggler__container--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--white_x381d","magneto-ui-expandable-info-toggler__container--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_container--small_x381d","magneto-ui-expandable-info-toggler__text":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text_x381d","magneto-ui-expandable-info-toggler__text--blue":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--blue_x381d","magneto-ui-expandable-info-toggler__text--white":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--white_x381d","magneto-ui-expandable-info-toggler__text--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_text--small_x381d","magneto-ui-expandable-info-toggler__summary":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary_x381d","magneto-ui-expandable-info-toggler__summary--small":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--small_x381d","magneto-ui-expandable-info-toggler__summary--large":"mg_expandable_info_toggler_magneto-ui-expandable-info-toggler_summary--large_x381d"};
 
 var Component$1N = function (_a) {
     var details = _a.details, onToggle = _a.onToggle, prefixIcon = _a.prefixIcon, size = _a.size, suffixIcon = _a.suffixIcon, summary = _a.summary, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'white' : _b;
@@ -1443,51 +1489,6 @@ var FilterContainerMenu = function (_a) {
     return React.createElement("div", { className: style$P["".concat(classMUI, "-filter-container")] }, children);
 };
 
-function formatNumber(num) {
-    if (typeof num !== 'number')
-        return num;
-    return new Intl.NumberFormat().format(num);
-}
-var notNumberRegex = new RegExp('\\D*', 'g');
-
-var isDate = function (value) {
-    return value instanceof Date && !isNaN(value.valueOf());
-};
-
-var stubTrue = function () { return true; };
-var stubUndefined = function () { return undefined; };
-
-var classNames = {
-    bind: function (stylesObj) {
-        return function () {
-            var params = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                params[_i] = arguments[_i];
-            }
-            return params
-                // avoid nullish
-                .filter(function (param) { return param != null; })
-                .map(function (cls) {
-                var _a;
-                if (typeof cls === 'string')
-                    return (_a = stylesObj[cls]) !== null && _a !== void 0 ? _a : cls;
-                return Object.entries(cls)
-                    .filter(function (_a) {
-                    var value = _a[1];
-                    return value;
-                })
-                    .map(function (_a) {
-                    var _b;
-                    var key = _a[0];
-                    return (_b = stylesObj[key]) !== null && _b !== void 0 ? _b : key;
-                })
-                    .join(' ');
-            })
-                .join(' ');
-        };
-    }
-};
-
 var styles$1G = {"magneto-ui-filter-item":"mg_filter_menu_item_magneto-ui-filter-item_m5cdm","selected":"mg_filter_menu_item_selected_m5cdm","disabled":"mg_filter_menu_item_disabled_m5cdm","isSearched":"mg_filter_menu_item_isSearched_m5cdm","skeleton":"mg_filter_menu_item_skeleton_m5cdm","shimmer":"mg_filter_menu_item_shimmer_m5cdm"};
 
 var FilterMenuItem = function (_a) {
@@ -6793,14 +6794,14 @@ var SelectContext = React.createContext({
 });
 var useSelectContext = function () { return useContext(SelectContext); };
 
-var styles$c = {"select-input":"mg_select_input_select-input_17ogp","select-input--no-placeholder":"mg_select_input_select-input--no-placeholder_17ogp","select-input--with-icon":"mg_select_input_select-input--with-icon_17ogp","select-button":"mg_select_input_select-button_17ogp","select-button__placeholder":"mg_select_input_select-button_placeholder_17ogp","select-button__placeholder--open":"mg_select_input_select-button_placeholder--open_17ogp","select-button__placeholder--selected":"mg_select_input_select-button_placeholder--selected_17ogp"};
+var styles$c = {"select-input":"mg_select_input_select-input_1mcnp","select-input--disabled":"mg_select_input_select-input--disabled_1mcnp","select-input--no-placeholder":"mg_select_input_select-input--no-placeholder_1mcnp","select-input--with-icon":"mg_select_input_select-input--with-icon_1mcnp","select-button":"mg_select_input_select-button_1mcnp","select-button--disabled":"mg_select_input_select-button--disabled_1mcnp","select-button__input":"mg_select_input_select-button_input_1mcnp","select-button__placeholder":"mg_select_input_select-button_placeholder_1mcnp","select-button__placeholder--open":"mg_select_input_select-button_placeholder--open_1mcnp","select-button__placeholder--selected":"mg_select_input_select-button_placeholder--selected_1mcnp","select-button__value":"mg_select_input_select-button_value_1mcnp"};
 
 var cx$5 = classNames.bind(styles$c);
 var getDefaulSelected = function (selected) {
     return selected.map(function (select) { return select.value; }).join(', ');
 };
 var Component$a = function (_a) {
-    var onChange = _a.onChange, value = _a.value, className = _a.className, onClick = _a.onClick, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.actionIcon, actionIcon = _c === void 0 ? ArrowDown2 : _c, selected = _a.selected, _d = _a.getLabel, getLabel = _d === void 0 ? getDefaulSelected : _d, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "value", "className", "onClick", "open", "actionIcon", "selected", "getLabel", "readOnly"]);
+    var onChange = _a.onChange, value = _a.value, className = _a.className, onClick = _a.onClick, _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.actionIcon, actionIcon = _c === void 0 ? ArrowDown2 : _c, selected = _a.selected, _d = _a.getLabel, getLabel = _d === void 0 ? getDefaulSelected : _d, readOnly = _a.readOnly, disabled = _a.disabled, rest = __rest(_a, ["onChange", "value", "className", "onClick", "open", "actionIcon", "selected", "getLabel", "readOnly", "disabled"]);
     var ref = useRef({ onChange: onChange, id: generateID() });
     useEffect(function () {
         ref.current.onChange = onChange;
@@ -6816,15 +6817,20 @@ var Component$a = function (_a) {
     if (!readOnly) {
         return (React.createElement("div", { className: cx$5('select-input', className, {
                 'select-input--with-icon': actionIcon !== undefined,
-                'select-input--no-placeholder': rest.placeholder.length === 0
-            }), onClick: onClick },
-            React.createElement(Input, __assign({ name: ref.current.id, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon }, rest))));
+                'select-input--no-placeholder': rest.placeholder.length === 0,
+                'select-input--disabled': disabled
+            }), onClick: function () { return (disabled ? null : onClick()); }, "data-name": "select-input", "data-selected": selected.length > 0, "data-is-open": open },
+            React.createElement(Input, __assign({ name: ref.current.id, disabled: disabled, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon }, rest))));
     }
-    return (React.createElement("button", { className: cx$5('select-button', className), onClick: onClick },
-        React.createElement("span", { className: cx$5('select-button__placeholder', {
-                'select-button__placeholder--selected': selected.length > 0,
-                'select-button__placeholder--open': open
-            }) }, open ? rest.placeholder : selected.length > 0 ? getLabel(selected) : rest.placeholder),
+    return (React.createElement("button", { className: cx$5('select-button', { 'select-button--disabled': disabled }, className), disabled: disabled, onClick: onClick, "data-name": "select-button", "data-selected": selected.length > 0, "data-is-open": open },
+        React.createElement("div", { className: cx$5('select-button__input') },
+            rest.placeholder.length > 0 ? (React.createElement("span", { className: cx$5('select-button__placeholder', {
+                    'select-button__placeholder--open': open,
+                    'select-button__placeholder--selected': selected.length > 0
+                }) }, rest.placeholder)) : null,
+            selected.length > 0 ? (React.createElement("span", { className: cx$5('select-button__value', {
+                    'select-button__placeholder--open': open
+                }) }, getLabel(selected))) : null),
         actionIcon ? React.createElement(IconItem, { icon: actionIcon, size: 20 }) : null));
 };
 var SelectInput = Component$a;
@@ -6879,7 +6885,7 @@ var Component$9 = function (_a) {
 };
 var Checkbox = Component$9;
 
-var styles$8 = {"select-list":"mg_select_list_check_select-list_1boet","select-list--visible":"mg_select_list_check_select-list--visible_1boet","select-list__item":"mg_select_list_check_select-list_item_1boet","select-list__checkbox":"mg_select_list_check_select-list_checkbox_1boet"};
+var styles$8 = {"select-list":"mg_select_list_check_select-list_g3qb1","select-list--visible":"mg_select_list_check_select-list--visible_g3qb1","select-list__item":"mg_select_list_check_select-list_item_g3qb1","select-list__checkbox":"mg_select_list_check_select-list_checkbox_g3qb1"};
 
 var cx$1 = classNames.bind(styles$8);
 var defaultRenderItem = function (option) { return React.createElement(React.Fragment, null, option.label); };
@@ -6917,24 +6923,26 @@ var defaultSelect = function (props) {
     return (React.createElement(Select.Input, __assign({ hideIcon: true, className: cx('select-input', { 'select-input--open': props.open }), actionIcon: ArrowDown2 }, props)));
 };
 var Component$7 = function (_a) {
-    var children = _a.children, _b = _a.renderSelect, renderSelect = _b === void 0 ? defaultSelect : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, options = _a.options, value = _a.value, _d = _a.onChange, onChange = _d === void 0 ? stubTrue : _d, _e = _a.inputReadonly, inputReadonly = _e === void 0 ? false : _e;
+    var children = _a.children, _b = _a.renderSelect, renderSelect = _b === void 0 ? defaultSelect : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, options = _a.options, value = _a.value, _d = _a.onChange, onChange = _d === void 0 ? stubTrue : _d, _e = _a.inputReadonly, inputReadonly = _e === void 0 ? false : _e, className = _a.className, getLabel = _a.getLabel;
     var _f = useState(false), open = _f[0], setOpen = _f[1];
     var _g = useState(''), search = _g[0], setSearch = _g[1];
     return (React.createElement(SelectContext.Provider, { value: { options: options, value: value, onSwitch: setOpen, onChange: onChange, search: search, open: open, onSearch: setSearch } },
-        renderSelect({
-            placeholder: placeholder,
-            readOnly: inputReadonly,
-            onChange: function (_a) {
-                var target = _a.target;
-                return setSearch(target.value);
-            },
-            type: 'text',
-            value: search,
-            open: open,
-            onClick: function () { return setOpen(true); },
-            selected: value
-        }),
-        React.createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children)));
+        React.createElement("div", { className: className },
+            renderSelect({
+                placeholder: placeholder,
+                readOnly: inputReadonly,
+                onChange: function (_a) {
+                    var target = _a.target;
+                    return setSearch(target.value);
+                },
+                type: 'text',
+                value: search,
+                open: open,
+                onClick: function () { return setOpen(true); },
+                selected: value,
+                getLabel: getLabel
+            }),
+            React.createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children))));
 };
 /**
  * @experimental this component is early, so that the interface component and behavrior could change.