@trilogy-ds/react 0.0.9-beta-v4 → 0.0.9-calendar

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

@@ -1,139 +1,85 @@
-import { __assign, __read, __spreadArray } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import clsx from 'clsx';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { Input } from '../../../components/input';
-import { useTrilogyContext } from '../../../context/index';
+import { useTrilogyContext } from '../../../context';
 import { hashClass } from '../../../helpers';
-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;
+import { SelectContext } from '../context';
+var OPTION_SIZE = 48;
+var SelectDynamic = React.forwardRef(function (_a, ref) {
+    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, status = _a.status, placeholder = _a.placeholder, required = _a.required, custom = _a.custom, help = _a.help, sample = _a.sample, others = __rest(_a, ["onChange", "disabled", "onFocus", "onBlur", "children", "selected", "name", "id", "label", "iconName", "multiple", "className", "status", "placeholder", "required", "custom", "help", "sample"]);
     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];
+    var _b = useContext(SelectContext), setIsVisibleOptions = _b.setIsVisibleOptions, isVisibleOptions = _b.isVisibleOptions, selectedOptionValues = _b.selectedOptionValues;
+    var containerRef = useRef(null);
+    var _c = __read(useState(false), 2), openUpward = _c[0], setOpenUpward = _c[1];
+    var optionsListSize = useRef(0);
+    var _d = __read(useState({}), 2), dropdownStyles = _d[0], setDropdownStyles = _d[1];
+    var selectClasses = hashClass(styled, clsx('select', className));
+    var optionsClasses = hashClass(styled, clsx('select-options', openUpward && 'select-options-top'));
+    var portalClasses = hashClass(styled, 'select-trilogy_modal_open');
+    var onClickInput = function () {
+        if (containerRef.current && optionsListSize.current) {
+            var _a = containerRef.current.getBoundingClientRect(), top_1 = _a.top, bottom = _a.bottom;
+            var windowHeight = window.innerHeight;
+            var spaceBelow = windowHeight - bottom;
+            var padding = 10;
+            var maxHeightBelow = spaceBelow - padding;
+            var maxHeightAbove = top_1 - padding;
+            var openUpward_1 = maxHeightBelow < optionsListSize.current && maxHeightAbove > maxHeightBelow;
+            setOpenUpward(openUpward_1);
+            setDropdownStyles({
+                maxHeight: openUpward_1 ? "".concat(maxHeightAbove, "px") : "".concat(maxHeightBelow, "px"),
+                overflowY: 'auto',
             });
         }
-        return selectedOptions;
-    }, [multiple]);
-    React.useEffect(function () {
+        setIsVisibleOptions(function (prev) { return !prev; });
+    };
+    var onCloseOptions = function () { return setIsVisibleOptions(false); };
+    var onKeyPressInput = function (keyCode) {
+        setIsVisibleOptions(function (prev) {
+            if (keyCode === 27)
+                return false;
+            if (keyCode === 13)
+                return !prev;
+            return prev;
+        });
+    };
+    var options = useMemo(function () {
         var _a;
-        var labelSelected = (_a = React.Children.map(children, function (child) {
+        return (_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]);
-    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;
-                }
+            return {
+                label: child.props.children || child.props.label,
+                value: child.props.value,
             };
-            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) }));
+        })) === null || _a === void 0 ? void 0 : _a.filter(function (option) { return option; });
+    }, []);
+    var labelsSelected = useMemo(function () {
+        return selectedOptionValues.map(function (selectedOption) {
+            var elm = options === null || options === void 0 ? void 0 : options.find(function (opt) { return opt.value === selectedOption; });
+            return elm === null || elm === void 0 ? void 0 : elm.label;
         });
-    }, [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) {
+    }, [selectedOptionValues, options]);
+    useEffect(function () {
+        var childrenCount = React.Children.count(children);
+        if (childrenCount > 0) {
+            optionsListSize.current = childrenCount * OPTION_SIZE;
+        }
+    }, [children]);
+    return (React.createElement("div", __assign({ className: selectClasses, ref: containerRef }, others),
+        React.createElement(Input, __assign({ sample: sample, help: help, required: required, status: status, ref: ref, value: labelsSelected === null || labelsSelected === void 0 ? void 0 : labelsSelected.join(', '), name: name, disabled: disabled, label: label, placeholder: placeholder, onFocus: onFocus, iconNameLeft: iconName, onBlur: onBlur, onClick: onClickInput, className: isVisibleOptions ? 'focus' : undefined, onKeyPress: function (e) {
                 e.preventDefault();
             }, onKeyUp: function (e) {
                 e.preventDefault();
                 onKeyPressInput(e.inputKeyCode);
             } }, { readOnly: true, id: id, role: 'combobox' })),
-        focused && React.createElement("ul", { role: "listbox", className: hashClass(styled, clsx('select-options')) }, options),
-        focused && ReactDOM.createPortal(modal, document.body)));
-};
+        React.createElement("ul", { role: 'listbox', className: optionsClasses, style: __assign({ display: isVisibleOptions ? 'block' : 'none' }, dropdownStyles) }, children),
+        isVisibleOptions &&
+            ReactDOM.createPortal(React.createElement("div", { role: 'presentation', className: portalClasses, onClick: onCloseOptions }), document.body)));
+});
+SelectDynamic.displayName = ComponentName.Select;
 export default SelectDynamic;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RHluYW1pYy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L3dlYi9TZWxlY3REeW5hbWljLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQXFCLFdBQVcsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ2hGLE9BQU8sUUFBUSxNQUFNLFdBQVcsQ0FBQTtBQUVoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFFMUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sS0FBSyxDQUFBO0FBRWxDLElBQU0sYUFBYSxHQUFHLFVBQUMsRUFhVTtRQVovQixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUE7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUNoQyxJQUFBLEtBQUEsT0FBMEIsS0FBSyxDQUFDLFFBQVEsQ0FBVSxLQUFLLENBQUMsSUFBQSxFQUF2RCxPQUFPLFFBQUEsRUFBRSxZQUFZLFFBQWtDLENBQUE7SUFDeEQsSUFBQSxLQUFBLE9BQXNDLEtBQUssQ0FBQyxRQUFRLENBQWdCLFFBQVEsQ0FBQyxJQUFBLEVBQTVFLGNBQWMsUUFBQSxFQUFFLGlCQUFpQixRQUEyQyxDQUFBO0lBQzdF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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RHluYW1pYy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L3dlYi9TZWxlY3REeW5hbWljLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQXFCLFVBQVUsRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDbEcsT0FBTyxRQUFRLE1BQU0sV0FBVyxDQUFBO0FBRWhDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFFMUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUUxQyxJQUFNLFdBQVcsR0FBRyxFQUFFLENBQUE7QUFFdEIsSUFBTSxhQUFhLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDcEMsVUFDRSxFQW9CQyxFQUNELEdBQUc7SUFwQkQsSUFBQSxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxNQUFNLFlBQUEsRUFDTixXQUFXLGlCQUFBLEVBQ1gsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osTUFBTSxZQUFBLEVBQ0gsTUFBTSxjQW5CWCxrTUFvQkMsQ0FEVTtJQUlILElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ2hDLElBQUEsS0FBa0UsVUFBVSxDQUFDLGFBQWEsQ0FBQyxFQUF6RixtQkFBbUIseUJBQUEsRUFBRSxnQkFBZ0Isc0JBQUEsRUFBRSxvQkFBb0IsMEJBQThCLENBQUE7SUFDakcsSUFBTSxZQUFZLEdBQUcsTUFBTSxDQUFpQixJQUFJLENBQUMsQ0FBQTtJQUMzQyxJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFBLEVBQTVDLFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBbUIsQ0FBQTtJQUNuRCxJQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFDM0IsSUFBQSxLQUFBLE9BQXNDLFFBQVEsQ0FBc0IsRUFBRSxDQUFDLElBQUEsRUFBdEUsY0FBYyxRQUFBLEVBQUUsaUJBQWlCLFFBQXFDLENBQUE7SUFFN0UsSUFBTSxhQUFhLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDbEUsSUFBTSxjQUFjLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsVUFBVSxJQUFJLG9CQUFvQixDQUFDLENBQUMsQ0FBQTtJQUNwRyxJQUFNLGFBQWEsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLDJCQUEyQixDQUFDLENBQUE7SUFFcEUsSUFBTSxZQUFZLEdBQUc7UUFDbkIsSUFBSSxZQUFZLENBQUMsT0FBTyxJQUFJLGVBQWUsQ0FBQyxPQUFPLEVBQUU7WUFDN0MsSUFBQSxLQUFrQixZQUFZLENBQUMsT0FBTyxDQUFDLHFCQUFxQixFQUFFLEVBQTVELEtBQUcsU0FBQSxFQUFFLE1BQU0sWUFBaUQsQ0FBQTtZQUNwRSxJQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsV0FBVyxDQUFBO1lBQ3ZDLElBQU0sVUFBVSxHQUFHLFlBQVksR0FBRyxNQUFNLENBQUE7WUFDeEMsSUFBTSxPQUFPLEdBQUcsRUFBRSxDQUFBO1lBQ2xCLElBQU0sY0FBYyxHQUFHLFVBQVUsR0FBRyxPQUFPLENBQUE7WUFDM0MsSUFBTSxjQUFjLEdBQUcsS0FBRyxHQUFHLE9BQU8sQ0FBQTtZQUNwQyxJQUFNLFlBQVUsR0FBRyxjQUFjLEdBQUcsZUFBZSxDQUFDLE9BQU8sSUFBSSxjQUFjLEdBQUcsY0FBYyxDQUFBO1lBQzlGLGFBQWEsQ0FBQyxZQUFVLENBQUMsQ0FBQTtZQUN6QixpQkFBaUIsQ0FBQztnQkFDaEIsU0FBUyxFQUFFLFlBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxjQUFjLE9BQUksQ0FBQyxDQUFDLENBQUMsVUFBRyxjQUFjLE9BQUk7Z0JBQ3JFLFNBQVMsRUFBRSxNQUFNO2FBQ2xCLENBQUMsQ0FBQTtTQUNIO1FBRUQsbUJBQW1CLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksRUFBTCxDQUFLLENBQUMsQ0FBQTtJQUN0QyxDQUFDLENBQUE7SUFFRCxJQUFNLGNBQWMsR0FBRyxjQUFNLE9BQUEsbUJBQW1CLENBQUMsS0FBSyxDQUFDLEVBQTFCLENBQTBCLENBQUE7SUFFdkQsSUFBTSxlQUFlLEdBQUcsVUFBQyxPQUFlO1FBQ3RDLG1CQUFtQixDQUFDLFVBQUMsSUFBSTtZQUN2QixJQUFJLE9BQU8sS0FBSyxFQUFFO2dCQUFFLE9BQU8sS0FBSyxDQUFBO1lBQ2hDLElBQUksT0FBTyxLQUFLLEVBQUU7Z0JBQUUsT0FBTyxDQUFDLElBQUksQ0FBQTtZQUNoQyxPQUFPLElBQUksQ0FBQTtRQUNiLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQyxDQUFBO0lBRUQsSUFBTSxPQUFPLEdBQUcsT0FBTyxDQUFDOztRQUN0QixPQUFPLE1BQUEsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSztZQUN4QyxJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUM7Z0JBQUUsT0FBTyxLQUFLLENBQUE7WUFDOUMsT0FBTztnQkFDTCxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLElBQUksS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLO2dCQUNoRCxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxLQUFLO2FBQ3pCLENBQUE7UUFDSCxDQUFDLENBQUMsMENBQUUsTUFBTSxDQUFDLFVBQUMsTUFBTSxJQUFLLE9BQUEsTUFBTSxFQUFOLENBQU0sQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUVOLElBQU0sY0FBYyxHQUFHLE9BQU8sQ0FBQztRQUM3QixPQUFPLG9CQUFvQixDQUFDLEdBQUcsQ0FBQyxVQUFDLGNBQWM7WUFDN0MsSUFBTSxHQUFHLEdBQUcsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFFLElBQUksQ0FBQyxVQUFDLEdBQUcsSUFBSyxPQUFBLEdBQUcsQ0FBQyxLQUFLLEtBQUssY0FBYyxFQUE1QixDQUE0QixDQUFDLENBQUE7WUFDaEUsT0FBTyxHQUFHLGFBQUgsR0FBRyx1QkFBSCxHQUFHLENBQUUsS0FBSyxDQUFBO1FBQ25CLENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQyxFQUFFLENBQUMsb0JBQW9CLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQTtJQUVuQyxTQUFTLENBQUM7UUFDUixJQUFNLGFBQWEsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQTtRQUNwRCxJQUFJLGFBQWEsR0FBRyxDQUFDLEVBQUU7WUFDckIsZUFBZSxDQUFDLE9BQU8sR0FBRyxhQUFhLEdBQUcsV0FBVyxDQUFBO1NBQ3REO0lBQ0gsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQTtJQUVkLE9BQU8sQ0FDTCxzQ0FBSyxTQUFTLEVBQUUsYUFBYSxFQUFFLEdBQUcsRUFBRSxZQUFZLElBQU0sTUFBTTtRQUMxRCxvQkFBQyxLQUFLLGFBQ0osTUFBTSxFQUFFLE1BQU0sRUFDZCxJQUFJLEVBQUUsSUFBSSxFQUNWLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLE1BQU0sRUFBRSxNQUFNLEVBQ2QsR0FBRyxFQUFFLEdBQXdDLEVBQzdDLEtBQUssRUFBRSxjQUFjLGFBQWQsY0FBYyx1QkFBZCxjQUFjLENBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUNqQyxJQUFJLEVBQUUsSUFBSSxFQUNWLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLEtBQUssRUFBRSxLQUFLLEVBQ1osV0FBVyxFQUFFLFdBQVcsRUFDeEIsT0FBTyxFQUFFLE9BQU8sRUFDaEIsWUFBWSxFQUFFLFFBQVEsRUFDdEIsTUFBTSxFQUFFLE1BQWtDLEVBQzFDLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLFNBQVMsRUFBRSxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ2pELFVBQVUsRUFBRSxVQUFDLENBQUM7Z0JBQ1osQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFBO1lBQ3BCLENBQUMsRUFDRCxPQUFPLEVBQUUsVUFBQyxDQUFDO2dCQUNULENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQTtnQkFDbEIsZUFBZSxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQTtZQUNqQyxDQUFDLElBQ0csRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLEVBQUUsSUFBQSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsRUFDNUM7UUFDRiw0QkFDRSxJQUFJLEVBQUMsU0FBUyxFQUNkLFNBQVMsRUFBRSxjQUFjLEVBQ3pCLEtBQUssYUFDSCxPQUFPLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxJQUN6QyxjQUFjLEtBR2xCLFFBQVEsQ0FDTjtRQUNKLGdCQUFnQjtZQUNmLFFBQVEsQ0FBQyxZQUFZLENBQ25CLDZCQUFLLElBQUksRUFBQyxjQUFjLEVBQUMsU0FBUyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsY0FBYyxHQUFJLEVBQzlFLFFBQVEsQ0FBQyxJQUFJLENBQ2QsQ0FDQyxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELGFBQWEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUNoRCxlQUFlLGFBQWEsQ0FBQSJ9

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

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

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

