@mittwald/flow-react-components 0.2.0-alpha.1032 → 0.2.0-alpha.1033

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs

@@ -1,68 +1,70 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { Button } from '../Button/Button.mjs';
-import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
-import { Text } from '../Text/Text.mjs';
-import '../TranslationProvider/TranslationProvider.mjs';
-import { useLocalizedStringFormatter } from '../TranslationProvider/useLocalizedStringFormatter.mjs';
-import { UiComponentTunnelExit } from '../UiComponentTunnel/UiComponentTunnelExit.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import ContextMenuTriggerView from '../../views/ContextMenuTriggerView.mjs';
-import ContextMenuView from '../../views/ContextMenuView.mjs';
-import styles from './TabNavigation.module.scss.mjs';
-import locales from '../../../../../_virtual/_.locale.json@7a653b01c4df8873ee850d41727b7e3c.mjs';
-import { useCollapsingItems } from './lib/useCollapsingItems.mjs';
-import { LinkContent } from './components/LinkContent/LinkContent.mjs';
-
-const TabNavigation = flowComponent("TabNavigation", (props) => {
-  const { children, className, ref, ...rest } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales, "TabNavigation");
-  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
-  const rootClassName = clsx(
-    styles.tabNavigation,
-    hasOverflow && styles.collapsed,
-    className
-  );
-  const propsContext = {
-    Link: {
-      wrapWith: /* @__PURE__ */ jsx("li", {}),
-      className: styles.link,
-      unstyled: true,
-      children: dynamic((linkProps) => /* @__PURE__ */ jsx(LinkContent, { linkProps }))
-    }
-  };
-  return /* @__PURE__ */ jsxs("nav", { className: rootClassName, role: "navigation", ...rest, ref, children: [
-    /* @__PURE__ */ jsx("ul", { ref: listRef, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.more, ref: moreRef, children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          unstyled: true,
-          className: clsx(
-            styles.moreButton,
-            menuHasCurrentItem && styles.current
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: stringFormatter.format("moreButton.title") }),
-            /* @__PURE__ */ jsx(IconChevronDown, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(ContextMenuView, { placement: "bottom end", children: /* @__PURE__ */ jsx(
-        UiComponentTunnelExit,
-        {
-          id: "menuItems",
-          component: "TabNavigation",
-          children: (menuItems) => Array.isArray(menuItems) ? menuItems.slice(visibleCount ?? menuItems.length) : menuItems
-        }
-      ) })
-    ] }) })
-  ] });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
+import { Text } from "../Text/Text.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Button } from "../Button/Button.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import ContextMenuTriggerView from "../../views/ContextMenuTriggerView.mjs";
+import ContextMenuView from "../../views/ContextMenuView.mjs";
+import TabNavigation_module_default from "./TabNavigation.module.mjs";
+import { LinkContent } from "./components/LinkContent/LinkContent.mjs";
+import __locale_default from "../../../../../_virtual/_17.locale.mjs";
+import useCollapsingItems from "./lib/useCollapsingItems.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TabNavigation/TabNavigation.tsx
+/**
+* @flr-generate all
+* @flowStatus new
+*/
+var TabNavigation = flowComponent("TabNavigation", (props) => {
+	const { children, className, ref, ...rest } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "TabNavigation");
+	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
+	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
+	const propsContext = { Link: {
+		wrapWith: /* @__PURE__ */ jsx("li", {}),
+		className: TabNavigation_module_default.link,
+		unstyled: true,
+		children: dynamic((linkProps) => /* @__PURE__ */ jsx(LinkContent, { linkProps }))
+	} };
+	return /* @__PURE__ */ jsxs("nav", {
+		className: rootClassName,
+		role: "navigation",
+		...rest,
+		ref,
+		children: [/* @__PURE__ */ jsx("ul", {
+			ref: listRef,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: TabNavigation_module_default.more,
+			ref: moreRef,
+			children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [/* @__PURE__ */ jsxs(Button, {
+				unstyled: true,
+				className: clsx(TabNavigation_module_default.moreButton, menuHasCurrentItem && TabNavigation_module_default.current),
+				children: [/* @__PURE__ */ jsx(Text, {
+					emulateBoldWidth: true,
+					children: stringFormatter.format("moreButton.title")
+				}), /* @__PURE__ */ jsx(IconChevronDown, {})]
+			}), /* @__PURE__ */ jsx(ContextMenuView, {
+				placement: "bottom end",
+				children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+					id: "menuItems",
+					component: "TabNavigation",
+					children: (menuItems) => Array.isArray(menuItems) ? menuItems.slice(visibleCount ?? menuItems.length) : menuItems
+				})
+			})] })
+		})]
+	});
 });
