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

package/src/split-button/SplitButton.css.js

@@ -0,0 +1,117 @@
+const css = `
+.vuuSplitButton {
+  --saltButton-background: var(--split-background);
+  --saltButton-background-hover: var(--split-background);
+  --vuuPopupMenu-background: var(--split-background);
+  --vuuPopupMenu-iconSize: 20px;
+  --background: var(--vuuSplitButton-background);
+  --foreground: var(--vuuSplitButton-foreground);
+  --background-hover: var(--vuuSplitButton-background-hover);
+  --foreground-hover: var(--vuuSplitButton-foreground-hover);
+  --border-radius: var(--vuuSplitButton-borderRadius, var(--salt-palette-corner-weaker));
+  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);
+  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  --trigger-border-style: solid solid solid none;
+  border-radius: var(--border-radius);
+  border: none;
+  align-items: center;
+  display: flex;
+
+  & .vuuSplitButton-main {
+    border-radius: var(--main-border-radius);
+  }
+
+  & .vuuSplitButton-trigger {
+    border-radius: var(--trigger-border-radius);
+  }
+}
+
+.vuuSplitButton.vuuFocusVisible {
+  & .saltButton {
+    outline-style: none;
+  }
+
+  &.vuuSplitButton-primary {
+    --split-background: var(--background-hover, var(--salt-actionable-bold-background-hover));
+  }
+
+  &.vuuSplitButton-secondary {
+    --split-background: var(--background-hover, var(--salt-actionable-subtle-background-hover));
+  }
+
+  &.vuuSplitButton-cta {
+    --split-background: var(--background-hover, var(--salt-actionable-accented-bold-background-hover));
+
+    & .vuuSplitButton-trigger {
+      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);
+    }
+  }
+}
+
+.vuuFocusVisible {
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+}
+
+.vuuSplitButton-primary {
+  --split-background: var(--background, var(--salt-actionable-bold-background));
+  --split-background-active: var(--salt-actionable-bold-background-active);
+  --split-color-active: var(--salt-actionable-bold-foreground-active);
+}
+
+.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --saltButton-borderColor: var(--split-background);
+  --split-background: var(--background-hover, var(--salt-actionable-bold-background-hover));
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);
+  }
+}
+
+.vuuSplitButton-secondary {
+  --saltButton-borderColor: var(--split-background);
+  --split-background: var(--background, var(--salt-actionable-subtle-background));
+  --split-background-active: var(--salt-actionable-subtle-background-active);
+  --split-color-active: var(--salt-actionable-subtle-foreground-active);
+}
+
+.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --split-background: var(--salt-actionable-subtle-background-hover);
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);
+  }
+}
+
+.vuuSplitButton-cta {
+  --split-background: var(--background, var(--salt-actionable-accented-bold-background));
+  --split-background-active: var(--salt-actionable-accented-bold-background-active);
+  --split-color-active: var(--salt-actionable-bold-foreground-active);
+}
+
+.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {
+  --vuuButton-borderColor: var(--split-background);
+  --split-background: var(--salt-actionable-accented-bold-background-hover);
+  --split-color: var(--salt-actionable-bold-foreground-hover);
+
+  & .saltButton {
+    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);
+    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);
+  }
+}
+
+.vuuSplitButton:has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--split-background-active);
+
+  & .vuuSplitButton-trigger {
+    --vuu-icon-color: var(--split-color-active);
+  }
+}
+
+
+`;
+export default css;

package/src/split-button/SplitButton.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ContextMenuProvider } from "@vuu-ui/vuu-context-menu";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useSplitButton } from "./useSplitButton.js";
+import SplitButton_0 from "./SplitButton.css";
+const classBase = "vuuSplitButton";
+const SplitButton_SplitButton = /*#__PURE__*/ forwardRef(function({ ButtonProps: ButtonPropsProp, PopupMenuProps: PopupMenuPropsProp, children, className, disabled = false, onClick, segmented = false, variant = "primary", ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-button",
+        css: SplitButton_0,
+        window: targetWindow
+    });
+    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } = useSplitButton({
+        ButtonProps: ButtonPropsProp,
+        PopupMenuProps: PopupMenuPropsProp,
+        classBase: classBase,
+        onClick,
+        segmented
+    });
+    return /*#__PURE__*/ jsx(ContextMenuProvider, {
+        children: /*#__PURE__*/ jsxs("div", {
+            ...htmlAttributes,
+            ...rootProps,
+            className: clsx(classBase, `${classBase}-${variant}`, className, {
+                [`${classBase}-disabled`]: disabled,
+                [`${classBase}-segmented`]: segmented
+            }),
+            ref: useForkRef(forwardedRef, rootRef),
+            "data-showcase-center": true,
+            tabIndex: -1,
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    ...ButtonProps,
+                    appearance: "solid",
+                    className: `${classBase}-main`,
+                    disabled: disabled,
+                    ref: buttonRef,
+                    sentiment: "neutral",
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(PopupMenu, {
+                    ...PopupMenuProps,
+                    appearance: "solid",
+                    className: `${classBase}-trigger`,
+                    disabled: disabled,
+                    icon: PopupMenuProps?.icon ?? "chevron-down",
+                    tabIndex: segmented ? 0 : -1,
+                    sentiment: "neutral"
+                })
+            ]
+        })
+    });
+});
+export { SplitButton_SplitButton as SplitButton };