@@ -1,18 +1,24 @@
 import { __assign, __read, __rest } from "tslib";
 import clsx from 'clsx';
 import * as React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon } from '../../../components/icon';
 import { SelectOption } from '../../../components/select';
+import { Text, TextLevels, TextMarkup } from '../../../components/text';
 import { useTrilogyContext } from '../../../context/index';
 import { hashClass } from '../../../helpers/hashClassesHelpers';
-import { has } from '../../../services/classify';
-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"]);
+import { TypographyColor } from '../../../objects/Typography/TypographyColor';
+import { is } from '../../../services/classify';
+var SelectNative = React.forwardRef(function (_a, ref) {
+    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, className = _a.className, accessibilityLabel = _a.accessibilityLabel, status = _a.status, required = _a.required, sample = _a.sample, help = _a.help, others = __rest(_a, ["onChange", "disabled", "onFocus", "onBlur", "children", "selected", "name", "id", "testId", "label", "iconName", "className", "accessibilityLabel", "status", "required", "sample", "help"]);
     var styled = useTrilogyContext().styled;
+    var idHelp = React.useId();
+    var idSample = React.useId();
     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 selectClasses = hashClass(styled, clsx('select', className));
+    var controlClass = hashClass(styled, clsx('control', iconName && 'has-icons-left'));
+    var helpClasses = clsx('help', status && is(status));
     var handleFocus = React.useCallback(function (e) {
         setIsFocused(true);
         onFocus && onFocus(e);
@@ -26,8 +32,13 @@ var SelectNative = function (_a) {
     }, [selected]);
     return (React.createElement("div", { className: selectClasses },
         React.createElement("div", { className: hashClass(styled, clsx('field', focused && 'focus')) },
+            label && (React.createElement("label", { className: hashClass(styled, 'input-label'), htmlFor: id },
+                label,
+                ' ',
+                required && (React.createElement(Text, { markup: TextMarkup.SPAN, typo: TypographyColor.TEXT_ERROR }, "*")))),
+            sample && (React.createElement(Text, { className: 'input-sample', level: TextLevels.TWO, id: idSample }, sample)),
             React.createElement("div", { className: controlClass },
-                React.createElement("select", __assign({ className: hashClass(styled, clsx(!label && 'no-label')), value: selectedValues, "aria-label": accessibilityLabel, "data-testid": testId, onChange: function (e) {
+                React.createElement("select", __assign({ ref: ref, className: hashClass(styled, clsx(!label && 'no-label', status && is(status))), 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) {
@@ -37,6 +48,7 @@ var SelectNative = function (_a) {
                                 selectId: e.target.id,
                                 name: e.target.name,
                                 selectedOptions: selectedV,
+                                target: e.target,
                             });
                         }
                     }, onFocus: handleFocus, onBlur: handleBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, role: 'listbox' }, others), React.Children.map(children, function (child) {
@@ -45,8 +57,9 @@ var SelectNative = function (_a) {
                     var props = __assign(__assign({}, child.props), { native: 'true' });
                     return React.createElement(SelectOption, __assign({}, props));
                 })),
-                label && !multiple && React.createElement("label", { htmlFor: id }, label),
-                iconName && React.createElement(Icon, { name: iconName, size: 'small' })))));
-};
+                iconName && React.createElement(Icon, { name: iconName, size: 'small' })),
+            help && (React.createElement(Text, { className: helpClasses, id: idHelp }, help)))));
+});
+SelectNative.displayName = ComponentName.Select;
 export default SelectNative;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0TmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvd2ViL1NlbGVjdE5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRWxELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFekMsSUFBTSxZQUFZLEdBQUcsVUFBQyxFQWdCUjtJQWZaLElBQUEsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1Qsa0JBQWtCLHdCQUFBLEVBQ2YsTUFBTSxjQWZXLGlLQWdCckIsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRWhDLElBQUEsS0FBQSxPQUEwQixLQUFLLENBQUMsUUFBUSxDQUFVLEtBQUssQ0FBQyxJQUFBLEVBQXZELE9BQU8sUUFBQSxFQUFFLFlBQVksUUFBa0MsQ0FBQTtJQUN4RCxJQUFBLEtBQUEsT0FBc0MsS0FBSyxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBQSxFQUE3RCxjQUFjLFFBQUEsRUFBRSxpQkFBaUIsUUFBNEIsQ0FBQTtJQUVwRSxJQUFNLGFBQWEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLGNBQU0sT0FBQSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsU0FBUyxDQUFDLENBQUMsRUFBNUMsQ0FBNEMsRUFBRSxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRTVHLElBQU0sWUFBWSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQ2hDLGNBQU0sT0FBQSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsR0FBRyxDQUFDLHFCQUFxQixDQUFDLEVBQUUsUUFBUSxJQUFJLGdCQUFnQixDQUFDLENBQUMsRUFBNUYsQ0FBNEYsRUFDbEcsQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQ25CLENBQUE7SUFFRCxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLFVBQUMsQ0FBd0I7UUFDN0QsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFBO1FBQ2xCLE9BQU8sSUFBSSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7SUFDdkIsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFBO0lBRU4sSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQyxVQUFDLENBQXdCO1FBQzVELFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUNuQixNQUFNLElBQUksTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFBO0lBQ3JCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUVOLEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsQ0FBQTtJQUM3QixDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRWQsT0FBTyxDQUNMLDZCQUFLLFNBQVMsRUFBRSxhQUFhO1FBQzNCLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxJQUFJLE9BQU8sQ0FBQyxDQUFDO1lBQ2xFLDZCQUFLLFNBQVMsRUFBRSxZQUFZO2dCQUMxQix5Q0FDRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQyxLQUFLLElBQUksVUFBVSxDQUFDLENBQUMsRUFDeEQsS0FBSyxFQUFFLGNBQWMsZ0JBQ1Qsa0JBQWtCLGlCQUNqQixNQUFNLEVBQ25CLFFBQVEsRUFBRSxVQUFDLENBQXVDO3dCQUNoRCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsZUFBZSxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQUMsTUFBTSxJQUFLLE9BQUEsTUFBTSxDQUFDLEtBQUssRUFBWixDQUFZLENBQUMsQ0FBQTt3QkFDcEYsaUJBQWlCLENBQUMsU0FBUyxDQUFDLENBQUE7d0JBQzVCLElBQUksUUFBUSxFQUFFOzRCQUNaLFFBQVEsQ0FBQztnQ0FDUCxXQUFXLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLO2dDQUMzQixVQUFVLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJO2dDQUN6QixRQUFRLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxFQUFFO2dDQUNyQixJQUFJLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJO2dDQUNuQixlQUFlLEVBQUUsU0FBUzs2QkFDM0IsQ0FBQyxDQUFBO3lCQUNIO29CQUNILENBQUMsRUFDRCxPQUFPLEVBQUUsV0FBVyxFQUNwQixNQUFNLEVBQUUsVUFBVSxFQUNsQixFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFDL0IsSUFBSSxFQUFFLElBQUksRUFDVixRQUFRLEVBQUUsUUFBUSxFQUNsQixJQUFJLEVBQUMsU0FBUyxJQUNWLE1BQU0sR0FFVCxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsVUFBQyxLQUFLO29CQUNsQyxJQUFJLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUM7d0JBQUUsT0FBTyxJQUFJLENBQUE7b0JBQzdDLElBQU0sS0FBSyx5QkFDTixLQUFLLENBQUMsS0FBSyxLQUNkLE1BQU0sRUFBRSxNQUFNLEdBQ2YsQ0FBQTtvQkFDRCxPQUFPLG9CQUFDLFlBQVksZUFBSyxLQUFLLEVBQUksQ0FBQTtnQkFDcEMsQ0FBQyxDQUFDLENBQ0s7Z0JBQ1IsS0FBSyxJQUFJLENBQUMsUUFBUSxJQUFJLCtCQUFPLE9BQU8sRUFBRSxFQUFFLElBQUcsS0FBSyxDQUFTO2dCQUN6RCxRQUFRLElBQUksb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFDLE9BQU8sR0FBRyxDQUM5QyxDQUNGLENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxZQUFZLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0TmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvd2ViL1NlbGVjdE5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUVsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFBO0FBQ3RFLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUV4QyxJQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNuQyxVQUNFLEVBbUJDLEVBQ0QsR0FBRztJQW5CRCxJQUFBLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULGtCQUFrQix3QkFBQSxFQUNsQixNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixJQUFJLFVB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

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from '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;
+declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
 export default Spacer;

