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

package/src/editable/useEditableText.js

@@ -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 useEditableText = ({ 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: initialValueRef.current
+            }, "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 { useEditableText };

package/src/editable-label/EditableLabel.css.js

@@ -0,0 +1,81 @@
+const css = `
+.vuuEditableLabel {
+  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);
+  --editableLabel-height: var(--vuuEditableLabel-height, 26px);
+  --saltInput-background: transparent;
+  --saltInput-height: calc(var(--editableLabel-height) - 4px);
+  --saltInput-minWidth: 14px;
+  color: inherit;
+  cursor: default;
+  font-size: var(--salt-text-fontSize);
+  letter-spacing: normal;
+  height: 100%;
+  padding-right: var(--editableLabel-padding);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: var(--salt-zIndex-default);
+  flex-direction: column;
+  justify-content: center;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+
+  &[data-embedded] {
+    outline: none;
+  }
+
+  & .saltInput-activationIndicator {
+    display: none;
+  }
+
+  & .saltInput-focused {
+    background-color: inherit;
+    outline: none;
+  }
+}
+
+.vuuEditableLabel:before {
+  box-sizing: content-box;
+  content: attr(data-text);
+  height: 0;
+  padding: 0 var(--salt-spacing-200);
+  visibility: hidden;
+  white-space: pre-wrap;
+  display: block;
+}
+
+.vuuEditableLabel .saltInput {
+  font-weight: var(--salt-text-fontWeight);
+  left: var(--editableLabel-padding, 0);
+  padding: 0 var(--salt-spacing-100);
+  right: var(--editableLabel-padding, 0);
+  top: var(--saltEditableLabel-top, 1px);
+  width: calc(100% - 4px);
+}
+
+.vuuEditableLabel-input {
+  box-sizing: content-box;
+  color: inherit;
+  font: inherit;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  flex: 1;
+  width: 0;
+  min-width: 0;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.vuuEditableLabel-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 10px;
+  overflow: hidden;
+}
+
+
+`;
+export default css;

package/src/editable-label/EditableLabel.js

@@ -0,0 +1,125 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { Input, useControlled } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import EditableLabel_0 from "./EditableLabel.css";
+const classBase = "vuuEditableLabel";
+const NullEditAPI = {
+    beginEdit: ()=>void 0
+};
+const EditableLabel_EditableLabel = /*#__PURE__*/ forwardRef(function({ className: classNameProp, defaultEditing, defaultValue, editLabelApiRef, editing: editingProp, onChange, onEnterEditMode, onExitEditMode, value: valueProp, ...restProps }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-editable-label",
+        css: EditableLabel_0,
+        window: targetWindow
+    });
+    const inputRef = useRef(null);
+    const editingRef = useRef(false);
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue ?? "",
+        name: "EditableLabel",
+        state: "value"
+    });
+    const [editing, _setEditing] = useControlled({
+        controlled: editingProp,
+        default: defaultEditing ?? false,
+        name: "EditableLabel",
+        state: "editing"
+    });
+    const setEditing = useCallback((value)=>{
+        _setEditing(editingRef.current = value);
+    }, [
+        _setEditing
+    ]);
+    const initialValue = useRef(value);
+    useLayoutEffect(()=>{
+        if (editing) {
+            if (null !== inputRef.current) {
+                inputRef.current.select();
+                inputRef.current.focus();
+            }
+        }
+    }, [
+        editing,
+        inputRef
+    ]);
+    const beginEdit = useCallback(()=>{
+        setEditing(true);
+        onEnterEditMode?.();
+    }, [
+        onEnterEditMode,
+        setEditing
+    ]);
+    useImperativeHandle(editLabelApiRef, ()=>({
+            beginEdit
+        }), [
+        beginEdit
+    ]);
+    const exitEditMode = useCallback(({ cancelEdit = false, allowDeactivation = false } = {})=>{
+        setEditing(false);
+        const originalValue = initialValue.current;
+        if (cancelEdit || originalValue === value) {
+            if (originalValue !== value) setValue(originalValue);
+            onExitEditMode?.(originalValue, originalValue, allowDeactivation, cancelEdit);
+        } else {
+            initialValue.current = value;
+            onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);
+        }
+    }, [
+        onExitEditMode,
+        setEditing,
+        setValue,
+        value
+    ]);
+    const handleChange = (evt)=>{
+        const { value } = evt.target;
+        setValue(value);
+        onChange && onChange(value);
+    };
+    const handleBlur = useCallback(()=>{
+        if (editingRef.current) exitEditMode({
+            allowDeactivation: true
+        });
+    }, [
+        exitEditMode
+    ]);
+    const handleKeyDown = (evt)=>{
+        if (editing && "Enter" === evt.key) {
+            evt.stopPropagation();
+            exitEditMode();
+        } else if ("ArrowRight" === evt.key || "ArrowLeft" === evt.key) evt.stopPropagation();
+        else if ("Escape" === evt.key) exitEditMode({
+            cancelEdit: true
+        });
+    };
+    const className = clsx(classBase, classNameProp, {
+        [`${classBase}-editing`]: editing
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: className,
+        "data-text": value,
+        ref: forwardedRef,
+        children: editing ? /*#__PURE__*/ jsx(Input, {
+            inputProps: {
+                className: `${classBase}-input`,
+                spellCheck: false
+            },
+            value: value,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            inputRef: inputRef,
+            textAlign: "left",
+            variant: "secondary"
+        }) : /*#__PURE__*/ jsx("span", {
+            className: `${classBase}-label`,
+            children: value
+        })
+    });
+});
+export { EditableLabel_EditableLabel as EditableLabel, NullEditAPI };

