@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.4

package/src/table-search/moving-window.js

@@ -1,49 +0,0 @@
-import { WindowRange, metadataKeys } from "@vuu-ui/vuu-utils";
-const { SELECTED: SELECTED } = metadataKeys;
-class MovingWindow {
-    data;
-    rowCount = 0;
-    range;
-    constructor({ from, to }){
-        this.range = new WindowRange(from, to);
-        this.data = new Array(to - from);
-        this.rowCount = 0;
-    }
-    setRowCount = (rowCount)=>{
-        if (rowCount < this.data.length) this.data.length = rowCount;
-        this.rowCount = rowCount;
-    };
-    add(data) {
-        const [index] = data;
-        if (this.isWithinRange(index)) {
-            const internalIndex = index - this.range.from;
-            this.data[internalIndex] = data;
-        }
-    }
-    getAtIndex(index) {
-        return this.range.isWithin(index) && null != this.data[index - this.range.from] ? this.data[index - this.range.from] : void 0;
-    }
-    isWithinRange(index) {
-        return this.range.isWithin(index);
-    }
-    setRange({ from, to }) {
-        if (from !== this.range.from || to !== this.range.to) {
-            const [overlapFrom, overlapTo] = this.range.overlap(from, to);
-            const newData = new Array(Math.max(0, to - from));
-            for(let i = overlapFrom; i < overlapTo; i++){
-                const data = this.getAtIndex(i);
-                if (data) {
-                    const index = i - from;
-                    newData[index] = data;
-                }
-            }
-            this.data = newData;
-            this.range.from = from;
-            this.range.to = to;
-        }
-    }
-    getSelectedRows() {
-        return this.data.filter((row)=>0 !== row[SELECTED]);
-    }
-}
-export { MovingWindow };

package/src/table-search/useTableSearch.js

@@ -1,30 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-const useTableSearch = ({ dataSource, searchColumns })=>{
-    const [searchState, setSearchState] = useState({
-        searchText: "",
-        filter: ""
-    });
-    const baseFilterPattern = useMemo(()=>searchColumns.map((col)=>`${col} contains "__VALUE__"`).join(" or "), [
-        searchColumns
-    ]);
-    const handleChange = useCallback((evt)=>{
-        const { value } = evt.target;
-        const filter = baseFilterPattern.replaceAll("__VALUE__", value);
-        setSearchState({
-            searchText: value,
-            filter
-        });
-        if (dataSource) dataSource.filter = {
-            filter
-        };
-    }, [
-        baseFilterPattern,
-        dataSource
-    ]);
-    return {
-        dataSource,
-        onChange: handleChange,
-        searchState
-    };
-};
-export { useTableSearch };

package/src/tabs-next/TabBar.css.js

@@ -1,26 +0,0 @@
-const css = `
-.saltTabBar {
-  align-items: center;
-  gap: var(--salt-spacing-100);
-  box-sizing: border-box;
-  flex-direction: row;
-  display: flex;
-  position: relative;
-}
-
-.saltTabBar-divider:before {
-  content: "";
-  height: var(--salt-size-border);
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
-  position: absolute;
-  inset: auto 0 0;
-}
-
-.saltTabBar-inset {
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-}
-
-
-`;
-export default css;

package/src/tabs-next/TabBar.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { forwardRef } from "react";
-import { makePrefixer } from "@salt-ds/core";
-import { clsx } from "clsx";
-import TabBar_0 from "./TabBar.css";
-const withBaseName = makePrefixer("saltTabBar");
-const TabBar_TabBar = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { className, children, divider, inset, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-tab-bar",
-        css: TabBar_0,
-        window: targetWindow
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(withBaseName(), {
-            [withBaseName("divider")]: divider,
-            [withBaseName("inset")]: inset
-        }, className),
-        ...rest,
-        ref: ref,
-        children: children
-    });
-});
-export { TabBar_TabBar as TabBar };