+//#endregion
+export { TabNavigation, TabNavigation as default };
 
-export { TabNavigation };
-//# sourceMappingURL=TabNavigation.mjs.map
+//# sourceMappingURL=TabNavigation.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.mjs","sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,eAAA,GAAkB,2BAAA,CAA4B,OAAA,EAAS,eAAe,CAAA;AAE5E,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,cAAc,WAAA,EAAa,kBAAA,KACnD,kBAAA,EAAmB;AAErB,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,aAAA;AAAA,IACP,eAAe,MAAA,CAAO,SAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,QAAA,sBAAW,IAAA,EAAA,EAAG,CAAA;AAAA,MACd,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,QAAA,EAAU,IAAA;AAAA,MACV,UAAU,OAAA,CAAQ,CAAC,8BAAc,GAAA,CAAC,WAAA,EAAA,EAAY,WAAsB,CAAE;AAAA;AACxE,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,aAAA,EAAe,MAAK,YAAA,EAAc,GAAG,MAAM,GAAA,EACzD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,KAAK,OAAA,EACP,QAAA,kBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAC1B,UACH,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,MAAM,GAAA,EAAK,OAAA,EAChC,+BAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAQ,IAAA;AAAA,UACR,SAAA,EAAW,IAAA;AAAA,YACT,MAAA,CAAO,UAAA;AAAA,YACP,sBAAsB,MAAA,CAAO;AAAA,WAC/B;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAK,gBAAA,EAAgB,IAAA,EACnB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,kBAAkB,CAAA,EAC5C,CAAA;AAAA,gCACC,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,OACnB;AAAA,sBACA,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,YAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,QAAC,qBAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,WAAA;AAAA,UACH,SAAA,EAAU,eAAA;AAAA,UACV,QAAA,EAAU,CAAC,SAAA,KACT,KAAA,CAAM,OAAA,CAAQ,SAAS,CAAA,GACnB,SAAA,CAAU,KAAA,CAAM,YAAA,IAAgB,SAAA,CAAU,MAAM,CAAA,GAChD;AAAA;AAAA,OAER,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,KAAK;GACP,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.module.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+//#region src/components/TabNavigation/TabNavigation.module.scss
+var tabNavigation = "flow--tab-navigation";
+var link = "flow--tab-navigation--link";
+var text = "flow--tab-navigation--text";
+var more = "flow--tab-navigation--more";
+var moreButton = "flow--tab-navigation--more-button";
+var current = "flow--tab-navigation--current";
+var collapsed = "flow--tab-navigation--collapsed";
+var TabNavigation_module_default = {
+	tabNavigation,
+	link,
+	text,
+	more,
+	moreButton,
+	current,
+	collapsed
+};
+//#endregion
+export { collapsed, current, TabNavigation_module_default as default, link, more, moreButton, tabNavigation, text };
+
+//# sourceMappingURL=TabNavigation.module.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/TabNavigation.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabNavigation {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  background-color: var(--tab-navigation--background-color--default);\n\n  ul {\n    display: flex;\n    flex-direction: row;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: clip;\n  }\n\n  li {\n    display: flex;\n    list-style: none;\n  }\n\n  /* Elements */\n\n  .link {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[aria-current] {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n  }\n\n  .more {\n    display: flex;\n    align-items: stretch;\n\n    /* Rendered (but hidden) when there is no overflow, so its width can be\n       reserved before items are collapsed. */\n    visibility: hidden;\n    position: absolute;\n    inset-inline-end: 0;\n  }\n\n  .moreButton {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    border: none;\n    border-radius: 0;\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    cursor: pointer;\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &.current,\n    &.current:hover {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  /* States */\n\n  &.collapsed {\n    .more {\n      visibility: visible;\n      position: static;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs

