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

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

@@ -0,0 +1,199 @@
+import { DataValidationError, dispatchCustomEvent, getTypedValue, isRpcError, isRpcSuccess } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+const stringValueOf = (value)=>value?.toString() ?? "";
+const useInputCell = ({ column, value, onEdit, type = "string" })=>{
+    const [editState, setEditState] = useState({
+        editing: false,
+        value: stringValueOf(value)
+    });
+    const initialValueRef = useRef(value?.toString() ?? "");
+    const isDirtyRef = useRef(false);
+    useMemo(()=>{
+        if (initialValueRef.current !== value?.toString()) {
+            initialValueRef.current = stringValueOf(value);
+            setEditState((editState)=>({
+                    ...editState,
+                    message: void 0,
+                    value: stringValueOf(value)
+                }));
+        }
+    }, [
+        value
+    ]);
+    const commit = useCallback(async ()=>{
+        const { value } = editState;
+        const result = column.clientSideEditValidationCheck?.(value, "*");
+        if (result?.ok === false) setEditState((state)=>({
+                ...state,
+                message: result?.messages?.join(",")
+            }));
+        else {
+            const { current: initialValue } = initialValueRef;
+            const previousValue = getTypedValue(initialValue, type);
+            try {
+                const typedValue = getTypedValue(value, type, true);
+                const response = await onEdit?.({
+                    editType: "commit",
+                    isValid: true,
+                    previousValue,
+                    value: typedValue
+                }, "commit");
+                if (isRpcSuccess(response)) {
+                    isDirtyRef.current = false;
+                    setEditState(({ previousValue, value })=>({
+                            editing: false,
+                            previousValue: previousValue === value ? void 0 : void 0 === previousValue ? initialValue : previousValue,
+                            value
+                        }));
+                } else if (isRpcError(response)) {
+                    setEditState((state)=>({
+                            ...state,
+                            message: response.errorMessage
+                        }));
+                    return false;
+                }
+                initialValueRef.current = value;
+                return true;
+            } catch (e) {
+                if (e instanceof DataValidationError) {
+                    const { actualType, expectedType, message } = e;
+                    if (column) {
+                        const { name, label = name } = column;
+                        const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;
+                        setEditState((state)=>({
+                                ...state,
+                                message
+                            }));
+                        onEdit?.({
+                            editType: "commit",
+                            isValid: false,
+                            previousValue,
+                            value
+                        }, "commit");
+                    } else setEditState((state)=>({
+                            ...state,
+                            message
+                        }));
+                }
+            }
+        }
+        return false;
+    }, [
+        column,
+        editState,
+        onEdit,
+        type
+    ]);
+    const toggleActivation = useCallback(async (input, cancel = false)=>{
+        if (editState.editing) if (isDirtyRef.current) if (cancel) {
+            const { value: previousValue } = editState;
+            isDirtyRef.current = false;
+            setEditState({
+                editing: false,
+                value: initialValueRef.current,
+                message: void 0
+            });
+            onEdit?.({
+                editType: "cancel",
+                isValid: true,
+                previousValue,
+                value: getTypedValue(initialValueRef.current, type, true)
+            }, "commit");
+        } else {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+                setEditState((editState)=>({
+                        ...editState,
+                        editing: false
+                    }));
+                dispatchCustomEvent(input, "vuu-commit");
+            }
+        }
+        else setEditState((editState)=>({
+                ...editState,
+                editing: false
+            }));
+        else if (!cancel) {
+            setEditState((editState)=>({
+                    ...editState,
+                    editing: true
+                }));
+            input.select();
+        }
+    }, [
+        commit,
+        editState,
+        onEdit
+    ]);
+    const handleKeyDown = useCallback(async (evt)=>{
+        const { key, target } = evt;
+        const input = target;
+        if ("Enter" === key) toggleActivation(input);
+        else if ("ArrowRight" === key || "ArrowLeft" === key || "ArrowUp" === key || "ArrowDown" === key) {
+            if (editState.editing) evt.stopPropagation();
+        } else if ("Escape" === evt.key) toggleActivation(input, true);
+    }, [
+        editState,
+        toggleActivation
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const input = e.target;
+        const source = e.relatedTarget;
+        if (source?.classList.contains("vuuTableCell") && source.contains(input)) toggleActivation(input);
+    }, [
+        toggleActivation
+    ]);
+    const handleBlur = useCallback(async ()=>{
+        if (editState.editing) {
+            if (isDirtyRef.current) {
+                const commitSuccessful = await commit();
+                console.log({
+                    commitSuccessful
+                });
+            }
+            setEditState((editState)=>({
+                    ...editState,
+                    editing: false
+                }));
+        }
+    }, [
+        commit,
+        editState
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const { value } = evt.target;
+        isDirtyRef.current = value !== initialValueRef.current;
+        const result = column.clientSideEditValidationCheck?.(value, "change");
+        setEditState({
+            editing: true,
+            value
+        });
+        onEdit?.({
+            editType: "change",
+            isValid: result?.ok !== false,
+            previousValue: initialValueRef.current,
+            value
+        }, "change");
+        if (result?.ok === false) setEditState({
+            editing: true,
+            value,
+            message: result.messages?.join(",")
+        });
+    }, [
+        column,
+        onEdit
+    ]);
+    return {
+        editing: editState.editing,
+        inputProps: {
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onKeyDown: handleKeyDown
+        },
+        onChange: handleChange,
+        previousValue: editState.previousValue,
+        value: editState.value,
+        warningMessage: editState.message
+    };
+};
+export { useInputCell };

