@vuu-ui/vuu-table-extras 2.1.19-beta.2 → 2.1.19-beta.3

package/src/cell-renderers/dropdown-cell/DropdownCell.css.js

@@ -1,36 +0,0 @@
-const css = `
-.vuuTableCell {
-  & .vuuTableDropdownCell {
-    --vuu-icon-height: 15px;
-    --vuu-icon-left: calc(100% - var(--salt-spacing-300));
-    --vuu-icon-size: 8px;
-    --vuu-icon-top: -3px;
-    --salt-focused-outlineStyle: none;
-    --saltButton-borderRadius: 2px;
-    border: solid 1px var(--salt-editable-borderColor);
-    height: var(--vuu-table-embedded-control-height);
-    min-height: var(--vuu-table-embedded-control-height);
-    text-align: left;
-    border-radius: 2px;
-    font-weight: 500;
-    position: relative;
-
-    & button:focus-visible {
-      --saltButton-borderColor: var(--salt-focused-outlineColor);
-      --saltButton-borderWidth: 2px;
-      padding-left: 7px;
-    }
-
-    &.saltDropdown:focus {
-      outline: none;
-    }
-  }
-
-  & .vuuTableDropdownCell:focus {
-    border: solid 2px var(--salt-focused-outlineColor);
-  }
-}
-
-
-`;
-export default css;

package/src/cell-renderers/dropdown-cell/DropdownCell.js

@@ -1,84 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useLookupValues } from "@vuu-ui/vuu-data-react";
-import { dataColumnAndKeyUnchanged, dispatchCustomEvent, getSelectedOption, isRpcSuccess, registerComponent } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { Dropdown, Option } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { memo, useCallback, useMemo, useRef, useState } from "react";
-import DropdownCell_0 from "./DropdownCell.css";
-const classBase = "vuuTableDropdownCell";
-const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow, editedDuringCurrentSession, onEdit }) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-dropdown-cell",
-        css: DropdownCell_0,
-        window: targetWindow
-    });
-    if (editedDuringCurrentSession) console.log(`${column.name} edited ${editedDuringCurrentSession}`);
-    const [open, setOpen] = useState(false);
-    const dataValue = dataRow[column.name];
-    const { values } = useLookupValues(column, dataValue);
-    const valueRef = useRef(void 0);
-    useMemo(()=>{
-        valueRef.current = getSelectedOption(values, dataValue);
-    }, [
-        dataValue,
-        values
-    ]);
-    const handleOpenChange = useCallback((isOpen)=>{
-        console.log(`handleOpenChange ${isOpen}`);
-        if (false === isOpen) setOpen(false);
-    }, []);
-    const handleSelectionChange = useCallback(async (evt, [selectedOption])=>{
-        if (selectedOption) {
-            const response = await onEdit?.({
-                editType: "commit",
-                isValid: true,
-                previousValue: valueRef.current?.value,
-                value: selectedOption.value
-            }, "commit");
-            if (isRpcSuccess(response)) dispatchCustomEvent(evt.target, "vuu-commit");
-        }
-    }, [
-        onEdit
-    ]);
-    const handleClick = useCallback(()=>{
-        if (!open) setOpen(true);
-    }, [
-        open
-    ]);
-    const handleKeyDown = useCallback((e)=>{
-        if ("Enter" === e.key && !open) {
-            e.preventDefault();
-            e.stopPropagation();
-            setOpen(true);
-        }
-    }, [
-        open
-    ]);
-    const { current: selectedOption } = valueRef;
-    return /*#__PURE__*/ jsx(Dropdown, {
-        className: clsx(classBase, {
-            [`${classBase}-edited`]: true === editedDuringCurrentSession
-        }),
-        "data-icon": "triangle-down",
-        onClick: handleClick,
-        onKeyDownCapture: handleKeyDown,
-        onOpenChange: handleOpenChange,
-        onSelectionChange: handleSelectionChange,
-        open: open,
-        selected: selectedOption ? [
-            selectedOption
-        ] : [],
-        value: selectedOption?.label,
-        children: values.map((listOption, i)=>/*#__PURE__*/ jsx(Option, {
-                value: listOption,
-                children: listOption.label
-            }, i))
-    });
-}, (p, p1)=>p.editedDuringCurrentSession !== p1.editedDuringCurrentSession && dataColumnAndKeyUnchanged(p, p1));
-registerComponent("dropdown-cell", DropdownCell_DropdownCell, "cell-renderer", {
-    userCanAssign: false
-});
-export { DropdownCell_DropdownCell as DropdownCell };

package/src/cell-renderers/dropdown-cell/index.js

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

package/src/cell-renderers/index.js

@@ -1,6 +0,0 @@
-export * from "./background-cell/index.js";
-export * from "./dropdown-cell/index.js";
-export * from "./lookup-cell/index.js";
-export * from "./pct-progress-cell/index.js";
-export * from "./progress-cell/index.js";
-export { IconButtonCell } from "./button-cell/IconButtonCell.js";

