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/cjs/index.js
CHANGED
|
@@ -1154,7 +1154,7 @@ var EXPANDABLE_INFO_ACTION_ICONS = {
|
|
|
1154
1154
|
_c)
|
|
1155
1155
|
};
|
|
1156
1156
|
|
|
1157
|
-
var styles$1Q = {"magneto-ui-expandable-info-action__button":"mg_expandable_info_action_magneto-ui-expandable-info-
|
|
1157
|
+
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"};
|
|
1158
1158
|
|
|
1159
1159
|
var Component$1S = function (_a) {
|
|
1160
1160
|
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) {
|
|
|
1187
1187
|
return (React__default["default"].createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action', className] }) },
|
|
1188
1188
|
React__default["default"].createElement("div", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__container'] }) },
|
|
1189
1189
|
React__default["default"].createElement(Component, __assign({}, componentProps),
|
|
1190
|
-
(prefixIcon || loading) && React__default["default"].createElement(IconItem, __assign({ size:
|
|
1190
|
+
(prefixIcon || loading) && React__default["default"].createElement(IconItem, __assign({ size: 12 }, prefixIcon, { icon: icon(prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.icon) })),
|
|
1191
1191
|
React__default["default"].createElement("span", { className: CNM.get({ styles: styles$1Q, cls: ['expandable-info-action__title'] }) }, title),
|
|
1192
|
-
suffixIcon && React__default["default"].createElement(IconItem, __assign({ size:
|
|
1192
|
+
suffixIcon && React__default["default"].createElement(IconItem, __assign({ size: 12 }, suffixIcon, { icon: icon(suffixIcon.icon) }))))));
|
|
1193
1193
|
};
|
|
1194
1194
|
/**
|
|
1195
1195
|
* Molecule UI child component of expandable info
|
|
1196
1196
|
*/
|
|
1197
1197
|
var ExpandableInfoAction = Component$1S;
|
|
1198
1198
|
|
|
1199
|
-
var styles$1P = {"magneto-ui-expandable-info-details__container":"mg_expandable_info_details_magneto-ui-expandable-info-
|
|
1199
|
+
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"};
|
|
1200
1200
|
|
|
1201
1201
|
var Component$1R = function (_a) {
|
|
1202
1202
|
var sections = _a.sections, footer = _a.footer;
|
|
@@ -1294,7 +1294,7 @@ var Component$1Q = function (_a) {
|
|
|
1294
1294
|
*/
|
|
1295
1295
|
var ExpandableInfoMessage = Component$1Q;
|
|
1296
1296
|
|
|
1297
|
-
var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-
|
|
1297
|
+
var styles$1N = {"magneto-ui-expandable-info-modal":"mg_expandable_info_modal_magneto-ui-expandable-info-modal_56w98"};
|
|
1298
1298
|
|
|
1299
1299
|
var Component$1P = function (_a) {
|
|
1300
1300
|
var toggler = _a.toggler, details = _a.details;
|
|
@@ -1402,7 +1402,7 @@ var EXPANDABLE_INFO_TOGGLER_ICONS = {
|
|
|
1402
1402
|
coin: CoinBlackOutline
|
|
1403
1403
|
};
|
|
1404
1404
|
|
|
1405
|
-
var styles$1I = {"magneto-ui-expandable-info-toggler__container":"mg_expandable_info_toggler_magneto-ui-expandable-info-
|
|
1405
|
+
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"};
|
|
1406
1406
|
|
|
1407
1407
|
var Component$1N = function (_a) {
|
|
1408
1408
|
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({
|
|
|
6803
6803
|
});
|
|
6804
6804
|
var useSelectContext = function () { return React.useContext(SelectContext); };
|
|
6805
6805
|
|
|
6806
|
-
var styles$c = {"select-input":"mg_select_input_select-
|
|
6806
|
+
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"};
|
|
6807
6807
|
|
|
6808
6808
|
var cx$5 = classNames.bind(styles$c);
|
|
6809
6809
|
var getDefaulSelected = function (selected) {
|
|
6810
6810
|
return selected.map(function (select) { return select.value; }).join(', ');
|
|
6811
6811
|
};
|
|
6812
6812
|
var Component$a = function (_a) {
|
|
6813
|
-
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"]);
|
|
6813
|
+
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"]);
|
|
6814
6814
|
var ref = React.useRef({ onChange: onChange, id: generateID() });
|
|
6815
6815
|
React.useEffect(function () {
|
|
6816
6816
|
ref.current.onChange = onChange;
|
|
@@ -6826,15 +6826,20 @@ var Component$a = function (_a) {
|
|
|
6826
6826
|
if (!readOnly) {
|
|
6827
6827
|
return (React__default["default"].createElement("div", { className: cx$5('select-input', className, {
|
|
6828
6828
|
'select-input--with-icon': actionIcon !== undefined,
|
|
6829
|
-
'select-input--no-placeholder': rest.placeholder.length === 0
|
|
6830
|
-
|
|
6831
|
-
|
|
6829
|
+
'select-input--no-placeholder': rest.placeholder.length === 0,
|
|
6830
|
+
'select-input--disabled': disabled
|
|
6831
|
+
}), onClick: function () { return (disabled ? null : onClick()); }, "data-name": "select-input", "data-selected": selected.length > 0, "data-is-open": open },
|
|
6832
|
+
React__default["default"].createElement(Input, __assign({ name: ref.current.id, disabled: disabled, value: open ? value : getLabel(selected), onChange: onChange, actionIcon: actionIcon }, rest))));
|
|
6832
6833
|
}
|
|
6833
|
-
return (React__default["default"].createElement("button", { className: cx$5('select-button', className), onClick: onClick },
|
|
6834
|
-
React__default["default"].createElement("
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6834
|
+
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 },
|
|
6835
|
+
React__default["default"].createElement("div", { className: cx$5('select-button__input') },
|
|
6836
|
+
rest.placeholder.length > 0 ? (React__default["default"].createElement("span", { className: cx$5('select-button__placeholder', {
|
|
6837
|
+
'select-button__placeholder--open': open,
|
|
6838
|
+
'select-button__placeholder--selected': selected.length > 0
|
|
6839
|
+
}) }, rest.placeholder)) : null,
|
|
6840
|
+
selected.length > 0 ? (React__default["default"].createElement("span", { className: cx$5('select-button__value', {
|
|
6841
|
+
'select-button__placeholder--open': open
|
|
6842
|
+
}) }, getLabel(selected))) : null),
|
|
6838
6843
|
actionIcon ? React__default["default"].createElement(IconItem, { icon: actionIcon, size: 20 }) : null));
|
|
6839
6844
|
};
|
|
6840
6845
|
var SelectInput = Component$a;
|
|
@@ -6889,7 +6894,7 @@ var Component$9 = function (_a) {
|
|
|
6889
6894
|
};
|
|
6890
6895
|
var Checkbox = Component$9;
|
|
6891
6896
|
|
|
6892
|
-
var styles$8 = {"select-list":"mg_select_list_check_select-
|
|
6897
|
+
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"};
|
|
6893
6898
|
|
|
6894
6899
|
var cx$1 = classNames.bind(styles$8);
|
|
6895
6900
|
var defaultRenderItem = function (option) { return React__default["default"].createElement(React__default["default"].Fragment, null, option.label); };
|
|
@@ -6927,24 +6932,26 @@ var defaultSelect = function (props) {
|
|
|
6927
6932
|
return (React__default["default"].createElement(Select.Input, __assign({ hideIcon: true, className: cx('select-input', { 'select-input--open': props.open }), actionIcon: ArrowDown2 }, props)));
|
|
6928
6933
|
};
|
|
6929
6934
|
var Component$7 = function (_a) {
|
|
6930
|
-
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;
|
|
6935
|
+
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;
|
|
6931
6936
|
var _f = React.useState(false), open = _f[0], setOpen = _f[1];
|
|
6932
6937
|
var _g = React.useState(''), search = _g[0], setSearch = _g[1];
|
|
6933
6938
|
return (React__default["default"].createElement(SelectContext.Provider, { value: { options: options, value: value, onSwitch: setOpen, onChange: onChange, search: search, open: open, onSearch: setSearch } },
|
|
6934
|
-
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6940
|
-
|
|
6941
|
-
|
|
6942
|
-
|
|
6943
|
-
|
|
6944
|
-
|
|
6945
|
-
|
|
6946
|
-
|
|
6947
|
-
|
|
6939
|
+
React__default["default"].createElement("div", { className: className },
|
|
6940
|
+
renderSelect({
|
|
6941
|
+
placeholder: placeholder,
|
|
6942
|
+
readOnly: inputReadonly,
|
|
6943
|
+
onChange: function (_a) {
|
|
6944
|
+
var target = _a.target;
|
|
6945
|
+
return setSearch(target.value);
|
|
6946
|
+
},
|
|
6947
|
+
type: 'text',
|
|
6948
|
+
value: search,
|
|
6949
|
+
open: open,
|
|
6950
|
+
onClick: function () { return setOpen(true); },
|
|
6951
|
+
selected: value,
|
|
6952
|
+
getLabel: getLabel
|
|
6953
|
+
}),
|
|
6954
|
+
React__default["default"].createElement("div", { className: cx('select__list-container'), "data-name": "select-list-container" }, children))));
|
|
6948
6955
|
};
|
|
6949
6956
|
/**
|
|
6950
6957
|
* @experimental this component is early, so that the interface component and behavrior could change.
|