package/src/tabs-next/TabListNext.css.js

@@ -1,36 +0,0 @@
-const css = `
-.saltTabListNext {
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--salt-spacing-100);
-  background: none;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  display: flex;
-  position: relative;
-}
-
-.saltTabListNext-center {
-  justify-content: center;
-}
-
-.saltTabListNext-right {
-  justify-content: flex-end;
-}
-
-.saltTabListNext-activeColorPrimary {
-  --saltTabListNext-activeColor: var(--salt-container-primary-background);
-}
-
-.saltTabListNext-activeColorSecondary {
-  --saltTabListNext-activeColor: var(--salt-container-secondary-background);
-}
-
-.saltTabListNext-activeColorTertiary {
-  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
-}
-
-
-`;
-export default css;

package/src/tabs-next/TabListNext.js

@@ -1,94 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { capitalize, makePrefixer, useForkRef, useIsomorphicLayoutEffect } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useRef } from "react";
-import TabListNext from "./TabListNext.css";
-import { TabOverflowList } from "./TabOverflowList.js";
-import { useTabsNext } from "./TabsNextContext.js";
-import { useOverflow } from "./hooks/useOverflow.js";
-const withBaseName = makePrefixer("saltTabListNext");
-const TabListNext_TabListNext = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { appearance = "bordered", activeColor = "primary", children, className, onKeyDown, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-tablist-next",
-        css: TabListNext,
-        window: targetWindow
-    });
-    const { selected, getNext, getPrevious, getFirst, getLast, items, activeTab, menuOpen, setMenuOpen, returnFocus } = useTabsNext();
-    const tabstripRef = useRef(null);
-    const handleRef = useForkRef(tabstripRef, ref);
-    const overflowButtonRef = useRef(null);
-    const [visible, hidden, isMeasuring] = useOverflow({
-        container: tabstripRef,
-        tabs: items,
-        children,
-        selected,
-        overflowButton: overflowButtonRef
-    });
-    const handleKeyDown = (event)=>{
-        onKeyDown?.(event);
-        const actionMap = {
-            ArrowRight: getNext,
-            ArrowLeft: getPrevious,
-            Home: getFirst,
-            End: getLast,
-            ArrowUp: menuOpen ? getPrevious : void 0,
-            ArrowDown: menuOpen ? getNext : void 0
-        };
-        const action = actionMap[event.key];
-        if (action) {
-            event.preventDefault();
-            const activeTabId = activeTab.current?.id;
-            if (!activeTabId) return;
-            const nextItem = action(activeTabId);
-            if (nextItem) {
-                nextItem.element?.scrollIntoView({
-                    block: "nearest",
-                    inline: "nearest"
-                });
-                nextItem.element?.focus({
-                    preventScroll: true
-                });
-            }
-        }
-    };
-    useIsomorphicLayoutEffect(()=>{
-        if (!returnFocus.current || visible.length < 1 || void 0 === selected) return;
-        const itemToFocus = items.find((i)=>i.value === returnFocus.current);
-        itemToFocus?.element?.focus({
-            preventScroll: true
-        });
-        requestAnimationFrame(()=>{
-            if (targetWindow?.document?.activeElement === itemToFocus?.element) returnFocus.current = void 0;
-        });
-    }, [
-        visible,
-        returnFocus,
-        targetWindow,
-        items,
-        selected
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        role: "tablist",
-        className: clsx(withBaseName(), withBaseName(appearance), withBaseName("horizontal"), withBaseName(`activeColor${capitalize(activeColor)}`), className),
-        "data-ismeasuring": isMeasuring ? true : void 0,
-        ref: handleRef,
-        onKeyDown: handleKeyDown,
-        ...rest,
-        children: [
-            visible,
-            /*#__PURE__*/ jsx(TabOverflowList, {
-                isMeasuring: isMeasuring,
-                buttonRef: overflowButtonRef,
-                tabstripRef: tabstripRef,
-                open: menuOpen,
-                setOpen: setMenuOpen,
-                children: hidden
-            })
-        ]
-    });
-});
-export { TabListNext_TabListNext as TabListNext };