package/src/editable-label/index.js

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

package/src/expando-input/ExpandoInput.css.js

@@ -0,0 +1,67 @@
+const css = `
+.vuuExpandoInput {
+  --expandoInput-height: var(--vuuExpandoInput-height, 26px);
+  --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);
+  --saltInput-height: calc(var(--expandoInput-height) - 2px);
+  --saltInput-minHeight: var(--saltInput-height);
+  --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);
+  border: var(--vuuExpandoInput-border, none);
+  border-radius: var(--vuuExpandoInput-borderRadius, 0);
+  color: inherit;
+  cursor: default;
+  font-size: var(--salt-text-fontSize);
+  height: var(--expandoInput-height);
+  min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));
+  padding: 0 var(--expandoInput-padding);
+  outline: none;
+  display: inline-block;
+  position: relative;
+
+  & .saltInput-secondary {
+    --saltInput-background: var(--vuuExpandoInput-background, var(--salt-container-primary-background));
+  }
+}
+
+.vuuExpandoInput:before {
+  content: attr(data-text);
+  visibility: hidden;
+  white-space: pre-wrap;
+  height: 0;
+  display: block;
+}
+
+.vuuExpandoInput-error {
+  border-color: var(--vuu-color-red-50);
+}
+
+.vuuExpandoInput .saltInput {
+  font-weight: var(--salt-text-fontWeight);
+  left: var(--expandoInput-padding, 0);
+  right: var(--expandoInput-padding, 0);
+  outline-style: none;
+  width: auto;
+  padding: 0;
+  position: absolute;
+}
+
+.vuuExpandoInput .saltInput-activationIndicator {
+  display: none;
+}
+
+.vuuExpandoInput-input {
+  box-sizing: content-box;
+  font: inherit;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  flex: 1;
+  min-width: 0;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+
+`;
+export default css;

package/src/expando-input/ExpandoInput.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { VuuInput } from "../vuu-input/index.js";
+import ExpandoInput_0 from "./ExpandoInput.css";
+const classBase = "vuuExpandoInput";
+const noop = ()=>void 0;
+const ExpandoInput_ExpandoInput = /*#__PURE__*/ forwardRef(function({ className: classNameProp, errorMessage, value, inputProps, onCommit = noop, ...props }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-expando-input",
+        css: ExpandoInput_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(classBase, classNameProp, {
+            [`${classBase}-error`]: errorMessage
+        }),
+        "data-text": value,
+        children: /*#__PURE__*/ jsx(VuuInput, {
+            ...props,
+            errorMessage: errorMessage,
+            inputProps: {
+                ...inputProps,
+                className: `${classBase}-input`
+            },
+            onCommit: onCommit,
+            ref: forwardedRef,
+            style: {
+                padding: 0
+            },
+            textAlign: "left",
+            value: value,
+            variant: "secondary"
+        })
+    });
+});
+export { ExpandoInput_ExpandoInput as ExpandoInput };

package/src/expando-input/index.js

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

package/src/highlighter/Highlighter.css.js

@@ -0,0 +1,8 @@
+const css = `
+.saltHighlighter-highlight {
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+
+
+`;
+export default css;

package/src/highlighter/Highlighter.js

