@trilogy-ds/react 0.0.7-beta-v4 → 0.0.8-alpha-prompt

package/lib/components/tabs/tab-list/TabList.native.js

@@ -0,0 +1,86 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { Icon } from '../../../components/icon';
+import { TabsContext } from '../../../components/tabs/context';
+import Tab from '../../../components/tabs/tab-list/tab/Tab';
+import { getColorStyle, TrilogyColor } from '../../../objects';
+import React from 'react';
+import { ScrollView, StyleSheet, View, } from 'react-native';
+/**
+ * Tabs Nav Component
+ * @param children {ReactChild} React Child Element
+ * @param className
+ * @param id
+ * @param testId
+ * @param align
+ * @param others
+ */
+var TabList = React.forwardRef(function (_a, ref) {
+    var children = _a.children, others = __rest(_a, ["children"]);
+    var _b = React.useContext(TabsContext), inverted = _b.inverted, fullwidth = _b.fullwidth;
+    var TabListRef = React.useRef(null);
+    var paddingHorizontalTab = 12;
+    var negativeGap = -35;
+    var _c = __read(React.useState(0), 2), tabsWidth = _c[0], setTabsWidth = _c[1];
+    var _d = __read(React.useState(0), 2), tabListWidth = _d[0], setTabListWidth = _d[1];
+    var _e = __read(React.useState(0), 2), scrollLeft = _e[0], setScrollLeft = _e[1];
+    var _f = __read(React.useState(0), 2), tabFocused = _f[0], setTabFocused = _f[1];
+    var _g = __read(React.useState([]), 2), tabElms = _g[0], setTabElms = _g[1];
+    React.useImperativeHandle(ref, function () { return TabListRef.current; });
+    var styles = StyleSheet.create({
+        tabList: {
+            flexDirection: 'row',
+            backgroundColor: getColorStyle(inverted ? TrilogyColor.MAIN : 'transparent'),
+        },
+        arrow: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 2 },
+    });
+    var isVisibleArrowLeft = React.useMemo(function () {
+        if (!tabElms.length || !tabElms[0])
+            return false;
+        return scrollLeft > tabElms[0].width / 2;
+    }, [tabElms, scrollLeft]);
+    var isVisibleArrowRight = React.useMemo(function () { return tabListWidth - tabsWidth - scrollLeft > negativeGap; }, [tabListWidth, tabsWidth, scrollLeft]);
+    var handleScrollList = React.useCallback(function (e) {
+        var scrollLeft = e.nativeEvent.contentOffset.x;
+        var scrollPosition = tabElms.findIndex(function (tab) { return scrollLeft >= tab.x - paddingHorizontalTab && scrollLeft <= tab.x + tab.width - paddingHorizontalTab; });
+        setTabFocused(scrollPosition);
+        setScrollLeft(scrollLeft);
+    }, [tabElms]);
+    var scrollWithArrow = React.useCallback(function (direction) {
+        var _a;
+        if (tabElms.length) {
+            var nextTab = tabFocused + direction;
+            var nextPosition = tabElms[nextTab === -1 ? 0 : nextTab];
+            nextPosition && ((_a = TabListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: nextPosition.x + 1, animated: true }));
+        }
+    }, [tabFocused, TabListRef, tabElms]);
+    var onClickPrev = React.useCallback(function () {
+        isVisibleArrowLeft && scrollWithArrow(-1);
+    }, [scrollWithArrow, isVisibleArrowLeft]);
+    var onClickNext = React.useCallback(function () {
+        isVisibleArrowRight && scrollWithArrow(1);
+    }, [scrollWithArrow, isVisibleArrowRight]);
+    return (React.createElement(View, { style: { flexDirection: 'row' }, onLayout: function (e) { return setTabsWidth(e.nativeEvent.layout.width); } },
+        tabListWidth > tabsWidth && (React.createElement(View, { style: styles.arrow },
+            React.createElement(Icon, { name: 'tri-arrow-left', align: 'ALIGNED_CENTER', color: isVisibleArrowLeft ? undefined : 'transparent', onClick: onClickPrev }))),
+        React.createElement(ScrollView, __assign({ scrollEnabled: fullwidth ? false : undefined, ref: TabListRef, scrollEventThrottle: 16, onContentSizeChange: function (w) { return setTabListWidth(w); }, horizontal: true, showsHorizontalScrollIndicator: false, style: [styles.tabList, fullwidth && { flex: 1 }], onScroll: handleScrollList, contentContainerStyle: {
+                flexGrow: fullwidth ? 1 : undefined,
+                flex: fullwidth ? 1 : undefined,
+            } }, others), React.Children.map(children, function (child, index) {
+            if (!React.isValidElement(child))
+                return false;
+            return (React.createElement(Tab, __assign({ onLayout: function (e) {
+                    e.persist();
+                    setTabElms(function (prev) {
+                        var updatedArray = __spreadArray([], __read(prev), false);
+                        updatedArray[index] = e.nativeEvent.layout;
+                        return updatedArray;
+                    });
+                }, index: index }, child.props)));
+        })),
+        tabListWidth > tabsWidth && (React.createElement(View, { style: styles.arrow },
+            React.createElement(Icon, { name: 'tri-arrow-right', align: 'ALIGNED_CENTER', color: isVisibleArrowRight ? undefined : 'transparent', onClick: onClickNext })))));
+});
+TabList.displayName = ComponentName.TabList;
+export default TabList;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiTGlzdC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvdGFiLWxpc3QvVGFiTGlzdC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQTtBQUN2RCxPQUFPLEdBQUcsTUFBTSxvQ0FBb0MsQ0FBQTtBQUVwRCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxFQUtMLFVBQVUsRUFDVixVQUFVLEVBQ1YsSUFBSSxHQUNMLE1BQU0sY0FBYyxDQUFBO0FBRXJCOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBaUMsVUFBQyxFQUF1QixFQUFFLEdBQUc7SUFBMUIsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDL0UsSUFBQSxLQUEwQixLQUFLLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQyxFQUFyRCxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQWtDLENBQUE7SUFDN0QsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBYSxJQUFJLENBQUMsQ0FBQTtJQUNqRCxJQUFNLG9CQUFvQixHQUFHLEVBQUUsQ0FBQTtJQUMvQixJQUFNLFdBQVcsR0FBRyxDQUFDLEVBQUUsQ0FBQTtJQUVqQixJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBUyxDQUFDLENBQUMsSUFBQSxFQUFwRCxTQUFTLFFBQUEsRUFBRSxZQUFZLFFBQTZCLENBQUE7SUFDckQsSUFBQSxLQUFB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