package/lib/components/spacer/Spacer.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { hashClass } from '../../helpers';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../context';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Spacer Component
  * @param size {SpacerSize} ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
  * @param horizontal {Boolean} If horizontal margin
  */
-var Spacer = function (_a) {
+var Spacer = React.forwardRef(function (_a, ref) {
     var size = _a.size, horizontal = _a.horizontal, className = _a.className, id = _a.id;
     var styled = useTrilogyContext().styled;
     var styles = {
@@ -17,7 +18,8 @@ var Spacer = function (_a) {
         },
     };
     var classes = hashClass(styled, clsx(className));
-    return React.createElement("div", { id: id, style: styles.spacer, className: classes });
-};
+    return React.createElement("div", { ref: ref, id: id, style: styles.spacer, className: classes });
+});
+Spacer.displayName = ComponentName.Spacer;
 export default Spacer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFBZ0Q7UUFBOUMsSUFBSSxVQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQTtJQUN2QyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE1BQU0sR0FBRztRQUNiLE1BQU0sRUFBRTtZQUNOLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7WUFDNUMsU0FBUyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFHLElBQUksT0FBSSxDQUFDLENBQUMsQ0FBQyxLQUFLO1NBQzdDO0tBQ0YsQ0FBQTtJQUNELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFbEQsT0FBTyw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUNsRSxDQUFDLENBQUE7QUFFRCxlQUFlLE1BQU0sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXlCLFVBQUMsRUFBbUMsRUFBRSxHQUFHO1FBQXRDLElBQUksVUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDaEYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxNQUFNLEdBQUc7UUFDYixNQUFNLEVBQUU7WUFDTixVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFHLElBQUksT0FBSSxDQUFDLENBQUMsQ0FBQyxLQUFLO1lBQzVDLFNBQVMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxJQUFJLE9BQUksQ0FBQyxDQUFDLENBQUMsS0FBSztTQUM3QztLQUNGLENBQUE7SUFDRCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWxELE9BQU8sNkJBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUM1RSxDQUFDLENBQUMsQ0FBQTtBQUVGLE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUN6QyxlQUFlLE1BQU0sQ0FBQSJ9

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

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from "react";
+import { View } from "react-native";
 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;
