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

package/src/time-input/MaskedInput.js

@@ -1,285 +0,0 @@
-import { EventEmitter, createSyntheticEvent, decrementTimeUnitValue, incrementTimeUnitValue, isValidTimeString, updateTimeString, zeroTime, zeroTimeUnit } from "@vuu-ui/vuu-utils";
-const NullSelection = {
-    end: null,
-    start: null
-};
-const FullSelection = {
-    end: 0,
-    start: 8
-};
-const CursorAtEnd = {
-    end: 8,
-    start: 8
-};
-class MaskedInput extends EventEmitter {
-    #controlled = false;
-    #input = null;
-    #isFocused = false;
-    #isIncrementalChange = false;
-    #selectionStart = -1;
-    #selectionEnd = -1;
-    #value;
-    #unitSelected;
-    #halfUnitSelected;
-    constructor(defaultValue, inputEl = null){
-        super();
-        if (inputEl) this.input = inputEl;
-        this.#value = defaultValue ?? zeroTime;
-    }
-    set input(el) {
-        if (this.#input) throw Error("MaskedInput cannot be reused, create a new instance for a new input");
-        this.#input = el;
-        el.addEventListener("change", this.emitSyntheticChangeEvent);
-    }
-    emitSyntheticChangeEvent = (e)=>{
-        const syntheticEvent = createSyntheticEvent(e);
-        this.emit("change", syntheticEvent);
-    };
-    get cursorPos() {
-        return this.selectionStart;
-    }
-    set cursorPos(value) {
-        this.selectionStart = value;
-        this.selectionEnd = value;
-        if (this.#input) this.#input.setSelectionRange(value, value);
-    }
-    get isFocused() {
-        return this.#isFocused;
-    }
-    get selectionStart() {
-        return this.#selectionStart;
-    }
-    set selectionStart(value) {
-        this.#selectionStart = value;
-    }
-    get selectionEnd() {
-        return this.#selectionEnd;
-    }
-    set selectionEnd(value) {
-        this.#selectionEnd = value;
-    }
-    setValue(value) {
-        if (!this.#controlled) {
-            this.#isIncrementalChange = false;
-            this.#value = value;
-        }
-        if (this.#input) {
-            this.#input.value = value;
-            this.#input.dispatchEvent(new Event("change", {
-                bubbles: true,
-                composed: true
-            }));
-        }
-    }
-    setUnitValue(unit, value) {
-        const newTimeString = updateTimeString(this.#value, unit, value);
-        this.setValue(newTimeString);
-    }
-    getUnitValue(unit) {
-        switch(unit){
-            case "hours":
-                return this.#value.slice(0, 2);
-            case "minutes":
-                return this.#value.slice(3, 5);
-            case "seconds":
-                return this.#value.slice(6, 8);
-            default:
-                throw Error(`[MaskedInout] invalue unit ${unit}`);
-        }
-    }
-    get value() {
-        return this.#value;
-    }
-    set value(value) {
-        this.#controlled = true;
-        this.#value = value;
-        if (this.isFocused) {
-            const isIncremental = this.#isIncrementalChange;
-            this.#isIncrementalChange = false;
-            requestAnimationFrame(()=>{
-                if (isIncremental) this.restoreSelection();
-                else this.advanceSelection();
-            });
-        }
-    }
-    clear(unit) {
-        if (this.#input) {
-            let newValue = this.#value;
-            if ("hours" === unit) newValue = zeroTimeUnit.concat(this.#value.slice(2));
-            else if ("minutes" === unit) newValue = this.#value.slice(0, 3).concat(zeroTimeUnit).concat(this.#value.slice(5));
-            else if ("seconds" === unit) newValue = this.#value.slice(0, 6).concat(zeroTimeUnit);
-            if (newValue !== this.#value) this.setValue(newValue);
-        }
-    }
-    select(unit, halfUnit = false) {
-        if (this.#input) {
-            const offset = halfUnit ? 1 : 0;
-            if ("hours" === unit) {
-                this.selectionStart = this.#input.selectionStart = 0 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 2;
-            } else if ("minutes" === unit) {
-                this.selectionStart = this.#input.selectionStart = 3 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 5;
-            } else if ("seconds" === unit) {
-                this.selectionStart = this.#input.selectionStart = 6 + offset;
-                this.selectionEnd = this.#input.selectionEnd = 8;
-            }
-            this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);
-            if (halfUnit) {
-                this.#halfUnitSelected = unit;
-                this.#unitSelected = void 0;
-            } else {
-                this.#halfUnitSelected = void 0;
-                this.#unitSelected = unit;
-            }
-        }
-    }
-    removeSelection() {
-        this.#selectionStart = this.selectionEnd = 8;
-        this.#unitSelected = void 0;
-        this.#halfUnitSelected = void 0;
-    }
-    restoreSelection() {
-        if (this.#unitSelected) this.select(this.#unitSelected);
-    }
-    advanceSelection() {
-        if (this.#unitSelected) this.select(this.#unitSelected, true);
-        else if ("hours" === this.#halfUnitSelected) this.select("minutes");
-        else if ("minutes" === this.#halfUnitSelected) this.select("seconds");
-        else if ("seconds" === this.#halfUnitSelected) this.select("seconds");
-        else throw Error("unreachable code, in theory");
-    }
-    moveFocus(direction) {
-        if ("right" === direction) {
-            if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("minutes");
-            else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("seconds");
-            else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("seconds");
-        } else if ("seconds" === this.#unitSelected || "seconds" === this.#halfUnitSelected) this.select("minutes");
-        else if ("minutes" === this.#unitSelected || "minutes" === this.#halfUnitSelected) this.select("hours");
-        else if ("hours" === this.#unitSelected || "hours" === this.#halfUnitSelected) this.select("hours");
-        else {
-            const selection = this.getSelection();
-            if (selection === CursorAtEnd) this.select("seconds");
-        }
-    }
-    pasteValue(value) {
-        this.#halfUnitSelected = void 0;
-        this.#unitSelected = void 0;
-        this.#value = value;
-    }
-    getUnitAtCursorPos(cursorPos = this.cursorPos) {
-        if (cursorPos >= 0 && cursorPos < 3) return "hours";
-        if (cursorPos < 6) return "minutes";
-        if (cursorPos <= 8) return "seconds";
-        throw Error(`[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`);
-    }
-    incrementValue() {
-        if (this.#input) {
-            this.#isIncrementalChange = true;
-            const unit = this.getUnitAtCursorPos();
-            const unitValue = this.getUnitValue(unit);
-            const newUnitValue = incrementTimeUnitValue(unit, unitValue);
-            this.setUnitValue(unit, newUnitValue);
-            this.select(unit);
-        }
-    }
-    decrementValue() {
-        if (this.#input) {
-            this.#isIncrementalChange = true;
-            const unit = this.getUnitAtCursorPos();
-            const unitValue = this.getUnitValue(unit);
-            const newUnitValue = decrementTimeUnitValue(unit, unitValue);
-            this.setUnitValue(unit, newUnitValue);
-            this.select(unit);
-        }
-    }
-    backspace() {
-        if (this.#input) {
-            const { cursorPos } = this;
-            if ("seconds" === this.#unitSelected) {
-                this.clear("seconds");
-                this.select("minutes");
-            } else if ("minutes" === this.#unitSelected) {
-                this.clear("minutes");
-                this.select("hours");
-            } else if ("hours" === this.#unitSelected) {
-                this.clear("hours");
-                this.select("hours");
-            } else if (cursorPos > 0) {
-                const offset = 6 === this.selectionStart || 3 === this.selectionStart ? 2 : 1;
-                const newValue = this.#value.slice(0, cursorPos - offset).concat(zeroTime.slice(cursorPos - offset, cursorPos)).concat(this.#value.slice(cursorPos));
-                this.selectionStart -= offset;
-                this.selectionEnd -= offset;
-                this.setValue(newValue);
-                requestAnimationFrame(()=>{
-                    this.#input?.setSelectionRange(this.#selectionStart, this.selectionEnd);
-                });
-            }
-        }
-    }
-    update(key) {
-        if (this.#input) {
-            const { cursorPos } = this;
-            if (cursorPos < 8) {
-                const originalValue = this.#value;
-                const newValue = this.#value.split("").toSpliced(cursorPos, 1, key).join("");
-                this.setValue(newValue);
-                if (isValidTimeString(newValue)) {
-                    this.#input.classList.remove("invalid");
-                    if (this.#controlled && newValue === originalValue) this.advanceSelection();
-                    else if (!this.#controlled) this.advanceSelection();
-                } else if (this.#unitSelected) {
-                    this.select(this.#unitSelected);
-                    this.#input.classList.add("invalid");
-                }
-            }
-        }
-    }
-    getSelection() {
-        if (this.#input) {
-            const { selectionEnd, selectionStart } = this.#input;
-            if (null === selectionEnd || null === selectionStart) return NullSelection;
-            if (0 === selectionStart && 8 === selectionEnd) return FullSelection;
-            if (8 === selectionStart && 8 === selectionEnd) return CursorAtEnd;
-            else return {
-                end: selectionEnd,
-                start: selectionStart
-            };
-        }
-        throw Error("[MasketInput] selection referenced, but no input");
-    }
-    click() {
-        if (this.#input) {
-            this.#isFocused = true;
-            const selection = this.getSelection();
-            if (selection === NullSelection) this.select("hours");
-            else if (selection === FullSelection) ;
-            else {
-                const cursorPos = this.#input.selectionStart ?? 0;
-                this.select(this.getUnitAtCursorPos(cursorPos));
-            }
-        }
-    }
-    doubleClick() {
-        if (this.#input) {
-            const { selectionStart, selectionEnd } = this.#input;
-            if (null === selectionStart || null === selectionEnd) ;
-            else if (selectionStart < 3) this.select("hours");
-            else if (selectionStart < 6) this.select("minutes");
-            else if (selectionStart <= 8) this.select("seconds");
-        }
-    }
-    focus = ()=>{
-        if (this.#input) {
-            this.#isFocused = true;
-            requestAnimationFrame(()=>{
-                this.select("hours");
-            });
-        }
-    };
-    blur = ()=>{
-        this.removeSelection();
-        this.#isFocused = false;
-    };
-}
-export { MaskedInput };

package/src/time-input/TimeInput.css.js

@@ -1,39 +0,0 @@
-const css = `
-.salt-density-high .vuuTimeInput {
-  --time-input-width: 60px;
-}
-
-.salt-density-medium .vuuTimeInput {
-  --time-input-width: 70px;
-}
-
-.salt-density-low .vuuTimeInput {
-  --time-input-width: 80px;
-}
-
-.salt-density-touch .vuuTimeInput {
-  --time-input-width: 90px;
-}
-
-.vuuTimeInput {
-  background: var(--vuuTimeInput-background, inherit);
-  font-family: var(--salt-typography-fontFamily);
-  width: var(--vuuTimeInput-width, var(--time-input-width));
-  border-width: 1px;
-
-  &:focus::-webkit-input-placeholder {
-    color: #0000;
-  }
-
-  &:focus {
-    outline: var(--vuuTimeInput-outline, var(--salt-focused-outline));
-  }
-}
-
-.invalid {
-  border-color: red;
-}
-
-
-`;
-export default css;

package/src/time-input/TimeInput.js

@@ -1,37 +0,0 @@
-import { createElement, forwardRef } from "react";
-import { useForkRef } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useTimeInput } from "./useTimeInput.js";
-import TimeInput_0 from "./TimeInput.css";
-const classBase = "vuuTimeInput";
-const TimeInput_TimeInput = /*#__PURE__*/ forwardRef(function({ className, date, defaultValue, onChange, onCommit, placeholder = "hh:mm:ss", value, ...htmlAttributes }, ref) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-time-input",
-        css: TimeInput_0,
-        window: targetWindow
-    });
-    const { inputRef, eventHandlers } = useTimeInput({
-        date,
-        defaultValue,
-        onChange,
-        onCommit,
-        value
-    });
-    return /*#__PURE__*/ createElement("input", {
-        ...htmlAttributes,
-        ...eventHandlers,
-        "aria-placeholder": placeholder,
-        className: clsx(classBase, className),
-        defaultValue: defaultValue,
-        key: defaultValue,
-        placeholder: placeholder,
-        readOnly: true,
-        ref: useForkRef(ref, inputRef),
-        spellCheck: "false",
-        value: value
-    });
-});
-export { TimeInput_TimeInput as TimeInput };

package/src/time-input/useTimeInput.js

@@ -1,82 +0,0 @@
-import { isValidTimeString } from "@vuu-ui/vuu-utils";
-import { useCallback, useMemo, useRef } from "react";
-import { MaskedInput } from "./MaskedInput.js";
-const isDigit = (char)=>1 === char.length && /[0-9]/.test(char);
-const useTimeInput = ({ defaultValue, onChange, onCommit, value })=>{
-    const mousedDownRef = useRef(false);
-    const maskedInputRef = useRef(void 0);
-    useMemo(()=>{
-        if (void 0 === maskedInputRef.current) {
-            maskedInputRef.current = new MaskedInput(defaultValue, null);
-            maskedInputRef.current.on("change", (e)=>{
-                onChange?.(e);
-            });
-        }
-        if (value && value !== maskedInputRef.current.value) maskedInputRef.current.value = value;
-    }, [
-        defaultValue,
-        onChange,
-        value
-    ]);
-    const setInputEl = useCallback((el)=>{
-        if (el && maskedInputRef.current) maskedInputRef.current.input = el;
-    }, []);
-    const back = useRef(false);
-    const commitValue = useCallback((evt, value)=>{
-        if (isValidTimeString(value)) onCommit(evt, value, "text-input");
-        else if ("hh:mm:ss" === value) console.log("no value set");
-        else console.log("value is not valid");
-    }, [
-        onCommit
-    ]);
-    const handleKeyDown = useCallback((e)=>{
-        const { current: maskedInput } = maskedInputRef;
-        if (maskedInput) {
-            if ("Backspace" === e.key) {
-                maskedInput.backspace();
-                back.current = true;
-            } else if (isDigit(e.key)) maskedInput.update(e.key);
-            else if ("ArrowLeft" === e.key) maskedInput.moveFocus("left");
-            else if ("ArrowRight" === e.key) maskedInput.moveFocus("right");
-            else if ("ArrowUp" === e.key) maskedInput.incrementValue();
-            else if ("ArrowDown" === e.key) maskedInput.decrementValue();
-            else if ("v" === e.key && e.metaKey) return;
-            else if ("Tab" === e.key) return;
-            else if ("Enter" === e.key) commitValue(e, maskedInput.value);
-        }
-        e.preventDefault();
-    }, [
-        commitValue
-    ]);
-    const handleDoubleClick = useCallback(()=>{
-        maskedInputRef.current?.doubleClick();
-    }, []);
-    const handlePaste = useCallback((e)=>{
-        const value = e.clipboardData.getData("text");
-        if (isValidTimeString(value)) maskedInputRef.current?.pasteValue(value);
-    }, []);
-    const handleFocus = useCallback(()=>{
-        if (mousedDownRef.current) mousedDownRef.current = false;
-        else maskedInputRef.current?.focus();
-    }, []);
-    const handleMouseDown = useCallback(()=>{
-        mousedDownRef.current = true;
-    }, []);
-    const handleMouseUp = useCallback((e)=>{
-        e.preventDefault();
-        maskedInputRef.current?.click();
-    }, []);
-    return {
-        inputRef: setInputEl,
-        eventHandlers: {
-            onBlur: maskedInputRef.current?.blur,
-            onDoubleClick: handleDoubleClick,
-            onFocus: handleFocus,
-            onKeyDown: handleKeyDown,
-            onMouseDown: handleMouseDown,
-            onMouseUp: handleMouseUp,
-            onPaste: handlePaste
-        }
-    };
-};
-export { useTimeInput };

package/src/toolbar/Toolbar.css.js

@@ -1,46 +0,0 @@
-const css = `
-.vuuToolbar {
-  --toolbar-height: var(--vuuToolbar-height, 36px);
-  --toolbar-item-height: var(--vuuToolbarItem-height, 100%);
-  --vuuOverflowContainer-background: var(--vuuToolbar-background);
-  --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);
-  --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);
-  --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);
-  height: var(--toolbar-height);
-}
-
-.vuuToolbar-alignCenter {
-  --vuuOverflowContainer-justifyContent: center;
-}
-
-.vuuToolbar-alignEnd {
-  --vuuOverflowContainer-justifyContent: flex-end;
-}
-
-.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {
-  content: "";
-  left: calc(-1 * var(--overflow-item-gap));
-  width: 1px;
-  height: var(--toolbar-item-height);
-  background-color: var(--salt-separable-primary-borderColor);
-  position: absolute;
-  top: 0;
-}
-
-.vuuToolbarItem.vuuFocusVisible {
-  outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));
-  outline-offset: 0px;
-  outline-width: 1px;
-  outline-style: dashed;
-}
-
-.vuuToolbarItem:focus, .vuuToolbarItem:focus-visible {
-  outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
-  outline-offset: 0px;
-  outline-width: 1px;
-  outline-style: dashed;
-}
-
-
-`;
-export default css;

package/src/toolbar/Toolbar.js

@@ -1,62 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { asReactElements, useId } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import react, { useMemo, useRef } from "react";
-import { OverflowContainer } from "../overflow-container/index.js";
-import { useToolbar } from "./useToolbar.js";
-import { forwardCallbackProps } from "../utils/index.js";
-import Toolbar from "./Toolbar.css";
-const classBase = "vuuToolbar";
-const Toolbar_Toolbar = ({ activeItemIndex: activeItemIndexProp, alignItems = "start", defaultActiveItemIndex, children, className, id: idProp, onActiveChange, onNavigateOutOfBounds, orientation = "horizontal", selectionStrategy = "none", showSeparators = false, ...props })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-toolbar",
-        css: Toolbar,
-        window: targetWindow
-    });
-    const rootRef = useRef(null);
-    const { activeItemIndex, focusableIdx, focusVisible, itemProps, ...toolbarHook } = useToolbar({
-        activeItemIndex: activeItemIndexProp,
-        defaultActiveItemIndex,
-        containerRef: rootRef,
-        onActiveChange,
-        onNavigateOutOfBounds,
-        orientation,
-        selectionStrategy
-    });
-    const id = useId(idProp);
-    const items = useMemo(()=>asReactElements(children).map((child, index)=>{
-            const { id: itemId = `${id}-tab-${index}`, className: itemClassName, ...ownProps } = child.props;
-            const selected = activeItemIndex.includes(index);
-            return /*#__PURE__*/ react.cloneElement(child, {
-                ...forwardCallbackProps(ownProps, itemProps),
-                className: clsx("vuuToolbarItem", itemClassName),
-                "data-overflow-priority": selected ? "1" : void 0,
-                id: itemId,
-                key: index,
-                "aria-selected": selected,
-                tabIndex: focusableIdx === index ? 0 : -1
-            });
-        }), [
-        activeItemIndex,
-        children,
-        focusableIdx,
-        id,
-        itemProps
-    ]);
-    return /*#__PURE__*/ jsx(OverflowContainer, {
-        ...props,
-        ...toolbarHook.containerProps,
-        className: clsx(className, classBase, `${classBase}-${orientation}`, {
-            [`${classBase}-alignCenter`]: "center" === alignItems,
-            [`${classBase}-alignEnd`]: "end" === alignItems,
-            [`${classBase}-withSeparators`]: showSeparators
-        }),
-        ...props,
-        ref: rootRef,
-        children: items
-    });
-};
-export { Toolbar_Toolbar as Toolbar };

package/src/toolbar/index.js

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

package/src/toolbar/toolbar-dom-utils.js

@@ -1,11 +0,0 @@
-import { getElementDataIndex } from "@vuu-ui/vuu-utils";
-const getIndexOfItem = (container, query)=>{
-    if (container) {
-        const targetTab = container.querySelector(`[data-index]:has(${query})`);
-        return getElementDataIndex(targetTab);
-    }
-    return -1;
-};
-const getIndexOfSelectedTab = (container)=>getIndexOfItem(container, '[aria-selected="true"]');
-const getIndexOfEditedItem = (container)=>getIndexOfItem(container, ".vuuEditableLabel-editing");
-export { getIndexOfEditedItem, getIndexOfItem, getIndexOfSelectedTab };