package/src/tabs-next/TabNext.css.js

@@ -1,76 +0,0 @@
-const css = `
-.saltTabNext {
-  appearance: none;
-  justify-content: center;
-  align-items: center;
-  gap: var(--salt-spacing-100);
-  border: none;
-  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
-  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
-  white-space: pre;
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  min-width: 4em;
-  padding: var(--salt-spacing-50) var(--salt-spacing-100);
-  box-sizing: border-box;
-  --tabNext-radius: var(--salt-palette-corner-weak, 0);
-  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
-  cursor: var(--salt-navigable-cursor-hover);
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-navigable-fontWeight);
-  font-family: var(--salt-text-fontFamily);
-  text-align: var(--salt-text-textAlign);
-  letter-spacing: var(--salt-text-letterSpacing);
-  line-height: var(--salt-text-lineHeight);
-  font-size: var(--salt-text-fontSize);
-  flex-shrink: 0;
-  display: inline-flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.saltTabNext:after {
-  content: "";
-  left: calc(var(--salt-size-border) * -1);
-  right: calc(var(--salt-size-border) * -1);
-  height: var(--salt-size-indicator);
-  position: absolute;
-}
-
-.saltTabListNext-bordered .saltTabNext:after {
-  top: 0;
-}
-
-.saltTabListNext-transparent .saltTabNext:after {
-  bottom: 0;
-}
-
-.saltTabNext:hover:after, .saltTabNext-focusVisible:after {
-  background: var(--salt-navigable-indicator-hover);
-}
-
-.saltTabNext-disabled:hover:after, .saltTabNext-disabled.saltTabNext-focusVisible:after {
-  background: none;
-}
-
-.saltTabNext-focusVisible {
-  outline: var(--salt-focused-outline);
-}
-
-.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {
-  background: var(--saltTabListNext-activeColor);
-  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
-  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);
-}
-
-.saltTabNext.saltTabNext-selected:after {
-  background: var(--salt-navigable-indicator-active);
-}
-
-.saltTabNext.saltTabNext-disabled {
-  cursor: var(--salt-navigable-cursor-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
-}
-
-
-`;
-export default css;

package/src/tabs-next/TabNext.js

@@ -1,91 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { makePrefixer, useId } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
-import TabNext from "./TabNext.css";
-import { TabNextContext } from "./TabNextContext.js";
-import { useTabsNext } from "./TabsNextContext.js";
-const withBaseName = makePrefixer("saltTabNext");
-const TabNext_TabNext = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, children, className, disabled: disabledProp, onBlur, onMouseDown, onFocus, onFocusCapture, value, id: idProp, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-tab-next",
-        css: TabNext,
-        window: targetWindow
-    });
-    const { selected, activeTab } = useTabsNext();
-    const disabled = !!disabledProp;
-    const id = useId(idProp);
-    const wasMouseDown = useRef(false);
-    const [focusVisible, setFocusVisible] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const handleFocusCapture = (event)=>{
-        onFocusCapture?.(event);
-        if (value && id) activeTab.current = {
-            value,
-            id
-        };
-    };
-    const handleFocus = (event)=>{
-        onFocus?.(event);
-        setFocused(true);
-        if (!wasMouseDown.current && "tab" === event.target.getAttribute("role")) setFocusVisible(true);
-        wasMouseDown.current = false;
-    };
-    const handleBlur = (event)=>{
-        onBlur?.(event);
-        setFocused(false);
-        setFocusVisible(false);
-    };
-    const handleMouseDown = (event)=>{
-        onMouseDown?.(event);
-        wasMouseDown.current = true;
-    };
-    const [actions, setActions] = useState([]);
-    const registerAction = useCallback((id)=>{
-        setActions((old)=>old.concat(id));
-        return ()=>{
-            setActions((old)=>old.filter((action)=>action !== id));
-        };
-    }, []);
-    const context = useMemo(()=>({
-            tabId: id,
-            selected: selected === value,
-            focused,
-            value,
-            disabled,
-            actions,
-            registerAction
-        }), [
-        id,
-        selected,
-        value,
-        focused,
-        disabled,
-        actions,
-        registerAction
-    ]);
-    return /*#__PURE__*/ jsx(TabNextContext.Provider, {
-        value: context,
-        children: /*#__PURE__*/ jsx("div", {
-            className: clsx(withBaseName(), {
-                [withBaseName("selected")]: selected === value,
-                [withBaseName("disabled")]: disabled,
-                [withBaseName("focusVisible")]: focusVisible
-            }, className),
-            "data-overflowitem": "true",
-            ref: ref,
-            onMouseDown: handleMouseDown,
-            onFocusCapture: handleFocusCapture,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            role: "presentation",
-            ...rest,
-            children: children
-        })
-    });
-});
-export { TabNext_TabNext as TabNext };

