@trilogy-ds/react 0.0.1-beta-sc-2 → 0.0.1-beta-151

package/lib/components/select/option/SelectOption.native.d.ts

@@ -1,11 +1,14 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { SelectOptionProps } from '../../../components/select/option/SelectOptionProps';
+/// <reference types="react" />
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { SelectOptionProps } from './SelectOptionProps';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param label {string} Label value
  * @param children {React.ReactNode}
  */
-declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps<string> & React.RefAttributes<TouchableOpacity>>;
+declare const SelectOption: {
+    ({ disabled, children, onClick, label, iconName, ...others }: SelectOptionProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default SelectOption;

package/lib/components/select/option/SelectOption.native.js

@@ -1,20 +1,19 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
-import { Columns, ColumnsItem } from '../../../components/columns';
+import { Columns, Column } from '../../../components/columns';
 import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon, IconSize } from '../../../components/icon';
 import { Text } from '../../../components/text';
-import { Alignable } from '../../../objects/facets/Alignable';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
-import { TypographyBold } from '../../../objects/Typography/TypographyBold';
+import { TypographyBold } from '../../../objects/Typography';
+import { TrilogyColor, getColorStyle } from '../../../objects/facets/Color';
+import * as React from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param label {string} Label value
  * @param children {React.ReactNode}
  */
-var SelectOption = React.forwardRef(function (_a, ref) {
+var SelectOption = function (_a) {
     var disabled = _a.disabled, children = _a.children, onClick = _a.onClick, label = _a.label, iconName = _a.iconName, others = __rest(_a, ["disabled", "children", "onClick", "label", "iconName"]);
     var checked = others.checked;
     var styles = React.useMemo(function () {
@@ -23,7 +22,7 @@ var SelectOption = React.forwardRef(function (_a, ref) {
                 backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) || undefined,
                 width: Dimensions.get('screen').width - 40,
                 paddingHorizontal: 16,
-                paddingVertical: 8,
+                paddingVertical: 8
             },
         });
     }, [disabled]);
@@ -44,17 +43,17 @@ var SelectOption = React.forwardRef(function (_a, ref) {
         }
     }, [disabled]);
     var columnLabelSize = React.useMemo(function () {
-        return iconName ? (checked && 10) || 11 : (checked && 11) || 12;
+        return iconName ? checked && 10 || 11 : checked && 11 || 12;
     }, [iconName, checked]);
-    return (React.createElement(TouchableOpacity, __assign({ style: [styles.container], onPress: onClick, ref: ref }, others),
-        React.createElement(Columns, { gap: 0, verticalAlign: Alignable.ALIGNED_CENTER },
-            iconName && (React.createElement(ColumnsItem, { size: 1 },
+    return (React.createElement(TouchableOpacity, __assign({ style: [styles.container] }, others, { onPress: onClick }),
+        React.createElement(Columns, { gap: 0 },
+            iconName && (React.createElement(Column, { size: 1 },
                 React.createElement(Icon, { size: IconSize.SMALL, name: iconName, color: iconColor }))),
-            React.createElement(ColumnsItem, { size: columnLabelSize },
-                React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: textColor } }), children || label)),
-            checked && (React.createElement(ColumnsItem, { size: 1 },
+            React.createElement(Column, { size: columnLabelSize },
+                React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: textColor, } }), children || label)),
+            checked && (React.createElement(Column, { size: 1 },
                 React.createElement(Icon, { size: IconSize.SMALL, name: 'tri-check', color: iconColor }))))));
