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

package/lib/components/segment-control/SegmentControl.native.js

@@ -1,20 +1,22 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { View } from '../../components/view';
+import { ComponentName } from '../../components/enumsComponentsName';
+import SegmentedControlItem from '../../components/segment-control/item';
 import { Text, TextLevels } from '../../components/text';
-import SegmentedControlItem from './item';
+import { View } from '../../components/view';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
+ * @param marginless {boolean} delete margin
+ * @param inverted {boolean} invert color SegmentControl
  */
-var SegmentControl = function (_a) {
-    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, others = __rest(_a, ["children", "onClick", "activeIndex"]);
+var SegmentControl = React.forwardRef(function (_a, ref) {
+    var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, disabled = _a.disabled, marginless = _a.marginless, inverted = _a.inverted, others = __rest(_a, ["children", "onClick", "activeIndex", "disabled", "marginless", "inverted"]);
     var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
     var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
@@ -25,6 +27,9 @@ var SegmentControl = function (_a) {
         }
     };
     var toggleActive = function (e, index) {
+        if (disabled) {
+            return false;
+        }
         setActivateIndex(index);
         if (onClick) {
             onClick(e);
@@ -32,8 +37,8 @@ var SegmentControl = function (_a) {
     };
     var styles = StyleSheet.create({
         padding: {
-            paddingLeft: 10,
-            paddingRight: 10,
+            paddingLeft: marginless ? 0 : 10,
+            paddingRight: marginless ? 0 : 10,
         },
         segmentedControl: {
             flexDirection: 'row',
@@ -44,12 +49,12 @@ var SegmentControl = function (_a) {
             paddingRight: -4,
         },
     });
-    return (React.createElement(View, { style: styles.padding },
+    return (React.createElement(View, { style: styles.padding, ref: ref },
         React.createElement(View, __assign({ style: styles.segmentedControl }, others), children &&
             Array.isArray(children) &&
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             children.map(function (child, index) {
                 var props = {
+                    inverted: Boolean(isActive(index, child.props.active) && inverted) || false,
                     active: Boolean(isActive(index, child.props.active)) || false,
                     disabled: child.props.disabled,
                     key: index,
@@ -68,7 +73,7 @@ var SegmentControl = function (_a) {
                         React.createElement(Text, { level: TextLevels.ONE }, String(child)))) : (React.cloneElement(child, props));
                 }
             }))));
-};
+});
 SegmentControl.displayName = ComponentName.SegmentControl;
 export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxvQkFBb0IsTUFBTSxtQ0FBbUMsQ0FBQTtBQUVwRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXBFOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDckMsVUFDRSxFQUFrRyxFQUNsRyxHQUF3QjtJQUR0QixJQUFBLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUEzRSw0RUFBNkUsQ0FBRjtJQUdyRSxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFDLFdBQVcsSUFBSSxDQUFDLENBQUMsSUFBQSxFQUE3RCxhQUFhLFFBQUEsRUFBRSxnQkFBZ0IsUUFBOEIsQ0FBQTtJQUVwRSxJQUFNLFFBQVEsR0FBRyxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7UUFDaEUsSUFBSSxPQUFPLGdCQUFnQixLQUFLLFdBQVcsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM3RCxPQUFPLGdCQUFnQixD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

package/lib/components/segment-control/SegmentControlProps.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Clickable } from '../../objects/facets/Clickable';
-import { CommonProps } from '../../objects/facets/CommonProps';
-import { Alignable, AlignableValues } from '../../objects';
 /**
  * SegmentedControl Interface
  */
-export interface SegmentControlProps extends Clickable, CommonProps {
+export interface SegmentControlProps extends Clickable {
     children: React.ReactNode;
+    disabled?: boolean;
     activeIndex?: number;
-    align?: Alignable | AlignableValues;
+    marginless?: boolean;
+    inverted?: boolean;
+    className?: string;
 }

package/lib/components/segment-control/SegmentControlPropsDefaults.js

@@ -13,6 +13,14 @@ export default {
       "ReactPortal"
     ]
   },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "activeIndex": {
     "type": "string",
     "values": [
@@ -20,37 +28,34 @@ export default {
       "number"
     ]
   },
-  "align": {
-    "type": "enum",
+  "marginless": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "inverted": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ClickEvent"
+      "false",
+      "true"
     ]
   },
-  "id": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
-    "type": "string",
+  "onClick": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "ClickEvent"
     ]
   }
 };

