@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/components/src/components/Molecules/SearchInput/SearchInput.js

@@ -1,39 +1,26 @@
 "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.SearchInput = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var hooks_1 = require("preact/hooks");
-var Button_1 = require("../../Atoms/Button");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var useLang_1 = require("../../../hooks/useLang");
-var hooks_2 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_1 = require("preact/hooks");
+const Button_1 = require("../../Atoms/Button");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const useLang_1 = require("../../../hooks/useLang");
+const hooks_2 = require("../../../hooks");
+const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        border: "1px solid ".concat(((_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) || '#ccc'),
+        border: `1px solid ${theme?.variables?.colors?.primary || '#ccc'}`,
         '& .ss__icon': {
             padding: '5px',
         },
@@ -57,11 +44,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.SearchInput = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.SearchInput = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         placeholderText: 'Search',
         treePath: globalTreePath,
         submitSearchButton: {
@@ -71,54 +57,100 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)(function (properties) {
             icon: 'close-thin',
         },
     };
-    var props = (0, utilities_1.mergeProps)('searchInput', globalTheme, defaultProps, properties);
-    props.submitSearchButton = __assign(__assign(__assign({}, defaultProps.submitSearchButton), props.submitSearchButton), properties === null || properties === void 0 ? void 0 : properties.submitSearchButton);
-    props.clearSearchButton = __assign(__assign(__assign({}, defaultProps.clearSearchButton), props.clearSearchButton), properties === null || properties === void 0 ? void 0 : properties.clearSearchButton);
-    props.closeSearchButton = __assign(__assign(__assign({}, defaultProps.closeSearchButton), props.closeSearchButton), properties === null || properties === void 0 ? void 0 : properties.closeSearchButton);
-    var placeholderText = props.placeholderText, value = props.value, submitSearchButton = props.submitSearchButton, closeSearchButton = props.closeSearchButton, clearSearchButton = props.clearSearchButton, hideSubmitSearchButton = props.hideSubmitSearchButton, hideClearSearchButton = props.hideClearSearchButton, hideCloseSearchButton = props.hideCloseSearchButton, inputRef = props.inputRef, inputName = props.inputName, onChange = props.onChange, onClick = props.onClick, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, disabled = props.disabled, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _b = (0, hooks_2.useCustomComponentOverride)('searchInput', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('searchInput', globalTheme, defaultProps, properties);
+    props.submitSearchButton = {
+        //defaults
+        ...defaultProps.submitSearchButton,
+        //theme
+        ...props.submitSearchButton,
+        //passed in properties
+        ...properties?.submitSearchButton,
+    };
+    props.clearSearchButton = {
+        //defaults
+        ...defaultProps.clearSearchButton,
+        //theme
+        ...props.clearSearchButton,
+        //passed in properties
+        ...properties?.clearSearchButton,
+    };
+    props.closeSearchButton = {
+        //defaults
+        ...defaultProps.closeSearchButton,
+        //theme
+        ...props.closeSearchButton,
+        //passed in properties
+        ...properties?.closeSearchButton,
+    };
+    const { placeholderText, value, submitSearchButton, closeSearchButton, clearSearchButton, hideSubmitSearchButton, hideClearSearchButton, hideCloseSearchButton, inputRef, inputName, onChange, onClick, onKeyDown, onKeyUp, disabled, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('searchInput', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var inputValue;
-    var setInputValue;
-    var stateful = value === undefined;
+    let inputValue;
+    let setInputValue;
+    const stateful = value === undefined;
     if (stateful) {
-        _a = (0, hooks_1.useState)(''), inputValue = _a[0], setInputValue = _a[1];
+        [inputValue, setInputValue] = (0, hooks_1.useState)('');
     }
     else {
         inputValue = value;
     }
-    var subProps = {
-        submitSearchButton: __assign(__assign(__assign(__assign({}, submitSearchButton), { internalClassName: 'ss__search-input__button--submit-search-button', name: 'submit-search' }), (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        submitSearchButton: {
+            // default props
+            ...submitSearchButton,
+            internalClassName: 'ss__search-input__button--submit-search-button',
+            name: 'submit-search',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        clearSearchButton: __assign(__assign(__assign(__assign({}, clearSearchButton), { internalClassName: 'ss__search-input__button--clear-search-button', name: 'clear-search', onClick: function (e) {
-                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            theme: props?.theme,
+            treePath,
+        },
+        clearSearchButton: {
+            // default props
+            ...clearSearchButton,
+            internalClassName: 'ss__search-input__button--clear-search-button',
+            name: 'clear-search',
+            onClick: (e) => {
+                if (inputRef?.current) {
                     //reset the input value
-                    (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current).value = '';
+                    (inputRef?.current).value = '';
                     //manually trigger the input event so our event listeners in useAcRenderedInput hook get triggered
                     //and update pre-existing search inputs with new value
-                    (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current).dispatchEvent(new Event('input', { bubbles: true }));
+                    (inputRef?.current).dispatchEvent(new Event('input', { bubbles: true }));
                 }
                 setInputValue && setInputValue('');
-                (clearSearchButton === null || clearSearchButton === void 0 ? void 0 : clearSearchButton.onClick) && clearSearchButton.onClick(e);
-            } }), (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+                clearSearchButton?.onClick && clearSearchButton.onClick(e);
+            },
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        closeSearchButton: __assign(__assign(__assign(__assign({}, closeSearchButton), { internalClassName: 'ss__search-input__button--close-search-button', name: 'close-search' }), (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        closeSearchButton: {
+            // default props
+            ...closeSearchButton,
+            internalClassName: 'ss__search-input__button--close-search-button',
+            name: 'close-search',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         placeholderText: {
             attributes: {
                 placeholder: placeholderText,
@@ -141,12 +173,12 @@ exports.SearchInput = (0, mobx_react_lite_1.observer)(function (properties) {
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, useLang_1.useLang)(lang, {});
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__search-input', { 'ss__input--disabled': disabled }, className, internalClassName), onClick: function (e) { return !disabled && onClick && onClick(e); }, children: [!hideCloseSearchButton && closeSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.closeSearchButton, mergedLang.closeSearchButton.all)), (0, jsx_runtime_1.jsx)("input", __assign({ type: "text", className: "ss__search-input__input" }, mergedLang.placeholderText.attributes, { value: inputValue, name: inputName, ref: inputRef, onKeyDown: function (e) { return onKeyDown && onKeyDown(e); }, onKeyUp: function (e) { return onKeyUp && onKeyUp(e); }, onChange: function (e) {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, useLang_1.useLang)(lang, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__search-input', { 'ss__input--disabled': disabled }, className, internalClassName), onClick: (e) => !disabled && onClick && onClick(e), children: [!hideCloseSearchButton && closeSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.closeSearchButton, ...mergedLang.closeSearchButton.all }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "ss__search-input__input", ...mergedLang.placeholderText.attributes, value: inputValue, name: inputName, ref: inputRef, onKeyDown: (e) => onKeyDown && onKeyDown(e), onKeyUp: (e) => onKeyUp && onKeyUp(e), onChange: (e) => {
                         if (setInputValue) {
                             setInputValue(e.target.value || '');
                         }
                         onChange && onChange(e);
-                    }, disabled: disabled })), (0, jsx_runtime_1.jsxs)("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.clearSearchButton, mergedLang.clearSearchButton.all))) : null, !hideSubmitSearchButton && submitSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.submitSearchButton, mergedLang.submitSearchButton.all))] })] })) }));
+                    }, disabled: disabled }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__search-input__icons", children: [!hideClearSearchButton && clearSearchButton && inputValue?.length ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.clearSearchButton, ...mergedLang.clearSearchButton.all })) : null, !hideSubmitSearchButton && submitSearchButton && (0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.submitSearchButton, ...mergedLang.submitSearchButton.all })] })] }) }));
 });

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

@@ -1,45 +1,23 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Dropdown_1 = require("../../Atoms/Dropdown");
-var Button_1 = require("../../Atoms/Button");
-var Icon_1 = require("../../Atoms/Icon");
-var useA11y_1 = require("../../../hooks/useA11y");
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme, native = _a.native;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Dropdown_1 = require("../../Atoms/Dropdown");
+const Button_1 = require("../../Atoms/Button");
+const Icon_1 = require("../../Atoms/Icon");
+const useA11y_1 = require("../../../hooks/useA11y");
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ color, backgroundColor, borderColor, theme, native }) => {
     if (!native) {
         return (0, react_1.css)({
             display: 'inline-flex',
@@ -62,7 +40,7 @@ var defaultStyles = function (_a) {
                 listStyle: 'none',
                 padding: '0',
                 marginTop: '-1px',
-                border: "1px solid ".concat(borderColor || 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) || '#333'),
+                border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`,
                 '.ss__select__dropdown__button': {
                     alignItems: 'center',
                 },
@@ -95,64 +73,76 @@ var defaultStyles = function (_a) {
         });
     }
 };
-exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Select = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         iconOpen: 'angle-down',
         iconClose: 'angle-up',
         separator: ': ',
         startOpen: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('select', globalTheme, defaultProps, properties);
-    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, clearSelection = props.clearSelection, disableClickOutside = props.disableClickOutside, disabled = props.disabled, hideLabel = props.hideLabel, hideLabelOnSelection = props.hideLabelOnSelection, iconColor = props.iconColor, iconClose = props.iconClose, iconOpen = props.iconOpen, label = props.label, native = props.native, onSelect = props.onSelect, selected = props.selected, separator = props.separator, startOpen = props.startOpen, hideIcon = props.hideIcon, hideOptionIcons = props.hideOptionIcons, hideOptionLabels = props.hideOptionLabels, hideSelection = props.hideSelection, stayOpenOnSelection = props.stayOpenOnSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var options = props.options;
-    var _b = (0, hooks_2.useCustomComponentOverride)('select', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('select', globalTheme, defaultProps, properties);
+    const { backgroundColor, borderColor, color, clearSelection, disableClickOutside, disabled, hideLabel, hideLabelOnSelection, iconColor, iconClose, iconOpen, label, native, onSelect, selected, separator, startOpen, hideIcon, hideOptionIcons, hideOptionLabels, hideSelection, stayOpenOnSelection, disableStyles, className, internalClassName, treePath, } = props;
+    let { options } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('select', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        dropdown: __assign(__assign({ internalClassName: 'ss__select__dropdown' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            disabled: disabled,
-        })), { 
+    const subProps = {
+        dropdown: {
+            internalClassName: 'ss__select__dropdown',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                disabled,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        button: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        button: {
             // default props
-            internalClassName: 'ss__select__dropdown__button' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            disabled: disabled,
-            color: color,
-            backgroundColor: backgroundColor,
-            borderColor: borderColor,
-        })), { 
+            internalClassName: 'ss__select__dropdown__button',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                disabled,
+                color,
+                backgroundColor,
+                borderColor,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        icon: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            internalClassName: 'ss__select__dropdown__button__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            color: iconColor || color,
-            size: '12px',
-        })), { 
+            internalClassName: 'ss__select__dropdown__button__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                color: iconColor || color,
+                size: '12px',
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
     // open state
-    var _c = (0, hooks_1.useState)(Boolean(startOpen)), open = _c[0], setOpen = _c[1];
+    const [open, setOpen] = (0, hooks_1.useState)(Boolean(startOpen));
     // selection state
-    var _d = (0, hooks_1.useState)(selected), selection = _d[0], setSelection = _d[1];
+    const [selection, setSelection] = (0, hooks_1.useState)(selected);
     // original selection state
-    var originalSelected = (0, hooks_1.useState)(selected)[0];
+    const [originalSelected] = (0, hooks_1.useState)(selected);
     // reset selection if 'selected' prop changes
     try {
         if (selected) {
-            var originalSelectedstr = JSON.stringify(originalSelected);
-            var selectedstr = JSON.stringify(selected);
-            var selectionstr = JSON.stringify(selection);
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
             if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
                 setSelection(selected);
             }
@@ -162,54 +152,53 @@ exports.Select = (0, mobx_react_lite_1.observer)(function (properties) {
         // noop
     }
     if (selection && clearSelection) {
-        options = __spreadArray([
+        options = [
             {
                 label: clearSelection,
                 value: '',
-            }
-        ], options, true);
+            },
+            ...options,
+        ];
     }
-    var makeSelection = function (e, option) {
+    const makeSelection = (e, option) => {
         if (option != selection) {
             onSelect && onSelect(e, option);
         }
         setSelection(option);
         !stayOpenOnSelection && setOpen(false);
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var selectedOptions = options.filter(function (option) { return (selection === null || selection === void 0 ? void 0 : selection.value) === option.value; });
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const selectedOptions = options.filter((option) => selection?.value === option.value);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         buttonLabel: {
             value: label,
             attributes: {
-                'aria-label': "".concat(label, " dropdown, ").concat(options.length, " options ").concat(selectedOptions.length ? ", Currently selected option is ".concat(selectedOptions[0].label) : ''),
+                'aria-label': `${label} dropdown, ${options.length} options ${selectedOptions.length ? `, Currently selected option is ${selectedOptions[0].label}` : ''}`,
             },
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        options: options,
-        selectedOptions: selectedOptions,
-        label: label,
-        open: open,
-    });
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        options,
+        selectedOptions,
+        label,
+        open,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     // options can be an Array or ObservableArray - but should have length
-    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__select', { 'ss__select--native': native }, { 'ss__select--disabled': disabled }, className, internalClassName), children: native ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(label || lang.buttonLabel.value) && !hideLabel && !hideLabelOnSelection && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", children: [(0, jsx_runtime_1.jsx)("label", __assign({}, (_a = mergedLang.buttonLabel) === null || _a === void 0 ? void 0 : _a.all)), separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), (0, jsx_runtime_1.jsxs)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: function (e) {
-                            var selectElement = e.target;
-                            var selectedOptionElement = selectElement.options[selectElement.selectedIndex];
-                            var selectedOption = options
-                                .filter(function (option, index) {
+    return typeof options == 'object' && options?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__select', { 'ss__select--native': native }, { 'ss__select--disabled': disabled }, className, internalClassName), children: native ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(label || lang.buttonLabel.value) && !hideLabel && !hideLabelOnSelection && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", children: [(0, jsx_runtime_1.jsx)("label", { ...mergedLang.buttonLabel?.all }), separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), (0, jsx_runtime_1.jsxs)("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: (e) => {
+                            const selectElement = e.target;
+                            const selectedOptionElement = selectElement.options[selectElement.selectedIndex];
+                            const selectedOption = options
+                                .filter((option, index) => {
                                 return option.label == selectedOptionElement.text && (option.value == selectedOptionElement.value || option.value == index);
                             })
                                 .pop();
                             !disabled && makeSelection(e, selectedOption);
-                        }, children: [!selection && clearSelection && ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: true, value: "", children: clearSelection })), options.map(function (option, index) {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, value: (_a = option.value) !== null && _a !== void 0 ? _a : index, children: option.label }));
-                            })] }), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: 'open' }, (typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen))))] })) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { disableClickOutside: disableClickOutside, open: open, onToggle: function (e, state) { return setOpen(function (prev) { return state !== null && state !== void 0 ? state : !prev; }); }, onClick: function () { return setOpen(function (prev) { return !prev; }); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, { children: [(label || lang.buttonLabel.value) && !hideLabelOnSelection && !hideLabel && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__select__label" }, mergedLang.buttonLabel.attributes, { children: [(0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.buttonLabel.value)), separator && selection && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] }))), selection && !hideSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selection.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { className: "ss__select__selection__icon", name: 'selection' }, (typeof selection.icon == 'string' ? { icon: selection.icon } : selection.icon)))), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__selection", children: selection === null || selection === void 0 ? void 0 : selection.label })] })), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: open ? 'open' : 'close' }, (open
-                            ? __assign({}, (typeof iconClose == 'string' ? { icon: iconClose } : iconClose)) : __assign({}, (typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen))))))] })), children: (0, jsx_runtime_1.jsx)("ul", { className: "ss__select__select", role: "listbox", "aria-label": typeof label == 'string' ? label : '', ref: function (e) { return (0, useA11y_1.useA11y)(e, -1, true, function () { return setOpen(false); }); }, children: options.map(function (option) { return ((0, jsx_runtime_1.jsxs)("li", { ref: function (e) { return (0, useA11y_1.useA11y)(e); }, "aria-disabled": option.disabled, title: option.label, className: (0, classnames_1.default)('ss__select__select__option', {
-                            'ss__select__select__option--selected': (selection === null || selection === void 0 ? void 0 : selection.value) === option.value,
-                        }), onClick: function (e) { return !disabled && makeSelection(e, option); }, role: "option", "aria-selected": (selection === null || selection === void 0 ? void 0 : selection.value) === option.value, children: [option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { name: 'option', className: "ss__select__select__option__icon", treePath: "".concat(treePath, " dropdown") }, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { children: option.label })] })); }) }) }))) })) })) : null;
+                        }, children: [!selection && clearSelection && ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: true, value: "", children: clearSelection })), options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { className: "ss__select__select__option", selected: selection?.value === option.value, value: option.value ?? index, children: option.label })))] }), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, name: 'open', ...(typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen) }))] })) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { ...subProps.dropdown, disableClickOutside: disableClickOutside, open: open, onToggle: (e, state) => setOpen((prev) => state ?? !prev), onClick: () => setOpen((prev) => !prev), disableA11y: true, button: (0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, children: [(label || lang.buttonLabel.value) && !hideLabelOnSelection && !hideLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__select__label", ...mergedLang.buttonLabel.attributes, children: [(0, jsx_runtime_1.jsx)("label", { ...mergedLang.buttonLabel.value }), separator && selection && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__label__separator", children: separator })] })), selection && !hideSelection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selection.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, className: "ss__select__selection__icon", name: 'selection', ...(typeof selection.icon == 'string' ? { icon: selection.icon } : selection.icon) })), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { className: "ss__select__selection", children: selection?.label })] })), !hideIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, name: open ? 'open' : 'close', ...(open
+                                ? { ...(typeof iconClose == 'string' ? { icon: iconClose } : iconClose) }
+                                : { ...(typeof iconOpen == 'string' ? { icon: iconOpen } : iconOpen) }) }))] }), children: (0, jsx_runtime_1.jsx)("ul", { className: "ss__select__select", role: "listbox", "aria-label": typeof label == 'string' ? label : '', ref: (e) => (0, useA11y_1.useA11y)(e, -1, true, () => setOpen(false)), children: options.map((option) => ((0, jsx_runtime_1.jsxs)("li", { ref: (e) => (0, useA11y_1.useA11y)(e), "aria-disabled": option.disabled, title: option.label, className: (0, classnames_1.default)('ss__select__select__option', {
+                            'ss__select__select__option--selected': selection?.value === option.value,
+                        }), onClick: (e) => !disabled && makeSelection(e, option), role: "option", "aria-selected": selection?.value === option.value, children: [option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, name: 'option', className: "ss__select__select__option__icon", treePath: `${treePath} dropdown`, ...(typeof option.icon == 'string' ? { icon: option.icon } : option.icon) })), !hideOptionLabels && (0, jsx_runtime_1.jsx)("span", { children: option.label })] }))) }) })) }) })) : null;
 });