npm - @frontify/fondue - Versions diffs - 12.0.0-beta.243 → 12.0.0-beta.244 - Mend

@frontify/fondue 12.0.0-beta.243 → 12.0.0-beta.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/components/ScrollWrapper/ScrollWrapper.d.ts +1 -1
package/dist/components/ScrollWrapper/ScrollWrapper.es.js +20 -19
package/dist/components/ScrollWrapper/ScrollWrapper.es.js.map +1 -1
package/dist/components/ScrollWrapper/types.d.ts +1 -0
package/dist/components/ScrollWrapper/types.es.js.map +1 -1
package/dist/components/Tabs/Tabs.d.ts +2 -0
package/dist/components/Tabs/Tabs.es.js +70 -68
package/dist/components/Tabs/Tabs.es.js.map +1 -1
package/dist/index.cjs.js +2 -2
package/dist/index.cjs.js.map +1 -1
package/dist/index.umd.js +2 -2
package/dist/index.umd.js.map +1 -1
package/dist/styles.css +1 -1
package/package.json +1 -1

package/dist/components/ScrollWrapper/ScrollWrapper.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { ScrollWrapperProps } from './types';
 export declare const ScrollWrapper: {
-    ({ direction, children, "data-test-id": dataTestId, }: ScrollWrapperProps): ReactElement;
+    ({ tabIndex, direction, children, "data-test-id": dataTestId, }: ScrollWrapperProps): ReactElement;
     displayName: string;
 };

package/dist/components/ScrollWrapper/ScrollWrapper.es.js CHANGED Viewed

@@ -1,20 +1,21 @@
 import { useFocusRing as b } from "@react-aria/focus";
-import e, { useRef as u } from "react";
+import e, { useRef as f } from "react";
 import "../../styles.css.es.js";