@@ -0,0 +1,27 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { escapeRegExp } from "../utils/index.js";
+import Highlighter from "./Highlighter.css";
+const withBaseName = makePrefixer("saltHighlighter");
+const Highlighter_Highlighter = (props)=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-highlighter",
+        css: Highlighter,
+        window: targetWindow
+    });
+    const { matchPattern, text = "" } = props;
+    const matchRegex = "string" == typeof matchPattern ? new RegExp(`(${escapeRegExp(matchPattern)})`, "gi") : matchPattern;
+    if (void 0 === matchRegex) return /*#__PURE__*/ jsx(Fragment, {
+        children: text
+    });
+    return /*#__PURE__*/ jsx("span", {
+        children: text.split(matchRegex).map((part, index)=>part.match(matchRegex) ? /*#__PURE__*/ jsx("strong", {
+                className: withBaseName("highlight"),
+                children: part
+            }, `${index}-${part}`) : part)
+    });
+};
+export { Highlighter_Highlighter as Highlighter };

package/src/highlighter/index.js

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

package/src/hover-overlay/HoverOverlay.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Overlay, OverlayPanel, OverlayPanelContent, OverlayTrigger } from "@salt-ds/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placement = "right", trigger })=>{
+    const [open, _setOpen] = useState(openProp);
+    const isOpen = useRef(false);
+    const showHandle = useRef(void 0);
+    const hideHandle = useRef(void 0);
+    const setOpen = useCallback((open)=>{
+        if (open !== isOpen.current) {
+            isOpen.current = open;
+            _setOpen(open);
+            onOpenChange?.(open);
+        }
+    }, [
+        onOpenChange
+    ]);
+    useEffect(()=>{
+        if (openProp !== isOpen.current) setOpen(openProp);
+    }, [
+        openProp,
+        setOpen
+    ]);
+    const handleOverlayMouseEnter = useCallback(()=>{
+        if (hideHandle.current) {
+            clearTimeout(hideHandle.current);
+            hideHandle.current = void 0;
+        }
+    }, []);
+    const handleOverlayMouseLeave = useCallback(()=>{
+        hideHandle.current = setTimeout(()=>{
+            setOpen(false);
+            hideHandle.current = void 0;
+        }, 300);
+    }, [
+        setOpen
+    ]);
+    const handleMouseEnter = useCallback(()=>{
+        showHandle.current = setTimeout(()=>{
+            setOpen(true);
+            showHandle.current = void 0;
+        }, 400);
+        if (hideHandle.current) {
+            clearTimeout(hideHandle.current);
+            hideHandle.current = void 0;
+        }
+    }, [
+        setOpen
+    ]);
+    const handleMouseLeave = useCallback(()=>{
+        if (showHandle.current) {
+            clearTimeout(showHandle.current);
+            showHandle.current = void 0;
+        } else if (isOpen.current) hideHandle.current = setTimeout(()=>{
+            setOpen(false);
+            hideHandle.current = void 0;
+        }, 300);
+    }, [
+        setOpen
+    ]);
+    const handleClick = useCallback(()=>{
+        if (showHandle.current) {
+            clearTimeout(showHandle.current);
+            showHandle.current = void 0;
+        } else if (isOpen.current) setOpen(false);
+    }, [
+        setOpen
+    ]);
+    return /*#__PURE__*/ jsxs(Overlay, {
+        placement: placement,
+        onOpenChange: onOpenChange,
+        open: open,
+        children: [
+            /*#__PURE__*/ jsx(OverlayTrigger, {
+                children: /*#__PURE__*/ jsx("div", {
+                    onClick: handleClick,
+                    onMouseEnter: handleMouseEnter,
+                    onMouseLeave: handleMouseLeave,
+                    children: trigger
+                })
+            }),
+            /*#__PURE__*/ jsx(OverlayPanel, {
+                children: /*#__PURE__*/ jsx(OverlayPanelContent, {
+                    onMouseEnter: handleOverlayMouseEnter,
+                    onMouseLeave: handleOverlayMouseLeave,
+                    children: children
+                })
+            })
+        ]
+    });
+};
+export { HoverOverlay };

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

@@ -0,0 +1,8 @@
+const css = `
+.vuuIcon {
+  --vuu-icon-left: 0;
+}
+
+
+`;
+export default css;

package/src/icon-button/Icon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import Icon from "./Icon.css";
+const classBase = "vuuIcon";
+const Icon_Icon = ({ className, name, size, style: styleProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-icon",
+        css: Icon,
+        window: targetWindow
+    });
+    const style = "number" == typeof size ? {
+        ...styleProp,
+        "--vuu-icon-size": `${size}px`
+    } : styleProp;
+    return /*#__PURE__*/ jsx("span", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        "data-icon": name,
+        role: "img",
+        style: style
+    });
+};
+export { Icon_Icon as Icon };