magneto365.ui 2.48.1 → 2.48.3
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 +39 -32
- package/dist/cjs/index.js.map +1 -1
- 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/esm/css/magneto.ui.lib.min.css +1 -1
- package/dist/esm/index.js +39 -32
- package/dist/esm/index.js.map +1 -1
- 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/index.d.ts +7 -4
- 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 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"]);
|
|
6804
|
+
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"]);
|
|
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': rest.placeholder.length === 0
|
|
6821
|
-
|
|
6822
|
-
|
|
6820
|
+
'select-input--no-placeholder': rest.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 }, 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 },
|
|
6826
|
+
React.createElement("div", { className: cx$5('select-button__input') },
|
|
6827
|
+
rest.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
|
+
}) }, rest.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;
|
|
@@ -6880,7 +6885,7 @@ var Component$9 = function (_a) {
|
|
|
6880
6885
|
};
|
|
6881
6886
|
var Checkbox = Component$9;
|
|
6882
6887
|
|
|
6883
|
-
var styles$8 = {"select-list":"mg_select_list_check_select-
|
|
6888
|
+
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
6889
|
|
|
6885
6890
|
var cx$1 = classNames.bind(styles$8);
|
|
6886
6891
|
var defaultRenderItem = function (option) { return React.createElement(React.Fragment, null, option.label); };
|
|
@@ -6918,24 +6923,26 @@ var defaultSelect = function (props) {
|
|
|
6918
6923
|
return (React.createElement(Select.Input, __assign({ hideIcon: true, className: cx('select-input', { 'select-input--open': props.open }), actionIcon: ArrowDown2 }, props)));
|
|
6919
6924
|
};
|
|
6920
6925
|
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;
|
|
6926
|
+
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
6927
|
var _f = useState(false), open = _f[0], setOpen = _f[1];
|
|
6923
6928
|
var _g = useState(''), search = _g[0], setSearch = _g[1];
|
|
6924
6929
|
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
|
-
|
|
6930
|
+
React.createElement("div", { className: className },
|
|
6931
|
+
renderSelect({
|
|
6932
|
+
placeholder: placeholder,
|
|
6933
|
+
readOnly: inputReadonly,
|
|
6934
|
+
onChange: function (_a) {
|
|
6935
|
+
var target = _a.target;
|
|
6936
|
+
return setSearch(target.value);
|
|
6937
|
+
},
|
|
6938
|
+
type: 'text',
|
|
6939
|
+
value: search,
|
|
6940
|
+
open: open,
|
|
6941
|
+
onClick: function () { return setOpen(true); },
|
|
6942
|
+
selected: value,
|
|
6943
|
+
getLabel: getLabel
|
|
6944
|
+
}),
|
|
6945
|
+
React.createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children))));
|
|
6939
6946
|
};
|
|
6940
6947
|
/**
|
|
6941
6948
|
* @experimental this component is early, so that the interface component and behavrior could change.
|