@dxos/react-ui-tabs 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/node/index.cjs

@@ -31,6 +31,7 @@ __export(node_exports, {
   Tabs: () => Tabs
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react_context = require("@radix-ui/react-context");
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
@@ -47,134 +48,171 @@ var [TabsContextProvider, useTabsContext] = (0, import_react_context.createConte
   orientation: "vertical"
 });
 var TabsRoot = ({ children, classNames, activePart: propsActivePart, onActivePartChange, defaultActivePart, value: propsValue, onValueChange, defaultValue, orientation = "vertical", activationMode = "manual", verticalVariant = "stateful", attendableId, ...props }) => {
-  const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: propsActivePart,
-    onChange: onActivePartChange,
-    defaultProp: defaultActivePart
-  });
-  const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: propsValue,
-    onChange: onValueChange,
-    defaultProp: defaultValue
-  });
-  const handleValueChange = (0, import_react.useCallback)((nextValue) => {
-    setActivePart("panel");
-    setValue(nextValue);
-  }, [
-    value
-  ]);
-  const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
-  const tabsRoot = (0, import_react.useRef)(null);
-  (0, import_react.useLayoutEffect)(() => {
-    if (tabsRoot.current) {
-      findFirstFocusable(tabsRoot.current)?.focus();
-    }
-  }, [
-    activePart
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
-    orientation,
-    activePart,
-    setActivePart,
-    value,
-    attendableId,
-    verticalVariant
-  }, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
-    activationMode,
-    "data-active": activePart,
-    orientation,
-    ...props,
-    value,
-    onValueChange: handleValueChange,
-    className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
-    ref: tabsRoot
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const _1 = (0, import_react_tabster.useArrowNavigationGroup)();
+    const _2 = (0, import_react_tabster.useFocusableGroup)();
+    const [activePart = "list", setActivePart] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: propsActivePart,
+      onChange: onActivePartChange,
+      defaultProp: defaultActivePart
+    });
+    const [value, setValue] = (0, import_react_use_controllable_state.useControllableState)({
+      prop: propsValue,
+      onChange: onValueChange,
+      defaultProp: defaultValue
+    });
+    const handleValueChange = (0, import_react.useCallback)((nextValue) => {
+      setActivePart("panel");
+      setValue(nextValue);
+    }, [
+      value
+    ]);
+    const { findFirstFocusable } = (0, import_react_tabster.useFocusFinders)();
+    const tabsRoot = (0, import_react.useRef)(null);
+    (0, import_react.useLayoutEffect)(() => {
+      if (tabsRoot.current) {
+        findFirstFocusable(tabsRoot.current)?.focus();
+      }
+    }, [
+      activePart
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement(TabsContextProvider, {
+      orientation,
+      activePart,
+      setActivePart,
+      value,
+      attendableId,
+      verticalVariant
+    }, /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Root, {
+      activationMode,
+      "data-active": activePart,
+      orientation,
+      ...props,
+      value,
+      onValueChange: handleValueChange,
+      className: (0, import_react_ui_theme.mx)("overflow-hidden", orientation === "vertical" && verticalVariant === "stateful" && "[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible", classNames),
+      ref: tabsRoot
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var TabsViewport = ({ classNames, children, ...props }) => {
-  const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    ...props,
-    "data-active": activePart,
-    className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
-      "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
-      "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
-    ], classNames)
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { orientation, activePart, verticalVariant } = useTabsContext("TabsViewport");
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      ...props,
+      "data-active": activePart,
+      className: (0, import_react_ui_theme.mx)(orientation === "vertical" && verticalVariant === "stateful" && [
+        "grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]",
+        "@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1"
+      ], classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTablist = ({ children, classNames, ...props }) => {
-  const { orientation, verticalVariant } = useTabsContext("TabsTablist");
-  return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
-    ...props,
-    className: (0, import_react_ui_theme.mx)(
-      "max-bs-full is-full",
-      // NOTE: Padding should be common to Toolbar.
-      orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
-      orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
-      classNames
-    )
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { orientation, verticalVariant } = useTabsContext("TabsTablist");
+    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.List, {
+      ...props,
+      className: (0, import_react_ui_theme.mx)(
+        "max-bs-full is-full",
+        // NOTE: Padding should be common to Toolbar.
+        orientation === "vertical" ? "overflow-y-auto" : "flex items-stretch justify-start overflow-x-auto p-1 gap-1",
+        orientation === "vertical" && verticalVariant === "stateful" && "place-self-start p-1",
+        classNames
+      )
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var TabsBackButton = ({ onClick, classNames, ...props }) => {
-  const { setActivePart } = useTabsContext("TabsBackButton");
-  const handleClick = (0, import_react.useCallback)((event) => {
-    setActivePart("list");
-    return onClick?.(event);
-  }, [
-    onClick,
-    setActivePart
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
-    ...props,
-    classNames: [
-      "is-full text-start @md:hidden mbe-2",
-      classNames
-    ],
-    onClick: handleClick
-  });
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { setActivePart } = useTabsContext("TabsBackButton");
+    const handleClick = (0, import_react.useCallback)((event) => {
+      setActivePart("list");
+      return onClick?.(event);
+    }, [
+      onClick,
+      setActivePart
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
+      ...props,
+      classNames: [
+        "is-full text-start @md:hidden mbe-2",
+        classNames
+      ],
+      onClick: handleClick
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement("h2", {
-    ...props,
-    className: (0, import_react_ui_theme.mx)("mlb-1 pli-2 text-sm text-unAccent", classNames)
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("h2", {
+      ...props,
+      className: (0, import_react_ui_theme.mx)("mlb-1 pli-2 text-sm text-unAccent", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
-  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
-  const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
-  const handleClick = (0, import_react.useCallback)(
-    // NOTE: This handler is only called if the tab is *already active*.
-    (event) => {
-      setActivePart("panel");
-      onClick?.(event);
-    },
-    [
-      setActivePart,
-      onClick
-    ]
-  );
-  return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Trigger, {
-    value,
-    asChild: true
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
-    density: "fine",
-    variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
-    ...props,
-    onClick: handleClick,
-    classNames: [
-      "pli-2 rounded-sm",
-      orientation === "vertical" && "block justify-start text-start is-full",
-      orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
-      import_react_ui_theme.ghostHover,
-      classNames
-    ]
-  }, children));
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext("TabsTab");
+    const { hasAttention } = (0, import_react_ui_attention.useAttention)(attendableId);
+    const handleClick = (0, import_react.useCallback)(
+      // NOTE: This handler is only called if the tab is *already active*.
+      (event) => {
+        setActivePart("panel");
+        onClick?.(event);
+      },
+      [
+        setActivePart,
+        onClick
+      ]
+    );
+    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Trigger, {
+      value,
+      asChild: true
+    }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Button, {
+      density: "fine",
+      variant: orientation === "horizontal" && contextValue === value ? hasAttention ? "primary" : "default" : "ghost",
+      ...props,
+      onClick: handleClick,
+      classNames: [
+        "pli-2 rounded-sm",
+        orientation === "vertical" && "block justify-start text-start is-full",
+        orientation === "vertical" && import_react_ui_theme.ghostSelectedContainerMd,
+        import_react_ui_theme.ghostHover,
+        classNames
+      ]
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 var TabsTabpanel = ({ classNames, children, ...props }) => {
-  return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
-    ...props,
-    className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset-over-all", classNames)
-  }, children);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement(TabsPrimitive.Content, {
+      ...props,
+      className: (0, import_react_ui_theme.mx)("dx-focus-ring-inset-over-all", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 var Tabs = {
   Root: TabsRoot,

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Tabs.tsx"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n  activePart: TabsActivePart;\n  setActivePart: (nextActivePart: TabsActivePart) => void;\n  attendableId?: string;\n  verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n  activePart: 'list',\n  setActivePart: () => {},\n  orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n  Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n  Partial<{\n    onActivePartChange: (nextActivePart: TabsActivePart) => void;\n    defaultActivePart: TabsActivePart;\n  }>;\n\nconst TabsRoot = ({\n  children,\n  classNames,\n  activePart: propsActivePart,\n  onActivePartChange,\n  defaultActivePart,\n  value: propsValue,\n  onValueChange,\n  defaultValue,\n  orientation = 'vertical',\n  activationMode = 'manual',\n  verticalVariant = 'stateful',\n  attendableId,\n  ...props\n}: TabsRootProps) => {\n  const [activePart = 'list', setActivePart] = useControllableState({\n    prop: propsActivePart,\n    onChange: onActivePartChange,\n    defaultProp: defaultActivePart,\n  });\n\n  const [value, setValue] = useControllableState({\n    prop: propsValue,\n    onChange: onValueChange,\n    defaultProp: defaultValue,\n  });\n\n  const handleValueChange = useCallback(\n    (nextValue: string) => {\n      setActivePart('panel');\n      setValue(nextValue);\n    },\n    [value],\n  );\n\n  const { findFirstFocusable } = useFocusFinders();\n  const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (tabsRoot.current) {\n      findFirstFocusable(tabsRoot.current)?.focus();\n    }\n  }, [activePart]);\n\n  return (\n    <TabsContextProvider\n      orientation={orientation}\n      activePart={activePart}\n      setActivePart={setActivePart}\n      value={value}\n      attendableId={attendableId}\n      verticalVariant={verticalVariant}\n    >\n      <TabsPrimitive.Root\n        activationMode={activationMode}\n        data-active={activePart}\n        orientation={orientation}\n        {...props}\n        value={value}\n        onValueChange={handleValueChange}\n        className={mx(\n          'overflow-hidden',\n          orientation === 'vertical' &&\n            verticalVariant === 'stateful' &&\n            '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n          classNames,\n        )}\n        ref={tabsRoot}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContextProvider>\n  );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n  const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n  return (\n    <div\n      role='none'\n      {...props}\n      data-active={activePart}\n      className={mx(\n        orientation === 'vertical' &&\n          verticalVariant === 'stateful' && [\n            'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n            '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n          ],\n        classNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n  const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n  return (\n    <TabsPrimitive.List\n      {...props}\n      className={mx(\n        'max-bs-full is-full',\n        // NOTE: Padding should be common to Toolbar.\n        orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n        orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n        classNames,\n      )}\n    >\n      {children}\n    </TabsPrimitive.List>\n  );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n  const { setActivePart } = useTabsContext('TabsBackButton');\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('list');\n      return onClick?.(event);\n    },\n    [onClick, setActivePart],\n  );\n\n  return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n  return (\n    <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n      {children}\n    </h2>\n  );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n  const { hasAttention } = useAttention(attendableId);\n  const handleClick = useCallback(\n    // NOTE: This handler is only called if the tab is *already active*.\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('panel');\n      onClick?.(event);\n    },\n    [setActivePart, onClick],\n  );\n\n  return (\n    <TabsPrimitive.Trigger value={value} asChild>\n      <Button\n        density='fine'\n        variant={\n          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n        }\n        {...props}\n        onClick={handleClick}\n        classNames={[\n          'pli-2 rounded-sm',\n          orientation === 'vertical' && 'block justify-start text-start is-full',\n          orientation === 'vertical' && ghostSelectedContainerMd,\n          ghostHover,\n          classNames,\n        ]}\n      >\n        {children}\n      </Button>\n    </TabsPrimitive.Trigger>\n  );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n  return (\n    <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n      {children}\n    </TabsPrimitive.Content>\n  );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n  Root: TabsRoot,\n  Tablist: TabsTablist,\n  Tab: TabsTab,\n  TabPrimitive: TabsPrimitive.Trigger,\n  TabGroupHeading: TabsTabGroupHeading,\n  Tabpanel: TabsTabpanel,\n  BackButton: TabsBackButton,\n  Viewport: TabsViewport,\n};\n\nexport type {\n  TabsActivePart,\n  TabsRootProps,\n  TabsTablistProps,\n  TabsTabProps,\n  TabsTabPrimitiveProps,\n  TabsTabGroupHeadingProps,\n  TabsTabpanelProps,\n  TabsViewportProps,\n};\n"],
-  "mappings": "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",
-  "names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders, useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n  activePart: TabsActivePart;\n  setActivePart: (nextActivePart: TabsActivePart) => void;\n  attendableId?: string;\n  verticalVariant?: 'stateful' | 'stateless';\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n  activePart: 'list',\n  setActivePart: () => {},\n  orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n  Partial<Pick<TabsContextValue, 'activePart' | 'verticalVariant' | 'attendableId'>> &\n  Partial<{\n    onActivePartChange: (nextActivePart: TabsActivePart) => void;\n    defaultActivePart: TabsActivePart;\n  }>;\n\nconst TabsRoot = ({\n  children,\n  classNames,\n  activePart: propsActivePart,\n  onActivePartChange,\n  defaultActivePart,\n  value: propsValue,\n  onValueChange,\n  defaultValue,\n  orientation = 'vertical',\n  activationMode = 'manual',\n  verticalVariant = 'stateful',\n  attendableId,\n  ...props\n}: TabsRootProps) => {\n  // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n  const _1 = useArrowNavigationGroup();\n  const _2 = useFocusableGroup();\n  const [activePart = 'list', setActivePart] = useControllableState({\n    prop: propsActivePart,\n    onChange: onActivePartChange,\n    defaultProp: defaultActivePart,\n  });\n\n  const [value, setValue] = useControllableState({\n    prop: propsValue,\n    onChange: onValueChange,\n    defaultProp: defaultValue,\n  });\n\n  const handleValueChange = useCallback(\n    (nextValue: string) => {\n      setActivePart('panel');\n      setValue(nextValue);\n    },\n    [value],\n  );\n\n  const { findFirstFocusable } = useFocusFinders();\n  const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (tabsRoot.current) {\n      findFirstFocusable(tabsRoot.current)?.focus();\n    }\n  }, [activePart]);\n\n  return (\n    <TabsContextProvider\n      orientation={orientation}\n      activePart={activePart}\n      setActivePart={setActivePart}\n      value={value}\n      attendableId={attendableId}\n      verticalVariant={verticalVariant}\n    >\n      <TabsPrimitive.Root\n        activationMode={activationMode}\n        data-active={activePart}\n        orientation={orientation}\n        {...props}\n        value={value}\n        onValueChange={handleValueChange}\n        className={mx(\n          'overflow-hidden',\n          orientation === 'vertical' &&\n            verticalVariant === 'stateful' &&\n            '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n          classNames,\n        )}\n        ref={tabsRoot}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContextProvider>\n  );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n  const { orientation, activePart, verticalVariant } = useTabsContext('TabsViewport');\n  return (\n    <div\n      role='none'\n      {...props}\n      data-active={activePart}\n      className={mx(\n        orientation === 'vertical' &&\n          verticalVariant === 'stateful' && [\n            'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%]',\n            '@md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n          ],\n        classNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n  const { orientation, verticalVariant } = useTabsContext('TabsTablist');\n  return (\n    <TabsPrimitive.List\n      {...props}\n      className={mx(\n        'max-bs-full is-full',\n        // NOTE: Padding should be common to Toolbar.\n        orientation === 'vertical' ? 'overflow-y-auto' : 'flex items-stretch justify-start overflow-x-auto p-1 gap-1',\n        orientation === 'vertical' && verticalVariant === 'stateful' && 'place-self-start p-1',\n        classNames,\n      )}\n    >\n      {children}\n    </TabsPrimitive.List>\n  );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n  const { setActivePart } = useTabsContext('TabsBackButton');\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('list');\n      return onClick?.(event);\n    },\n    [onClick, setActivePart],\n  );\n\n  return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n  return (\n    <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n      {children}\n    </h2>\n  );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n  const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n  const { hasAttention } = useAttention(attendableId);\n  const handleClick = useCallback(\n    // NOTE: This handler is only called if the tab is *already active*.\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setActivePart('panel');\n      onClick?.(event);\n    },\n    [setActivePart, onClick],\n  );\n\n  return (\n    <TabsPrimitive.Trigger value={value} asChild>\n      <Button\n        density='fine'\n        variant={\n          orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n        }\n        {...props}\n        onClick={handleClick}\n        classNames={[\n          'pli-2 rounded-sm',\n          orientation === 'vertical' && 'block justify-start text-start is-full',\n          orientation === 'vertical' && ghostSelectedContainerMd,\n          ghostHover,\n          classNames,\n        ]}\n      >\n        {children}\n      </Button>\n    </TabsPrimitive.Trigger>\n  );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n  return (\n    <TabsPrimitive.Content {...props} className={mx('dx-focus-ring-inset-over-all', classNames)}>\n      {children}\n    </TabsPrimitive.Content>\n  );\n};\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n  Root: TabsRoot,\n  Tablist: TabsTablist,\n  Tab: TabsTab,\n  TabPrimitive: TabsPrimitive.Trigger,\n  TabGroupHeading: TabsTabGroupHeading,\n  Tabpanel: TabsTabpanel,\n  BackButton: TabsBackButton,\n  Viewport: TabsViewport,\n};\n\nexport type {\n  TabsActivePart,\n  TabsRootProps,\n  TabsTablistProps,\n  TabsTabProps,\n  TabsTabPrimitiveProps,\n  TabsTabGroupHeadingProps,\n  TabsTabpanelProps,\n  TabsViewportProps,\n};\n"],
+  "mappings": "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",
+  "names": ["TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "verticalVariant", "attendableId", "props", "_1", "useArrowNavigationGroup", "_2", "useFocusableGroup", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "React", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "useAttention", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "Tabs", "Tablist", "Tab", "TabPrimitive", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
 }

package/dist/lib/node/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":22249,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":11985},"packages/ui/react-ui-tabs/dist/lib/node/index.cjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":5541},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":5637}}}
+{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":23899,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":457,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12419},"packages/ui/react-ui-tabs/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":6494},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":6590}}}