@@ -1,46 +1,44 @@
 "use client"
 /* */
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { MenuItem } from '../../../MenuItem/MenuItem.mjs';
-import { Text } from '../../../Text/Text.mjs';
-import { UiComponentTunnelEntry } from '../../../UiComponentTunnel/UiComponentTunnelEntry.mjs';
-import styles from '../../TabNavigation.module.scss.mjs';
-
-const LinkContent = (props) => {
-  const { linkProps } = props;
-  const {
-    children,
-    href,
-    target,
-    rel,
-    download,
-    hrefLang,
-    ping,
-    referrerPolicy,
-    routerOptions,
-    "aria-label": ariaLabel,
-    "aria-current": ariaCurrent
-  } = linkProps;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: /* @__PURE__ */ jsx("span", { className: styles.text, children }) }),
-    /* @__PURE__ */ jsx(UiComponentTunnelEntry, { id: "menuItems", component: "TabNavigation", children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        "aria-current": ariaCurrent,
-        href,
-        target,
-        rel,
-        download,
-        hrefLang,
-        ping,
-        referrerPolicy,
-        routerOptions,
-        "aria-label": ariaLabel,
-        children
-      }
-    ) })
-  ] });
+import { UiComponentTunnelEntry } from "../../../UiComponentTunnel/UiComponentTunnelEntry.mjs";
+import { Text } from "../../../Text/Text.mjs";
+import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
+import TabNavigation_module_default from "../../TabNavigation.module.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TabNavigation/components/LinkContent/LinkContent.tsx
+/**
+* Renders the content of a link inside the tab navigation and mirrors the link
+* as a menu item into the overflow context menu (via tunnel). The context menu
+* only renders the menu items of the currently collapsed links.
+*/
+var LinkContent = (props) => {
+	const { linkProps } = props;
+	const { children, href, target, rel, download, hrefLang, ping, referrerPolicy, routerOptions, "aria-label": ariaLabel, "aria-current": ariaCurrent } = linkProps;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+		emulateBoldWidth: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: TabNavigation_module_default.text,
+			children
+		})
+	}), /* @__PURE__ */ jsx(UiComponentTunnelEntry, {
+		id: "menuItems",
+		component: "TabNavigation",
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			"aria-current": ariaCurrent,
+			href,
+			target,
+			rel,
+			download,
+			hrefLang,
+			ping,
+			referrerPolicy,
+			routerOptions,
+			"aria-label": ariaLabel,
+			children
+		})
+	})] });
 };
+//#endregion
+export { LinkContent, LinkContent as default };
 
-export { LinkContent };
-//# sourceMappingURL=LinkContent.mjs.map
+//# sourceMappingURL=LinkContent.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkContent.mjs","sources":["../../../../../../../../../src/components/TabNavigation/components/LinkContent/LinkContent.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { LinkProps } from \"@/components/Link\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { Text } from \"@/components/Text\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport styles from \"../../TabNavigation.module.scss\";\n\ninterface Props {\n  linkProps: Partial<LinkProps>;\n}\n\n/**\n * Renders the content of a link inside the tab navigation and mirrors the link\n * as a menu item into the overflow context menu (via tunnel). The context menu\n * only renders the menu items of the currently collapsed links.\n */\nexport const LinkContent: FC<Props> = (props) => {\n  const { linkProps } = props;\n\n  const {\n    children,\n    href,\n    target,\n    rel,\n    download,\n    hrefLang,\n    ping,\n    referrerPolicy,\n    routerOptions,\n    \"aria-label\": ariaLabel,\n    \"aria-current\": ariaCurrent,\n  } = linkProps;\n\n  return (\n    <>\n      <Text emulateBoldWidth>\n        <span className={styles.text}>{children}</span>\n      </Text>\n      <UiComponentTunnelEntry id=\"menuItems\" component=\"TabNavigation\">\n        <MenuItem\n          aria-current={ariaCurrent}\n          href={href}\n          target={target}\n          rel={rel}\n          download={download}\n          hrefLang={hrefLang}\n          ping={ping}\n          referrerPolicy={referrerPolicy}\n          routerOptions={routerOptions}\n          aria-label={ariaLabel}\n        >\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default LinkContent;\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,WAAA,GAAyB,CAAC,KAAA,KAAU;AAC/C,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AAEtB,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,cAAA,EAAgB;AAAA,GAClB,GAAI,SAAA;AAEJ,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,kBAAgB,IAAA,EACpB,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAS,CAAA,EAC1C,CAAA;AAAA,oBACA,GAAA,CAAC,sBAAA,EAAA,EAAuB,EAAA,EAAG,WAAA,EAAY,WAAU,eAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAc,WAAA;AAAA,QACd,IAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,cAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LinkContent.mjs","names":[],"sources":["../../../../../../../../../src/components/TabNavigation/components/LinkContent/LinkContent.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { LinkProps } from \"@/components/Link\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { Text } from \"@/components/Text\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport styles from \"../../TabNavigation.module.scss\";\n\ninterface Props {\n  linkProps: Partial<LinkProps>;\n}\n\n/**\n * Renders the content of a link inside the tab navigation and mirrors the link\n * as a menu item into the overflow context menu (via tunnel). The context menu\n * only renders the menu items of the currently collapsed links.\n */\nexport const LinkContent: FC<Props> = (props) => {\n  const { linkProps } = props;\n\n  const {\n    children,\n    href,\n    target,\n    rel,\n    download,\n    hrefLang,\n    ping,\n    referrerPolicy,\n    routerOptions,\n    \"aria-label\": ariaLabel,\n    \"aria-current\": ariaCurrent,\n  } = linkProps;\n\n  return (\n    <>\n      <Text emulateBoldWidth>\n        <span className={styles.text}>{children}</span>\n      </Text>\n      <UiComponentTunnelEntry id=\"menuItems\" component=\"TabNavigation\">\n        <MenuItem\n          aria-current={ariaCurrent}\n          href={href}\n          target={target}\n          rel={rel}\n          download={download}\n          hrefLang={hrefLang}\n          ping={ping}\n          referrerPolicy={referrerPolicy}\n          routerOptions={routerOptions}\n          aria-label={ariaLabel}\n        >\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default LinkContent;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,eAA0B,UAAU;CAC/C,MAAM,EAAE,cAAc;CAEtB,MAAM,EACJ,UACA,MACA,QACA,KACA,UACA,UACA,MACA,gBACA,eACA,cAAc,WACd,gBAAgB,gBACd;CAEJ,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,kBAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,WAAW,6BAAO;GAAO;EAAe,CAAA;CAC1C,CAAA,GACN,oBAAC,wBAAD;EAAwB,IAAG;EAAY,WAAU;EAC/C,UAAA,oBAAC,UAAD;GACE,gBAAc;GACR;GACE;GACH;GACK;GACA;GACJ;GACU;GACD;GACf,cAAY;GAEX;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/TabNavigation/lib/getVisibleItemCount.mjs

