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

package/src/icon-button/IconButton.css.js

@@ -0,0 +1,10 @@
+const css = `
+.vuuIconButton.saltButton {
+  --saltButton-padding: 0;
+  --saltButton-minWidth: var(--salt-size-base);
+  width: var(--saltButton-width, calc(var(--salt-size-base) + var(--salt-size-fixed-400)));
+}
+
+
+`;
+export default css;

package/src/icon-button/IconButton.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "react";
+import IconButton_0 from "./IconButton.css";
+const classBase = "vuuIconButton";
+const IconButton_IconButton = /*#__PURE__*/ forwardRef(function({ "aria-label": ariaLabel, className, icon, size, ...buttonProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-icon-button",
+        css: IconButton_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx(Button, {
+        ...buttonProps,
+        className: clsx(classBase, className),
+        ref: ref,
+        children: /*#__PURE__*/ jsx(Icon, {
+            "aria-label": ariaLabel,
+            name: icon,
+            size: size
+        })
+    });
+});
+export { IconButton_IconButton as IconButton };

package/src/icon-button/ToggleIconButton.css.js

@@ -0,0 +1,47 @@
+const css = `
+.vuuToggleIconButton {
+  &.saltButton {
+    &:active {
+      --saltButton-background-active: transparent;
+    }
+
+    &:hover {
+      --saltButton-background-hover: transparent;
+    }
+
+    & .vuuIcon {
+      --vuu-icon-height: 18px;
+      --vuu-icon-left: -3px;
+      --vuu-icon-width: 18px;
+
+      &:after {
+        transition: transform .1s linear;
+      }
+
+      &[data-icon="triangle-down"]:after {
+        --vuu-icon-left: -1px;
+        --vuu-icon-top: -3px;
+      }
+    }
+
+    border: none;
+    border-radius: 0;
+    width: 18px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0;
+    left: 0;
+  }
+}
+
+.vuuTableGroupCell:hover {
+  & .vuuToggleIconButton {
+    & .vuuIcon:after {
+      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/icon-button/ToggleIconButton.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { IconButton } from "./IconButton.js";
+import ToggleIconButton from "./ToggleIconButton.css";
+const classBase = "vuuToggleIconButton";
+const ToggleIconButton_ToggleIconButton = ({ className, isExpanded, size = 7, ...props })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toggle-icon-button",
+        css: ToggleIconButton,
+        window: targetWindow
+    });
+    const icon = isExpanded ? "triangle-down" : "triangle-right";
+    return /*#__PURE__*/ jsx(IconButton, {
+        ...props,
+        appearance: "transparent",
+        className: clsx(classBase, className),
+        "data-embedded": true,
+        icon: icon,
+        sentiment: "neutral",
+        size: size
+    });
+};
+export { ToggleIconButton_ToggleIconButton as ToggleIconButton };

package/src/icon-button/index.js

@@ -0,0 +1,3 @@
+export * from "./Icon.js";
+export * from "./IconButton.js";
+export * from "./ToggleIconButton.js";

package/src/index.js

@@ -0,0 +1,32 @@
+export * from "./calendar/index.js";
+export * from "./column-picker/index.js";
+export * from "./common-hooks/index.js";
+export * from "./cycle-state-button/index.js";
+export * from "./date-input/index.js";
+export * from "./date-picker/index.js";
+export * from "./drag-drop/index.js";
+export * from "./editable/index.js";
+export * from "./editable-label/index.js";
+export * from "./expando-input/index.js";
+export * from "./icon-button/index.js";
+export * from "./instrument-picker/index.js";
+export * from "./measured-container/index.js";
+export * from "./overflow-container/index.js";
+export * from "./price-ticker/index.js";
+export * from "./split-button/index.js";
+export * from "./table-search/index.js";
+export * from "./tabs-next/index.js";
+export * from "./tabstrip/index.js";
+export * from "./toolbar/index.js";
+export * from "./utils/index.js";
+export * from "./vuu-date-picker/index.js";
+export * from "./vuu-input/index.js";
+export * from "./vuu-typeahead-input/index.js";
+export { ContextPanelProvider, useContextPanel, useHideContextPanel } from "./context-panel-provider/ContextPanelProvider.js";
+export { HoverOverlay } from "./hover-overlay/HoverOverlay.js";
+export { ItemPicker } from "./item-picker/ItemPicker.js";
+export { ModalProvider, useModal } from "./modal-provider/ModalProvider.js";
+export { Prompt } from "./prompt/Prompt.js";
+export { SortableList, SortableOption } from "./sortable-list/SortableList.js";
+export { TimeInput } from "./time-input/TimeInput.js";
+export { VuuTimePicker } from "./vuu-time-picker/VuuTimePicker.js";

package/src/instrument-picker/SearchCell.css.js

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

package/src/instrument-picker/SearchCell.js

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

package/src/instrument-picker/TablePicker.css.js

@@ -0,0 +1,23 @@
+const css = `
+.vuuTablePicker {
+  height: var(--salt-size-base);
+  box-sizing: content-box;
+  border-radius: 6px;
+  padding: 1px;
+}
+
+.vuuTablePicker-floating-table {
+  border: solid 1px var(--salt-container-secondary-borderColor);
+  padding: var(--salt-spacing-100) 0;
+  z-index: var(--salt-zIndex-popout);
+  border-radius: 4px;
+  overflow: auto;
+}
+
+[data-floating-ui-portal] [data-floating-ui-portal] .vuuTablePicker-floating-table {
+  z-index: calc(var(--salt-zIndex-modal) + var(--salt-zIndex-popout));
+}
+
+
+`;
+export default css;

package/src/instrument-picker/TablePicker.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table } from "@vuu-ui/vuu-table";
+import { Input, useFloatingComponent, useIdMemo } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+import { IconButton } from "../icon-button/index.js";
+import TablePicker from "./TablePicker.css";
+import { useTablePicker } from "./useTablePicker.js";
+const classBase = "vuuTablePicker";
+const TablePicker_FloatingTable = /*#__PURE__*/ forwardRef(function({ children, className, collapsed, open, ...props }, forwardedRef) {
+    const { Component: FloatingComponent } = useFloatingComponent();
+    return /*#__PURE__*/ jsx(FloatingComponent, {
+        className: clsx(`${classBase}-floating-table`, {
+            [`${classBase}-collapsed`]: collapsed
+        }, className),
+        role: "listbox",
+        open: open,
+        ...props,
+        ref: forwardedRef,
+        children: children
+    });
+});
+const TablePicker_TablePicker = ({ TableProps, onSelect, rowToString, schema, searchColumns, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-picker",
+        css: TablePicker,
+        window: targetWindow
+    });
+    const tableId = useIdMemo();
+    const { containerRef, dataSource, highlightedIndex, floatingUIProps: { x, y, strategy, floating, reference }, inputProps, interactionPropGetters: { getFloatingProps, getReferenceProps }, onKeyDown, open, tableConfig, tableHandlers, tableRef, value, width } = useTablePicker({
+        TableProps,
+        rowToString,
+        onSelect,
+        schema,
+        searchColumns
+    });
+    const endAdornment = useMemo(()=>/*#__PURE__*/ jsx(IconButton, {
+            ...getReferenceProps(),
+            appearance: "transparent",
+            "data-embedded": true,
+            ref: reference,
+            icon: "chevron-down",
+            onKeyDown: onKeyDown,
+            sentiment: "neutral"
+        }), [
+        getReferenceProps,
+        onKeyDown,
+        reference
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: classBase,
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsx(Input, {
+                ...inputProps,
+                bordered: true,
+                endAdornment: endAdornment,
+                value: value
+            }),
+            /*#__PURE__*/ jsx(TablePicker_FloatingTable, {
+                ...getFloatingProps(),
+                collapsed: !open,
+                id: tableId,
+                open: open,
+                left: x + 3,
+                position: strategy,
+                ref: floating,
+                top: y + 3,
+                children: /*#__PURE__*/ jsx(Table, {
+                    ...tableHandlers,
+                    config: tableConfig,
+                    dataSource: dataSource,
+                    highlightedIndex: highlightedIndex,
+                    maxViewportRowLimit: 10,
+                    navigationStyle: "row",
+                    ref: tableRef,
+                    selectionModel: "single",
+                    showColumnHeaders: false,
+                    width: width - 3
+                })
+            })
+        ]
+    });
+};
+export { TablePicker_TablePicker as TablePicker };

package/src/instrument-picker/index.js

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

package/src/instrument-picker/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/instrument-picker/useDataSource.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { MovingWindow } from "./moving-window.js";
+import { Range } from "@vuu-ui/vuu-utils";
+const useDataSource = ({ dataSource })=>{
+    const [, forceUpdate] = useState(null);
+    const data = useRef([]);
+    const dataWindow = useMemo(()=>new MovingWindow({
+            from: 0,
+            to: 10
+        }), []);
+    const setData = useCallback((updates)=>{
+        console.table(updates);
+        for (const row of updates)dataWindow.add(row);
+        data.current = dataWindow.data;
+        forceUpdate({});
+    }, [
+        dataWindow
+    ]);
+    const datasourceMessageHandler = useCallback((message)=>{
+        if ("subscribed" === message.type) ;
+        else if ("viewport-update" === message.type) {
+            if (message.rows) setData(message.rows);
+        } else console.log(`useDataSource unexpected message ${message.type}`);
+    }, [
+        setData
+    ]);
+    useEffect(()=>{
+        console.log("subscribe to dataSource");
+        dataSource?.subscribe({
+            range: Range(0, 10)
+        }, datasourceMessageHandler);
+    }, [
+        dataSource,
+        datasourceMessageHandler
+    ]);
+    return data.current;
+};
+export { useDataSource };

package/src/instrument-picker/useTablePicker.js

@@ -0,0 +1,136 @@
+import { flip, size, useClick, useDismiss, useInteractions } from "@floating-ui/react";
+import { useFloatingUI } from "@salt-ds/core";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { isStringColumn, toColumnName, useData } from "@vuu-ui/vuu-utils";
+import { isNavigationKey, isRowSelectionKey, useControlledTableNavigation } from "@vuu-ui/vuu-table";
+const defaultRowToString = (dataRow)=>Object.values(dataRow).join(" ");
+const useTablePicker = ({ TableProps, onSelect, rowToString = defaultRowToString, schema, searchColumns = schema.columns.filter(isStringColumn).map(toColumnName) })=>{
+    const { VuuDataSource } = useData();
+    const [value, setValue] = useState("");
+    const [open, setOpen] = useState(false);
+    const widthRef = useRef(-1);
+    const tableColumns = TableProps?.config.columns;
+    const containerRef = useCallback((el)=>{
+        widthRef.current = el?.clientWidth ?? -1;
+    }, []);
+    const dataSource = useMemo(()=>{
+        const columns = tableColumns ?? schema.columns;
+        return new VuuDataSource({
+            columns: columns.map((c)=>c.name),
+            table: schema.table
+        });
+    }, [
+        tableColumns,
+        VuuDataSource,
+        schema
+    ]);
+    const navigation = useControlledTableNavigation(-1, dataSource.size);
+    const baseFilterPattern = useMemo(()=>searchColumns.map((col)=>`${col} starts "__VALUE__"`).join(" or "), [
+        searchColumns
+    ]);
+    const { context, elements, ...floatingUIProps } = useFloatingUI({
+        open,
+        onOpenChange: setOpen,
+        placement: "bottom-end",
+        strategy: "fixed",
+        middleware: [
+            size({
+                apply ({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        minWidth: `${rects.reference.width}px`,
+                        maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+                    });
+                }
+            }),
+            flip({
+                fallbackStrategy: "initialPlacement"
+            })
+        ]
+    });
+    const interactionPropGetters = useInteractions([
+        useDismiss(context),
+        useClick(context, {
+            keyboardHandlers: false,
+            toggle: false
+        })
+    ]);
+    const handleInputChange = useCallback((evt)=>{
+        const { value } = evt.target;
+        setValue(value);
+        console.log(`input changed ${value}`);
+        if (value && value.trim().length) {
+            const filter = baseFilterPattern.replaceAll("__VALUE__", value);
+            dataSource.filter = {
+                filter
+            };
+        } else dataSource.filter = {
+            filter: ""
+        };
+    }, [
+        baseFilterPattern,
+        dataSource
+    ]);
+    const handleSelectRow = useCallback((dataRow)=>{
+        const value = null === dataRow ? "" : rowToString(dataRow);
+        setValue(value);
+        onSelect?.(dataRow);
+        requestAnimationFrame(()=>{
+            setOpen(false);
+        });
+    }, [
+        onSelect,
+        rowToString
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        if (open) {
+            if (isNavigationKey(evt.key, "row") || isRowSelectionKey(evt.key)) navigation.onKeyDown(evt);
+        } else if ("ArrowDown" === evt.key || "Enter" === evt.key) setOpen(true);
+    }, [
+        navigation,
+        open
+    ]);
+    const inputProps = {
+        inputProps: {
+            autoComplete: "off",
+            onKeyDown: handleKeyDown
+        },
+        onChange: handleInputChange
+    };
+    const tableHandlers = {
+        onSelect: handleSelectRow
+    };
+    const tableConfig = useMemo(()=>{
+        const config = TableProps?.config;
+        if (!config) return {
+            columnLayout: "fit",
+            columns: schema.columns
+        };
+        {
+            const { columns = schema.columns, columnLayout = "fit", ...rest } = config;
+            return {
+                columns,
+                columnLayout,
+                ...rest
+            };
+        }
+    }, [
+        TableProps,
+        schema
+    ]);
+    return {
+        containerRef,
+        dataSource,
+        highlightedIndex: navigation.highlightedIndexRef.current,
+        floatingUIProps,
+        inputProps,
+        interactionPropGetters,
+        onKeyDown: handleKeyDown,
+        open,
+        tableConfig,
+        tableHandlers,
+        tableRef: navigation.tableRef,
+        value,
+        width: widthRef.current
+    };
+};
+export { useTablePicker };

package/src/item-picker/ItemPicker.css.js

@@ -0,0 +1,97 @@
+const css = `
+.vuuItemPicker {
+  --label-margin-left: 0px;
+  --itempicker-background: var(--vuuItemPicker-background, var(--salt-container-primary-background));
+  background: var(--itempicker-background);
+  gap: var(--salt-spacing-300);
+  height: var(--vuuItemPicker-height, 100%);
+  padding: var(--salt-spacing-300) 0;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size;
+
+  &.vuuItemPicker-withCalculated {
+    --label-margin-left: 8px;
+  }
+
+  & .saltListBox {
+    background-color: inherit;
+  }
+
+  & .saltOption {
+    background-color: inherit;
+    border-bottom: var(--vuuItemListItem-border, solid) 1px
+      var(--salt-separable-tertiary-borderColor);
+    align-items: center;
+    gap: var(--salt-spacing-200);
+    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
+
+    & .vuuIcon {
+      --vuu-icon-color: var(--salt-content-secondary-foreground);
+    }
+
+    & .vuuCalculatedItemIcon {
+      --vuu-icon-color: var(--salt-content-secondary-foreground);
+      position: absolute;
+      top: 8px;
+      left: 32px;
+    }
+
+    & .vuuHighlight {
+      color: var(--vuu-color-blue-40);
+      text-decoration: underline;
+    }
+
+    & .vuuItemPicker-text {
+      margin-left: var(--label-margin-left);
+    }
+  }
+
+  & .vuuItemPickerListItem-action {
+    visibility: hidden;
+    margin-left: auto;
+  }
+
+  & .saltOption:hover {
+    & .vuuItemPickerListItem-action {
+      visibility: visible;
+    }
+  }
+
+  & .vuuItemPicker-search {
+    --saltInput-paddingLeft: var(--salt-spacing-300);
+    padding: var(--salt-spacing-200) var(--salt-spacing-300) 0
+      var(--salt-spacing-300);
+  }
+
+  & .vuuItemPicker-scrollContainer {
+    flex: 1 1 0;
+    overflow: auto;
+
+    & .vuuItemPicker-sectionHeader {
+      background: var(--itempicker-background);
+      height: 32px;
+      padding: 0 var(--salt-spacing-300);
+      z-index: 1;
+      align-items: center;
+      display: flex;
+      position: sticky;
+      top: 0;
+    }
+
+    & .vuuItemPicker-availableHeader {
+      top: 32px;
+    }
+
+    & .vuuItemPicker-availableList {
+      & .saltOption {
+        padding-left: var(--salt-spacing-300);
+      }
+    }
+  }
+}
+
+
+`;
+export default css;