@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.5

package/dist/tabs/TabGroup.svelte

@@ -1,225 +1,312 @@
-<script lang="ts" module>import { sortByDomNode } from "../utils/focus-management.js";
-import { match } from "../utils/match.js";
-import FocusSentinel from "../internal/FocusSentinel.svelte";
-import { setContext, getContext, untrack } from "svelte";
-const DEFAULT_TABS_TAG = "div";
-export function useData(component) {
-  const context = getContext("TabsData");
-  if (!context) {
-    let err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
-    throw err;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  import { sortByDomNode } from "../utils/focus-management.js"
+  import { match } from "../utils/match.js"
+  import FocusSentinel from "../internal/FocusSentinel.svelte"
+  import { setContext, getContext, untrack } from "svelte"
+
+  const DEFAULT_TABS_TAG = "div" as const
+  type TabsRenderPropArg = {
+    selectedIndex: number
+  }
+  type TabsPropsWeControl = never
+
+  export type TabGroupProps<TTag extends ElementType = typeof DEFAULT_TABS_TAG> = Props<
+    TTag,
+    TabsRenderPropArg,
+    TabsPropsWeControl,
+    {
+      defaultIndex?: number
+      onchange?: (index: number) => void
+      selectedIndex?: number
+      vertical?: boolean
+      manual?: boolean
+    }
+  >
+
+  interface StateDefinition {
+    info: { isControlled: boolean }
+    selectedIndex: number
+
+    tabs: MutableRefObject<HTMLElement | undefined>[]
+    panels: MutableRefObject<HTMLElement | undefined>[]
+  }
+
+  type TabsDataContext = StateDefinition & {
+    orientation: "horizontal" | "vertical"
+    activation: "manual" | "auto"
   }
-  return context;
-}
-export function useActions(component) {
-  const context = getContext("TabsActions");
-  if (!context) {
-    const err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`);
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useActions);
-    throw err;
+
+  export function useData(component: string) {
+    const context = getContext<TabsDataContext>("TabsData")
+    if (!context) {
+      let err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`)
+      if (Error.captureStackTrace) Error.captureStackTrace(err, useData)
+      throw err
+    }
+    return context
+  }
+
+  type TabsActionsContext = {
+    registerTab: (tab: MutableRefObject<HTMLElement | undefined>) => () => void
+    registerPanel: (panel: MutableRefObject<HTMLElement | undefined>) => () => void
+    change: (index: number) => void
+  }
+
+  export function useActions(component: string) {
+    const context = getContext<TabsActionsContext>("TabsActions")
+    if (!context) {
+      const err = new Error(`<${component} /> is missing a parent <Tab.Group /> component.`)
+      if (Error.captureStackTrace) Error.captureStackTrace(err, useActions)
+      throw err
+    }
+    return context
   }
