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

package/src/cell-block/useCellBlockSelection.mjs

@@ -0,0 +1,245 @@
+import { jsx } from "react/jsx-runtime";
+import { isArrowKey, queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+import { getAriaCellPos, getNextCellPos, getTableCell } from "../table-dom-utils.mjs";
+import { CellBlock } from "./CellBlock.mjs";
+import { getTableCellBlock, getTextFromCells, isNullCellBox, outsideBox, refState, setElementBox, updateCellBlockClassName } from "./cellblock-utils.mjs";
+const clone = (posTuple)=>posTuple.slice();
+const NullHandler = ()=>console.error("no handler installed");
+const mouseHandlers = {
+    mouseMove: NullHandler,
+    mouseMovePreDrag: NullHandler,
+    mouseUp: NullHandler,
+    mouseUpPreDrag: NullHandler
+};
+const mouseType = (name)=>name.startsWith("mouseMove") ? "mousemove" : "mouseup";
+const DRAG_THRESHOLD = 5;
+const useCellBlockSelection = ({ allowCellBlockSelection, columnCount = 0, containerRef, onSelectCellBlock, rowCount = 0 })=>{
+    const [cellBlock, setCellBlock] = useState(null);
+    const stateRef = useRef(refState);
+    const handlersRef = useRef(mouseHandlers);
+    const handleCopy = useCallback(async ()=>{
+        const { startCell, endCell } = stateRef.current;
+        if (startCell && endCell) {
+            const tsvText = getTextFromCells(startCell, endCell);
+            const type = "text/plain";
+            const blob = new Blob([
+                tsvText
+            ], {
+                type
+            });
+            const data = [
+                new ClipboardItem({
+                    [type]: blob
+                })
+            ];
+            await navigator.clipboard.write(data);
+        }
+    }, []);
+    const cellBlockRef = useCallback((el)=>{
+        stateRef.current.cellBlock = el;
+    }, []);
+    const createCellBlock = useCallback((method = "mouse")=>{
+        const { startBox, startCell } = stateRef.current;
+        if (startCell) {
+            const table = queryClosest(startCell, ".vuuTable");
+            if (table) table.classList.add(`vuu-cellblock-select-in-progress-${method}`);
+            setElementBox(startCell, startBox);
+            startCell.classList.add("vuu-cellblock-start");
+            setCellBlock(/*#__PURE__*/ jsx(CellBlock, {
+                onCopy: handleCopy,
+                ref: cellBlockRef
+            }));
+        }
+    }, [
+        cellBlockRef,
+        handleCopy
+    ]);
+    const initializeStateRef = useCallback(()=>{
+        const { cellBlock, cellBlockClassName, startCell, endCell } = stateRef.current;
+        if (startCell) startCell.classList.remove("vuu-cellblock-start");
+        if (endCell) endCell.classList.remove("vuu-cellblock-end");
+        if (cellBlock?.classList.contains(cellBlockClassName)) cellBlock.classList.remove(cellBlockClassName);
+        const { endBox, startBox } = refState;
+        stateRef.current = {
+            ...refState,
+            cellBlock,
+            endBox: {
+                ...endBox
+            },
+            endPos: [
+                -1,
+                -1
+            ],
+            startBox: {
+                ...startBox
+            },
+            startPos: [
+                -1,
+                -1
+            ]
+        };
+    }, []);
+    const addMouseListener = useCallback((mouseOperation, handler)=>{
+        window.addEventListener(mouseType(mouseOperation), handler);
+        handlersRef.current[mouseOperation] = handler;
+    }, []);
+    const removeMouseListener = useCallback((name)=>{
+        window.removeEventListener(mouseType(name), handlersRef.current[name]);
+    }, []);
+    handlersRef.current.mouseMove = useCallback((evt)=>{
+        const { clientX: x, clientY: y } = evt;
+        const { endBox, startBox } = stateRef.current;
+        if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {
+            const cell = queryClosest(evt.target, ".vuuTableCell, .vuuCellBlock");
+            if (cell?.classList.contains("vuuTableCell")) {
+                setElementBox(cell, endBox);
+                stateRef.current.endCell = cell;
+                updateCellBlockClassName(stateRef.current);
+            }
+        }
+    }, []);
+    handlersRef.current.mouseUp = useCallback((evt)=>{
+        removeMouseListener("mouseMove");
+        removeMouseListener("mouseUp");
+        const { cellBlock, endCell, startCell } = stateRef.current;
+        const table = queryClosest(evt.target, ".vuuTable");
+        endCell?.classList.add("vuu-cellblock-end");
+        if (table) table.classList.remove("vuu-cellblock-select-in-progress-mouse");
+        if (startCell && endCell) {
+            const tableCellBlock = getTableCellBlock(startCell, endCell);
+            onSelectCellBlock?.(tableCellBlock);
+        }
+        if (cellBlock) cellBlock.focus();
+    }, [
+        onSelectCellBlock,
+        removeMouseListener
+    ]);
+    handlersRef.current.mouseMovePreDrag = useCallback((evt)=>{
+        const { current: state } = stateRef;
+        const { mouseStartX, mouseStartY } = state;
+        const x = state.mousePosX = evt.clientX;
+        const y = state.mousePosY = evt.clientY;
+        const distance = Math.max(Math.abs(x - mouseStartX), Math.abs(y - mouseStartY));
+        if (distance > DRAG_THRESHOLD) {
+            createCellBlock("mouse");
+            const { mouseMove, mouseUp } = handlersRef.current;
+            removeMouseListener("mouseMovePreDrag");
+            removeMouseListener("mouseUpPreDrag");
+            addMouseListener("mouseMove", mouseMove);
+            addMouseListener("mouseUp", mouseUp);
+        }
+    }, [
+        addMouseListener,
+        createCellBlock,
+        removeMouseListener
+    ]);
+    handlersRef.current.mouseUpPreDrag = useCallback(()=>{
+        removeMouseListener("mouseMovePreDrag");
+        removeMouseListener("mouseUpPreDrag");
+    }, [
+        removeMouseListener
+    ]);
+    const handleNativeMouseOver = useCallback((evt)=>{
+        const cell = queryClosest(evt.target, ".vuuTableCell");
+        if (cell) {
+            stateRef.current.endPos = getAriaCellPos(cell);
+            stateRef.current.endCell?.classList.remove("vuu-cellblock-end");
+            stateRef.current.endCell = cell;
+            setElementBox(cell, stateRef.current.endBox);
+            updateCellBlockClassName(stateRef.current);
+            cell?.classList.add("vuu-cellblock-end");
+        }
+    }, []);
+    const handleNativeMouseUp = useCallback(()=>{
+        window.removeEventListener("mouseover", handleNativeMouseOver);
+    }, [
+        handleNativeMouseOver
+    ]);
+    const handleMouseDown = useCallback((evt)=>{
+        if (0 === evt.button) {
+            initializeStateRef();
+            const { current: state } = stateRef;
+            const cell = queryClosest(evt.target, ".vuuTableCell");
+            if (cell) {
+                state.startCell = cell;
+                state.mouseStartX = evt.clientX;
+                state.mouseStartY = evt.clientY;
+                const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;
+                addMouseListener("mouseMovePreDrag", mouseMovePreDrag);
+                addMouseListener("mouseUpPreDrag", mouseUpPreDrag);
+                console.log("register mouse enter");
+                window.addEventListener("mouseover", handleNativeMouseOver);
+                window.addEventListener("mouseup", handleNativeMouseUp);
+            }
+        }
+    }, [
+        addMouseListener,
+        handleNativeMouseOver,
+        handleNativeMouseUp,
+        initializeStateRef
+    ]);
+    const nativeKeyDownHandlerRef = useRef(NullHandler);
+    const handleNativeKeyUp = useCallback((evt)=>{
+        if ("Shift" === evt.key) {
+            const { endCell } = stateRef.current;
+            const table = queryClosest(evt.target, ".vuuTable");
+            endCell?.classList.add("vuu-cellblock-end");
+            if (table) table.classList.remove("vuu-cellblock-select-in-progress-keyboard");
+            window.removeEventListener("keydown", nativeKeyDownHandlerRef.current, {
+                capture: true
+            });
+            window.removeEventListener("keyup", handleNativeKeyUp, {
+                capture: true
+            });
+        }
+    }, []);
+    const handleNativeKeyDown = nativeKeyDownHandlerRef.current = useCallback(({ key })=>{
+        if (isArrowKey(key)) {
+            const { endBox, endPos, startBox } = stateRef.current;
+            if (isNullCellBox(startBox)) createCellBlock("keyboard");
+            const nextCell = getNextCellPos(key, endPos, columnCount, rowCount);
+            stateRef.current.endPos = nextCell;
+            const cell = getTableCell(containerRef, nextCell);
+            stateRef.current.endCell = cell;
+            setElementBox(cell, endBox);
+            updateCellBlockClassName(stateRef.current);
+        }
+    }, [
+        columnCount,
+        containerRef,
+        createCellBlock,
+        rowCount
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        console.log("[useCellBlockSelection] handleKeyDown (only interested in Shift key)");
+        if ("Shift" === evt.key) {
+            initializeStateRef();
+            const cell = queryClosest(evt.target, ".vuuTableCell");
+            if (cell) {
+                const startPos = getAriaCellPos(cell);
+                stateRef.current.startPos = startPos;
+                stateRef.current.endPos = clone(startPos);
+                const { current: state } = stateRef;
+                state.startCell = cell;
+                window.addEventListener("keydown", handleNativeKeyDown, {
+                    capture: true
+                });
+                window.addEventListener("keyup", handleNativeKeyUp, {
+                    capture: true
+                });
+                evt.preventDefault();
+            }
+        }
+    }, [
+        handleNativeKeyDown,
+        handleNativeKeyUp,
+        initializeStateRef
+    ]);
+    return {
+        cellBlock,
+        onKeyDown: allowCellBlockSelection ? handleKeyDown : void 0,
+        onMouseDown: allowCellBlockSelection ? handleMouseDown : void 0
+    };
+};
+export { useCellBlockSelection };

package/src/cell-renderers/checkbox-cell/CheckboxCell.css.js

@@ -0,0 +1,16 @@
+const css = `
+.vuuCheckboxCell-checkbox {
+  border: 2px solid #0000;
+
+  & input:focus-visible + .saltCheckboxIcon {
+    outline: none;
+  }
+}
+
+.vuuTableCell-editable .vuuCheckboxCell-checkbox:focus-within {
+  border: solid 2px var(--salt-focused-outlineColor);
+}
+
+
+`;
+export default css;

package/src/cell-renderers/checkbox-cell/CheckboxCell.mjs

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { Checkbox } from "@salt-ds/core";
+import { dataColumnAndKeyUnchanged, dispatchCustomEvent, isRpcSuccess, registerComponent } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CheckboxCell from "./CheckboxCell.css";
+const classBase = "vuuCheckboxCell";
+const CheckboxCell_CheckboxCell = /*#__PURE__*/ memo(({ column, dataRow, onEdit })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-checkbox-cell",
+        css: CheckboxCell,
+        window: targetWindow
+    });
+    const isChecked = !!dataRow[column.name];
+    const handleCommit = useCallback((value)=>async (evt)=>{
+            const res = await onEdit?.({
+                previousValue: isChecked,
+                value
+            }, "commit");
+            if (isRpcSuccess(res)) dispatchCustomEvent(evt.target, "vuu-commit");
+            return res;
+        }, [
+        isChecked,
+        onEdit
+    ]);
+    const handleKeyDown = useCallback(async (evt)=>{
+        if ("Enter" === evt.key) {
+            const res = await onEdit?.({
+                previousValue: isChecked,
+                value: !isChecked
+            }, "commit");
+            if (isRpcSuccess(res)) dispatchCustomEvent(evt.target, "vuu-commit");
+        }
+    }, [
+        isChecked,
+        onEdit
+    ]);
+    const className = `${classBase}-checkbox`;
+    return column.editable ? /*#__PURE__*/ jsx(Checkbox, {
+        checked: isChecked,
+        className: className,
+        onClick: handleCommit(!isChecked),
+        onKeyDown: handleKeyDown
+    }) : /*#__PURE__*/ jsx(Checkbox, {
+        checked: isChecked,
+        className: className,
+        disabled: true
+    });
+}, dataColumnAndKeyUnchanged);
+CheckboxCell_CheckboxCell.displayName = "CheckboxCell";
+registerComponent("checkbox-cell", CheckboxCell_CheckboxCell, "cell-renderer", {
+    serverDataType: "boolean"
+});
+export { CheckboxCell_CheckboxCell as CheckboxCell };

