@mittwald/flow-react-components 0.1.0-alpha.103 → 0.1.0-alpha.105

package/dist/Tabs.js

@@ -24,25 +24,25 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
   collapsed: D
 }, G = () => {
   const s = h(), [n, r] = C(!1), o = B(null, (t) => {
-    l(), c(t);
-  }), a = ([
+    a(), c(t);
+  }), l = ([
     t
   ]) => {
     t && r(!t.isIntersecting);
   }, c = (t = o.current) => {
     if (t && t instanceof Element) {
-      const i = new IntersectionObserver(a, {
+      const i = new IntersectionObserver(l, {
         root: t.parentElement,
         // 1 = invoke callback when the element is 100% visible within the parent element
         threshold: 1
       });
       s.current = i, i.observe(t);
     }
-  }, l = () => {
+  }, a = () => {
     var t;
     (t = s.current) == null || t.disconnect();
   };
-  return M(() => (c(), l), [s.current]), {
+  return M(() => (c(), a), [s.current]), {
     ref: o,
     isOverflowing: n
   };
@@ -54,16 +54,16 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
   const { className: n, ...r } = s, o = m(n, d.tabTitle);
   return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }));
 }, V = (s) => {
-  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = p(), c = G(), l = c.isOverflowing, t = m(u.tabList, l && u.collapsed), i = (N) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, l = p(), c = G(), a = c.isOverflowing, t = m(u.tabList, a && u.collapsed), i = (N) => {
     const [T] = N;
     T && o(T);
-  }, v = /* @__PURE__ */ e.createElement(E.TabList, { className: u.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(f, { id: "Titles" })), g = l && /* @__PURE__ */ e.createElement(U, { id: a }), w = l && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
+  }, v = /* @__PURE__ */ e.createElement(E.TabList, { className: u.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(f, { id: "Titles" })), g = a && /* @__PURE__ */ e.createElement(U, { id: l }), w = a && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
     F,
     {
       variant: "soft",
       className: u.contextMenuButton,
       color: "secondary",
-      "aria-labelledby": a
+      "aria-labelledby": l
     },
     /* @__PURE__ */ e.createElement(A, null)
   ), /* @__PURE__ */ e.createElement(
@@ -78,24 +78,25 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
   ));
   return /* @__PURE__ */ e.createElement("div", { className: t }, v, g, w);
 }, de = S("Tabs", (s) => {
-  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: a, ...c } = s, l = m(k.tabs, r), [t, i] = C(
+  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: l, ...c } = s, a = m(k.tabs, r), [t, i] = C(
     o
   );
   return /* @__PURE__ */ e.createElement(P, null, n, /* @__PURE__ */ e.createElement(
     E.Tabs,
     {
-      className: l,
+      slot: null,
+      className: a,
       ...c,
       selectedKey: t,
       onSelectionChange: i,
-      disabledKeys: a
+      disabledKeys: l
     },
     /* @__PURE__ */ e.createElement(
       V,
       {
         selection: t,
         onContextMenuSelectionChange: i,
-        disabledKeys: a
+        disabledKeys: l
       }
     ),
     /* @__PURE__ */ e.createElement(f, { id: "Panels" })
@@ -103,8 +104,8 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
 }), x = I({
   id: "undefined"
 }), X = () => y(x), Y = x.Provider, fe = (s) => {
-  const { children: n, className: r, ...o } = s, { id: a } = X(), c = m(d.tabTitle, r);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: d.text }, n)), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { className: d.menuItem, id: a }, n)));
+  const { children: n, className: r, ...o } = s, { id: l } = X(), c = m(d.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: l, className: c }, (a) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: d.text }, n)), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, a.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { className: d.menuItem, id: l }, n)));
 }, Z = "flow--tabs--tab--tab-panel", _ = {
   tabPanel: Z
 }, Ee = (s) => {
@@ -112,13 +113,13 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
     children: n,
     className: r,
     shouldForceMount: o = !0,
-    id: a,
+    id: l,
     ...c
-  } = s, l = m(_.tabPanel, r), t = p(), i = a ?? t;
+  } = s, a = m(_.tabPanel, r), t = p(), i = l ?? t;
   return /* @__PURE__ */ e.createElement(b, { id: "Panels" }, /* @__PURE__ */ e.createElement(
     E.TabPanel,
     {
-      className: l,
+      className: a,
       shouldForceMount: o,
       id: i,
       ...c

package/dist/types/components/Tabs/stories/EdgeCases.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 export declare const DifferentHeight: Story;
+export declare const Nested: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.103",
+  "version": "0.1.0-alpha.105",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -251,7 +251,7 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.103",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.105",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.24.0",
     "@react-types/shared": "^3.23.0",
@@ -275,7 +275,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.103",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.105",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^18.3.4",
     "@storybook/addon-a11y": "^8.0.9",
@@ -351,5 +351,5 @@
       "optional": true
     }
   },
-  "gitHead": "b7cda35df81ede17cb5a04cb46c8e520c8c8ef34"
+  "gitHead": "cf45b5ec72aeb6ce8bfedf4ec94f86faa8b9b66e"
 }