@vuu-ui/vuu-table-extras 4.2.6 → 4.2.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.6",
+  "version": "4.2.8",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "4.2.6",
-    "@vuu-ui/vuu-protocol-types": "4.2.6"
+    "@vuu-ui/vuu-filter-types": "4.2.8",
+    "@vuu-ui/vuu-protocol-types": "4.2.8"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "4.2.6",
-    "@vuu-ui/vuu-data-editing": "4.2.6",
-    "@vuu-ui/vuu-data-react": "4.2.6",
-    "@vuu-ui/vuu-data-types": "4.2.6",
-    "@vuu-ui/vuu-table-types": "4.2.6",
-    "@vuu-ui/vuu-popups": "4.2.6",
-    "@vuu-ui/vuu-table": "4.2.6",
-    "@vuu-ui/vuu-utils": "4.2.6",
-    "@vuu-ui/vuu-ui-controls": "4.2.6",
+    "@vuu-ui/vuu-codemirror": "4.2.8",
+    "@vuu-ui/vuu-data-editing": "4.2.8",
+    "@vuu-ui/vuu-data-react": "4.2.8",
+    "@vuu-ui/vuu-data-types": "4.2.8",
+    "@vuu-ui/vuu-table-types": "4.2.8",
+    "@vuu-ui/vuu-popups": "4.2.8",
+    "@vuu-ui/vuu-table": "4.2.8",
+    "@vuu-ui/vuu-utils": "4.2.8",
+    "@vuu-ui/vuu-ui-controls": "4.2.8",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.74.0",
     "@salt-ds/styles": "0.4.2",

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

@@ -20,14 +20,18 @@ const css = `
       --saltButton-borderWidth: 2px;
       padding-left: 7px;
     }
+  }
+}
 
-    &.saltDropdown:focus {
-      outline: none;
-    }
+.vuuTableCell-editable:focus-within, .vuuTableCell:focus {
+  & .vuuTableDropdownCell.saltDropdown {
+    outline: solid var(--salt-editable-borderColor-active) 2px;
+    outline-offset: -1px;
+    border-color: #0000;
   }
 
-  & .vuuTableDropdownCell:focus {
-    border: solid 2px var(--salt-focused-outlineColor);
+  & .vuuTableDropdownCell[aria-expanded="true"] {
+    outline-style: dashed;
   }
 }
 

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

@@ -1,14 +1,15 @@
 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 { dataColumnAndKeyUnchanged, dispatchCustomEvent, getSelectedOption, isCharacterKey, isRpcSuccess, registerComponent } from "@vuu-ui/vuu-utils";
 import { isEditRowReadOnly } from "@vuu-ui/vuu-data-editing";
 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 { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import DropdownCell_0 from "./DropdownCell.css";
 const classBase = "vuuTableDropdownCell";
+const optionToString = ({ label })=>label;
 const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow, editedDuringCurrentSession, onEdit }) {
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -22,6 +23,8 @@ const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow,
     const readOnly = isEditRowReadOnly(dataRow);
     const { values } = useLookupValues(column, dataValue);
     const valueRef = useRef(void 0);
+    const buttonRef = useRef(null);
+    const pendingKeysRef = useRef("");
     useMemo(()=>{
         valueRef.current = getSelectedOption(values, dataValue);
     }, [
@@ -51,14 +54,42 @@ const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow,
         open
     ]);
     const handleKeyDown = useCallback((e)=>{
-        if ("Enter" === e.key && !open) {
+        if ("Enter" !== e.key || open) {
+            if (!open && !readOnly && isCharacterKey(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                pendingKeysRef.current += e.key;
+                setOpen(true);
+            }
+        } else {
             e.preventDefault();
             e.stopPropagation();
             setOpen(true);
         }
+    }, [
+        open,
+        readOnly
+    ]);
+    useEffect(()=>{
+        const { current: button } = buttonRef;
+        const keys = pendingKeysRef.current;
+        if (open && button && keys) {
+            pendingKeysRef.current = "";
+            requestAnimationFrame(()=>{
+                for (const key of keys)button.dispatchEvent(new KeyboardEvent("keydown", {
+                    bubbles: true,
+                    cancelable: true,
+                    key
+                }));
+            });
+        }
     }, [
         open
     ]);
+    const handleFocus = useCallback((e)=>{
+        const source = e.relatedTarget;
+        if (source?.classList.contains("vuuTableCell") && source.contains(e.target)) setOpen(true);
+    }, []);
     const { current: selectedOption } = valueRef;
     return /*#__PURE__*/ jsx(Dropdown, {
         className: clsx(classBase, {
@@ -66,15 +97,18 @@ const DropdownCell_DropdownCell = /*#__PURE__*/ memo(function({ column, dataRow,
         }),
         "data-icon": "triangle-down",
         onClick: handleClick,
+        onFocus: handleFocus,
         onKeyDownCapture: handleKeyDown,
         onOpenChange: handleOpenChange,
         onSelectionChange: handleSelectionChange,
         open: open,
         readOnly: readOnly,
+        ref: buttonRef,
         selected: selectedOption ? [
             selectedOption
         ] : [],
         value: selectedOption?.label,
+        valueToString: optionToString,
         children: values.map((listOption, i)=>/*#__PURE__*/ jsx(Option, {
                 value: listOption,
                 children: listOption.label