-};
+declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<View>>;
 export default Spacer;

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

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

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

@@ -1,6 +1,9 @@
 import type { SpacerSize, SpacerSizeValues } from './SpacerEnum';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { View } from 'react-native';
 export interface SpacerProps extends CommonProps {
     size: SpacerSize | typeof SpacerSizeValues;
     horizontal?: boolean;
 }
+export type SpacerRef = HTMLDivElement;
+export type SpacerNativeRef = View;

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

@@ -5,7 +5,7 @@ import { StepperProps } from './StepperProps';
  * @param centered Center the stepper
  * @param children {ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additionnal CSS Classes
+ * @param className Additional CSS Classes
  */
-declare const Stepper: ({ className, id, children, ...others }: StepperProps) => React.JSX.Element;
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
 export default Stepper;

package/lib/components/stepper/Stepper.js

@@ -4,14 +4,15 @@ import clsx from 'clsx';
 import { hashClass } from '../../helpers';
 import { useTrilogyContext } from '../../context';
 import { Text } from '../../components/text';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Stepper Component
  * @param centered Center the stepper
  * @param children {ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additionnal CSS Classes
+ * @param className Additional CSS Classes
  */
-var Stepper = function (_a) {
+var Stepper = React.forwardRef(function (_a, ref) {
     var className = _a.className, id = _a.id, children = _a.children, others = __rest(_a, ["className", "id", "children"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx('stepper-wrapper', className));
@@ -42,13 +43,14 @@ var Stepper = function (_a) {
             }
         }
     }, [children]);
-    return (React.createElement("div", __assign({ id: id, className: classes }, others),
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others),
         children,
-        React.createElement("div", { className: "step-count" },
+        React.createElement("div", { className: 'step-count' },
             React.createElement(Text, null,
                 currentStep,
                 "/",
                 nbChild))));
-};
+});
+Stepper.displayName = ComponentName.Stepper;
 export default Stepper;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQW9EO0lBQWxELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFwQywrQkFBc0MsQ0FBRjtJQUMzQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQy9ELElBQUEsS0FBQSxPQUFnQyxLQUFLLENBQUMsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQXhELFdBQVcsUUFBQSxFQUFFLGNBQWMsUUFBNkIsQ0FBQTtJQUUvRCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFTO1FBQ3BDLElBQUksUUFBUSxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO1lBQUUsT0FBTyxRQUFRLENBQUMsTUFBTSxDQUFBO1FBQy9ELElBQUksUUFBUSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7WUFBRSxPQUFPLENBQUMsQ0FBQTtRQUNsRCxPQUFPLENBQUMsQ0FBQTtJQUNWLENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUE7SUFFZCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsSUFBSSxRQUFRLEVBQUU7WUFDWixJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQzNCLElBQUksaUJBQWUsR0FBRyxLQUFLLENBQUE7Z0JBQzNCLFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFLLEVBQUUsS0FBSzs7b0JBQ3hCLElBQUksTUFBQSxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsS0FBSywwQ0FBRSxPQUFPLEVBQUU7d0JBQ3pCLGlCQUFlLEdBQUcsSUFBSSxDQUFBO3dCQUN0QixjQUFjLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFBO3FCQUMxQjtnQkFDSCxDQUFDLENBQUMsQ0FBQTtnQkFDRixJQUFJLENBQUMsaUJBQWU7b0JBQUUsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ3hDO2lCQUFNO2dCQUNMLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQTthQUNsQjtTQUNGO0lBQ0gsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQTtJQUVkLE9BQU8sQ0FDTCxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUN4QyxRQUFRO1FBQ1QsNkJBQUssU0FBUyxFQUFDLFlBQVk7WUFDekIsb0JBQUMsSUFBSTtnQkFDRixXQUFXOztnQkFBRyxPQUFPLENBQ2pCLENBQ0gsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFDRCxlQUFlLE9BQU8sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBMkIsVUFBQyxFQUFzQyxFQUFFLEdBQUc7SUFBekMsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXBDLCtCQUFzQyxDQUFGO0lBQ3RGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDL0QsSUFBQSxLQUFBLE9BQWdDLEtBQUssQ0FBQyxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBeEQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUE2QixDQUFBO0lBRS9ELElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQVM7UUFDcEMsSUFBSSxRQUFRLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7WUFBRSxPQUFPLFFBQVEsQ0FBQyxNQUFNLENBQUE7UUFDL0QsSUFBSSxRQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztZQUFFLE9BQU8sQ0FBQyxDQUFBO1FBQ2xELE9BQU8sQ0FBQyxDQUFBO0lBQ1YsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQTtJQUVkLEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxJQUFJLFFBQVEsRUFBRTtZQUNaLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRTtnQkFDM0IsSUFBSSxpQkFBZSxHQUFHLEtBQUssQ0FBQTtnQkFDM0IsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLEtBQUssRUFBRSxLQUFLOztvQkFDeEIsSUFBSSxNQUFBLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxLQUFLLDBDQUFFLE9BQU8sRUFBRTt3QkFDekIsaUJBQWUsR0FBRyxJQUFJLENBQUE7d0JBQ3RCLGNBQWMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUE7cUJBQzFCO2dCQUNILENBQUMsQ0FBQyxDQUFBO2dCQUNGLElBQUksQ0FBQyxpQkFBZTtvQkFBRSxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDeEM7aUJBQU07Z0JBQ0wsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ2xCO1NBQ0Y7SUFDSCxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRWQsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU07UUFDbEQsUUFBUTtRQUNULDZCQUFLLFNBQVMsRUFBQyxZQUFZO1lBQ3pCLG9CQUFDLElBQUk7Z0JBQ0YsV0FBVzs7Z0JBQUcsT0FBTyxDQUNqQixDQUNILENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==

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

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { StepperProps } from './StepperProps';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Stepper Component
  * @param centered {boolean} Center the stepper
  * @param children {ReactNode}
  */