package/lib/components/segment-control/hook/useSegmentControl.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClickEvent } from '../../../events/OnClickEvent';
+interface IParams {
+    activeIndex?: number;
+    disabled?: boolean;
+    onClick?: ClickEvent;
+}
+export declare const useSegmentControl: ({ activeIndex, disabled, onClick }: IParams) => {
+    handleClick: (event: React.MouseEvent, index: number, child: React.ReactElement) => void;
+    activateIndex: number;
+} | {
+    activateIndex: number | undefined;
+    handleClick?: undefined;
+};
+export {};

package/lib/components/segment-control/hook/useSegmentControl.js

@@ -0,0 +1,33 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useSegmentControl = function (_a) {
+    var activeIndex = _a.activeIndex, disabled = _a.disabled, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(activeIndex || 0), 2), activateIndex_1 = _b[0], setActivateIndex_1 = _b[1];
+        var toggleActive_1 = React.useCallback(function (e, index) {
+            if (disabled)
+                return false;
+            setActivateIndex_1(index);
+            if (onClick)
+                onClick(e);
+        }, [disabled, onClick]);
+        var handleClick = React.useCallback(function (event, index, child) {
+            toggleActive_1(event, index);
+            if (child) {
+                if (child.props.onClick) {
+                    child.props.onClick(event);
+                }
+            }
+        }, [toggleActive_1]);
+        React.useEffect(function () {
+            setActivateIndex_1(activateIndex_1);
+        }, [activateIndex_1]);
+        return { handleClick: handleClick, activateIndex: activateIndex_1 };
+    }
+    catch (_c) {
+        return {
+            activateIndex: activeIndex,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9ob29rL3VzZVNlZ21lbnRDb250cm9sLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBU3pCLE1BQU0sQ0FBQyxJQUFNLGlCQUFpQixHQUFHLFVBQUMsRUFBMkM7UUFBekMsV0FBVyxpQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQTtJQUNoRSxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQW9DLEtBQUssQ0FBQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQTNFLGVBQWEsUUFBQSxFQUFFLGtCQUFnQixRQUE0QyxDQUFBO1FBRWxGLElBQU0sY0FBWSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ3BDLFVBQUMsQ0FBbUIsRUFBRSxLQUFhO1lBQ2pDLElBQUksUUFBUTtnQkFBRSxPQUFPLEtBQUssQ0FBQTtZQUMxQixrQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUN2QixJQUFJLE9BQU87Z0JBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3pCLENBQUMsRUFDRCxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQUMsQ0FDcEIsQ0FBQTtRQUVELElBQU0sV0FBVyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ25DLFVBQUMsS0FBdUIsRUFBRSxLQUFhLEVBQUUsS0FBeUI7WUFDaEUsY0FBWSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQTtZQUMxQixJQUFJLEtBQUssRUFBRTtnQkFDVCxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFO29CQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTtpQkFDM0I7YUFDRjtRQUNILENBQUMsRUFDRCxDQUFDLGNBQVksQ0FBQyxDQUNmLENBQUE7UUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1lBQ2Qsa0JBQWdCLENBQUMsZUFBYSxDQUFDLENBQUE7UUFDakMsQ0FBQyxFQUFFLENBQUMsZUFBYSxDQUFDLENBQUMsQ0FBQTtRQUVuQixPQUFPLEVBQUUsV0FBVyxhQUFBLEVBQUUsYUFBYSxpQkFBQSxFQUFFLENBQUE7S0FDdEM7SUFBQyxXQUFNO1FBQ04sT0FBTztZQUNMLGFBQWEsRUFBRSxXQUFXO1NBQzNCLENBQUE7S0FDRjtBQUNILENBQUMsQ0FBQSJ9

package/lib/components/segment-control/index.d.ts

@@ -1,3 +1,2 @@
-import SegmentControl from './SegmentControl';
-import SegmentControlItem from './item';
-export { SegmentControl, SegmentControlItem };
+export { default as SegmentControlItem } from '../../components/segment-control/item/SegmentControlItem';
+export { default as SegmentControl } from '../../components/segment-control/SegmentControl';

package/lib/components/segment-control/index.js

@@ -1,4 +1,3 @@
-import SegmentControl from './SegmentControl';
-import SegmentControlItem from './item';
-export { SegmentControl, SegmentControlItem };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUM3QyxPQUFPLGtCQUFrQixNQUFNLFFBQVEsQ0FBQTtBQUV2QyxPQUFPLEVBQUUsY0FBYyxFQUFFLGtCQUFrQixFQUFFLENBQUEifQ==
+export { default as SegmentControlItem } from '../../components/segment-control/item/SegmentControlItem';
+export { default as SegmentControl } from '../../components/segment-control/SegmentControl';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLGtCQUFrQixFQUFFLE1BQU0sc0RBQXNELENBQUE7QUFDcEcsT0FBTyxFQUFFLE9BQU8sSUFBSSxjQUFjLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQSJ9

package/lib/components/segment-control/item/SegmentControlItem.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { SegmentControlItemProps } from './SegmentControlItemProps';
+import React from 'react';
+import { SegmentControlItemProps } from '../../../components/segment-control/item/SegmentControlItemProps';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -10,5 +10,5 @@ import { SegmentControlItemProps } from './SegmentControlItemProps';
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  */
-declare const SegmentControlItem: ({ active, onClick, disabled, className, id, children, }: SegmentControlItemProps) => JSX.Element;
+declare const SegmentControlItem: React.ForwardRefExoticComponent<SegmentControlItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default SegmentControlItem;

package/lib/components/segment-control/item/SegmentControlItem.js

@@ -1,8 +1,8 @@
-import { __read } from "tslib";
-import React, { useEffect, useState } from 'react';
-import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../../context';
+import React from 'react';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useSegmentControlItem } from '../../../components/segment-control/item/hook/useSegmentControlItem';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -13,21 +13,11 @@ import { useTrilogyContext } from '../../../context';
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  */
-var SegmentControlItem = function (_a) {
-    var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, id = _a.id, children = _a.children;
-    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
-    var styled = useTrilogyContext().styled;
-    useEffect(function () {
-        setActiveItem(active || false);
-    }, [active]);
-    return (React.createElement("button", { id: id, disabled: disabled, className: hashClass(styled, clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: function (e) {
-            var target = e.target;
-            setActiveItem(active || false);
-            target.active = active;
-            if (onClick) {
-                onClick(e);
-            }
-        } }, children));
-};
+var SegmentControlItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, children = _a.children;
+    var _b = useSegmentControlItem({ active: active, onClick: onClick }), activeItem = _b.activeItem, handleClick = _b.handleClick;
+    return (React.createElement("button", { ref: ref, disabled: disabled, className: hashClass(clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: handleClick }, children));
+});
+SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQU9GO1FBTnhCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFFBQVEsY0FBQTtJQUVGLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxTQUFTLENBQUM7UUFDUixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7SUFFWixPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsRUFDcEcsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7WUFDM0IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7WUFDMUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtZQUN0QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFFQSxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxrQkFBa0IsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhEQUE4RCxDQUFBO0FBRXBHLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUV4RDs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLGtCQUFrQixHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3pDLFVBQ0UsRUFBMkUsRUFDM0UsR0FBaUM7UUFEL0IsTUFBTSxZQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsUUFBUSxjQUFBO0lBRzFDLElBQUEsS0FBOEIscUJBQXFCLENBQUMsRUFBRSxNQUFNLFFBQUEsRUFBRSxPQUFPLFNBQUEsRUFBRSxDQUFDLEVBQXRFLFVBQVUsZ0JBQUEsRUFBRSxXQUFXLGlCQUErQyxDQUFBO0lBRTlFLE9BQU8sQ0FDTCxnQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLHdCQUF3QixFQUFFLFNBQVMsRUFBRSxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDLEVBQzVGLE9BQU8sRUFBRSxXQUFXLElBRW5CLFFBQVEsQ0FDRixDQUNWLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELGtCQUFrQixDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsa0JBQWtCLENBQUE7QUFDakUsZUFBZSxrQkFBa0IsQ0FBQSJ9

package/lib/components/segment-control/item/SegmentControlItem.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { SegmentControlItemProps } from './SegmentControlItemProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { SegmentControlItemProps } from '../../../components/segment-control/item/SegmentControlItemProps';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item
@@ -9,8 +9,5 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
  */
-declare const SegmentControlItem: {
-    ({ active, children, onClick, disabled, ...others }: SegmentControlItemProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const SegmentControlItem: React.ForwardRefExoticComponent<SegmentControlItemProps & React.RefAttributes<TouchableOpacity>>;
 export default SegmentControlItem;

package/lib/components/segment-control/item/SegmentControlItem.native.js

@@ -1,8 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item
@@ -11,8 +11,8 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
  */
-var SegmentControlItem = function (_a) {
-    var active = _a.active, children = _a.children, onClick = _a.onClick, disabled = _a.disabled, others = __rest(_a, ["active", "children", "onClick", "disabled"]);
+var SegmentControlItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, children = _a.children, onClick = _a.onClick, inverted = _a.inverted, disabled = _a.disabled, others = __rest(_a, ["active", "children", "onClick", "inverted", "disabled"]);
     var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
     var styles = StyleSheet.create({
         tabsItem: {
@@ -22,13 +22,14 @@ var SegmentControlItem = function (_a) {
             borderRadius: 4,
             alignItems: 'center',
             backgroundColor: (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
+                (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
                 (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
                 getColorStyle(TrilogyColor.NEUTRAL_FADE),
         },
         text: {
             paddingHorizontal: 16,
-            color: (activeItem && getColorStyle(TrilogyColor.BACKGROUND)) ||
-                (!activeItem && disabled && getColorStyle(TrilogyColor.DISABLED)) ||
+            color: (activeItem && !inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
+                (!activeItem && !inverted && disabled && getColorStyle(TrilogyColor.DISABLED)) ||
                 getColorStyle(TrilogyColor.MAIN),
             marginVertical: 10,
             fontSize: 16,
@@ -40,7 +41,7 @@ var SegmentControlItem = function (_a) {
     useEffect(function () {
         setActiveItem(active || false);
     }, [active]);
-    return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: [styles.tabsItem], onPress: function (e) {
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, disabled: disabled, style: [styles.tabsItem], onPress: function (e) {
             if (!disabled) {
                 setActiveItem(active || false);
                 if (onClick) {
@@ -48,7 +49,7 @@ var SegmentControlItem = function (_a) {
                 }
             }
         } }, others), children && typeof children.valueOf() === 'string' && (React.createElement(Text, { style: styles.text, ellipsizeMode: 'tail', numberOfLines: 1 }, String(children)))));
-};
+});
 SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL2l0ZW0vU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxrQkFBa0IsR0FBRyxVQUFDLEVBTUY7SUFMeEIsSUFBQSxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTGlCLDZDQU0zQixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQThCLFFBQVEsQ0FBVSxNQUFNLElBQUksS0FBSyxDQUFDLElBQUEsRUFBL0QsVUFBVSxRQUFBLEVBQUUsYUFBYSxRQUFzQyxDQUFBO0lBRXRFLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsUUFBUSxFQUFFO1lBQ1IsYUFBYSxFQUFFLFFBQVE7WUFDdkIsSUFBSSxFQUFFLENBQUM7WUFDUCxXQUFXLEVBQUUsQ0FBQztZQUNkLFlBQVksRUFBRSxDQUFDO1lBQ2YsVUFBVSxFQUFFLFFBQVE7WUFDcEIsZUFBZSxFQUNiLENBQUMsVUFBVSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3ZELGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osaUJBQWlCLEVBQUUsRUFBRTtZQUNyQixLQUFLLEVBQ0gsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxDQUFDLFVBQVUsSUFBSSxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDakUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDbEMsY0FBYyxFQUFFLEVBQUU7WUFDbEIsUUFBUSxFQUFFLEVBQUU7WUFDWixTQUFTLEVBQUUsUUFBUTtZQUNuQixpQkFBaUIsRUFBRSxRQUFRO1lBQzNCLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUTtTQUMxQztLQUNGLENBQUMsQ0FBQTtJQUVGLFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLE9BQU8sQ0FDTCxvQkFBQyxnQkFBZ0IsYUFDZixRQUFRLEVBQUUsUUFBUSxFQUNsQixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEVBQ3hCLE9BQU8sRUFBRSxVQUFDLENBQVc7WUFDbkIsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDYixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO2dCQUM5QixJQUFJLE9BQU8sRUFBRTtvQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7aUJBQ1g7YUFDRjtRQUNILENBQUMsSUFDRyxNQUFNLEdBRVQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsSUFBSSxDQUNyRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsQ0FBQyxJQUM5RCxNQUFNLENBQUMsUUFBUSxDQUFDLENBQ1osQ0FDUixDQUNnQixDQUNwQixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUVqRSxlQUFlLGtCQUFrQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL2l0ZW0vU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxrQkFBa0IsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUN6QyxVQUNFLEVBQXFGLEVBQ3JGLEdBQWdDO0lBRDlCLElBQUEsTUFBTSxZQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUExRCx5REFBNEQsQ0FBRjtJQUdwRCxJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUEvRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXNDLENBQUE7SUFFdEUsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixRQUFRLEVBQUU7WUFDUixhQUFhLEVBQUUsUUFBUTtZQUN2QixJQUFJLEVBQUUsQ0FBQztZQUNQLFdBQVcsRUFBRSxDQUFDO1lBQ2QsWUFBWSxFQUFFLENBQUM7WUFDZixVQUFVLEVBQUUsUUFBUTtZQUNwQixlQUFlLEVBQ2IsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDaEQsQ0FBQyxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDcEQsQ0FBQyxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsQ0FBQztnQkFDdkQsYUFBYSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUM7U0FDM0M7UUFDRCxJQUFJLEVBQUU7WUFDSixpQkFBaUIsRUFBRSxFQUFFO1lBQ3JCLEtBQUssRUFDSCxDQUFDLFVBQVUsSUFBSSxDQUFDLFFBQVEsSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2dCQUNuRSxDQUFDLENBQUMsVUFBVSxJQUFJLENBQUMsUUFBUSxJQUFJLFFBQVEsSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUM5RSxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNsQyxjQUFjLEVBQUUsRUFBRTtZQUNsQixRQUFRLEVBQUUsRUFBRTtZQUNaLFNBQVMsRUFBRSxRQUFRO1lBQ25CLGlCQUFpQixFQUFFLFFBQVE7WUFDM0IsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRO1NBQzFDO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsU0FBUyxDQUFDO1FBQ1IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtJQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO0lBRVosT0FBTyxDQUNMLG9CQUFDLGdCQUFnQixhQUNmLEdBQUcsRUFBRSxHQUFHLEVBQ1IsUUFBUSxFQUFFLFFBQVEsRUFDbEIsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxFQUN4QixPQUFPLEVBQUUsVUFBQyxDQUFXO1lBQ25CLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtnQkFDOUIsSUFBSSxPQUFPLEVBQUU7b0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO2lCQUNYO2FBQ0Y7UUFDSCxDQUFDLElBQ0csTUFBTSxHQUVULFFBQVEsSUFBSSxPQUFPLFFBQVEsQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLElBQUksQ0FDckQsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxFQUFFLGFBQWEsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLENBQUMsSUFDOUQsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUNaLENBQ1IsQ0FDZ0IsQ0FDcEIsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUNqRSxlQUFlLGtCQUFrQixDQUFBIn0=

package/lib/components/segment-control/item/SegmentControlItemProps.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { Clickable } from '../../../objects';
-import { CommonProps } from '../../../objects/facets/CommonProps';
+import { Clickable } from '../../../objects/facets/Clickable';
 /**
  * SegmentedControl Item Interface
  */
-export interface SegmentControlItemProps extends Clickable, CommonProps {
+export interface SegmentControlItemProps extends Clickable {
     children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
+    inverted?: boolean;
+    className?: string;
+    id?: string;
 }

package/lib/components/segment-control/item/SegmentControlItemPropsDefaults.js

@@ -29,25 +29,33 @@ export default {
       "true"
     ]
   },
-  "onClick": {
-    "type": "function",
+  "inverted": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ClickEvent"
+      "false",
+      "true"
     ]
   },
-  "id": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "id": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
   }
 };

package/lib/components/segment-control/item/hook/useSegmentControlItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClickEvent } from '../../../../events/OnClickEvent';
+interface IParams {
+    active?: boolean;
+    onClick?: ClickEvent;
+}
+export declare const useSegmentControlItem: ({ active, onClick }: IParams) => {
+    activeItem: boolean;
+    handleClick: (e: React.MouseEvent) => void;
+} | {
+    activeItem: boolean | undefined;
+    handleClick?: undefined;
+};
+export {};

package/lib/components/segment-control/item/hook/useSegmentControlItem.js

@@ -0,0 +1,24 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useSegmentControlItem = function (_a) {
+    var active = _a.active, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(active || false), 2), activeItem = _b[0], setActiveItem_1 = _b[1];
+        var handleClick = React.useCallback(function (e) {
+            var target = e.target;
+            setActiveItem_1(active || false);
+            target.active = active;
+            if (onClick) {
+                onClick(e);
+            }
+        }, [onClick, active]);
+        React.useEffect(function () {
+            setActiveItem_1(active || false);
+        }, [active]);
+        return { activeItem: activeItem, handleClick: handleClick };
+    }
+    catch (_c) {
+        return { activeItem: active };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9ob29rL3VzZVNlZ21lbnRDb250cm9sSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQVN6QixNQUFNLENBQUMsSUFBTSxxQkFBcUIsR0FBRyxVQUFDLEVBQTRCO1FBQTFCLE1BQU0sWUFBQSxFQUFFLE9BQU8sYUFBQTtJQUNyRCxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQThCLEtBQUssQ0FBQyxRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQXJFLFVBQVUsUUFBQSxFQUFFLGVBQWEsUUFBNEMsQ0FBQTtRQUU1RSxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNuQyxVQUFDLENBQW1CO1lBQ2xCLElBQU0sTUFBTSxHQUFHLENBQUMsQ0FBQyxNQUF5QixDQUFBO1lBQzFDLGVBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7WUFDOUIsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7WUFDdEIsSUFBSSxPQUFPLEVBQUU7Z0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ1g7UUFDSCxDQUFDLEVBQ0QsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLENBQ2xCLENBQUE7UUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1lBQ2QsZUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtRQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO1FBRVosT0FBTyxFQUFFLFVBQVUsWUFBQSxFQUFFLFdBQVcsYUFBQSxFQUFFLENBQUE7S0FDbkM7SUFBQyxXQUFNO1FBQ04sT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsQ0FBQTtLQUM5QjtBQUNILENBQUMsQ0FBQSJ9

package/lib/components/segment-control/item/index.d.ts

@@ -1,2 +1,2 @@
-import SegmentControlItem from './SegmentControlItem';
+import SegmentControlItem from '../../../components/segment-control/item/SegmentControlItem';
 export default SegmentControlItem;

package/lib/components/segment-control/item/index.js

@@ -1,3 +1,3 @@
-import SegmentControlItem from './SegmentControlItem';
+import SegmentControlItem from '../../../components/segment-control/item/SegmentControlItem';
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sa0JBQWtCLE1BQU0sc0JBQXNCLENBQUE7QUFFckQsZUFBZSxrQkFBa0IsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9pdGVtL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sa0JBQWtCLE1BQU0sc0RBQXNELENBQUE7QUFFckYsZUFBZSxrQkFBa0IsQ0FBQSJ9

package/lib/components/select/Select.d.ts

@@ -1,11 +1,25 @@
-/// <reference types="react" />
-import { SelectProps } from './SelectProps';
+import React from 'react';
+import { SelectProps } from '../../components/select/SelectProps';
 /**
  * Select Component
  * @param children {React.ReactNode} Children for Select
+ * @param id {string} Select id
+ * @param name {string} Select name
+ * @param label {string} Select label
+ * @param onChange {Function} onChange Event
+ * @param selected {string|number} Selected OptionItem for Native
+ * @param iconName {IconName} icon for left of selector
+ * @param disabled {boolean} disable Select
+ * @param multiple {boolean} select multiple options (for dynamic select only)
+ * @param nullable {boolean} Unselect Select Option Item
  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param onBlur {Function} onBlur Event
+ * @param onFocus {Function} onFocus Event
+ * @param testId {string} id for testing
  * @param native {boolean} Display native-old select web
  *  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param placeholder {string} Select Placeholder
  */
-declare const Select: ({ native, ...props }: SelectProps) => JSX.Element;
+declare const Select: React.ForwardRefExoticComponent<SelectProps<import("../../components/select/SelectProps").SelectChangeEvent> & React.RefAttributes<HTMLInputElement | HTMLSelectElement>>;
 export default Select;

package/lib/components/select/Select.js

@@ -1,18 +1,34 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { SelectDynamic, SelectNative } from './web';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { SelectDynamic, SelectNative } from '../../components/select/web';
 /**
  * Select Component
  * @param children {React.ReactNode} Children for Select
+ * @param id {string} Select id
+ * @param name {string} Select name
+ * @param label {string} Select label
+ * @param onChange {Function} onChange Event
+ * @param selected {string|number} Selected OptionItem for Native
+ * @param iconName {IconName} icon for left of selector
+ * @param disabled {boolean} disable Select
+ * @param multiple {boolean} select multiple options (for dynamic select only)
+ * @param nullable {boolean} Unselect Select Option Item
  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param onBlur {Function} onBlur Event
+ * @param onFocus {Function} onFocus Event
+ * @param testId {string} id for testing
  * @param native {boolean} Display native-old select web
  *  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param placeholder {string} Select Placeholder
  */
-var Select = function (_a) {
+var Select = React.forwardRef(function (_a, ref) {
     var native = _a.native, props = __rest(_a, ["native"]);
     if (native)
-        return React.createElement(SelectNative, __assign({}, props));
-    return React.createElement(SelectDynamic, __assign({}, props));
-};
+        return React.createElement(SelectNative, __assign({}, props, { ref: ref }));
+    return React.createElement(SelectDynamic, __assign({}, props, { ref: ref }));
+});
+Select.displayName = ComponentName.Select;
 export default Select;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3QvU2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbkQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxNQUFNLEdBQUcsVUFBQyxFQUFpQztJQUEvQixJQUFBLE1BQU0sWUFBQSxFQUFLLEtBQUssY0FBbEIsVUFBb0IsQ0FBRjtJQUNoQyxJQUFJLE1BQU07UUFBRSxPQUFPLG9CQUFDLFlBQVksZUFBSyxLQUFLLEVBQUksQ0FBQTtJQUM5QyxPQUFPLG9CQUFDLGFBQWEsZUFBSyxLQUFLLEVBQUksQ0FBQTtBQUNyQyxDQUFDLENBQUE7QUFFRCxlQUFlLE1BQU0sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3QvU2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBRXJFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9CRztBQUNILElBQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzdCLFVBQUMsRUFBaUMsRUFBRSxHQUFvRDtJQUFyRixJQUFBLE1BQU0sWUFBQSxFQUFLLEtBQUssY0FBbEIsVUFBb0IsQ0FBRjtJQUNqQixJQUFJLE1BQU07UUFBRSxPQUFPLG9CQUFDLFlBQVksZUFBSyxLQUFLLElBQUUsR0FBRyxFQUFFLEdBQW1DLElBQUksQ0FBQTtJQUN4RixPQUFPLG9CQUFDLGFBQWEsZUFBSyxLQUFLLElBQUUsR0FBRyxFQUFFLEdBQWtDLElBQUksQ0FBQTtBQUM5RSxDQUFDLENBQ0YsQ0FBQTtBQUVELE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUN6QyxlQUFlLE1BQU0sQ0FBQSJ9

package/lib/components/select/Select.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ComponentName } from '../../components/enumsComponentsName';
-import { SelectProps } from './SelectProps';
+import React from 'react';
+import type { TextInput } from 'react-native';
+import { SelectProps } from '../../components/select/SelectProps';
 /**
  * Select Component
  * @param id {string} Select id
@@ -14,8 +14,5 @@ import { SelectProps } from './SelectProps';
  * @param multiple {boolean} select multiple options
  * @param nullable {boolean} Unselect Select Option Item
  */
-declare const Select: {
-    ({ children, id, selected, label, iconName, onChange, disabled, multiple, ...others }: SelectProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Select: React.ForwardRefExoticComponent<SelectProps<import("../../components/select/SelectProps").SelectChangeEvent> & React.RefAttributes<TextInput>>;
 export default Select;