package/src/cell-renderers/lookup-cell/LookupCell.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useLookupValues } from "@vuu-ui/vuu-data-react";
-import { dataAndColumnUnchanged, registerComponent } from "@vuu-ui/vuu-utils";
-import { memo } from "react";
-const LookupCell_LookupCell = /*#__PURE__*/ memo(function({ column, dataRow }) {
-    const dataValue = dataRow[column.name];
-    const { initialValue: value } = useLookupValues(column, dataValue);
-    return /*#__PURE__*/ jsx("span", {
-        children: value?.label
-    });
-}, dataAndColumnUnchanged);
-registerComponent("lookup-cell", LookupCell_LookupCell, "cell-renderer", {
-    userCanAssign: false
-});
-export { LookupCell_LookupCell as LookupCell };

package/src/cell-renderers/lookup-cell/index.js

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

package/src/cell-renderers/pct-progress-cell/PctProgressCell.css.js

@@ -1,31 +0,0 @@
-const css = `
-.vuuPctProgressCell {
-  --progress-bar-width: 2px;
-  position: relative;
-}
-
-.vuuPctProgressCell-zero, .vuuPctProgressCell-complete {
-  --progress-bar-width: 0px;
-}
-
-.vuuPctProgressCell-progressBar {
-  background-color: var(--vuu-color-green-60-fade-30);
-  border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);
-  height: 20px;
-  width: var(--progress-bar-pct, 0);
-  display: inline-block;
-  position: absolute;
-  left: 0;
-  overflow: hidden;
-}
-
-.vuuPctProgressCell-text {
-  text-align: left;
-  z-index: 1;
-  width: 80%;
-  display: inline-block;
-}
-
-
-`;
-export default css;

package/src/cell-renderers/pct-progress-cell/PctProgressCell.js