-});
+};
 SelectOption.displayName = ComponentName.SelectOption;
 export default SelectOption;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L29wdGlvbi9TZWxlY3RPcHRpb24ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRXZFLE9BQU8sRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFDM0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQTtBQUVwRTs7Ozs7R0FLRztBQUNILElBQU0sWUFBWSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ25DLFVBQ0UsRUFBOEUsRUFDOUUsR0FBZ0M7SUFEOUIsSUFBQSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXpELHdEQUEyRCxDQUFGO0lBR2pELElBQUEsT0FBTyxHQUFLLE1BQTZCLFFBQWxDLENBQWtDO0lBRWpELElBQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQzFCO1FBQ0UsT0FBQSxVQUFVLENBQUMsTUFBTSxDQUFDO1lBQ2hCLFNBQVMsRUFBRTtn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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L29wdGlvbi9TZWxlY3RPcHRpb24ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3JELE9BQU8sRUFBRSxZQUFZLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFHdkU7Ozs7O0dBS0c7QUFDSCxJQUFNLFlBQVksR0FBRyxVQUFDLEVBQThFO0lBQTVFLElBQUEsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUF6RCx3REFBMkQsQ0FBRjtJQUNyRSxJQUFBLE9BQU8sR0FBSyxNQUE2QixRQUFsQyxDQUFrQztJQUVqRCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsT0FBTyxDQUMxQjtRQUNFLE9BQUEsVUFBVSxDQUFDLE1BQU0sQ0FBQztZQUNoQixTQUFTLEVBQUU7Z0JBQ1QsZUFBZSxFQUFFLENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBSSxT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

package/lib/components/select/option/SelectOptionProps.d.ts

@@ -1,18 +1,14 @@
-import { IconName, IconNameValues } from '../../../components/icon/IconNameEnum';
 import { ClickEvent } from '../../../events/OnClickEvent';
-import { Accessibility } from '../../../objects/facets/Accessibility';
-import { Dev } from '../../../objects/facets/Dev';
+import { IconName, IconNameValues } from '../../../components/icon';
+import { Accessibility, Dev } from '../../../objects';
+import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Select Option Interface
  */
