@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Organisms/Toolbar/Toolbar.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from '../../../types';
+import { SearchController } from '@athoscommerce/snap-controller';
+import { ButtonProps } from '../../Atoms/Button';
+export declare const Toolbar: ((properties: ToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type ToolbarProps = {
+    controller: SearchController;
+    name?: ToolbarNames;
+} & ToolbarTemplatesLegalProps & ComponentProps<ToolbarProps>;
+export type ToolbarTemplatesLegalProps = {
+    layout?: (ModuleNames | ModuleNames[])[];
+    toggleSideBarButton?: Partial<ButtonProps>;
+};
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'mobileSidebar' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facetsHorizontal';
+export type ToolbarNames = 'top' | 'middle' | 'bottom';
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/cjs/components/src/components/Organisms/Toolbar/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMjD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAwCvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC;CACpB,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,WAAW,GACpB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GACf,kBAAkB,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC"}

package/dist/cjs/components/src/components/Organisms/Toolbar/Toolbar.js

@@ -0,0 +1,49 @@
+"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.Toolbar = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Layout_1 = require("../Layout");
+var defaultStyles = function (_a) {
+    return (0, react_1.css)({});
+};
+exports.Toolbar = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+        layout: ['mobileSidebar', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
+    };
+    var props = (0, utilities_1.mergeProps)('toolbar', globalTheme, defaultProps, properties);
+    var controller = props.controller, toggleSideBarButton = props.toggleSideBarButton, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, layout = props.layout;
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var subProps = {
+        Layout: __assign(__assign({ 
+            // default props
+            toggleSideBarButton: toggleSideBarButton, internalClassName: 'ss__toolbar__layout' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var hasChildrenToRender = layout === null || layout === void 0 ? void 0 : layout.length;
+    return hasChildrenToRender ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__toolbar', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Layout_1.Layout, __assign({ controller: controller, layout: layout }, subProps.Layout)) })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+});

package/dist/cjs/components/src/components/Organisms/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/components/Organisms/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/cjs/components/src/components/Organisms/Toolbar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Toolbar"), exports);

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts

@@ -0,0 +1,23 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+interface inputBounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export type AutocompleteFixedProps = {
+    controller: AutocompleteController;
+} & AutocompleteFixedTemplatesLegalProps & ComponentProps<AutocompleteFixedProps>;
+export type AutocompleteFixedTemplatesLegalProps = {
+    buttonSelector?: string | Element;
+    overlayColor?: string;
+    renderInput?: boolean;
+    offset?: Partial<Omit<inputBounds, 'height'>>;
+} & AutocompleteLayoutProps;
+export {};
+//# sourceMappingURL=AutocompleteFixed.d.ts.map

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA8CjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAuM3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,oCAAoC,GACvC,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAExC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,uBAAuB,CAAC"}

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

@@ -0,0 +1,196 @@
+"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.AutocompleteFixed = 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 snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var hooks_2 = require("../../../hooks");
+var useAcRenderedInput_1 = require("../../../hooks/useAcRenderedInput");
+var defaultStyles = function (_a) {
+    var inputBounds = _a.inputBounds, offset = _a.offset, renderInput = _a.renderInput, width = _a.width;
+    return (0, react_1.css)({
+        position: 'absolute',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        right: '0',
+        top: '0',
+        zIndex: 1001,
+        '.ss__autocomplete-fixed__inner': {
+            position: 'absolute',
+            left: "calc(0px + ".concat((offset === null || offset === void 0 ? void 0 : offset.left) || 0, "px)"),
+            top: "calc(0px + ".concat(renderInput ? '0px' : "".concat(inputBounds.height, "px"), " + ").concat((offset === null || offset === void 0 ? void 0 : offset.top) || 0, "px)"),
+            width: "calc(100% + ".concat((offset === null || offset === void 0 ? void 0 : offset.width) || 0, "px)"),
+            zIndex: 1001,
+            maxWidth: '100vw',
+            '.ss__search-input': {
+                background: '#fff',
+                width: "".concat(inputBounds.width, "px"),
+                height: "".concat(inputBounds.height, "px"),
+                border: '0px',
+            },
+        },
+        '.ss__autocomplete-fixed__inner__layout-wrapper': {
+            width: width,
+            overflowY: 'scroll',
+            maxHeight: "calc(90vh - ".concat(inputBounds.top || 0, "px - ").concat(renderInput ? "".concat(inputBounds.height, "px") : '0px', " + ").concat((offset === null || offset === void 0 ? void 0 : offset.top) || 0, "px)"),
+        },
+        '.ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+    });
+};
+exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var defaultProps = {
+        layout: [['c1', 'c2', 'c3']],
+        renderInput: true,
+        overlayColor: '',
+    };
+    var props = (0, utilities_1.mergeProps)('autocompleteFixed', globalTheme, defaultProps, properties);
+    var _a = (0, hooks_1.useState)(false), active = _a[0], setActive = _a[1];
+    var _b = (0, hooks_1.useState)('query'), inputName = _b[0], setInputName = _b[1];
+    var input = props.input;
+    var buttonSelector = props.buttonSelector;
+    var inputPlaceholderText = undefined;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        var existingInputName = input === null || input === void 0 ? void 0 : input.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+        inputPlaceholderText = input === null || input === void 0 ? void 0 : input.getAttribute('placeholder');
+    }
+    if (!buttonSelector && input) {
+        buttonSelector = input;
+    }
+    var layout = props.layout, disableStyles = props.disableStyles, controller = props.controller, renderInput = props.renderInput, overlayColor = props.overlayColor, className = props.className, internalClassName = props.internalClassName, offset = props.offset, treePath = props.treePath;
+    var renderedInputRef = (0, hooks_1.useRef)(null);
+    var reset = function () {
+        controller.setFocused();
+        setActive(false);
+    };
+    var subProps = {
+        autocompleteLayout: __assign(__assign({ 
+            // default props
+            layout: layout, onReset: function () { return reset(); } }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        modal: __assign(__assign({ 
+            // default props
+            internalClassName: 'autocomplete-fixed__modal', buttonSelector: buttonSelector, lockScroll: false, onOverlayClick: reset, open: active }, (0, utilities_1.defined)({
+            overlayColor: overlayColor,
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        searchInput: __assign(__assign({ 
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-fixed__search-input autocomplete__search-input', placeholderText: inputPlaceholderText || undefined, submitSearchButton: {
+                onClick: function () {
+                    (function () { return reset(); });
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            }, clearSearchButton: {
+                icon: 'close-thin',
+            }, closeSearchButton: {
+                onClick: function () { return reset(); },
+            }, inputName: inputName }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " modal") }),
+    };
+    var getInputBounds = function (inputElem) {
+        if (inputElem) {
+            var elem = inputElem.getBoundingClientRect();
+            return {
+                top: elem.top + window.scrollY + ((offset === null || offset === void 0 ? void 0 : offset.top) || 0),
+                left: elem.left + window.scrollX + ((offset === null || offset === void 0 ? void 0 : offset.left) || 0),
+                width: elem.width,
+                height: elem.height,
+            };
+        }
+        else {
+            //fallback if input element is not found
+            return {
+                top: 0,
+                left: 0,
+                width: 0,
+                height: 0,
+            };
+        }
+    };
+    var _c = (0, hooks_1.useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    }), inputBounds = _c[0], setInputBounds = _c[1];
+    var checkForInputChange = function () {
+        var currentInputBounds = getInputBounds(input);
+        if (inputBounds.height !== currentInputBounds.height ||
+            inputBounds.left !== currentInputBounds.left ||
+            inputBounds.top !== currentInputBounds.top ||
+            inputBounds.width !== currentInputBounds.width) {
+            setInputBounds(currentInputBounds);
+        }
+    };
+    checkForInputChange();
+    var debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
+        checkForInputChange();
+    }, 10);
+    (0, hooks_1.useEffect)(function () {
+        window.addEventListener('resize', debouncedHandleResize);
+    }, []);
+    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { inputBounds: inputBounds }), defaultStyles);
+    var _input;
+    if (input) {
+        _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
+            input: input,
+            controller: controller,
+            renderedInputRef: renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector: buttonSelector,
+            setActive: setActive,
+        });
+    }
+    var acProps = __assign({}, 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-fixed', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Modal_1.Modal, __assign({}, subProps.modal, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete-fixed__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)("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: (0, jsx_runtime_1.jsx)(AutocompleteLayout_1.AutocompleteLayout, __assign({}, acProps, subProps.autocompleteLayout, { input: _input, controller: controller, treePath: "".concat(treePath, " modal") })) })] }) })) })) })) : null;
+});

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteFixed';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutocompleteFixed"), exports);

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts

@@ -0,0 +1,16 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type AutocompleteModalProps = {
+    controller: AutocompleteController;
+} & AutocompleteModalTemplatesLegalProps & ComponentProps<AutocompleteModalProps>;
+export type AutocompleteModalTemplatesLegalProps = {
+    buttonSelector?: string | Element;
+    overlayColor?: string;
+    renderInput?: boolean;
+    height?: string;
+} & AutocompleteLayoutProps;
+//# sourceMappingURL=AutocompleteModal.d.ts.map

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA4DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAkJ3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,oCAAoC,GACvC,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAExC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}

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

@@ -0,0 +1,170 @@
+"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;
+    // 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',
+            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',
+            }
+        },
+        _b["@media (max-width: ".concat(variables === null || variables === void 0 ? void 0 : 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 = {
+        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];
+    var _b = (0, hooks_1.useState)('query'), inputName = _b[0], setInputName = _b[1];
+    var input = props.input;
+    var buttonSelector = props.buttonSelector;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        var existingInputName = input === null || input === void 0 ? void 0 : input.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+    }
+    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);
+    var reset = function () {
+        controller.setFocused();
+        setActive(false);
+    };
+    var subProps = {
+        autocompleteLayout: __assign(__assign({ 
+            // default props
+            layout: layout, onReset: function () { return reset(); } }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        modal: __assign(__assign({ 
+            // default props
+            internalClassName: 'autocomplete-modal__modal', buttonSelector: buttonSelector, onOverlayClick: function () { return reset(); }, overlayColor: overlayColor, open: active }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        searchInput: __assign(__assign({ 
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input', submitSearchButton: {
+                onClick: function () {
+                    (function () { return reset(); });
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            }, clearSearchButton: {
+                icon: 'close-thin',
+            }, closeSearchButton: {
+                onClick: function () { return reset(); },
+                icon: 'angle-left',
+            }, inputName: inputName }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " modal") }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var _input;
+    if (input) {
+        _input = (0, useAcRenderedInput_1.useAcRenderedInput)({
+            input: input,
+            controller: controller,
+            renderedInputRef: renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector: buttonSelector,
+            setActive: setActive,
+        });
+    }
+    var acProps = __assign({}, 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;
+});

package/dist/cjs/components/src/components/Templates/AutocompleteModal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/components/src/components/Templates/AutocompleteModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AutocompleteModal"), exports);

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts

@@ -0,0 +1,17 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+import { SlideDirectionType } from '../../Molecules/Slideout';
+export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type AutocompleteSlideoutProps = {
+    controller: AutocompleteController;
+} & AutocompleteSlideoutTemplatesLegalProps & ComponentProps<AutocompleteSlideoutProps>;
+export type AutocompleteSlideoutTemplatesLegalProps = {
+    overlayColor?: string;
+    slideDirection?: SlideDirectionType;
+    buttonSelector?: string | Element;
+    renderInput?: boolean;
+} & AutocompleteLayoutProps;
+//# sourceMappingURL=AutocompleteSlideout.d.ts.map

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA0JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,uCAAuC,GAC1C,cAAc,CAAC,yBAAyB,CAAC,CAAC;AAE3C,MAAM,MAAM,uCAAuC,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,uBAAuB,CAAC"}