@@ -1,49 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import PctProgressCell from "./PctProgressCell.css";
-const classBase = "vuuPctProgressCell";
-const getPercentageValue = (value)=>{
-    if (value >= 0 && value <= 1) return 100 * value;
-    if (value > 2) return 0;
-    if (value > 1) return 100;
-    return 0;
-};
-const PctProgressCell_PctProgressCell = ({ column, dataRow })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-pct-progress-cell",
-        css: PctProgressCell,
-        window: targetWindow
-    });
-    const value = dataRow[column.name];
-    const percentageValue = getPercentageValue(value);
-    const className = clsx(classBase, {});
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx(className, {
-            [`${classBase}-zero`]: 0 === percentageValue,
-            [`${classBase}-complete`]: percentageValue >= 100
-        }),
-        tabIndex: -1,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-progressBar`,
-                style: {
-                    "--progress-bar-pct": `${percentageValue}%`
-                }
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: `${percentageValue.toFixed(2)} %`
-            })
-        ]
-    });
-};
-registerComponent("vuu.pct-progress", PctProgressCell_PctProgressCell, "cell-renderer", {
-    description: "Percentage formatter",
-    label: "Percentage formatter",
-    serverDataType: "double"
-});
-export { PctProgressCell_PctProgressCell as PctProgressCell };

package/src/cell-renderers/pct-progress-cell/index.js

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

package/src/cell-renderers/progress-cell/ProgressCell.css.js

@@ -1,43 +0,0 @@
-const css = `
-.vuuProgressCell {
-  align-items: center;
-  display: flex;
-}
-
-.vuuProgressCell-track {
-  flex: auto;
-  height: 4px;
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-}
-
-.vuuProgressCell-bg {
-  background-color: var(--salt-measured-background);
-  width: 100%;
-  height: 2px;
-  display: inline-block;
-  position: absolute;
-  top: 1px;
-  left: 0;
-}
-
-.vuuProgressCell-bar {
-  background-color: var(--salt-measured-fill);
-  height: 100%;
-  transform: translateX(var(--progress-bar-pct, -100%));
-  width: 100%;
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.vuuProgressCell-text {
-  text-align: right;
-  flex: 0 0 35px;
-}
-
-
-`;
-export default css;

package/src/cell-renderers/progress-cell/ProgressCell.js

@@ -1,74 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isColumnTypeRenderer, isTypeDescriptor, isValidNumber, registerComponent } from "@vuu-ui/vuu-utils";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import ProgressCell from "./ProgressCell.css";
-const classBase = "vuuProgressCell";
-const ProgressCell_ProgressCell = ({ column, dataRow })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-progress-cell",
-        css: ProgressCell,
-        window: targetWindow
-    });
-    const { name, type } = column;
-    const value = dataRow[name];
-    let showProgress = false;
-    let percentage = 0;
-    if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
-        const { associatedField } = type.renderer;
-        if (associatedField) {
-            const associatedValue = dataRow[associatedField];
-            if (isValidNumber(value) && isValidNumber(associatedValue)) {
-                percentage = Math.min(Math.round(value / associatedValue * 100), 100);
-                percentage = Math.min(Math.round(value / associatedValue * 100), 100);
-                showProgress = isFinite(percentage);
-            } else {
-                const floatValue = parseFloat(value);
-                if (Number.isFinite(floatValue)) {
-                    const floatOtherValue = parseFloat(associatedValue);
-                    if (Number.isFinite(floatOtherValue)) {
-                        percentage = Math.min(Math.round(floatValue / floatOtherValue * 100), 100);
-                        showProgress = isFinite(percentage);
-                    }
-                }
-            }
-        } else throw Error("ProgressCell associatedField is required to render");
-    }
-    const className = clsx(classBase, {});
-    return /*#__PURE__*/ jsxs("div", {
-        className: className,
-        tabIndex: -1,
-        children: [
-            showProgress ? /*#__PURE__*/ jsxs("span", {
-                className: `${classBase}-track`,
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: `${classBase}-bg`
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: `${classBase}-bar`,
-                        style: {
-                            "--progress-bar-pct": `-${100 - percentage}%`
-                        }
-                    })
-                ]
-            }) : null,
-            /*#__PURE__*/ jsx("span", {
-                className: `${classBase}-text`,
-                children: `${percentage} %`
-            })
-        ]
-    });
-};
-registerComponent("vuu.progress", ProgressCell_ProgressCell, "cell-renderer", {
-    description: "Progress formatter",
-    label: "Progress formatter",
-    serverDataType: [
-        "long",
-        "int",
-        "double"
-    ],
-    userCanAssign: false
-});

package/src/cell-renderers/progress-cell/index.js

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

package/src/column-expression-input/ColumnExpressionInput.css.js

@@ -1,94 +0,0 @@
-const css = `
-.vuuColumnExpressionInput {
-  --vuuFilterEditor-background: var(--salt-container-primary-background);
-  --vuuFilterEditor-color: var(--salt-content-primary-foreground);
-  --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
-  --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
-  --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
-  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
-  --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
-  --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10);
-  --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
-  --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
-  --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);
-  --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);
-  --vuuFilterEditor-suggestion-height: 24px;
-  --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);
-  box-sizing: border-box;
-  align-items: center;
-  height: 30px;
-}
-
-.vuuColumnExpressionInput-FilterButton, .vuuColumnExpressionInput-ClearButton {
-  --vuu-icon-size: 12px;
-  --saltButton-width: 28px;
-}
-
-.expression-type-container {
-  color: var(--salt-content-secondary-foreground);
-  margin: 0 3px 0 auto;
-}
-
-.expression-kind {
-  width: 50px;
-  display: inline-block;
-}
-
-.expression-type {
-  text-align: right;
-  width: 50px;
-  display: inline-block;
-}
-
-.vuuSuggestion {
-  align-items: center;
-  display: flex;
-}
-
-.vuuFunctionDoc {
-  padding: 13px 7px;
-}
-
-.vuuFunctionDoc .function-heading {
-  gap: 3px;
-  display: flex;
-}
-
-.vuuFunctionDoc .function-name {
-  text-transform: capitalize;
-  font-weight: 700;
-}
-
-.vuuFunctionDoc .param-list {
-  color: var(--vuu-color-gray-50);
-  white-space: pre;
-}
-
-.vuuFunctionDoc .function-type {
-  color: var(--vuu-color-gray-50);
-  text-transform: capitalize;
-  margin-left: auto;
-  font-weight: 700;
-}
-
-.vuuFunctionDoc .example-container {
-  background-color: var(--vuu-color-gray-03);
-  margin: 6px 0;
-  padding: 3px;
-}
-
-.vuuFunctionDoc .example-expression {
-  color: var(--vuu-color-gray-80);
-  font-family: var(--salt-typography-fontFamily-code);
-  padding: 8px;
-  font-weight: 500;
-}
-
-.vuuFunctionDoc .example-result {
-  margin-top: 6px;
-  margin-left: 8px;
-}
-
-
-`;
-export default css;

package/src/column-expression-input/ColumnExpressionInput.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { useColumnExpressionEditor } from "./useColumnExpressionEditor.js";
-import ColumnExpressionInput from "./ColumnExpressionInput.css";
-const classBase = "vuuColumnExpressionInput";
-const ColumnExpressionInput_ColumnExpressionInput = /*#__PURE__*/ memo(({ onChange, onSubmitExpression, source = "", suggestionProvider })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-column-expression-input",
-        css: ColumnExpressionInput,
-        window: targetWindow
-    });
-    const { editorRef, onBlur } = useColumnExpressionEditor({
-        onChange,
-        onSubmitExpression,
-        source,
-        suggestionProvider
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: `${classBase}`,
-        onBlur: onBlur,
-        ref: editorRef
-    });
-}, (prevProps, newProps)=>prevProps.source === newProps.source);
-ColumnExpressionInput_ColumnExpressionInput.displayName = "ColumnExpressionInput";
-export { ColumnExpressionInput_ColumnExpressionInput as ColumnExpressionInput };