package/lib/components/tabs/tab-list/TabListProps.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
-import { Alignable, AlignableValues, Dev } from '../../../objects';
+import { AlignableProps, Dev } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { ScrollView } from 'react-native';
 /**
  * Tabs Item Interface
  */
 export interface TabListProps extends Dev, CommonProps {
     children: React.ReactNode;
-    align?: Alignable | AlignableValues;
+    align?: AlignableProps['align'];
 }
+export type TabListRef = HTMLDivElement;
+export type TabListNativeRef = ScrollView;

package/lib/components/tabs/tab-list/TabListPropsDefaults.js

@@ -20,9 +20,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "testId": {

package/lib/components/tabs/tab-list/tab/Tab.d.ts

@@ -1,5 +1,5 @@
+import { TabProps, TabRef } from '../../../../components/tabs/tab-list/tab/TabProps';
 import React from 'react';
-import { TabProps } from './TabProps';
 /**
  * Tabs Item Component
  * @param active {boolean} active tab item
@@ -7,12 +7,13 @@ import { TabProps } from './TabProps';
  * @param onClick onClick Event
  * @param iconName {IconNameValues | IconName} add icon name
  * @param disabled {boolean} disable tab item
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param testId {string} Test Id for Test Integration
+ * @param label {string} Tab content
  * @param to {string} Link
  * @param href {string} <a />
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param testId {string} Test Id for Test Integration
  * @param routerLink Custom Router Link as props
  */
-declare const Tab: ({ active, className, onClick, to, href, routerLink, iconName, label, disabled, testId, ariaControls, ...others }: TabProps) => React.JSX.Element;
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<TabRef>>;
 export default Tab;

package/lib/components/tabs/tab-list/tab/Tab.js

@@ -1,9 +1,12 @@
-import { __assign, __read, __rest } from "tslib";
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { hashClass } from '../../../../helpers/hashClassesHelpers';
-import { useTrilogyContext } from '../../../../context/index';
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../../components/enumsComponentsName';
 import { Icon } from '../../../../components/icon';
+import { TabsContext } from '../../../../components/tabs/context';
+import { Text } from '../../../../components/text';
+import { useTrilogyContext } from '../../../../context/index';
+import { hashClass } from '../../../../helpers/hashClassesHelpers';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * Tabs Item Component
  * @param active {boolean} active tab item
@@ -11,48 +14,38 @@ import { Icon } from '../../../../components/icon';
  * @param onClick onClick Event
  * @param iconName {IconNameValues | IconName} add icon name
  * @param disabled {boolean} disable tab item
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
- * @param testId {string} Test Id for Test Integration
+ * @param label {string} Tab content
  * @param to {string} Link
  * @param href {string} <a />
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param testId {string} Test Id for Test Integration
  * @param routerLink Custom Router Link as props
  */
-var Tab = function (_a) {
-    var active = _a.active, className = _a.className, onClick = _a.onClick, to = _a.to, href = _a.href, routerLink = _a.routerLink, iconName = _a.iconName, label = _a.label, disabled = _a.disabled, testId = _a.testId, ariaControls = _a.ariaControls, others = __rest(_a, ["active", "className", "onClick", "to", "href", "routerLink", "iconName", "label", "disabled", "testId", "ariaControls"]);
-    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
+var Tab = React.forwardRef(function (_a, ref) {
+    var active = _a.active, className = _a.className, onClick = _a.onClick, _b = _a.routerLink, routerLink = _b === void 0 ? 'a' : _b, iconName = _a.iconName, label = _a.label, disabled = _a.disabled, testId = _a.testId, ariaControls = _a.ariaControls, others = __rest(_a, ["active", "className", "onClick", "routerLink", "iconName", "label", "disabled", "testId", "ariaControls"]);
     var styled = useTrilogyContext().styled;
-    useEffect(function () {
-        setActiveItem(active || false);
-    }, [active]);
-    var classes = hashClass(styled, clsx('tab', className, { 'is-active': activeItem }));
-    if (routerLink && (to || href)) {
-        var RouterLink = (routerLink ? routerLink : 'a');
-        return (React.createElement(RouterLink, __assign({ "data-testid": testId, to: to, href: href, className: classes }, others, { onClick: function (e) {
-                if (!disabled) {
-                    var target = e.target;
-                    setActiveItem(active || false);
-                    target.active = active;
-                    if (onClick) {
-                        onClick(e);
-                    }
-                }
-            } }),
-            React.createElement("div", { className: "tab-icon" }, iconName && React.createElement(Icon, { align: "ALIGNED_CENTER", size: "small", name: iconName })),
-            label && label));
-    }
-    return (React.createElement("button", __assign({ "aria-controls": ariaControls, "aria-disabled": disabled, "aria-selected": activeItem, "data-tab-navigation": "", disabled: disabled, className: classes, role: "tab", "data-testid": testId }, others, { onClick: function (e) {
-            if (!disabled) {
-                var target = e.target;
-                setActiveItem(active || false);
-                target.active = active;
-                if (onClick) {
-                    onClick(e);
-                }
-            }
-        } }),
-        React.createElement("div", { className: "tab-icon" }, iconName && React.createElement(Icon, { align: "ALIGNED_CENTER", size: "small", name: iconName })),
-        label && label));
-};
+    var _c = others, index = _c.index, props = __rest(_c, ["index"]);
+    var _d = React.useContext(TabsContext), activeIndex = _d.activeIndex, setActiveIndex = _d.setActiveIndex, small = _d.small;
+    var Tag = others.href || others.to ? routerLink : 'button';
+    var isActive = React.useMemo(function () { return activeIndex === index; }, [activeIndex, index]);
+    var classes = hashClass(styled, clsx('tab', className, { 'is-active': isActive }));
+    var handleClick = React.useCallback(function (e) {
+        if (!disabled) {
+            if (!others.href && !others.to)
+                setActiveIndex(index);
+            if (onClick)
+                onClick(e);
+        }
+    }, [disabled, onClick, index, setActiveIndex]);
+    React.useEffect(function () {
+        if (active)
+            setActiveIndex(index);
+    }, [active, setActiveIndex, index]);
+    return (React.createElement(Tag, __assign({ ref: ref, "aria-controls": ariaControls, "aria-disabled": disabled, "aria-selected": isActive, "data-tab-navigation": '', disabled: disabled, className: classes, role: 'tab', "data-testid": testId, "data-index": index, onClick: handleClick }, props),
+        React.createElement("div", { className: hashClass(styled, 'tab-icon') }, iconName && React.createElement(Icon, { size: small ? 'small' : 'medium', name: iconName })),
+        label && React.createElement(Text, null, label)));
+});
+Tab.displayName = ComponentName.Tab;
 export default Tab;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L3RhYi9UYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEM7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFhVztJQVpULElBQUEsTUFBTSxZQUFBLEVBQ04sU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNOLFlBQVksa0JBQUEsRUFDVCxNQUFNLGNBWlgseUhBYUMsQ0FEVTtJQUdoQixJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUEvRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXNDLENBQUE7SUFDOUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsU0FBUyxDQUFDO1FBQ1IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtJQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO0lBRVosSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLFNBQVMsRUFBRSxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDLENBQUE7SUFFdEYsSUFBSSxVQUFVLElBQUksQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLEVBQUU7UUFDOUIsSUFBTSxVQUFVLEdBQUcsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFzQixDQUFBO1FBQ3ZFLE9BQU8sQ0FDTCxvQkFBQyxVQUFVLDRCQUNJLE1BQU0sRUFDbkIsRUFBRSxFQUFFLEVBQUUsRUFDTixJQUFJLEVBQUUsSUFBSSxFQUNWLFNBQVMsRUFBRSxPQUFPLElBQ2QsTUFBTSxJQUNWLE9BQU8sRUFBRSxVQUFDLENBQW1CO2dCQUMzQixJQUFJLENBQUMsUUFBUSxFQUFFO29CQUNiLElBQU0sTUFBTSxHQUFHLENBQUMsQ0FBQyxNQUF5QixDQUFBO29CQUMxQyxhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO29CQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtvQkFDdEIsSUFBSSxPQUFPLEVBQUU7d0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO3FCQUNYO2lCQUNGO1lBQ0gsQ0FBQztZQUVELDZCQUFLLFNBQVMsRUFBQyxVQUFVLElBQUUsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUMsZ0JBQWdCLEVBQUMsSUFBSSxFQUFDLE9BQU8sRUFBQyxJQUFJLEVBQUUsUUFBUSxHQUFJLENBQU87WUFDekcsS0FBSyxJQUFJLEtBQUssQ0FDSixDQUNkLENBQUE7S0FDRjtJQUVELE9BQU8sQ0FDTCwwREFDaUIsWUFBWSxtQkFDWixRQUFRLG1CQUNSLFVBQVUseUJBQ0wsRUFBRSxFQUN0QixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsT0FBTyxFQUNsQixJQUFJLEVBQUMsS0FBSyxpQkFDRyxNQUFNLElBQ2YsTUFBTSxJQUNWLE9BQU8sRUFBRSxVQUFDLENBQW1CO1lBQzNCLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7Z0JBQzFDLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7Z0JBQzlCLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO2dCQUN0QixJQUFJLE9BQU8sRUFBRTtvQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7aUJBQ1g7YUFDRjtRQUNILENBQUM7UUFFRCw2QkFBSyxTQUFTLEVBQUMsVUFBVSxJQUFFLFFBQVEsSUFBSSxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFDLGdCQUFnQixFQUFDLElBQUksRUFBQyxPQUFPLEVBQUMsSUFBSSxFQUFFLFFBQVEsR0FBSSxDQUFPO1FBQ3pHLEtBQUssSUFBSSxLQUFLLENBQ1IsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxHQUFHLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L3RhYi9UYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQTtBQUV2RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFDSCxJQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMxQixVQUNFLEVBQTRHLEVBQzVHLEdBQUc7SUFERCxJQUFBLE1BQU0sWUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLGtCQUFnQixFQUFoQixVQUFVLG1CQUFHLEdBQUcsS0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLFlBQVksa0JBQUEsRUFBSyxNQUFNLGNBQTFHLDJHQUE0RyxDQUFGO0lBR2xHLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sS0FBc0IsTUFBYSxFQUFqQyxLQUFLLFdBQUEsRUFBSyxLQUFLLGNBQWpCLFNBQW1CLENBQWdCLENBQUE7SUFDbkMsSUFBQSxLQUF5QyxLQUFLLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQyxFQUFwRSxXQUFXLGlCQUFBLEVBQUUsY0FBYyxvQkFBQSxFQUFFLEtBQUssV0FBa0MsQ0FBQTtJQUU1RSxJQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsSUFBSSxJQUFJLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFBO0lBRTVELElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsY0FBTSxPQUFBLFdBQVcsS0FBSyxLQUFLLEVBQXJCLENBQXFCLEVBQUUsQ0FBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtJQUNqRixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUVwRixJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNuQyxVQUFDLENBQW1CO1FBQ2xCLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDYixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFO2dCQUFFLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNyRCxJQUFJLE9BQU87Z0JBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1NBQ3hCO0lBQ0gsQ0FBQyxFQUNELENBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsY0FBYyxDQUFDLENBQzNDLENBQUE7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsSUFBSSxNQUFNO1lBQUUsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ25DLENBQUMsRUFBRSxDQUFDLE1BQU0sRUFBRSxjQUFjLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtJQUVuQyxPQUFPLENBQ0wsb0JBQUMsR0FBRyxhQUNGLEdBQUcsRUFBRSxHQUFHLG1CQUNPLFlBQVksbUJBQ1osUUFBUSxtQkFDUixRQUFRLHlCQUNILEVBQUUsRUFDdEIsUUFBUSxFQUFFLFFBQVEsRUFDbEIsU0FBUyxFQUFFLE9BQU8sRUFDbEIsSUFBSSxFQUFDLEtBQUssaUJBQ0csTUFBTSxnQkFDUCxLQUFLLEVBQ2pCLE9BQU8sRUFBRSxXQUFXLElBQ2hCLEtBQUs7UUFFVCw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxVQUFVLENBQUMsSUFDMUMsUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUUsUUFBUSxHQUFJLENBQ25FO1FBQ0wsS0FBSyxJQUFJLG9CQUFDLElBQUksUUFBRSxLQUFLLENBQVEsQ0FDMUIsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxHQUFHLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxHQUFHLENBQUE7QUFDbkMsZUFBZSxHQUFHLENBQUEifQ==

package/lib/components/tabs/tab-list/tab/Tab.native.d.ts

@@ -0,0 +1,16 @@
+import { TabProps } from '../../../../components/tabs/tab-list/tab/TabProps';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ * @param label {string} Tab content
+ * @param to {string} Link
+ * @param href {string} Link
+ */
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<TouchableOpacity>>;
+export default Tab;

package/lib/components/tabs/tab-list/tab/Tab.native.js

@@ -0,0 +1,68 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../../components/enumsComponentsName';
+import { Icon } from '../../../../components/icon';
+import { TabsContext } from '../../../../components/tabs/context';
+import { Text } from '../../../../components/text';
+import { TypographyAlign } from '../../../../objects';
+import { getColorStyle, TrilogyColor } from '../../../../objects/facets/Color';
+import React from 'react';
+import { Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
+/**
+ * Tabs Item Component
+ * @param active {boolean} active tab item
+ * @param children {ReactChild} React Child Element
+ * @param onClick onClick Event
+ * @param iconName {IconNameValues | IconName} add icon name
+ * @param disabled {boolean} disable tab item
+ * @param label {string} Tab content
+ * @param to {string} Link
+ * @param href {string} Link
+ */
+var Tab = React.forwardRef(function (_a, ref) {
+    var active = _a.active, onClick = _a.onClick, to = _a.to, href = _a.href, iconName = _a.iconName, label = _a.label, disabled = _a.disabled, others = __rest(_a, ["active", "onClick", "to", "href", "iconName", "label", "disabled"]);
+    var _b = others, index = _b.index, props = __rest(_b, ["index"]);
+    var _c = React.useContext(TabsContext), activeIndex = _c.activeIndex, setActiveIndex = _c.setActiveIndex, inverted = _c.inverted, fullwidth = _c.fullwidth;
+    var isActive = React.useMemo(function () { return activeIndex === index; }, [activeIndex, index]);
+    var handleClick = React.useCallback(function (e) {
+        if (!disabled) {
+            if (onClick)
+                onClick(e);
+            if (!to && !href)
+                setActiveIndex(index);
+            if (to || href)
+                Linking.openURL(to || href || '');
+        }
+    }, [disabled, onClick, index, setActiveIndex, to, href]);
+    var styles = StyleSheet.create({
+        tab: {
+            flex: fullwidth ? 1 : undefined,
+            flexBasis: fullwidth ? 0 : undefined,
+            minWidth: fullwidth ? 0 : undefined,
+            paddingVertical: 4,
+            paddingHorizontal: 12,
+            borderBottomWidth: isActive ? 2 : 1,
+            borderBottomColor: getColorStyle(isActive && disabled
+                ? TrilogyColor.DISABLED
+                : isActive && inverted
+                    ? TrilogyColor.BACKGROUND
+                    : isActive
+                        ? TrilogyColor.MAIN
+                        : TrilogyColor.STROKE),
+        },
+        text: {
+            textAlign: 'center',
+            color: getColorStyle(disabled ? TrilogyColor.DISABLED : inverted ? TrilogyColor.BACKGROUND : TrilogyColor.MAIN)
+        },
+    });
+    React.useEffect(function () {
+        if (active)
+            setActiveIndex(index);
+    }, [active, setActiveIndex, index]);
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, activeOpacity: 1, style: styles.tab, onPress: handleClick }, props),
+        iconName && (React.createElement(View, { style: { alignSelf: 'center' } },
+            React.createElement(Icon, { color: disabled ? TrilogyColor.DISABLED : inverted ? TrilogyColor.BACKGROUND : TrilogyColor.MAIN, size: 'small', name: iconName }))),
+        React.createElement(Text, { style: styles.text, typo: fullwidth ? [TypographyAlign.TEXT_CENTERED] : undefined, numberOfLines: fullwidth ? 1 : undefined }, label && label)));
+});
+Tab.displayName = ComponentName.Tab;
+export default Tab;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItbGlzdC90YWIvVGFiLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBRXZELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzNDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBeUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFakc7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzFCLFVBQUMsRUFBbUUsRUFBRSxHQUFHO0lBQXRFLElBQUEsTUFBTSxZQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUFqRSxvRUFBbUUsQ0FBRjtJQUNoRSxJQUFNLEtBQXNCLE1BQWEsRUFBakMsS0FBSyxXQUFBLEVBQUssS0FBSyxjQUFqQixTQUFtQixDQUFnQixDQUFBO0lBQ25DLElBQUEsS0FBdUQsS0FBSyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsRUFBbEYsV0FBVyxpQkFBQSxFQUFFLGNBQWMsb0JBQUEsRUFBRSxRQUFR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

