@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.1

package/esm/tabs-next/TabOverflowList.css.js

@@ -1,4 +0,0 @@
-var tabOverflowListCss = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
-
-export { tabOverflowListCss as default };
-//# sourceMappingURL=TabOverflowList.css.js.map

package/esm/tabs-next/TabOverflowList.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabOverflowList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/tabs-next/TabOverflowList.js

@@ -1,128 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { offset, size, useInteractions, useDismiss, FloatingTree } from '@floating-ui/react';
-import { makePrefixer, useIcon, useFloatingUI, useForkRef, useId, Button } from '@salt-ds/core';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { forwardRef, useRef, useCallback, Children } from 'react';
-import tabOverflowListCss from './TabOverflowList.css.js';
-import { useFocusOutside } from './hooks/useFocusOutside.js';
-
-const withBaseName = makePrefixer("saltTabOverflow");
-const TabOverflowList = forwardRef(
-  function TabOverflowList2(props, ref) {
-    const {
-      buttonRef,
-      tabstripRef,
-      children,
-      isMeasuring,
-      open,
-      setOpen,
-      ...rest
-    } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-tabs-next-overflow-list",
-      css: tabOverflowListCss,
-      window: targetWindow
-    });
-    const { OverflowIcon } = useIcon();
-    const { refs, x, y, strategy, context } = useFloatingUI({
-      open,
-      onOpenChange(open2, _, reason) {
-        if (reason === "escape-key") {
-          queueMicrotask(() => {
-            const allTabs = tabstripRef.current?.querySelectorAll(
-              '[role="tab"]:not([aria-hidden])'
-            ) ?? [];
-            const numberOfTabsInOverflow = listRef.current?.querySelectorAll('[role="tab"]').length ?? 0;
-            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({
-              preventScroll: true
-            });
-          });
-        }
-        setOpen(open2);
-      },
-      placement: "bottom-start",
-      middleware: [
-        offset(1),
-        size({
-          apply({ elements, availableHeight }) {
-            Object.assign(elements.floating.style, {
-              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
-            });
-          }
-        })
-      ]
-    });
-    const { getFloatingProps } = useInteractions([useDismiss(context)]);
-    const rootRef = useRef(null);
-    const handleRootRef = useForkRef(rootRef, ref);
-    const listRef = useRef(null);
-    const handleListRef = useForkRef(listRef, refs.setFloating);
-    const handleFocusOutside = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
-    useFocusOutside(
-      rootRef,
-      handleFocusOutside,
-      open,
-      "[data-floating-ui-portal]"
-    );
-    const handleClick = () => {
-      if (!open) {
-        listRef.current?.querySelectorAll('[role="tab"]')[0]?.focus({ preventScroll: true });
-      } else {
-        setOpen(false);
-      }
-    };
-    const handleFocus = () => {
-      setOpen(true);
-    };
-    const handleButtonRef = useForkRef(
-      buttonRef,
-      refs.setReference
-    );
-    const listId = useId();
-    const childCount = Children.count(children);
-    if (childCount === 0 && !isMeasuring) return null;
-    return /* @__PURE__ */ jsxs("div", { className: withBaseName(), ref: handleRootRef, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          "data-overflowbutton": true,
-          tabIndex: -1,
-          appearance: "transparent",
-          sentiment: "neutral",
-          onClick: handleClick,
-          ref: handleButtonRef,
-          "aria-label": `Overflow menu. ${childCount} tabs hidden`,
-          "aria-expanded": open,
-          "aria-controls": listId,
-          "aria-hidden": "true",
-          role: "tab",
-          "aria-haspopup": true,
-          ...rest,
-          children: /* @__PURE__ */ jsx(OverflowIcon, { "aria-hidden": true })
-        }
-      ),
-      /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: handleListRef,
-          ...getFloatingProps({
-            onFocus: handleFocus,
-            role: "presentation"
-          }),
-          className: withBaseName("list"),
-          "data-hidden": !open,
-          style: open ? { left: x ?? 0, top: y ?? 0, position: strategy } : void 0,
-          id: listId,
-          children: /* @__PURE__ */ jsx("div", { className: withBaseName("listContainer"), children })
-        }
-      ) })
-    ] });
-  }
-);
-
-export { TabOverflowList };
-//# sourceMappingURL=TabOverflowList.js.map

