@frontify/fondue 12.0.0-beta.334 → 12.0.0-beta.336

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js

@@ -1,79 +1,86 @@
-import { getLicElementClassNames as E } from "../../Plugins/ListPlugin/ListItemContentMarkupElement.es.js";
-import { LI_CLASSNAMES as f, getLiStyles as N } from "../../Plugins/ListPlugin/ListItemMarkupElement.es.js";
-import { isText as L, ELEMENT_UL as T, ELEMENT_OL as c, ELEMENT_LI as h, ELEMENT_LIC as d, ELEMENT_LINK as g, ELEMENT_MENTION as $ } from "@udecode/plate";
+import { getLicElementClassNames as u } from "../../Plugins/ListPlugin/ListItemContentMarkupElement.es.js";
+import { LI_CLASSNAMES as f, getLiStyles as h } from "../../Plugins/ListPlugin/ListItemMarkupElement.es.js";
+import { isText as L, ELEMENT_UL as N, ELEMENT_OL as p, ELEMENT_LI as T, ELEMENT_LIC as d, ELEMENT_LINK as g, ELEMENT_MENTION as $ } from "@udecode/plate";
 import { merge as C } from "../../../../utilities/merge.es.js";
-import { buttonNode as y } from "../nodes/button.es.js";
-import { checkItemNode as M } from "../nodes/checkItem.es.js";
+import { buttonNode as M } from "../nodes/button.es.js";
+import { checkItemNode as y } from "../nodes/checkItem.es.js";
 import { linkNode as _ } from "../nodes/link.es.js";
 import { mentionHtmlNode as S } from "../nodes/mentionHtmlNode.es.js";
 import { reactCssPropsToCss as n } from "./reactCssPropsToCss.es.js";
 import { serializeLeafToHtml as k } from "./serializeLeafToHtml.es.js";
-import { UL_CLASSES as I } from "../../Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js";
-import { getOrderedListClasses as b, OL_STYLES as x } from "../../Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js";
-import { ELEMENT_BUTTON as H, alignmentClassnames as O } from "../../Plugins/helper.es.js";
-import { TextStyles as o } from "../../Plugins/TextStylePlugin/types.es.js";
+import { UL_CLASSES as x } from "../../Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js";
+import { getOrderedListClasses as I, OL_STYLES as b } from "../../Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js";
+import { ELEMENT_BUTTON as H, alignmentClassnames as v } from "../../Plugins/helper.es.js";
+import { TextStyles as r } from "../../Plugins/TextStylePlugin/types.es.js";
 import { ELEMENT_CHECK_ITEM as w } from "../../Plugins/CheckboxListPlugin/id.es.js";