package/src/cell-renderers/toggle-cell/ToggleCell.css.js

@@ -0,0 +1,31 @@
+const css = `
+.vuuTableToggleCell {
+  --saltButton-borderRadius: 4px;
+  --saltButton-height: 16px;
+  font-weight: 500;
+  position: relative;
+  top: 1px;
+}
+
+.vuuTableToggleCell-side {
+  --saltButton-minWidth: 40px;
+}
+
+.vuuTableToggleCell.vuuCycleStateButton-buy {
+  background-color: var(--vuu-color-green-50);
+}
+
+.vuuTableToggleCell.vuuCycleStateButton-sell {
+  background-color: var(--vuu-color-red-50);
+}
+
+.vuuTableCell .vuuTableToggleCell:focus {
+  border: solid 2px var(--vuu-color-purple-10) !important;
+  color: #fff !important;
+  height: 18px !important;
+  top: 0 !important;
+}
+
+
+`;
+export default css;

package/src/cell-renderers/toggle-cell/ToggleCell.mjs

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { dataColumnAndKeyUnchanged, dispatchCustomEvent, isRpcSuccess, isTypeDescriptor, isValueListRenderer, registerComponent } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { memo, useCallback } from "react";
+import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
+import ToggleCell_0 from "./ToggleCell.css";
+const classBase = "vuuTableToggleCell";
+const getValueList = ({ name, type })=>{
+    if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) return type.renderer.values;
+    throw Error(`useLookupValues column ${name} has not been configured with a values list`);
+};
+const ToggleCell_ToggleCell = /*#__PURE__*/ memo(function({ column, dataRow, onEdit }) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toggle-cell",
+        css: ToggleCell_0,
+        window: targetWindow
+    });
+    const values = getValueList(column);
+    const value = dataRow[column.name];
+    const handleCommit = useCallback(async (evt, newValue)=>{
+        const res = await onEdit?.({
+            previousValue: value,
+            value: newValue
+        }, "commit");
+        if (isRpcSuccess(res)) dispatchCustomEvent(evt.target, "vuu-commit");
+        return res;
+    }, [
+        onEdit,
+        value
+    ]);
+    return /*#__PURE__*/ jsx(CycleStateButton, {
+        appearance: "solid",
+        className: clsx(classBase, `${classBase}-${column.name}`),
+        onCommit: handleCommit,
+        sentiment: "accented",
+        value: value,
+        values: values,
+        children: value
+    });
+}, dataColumnAndKeyUnchanged);
+registerComponent("toggle-cell", ToggleCell_ToggleCell, "cell-renderer", {
+    userCanAssign: false
+});
+export { ToggleCell_ToggleCell as ToggleCell };

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

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

package/src/column-header-pill/ColumnHeaderPill.css.js

@@ -0,0 +1,34 @@
+const css = `
+.vuuColumnHeaderPill {
+  --vuu-icon-size: 14px;
+  --menu-item-icon-color: black;
+  --vuu-icon-color: var(--salt-actionable-bold-foreground);
+  --vuu-icon-height: 12px;
+  --vuu-icon-width: 12px;
+  background: var(--salt-actionable-bold-background);
+  color: var(--salt-actionable-bold-foreground);
+  flex: var(--vuuColumnHeaderPill-flex, none);
+  height: 16px;
+  margin: var(--vuuColumnHeaderPill-margin, 0);
+  border-radius: 3px;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+  font-size: 11px;
+  display: flex;
+  position: relative;
+}
+
+.vuuColumnHeaderPill:hover {
+  --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);
+  background-color: var(--salt-actionable-bold-background-hover);
+  color: var(--salt-actionable-bold-foreground-hover);
+}
+
+.vuuColumnHeaderPill-removeButton {
+  cursor: pointer;
+}
+
+
+`;
+export default css;