-declare const Stepper: {
-    ({ children, ...others }: StepperProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<View>>;
 export default Stepper;

package/lib/components/stepper/Stepper.native.js

@@ -10,7 +10,7 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param centered {boolean} Center the stepper
  * @param children {ReactNode}
  */
-var Stepper = function (_a) {
+var Stepper = React.forwardRef(function (_a, ref) {
     var children = _a.children, others = __rest(_a, ["children"]);
     var _b = __read(React.useState({
         step: 0,
@@ -20,7 +20,7 @@ var Stepper = function (_a) {
     var styles = StyleSheet.create({
         steppers: {
             flexDirection: 'row',
-            alignSelf: 'flex-start',
+            flex: 1,
         },
         step: {
             flexDirection: 'row',
@@ -50,20 +50,21 @@ var Stepper = function (_a) {
         if (children) {
             if (Array.isArray(children)) {
                 var haveCurrentStep_1 = false;
-                children.map(function (child) {
+                children.forEach(function (child, index) {
                     if (child.props.current) {
                         haveCurrentStep_1 = true;
                         setCurrentStep({
-                            step: child.props.step,
+                            step: index + 1,
                             name: child.props.label,
                             iconName: child.props.iconName,
                         });
                     }
                 });
-                if (!haveCurrentStep_1) {
+                if (!haveCurrentStep_1 && children.length > 0) {
                     setCurrentStep({
                         step: 1,
                         name: children[0].props.label,
+                        iconName: children[0].props.iconName,
                     });
                 }
             }
@@ -72,11 +73,12 @@ var Stepper = function (_a) {
                 setCurrentStep({
                     step: 1,
                     name: child.props.label,
+                    iconName: child.props.iconName,
                 });
             }
         }
     }, [children]);
-    return (React.createElement(View, null,
+    return (React.createElement(View, { ref: ref },
         React.createElement(View, __assign({ style: styles.steppers }, others), children),
         React.createElement(View, { style: styles.step },
             React.createElement(View, { style: styles.hasIcon },
@@ -87,7 +89,7 @@ var Stepper = function (_a) {
                 currentStep.step,
                 "/",
                 nbChild))));
-};
+});
 Stepper.displayName = ComponentName.Stepper;
 export default Stepper;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3N0ZXBwZXIvU3RlcHBlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUMzRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXBELE9BQU8sRUFBRSxJQUFJLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBUWhFOzs7O0dBSUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxVQUFDLEVBQXFDO0lBQW5DLElBQUEsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFyQixZQUF1QixDQUFGO0lBQzlCLElBQUEsS0FBQSxPQUFnQyxLQUFLLENBQUMsUUFBUSxDQUFlO1FBQ2pFLElBQUksRUFBRSxDQUFDO1FBQ1AsSUFBSSxFQUFFLEVBQUU7UUFDUixRQUFRLEVBQUUsRUFBRTtLQUNiLENBQUMsSUFBQSxFQUpLLFdBQVcsUUFBQSxFQUFFLGNBQWMsUUFJaEMsQ0FBQTtJQUVGLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsUUFBUSxFQUFFO1lBQ1IsYUFBYSxFQUFFLEtBQUs7WUFDcEIsU0FBUyxFQUFFLFlBQVk7U0FDeEI7UUFDRCxJQUFJLEVBQUU7WUFDSixhQUFhLEVBQUUsS0FBSztZQUNwQixjQUFjLEVBQUUsZUFBZTtZQUMvQixVQUFVLEVBQUUsUUFBUTtZQUNwQixTQUFTLEVBQUUsRUFBRTtTQUNkO1FBQ0QsT0FBTyxFQUFFO1lBQ1As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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3N0ZXBwZXIvU3RlcHBlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUMzRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXBELE9BQU8sRUFBRSxJQUFJLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBUWhFOzs7O0dBSUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFpQyxVQUFDLEVBQXVCLEVBQUUsR0FBRztJQUExQixJQUFBLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckIsWUFBdUIsQ0FBRjtJQUMvRSxJQUFBLEtBQUEsT0FBZ0MsS0FBSyxDQUFDLFFBQVEsQ0FBZTtRQUNqRSxJQUFJLEVBQUUsQ0FBQztRQUNQLElBQUksRUFBRSxFQUFFO1FBQ1IsUUFBUSxFQUFFLEVBQUU7S0FDYixDQUFDLElBQUEsRUFKSyxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBSWhDLENBQUE7SUFFRixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFFBQVEsRUFBRTtZQUNSLGFBQWEsRUFBRSxLQUFLO1lBQ3BCLElBQUksRUFBRSxDQUFDO1NBQ1I7UUFDRCxJQUFJLEVBQUU7WUFDSixhQUFhLEVBQUUsS0FBSztZQUNwQixjQUFjLEVBQUUsZUFBZTtZQUMvQixVQUFVLEVBQUUsUUFBUTtZQUNwQixTQUFTLEVBQUUs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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { View } from 'react-native';
 import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Stepper Interface
@@ -6,3 +7,5 @@ import { CommonProps } from '../../objects/facets/CommonProps';
 export interface StepperProps extends CommonProps {
     children?: React.ReactNode;
 }
+export type StepperRef = HTMLDivElement;
+export type StepperNativeRef = View;