@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -1,100 +1,86 @@
 "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.AutocompleteModal = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var AutocompleteLayout_1 = require("../../Organisms/AutocompleteLayout");
-var Modal_1 = require("../../Molecules/Modal");
-var classnames_1 = __importDefault(require("classnames"));
-var SearchInput_1 = require("../../Molecules/SearchInput");
-var hooks_2 = require("../../../hooks");
-var useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
-var defaultStyles = function (_a) {
-    var _b;
-    var width = _a.width, height = _a.height, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const AutocompleteLayout_1 = require("../../Organisms/AutocompleteLayout");
+const Modal_1 = require("../../Molecules/Modal");
+const classnames_1 = __importDefault(require("classnames"));
+const SearchInput_1 = require("../../Molecules/SearchInput");
+const hooks_2 = require("../../../hooks");
+const useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
+const defaultStyles = ({ width, height, theme }) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
-    return (0, react_1.css)((_b = {
-            position: 'fixed',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            right: '0',
-            top: '0',
+    const variables = theme?.variables;
+    return (0, react_1.css)({
+        position: 'fixed',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        right: '0',
+        top: '0',
+        zIndex: 1001,
+        '& .ss__autocomplete-modal__inner': {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: '10vh',
+            maxHeight: height ? 'initial' : '80vh',
+            overflow: 'scroll',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            background: '#fff',
             zIndex: 1001,
-            '& .ss__autocomplete-modal__inner': {
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                top: '10vh',
-                maxHeight: height ? 'initial' : '80vh',
-                overflow: 'scroll',
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                background: '#fff',
-                zIndex: 1001,
-                width: width,
-                height: height,
-                maxWidth: '100vw',
-            },
-            '& .ss__overlay': {
-                zIndex: 1000,
-            },
-            '& .ss__autocomplete': {
-                position: 'relative',
-            },
-            '& .ss__search-input': {
-                margin: '1px',
-            },
-            '& .input_wrapper input': {
-                background: '#eee',
-            },
-            '& .ss__search-input__button--close-search-icon': {
-                border: 'none',
-            }
+            width: width,
+            height: height,
+            maxWidth: '100vw',
+        },
+        '& .ss__overlay': {
+            zIndex: 1000,
+        },
+        '& .ss__autocomplete': {
+            position: 'relative',
         },
-        _b["@media (max-width: ".concat(variables === null || variables === void 0 ? void 0 : variables.breakpoints.desktop, "px)")] = {
+        '& .ss__search-input': {
+            margin: '1px',
+        },
+        '& .input_wrapper input': {
+            background: '#eee',
+        },
+        '& .ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+        [`@media (max-width: ${variables?.breakpoints.desktop}px)`]: {
             '& .ss__autocomplete-modal__inner': {
                 top: '0',
                 maxHeight: '100vh',
             },
         },
-        _b));
+    });
 };
-exports.AutocompleteModal = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var defaultProps = {
+exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const defaultProps = {
         layout: [['c1', 'c2', 'c3']],
         overlayColor: 'rgba(0,0,0,0.8)',
         width: '950px',
         renderInput: true,
     };
-    var props = (0, utilities_1.mergeProps)('autocompleteModal', globalTheme, defaultProps, properties);
-    var _a = (0, hooks_1.useState)(false), active = _a[0], setActive = _a[1];
+    const props = (0, utilities_1.mergeProps)('autocompleteModal', globalTheme, defaultProps, properties);
+    const [active, setActive] = (0, hooks_1.useState)(false);
     // Use an empty inputName so the rendered SearchInput does not participate in form
     // serialization. The original input retains its name (e.g. 'q') so that native form
     // submission still produces the expected ?q= query parameter.
-    var inputName = '';
-    var input = props.input;
-    var buttonSelector = props.buttonSelector;
+    const inputName = '';
+    let input = props.input;
+    let buttonSelector = props.buttonSelector;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
@@ -103,80 +89,102 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)(function (properties
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    var layout = props.layout, disableStyles = props.disableStyles, overlayColor = props.overlayColor, controller = props.controller, renderInput = props.renderInput, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var renderedInputRef = (0, hooks_1.useRef)(null);
+    const { layout, disableStyles, overlayColor, controller, renderInput, className, internalClassName, treePath } = props;
+    const renderedInputRef = (0, hooks_1.useRef)(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
     // so the modal overlay doesn't persist over the input.
-    (0, hooks_1.useEffect)(function () {
-        var onFocusChange = function (_context, next) {
+    (0, hooks_1.useEffect)(() => {
+        const onFocusChange = (_context, next) => {
             if (!controller.store.state.focusedInput) {
                 setActive(false);
             }
             next();
         };
         controller.eventManager.on('focusChange', onFocusChange);
-        return function () {
-            var _a;
-            (_a = controller.eventManager.events['focusChange']) === null || _a === void 0 ? void 0 : _a.remove(onFocusChange);
+        return () => {
+            controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
     }, []);
-    var reset = function () {
+    const reset = () => {
         controller.setFocused();
         setActive(false);
     };
-    var subProps = {
-        autocompleteLayout: __assign(__assign({ 
+    const subProps = {
+        autocompleteLayout: {
             // default props
-            layout: layout, onReset: function () { return reset(); } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            layout: layout,
+            onReset: () => reset(),
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        modal: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
             // default props
-            internalClassName: 'autocomplete-modal__modal', buttonSelector: buttonSelector, onOverlayClick: reset, overlayColor: overlayColor, open: active }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'autocomplete-modal__modal',
+            buttonSelector: buttonSelector,
+            onOverlayClick: reset,
+            overlayColor: overlayColor,
+            open: active,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        searchInput: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
             // default props
             // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input', submitSearchButton: {
-                onClick: function () {
-                    (function () { return reset(); });
+            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input',
+            submitSearchButton: {
+                onClick: () => {
+                    () => reset();
                     window.location.href = controller.store.state.url.link.href;
                 },
-            }, clearSearchButton: {
+            },
+            clearSearchButton: {
                 icon: 'close-thin',
-            }, closeSearchButton: {
-                onClick: function () { return reset(); },
+            },
+            closeSearchButton: {
+                onClick: () => reset(),
                 icon: 'angle-left',
-            }, inputName: inputName }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            },
+            inputName: inputName,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " modal") }),
+            theme: props?.theme,
+            treePath: `${treePath} modal`,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _input;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    let _input;
     if (input) {
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller: controller,
-            renderedInputRef: renderedInputRef,
+            controller,
+            renderedInputRef,
             renderInput: Boolean(renderInput),
-            buttonSelector: buttonSelector,
+            buttonSelector,
             setActive: setActive,
         });
     }
-    var acProps = __assign({}, props);
+    const acProps = {
+        ...props,
+    };
     delete acProps.width;
     delete acProps.className;
     delete acProps.internalClassName;
     delete acProps.style;
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
-    return (layout === null || layout === void 0 ? void 0 : layout.length) && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") }))] }) })) })) })) : null;
+    return layout?.length && active ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete-modal', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...subProps.modal, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-modal__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` })] }) }) }) })) : null;
 });

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.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.AutocompleteSlideout = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var AutocompleteLayout_1 = require("../../Organisms/AutocompleteLayout");
-var Slideout_1 = require("../../Molecules/Slideout");
-var classnames_1 = __importDefault(require("classnames"));
-var SearchInput_1 = require("../../Molecules/SearchInput");
-var hooks_2 = require("../../../hooks");
-var useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
-var defaultStyles = function (_a) {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const AutocompleteLayout_1 = require("../../Organisms/AutocompleteLayout");
+const Slideout_1 = require("../../Molecules/Slideout");
+const classnames_1 = __importDefault(require("classnames"));
+const SearchInput_1 = require("../../Molecules/SearchInput");
+const hooks_2 = require("../../../hooks");
+const useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
+const defaultStyles = ({}) => {
     return (0, react_1.css)({
         border: '1px solid #eee',
         '& .ss__autocomplete': {
@@ -41,22 +30,22 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var defaultProps = {
+exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const defaultProps = {
         slideDirection: 'left',
         overlayColor: 'rgba(0,0,0,0.8)',
         layout: [['button.see-more'], ['termsList'], ['content']],
         width: '500px',
         renderInput: true,
     };
-    var props = (0, utilities_1.mergeProps)('autocompleteSlideout', globalTheme, defaultProps, properties);
+    const props = (0, utilities_1.mergeProps)('autocompleteSlideout', globalTheme, defaultProps, properties);
     // Use an empty inputName so the rendered SearchInput does not participate in form
     // serialization. The original input retains its name (e.g. 'q') so that native form
     // submission still produces the expected ?q= query parameter.
-    var inputName = '';
-    var input = props.input;
-    var buttonSelector = props.buttonSelector;
+    const inputName = '';
+    let input = props.input;
+    let buttonSelector = props.buttonSelector;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
@@ -65,62 +54,85 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)(function (propert
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    var layout = props.layout, disableStyles = props.disableStyles, slideDirection = props.slideDirection, controller = props.controller, overlayColor = props.overlayColor, renderInput = props.renderInput, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, width = props.width;
-    var renderedInputRef = (0, hooks_1.useRef)(null);
-    var reset = function () {
+    const { layout, disableStyles, slideDirection, controller, overlayColor, renderInput, className, internalClassName, treePath, width } = props;
+    const renderedInputRef = (0, hooks_1.useRef)(null);
+    const reset = () => {
         setActive(false);
         controller.setFocused();
     };
-    var subProps = {
-        autocompleteLayout: __assign(__assign({ 
+    const subProps = {
+        autocompleteLayout: {
             // default props
-            onReset: function () { return reset(); }, layout: layout }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            onReset: () => reset(),
+            layout: layout,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        slideout: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        slideout: {
             // default props
-            width: width, rerender: false, overlayColor: overlayColor, slideDirection: slideDirection, buttonSelector: buttonSelector }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            width: width,
+            rerender: false,
+            overlayColor: overlayColor,
+            slideDirection: slideDirection,
+            buttonSelector: buttonSelector,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        searchInput: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
             // default props
             // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input', inputName: inputName, submitSearchButton: {
-                onClick: function () {
-                    (function () { return reset(); });
+            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input',
+            inputName: inputName,
+            submitSearchButton: {
+                onClick: () => {
+                    () => reset();
                     window.location.href = controller.store.state.url.link.href;
                 },
-            }, clearSearchButton: {
+            },
+            clearSearchButton: {
                 icon: 'close-thin',
-            }, closeSearchButton: {
-                onClick: function () { return reset(); },
+            },
+            closeSearchButton: {
+                onClick: () => reset(),
                 icon: 'angle-left',
-            } }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            treePath: "".concat(treePath, " slideout"), theme: props === null || props === void 0 ? void 0 : props.theme }),
+            treePath: `${treePath} slideout`,
+            theme: props?.theme,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var _a = (0, hooks_1.useState)(false), active = _a[0], setActive = _a[1];
-    var _input;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const [active, setActive] = (0, hooks_1.useState)(false);
+    let _input;
     if (input) {
-        (0, hooks_1.useEffect)(function () {
-            input.addEventListener('click', function () { return setActive(true); });
+        (0, hooks_1.useEffect)(() => {
+            input.addEventListener('click', () => setActive(true));
         });
         _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
             input: input,
-            controller: controller,
-            renderedInputRef: renderedInputRef,
+            controller,
+            renderedInputRef,
             renderInput: Boolean(renderInput),
-            buttonSelector: buttonSelector,
+            buttonSelector,
         });
     }
-    var acProps = __assign({}, props);
+    const acProps = {
+        ...props,
+    };
     delete acProps.width;
     delete acProps.className;
     delete acProps.internalClassName;
@@ -128,5 +140,5 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)(function (propert
     delete acProps.styleScript;
     delete acProps.themeStyleScript;
     /***************************************/
-    return (layout === null || layout === void 0 ? void 0 : layout.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Slideout_1.Slideout, __assign({}, styling, subProps.slideout, { className: (0, classnames_1.default)('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-slideout__inner", ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { value: controller.store.state.input || '', inputRef: renderedInputRef }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " slideout") }))] }) })) })) : null;
+    return layout?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...styling, ...subProps.slideout, className: (0, classnames_1.default)('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-slideout__inner", ref: (e) => (0, hooks_2.useA11y)(e, 0, true, reset), children: [renderInput ? ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})), (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} slideout` })] }) }) })) : null;
 });