package/src/column-header-pill/ColumnHeaderPill.mjs

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback } from "react";
+import ColumnHeaderPill from "./ColumnHeaderPill.css";
+const classBase = "vuuColumnHeaderPill";
+const ColumnHeaderPill_ColumnHeaderPill = ({ children, className, column, onRemove, removable, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-header-pill",
+        css: ColumnHeaderPill,
+        window: targetWindow
+    });
+    if (removable && "function" != typeof onRemove) throw Error("ColumnHeaderPill onRemove prop must be provided if Pill is removable");
+    const handleClickRemove = useCallback((evt)=>{
+        evt.preventDefault();
+        evt.stopPropagation();
+        onRemove?.(column);
+    }, [
+        column,
+        onRemove
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        tabIndex: -1,
+        children: [
+            children,
+            removable ? /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-removeButton`,
+                role: "button",
+                "data-icon": "cross",
+                onClick: handleClickRemove
+            }) : null
+        ]
+    });
+};
+export { ColumnHeaderPill_ColumnHeaderPill as ColumnHeaderPill };

package/src/column-header-pill/GroupColumnPill.css.js

@@ -0,0 +1,10 @@
+const css = `
+.vuuSortPosition {
+  padding-top: 1px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+
+`;
+export default css;

package/src/column-header-pill/GroupColumnPill.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ColumnHeaderPill } from "./ColumnHeaderPill.mjs";
+import GroupColumnPill from "./GroupColumnPill.css";
+const GroupColumnPill_GroupColumnPill = ({ column, ...columnHeaderProps })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-group-column-pill",
+        css: GroupColumnPill,
+        window: targetWindow
+    });
+    const { name, sorted } = column;
+    const icon = "number" == typeof sorted ? sorted < 0 ? "arrow-down" : "arrow-up" : "A" === sorted ? "arrow-up" : "D" === sorted ? "arrow-down" : void 0;
+    return /*#__PURE__*/ jsxs(ColumnHeaderPill, {
+        ...columnHeaderProps,
+        column: column,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "vuuGroupColumnPill-label",
+                children: name
+            }),
+            void 0 !== icon ? /*#__PURE__*/ jsx("span", {
+                "data-icon": icon
+            }) : null,
+            "number" == typeof sorted ? /*#__PURE__*/ jsx("span", {
+                className: "vuuSortPosition",
+                children: Math.abs(sorted)
+            }) : null
+        ]
+    });
+};
+export { GroupColumnPill_GroupColumnPill as GroupColumnPill };

package/src/column-header-pill/SortIndicator.css.js

@@ -0,0 +1,15 @@
+const css = `
+.vuuSortIndicator {
+  flex: 0 16px;
+  padding: 0 2px;
+
+  & .vuuSortPosition {
+    padding-top: 1px;
+    font-size: 11px;
+    font-weight: 700;
+  }
+}
+
+
+`;
+export default css;

package/src/column-header-pill/SortIndicator.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ColumnHeaderPill } from "./ColumnHeaderPill.mjs";
+import SortIndicator from "./SortIndicator.css";
+const SortIndicator_SortIndicator = ({ column })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-sort-indicator",
+        css: SortIndicator,
+        window: targetWindow
+    });
+    if (!column.sorted) return null;
+    const icon = "number" == typeof column.sorted ? column.sorted < 0 ? "arrow-down" : "arrow-up" : "A" === column.sorted ? "arrow-up" : "arrow-down";
+    return /*#__PURE__*/ jsxs(ColumnHeaderPill, {
+        className: "vuuSortIndicator",
+        column: column,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                "data-icon": icon
+            }),
+            "number" == typeof column.sorted ? /*#__PURE__*/ jsx("span", {
+                className: "vuuSortPosition",
+                children: Math.abs(column.sorted)
+            }) : null
+        ]
+    });
+};
+export { SortIndicator_SortIndicator as SortIndicator };

package/src/column-header-pill/index.mjs

@@ -0,0 +1,3 @@
+export * from "./ColumnHeaderPill.mjs";
+export * from "./GroupColumnPill.mjs";
+export * from "./SortIndicator.mjs";

package/src/column-resizing/ColumnResizer.css.js

@@ -0,0 +1,32 @@
+const css = `
+.vuuColumnResizer {
+  cursor: col-resize;
+  height: var(--vuu-table-col-header-row-height);
+  margin-left: var(--columnResizer-left, auto);
+  z-index: 1;
+  width: 8px;
+  position: absolute;
+  right: -5px;
+}
+
+.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing) {
+  & .vuuColumnResizer:hover {
+    --columnResizer-color: var(--salt-selectable-background-selected);
+  }
+}
+
+.vuuColumnResizer:after {
+  background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
+  content: "";
+  height: var(--columnResizer-height, 0);
+  z-index: 1;
+  width: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 3px;
+}
+
+
+`;
+export default css;

package/src/column-resizing/ColumnResizer.mjs

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback, useRef } from "react";
+import ColumnResizer from "./ColumnResizer.css";
+const NOOP = ()=>void 0;
+const baseClass = "vuuColumnResizer";
+const ColumnResizer_ColumnResizer = ({ onDrag, onDragEnd = NOOP, onDragStart = NOOP })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-resizer",
+        css: ColumnResizer,
+        window: targetWindow
+    });
+    const positionRef = useRef({
+        start: 0,
+        now: 0
+    });
+    const elementRef = useRef(void 0);
+    const onPointerMove = useCallback((e)=>{
+        if (e.stopPropagation) e.stopPropagation();
+        if (e.preventDefault) e.preventDefault();
+        const { current: position } = positionRef;
+        const x = e.clientX;
+        const moveBy = Math.round(x - position.now);
+        const distanceMoved = Math.round(x - position.start);
+        positionRef.current.now = x;
+        if (0 !== moveBy) onDrag(e, moveBy, distanceMoved);
+    }, [
+        onDrag
+    ]);
+    const onPointerUp = useCallback((e)=>{
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointermove", onPointerMove);
+        const { current: position } = positionRef;
+        const distanceMoved = position.now - position.start;
+        onDragEnd(e, distanceMoved);
+    }, [
+        onDragEnd,
+        onPointerMove
+    ]);
+    const handlePointerDown = useCallback((e)=>{
+        const { current: position } = positionRef;
+        onDragStart(e);
+        position.now = position.start = e.clientX;
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointermove", onPointerMove);
+        if (e.stopPropagation) e.stopPropagation();
+        if (e.preventDefault) e.preventDefault();
+    }, [
+        onDragStart,
+        onPointerMove,
+        onPointerUp
+    ]);
+    const setRef = useCallback((el)=>{
+        if (el && void 0 === elementRef.current) {
+            el.addEventListener("pointerdown", handlePointerDown);
+            elementRef.current = el;
+        }
+    }, [
+        handlePointerDown
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: baseClass,
+        ref: setRef,
+        role: "separator"
+    });
+};
+export { ColumnResizer_ColumnResizer as ColumnResizer };

package/src/column-resizing/index.mjs

@@ -0,0 +1,2 @@
+export * from "./ColumnResizer.mjs";
+export * from "./useTableColumnResize.mjs";

package/src/column-resizing/useTableColumnResize.mjs

@@ -0,0 +1,57 @@
+import { useCallback, useRef, useState } from "react";
+const useTableColumnResize = ({ column, onResize, rootRef })=>{
+    const widthRef = useRef({
+        start: 0,
+        now: 0
+    });
+    const [isResizing, setResizing] = useState(false);
+    const { name } = column;
+    const handleResizeStart = useCallback(()=>{
+        if (onResize && rootRef.current) {
+            const { current: width } = widthRef;
+            const { width: measuredWidth } = rootRef.current.getBoundingClientRect();
+            width.start = width.now = Math.round(measuredWidth);
+            setResizing(true);
+            onResize?.("begin", name);
+        }
+    }, [
+        name,
+        onResize,
+        rootRef
+    ]);
+    const handleResize = useCallback((_evt, moveBy, totalDistanceMoved)=>{
+        if (rootRef.current) {
+            if (onResize) {
+                const { current: width } = widthRef;
+                const newWidth = width.start + totalDistanceMoved;
+                if (newWidth !== width.now && newWidth > 0) {
+                    onResize("resize", name, newWidth);
+                    width.now = newWidth;
+                }
+            }
+        }
+    }, [
+        name,
+        onResize,
+        rootRef
+    ]);
+    const handleResizeEnd = useCallback(()=>{
+        if (onResize) {
+            const { current: width } = widthRef;
+            onResize("end", name, width.now);
+            setTimeout(()=>{
+                setResizing(false);
+            }, 80);
+        }
+    }, [
+        name,
+        onResize
+    ]);
+    return {
+        isResizing,
+        onDrag: handleResize,
+        onDragStart: handleResizeStart,
+        onDragEnd: handleResizeEnd
+    };
+};
+export { useTableColumnResize };