@searchspring/snap-preact-components 0.41.1 → 0.42.0

package/dist/esm/components/Atoms/Button/Button.js

@@ -4,6 +4,7 @@ import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider } from '../../../providers';
+import { useA11y } from '../../../hooks/useA11y';
 const CSS = {
     button: ({ color, backgroundColor, borderColor, theme }) => css({
         display: 'inline-flex',
@@ -33,13 +34,14 @@ export const Button = observer((properties) => {
     const theme = { ...globalTheme, ...properties.theme };
     const props = {
         // default props
+        disableA11y: false,
         // global theme
         ...globalTheme?.components?.button,
         // props
         ...properties,
         ...properties.theme?.components?.button,
     };
-    const { backgroundColor, borderColor, color, content, children, disabled, native, onClick, disableStyles, className, style } = props;
+    const { backgroundColor, borderColor, color, content, children, disabled, native, onClick, disableA11y, disableStyles, className, style } = props;
     const elementProps = {
         css: disableStyles
             ? [style]
@@ -58,9 +60,12 @@ export const Button = observer((properties) => {
         disabled,
         onClick: (e) => !disabled && onClick && onClick(e),
     };
+    let a11yProps = {
+        ref: (e) => useA11y(e),
+    };
     return content || children ? (jsx(CacheProvider, null, native ? (jsx("button", { ...elementProps },
         content,
-        children)) : (jsx("div", { ...elementProps },
+        children)) : (jsx("div", { ...(!disableA11y ? a11yProps : {}), ...elementProps, role: 'button', "aria-disabled": disabled },
         content,
         children)))) : (jsx(Fragment, null));
 });

package/dist/esm/components/Atoms/Button/Button.stories.d.ts

@@ -161,6 +161,20 @@ declare const _default: {
                 type: string;
             };
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/esm/components/Atoms/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/C,wBA4FE;AAEF,eAAO,MAAM,OAAO;WAAU,WAAW;;;;CAAyB,CAAC;AAKnE,eAAO,MAAM,QAAQ;WAAU,WAAW;;;;;CAAyB,CAAC;AAMpE,eAAO,MAAM,MAAM;WAAU,WAAW;;;;;CAAyB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI/C,wBAsGE;AAEF,eAAO,MAAM,OAAO;WAAU,WAAW;;;;CAAyB,CAAC;AAKnE,eAAO,MAAM,QAAQ;WAAU,WAAW;;;;;CAAyB,CAAC;AAMpE,eAAO,MAAM,MAAM;WAAU,WAAW;;;;;CAAyB,CAAC"}

package/dist/esm/components/Atoms/Button/Button.stories.js

@@ -90,6 +90,16 @@ export default {
             },
             control: { type: 'boolean' },
         },
+        disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
         ...componentArgs,
     },
 };

package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts

@@ -16,5 +16,6 @@ export interface DropdownProps extends ComponentProps {
     onToggle?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, showContent: boolean) => void;
     startOpen?: boolean;
     disableClickOutside?: boolean;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/esm/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAOzD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA8B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA4FvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAgB,MAAM,QAAQ,CAAC;AAOzD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA+B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAiGvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/esm/components/Atoms/Dropdown/Dropdown.js

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider } from '../../../providers';
 import { useClickOutside } from '../../../hooks';
 import { cloneWithProps } from '../../../utilities';
+import { useA11y } from '../../../hooks/useA11y';
 const CSS = {
     dropdown: ({ disableOverlay }) => css({
         position: 'relative',
@@ -33,13 +34,14 @@ export const Dropdown = observer((properties) => {
     const props = {
         // default props
         startOpen: false,
+        disableA11y: false,
         // global theme
         ...globalTheme?.components?.dropdown,
         // props
         ...properties,
         ...properties.theme?.components?.dropdown,
     };
-    const { button, content, children, disabled, open, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableStyles, className, style, } = props;
+    const { button, content, children, disabled, open, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableA11y, disableStyles, className, style, } = props;
     let showContent, setShowContent;
     const stateful = open === undefined;
     if (stateful) {
@@ -77,7 +79,7 @@ export const Dropdown = observer((properties) => {
     }
     return (jsx(CacheProvider, null,
         jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef },
-            jsx("div", { className: "ss__dropdown__button", onClick: (e) => {
+            jsx("div", { className: "ss__dropdown__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": showContent, role: "button", onClick: (e) => {
                     if (!disabled) {
                         toggleShowContent(e);
                         onClick && onClick(e);

package/dist/esm/components/Atoms/Dropdown/Dropdown.stories.d.ts

@@ -185,6 +185,20 @@ declare const _default: {
             };
             action: string;
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/esm/components/Atoms/Dropdown/Dropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAgHE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,aAAa;WAAU,aAAa;;;;;;CAA2B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;CAA2B,CAAC;AAM1E,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6D,CAAC;AAM7G,eAAO,MAAM,cAAc;WAAU,aAAa;;;;;CAA6D,CAAC"}
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA0HE;AAEF,eAAO,MAAM,OAAO;WAAU,aAAa;;;;;CAA2B,CAAC;AAMvE,eAAO,MAAM,aAAa;WAAU,aAAa;;;;;;CAA2B,CAAC;AAO7E,eAAO,MAAM,UAAU;WAAU,aAAa;;;;;CAA2B,CAAC;AAM1E,eAAO,MAAM,WAAW;WAAU,aAAa;;;;;CAA6D,CAAC;AAM7G,eAAO,MAAM,cAAc;WAAU,aAAa;;;;;CAA6D,CAAC"}

package/dist/esm/components/Atoms/Dropdown/Dropdown.stories.js

@@ -111,6 +111,16 @@ export default {
             },
             action: 'onToggle',
         },
+        disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
         ...componentArgs,
     },
 };

package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAA4C,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAmI9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}

package/dist/esm/components/Molecules/Carousel/Carousel.js

@@ -5,7 +5,7 @@ import { jsx, css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import deepmerge from 'deepmerge';
-import SwiperCore, { Pagination, Navigation } from 'swiper/core';
+import SwiperCore, { Pagination, Navigation, A11y } from 'swiper/core';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { defined } from '../../../utilities';
@@ -19,6 +19,10 @@ const CSS = {
         margin: 0,
         padding: 0,
         overflow: 'hidden',
+        '.swiper-notification': {
+            position: 'absolute',
+            left: '100000000000000px',
+        },
         '&.ss__carousel-vertical': {
             flexDirection: 'column',
             '.swiper-slide': {
@@ -208,7 +212,7 @@ export const Carousel = observer((properties) => {
             theme: props.theme,
         },
     };
-    const swiperModulesUnfiltered = modules ? [Navigation, Pagination].concat(modules) : [Navigation, Pagination];
+    const swiperModulesUnfiltered = modules ? [Navigation, Pagination, A11y].concat(modules) : [Navigation, Pagination, A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
     const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
     SwiperCore.use(swiperModules);

package/dist/esm/components/Molecules/Checkbox/Checkbox.d.ts

@@ -13,5 +13,6 @@ export interface CheckboxProps extends ComponentProps {
     size?: string;
     startChecked?: boolean;
     native?: boolean;
+    disableA11y?: boolean;
 }
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/esm/components/Molecules/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA0B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAuFvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+FvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/esm/components/Molecules/Checkbox/Checkbox.js

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { defined } from '../../../utilities';
 import { useTheme, CacheProvider } from '../../../providers';
 import { Icon } from '../../Atoms/Icon';
+import { useA11y } from '../../../hooks/useA11y';
 const CSS = {
     checkbox: ({ size, color, theme }) => css({
         display: 'inline-flex',
@@ -31,13 +32,14 @@ export const Checkbox = observer((properties) => {
         // default props
         size: '12px',
         startChecked: false,
+        disableA11y: false,
         // global theme
         ...globalTheme?.components?.checkbox,
         // props
         ...properties,
         ...properties.theme?.components?.checkbox,
     };
-    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableStyles, className, style } = props;
+    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableA11y, disableStyles, className, style } = props;
     const subProps = {
         icon: {
             // default props
@@ -87,5 +89,5 @@ export const Checkbox = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return (jsx(CacheProvider, null, native ? (jsx("input", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), type: "checkbox", onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState })) : (jsx("span", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), onClick: (e) => clickFunc(e) }, checkedState ? jsx(Icon, { ...subProps.icon }) : jsx("span", { className: "ss__checkbox__empty" })))));
+    return (jsx(CacheProvider, null, native ? (jsx("input", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), type: "checkbox", onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState })) : (jsx("span", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), onClick: (e) => clickFunc(e), ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-label": `${disabled ? 'disabled' : ''} ${checkedState ? 'checked' : 'unchecked'} checkbox`, role: "checkbox" }, checkedState ? jsx(Icon, { ...subProps.icon }) : jsx("span", { className: "ss__checkbox__empty" })))));
 });

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts

@@ -187,6 +187,20 @@ declare const _default: {
             };
             action: string;
         };
+        disableA11y: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAEF,eAAO,MAAM,OAAO,SAAU,aAAa,kBAA2B,CAAC;AAEvE,eAAO,MAAM,QAAQ;WAAU,aAAa;;;;;CAA2B,CAAC;AAMxE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;CAA2B,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAwHE;AAEF,eAAO,MAAM,OAAO,SAAU,aAAa,kBAA2B,CAAC;AAEvE,eAAO,MAAM,QAAQ;WAAU,aAAa;;;;;CAA2B,CAAC;AAMxE,eAAO,MAAM,MAAM;WAAU,aAAa;;;;CAA2B,CAAC"}

package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.js

@@ -109,6 +109,16 @@ export default {
             },
             action: 'onClick',
         },
+        disableA11y: {
+            description: 'boolean to disable autoset ally properties',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
         ...componentArgs,
     },
 };

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import { FacetValue } from '@searchspring/snap-store-mobx';
+import type { FacetValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetGridOptions: ((properties: FacetGridOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetGridOptionsProps extends ComponentProps {
-    values: FacetValue[];
+    values?: FacetValue[];
     columns?: number;
     gapSize?: string;
     onClick?: (e: React.MouseEvent) => void;
+    facet?: ValueFacet;
     previewOnFocus?: boolean;
     valueProps?: any;
 }

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAiE3D,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAoDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAiE5E,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA6DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.js

@@ -74,7 +74,7 @@ export const FacetGridOptions = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.facetGridOptions,
     };
-    const { values, columns, gapSize, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const { values, columns, gapSize, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } = props;
     const styling = {};
     if (!disableStyles) {
         styling.css = [CSS.grid({ columns, gapSize, theme }), style];
@@ -82,8 +82,13 @@ export const FacetGridOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return values?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+    const facetValues = values || facet?.values;
+    return facetValues?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, facetValues.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                : facet?.label
+                    ? `filter by ${facet?.label} - ${value.label}`
+                    : `filter by ${value.label}`, ...valueProps, onMouseEnter: (e) => previewOnFocus && valueProps.onMouseEnter(e, value), href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
             } },

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.stories.d.ts

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         columns: {
             defaultValue: number;
             description: string;

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetGridOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAoFE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}
+{"version":3,"file":"FacetGridOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA8FE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}

package/dist/esm/components/Molecules/FacetGridOptions/FacetGridOptions.stories.js

@@ -22,7 +22,7 @@ export default {
     argTypes: {
         values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'facet values store array',
@@ -30,6 +30,16 @@ export default {
             },
             control: { type: 'none' },
         },
+        facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
         columns: {
             defaultValue: 4,
             description: 'Number of columns in grid',

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import type { FacetHierarchyValue } from '@searchspring/snap-store-mobx';
+import type { FacetHierarchyValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetHierarchyOptionsProps extends ComponentProps {
-    values: FacetHierarchyValue[];
+    values?: FacetHierarchyValue[];
     hideCount?: boolean;
+    facet?: ValueFacet;
     onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AA2CzE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAqDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA2CrF,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CA8DjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.js

@@ -54,7 +54,7 @@ export const FacetHierarchyOptions = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.facetHierarchyOptions,
     };
-    const { values, hideCount, onClick, disableStyles, previewOnFocus, valueProps, className, style } = props;
+    const { values, hideCount, onClick, disableStyles, previewOnFocus, valueProps, facet, className, style } = props;
     const styling = {};
     if (!disableStyles) {
         styling.css = [CSS.hierarchy({ theme }), style];
@@ -62,11 +62,16 @@ export const FacetHierarchyOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return values?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), href: value.url?.link?.href, onClick: (e) => {
+    const facetValues = values || facet?.values;
+    return facetValues?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, facetValues.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), "aria-label": value.filtered
+                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                : facet?.label
+                    ? `filter by ${facet?.label} - ${value.label}`
+                    : `filter by ${value.label}`, href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
-            }, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
+            }, ...valueProps, onMouseEnter: (e) => previewOnFocus && valueProps.onMouseEnter(e, value) },
             jsx("span", { className: "ss__facet-hierarchy-options__option__value" },
                 value.label,
                 !hideCount && value?.count > 0 && !value.filtered && (jsx("span", { className: "ss__facet-hierarchy-options__option__value__count" },

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.d.ts

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         hideCount: {
             defaultValue: boolean;
             description: string;

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetHierarchyOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAyB,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAK5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAyEE;AAaF,eAAO,MAAM,OAAO;WAAU,0BAA0B;;wBAAsD,gBAAgB;;;;;;CAE7H,CAAC"}
+{"version":3,"file":"FacetHierarchyOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAyB,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAK5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAmFE;AAaF,eAAO,MAAM,OAAO;WAAU,0BAA0B;;wBAAsD,gBAAgB;;;;;;CAE7H,CAAC"}

package/dist/esm/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.js

@@ -23,7 +23,7 @@ export default {
     argTypes: {
         values: {
             description: 'Facet.values store reference',
-            type: { required: true },
+            type: { required: false },
             table: {
                 type: {
                     summary: 'object',
@@ -31,6 +31,16 @@ export default {
             },
             control: { type: 'object' },
         },
+        facet: {
+            description: 'Facet store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
         hideCount: {
             defaultValue: false,
             description: 'Hide facet option count',

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import { ComponentProps } from '../../../types';
-import type { FacetValue } from '@searchspring/snap-store-mobx';
+import type { FacetValue, ValueFacet } from '@searchspring/snap-store-mobx';
 export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
     displayName: string;
 };
 export interface FacetListOptionsProps extends ComponentProps {
-    values: FacetValue[];
+    values?: FacetValue[];
     hideCheckbox?: boolean;
     hideCount?: boolean;
+    facet?: ValueFacet;
     onClick?: (e: React.MouseEvent) => void;
     previewOnFocus?: boolean;
     valueProps?: any;

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA6BhE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA+DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}
+{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAG5D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AA6B5E,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAwEvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.js

@@ -42,7 +42,7 @@ export const FacetListOptions = observer((properties) => {
         ...properties,
         ...properties.theme?.components?.facetListOptions,
     };
-    const { values, hideCheckbox, hideCount, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const { values, hideCheckbox, hideCount, onClick, previewOnFocus, valueProps, facet, disableStyles, className, style } = props;
     const subProps = {
         checkbox: {
             // default props
@@ -64,12 +64,17 @@ export const FacetListOptions = observer((properties) => {
     else if (style) {
         styling.css = [style];
     }
-    return values?.length ? (jsx(CacheProvider, null,
-        jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, href: value.url?.link?.href, onClick: (e) => {
+    const facetValues = values || facet?.values;
+    return facetValues?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, facetValues.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), "aria-label": value.filtered
+                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                : facet?.label
+                    ? `filter by ${facet?.label} - ${value.label}`
+                    : `filter by ${value.label}`, ...valueProps, onMouseEnter: (e) => previewOnFocus && valueProps.onMouseEnter(e, value), href: value.url?.link?.href, onClick: (e) => {
                 value.url?.link?.onClick(e);
                 onClick && onClick(e);
             } },
-            !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered }),
+            !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered, disableA11y: true }),
             jsx("span", { className: "ss__facet-list-options__option__value" },
                 value.label,
                 !hideCount && value?.count > 0 && jsx("span", { className: "ss__facet-list-options__option__value__count" },

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.stories.d.ts

@@ -79,6 +79,20 @@ declare const _default: {
                 type: string;
             };
         };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
         hideCheckbox: {
             defaultValue: boolean;
             description: string;

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAoFE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}
+{"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAgB5D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA8FE;AAUF,eAAO,MAAM,OAAO;WAAU,qBAAqB;;wBAAsD,gBAAgB;;;;;;CAExH,CAAC"}