@vuu-ui/vuu-ui-controls 3.0.0 → 3.1.0-beta.1

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,66 @@
+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 };