-const p = (t, e) => t.reduce((r, s) => (s.type === e && r++, s.children ? r + p(s.children, e) : r), 0), v = (t, e, { mappedMentionable: r, nestingCount: s = {} }) => {
+const c = (t, e) => {
+  let o = 0;
+  for (const s of t) {
+    let i = 0;
+    s.type === e && (i = 1), s.children && (i += c(s.children, e)), o = Math.max(o, i);
+  }
+  return o;
+}, O = (t, e, { mappedMentionable: o, nestingCount: s = {} }) => {
   if (L(t))
     return k(t);
-  const m = s[t.type] || p([t], t.type);
+  const i = s[t.type] || c([t], t.type);
   let a = "";
   for (const l of t.children)
-    a += v(l, e, {
+    a += O(l, e, {
       nestingCount: {
         ...s,
-        [l.type]: m
+        [l.type]: i
       },
-      mappedMentionable: r
+      mappedMentionable: o
     });
-  const u = A[t.type];
+  const E = A[t.type];
   try {
-    return u({
+    return E({
       classNames: U(
         t.breakAfterColumn,
         t.align
       ),
       children: a,
-      rootNestingCount: m,
+      rootNestingCount: i,
       node: t,
-      mappedMentionable: r,
+      mappedMentionable: o,
       styles: e
     }) ?? a;
   } catch {
     return console.warn(`The htmlMapper for node type: '${t.type}' does not exist.`), a;
   }
 }, A = {
-  [o.heading1]: (t) => i(o.heading1, t, "h1"),
-  [o.heading2]: (t) => i(o.heading2, t, "h2"),
-  [o.heading3]: (t) => i(o.heading3, t, "h3"),
-  [o.heading4]: (t) => i(o.heading4, t, "h4"),
-  [o.p]: (t) => i(o.p, t, "p"),
-  [o.custom1]: (t) => i(o.custom1, t, "p"),
-  [o.custom2]: (t) => i(o.custom2, t, "p"),
-  [o.custom3]: (t) => i(o.custom3, t, "p"),
-  [o.quote]: (t) => i(o.quote, t, "p"),
-  [o.imageTitle]: (t) => i(o.imageTitle, t, "p"),
-  [o.imageCaption]: (t) => i(o.imageCaption, t, "p"),
-  [T]: (t) => `<ul dir="auto" class="${I} ${t.classNames}">${t.children}</ul>`,
-  [c]: ({ classNames: t, children: e, node: r, rootNestingCount: s }) => {
-    const m = Math.max(s - p([r], c), 0);
-    return `<ol dir="auto" class="${b(m)} ${t}" style="${n(
-      x
+  [r.heading1]: (t) => m(r.heading1, t, "h1"),
+  [r.heading2]: (t) => m(r.heading2, t, "h2"),
+  [r.heading3]: (t) => m(r.heading3, t, "h3"),
+  [r.heading4]: (t) => m(r.heading4, t, "h4"),
+  [r.p]: (t) => m(r.p, t, "p"),
+  [r.custom1]: (t) => m(r.custom1, t, "p"),
+  [r.custom2]: (t) => m(r.custom2, t, "p"),
+  [r.custom3]: (t) => m(r.custom3, t, "p"),
+  [r.quote]: (t) => m(r.quote, t, "p"),
+  [r.imageTitle]: (t) => m(r.imageTitle, t, "p"),
+  [r.imageCaption]: (t) => m(r.imageCaption, t, "p"),
+  [N]: (t) => `<ul dir="auto" class="${x} ${t.classNames}">${t.children}</ul>`,
+  [p]: ({ classNames: t, children: e, node: o, rootNestingCount: s }) => {
+    const i = Math.max(s - c([o], p), 0);
+    return `<ol dir="auto" class="${I(i)} ${t}" style="${n(
+      b
     )}">${e}</ol>`;
   },
-  [h]: ({ classNames: t, children: e, node: r, styles: s }) => `<li dir="auto" class="${t} ${f}" style="${n(
-    N(r, s)
+  [T]: ({ classNames: t, children: e, node: o, styles: s }) => `<li dir="auto" class="${t} ${f}" style="${n(
+    h(o, s)
   )}">${e}</li>`,
-  [d]: ({ classNames: t, children: e, node: r }) => `<p dir="auto" class="${t} ${E(r)}"><span>${e}</span></p>`,
-  [g]: ({ node: t, children: e, classNames: r, styles: s }) => _(t, e, r, s),
-  [H]: ({ node: t, children: e, classNames: r, styles: s }) => y(t, e, r, s),
-  [w]: ({ node: t, children: e, classNames: r, styles: s }) => M(t, e, r, s),
+  [d]: ({ classNames: t, children: e, node: o }) => `<p dir="auto" class="${t} ${u(o)}"><span>${e}</span></p>`,
+  [g]: ({ node: t, children: e, classNames: o, styles: s }) => _(t, e, o, s),
+  [H]: ({ node: t, children: e, classNames: o, styles: s }) => M(t, e, o, s),
+  [w]: ({ node: t, children: e, classNames: o, styles: s }) => y(t, e, o, s),
   [$]: ({ node: t, mappedMentionable: e }) => S(t, { mentionable: e })
-}, i = (t, { classNames: e, styles: r, children: s }, m) => `<${m} dir="auto" class="${e}" style="${n(r[t])}">${s}</${m}>`, U = (t, e) => {
-  const r = "tw-break-words", s = t === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", m = e ? O[e] : "";
-  return C([m, r, s]);
+}, m = (t, { classNames: e, styles: o, children: s }, i) => `<${i} dir="auto" class="${e}" style="${n(o[t])}">${s}</${i}>`, U = (t, e) => {
+  const o = "tw-break-words", s = t === "active" ? "tw-break-after-column tw-break-inside-avoid-column" : "", i = e ? v[e] : "";
+  return C([i, o, s]);
 };
 export {
-  v as serializeNodeToHtmlRecursive
+  O as serializeNodeToHtmlRecursive
 };
 //# sourceMappingURL=serializeNodeToHtmlRecursive.es.js.map

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ELEMENT_BUTTON,\n    ELEMENT_CHECK_ITEM,\n    MappedMentionableItems,\n    OL_STYLES,\n    TextStyles,\n    UL_CLASSES,\n    alignmentClassnames,\n    getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getLicElementClassNames } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\nimport {\n    ELEMENT_LI,\n    ELEMENT_LIC,\n    ELEMENT_LINK,\n    ELEMENT_MENTION,\n    ELEMENT_OL,\n    ELEMENT_UL,\n    TDescendant,\n    TElement,\n    isText,\n} from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { ButtonStylesType, buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { CSSPropertiesHover } from '../types';\n\nconst countNodesOfType = (nodes: TDescendant[], type: string): number => {\n    return nodes.reduce((acc, node) => {\n        if (node.type === type) {\n            acc++;\n        }\n        if (node.children) {\n            return acc + countNodesOfType(node.children as TDescendant[], type);\n        }\n        return acc;\n    }, 0);\n};\n\ntype NestingCount = {\n    [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n    mappedMentionable?: MappedMentionableItems;\n    nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n    node: TDescendant,\n    styles: Record<string, CSSPropertiesHover> | ButtonStylesType,\n    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n    if (isText(node)) {\n        return serializeLeafToHtml(node);\n    }\n\n    const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);\n    let children = '';\n    for (const element of node.children) {\n        children += serializeNodeToHtmlRecursive(element, styles, {\n            nestingCount: {\n                ...nestingCount,\n                [element.type as string]: rootNestingCount,\n            },\n            mappedMentionable,\n        });\n    }\n\n    const htmlMapper = MapNodeTypesToHtml[node.type];\n    try {\n        return (\n            htmlMapper({\n                classNames: getClassNames(\n                    node.breakAfterColumn as string | undefined,\n                    node.align as string | undefined,\n                ),\n                children,\n                rootNestingCount,\n                node,\n                mappedMentionable,\n                styles,\n            }) ?? children\n        );\n    } catch (error) {\n        console.warn(`The htmlMapper for node type: '${node.type}' does not exist.`);\n        return children;\n    }\n};\n\ntype Arguments = {\n    classNames: string;\n    children: string;\n    rootNestingCount: number;\n    node: TElement;\n    mappedMentionable?: MappedMentionableItems;\n    styles: Record<string, CSSPropertiesHover>;\n};\n\nconst MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {\n    [TextStyles.heading1]: (args) => getTextStyleHtml(TextStyles.heading1, args, 'h1'),\n    [TextStyles.heading2]: (args) => getTextStyleHtml(TextStyles.heading2, args, 'h2'),\n    [TextStyles.heading3]: (args) => getTextStyleHtml(TextStyles.heading3, args, 'h3'),\n    [TextStyles.heading4]: (args) => getTextStyleHtml(TextStyles.heading4, args, 'h4'),\n    [TextStyles.p]: (args) => getTextStyleHtml(TextStyles.p, args, 'p'),\n    [TextStyles.custom1]: (args) => getTextStyleHtml(TextStyles.custom1, args, 'p'),\n    [TextStyles.custom2]: (args) => getTextStyleHtml(TextStyles.custom2, args, 'p'),\n    [TextStyles.custom3]: (args) => getTextStyleHtml(TextStyles.custom3, args, 'p'),\n    [TextStyles.quote]: (args) => getTextStyleHtml(TextStyles.quote, args, 'p'),\n    [TextStyles.imageTitle]: (args) => getTextStyleHtml(TextStyles.imageTitle, args, 'p'),\n    [TextStyles.imageCaption]: (args) => getTextStyleHtml(TextStyles.imageCaption, args, 'p'),\n    [ELEMENT_UL]: (args) => `<ul dir=\"auto\" class=\"${UL_CLASSES} ${args.classNames}\">${args.children}</ul>`,\n    [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {\n        const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);\n        return `<ol dir=\"auto\" class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n            OL_STYLES,\n        )}\">${children}</ol>`;\n    },\n    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n        `<li dir=\"auto\" class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n            getLiStyles(node, styles),\n        )}\">${children}</li>`,\n    [ELEMENT_LIC]: ({ classNames, children, node }) =>\n        `<p dir=\"auto\" class=\"${classNames} ${getLicElementClassNames(node)}\"><span>${children}</span></p>`,\n    [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),\n    [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>\n        buttonNode(node, children, classNames, styles as ButtonStylesType),\n    [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),\n    [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),\n};\n\nconst getTextStyleHtml = (\n    tag: TextStyles,\n    { classNames, styles, children }: Arguments,\n    htmlTag: 'p' | 'h1' | 'h2' | 'h3' | 'h4',\n) => `<${htmlTag} dir=\"auto\" class=\"${classNames}\" style=\"${reactCssPropsToCss(styles[tag])}\">${children}</${htmlTag}>`;\n\nconst getClassNames = (breakAfterColumn?: string, align?: string) => {\n    const breakWordsClass = 'tw-break-words';\n    const columnBreakClasses =\n        breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n    const alignClass = align ? alignmentClassnames[align] : '';\n    return merge([alignClass, breakWordsClass, columnBreakClasses]);\n};\n"],"names":["countNodesOfType","nodes","type","acc","node","serializeNodeToHtmlRecursive","styles","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","element","htmlMapper","MapNodeTypesToHtml","getClassNames","TextStyles","args","getTextStyleHtml","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","classNames","nestingLevel","getOrderedListClasses","reactCssPropsToCss","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode","tag","htmlTag","breakAfterColumn","align","breakWordsClass","columnBreakClasses","alignClass","alignmentClassnames","merge"],"mappings":"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"}
+{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ELEMENT_BUTTON,\n    ELEMENT_CHECK_ITEM,\n    MappedMentionableItems,\n    OL_STYLES,\n    TextStyles,\n    UL_CLASSES,\n    alignmentClassnames,\n    getOrderedListClasses,\n} from '@components/RichTextEditor/Plugins';\nimport { getLicElementClassNames } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemContentMarkupElement';\nimport { LI_CLASSNAMES, getLiStyles } from '@components/RichTextEditor/Plugins/ListPlugin/ListItemMarkupElement';\nimport {\n    ELEMENT_LI,\n    ELEMENT_LIC,\n    ELEMENT_LINK,\n    ELEMENT_MENTION,\n    ELEMENT_OL,\n    ELEMENT_UL,\n    TDescendant,\n    TElement,\n    isText,\n} from '@udecode/plate';\nimport { merge } from '@utilities/merge';\nimport { ButtonStylesType, buttonNode } from '../nodes/button';\nimport { checkItemNode } from '../nodes/checkItem';\nimport { linkNode } from '../nodes/link';\nimport { mentionHtmlNode } from '../nodes/mentionHtmlNode';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\nimport { CSSPropertiesHover } from '../types';\n\nconst getNestingLevels = (nodes: TDescendant[], type: string): number => {\n    let maxDepth = 0;\n\n    for (const node of nodes) {\n        let currentDepth = 0;\n        if (node.type === type) {\n            currentDepth = 1;\n        }\n        if (node.children) {\n            currentDepth += getNestingLevels(node.children as TDescendant[], type);\n        }\n        maxDepth = Math.max(maxDepth, currentDepth);\n    }\n\n    return maxDepth;\n};\n\ntype NestingCount = {\n    [type: string]: number;\n};\n\ntype SerializeNodeToHtmlRecursiveOptions = {\n    mappedMentionable?: MappedMentionableItems;\n    nestingCount?: NestingCount;\n};\n\nexport const serializeNodeToHtmlRecursive = (\n    node: TDescendant,\n    styles: Record<string, CSSPropertiesHover> | ButtonStylesType,\n    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions,\n): string => {\n    if (isText(node)) {\n        return serializeLeafToHtml(node);\n    }\n\n    const rootNestingCount = nestingCount[node.type] || getNestingLevels([node], node.type);\n    let children = '';\n    for (const element of node.children) {\n        children += serializeNodeToHtmlRecursive(element, styles, {\n            nestingCount: {\n                ...nestingCount,\n                [element.type as string]: rootNestingCount,\n            },\n            mappedMentionable,\n        });\n    }\n\n    const htmlMapper = MapNodeTypesToHtml[node.type];\n    try {\n        return (\n            htmlMapper({\n                classNames: getClassNames(\n                    node.breakAfterColumn as string | undefined,\n                    node.align as string | undefined,\n                ),\n                children,\n                rootNestingCount,\n                node,\n                mappedMentionable,\n                styles,\n            }) ?? children\n        );\n    } catch (error) {\n        console.warn(`The htmlMapper for node type: '${node.type}' does not exist.`);\n        return children;\n    }\n};\n\ntype Arguments = {\n    classNames: string;\n    children: string;\n    rootNestingCount: number;\n    node: TElement;\n    mappedMentionable?: MappedMentionableItems;\n    styles: Record<string, CSSPropertiesHover>;\n};\n\nconst MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {\n    [TextStyles.heading1]: (args) => getTextStyleHtml(TextStyles.heading1, args, 'h1'),\n    [TextStyles.heading2]: (args) => getTextStyleHtml(TextStyles.heading2, args, 'h2'),\n    [TextStyles.heading3]: (args) => getTextStyleHtml(TextStyles.heading3, args, 'h3'),\n    [TextStyles.heading4]: (args) => getTextStyleHtml(TextStyles.heading4, args, 'h4'),\n    [TextStyles.p]: (args) => getTextStyleHtml(TextStyles.p, args, 'p'),\n    [TextStyles.custom1]: (args) => getTextStyleHtml(TextStyles.custom1, args, 'p'),\n    [TextStyles.custom2]: (args) => getTextStyleHtml(TextStyles.custom2, args, 'p'),\n    [TextStyles.custom3]: (args) => getTextStyleHtml(TextStyles.custom3, args, 'p'),\n    [TextStyles.quote]: (args) => getTextStyleHtml(TextStyles.quote, args, 'p'),\n    [TextStyles.imageTitle]: (args) => getTextStyleHtml(TextStyles.imageTitle, args, 'p'),\n    [TextStyles.imageCaption]: (args) => getTextStyleHtml(TextStyles.imageCaption, args, 'p'),\n    [ELEMENT_UL]: (args) => `<ul dir=\"auto\" class=\"${UL_CLASSES} ${args.classNames}\">${args.children}</ul>`,\n    [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {\n        const nestingLevel = Math.max(rootNestingCount - getNestingLevels([node], ELEMENT_OL), 0);\n        return `<ol dir=\"auto\" class=\"${getOrderedListClasses(nestingLevel)} ${classNames}\" style=\"${reactCssPropsToCss(\n            OL_STYLES,\n        )}\">${children}</ol>`;\n    },\n    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>\n        `<li dir=\"auto\" class=\"${classNames} ${LI_CLASSNAMES}\" style=\"${reactCssPropsToCss(\n            getLiStyles(node, styles),\n        )}\">${children}</li>`,\n    [ELEMENT_LIC]: ({ classNames, children, node }) =>\n        `<p dir=\"auto\" class=\"${classNames} ${getLicElementClassNames(node)}\"><span>${children}</span></p>`,\n    [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),\n    [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>\n        buttonNode(node, children, classNames, styles as ButtonStylesType),\n    [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),\n    [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),\n};\n\nconst getTextStyleHtml = (\n    tag: TextStyles,\n    { classNames, styles, children }: Arguments,\n    htmlTag: 'p' | 'h1' | 'h2' | 'h3' | 'h4',\n) => `<${htmlTag} dir=\"auto\" class=\"${classNames}\" style=\"${reactCssPropsToCss(styles[tag])}\">${children}</${htmlTag}>`;\n\nconst getClassNames = (breakAfterColumn?: string, align?: string) => {\n    const breakWordsClass = 'tw-break-words';\n    const columnBreakClasses =\n        breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';\n    const alignClass = align ? alignmentClassnames[align] : '';\n    return merge([alignClass, breakWordsClass, columnBreakClasses]);\n};\n"],"names":["getNestingLevels","nodes","type","maxDepth","node","currentDepth","serializeNodeToHtmlRecursive","styles","mappedMentionable","nestingCount","isText","serializeLeafToHtml","rootNestingCount","children","element","htmlMapper","MapNodeTypesToHtml","getClassNames","TextStyles","args","getTextStyleHtml","ELEMENT_UL","UL_CLASSES","ELEMENT_OL","classNames","nestingLevel","getOrderedListClasses","reactCssPropsToCss","OL_STYLES","ELEMENT_LI","LI_CLASSNAMES","getLiStyles","ELEMENT_LIC","getLicElementClassNames","ELEMENT_LINK","linkNode","ELEMENT_BUTTON","buttonNode","ELEMENT_CHECK_ITEM","checkItemNode","ELEMENT_MENTION","mentionHtmlNode","tag","htmlTag","breakAfterColumn","align","breakWordsClass","columnBreakClasses","alignClass","alignmentClassnames","merge"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { jsxs as u, Fragment as z, jsx as n } from "react/jsx-runtime";
-import { useRef as V, useState as h, Children as A, isValidElement as L, useCallback as U, useEffect as $, cloneElement as W } from "react";
+import { jsxs as m, Fragment as K, jsx as l } from "react/jsx-runtime";
+import { useRef as V, useState as y, Children as A, isValidElement as L, useCallback as U, useEffect as T, cloneElement as W } from "react";
 import { merge as p } from "../../utilities/merge.es.js";
 import { motion as H } from "framer-motion";
 import { useFocusRing as Y } from "@react-aria/focus";
@@ -7,68 +7,68 @@ import { FOCUS_STYLE as _ } from "../../utilities/focusStyle.es.js";
 import { useMemoizedId as q } from "../../hooks/useMemoizedId.es.js";
 import G from "../../foundation/Icon/Generated/IconDotsHorizontal.es.js";
 import { Badge as B } from "../Badge/Badge.es.js";
-var J = /* @__PURE__ */ ((l) => (l.None = "None", l.XSmall = "XSmall", l.Small = "Small", l.Medium = "Medium", l.Large = "Large", l))(J || {}), P = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Large = "Large", l))(P || {});
+var J = /* @__PURE__ */ ((o) => (o.None = "None", o.XSmall = "XSmall", o.Small = "Small", o.Medium = "Medium", o.Large = "Large", o))(J || {}), P = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Large = "Large", o))(P || {});
 const Q = {
   None: "tw-pl-0",
   XSmall: "tw-pl-xs",
   Small: "tw-pl-s",
   Medium: "tw-pl-m",
   Large: "tw-pl-l"
-}, Z = ({
-  paddingX: l,
-  size: y,
+}, Z = (o, g) => o.disabled ? "tw-text-text-disabled" : o.id === g ? "tw-font-medium tw-text-text" : "tw-text-text-weak hover:tw-text-text", X = ({
+  paddingX: o,
+  size: g,
   activeItemId: i,
   children: v,
   onChange: N,
-  maxHeight: C,
-  minHeight: M
+  maxHeight: $,
+  minHeight: C
 }) => {
-  const T = q(), k = V(null), [E, D] = h(!1), [w, c] = h(!1), g = A.map(v, (t) => L(t) ? t == null ? void 0 : t.props : null) ?? [], [F, R] = h([0]), a = U(() => {
+  const M = q(), k = V(null), [E, D] = y(!1), [w, c] = y(!1), x = A.map(v, (t) => L(t) ? t == null ? void 0 : t.props : null) ?? [], [F, R] = y([0]), a = U(() => {
     const t = k.current;
     D((t && t.scrollWidth > t.clientWidth) ?? !1);
     const r = [];
     if (t) {
       for (const e of t.children) {
-        const s = [...t.children].indexOf(e), f = t.getBoundingClientRect(), m = e.getBoundingClientRect();
-        (m.right > f.right || m.left < f.left) && r.push(s);
+        const s = [...t.children].indexOf(e), f = t.getBoundingClientRect(), u = e.getBoundingClientRect();
+        (u.right > f.right || u.left < f.left) && r.push(s);
       }
-      const o = [...r].sort((e, s) => e - s);
-      R(o);
+      const n = [...r].sort((e, s) => e - s);
+      R(n);
     }
-  }, []), x = () => F.map((t) => g[t]), S = (t, r) => {
-    const o = t.findIndex((e) => e.id === i);
-    return t.filter((e, s) => r === "next" && s > o && !e.disabled || r === "previous" && s < o && !e.disabled ? e : !1);
+  }, []), b = () => F.map((t) => x[t]), S = (t, r) => {
+    const n = t.findIndex((e) => e.id === i);
+    return t.filter((e, s) => r === "next" && s > n && !e.disabled || r === "previous" && s < n && !e.disabled ? e : !1);
   }, O = (t) => {
     t.stopPropagation();
-    const r = x(), o = t.target, e = o.id.includes("-m"), s = o.id.replace("-btn-m", ""), f = e ? r : g, m = S(f, "next"), b = S(f, "previous");
-    (t.key === "ArrowRight" || t.key === "ArrowDown") && m.length > 0 && d(m[0].id, e), (t.key === "ArrowLeft" || t.key === "ArrowUp") && b.length > 0 && d(b[b.length - 1].id, e), t.key === "Enter" && e && (d(s, !0), c(!1), document.getElementById(`${s}-content`).focus()), o.id.includes("-m") || c(!1);
+    const r = b(), n = t.target, e = n.id.includes("-m"), s = n.id.replace("-btn-m", ""), f = e ? r : x, u = S(f, "next"), h = S(f, "previous");
+    (t.key === "ArrowRight" || t.key === "ArrowDown") && u.length > 0 && d(u[0].id, e), (t.key === "ArrowLeft" || t.key === "ArrowUp") && h.length > 0 && d(h[h.length - 1].id, e), t.key === "Enter" && e && (d(s, !0), c(!1), document.getElementById(`${s}-content`).focus()), n.id.includes("-m") || c(!1);
   }, d = (t, r) => {
     try {
-      const o = document.getElementById(`${t}-btn`), e = document.getElementById(
+      const n = document.getElementById(`${t}-btn`), e = document.getElementById(
         r ? `${t}-btn-m` : `${t}-btn`
       );
-      N && N(t), E && o.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), e.focus();
-    } catch (o) {
-      throw o.message;
+      N && N(t), E && n.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), e.focus();
+    } catch (n) {
+      throw n.message;
     }
   }, j = (t) => {
     a();
-    const r = x();
+    const r = b();
     if (t.key === "Enter" && !w && r.length > 0) {
-      const o = document.getElementById(`${r[0].id}-btn-m`);
-      o && o.focus();
+      const n = document.getElementById(`${r[0].id}-btn-m`);
+      n && n.focus();
     }
     w && (t.key === "ArrowRight" || t.key === "ArrowDown") && d(r[0].id, !0);
   };
-  $(() => {
+  T(() => {
     a();
-  }, [a]), $(() => (window.addEventListener("resize", a), () => {
+  }, [a]), T(() => (window.addEventListener("resize", a), () => {
     window.removeEventListener("resize", a);
   }), [a]);
-  const { isFocusVisible: I, focusProps: K } = Y();
-  return /* @__PURE__ */ u(z, { children: [
-    /* @__PURE__ */ u("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line", children: [
-      /* @__PURE__ */ n(
+  const { isFocusVisible: I, focusProps: z } = Y();
+  return /* @__PURE__ */ m(K, { children: [
+    /* @__PURE__ */ m("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line", children: [
+      /* @__PURE__ */ l(
         "div",
         {
           ref: k,
@@ -76,12 +76,12 @@ const Q = {
           className: p([
             "tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start",
             Q[
-              l ?? "Small"
+              o ?? "Small"
               /* Small */
             ],
-            y === "Small" ? "tw-gap-xxs" : "tw-gap-xs "
+            g === "Small" ? "tw-gap-xxs" : "tw-gap-xs "
           ]),
-          children: g.map((t) => /* @__PURE__ */ u(
+          children: x.map((t) => /* @__PURE__ */ m(
             "button",
             {
               "data-test-id": "tab-item",
@@ -94,26 +94,23 @@ const Q = {
               id: `${t.id}-btn`,
               className: p([
                 "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",
-                t.disabled && "tw-text-text-disabled",
-                !t.disabled && "hover:tw-text-text",
-                t.id === i ? "tw-font-medium tw-text-text" : "tw-text-text-weak",
-                y === "Small" ? "tw-text-sm" : "tw-text-md"
+                Z(t, i)
               ]),
               onClick: () => {
                 t.disabled || (d(t.id, !1), c(!1));
               },
               onKeyDown: (r) => O(r),
               children: [
-                t.decorator && /* @__PURE__ */ n("span", { className: "tw-mr-1.5", children: t.decorator }),
-                /* @__PURE__ */ n("span", { children: t.label }),
-                t.badge && /* @__PURE__ */ n("span", { className: "tw-ml-1.5", children: /* @__PURE__ */ n(B, { disabled: t.disabled, style: t.badge.style, children: t.badge.children }) }),
-                t.id === i && /* @__PURE__ */ n(
+                t.decorator && /* @__PURE__ */ l("span", { className: "tw-mr-1.5", children: t.decorator }),
+                /* @__PURE__ */ l("span", { children: t.label }),
+                t.badge && /* @__PURE__ */ l("span", { className: "tw-ml-1.5", children: /* @__PURE__ */ l(B, { disabled: t.disabled, style: t.badge.style, children: t.badge.children }) }),
+                t.id === i && /* @__PURE__ */ l(
                   H.div,
                   {
                     initial: !1,
                     layoutDependency: i,
                     "data-test-id": "tab-active-highlight",
-                    layoutId: T,
+                    layoutId: M,
                     className: "tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0"
                   }
                 )
@@ -123,13 +120,13 @@ const Q = {
           ))
         }
       ),
-      E && /* @__PURE__ */ u(
+      E && /* @__PURE__ */ m(
         "div",
         {
           "data-test-id": "tab-overflow",
           className: "tw-absolute tw-z-50 tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center",
           children: [
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ l(
               "button",
               {
                 className: p([
@@ -141,18 +138,18 @@ const Q = {
                   a(), c(!w);
                 },
                 onKeyDown: (t) => j(t),
-                ...K,
-                children: /* @__PURE__ */ n(G, {})
+                ...z,
+                children: /* @__PURE__ */ l(G, {})
               }
             ),
-            w && /* @__PURE__ */ n(
+            w && /* @__PURE__ */ l(
               "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",
-                children: x().map((t) => {
-                  var r, o;
-                  return /* @__PURE__ */ u(
+                children: b().map((t) => {
+                  var r, n;
+                  return /* @__PURE__ */ m(
                     "button",
                     {
                       className: p([
@@ -172,8 +169,8 @@ const Q = {
                       onKeyDown: (e) => O(e),
                       children: [
                         t.decorator,
-                        /* @__PURE__ */ n("span", { className: "tw-mr-1 tw-ml-1.5", children: t.label }),
-                        t.badge && /* @__PURE__ */ n(B, { disabled: t.disabled, style: (r = t.badge) == null ? void 0 : r.style, children: (o = t.badge) == null ? void 0 : o.children })
+                        /* @__PURE__ */ l("span", { className: "tw-mr-1 tw-ml-1.5", children: t.label }),
+                        t.badge && /* @__PURE__ */ l(B, { disabled: t.disabled, style: (r = t.badge) == null ? void 0 : r.style, children: (n = t.badge) == null ? void 0 : n.children })
                       ]
                     },
                     t.id
@@ -185,13 +182,13 @@ const Q = {
         }
       )
     ] }),
-    /* @__PURE__ */ n("div", { "data-test-id": "tab-content", className: "tw-flex tw-flex-col tw-overflow-y-auto", children: /* @__PURE__ */ n("div", { className: "tw-mr-0", style: { maxHeight: C, minHeight: M }, children: A.map(v, (t) => L(t) ? W(t, { ...t.props, active: t.props.id === i }) : null) }) })
+    /* @__PURE__ */ l("div", { "data-test-id": "tab-content", className: "tw-flex tw-flex-col tw-overflow-y-auto", children: /* @__PURE__ */ l("div", { className: "tw-mr-0", style: { maxHeight: $, minHeight: C }, children: A.map(v, (t) => L(t) ? W(t, { ...t.props, active: t.props.id === i }) : null) }) })
   ] });
 };
-Z.displayName = "FondueTabs";
+X.displayName = "FondueTabs";
 export {
   P as TabSize,
-  Z as Tabs,
+  X as Tabs,
   J as TabsPaddingX
 };
 //# sourceMappingURL=Tabs.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\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';\nimport { DimensionUnity } from '@utilities/dimensions';\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    maxHeight?: `${number}${DimensionUnity}`;\n    minHeight?: `${number}${DimensionUnity}`;\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 = ({\n    paddingX,\n    size,\n    activeItemId,\n    children,\n    onChange,\n    maxHeight,\n    minHeight,\n}: 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        event.stopPropagation();\n\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\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n                <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\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            </div>\n        </>\n    );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","Tabs","paddingX","size","activeItemId","children","onChange","maxHeight","minHeight","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","jsxs","Fragment","jsx","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\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';\nimport { DimensionUnity } from '@utilities/dimensions';\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    maxHeight?: `${number}${DimensionUnity}`;\n    minHeight?: `${number}${DimensionUnity}`;\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\nconst getTabButtonTextStyle = (tab: TabItemProps, activeItemId: string) => {\n    if (tab.disabled) {\n        return 'tw-text-text-disabled';\n    }\n\n    if (tab.id === activeItemId) {\n        return 'tw-font-medium tw-text-text';\n    }\n\n    return 'tw-text-text-weak hover:tw-text-text';\n};\n\nexport const Tabs = ({\n    paddingX,\n    size,\n    activeItemId,\n    children,\n    onChange,\n    maxHeight,\n    minHeight,\n}: 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        event.stopPropagation();\n\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                                    getTabButtonTextStyle(tab, activeItemId),\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\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n                <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\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            </div>\n        </>\n    );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","getTabButtonTextStyle","tab","activeItemId","Tabs","paddingX","size","children","onChange","maxHeight","minHeight","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","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","jsxs","Fragment","jsx","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}