@smwb/ui-react 2.8.0 → 2.9.0

package/dist/headless/components/navigation/sidebar/sidebar.js

@@ -1,39 +1,41 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import V, { forwardRef as g, useState as x } from "react";
-import k from "clsx";
-import { Ripple as z } from "../../base/ripple/ripple.js";
-import { Icon as $ } from "../../base/icon/icon.js";
-import { useControllableState as q } from "../../../hooks/useControllableState.js";
-const M = g(function({
-  className: o,
-  variant: d = "default",
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import g, { forwardRef as x, useState as z } from "react";
+import y from "clsx";
+import { Ripple as $ } from "../../base/ripple/ripple.js";
+import { Icon as q } from "../../base/icon/icon.js";
+import { useControllableState as B } from "../../../hooks/useControllableState.js";
+const O = x(function({
+  className: c,
+  variant: o = "default",
   menuItems: s,
-  activeItem: f,
+  activeItem: d,
   defaultActiveItem: t = null,
-  onActiveItemChange: n,
+  onActiveItemChange: i,
   collapsible: l = !1,
-  collapsed: m,
+  collapsed: b,
   defaultCollapsed: p = !1,
   onCollapsedChange: _,
   collapseToggleAriaLabel: v = "Toggle navigation",
-  ...u
-}, r) {
-  var N;
-  const i = f !== void 0, [y, C] = x(t), E = i ? f : y, [c, T] = q({
-    value: m,
+  contained: w = !1,
+  ...n
+}, f) {
+  var R;
+  const h = d !== void 0, [C, E] = z(t), T = h ? d : C, [r, j] = B({
+    value: b,
     defaultValue: p,
     onChange: _
-  }), h = l && c ? "compactMini" : d;
-  return /* @__PURE__ */ S(
+  }), N = l && r ? "compactMini" : o;
+  return /* @__PURE__ */ k(
     "aside",
     {
-      ref: r,
-      className: k("smwb-sidebar", o, `smwb-${h}`, {
+      ref: f,
+      className: y("smwb-sidebar", c, `smwb-${N}`, {
         "smwb-sidebar_collapsible": l,
-        "smwb-sidebar_collapsed": l && c
+        "smwb-sidebar_collapsed": l && r,
+        "smwb-sidebar_contained": w
       }),
-      ...u,
-      role: (N = u.role) != null ? N : "menubar",
+      ...n,
+      role: (R = n.role) != null ? R : "menubar",
       children: [
         l && /* @__PURE__ */ e("div", { className: "smwb-sidebar__collapse", children: /* @__PURE__ */ e(
           "button",
@@ -41,66 +43,66 @@ const M = g(function({
             type: "button",
             className: "smwb-sidebar__collapse-btn",
             "aria-label": v,
-            "aria-expanded": !c,
-            onClick: () => T(!c),
-            children: /* @__PURE__ */ e($, { name: c ? "chevron_right" : "chevron_left", size: 20 })
+            "aria-expanded": !r,
+            onClick: () => j(!r),
+            children: /* @__PURE__ */ e(q, { name: r ? "chevron_right" : "chevron_left", size: 20 })
           }
         ) }),
-        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, b) => /* @__PURE__ */ e(
-          B,
+        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, m) => /* @__PURE__ */ e(
+          F,
           {
             as: a.as,
-            isActive: E === b,
-            onClick: (j) => {
-              var R;
-              i || C(b), n == null || n(b), (R = a.onClick) == null || R.call(a, j);
+            isActive: T === m,
+            onClick: (V) => {
+              var S;
+              h || E(m), i == null || i(m), (S = a.onClick) == null || S.call(a, V);
             },
             icon: a.icon,
             title: a.title,
             href: a.href,
-            variant: h
+            variant: N
           },
-          b
+          m
         ))) })
       ]
     }
   );
 });
-function B({
-  isActive: w,
-  icon: o,
-  title: d,
+function F({
+  isActive: u,
+  icon: c,
+  title: o,
   as: s = "div",
-  href: f,
+  href: d,
   onMouseDown: t,
-  variant: n,
+  variant: i,
   ...l
 }) {
-  const m = V.useRef(null), p = (r) => {
-    t == null || t(r);
-  }, _ = (r) => {
-    var i;
-    (i = m.current) == null || i.onRipple(r);
-  }, v = /* @__PURE__ */ e(z, { actionRef: m });
-  return /* @__PURE__ */ S(
+  const b = g.useRef(null), p = (n) => {
+    t == null || t(n);
+  }, _ = (n) => {
+    var f;
+    (f = b.current) == null || f.onRipple(n);
+  }, v = /* @__PURE__ */ e($, { actionRef: b });
+  return /* @__PURE__ */ k(
     s,
     {
-      href: f,
+      href: d,
       role: "menuitem",
-      className: k("sidebar__nav__item", "smwb-nav-item", n, { active: w }),
+      className: y("sidebar__nav__item", "smwb-nav-item", i, { active: u }),
       onMouseDown: p,
       onPointerDown: _,
       ...l,
       children: [
-        o && /* @__PURE__ */ e("span", { className: "smwb-nav-item__icon", children: o }),
-        d && /* @__PURE__ */ e("span", { className: "smwb-nav-item__title", children: d }),
+        c && /* @__PURE__ */ e("span", { className: "smwb-nav-item__icon", children: c }),
+        o && /* @__PURE__ */ e("span", { className: "smwb-nav-item__title", children: o }),
         v
       ]
     }
   );
 }
 export {
-  M as Sidebar,
-  M as default
+  O as Sidebar,
+  O as default
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/headless/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n}\n\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n      })}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={collapseToggleAriaLabel}\n            aria-expanded={!collapsed}\n            onClick={() => setCollapsed(!collapsed)}\n          >\n            <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","_a","jsx","Icon","item","idx","MenuItem","e","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  /**\n   * Place the rail inside its container instead of pinning it to the window.\n   * The sidebar stays in the page flow (`position: relative`), keeps its\n   * variant width as a non-shrinking flex item and scrolls a long menu inside\n   * itself, so sibling content flows beside it and reflows when it collapses.\n   * Give the container a definite height (e.g. a fixed-height flex row) to\n   * make the rail fill it; with an auto-height container the rail sizes\n   * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.\n   */\n  contained?: boolean;\n}\n\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    contained = false,\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n        \"smwb-sidebar_contained\": contained,\n      })}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={collapseToggleAriaLabel}\n            aria-expanded={!collapsed}\n            onClick={() => setCollapsed(!collapsed)}\n          >\n            <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","contained","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","_a","jsx","Icon","item","idx","MenuItem","e","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":";;;;;;AAsCO,MAAMA,IAAUC,EAAsC,SAC3D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAWC;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,mBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAeX,MAAmB,QAClC,CAACY,GAAiBC,CAAkB,IAAIC,EAAwBb,CAAiB,GACjFc,IAAaJ,IAAeX,IAAiBY,GAE7C,CAACI,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOd;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAIKa,IAAmBhB,KAAea,IAAY,gBAAgBlB;AAEpE,SACE,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAV;AAAA,MACA,WAAWW,EAAG,gBAAgBxB,GAAW,QAAQsB,CAAgB,IAAI;AAAA,QACnE,4BAA4BhB;AAAA,QAC5B,0BAA0BA,KAAea;AAAA,QACzC,0BAA0BR;AAAA,MAAA,CAC3B;AAAA,MACA,GAAGC;AAAA,MAEJ,OAAMa,IAAAb,EAAK,SAAL,OAAAa,IAAa;AAAA,MAElB,UAAA;AAAA,QAAAnB,KACC,gBAAAoB,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYhB;AAAA,YACZ,iBAAe,CAACS;AAAA,YAChB,SAAS,MAAMC,EAAa,CAACD,CAAS;AAAA,YAEtC,4BAACQ,GAAA,EAAK,MAAMR,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,GAExE;AAAA,QAEF,gBAAAO,EAAC,SAAI,WAAU,qBACZ,gBACCxB,KAAA,gBAAAA,EAAW,IAAI,CAAC0B,GAAMC,MACpB,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,IAAIF,EAAK;AAAA,YACT,UAAUV,MAAeW;AAAA,YACzB,SAAS,CAACE,MAAM;;AACd,cAAKjB,KACHE,EAAmBa,CAAG,GAExBxB,KAAA,QAAAA,EAAqBwB,KACrBJ,IAAAG,EAAK,YAAL,QAAAH,EAAA,KAAAG,GAAeG;AAAA,YACjB;AAAA,YACA,MAAMH,EAAK;AAAA,YACX,OAAOA,EAAK;AAAA,YACZ,MAAMA,EAAK;AAAA,YACX,SAASN;AAAA,UAAA;AAAA,UAbJO;AAAA,QAAA,IAeR,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAcD,SAASC,EAAS;AAAA,EAChB,UAAAE;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,MAAAC;AAAA,EACA,aAAaC;AAAA,EACb,SAAApC;AAAA,EACA,GAAGW;AACL,GAAkB;AAChB,QAAM0B,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA4C;AAC/D,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAA8C;;AACnE,KAAAhB,IAAAa,EAAU,YAAV,QAAAb,EAAmB,SAASgB;AAAA,EAC9B,GAEME,IAAgB,gBAAAjB,EAACkB,GAAA,EAAO,WAAWN,EAAA,CAAW;AAIpD,SACE,gBAAAf;AAAA,IAHkBY;AAAA,IAGjB;AAAA,MACC,MAAAC;AAAA,MACA,MAAK;AAAA,MACL,WAAWZ,EAAG,sBAAsB,iBAAiBvB,GAAS,EAAE,QAAQ+B,GAAU;AAAA,MAClF,aAAAQ;AAAA,MACA,eAAAE;AAAA,MACC,GAAG9B;AAAA,MAEH,UAAA;AAAA,QAAAqB,KAAQ,gBAAAP,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAO,GAAK;AAAA,QACpDC,KAAS,gBAAAR,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAQ,GAAM;AAAA,QACvDS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/headless/components/navigation/tabs/tab/tab.js

@@ -1,55 +1,134 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import p from "react";
-import j from "clsx";
-import { Ripple as k } from "../../../base/ripple/ripple.js";
-const g = p.forwardRef(function(w, u) {
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import r from "react";
+import v from "clsx";
+import { Ripple as X } from "../../../base/ripple/ripple.js";
+import { Icon as Y } from "../../../base/icon/icon.js";
+import { useSafeLayoutEffect as Z } from "../../../../hooks/useSafeLayoutEffect.js";
+const $ = (e) => e.ctrlKey || e.metaKey || e.altKey || e.shiftKey, g = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', tt = '[role^="menuitem"]:not([aria-disabled="true"])', et = (e) => {
+  var u, f, d;
+  for (const i of (f = (u = e == null ? void 0 : e.getAttribute("aria-controls")) == null ? void 0 : u.split(/\s+/)) != null ? f : []) {
+    const s = i ? (d = e == null ? void 0 : e.ownerDocument.getElementById(i)) == null ? void 0 : d.querySelector(tt) : null;
+    if (s) {
+      s.focus({ preventScroll: !0 });
+      return;
+    }
+  }
+}, lt = r.forwardRef(function(u, f) {
   const {
-    className: R,
-    label: o,
-    isActive: e = !1,
-    contentRef: _,
-    icon: i,
-    stacked: h = !1,
-    tag: s,
-    disabled: t,
-    onMouseDown: n,
+    className: d,
+    label: i,
+    isActive: s = !1,
+    contentRef: G,
+    icon: N,
+    stacked: L = !1,
+    tag: y,
+    href: T,
+    tabStop: w,
+    disabled: o,
+    // `Tabs` passes this when the row is reorderable. It belongs to the item, so it is taken out of
+    // the spread below and placed on the wrapper (or on the bare tab when there is no wrapper).
+    draggable: I,
+    closable: n,
+    onClose: k,
+    closeLabel: O = "Close tab",
+    actions: b,
+    onClick: R,
+    onKeyDown: _,
+    onMouseDown: D,
     // The tab sets this on its root too; its own handler calls the caller's first.
-    onPointerDown: c,
-    ...b
-  } = w, r = p.useRef(null), x = (a) => {
-    n == null || n(a);
-  }, N = (a) => {
-    var m;
-    c == null || c(a), (m = r.current) == null || m.onRipple(a);
-  }, d = s != null ? s : s || "button", T = j("smwb-tab", R, {
-    "smwb-tab--active": e,
-    "smwb-tab--stacked": h,
-    "smwb-tab--disabled": t
-  });
-  return /* @__PURE__ */ f(
-    d,
+    onPointerDown: M,
+    ...S
+  } = u, K = r.useRef(null), q = r.useRef(null), A = r.useRef(null), [B, W] = r.useState(0), m = y != null ? y : T !== void 0 ? "a" : "button", E = !!o && m !== "button", z = (t) => {
+    if (E) {
+      t.preventDefault();
+      return;
+    }
+    R == null || R(t);
+  }, p = (t, a) => k == null ? void 0 : k(t, a), h = typeof b == "function" ? b({ close: (t) => p(t, "actions") }) : b, x = h != null && h !== !1;
+  Z(() => {
+    B > 0 && et(A.current);
+  }, [B]);
+  const U = (t) => {
+    var a;
+    if (_ == null || _(t), !(o || t.defaultPrevented || t.target !== t.currentTarget)) {
+      if (m !== "button" && t.key === " ")
+        t.preventDefault(), t.currentTarget.click();
+      else if (n && (t.key === "Delete" || t.key === "Backspace") && !$(t))
+        t.preventDefault(), p(t, "key");
+      else if (x && (t.key === "ContextMenu" || t.key === "F10" && t.shiftKey)) {
+        const l = (a = q.current) == null ? void 0 : a.querySelector(g);
+        l && (t.preventDefault(), l.focus(), l.getAttribute("aria-expanded") !== "true" && l.click(), A.current = l, W((V) => V + 1));
+      }
+    }
+  }, H = (t) => {
+    D == null || D(t), t.button === 1 && n && !o && (t.preventDefault(), p(t, "middleClick"));
+  }, J = (t) => {
+    var a;
+    M == null || M(t), (a = K.current) == null || a.onRipple(t);
+  }, P = [
+    S["aria-keyshortcuts"],
+    !o && n ? "Delete Backspace" : void 0,
+    !o && x ? "Shift+F10 ContextMenu" : void 0,
+    !o && n ? "Meta+W Control+W" : void 0,
+    o ? void 0 : "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]"
+  ].filter(Boolean).join(" ") || void 0, Q = v("smwb-tab", d, {
+    "smwb-tab--active": s,
+    "smwb-tab--stacked": L,
+    "smwb-tab--disabled": o
+  }), F = n !== void 0 || b !== void 0, j = /* @__PURE__ */ C(
+    m,
     {
-      ...b,
-      ref: u,
-      className: T,
-      onMouseDown: x,
-      onPointerDown: N,
+      ...S,
+      ref: f,
+      className: Q,
+      draggable: F ? void 0 : I,
+      href: E ? void 0 : T,
+      target: void 0,
+      onClick: z,
+      onKeyDown: U,
+      onMouseDown: H,
+      onPointerDown: J,
       role: "tab",
-      "aria-selected": e,
-      "aria-disabled": t || b["aria-disabled"],
-      tabIndex: e ? 0 : -1,
-      disabled: d === "button" ? t : void 0,
+      "aria-selected": s,
+      "aria-disabled": o || S["aria-disabled"],
+      "aria-keyshortcuts": P,
+      tabIndex: (w != null ? w : s) ? 0 : -1,
+      disabled: m === "button" ? o : void 0,
       children: [
-        /* @__PURE__ */ f("span", { className: "smwb-tab__content", ref: _, children: [
-          i && /* @__PURE__ */ l("span", { className: "smwb-tab__icon", children: i }),
-          o && /* @__PURE__ */ l("span", { className: "smwb-tab__text-label", children: o })
+        /* @__PURE__ */ C("span", { className: "smwb-tab__content", ref: G, children: [
+          N && /* @__PURE__ */ c("span", { className: "smwb-tab__icon", "aria-hidden": "true", children: N }),
+          i && /* @__PURE__ */ c("span", { className: "smwb-tab__text-label", children: i })
         ] }),
-        /* @__PURE__ */ l(k, { actionRef: r, classes: { child: "tab__ripple-child" } })
+        /* @__PURE__ */ c(X, { actionRef: K, classes: { child: "tab__ripple-child" } })
       ]
     }
   );
+  return F ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: v("smwb-tab-item", { "smwb-tab-item--active": s, "smwb-tab-item--disabled": o }),
+      draggable: I,
+      children: [
+        j,
+        x && /* @__PURE__ */ c("span", { className: "smwb-tab__actions", ref: q, children: h }),
+        n && /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tab__close",
+            tabIndex: -1,
+            "aria-label": O,
+            disabled: o,
+            onMouseDown: (t) => t.preventDefault(),
+            onClick: (t) => p(t, "button"),
+            children: /* @__PURE__ */ c(Y, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  ) : j;
 });
 export {
-  g as Tab
+  lt as Tab
 };
 //# sourceMappingURL=tab.js.map

package/dist/headless/components/navigation/tabs/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabIndex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || rest[\"aria-disabled\"]}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","onPointerDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;AAgBO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA;AAAA,IAEb,eAAeC;AAAA,IACf,GAAGC;AAAA,EAAA,IACDZ,GACEa,IAAYd,EAAM,OAAyB,IAAI,GAE/Ce,IAAc,CAACC,MAAmE;AACtF,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,IAAAJ,KAAA,QAAAA,EAAoBI,KACpBE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMV,KAAA,OAAAA,IAAQA,KAAO,UACrBW,IAAUC,EAAG,YAAYlB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAY;AAAA,IAACH;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,KAAAX;AAAA,MACA,WAAWkB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MAIA,MAAM;AAAA,MACN,iBAAeZ;AAAA,MACf,iBAAeK,KAAYG,EAAK,eAAe;AAAA,MAC/C,UAAUR,IAAW,IAAI;AAAA,MACzB,UAAUc,MAAQ,WAAWT,IAAW;AAAA,MAExC,UAAA;AAAA,QAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKhB,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAhB,GAAK;AAAA,UAC/CH,KAAS,gBAAAmB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAnB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAmB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}
+{"version":3,"file":"tab.js","sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\nimport Icon from \"../../../base/icon/icon\";\nimport { useSafeLayoutEffect } from \"../../../../hooks/useSafeLayoutEffect\";\n\n/**\n * What asked for a tab to close: its close button, Delete or Backspace or a middle click on it, or\n * its `actions`.\n */\nexport type TabCloseReason = \"button\" | \"key\" | \"middleClick\" | \"actions\";\n\n/** What a function given as `actions` receives. */\nexport interface TabActionsApi {\n  /**\n   * Ask for the tab to close, as its close button does: `onClose` is called with this event and the\n   * reason \"actions\", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus\n   * is in a menu drawn outside the row. Call it from the item that closes the tab (\"Terminate\"), with\n   * that item's event. It works on a tab that is not `closable`.\n   */\n  close: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  /**\n   * Whether the tab is the one in the page's Tab order (`tabIndex` 0, the others -1). `Tabs` sets\n   * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\n   * is the stop while `isActive`.\n   */\n  tabStop?: boolean;\n  contentRef?: React.Ref<unknown>;\n  /**\n   * Content before the label: a status marker (running, done, failed). The slot is decorative, so\n   * the tab's accessible name stays the label alone and nothing is read out twice. An icon that has\n   * to be announced belongs in `label`, where you can give it words.\n   */\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */\n  tag?: React.ElementType;\n  /**\n   * Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\n   * no `target`: a tab never opens another window), so it opens in place and middle click, copy\n   * link and the like work. A router takes over the plain click in `onClick` with\n   * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n   * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n   * \"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\n   * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\n   * editor, and its default is prevented so nothing opens.\n   */\n  href?: string;\n  disabled?: boolean;\n  /**\n   * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n   * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A middle\n   * press on the tab asks for the same thing (`reason` \"middleClick\") without selecting it. The tab\n   * does not close itself: `onClose` asks for it and the owner removes the `Tab`. The button is a\n   * sibling of the tab, not inside its `role=\"tab\"`, so the tab's accessible name is its label alone.\n   * It is out of the Tab order (`tabIndex` -1), so the row keeps one tab stop, and a press on it takes\n   * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\n   * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\n   * has a disabled button.\n   *\n   * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\n   * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\n   * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n   * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n   *\n   * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n   * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\n   * recreates the tab and drops its focus.\n   */\n  closable?: boolean;\n  /**\n   * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n   * \"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\n   * prevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\n   * or the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\n   * the `Tab`.\n   */\n  onClose?: (event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => void;\n  /** Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\"). */\n  closeLabel?: string;\n  /**\n   * Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\n   * or any control. Give a function to get `{ close }` (see `TabActionsApi`). Like the close button\n   * the content is a sibling of the tab, so it is not part of the tab's name; the tab's own `ref`,\n   * `className` and handlers stay on the `role=\"tab\"` element. It stays in the accessibility tree as\n   * written, inside the tab list (see `closable`).\n   *\n   * The row has one tab stop, so give the trigger `tabIndex={-1}`. Shift+F10 or the Menu key on the\n   * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\n   * and clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\n   * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then\n   * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\n   * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n   *\n   * The row clips what overflows it: draw the menu in a portal, anchored to the trigger and with the\n   * `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with its\n   * event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab removed\n   * some other way leaves focus on the page.\n   */\n  actions?: React.ReactNode | ((api: TabActionsApi) => React.ReactNode);\n}\n\nconst hasModifier = (event: React.KeyboardEvent): boolean =>\n  event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;\n\n/** What the Menu key and Shift+F10 stand for: the actions' trigger. */\nconst ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role=\"button\"]:not([aria-disabled=\"true\"]), [tabindex]';\n\n/** The item of an opened menu that takes focus first. */\nconst FIRST_MENU_ITEM = '[role^=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n/** Focus the first item of the popup `trigger` names in `aria-controls`, if it is there. */\nconst focusPopupOf = (trigger: HTMLElement | null): void => {\n  for (const id of trigger?.getAttribute(\"aria-controls\")?.split(/\\s+/) ?? []) {\n    const item = id ? trigger?.ownerDocument.getElementById(id)?.querySelector<HTMLElement>(FIRST_MENU_ITEM) : null;\n    if (item) {\n      // The menu may not be placed yet: a scroll to it would jump to the corner it starts in.\n      item.focus({ preventScroll: true });\n      return;\n    }\n  }\n};\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    href,\n    tabStop,\n    disabled,\n    // `Tabs` passes this when the row is reorderable. It belongs to the item, so it is taken out of\n    // the spread below and placed on the wrapper (or on the bare tab when there is no wrapper).\n    draggable,\n    closable,\n    onClose,\n    closeLabel = \"Close tab\",\n    actions: actionsProp,\n    onClick: onClickProp,\n    onKeyDown: onKeyDownProp,\n    onMouseDown: onMouseDownProp,\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n  const actionsRef = React.useRef<HTMLSpanElement>(null);\n  // The trigger the Menu key opened, and how many times it asked for focus to move into its popup.\n  const menuTriggerRef = React.useRef<HTMLElement | null>(null);\n  const [menuFocusRequest, setMenuFocusRequest] = React.useState(0);\n\n  const Tag = tag ?? (href !== undefined ? \"a\" : \"button\");\n  // Anything but a button is not disabled by the attribute: its clicks are swallowed here.\n  const inert = Boolean(disabled) && Tag !== \"button\";\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    if (inert) {\n      event.preventDefault();\n      return;\n    }\n    onClickProp?.(event);\n  };\n\n  const requestClose = (event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => onClose?.(event, reason);\n  const actions =\n    typeof actionsProp === \"function\" ? actionsProp({ close: (event) => requestClose(event, \"actions\") }) : actionsProp;\n  const hasActions = actions !== undefined && actions !== null && actions !== false;\n\n  // The popup opens in the commit that follows the key press, and focus moves into it once it is there.\n  useSafeLayoutEffect(() => {\n    if (menuFocusRequest > 0) {\n      focusPopupOf(menuTriggerRef.current);\n    }\n  }, [menuFocusRequest]);\n\n  // A button clicks on Enter and Space by itself, a link on Enter only: Space does it here.\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onKeyDownProp?.(event);\n    if (disabled || event.defaultPrevented || event.target !== event.currentTarget) {\n      return;\n    }\n    if (Tag !== \"button\" && event.key === \" \") {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (closable && (event.key === \"Delete\" || event.key === \"Backspace\") && !hasModifier(event)) {\n      event.preventDefault();\n      requestClose(event, \"key\");\n    } else if (hasActions && (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey))) {\n      // The Menu key, or Shift+F10: the keyboard's right click. The trigger takes focus first, so\n      // the menu it opens hands focus back to it on Escape.\n      const trigger = actionsRef.current?.querySelector<HTMLElement>(ACTIONS_TRIGGER);\n      if (trigger) {\n        event.preventDefault();\n        trigger.focus();\n        // The keys mean \"open\": a menu that already is open is not toggled shut.\n        if (trigger.getAttribute(\"aria-expanded\") !== \"true\") {\n          trigger.click();\n        }\n        menuTriggerRef.current = trigger;\n        setMenuFocusRequest((count) => count + 1);\n      }\n    }\n  };\n\n  // Middle press on a closable tab closes it, as in an editor: never a selection, and its default is\n  // prevented so neither the autoscroll nor, on a link tab, the browser's \"open in a new tab\" answers.\n  // A caller's `onMouseDown` cannot take the press away — it runs first, then the close is requested\n  // whatever it did to the event. Same in Solid; only `closable` and not `disabled` gate it.\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n    if (event.button === 1 && closable && !disabled) {\n      event.preventDefault();\n      requestClose(event, \"middleClick\");\n    }\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  // What the tab answers to, for assistive technology; the caller's own list is kept.\n  // The chords are best-effort: browsers reserve Mod+W and Mod+Shift+[/] in a page of\n  // their own tabs, and they bite only in an embedded webview.\n  const keyshortcuts =\n    [\n      rest[\"aria-keyshortcuts\"],\n      !disabled && closable ? \"Delete Backspace\" : undefined,\n      !disabled && hasActions ? \"Shift+F10 ContextMenu\" : undefined,\n      !disabled && closable ? \"Meta+W Control+W\" : undefined,\n      !disabled ? \"Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  // The item is the wrapper when the tab has a close button or actions beside it, and the tab itself\n  // when it has neither. It, not the `role=\"tab\"` element, is the drag surface of a reorderable row.\n  const wrapped = closable !== undefined || actionsProp !== undefined;\n\n  const tab = (\n    <Tag\n      {...rest}\n      ref={ref}\n      className={classes}\n      draggable={wrapped ? undefined : draggable}\n      // A disabled link has no href, so it is no link to follow or to focus.\n      href={inert ? undefined : href}\n      // A tab opens in place, whatever the caller passed.\n      target={undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabIndex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || rest[\"aria-disabled\"]}\n      aria-keyshortcuts={keyshortcuts}\n      tabIndex={(tabStop ?? isActive) ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && (\n          <span className=\"smwb-tab__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n\n  // A tab given neither `closable` nor `actions` is the bare element, as it always was.\n  if (!wrapped) {\n    return tab;\n  }\n\n  return (\n    <div\n      className={cn(\"smwb-tab-item\", { \"smwb-tab-item--active\": isActive, \"smwb-tab-item--disabled\": disabled })}\n      draggable={draggable}\n    >\n      {tab}\n      {hasActions && (\n        <span className=\"smwb-tab__actions\" ref={actionsRef}>\n          {actions}\n        </span>\n      )}\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"smwb-tab__close\"\n          // Out of the Tab order, so the row keeps its one tab stop; Delete on the tab closes it.\n          tabIndex={-1}\n          aria-label={closeLabel}\n          disabled={disabled}\n          // A press does not take focus from where it is: from the tab being closed, or the page.\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={(event) => requestClose(event, \"button\")}\n        >\n          <Icon name=\"close\" size={16} />\n        </button>\n      )}\n    </div>\n  );\n});\n"],"names":["hasModifier","event","ACTIONS_TRIGGER","FIRST_MENU_ITEM","focusPopupOf","trigger","id","_b","_a","item","_c","Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","href","tabStop","disabled","draggable","closable","onClose","closeLabel","actionsProp","onClickProp","onKeyDownProp","onMouseDownProp","onPointerDownProp","rest","rippleRef","actionsRef","menuTriggerRef","menuFocusRequest","setMenuFocusRequest","Tag","inert","onClick","requestClose","reason","actions","hasActions","useSafeLayoutEffect","onKeyDown","count","onMouseDown","onPointerDown","keyshortcuts","classes","cn","wrapped","tab","jsxs","jsx","Ripple","Icon"],"mappings":";;;;;;AA2GA,MAAMA,IAAc,CAACC,MACnBA,EAAM,WAAWA,EAAM,WAAWA,EAAM,UAAUA,EAAM,UAGpDC,IAAkB,2FAGlBC,KAAkB,kDAGlBC,KAAe,CAACC,MAAsC;;AAC1D,aAAWC,MAAMC,KAAAC,IAAAH,KAAA,gBAAAA,EAAS,aAAa,qBAAtB,gBAAAG,EAAwC,MAAM,WAA9C,OAAAD,IAAwD,IAAI;AAC3E,UAAME,IAAOH,KAAKI,IAAAL,KAAA,gBAAAA,EAAS,cAAc,eAAeC,OAAtC,gBAAAI,EAA2C,cAA2BP,MAAmB;AAC3G,QAAIM,GAAM;AAER,MAAAA,EAAK,MAAM,EAAE,eAAe,GAAA,CAAM;AAClC;AAAA,IACF;AAAA,EACF;AACF,GAEaE,KAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA;AAAA;AAAA,IAGA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAASC;AAAA,IACT,SAASC;AAAA,IACT,WAAWC;AAAA,IACX,aAAaC;AAAA;AAAA,IAEb,eAAeC;AAAA,IACf,GAAGC;AAAA,EAAA,IACDrB,GACEsB,IAAYvB,EAAM,OAAyB,IAAI,GAC/CwB,IAAaxB,EAAM,OAAwB,IAAI,GAE/CyB,IAAiBzB,EAAM,OAA2B,IAAI,GACtD,CAAC0B,GAAkBC,CAAmB,IAAI3B,EAAM,SAAS,CAAC,GAE1D4B,IAAMnB,KAAA,OAAAA,IAAQC,MAAS,SAAY,MAAM,UAEzCmB,IAAQ,EAAQjB,KAAagB,MAAQ,UAErCE,IAAU,CAACzC,MAAmE;AAClF,QAAIwC,GAAO;AACT,MAAAxC,EAAM,eAAA;AACN;AAAA,IACF;AACA,IAAA6B,KAAA,QAAAA,EAAc7B;AAAA,EAChB,GAEM0C,IAAe,CAAC1C,GAA0C2C,MAA2BjB,KAAA,gBAAAA,EAAU1B,GAAO2C,IACtGC,IACJ,OAAOhB,KAAgB,aAAaA,EAAY,EAAE,OAAO,CAAC5B,MAAU0C,EAAa1C,GAAO,SAAS,EAAA,CAAG,IAAI4B,GACpGiB,IAAsCD,KAAY,QAAQA,MAAY;AAG5E,EAAAE,EAAoB,MAAM;AACxB,IAAIT,IAAmB,KACrBlC,GAAaiC,EAAe,OAAO;AAAA,EAEvC,GAAG,CAACC,CAAgB,CAAC;AAGrB,QAAMU,IAAY,CAAC/C,MAAsE;;AAEvF,QADA8B,KAAA,QAAAA,EAAgB9B,IACZ,EAAAuB,KAAYvB,EAAM,oBAAoBA,EAAM,WAAWA,EAAM;AAGjE,UAAIuC,MAAQ,YAAYvC,EAAM,QAAQ;AACpC,QAAAA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA;AAAA,eACXyB,MAAazB,EAAM,QAAQ,YAAYA,EAAM,QAAQ,gBAAgB,CAACD,EAAYC,CAAK;AAChG,QAAAA,EAAM,eAAA,GACN0C,EAAa1C,GAAO,KAAK;AAAA,eAChB6C,MAAe7C,EAAM,QAAQ,iBAAkBA,EAAM,QAAQ,SAASA,EAAM,WAAY;AAGjG,cAAMI,KAAUG,IAAA4B,EAAW,YAAX,gBAAA5B,EAAoB,cAA2BN;AAC/D,QAAIG,MACFJ,EAAM,eAAA,GACNI,EAAQ,MAAA,GAEJA,EAAQ,aAAa,eAAe,MAAM,UAC5CA,EAAQ,MAAA,GAEVgC,EAAe,UAAUhC,GACzBkC,EAAoB,CAACU,MAAUA,IAAQ,CAAC;AAAA,MAE5C;AAAA;AAAA,EACF,GAMMC,IAAc,CAACjD,MAAmE;AACtF,IAAA+B,KAAA,QAAAA,EAAkB/B,IACdA,EAAM,WAAW,KAAKyB,KAAY,CAACF,MACrCvB,EAAM,eAAA,GACN0C,EAAa1C,GAAO,aAAa;AAAA,EAErC,GAGMkD,IAAgB,CAAClD,MAAqE;;AAC1F,IAAAgC,KAAA,QAAAA,EAAoBhC,KACpBO,IAAA2B,EAAU,YAAV,QAAA3B,EAAmB,SAASP;AAAA,EAC9B,GAKMmD,IACJ;AAAA,IACElB,EAAK,mBAAmB;AAAA,IACxB,CAACV,KAAYE,IAAW,qBAAqB;AAAA,IAC7C,CAACF,KAAYsB,IAAa,0BAA0B;AAAA,IACpD,CAACtB,KAAYE,IAAW,qBAAqB;AAAA,IAC5CF,IAAyE,SAA9D;AAAA,EAA8D,EAEzE,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZ6B,IAAUC,EAAG,YAAYvC,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBI;AAAA,EAAA,CACvB,GAIK+B,IAAU7B,MAAa,UAAaG,MAAgB,QAEpD2B,IACJ,gBAAAC;AAAA,IAACjB;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,KAAApB;AAAA,MACA,WAAWuC;AAAA,MACX,WAAWE,IAAU,SAAY9B;AAAA,MAEjC,MAAMgB,IAAQ,SAAYnB;AAAA,MAE1B,QAAQ;AAAA,MACR,SAAAoB;AAAA,MACA,WAAAM;AAAA,MACA,aAAAE;AAAA,MACA,eAAAC;AAAA,MAIA,MAAM;AAAA,MACN,iBAAelC;AAAA,MACf,iBAAeO,KAAYU,EAAK,eAAe;AAAA,MAC/C,qBAAmBkB;AAAA,MACnB,WAAW7B,KAAA,OAAAA,IAAWN,KAAY,IAAI;AAAA,MACtC,UAAUuB,MAAQ,WAAWhB,IAAW;AAAA,MAExC,UAAA;AAAA,QAAA,gBAAAiC,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKvC,GACtC,UAAA;AAAA,UAAAC,uBACE,QAAA,EAAK,WAAU,kBAAiB,eAAY,QAC1C,UAAAA,GACH;AAAA,UAEDH,KAAS,gBAAA0C,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA1C,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAA0C,EAACC,KAAO,WAAWxB,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAK3E,SAAKoB,IAKH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAG,iBAAiB,EAAE,yBAAyBrC,GAAU,2BAA2BO,GAAU;AAAA,MACzG,WAAAC;AAAA,MAEC,UAAA;AAAA,QAAA+B;AAAA,QACAV,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKtB,GACtC,UAAAS,GACH;AAAA,QAEDnB,KACC,gBAAAgC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAEV,UAAU;AAAA,YACV,cAAY9B;AAAA,YACZ,UAAAJ;AAAA,YAEA,aAAa,CAACvB,MAAUA,EAAM,eAAA;AAAA,YAC9B,SAAS,CAACA,MAAU0C,EAAa1C,GAAO,QAAQ;AAAA,YAEhD,UAAA,gBAAAyD,EAACE,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B;AAAA,IAAA;AAAA,EAAA,IA3BGJ;AA+BX,CAAC;"}

package/dist/headless/components/navigation/tabs/tabPanel/tabPanel.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import o from "react";
+import m from "clsx";
+import { TabsContext as c } from "../tabsContext.js";
+const u = o.forwardRef(function(r, t) {
+  const { index: a, className: d, children: l, ...n } = r, e = o.useContext(c);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      id: e == null ? void 0 : e.panelId(a),
+      "aria-labelledby": e == null ? void 0 : e.tabId(a),
+      tabIndex: 0,
+      ...n,
+      ref: t,
+      className: m("smwb-tab-panel", d),
+      role: "tabpanel",
+      hidden: e ? e.value !== a : n.hidden,
+      children: l
+    }
+  );
+});
+export {
+  u as TabPanel
+};
+//# sourceMappingURL=tabPanel.js.map

package/dist/headless/components/navigation/tabs/tabPanel/tabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabPanel.js","sources":["../../../../../../src/components/navigation/tabs/tabPanel/tabPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { TabsContext } from \"../tabsContext\";\n\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\n   * shows while that tab is selected and is hidden otherwise.\n   */\n  index: number;\n  /** Extra class on the panel. */\n  className?: string;\n  /** The panel's content. It stays in the document while the panel is hidden. */\n  children?: React.ReactNode;\n}\n\n/**\n * The content of one tab. Give it to the `panels` of `Tabs`, which links it to its tab: the panel\n * is `aria-labelledby` the tab and the tab `aria-controls` the panel. A panel is `role=\"tabpanel\"`\n * and a tab stop of its own (`tabIndex={0}`), so Tab moves from the tab list to the panel. A panel\n * placed anywhere else is not linked to any tabs and is always shown (its `hidden` is yours).\n */\nexport const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(props, ref) {\n  const { index, className, children, ...rest } = props;\n  const tabs = React.useContext(TabsContext);\n\n  return (\n    <div\n      // Yours win: a TabPanel outside Tabs `panels` has no ids to give, and a caller's\n      // `id`, `aria-labelledby` or `tabIndex` replaces the linked ones.\n      id={tabs?.panelId(index)}\n      aria-labelledby={tabs?.tabId(index)}\n      tabIndex={0}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-tab-panel\", className)}\n      role=\"tabpanel\"\n      hidden={tabs ? tabs.value !== index : rest.hidden}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["TabPanel","React","props","ref","index","className","children","rest","tabs","TabsContext","jsx","cn"],"mappings":";;;;AAsBO,MAAMA,IAAWC,EAAM,WAA0C,SAAkBC,GAAOC,GAAK;AACpG,QAAM,EAAE,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAASL,GAC1CM,IAAOP,EAAM,WAAWQ,CAAW;AAEzC,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAGC,IAAIF,KAAA,gBAAAA,EAAM,QAAQJ;AAAA,MAClB,mBAAiBI,KAAA,gBAAAA,EAAM,MAAMJ;AAAA,MAC7B,UAAU;AAAA,MACT,GAAGG;AAAA,MACJ,KAAAJ;AAAA,MACA,WAAWQ,EAAG,kBAAkBN,CAAS;AAAA,MACzC,MAAK;AAAA,MACL,QAAQG,IAAOA,EAAK,UAAUJ,IAAQG,EAAK;AAAA,MAE1C,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}