@athoscommerce/snap-preact 1.10.0 → 1.11.0

package/dist/esm/components/src/components/Molecules/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AA4HpF,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CAuNjD,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AA4HpF,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CAoNjD,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/Grid/Grid.js

@@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { useA11y, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Image } from '../../Atoms/Image';
-import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { cloneWithProps, defined, mergeProps, mergeStyles, selectionKey } from '../../../utilities';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 extend([namesPlugin]);
@@ -150,22 +150,18 @@ export const Grid = observer((properties) => {
     }
     // selection state
     const [selection, setSelection] = useState(selected || []);
-    // original selection state
-    const [originalSelected] = useState(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = useState(() => selectionKey(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = selectionKey(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (multiSelect) {
             let newArray;

package/dist/esm/components/src/components/Molecules/List/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AAmDpF,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CAmLjD,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAU3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AAmDpF,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CAgLjD,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/List/List.js

@@ -6,7 +6,7 @@ import deepmerge from 'deepmerge';
 import { filters } from '@athoscommerce/snap-toolbox';
 import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { defined, mergeProps, mergeStyles, selectionKey } from '../../../utilities';
 import { Checkbox } from '../Checkbox';
 import { useA11y, useLang, useCustomComponentOverride } from '../../../hooks';
 import { Icon } from '../../Atoms/Icon';
@@ -95,22 +95,18 @@ export const List = observer((properties) => {
     }
     // selection state
     const [selection, setSelection] = useState(selected || []);
-    // original selection state
-    const [originalSelected] = useState(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = useState(() => selectionKey(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = selectionKey(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         let newArray;
         if (multiSelect) {

package/dist/esm/components/src/components/Molecules/RadioList/RadioList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/RadioList/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AA+CpF,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAoJ3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}
+{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/RadioList/RadioList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAIzE,OAAO,EAAE,IAAI,EAAgD,MAAM,gBAAgB,CAAC;AA+CpF,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAiJ3D,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/RadioList/RadioList.js

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useTreePath } from '../../../providers';
-import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { defined, mergeProps, mergeStyles, selectionKey } from '../../../utilities';
 import { useState } from 'react';
 import { Radio } from '../Radio/Radio';
 import { useA11y, useLang, useCustomComponentOverride } from '../../../hooks';
@@ -86,22 +86,18 @@ export const RadioList = observer((properties) => {
     const styling = mergeStyles(props, defaultStyles);
     // selection state
     const [selection, setSelection] = useState(selected);
-    // original selection state
-    const [originalSelected] = useState(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = useState(() => selectionKey(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = selectionKey(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (onSelect) {
             onSelect(e, option);

package/dist/esm/components/src/components/Molecules/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAiE3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA+RrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,IAAI,CAAC;QACjB,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,OAAO,CAAC;KACd,CAAC,CAAC;CACH"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAS3B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAiE3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA4RrD,CAAC;AAQH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,IAAI,CAAC;QACjB,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,OAAO,CAAC;KACd,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/Select/Select.js

@@ -4,7 +4,7 @@ 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 { defined, mergeProps, mergeStyles, selectionKey } from '../../../utilities';
 import { Dropdown } from '../../Atoms/Dropdown';
 import { Button } from '../../Atoms/Button';
 import { Icon } from '../../Atoms/Icon';
@@ -129,22 +129,18 @@ export const Select = observer((properties) => {
     const [open, setOpen] = useState(Boolean(startOpen));
     // selection state
     const [selection, setSelection] = useState(selected);
-    // original selection state
-    const [originalSelected] = useState(selected);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = useState(() => selectionKey(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = selectionKey(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     if (selection && clearSelection) {
         options = [
             {

package/dist/esm/components/src/components/Molecules/TabSelection/TabSelection.d.ts

@@ -0,0 +1,32 @@
+import { h } from 'preact';
+import type { TabManagerStore, Tab } from '../../../../../src/Templates/Stores/TabManagerStore';
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+import { LangAttributes } from '../../../hooks/useLang';
+export declare const TabSelection: ((properties: TabSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type TabSelectionProps = {
+    lang?: Partial<TabSelectionLang>;
+    tabManager?: TabManagerStore;
+} & TabSelectionTemplatesLegalProps & ComponentProps<TabSelectionProps>;
+export type TabSelectionTemplatesLegalProps = {
+    titleText?: string;
+    showResultCount?: boolean;
+    enableEmptyTabs?: boolean;
+    onTabClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, tab: Tab) => void;
+};
+export interface TabSelectionLang {
+    title?: Lang<{
+        tabManager: TabManagerStore;
+    }>;
+    tabList?: LangAttributes<{
+        tabManager: TabManagerStore;
+    }>;
+    tabButton?: Lang<{
+        tab: Tab;
+        resultCount?: number;
+        active: boolean;
+    }>;
+}
+//# sourceMappingURL=TabSelection.d.ts.map

package/dist/esm/components/src/components/Molecules/TabSelection/TabSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TabSelection/TabSelection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,qDAAqD,CAAC;AAChG,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAwBxD,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA6GjE,CAAC;AAMH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9E,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;QAAE,UAAU,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,cAAc,CAAC;QAAE,UAAU,EAAE,eAAe,CAAA;KAAE,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,IAAI,CAAC;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACtE"}

package/dist/esm/components/src/components/Molecules/TabSelection/TabSelection.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useLang, useCustomComponentOverride } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+const defaultStyles = () => {
+    return css({
+        '.ss__tab-selection__title': {
+            textAlign: 'center',
+        },
+        '.ss__tab-selection__tabs': {
+            display: 'flex',
+            gap: '10px',
+            textAlign: 'center',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+        },
+        '.ss__tab-selection__button--active': {
+            fontWeight: 'bold',
+        },
+        '.ss__tab-selection__button__count': {
+            marginLeft: '5px',
+        },
+    });
+};
+export const TabSelection = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        showResultCount: true,
+        enableEmptyTabs: false,
+    };
+    const props = mergeProps('tabSelection', globalTheme, defaultProps, properties);
+    const { tabManager, titleText, showResultCount, enableEmptyTabs, onTabClick, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('tabSelection', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    if (!tabManager || !tabManager.tabs?.length) {
+        return null;
+    }
+    const subProps = {
+        button: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+    };
+    function getResultCount(controller) {
+        const store = controller.store;
+        return store?.loaded ? store.pagination?.totalResults : undefined;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        title: {
+            value: titleText,
+        },
+        tabList: {
+            attributes: {
+                'aria-label': 'Result tabs',
+            },
+        },
+    };
+    //deep merge with props.lang - scoped per key, each is resolved against different data
+    const langs = deepmerge(defaultLang, { title: props.lang?.title || {}, tabList: props.lang?.tabList || {} });
+    const mergedLang = useLang(langs, { tabManager }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__tab-selection', className, internalClassName), children: [titleText || props.lang?.title?.value ? _jsx("h4", { className: "ss__tab-selection__title", ...mergedLang.title?.all }) : null, _jsx("div", { className: "ss__tab-selection__tabs", role: "tablist", ...mergedLang.tabList?.attributes, children: tabManager.tabs.map((tab) => {
+                        const active = tabManager.active?.id === tab.id;
+                        const resultCount = getResultCount(tab.controller);
+                        const disabled = !enableEmptyTabs && !active && resultCount === 0;
+                        const label = tab.label || tab.id;
+                        const displayedCount = showResultCount ? resultCount : undefined;
+                        const defaultTabLang = {
+                            tabButton: {
+                                value: label,
+                                attributes: {
+                                    'aria-label': typeof displayedCount == 'number' ? `${label}, ${displayedCount} results` : label,
+                                },
+                            },
+                        };
+                        const tabLangs = deepmerge(defaultTabLang, { tabButton: props.lang?.tabButton || {} });
+                        const tabLang = useLang(tabLangs, { tab, resultCount, active }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                        return (_jsxs(Button, { ...subProps.button, internalClassName: classnames('ss__tab-selection__button', `ss__tab-selection__button--${tab.id}`, {
+                                'ss__tab-selection__button--active': active,
+                            }), disabled: disabled, 
+                            // @ts-ignore - role and aria-selected are valid props for Button, but not defined in ButtonProps
+                            role: "tab", "aria-selected": active, ...tabLang.tabButton?.attributes, onClick: (e) => {
+                                onTabClick && onTabClick(e, tab);
+                                tabManager.setActive(tab.id);
+                            }, children: [_jsx("span", { className: "ss__tab-selection__button__label", ...tabLang.tabButton?.value }), typeof displayedCount == 'number' ? _jsxs("span", { className: "ss__tab-selection__button__count", children: ["(", displayedCount, ")"] }) : null] }, tab.id));
+                    }) })] }) }));
+});

package/dist/esm/components/src/components/Molecules/TabSelection/index.d.ts

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

package/dist/esm/components/src/components/Molecules/TabSelection/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/TabSelection/index.js

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

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAoIvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}
+{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAwIvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.js

@@ -319,5 +319,5 @@ export const TemplatesEditor = observer((properties) => {
                                 return (_jsx("div", { className: classnames('tab', { active: editorStore.storedState.activeTab === tab }), onClick: () => {
                                         editorStore.switchTabs(tab);
                                     }, children: tab }, i));
-                            }) }), _jsxs("div", { className: "tab-view", children: [_jsx("div", { className: "tab-view-shadow" }), _jsxs("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.controllers.search, feature: "controllers/search" }), _jsx("h1", { children: "Autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.controllers.autocomplete, feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? (_jsxs(_Fragment, { children: [_jsx(AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), _jsx(AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), _jsx("div", { className: "tab-view-shadow bottom" })] })] }), _jsx("footer", {})] }) }));
+                            }) }), _jsxs("div", { className: "tab-view", children: [_jsx("div", { className: "tab-view-shadow" }), _jsxs("div", { className: "tab-view-content", children: [editorStore.storedState.activeTab === 'templates' ? (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/search" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('search'), feature: "controllers/search" }), _jsx("h1", { children: "Autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: 0, feature: "targets/autocomplete" }), _jsx(AbstractedControls, { editorStore: editorStore, data: snap.getTemplateController('autocomplete'), feature: "controllers/autocomplete" })] })) : (''), editorStore.storedState.activeTab === 'configuration' ? (_jsxs(_Fragment, { children: [_jsx(AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), _jsx(AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), _jsx("div", { className: "tab-view-shadow bottom" })] })] }), _jsx("footer", {})] }) }));
 });

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