package/src/cell-renderers/checkbox-cell/index.mjs

@@ -0,0 +1 @@
+export * from "./CheckboxCell.mjs";

package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js

@@ -0,0 +1,19 @@
+const css = `
+.vuuTableCell {
+  & .vuuCheckboxRowSelector {
+    align-items: center;
+    height: 100%;
+
+    & .saltCheckboxIcon {
+      margin-top: 0;
+    }
+  }
+
+  & .vuuCheckboxRowSelectorIcon {
+    margin-top: calc(var(--row-height) / 2 - 6px);
+  }
+}
+
+
+`;
+export default css;

package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { Checkbox } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CheckboxRowSelectorCell from "./CheckboxRowSelectorCell.css";
+import { useCallback } from "react";
+const inputProps = {
+    "aria-label": "Press space to select row"
+};
+const CheckboxRowSelectorCell_CheckboxRowSelectorCell = ({ dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-checkbox-row-selector-cell",
+        css: CheckboxRowSelectorCell,
+        window: targetWindow
+    });
+    const isChecked = !!dataRow.isSelected;
+    const handleClick = useCallback((e)=>{
+        const target = e.target;
+        if ("INPUT" !== target.tagName) e.stopPropagation();
+    }, []);
+    return /*#__PURE__*/ jsx(Checkbox, {
+        checked: isChecked,
+        className: "vuuCheckboxRowSelector",
+        inputProps: inputProps,
+        onClick: handleClick
+    });
+};
+CheckboxRowSelectorCell_CheckboxRowSelectorCell.displayName = "CheckboxCell";
+registerComponent("checkbox-row-selector-cell", CheckboxRowSelectorCell_CheckboxRowSelectorCell, "cell-renderer", {
+    serverDataType: "boolean"
+});
+export { CheckboxRowSelectorCell_CheckboxRowSelectorCell as CheckboxRowSelectorCell };

