magneto365.ui 2.48.1 → 2.48.4

package/dist/cjs/index.js

@@ -1154,7 +1154,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;
@@ -1187,16 +1187,16 @@ var Component$1S = function (_a) {
     return (React__default["default"].createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action', className] }) },
         React__default["default"].createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__container'] }) },
             React__default["default"].createElement(Component, __assign({}, componentProps),
-                (prefixIcon || loading) && React__default["default"].createElement(IconItem, __assign({ size: 18 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
+                (prefixIcon || loading) && React__default["default"].createElement(IconItem, __assign({ size: 12 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
                 React__default["default"].createElement("span", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__title'] }) }, title),
-                suffixIcon && React__default["default"].createElement(IconItem, __assign({ size: 18 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
+                suffixIcon && React__default["default"].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;
@@ -1294,7 +1294,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;
@@ -1402,7 +1402,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;
@@ -6803,14 +6803,14 @@ var SelectContext = React__default["default"].createContext({
 });
 var useSelectContext = function () { return React.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 _b = _a.onChange, onChange = _b === void 0 ? stubTrue : _b, _c = _a.value, value = _c === void 0 ? '' : _c, className = _a.className, _d = _a.onClick, onClick = _d === void 0 ? stubUndefined : _d, _e = _a.open, open = _e === void 0 ? false : _e, _f = _a.actionIcon, actionIcon = _f === void 0 ? ArrowDown2 : _f, _g = _a.selected, selected = _g === void 0 ? [] : _g, _h = _a.getLabel, getLabel = _h === void 0 ? getDefaulSelected : _h, readOnly = _a.readOnly, disabled = _a.disabled, _j = _a.placeholder, placeholder = _j === void 0 ? '' : _j, _k = _a.type, type = _k === void 0 ? 'text' : _k, rest = __rest(_a, ["onChange", "value", "className", "onClick", "open", "actionIcon", "selected", "getLabel", "readOnly", "disabled", "placeholder", "type"]);
     var ref = React.useRef({ onChange: onChange, id: generateID() });
     React.useEffect(function () {
         ref.current.onChange = onChange;
@@ -6826,15 +6826,20 @@ var Component$a = function (_a) {
     if (!readOnly) {
         return (React__default["default"].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__default["default"].createElement(Input, __assign({ name: ref.current.id, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon }, rest))));
+                'select-input--no-placeholder': 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__default["default"].createElement(Input, __assign({ name: ref.current.id, disabled: disabled, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon, placeholder: placeholder, type: type }, rest))));
     }
-    return (React__default["default"].createElement("button", { className: cx$5('select-button', className), onClick: onClick },
-        React__default["default"].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__default["default"].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, type: "button" },
+        React__default["default"].createElement("div", { className: cx$5('select-button__input') },
+            placeholder.length > 0 ? (React__default["default"].createElement("span", { className: cx$5('select-button__placeholder', {
+                    'select-button__placeholder--open': open,
+                    'select-button__placeholder--selected': selected.length > 0
+                }) }, placeholder)) : null,
+            selected.length > 0 ? (React__default["default"].createElement("span", { className: cx$5('select-button__value', {
+                    'select-button__placeholder--open': open
+                }) }, getLabel(selected))) : null),
         actionIcon ? React__default["default"].createElement(IconItem, { icon: actionIcon, size: 20 }) : null));
 };
 var SelectInput = Component$a;
@@ -6863,7 +6868,7 @@ var SelectClickout = function (_a) {
 };
 var SelectClickout$1 = withClickOut(SelectClickout);
 
-var styles$a = {"select-drawer":"mg_select_drawer_select-drawer_1d398"};
+var styles$a = {"select-drawer":"mg_select_drawer_select-drawer_tv0qc"};
 
 var cx$3 = classNames.bind(styles$a);
 var SelectDrawer = function (_a) {
@@ -6872,15 +6877,22 @@ var SelectDrawer = function (_a) {
     return (React__default["default"].createElement(MobileDrawer, { className: cx$3('select-drawer', className), isOpen: open, onClose: function () { return onSwitch(false); }, blockBackgroundClose: true }, children));
 };
 
-var styles$9 = {"checkbox":"mg_checkbox_checkbox_1fdbz","checkbox--inline":"mg_checkbox_checkbox--inline_1fdbz","checkbox--block":"mg_checkbox_checkbox--block_1fdbz","checkbox--checked":"mg_checkbox_checkbox--checked_1fdbz","checkbox--background":"mg_checkbox_checkbox--background_1fdbz","custom-checked":"mg_checkbox_custom-checked_1fdbz"};
+var styles$9 = {"checkbox":"mg_checkbox_checkbox_1h0ys","checkbox--inline":"mg_checkbox_checkbox--inline_1h0ys","checkbox--block":"mg_checkbox_checkbox--block_1h0ys","checkbox--background":"mg_checkbox_checkbox--background_1h0ys","checkbox--checked":"mg_checkbox_checkbox--checked_1h0ys","custom-checked":"mg_checkbox_custom-checked_1h0ys","checkbox__box":"mg_checkbox_checkbox_box_1h0ys","checkbox__box--checked":"mg_checkbox_checkbox_box--checked_1h0ys"};
 
 var cx$2 = classNames.bind(styles$9);
+var defaultCheck = function (_a) {
+    var type = _a.type, checked = _a.checked;
+    if (type === 'background')
+        return;
+    return (React__default["default"].createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$2('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React__default["default"].createElement(React__default["default"].Fragment, null, "\u2713") : null));
+};
 var Component$9 = function (_a) {
-    var id = _a.id, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? stubTrue : _b, children = _a.children, _c = _a.type, type = _c === void 0 ? 'box' : _c, className = _a.className, _d = _a.display, display = _d === void 0 ? 'inline' : _d, rest = __rest(_a, ["id", "checked", "onChange", "children", "type", "className", "display"]);
+    var id = _a.id, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? stubTrue : _b, children = _a.children, _c = _a.type, type = _c === void 0 ? 'box' : _c, className = _a.className, _d = _a.display, display = _d === void 0 ? 'inline' : _d, _e = _a.renderCheck, renderCheck = _e === void 0 ? defaultCheck : _e, rest = __rest(_a, ["id", "checked", "onChange", "children", "type", "className", "display", "renderCheck"]);
     return (React__default["default"].createElement("label", { className: cx$2('checkbox', "checkbox--".concat(display), className, {
             'checkbox--checked': checked,
             'checkbox--background': type === 'background'
         }), "data-name": "checkbox-container", htmlFor: id },
+        renderCheck({ checked: checked, type: type }),
         React__default["default"].createElement("input", __assign({ "data-name": "checkbox", checked: checked, onChange: function (_a) {
                 var target = _a.target;
                 return onChange(target.checked);
@@ -6889,7 +6901,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__default["default"].createElement(React__default["default"].Fragment, null, option.label); };
@@ -6927,24 +6939,26 @@ var defaultSelect = function (props) {
     return (React__default["default"].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 = React.useState(false), open = _f[0], setOpen = _f[1];
     var _g = React.useState(''), search = _g[0], setSearch = _g[1];
     return (React__default["default"].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__default["default"].createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children)));
+        React__default["default"].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__default["default"].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.