package/lib/components/tabs/tab-list/tab/TabProps.d.ts

@@ -2,6 +2,7 @@
 import { IconName, IconNameValues } from '../../../../components/icon';
 import { Accessibility, Clickable, Dev } from '../../../../objects';
 import { CommonProps } from '../../../../objects/facets/CommonProps';
+import { TouchableOpacity } from 'react-native';
 /**
  * Tabs Item Interface
  */
@@ -15,3 +16,5 @@ export interface TabProps extends Clickable, Accessibility, Dev, CommonProps {
     disabled?: boolean;
     ariaControls?: string;
 }
+export type TabRef = HTMLElement | HTMLButtonElement | HTMLLinkElement;
+export type TabNativeRef = TouchableOpacity;

package/lib/components/tabs/tab-list/tab/TabPropsDefaults.js

@@ -27,8 +27,17 @@ export default {
       "undefined",
       "symbol",
       "object",
+      "p",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
       "text",
       "search",
+      "button",
+      "image",
+      "time",
       "a",
       "abbr",
       "address",
@@ -44,7 +53,6 @@ export default {
       "blockquote",
       "body",
       "br",
-      "button",
       "canvas",
       "caption",
       "center",
@@ -70,11 +78,6 @@ export default {
       "footer",
       "form",
       "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
       "head",
       "header",
       "hgroup",
@@ -105,7 +108,6 @@ export default {
       "optgroup",
       "option",
       "output",
-      "p",
       "param",
       "picture",
       "pre",
@@ -136,7 +138,6 @@ export default {
       "tfoot",
       "th",
       "thead",
-      "time",
       "title",
       "tr",
       "track",
@@ -183,7 +184,6 @@ export default {
       "filter",
       "foreignObject",
       "g",
-      "image",
       "line",
       "linearGradient",
       "marker",
@@ -216,13 +216,17 @@ export default {
       "tri-arrow-left",
       "tri-arrow-right",
       "tri-arrow-up",
+      "tri-arrow-high",
       "tri-bell",
+      "tri-calendar",
       "tri-check-circle",
       "tri-check",
       "tri-exclamation-circle",
       "tri-eye-slash",
       "tri-eye",
+      "tri-file-attached",
       "tri-infos-circle",
+      "tri-micro",
       "tri-search",
       "tri-times",
       "tri-trash",
@@ -234,18 +238,23 @@ export default {
       "tri-picto-payment-mastercard",
       "tri-picto-payment-paypal",
       "tri-picto-payment-visa",
+      "tri-paperclip",
       "tri-alert",
       "tri-arrow-down",
       "tri-arrow-left",
       "tri-arrow-right",
       "tri-arrow-up",
+      "tri-arrow-high",
       "tri-bell",
+      "tri-calendar",
       "tri-check-circle",
       "tri-check",
       "tri-exclamation-circle",
       "tri-eye-slash",
       "tri-eye",
+      "tri-file-attached",
       "tri-infos-circle",
+      "tri-micro",
       "tri-search",
       "tri-times",
       "tri-trash",
@@ -256,7 +265,8 @@ export default {
       "tri-picto-payment-cb",
       "tri-picto-payment-mastercard",
       "tri-picto-payment-paypal",
-      "tri-picto-payment-visa"
+      "tri-picto-payment-visa",
+      "tri-paperclip"
     ]
   },
   "label": {

package/lib/components/tabs/tab-panels/TabPanels.d.ts

@@ -1,5 +1,5 @@
+import { TabPanelsProps } from '../../../components/tabs/tab-panels/TabPanelsProps';
 import React from 'react';
-import { TabPanelsProps } from './TabPanelsProps';
 /**
  * Tabs Nav Component
  * @param children {ReactChild} React Child Element
@@ -8,5 +8,5 @@ import { TabPanelsProps } from './TabPanelsProps';
  * @param testId
  * @param others
  */
-declare const TabPanels: ({ children, className, id, testId, ...others }: TabPanelsProps) => React.JSX.Element;
+declare const TabPanels: React.ForwardRefExoticComponent<TabPanelsProps & React.RefAttributes<HTMLDivElement>>;
 export default TabPanels;

package/lib/components/tabs/tab-panels/TabPanels.js

@@ -1,8 +1,10 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
-import { hashClass } from '../../../helpers';
-import clsx from 'clsx';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import TabPanel from '../../../components/tabs/tab-panels/tab-panel';
 import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * Tabs Nav Component
  * @param children {ReactChild} React Child Element
@@ -11,11 +13,16 @@ import { useTrilogyContext } from '../../../context';
  * @param testId
  * @param others
  */
-var TabPanels = function (_a) {
+var TabPanels = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, id = _a.id, testId = _a.testId, others = __rest(_a, ["children", "className", "id", "testId"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx('tab-panels', className));
-    return (React.createElement("div", __assign({ id: id, "data-testid": testId, className: classes }, others), children));
-};
+    return (React.createElement("div", __assign({ ref: ref, id: id, "data-testid": testId, className: classes }, others), React.Children.map(children, function (child, index) {
+        if (!React.isValidElement(child))
+            return false;
+        return React.createElement(TabPanel, __assign({}, child.props, { index: index }));
+    })));
+});
+TabPanels.displayName = ComponentName.TabPanels;
 export default TabPanels;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1wYW5lbHMvVGFiUGFuZWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsVUFBQyxFQUE4RDtJQUE1RCxJQUFBLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBNUMseUNBQThDLENBQUY7SUFDckQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFaEUsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLGlCQUFlLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDN0QsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1wYW5lbHMvVGFiUGFuZWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sUUFBUSxNQUFNLHdDQUF3QyxDQUFBO0FBRTdELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBK0IsVUFBQyxFQUE4QyxFQUFFLEdBQUc7SUFBakQsSUFBQSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQTVDLHlDQUE4QyxDQUFGO0lBQ3BHLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWhFLE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLGlCQUFlLE1BQU0sRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDdkUsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSyxFQUFFLEtBQUs7UUFDekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxLQUFLLENBQUE7UUFDOUMsT0FBTyxvQkFBQyxRQUFRLGVBQUssS0FBSyxDQUFDLEtBQUssSUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUE7SUFDcEQsQ0FBQyxDQUFDLENBQ0UsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFDL0MsZUFBZSxTQUFTLENBQUEifQ==

package/lib/components/tabs/tab-panels/TabPanels.native.d.ts

@@ -0,0 +1,13 @@
+import { TabPanelsProps } from '../../../components/tabs/tab-panels/TabPanelsProps';
+import React from 'react';
+import { View } from 'react-native';
+/**
+ * Tabs Nav Component
+ * @param children {ReactChild} React Child Element
+ * @param className
+ * @param id
+ * @param testId
+ * @param others
+ */
+declare const TabPanels: React.ForwardRefExoticComponent<TabPanelsProps & React.RefAttributes<View>>;
+export default TabPanels;

package/lib/components/tabs/tab-panels/TabPanels.native.js

@@ -0,0 +1,33 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { TabsContext } from '../../../components/tabs/context';
+import TabPanel from '../../../components/tabs/tab-panels/tab-panel';
+import { getColorStyle, TrilogyColor } from '../../../objects';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+/**
+ * Tabs Nav Component
+ * @param children {ReactChild} React Child Element
+ * @param className
+ * @param id
+ * @param testId
+ * @param others
+ */
+var TabPanels = React.forwardRef(function (_a, ref) {
+    var children = _a.children, others = __rest(_a, ["children"]);
+    var inverted = React.useContext(TabsContext).inverted;
+    var styles = StyleSheet.create({
+        tabPanels: {
+            paddingVertical: 8,
+            backgroundColor: getColorStyle(inverted ? TrilogyColor.MAIN : 'transparent'),
+        },
+    });
+    return (React.createElement(View, __assign({ ref: ref, style: styles.tabPanels }, others), React.Children.map(children, function (child, index) {
+        if (!React.isValidElement(child))
+            return false;
+        return React.createElement(TabPanel, __assign({}, child.props, { index: index }));
+    })));
+});
+TabPanels.displayName = ComponentName.TabPanels;
+export default TabPanels;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiUGFuZWxzLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvdGFicy90YWItcGFuZWxzL1RhYlBhbmVscy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBQ3ZELE9BQU8sUUFBUSxNQUFNLHdDQUF3QyxDQUFBO0FBRTdELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3ZELE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUUvQzs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBcUMsVUFBQyxFQUF1QixFQUFFLEdBQUc7SUFBMUIsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDbkYsSUFBQSxRQUFRLEdBQUssS0FBSyxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsU0FBbEMsQ0FBa0M7SUFFbEQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxlQUFlLEVBQUUsQ0FBQztZQUNsQixlQUFlLEVBQUUsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDO1NBQzdFO0tBQ0YsQ0FBQyxDQUFBO0lBQ0YsT0FBTyxDQUNMLG9CQUFDLElBQUksYUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsU0FBUyxJQUFNLE1BQU0sR0FDaEQsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLFVBQUMsS0FBSyxFQUFFLEtBQUs7UUFDekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxLQUFLLENBQUE7UUFDOUMsT0FBTyxvQkFBQyxRQUFRLGVBQUssS0FBSyxDQUFDLEtBQUssSUFBRSxLQUFLLEVBQUUsS0FBSyxJQUFJLENBQUE7SUFDcEQsQ0FBQyxDQUFDLENBQ0csQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFDL0MsZUFBZSxTQUFTLENBQUEifQ==

package/lib/components/tabs/tab-panels/TabPanelsProps.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
 import { Dev } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { View } from 'react-native';
 /**
  * Tabs Item Interface
  */
 export interface TabPanelsProps extends Dev, CommonProps {
     children: React.ReactNode;
 }
+export type TabPanelsRef = HTMLDivElement;
+export type TabPanelsNativeRef = View;

package/lib/components/tabs/tab-panels/tab-panel/TabPanel.d.ts

@@ -1,5 +1,5 @@
+import { TabPanelProps } from '../../../../components/tabs/tab-panels/tab-panel/TabPanelProps';
 import React from 'react';
-import { TabPanelProps } from './TabPanelProps';
 /**
  * Tab Panel Component
  * @param children {ReactChild} React Child Element
@@ -7,5 +7,5 @@ import { TabPanelProps } from './TabPanelProps';
  * @param testId
  * @param others
  */
-declare const TabPanel: ({ children, className, testId, ...others }: TabPanelProps) => React.JSX.Element;
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TabPanel;