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

package/src/editable-label/EditableLabel.js

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

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

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

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

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

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

package/src/highlighter/Highlighter.css.js

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

package/src/highlighter/Highlighter.js

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

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

package/src/hover-overlay/HoverOverlay.js

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

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

package/src/icon-button/Icon.js

@@ -1,26 +0,0 @@
-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 };

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

@@ -1,10 +0,0 @@
-const css = `
-.vuuIconButton.saltButton {
-  --saltButton-padding: 0;
-  --saltButton-minWidth: var(--salt-size-base);
-  width: var(--saltButton-width, calc(var(--salt-size-base) + var(--salt-size-fixed-400)));
-}
-
-
-`;
-export default css;

package/src/icon-button/IconButton.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { Button } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { Icon } from "./Icon.js";
-import { forwardRef } from "react";
-import IconButton_0 from "./IconButton.css";
-const classBase = "vuuIconButton";
-const IconButton_IconButton = /*#__PURE__*/ forwardRef(function({ "aria-label": ariaLabel, className, icon, size, ...buttonProps }, ref) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-icon-button",
-        css: IconButton_0,
-        window: targetWindow
-    });
-    return /*#__PURE__*/ jsx(Button, {
-        ...buttonProps,
-        className: clsx(classBase, className),
-        ref: ref,
-        children: /*#__PURE__*/ jsx(Icon, {
-            "aria-label": ariaLabel,
-            name: icon,
-            size: size
-        })
-    });
-});
-export { IconButton_IconButton as IconButton };

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

@@ -1,47 +0,0 @@
-const css = `
-.vuuToggleIconButton {
-  &.saltButton {
-    &:active {
-      --saltButton-background-active: transparent;
-    }
-
-    &:hover {
-      --saltButton-background-hover: transparent;
-    }
-
-    & .vuuIcon {
-      --vuu-icon-height: 18px;
-      --vuu-icon-left: -3px;
-      --vuu-icon-width: 18px;
-
-      &:after {
-        transition: transform .1s linear;
-      }
-
-      &[data-icon="triangle-down"]:after {
-        --vuu-icon-left: -1px;
-        --vuu-icon-top: -3px;
-      }
-    }
-
-    border: none;
-    border-radius: 0;
-    width: 18px;
-    min-width: 18px;
-    height: 18px;
-    padding: 0;
-    left: 0;
-  }
-}
-
-.vuuTableGroupCell:hover {
-  & .vuuToggleIconButton {
-    & .vuuIcon:after {
-      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);
-    }
-  }
-}
-
-
-`;
-export default css;

package/src/icon-button/ToggleIconButton.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { IconButton } from "./IconButton.js";
-import ToggleIconButton from "./ToggleIconButton.css";
-const classBase = "vuuToggleIconButton";
-const ToggleIconButton_ToggleIconButton = ({ className, isExpanded, size = 7, ...props })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-toggle-icon-button",
-        css: ToggleIconButton,
-        window: targetWindow
-    });
-    const icon = isExpanded ? "triangle-down" : "triangle-right";
-    return /*#__PURE__*/ jsx(IconButton, {
-        ...props,
-        appearance: "transparent",
-        className: clsx(classBase, className),
-        "data-embedded": true,
-        icon: icon,
-        sentiment: "neutral",
-        size: size
-    });
-};
-export { ToggleIconButton_ToggleIconButton as ToggleIconButton };

package/src/icon-button/index.js

@@ -1,3 +0,0 @@
-export * from "./Icon.js";
-export * from "./IconButton.js";
-export * from "./ToggleIconButton.js";

package/src/index.js

@@ -1,31 +0,0 @@
-export * from "./calendar/index.js";
-export * from "./column-picker/index.js";
-export * from "./common-hooks/index.js";
-export * from "./cycle-state-button/index.js";
-export * from "./date-input/index.js";
-export * from "./date-picker/index.js";
-export * from "./drag-drop/index.js";
-export * from "./editable/index.js";
-export * from "./editable-label/index.js";
-export * from "./expando-input/index.js";
-export * from "./icon-button/index.js";
-export * from "./instrument-picker/index.js";
-export * from "./measured-container/index.js";
-export * from "./overflow-container/index.js";
-export * from "./price-ticker/index.js";
-export * from "./split-button/index.js";
-export * from "./table-search/index.js";
-export * from "./tabs-next/index.js";
-export * from "./tabstrip/index.js";
-export * from "./toolbar/index.js";
-export * from "./utils/index.js";
-export * from "./vuu-date-picker/index.js";
-export * from "./vuu-input/index.js";
-export * from "./vuu-typeahead-input/index.js";
-export { ContextPanelProvider, useContextPanel, useHideContextPanel } from "./context-panel-provider/ContextPanelProvider.js";
-export { HoverOverlay } from "./hover-overlay/HoverOverlay.js";
-export { ModalProvider, useModal } from "./modal-provider/ModalProvider.js";
-export { Prompt } from "./prompt/Prompt.js";
-export { SortableList, SortableOption } from "./sortable-list/SortableList.js";
-export { TimeInput } from "./time-input/TimeInput.js";
-export { VuuTimePicker } from "./vuu-time-picker/VuuTimePicker.js";

package/src/instrument-picker/SearchCell.css.js

@@ -1,17 +0,0 @@
-const css = `
-.vuuSearchCell {
-  --vuu-icon-left: 0;
-  --vuu-icon-size: 16px;
-  --vuu-icon-top: 0px;
-  color: var(--background-cell-color);
-  z-index: -1;
-  align-items: center;
-  gap: 4px;
-  padding: 0 8px;
-  display: flex;
-  position: relative;
-}
-
-
-`;
-export default css;

package/src/instrument-picker/SearchCell.js

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import SearchCell from "./SearchCell.css";
-const classBase = "vuuSearchCell";
-const SearchCell_SearchCell = ({ column, dataRow })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-search-cell",
-        css: SearchCell,
-        window: targetWindow
-    });
-    const value = dataRow[column.name];
-    return /*#__PURE__*/ jsxs("div", {
-        className: classBase,
-        tabIndex: -1,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                "data-icon": "draggable"
-            }),
-            value
-        ]
-    });
-};
-registerComponent("search-cell", SearchCell_SearchCell, "cell-renderer", {
-    serverDataType: "private"
-});
-export { SearchCell_SearchCell as SearchCell };

package/src/instrument-picker/TablePicker.css.js

@@ -1,23 +0,0 @@
-const css = `
-.vuuTablePicker {
-  height: var(--salt-size-base);
-  box-sizing: content-box;
-  border-radius: 6px;
-  padding: 1px;
-}
-
-.vuuTablePicker-floating-table {
-  border: solid 1px var(--salt-container-secondary-borderColor);
-  padding: var(--salt-spacing-100) 0;
-  z-index: var(--salt-zIndex-popout);
-  border-radius: 4px;
-  overflow: auto;
-}
-
-[data-floating-ui-portal] [data-floating-ui-portal] .vuuTablePicker-floating-table {
-  z-index: calc(var(--salt-zIndex-modal) + var(--salt-zIndex-popout));
-}
-
-
-`;
-export default css;