package/src/tabs-next/TabNextAction.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Button, useId, useIsomorphicLayoutEffect } from "@salt-ds/core";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { useTabNext } from "./TabNextContext.js";
-const TabNextAction_TabNextAction = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
-    const id = useId(idProp);
-    const { focused, selected, tabId, registerAction } = useTabNext();
-    useIsomorphicLayoutEffect(()=>{
-        if (id) return registerAction(id);
-    }, [
-        registerAction,
-        id
-    ]);
-    return /*#__PURE__*/ jsx(Button, {
-        id: id,
-        "aria-labelledby": clsx(ariaLabelledBy, tabId, id),
-        tabIndex: focused || selected ? void 0 : -1,
-        appearance: "transparent",
-        sentiment: "neutral",
-        ref: ref,
-        ...rest
-    });
-});
-export { TabNextAction_TabNextAction as TabNextAction };

package/src/tabs-next/TabNextContext.js

@@ -1,14 +0,0 @@
-import { createContext } from "@salt-ds/core";
-import { useContext } from "react";
-const TabNextContext = createContext("TabNextContext", {
-    focused: false,
-    selected: false,
-    disabled: false,
-    value: "",
-    actions: [],
-    registerAction: ()=>()=>void 0
-});
-function useTabNext() {
-    return useContext(TabNextContext);
-}
-export { TabNextContext, useTabNext };

package/src/tabs-next/TabNextPanel.css.js

@@ -1,17 +0,0 @@
-const css = `
-.saltTabNextPanel {
-  width: 100%;
-  height: 100%;
-}
-
-.saltTabNextPanel[hidden] {
-  display: none;
-}
-
-.saltTabNextPanel:focus-visible {
-  outline: var(--salt-focused-outline);
-}
-
-
-`;
-export default css;

package/src/tabs-next/TabNextPanel.js

