@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Templates/Search/Search.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { Results } from '../../Organisms/Results';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { Sidebar } from '../../Organisms/Sidebar';
+import { Toolbar } from '../../Organisms/Toolbar';
+import { NoResults } from '../../Organisms/NoResults';
+import { useLang, useMediaQuery } from '../../../hooks';
+import { FOCUSABLE_ELEMENTS } from '../../../hooks/useA11y';
+import deepmerge from 'deepmerge';
+import { useLayoutOptions } from '../../../hooks/useLayoutOptions';
+import { componentNameToClassName } from '../../../utilities/componentNameToClassName';
+const defaultStyles = (props) => {
+    let classNamePrefix = 'ss__search';
+    if (props.alias) {
+        classNamePrefix = `ss__${componentNameToClassName(props.alias)}`;
+    }
+    return css({
+        [`.${classNamePrefix}__header-section`]: {
+            marginBottom: '20px',
+        },
+        [`.${classNamePrefix}__main-section`]: {
+            display: 'flex',
+            minHeight: '600px',
+            gap: '20px',
+        },
+        '.ss__sidebar': {
+            flex: '0 1 auto',
+            width: '270px',
+            '&:empty': {
+                display: 'none',
+            },
+        },
+        [`.${classNamePrefix}__content`]: {
+            width: '100%',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1em',
+        },
+    });
+};
+export const Search = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        toggleSidebarButtonText: 'Filters',
+        hideToggleSidebarButton: true,
+        mobileDisplayAt: globalTheme?.variables?.breakpoints?.tablet ? `${globalTheme.variables?.breakpoints?.tablet}px` : '991px',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps(properties.alias || 'search', globalTheme, defaultProps, properties);
+    const { disableStyles, className, internalClassName, controller, hideSidebar, toggleSidebarButtonText, hideTopToolbar, hideMiddleToolbar, hideBottomToolbar, resultComponent, hideToggleSidebarButton, mobileDisplayAt, toggleSidebarStartClosed, treePath, alias, } = props;
+    let classNamePrefix = 'ss__search';
+    if (props.alias) {
+        classNamePrefix = `ss__${componentNameToClassName(props.alias)}`;
+    }
+    // handle selected layoutOptions
+    if (globalTheme?.name && props.layoutOptions) {
+        useLayoutOptions(props, globalTheme);
+    }
+    const store = controller.store;
+    const isMobile = useMediaQuery(`(max-width: ${mobileDisplayAt})`);
+    const [sidebarOpenState, setSidebarOpenState] = useState(Boolean(alias !== 'searchHorizontal' && !toggleSidebarStartClosed));
+    //initialize lang
+    const defaultLang = {
+        toggleSidebarButtonText: {
+            value: toggleSidebarButtonText,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, { filters: store.filters, sidebarOpenState: sidebarOpenState });
+    const ToggleSidebar = () => {
+        return (_jsx("div", { className: classnames(`${classNamePrefix}__sidebar-toggle`, sidebarOpenState ? `${classNamePrefix}__sidebar-toggle--open` : ''), 
+            // @ts-ignore - this is fine.
+            active: sidebarOpenState, children: _jsx("span", { ...mergedLang.toggleSidebarButtonText.all }) }));
+    };
+    const toggleSidebarButtonProps = {
+        onClick: () => {
+            setSidebarOpenState(!sidebarOpenState);
+            // need the timeout to allow the sidebar to open before focusing the first available element.
+            setTimeout(() => {
+                // focus the first available elem when toggling the sidebar open.
+                if (!sidebarOpenState) {
+                    const firstAvailableElemToFocus = document.querySelector('.ss__sidebar')?.querySelector(FOCUSABLE_ELEMENTS);
+                    if (firstAvailableElemToFocus) {
+                        firstAvailableElemToFocus.focus();
+                    }
+                }
+            });
+        },
+        children: !hideToggleSidebarButton && store.loaded && !isMobile && (toggleSidebarButtonText || mergedLang.toggleSidebarButtonText?.value)
+            ? ToggleSidebar
+            : undefined,
+    };
+    const subProps = {
+        TopToolbar: {
+            // default props
+            name: 'top',
+            internalClassName: `${classNamePrefix}__header-section__toolbar--top-toolbar`,
+            layout: [['banner.header'], ['searchHeader', '_', 'button.sidebar-toggle']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        MiddleToolbar: {
+            // default props
+            name: 'middle',
+            internalClassName: `${classNamePrefix}__content__toolbar--middle-toolbar`,
+            layout: isMobile
+                ? [['mobileSidebar', '_', 'paginationInfo'], ['banner.banner']]
+                : [['sortBy', 'perPage', '_', 'paginationInfo'], ['banner.banner']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        BottomToolbar: {
+            // default props
+            name: 'bottom',
+            internalClassName: `${classNamePrefix}__content__toolbar--bottom-toolbar`,
+            layout: [['banner.footer'], ['_', 'pagination', '_']],
+            toggleSideBarButton: { ...toggleSidebarButtonProps },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        Sidebar: {
+            // default props
+            layout: [['filterSummary'], ['facets'], ['banner.left']],
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        Results: {
+            // default props
+            resultComponent: resultComponent,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+        NoResults: {
+            // default props
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames(classNamePrefix, className, internalClassName, sidebarOpenState ? `${classNamePrefix}--sidebar-open` : ''), children: [_jsx("div", { className: `${classNamePrefix}__header-section`, children: !hideTopToolbar && _jsx(Toolbar, { ...subProps.TopToolbar, controller: controller }) }), _jsxs("div", { className: `${classNamePrefix}__main-section`, children: [!hideSidebar && !isMobile && sidebarOpenState && store.loaded && store.pagination.totalResults > 0 && (_jsx("div", { className: `${classNamePrefix}__sidebar`, children: _jsx(Sidebar, { ...subProps.Sidebar, controller: controller }) })), _jsxs("div", { className: classnames(`${classNamePrefix}__content`), children: [!hideMiddleToolbar && _jsx(Toolbar, { ...subProps.MiddleToolbar, controller: controller }), store.pagination.totalResults ? (_jsx(Results, { ...subProps.Results, controller: controller })) : (store.pagination.totalResults === 0 && _jsx(NoResults, { ...subProps.NoResults, controller: controller })), !hideBottomToolbar && _jsx(Toolbar, { ...subProps.BottomToolbar, controller: controller })] })] })] }) }));
+});

package/dist/esm/components/src/components/Templates/Search/index.d.ts

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

package/dist/esm/components/src/components/Templates/Search/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/Search/index.js

@@ -0,0 +1 @@
+export * from './Search';

package/dist/esm/components/src/components/Templates/SearchCollapsible/SearchCollapsible.d.ts

@@ -0,0 +1,11 @@
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { SearchProps, SearchTemplatesLegalProps } from '../Search/Search';
+export declare const SearchCollapsible: ((properties: SearchCollapsibleProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type SearchCollapsibleProps = {
+    controller: SearchController;
+} & SearchProps & SearchCollapsibleTemplatesLegalProps & ComponentProps<SearchCollapsibleProps>;
+export type SearchCollapsibleTemplatesLegalProps = SearchTemplatesLegalProps;
+//# sourceMappingURL=SearchCollapsible.d.ts.map

package/dist/esm/components/src/components/Templates/SearchCollapsible/SearchCollapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCollapsible.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchCollapsible/SearchCollapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAM3E,CAAC;AAIH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,oCAAoC,GACpC,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAExC,MAAM,MAAM,oCAAoC,GAAG,yBAAyB,CAAC"}

package/dist/esm/components/src/components/Templates/SearchCollapsible/SearchCollapsible.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { CacheProvider } from '../../../providers';
+import { Search } from '../Search/Search';
+export const SearchCollapsible = observer((properties) => {
+    return (_jsx(CacheProvider, { children: _jsx(Search, { ...properties, alias: "searchCollapsible" }) }));
+});

package/dist/esm/components/src/components/Templates/SearchCollapsible/index.d.ts

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

package/dist/esm/components/src/components/Templates/SearchCollapsible/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/SearchCollapsible/index.js

@@ -0,0 +1 @@
+export * from './SearchCollapsible';

package/dist/esm/components/src/components/Templates/SearchHorizontal/SearchHorizontal.d.ts

@@ -0,0 +1,11 @@
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { SearchProps, SearchTemplatesLegalProps } from '../Search/Search';
+export declare const SearchHorizontal: ((properties: SearchHorizontalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type SearchHorizontalProps = {
+    controller: SearchController;
+} & SearchProps & SearchHorizontalTemplatesLegalProps & ComponentProps<SearchHorizontalProps>;
+export type SearchHorizontalTemplatesLegalProps = SearchTemplatesLegalProps;
+//# sourceMappingURL=SearchHorizontal.d.ts.map

package/dist/esm/components/src/components/Templates/SearchHorizontal/SearchHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchHorizontal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAU,WAAW,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAElF,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CAMzE,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IACnC,UAAU,EAAE,gBAAgB,CAAC;CAC7B,GAAG,WAAW,GACd,mCAAmC,GACnC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG,yBAAyB,CAAC"}

package/dist/esm/components/src/components/Templates/SearchHorizontal/SearchHorizontal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { CacheProvider } from '../../../providers';
+import { Search } from '../Search/Search';
+export const SearchHorizontal = observer((properties) => {
+    return (_jsx(CacheProvider, { children: _jsx(Search, { ...properties, alias: "searchHorizontal", internalClassName: "ss__search-horizontal" }) }));
+});

package/dist/esm/components/src/components/Templates/SearchHorizontal/index.d.ts

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

package/dist/esm/components/src/components/Templates/SearchHorizontal/index.d.ts.map

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

package/dist/esm/components/src/components/Templates/SearchHorizontal/index.js

@@ -0,0 +1 @@
+export * from './SearchHorizontal';

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts

@@ -0,0 +1,14 @@
+import { ComponentChildren } from 'preact';
+import type { RecommendationController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../../types';
+/**
+ * @deprecated RecommendationProfileTracker is deprecated and is no longer functional
+ */
+export declare const RecommendationProfileTracker: ((properties: RecommendationProfileTrackerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export interface RecommendationProfileTrackerProps extends ComponentProps {
+    children: ComponentChildren;
+    controller: RecommendationController;
+}
+//# sourceMappingURL=RecommendationProfileTracker.d.ts.map

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAG5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAe,MAAM,mBAAmB,CAAC;AAQhE;;GAEG;AACH,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC;;CAYjG,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,UAAU,EAAE,wBAAwB,CAAC;CACrC"}

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { toChildArray } from 'preact';
+import { css } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { mergeStyles } from '../../../../utilities';
+const defaultStyles = () => {
+    return css({});
+};
+/**
+ * @deprecated RecommendationProfileTracker is deprecated and is no longer functional
+ */
+export const RecommendationProfileTracker = observer((properties) => {
+    const { children, className, internalClassName } = properties;
+    const childs = toChildArray(children);
+    const styling = mergeStyles(properties, defaultStyles);
+    return childs.length ? (_jsx("div", { className: classnames('ss__recommendation-profile-tracker', className, internalClassName), ...styling, children: children })) : null;
+});

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/index.d.ts

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

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map

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

package/dist/esm/components/src/components/Trackers/Recommendation/ProfileTracker/index.js

@@ -0,0 +1 @@
+export * from './RecommendationProfileTracker';

package/dist/esm/components/src/components/Trackers/ResultTracker/ResultTracker.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { ComponentChildren } from 'preact';
+import type { AutocompleteController, RecommendationController, SearchController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import type { Banner, Product } from '@athoscommerce/snap-store-mobx';
+export declare const ResultTracker: ((properties: ResultTrackerProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface ResultTrackerProps extends ComponentProps {
+    children: ComponentChildren;
+    result: Product | Banner;
+    controller: SearchController | AutocompleteController | RecommendationController;
+    track?: {
+        impression?: boolean;
+        click?: boolean;
+    };
+}
+//# sourceMappingURL=ResultTracker.d.ts.map

package/dist/esm/components/src/components/Trackers/ResultTracker/ResultTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Trackers/ResultTracker/ResultTracker.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAUtE,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CA2CnE,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,KAAK,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,KAAK,CAAC,EAAE,OAAO,CAAC;KAChB,CAAC;CACF"}

package/dist/esm/components/src/components/Trackers/ResultTracker/ResultTracker.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { useTheme } from '../../../providers';
+import { createImpressionObserver, mergeProps } from '../../../utilities';
+const CSS = {
+    ResultTracker: () => css({}),
+};
+export const ResultTracker = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = mergeProps('resultTracker', globalTheme, {}, properties);
+    const defaultTrack = {
+        impression: true,
+        click: true,
+    };
+    const { children, result, track, controller, className, internalClassName, disableStyles, style } = props;
+    const mergedTrack = {
+        ...defaultTrack,
+        ...track,
+    };
+    const { ref, inViewport } = createImpressionObserver();
+    if (inViewport && mergedTrack.impression) {
+        controller?.track.product.impression(result);
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.ResultTracker(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (_jsx("div", { className: classnames('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className, internalClassName), onClick: (e) => {
+            if (mergedTrack.click) {
+                controller?.track.product.click(e, result);
+            }
+        }, ref: ref, ...styling, children: children }));
+});

package/dist/esm/components/src/components/Trackers/ResultTracker/index.d.ts

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

package/dist/esm/components/src/components/Trackers/ResultTracker/index.d.ts.map

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

package/dist/esm/components/src/components/Trackers/ResultTracker/index.js

@@ -0,0 +1 @@
+export * from './ResultTracker';

package/dist/esm/components/src/hooks/createRecommendationTemplate.d.ts

@@ -0,0 +1,20 @@
+import { h } from 'preact';
+import { RecommendationController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
+import { Theme } from '../providers';
+import { ResultComponent, RecommendationComponentNames, RecommendationComponentProps } from '../types';
+export type TemplatesType = {
+    recommendation?: {
+        enabled: boolean;
+        component?: RecommendationComponentNames;
+        resultComponent?: string;
+        config?: Partial<RecommendationControllerConfig>;
+    };
+};
+type ReturnType = {
+    RecommendationTemplateComponent: ((props: RecommendationComponentProps) => h.JSX.Element | null) | undefined;
+    RecommendationTemplateResultComponent: ResultComponent | undefined;
+    recsController: RecommendationController | undefined;
+};
+export declare function createRecommendationTemplate(templates: TemplatesType, theme?: Theme): ReturnType;
+export {};
+//# sourceMappingURL=createRecommendationTemplate.d.ts.map

package/dist/esm/components/src/hooks/createRecommendationTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRecommendationTemplate.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/createRecommendationTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,wBAAwB,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AAE1G,OAAO,EAAE,KAAK,EAAW,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAEvG,MAAM,MAAM,aAAa,GAAG;IAC3B,cAAc,CAAC,EAAE;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;QACzC,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;KACjD,CAAC;CACF,CAAC;AAEF,KAAK,UAAU,GAAG;IACjB,+BAA+B,EAAE,CAAC,CAAC,KAAK,EAAE,4BAA4B,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7G,qCAAqC,EAAE,eAAe,GAAG,SAAS,CAAC;IACnE,cAAc,EAAE,wBAAwB,GAAG,SAAS,CAAC;CACrD,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAiDhG"}

package/dist/esm/components/src/hooks/createRecommendationTemplate.js

@@ -0,0 +1,42 @@
+import { useSnap } from '../providers';
+import { useCreateController } from './useCreateController';
+import { useComponent } from './useComponent';
+export function createRecommendationTemplate(templates, theme) {
+    let recommendationTemplateComponent;
+    let recommendationTemplateResultComponent;
+    let recsController;
+    if (templates?.recommendation?.enabled) {
+        const componentName = templates?.recommendation?.component || 'RecommendationGrid';
+        const snap = useSnap();
+        if (snap?.templates) {
+            const themeName = theme?.name;
+            let defaultResultComponentFromTheme;
+            if (themeName) {
+                defaultResultComponentFromTheme = snap?.templates?.config.theme?.resultComponent;
+            }
+            const resultComponentName = (templates?.recommendation?.resultComponent || defaultResultComponentFromTheme);
+            const mergedConfig = Object.assign({
+                id: '',
+                tag: 'no-results',
+                branch: 'production',
+            }, templates.recommendation.config);
+            mergedConfig.id = mergedConfig.id || `search-${mergedConfig.tag}`;
+            recsController = useCreateController(snap, 'recommendation', mergedConfig);
+            if (!recsController?.store?.loaded && !recsController?.store?.loading && recsController?.store.error?.type !== 'error') {
+                recsController?.search();
+            }
+            if (resultComponentName && snap?.templates?.library.import.component.result) {
+                recommendationTemplateResultComponent = useComponent(snap?.templates?.library.import.component.result, resultComponentName);
+            }
+            if (componentName && snap?.templates?.library.import.component.recommendation.default) {
+                recommendationTemplateComponent = useComponent(snap?.templates?.library.import.component.recommendation.default, componentName);
+            }
+        }
+    }
+    const returnObj = {
+        RecommendationTemplateComponent: recommendationTemplateComponent,
+        RecommendationTemplateResultComponent: recommendationTemplateResultComponent,
+        recsController: recsController,
+    };
+    return returnObj;
+}

package/dist/esm/components/src/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export * from './useClickOutside';
+export * from './useConstructor';
+export * from './useMediaQuery';
+export * from './useIntersection';
+export * from './useIntersectionAdvanced';
+export * from './useDisplaySettings';
+export * from './useFuncDebounce';
+export * from './useA11y';
+export { useLang, Lang } from './useLang';
+export * from './useDeepCompareEffect';
+export * from './useCreateController';
+export * from './useComponent';
+export * from './useTracking';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/esm/components/src/hooks/index.js

@@ -0,0 +1,13 @@
+export * from './useClickOutside';
+export * from './useConstructor';
+export * from './useMediaQuery';
+export * from './useIntersection';
+export * from './useIntersectionAdvanced';
+export * from './useDisplaySettings';
+export * from './useFuncDebounce';
+export * from './useA11y';
+export { useLang } from './useLang';
+export * from './useDeepCompareEffect';
+export * from './useCreateController';
+export * from './useComponent';
+export * from './useTracking';

package/dist/esm/components/src/hooks/useA11y.d.ts

@@ -0,0 +1,4 @@
+export declare const A11Y_ATTRIBUTE = "ss-a11y";
+export declare const FOCUSABLE_ELEMENTS = "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type=\"text\"]:not([disabled]), input[type=\"radio\"]:not([disabled]), input[type=\"checkbox\"]:not([disabled]), select:not([disabled]), [tabindex]";
+export declare function useA11y(elem: any, tabIndex?: number, trapFocus?: boolean, escCallback?: (e: any) => unknown): void;
+//# sourceMappingURL=useA11y.d.ts.map

package/dist/esm/components/src/hooks/useA11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useA11y.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useA11y.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,kBAAkB,yOACkM,CAAC;AAElO,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,QA4D3G"}

package/dist/esm/components/src/hooks/useA11y.js

@@ -0,0 +1,59 @@
+const KEYCODE_TAB = 9;
+const KEYCODE_ESC = 27;
+export const A11Y_ATTRIBUTE = 'ss-a11y';
+export const FOCUSABLE_ELEMENTS = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]';
+export function useA11y(elem, tabIndex, trapFocus, escCallback) {
+    const styleId = 'ssA11yFocusStyle';
+    if (!document.querySelector(`#${styleId}`)) {
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.id = styleId;
+        style.innerHTML = `[${A11Y_ATTRIBUTE}]:focus-visible { outline: -webkit-focus-ring-color auto 1px !important; }`;
+        document.getElementsByTagName('head')[0].appendChild(style);
+    }
+    if (elem && !elem.attributes?.[A11Y_ATTRIBUTE]) {
+        //A11y attribute is for debouncing on rerenders
+        elem.setAttribute(A11Y_ATTRIBUTE, true);
+        //tab index 0 is default and used for actionable elements.
+        elem.setAttribute('tabIndex', `${tabIndex || 0}`);
+        elem.addEventListener('keydown', (event) => {
+            if (event.code === 'Space' || event.code === 'Enter') {
+                elem.click();
+            }
+        });
+        if (trapFocus) {
+            elem.addEventListener('keydown', function (e) {
+                const focusableEls = elem.querySelectorAll(FOCUSABLE_ELEMENTS);
+                const firstFocusableEl = focusableEls[0];
+                const lastFocusableEl = focusableEls[focusableEls.length - 1];
+                //esc key
+                if (e.keyCode == KEYCODE_ESC) {
+                    elem.focus();
+                    if (escCallback) {
+                        escCallback(e);
+                    }
+                    e.preventDefault();
+                    //this is needed to stop the event from bubbling up to the parent elements. in case they also have the same listener. IE: mobileSidebar and sortBy
+                    e.stopPropagation();
+                    return;
+                }
+                //tab key
+                if (e.key === 'Tab' || e.keyCode === KEYCODE_TAB) {
+                    /* shift + tab */
+                    if (e.shiftKey) {
+                        if (document.activeElement === firstFocusableEl) {
+                            lastFocusableEl.focus();
+                            e.preventDefault();
+                        }
+                    }
+                    else {
+                        if (document.activeElement === lastFocusableEl) {
+                            firstFocusableEl.focus();
+                            e.preventDefault();
+                        }
+                    }
+                }
+            });
+        }
+    }
+}

package/dist/esm/components/src/hooks/useAcRenderedInput.d.ts

@@ -0,0 +1,11 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { MutableRef } from 'preact/hooks';
+export declare function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }: {
+    input: Element;
+    controller: AutocompleteController;
+    renderedInputRef: MutableRef<HTMLInputElement | null>;
+    renderInput: boolean;
+    buttonSelector?: string | Element;
+    setActive?: (active: boolean) => void;
+}): Element | null;
+//# sourceMappingURL=useAcRenderedInput.d.ts.map

package/dist/esm/components/src/hooks/useAcRenderedInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAcRenderedInput.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useAcRenderedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAY,UAAU,EAAa,MAAM,cAAc,CAAC;AAE/D,wBAAgB,kBAAkB,CAAC,EAClC,KAAK,EACL,UAAU,EACV,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,GACT,EAAE;IACF,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,sBAAsB,CAAC;IACnC,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,kBA2DA"}

package/dist/esm/components/src/hooks/useAcRenderedInput.js

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'preact/hooks';
+export function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }) {
+    const [_input, setInput] = useState(input);
+    const [renderedInputInitialized, setRenderedInputInitialized] = useState(false);
+    const onClick = () => {
+        if (setActive) {
+            setActive(true);
+        }
+        //this is needed to await the rendered input to render before binding the controller
+        setTimeout(async () => {
+            if (!renderedInputInitialized) {
+                setInput(renderedInputRef.current);
+                controller.config.selector = '.autocomplete__search-input input';
+                await controller.bind();
+                renderedInputRef?.current?.focus();
+            }
+            setRenderedInputInitialized(true);
+        });
+    };
+    useEffect(() => {
+        if (renderInput && buttonSelector) {
+            let button;
+            if (typeof buttonSelector == 'string') {
+                button = document.querySelector(buttonSelector);
+            }
+            else {
+                button = buttonSelector;
+            }
+            if (button) {
+                button.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    onClick();
+                });
+                button.addEventListener('focus', () => onClick());
+                button.addEventListener('select', () => onClick());
+            }
+        }
+        else {
+            if (setActive) {
+                input.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    setActive(true);
+                });
+                input.addEventListener('focus', () => setActive(true));
+                input.addEventListener('select', () => setActive(true));
+            }
+        }
+    }, []);
+    // this is used to keep the values consistent between the native input and the rendered input
+    useEffect(() => {
+        if (input !== _input) {
+            _input?.addEventListener('input', () => {
+                input.value = _input.value;
+            });
+        }
+    }, [_input]);
+    return _input;
+}