package/src/split-button/SplitStateButton.css.js

@@ -0,0 +1,66 @@
+const css = `
+.vuuSplitStateButton {
+  --split-state-background: var(--salt-actionable-subtle-background);
+  --split-state-foreground: var(--salt-actionable-subtle-foreground);
+  --vuuSplitButton-background: var(--split-state-background);
+  --vuuSplitButton-foreground: var(--split-state-foreground);
+  --vuuSplitButton-background-hover: var(--split-state-background);
+  --vuuSplitButton-foreground-hover: var(--split-state-foreground);
+
+  & .saltButton-primary:active, & .saltButton-primary.saltButton-active {
+    --saltButton-background-active: var(--salt-actionable-bold-background);
+    --saltButton-text-color-active: var(--salt-actionable-bold-foreground);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"] {
+  --vuuButtonIcon-color: var(--salt-actionable-bold-foreground-active);
+  --saltButton-text-color: var(--salt-actionable-bold-foreground-active);
+  --saltButton-text-color-hover: var(--salt-actionable-bold-foreground-active);
+  --split-state-background: var(--salt-actionable-bold-background-active);
+  --split-state-foreground: var(--salt-actionable-bold-foreground-active);
+
+  &.focusVisible {
+    --split-state-background: var(--salt-actionable-bold-background-active);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"] {
+  & .vuuEditableLabel-input {
+    color: var(--salt-actionable-bold-foreground-active);
+  }
+}
+
+.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger, .vuuSplitButton-main:active + .vuuSplitButton-trigger {
+  --saltButton-background: var(--salt-actionable-bold-background);
+
+  & .vuuIcon {
+    --vuu-icon-color: var(--salt-actionable-bold-foreground);
+  }
+}
+
+.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--salt-actionable-subtle-background);
+
+  & .saltButton-primary:active {
+    background: var(--salt-actionable-subtle-background);
+  }
+}
+
+.vuuSplitStateButton[aria-checked="true"]:has(.vuuEditableLabel-editing):has(.vuuSplitButton-main:active, .vuuSplitButton-main.saltButton-active) {
+  --split-background: var(--salt-actionable-bold-background-active);
+
+  & .saltButton-primary:active {
+    background: var(--salt-actionable-bold-background-active);
+  }
+}
+
+.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {
+  & .saltButton {
+    border-color: var(--salt-actionable-bold-foreground);
+  }
+}
+
+
+`;
+export default css;

package/src/split-button/SplitStateButton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { SplitButton } from "./SplitButton.js";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { forwardRef } from "react";
+import SplitStateButton_0 from "./SplitStateButton.css";
+const classBase = "vuuSplitStateButton";
+const SplitStateButton_SplitStateButton = /*#__PURE__*/ forwardRef(function({ className, selected, ...splitButtonProps }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-state-button",
+        css: SplitStateButton_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx(SplitButton, {
+        ...splitButtonProps,
+        "aria-checked": selected,
+        className: clsx(classBase, className),
+        ref: forwardedRef
+    });
+});
+export { SplitStateButton_SplitStateButton as SplitStateButton };

package/src/split-button/index.js

@@ -0,0 +1,2 @@
+export * from "./SplitButton.js";
+export * from "./SplitStateButton.js";

package/src/split-button/useSplitButton.js

@@ -0,0 +1,61 @@
+import { dispatchMouseEvent } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const focusTargetIsEditableLabel = (target)=>{
+    if ("INPUT" === target.tagName) return true;
+    return false;
+};
+const useSplitButton = ({ ButtonProps: ButtonPropsProp, PopupMenuProps, classBase, onClick })=>{
+    const buttonRef = useRef(null);
+    const rootRef = useRef(null);
+    const onMenuClose = useCallback((reason)=>{
+        if (reason?.type !== "tab-away") {
+            const buttonMain = rootRef.current?.querySelector(".vuuSplitButton-main");
+            buttonMain?.focus();
+        }
+    }, []);
+    const menuProps = {
+        ...PopupMenuProps,
+        anchorElement: rootRef,
+        menuClassName: `${classBase}-menu`,
+        onMenuClose,
+        popupPlacement: "below-full-width"
+    };
+    const handleRootFocus = useCallback((evt)=>{
+        const { current: splitButton } = rootRef;
+        if (!splitButton?.classList.contains("vuuFocusVisible")) {
+            splitButton?.classList.add("vuuFocusVisible");
+            if (!focusTargetIsEditableLabel(evt.target)) requestAnimationFrame(()=>{
+                buttonRef.current?.focus();
+            });
+        }
+    }, []);
+    const handleRootBlur = useCallback((evt)=>{
+        const { current: splitButton } = rootRef;
+        const target = evt.relatedTarget;
+        if (!splitButton?.contains(target)) {
+            if (splitButton?.classList.contains("vuuFocusVisible")) splitButton.classList.remove("vuuFocusVisible");
+        }
+    }, []);
+    const handleButtonKeyDown = useCallback((evt)=>{
+        if ("ArrowDown" === evt.key) {
+            const popupTrigger = rootRef.current?.querySelector(`.${classBase}-trigger`);
+            if (popupTrigger) dispatchMouseEvent(popupTrigger, "click");
+        }
+    }, [
+        classBase
+    ]);
+    const ButtonProps = {
+        ...ButtonPropsProp,
+        onClick,
+        onKeyDown: handleButtonKeyDown
+    };
+    return {
+        ButtonProps,
+        PopupMenuProps: menuProps,
+        buttonRef,
+        rootRef,
+        onBlur: handleRootBlur,
+        onFocus: handleRootFocus
+    };
+};
+export { useSplitButton };

