@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/components/src/components/Molecules/Terms/Terms.js

@@ -1,32 +1,19 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Terms = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var toolbox_1 = require("../../../toolbox");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var vertical = _a.vertical, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const toolbox_1 = require("../../../toolbox");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ vertical, theme }) => {
     return (0, react_1.css)({
         '.ss__terms__title': {
             fontWeight: 'normal',
@@ -59,81 +46,79 @@ var defaultStyles = function (_a) {
                 '&.ss__terms__option--active': {
                     a: {
                         fontWeight: 'bold',
-                        color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary,
+                        color: theme?.variables?.colors?.primary,
                     },
                 },
             },
         },
     });
 };
-var escapeRegExp = function (string) {
-    return string === null || string === void 0 ? void 0 : string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const escapeRegExp = (string) => {
+    return string?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
-var emIfyTerm = function (term, search) {
+const emIfyTerm = (term, search) => {
     if (term && search) {
-        var match = term.match(escapeRegExp(search));
+        const match = term.match(escapeRegExp(search));
         if (search && term && match && typeof match.index == 'number') {
-            var beforeMatch = term.slice(0, match.index);
-            var afterMatch = term.slice(match.index + search.length, term.length);
-            return "".concat(beforeMatch ? "<em>".concat(beforeMatch, "</em>") : '').concat(search).concat(afterMatch ? "<em>".concat(afterMatch, "</em>") : '');
+            const beforeMatch = term.slice(0, match.index);
+            const afterMatch = term.slice(match.index + search.length, term.length);
+            return `${beforeMatch ? `<em>${beforeMatch}</em>` : ''}${search}${afterMatch ? `<em>${afterMatch}</em>` : ''}`;
         }
     }
-    return "<em>".concat(term, "</em>");
+    return `<em>${term}</em>`;
 };
-exports.Terms = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Terms = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         vertical: true,
         previewOnHover: true,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('terms', globalTheme, defaultProps, properties);
-    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller;
-    var currentInput = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.input;
-    var terms = props.terms;
-    var _c = (0, hooks_1.useCustomComponentOverride)('terms', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('terms', globalTheme, defaultProps, properties);
+    const { title, onTermClick, limit, previewOnHover, emIfy, className, internalClassName, controller } = props;
+    const currentInput = controller?.store?.state?.input;
+    const terms = props.terms;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('terms', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var termClickEvent = function (e, term) {
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const termClickEvent = (e, term) => {
         onTermClick && onTermClick(e, term);
         // remove focus from input (close the autocomplete)
-        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+        controller?.setFocused && controller?.setFocused();
     };
-    var termsToShow = limit ? terms === null || terms === void 0 ? void 0 : terms.slice(0, limit) : terms;
+    const termsToShow = limit ? terms?.slice(0, limit) : terms;
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         title: {
             value: title,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedTitleLang = (0, hooks_1.useLang)({ title: lang.title }, {
-        controller: controller,
-    });
-    return (termsToShow === null || termsToShow === void 0 ? void 0 : termsToShow.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__terms', className, internalClassName), children: [title ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__terms__title", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, mergedTitleLang.title.all)) })) : null, (0, jsx_runtime_1.jsx)("ul", { className: "ss__terms__options", "aria-label": title, children: termsToShow === null || termsToShow === void 0 ? void 0 : termsToShow.map(function (term, idx) {
-                        var _a;
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedTitleLang = (0, hooks_1.useLang)({ title: lang.title }, {
+        controller,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return termsToShow?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__terms', className, internalClassName), children: [title ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__terms__title", children: (0, jsx_runtime_1.jsx)("h5", { ...mergedTitleLang.title.all }) })) : null, (0, jsx_runtime_1.jsx)("ul", { className: "ss__terms__options", "aria-label": title, children: termsToShow?.map((term, idx) => {
                         //initialize lang
-                        var defaultTermLang = {
+                        const defaultTermLang = {
                             term: {
-                                value: "".concat(emIfy ? emIfyTerm(term.value, currentInput || '') : term.value),
+                                value: `${emIfy ? emIfyTerm(term.value, currentInput || '') : term.value}`,
                                 attributes: {
-                                    'aria-label': "".concat(title ? title : '', " item ").concat(idx + 1, " of ").concat(termsToShow.length, ", ").concat(term.value),
+                                    'aria-label': `${title ? title : ''} item ${idx + 1} of ${termsToShow.length}, ${term.value}`,
                                 },
                             },
                         };
-                        var termLang = (0, deepmerge_1.default)(defaultTermLang, props.lang || {});
-                        var mergedTermLang = (0, hooks_1.useLang)({ term: termLang.term }, {
+                        const termLang = (0, deepmerge_1.default)(defaultTermLang, props.lang || {});
+                        const mergedTermLang = (0, hooks_1.useLang)({ term: termLang.term }, {
                             index: idx,
                             numberOfTerms: termsToShow.length,
                             term: term,
-                        });
+                        }, { activeBreakpoint: globalTheme?.activeBreakpoint });
                         return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('ss__terms__option', {
                                 'ss__terms__option--active': term.active,
-                            }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e, term); }, href: term.url.href }, (previewOnHover ? (0, toolbox_1.createHoverProps)(term.preview) : {}), (_a = mergedTermLang.term) === null || _a === void 0 ? void 0 : _a.all)) }));
-                    }) })] })) })) : null;
+                            }), children: (0, jsx_runtime_1.jsx)("a", { onClick: (e) => termClickEvent(e, term), href: term.url.href, ...(previewOnHover ? (0, toolbox_1.createHoverProps)(term.preview) : {}), ...mergedTermLang.term?.all }) }));
+                    }) })] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/VariantSelection/VariantSelection.js