@@ -1,10 +1,11 @@
 import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
 import { ComponentProps, RecommendationComponentNames, JSXComponent } from '../../../types';
 import { Lang } from '../../../hooks';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const AutocompleteLayout: ((properties: AutocompleteLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
-export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
+export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | 'tabSelection' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
 type ColumnsNames = 'c1' | 'c2' | 'c3' | 'c4';
 type PrebuiltLayouts = 'terms' | 'mobile' | 'desktop' | 'tablet';
 type ModuleNamesWithColumns = ModuleNames | ColumnsNames | ModuleNames[] | ColumnsNames[];
@@ -18,6 +19,7 @@ export type AutocompleteLayoutProps = {
     resultComponent?: JSXComponent | JSX.Element;
     controller: AutocompleteController;
     lang?: Partial<AutocompleteLayoutLang>;
+    tabManager?: TabManagerStore;
 } & Omit<AutocompleteLayoutTemplatesLegalProps, 'resultComponent'> & ComponentProps<AutocompleteLayoutProps>;
 export type AutocompleteLayoutTemplatesLegalProps = {
     resultComponent?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"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"}

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

@@ -18,6 +18,7 @@ import { TermsList } from '../TermsList';
 import { Terms } from '../../Molecules/Terms';
 import { FacetsHorizontal } from '../FacetsHorizontal';
 import { Button } from '../../Atoms/Button';
+import { TabSelection } from '../../Molecules/TabSelection';
 import { createRecommendationTemplate } from '../../../hooks/createRecommendationTemplate';
 const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, column1, column2, column3, column4, }) => {
     let inputViewportOffsetBottom = 0;
@@ -180,7 +181,7 @@ export const AutocompleteLayout = observer((properties) => {
             width: '150px',
         },
         column3: {
-            layout: [['content'], ['_', 'button.see-more']],
+            layout: [['tabSelection'], ['content'], ['_', 'button.see-more']],
             width: 'auto',
             alignContent: 'space-between',
         },
@@ -274,7 +275,7 @@ export const AutocompleteLayout = observer((properties) => {
             input = document.querySelector(input);
         }
     }
-    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, } = props;
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, tabManager, } = props;
     let layout = props.layout;
     const subProps = {
         button: {
@@ -376,6 +377,17 @@ export const AutocompleteLayout = observer((properties) => {
             theme: props.theme,
             treePath: properties.treePath,
         },
+        tabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
     };
     const { search, terms, trending, results, merchandising, pagination, filters, facets, state, loading, loaded } = controller.store;
     const history = controller.store.history || [];
@@ -514,6 +526,9 @@ export const AutocompleteLayout = observer((properties) => {
         if (module == 'no-results' && showResults) {
             return (_jsx("div", { className: "ss__autocomplete__content", children: results.length == 0 && !loading ? (_jsxs("div", { className: "ss__autocomplete__content__no-results", children: [_jsx("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all }), RecommendationTemplateComponent && recsController?.store?.loaded ? (_jsx("div", { className: "ss__autocomplete__content__no-results__recommendations", children: _jsx(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : (_jsx(_Fragment, {})) }));
         }
+        if (module == 'tabSelection') {
+            return tabManager ? _jsx(TabSelection, { ...subProps.tabSelection, tabManager: tabManager }) : null;
+        }
         if (module == '_') {
             return _jsx("div", { className: "ss__autocomplete__separator" });
         }

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

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '../../../types';
 import type { SearchController } from '@athoscommerce/snap-controller';
 import { ButtonProps } from '../../Atoms/Button';
+import type { TabManagerStore } from '../../../../../src/Templates/Stores/TabManagerStore';
 export declare const Layout: ((properties: LayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
@@ -8,6 +9,7 @@ export interface LayoutProps extends ComponentProps {
     controller: SearchController;
     layout: (ModuleNames | ModuleNames[])[];
     toggleSideBarButton?: Partial<ButtonProps>;
+    tabManager?: TabManagerStore;
 }
-export type ModuleNames = 'searchHeader' | 'filterSummary' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facets' | 'facetsHorizontal' | 'banner.left';
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | 'tabSelection' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facets' | 'facetsHorizontal' | 'banner.left';
 //# sourceMappingURL=Layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Layout/Layout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAMvE,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAiCzD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiRrD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,WAAW,GAEpB,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,GAEf,QAAQ,GACR,kBAAkB,GAClB,aAAa,CAAC"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Layout/Layout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAMvE,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAOzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AA4B3F,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA6RrD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,eAAe,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAEpB,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,GAEf,QAAQ,GACR,kBAAkB,GAClB,aAAa,CAAC"}

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

@@ -18,6 +18,7 @@ import { ContentType } from '@athoscommerce/snap-store-mobx';
 import { Facets } from '../Facets';
 import { FacetsHorizontal } from '../FacetsHorizontal';
 import { Breadcrumbs } from '../../Atoms/Breadcrumbs';
+import { TabSelection } from '../../Molecules/TabSelection';
 const defaultStyles = ({}) => {
     return css({
         display: 'flex',
@@ -50,7 +51,7 @@ export const Layout = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('layout', globalTheme, defaultProps, properties);
-    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout } = props;
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, layout, tabManager } = props;
     delete props.treePath;
     const styling = mergeStyles(props, defaultStyles);
     const subProps = {
@@ -200,6 +201,17 @@ export const Layout = observer((properties) => {
             theme: props?.theme,
             treePath: properties.treePath,
         },
+        TabSelection: {
+            // default props
+            tabManager,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: properties.treePath,
+        },
     };
     const ToggleSideBarButton = toggleSideBarButton;
     const hasResults = controller.store.pagination.totalResults > 0;
@@ -207,6 +219,8 @@ export const Layout = observer((properties) => {
         switch (module) {
             case 'searchHeader':
                 return _jsx(SearchHeader, { ...subProps.SearchHeader });
+            case 'tabSelection':
+                return tabManager ? _jsx(TabSelection, { ...subProps.TabSelection, tabManager: tabManager }) : null;
             case 'filterSummary':
                 if (hasResults) {
                     return _jsx(FilterSummary, { ...subProps.FilterSummary });

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

@@ -1 +1 @@
-{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,gCAAgC,CAAC;AAIzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4C5G,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAiJvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACtD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;CACpD,CAAC"}
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,gCAAgC,CAAC;AAIzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAe,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4C5G,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAwJvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,eAAe,CAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACtD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;CACpD,CAAC"}

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

@@ -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"}