-  return context;
-}
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">import StableCollection from "../utils/StableCollection.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-var Direction = /* @__PURE__ */ ((Direction2) => {
-  Direction2[Direction2["Forwards"] = 0] = "Forwards";
-  Direction2[Direction2["Backwards"] = 1] = "Backwards";
-  return Direction2;
-})(Direction || {});
-var Ordering = /* @__PURE__ */ ((Ordering2) => {
-  Ordering2[Ordering2["Less"] = -1] = "Less";
-  Ordering2[Ordering2["Equal"] = 0] = "Equal";
-  Ordering2[Ordering2["Greater"] = 1] = "Greater";
-  return Ordering2;
-})(Ordering || {});
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TABS_TAG">
+  import StableCollection from "../utils/StableCollection.svelte"
+  import type { MutableRefObject } from "../utils/ref.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  enum Direction {
+    Forwards,
+    Backwards,
+  }
+
+  enum Ordering {
+    Less = -1,
+    Equal = 0,
+    Greater = 1,
+  }
+
+  const stateReducer = (initialState: StateDefinition) => {
+    let _state = $state(initialState)
+    return {
+      get info() {
+        return _state.info
+      },
+      get selectedIndex() {
+        return _state.selectedIndex
+      },
+      get tabs() {
+        return _state.tabs
+      },
+      get panels() {
+        return _state.panels
+      },
+      setSelectedIndex(index: number) {
+        if (index === _state.selectedIndex) return _state
+        let tabs = sortByDomNode(_state.tabs, (tab) => tab.current ?? null)
+        let panels = sortByDomNode(_state.panels, (panel) => panel.current ?? null)
+
+        let focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"))
+
+        let nextState = { ..._state, tabs, panels }
+
+        if (
+          // Underflow
+          index < 0 ||
+          // Overflow
+          index > tabs.length - 1
+        ) {
+          let direction = match(Math.sign(index - _state.selectedIndex), {
+            [Ordering.Less]: () => Direction.Backwards,
+            [Ordering.Equal]: () => {
+              return match(Math.sign(index), {
+                [Ordering.Less]: () => Direction.Forwards,
+                [Ordering.Equal]: () => Direction.Forwards,
+                [Ordering.Greater]: () => Direction.Backwards,
+              })
+            },
+            [Ordering.Greater]: () => Direction.Forwards,
+          })
+
+          // If there are no focusable tabs then.
+          // We won't change the selected index
+          // because it's likely the user is
+          // lazy loading tabs and there's
+          // nothing to focus on yet
+          if (focusableTabs.length === 0) {
+            _state = nextState
+            return _state
+          }
+
+          let nextSelectedIndex = match(direction, {
+            [Direction.Forwards]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
+            [Direction.Backwards]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1]),
+          })
+
+          _state = {
+            ...nextState,
+            selectedIndex: nextSelectedIndex === -1 ? _state.selectedIndex : nextSelectedIndex,
+          }
+          return _state
+        }
+
+        // Middle
+        let before = tabs.slice(0, index)
+        let after = tabs.slice(index)
+
+        let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab))
+        if (!next) {
+          _state = nextState
+          return _state
+        }
+
+        let selectedIndex = tabs.findIndex((tab) => tab === next) ?? _state.selectedIndex
+        if (selectedIndex === -1) selectedIndex = _state.selectedIndex
+
+        _state = { ...nextState, selectedIndex }
+        return _state
+      },
+      registerTab(tab: MutableRefObject<HTMLElement | undefined>) {
+        if (_state.tabs.some((_tab) => _tab === tab)) return _state
+
+        _state.tabs = sortByDomNode([..._state.tabs, tab], (tab) => tab.current ?? null)
+        let activeTab = _state.tabs[_state.selectedIndex]
+
+        // When the component is uncontrolled, then we want to maintain the actively
+        // selected tab even if new tabs are inserted or removed before the active
+        // tab.
+        //
+        // When the component is controlled, then we don't want to do this and
+        // instead we want to select the tab based on the `selectedIndex` prop.
+        if (!_state.info.isControlled) {
+          const selectedIndex = _state.tabs.findIndex((tab) => tab === activeTab)
+          if (selectedIndex !== _state.selectedIndex) _state.selectedIndex = selectedIndex
+        }
+
+        return _state
+      },
+      unregisterTab(tab: MutableRefObject<HTMLElement | undefined>) {
+        _state.tabs = _state.tabs.filter((_tab) => _tab !== tab)
+        return _state
+      },
+      registerPanel(panel: MutableRefObject<HTMLElement | undefined>) {
+        if (_state.panels.some((_panel) => _panel === panel)) return _state
+        _state.panels = sortByDomNode([..._state.panels, panel], (panel) => panel.current ?? null)
+        return _state
+      },
+      unregisterPanel(panel: MutableRefObject<HTMLElement | undefined>) {
+        _state.panels = _state.panels.filter((_panel) => _panel !== panel)
+        return _state
+      },
+    }
+  }
+
+  let {
+    ref = $bindable(),
+    defaultIndex = 0,
+    vertical = false,
+    manual = false,
+    onchange,
+    selectedIndex = undefined,
+    ...theirProps
+  }: { as?: TTag } & TabGroupProps<TTag> = $props()
+  const orientation = $derived(vertical ? "vertical" : "horizontal")
+  const activation = $derived(manual ? "manual" : "auto")
+
+  const isControlled = $derived(selectedIndex !== undefined)
+
+  const _state = stateReducer({
+    info: { isControlled: selectedIndex !== undefined },
+    selectedIndex: selectedIndex ?? defaultIndex,
+    tabs: [],
+    panels: [],
+  })
+  $effect(() => {
+    untrack(() => _state.info).isControlled = isControlled
+  })
+
+  const slot = $derived({
+    selectedIndex: _state.selectedIndex,
+  } satisfies TabsRenderPropArg)
+  const stableTabs = $derived(_state.tabs)
+
+  const tabsData = {
+    get orientation() {
+      return orientation
+    },
+    get activation() {
+      return activation
+    },
     get info() {
-      return _state2.info;
+      return _state.info
     },
     get selectedIndex() {
-      return _state2.selectedIndex;
+      return _state.selectedIndex
     },
     get tabs() {
-      return _state2.tabs;
+      return _state.tabs
     },
     get panels() {
-      return _state2.panels;
+      return _state.panels
     },
-    setSelectedIndex(index) {
-      if (index === _state2.selectedIndex) return _state2;
-      let tabs = sortByDomNode(_state2.tabs, (tab) => tab.current ?? null);
-      let panels = sortByDomNode(_state2.panels, (panel) => panel.current ?? null);
-      let focusableTabs = tabs.filter((tab) => !tab?.current?.hasAttribute("disabled"));
-      let nextState = { ..._state2, tabs, panels };
-      if (
-        // Underflow
-        index < 0 || // Overflow
-        index > tabs.length - 1
-      ) {
-        let direction = match(Math.sign(index - _state2.selectedIndex), {
-          [-1 /* Less */]: () => 1 /* Backwards */,
-          [0 /* Equal */]: () => {
-            return match(Math.sign(index), {
-              [-1 /* Less */]: () => 0 /* Forwards */,
-              [0 /* Equal */]: () => 0 /* Forwards */,
-              [1 /* Greater */]: () => 1 /* Backwards */
-            });
-          },
-          [1 /* Greater */]: () => 0 /* Forwards */
-        });
-        if (focusableTabs.length === 0) {
-          _state2 = nextState;
-          return _state2;
-        }
-        let nextSelectedIndex = match(direction, {
-          [0 /* Forwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[0]),
-          [1 /* Backwards */]: () => tabs.findIndex((tab) => tab === focusableTabs[focusableTabs.length - 1])
-        });
-        _state2 = {
-          ...nextState,
-          selectedIndex: nextSelectedIndex === -1 ? _state2.selectedIndex : nextSelectedIndex
-        };
-        return _state2;
-      }
-      let before = tabs.slice(0, index);
-      let after = tabs.slice(index);
-      let next = [...after, ...before].find((tab) => focusableTabs.some((_tab) => _tab === tab));
-      if (!next) {
-        _state2 = nextState;
-        return _state2;
-      }
-      let selectedIndex2 = tabs.findIndex((tab) => tab === next) ?? _state2.selectedIndex;
-      if (selectedIndex2 === -1) selectedIndex2 = _state2.selectedIndex;
-      _state2 = { ...nextState, selectedIndex: selectedIndex2 };
-      return _state2;
+  }
+
+  const realSelectedIndex = $derived(isControlled ? selectedIndex! : _state.selectedIndex)
+
+  const registerTab = (tab: MutableRefObject<HTMLElement | undefined>) => {
+    _state.registerTab(tab)
+    return () => _state.unregisterTab(tab)
+  }
+
+  const registerPanel = (panel: MutableRefObject<HTMLElement | undefined>) => {
+    _state.registerPanel(panel)
+    return () => _state.unregisterPanel(panel)
+  }
+
+  const change = (index: number) => {
+    if (realSelectedIndex !== index) {
+      onchange?.(index)
+    }
+
+    if (!isControlled) {
+      _state.setSelectedIndex(index)
+    }
+  }
+
+  setContext<TabsActionsContext>("TabsActions", { registerTab, registerPanel, change })
+  setContext<TabsDataContext>("TabsData", {
+    get orientation() {
+      return orientation
     },
-    registerTab(tab) {
-      if (_state2.tabs.some((_tab) => _tab === tab)) return _state2;
-      _state2.tabs = sortByDomNode([..._state2.tabs, tab], (tab2) => tab2.current ?? null);
-      let activeTab = _state2.tabs[_state2.selectedIndex];
-      if (!_state2.info.isControlled) {
-        const selectedIndex2 = _state2.tabs.findIndex((tab2) => tab2 === activeTab);
-        if (selectedIndex2 !== _state2.selectedIndex) _state2.selectedIndex = selectedIndex2;
-      }
-      return _state2;
+    get activation() {
+      return activation
     },
-    unregisterTab(tab) {
-      _state2.tabs = _state2.tabs.filter((_tab) => _tab !== tab);
-      return _state2;
+    get info() {
+      return _state.info
     },
-    registerPanel(panel) {
-      if (_state2.panels.some((_panel) => _panel === panel)) return _state2;
-      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current ?? null);
-      return _state2;
+    get selectedIndex() {
+      return _state.selectedIndex
+    },
+    get tabs() {
+      return _state.tabs
+    },
+    get panels() {
+      return _state.panels
     },
-    unregisterPanel(panel) {
-      _state2.panels = _state2.panels.filter((_panel) => _panel !== panel);
-      return _state2;
+  })
+
+  $effect(() => {
+    const newSelectedIndex = selectedIndex ?? defaultIndex
+    untrack(() => _state.setSelectedIndex(newSelectedIndex))
+  })
+
+  $effect(() => {
+    if (realSelectedIndex === undefined) return
+    if (_state.tabs.length <= 0) return
+
+    // TODO: Figure out a way to detect this without the slow sort on every render. Might be fine
+    //       unless you have a lot of tabs.
+    let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null)
+    let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab)
+
+    if (didOrderChange) {
+      change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]))
     }
-  };
-};
-let {
-  ref = $bindable(),
-  defaultIndex = 0,
-  vertical = false,
-  manual = false,
-  onchange,
-  selectedIndex = void 0,
-  ...theirProps
-} = $props();
-const orientation = $derived(vertical ? "vertical" : "horizontal");
-const activation = $derived(manual ? "manual" : "auto");
-const isControlled = $derived(selectedIndex !== void 0);
-const _state = stateReducer({
-  info: { isControlled: selectedIndex !== void 0 },
-  selectedIndex: selectedIndex ?? defaultIndex,
-  tabs: [],
-  panels: []
-});
-$effect(() => {
-  untrack(() => _state.info).isControlled = isControlled;
-});
-const slot = $derived({
-  selectedIndex: _state.selectedIndex
-});
-const stableTabs = $derived(_state.tabs);
-const tabsData = {
-  get orientation() {
-    return orientation;
-  },
-  get activation() {
-    return activation;
-  },
-  get info() {
-    return _state.info;
-  },
-  get selectedIndex() {
-    return _state.selectedIndex;
-  },
-  get tabs() {
-    return _state.tabs;
-  },
-  get panels() {
-    return _state.panels;
-  }
-};
-const realSelectedIndex = $derived(isControlled ? selectedIndex : _state.selectedIndex);
-const registerTab = (tab) => {
-  _state.registerTab(tab);
-  return () => _state.unregisterTab(tab);
-};
-const registerPanel = (panel) => {
-  _state.registerPanel(panel);
-  return () => _state.unregisterPanel(panel);
-};
-const change = (index) => {
-  if (realSelectedIndex !== index) {
-    onchange?.(index);
-  }
-  if (!isControlled) {
-    _state.setSelectedIndex(index);
-  }
-};
-setContext("TabsActions", { registerTab, registerPanel, change });
-setContext("TabsData", {
-  get orientation() {
-    return orientation;
-  },
-  get activation() {
-    return activation;
-  },
-  get info() {
-    return _state.info;
-  },
-  get selectedIndex() {
-    return _state.selectedIndex;
-  },
-  get tabs() {
-    return _state.tabs;
-  },
-  get panels() {
-    return _state.panels;
-  }
-});
-$effect(() => {
-  const newSelectedIndex = selectedIndex ?? defaultIndex;
-  untrack(() => _state.setSelectedIndex(newSelectedIndex));
-});
-$effect(() => {
-  if (realSelectedIndex === void 0) return;
-  if (_state.tabs.length <= 0) return;
-  let sorted = sortByDomNode(_state.tabs, (tab) => tab.current ?? null);
-  let didOrderChange = sorted.some((tab, i) => _state.tabs[i] !== tab);
-  if (didOrderChange) {
-    change(sorted.findIndex((tab) => tab === _state.tabs[realSelectedIndex]));
-  }
-});
+  })
 </script>
 
 <StableCollection>

package/dist/tabs/TabList.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" module>const DEFAULT_LIST_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  const DEFAULT_LIST_TAG = "div" as const
+  type ListRenderPropArg = {
+    selectedIndex: number
+  }
+  type ListPropsWeControl = "aria-orientation" | "role"
+
+  export type TabListProps<TTag extends ElementType = typeof DEFAULT_LIST_TAG> = Props<
+    TTag,
+    ListRenderPropArg,
+    ListPropsWeControl,
+    {
+      //
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">import { useData } from "./TabGroup.svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const data = useData("Tab.List");
-const { orientation, selectedIndex } = $derived(data);
-const slot = $derived({ selectedIndex });
-let { ref = $bindable(), ...theirProps } = $props();
-const ourProps = $derived({
-  role: "tablist",
-  "aria-orientation": orientation
-});
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_LIST_TAG">
+  import { useData } from "./TabGroup.svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const data = useData("Tab.List")
+  const { orientation, selectedIndex } = $derived(data)
+
+  const slot = $derived({ selectedIndex } satisfies ListRenderPropArg)
+
+  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabListProps<TTag> = $props()
+  const ourProps = $derived({
+    role: "tablist",
+    "aria-orientation": orientation,
+  })
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />