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

package/src/instrument-picker/TablePicker.js

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

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

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

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

@@ -1,136 +0,0 @@
-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/measured-container/MeasuredContainer.css.js

@@ -1,11 +0,0 @@
-const css = `
-.vuuMeasuredContainer {
-  flex: var(--vuuMeasuredContainer-flex, none);
-  height: var(--vuuMeasuredContainer-height, var(--measured-css-height));
-  min-height: 0;
-  width: var(--measured-css-width);
-}
-
-
-`;
-export default css;

package/src/measured-container/MeasuredContainer.js

@@ -1,50 +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 { useMeasuredContainer } from "./useMeasuredContainer.js";
-import { useForkRef } from "@salt-ds/core";
-import clsx from "clsx";
-import MeasuredContainer_0 from "./MeasuredContainer.css";
-const baseClass = "vuuMeasuredContainer";
-const MeasuredContainer_MeasuredContainer = /*#__PURE__*/ forwardRef(function({ children, className, height, onResize, resizeStrategy, style, width, ...htmlAttributes }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-measured-container",
-        css: MeasuredContainer_0,
-        window: targetWindow
-    });
-    const { containerRef, ...containerMeasurements } = useMeasuredContainer({
-        height,
-        onResize,
-        resizeStrategy,
-        width
-    });
-    const { cssSize, innerSize } = containerMeasurements;
-    const unmeasured = void 0 === innerSize;
-    const getStyle = ()=>unmeasured ? {
-            ...style,
-            "--measured-css-height": `${cssSize.height}`,
-            "--measured-css-width": `${cssSize.width}`
-        } : {
-            ...style,
-            "--measured-css-height": `${cssSize.height}`,
-            "--measured-css-width": `${cssSize.width}`,
-            "--measured-px-height": `${innerSize?.height}px`,
-            "--measured-px-width": `${innerSize?.width}px`
-        };
-    const forkedRef = useForkRef(containerRef, forwardedRef);
-    return unmeasured ? /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(baseClass, `${baseClass}-ummeasured`),
-        style: getStyle(),
-        ref: containerRef
-    }) : /*#__PURE__*/ jsx("div", {
-        ...htmlAttributes,
-        className: clsx(baseClass, className),
-        ref: forkedRef,
-        style: getStyle(),
-        children: children
-    });
-});
-export { MeasuredContainer_MeasuredContainer as MeasuredContainer };

package/src/measured-container/index.js

@@ -1,2 +0,0 @@
-export * from "./MeasuredContainer.js";
-export * from "./useMeasuredContainer.js";

package/src/measured-container/useMeasuredContainer.js