@@ -1,33 +1,22 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariantSelection = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var List_1 = require("../List");
-var Swatches_1 = require("../Swatches");
-var Dropdown_1 = require("../../Atoms/Dropdown");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_1 = require("../../../hooks");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const List_1 = require("../List");
+const Swatches_1 = require("../Swatches");
+const Dropdown_1 = require("../../Atoms/Dropdown");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_1 = require("../../../hooks");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const defaultStyles = () => {
     return (0, react_1.css)({
         '.ss__variant-selection__dropdown': {
             '.ss__dropdown__button': {
@@ -43,7 +32,7 @@ var defaultStyles = function () {
         },
     });
 };
-var dropdownContentStyles = function () {
+const dropdownContentStyles = () => {
     return (0, react_1.css)({
         margin: '0px',
         padding: '5px',
@@ -71,21 +60,21 @@ var dropdownContentStyles = function () {
         },
     });
 };
-exports.VariantSelection = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.VariantSelection = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         name: (0, snap_toolbox_1.fieldNameToComponentName)(properties.selection.field),
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('variantSelection', globalTheme, defaultProps, properties);
-    var selection = props.selection, onSelect = props.onSelect, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _a = (0, hooks_1.useCustomComponentOverride)('variantSelection', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('variantSelection', globalTheme, defaultProps, properties);
+    const { selection, onSelect, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('variantSelection', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var type = props.type;
+    let type = props.type;
     if (!type) {
         if (selection.type == 'swatch') {
             type = 'swatches';
@@ -94,70 +83,99 @@ exports.VariantSelection = (0, mobx_react_lite_1.observer)(function (properties)
             type = 'dropdown';
         }
     }
-    var onSelectHandler = function (e, option) {
+    const onSelectHandler = (e, option) => {
         if (onSelect) {
             onSelect(e, option);
         }
         selection.select(option.value);
     };
-    var subProps = {
-        dropdown: __assign(__assign({ internalClassName: 'ss__variant-selection__dropdown', usePortal: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        dropdown: {
+            internalClassName: 'ss__variant-selection__dropdown',
+            usePortal: true,
+            // TODO: label doesnt exist on dropdown?
+            // label: selection.label || selection.field,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        icon: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            internalClassName: 'ss__variant-selection__icon', size: '12px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__variant-selection__icon',
+            size: '12px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        list: __assign(__assign({ titleText: selection.field, internalClassName: 'ss__variant-selection__list', multiSelect: false, hideOptionCheckboxes: true, onSelect: function (e, option) { return onSelectHandler(e, option); }, selected: selection.selected }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        list: {
+            titleText: selection.field,
+            internalClassName: 'ss__variant-selection__list',
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            onSelect: (e, option) => onSelectHandler(e, option),
+            selected: selection.selected,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        swatches: __assign(__assign({ internalClassName: 'ss__variant-selection__swatches', onSelect: function (e, option) { return onSelectHandler(e, option); }, selected: selection.selected }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        swatches: {
+            internalClassName: 'ss__variant-selection__swatches',
+            onSelect: (e, option) => onSelectHandler(e, option),
+            selected: selection.selected,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //since the dropdown is rendered in a portal, it needs its own emotion styles
-    var dropdownStyles = (0, utilities_1.mergeStyles)(props, dropdownContentStyles);
-    var DropdownContent = function (props) {
-        var toggleOpen = props.toggleOpen;
-        return ((0, jsx_runtime_1.jsx)("ul", __assign({}, dropdownStyles, { className: "ss__variant-selection__options", ref: function (e) { return (0, hooks_1.useA11y)(e, -1, true, function () { return toggleOpen(); }); }, children: selection.values.map(function (val) {
-                var _a;
-                var selected = ((_a = selection.selected) === null || _a === void 0 ? void 0 : _a.value) == val.value;
-                return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)("ss__variant-selection__option", {
+    const dropdownStyles = (0, utilities_1.mergeStyles)(props, dropdownContentStyles);
+    const DropdownContent = (props) => {
+        const { toggleOpen } = props;
+        return ((0, jsx_runtime_1.jsx)("ul", { ...dropdownStyles, className: "ss__variant-selection__options", ref: (e) => (0, hooks_1.useA11y)(e, -1, true, () => toggleOpen()), children: selection.values.map((val) => {
+                const selected = selection.selected?.value == val.value;
+                return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)(`ss__variant-selection__option`, {
                         'ss__variant-selection__option--selected': selected,
                         'ss__variant-selection__option--disabled': val.disabled,
                         'ss__variant-selection__option--unavailable': val.available === false,
-                    }), onClick: function (e) { return !val.disabled && onSelectHandler(e, val); }, ref: function (e) { return (0, hooks_1.useA11y)(e); }, "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
-            }) })));
+                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => (0, hooks_1.useA11y)(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+            }) }));
     };
-    return selection.values.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__variant-selection', "ss__variant-selection--".concat(type), "ss__variant-selection--".concat(selection.field), className, internalClassName), children: (function () {
+    return selection.values.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {
                 switch (type) {
                     case 'dropdown':
-                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (function () {
+                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (() => {
                                 //todo prettify the button
-                                var Button = function (props) {
-                                    var open = props.open;
-                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__dropdown__button-wrapper", children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__dropdown__button-wrapper__label", children: selection.label }), selection.selected ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__dropdown__button-wrapper__selection", children: ["(", selection.selected.value, ")"] })) : null] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: open ? 'angle-up' : 'angle-down' }, subProps.icon, { treePath: props.treePath }))] }));
+                                const Button = (props) => {
+                                    const { open } = props;
+                                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__dropdown__button-wrapper", children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__dropdown__button-wrapper__label", children: selection.label }), selection.selected ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__dropdown__button-wrapper__selection", children: ["(", selection.selected.value, ")"] })) : null] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: open ? 'angle-up' : 'angle-down', ...subProps.icon, treePath: props.treePath })] }));
                                 };
-                                return (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({ button: (0, jsx_runtime_1.jsx)(Button, { treePath: treePath }) }, subProps.dropdown, { content: (0, jsx_runtime_1.jsx)(DropdownContent, {}) }));
+                                return (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { button: (0, jsx_runtime_1.jsx)(Button, { treePath: treePath }), ...subProps.dropdown, content: (0, jsx_runtime_1.jsx)(DropdownContent, {}) });
                             })() }));
                     case 'list':
-                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (function () {
-                                return (0, jsx_runtime_1.jsx)(List_1.List, __assign({}, subProps.list, { options: selection.values }));
+                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (() => {
+                                return (0, jsx_runtime_1.jsx)(List_1.List, { ...subProps.list, options: selection.values });
                             })() }));
                     case 'swatches':
-                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (function () {
-                                return (0, jsx_runtime_1.jsx)(Swatches_1.Swatches, __assign({}, subProps.swatches, { options: selection.values }));
+                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (() => {
+                                return (0, jsx_runtime_1.jsx)(Swatches_1.Swatches, { ...subProps.swatches, options: selection.values });
                             })() }));
                 }
-            })() })) })) : null;
+            })() }) })) : null;
 });