package/esm/tabs-next/TabOverflowList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabOverflowList.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement | null>;\n  tabstripRef: RefObject<HTMLDivElement | null>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef}>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["TabOverflowList","open"],"mappings":"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"}

package/esm/tabs-next/TabsNext.js

@@ -1,172 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
-import { makePrefixer, useControlled, useIsomorphicLayoutEffect, useEventCallback } from '@salt-ds/core';
-import { clsx } from 'clsx';
-import { TabsNextContext } from './TabsNextContext.js';
-import { useCollection } from './hooks/useCollection.js';
-
-const withBaseName = makePrefixer("saltTabsNext");
-const TabsNext = forwardRef(
-  function TabsNext2(props, ref) {
-    const { className, children, value, defaultValue, onChange, ...rest } = props;
-    const [valueToTabIdMap, setValueToIdMap] = useState({
-      map: /* @__PURE__ */ new Map()
-    });
-    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({
-      map: /* @__PURE__ */ new Map()
-    });
-    const {
-      registerItem,
-      item,
-      getNext,
-      getPrevious,
-      getFirst,
-      getLast,
-      items
-    } = useCollection({ wrap: true });
-    const activeTab = useRef(void 0);
-    const returnFocus = useRef(void 0);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [selected, setSelectedState] = useControlled({
-      controlled: value,
-      default: defaultValue,
-      name: "TabListNext",
-      state: "selected"
-    });
-    const selectedRef = useRef(void 0);
-    useIsomorphicLayoutEffect(() => {
-      selectedRef.current = selected;
-    }, [selected]);
-    const setSelected = useCallback(
-      (event, value2) => {
-        setMenuOpen(false);
-        setSelectedState(value2);
-        onChange?.(event, value2);
-      },
-      [onChange]
-    );
-    const registerTab = useEventCallback((item2) => {
-      const cleanup = registerItem(item2);
-      setValueToIdMap(({ map }) => {
-        map.set(item2.value, item2.id);
-        return { map };
-      });
-      return () => {
-        const items2 = cleanup();
-        setValueToIdMap(({ map }) => {
-          map.delete(item2.value);
-          return { map };
-        });
-        if (activeTab.current?.value !== item2.value) {
-          return;
-        }
-        returnFocus.current = item2.value;
-        const containFocus = () => {
-          const activeIndex = items2.current.findIndex(
-            (i) => item2.value === i.value
-          );
-          const nextIndex = activeIndex === items2.current.length - 1 ? items2.current.length - 2 : activeIndex + 1;
-          const nextActive = items2.current[nextIndex];
-          returnFocus.current = nextActive.value;
-          if (selectedRef.current === item2.value) {
-            setSelected(null, nextActive.value);
-          }
-          nextActive?.element?.focus();
-        };
-        if (document.activeElement === document.body) {
-          requestAnimationFrame(() => {
-            if (document.activeElement === document.body) {
-              containFocus();
-            }
-          });
-        } else {
-          const handleFocusOut = (event) => {
-            if (!event.relatedTarget) {
-              requestAnimationFrame(() => {
-                if (document.activeElement === document.body) {
-                  containFocus();
-                }
-              });
-            }
-          };
-          item2.element.ownerDocument.addEventListener(
-            "focusout",
-            handleFocusOut,
-            {
-              once: true
-            }
-          );
-          setTimeout(() => {
-            item2.element.ownerDocument.removeEventListener(
-              "focusout",
-              handleFocusOut
-            );
-          }, 1e3);
-        }
-      };
-    });
-    const registerPanel = useCallback((id, value2) => {
-      setValueToPanelIdMap(({ map }) => {
-        map.set(value2, id);
-        return { map };
-      });
-      return () => {
-        setValueToIdMap(({ map }) => {
-          map.delete(value2);
-          return { map };
-        });
-      };
-    }, []);
-    const getPanelId = useCallback(
-      (value2) => {
-        return valueToPanelIdMap.map.get(value2);
-      },
-      [valueToPanelIdMap]
-    );
-    const getTabId = useCallback(
-      (value2) => {
-        return valueToTabIdMap.map.get(value2);
-      },
-      [valueToTabIdMap]
-    );
-    const context = useMemo(
-      () => ({
-        registerTab,
-        registerPanel,
-        getPanelId,
-        getTabId,
-        selected,
-        setSelected,
-        item,
-        getNext,
-        getPrevious,
-        getFirst,
-        getLast,
-        items,
-        activeTab,
-        menuOpen,
-        setMenuOpen,
-        returnFocus
-      }),
-      [
-        registerPanel,
-        registerTab,
-        getPanelId,
-        getTabId,
-        selected,
-        setSelected,
-        item,
-        getNext,
-        getPrevious,
-        getFirst,
-        getLast,
-        items,
-        menuOpen
-      ]
-    );
-    return /* @__PURE__ */ jsx(TabsNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children }) });
-  }
-);
-
-export { TabsNext };
-//# sourceMappingURL=TabsNext.js.map