@@ -1,156 +0,0 @@
-import { isValidNumber, useResizeObserver } from "@vuu-ui/vuu-utils";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-const ClientWidthHeight = [
-    "clientHeight",
-    "clientWidth"
-];
-const WidthOnly = [
-    "clientWidth"
-];
-const HeightOnly = [
-    "clientHeight"
-];
-const NO_MEASUREMENT = [];
-const NullClientSize = {
-    clientHeight: -1,
-    clientWidth: -1
-};
-const isNumber = (val)=>Number.isFinite(val);
-const reduceSizeHeight = (size, value)=>{
-    if (0 === value) return size;
-    return {
-        height: size.height - value,
-        width: size.width
-    };
-};
-const getInitialValue = (value, defaultValue)=>{
-    if (isValidNumber(value)) return `${value}px`;
-    if ("string" == typeof value) return value;
-    return defaultValue;
-};
-const getInitialCssSize = (height, width)=>({
-        height: getInitialValue(height, "100%"),
-        width: getInitialValue(width, "auto")
-    });
-const getInitialInnerSize = (height, width)=>{
-    if (isValidNumber(height) && isValidNumber(width)) return {
-        height,
-        width
-    };
-};
-const useMeasuredContainer = ({ defaultHeight = 0, defaultWidth = 0, height, onResize: onResizeProp, resizeStrategy = "responsive", width })=>{
-    const deferResize = "defer" === resizeStrategy;
-    const sizeRef = useRef(NullClientSize);
-    const resizeHandleRef = useRef(void 0);
-    const containerRef = useRef(null);
-    const [size, setSize] = useState({
-        css: getInitialCssSize(height, width),
-        inner: getInitialInnerSize(height, width),
-        outer: {
-            height: height ?? "100%",
-            width: width ?? "auto"
-        }
-    });
-    const fixedHeight = "number" == typeof height;
-    const fixedWidth = "number" == typeof width;
-    const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
-    useMemo(()=>{
-        setSize((currentSize)=>{
-            const { inner, outer } = currentSize;
-            if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
-                const { height: innerHeight, width: innerWidth } = inner;
-                const { height: outerHeight, width: outerWidth } = outer;
-                if (outerHeight !== height || outerWidth !== width) {
-                    const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
-                    const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
-                    return {
-                        ...currentSize,
-                        outer: {
-                            height,
-                            width
-                        },
-                        inner: {
-                            height: height - heightDiff,
-                            width: width - widthDiff
-                        }
-                    };
-                }
-            }
-            return currentSize;
-        });
-    }, [
-        height,
-        width
-    ]);
-    const handleResize = useCallback((clientWidth, clientHeight)=>{
-        const { css, inner, outer } = size;
-        let newState = size;
-        if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== inner?.width) newState = {
-            css,
-            outer,
-            inner: {
-                width: Math.floor(clientWidth) || defaultWidth,
-                height
-            }
-        };
-        else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== inner?.height) newState = {
-            css,
-            outer,
-            inner: {
-                height: Math.floor(clientHeight) || defaultHeight,
-                width
-            }
-        };
-        else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== inner?.width || clientHeight !== inner?.height)) newState = {
-            css,
-            outer,
-            inner: {
-                width: Math.floor(clientWidth) || defaultWidth,
-                height: Math.floor(clientHeight) || defaultHeight
-            }
-        };
-        if (newState !== size) setSize(newState);
-    }, [
-        defaultHeight,
-        defaultWidth,
-        fixedHeight,
-        fixedWidth,
-        height,
-        size,
-        width
-    ]);
-    const onResize = useCallback(({ clientHeight, clientWidth })=>{
-        if (deferResize) {
-            sizeRef.current.clientHeight = clientHeight;
-            sizeRef.current.clientWidth = clientWidth;
-            if (null !== resizeHandleRef.current) clearTimeout(resizeHandleRef.current);
-            resizeHandleRef.current = setTimeout(()=>{
-                handleResize(clientWidth, clientHeight);
-            }, 40);
-        } else handleResize(clientWidth, clientHeight);
-    }, [
-        deferResize,
-        handleResize
-    ]);
-    useEffect(()=>{
-        if (size.inner) {
-            if (containerRef.current) {
-                if ("number" != typeof height || 0 === height) size.inner.height = containerRef.current.clientHeight;
-                size.inner.width = containerRef.current.clientWidth;
-                onResizeProp?.(size.inner);
-            }
-        }
-    }, [
-        height,
-        onResizeProp,
-        size.inner
-    ]);
-    useResizeObserver(containerRef, dimensions, onResize, true);
-    return {
-        containerRef,
-        cssSize: size.css,
-        outerSize: size.outer,
-        innerSize: size.inner
-    };
-};
-export { reduceSizeHeight, useMeasuredContainer };

package/src/modal-provider/ModalProvider.js

