@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,468 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Facet = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var FacetListOptions_1 = require("../../Molecules/FacetListOptions");
+var FacetGridOptions_1 = require("../../Molecules/FacetGridOptions");
+var FacetPaletteOptions_1 = require("../../Molecules/FacetPaletteOptions");
+var FacetHierarchyOptions_1 = require("../../Molecules/FacetHierarchyOptions");
+var FacetSlider_1 = require("../../Molecules/FacetSlider");
+var SearchInput_1 = require("../../Molecules/SearchInput");
+var Icon_1 = require("../../Atoms/Icon");
+var Dropdown_1 = require("../../Atoms/Dropdown");
+var types_1 = require("../../../types");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var useA11y_1 = require("../../../hooks/useA11y");
+// import { FacetToggle, FacetToggleProps } from '../../Molecules/FacetToggle';
+var hooks_2 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var Button_1 = require("../../Atoms/Button");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var disableCollapse = _a.disableCollapse, color = _a.color, theme = _a.theme;
+    return (0, react_1.css)({
+        width: '100%',
+        margin: '0 0 20px 0',
+        '& .ss__facet__header': {
+            cursor: disableCollapse ? undefined : 'pointer',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            color: color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary),
+            border: 'none',
+            borderBottom: "2px solid ".concat(((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.secondary) || '#ccc'),
+            padding: '6px 0',
+            '& .ss__facet__header__inner': {
+                display: 'flex',
+            },
+        },
+        '& .ss__facet__header__clear-all': {
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            marginLeft: '10px',
+            border: 'none',
+            padding: '0',
+            color: color || ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary),
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+            '& .ss__icon': {
+                marginLeft: '5px',
+            },
+        },
+        '& .ss__facet__options': {
+            marginTop: '8px',
+            maxHeight: '300px',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+        },
+        '& .ss__facet__show-more-less': {
+            display: 'block',
+            margin: '8px',
+            cursor: 'pointer',
+            '& .ss__icon': {
+                marginRight: '8px',
+            },
+        },
+        '& .ss__search-input': {
+            margin: '16px 0 0 0',
+        },
+        '& .ss__facet__header__selected-count': {
+            margin: '0px 5px',
+        },
+        '.ss__facet__range-inputs': {
+            display: 'flex',
+            flexDirection: 'column',
+            '.ss__facet__range-inputs__separator': {
+                margin: '5px',
+            },
+        },
+        '.ss__facet__range-inputs__row': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            '&.ss__facet__range-inputs__row--button-wrapper': {
+                justifyContent: 'center',
+                '.ss__facet__range-input__button--submit': {
+                    margin: '10px',
+                },
+            },
+        },
+        '.ss__facet__range-input': {
+            flexDirection: 'row',
+            display: 'flex',
+            border: "1px solid ".concat(((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _h === void 0 ? void 0 : _h.colors) === null || _j === void 0 ? void 0 : _j.secondary) || '#ccc'),
+            backgroundColor: 'white',
+            alignItems: 'center',
+            '.ss__facet__range-input__prefix': {
+                padding: '0 5px',
+            },
+            '.ss__facet__range-input__input': {
+                width: '100%',
+                border: 'none',
+                minHeight: '35px',
+            },
+        },
+    });
+};
+exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        limit: 12,
+        disableOverflow: false,
+        iconCollapse: 'angle-up',
+        iconExpand: 'angle-down',
+        showMoreText: 'Show More',
+        showLessText: 'Show Less',
+        iconOverflowMore: 'plus',
+        iconOverflowLess: 'minus',
+        clearAllText: 'Clear All',
+        rangeInputsSubmitButtonText: 'Submit',
+        rangeInputsSeparatorText: ' - ',
+        searchable: false,
+        treePath: globalTreePath,
+        name: (0, snap_toolbox_1.fieldNameToComponentName)(properties.facet.field),
+    };
+    var props = (0, utilities_1.mergeProps)('facet', globalTheme, defaultProps, properties);
+    //manual props override on a per facet display type level using the display prop
+    if (props.display && props.display[(_a = props.facet) === null || _a === void 0 ? void 0 : _a.display]) {
+        props = __assign(__assign({}, props), props.display[(_b = props.facet) === null || _b === void 0 ? void 0 : _b.display]);
+    }
+    //manual props override on a per facet field type level using the fields prop
+    if (props.fields && props.fields[(_c = props.facet) === null || _c === void 0 ? void 0 : _c.field]) {
+        props = __assign(__assign({}, props), props.fields[(_d = props.facet) === null || _d === void 0 ? void 0 : _d.field]);
+    }
+    var disableCollapse = props.disableCollapse, facet = props.facet, iconCollapse = props.iconCollapse, iconExpand = props.iconExpand, limit = props.limit, statefulOverflow = props.statefulOverflow, disableOverflow = props.disableOverflow, iconColor = props.iconColor, color = props.color, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, showSelectedCount = props.showSelectedCount, hideSelectedCountParenthesis = props.hideSelectedCountParenthesis, clearAllIcon = props.clearAllIcon, showClearAllText = props.showClearAllText, justContent = props.justContent, horizontal = props.horizontal, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var subProps = {
+        dropdown: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__dropdown', disableClickOutside: true, disableOverlay: true }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__dropdown__icon', size: '12px', fill: iconColor || color }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " dropdown") }),
+        button: __assign(__assign({}, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: "".concat(treePath, " dropdown") }),
+        showMoreLessIcon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__show-more-less__icon', size: '10px', fill: iconColor || color }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        facetHierarchyOptions: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__facet-hierarchy-options' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+            horizontal: horizontal,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        facetListOptions: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__facet-list-options' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+            horizontal: horizontal,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        facetGridOptions: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__facet-grid-options' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+            horizontal: horizontal,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        facetPaletteOptions: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__facet-palette-options' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+            horizontal: horizontal,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        // facetToggle: {
+        // 	// default props
+        // 	className: 'ss__facet__facet-toggle',
+        // 	// inherited props
+        // 	...defined({
+        // 		disableStyles,
+        // 	}),
+        // 	// component theme overrides
+        // 	theme: props?.theme,
+        // 	treePath,
+        // },
+        facetSlider: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__facet-slider' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        searchInput: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet__search-input' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var limitedValues;
+    function escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+    }
+    var _s = (0, hooks_1.useState)(), overflowState = _s[0], setOverflowState = _s[1];
+    (0, hooks_1.useEffect)(function () {
+        if (statefulOverflow) {
+            var interalOverflow = {
+                enabled: false,
+                limited: true,
+                limit: 0,
+                remaining: undefined,
+                setLimit: function (limit) {
+                    if (limit != this.limit) {
+                        this.enabled = true;
+                        this.limit = limit;
+                        this.calculate();
+                    }
+                },
+                toggle: function (val) {
+                    if (typeof val != 'undefined') {
+                        this.limited = val;
+                    }
+                    else {
+                        this.limited = !this.limited;
+                    }
+                    this.calculate();
+                },
+                calculate: function () {
+                    var _a, _b;
+                    if (this.limit > 0) {
+                        var remaining = ((_a = facet === null || facet === void 0 ? void 0 : facet.values) === null || _a === void 0 ? void 0 : _a.length) - this.limit;
+                        if (remaining > 0 && !((_b = facet === null || facet === void 0 ? void 0 : facet.search) === null || _b === void 0 ? void 0 : _b.input)) {
+                            this.enabled = true;
+                            if (this.limited) {
+                                this.remaining = remaining;
+                            }
+                            else {
+                                this.remaining = 0;
+                            }
+                        }
+                        else {
+                            this.enabled = false;
+                        }
+                    }
+                    setOverflowState(__assign({}, this));
+                },
+            };
+            setOverflowState(interalOverflow);
+        }
+    }, []);
+    if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && limit && Number.isInteger(limit) && !disableOverflow) {
+        if (statefulOverflow) {
+            var values = (facet === null || facet === void 0 ? void 0 : facet.values) || [];
+            if ((_e = facet === null || facet === void 0 ? void 0 : facet.search) === null || _e === void 0 ? void 0 : _e.input) {
+                var search_1 = new RegExp(escapeRegExp((_f = facet === null || facet === void 0 ? void 0 : facet.search) === null || _f === void 0 ? void 0 : _f.input), 'i');
+                values = facet === null || facet === void 0 ? void 0 : facet.values.filter(function (value) { return String((value === null || value === void 0 ? void 0 : value.label) || '').match(search_1); });
+            }
+            if ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.enabled) && (overflowState === null || overflowState === void 0 ? void 0 : overflowState.limited)) {
+                values = values.slice(0, overflowState === null || overflowState === void 0 ? void 0 : overflowState.limit);
+            }
+            if ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.limit) !== limit) {
+                overflowState === null || overflowState === void 0 ? void 0 : overflowState.setLimit(limit);
+            }
+            limitedValues = values;
+        }
+        else {
+            (_g = facet.overflow) === null || _g === void 0 ? void 0 : _g.setLimit(limit);
+            limitedValues = facet === null || facet === void 0 ? void 0 : facet.refinedValues;
+        }
+    }
+    else if ((facet === null || facet === void 0 ? void 0 : facet.overflow) && Number.isInteger(limit)) {
+        limitedValues = facet === null || facet === void 0 ? void 0 : facet.values.slice(0, limit);
+    }
+    else {
+        limitedValues = facet === null || facet === void 0 ? void 0 : facet.values;
+    }
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Search within facet
+    var searchableFacet = {
+        allowableTypes: ((_h = properties.treePath) === null || _h === void 0 ? void 0 : _h.includes('autocomplete')) ? [] : ['list', 'grid', 'palette'],
+        searchFilter: function (e) {
+            if (facet === null || facet === void 0 ? void 0 : facet.search) {
+                facet.search.input = e.target.value;
+            }
+        },
+    };
+    var renderFacet = true;
+    if (facet.display == types_1.FacetDisplay.TOGGLE && facet && (facet === null || facet === void 0 ? void 0 : facet.values.length) !== 1) {
+        renderFacet = false;
+    }
+    var facetContentProps = __assign({ limitedValues: limitedValues, overflowState: overflowState, searchableFacet: searchableFacet, subProps: subProps, className: className, internalClassName: internalClassName }, props);
+    //initialize lang
+    var defaultLang = {
+        showMoreText: {
+            value: facetContentProps.showMoreText,
+        },
+        showLessText: {
+            value: facetContentProps.showLessText,
+        },
+        dropdownButton: {
+            attributes: {
+                'aria-label': "currently ".concat((facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'collapsed' : 'open', " ").concat(facet.label, " facet dropdown ").concat(((_j = facet.values) === null || _j === void 0 ? void 0 : _j.length) ? ((_k = facet.values) === null || _k === void 0 ? void 0 : _k.length) + ' options' : ''),
+            },
+        },
+        clearAllText: {
+            value: facetContentProps.clearAllText,
+        },
+        submitRangeButton: {
+            value: facetContentProps.rangeInputsSubmitButtonText,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        facet: facet,
+    });
+    var selectedCount = ((_l = facet === null || facet === void 0 ? void 0 : facet.values) === null || _l === void 0 ? void 0 : _l.filter(function (value) { return value === null || value === void 0 ? void 0 : value.filtered; }).length) ||
+        ((_m = facet === null || facet === void 0 ? void 0 : facet.active) === null || _m === void 0 ? void 0 : _m.high) !== ((_o = facet === null || facet === void 0 ? void 0 : facet.range) === null || _o === void 0 ? void 0 : _o.high) ||
+        ((_p = facet === null || facet === void 0 ? void 0 : facet.active) === null || _p === void 0 ? void 0 : _p.low) !== ((_q = facet === null || facet === void 0 ? void 0 : facet.range) === null || _q === void 0 ? void 0 : _q.low);
+    return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.field), "".concat(facet.collapsed ? 'ss__facet--collapsed' : ''), className, internalClassName, "".concat(facet.display ? "ss__facet--".concat(facet.display) : ''), (statefulOverflow ? (overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0 > 0 : (((_r = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _r === void 0 ? void 0 : _r.remaining) || 0) > 0) || (facet === null || facet === void 0 ? void 0 : facet.display) == 'slider'
+                ? ''
+                : 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang }))) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function () { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3 }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
+                                        e.stopPropagation();
+                                        facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
+                                    }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((facet === null || facet === void 0 ? void 0 : facet.collapsed)
+                            ? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse))), { name: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'expand' : 'collapse' })))] })), children: (0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang })) }))) })) })) : null;
+});
+var FacetContent = function (props) {
+    var _a, _b, _c, _d;
+    var searchableFacet = props.searchableFacet, subProps = props.subProps, className = props.className, internalClassName = props.internalClassName, limitedValues = props.limitedValues, facet = props.facet, statefulOverflow = props.statefulOverflow, limit = props.limit, overflowSlot = props.overflowSlot, optionsSlot = props.optionsSlot, searchable = props.searchable, iconOverflowMore = props.iconOverflowMore, iconOverflowLess = props.iconOverflowLess, disableOverflow = props.disableOverflow, previewOnFocus = props.previewOnFocus, rangeInputs = props.rangeInputs, rangeInputsPrefix = props.rangeInputsPrefix, rangeInputsInheritDefaultValues = props.rangeInputsInheritDefaultValues, rangeInputsSeparatorText = props.rangeInputsSeparatorText, justContent = props.justContent, valueProps = props.valueProps, hideShowMoreLessText = props.hideShowMoreLessText, treePath = props.treePath, mergedLang = props.mergedLang;
+    var _e = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? (_a = facet === null || facet === void 0 ? void 0 : facet.range) === null || _a === void 0 ? void 0 : _a.low : undefined), low = _e[0], setLow = _e[1];
+    var _f = (0, hooks_1.useState)(rangeInputsInheritDefaultValues && facet.type === 'range' ? (_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.high : undefined), high = _f[0], setHigh = _f[1];
+    (0, hooks_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (rangeInputsInheritDefaultValues && facet.type === 'range' && ((_a = facet === null || facet === void 0 ? void 0 : facet.active) === null || _a === void 0 ? void 0 : _a.high) !== high) {
+            setHigh((_b = facet === null || facet === void 0 ? void 0 : facet.active) === null || _b === void 0 ? void 0 : _b.high);
+        }
+        if (rangeInputsInheritDefaultValues && facet.type === 'range' && ((_c = facet === null || facet === void 0 ? void 0 : facet.active) === null || _c === void 0 ? void 0 : _c.low) !== low) {
+            setLow((_d = facet === null || facet === void 0 ? void 0 : facet.active) === null || _d === void 0 ? void 0 : _d.low);
+        }
+    }, [facet]);
+    var onDragcb = function (vals) {
+        setLow(vals[0]);
+        setHigh(vals[1]);
+    };
+    var onKeyUp = function (e) {
+        var _a, _b;
+        if (e.key === 'Enter') {
+            if (typeof low == 'number' && typeof high == 'number') {
+                (_b = (_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.click();
+            }
+        }
+    };
+    var submitButtonRef = (0, hooks_1.useRef)();
+    var overflowState;
+    if (!statefulOverflow) {
+        overflowState = facet.overflow;
+    }
+    else {
+        overflowState = props.overflowState;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchable && searchableFacet.allowableTypes.includes(facet.display) && ((0, jsx_runtime_1.jsx)(SearchInput_1.SearchInput, __assign({}, subProps.searchInput, { onChange: searchableFacet.searchFilter, placeholderText: "Search ".concat(facet.label), treePath: treePath }))), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet__options', justContent ? className : '', justContent ? internalClassName : ''), children: (function () {
+                    //manual options component
+                    if (optionsSlot) {
+                        return (0, utilities_1.cloneWithProps)(optionsSlot, { facet: facet, valueProps: valueProps, limit: limit, previewOnFocus: previewOnFocus, treePath: treePath });
+                    }
+                    else {
+                        switch (facet === null || facet === void 0 ? void 0 : facet.display) {
+                            // case FacetDisplay.TOGGLE:
+                            // 	return <FacetToggle {...subProps.facetToggle} facet={facet as ValueFacet} />;
+                            case types_1.FacetDisplay.SLIDER:
+                                return (0, jsx_runtime_1.jsx)(FacetSlider_1.FacetSlider, __assign({}, subProps.facetSlider, { onChange: onDragcb, facet: facet, treePath: treePath }));
+                            case types_1.FacetDisplay.GRID:
+                                return ((0, jsx_runtime_1.jsx)(FacetGridOptions_1.FacetGridOptions, __assign({}, subProps.facetGridOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                            case types_1.FacetDisplay.PALETTE:
+                                return ((0, jsx_runtime_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, subProps.facetPaletteOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                            case types_1.FacetDisplay.HIERARCHY:
+                                return ((0, jsx_runtime_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, __assign({}, subProps.facetHierarchyOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                            default:
+                                return ((0, jsx_runtime_1.jsx)(FacetListOptions_1.FacetListOptions, __assign({}, subProps.facetListOptions, { values: limitedValues, facet: facet, treePath: treePath })));
+                        }
+                    }
+                })() }), rangeInputs && (facet.type === 'range' || facet.type === 'range-buckets') && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-inputs__row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--low", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: low, onInput: function (e) { return (e.currentTarget.value ? setLow(Number(e.currentTarget.value)) : setLow(undefined)); }, onKeyUp: onKeyUp })] }), (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-inputs__separator", children: rangeInputsSeparatorText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__range-input ss__facet__range-input--high", children: [rangeInputsPrefix && (0, jsx_runtime_1.jsx)("span", { className: "ss__facet__range-input__prefix", children: rangeInputsPrefix }), (0, jsx_runtime_1.jsx)("input", { type: "number", className: "ss__facet__range-input__input", value: high, onInput: function (e) { return (e.currentTarget.value ? setHigh(Number(e.currentTarget.value)) : setHigh(undefined)); }, onKeyUp: onKeyUp })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__facet__range-inputs__row ss__facet__range-inputs__row--button-wrapper", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { internalClassName: "ss__facet__range-input__button--submit", ref: submitButtonRef, onClick: function () {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                                if (((_a = facet === null || facet === void 0 ? void 0 : facet.services) === null || _a === void 0 ? void 0 : _a.urlManager) && typeof low === 'number' && typeof high === 'number') {
+                                    var currentLow = low;
+                                    var currentHigh = high;
+                                    //adjust ranges if high and low have swapped.
+                                    if (currentHigh < currentLow) {
+                                        currentLow = high;
+                                        currentHigh = low;
+                                        setLow(currentLow);
+                                        setHigh(currentHigh);
+                                    }
+                                    //adjust limits if state is too high or too low
+                                    if (((_b = facet === null || facet === void 0 ? void 0 : facet.range) === null || _b === void 0 ? void 0 : _b.low) !== undefined && currentLow < ((_c = facet === null || facet === void 0 ? void 0 : facet.range) === null || _c === void 0 ? void 0 : _c.low)) {
+                                        currentLow = (_d = facet === null || facet === void 0 ? void 0 : facet.range) === null || _d === void 0 ? void 0 : _d.low;
+                                        setLow(currentLow);
+                                    }
+                                    if (((_e = facet === null || facet === void 0 ? void 0 : facet.range) === null || _e === void 0 ? void 0 : _e.high) !== undefined && currentLow > ((_f = facet === null || facet === void 0 ? void 0 : facet.range) === null || _f === void 0 ? void 0 : _f.high)) {
+                                        currentLow = (_g = facet === null || facet === void 0 ? void 0 : facet.range) === null || _g === void 0 ? void 0 : _g.high;
+                                        setLow(currentLow);
+                                    }
+                                    if (((_h = facet === null || facet === void 0 ? void 0 : facet.range) === null || _h === void 0 ? void 0 : _h.low) !== undefined && currentHigh < ((_j = facet === null || facet === void 0 ? void 0 : facet.range) === null || _j === void 0 ? void 0 : _j.low)) {
+                                        currentHigh = (_k = facet === null || facet === void 0 ? void 0 : facet.range) === null || _k === void 0 ? void 0 : _k.low;
+                                        setHigh(currentHigh);
+                                    }
+                                    if (((_l = facet === null || facet === void 0 ? void 0 : facet.range) === null || _l === void 0 ? void 0 : _l.high) !== undefined && currentHigh > ((_m = facet === null || facet === void 0 ? void 0 : facet.range) === null || _m === void 0 ? void 0 : _m.high)) {
+                                        currentHigh = (_o = facet === null || facet === void 0 ? void 0 : facet.range) === null || _o === void 0 ? void 0 : _o.high;
+                                        setHigh(currentHigh);
+                                    }
+                                    facet.services.urlManager.remove('page').set("filter.".concat(facet.field), { low: currentLow, high: currentHigh }).go();
+                                }
+                            }, children: mergedLang.submitRangeButton.value ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.submitRangeButton.all)) : null }) })] })), !disableOverflow && (overflowState === null || overflowState === void 0 ? void 0 : overflowState.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__facet__show-more-less", "aria-live": "polite", onClick: function () { return overflowState === null || overflowState === void 0 ? void 0 : overflowState.toggle(); }, ref: function (e) { return (0, useA11y_1.useA11y)(e); }, children: overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { treePath: treePath, name: ((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0 ? 'overflow-more' : 'overflow-less' }, (((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0
+                            ? __assign({}, (typeof iconOverflowMore == 'string' ? { icon: iconOverflowMore } : iconOverflowMore)) : __assign({}, (typeof iconOverflowLess == 'string' ? { icon: iconOverflowLess } : iconOverflowLess))))), !hideShowMoreLessText && ((0, jsx_runtime_1.jsx)("span", __assign({}, (((overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0) > 0 ? (_c = mergedLang.showMoreText) === null || _c === void 0 ? void 0 : _c.all : (_d = mergedLang.showLessText) === null || _d === void 0 ? void 0 : _d.all))))] })) }))] }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+import type { SearchController, AutocompleteController } from '@athoscommerce/snap-controller';
+import type { ValueFacet, RangeFacet } from '@athoscommerce/snap-store-mobx';
+export declare const Facets: ((properties: FacetsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type IndividualFacetType = ValueFacet | RangeFacet;
+export type FacetsProps = {
+    facets?: IndividualFacetType[];
+    controller?: SearchController | AutocompleteController;
+} & FacetsTemplatesLegalProps & ComponentProps<FacetsProps>;
+export type FacetsTemplatesLegalProps = {
+    limit?: number;
+    onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+};
+//# sourceMappingURL=Facets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAM7E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CA2ErD,CAAC;AAMH,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACxE,CAAC"}

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

@@ -0,0 +1,78 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Facets = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var Facet_1 = require("../Facet");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var defaultStyles = function () {
+    return (0, react_1.css)({});
+};
+exports.Facets = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        facets: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.facets,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
+    var limit = props.limit, onFacetOptionClick = props.onFacetOptionClick, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, treePath = props.treePath;
+    var facetClickEvent = function (e) {
+        onFacetOptionClick && onFacetOptionClick(e);
+        // remove focus from input (close the autocomplete)
+        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+    };
+    var themeDefaults = {
+        components: {
+            facetGridOptions: {
+                onClick: facetClickEvent,
+            },
+            facetHierarchyOptions: {
+                onClick: facetClickEvent,
+            },
+            facetListOptions: {
+                onClick: facetClickEvent,
+            },
+            facetPaletteOptions: {
+                onClick: facetClickEvent,
+            },
+        },
+    };
+    // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
+    var theme = (0, deepmerge_1.default)(themeDefaults, (props === null || props === void 0 ? void 0 : props.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+    props = __assign(__assign({}, props), { theme: theme });
+    var facets = props.facets;
+    if (limit && facets && limit > 0) {
+        facets = facets.slice(0, +limit);
+    }
+    var subProps = {
+        facet: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facets__facet' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return facets && (facets === null || facets === void 0 ? void 0 : facets.length) > 0 ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__facets', className, internalClassName) }, styling, { children: facets.map(function (facet) { return ((0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet }), facet.field)); }) })) })) : null;
+});

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

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

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

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

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

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