package/esm/tabs-next/TabsNext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsNext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabsNext.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  useControlled,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\nimport { useCollection } from \"./hooks/useCollection\";\n\nexport interface TabsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  children?: ReactNode;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string;\n  /**\n   * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n   */\n  onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n  function TabsNext(props, ref) {\n    const { className, children, value, defaultValue, onChange, ...rest } =\n      props;\n\n    const [valueToTabIdMap, setValueToIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n      map: new Map<string, string>(),\n    });\n\n    const {\n      registerItem,\n      item,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n    } = useCollection({ wrap: true });\n\n    const activeTab = useRef<Pick<Item, \"id\" | \"value\">>(undefined);\n    const returnFocus = useRef<string | undefined>(undefined);\n\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    const [selected, setSelectedState] = useControlled({\n      controlled: value,\n      default: defaultValue,\n      name: \"TabListNext\",\n      state: \"selected\",\n    });\n\n    // This ref is needed so we can read the current selected item in the containFocus() function.\n    const selectedRef = useRef<string | undefined>(undefined);\n    useIsomorphicLayoutEffect(() => {\n      selectedRef.current = selected;\n    }, [selected]);\n\n    const setSelected = useCallback(\n      (event: SyntheticEvent | null, value: string) => {\n        setMenuOpen(false);\n        setSelectedState(value);\n        onChange?.(event, value);\n      },\n      [onChange],\n    );\n\n    const registerTab = useEventCallback((item: Item) => {\n      const cleanup = registerItem(item);\n      setValueToIdMap(({ map }) => {\n        map.set(item.value, item.id);\n        return { map };\n      });\n\n      return () => {\n        const items = cleanup();\n        setValueToIdMap(({ map }) => {\n          map.delete(item.value);\n          return { map };\n        });\n\n        if (activeTab.current?.value !== item.value) {\n          return;\n        }\n\n        returnFocus.current = item.value;\n\n        const containFocus = () => {\n          const activeIndex = items.current.findIndex(\n            (i) => item.value === i.value,\n          );\n\n          const nextIndex =\n            activeIndex === items.current.length - 1\n              ? items.current.length - 2\n              : activeIndex + 1;\n\n          const nextActive = items.current[nextIndex];\n\n          returnFocus.current = nextActive.value;\n\n          if (selectedRef.current === item.value) {\n            setSelected(null, nextActive.value);\n          }\n\n          nextActive?.element?.focus();\n        };\n\n        if (document.activeElement === document.body) {\n          requestAnimationFrame(() => {\n            if (document.activeElement === document.body) {\n              containFocus();\n            }\n          });\n        } else {\n          const handleFocusOut = (event: FocusEvent) => {\n            if (!event.relatedTarget) {\n              requestAnimationFrame(() => {\n                if (document.activeElement === document.body) {\n                  containFocus();\n                }\n              });\n            }\n          };\n\n          item.element.ownerDocument.addEventListener(\n            \"focusout\",\n            handleFocusOut,\n            {\n              once: true,\n            },\n          );\n\n          setTimeout(() => {\n            item.element.ownerDocument.removeEventListener(\n              \"focusout\",\n              handleFocusOut,\n            );\n          }, 1000);\n        }\n      };\n    });\n\n    const registerPanel = useCallback((id: string, value: string) => {\n      setValueToPanelIdMap(({ map }) => {\n        map.set(value, id);\n        return { map };\n      });\n      return () => {\n        setValueToIdMap(({ map }) => {\n          map.delete(value);\n          return { map };\n        });\n      };\n    }, []);\n\n    const getPanelId = useCallback(\n      (value: string) => {\n        return valueToPanelIdMap.map.get(value);\n      },\n      [valueToPanelIdMap],\n    );\n\n    const getTabId = useCallback(\n      (value: string) => {\n        return valueToTabIdMap.map.get(value);\n      },\n      [valueToTabIdMap],\n    );\n\n    const context = useMemo(\n      () => ({\n        registerTab,\n        registerPanel,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        activeTab,\n        menuOpen,\n        setMenuOpen,\n        returnFocus,\n      }),\n      [\n        registerPanel,\n        registerTab,\n        getPanelId,\n        getTabId,\n        selected,\n        setSelected,\n        item,\n        getNext,\n        getPrevious,\n        getFirst,\n        getLast,\n        items,\n        menuOpen,\n      ],\n    );\n\n    return (\n      <TabsNextContext.Provider value={context}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n          {children}\n        </div>\n      </TabsNextContext.Provider>\n    );\n  },\n);\n"],"names":["TabsNext","value","item","items"],"mappings":"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"}