@@ -1,147 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Dialog, DialogActions, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-import { Prompt } from "../prompt/Prompt.js";
-const useDialogHost = ()=>{
-    const [dialogState, setDialogState] = useState();
-    const [promptState, setPromptState] = useState();
-    const closePrompt = useCallback(()=>{
-        setPromptState(void 0);
-    }, []);
-    const closeDialog = useCallback(()=>{
-        setDialogState(void 0);
-    }, []);
-    const handleOpenChange = useCallback((open)=>{
-        if (true !== open) closeDialog();
-    }, [
-        closeDialog
-    ]);
-    const dialog = dialogState ? /*#__PURE__*/ jsxs(Dialog, {
-        open: true,
-        onOpenChange: handleOpenChange,
-        children: [
-            /*#__PURE__*/ jsx(DialogHeader, {
-                header: dialogState.title
-            }),
-            /*#__PURE__*/ jsx(DialogContent, {
-                children: dialogState.content
-            }),
-            true !== dialogState.hideCloseButton ? /*#__PURE__*/ jsx(DialogCloseButton, {
-                "data-embedded": true,
-                "data-icon": "close",
-                onClick: closeDialog
-            }) : null,
-            dialogState.actions ? /*#__PURE__*/ jsx(DialogActions, {
-                children: dialogState.actions
-            }) : null
-        ]
-    }) : null;
-    const handleOpenChangePrompt = useCallback((open)=>{
-        if (true !== open) closePrompt();
-        promptState?.promptProps.onOpenChange?.(open);
-    }, [
-        closePrompt,
-        promptState
-    ]);
-    const prompt = promptState ? /*#__PURE__*/ jsx(Prompt, {
-        ...promptState.promptProps,
-        onClose: closePrompt,
-        onOpenChange: handleOpenChangePrompt,
-        open: true,
-        children: promptState.content
-    }) : null;
-    return {
-        dialog,
-        prompt,
-        setDialogState,
-        setPromptState
-    };
-};
-const defaultShowDialog = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultCloseDialog = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultShowPrompt = ()=>{
-    console.warn("No DialogProvider in place");
-};
-const defaultClosePrompt = ()=>{
-    console.warn("No DialogProvider in place");
-};
-class DialogContextObject {
-    showDialog = defaultShowDialog;
-    closeDialog = defaultCloseDialog;
-    showPrompt = defaultShowPrompt;
-    closePrompt = defaultClosePrompt;
-    setDispatchers = (showDialog, closeDialog, showPrompt, closePrompt)=>{
-        this.showDialog = showDialog;
-        this.closeDialog = closeDialog;
-        this.showPrompt = showPrompt;
-        this.closePrompt = closePrompt;
-    };
-}
-const DialogContext = /*#__PURE__*/ createContext(new DialogContextObject());
-const DialogHost = ({ context })=>{
-    const { dialog, setDialogState, prompt, setPromptState } = useDialogHost();
-    const showDialog = useCallback((dialogContent, title, actionButtons, hideCloseButton)=>{
-        setDialogState({
-            actions: actionButtons,
-            content: dialogContent,
-            title,
-            hideCloseButton
-        });
-    }, [
-        setDialogState
-    ]);
-    const closeDialog = useCallback(()=>{
-        setDialogState(void 0);
-    }, [
-        setDialogState
-    ]);
-    const showPrompt = useCallback((content, promptProps)=>{
-        setPromptState({
-            content,
-            promptProps
-        });
-    }, [
-        setPromptState
-    ]);
-    const closePrompt = useCallback(()=>{
-        setPromptState(void 0);
-    }, [
-        setPromptState
-    ]);
-    useMemo(()=>{
-        context.setDispatchers(showDialog, closeDialog, showPrompt, closePrompt);
-    }, [
-        closeDialog,
-        closePrompt,
-        context,
-        showDialog,
-        showPrompt
-    ]);
-    return dialog ?? prompt;
-};
-const ModalProvider = ({ children })=>{
-    const context = useContext(DialogContext);
-    return /*#__PURE__*/ jsxs(DialogContext.Provider, {
-        value: context,
-        children: [
-            /*#__PURE__*/ jsx(DialogHost, {
-                context: context
-            }),
-            children
-        ]
-    });
-};
-const useModal = ()=>{
-    const { closeDialog, closePrompt, showDialog, showPrompt } = useContext(DialogContext);
-    return {
-        showDialog,
-        closeDialog,
-        showPrompt,
-        closePrompt
-    };
-};
-export { ModalProvider, useModal };