magneto365.ui 2.48.1 → 2.48.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/css/magneto.ui.lib.min.css +1 -1
- package/dist/cjs/index.js +49 -35
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/UI/atoms/Checkbox/Checkbox.interface.d.ts +9 -0
- package/dist/cjs/types/components/UI/organism/Select/Select.component.d.ts +5 -4
- package/dist/cjs/types/components/UI/organism/Select/Select.interface.d.ts +2 -0
- package/dist/cjs/types/components/UI/organism/Select/children/SelectClickout/SelectClickout.component.d.ts +2 -1
- package/dist/cjs/types/components/UI/organism/Select/children/SelectInput/SelectInput.component.d.ts +1 -1
- package/dist/cjs/types/components/UI/organism/Select/children/SelectInput/SelectInput.interface.d.ts +14 -6
- package/dist/esm/css/magneto.ui.lib.min.css +1 -1
- package/dist/esm/index.js +49 -35
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/UI/atoms/Checkbox/Checkbox.interface.d.ts +9 -0
- package/dist/esm/types/components/UI/organism/Select/Select.component.d.ts +5 -4
- package/dist/esm/types/components/UI/organism/Select/Select.interface.d.ts +2 -0
- package/dist/esm/types/components/UI/organism/Select/children/SelectClickout/SelectClickout.component.d.ts +2 -1
- package/dist/esm/types/components/UI/organism/Select/children/SelectInput/SelectInput.component.d.ts +1 -1
- package/dist/esm/types/components/UI/organism/Select/children/SelectInput/SelectInput.interface.d.ts +14 -6
- package/dist/index.d.ts +20 -10
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1145,7 +1145,7 @@ var EXPANDABLE_INFO_ACTION_ICONS = {
|
|
|
1145
1145
|
_c)
|
|
1146
1146
|
};
|
|
1147
1147
|
|
|
1148
|
-
var styles$1Q = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-
|
|
1148
|
+
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"};
|
|
1149
1149
|
|
|
1150
1150
|
var Component$1S = function (_a) {
|
|
1151
1151
|
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;
|
|
@@ -1178,16 +1178,16 @@ var Component$1S = function (_a) {
|
|
|
1178
1178
|
return (React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action', className] }) },
|
|
1179
1179
|
React.createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__container'] }) },
|
|
1180
1180
|
React.createElement(Component, __assign({}, componentProps),
|
|
1181
|
-
(prefixIcon || loading) && React.createElement(IconItem, __assign({ size:
|
|
1181
|
+
(prefixIcon || loading) && React.createElement(IconItem, __assign({ size: 12 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
|
|
1182
1182
|
React.createElement("span", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__title'] }) }, title),
|
|
1183
|
-
suffixIcon && React.createElement(IconItem, __assign({ size:
|
|
1183
|
+
suffixIcon && React.createElement(IconItem, __assign({ size: 12 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
|
|
1184
1184
|
};
|
|
1185
1185
|
/**
|
|
1186
1186
|
* Molecule UI child component of expandable info
|
|
1187
1187
|
*/
|
|
1188
1188
|
var ExpandableInfoAction = Component$1S;
|
|
1189
1189
|
|
|
1190
|
-
var styles$1P = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-
|
|
1190
|
+
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"};
|
|
1191
1191
|
|
|
1192
1192
|
var Component$1R = function (_a) {
|
|
1193
1193
|
var sections = _a.sections, footer = _a.footer;
|
|
@@ -1285,7 +1285,7 @@ var Component$1Q = function (_a) {
|
|
|
1285
1285
|
*/
|
|
1286
1286
|
var ExpandableInfoMessage = Component$1Q;
|
|
1287
1287
|
|
|
1288
|
-
var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-
|
|
1288
|
+
var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_56w98"};
|
|
1289
1289
|
|
|
1290
1290
|
var Component$1P = function (_a) {
|
|
1291
1291
|
var toggler = _a.toggler, details = _a.details;
|
|
@@ -1393,7 +1393,7 @@ var EXPANDABLE_INFO_TOGGLER_ICONS = {
|
|
|
1393
1393
|
coin: CoinBlackOutline
|
|
1394
1394
|
};
|
|
1395
1395
|
|
|
1396
|
-
var styles$1I = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-
|
|
1396
|
+
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"};
|
|
1397
1397
|
|
|
1398
1398
|
var Component$1N = function (_a) {
|
|
1399
1399
|
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;
|
|
@@ -6794,14 +6794,14 @@ var SelectContext = React.createContext({
|
|
|
6794
6794
|
});
|
|
6795
6795
|
var useSelectContext = function () { return useContext(SelectContext); };
|
|
6796
6796
|
|
|
6797
|
-
var styles$c = {"select-input":"mg_select_input_select-
|
|
6797
|
+
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"};
|
|
6798
6798
|
|
|
6799
6799
|
var cx$5 = classNames.bind(styles$c);
|
|
6800
6800
|
var getDefaulSelected = function (selected) {
|
|
6801
6801
|
return selected.map(function (select) { return select.value; }).join(', ');
|
|
6802
6802
|
};
|
|
6803
6803
|
var Component$a = function (_a) {
|
|
6804
|
-
var
|
|
6804
|
+
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"]);
|
|
6805
6805
|
var ref = useRef({ onChange: onChange, id: generateID() });
|
|
6806
6806
|
useEffect(function () {
|
|
6807
6807
|
ref.current.onChange = onChange;
|
|
@@ -6817,15 +6817,20 @@ var Component$a = function (_a) {
|
|
|
6817
6817
|
if (!readOnly) {
|
|
6818
6818
|
return (React.createElement("div", { className: cx$5('select-input', className, {
|
|
6819
6819
|
'select-input--with-icon': actionIcon !== undefined,
|
|
6820
|
-
'select-input--no-placeholder':
|
|
6821
|
-
|
|
6822
|
-
|
|
6820
|
+
'select-input--no-placeholder': placeholder.length === 0,
|
|
6821
|
+
'select-input--disabled': disabled
|
|
6822
|
+
}), onClick: function () { return (disabled ? null : onClick()); }, "data-name": "select-input", "data-selected": selected.length > 0, "data-is-open": open },
|
|
6823
|
+
React.createElement(Input, __assign({ name: ref.current.id, disabled: disabled, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon, placeholder: placeholder, type: type }, rest))));
|
|
6823
6824
|
}
|
|
6824
|
-
return (React.createElement("button", { className: cx$5('select-button', className), onClick: onClick },
|
|
6825
|
-
React.createElement("
|
|
6826
|
-
|
|
6827
|
-
|
|
6828
|
-
|
|
6825
|
+
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, type: "button" },
|
|
6826
|
+
React.createElement("div", { className: cx$5('select-button__input') },
|
|
6827
|
+
placeholder.length > 0 ? (React.createElement("span", { className: cx$5('select-button__placeholder', {
|
|
6828
|
+
'select-button__placeholder--open': open,
|
|
6829
|
+
'select-button__placeholder--selected': selected.length > 0
|
|
6830
|
+
}) }, placeholder)) : null,
|
|
6831
|
+
selected.length > 0 ? (React.createElement("span", { className: cx$5('select-button__value', {
|
|
6832
|
+
'select-button__placeholder--open': open
|
|
6833
|
+
}) }, getLabel(selected))) : null),
|
|
6829
6834
|
actionIcon ? React.createElement(IconItem, { icon: actionIcon, size: 20 }) : null));
|
|
6830
6835
|
};
|
|
6831
6836
|
var SelectInput = Component$a;
|
|
@@ -6854,7 +6859,7 @@ var SelectClickout = function (_a) {
|
|
|
6854
6859
|
};
|
|
6855
6860
|
var SelectClickout$1 = withClickOut(SelectClickout);
|
|
6856
6861
|
|
|
6857
|
-
var styles$a = {"select-drawer":"mg_select_drawer_select-
|
|
6862
|
+
var styles$a = {"select-drawer":"mg_select_drawer_select-drawer_tv0qc"};
|
|
6858
6863
|
|
|
6859
6864
|
var cx$3 = classNames.bind(styles$a);
|
|
6860
6865
|
var SelectDrawer = function (_a) {
|
|
@@ -6863,15 +6868,22 @@ var SelectDrawer = function (_a) {
|
|
|
6863
6868
|
return (React.createElement(MobileDrawer, { className: cx$3('select-drawer', className), isOpen: open, onClose: function () { return onSwitch(false); }, blockBackgroundClose: true }, children));
|
|
6864
6869
|
};
|
|
6865
6870
|
|
|
6866
|
-
var styles$9 = {"checkbox":"
|
|
6871
|
+
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"};
|
|
6867
6872
|
|
|
6868
6873
|
var cx$2 = classNames.bind(styles$9);
|
|
6874
|
+
var defaultCheck = function (_a) {
|
|
6875
|
+
var type = _a.type, checked = _a.checked;
|
|
6876
|
+
if (type === 'background')
|
|
6877
|
+
return;
|
|
6878
|
+
return (React.createElement("div", { "aria-checked": checked, role: "checkbox", className: cx$2('checkbox__box', { 'checkbox__box--checked': checked }) }, checked ? React.createElement(React.Fragment, null, "\u2713") : null));
|
|
6879
|
+
};
|
|
6869
6880
|
var Component$9 = function (_a) {
|
|
6870
|
-
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"]);
|
|
6881
|
+
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"]);
|
|
6871
6882
|
return (React.createElement("label", { className: cx$2('checkbox', "checkbox--".concat(display), className, {
|
|
6872
6883
|
'checkbox--checked': checked,
|
|
6873
6884
|
'checkbox--background': type === 'background'
|
|
6874
6885
|
}), "data-name": "checkbox-container", htmlFor: id },
|
|
6886
|
+
renderCheck({ checked: checked, type: type }),
|
|
6875
6887
|
React.createElement("input", __assign({ "data-name": "checkbox", checked: checked, onChange: function (_a) {
|
|
6876
6888
|
var target = _a.target;
|
|
6877
6889
|
return onChange(target.checked);
|
|
@@ -6880,7 +6892,7 @@ var Component$9 = function (_a) {
|
|
|
6880
6892
|
};
|
|
6881
6893
|
var Checkbox = Component$9;
|
|
6882
6894
|
|
|
6883
|
-
var styles$8 = {"select-list":"mg_select_list_check_select-
|
|
6895
|
+
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"};
|
|
6884
6896
|
|
|
6885
6897
|
var cx$1 = classNames.bind(styles$8);
|
|
6886
6898
|
var defaultRenderItem = function (option) { return React.createElement(React.Fragment, null, option.label); };
|
|
@@ -6918,24 +6930,26 @@ var defaultSelect = function (props) {
|
|
|
6918
6930
|
return (React.createElement(Select.Input, __assign({ hideIcon: true, className: cx('select-input', { 'select-input--open': props.open }), actionIcon: ArrowDown2 }, props)));
|
|
6919
6931
|
};
|
|
6920
6932
|
var Component$7 = function (_a) {
|
|
6921
|
-
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;
|
|
6933
|
+
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;
|
|
6922
6934
|
var _f = useState(false), open = _f[0], setOpen = _f[1];
|
|
6923
6935
|
var _g = useState(''), search = _g[0], setSearch = _g[1];
|
|
6924
6936
|
return (React.createElement(SelectContext.Provider, { value: { options: options, value: value, onSwitch: setOpen, onChange: onChange, search: search, open: open, onSearch: setSearch } },
|
|
6925
|
-
|
|
6926
|
-
|
|
6927
|
-
|
|
6928
|
-
|
|
6929
|
-
|
|
6930
|
-
|
|
6931
|
-
|
|
6932
|
-
|
|
6933
|
-
|
|
6934
|
-
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6937
|
+
React.createElement("div", { className: className },
|
|
6938
|
+
renderSelect({
|
|
6939
|
+
placeholder: placeholder,
|
|
6940
|
+
readOnly: inputReadonly,
|
|
6941
|
+
onChange: function (_a) {
|
|
6942
|
+
var target = _a.target;
|
|
6943
|
+
return setSearch(target.value);
|
|
6944
|
+
},
|
|
6945
|
+
type: 'text',
|
|
6946
|
+
value: search,
|
|
6947
|
+
open: open,
|
|
6948
|
+
onClick: function () { return setOpen(true); },
|
|
6949
|
+
selected: value,
|
|
6950
|
+
getLabel: getLabel
|
|
6951
|
+
}),
|
|
6952
|
+
React.createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children))));
|
|
6939
6953
|
};
|
|
6940
6954
|
/**
|
|
6941
6955
|
* @experimental this component is early, so that the interface component and behavrior could change.
|