package/esm/tabs-next/TabsNextContext.js

@@ -1,30 +0,0 @@
-import { createContext } from '@salt-ds/core';
-import { useContext } from 'react';
-
-const TabsNextContext = createContext(
-  "TabsNextContext",
-  {
-    getFirst: () => null,
-    getLast: () => null,
-    getNext: () => null,
-    getPrevious: () => null,
-    item: () => null,
-    items: [],
-    selected: void 0,
-    registerTab: () => () => void 0,
-    registerPanel: () => () => void 0,
-    getPanelId: () => void 0,
-    getTabId: () => void 0,
-    setSelected: () => void 0,
-    activeTab: { current: void 0 },
-    returnFocus: { current: void 0 },
-    menuOpen: false,
-    setMenuOpen: () => void 0
-  }
-);
-function useTabsNext() {
-  return useContext(TabsNextContext);
-}
-
-export { TabsNextContext, useTabsNext };
-//# sourceMappingURL=TabsNextContext.js.map

package/esm/tabs-next/TabsNextContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsNextContext.js","sources":["../../../../packages/vuu-ui-controls/src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n  id: string;\n  value: string;\n  element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n  extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n  registerTab: (item: Item) => () => void;\n  registerPanel: (id: string, value: string) => () => void;\n  getPanelId: (value: string) => string | undefined;\n  getTabId: (value: string) => string | undefined;\n  selected?: string;\n  setSelected: (event: SyntheticEvent, value: string) => void;\n  activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n  returnFocus: MutableRefObject<string | undefined>;\n  menuOpen: boolean;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n  \"TabsNextContext\",\n  {\n    getFirst: () => null,\n    getLast: () => null,\n    getNext: () => null,\n    getPrevious: () => null,\n    item: () => null,\n    items: [],\n    selected: undefined,\n    registerTab: () => () => undefined,\n    registerPanel: () => () => undefined,\n    getPanelId: () => undefined,\n    getTabId: () => undefined,\n    setSelected: () => undefined,\n    activeTab: { current: undefined },\n    returnFocus: { current: undefined },\n    menuOpen: false,\n    setMenuOpen: () => undefined,\n  },\n);\n\nexport function useTabsNext() {\n  return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAkB,GAAA,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,KAAA,CAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,KAAA,CAAA;AAAA,IAC3B,YAAY,MAAM,KAAA,CAAA;AAAA,IAClB,UAAU,MAAM,KAAA,CAAA;AAAA,IAChB,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAChC,WAAA,EAAa,EAAE,OAAA,EAAS,KAAU,CAAA,EAAA;AAAA,IAClC,QAAU,EAAA,KAAA;AAAA,IACV,aAAa,MAAM,KAAA;AAAA;AAEvB;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}

package/esm/tabs-next/hooks/useCollection.js