-import { useScrollWrapper as f } from "./hooks/useScrollWrapper.es.js";
-import { ScrollWrapperDirection as o, scrollWrapperDirections as g } from "./types.es.js";
-import { merge as h } from "../../utilities/merge.es.js";
-import { FOCUS_STYLE as E } from "../../utilities/focusStyle.es.js";
+import { useScrollWrapper as g } from "./hooks/useScrollWrapper.es.js";
+import { ScrollWrapperDirection as o, scrollWrapperDirections as h } from "./types.es.js";
+import { merge as E } from "../../utilities/merge.es.js";
+import { FOCUS_STYLE as x } from "../../utilities/focusStyle.es.js";
 const i = {
   bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
   top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
-}, x = ({
+}, S = ({
+  tabIndex: n = 0,
   direction: r = o.Vertical,
-  children: n,
-  "data-test-id": c = "scroll-wrapper"
+  children: c,
+  "data-test-id": s = "scroll-wrapper"
 }) => {
-  const t = u(null), [{ showTopShadow: s, showBottomShadow: w }, d] = f(t), { isFocusVisible: m, focusProps: p } = b(), l = r === o.Vertical || r === o.Both, a = t.current ? t.current.clientWidth + 8 : "100%";
-  return /* @__PURE__ */ e.createElement("div", { "data-test-id": c, className: "tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0" }, l && s && /* @__PURE__ */ e.createElement(
+  const t = f(null), [{ showTopShadow: w, showBottomShadow: m }, d] = g(t), { isFocusVisible: p, focusProps: u } = b(), l = r === o.Vertical || r === o.Both, a = t.current ? t.current.clientWidth + 8 : "100%";
+  return /* @__PURE__ */ e.createElement("div", { "data-test-id": s, className: "tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0" }, l && w && /* @__PURE__ */ e.createElement(
     "div",
     {
       className: "tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line",
@@ -27,19 +28,19 @@ const i = {
     "div",
     {
       ref: t,
-      tabIndex: 0,
+      tabIndex: n,
       role: "region",
       "aria-label": "Scrollable dialogue content",
-      className: h([
-        g[r],
+      className: E([
+        h[r],
         "tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2",
-        m && E
+        p && x
       ]),
       ...d,
-      ...p
+      ...u
     },
-    n
-  ), l && w && /* @__PURE__ */ e.createElement(
+    c
+  ), l && m && /* @__PURE__ */ e.createElement(
     "div",
     {
       className: "tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line",
@@ -50,8 +51,8 @@ const i = {
     }
   ));
 };
-x.displayName = "FondueScrollWrapper";
+S.displayName = "FondueScrollWrapper";
 export {
-  x as ScrollWrapper
+  S as ScrollWrapper
 };
 //# sourceMappingURL=ScrollWrapper.es.js.map

package/dist/components/ScrollWrapper/ScrollWrapper.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { ReactElement, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper = ({\n direction = ScrollWrapperDirection.Vertical,\n children,\n 'data-test-id': dataTestId = 'scroll-wrapper',\n}: ScrollWrapperProps): ReactElement => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div data-test-id={dataTestId} className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\">\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","direction","ScrollWrapperDirection","children","dataTestId","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,IAAgB,CAAC;AAAA,EAC1B,WAAAC,IAAYC,EAAuB;AAAA,EACnC,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAwC;AAC9B,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFb,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFa,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAEhG,yCACK,OAAI,EAAA,gBAAcD,GAAY,WAAU,oEAAA,GACpCU,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,~~YAAYjB~~,EAAU;AAAA,QACtB,~~OAAOgB~~;AAAA,MACX;AAAA,IAAA;AAAA,EAGR,GAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MAEL,~~UAAU~~;AAAA,~~MACV~~,MAAK;AAAA,MACL,cAAW;AAAA,MACX,~~WAAWY~~,EAAM;AAAA,QACbC,EAAwBjB,CAAS;AAAA,QACjC;AAAA,QACAU,KAAkBQ;AAAA,MAAA,CACrB;AAAA,MACA,GAAGV;AAAA,MACH,GAAGG;AAAA,IAAA;AAAA,IAEHT;AAAA,EAAA,GAEJW,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,~~YAAYjB~~,EAAU;AAAA,QACtB,~~OAAOgB~~;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,CAGZ;AAER;~~AACAf~~,EAAc,cAAc;"}
1	+ {"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { ReactElement, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper = ({\n tabIndex = 0,\n direction = ScrollWrapperDirection.Vertical,\n children,\n 'data-test-id': dataTestId = 'scroll-wrapper',\n}: ScrollWrapperProps): ReactElement => {\n const scrollingContainer = useRef<HTMLDivElement>(null);\n\n const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const directionVertical =\n direction === ScrollWrapperDirection.Vertical \|\| direction === ScrollWrapperDirection.Both;\n\n const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n return (\n <div data-test-id={dataTestId} className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\">\n {directionVertical && showTopShadow && (\n <div\n className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n style={{\n background: GRADIENTS.top,\n width: gradientWidth,\n }}\n />\n )}\n <div\n ref={scrollingContainer}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={tabIndex}\n role=\"region\"\n aria-label=\"Scrollable dialogue content\"\n className={merge([\n scrollWrapperDirections[direction],\n 'tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2',\n isFocusVisible && FOCUS_STYLE,\n ])}\n {...scrollDivProps}\n {...focusProps}\n >\n {children}\n </div>\n {directionVertical && showBottomShadow && (\n <div\n className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n style={{\n background: GRADIENTS.bottom,\n width: gradientWidth,\n }}\n />\n )}\n </div>\n );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","tabIndex","direction","ScrollWrapperDirection","children","dataTestId","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,IAAgB,CAAC;AAAA,EAC1B,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAYC,EAAuB;AAAA,EACnC,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAwC;AAC9B,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFb,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFa,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAEhG,yCACK,OAAI,EAAA,gBAAcD,GAAY,WAAU,oEAAA,GACpCU,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,YAAYlB,EAAU;AAAA,QACtB,OAAOiB;AAAA,MACX;AAAA,IAAA;AAAA,EAGR,GAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKX;AAAA,MAEL,UAAAL;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWiB,EAAM;AAAA,QACbC,EAAwBjB,CAAS;AAAA,QACjC;AAAA,QACAU,KAAkBQ;AAAA,MAAA,CACrB;AAAA,MACA,GAAGV;AAAA,MACH,GAAGG;AAAA,IAAA;AAAA,IAEHT;AAAA,EAAA,GAEJW,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO;AAAA,QACH,YAAYlB,EAAU;AAAA,QACtB,OAAOiB;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,CAGZ;AAER;AACAhB,EAAc,cAAc;"}

package/dist/components/ScrollWrapper/types.d.ts CHANGED Viewed

@@ -9,4 +9,5 @@ export type ScrollWrapperProps = {
     direction?: ScrollWrapperDirection;
     children?: ReactElement | ReactElement[];
     'data-test-id'?: string;
+    tabIndex?: number;
 };

package/dist/components/ScrollWrapper/types.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.es.js","sources":["../../../src/components/ScrollWrapper/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement } from 'react';\n\nexport enum ScrollWrapperDirection {\n Both = 'Both',\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport const scrollWrapperDirections: Record<ScrollWrapperDirection, string> = {\n [ScrollWrapperDirection.Both]: 'tw-w-full tw-h-full tw-overflow-auto',\n [ScrollWrapperDirection.Horizontal]: 'tw-w-full tw-overflow-x-auto tw-overflow-y-hidden',\n [ScrollWrapperDirection.Vertical]: 'tw-h-full tw-overflow-y-auto tw-overflow-x-hidden',\n};\n\nexport type ScrollWrapperProps = {\n direction?: ScrollWrapperDirection;\n children?: ReactElement \| ReactElement[];\n 'data-test-id'?: string;\n};\n"],"names":["ScrollWrapperDirection","scrollWrapperDirections"],"mappings":"AAIY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,aAAa,cACbA,EAAA,WAAW,YAHHA,IAAAA,KAAA,CAAA,CAAA;AAML,MAAMC,IAAkE;AAAA,EAC1E,MAA8B;AAAA,EAC9B,YAAoC;AAAA,EACpC,UAAkC;AACvC;"}
1	+ {"version":3,"file":"types.es.js","sources":["../../../src/components/ScrollWrapper/types.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement } from 'react';\n\nexport enum ScrollWrapperDirection {\n Both = 'Both',\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport const scrollWrapperDirections: Record<ScrollWrapperDirection, string> = {\n [ScrollWrapperDirection.Both]: 'tw-w-full tw-h-full tw-overflow-auto',\n [ScrollWrapperDirection.Horizontal]: 'tw-w-full tw-overflow-x-auto tw-overflow-y-hidden',\n [ScrollWrapperDirection.Vertical]: 'tw-h-full tw-overflow-y-auto tw-overflow-x-hidden',\n};\n\nexport type ScrollWrapperProps = {\n direction?: ScrollWrapperDirection;\n children?: ReactElement \| ReactElement[];\n 'data-test-id'?: string;\n tabIndex?: number;\n};\n"],"names":["ScrollWrapperDirection","scrollWrapperDirections"],"mappings":"AAIY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,aAAa,cACbA,EAAA,WAAW,YAHHA,IAAAA,KAAA,CAAA,CAAA;AAML,MAAMC,IAAkE;AAAA,EAC1E,MAA8B;AAAA,EAC9B,YAAoC;AAAA,EACpC,UAAkC;AACvC;"}

package/dist/components/Tabs/Tabs.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 export declare enum TabsPaddingX {
+    None = "None",
+    XSmall = "XSmall",
     Small = "Small",
     Medium = "Medium",
     Large = "Large"

package/dist/components/Tabs/Tabs.es.js CHANGED Viewed

@@ -1,118 +1,120 @@
-import n, { useRef as j, useState as x, Children as S, isValidElement as A, useCallback as K, useEffect as L, cloneElement as I } from "react";
+import o, { useRef as I, useState as x, Children as O, isValidElement as A, useCallback as j, useEffect as L, cloneElement as K } from "react";
 import { merge as f } from "../../utilities/merge.es.js";
-import { motion as V } from "framer-motion";
-import { useFocusRing as z } from "@react-aria/focus";
+import { motion as z } from "framer-motion";
+import { useFocusRing as V } from "@react-aria/focus";
 import { FOCUS_STYLE as U } from "../../utilities/focusStyle.es.js";
 import { useMemoizedId as W } from "../../hooks/useMemoizedId.es.js";
 import H from "../../foundation/Icon/Generated/IconDotsHorizontal.es.js";
-import { Badge as T } from "../Badge/Badge.es.js";
-var P = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Medium = "Medium", l.Large = "Large", l))(P || {}), Y = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Large = "Large", l))(Y || {});
-const _ = {
+import { Badge as $ } from "../Badge/Badge.es.js";
+var Y = /* @__PURE__ */ ((l) => (l.None = "None", l.XSmall = "XSmall", l.Small = "Small", l.Medium = "Medium", l.Large = "Large", l))(Y || {}), _ = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Large = "Large", l))(_ || {});
+const q = {
+  None: "tw-pl-0",
+  XSmall: "tw-pl-xs",
   Small: "tw-pl-s",
   Medium: "tw-pl-m",
   Large: "tw-pl-l"
-}, q = ({ paddingX: l, size: y, activeItemId: s, children: h, onChange: E }) => {
-  const $ = W(), v = j(null), [k, B] = x(!1), [w, c] = x(!1), p = S.map(h, (e) => A(e) ? e == null ? void 0 : e.props : null) ?? [], [C, M] = x([0]), a = K(() => {
+}, G = ({ paddingX: l, size: y, activeItemId: i, children: E, onChange: h }) => {
+  const B = W(), v = I(null), [k, C] = x(!1), [w, c] = x(!1), p = O.map(E, (e) => A(e) ? e == null ? void 0 : e.props : null) ?? [], [M, R] = x([0]), a = j(() => {
     const e = v.current;
-    B((e && e.scrollWidth > e.clientWidth) ?? !1);
-    const r = [];
+    C((e && e.scrollWidth > e.clientWidth) ?? !1);
+    const n = [];
     if (e) {
       for (const t of e.children) {
-        const i = [...e.children].indexOf(t), m = e.getBoundingClientRect(), u = t.getBoundingClientRect();
-        (u.right > m.right || u.left < m.left) && r.push(i);
+        const s = [...e.children].indexOf(t), m = e.getBoundingClientRect(), u = t.getBoundingClientRect();
+        (u.right > m.right || u.left < m.left) && n.push(s);
       }
-      const o = [...r].sort((t, i) => t - i);
-      M(o);
+      const r = [...n].sort((t, s) => t - s);
+      R(r);
     }
-  }, []), g = () => C.map((e) => p[e]), N = (e, r) => {
-    const o = e.findIndex((t) => t.id === s);
-    return e.filter((t, i) => r === "next" && i > o && !t.disabled || r === "previous" && i < o && !t.disabled ? t : !1);
-  }, O = (e) => {
-    const r = g(), o = e.target, t = o.id.includes("-m"), i = o.id.replace("-btn-m", ""), m = t ? r : p, u = N(m, "next"), b = N(m, "previous");
-    (e.key === "ArrowRight" || e.key === "ArrowDown") && u.length > 0 && d(u[0].id, t), (e.key === "ArrowLeft" || e.key === "ArrowUp") && b.length > 0 && d(b[b.length - 1].id, t), e.key === "Enter" && t && (d(i, !0), c(!1), document.getElementById(`${i}-content`).focus()), o.id.includes("-m") || c(!1);
-  }, d = (e, r) => {
+  }, []), g = () => M.map((e) => p[e]), N = (e, n) => {
+    const r = e.findIndex((t) => t.id === i);
+    return e.filter((t, s) => n === "next" && s > r && !t.disabled || n === "previous" && s < r && !t.disabled ? t : !1);
+  }, S = (e) => {
+    const n = g(), r = e.target, t = r.id.includes("-m"), s = r.id.replace("-btn-m", ""), m = t ? n : p, u = N(m, "next"), b = N(m, "previous");
+    (e.key === "ArrowRight" || e.key === "ArrowDown") && u.length > 0 && d(u[0].id, t), (e.key === "ArrowLeft" || e.key === "ArrowUp") && b.length > 0 && d(b[b.length - 1].id, t), e.key === "Enter" && t && (d(s, !0), c(!1), document.getElementById(`${s}-content`).focus()), r.id.includes("-m") || c(!1);
+  }, d = (e, n) => {
     try {
-      const o = document.getElementById(`${e}-btn`), t = document.getElementById(
-        r ? `${e}-btn-m` : `${e}-btn`
+      const r = document.getElementById(`${e}-btn`), t = document.getElementById(
+        n ? `${e}-btn-m` : `${e}-btn`
       );
-      E && E(e), k && o.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), t.focus();
-    } catch (o) {
-      throw o.message;
+      h && h(e), k && r.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), t.focus();
+    } catch (r) {
+      throw r.message;
     }
-  }, R = (e) => {
+  }, T = (e) => {
     a();
-    const r = g();
-    if (e.key === "Enter" && !w && r.length > 0) {
-      const o = document.getElementById(`${r[0].id}-btn-m`);
-      o && o.focus();
+    const n = g();
+    if (e.key === "Enter" && !w && n.length > 0) {
+      const r = document.getElementById(`${n[0].id}-btn-m`);
+      r && r.focus();
     }
-    w && (e.key === "ArrowRight" || e.key === "ArrowDown") && d(r[0].id, !0);
+    w && (e.key === "ArrowRight" || e.key === "ArrowDown") && d(n[0].id, !0);
   };
   L(() => {
     a();
   }, [a]), L(() => (window.addEventListener("resize", a), () => {
     window.removeEventListener("resize", a);
   }), [a]);
-  const { isFocusVisible: D, focusProps: F } = z();
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line" }, /* @__PURE__ */ n.createElement(
+  const { isFocusVisible: D, focusProps: F } = V();
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line" }, /* @__PURE__ */ o.createElement(
     "div",
     {
       ref: v,
       role: "tablist",
       className: f([
-        "tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8",
-        _[
+        "tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start",
+        q[
           l ?? "Small"
           /* Small */
         ],
         y === "Small" ? "tw-gap-xxs" : "tw-gap-xs "
       ])
     },
-    p.map((e) => /* @__PURE__ */ n.createElement(
+    p.map((e) => /* @__PURE__ */ o.createElement(
       "button",
       {
         "data-test-id": "tab-item",
         role: "tab",
         type: "button",
-        "aria-selected": e.id === s,
+        "aria-selected": e.id === i,
         "aria-controls": `${e.id}-content`,
         "aria-hidden": e.disabled,
-        tabIndex: e.id === s ? 0 : -1,
+        tabIndex: e.id === i ? 0 : -1,
         id: `${e.id}-btn`,
         className: f([
           "tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap",
           e.disabled && "tw-text-text-disabled",
-          e.id === s ? "tw-font-medium tw-text-text" : "tw-text-text-weak",
+          !e.disabled && "hover:tw-text-text",
+          e.id === i ? "tw-font-medium tw-text-text" : "tw-text-text-weak",
           y === "Small" ? "tw-text-sm" : "tw-text-md"
         ]),
         key: e.id,
         onClick: () => {
           e.disabled || (d(e.id, !1), c(!1));
         },
-        onKeyDown: (r) => O(r)
+        onKeyDown: (n) => S(n)
       },
-      e.decorator && /* @__PURE__ */ n.createElement("span", { className: "tw-mr-1.5" }, e.decorator),
-      /* @__PURE__ */ n.createElement("span", null, e.label),
-      e.badge && /* @__PURE__ */ n.createElement(T, { disabled: e.disabled, style: e.badge.style }, e.badge.children),
-      e.id === s && /* @__PURE__ */ n.createElement(
-        V.div,
+      e.decorator && /* @__PURE__ */ o.createElement("span", { className: "tw-mr-1.5" }, e.decorator),
+      /* @__PURE__ */ o.createElement("span", null, e.label),
+      e.badge && /* @__PURE__ */ o.createElement("span", { className: "tw-ml-1.5" }, /* @__PURE__ */ o.createElement($, { disabled: e.disabled, style: e.badge.style }, e.badge.children)),
+      e.id === i && /* @__PURE__ */ o.createElement(
+        z.div,
         {
           initial: !1,
-          layoutDependency: s,
+          layoutDependency: i,
           "data-test-id": "tab-active-highlight",
-          layoutId: $,
-          className: "tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0"
+          layoutId: B,
+          className: "tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0"
         }
-      ),
-      e.id !== s && !e.disabled && /* @__PURE__ */ n.createElement("div", { className: "group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0" })
+      )
     ))
-  ), k && /* @__PURE__ */ n.createElement(
+  ), k && /* @__PURE__ */ o.createElement(
     "div",
     {
       "data-test-id": "tab-overflow",
-      className: "tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center"
+      className: "tw-absolute tw-z-50 tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center"
     },
-    /* @__PURE__ */ n.createElement(
+    /* @__PURE__ */ o.createElement(
       "button",
       {
         className: f([
@@ -123,20 +125,20 @@ const _ = {
         onClick: () => {
           a(), c(!w);
         },
-        onKeyDown: (e) => R(e),
+        onKeyDown: (e) => T(e),
         ...F
       },
-      /* @__PURE__ */ n.createElement(H, null)
+      /* @__PURE__ */ o.createElement(H, null)
     ),
-    w && /* @__PURE__ */ n.createElement(
+    w && /* @__PURE__ */ o.createElement(
       "div",
       {
         className: "tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max",
         role: "dialog"
       },
       g().map((e) => {
-        var r, o;
-        return /* @__PURE__ */ n.createElement(
+        var n, r;
+        return /* @__PURE__ */ o.createElement(
           "button",
           {
             className: f([
@@ -149,25 +151,25 @@ const _ = {
             },
             role: "tab",
             type: "button",
-            "aria-selected": e.id === s,
+            "aria-selected": e.id === i,
             "aria-controls": `${e.id}-content`,
             "aria-hidden": e.disabled,
             tabIndex: !e.disabled && w ? 0 : -1,
             id: `${e.id}-btn-m`,
-            onKeyDown: (t) => O(t)
+            onKeyDown: (t) => S(t)
           },
           e.decorator,
-          /* @__PURE__ */ n.createElement("span", { className: "tw-mr-1 tw-ml-1.5" }, e.label),
-          e.badge && /* @__PURE__ */ n.createElement(T, { disabled: e.disabled, style: (r = e.badge) == null ? void 0 : r.style }, (o = e.badge) == null ? void 0 : o.children)
+          /* @__PURE__ */ o.createElement("span", { className: "tw-mr-1 tw-ml-1.5" }, e.label),
+          e.badge && /* @__PURE__ */ o.createElement($, { disabled: e.disabled, style: (n = e.badge) == null ? void 0 : n.style }, (r = e.badge) == null ? void 0 : r.children)
         );
       })
     )
-  )), /* @__PURE__ */ n.createElement("div", { "data-test-id": "tab-content" }, S.map(h, (e) => A(e) ? I(e, { ...e.props, active: e.props.id === s }) : null)));
+  )), /* @__PURE__ */ o.createElement("div", { "data-test-id": "tab-content" }, O.map(E, (e) => A(e) ? K(e, { ...e.props, active: e.props.id === i }) : null)));
 };
-q.displayName = "FondueTabs";
+G.displayName = "FondueTabs";
 export {
-  Y as TabSize,
-  q as Tabs,
-  P as TabsPaddingX
+  _ as TabSize,
+  G as Tabs,
+  Y as TabsPaddingX
 };
 //# sourceMappingURL=Tabs.es.js.map

package/dist/components/Tabs/Tabs.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n Children,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs = ({ paddingX, size, activeItemId, children, onChange }: TabsProps): ReactElement => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right \|\| tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' \|\| event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' \|\| event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' \|\| event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n tab.disabled && 'tw-text-text-disabled',\n tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n {tab.id !== activeItemId && !tab.disabled && (\n <div className=\"group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0\" />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\">\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","Tabs","paddingX","size","activeItemId","children","onChange","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","i","filterTabList","array","direction","activeItemIndex","tab","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","React","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n Children,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n None = 'None',\n XSmall = 'XSmall',\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.None]: 'tw-pl-0',\n [TabsPaddingX.XSmall]: 'tw-pl-xs',\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs = ({ paddingX, size, activeItemId, children, onChange }: TabsProps): ReactElement => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement \| null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right \|\| tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' \|\| event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' \|\| event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' \|\| event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n tab.disabled && 'tw-text-text-disabled',\n !tab.disabled && 'hover:tw-text-text',\n tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <span className=\"tw-ml-1.5\">\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n </span>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-z-50 tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\">\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","Tabs","paddingX","size","activeItemId","children","onChange","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","i","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","filterTabList","array","direction","activeItemIndex","tab","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","React","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}