@@ -1,69 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { makePrefixer, useForkRef, useId, useIsomorphicLayoutEffect } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { tabbable } from "tabbable";
-import TabNextPanel_0 from "./TabNextPanel.css";
-import { useTabsNext } from "./TabsNextContext.js";
-const withBaseName = makePrefixer("saltTabNextPanel");
-const TabNextPanel_TabNextPanel = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { className, children, id: idProp, value, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-tab-next-panel",
-        css: TabNextPanel_0,
-        window: targetWindow
-    });
-    const id = useId(idProp);
-    const { registerPanel, getTabId, selected } = useTabsNext();
-    const panelRef = useRef(null);
-    const handleRef = useForkRef(panelRef, ref);
-    useIsomorphicLayoutEffect(()=>{
-        if (value && id) return registerPanel(id, value);
-    }, [
-        value,
-        id,
-        registerPanel
-    ]);
-    const [hasFocusableChildren, setHasFocusableChildren] = useState(false);
-    useEffect(()=>{
-        if (!panelRef.current) return;
-        const detectFocusableChildren = ()=>{
-            requestAnimationFrame(()=>{
-                if (!panelRef.current) return;
-                const elements = tabbable(panelRef.current);
-                setHasFocusableChildren(elements.length > 0);
-            });
-        };
-        const observer = new MutationObserver(()=>{
-            detectFocusableChildren();
-        });
-        requestAnimationFrame(()=>{
-            detectFocusableChildren();
-        });
-        observer.observe(panelRef.current, {
-            childList: true,
-            subtree: true,
-            attributes: true
-        });
-        return ()=>{
-            observer.disconnect();
-        };
-    }, []);
-    const hidden = selected !== value;
-    const tabId = getTabId(value);
-    return /*#__PURE__*/ jsx("div", {
-        id: id,
-        ref: handleRef,
-        role: "tabpanel",
-        "aria-labelledby": tabId,
-        className: clsx(withBaseName(), className),
-        hidden: hidden || void 0,
-        tabIndex: hidden || hasFocusableChildren ? void 0 : 0,
-        ...rest,
-        children: children
-    });
-});
-export { TabNextPanel_TabNextPanel as TabNextPanel };

package/src/tabs-next/TabNextTrigger.css.js

@@ -1,22 +0,0 @@
-const css = `
-.saltTabNextTrigger {
-  all: unset;
-  gap: var(--salt-spacing-100);
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.saltTabNextTrigger:before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-
-`;
-export default css;

package/src/tabs-next/TabNextTrigger.js

@@ -1,66 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { clsx } from "clsx";
-import { forwardRef, useRef } from "react";
-import { useTabNext } from "./TabNextContext.js";
-import TabNextTrigger_0 from "./TabNextTrigger.css";
-import { useTabsNext } from "./TabsNextContext.js";
-const withBaseName = makePrefixer("saltTabNextTrigger");
-function getAriaDescription(count) {
-    if (count < 1) return;
-    if (1 === count) return "1 action available";
-    return `${count} actions available`;
-}
-const TabNextTrigger_TabNextTrigger = /*#__PURE__*/ forwardRef(function(props, ref) {
-    const { children, id: idProp, onClick, onKeyDown, ...rest } = props;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "salt-tab-next-trigger",
-        css: TabNextTrigger_0,
-        window: targetWindow
-    });
-    const { setSelected, registerTab, getPanelId } = useTabsNext();
-    const { selected, value, focused, disabled, tabId, actions } = useTabNext();
-    const tabRef = useRef(null);
-    const id = tabId;
-    useIsomorphicLayoutEffect(()=>{
-        if (value && id && tabRef.current) return registerTab({
-            id,
-            value,
-            element: tabRef.current
-        });
-    }, [
-        value,
-        id,
-        registerTab
-    ]);
-    const handleClick = (event)=>{
-        setSelected(event, value);
-    };
-    const handleKeyDown = (event)=>{
-        onKeyDown?.(event);
-        if ("Enter" === event.key || " " === event.key) setSelected(event, value);
-    };
-    const handleRef = useForkRef(tabRef, ref);
-    const panelId = getPanelId(value);
-    return /*#__PURE__*/ jsx("button", {
-        "aria-selected": selected,
-        "aria-disabled": disabled,
-        "aria-controls": panelId,
-        "aria-actions": clsx(actions) || void 0,
-        "aria-description": getAriaDescription(actions.length),
-        tabIndex: focused || selected ? void 0 : -1,
-        role: "tab",
-        type: "button",
-        onClick: disabled ? void 0 : handleClick,
-        onKeyDown: disabled ? void 0 : handleKeyDown,
-        className: withBaseName(),
-        id: id,
-        ref: handleRef,
-        ...rest,
-        children: children
-    });
-});
-export { TabNextTrigger_TabNextTrigger as TabNextTrigger };