@@ -1,89 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-
-function sortBasedOnDOMPosition(items) {
-  const indexedItems = items.map((item, index) => [index, item]);
-  let orderChanged = false;
-  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {
-    const itemAElement = itemA.element;
-    const itemBElement = itemB.element;
-    if (itemAElement === itemBElement) return 0;
-    if (!itemAElement || !itemBElement) return 0;
-    if (itemAElement.compareDocumentPosition(itemBElement) & Node.DOCUMENT_POSITION_FOLLOWING) {
-      if (itemAIndex > itemBIndex) {
-        orderChanged = true;
-      }
-      return -1;
-    }
-    if (itemAIndex < itemBIndex) {
-      orderChanged = true;
-    }
-    return 1;
-  });
-  if (orderChanged) {
-    return indexedItems.map(([_, item]) => item);
-  }
-  return items;
-}
-function useCollection({ wrap }) {
-  const [items, setItems] = useState([]);
-  const itemsRef = useRef([]);
-  const itemMap = useRef(/* @__PURE__ */ new Map());
-  const registerItem = useCallback((item) => {
-    setItems((old) => {
-      const newItems = old.slice();
-      const index = newItems.findIndex(({ id }) => id === item.id);
-      if (index !== -1) {
-        const newItem = { ...newItems[index], ...item };
-        newItems[index] = newItem;
-        itemMap.current.set(item.id, newItem);
-      } else {
-        newItems.push(item);
-        itemMap.current.set(item.id, item);
-      }
-      const value = sortBasedOnDOMPosition(newItems);
-      itemsRef.current = value;
-      return value;
-    });
-    return () => {
-      setItems((old) => {
-        itemMap.current.delete(item.id);
-        return old.filter(({ id }) => id !== item.id);
-      });
-      return itemsRef;
-    };
-  }, []);
-  return {
-    registerItem,
-    item: (id) => {
-      if (!id) return null;
-      let item = itemMap.current.get(id);
-      if (!item) {
-        item = items.find((item2) => item2.id === id);
-        if (item) {
-          itemMap.current.set(item.id, item);
-        }
-      }
-      return item ?? null;
-    },
-    getNext: (current) => {
-      const index = items.findIndex(({ id }) => id === current);
-      const newIndex = wrap ? (index + 1) % items.length : Math.min(index + 1, items.length - 1);
-      return items[newIndex] ?? null;
-    },
-    getPrevious: (current) => {
-      const index = items.findIndex(({ id }) => id === current);
-      const newIndex = wrap ? (index - 1 + items.length) % items.length : Math.max(index - 1, 0);
-      return items[newIndex] ?? null;
-    },
-    getFirst: () => {
-      return items[0] ?? null;
-    },
-    getLast: () => {
-      return items[items.length - 1] ?? null;
-    },
-    items
-  };
-}
-
-export { useCollection };
-//# sourceMappingURL=useCollection.js.map

package/esm/tabs-next/hooks/useCollection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCollection.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useCollection.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nexport interface Item {\n  id: string;\n  element?: HTMLElement | null;\n  value: string;\n}\n\nfunction sortBasedOnDOMPosition(items: Item[]): Item[] {\n  const indexedItems = items.map((item, index) => [index, item] as const);\n  let orderChanged = false;\n  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {\n    const itemAElement = itemA.element;\n    const itemBElement = itemB.element;\n    if (itemAElement === itemBElement) return 0;\n    if (!itemAElement || !itemBElement) return 0;\n\n    if (\n      itemAElement.compareDocumentPosition(itemBElement) &\n      Node.DOCUMENT_POSITION_FOLLOWING\n    ) {\n      if (itemAIndex > itemBIndex) {\n        orderChanged = true;\n      }\n      return -1;\n    }\n\n    if (itemAIndex < itemBIndex) {\n      orderChanged = true;\n    }\n    return 1;\n  });\n\n  if (orderChanged) {\n    return indexedItems.map(([_, item]) => item);\n  }\n  return items;\n}\n\ninterface UseCollectionProps {\n  wrap: boolean;\n}\n\nexport function useCollection({ wrap }: UseCollectionProps) {\n  const [items, setItems] = useState<Item[]>([]);\n  const itemsRef = useRef<Item[]>([]);\n  const itemMap = useRef<Map<string, Item>>(new Map());\n\n  const registerItem = useCallback((item: Item) => {\n    setItems((old) => {\n      const newItems = old.slice();\n      const index = newItems.findIndex(({ id }) => id === item.id);\n      if (index !== -1) {\n        const newItem = { ...newItems[index], ...item };\n        newItems[index] = newItem;\n        itemMap.current.set(item.id, newItem);\n      } else {\n        newItems.push(item);\n        itemMap.current.set(item.id, item);\n      }\n      const value = sortBasedOnDOMPosition(newItems);\n      itemsRef.current = value;\n      return value;\n    });\n\n    return () => {\n      setItems((old) => {\n        itemMap.current.delete(item.id);\n        return old.filter(({ id }) => id !== item.id);\n      });\n      return itemsRef;\n    };\n  }, []);\n\n  return {\n    registerItem,\n    item: (id?: string | null): Item | null => {\n      if (!id) return null;\n      let item = itemMap.current.get(id);\n      if (!item) {\n        item = items.find((item) => item.id === id);\n        if (item) {\n          itemMap.current.set(item.id, item);\n        }\n      }\n      return item ?? null;\n    },\n    getNext: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index + 1) % items.length\n        : Math.min(index + 1, items.length - 1);\n\n      return items[newIndex] ?? null;\n    },\n    getPrevious: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index - 1 + items.length) % items.length\n        : Math.max(index - 1, 0);\n\n      return items[newIndex] ?? null;\n    },\n    getFirst: (): Item | null => {\n      return items[0] ?? null;\n    },\n    getLast: (): Item | null => {\n      return items[items.length - 1] ?? null;\n    },\n    items,\n  };\n}\n"],"names":["item"],"mappings":"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"}