package/src/table-search/SearchCell.css.js

@@ -0,0 +1,20 @@
+const css = `
+.vuuSearchCell {
+  --vuu-icon-left: 0;
+  --vuu-icon-size: 16px;
+  --vuu-icon-top: -1px;
+  color: var(--background-cell-color);
+  z-index: -1;
+  align-items: center;
+  padding: 0 8px;
+  display: flex;
+  position: relative;
+
+  & [data-icon] {
+    margin-right: 4px;
+  }
+}
+
+
+`;
+export default css;

package/src/table-search/SearchCell.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { applyHighlighting } from "@vuu-ui/vuu-table";
+import SearchCell from "./SearchCell.css";
+const classBase = "vuuSearchCell";
+const SearchCell_SearchCell = ({ column, dataRow, searchPattern = "" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-search-cell",
+        css: SearchCell,
+        window: targetWindow
+    });
+    const valueWithHighlighting = applyHighlighting(column.valueFormatter(dataRow[column.name]), searchPattern);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-icon": "draggable"
+            }),
+            valueWithHighlighting
+        ]
+    });
+};
+export { SearchCell_SearchCell as SearchCell };

package/src/table-search/TableSearch.css.js

@@ -0,0 +1,27 @@
+const css = `
+.vuuTableSearch {
+  height: 100%;
+  padding: var(--vuuTableSearch-padding, 12px);
+  flex-direction: column;
+  display: flex;
+}
+
+.vuuTableSearch-inputField {
+  --vuu-icon-size: 16px;
+  flex: 0 0 40px;
+  padding: 0 12px;
+}
+
+.vuuTableSearch-list {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  background-color: var(--salt-container-primary-background);
+  flex: auto;
+}
+
+.vuuTableSearch .vuuTableCell {
+  padding: 0;
+}
+
+
+`;
+export default css;

package/src/table-search/TableSearch.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table, useControlledTableNavigation } from "@vuu-ui/vuu-table";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { Input } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback, useMemo } from "react";
+import { SearchCell } from "./SearchCell.js";
+import { useTableSearch } from "./useTableSearch.js";
+import TableSearch from "./TableSearch.css";
+const classBase = "vuuTableSearch";
+const defaultConfig = {
+    rowSeparators: true
+};
+const searchIcon = /*#__PURE__*/ jsx("span", {
+    "data-icon": "search"
+});
+const TableSearch_TableSearch = ({ TableProps: { dataSource: dataSourceProp, ...TableProps }, autoFocus = false, className, placeHolder, searchColumns, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-search",
+        css: TableSearch,
+        window: targetWindow
+    });
+    const config = useMemo(()=>({
+            ...defaultConfig,
+            ...TableProps?.config
+        }), [
+        TableProps?.config
+    ]);
+    const { dataSource, onChange, searchState } = useTableSearch({
+        dataSource: dataSourceProp,
+        searchColumns
+    });
+    const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } = useControlledTableNavigation(-1, dataSource?.size ?? 0);
+    const searchCallbackRef = useCallback((el)=>{
+        setTimeout(()=>{
+            el?.querySelector("input")?.focus();
+        }, 100);
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-inputField`,
+                children: /*#__PURE__*/ jsx(Input, {
+                    inputProps: {
+                        onKeyDown
+                    },
+                    endAdornment: searchIcon,
+                    placeholder: placeHolder,
+                    ref: autoFocus ? searchCallbackRef : null,
+                    value: searchState.searchText,
+                    onChange: onChange
+                })
+            }),
+            dataSource ? /*#__PURE__*/ jsx(Table, {
+                disableFocus: true,
+                id: "instrument-search",
+                rowHeight: 25,
+                highlightedIndex: highlightedIndexRef.current,
+                renderBufferSize: 100,
+                ...TableProps,
+                className: `${classBase}-list`,
+                config: config,
+                dataSource: dataSource,
+                navigationStyle: "row",
+                onHighlight: onHighlight,
+                ref: tableRef,
+                searchPattern: searchState.searchText,
+                showColumnHeaders: false
+            }) : null
+        ]
+    });
+};
+registerComponent("search-cell", SearchCell, "cell-renderer", {
+    serverDataType: "private"
+});
+export { TableSearch_TableSearch as TableSearch };

package/src/table-search/index.js

@@ -0,0 +1 @@
+export * from "./TableSearch.js";

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;