@athoscommerce/snap-preact 1.10.1-beta.150 → 1.12.0

package/dist/esm/components/src/components/Organisms/Results/Results.js

@@ -19,7 +19,7 @@ const defaultStyles = ({ gapSize, columns }) => {
         flexFlow: 'row wrap',
         gap: gapSize,
         gridTemplateRows: 'auto',
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
         '& .ss__result, & .ss__result-layout': {
             boxSizing: 'border-box',
             flex: '0 1 auto',
@@ -135,14 +135,14 @@ export const Results = observer((properties) => {
     return results?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className, internalClassName), children: results.map((result) => (() => {
                 switch (result.type) {
                     case ContentType.BANNER:
-                        return _createElement(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
+                        return (_createElement(InlineBanner, { ...subProps.inlineBanner, key: `${controller?.id ? `${controller?.id}-` : ''}${result.id}`, banner: result, layout: props.layout }));
                     default:
                         if (shouldWaitForNamedResultComponent) {
                             return null;
                         }
                         if (resolvedResultComponent && controller) {
                             return (_jsx(ResultTracker, { result: result, controller: controller, children: cloneWithProps(resolvedResultComponent, {
-                                    key: result.id,
+                                    key: `${controller?.id ? `${controller?.id}-` : ''}${result.id}`,
                                     controller,
                                     result: result,
                                     theme: mergedResultComponentTheme,
@@ -150,7 +150,7 @@ export const Results = observer((properties) => {
                                 }) }));
                         }
                         else {
-                            return (_jsx(TrackedResultComponent, { ...subProps.result, result: result, layout: props.layout, controller: controller }, result.id));
+                            return (_jsx(TrackedResultComponent, { ...subProps.result, result: result, layout: props.layout, controller: controller }, `${controller?.id ? `${controller?.id}-` : ''}${result.id}`));
                         }
                 }
             })()) }) })) : null;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,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;;CA8CvD,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,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"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAM3F,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA+CvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,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,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,cAAc,GACd,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/esm/components/src/components/Organisms/Toolbar/Toolbar.js

@@ -17,7 +17,7 @@ export const Toolbar = observer((properties) => {
         layout: ['button.sidebar-toggle', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
     };
     const props = mergeProps('toolbar', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout, tabManager } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('toolbar', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -27,6 +27,7 @@ export const Toolbar = observer((properties) => {
         Layout: {
             // default props
             internalClassName: 'ss__toolbar__layout',
+            tabManager: tabManager,
             // inherited props
             ...defined({
                 toggleSideBarButton,

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

@@ -1,6 +1,7 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
@@ -13,6 +14,7 @@ interface inputBounds {
 export type AutocompleteFixedProps = {
     controller: AutocompleteController;
     resultComponent?: JSXComponent | JSX.Element;
+    tabManager?: TabManagerStore;
 } & Omit<AutocompleteFixedTemplatesLegalProps, 'resultComponent'> & AutocompleteLayoutProps & Omit<ComponentProps, 'customComponent'>;
 export type AutocompleteFixedTemplatesLegalProps = {
     resultComponent?: string;

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

@@ -1 +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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA+CxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAwN3E,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;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}
+{"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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AAOxI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAyC3F,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA2N3E,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;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}

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

@@ -71,7 +71,13 @@ export const AutocompleteFixed = observer((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, controller, renderInput, overlayColor, className, internalClassName, offset, treePath } = props;
+    const { layout, disableStyles, renderInput, overlayColor, className, internalClassName, offset, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = useRef(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -87,7 +93,7 @@ export const AutocompleteFixed = observer((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -97,6 +103,7 @@ export const AutocompleteFixed = observer((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...defined({
                 disableStyles,
@@ -107,7 +114,7 @@ export const AutocompleteFixed = observer((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-fixed__modal',
+            internalClassName: 'ss__autocomplete-fixed__modal',
             buttonSelector: buttonSelector,
             lockScroll: false,
             onOverlayClick: reset,
@@ -123,8 +130,8 @@ export const AutocompleteFixed = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-fixed__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-fixed__search-input ss__autocomplete__search-input',
             placeholderText: inputPlaceholderText || undefined,
             submitSearchButton: {
                 onClick: () => {
@@ -138,11 +145,6 @@ export const AutocompleteFixed = observer((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
-            // wiring only — no default `icon`, so the button stays hidden until a site
-            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...defined({
@@ -200,7 +202,7 @@ export const AutocompleteFixed = observer((properties) => {
     if (input) {
         _input = useAcRenderedInput({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -1,12 +1,14 @@
 import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export type AutocompleteModalProps = {
     controller: AutocompleteController;
     resultComponent?: JSXComponent | JSX.Element;
+    tabManager?: TabManagerStore;
 } & Omit<AutocompleteModalTemplatesLegalProps, 'resultComponent'> & AutocompleteLayoutProps & Omit<ComponentProps, 'customComponent'>;
 export type AutocompleteModalTemplatesLegalProps = {
     resultComponent?: string;

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

@@ -1 +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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AA4DxI,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAmK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}
+{"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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AAMxI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAuD3F,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAsK3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,IAAI,CAAC,oCAAoC,EAAE,iBAAiB,CAAC,GAChE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,oCAAoC,GAAG;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}

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

@@ -83,7 +83,13 @@ export const AutocompleteModal = observer((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, overlayColor, controller, renderInput, className, internalClassName, treePath } = props;
+    const { layout, disableStyles, overlayColor, renderInput, className, internalClassName, treePath, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = useRef(null);
     // Sync active state with controller's focusedInput.
     // When the controller unfocuses (e.g. document click), close the autocomplete
@@ -99,7 +105,7 @@ export const AutocompleteModal = observer((properties) => {
         return () => {
             controller.eventManager.events['focusChange']?.remove(onFocusChange);
         };
-    }, []);
+    }, [controller]);
     const reset = () => {
         controller.setFocused();
         setActive(false);
@@ -109,6 +115,7 @@ export const AutocompleteModal = observer((properties) => {
             // default props
             layout: layout,
             onReset: () => reset(),
+            tabManager,
             // inherited props
             ...defined({
                 disableStyles,
@@ -119,7 +126,7 @@ export const AutocompleteModal = observer((properties) => {
         },
         modal: {
             // default props
-            internalClassName: 'autocomplete-modal__modal',
+            internalClassName: 'ss__autocomplete-modal__modal',
             buttonSelector: buttonSelector,
             onOverlayClick: reset,
             overlayColor: overlayColor,
@@ -134,8 +141,8 @@ export const AutocompleteModal = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-modal__search-input ss__autocomplete__search-input',
             submitSearchButton: {
                 onClick: () => {
                     () => reset();
@@ -149,11 +156,6 @@ export const AutocompleteModal = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
-            // wiring only — no default `icon`, so the button stays hidden until a site
-            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             inputName: inputName,
             // inherited props
             ...defined({
@@ -169,7 +171,7 @@ export const AutocompleteModal = observer((properties) => {
     if (input) {
         _input = useAcRenderedInput({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -2,12 +2,14 @@ import type { AutocompleteController } from '@athoscommerce/snap-controller';
 import { ComponentProps, JSXComponent } from '../../../types';
 import { AutocompleteLayoutProps, AutocompleteLayoutTemplatesLegalProps } from '../../Organisms/AutocompleteLayout';
 import { SlideDirectionType } from '../../Molecules/Slideout';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export type AutocompleteSlideoutProps = {
     controller: AutocompleteController;
     resultComponent?: JSXComponent | JSX.Element;
+    tabManager?: TabManagerStore;
 } & Omit<AutocompleteSlideoutTemplatesLegalProps, 'resultComponent'> & AutocompleteLayoutProps & Omit<ComponentProps, 'customComponent'>;
 export type AutocompleteSlideoutTemplatesLegalProps = {
     resultComponent?: string;

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

@@ -1 +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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA2JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7C,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}
+{"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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAsB,uBAAuB,EAAE,qCAAqC,EAAE,MAAM,oCAAoC,CAAC;AACxI,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAKvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAkB3F,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA8JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;IACnC,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,IAAI,CAAC,uCAAuC,EAAE,iBAAiB,CAAC,GACnE,uBAAuB,GACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAEzC,MAAM,MAAM,uCAAuC,GAAG;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,qCAAqC,CAAC"}

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

@@ -29,7 +29,7 @@ export const AutocompleteSlideout = observer((properties) => {
     const defaultProps = {
         slideDirection: 'left',
         overlayColor: 'rgba(0,0,0,0.8)',
-        layout: [['button.see-more'], ['termsList'], ['content']],
+        layout: [['button.see-more'], ['termsList'], ['tabSelection'], ['content']],
         width: '500px',
         renderInput: true,
     };
@@ -48,7 +48,13 @@ export const AutocompleteSlideout = observer((properties) => {
     if (!buttonSelector && input) {
         buttonSelector = input;
     }
-    const { layout, disableStyles, slideDirection, controller, overlayColor, renderInput, className, internalClassName, treePath, width } = props;
+    const { layout, disableStyles, slideDirection, overlayColor, renderInput, className, internalClassName, treePath, width, tabManager } = props;
+    let controller = props.controller;
+    let controllers = [controller];
+    if (tabManager && tabManager.active) {
+        controller = tabManager.active?.controller;
+        controllers = tabManager.tabs.map((tab) => tab.controller);
+    }
     const renderedInputRef = useRef(null);
     const reset = () => {
         setActive(false);
@@ -59,6 +65,7 @@ export const AutocompleteSlideout = observer((properties) => {
             // default props
             onReset: () => reset(),
             layout: layout,
+            tabManager,
             // inherited props
             ...defined({
                 disableStyles,
@@ -84,8 +91,8 @@ export const AutocompleteSlideout = observer((properties) => {
         },
         searchInput: {
             // default props
-            // autocomplete__search-input is required for useAcRenderedInput hook.
-            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input',
+            // ss__autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'ss__autocomplete-slideout__search-input ss__autocomplete__search-input',
             inputName: inputName,
             submitSearchButton: {
                 onClick: () => {
@@ -100,11 +107,6 @@ export const AutocompleteSlideout = observer((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
-            // wiring only — no default `icon`, so the button stays hidden until a site
-            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
-            chatButton: {
-                onClick: () => controller.openChat(),
-            },
             // inherited props
             ...defined({
                 disableStyles,
@@ -123,7 +125,7 @@ export const AutocompleteSlideout = observer((properties) => {
         });
         _input = useAcRenderedInput({
             input: input,
-            controller,
+            controllers,
             renderedInputRef,
             renderInput: Boolean(renderInput),
             buttonSelector,

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewModal: ((properties: QuickviewModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewModalProps = {
+    quickviewManager: QuickviewManager;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewModal/QuickviewModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AA2DvE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAkIrE,CAAC;AAOH,MAAM,MAAM,mBAAmB,GAAG;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -0,0 +1,147 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Modal } from '../../Molecules/Modal';
+import { QuickviewLayout, QuickviewTracker, } from '../../Organisms/QuickviewLayout';
+const defaultStyles = () => {
+    return css({
+        // Take the wrapper out of normal flow. The modal is injected into its own container at the
+        // end of `<body>`, but a consumer may still render it inside a grid (e.g. as a sibling of a
+        // result `<article>`), where in-flow it would occupy a cell and shift the layout when opened.
+        // The modal's content and overlay are both `position: fixed`, so an absolute, zero-size
+        // wrapper has no visual effect while keeping it out of any grid.
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        // Override the underlying Modal's `.ss__modal__content` positioning so the quickview
+        // is centered in the viewport rather than positioned relative to the source Result tile.
+        // Modal's default is `position: absolute` inside its (relative) wrapper, which lives
+        // inside the Results grid cell — that's why the modal was being clipped to a tile.
+        // We compound the wrapper class (`&.ss__quickview-modal`) into the selector to beat
+        // Modal's same-specificity rule (which would otherwise win on source-order since
+        // Modal's styles are emitted after ours), and use !important on the positioning
+        // properties so theme overrides can't accidentally re-anchor the modal to its tile.
+        '&.ss__quickview-modal .ss__modal__content': {
+            position: 'fixed !important',
+            top: '50% !important',
+            left: '50% !important',
+            transform: 'translate(-50%, -50%) !important',
+            minWidth: 'auto',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            width: 'auto',
+            overflow: 'auto',
+            zIndex: 10006,
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.2)',
+            borderRadius: '4px',
+        },
+        // Lower the Modal's Overlay backdrop too so it stays below both the modal content
+        // (10006) and the dropdown portal (10007) but above page content and autocomplete.
+        '&.ss__quickview-modal .ss__modal__overlay': {
+            zIndex: '10005 !important',
+        },
+        // Below the desktop breakpoint (where QuickviewLayout stacks to a single column) the
+        // modal spans the full viewport width instead of shrink-wrapping its content. The
+        // wrapper class is compounded into the content selector so this beats QuickviewLayout's
+        // same-specificity min/max width rule on the content div.
+        '@media (max-width: 767px)': {
+            '&.ss__quickview-modal .ss__modal__content': {
+                width: '100vw',
+                maxWidth: '100vw',
+                borderRadius: 0,
+            },
+            '&.ss__quickview-modal .ss__quickview__content': {
+                minWidth: 'auto',
+                maxWidth: '100%',
+            },
+        },
+    });
+};
+export const QuickviewModal = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        hideBadge: false,
+        layout: [['c1', 'c2']],
+        column1: {
+            layout: ['slideshow'],
+            width: '45%',
+        },
+        column2: {
+            layout: [
+                ['productDetail.mappings.core.name'],
+                ['calloutBadge'],
+                ['variantSelections'],
+                ['quantityPicker'],
+                ['button.add-to-cart'],
+                ['productDetail.mappings.core.description'],
+                ['productDetailTable'],
+                ['button.more-info'],
+            ],
+            width: 'auto',
+        },
+    };
+    const props = mergeProps('quickviewModal', globalTheme, defaultProps, properties);
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, layout, hideBadge, column1, column2, column3, column4, recommendation, lang, } = props;
+    // Dialog focus management: remember what had focus before the modal opened, move focus to
+    // the close button on open, and restore on close. This lives in the container (not the
+    // layout) because the layout unmounts when the Modal closes — only the always-mounted
+    // container can run the restore-focus branch on the open→close transition.
+    const wrapperRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = wrapperRef.current?.querySelector('.ss__quickview__close');
+            closeEl?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    if (!quickviewManager) {
+        console.warn(`[QuickviewModal] No quickviewManager provided; quickview cannot function without a QuickviewManager instance.`);
+        return null;
+    }
+    const store = quickviewManager.store;
+    const product = store.product;
+    const isOpen = Boolean(store.isOpen);
+    const onClose = () => quickviewManager.close();
+    const subProps = {
+        quickviewLayout: {
+            // default props
+            onClose,
+            ...defined({ hideBadge, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            onOverlayClick: onClose,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    // non-null: defaultProps always supplies a layout
+    const layoutContent = _jsx(QuickviewLayout, { quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout });
+    return (_jsx(CacheProvider, { children: _jsx("div", { ...styling, ref: wrapperRef, className: classnames('ss__quickview-modal', className, internalClassName), onClick: (e) => e.stopPropagation(), children: _jsx(Modal, { ...subProps.modal, open: isOpen, children: product ? (_jsx(QuickviewTracker, { quickviewManager: quickviewManager, product: product, children: layoutContent }, `${product.responseId}-${product.id}`)) : (layoutContent) }) }) }));
+});

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+import { SlideDirectionType } from '../../Molecules/Slideout';
+import { QuickviewLayoutLang, QuickviewLayoutTemplatesLegalProps } from '../../Organisms/QuickviewLayout';
+import type { QuickviewManager } from '@athoscommerce/snap-controller';
+export declare const QuickviewSlideout: ((properties: QuickviewSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type QuickviewSlideoutProps = {
+    quickviewManager: QuickviewManager;
+    slideDirection?: SlideDirectionType;
+    width?: string;
+    overlayColor?: string;
+    lang?: Partial<QuickviewLayoutLang>;
+    layout?: QuickviewLayoutTemplatesLegalProps['layout'];
+} & Omit<QuickviewLayoutTemplatesLegalProps, 'layout'> & Omit<ComponentProps, 'customComponent'>;
+//# sourceMappingURL=QuickviewSlideout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickviewSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/QuickviewSlideout/QuickviewSlideout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAIN,mBAAmB,EACnB,kCAAkC,EAClC,MAAM,iCAAiC,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAqBvE,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CA2I3E,CAAC;AAOH,MAAM,MAAM,sBAAsB,GAAG;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAEpC,MAAM,CAAC,EAAE,kCAAkC,CAAC,QAAQ,CAAC,CAAC;CACtD,GAAG,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,GACrD,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC"}