-export interface SelectOptionProps<T extends string | number = string> extends Accessibility, Dev {
+export interface SelectOptionProps<T extends string | number = string> extends Accessibility, Dev, CommonProps {
     children?: string;
-    /** @deprecated use Select "selected" props instead */
-    selected?: boolean;
     label?: string;
     value?: T;
-    className?: string;
-    id?: string;
     disabled?: boolean;
     onClick?: ClickEvent;
     iconName?: IconName | IconNameValues;

package/lib/components/select/option/SelectOptionPropsDefaults.js

@@ -6,14 +6,6 @@ export default {
       "string"
     ]
   },
-  "selected": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
   "label": {
     "type": "string",
     "values": [
@@ -28,20 +20,6 @@ export default {
       "T"
     ]
   },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
   "disabled": {
     "type": "boolean",
     "values": [
@@ -122,5 +100,19 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/select/option/index.d.ts

@@ -1,2 +1,2 @@
-import SelectOption from '../../../components/select/option/SelectOption';
+import SelectOption from './SelectOption';
 export default SelectOption;

package/lib/components/select/option/index.js

@@ -1,3 +1,3 @@
-import SelectOption from '../../../components/select/option/SelectOption';
+import SelectOption from './SelectOption';
 export default SelectOption;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC9vcHRpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0seUNBQXlDLENBQUE7QUFFbEUsZUFBZSxZQUFZLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC9vcHRpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0sZ0JBQWdCLENBQUE7QUFFekMsZUFBZSxZQUFZLENBQUEifQ==

package/lib/components/select/web/SelectDynamic.d.ts

@@ -1,6 +1,4 @@
-import React from 'react';
+import { PropsWithChildren } from 'react';
 import { SelectProps } from '../../../components/select/SelectProps';
-declare const _default: React.ForwardRefExoticComponent<SelectProps<import("../../../components/select/SelectProps").SelectChangeEvent> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const SelectDynamic: ({ onChange, disabled, onFocus, onBlur, children, selected, name, id, label, iconName, multiple, className, }: PropsWithChildren<SelectProps>) => JSX.Element;
+export default SelectDynamic;

package/lib/components/select/web/SelectDynamic.js

@@ -1,23 +1,195 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
 import clsx from 'clsx';
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Input } from '../../../components/input';
-import { useSelectDynamic } from '../../../components/select/web/hooks/useSelectDynamic';
+import { useTrilogyContext } from '../../../context/index';
 import { hashClass } from '../../../helpers';
-var SelectDynamic = function (_a, ref) {
-    var onChange = _a.onChange, nullable = _a.nullable, disabled = _a.disabled, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children, selected = _a.selected, name = _a.name, id = _a.id, testId = _a.testId, label = _a.label, iconName = _a.iconName, multiple = _a.multiple, className = _a.className;
-    var _b = useSelectDynamic({
-        onChange: onChange,
-        nullable: nullable,
-        children: children,
-        selected: selected,
-        multiple: multiple,
-    }), selectedName = _b.selectedName, onClickInput = _b.onClickInput, focused = _b.focused, modal = _b.modal, options = _b.options, onKeyUp = _b.onKeyUp, onKeyPress = _b.onKeyPress;
-    return (React.createElement("div", { className: hashClass(clsx('select', className)) },
-        React.createElement(Input, __assign({ ref: ref, value: selectedName && selectedName.join(', '), testId: testId, name: name, disabled: disabled, placeholder: label, onFocus: onFocus, customIconLeft: iconName, onBlur: onBlur, onClick: onClickInput, className: hashClass(clsx(focused && 'focus')), onKeyPress: onKeyPress, onKeyUp: onKeyUp }, { readOnly: true, id: id, role: 'listbox' })),
-        focused && React.createElement("div", { className: hashClass(clsx('select-options')) }, options),
+import { SelectOption } from '../';
+var SelectDynamic = function (_a) {
+    var onChange = _a.onChange, disabled = _a.disabled, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children, selected = _a.selected, name = _a.name, id = _a.id, label = _a.label, iconName = _a.iconName, multiple = _a.multiple, className = _a.className;
+    var styled = useTrilogyContext().styled;
+    var _b = __read(React.useState(false), 2), focused = _b[0], setIsFocused = _b[1];
+    var _c = __read(React.useState(selected), 2), selectedValues = _c[0], setSelectedValues = _c[1];
+    var _d = __read(React.useState([]), 2), selectedName = _d[0], setSelectedName = _d[1];
+    var reactId = React.useId();
+    var selectClasses = React.useMemo(function () { return hashClass(styled, clsx('select', className)); }, [styled, className]);
+    var _e = __read(useState(-1), 2), focusedIndex = _e[0], setFocusedIndex = _e[1];
+    var onClickInput = React.useCallback(function () {
+        setIsFocused(function (prev) { return !prev; });
+    }, []);
+    var onKeyPressInput = React.useCallback(function (keyCode) {
+        if (keyCode === 13) {
+            setIsFocused(function (prev) {
+                if (multiple && !prev)
+                    return true;
+                if (multiple && prev)
+                    return prev;
+                return !prev;
+            });
+        }
+    }, [multiple]);
+    var isChecked = useCallback(function (value) {
+        return (multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
+            ? selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)
+            : selectedValues === value);
+    }, [multiple, selectedValues]);
+    var setNewSelectedValues = useCallback(function (_a) {
+        var isChecked = _a.isChecked, children = _a.children, label = _a.label, value = _a.value;
+        var selectedOptions = [];
+        if (isChecked) {
+            setSelectedValues(function (prev) {
+                switch (true) {
+                    case Array.isArray(prev):
+                        setSelectedName(function (prev) { return prev.filter(function (txt) { return ![children, label].includes(txt); }); });
+                        var opts = prev.filter(function (item) { return item !== value; });
+                        selectedOptions.push.apply(selectedOptions, __spreadArray([], __read(opts), false));
+                        return opts;
+                    case !Array.isArray(prev):
+                        setSelectedName([]);
+                        return undefined;
+                    default:
+                        return value;
+                }
+            });
+        }
+        if (!isChecked) {
+            setSelectedValues(function (prev) {
+                if (Array.isArray(prev)) {
+                    var opts = __spreadArray(__spreadArray([], __read(prev), false), [value], false);
+                    selectedOptions.push.apply(selectedOptions, __spreadArray([], __read(opts), false));
+                    return opts;
+                }
+                selectedOptions.push(value);
+                return value;
+            });
+            setSelectedName(function (prev) {
+                if (multiple)
+                    return __spreadArray(__spreadArray([], __read(prev), false), [children || label], false);
+                return [children || label];
+            });
+        }
+        return selectedOptions;
+    }, [multiple]);
+    React.useEffect(function () {
+        var _a;
+        var labelSelected = (_a = React.Children.map(children, function (child) {
+            if (!React.isValidElement(child))
+                return false;
+            var label = child.props.children || child.props.label;
+            switch (true) {
+                case (Array.isArray(selected) && selected.includes(child.props.value)) ||
+                    (!Array.isArray(selected) && child.props.value === selected):
+                    return label;
+                default:
+                    return false;
+            }
+        })) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item; });
+        labelSelected && setSelectedName(labelSelected);
+        setSelectedValues(selected);
+    }, [selected]);
+    React.useEffect(function () {
+        var onKeyDown = function (e) {
+            var childs = children;
+            var child = childs[focusedIndex];
+            e.preventDefault();
+            switch (true) {
+                case e.key === 'ArrowDown':
+                    options &&
+                        setFocusedIndex(function (prev) {
+                            var nextIndex = (prev + 1) % options.length;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex++;
+                            return nextIndex % options.length;
+                        });
+                    break;
+                case e.key === 'ArrowUp' && focusedIndex !== -1:
+                    options &&
+                        setFocusedIndex(function (prev) {
+                            var nextIndex = (prev - 1 + options.length) % options.length;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex--;
+                            if (nextIndex === -1)
+                                nextIndex = options.length - 1;
+                            return nextIndex % options.length;
+                        });
+                    break;
+                case e.key === 'ArrowUp' && focusedIndex === -1:
+                    options &&
+                        setFocusedIndex(function () {
+                            var nextIndex = options.length - 1;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex--;
+                            return nextIndex;
+                        });
+                    break;
+                case ['Enter'].includes(e.key) && focusedIndex !== -1 && !child.props.disabled:
+                    var isCheckedOption = isChecked(child.props.value);
+                    setNewSelectedValues({
+                        children: child.props.children,
+                        label: child.props.label,
+                        value: child.props.value,
+                        isChecked: isCheckedOption,
+                    });
+                    break;
+                case e.key === 'Escape':
+                    setFocusedIndex(-1);
+                    setIsFocused(false);
+                    break;
+                default:
+                    return;
+            }
+        };
+        focused && document.addEventListener('keydown', onKeyDown);
+        !focused && setFocusedIndex(-1);
+        return function () { return document.removeEventListener('keydown', onKeyDown); };
+    }, [focused, focusedIndex, children, isChecked]);
+    var modal = useMemo(function () { return React.createElement("div", { role: 'presentation', className: 'select-trilogy_modal_open', onClick: function () { return setIsFocused(false); } }); }, []);
+    var options = React.useMemo(function () {
+        return React.Children.map(children, function (child, index) {
+            if (!React.isValidElement(child))
+                return null;
+            var clickEventValue = function (v) {
+                switch (true) {
+                    case (multiple && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(child.props.value))) ||
+                        (!multiple && selectedValues === child.props.value):
+                        return undefined;
+                    default:
+                        return v;
+                }
+            };
+            var props = __assign(__assign({}, child.props), { checked: isChecked(child.props.value), focused: focusedIndex === index ? 'true' : undefined, onClick: function () {
+                    var opts = setNewSelectedValues({
+                        children: child.props.children,
+                        label: child.props.label,
+                        value: child.props.value,
+                        isChecked: isChecked(child.props.value),
+                    });
+                    onChange &&
+                        onChange({
+                            selectValue: clickEventValue(child.props.value),
+                            selectName: clickEventValue(child.props.children || child.props.label),
+                            selectId: clickEventValue(child.props.id),
+                            name: clickEventValue(child.props.children || child.props.label),
+                            selectedOptions: opts,
+                        });
+                    if (child.props.onClick)
+                        child.props.onClick();
+                    if (!multiple)
+                        setIsFocused(false);
+                } });
+            return React.createElement(SelectOption, __assign({}, props, { key: "".concat(reactId, "_").concat(index) }));
+        });
+    }, [multiple, selectedValues, focusedIndex, children]);
+    return (React.createElement("div", { className: selectClasses },
+        React.createElement(Input, __assign({ value: selectedName.join(', '), name: name, disabled: disabled, placeholder: label, onFocus: onFocus, iconNameLeft: iconName, onBlur: onBlur, onClick: onClickInput, className: hashClass(styled, clsx(focused && 'focus')), onKeyPress: function (e) {
+                e.preventDefault();
+            }, onKeyUp: function (e) {
+                e.preventDefault();
+                onKeyPressInput(e.inputKeyCode);
+            } }, { readOnly: true, id: id, role: 'listbox' })),
+        focused && React.createElement("div", { className: hashClass(styled, clsx('select-options')) }, options),
         focused && ReactDOM.createPortal(modal, document.body)));
 };
-export default React.forwardRef(SelectDynamic);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RHluYW1pYy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L3dlYi9TZWxlY3REeW5hbWljLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBNEIsTUFBTSxPQUFPLENBQUE7QUFDaEQsT0FBTyxRQUFRLE1BQU0sV0FBVyxDQUFBO0FBRWhDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUUxQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQTtBQUNqRixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXJDLElBQU0sYUFBYSxHQUFHLFVBQ3BCLEVBZWlDLEVBQ2pDLEdBQWdDO1FBZjlCLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQTtJQUlMLElBQUEsS0FBK0UsZ0JBQWdCLENBQUM7UUFDcEcsUUFBUSxVQUFBO1FBQ1IsUUFBUSxVQUFBO1FBQ1IsUUFBUSxVQUFBO1FBQ1IsUUFBUSxVQUFBO1FBQ1IsUUFBUSxVQUFBO0tBQ1QsQ0FBQyxFQU5NLFlBQVksa0JBQUEsRUFBRSxZQUFZLGtCQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsVUFBVSxnQkFNOUUsQ0FBQTtJQUVGLE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDbEQsb0JBQUMsS0FBSyxhQUNKLEdBQUcsRUFBRSxHQUFHLEVBQ1IsS0FBSyxFQUFFLFlBQVksSUFBSSxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUM5QyxNQUFNLEVBQUUsTUFBTSxFQUNkLElBQUksRUFBRSxJQUFJLEVBQ1YsUUFBUSxFQUFFLFFBQVEsRUFDbEIsV0FBVyxFQUFFLEtBQUssRUFDbEIsT0FBTyxFQUFFLE9BQU8sRUFDaEIsY0FBYyxFQUFFLFFBQVEsRUFDeEIsTUFBTSxFQUFFLE1BQU0sRUFDZCxPQUFPLEVBQUUsWUFBWSxFQUNyQixTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksT0FBTyxDQUFDLENBQUMsRUFDOUMsVUFBVSxFQUFFLFVBQVUsRUFDdEIsT0FBTyxFQUFFLE9BQU8sSUFDWixFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsRUFBRSxJQUFBLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxFQUMzQztRQUNELE9BQU8sSUFBSSw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLElBQUcsT0FBTyxDQUFPO1FBQzdFLE9BQU8sSUFBSSxRQUFRLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQ25ELENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUNELGVBQWUsS0FBSyxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQSJ9
+export default SelectDynamic;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RHluYW1pYy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L3dlYi9TZWxlY3REeW5hbWljLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQXFCLFdBQVcsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2hGLE9BQU8sUUFBUSxNQUFNLFdBQVcsQ0FBQTtBQUVoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFFMUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sS0FBSyxDQUFBO0FBRWxDLElBQU0sYUFBYSxHQUFHLFVBQUMsRUFhVTtRQVovQixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUE7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUNoQyxJQUFBLEtBQUEsT0FBMEIsS0FBSyxDQUFDLFFBQVEsQ0FBVSxLQUFLLENBQUMsSUFBQSxFQUF2RCxPQUFPLFFBQUEsRUFBRSxZQUFZLFFBQWtDLENBQUE7SUFDeEQsSUFBQSxLQUFBLE9BQXNDLEtBQUssQ0FBQyxRQUFRLENBQWdCLFFBQVEsQ0FBQyxJQUFBLEVBQTVFLGNBQWMsUUFBQSxFQUFFLGlCQUFpQixRQUEyQyxDQUFBO0lBQzdF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

package/lib/components/select/web/SelectNative.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { SelectProps } from '../../../components/select/SelectProps';
-declare const _default: React.ForwardRefExoticComponent<SelectProps<import("../../../components/select/SelectProps").SelectChangeEvent> & React.RefAttributes<HTMLSelectElement>>;
-export default _default;
+declare const SelectNative: ({ onChange, disabled, onFocus, onBlur, children, selected, name, id, testId, label, iconName, multiple, className, accessibilityLabel, ...others }: SelectProps) => JSX.Element;
+export default SelectNative;

package/lib/components/select/web/SelectNative.js

@@ -1,24 +1,45 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 import { Icon } from '../../../components/icon';
 import { SelectOption } from '../../../components/select';
-import { useSelectNative } from '../../../components/select/web/hooks/useSelectNative';
+import { useTrilogyContext } from '../../../context/index';
 import { hashClass } from '../../../helpers/hashClassesHelpers';
 import { has } from '../../../services/classify';
-var SelectNative = function (_a, ref) {
+var SelectNative = function (_a) {
     var onChange = _a.onChange, disabled = _a.disabled, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children, selected = _a.selected, name = _a.name, id = _a.id, testId = _a.testId, label = _a.label, iconName = _a.iconName, multiple = _a.multiple, className = _a.className, accessibilityLabel = _a.accessibilityLabel, others = __rest(_a, ["onChange", "disabled", "onFocus", "onBlur", "children", "selected", "name", "id", "testId", "label", "iconName", "multiple", "className", "accessibilityLabel"]);
-    var _b = useSelectNative({
-        onBlur: onBlur,
-        onChange: onChange,
-        onFocus: onFocus,
-        selected: selected,
-    }), focused = _b.focused, selectedValues = _b.selectedValues, handleFocus = _b.handleFocus, handleBlur = _b.handleBlur, handleChange = _b.handleChange;
-    var controlClass = hashClass(clsx('control', has('dynamic-placeholder'), iconName && 'has-icons-left'));
-    return (React.createElement("div", { className: hashClass(clsx('select', className)) },
-        React.createElement("div", { className: hashClass(clsx('field', focused && 'focus')) },
+    var styled = useTrilogyContext().styled;
+    var _b = __read(React.useState(false), 2), focused = _b[0], setIsFocused = _b[1];
+    var _c = __read(React.useState(selected), 2), selectedValues = _c[0], setSelectedValues = _c[1];
+    var selectClasses = React.useMemo(function () { return hashClass(styled, clsx('select', className)); }, [styled, className]);
+    var controlClass = React.useMemo(function () { return hashClass(styled, clsx('control', has('dynamic-placeholder'), iconName && 'has-icons-left')); }, [styled, iconName]);
+    var handleFocus = React.useCallback(function (e) {
+        setIsFocused(true);
+        onFocus && onFocus(e);
+    }, []);
+    var handleBlur = React.useCallback(function (e) {
+        setIsFocused(false);
+        onBlur && onBlur(e);
+    }, []);
+    React.useEffect(function () {
+        setSelectedValues(selected);
+    }, [selected]);
+    return (React.createElement("div", { className: selectClasses },
+        React.createElement("div", { className: hashClass(styled, clsx('field', focused && 'focus')) },
             React.createElement("div", { className: controlClass },
-                React.createElement("select", __assign({ className: hashClass(clsx(!label && 'no-label')), value: selectedValues, "aria-label": accessibilityLabel, "data-testid": testId, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, role: 'listbox', ref: ref }, others), React.Children.map(children, function (child) {
+                React.createElement("select", __assign({ className: hashClass(styled, clsx(!label && 'no-label')), value: selectedValues, "aria-label": accessibilityLabel, "data-testid": testId, onChange: function (e) {
+                        var selectedV = Array.from(e.target.selectedOptions).map(function (select) { return select.value; });
+                        setSelectedValues(selectedV);
+                        if (onChange) {
+                            onChange({
+                                selectValue: e.target.value,
+                                selectName: e.target.name,
+                                selectId: e.target.id,
+                                name: e.target.name,
+                                selectedOptions: selectedV,
+                            });
+                        }
+                    }, onFocus: handleFocus, onBlur: handleBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, role: 'listbox' }, others), React.Children.map(children, function (child) {
                     if (!React.isValidElement(child))
                         return null;
                     var props = __assign(__assign({}, child.props), { native: 'true' });
@@ -27,5 +48,5 @@ var SelectNative = function (_a, ref) {
                 label && !multiple && React.createElement("label", { htmlFor: id }, label),
                 iconName && React.createElement(Icon, { name: iconName, size: 'small' })))));
 };
-export default React.forwardRef(SelectNative);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0TmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvd2ViL1NlbGVjdE5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUVsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sK0NBQStDLENBQUE7QUFDL0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUV6QyxJQUFNLFlBQVksR0FBRyxVQUNuQixFQWdCYyxFQUNkLEdBQWlDO0lBaEIvQixJQUFBLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULGtCQUFrQix3QkFBQSxFQUNmLE1BQU0sY0FmWCxpS0FnQkMsQ0FEVTtJQUlMLElBQUEsS0FBcUUsZUFBZSxDQUFDO1FBQ3pGLE1BQU0sUUFBQTtRQUNOLFFBQVEsVUFBQTtRQUNSLE9BQU8sU0FBQTtRQUNQLFFBQVEsVUFBQTtLQUNULENBQUMsRUFMTSxPQUFPLGFBQUEsRUFBRSxjQUFjLG9CQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxZQUFZLGtCQUtwRSxDQUFBO0lBRUYsSUFBTSxZQUFZLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsR0FBRyxDQUFDLHFCQUFxQixDQUFDLEVBQUUsUUFBUSxJQUFJLGdCQUFnQixDQUFDLENBQUMsQ0FBQTtJQUV6RyxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQ2xELDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxDQUFDLENBQUM7WUFDMUQsNkJBQUssU0FBUyxFQUFFLFlBQVk7Z0JBQzFCLHlDQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxJQUFJLFVBQVUsQ0FBQyxDQUFDLEVBQ2hELEtBQUssRUFBRSxjQUFjLGdCQUNULGtCQUFrQixpQkFDakIsTUFBTSxFQUNuQixRQUFRLEVBQUUsWUFBWSxFQUN0QixPQUFPLEVBQUUsV0FBVyxFQUNwQixNQUFNLEVBQUUsVUFBVSxFQUNsQixFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFDL0IsSUFBSSxFQUFFLElBQUksRUFDVixRQUFRLEVBQUUsUUFBUSxFQUNsQixJQUFJLEVBQUMsU0FBUyxFQUNkLEdBQUcsRUFBRSxHQUFHLElBQ0osTUFBTSxHQUVULEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxVQUFDLEtBQUs7b0JBQ2xDLElBQUksQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQzt3QkFBRSxPQUFPLElBQUksQ0FBQTtvQkFDN0MsSUFBTSxLQUFLLHlCQUNOLEtBQUssQ0FBQyxLQUFLLEtBQ2QsTUFBTSxFQUFFLE1BQU0sR0FDZixDQUFBO29CQUNELE9BQU8sb0JBQUMsWUFBWSxlQUFLLEtBQUssRUFBSSxDQUFBO2dCQUNwQyxDQUFDLENBQUMsQ0FDSztnQkFDUixLQUFLLElBQUksQ0FBQyxRQUFRLElBQUksK0JBQU8sT0FBTyxFQUFFLEVBQUUsSUFBRyxLQUFLLENBQVM7Z0JBQ3pELFFBQVEsSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUMsT0FBTyxHQUFHLENBQzlDLENBQ0YsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQyxVQUFVLENBQUMsWUFBWSxDQUFDLENBQUEifQ==
+export default SelectNative;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0TmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvd2ViL1NlbGVjdE5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRWxELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFekMsSUFBTSxZQUFZLEdBQUcsVUFBQyxFQWdCUjtJQWZaLElBQUEsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1Qsa0JBQWtCLHdCQUFBLEVBQ2YsTUFBTSxjQWZXLGlLQWdCckIsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRWhDLElBQUEsS0FBQSxPQUEwQixLQUFLLENBQUMsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQXZELE9BQU8sUUFBQSxFQUFFLFlBQVksUUFBa0MsQ0FBQTtJQUN4RCxJQUFBLEtBQUEsT0FBc0MsS0FBSyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBQSxF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

package/lib/components/select/web/index.d.ts

@@ -1,2 +1,2 @@
-export { default as SelectDynamic } from '../../../components/select/web/SelectDynamic';
-export { default as SelectNative } from '../../../components/select/web/SelectNative';
+export { default as SelectDynamic } from './SelectDynamic';
+export { default as SelectNative } from './SelectNative';

package/lib/components/select/web/index.js

@@ -1,3 +1,3 @@
-export { default as SelectDynamic } from '../../../components/select/web/SelectDynamic';
-export { default as SelectNative } from '../../../components/select/web/SelectNative';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC93ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxhQUFhLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQTtBQUNoRixPQUFPLEVBQUUsT0FBTyxJQUFJLFlBQVksRUFBRSxNQUFNLHNDQUFzQyxDQUFBIn0=
+export { default as SelectDynamic } from './SelectDynamic';
+export { default as SelectNative } from './SelectNative';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC93ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxhQUFhLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsT0FBTyxJQUFJLFlBQVksRUFBRSxNQUFNLGdCQUFnQixDQUFBIn0=

package/lib/components/spacer/Spacer.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-import { SpacerProps } from '../../components/spacer/SpacerProps';
+/// <reference types="react" />
+import { SpacerProps } from './SpacerProps';
 /**
  * Spacer Component
  * @param size {SpacerSize} ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
  * @param horizontal {Boolean} If horizontal margin
  */
-declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
+declare const Spacer: ({ size, horizontal, className, id }: SpacerProps) => JSX.Element;
 export default Spacer;

package/lib/components/spacer/Spacer.js

@@ -1,20 +1,23 @@
-import React from 'react';
-import { ComponentName } from '../../components/enumsComponentsName';
+import * as React from 'react';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
 /**
  * Spacer Component
  * @param size {SpacerSize} ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
  * @param horizontal {Boolean} If horizontal margin
  */
-var Spacer = React.forwardRef(function (_a, ref) {
-    var size = _a.size, horizontal = _a.horizontal;
+var Spacer = function (_a) {
+    var size = _a.size, horizontal = _a.horizontal, className = _a.className, id = _a.id;
+    var styled = useTrilogyContext().styled;
     var styles = {
         spacer: {
             marginLeft: horizontal ? "".concat(size, "px") : '0px',
             marginTop: !horizontal ? "".concat(size, "px") : '0px',
         },
     };
-    return React.createElement("div", { style: styles.spacer, ref: ref });
-});
-Spacer.displayName = ComponentName.Spacer;
+    var classes = hashClass(styled, clsx(className));
+    return React.createElement("div", { id: id, style: styles.spacer, className: classes });
+};
 export default Spacer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBR2hFOzs7O0dBSUc7QUFDSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQUMsRUFBaUMsRUFBRSxHQUE4QjtRQUEvRCxJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBO0lBQ2pELElBQU0sTUFBTSxHQUFHO1FBQ2IsTUFBTSxFQUFFO1lBQ04sVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxJQUFJLE9BQUksQ0FBQyxDQUFDLENBQUMsS0FBSztZQUM1QyxTQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7U0FDN0M7S0FDRixDQUFBO0lBQ0QsT0FBTyw2QkFBSyxLQUFLLEVBQUUsTUFBTSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxHQUFJLENBQUE7QUFDaEQsQ0FBQyxDQUFDLENBQUE7QUFFRixNQUFNLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUE7QUFDekMsZUFBZSxNQUFNLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFBZ0Q7UUFBOUMsSUFBSSxVQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQTtJQUN2QyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE1BQU0sR0FBRztRQUNiLE1BQU0sRUFBRTtZQUNOLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7WUFDNUMsU0FBUyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFHLElBQUksT0FBSSxDQUFDLENBQUMsQ0FBQyxLQUFLO1NBQzdDO0tBQ0YsQ0FBQTtJQUNELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFbEQsT0FBTyw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUNsRSxDQUFDLENBQUE7QUFFRCxlQUFlLE1BQU0sQ0FBQSJ9

package/lib/components/spacer/Spacer.native.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
-import { View } from 'react-native';
-import { SpacerProps } from '../../components/spacer/SpacerProps';
+/// <reference types="react" />
+import { SpacerProps } from "./SpacerProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Spacer Component
  * @param size {SpacerSize} Size of the spacer
  * @param horizontal {Boolean} If horizontal margin
  */
-declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<View>>;
+declare const Spacer: {
+    ({ size, horizontal }: SpacerProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default Spacer;