@@ -1,22 +1,23 @@
 "use client"
 /* */
-const floatTolerance = 0.5;
-const getVisibleItemCount = (itemWidths, availableWidth, moreItemWidth) => {
-  const totalWidth = itemWidths.reduce((sum, width) => sum + width, 0);
-  if (totalWidth <= availableWidth + floatTolerance) {
-    return itemWidths.length;
-  }
-  let usedWidth = moreItemWidth;
-  let visibleCount = 0;
-  for (const itemWidth of itemWidths) {
-    if (usedWidth + itemWidth > availableWidth + floatTolerance) {
-      break;
-    }
-    usedWidth += itemWidth;
-    visibleCount++;
-  }
-  return visibleCount;
+//#region src/components/TabNavigation/lib/getVisibleItemCount.ts
+/**
+* Tolerance for sub-pixel rounding differences between measured item widths and
+* the available width.
+*/
+var floatTolerance = .5;
+var getVisibleItemCount = (itemWidths, availableWidth, moreItemWidth) => {
+	if (itemWidths.reduce((sum, width) => sum + width, 0) <= availableWidth + floatTolerance) return itemWidths.length;
+	let usedWidth = moreItemWidth;
+	let visibleCount = 0;
+	for (const itemWidth of itemWidths) {
+		if (usedWidth + itemWidth > availableWidth + floatTolerance) break;
+		usedWidth += itemWidth;
+		visibleCount++;
+	}
+	return visibleCount;
 };
-
+//#endregion
 export { getVisibleItemCount };
-//# sourceMappingURL=getVisibleItemCount.mjs.map
+
+//# sourceMappingURL=getVisibleItemCount.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/getVisibleItemCount.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getVisibleItemCount.mjs","sources":["../../../../../../../../src/components/TabNavigation/lib/getVisibleItemCount.ts"],"sourcesContent":["/**\n * Tolerance for sub-pixel rounding differences between measured item widths and\n * the available width.\n */\nconst floatTolerance = 0.5;\n\nexport const getVisibleItemCount = (\n  itemWidths: number[],\n  availableWidth: number,\n  moreItemWidth: number,\n): number => {\n  const totalWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n\n  if (totalWidth <= availableWidth + floatTolerance) {\n    return itemWidths.length;\n  }\n\n  let usedWidth = moreItemWidth;\n  let visibleCount = 0;\n\n  for (const itemWidth of itemWidths) {\n    if (usedWidth + itemWidth > availableWidth + floatTolerance) {\n      break;\n    }\n    usedWidth += itemWidth;\n    visibleCount++;\n  }\n\n  return visibleCount;\n};\n"],"names":[],"mappings":"AAIA,MAAM,cAAA,GAAiB,GAAA;AAEhB,MAAM,mBAAA,GAAsB,CACjC,UAAA,EACA,cAAA,EACA,aAAA,KACW;AACX,EAAA,MAAM,UAAA,GAAa,WAAW,MAAA,CAAO,CAAC,KAAK,KAAA,KAAU,GAAA,GAAM,OAAO,CAAC,CAAA;AAEnE,EAAA,IAAI,UAAA,IAAc,iBAAiB,cAAA,EAAgB;AACjD,IAAA,OAAO,UAAA,CAAW,MAAA;AAAA,EACpB;AAEA,EAAA,IAAI,SAAA,GAAY,aAAA;AAChB,EAAA,IAAI,YAAA,GAAe,CAAA;AAEnB,EAAA,KAAA,MAAW,aAAa,UAAA,EAAY;AAClC,IAAA,IAAI,SAAA,GAAY,SAAA,GAAY,cAAA,GAAiB,cAAA,EAAgB;AAC3D,MAAA;AAAA,IACF;AACA,IAAA,SAAA,IAAa,SAAA;AACb,IAAA,YAAA,EAAA;AAAA,EACF;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}
+{"version":3,"file":"getVisibleItemCount.mjs","names":[],"sources":["../../../../../../../../src/components/TabNavigation/lib/getVisibleItemCount.ts"],"sourcesContent":["/**\n * Tolerance for sub-pixel rounding differences between measured item widths and\n * the available width.\n */\nconst floatTolerance = 0.5;\n\nexport const getVisibleItemCount = (\n  itemWidths: number[],\n  availableWidth: number,\n  moreItemWidth: number,\n): number => {\n  const totalWidth = itemWidths.reduce((sum, width) => sum + width, 0);\n\n  if (totalWidth <= availableWidth + floatTolerance) {\n    return itemWidths.length;\n  }\n\n  let usedWidth = moreItemWidth;\n  let visibleCount = 0;\n\n  for (const itemWidth of itemWidths) {\n    if (usedWidth + itemWidth > availableWidth + floatTolerance) {\n      break;\n    }\n    usedWidth += itemWidth;\n    visibleCount++;\n  }\n\n  return visibleCount;\n};\n"],"mappings":";;;;;;;AAIA,IAAM,iBAAiB;AAEvB,IAAa,uBACX,YACA,gBACA,kBACW;CAGX,IAFmB,WAAW,QAAQ,KAAK,UAAU,MAAM,OAAO,CAE9D,KAAc,iBAAiB,gBACjC,OAAO,WAAW;CAGpB,IAAI,YAAY;CAChB,IAAI,eAAe;CAEnB,KAAK,MAAM,aAAa,YAAY;EAClC,IAAI,YAAY,YAAY,iBAAiB,gBAC3C;EAEF,aAAa;EACb;CACF;CAEA,OAAO;AACT"}

package/dist/js/packages/components/src/components/TabNavigation/lib/useCollapsingItems.mjs

@@ -1,65 +1,69 @@
 "use client"
 /* */
-import { useRef, useState, useCallback, useLayoutEffect } from 'react';
-import { createFrameResizeObserver } from '../../../lib/dom/createFrameResizeObserver.mjs';
-import { getVisibleItemCount } from './getVisibleItemCount.mjs';
-
-const initialState = {
-  visibleCount: null,
-  hasOverflow: false,
-  menuHasCurrentItem: false
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { getVisibleItemCount } from "./getVisibleItemCount.mjs";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/TabNavigation/lib/useCollapsingItems.ts
+var initialState = {
+	visibleCount: null,
+	hasOverflow: false,
+	menuHasCurrentItem: false
 };
-const useCollapsingItems = () => {
-  const listRef = useRef(null);
-  const moreRef = useRef(null);
-  const [state, setState] = useState(initialState);
-  const update = useCallback(() => {
-    const list = listRef.current;
-    const more = moreRef.current;
-    const container = list?.parentElement;
-    if (!list || !more || !container) {
-      return;
-    }
-    const items = Array.from(list.children).filter(
-      (child) => child instanceof HTMLElement
-    );
-    const containerStyle = window.getComputedStyle(container);
-    const availableWidth = container.clientWidth - (parseFloat(containerStyle.paddingInlineStart) || 0) - (parseFloat(containerStyle.paddingInlineEnd) || 0);
-    const visibleCount = getVisibleItemCount(
-      items.map((item) => item.getBoundingClientRect().width),
-      availableWidth,
-      more.getBoundingClientRect().width
-    );
-    items.forEach((item, index) => {
-      item.style.visibility = index < visibleCount ? "" : "hidden";
-    });
-    const menuHasCurrentItem = items.slice(visibleCount).some(
-      (item) => !!item.querySelector('[aria-current]:not([aria-current="false"])')
-    );
-    setState((previous) => {
-      const next = {
-        visibleCount,
-        hasOverflow: visibleCount < items.length,
-        menuHasCurrentItem
-      };
-      const isUnchanged = previous.visibleCount === next.visibleCount && previous.hasOverflow === next.hasOverflow && previous.menuHasCurrentItem === next.menuHasCurrentItem;
-      return isUnchanged ? previous : next;
-    });
-  }, []);
-  useLayoutEffect(() => {
-    const list = listRef.current;
-    const more = moreRef.current;
-    const container = list?.parentElement;
-    if (!list || !more || !container) {
-      return;
-    }
-    const observer = createFrameResizeObserver(update);
-    observer.observe([container, more, ...list.children]);
-    update();
-    return () => observer.disconnect();
-  });
-  return { ...state, listRef, moreRef };
+/**
+* Observes the items of the list and computes how many of them fit into the
+* available width of the list's parent element. Items that do not fit are
+* hidden via `visibility: hidden` (removes them from the accessibility tree and
+* the tab order while keeping them measurable). The width of the "more" element
+* is reserved whenever items are collapsed, so it must always be rendered
+* (visually hidden when there is no overflow).
+*/
+var useCollapsingItems = () => {
+	const listRef = useRef(null);
+	const moreRef = useRef(null);
+	const [state, setState] = useState(initialState);
+	const update = useCallback(() => {
+		const list = listRef.current;
+		const more = moreRef.current;
+		const container = list?.parentElement;
+		if (!list || !more || !container) return;
+		const items = Array.from(list.children).filter((child) => child instanceof HTMLElement);
+		const containerStyle = window.getComputedStyle(container);
+		const availableWidth = container.clientWidth - (parseFloat(containerStyle.paddingInlineStart) || 0) - (parseFloat(containerStyle.paddingInlineEnd) || 0);
+		const visibleCount = getVisibleItemCount(items.map((item) => item.getBoundingClientRect().width), availableWidth, more.getBoundingClientRect().width);
+		items.forEach((item, index) => {
+			item.style.visibility = index < visibleCount ? "" : "hidden";
+		});
+		const menuHasCurrentItem = items.slice(visibleCount).some((item) => !!item.querySelector("[aria-current]:not([aria-current=\"false\"])"));
+		setState((previous) => {
+			const next = {
+				visibleCount,
+				hasOverflow: visibleCount < items.length,
+				menuHasCurrentItem
+			};
+			return previous.visibleCount === next.visibleCount && previous.hasOverflow === next.hasOverflow && previous.menuHasCurrentItem === next.menuHasCurrentItem ? previous : next;
+		});
+	}, []);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		const more = moreRef.current;
+		const container = list?.parentElement;
+		if (!list || !more || !container) return;
+		const observer = createFrameResizeObserver(update);
+		observer.observe([
+			container,
+			more,
+			...list.children
+		]);
+		update();
+		return () => observer.disconnect();
+	});
+	return {
+		...state,
+		listRef,
+		moreRef
+	};
 };
+//#endregion
+export { useCollapsingItems as default, useCollapsingItems };
 
-export { useCollapsingItems };
-//# sourceMappingURL=useCollapsingItems.mjs.map
+//# sourceMappingURL=useCollapsingItems.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/useCollapsingItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsingItems.mjs","sources":["../../../../../../../../src/components/TabNavigation/lib/useCollapsingItems.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\nimport { getVisibleItemCount } from \"./getVisibleItemCount\";\n\ninterface CollapsingItemsState {\n  /** Number of visible items. `null` until the first measurement was done. */\n  visibleCount: number | null;\n  /** Whether at least one item does not fit and is collapsed. */\n  hasOverflow: boolean;\n  /** Whether one of the collapsed items contains the current page link. */\n  menuHasCurrentItem: boolean;\n}\n\ninterface UseCollapsingItemsReturn extends CollapsingItemsState {\n  listRef: RefObject<HTMLUListElement | null>;\n  moreRef: RefObject<HTMLDivElement | null>;\n}\n\nconst initialState: CollapsingItemsState = {\n  visibleCount: null,\n  hasOverflow: false,\n  menuHasCurrentItem: false,\n};\n\n/**\n * Observes the items of the list and computes how many of them fit into the\n * available width of the list's parent element. Items that do not fit are\n * hidden via `visibility: hidden` (removes them from the accessibility tree and\n * the tab order while keeping them measurable). The width of the \"more\" element\n * is reserved whenever items are collapsed, so it must always be rendered\n * (visually hidden when there is no overflow).\n */\nexport const useCollapsingItems = (): UseCollapsingItemsReturn => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const moreRef = useRef<HTMLDivElement>(null);\n\n  const [state, setState] = useState(initialState);\n\n  const update = useCallback(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const items = Array.from(list.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement,\n    );\n\n    const containerStyle = window.getComputedStyle(container);\n    const availableWidth =\n      container.clientWidth -\n      (parseFloat(containerStyle.paddingInlineStart) || 0) -\n      (parseFloat(containerStyle.paddingInlineEnd) || 0);\n\n    const visibleCount = getVisibleItemCount(\n      items.map((item) => item.getBoundingClientRect().width),\n      availableWidth,\n      more.getBoundingClientRect().width,\n    );\n\n    items.forEach((item, index) => {\n      item.style.visibility = index < visibleCount ? \"\" : \"hidden\";\n    });\n\n    const menuHasCurrentItem = items\n      .slice(visibleCount)\n      .some(\n        (item) =>\n          !!item.querySelector('[aria-current]:not([aria-current=\"false\"])'),\n      );\n\n    setState((previous) => {\n      const next: CollapsingItemsState = {\n        visibleCount,\n        hasOverflow: visibleCount < items.length,\n        menuHasCurrentItem,\n      };\n\n      const isUnchanged =\n        previous.visibleCount === next.visibleCount &&\n        previous.hasOverflow === next.hasOverflow &&\n        previous.menuHasCurrentItem === next.menuHasCurrentItem;\n\n      return isUnchanged ? previous : next;\n    });\n  }, []);\n\n  // Runs after every render (no dependency array): the rendered items may\n  // have changed, so the observed elements are re-collected and re-measured.\n  // `update()` only triggers a re-render when the computed state changed.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const observer = createFrameResizeObserver(update);\n    observer.observe([container, more, ...list.children]);\n\n    update();\n\n    return () => observer.disconnect();\n  });\n\n  return { ...state, listRef, moreRef };\n};\n\nexport default useCollapsingItems;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCollapsingItems.mjs","names":[],"sources":["../../../../../../../../src/components/TabNavigation/lib/useCollapsingItems.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\nimport { getVisibleItemCount } from \"./getVisibleItemCount\";\n\ninterface CollapsingItemsState {\n  /** Number of visible items. `null` until the first measurement was done. */\n  visibleCount: number | null;\n  /** Whether at least one item does not fit and is collapsed. */\n  hasOverflow: boolean;\n  /** Whether one of the collapsed items contains the current page link. */\n  menuHasCurrentItem: boolean;\n}\n\ninterface UseCollapsingItemsReturn extends CollapsingItemsState {\n  listRef: RefObject<HTMLUListElement | null>;\n  moreRef: RefObject<HTMLDivElement | null>;\n}\n\nconst initialState: CollapsingItemsState = {\n  visibleCount: null,\n  hasOverflow: false,\n  menuHasCurrentItem: false,\n};\n\n/**\n * Observes the items of the list and computes how many of them fit into the\n * available width of the list's parent element. Items that do not fit are\n * hidden via `visibility: hidden` (removes them from the accessibility tree and\n * the tab order while keeping them measurable). The width of the \"more\" element\n * is reserved whenever items are collapsed, so it must always be rendered\n * (visually hidden when there is no overflow).\n */\nexport const useCollapsingItems = (): UseCollapsingItemsReturn => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const moreRef = useRef<HTMLDivElement>(null);\n\n  const [state, setState] = useState(initialState);\n\n  const update = useCallback(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const items = Array.from(list.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement,\n    );\n\n    const containerStyle = window.getComputedStyle(container);\n    const availableWidth =\n      container.clientWidth -\n      (parseFloat(containerStyle.paddingInlineStart) || 0) -\n      (parseFloat(containerStyle.paddingInlineEnd) || 0);\n\n    const visibleCount = getVisibleItemCount(\n      items.map((item) => item.getBoundingClientRect().width),\n      availableWidth,\n      more.getBoundingClientRect().width,\n    );\n\n    items.forEach((item, index) => {\n      item.style.visibility = index < visibleCount ? \"\" : \"hidden\";\n    });\n\n    const menuHasCurrentItem = items\n      .slice(visibleCount)\n      .some(\n        (item) =>\n          !!item.querySelector('[aria-current]:not([aria-current=\"false\"])'),\n      );\n\n    setState((previous) => {\n      const next: CollapsingItemsState = {\n        visibleCount,\n        hasOverflow: visibleCount < items.length,\n        menuHasCurrentItem,\n      };\n\n      const isUnchanged =\n        previous.visibleCount === next.visibleCount &&\n        previous.hasOverflow === next.hasOverflow &&\n        previous.menuHasCurrentItem === next.menuHasCurrentItem;\n\n      return isUnchanged ? previous : next;\n    });\n  }, []);\n\n  // Runs after every render (no dependency array): the rendered items may\n  // have changed, so the observed elements are re-collected and re-measured.\n  // `update()` only triggers a re-render when the computed state changed.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const more = moreRef.current;\n    const container = list?.parentElement;\n\n    if (!list || !more || !container) {\n      return;\n    }\n\n    const observer = createFrameResizeObserver(update);\n    observer.observe([container, more, ...list.children]);\n\n    update();\n\n    return () => observer.disconnect();\n  });\n\n  return { ...state, listRef, moreRef };\n};\n\nexport default useCollapsingItems;\n"],"mappings":";;;;;;AAmBA,IAAM,eAAqC;CACzC,cAAc;CACd,aAAa;CACb,oBAAoB;AACtB;;;;;;;;;AAUA,IAAa,2BAAqD;CAChE,MAAM,UAAU,OAAyB,IAAI;CAC7C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAE/C,MAAM,SAAS,kBAAkB;EAC/B,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,QAAQ,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QACrC,UAAgC,iBAAiB,WACpD;EAEA,MAAM,iBAAiB,OAAO,iBAAiB,SAAS;EACxD,MAAM,iBACJ,UAAU,eACT,WAAW,eAAe,kBAAkB,KAAK,MACjD,WAAW,eAAe,gBAAgB,KAAK;EAElD,MAAM,eAAe,oBACnB,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,KAAK,GACtD,gBACA,KAAK,sBAAsB,CAAC,CAAC,KAC/B;EAEA,MAAM,SAAS,MAAM,UAAU;GAC7B,KAAK,MAAM,aAAa,QAAQ,eAAe,KAAK;EACtD,CAAC;EAED,MAAM,qBAAqB,MACxB,MAAM,YAAY,CAAC,CACnB,MACE,SACC,CAAC,CAAC,KAAK,cAAc,8CAA4C,CACrE;EAEF,UAAU,aAAa;GACrB,MAAM,OAA6B;IACjC;IACA,aAAa,eAAe,MAAM;IAClC;GACF;GAOA,OAJE,SAAS,iBAAiB,KAAK,gBAC/B,SAAS,gBAAgB,KAAK,eAC9B,SAAS,uBAAuB,KAAK,qBAElB,WAAW;EAClC,CAAC;CACH,GAAG,CAAC,CAAC;CAKL,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,OAAO,QAAQ;EACrB,MAAM,YAAY,MAAM;EAExB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,WACrB;EAGF,MAAM,WAAW,0BAA0B,MAAM;EACjD,SAAS,QAAQ;GAAC;GAAW;GAAM,GAAG,KAAK;EAAQ,CAAC;EAEpD,OAAO;EAEP,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EAAE,GAAG;EAAO;EAAS;CAAQ;AACtC"}

package/dist/js/packages/components/src/components/Table/Table.mjs

@@ -1,28 +1,29 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import styles from './Table.module.scss.mjs';
-import { prefixedStyleClassname } from '../../lib/scss/selectors.mjs';
-
-const Table = (props) => {
-  const {
-    children,
-    className,
-    verticalAlign = "top",
-    layout = "auto",
-    minWidth,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.table,
-    verticalAlign !== "top" && prefixedStyleClassname(styles, "vertical-align-", verticalAlign),
-    styles[`layout-${layout}`],
-    className
-  );
-  return /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsx("div", { className: styles.tableScrollArea, style: { minWidth }, children: /* @__PURE__ */ jsx(Aria.Table, { className: rootClassName, ...rest, children }) }) });
+import { prefixedStyleClassname } from "../../lib/scss/selectors.mjs";
+import Table_module_default from "./Table.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Table/Table.tsx
+/** @flr-generate all */
+var Table = (props) => {
+	const { children, className, verticalAlign = "top", layout = "auto", minWidth, ...rest } = props;
+	const rootClassName = clsx(Table_module_default.table, verticalAlign !== "top" && prefixedStyleClassname(Table_module_default, "vertical-align-", verticalAlign), Table_module_default[`layout-${layout}`], className);
+	return /* @__PURE__ */ jsx("div", {
+		className: Table_module_default.tableContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: Table_module_default.tableScrollArea,
+			style: { minWidth },
+			children: /* @__PURE__ */ jsx(Aria.Table, {
+				className: rootClassName,
+				...rest,
+				children
+			})
+		})
+	});
 };
+//#endregion
+export { Table, Table as default };
 
-export { Table };
-//# sourceMappingURL=Table.mjs.map
+//# sourceMappingURL=Table.mjs.map