@trilogy-ds/react 0.0.5-beta-v4 → 0.0.5-esm-cjs

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

@@ -1,3 +1,454 @@
-import TabList from './TabList';
-export default TabList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3RhYnMvdGFiLWxpc3QvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sV0FBVyxDQUFBO0FBRS9CLGVBQWUsT0FBTyxDQUFBIn0=
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/tabs/tab-list/index.ts
+var tab_list_exports = {};
+__export(tab_list_exports, {
+  default: () => tab_list_default
+});
+module.exports = __toCommonJS(tab_list_exports);
+
+// context/index.tsx
+var React = __toESM(require("react"));
+var TrilogyContext = React.createContext({
+  styled: false,
+  setStyled: () => void 0
+});
+var useTrilogyContext = () => {
+  const context = React.useContext(TrilogyContext);
+  if (context === void 0) {
+    throw new Error("useTrilogyContext must be used within a TrilogyProvider");
+  }
+  return context;
+};
+
+// helpers/hashClassesHelpers/index.tsx
+var hashClass = (addHash = false, classes) => {
+  const { hash, styled } = useTrilogyContext();
+  if (classes.trim().length < 1) return "";
+  if (styled) {
+    return classes.split(" ").map((classe) => classe = `${classe}_${hash}`).join(" ");
+  }
+  return classes;
+};
+
+// helpers/device/index.ts
+var Device = /* @__PURE__ */ ((Device2) => {
+  Device2["Browser"] = "browser";
+  Device2["Server"] = "server";
+  Device2["Native"] = "native";
+  return Device2;
+})(Device || {});
+var { Browser, Server, Native } = Device;
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var canUseNative = typeof navigator != "undefined" && navigator.product == "ReactNative";
+var device = canUseNative ? Native : canUseDOM ? Browser : Server;
+var SSRObjectDefined = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  isNative: device === Native,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+var assign = (...args) => Object.assign({}, ...args);
+var values = (obj) => Object.values(obj);
+var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
+var SSRObject = toArrayObject();
+
+// context/providerTheme/index.tsx
+var import_react = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react.default.createContext(defaultContextValue);
+
+// objects/facets/Color/index.tsx
+var import_react2 = require("react");
+var colors = {
+  ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
+  ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
+  ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
+  ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
+  ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
+  ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
+  ["SUCCESS_FADE" /* SUCCESS_FADE */]: ["#cae8ca", "success-fade", "white"],
+  ["INFO" /* INFO */]: ["#1A688A", "info", "white"],
+  ["INFO_FADE" /* INFO_FADE */]: ["#c8dbec", "info-fade", "white"],
+  ["WARNING" /* WARNING */]: ["#FFBB33", "warning", "white"],
+  ["WARNING_FADE" /* WARNING_FADE */]: ["#ecdbc6", "warning-fade", "white"],
+  ["ERROR" /* ERROR */]: ["#D42D02", "error", "white"],
+  ["ERROR_FADE" /* ERROR_FADE */]: ["#eecccc", "error-fade", "white"],
+  ["DISABLED" /* DISABLED */]: ["#646464", "disabled", "white"],
+  ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
+  ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
+  ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+};
+var getColorClassName = (trilogyColor) => {
+  const color = colors[trilogyColor];
+  return color[1];
+};
+
+// objects/atoms/Background/index.ts
+var getBackgroundClassName = (backgroundType) => {
+  return `background-${getColorClassName(backgroundType)}`;
+};
+
+// objects/facets/Justifiable/index.ts
+var getJustifySelfClassName = (justifyContent) => {
+  switch (justifyContent) {
+    case "ALIGNED_CENTER":
+      return "justified-self-center";
+    case "ALIGNED_START":
+      return "justified-self-start";
+    case "ALIGNED_END":
+      return "justified-selfend";
+    default:
+      return "justified-selfstart";
+  }
+};
+
+// services/classify/index.ts
+function classify(prefix) {
+  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
+}
+var is = classify("is");
+var has = classify("has");
+
+// components/icon/Icon.tsx
+var import_clsx = __toESM(require("clsx"));
+var React3 = __toESM(require("react"));
+var Icon = React3.forwardRef(
+  ({ className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, align, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const background = backgroundColor && has(getBackgroundClassName(backgroundColor)) || circled && has(getBackgroundClassName("MAIN" /* MAIN */)) || "";
+    const classes = hashClass(
+      styled,
+      (0, import_clsx.default)(
+        "icon",
+        stretched && is("stretched"),
+        size && is(size),
+        circled && is("circled"),
+        circled && !color && has("text-white"),
+        color && is(`${getColorClassName(color)}`),
+        skeleton && is("loading"),
+        align && (0, import_clsx.default)(is("flex"), is(getJustifySelfClassName(align))),
+        background,
+        className
+      )
+    );
+    return /* @__PURE__ */ React3.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React3.createElement("i", { className: hashClass(styled, (0, import_clsx.default)(name)), "aria-hidden": "true" }));
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+var Icon_default = Icon;
+
+// components/tabs/context/index.tsx
+var import_react3 = __toESM(require("react"));
+var TabsContext = import_react3.default.createContext({
+  activeIndex: 0,
+  inverted: false,
+  setActiveIndex: () => 0,
+  setInverted: () => false,
+  small: false
+});
+
+// components/text/Text.tsx
+var React5 = __toESM(require("react"));
+var import_clsx2 = __toESM(require("clsx"));
+
+// components/text/TextEnum.ts
+var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
+  TextMarkup2["P"] = "p";
+  TextMarkup2["SPAN"] = "span";
+  return TextMarkup2;
+})(TextMarkup || {});
+
+// components/text/Text.tsx
+var Text = React5.forwardRef(({
+  level,
+  markup,
+  children,
+  className,
+  id,
+  typo,
+  inverted,
+  skeleton,
+  accessibilityLabel,
+  marginless,
+  numberOfLines,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  const levelText = () => {
+    if (level) {
+      switch (level) {
+        case 1 /* ONE */:
+          return is("level-1");
+        case 2 /* TWO */:
+          return is("level-2");
+        case 3 /* THREE */:
+          return is("level-3");
+        case 4 /* FOUR */:
+          return is("level-4");
+        default:
+          return is(`level-${level}`);
+      }
+    }
+  };
+  const classes = hashClass(
+    styled,
+    (0, import_clsx2.default)(
+      "text",
+      level && levelText(),
+      inverted && is("inverted"),
+      typo,
+      skeleton && is("loading"),
+      marginless && is("marginless"),
+      numberOfLines && is("text-ellipsis"),
+      className
+    )
+  );
+  const isCorrectMarkup = (stringMarkup) => {
+    if (stringMarkup in TextMarkup || Object.values(TextMarkup).includes(stringMarkup)) return true;
+  };
+  const Tag = markup && isCorrectMarkup(markup) ? markup : "p";
+  return /* @__PURE__ */ React5.createElement(
+    Tag,
+    {
+      ref,
+      id,
+      style: numberOfLines ? { WebkitLineClamp: numberOfLines } : {},
+      "aria-label": accessibilityLabel,
+      className: classes,
+      ...others
+    },
+    children
+  );
+});
+Text.displayName = "Text" /* Text */;
+var Text_default = Text;
+
+// components/tabs/tab-list/tab/Tab.tsx
+var import_clsx3 = __toESM(require("clsx"));
+var import_react4 = __toESM(require("react"));
+var Tab = import_react4.default.forwardRef(
+  ({ active, className, onClick, routerLink = "a", iconName, label, disabled, testId, ariaControls, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const { index, ...props } = others;
+    const { activeIndex, setActiveIndex, small } = import_react4.default.useContext(TabsContext);
+    const Tag = others.href || others.to ? routerLink : "button";
+    const isActive = import_react4.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const classes = hashClass(styled, (0, import_clsx3.default)("tab", className, { "is-active": isActive }));
+    const handleClick = import_react4.default.useCallback(
+      (e) => {
+        if (!disabled) {
+          if (!others.href && !others.to) setActiveIndex(index);
+          if (onClick) onClick(e);
+        }
+      },
+      [disabled, onClick, index, setActiveIndex]
+    );
+    import_react4.default.useEffect(() => {
+      if (active) setActiveIndex(index);
+    }, [active, setActiveIndex, index]);
+    return /* @__PURE__ */ import_react4.default.createElement(
+      Tag,
+      {
+        ref,
+        "aria-controls": ariaControls,
+        "aria-disabled": disabled,
+        "aria-selected": isActive,
+        "data-tab-navigation": "",
+        disabled,
+        className: classes,
+        role: "tab",
+        "data-testid": testId,
+        "data-index": index,
+        onClick: handleClick,
+        ...props
+      },
+      /* @__PURE__ */ import_react4.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react4.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
+      label && /* @__PURE__ */ import_react4.default.createElement(Text_default, null, label)
+    );
+  }
+);
+Tab.displayName = "Tab" /* Tab */;
+var Tab_default = Tab;
+
+// objects/facets/Alignable/index.ts
+var getAlignClassName = (alignType) => {
+  switch (alignType) {
+    case "ALIGNED_CENTER":
+      return "aligned-center";
+    case "CENTER":
+      return "aligned-center";
+    case "ALIGNED_START":
+      return "aligned-start";
+    case "START":
+      return "aligned-start";
+    case "ALIGNED_END":
+      return "aligned-end";
+    case "END":
+      return "aligned-end";
+    case "STRETCH":
+      return "aligned-stretch";
+    default:
+      return "aligned-start";
+  }
+};
+
+// components/tabs/tab-list/TabList.tsx
+var import_clsx4 = __toESM(require("clsx"));
+var import_react5 = __toESM(require("react"));
+var TabList = import_react5.default.forwardRef(
+  ({ children, className, id, testId, align, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const TabListRef = import_react5.default.useRef(null);
+    const tabRefs = import_react5.default.useRef([]);
+    const { small } = import_react5.default.useContext(TabsContext);
+    import_react5.default.useImperativeHandle(ref, () => TabListRef.current);
+    const [tabsWidth, setTabsWidth] = import_react5.default.useState(0);
+    const [tabListWidth, setTabListWidth] = import_react5.default.useState(0);
+    const [scrollLeft, setScrollLeft] = import_react5.default.useState(0);
+    const [tabFocused, setTabFocused] = import_react5.default.useState(0);
+    const classes = hashClass(styled, (0, import_clsx4.default)("tab-list", align && is(getAlignClassName(align)), className));
+    const isVisibleArrowLeft = (0, import_react5.useMemo)(() => {
+      if (!tabRefs.current.length) return false;
+      return scrollLeft > tabRefs.current[0].width / 2;
+    }, [tabRefs, scrollLeft]);
+    const isVisibleArrowRight = (0, import_react5.useMemo)(
+      () => tabListWidth - tabsWidth - scrollLeft > 5,
+      [tabListWidth, tabsWidth, scrollLeft]
+    );
+    const TabElms = import_react5.default.useMemo(() => {
+      return import_react5.default.Children.map(children, (child, index) => {
+        if (!import_react5.default.isValidElement(child)) return false;
+        return /* @__PURE__ */ import_react5.default.createElement(
+          Tab_default,
+          {
+            ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
+            index,
+            ...child.props
+          }
+        );
+      });
+    }, [children, tabRefs]);
+    const scrollWithArrow = import_react5.default.useCallback(
+      (direction) => {
+        var _a;
+        if (tabRefs.current) {
+          const firstGap = tabRefs.current[0].x;
+          const nextTab = tabFocused + direction;
+          const nextPosition = tabRefs.current[nextTab === -1 ? 0 : nextTab];
+          nextPosition && ((_a = TabListRef.current) == null ? void 0 : _a.scrollTo({ left: nextPosition.x - firstGap, behavior: "smooth" }));
+        }
+      },
+      [tabRefs.current, tabFocused, TabListRef]
+    );
+    const handleScrollList = import_react5.default.useCallback(
+      (e) => {
+        const target = e.target;
+        const firstGap = tabRefs.current[0].x + (small ? 16 : 24);
+        const scrollPosition = tabRefs.current.findIndex((tab) => {
+          return target.scrollLeft >= tab.left - firstGap && target.scrollLeft <= tab.right - firstGap;
+        });
+        setTabFocused(scrollPosition);
+        setScrollLeft(target.scrollLeft);
+      },
+      [tabRefs, small]
+    );
+    const onClickPrev = import_react5.default.useCallback(() => {
+      isVisibleArrowLeft && scrollWithArrow(-1);
+    }, [scrollWithArrow, isVisibleArrowLeft]);
+    const onClickNext = import_react5.default.useCallback(() => {
+      isVisibleArrowRight && scrollWithArrow(1);
+    }, [scrollWithArrow, isVisibleArrowRight]);
+    const setWidths = import_react5.default.useCallback(() => {
+      if (TabListRef.current) {
+        setTabsWidth(TabListRef.current.clientWidth);
+        setTabListWidth(TabListRef.current.scrollWidth);
+      }
+    }, [TabListRef]);
+    import_react5.default.useEffect(() => {
+      setWidths();
+    }, [setWidths, isVisibleArrowLeft, isVisibleArrowRight]);
+    import_react5.default.useEffect(() => {
+      window.addEventListener("resize", setWidths);
+      return () => window.removeEventListener("resize", setWidths);
+    }, [TabListRef, setWidths]);
+    return /* @__PURE__ */ import_react5.default.createElement(
+      "div",
+      {
+        ref: TabListRef,
+        id,
+        "data-testid": testId,
+        "data-tablist": "",
+        className: classes,
+        onScroll: handleScrollList,
+        ...others
+      },
+      isVisibleArrowLeft && /* @__PURE__ */ import_react5.default.createElement(
+        Icon_default,
+        {
+          "data-arrow-prev": "",
+          name: "tri-arrow-left",
+          className: (0, import_clsx4.default)("arrow-prev"),
+          size: small ? "small" : "medium",
+          onClick: onClickPrev
+        }
+      ),
+      TabElms,
+      isVisibleArrowRight && /* @__PURE__ */ import_react5.default.createElement(
+        Icon_default,
+        {
+          "data-arrow-next": "",
+          name: "tri-arrow-right",
+          className: (0, import_clsx4.default)("arrow-next"),
+          size: small ? "small" : "medium",
+          onClick: onClickNext
+        }
+      )
+    );
+  }
+);
+TabList.displayName = "TabList" /* TabList */;
+var TabList_default = TabList;
+
+// components/tabs/tab-list/index.ts
+var tab_list_default = TabList_default;

package/lib/components/tabs/tab-list/index.mjs

@@ -0,0 +1,34 @@
+import {
+  TabList_default
+} from "../../../chunk-FJ6FV33O.mjs";
+import "../../../chunk-KE6TZ564.mjs";
+import "../../../chunk-UQU7MIEB.mjs";
+import "../../../chunk-OAHEDO2N.mjs";
+import "../../../chunk-5VIOTCFL.mjs";
+import "../../../chunk-ZIO62QCN.mjs";
+import "../../../chunk-LCCPZVJA.mjs";
+import "../../../chunk-CERCYDMJ.mjs";
+import "../../../chunk-KWQHZ3AX.mjs";
+import "../../../chunk-B52A3BFQ.mjs";
+import "../../../chunk-RBMXTQBU.mjs";
+import "../../../chunk-CNJHYNT2.mjs";
+import "../../../chunk-EJ2APB7I.mjs";
+import "../../../chunk-SEWWK5HV.mjs";
+import "../../../chunk-U3F6V3KT.mjs";
+import "../../../chunk-OADZ62IM.mjs";
+import "../../../chunk-37LDCDVM.mjs";
+import "../../../chunk-UDTBRLJ5.mjs";
+import "../../../chunk-G75SYF2U.mjs";
+import "../../../chunk-HLQ4FCCM.mjs";
+import "../../../chunk-XFWJ47MX.mjs";
+import "../../../chunk-YZRO54LX.mjs";
+import "../../../chunk-4YIM7SBN.mjs";
+import "../../../chunk-EJOKG5F4.mjs";
+import "../../../chunk-5VN6OIEF.mjs";
+import "../../../chunk-OQRDRRQA.mjs";
+
+// components/tabs/tab-list/index.ts
+var tab_list_default = TabList_default;
+export {
+  tab_list_default as default
+};

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

@@ -0,0 +1,3 @@
+import TabList from './TabList.native';
+export default TabList;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L2luZGV4Lm5hdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE9BQU8sTUFBTSxrQkFBa0IsQ0FBQTtBQUV0QyxlQUFlLE9BQU8sQ0FBQSJ9

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

@@ -0,0 +1,19 @@
+import { TabProps, TabRef } from '../../../../components/tabs/tab-list/tab/TabProps';
+import React from 'react';
+/**
+ * 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} <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: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<TabRef>>;
+export default Tab;

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,11 @@
-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 { 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 +13,37 @@ 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 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));
-};
+const Tab = React.forwardRef(({ active, className, onClick, routerLink = 'a', iconName, label, disabled, testId, ariaControls, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const { index, ...props } = others;
+    const { activeIndex, setActiveIndex, small } = React.useContext(TabsContext);
+    const Tag = others.href || others.to ? routerLink : 'button';
+    const isActive = React.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const classes = hashClass(styled, clsx('tab', className, { 'is-active': isActive }));
+    const handleClick = React.useCallback((e) => {
+        if (!disabled) {
+            if (!others.href && !others.to)
+                setActiveIndex(index);
+            if (onClick)
+                onClick(e);
+        }
+    }, [disabled, onClick, index, setActiveIndex]);
+    React.useEffect(() => {
+        if (active)
+            setActiveIndex(index);
+    }, [active, setActiveIndex, index]);
+    return (React.createElement(Tag, { 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy90YWJzL3RhYi1saXN0L3RhYi9UYWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFBO0FBRXZELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzFCLENBQ0UsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxVQUFVLEdBQUcsR0FBRyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsR0FBRyxNQUFNLEVBQUUsRUFDNUcsR0FBRyxFQUNILEVBQUU7SUFDRixNQUFNLEVBQUUsTUFBTSxFQUFFLEdBQUcsaUJBQWlCLEVBQUUsQ0FBQTtJQUN0QyxNQUFNLEVBQUUsS0FBSyxFQUFFLEdBQUcsS0FBSyxFQUFFLEdBQUcsTUFBYSxDQUFBO0lBQ3pDLE1BQU0sRUFBRSxXQUFXLEVBQUUsY0FBYyxFQUFFLEtBQUssRUFBRSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLENBQUE7SUFFNUUsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLElBQUksSUFBSSxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQTtJQUU1RCxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDLFdBQVcsS0FBSyxLQUFLLEVBQUUsQ0FBQyxXQUFXLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtJQUNqRixNQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUVwRixNQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNuQyxDQUFDLENBQW1CLEVBQUUsRUFBRTtRQUN0QixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDZCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFO2dCQUFFLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUNyRCxJQUFJLE9BQU87Z0JBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3pCLENBQUM7SUFDSCxDQUFDLEVBQ0QsQ0FBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxjQUFjLENBQUMsQ0FDM0MsQ0FBQTtJQUVELEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLElBQUksTUFBTTtZQUFFLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNuQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLEVBQUUsY0FBYyxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUE7SUFFbkMsT0FBTyxDQUNMLG9CQUFDLEdBQUcsSUFDRixHQUFHLEVBQUUsR0FBRyxtQkFDTyxZQUFZLG1CQUNaLFFBQVEsbUJBQ1IsUUFBUSx5QkFDSCxFQUFFLEVBQ3RCLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLElBQUksRUFBQyxLQUFLLGlCQUNHLE1BQU0sZ0JBQ1AsS0FBSyxFQUNqQixPQUFPLEVBQUUsV0FBVyxLQUNoQixLQUFLO1FBRVQsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsVUFBVSxDQUFDLElBQzFDLFFBQVEsSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxRQUFRLEVBQUUsSUFBSSxFQUFFLFFBQVEsR0FBSSxDQUNuRTtRQUNMLEtBQUssSUFBSSxvQkFBQyxJQUFJLFFBQUUsS0FBSyxDQUFRLENBQzFCLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsR0FBRyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsR0FBRyxDQUFBO0FBQ25DLGVBQWUsR0FBRyxDQUFBIn0=