package/esm/tabs-next/hooks/useFocusOutside.js

@@ -1,22 +0,0 @@
-import { useWindow } from '@salt-ds/window';
-import { useEffect } from 'react';
-
-function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
-  const targetWindow = useWindow();
-  useEffect(() => {
-    if (!enabled) return;
-    const handleFocus = (event) => {
-      const ignoreElement = elementRef.current?.ownerDocument?.querySelector(ignore) ;
-      if (event.target instanceof HTMLElement && !elementRef.current?.contains(event.target) && !ignoreElement?.contains(event.target)) {
-        onFocusOutside();
-      }
-    };
-    targetWindow?.addEventListener("focusin", handleFocus);
-    return () => {
-      targetWindow?.removeEventListener("focusin", handleFocus);
-    };
-  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
-}
-
-export { useFocusOutside };
-//# sourceMappingURL=useFocusOutside.js.map

package/esm/tabs-next/hooks/useFocusOutside.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusOutside.js","sources":["../../../../../packages/vuu-ui-controls/src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n  elementRef: RefObject<HTMLElement | null>,\n  onFocusOutside: () => void,\n  enabled: boolean,\n  ignore?: string,\n) {\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleFocus = (event: FocusEvent) => {\n      const ignoreElement = ignore\n        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n        : undefined;\n\n      // If focus is outside the tabstrip (including the list) then close the list.\n      if (\n        event.target instanceof HTMLElement &&\n        !elementRef.current?.contains(event.target) &&\n        !ignoreElement?.contains(event.target)\n      ) {\n        onFocusOutside();\n      }\n    };\n\n    targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n    return () => {\n      targetWindow?.removeEventListener(\"focusin\", handleFocus);\n    };\n  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,eACd,CAAA,UAAA,EACA,cACA,EAAA,OAAA,EACA,MACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,MAAA,MAAM,gBACF,UAAA,CAAW,SAAS,aAAe,EAAA,aAAA,CAA2B,MAAM,CACpE,CAAA;AAGJ,MAAA,IACE,KAAM,CAAA,MAAA,YAAkB,WACxB,IAAA,CAAC,WAAW,OAAS,EAAA,QAAA,CAAS,KAAM,CAAA,MAAM,KAC1C,CAAC,aAAA,EAAe,QAAS,CAAA,KAAA,CAAM,MAAM,CACrC,EAAA;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACF;AAEA,IAAc,YAAA,EAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,OAAO,MAAM;AACX,MAAc,YAAA,EAAA,mBAAA,CAAoB,WAAW,WAAW,CAAA;AAAA,KAC1D;AAAA,KACC,CAAC,YAAA,EAAc,gBAAgB,UAAY,EAAA,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}

package/esm/tabs-next/hooks/useOverflow.js

@@ -1,136 +0,0 @@
-import { useValueEffect, useEventCallback, useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
-import { useEffect, useMemo, Children } from 'react';
-
-function getTabWidth(element) {
-  const { width } = element.getBoundingClientRect();
-  return Math.ceil(width);
-}
-function useOverflow({
-  tabs,
-  container,
-  overflowButton,
-  children,
-  selected
-}) {
-  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({
-    visibleCount: tabs.length,
-    isMeasuring: false
-  });
-  const targetWindow = useWindow();
-  const updateOverflow = useEventCallback(() => {
-    const computeVisible = (visibleCount2) => {
-      if (container.current && targetWindow) {
-        const items = Array.from(
-          container.current.querySelectorAll(
-            "[data-overflowitem]"
-          )
-        );
-        const selectedTab = container.current.querySelector(
-          "[role=tab][aria-selected=true]"
-        )?.parentElement;
-        let maxWidth = container.current.clientWidth ?? 0;
-        const containerStyles = targetWindow.getComputedStyle(
-          container.current
-        );
-        const gap = Number.parseInt(containerStyles.gap || "0");
-        let currentWidth = 0;
-        let newVisibleCount = 0;
-        const visible2 = [];
-        while (newVisibleCount < items.length) {
-          const element = items[newVisibleCount];
-          if (element) {
-            if (currentWidth + getTabWidth(element) + gap > maxWidth) {
-              break;
-            }
-            currentWidth += getTabWidth(element) + gap;
-            visible2.push(element);
-          }
-          newVisibleCount++;
-        }
-        if (newVisibleCount >= items.length) {
-          return newVisibleCount;
-        }
-        const overflowButtonWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
-        maxWidth -= overflowButtonWidth;
-        while (currentWidth > maxWidth) {
-          const removed = visible2.pop();
-          if (!removed) break;
-          currentWidth -= getTabWidth(removed) + gap;
-          newVisibleCount--;
-        }
-        if (selectedTab && !visible2.includes(selectedTab)) {
-          const selectedTabWidth = getTabWidth(selectedTab) + gap;
-          while (currentWidth + selectedTabWidth > maxWidth) {
-            const removed = visible2.pop();
-            if (!removed) break;
-            currentWidth -= getTabWidth(selectedTab) + gap;
-            newVisibleCount--;
-          }
-        }
-        return Math.max(1, newVisibleCount);
-      }
-      return visibleCount2;
-    };
-    setVisibleItems(function* () {
-      yield {
-        visibleCount: tabs.length,
-        isMeasuring: true
-      };
-      const newVisibleCount = computeVisible(tabs.length);
-      const isMeasuring2 = newVisibleCount < tabs.length && newVisibleCount > 0;
-      yield {
-        visibleCount: newVisibleCount,
-        isMeasuring: isMeasuring2
-      };
-      if (isMeasuring2) {
-        yield {
-          visibleCount: computeVisible(newVisibleCount),
-          isMeasuring: false
-        };
-      }
-    });
-  });
-  useIsomorphicLayoutEffect(() => {
-    updateOverflow();
-  }, [selected]);
-  useEffect(() => {
-    const element = container?.current;
-    if (!element) return;
-    const win = ownerWindow(element);
-    const resizeObserver = new win.ResizeObserver((entries) => {
-      requestAnimationFrame(() => {
-        if (entries.length === 0) return;
-        updateOverflow();
-      });
-    });
-    resizeObserver.observe(element);
-    if (element.parentElement) {
-      resizeObserver.observe(element.parentElement);
-    }
-    return () => {
-      if (element) {
-        resizeObserver.unobserve(element);
-      }
-    };
-  }, [container, updateOverflow]);
-  const childArray = useMemo(() => Children.toArray(children), [children]);
-  const visible = childArray.slice(0, visibleCount || 1);
-  const hidden = childArray.slice(visibleCount || 1);
-  const hiddenSelectedIndex = hidden.findIndex(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (child) => child?.props?.value === selected
-  );
-  if (selected && hiddenSelectedIndex !== -1) {
-    const removed = hidden.splice(hiddenSelectedIndex, 1);
-    visible.push(removed[0]);
-  }
-  if (isMeasuring) {
-    return [childArray, [], isMeasuring];
-  }
-  return [visible, hidden, isMeasuring];
-}
-
-export { useOverflow };
-//# sourceMappingURL=useOverflow.js.map