package/src/cell-renderers/checkbox-row-selector/index.mjs

@@ -0,0 +1 @@
+export * from "./CheckboxRowSelectorCell.mjs";

package/src/cell-renderers/index.mjs

@@ -0,0 +1,4 @@
+export * from "./checkbox-cell/index.mjs";
+export * from "./checkbox-row-selector/index.mjs";
+export * from "./input-cell/index.mjs";
+export * from "./toggle-cell/index.mjs";

package/src/cell-renderers/input-cell/InputCell.css.js

@@ -0,0 +1,81 @@
+const css = `
+.vuuTableCell.vuuTableCell-editable {
+  & .vuuTableInputCell.saltInput-primary {
+    --salt-focused-outlineStyle: none;
+    --saltInput-height: var(--vuu-table-embedded-control-height);
+    --saltInput-minHeight: var(--saltInput-height);
+    border-radius: 2px;
+    font-weight: 500;
+  }
+}
+
+.vuuTableInputCell {
+  --edit-indicator-color: var(--salt-editable-borderColor);
+}
+
+.vuuTableInputCell-icon {
+  --vuu-icon-height: 13px;
+  --vuu-icon-left: 0;
+  --vuu-icon-size: 15px;
+  --vuu-icon-width: 12px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.vuuTableInputCell-error.saltInput-bordered.saltInput {
+  border-color: var(--salt-status-error-foreground-informative);
+
+  & .saltInput-startAdornmentContainer {
+    & .vuuTableInputCell-icon {
+      --vuu-icon-color: var(--salt-status-error-bold-background);
+    }
+  }
+
+  & .saltInput-endAdornmentContainer {
+    & .vuuTableInputCell-icon {
+      --vuu-icon-color: var(--salt-status-error-bold-background);
+    }
+  }
+}
+
+.vuuTableInputCell-warning.saltInput-bordered.saltInput {
+  border-color: var(--salt-status-warning-foreground-informative);
+
+  & .saltInput-startAdornmentContainer {
+    & .vuuTableInputCell-icon {
+      --vuu-icon-color: var(--salt-status-warning-bold-background);
+    }
+  }
+
+  & .saltInput-endAdornmentContainer {
+    & .vuuTableInputCell-icon {
+      --vuu-icon-color: var(--salt-status-warning-bold-background);
+    }
+  }
+}
+
+.vuuTableCell-right {
+  & .saltInput-input {
+    text-align: right;
+  }
+}
+
+.vuuTableInputCell-edited {
+  border-left: solid var(--vuuTableInputCell-edited-color, var(--edit-indicator-color)) 4px !important;
+}
+
+.vuuTableInputCell-error {
+  --edit-indicator-color: var(--salt-status-error-foreground-informative);
+  outline: var(--vuuTableCell-outline, solid var(--salt-status-error-foreground-informative) 2px);
+  outline-offset: -2px;
+}
+
+.vuuTableInputCell-warning {
+  --edit-indicator-color: var(--salt-status-warning-foreground-informative);
+  outline: var(--vuuTableCell-outline, solid var(--salt-status-warning-foreground-informative) 2px);
+  outline-offset: -2px;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/input-cell/InputCell.mjs

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Input, Tooltip } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { dataDescriptorTypeToVuuRowDataItemType, getVuuEditMessage, registerComponent } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import InputCell from "./InputCell.css";
+import { useInputCell } from "./useInputCell.mjs";
+const classBase = "vuuTableInputCell";
+const InputCell_InputCell = ({ column, dataRow, editedDuringCurrentSession, onEdit })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-input-cell",
+        css: InputCell,
+        window: targetWindow
+    });
+    const dataValue = dataRow[column.name];
+    const { align = "left" } = column;
+    const { editing, warningMessage, previousValue = "", ...editProps } = useInputCell({
+        column,
+        onEdit,
+        type: dataDescriptorTypeToVuuRowDataItemType(column),
+        value: dataValue
+    });
+    const editRejected = getVuuEditMessage(dataRow, column, previousValue);
+    const endAdornment = editRejected && "left" === align ? /*#__PURE__*/ jsx(Tooltip, {
+        content: editRejected,
+        placement: "right",
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: `${classBase}-icon`,
+            name: "error"
+        })
+    }) : warningMessage && "left" === align ? /*#__PURE__*/ jsx(Tooltip, {
+        content: warningMessage,
+        placement: "right",
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: `${classBase}-icon`,
+            name: "error"
+        })
+    }) : void 0;
+    const startAdornment = editRejected && "right" === align ? /*#__PURE__*/ jsx(Tooltip, {
+        content: editRejected,
+        placement: "right",
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: `${classBase}-icon`,
+            name: "error"
+        })
+    }) : warningMessage && "right" === align ? /*#__PURE__*/ jsx(Tooltip, {
+        content: warningMessage,
+        placement: "left",
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: `${classBase}-icon`,
+            name: "error"
+        })
+    }) : void 0;
+    return /*#__PURE__*/ jsx(Input, {
+        ...editProps,
+        bordered: true,
+        className: clsx(classBase, {
+            [`${classBase}-edited`]: true === editedDuringCurrentSession,
+            [`${classBase}-error`]: void 0 !== warningMessage,
+            [`${classBase}-warning`]: void 0 !== editRejected,
+            vuuEditing: editing
+        }),
+        endAdornment: endAdornment,
+        startAdornment: startAdornment
+    });
+};
+registerComponent("input-cell", InputCell_InputCell, "cell-renderer", {
+    userCanAssign: false
+});
+export { InputCell_InputCell as InputCell };

package/src/cell-renderers/input-cell/index.mjs

@@ -0,0 +1 @@
+export * from "./InputCell.mjs";