@pzerelles/headlessui-svelte 2.1.2-next.7 → 2.1.2-next.8

package/dist/tabs/TabGroup.svelte

@@ -1,312 +1,225 @@
-<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"
+<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;
   }
-
-  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;
+}
+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;
   }
+  return context;
+}
 </script>
 
-<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
-    },
+<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 {
     get info() {
-      return _state.info
+      return _state2.info;
     },
     get selectedIndex() {
-      return _state.selectedIndex
+      return _state2.selectedIndex;
     },
     get tabs() {
-      return _state.tabs
+      return _state2.tabs;
     },
     get panels() {
-      return _state.panels
+      return _state2.panels;
     },
-  }
-
-  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
-    },
-    get activation() {
-      return activation
-    },
-    get info() {
-      return _state.info
+    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;
     },
-    get selectedIndex() {
-      return _state.selectedIndex
+    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 tabs() {
-      return _state.tabs
+    unregisterTab(tab) {
+      _state2.tabs = _state2.tabs.filter((_tab) => _tab !== tab);
+      return _state2;
     },
-    get panels() {
-      return _state.panels
+    registerPanel(panel) {
+      if (_state2.panels.some((_panel) => _panel === panel)) return _state2;
+      _state2.panels = sortByDomNode([..._state2.panels, panel], (panel2) => panel2.current ?? null);
+      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]))
+    unregisterPanel(panel) {
+      _state2.panels = _state2.panels.filter((_panel) => _panel !== panel);
+      return _state2;
     }
-  })
+  };
+};
+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,36 +1,16 @@
-<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 lang="ts" module>const DEFAULT_LIST_TAG = "div";
 </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 } satisfies ListRenderPropArg)
-
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & TabListProps<TTag> = $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 });
+let { ref = $bindable(), ...theirProps } = $props();
+const ourProps = $derived({
+  role: "tablist",
+  "aria-orientation": orientation
+});
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_LIST_TAG} name="TabList" bind:ref />