@trilogy-ds/react 0.0.1-beta-sc-1 → 0.0.1-beta-145

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,4 +1,9 @@
-import React from 'react';
-import { SpacerProps } from '../../components/spacer/SpacerProps';
-declare const _default: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+/// <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: ({ size, horizontal, className, id }: SpacerProps) => JSX.Element;
+export default Spacer;

package/lib/components/spacer/Spacer.js

@@ -1,18 +1,23 @@
-import React from 'react';
+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 = 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 });
+    var classes = hashClass(styled, clsx(className));
+    return React.createElement("div", { id: id, style: styles.spacer, className: classes });
 };
-export default React.forwardRef(Spacer);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFJekI7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFBaUMsRUFBRSxHQUE4QjtRQUEvRCxJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBO0lBQ2hDLElBQU0sTUFBTSxHQUFHO1FBQ2IsTUFBTSxFQUFFO1lBQ04sVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxJQUFJLE9BQUksQ0FBQyxDQUFDLENBQUMsS0FBSztZQUM1QyxTQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7U0FDN0M7S0FDRixDQUFBO0lBQ0QsT0FBTyw2QkFBSyxLQUFLLEVBQUUsTUFBTSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxHQUFJLENBQUE7QUFDaEQsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxDQUFBIn0=
+export default Spacer;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFBZ0Q7UUFBOUMsSUFBSSxVQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQTtJQUN2QyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE1BQU0sR0FBRztRQUNiLE1BQU0sRUFBRTtZQUNOLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7WUFDNUMsU0FBUyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFHLElBQUksT0FBSSxDQUFDLENBQUMsQ0FBQyxLQUFLO1NBQzdDO0tBQ0YsQ0FBQTtJQUNELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFbEQsT0FBTyw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUNsRSxDQUFDLENBQUE7QUFFRCxlQUFlLE1BQU0sQ0FBQSJ9

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

@@ -1,5 +1,13 @@
-import React from 'react';
-import { View } from 'react-native';
-import { SpacerProps } from '../../components/spacer/SpacerProps';
-declare const _default: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<View>>;
-export default _default;
+/// <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: {
+    ({ size, horizontal }: SpacerProps): JSX.Element;
+    displayName: ComponentName;
+};
+export default Spacer;

package/lib/components/spacer/Spacer.native.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ComponentName } from '../../components/enumsComponentsName';
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Spacer Component
  * @param size {SpacerSize} Size of the spacer
  * @param horizontal {Boolean} If horizontal margin
  */
-var Spacer = function (_a, ref) {
+var Spacer = function (_a) {
     var size = _a.size, horizontal = _a.horizontal;
     var styles = StyleSheet.create({
         spacer: {
@@ -14,8 +14,8 @@ var Spacer = function (_a, ref) {
             marginTop: (!horizontal && parseInt(size.toString())) || 0,
         },
     });
-    return React.createElement(View, { style: styles.spacer, ref: ref });
+    return React.createElement(View, { style: styles.spacer });
 };
 Spacer.displayName = ComponentName.Spacer;
-export default React.forwardRef(Spacer);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3BhY2VyL1NwYWNlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFHaEU7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFBaUMsRUFBRSxHQUFvQjtRQUFyRCxJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBO0lBQ2hDLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsTUFBTSxFQUFFO1lBQ04sVUFBVSxFQUFFLENBQUMsVUFBVSxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDMUQsU0FBUyxFQUFFLENBQUMsQ0FBQyxVQUFVLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUMzRDtLQUNGLENBQUMsQ0FBQTtJQUNGLE9BQU8sb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLEdBQUcsRUFBRSxHQUFHLEdBQUksQ0FBQTtBQUNqRCxDQUFDLENBQUE7QUFFRCxNQUFNLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxNQUFNLENBQUE7QUFFekMsZUFBZSxLQUFLLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxDQUFBIn0=
+export default Spacer;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3BhY2VyL1NwYWNlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRS9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7OztHQUlHO0FBQ0gsSUFBTSxNQUFNLEdBQUcsVUFBQyxFQUFpQztRQUEvQixJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBO0lBQ2hDLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsTUFBTSxFQUFFO1lBQ04sVUFBVSxFQUFFLENBQUMsVUFBVSxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDMUQsU0FBUyxFQUFFLENBQUMsQ0FBQyxVQUFVLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUMzRDtLQUNGLENBQUMsQ0FBQTtJQUNGLE9BQU8sb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxHQUFJLENBQUE7QUFDdkMsQ0FBQyxDQUFBO0FBRUQsTUFBTSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsTUFBTSxDQUFBO0FBRXpDLGVBQWUsTUFBTSxDQUFBIn0=

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

@@ -1,5 +1,6 @@
-import type { SpacerSize, SpacerSizeValues } from '../../components/spacer/SpacerEnum';
-export interface SpacerProps {
+import type { SpacerSize, SpacerSizeValues } from './SpacerEnum';
+import { CommonProps } from '../../objects/facets/CommonProps';
+export interface SpacerProps extends CommonProps {
     size: SpacerSize | typeof SpacerSizeValues;
     horizontal?: boolean;
 }

package/lib/components/spacer/SpacerPropsDefaults.js

@@ -23,5 +23,19 @@ export default {
       "false",
       "true"
     ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

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

@@ -1,2 +1,3 @@
-export { default as Spacer } from '../../components/spacer/Spacer';
-export * from '../../components/spacer/SpacerEnum';
+import Spacer from './Spacer';
+export * from './SpacerEnum';
+export { Spacer };

package/lib/components/spacer/index.js

@@ -1,3 +1,4 @@
-export { default as Spacer } from '../../components/spacer/Spacer';
-export * from '../../components/spacer/SpacerEnum';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NwYWNlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLE1BQU0sRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELGNBQWMsZ0NBQWdDLENBQUEifQ==
+import Spacer from './Spacer';
+export * from './SpacerEnum';
+export { Spacer };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NwYWNlci9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE1BQU0sTUFBTSxVQUFVLENBQUE7QUFFN0IsY0FBYyxjQUFjLENBQUE7QUFFNUIsT0FBTyxFQUFFLE1BQU0sRUFBRSxDQUFBIn0=

package/lib/components/stepper/Stepper.d.ts

@@ -1,4 +1,11 @@
-import React from 'react';
-import { StepperProps } from '../../components/stepper/StepperProps';
-declare const _default: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import * as React from 'react';
+import { StepperProps } from './StepperProps';
+/**
+ * Stepper Component
+ * @param centered Center the stepper
+ * @param children {ReactNode}
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className Additionnal CSS Classes
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/lib/components/stepper/Stepper.js

@@ -1,9 +1,9 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
+import * as React from 'react';
 import clsx from 'clsx';
-import React from 'react';
-import { useStepper } from '../../components/stepper/hook/useStepper';
-import { hashClass } from '../../helpers/hashClassesHelpers';
-import { has } from '../../services/classify';
+import { hashClass } from '../../helpers';
+import { useTrilogyContext } from '../../context';
+import { Text } from '../../components/text';
 /**
  * Stepper Component
  * @param centered Center the stepper
@@ -11,26 +11,44 @@ import { has } from '../../services/classify';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className Additionnal CSS Classes
  */
-var Stepper = function (_a, ref) {
-    var className = _a.className, centered = _a.centered, children = _a.children, others = __rest(_a, ["className", "centered", "children"]);
-    var _b = useStepper({ children: children }), currentStep = _b.currentStep, nbChild = _b.nbChild;
-    var classes = hashClass(clsx('stepper-wrapper', className));
-    var centerClasses = hashClass(clsx('section', has('text-centered'), className));
-    if (centered) {
-        return (React.createElement("section", { ref: ref, className: centerClasses },
-            React.createElement("div", __assign({ className: classes }, others),
-                children,
-                React.createElement("div", { className: 'step-count' },
-                    currentStep,
-                    "/",
-                    nbChild))));
-    }
-    return (React.createElement("div", __assign({ ref: ref, className: classes }, others),
+var Stepper = React.forwardRef(function (props, ref) {
+    var className = props.className, id = props.id, children = props.children, others = __rest(props, ["className", "id", "children"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('stepper-wrapper', className));
+    var _a = __read(React.useState(1), 2), currentStep = _a[0], setCurrentStep = _a[1];
+    var nbChild = React.useMemo(function () {
+        if (children && Array.isArray(children))
+            return children.length;
+        if (children && !Array.isArray(children))
+            return 1;
+        return 0;
+    }, [children]);
+    React.useEffect(function () {
+        if (children) {
+            if (Array.isArray(children)) {
+                var haveCurrentStep_1 = false;
+                children.map(function (child, index) {
+                    var _a;
+                    if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.current) {
+                        haveCurrentStep_1 = true;
+                        setCurrentStep(index + 1);
+                    }
+                });
+                if (!haveCurrentStep_1)
+                    setCurrentStep(1);
+            }
+            else {
+                setCurrentStep(1);
+            }
+        }
+    }, [children]);
+    return (React.createElement("div", __assign({ id: id, ref: ref, className: classes }, others),
         children,
         React.createElement("div", { className: 'step-count' },
-            currentStep,
-            "/",
-            nbChild)));
-};
-export default React.forwardRef(Stepper);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0NBQXNDLENBQUE7QUFFakUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUV6Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQTBELEVBQUUsR0FBOEI7SUFBeEYsSUFBQSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQTFDLHFDQUE0QyxDQUFGO0lBQ25ELElBQUEsS0FBMkIsVUFBVSxDQUFDLEVBQUUsUUFBUSxVQUFBLEVBQUUsQ0FBQyxFQUFqRCxXQUFXLGlCQUFBLEVBQUUsT0FBTyxhQUE2QixDQUFBO0lBRXpELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUM3RCxJQUFNLGFBQWEsR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxHQUFHLENBQUMsZUFBZSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUVqRixJQUFJLFFBQVEsRUFBRTtRQUNaLE9BQU8sQ0FDTCxpQ0FBUyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxhQUFhO1lBQ3pDLHNDQUFLLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtnQkFDaEMsUUFBUTtnQkFDVCw2QkFBSyxTQUFTLEVBQUMsWUFBWTtvQkFDeEIsV0FBVzs7b0JBQUcsT0FBTyxDQUNsQixDQUNGLENBQ0UsQ0FDWCxDQUFBO0tBQ0Y7SUFFRCxPQUFPLENBQ0wsc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU07UUFDMUMsUUFBUTtRQUNULDZCQUFLLFNBQVMsRUFBQyxZQUFZO1lBQ3hCLFdBQVc7O1lBQUcsT0FBTyxDQUNsQixDQUNGLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUNELGVBQWUsS0FBSyxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQSJ9
+            React.createElement(Text, null,
+                currentStep,
+                "/",
+                nbChild))));
+});
+export default Stepper;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQUMsS0FBbUIsRUFBRSxHQUFvQztJQUNqRixJQUFBLFNBQVMsR0FBOEIsS0FBSyxVQUFuQyxFQUFFLEVBQUUsR0FBMEIsS0FBSyxHQUEvQixFQUFFLFFBQVEsR0FBZ0IsS0FBSyxTQUFyQixFQUFLLE1BQU0sVUFBSyxLQUFLLEVBQTlDLCtCQUFzQyxDQUFGLENBQVU7SUFDNUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUMvRCxJQUFBLEtBQUEsT0FBZ0MsS0FBSyxDQUFDLFFBQVEsQ0FBUyxDQUFDLENBQUMsSUFBQSxFQUF4RCxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBQTZCLENBQUE7SUFFL0QsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBUztRQUNwQyxJQUFJLFFBQVEsSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztZQUFFLE9BQU8sUUFBUSxDQUFDLE1BQU0sQ0FBQTtRQUMvRCxJQUFJLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO1lBQUUsT0FBTyxDQUFDLENBQUE7UUFDbEQsT0FBTyxDQUFDLENBQUE7SUFDVixDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRWQsS0FBSyxDQUFDLFNBQVMsQ0FBQztRQUNkLElBQUksUUFBUSxFQUFFO1lBQ1osSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFO2dCQUMzQixJQUFJLGlCQUFlLEdBQUcsS0FBSyxDQUFBO2dCQUMzQixRQUFRLENBQUMsR0FBRyxDQUFDLFVBQUMsS0FBSyxFQUFFLEtBQUs7O29CQUN4QixJQUFJLE1BQUEsS0FBSyxhQUFMLEtBQUssdUJBQUwsS0FBSyxDQUFFLEtBQUssMENBQUUsT0FBTyxFQUFFO3dCQUN6QixpQkFBZSxHQUFHLElBQUksQ0FBQTt3QkFDdEIsY0FBYyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQTtxQkFDMUI7Z0JBQ0gsQ0FBQyxDQUFDLENBQUE7Z0JBQ0YsSUFBSSxDQUFDLGlCQUFlO29CQUFFLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQTthQUN4QztpQkFBTTtnQkFDTCxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDbEI7U0FDRjtJQUNILENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUE7SUFFZCxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUNsRCxRQUFRO1FBQ1QsNkJBQUssU0FBUyxFQUFDLFlBQVk7WUFDekIsb0JBQUMsSUFBSTtnQkFDRixXQUFXOztnQkFBRyxPQUFPLENBQ2pCLENBQ0gsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUNGLGVBQWUsT0FBTyxDQUFBIn0=