@vuu-ui/vuu-ui-controls 0.13.112 → 0.13.113-alpha.2

package/cjs/editable/useEditableText.js

@@ -15,85 +15,123 @@ const useEditableText = ({
   });
   const initialValueRef = React.useRef(value?.toString() ?? "");
   const isDirtyRef = React.useRef(false);
+  const isEditingRef = React.useRef(false);
   React.useMemo(() => {
     if (initialValueRef.current !== value?.toString()) {
       initialValueRef.current = stringValueOf(value);
       setEditState({ message: "", value: stringValueOf(value) });
     }
   }, [value]);
-  const commit = React.useCallback(
-    async (target) => {
-      const { value: value2 } = editState;
-      if (isDirtyRef.current) {
-        const result = clientSideEditValidationCheck?.(value2, "*");
-        if (result?.ok === false) {
-          setEditState((state) => ({
-            ...state,
-            message: result?.messages?.join(",")
-          }));
+  const commit = React.useCallback(async () => {
+    const { value: value2 } = editState;
+    const result = clientSideEditValidationCheck?.(value2, "*");
+    if (result?.ok === false) {
+      setEditState((state) => ({
+        ...state,
+        message: result?.messages?.join(",")
+      }));
+      return false;
+    } else {
+      setEditState((state) => ({ ...state, message: void 0 }));
+      const typedValue = vuuUtils.getTypedValue(value2, type, true);
+      const response = await onEdit?.(
+        { editType: "commit", value: typedValue, isValid: true },
+        "commit"
+      );
+      if (vuuUtils.isRpcSuccess(response)) {
+        isDirtyRef.current = false;
+        initialValueRef.current = value2;
+        return true;
+      } else if (vuuUtils.isRpcError(response)) {
+        setEditState((state) => ({
+          ...state,
+          message: response.errorMessage
+        }));
+      }
+    }
+    return false;
+  }, [clientSideEditValidationCheck, editState, onEdit, type]);
+  const handleKeyDown = React.useCallback(
+    async (evt) => {
+      const { key, target } = evt;
+      const input = target;
+      if (key === "Enter") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+              isEditingRef.current = false;
+              vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
+              vuuUtils.dispatchCustomEvent(input, "vuu-commit");
+            }
+          } else {
+            isEditingRef.current = false;
+            vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
+          }
         } else {
-          setEditState((state) => ({ ...state, message: void 0 }));
-          const typedValue = vuuUtils.getTypedValue(value2, type, true);
-          const response = await onEdit?.(
-            { editType: "commit", value: typedValue, isValid: true },
-            "commit"
-          );
-          if (response === true) {
+          isEditingRef.current = true;
+          vuuUtils.dispatchCustomEvent(input, "vuu-enter-edit-mode");
+          input.select();
+        }
+      } else if (key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown") {
+        if (isEditingRef.current) {
+          evt.stopPropagation();
+        }
+      } else if (evt.key === "Escape") {
+        if (isEditingRef.current) {
+          if (isDirtyRef.current) {
+            const { value: previousValue } = editState;
             isDirtyRef.current = false;
-            initialValueRef.current = value2;
-            vuuUtils.dispatchCustomEvent(target, "vuu-commit");
-          } else if (typeof response === "string") {
-            setEditState((state) => ({ ...state, message: response }));
+            setEditState({
+              value: initialValueRef.current,
+              message: void 0
+            });
+            onEdit?.(
+              {
+                editType: "cancel",
+                isValid: true,
+                previousValue,
+                value: initialValueRef.current
+              },
+              "cancel"
+            );
           }
+          isEditingRef.current = false;
+          vuuUtils.dispatchCustomEvent(input, "vuu-exit-edit-mode");
         }
-      } else {
-        vuuUtils.dispatchCustomEvent(target, "vuu-commit");
       }
     },
-    [clientSideEditValidationCheck, editState, onEdit, type]
+    [commit, editState, onEdit]
   );
-  const handleKeyDown = React.useCallback(
-    (evt) => {
-      if (evt.key === "Enter") {
-        commit(evt.target);
-      } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft" || evt.key === "ArrowUp" || evt.key === "ArrowDown") {
-        evt.stopPropagation();
-      } else if (evt.key === "Escape") {
-        if (isDirtyRef.current) {
-          const { value: previousValue } = editState;
-          isDirtyRef.current = false;
-          setEditState({ value: initialValueRef.current, message: void 0 });
-          onEdit?.(
-            {
-              editType: "cancel",
-              isValid: true,
-              previousValue,
-              value: initialValueRef.current
-            },
-            "cancel"
-          );
-        }
-      }
+  const beginEditHandler = React.useCallback((evt) => {
+    isEditingRef.current = true;
+    vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
+  }, []);
+  const handleFocus = React.useCallback(
+    (e) => {
+      console.log(`[useEditableText] handleFocus`);
+      e.target.addEventListener("vuu-begin-edit", beginEditHandler, true);
     },
-    [commit, editState, onEdit]
+    [beginEditHandler]
   );
   const handleBlur = React.useCallback(
-    (evt) => {
-      if (isDirtyRef.current) {
-        commit(evt.target);
+    async (evt) => {
+      evt.target.removeEventListener("vuu-begin-edit", beginEditHandler, true);
+      if (isEditingRef.current) {
+        if (isDirtyRef.current) {
+          const commitSuccessful = await commit();
+          console.log({ commitSuccessful });
+        }
+        isEditingRef.current = false;
+        vuuUtils.dispatchCustomEvent(evt.target, "vuu-exit-edit-mode");
       }
     },
-    [commit]
+    [beginEditHandler, commit]
   );
   const handleChange = React.useCallback(
     (evt) => {
       const { value: value2 } = evt.target;
       const typedValue = vuuUtils.getTypedValue(value2, type, true);
-      console.log(
-        `[useEditableText] handleChange '${value2}' typedValue ${typedValue}
-          initial value ${initialValueRef.current}
-        `
-      );
       isDirtyRef.current = value2 !== initialValueRef.current;
       const result = clientSideEditValidationCheck?.(value2, "change");
       setEditState({ value: value2 });
@@ -108,6 +146,10 @@ const useEditableText = ({
       if (result?.ok === false) {
         setEditState({ value: value2, message: result.messages?.join(",") });
       }
+      if (!isEditingRef.current) {
+        isEditingRef.current = true;
+        vuuUtils.dispatchCustomEvent(evt.target, "vuu-enter-edit-mode");
+      }
     },
     [clientSideEditValidationCheck, onEdit, type]
   );
@@ -115,6 +157,7 @@ const useEditableText = ({
     //TODO why are we detecting commit here, why not use VuuInput ?
     inputProps: {
       onBlur: handleBlur,
+      onFocus: handleFocus,
       onKeyDown: handleKeyDown
     },
     onChange: handleChange,

package/cjs/editable/useEditableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  clientSideEditValidationCheck?: DataValueValidationChecker;\n  value?: T;\n  onEdit?: DataItemEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  message?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n  clientSideEditValidationCheck,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: \"\", value: stringValueOf(value) });\n    }\n  }, [value]);\n\n  const commit = useCallback(\n    async (target: HTMLElement) => {\n      const { value } = editState;\n      if (isDirtyRef.current) {\n        const result = clientSideEditValidationCheck?.(value, \"*\");\n        if (result?.ok === false) {\n          setEditState((state) => ({\n            ...state,\n            message: result?.messages?.join(\",\"),\n          }));\n        } else {\n          setEditState((state) => ({ ...state, message: undefined }));\n          const typedValue = getTypedValue(value, type, true);\n          const response = await onEdit?.(\n            { editType: \"commit\", value: typedValue, isValid: true },\n            \"commit\",\n          );\n          if (response === true) {\n            isDirtyRef.current = false;\n            initialValueRef.current = value;\n            dispatchCustomEvent(target, \"vuu-commit\");\n          } else if (typeof response === \"string\") {\n            setEditState((state) => ({ ...state, message: response }));\n          }\n        }\n      } else {\n        // why, if not dirty ?\n        dispatchCustomEvent(target, \"vuu-commit\");\n      }\n    },\n    [clientSideEditValidationCheck, editState, onEdit, type],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (evt.key === \"Enter\") {\n        commit(evt.target as HTMLElement);\n      } else if (\n        evt.key === \"ArrowRight\" ||\n        evt.key === \"ArrowLeft\" ||\n        evt.key === \"ArrowUp\" ||\n        evt.key === \"ArrowDown\"\n      ) {\n        evt.stopPropagation();\n      } else if (evt.key === \"Escape\") {\n        if (isDirtyRef.current) {\n          const { value: previousValue } = editState;\n          isDirtyRef.current = false;\n          setEditState({ value: initialValueRef.current, message: undefined });\n          // this assumes the original value was valid, is that safe ?\n          onEdit?.(\n            {\n              editType: \"cancel\",\n              isValid: true,\n              previousValue,\n              value: initialValueRef.current,\n            },\n            \"cancel\",\n          );\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (evt) => {\n      if (isDirtyRef.current) {\n        commit(evt.target as HTMLElement);\n      }\n    },\n    [commit],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const typedValue = getTypedValue(value, type, true);\n      console.log(\n        `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n          initial value ${initialValueRef.current}\n        `,\n      );\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = clientSideEditValidationCheck?.(value, \"change\");\n      setEditState({ value });\n\n      onEdit?.(\n        {\n          editType: \"change\",\n          isValid: result?.ok !== false,\n          value: typedValue,\n        },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        setEditState({ value, message: result.messages?.join(\",\") });\n      }\n    },\n    [clientSideEditValidationCheck, onEdit, type],\n  );\n\n  return {\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","getTypedValue","dispatchCustomEvent"],"mappings":"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"}
+{"version":3,"file":"useEditableText.js","sources":["../../../../packages/vuu-ui-controls/src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { TableCellEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dispatchCustomEvent,\n  getTypedValue,\n  isRpcError,\n  isRpcSuccess,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  clientSideEditValidationCheck?: DataValueValidationChecker;\n  value?: T;\n  onEdit?: TableCellEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  message?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n  clientSideEditValidationCheck,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n  const isEditingRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: \"\", value: stringValueOf(value) });\n    }\n  }, [value]);\n\n  const commit = useCallback(async () => {\n    const { value } = editState;\n    const result = clientSideEditValidationCheck?.(value, \"*\");\n    if (result?.ok === false) {\n      setEditState((state) => ({\n        ...state,\n        message: result?.messages?.join(\",\"),\n      }));\n      return false;\n    } else {\n      setEditState((state) => ({ ...state, message: undefined }));\n      const typedValue = getTypedValue(value, type, true);\n      const response = await onEdit?.(\n        { editType: \"commit\", value: typedValue, isValid: true },\n        \"commit\",\n      );\n      if (isRpcSuccess(response)) {\n        isDirtyRef.current = false;\n        initialValueRef.current = value;\n        return true;\n      } else if (isRpcError(response)) {\n        setEditState((state) => ({\n          ...state,\n          message: response.errorMessage,\n        }));\n      }\n    }\n    return false;\n  }, [clientSideEditValidationCheck, editState, onEdit, type]);\n\n  const handleKeyDown = useCallback(\n    async (evt: KeyboardEvent<HTMLElement>) => {\n      const { key, target } = evt;\n      // console.log(`[useEditableText] handleKeyDown`);\n      const input = target as HTMLInputElement;\n      if (key === \"Enter\") {\n        // console.log(\n        //   `[useEditableText] ENTER isEditing ? ${isEditingRef.current}, isDirty ${isDirtyRef.current}`,\n        // );\n        if (isEditingRef.current) {\n          if (isDirtyRef.current) {\n            // console.log(\"    ...await commit\");\n            const commitSuccessful = await commit();\n            if (commitSuccessful) {\n              isEditingRef.current = false;\n              dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n              dispatchCustomEvent(input, \"vuu-commit\");\n            }\n          } else {\n            isEditingRef.current = false;\n            dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n          }\n        } else {\n          isEditingRef.current = true;\n          dispatchCustomEvent(input, \"vuu-enter-edit-mode\");\n          input.select();\n        }\n      } else if (\n        key === \"ArrowRight\" ||\n        key === \"ArrowLeft\" ||\n        key === \"ArrowUp\" ||\n        key === \"ArrowDown\"\n      ) {\n        if (isEditingRef.current) {\n          // console.log(\n          //   `[useEditableText] handleKeydown, arrowkey whilst editing, stop propagation`,\n          // );\n          evt.stopPropagation();\n        } else {\n          // console.log(\n          //   `[useEditableText] handleKeydown, arrowkey, not editing so let it bubble`,\n          // );\n          // evt.preventDefault();\n        }\n      } else if (evt.key === \"Escape\") {\n        if (isEditingRef.current) {\n          // console.log(\n          //   `[useEditableText] ESC whilst editing, dirty ? ${isDirtyRef.current}`,\n          // );\n          if (isDirtyRef.current) {\n            const { value: previousValue } = editState;\n            isDirtyRef.current = false;\n            setEditState({\n              value: initialValueRef.current,\n              message: undefined,\n            });\n            // this assumes the original value was valid, is that safe ?\n            onEdit?.(\n              {\n                editType: \"cancel\",\n                isValid: true,\n                previousValue,\n                value: initialValueRef.current,\n              },\n              \"cancel\",\n            );\n          }\n          isEditingRef.current = false;\n          dispatchCustomEvent(input, \"vuu-exit-edit-mode\");\n        }\n      } /* else if (isEditingRef.current === false && isCharacterKey(key)) {\n        isEditingRef.current = true;\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n      }*/\n    },\n    [commit, editState, onEdit],\n  );\n\n  const beginEditHandler = useCallback((evt: Event) => {\n    // console.log(\"begin edit handler\");\n    isEditingRef.current = true;\n    dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n  }, []);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (e) => {\n      console.log(`[useEditableText] handleFocus`);\n      e.target.addEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n    },\n    [beginEditHandler],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    async (evt) => {\n      evt.target.removeEventListener(\"vuu-begin-edit\", beginEditHandler, true);\n      if (isEditingRef.current) {\n        if (isDirtyRef.current) {\n          const commitSuccessful = await commit();\n          console.log({ commitSuccessful });\n        }\n        isEditingRef.current = false;\n        dispatchCustomEvent(evt.target, \"vuu-exit-edit-mode\");\n      }\n    },\n    [beginEditHandler, commit],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const typedValue = getTypedValue(value, type, true);\n      // console.log(\n      //   `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n      //     initial value ${initialValueRef.current}\n      //   `,\n      // );\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = clientSideEditValidationCheck?.(value, \"change\");\n      setEditState({ value });\n\n      onEdit?.(\n        {\n          editType: \"change\",\n          isValid: result?.ok !== false,\n          value: typedValue,\n        },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        setEditState({ value, message: result.messages?.join(\",\") });\n      }\n\n      if (!isEditingRef.current) {\n        isEditingRef.current = true;\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-enter-edit-mode\");\n      }\n    },\n    [clientSideEditValidationCheck, onEdit, type],\n  );\n\n  return {\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","getTypedValue","isRpcSuccess","isRpcError","dispatchCustomEvent"],"mappings":";;;;;AAiCA,MAAM,aAAgB,GAAA,CAAC,KAA+B,KAAA,KAAA,EAAO,UAAc,IAAA,EAAA;AAEpE,MAAM,kBAAkB,CAA+C;AAAA,EAC5E,6BAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA;AACT,CAAgC,KAAA;AAC9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,cAAoB,CAAA;AAAA,IACpD,KAAA,EAAO,cAAc,KAAK;AAAA,GAC3B,CAAA;AACD,EAAA,MAAM,eAAkB,GAAAC,YAAA,CAAe,KAAO,EAAA,QAAA,MAAc,EAAE,CAAA;AAC9D,EAAM,MAAA,UAAA,GAAaA,aAAO,KAAK,CAAA;AAC/B,EAAM,MAAA,YAAA,GAAeA,aAAO,KAAK,CAAA;AAEjC,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAgB,CAAA,OAAA,KAAY,KAAO,EAAA,QAAA,EAAY,EAAA;AACjD,MAAgB,eAAA,CAAA,OAAA,GAAU,cAAc,KAAK,CAAA;AAC7C,MAAA,YAAA,CAAa,EAAE,OAAS,EAAA,EAAA,EAAI,OAAO,aAAc,CAAA,KAAK,GAAG,CAAA;AAAA;AAC3D,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAM,MAAA,MAAA,GAASC,kBAAY,YAAY;AACrC,IAAM,MAAA,EAAE,KAAAC,EAAAA,MAAAA,EAAU,GAAA,SAAA;AAClB,IAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,GAAG,CAAA;AACzD,IAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,MAAA,YAAA,CAAa,CAAC,KAAW,MAAA;AAAA,QACvB,GAAG,KAAA;AAAA,QACH,OAAS,EAAA,MAAA,EAAQ,QAAU,EAAA,IAAA,CAAK,GAAG;AAAA,OACnC,CAAA,CAAA;AACF,MAAO,OAAA,KAAA;AAAA,KACF,MAAA;AACL,MAAA,YAAA,CAAa,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,OAAA,EAAS,QAAY,CAAA,CAAA;AAC1D,MAAA,MAAM,UAAa,GAAAC,sBAAA,CAAcD,MAAO,EAAA,IAAA,EAAM,IAAI,CAAA;AAClD,MAAA,MAAM,WAAW,MAAM,MAAA;AAAA,QACrB,EAAE,QAAU,EAAA,QAAA,EAAU,KAAO,EAAA,UAAA,EAAY,SAAS,IAAK,EAAA;AAAA,QACvD;AAAA,OACF;AACA,MAAI,IAAAE,qBAAA,CAAa,QAAQ,CAAG,EAAA;AAC1B,QAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,QAAA,eAAA,CAAgB,OAAUF,GAAAA,MAAAA;AAC1B,QAAO,OAAA,IAAA;AAAA,OACT,MAAA,IAAWG,mBAAW,CAAA,QAAQ,CAAG,EAAA;AAC/B,QAAA,YAAA,CAAa,CAAC,KAAW,MAAA;AAAA,UACvB,GAAG,KAAA;AAAA,UACH,SAAS,QAAS,CAAA;AAAA,SAClB,CAAA,CAAA;AAAA;AACJ;AAEF,IAAO,OAAA,KAAA;AAAA,KACN,CAAC,6BAAA,EAA+B,SAAW,EAAA,MAAA,EAAQ,IAAI,CAAC,CAAA;AAE3D,EAAA,MAAM,aAAgB,GAAAJ,iBAAA;AAAA,IACpB,OAAO,GAAoC,KAAA;AACzC,MAAM,MAAA,EAAE,GAAK,EAAA,MAAA,EAAW,GAAA,GAAA;AAExB,MAAA,MAAM,KAAQ,GAAA,MAAA;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AAInB,QAAA,IAAI,aAAa,OAAS,EAAA;AACxB,UAAA,IAAI,WAAW,OAAS,EAAA;AAEtB,YAAM,MAAA,gBAAA,GAAmB,MAAM,MAAO,EAAA;AACtC,YAAA,IAAI,gBAAkB,EAAA;AACpB,cAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AACvB,cAAAK,4BAAA,CAAoB,OAAO,oBAAoB,CAAA;AAC/C,cAAAA,4BAAA,CAAoB,OAAO,YAAY,CAAA;AAAA;AACzC,WACK,MAAA;AACL,YAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AACvB,YAAAA,4BAAA,CAAoB,OAAO,oBAAoB,CAAA;AAAA;AACjD,SACK,MAAA;AACL,UAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AACvB,UAAAA,4BAAA,CAAoB,OAAO,qBAAqB,CAAA;AAChD,UAAA,KAAA,CAAM,MAAO,EAAA;AAAA;AACf,OACF,MAAA,IACE,QAAQ,YACR,IAAA,GAAA,KAAQ,eACR,GAAQ,KAAA,SAAA,IACR,QAAQ,WACR,EAAA;AACA,QAAA,IAAI,aAAa,OAAS,EAAA;AAIxB,UAAA,GAAA,CAAI,eAAgB,EAAA;AAAA;AAMtB,OACF,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,QAAA,IAAI,aAAa,OAAS,EAAA;AAIxB,UAAA,IAAI,WAAW,OAAS,EAAA;AACtB,YAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,SAAA;AACjC,YAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,YAAa,YAAA,CAAA;AAAA,cACX,OAAO,eAAgB,CAAA,OAAA;AAAA,cACvB,OAAS,EAAA,KAAA;AAAA,aACV,CAAA;AAED,YAAA,MAAA;AAAA,cACE;AAAA,gBACE,QAAU,EAAA,QAAA;AAAA,gBACV,OAAS,EAAA,IAAA;AAAA,gBACT,aAAA;AAAA,gBACA,OAAO,eAAgB,CAAA;AAAA,eACzB;AAAA,cACA;AAAA,aACF;AAAA;AAEF,UAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AACvB,UAAAA,4BAAA,CAAoB,OAAO,oBAAoB,CAAA;AAAA;AACjD;AACF,KAIF;AAAA,IACA,CAAC,MAAQ,EAAA,SAAA,EAAW,MAAM;AAAA,GAC5B;AAEA,EAAM,MAAA,gBAAA,GAAmBL,iBAAY,CAAA,CAAC,GAAe,KAAA;AAEnD,IAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AACvB,IAAoBK,4BAAA,CAAA,GAAA,CAAI,QAAuB,qBAAqB,CAAA;AAAA,GACtE,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,WAAc,GAAAL,iBAAA;AAAA,IAClB,CAAC,CAAM,KAAA;AACL,MAAA,OAAA,CAAQ,IAAI,CAA+B,6BAAA,CAAA,CAAA;AAC3C,MAAA,CAAA,CAAE,MAAO,CAAA,gBAAA,CAAiB,gBAAkB,EAAA,gBAAA,EAAkB,IAAI,CAAA;AAAA,KACpE;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,OAAO,GAAQ,KAAA;AACb,MAAA,GAAA,CAAI,MAAO,CAAA,mBAAA,CAAoB,gBAAkB,EAAA,gBAAA,EAAkB,IAAI,CAAA;AACvE,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAM,MAAA,gBAAA,GAAmB,MAAM,MAAO,EAAA;AACtC,UAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,gBAAA,EAAkB,CAAA;AAAA;AAElC,QAAA,YAAA,CAAa,OAAU,GAAA,KAAA;AACvB,QAAoBK,4BAAA,CAAA,GAAA,CAAI,QAAQ,oBAAoB,CAAA;AAAA;AACtD,KACF;AAAA,IACA,CAAC,kBAAkB,MAAM;AAAA,GAC3B;AAEA,EAAA,MAAM,YAAe,GAAAL,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,MAAM,UAAa,GAAAC,sBAAA,CAAcD,MAAO,EAAA,IAAA,EAAM,IAAI,CAAA;AAMlD,MAAW,UAAA,CAAA,OAAA,GAAUA,WAAU,eAAgB,CAAA,OAAA;AAC/C,MAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,QAAQ,CAAA;AAC9D,MAAa,YAAA,CAAA,EAAE,KAAAA,EAAAA,MAAAA,EAAO,CAAA;AAEtB,MAAA,MAAA;AAAA,QACE;AAAA,UACE,QAAU,EAAA,QAAA;AAAA,UACV,OAAA,EAAS,QAAQ,EAAO,KAAA,KAAA;AAAA,UACxB,KAAO,EAAA;AAAA,SACT;AAAA,QACA;AAAA,OACF;AACA,MAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,QAAa,YAAA,CAAA,EAAE,OAAAA,MAAO,EAAA,OAAA,EAAS,OAAO,QAAU,EAAA,IAAA,CAAK,GAAG,CAAA,EAAG,CAAA;AAAA;AAG7D,MAAI,IAAA,CAAC,aAAa,OAAS,EAAA;AACzB,QAAA,YAAA,CAAa,OAAU,GAAA,IAAA;AACvB,QAAoBI,4BAAA,CAAA,GAAA,CAAI,QAAuB,qBAAqB,CAAA;AAAA;AACtE,KACF;AAAA,IACA,CAAC,6BAA+B,EAAA,MAAA,EAAQ,IAAI;AAAA,GAC9C;AAEA,EAAO,OAAA;AAAA;AAAA,IAEL,UAAY,EAAA;AAAA,MACV,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA;AAAA,KACb;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAO,SAAU,CAAA,KAAA;AAAA,IACjB,gBAAgB,SAAU,CAAA;AAAA,GAC5B;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var iconButtonCss = ".vuuIconButton {\n  --saltButton-padding: 0;\n  --saltButton-minWidth: var(--salt-size-base);\n}\n";
+var iconButtonCss = ".vuuIconButton.saltButton {\n  --saltButton-padding: 0;\n  --saltButton-minWidth: var(--salt-size-base);\n  width: calc(var(--salt-size-base) + var(--salt-size-fixed-400));\n}\n";
 
 module.exports = iconButtonCss;
 //# sourceMappingURL=IconButton.css.js.map

package/cjs/instrument-picker/TablePicker.js

@@ -75,17 +75,26 @@ const TablePicker = ({
       IconButton.IconButton,
       {
         ...getReferenceProps(),
+        appearance: "transparent",
         "data-embedded": true,
         ref: reference,
         icon: "chevron-down",
         onKeyDown,
-        variant: "secondary"
+        sentiment: "neutral"
       }
     ),
     [getReferenceProps, onKeyDown, reference]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(core.Input, { ...inputProps, endAdornment, value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Input,
+      {
+        ...inputProps,
+        bordered: true,
+        endAdornment,
+        value
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       FloatingTable,
       {

package/cjs/instrument-picker/TablePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (row: DataSourceRowObject) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        variant=\"secondary\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input {...inputProps} endAdornment={endAdornment} value={value} />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["forwardRef","FloatingTable","useFloatingComponent","jsx","useWindow","useComponentCssInjection","tablePickerCss","useIdMemo","useTablePicker","useMemo","IconButton","Input","Table"],"mappings":"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"}
+{"version":3,"file":"TablePicker.js","sources":["../../../../packages/vuu-ui-controls/src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (row: DataSourceRowObject) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        appearance=\"transparent\"\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        sentiment=\"neutral\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input\n        {...inputProps}\n        bordered\n        endAdornment={endAdornment}\n        value={value}\n      />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["forwardRef","FloatingTable","useFloatingComponent","jsx","useWindow","useComponentCssInjection","tablePickerCss","useIdMemo","useTablePicker","useMemo","IconButton","Input","Table"],"mappings":"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"}

package/cjs/prompt/Prompt.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n        .vuuIcon {\n            width: 24px;\n            --vuu-icon-size: 20px;\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n    }\n\n    .vuuPromptConfirmButton:focus {\n        outline-style: var(--salt-focused-outlineStyle);\n        outline-width: var(--salt-focused-outlineWidth);\n        outline-color: var(--salt-focused-outlineColor);\n        outline-offset: var(--salt-focused-outlineOffset);\n    }\n}\n\n.vuuPrompt.saltDialog-warning {\n    --salt-status-warning-borderColor: var(--vuu-color-yellow-20);   \n    --variant-color: var(--vuu-color-yellow-20);\n\n    border-radius: 4px !important;\n    min-height: var(--vuuPrompt-minHeight, 150px);\n    min-width: var(--vuuPrompt-minWidth, 280px);\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        background-color: var(--variant-color);\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n        .saltDialogHeader-header {\n            align-items: end;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
+var promptCss = ".vuuPrompt {\n    min-height: var(--vuuPrompt-minHeight, 257px);\n    min-width: var(--vuuPrompt-minWidth,380px);\n\n    .saltDialogHeader {\n        .vuuIcon {\n            width: 24px;\n            --vuu-icon-size: 20px;\n        }\n    }\n\n    .saltDialogActions {\n        align-items: center;\n    }\n\n}\n\n.vuuPrompt.saltDialog-warning {\n    --salt-status-warning-borderColor: var(--vuu-color-yellow-20);   \n    --variant-color: var(--vuu-color-yellow-20);\n\n    border-radius: 4px !important;\n    min-height: var(--vuuPrompt-minHeight, 150px);\n    min-width: var(--vuuPrompt-minWidth, 280px);\n    padding-top:0 !important;\n\n    .saltDialogHeader {\n        background-color: var(--variant-color);\n        padding-left: var(--salt-spacing-100);\n        padding-bottom: var(--salt-spacing-100);\n        padding-right: var(--salt-spacing-100);\n\n        .saltDialogHeader-header {\n            align-items: end;\n            display: flex;\n            gap: var(--salt-spacing-100);\n        }\n    }\n\n    .saltDialogContent {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n    } \n}\n\n";
 
 module.exports = promptCss;
 //# sourceMappingURL=Prompt.css.js.map

package/cjs/prompt/Prompt.js

@@ -111,16 +111,19 @@ const Prompt = ({
           showCancelButton ? /* @__PURE__ */ jsxRuntime.jsx(
             core.Button,
             {
+              appearance: "solid",
               className: "vuuPromptCancelButton",
               disabled: cancelButtonProps?.disabled,
               onClick: handleCancel,
               ref: cancelButtonProps?.ref,
+              sentiment: "neutral",
               children: cancelButtonProps?.label ?? cancelButtonLabel
             }
           ) : null,
           showConfirmButton ? /* @__PURE__ */ jsxRuntime.jsx(
             core.Button,
             {
+              appearance: "solid",
               className: "vuuPromptConfirmButton",
               disabled: confirmButtonProps?.disabled,
               sentiment: "accented",

package/cjs/prompt/Prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.js","sources":["../../../../packages/vuu-ui-controls/src/prompt/Prompt.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogHeaderProps,\n  DialogProps,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  ReactNode,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport { Icon, IconButton } from \"../icon-button\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport promptCss from \"./Prompt.css\";\n\nconst classBase = \"vuuPrompt\";\n\n/**\n * Allow fine grained configuration of Prompt buttons\n * The ref is provided to facilitate programmatic focus.\n */\nexport interface PromptButtonProps {\n  disabled?: boolean;\n  label?: string;\n  ref?: RefObject<HTMLButtonElement | null>;\n}\n\nexport interface PromptProps\n  extends Pick<DialogProps, \"onOpenChange\" | \"open\" | \"status\">,\n    Pick<DialogHeaderProps, \"disableAccent\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /**\n   * For simple configuration, where just a cancel button label is required.\n   */\n  cancelButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of cancel button\n   */\n  cancelButtonProps?: PromptButtonProps;\n  /**\n   * For simple configuration, where just a confirm button label is required.\n   */\n  confirmButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of confirm button\n   */\n  confirmButtonProps?: PromptButtonProps;\n\n  /**\n   * A custom action will be displayed in Prompt button bar, before cancel/confirm buttons.\n   */\n  customAction?: ReactNode;\n  icon?: string;\n  /**\n   * Set this prop if one of the three built-in buttons should receive initial focus.\n   * Allows user to quickly dismiss/confirm prompt from keyboard. If the prompt content\n   * contains focusable item(s), focus should be controlled by caller.\n   */\n  initialFocusedItem?: \"confirm\" | \"cancel\" | \"close\";\n  onCancel?: () => void;\n  onConfirm?: () => void | false;\n  onClose?: () => void;\n  showCancelButton?: boolean;\n  showCloseButton?: boolean;\n  showConfirmButton?: boolean;\n  title: string;\n}\n\nexport const Prompt = ({\n  children,\n  className,\n  cancelButtonLabel = \"Cancel\",\n  cancelButtonProps,\n  confirmButtonLabel = \"Confirm\",\n  confirmButtonProps,\n  customAction = null,\n  disableAccent,\n  icon,\n  initialFocusedItem,\n  onCancel,\n  onClose,\n  onConfirm,\n  onOpenChange,\n  open,\n  showCancelButton = true,\n  showCloseButton = true,\n  showConfirmButton = true,\n  status,\n  title,\n\n  ...htmlAttributes\n}: PromptProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-prompt-next\",\n    css: promptCss,\n    window: targetWindow,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n    onOpenChange?.(false);\n  }, [onClose, onOpenChange]);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        let target: HTMLButtonElement | null = null;\n        if (initialFocusedItem === \"confirm\" && showConfirmButton) {\n          target = el.querySelector(\".vuuPromptConfirmButton\");\n        } else if (initialFocusedItem === \"cancel\" && showCancelButton) {\n          target = el.querySelector(\".vuuPromptCancelButton\");\n        } else if (initialFocusedItem === \"close\" && showCloseButton) {\n          target = el.querySelector(\".vuuPromptCloseButton\");\n        }\n\n        if (target) {\n          setTimeout(() => {\n            target.focus();\n          }, 200);\n        }\n      }\n    },\n    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton],\n  );\n\n  const handleCancel = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    onCancel?.();\n    close();\n  }, [close, onCancel]);\n\n  const handleConfirm = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(() => {\n    if (onConfirm?.() !== false) {\n      close();\n    }\n  }, [close, onConfirm]);\n\n  const actions = showCloseButton ? (\n    <IconButton\n      appearance=\"transparent\"\n      className=\"vuuPromptCloseButton\"\n      data-embedded\n      icon=\"close\"\n      onClick={close}\n    />\n  ) : null;\n\n  const header = icon ? (\n    <>\n      <Icon name={icon} />\n      <span>{title}</span>\n    </>\n  ) : (\n    title\n  );\n\n  return (\n    <Dialog\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      onOpenChange={onOpenChange}\n      open={open}\n      ref={callbackRef}\n      status={status}\n    >\n      <DialogHeader\n        disableAccent={disableAccent}\n        header={header}\n        actions={actions}\n      />\n      <DialogContent>{children}</DialogContent>\n      <DialogActions>\n        {customAction}\n        {showCancelButton ? (\n          <Button\n            className=\"vuuPromptCancelButton\"\n            disabled={cancelButtonProps?.disabled}\n            onClick={handleCancel}\n            ref={cancelButtonProps?.ref}\n          >\n            {cancelButtonProps?.label ?? cancelButtonLabel}\n          </Button>\n        ) : null}\n        {showConfirmButton ? (\n          <Button\n            className=\"vuuPromptConfirmButton\"\n            disabled={confirmButtonProps?.disabled}\n            sentiment=\"accented\"\n            onClick={handleConfirm}\n            ref={confirmButtonProps?.ref}\n          >\n            {confirmButtonProps?.label ?? confirmButtonLabel}\n          </Button>\n        ) : null}\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","promptCss","useCallback","jsx","IconButton","jsxs","Fragment","Icon","Dialog","DialogHeader","DialogContent","DialogActions","Button"],"mappings":"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"}
+{"version":3,"file":"Prompt.js","sources":["../../../../packages/vuu-ui-controls/src/prompt/Prompt.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  DialogHeaderProps,\n  DialogProps,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  MouseEventHandler,\n  ReactNode,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport { Icon, IconButton } from \"../icon-button\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport promptCss from \"./Prompt.css\";\n\nconst classBase = \"vuuPrompt\";\n\n/**\n * Allow fine grained configuration of Prompt buttons\n * The ref is provided to facilitate programmatic focus.\n */\nexport interface PromptButtonProps {\n  disabled?: boolean;\n  label?: string;\n  ref?: RefObject<HTMLButtonElement | null>;\n}\n\nexport interface PromptProps\n  extends Pick<DialogProps, \"onOpenChange\" | \"open\" | \"status\">,\n    Pick<DialogHeaderProps, \"disableAccent\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /**\n   * For simple configuration, where just a cancel button label is required.\n   */\n  cancelButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of cancel button\n   */\n  cancelButtonProps?: PromptButtonProps;\n  /**\n   * For simple configuration, where just a confirm button label is required.\n   */\n  confirmButtonLabel?: string;\n  /**\n   * Allow fine grained configuration of confirm button\n   */\n  confirmButtonProps?: PromptButtonProps;\n\n  /**\n   * A custom action will be displayed in Prompt button bar, before cancel/confirm buttons.\n   */\n  customAction?: ReactNode;\n  icon?: string;\n  /**\n   * Set this prop if one of the three built-in buttons should receive initial focus.\n   * Allows user to quickly dismiss/confirm prompt from keyboard. If the prompt content\n   * contains focusable item(s), focus should be controlled by caller.\n   */\n  initialFocusedItem?: \"confirm\" | \"cancel\" | \"close\";\n  onCancel?: () => void;\n  onConfirm?: () => void | false;\n  onClose?: () => void;\n  showCancelButton?: boolean;\n  showCloseButton?: boolean;\n  showConfirmButton?: boolean;\n  title: string;\n}\n\nexport const Prompt = ({\n  children,\n  className,\n  cancelButtonLabel = \"Cancel\",\n  cancelButtonProps,\n  confirmButtonLabel = \"Confirm\",\n  confirmButtonProps,\n  customAction = null,\n  disableAccent,\n  icon,\n  initialFocusedItem,\n  onCancel,\n  onClose,\n  onConfirm,\n  onOpenChange,\n  open,\n  showCancelButton = true,\n  showCloseButton = true,\n  showConfirmButton = true,\n  status,\n  title,\n\n  ...htmlAttributes\n}: PromptProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-prompt-next\",\n    css: promptCss,\n    window: targetWindow,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n    onOpenChange?.(false);\n  }, [onClose, onOpenChange]);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        let target: HTMLButtonElement | null = null;\n        if (initialFocusedItem === \"confirm\" && showConfirmButton) {\n          target = el.querySelector(\".vuuPromptConfirmButton\");\n        } else if (initialFocusedItem === \"cancel\" && showCancelButton) {\n          target = el.querySelector(\".vuuPromptCancelButton\");\n        } else if (initialFocusedItem === \"close\" && showCloseButton) {\n          target = el.querySelector(\".vuuPromptCloseButton\");\n        }\n\n        if (target) {\n          setTimeout(() => {\n            target.focus();\n          }, 200);\n        }\n      }\n    },\n    [initialFocusedItem, showCancelButton, showCloseButton, showConfirmButton],\n  );\n\n  const handleCancel = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n    onCancel?.();\n    close();\n  }, [close, onCancel]);\n\n  const handleConfirm = useCallback<\n    MouseEventHandler<HTMLButtonElement>\n  >(() => {\n    if (onConfirm?.() !== false) {\n      close();\n    }\n  }, [close, onConfirm]);\n\n  const actions = showCloseButton ? (\n    <IconButton\n      appearance=\"transparent\"\n      className=\"vuuPromptCloseButton\"\n      data-embedded\n      icon=\"close\"\n      onClick={close}\n    />\n  ) : null;\n\n  const header = icon ? (\n    <>\n      <Icon name={icon} />\n      <span>{title}</span>\n    </>\n  ) : (\n    title\n  );\n\n  return (\n    <Dialog\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      onOpenChange={onOpenChange}\n      open={open}\n      ref={callbackRef}\n      status={status}\n    >\n      <DialogHeader\n        disableAccent={disableAccent}\n        header={header}\n        actions={actions}\n      />\n      <DialogContent>{children}</DialogContent>\n      <DialogActions>\n        {customAction}\n        {showCancelButton ? (\n          <Button\n            appearance=\"solid\"\n            className=\"vuuPromptCancelButton\"\n            disabled={cancelButtonProps?.disabled}\n            onClick={handleCancel}\n            ref={cancelButtonProps?.ref}\n            sentiment=\"neutral\"\n          >\n            {cancelButtonProps?.label ?? cancelButtonLabel}\n          </Button>\n        ) : null}\n        {showConfirmButton ? (\n          <Button\n            appearance=\"solid\"\n            className=\"vuuPromptConfirmButton\"\n            disabled={confirmButtonProps?.disabled}\n            sentiment=\"accented\"\n            onClick={handleConfirm}\n            ref={confirmButtonProps?.ref}\n          >\n            {confirmButtonProps?.label ?? confirmButtonLabel}\n          </Button>\n        ) : null}\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","promptCss","useCallback","jsx","IconButton","jsxs","Fragment","Icon","Dialog","DialogHeader","DialogContent","DialogActions","Button"],"mappings":"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"}

package/cjs/split-button/SplitButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-bold-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-subtle-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-accented-bold-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-bold-background)\n  );\n  --split-background-active: var(--salt-actionable-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-bold-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-subtle-background)\n  );\n  --split-background-active: var(--salt-actionable-subtle-background-active);\n  --split-color-active: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-subtle-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-accented-bold-background));\n  --split-background-active: var(--salt-actionable-accented-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-accented-bold-background-hover);\n  --split-color: var(--salt-actionable-bold-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
+var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, var(--salt-palette-corner-weaker));\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-bold-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-subtle-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-accented-bold-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-bold-background)\n  );\n  --split-background-active: var(--salt-actionable-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-bold-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-subtle-background)\n  );\n  --split-background-active: var(--salt-actionable-subtle-background-active);\n  --split-color-active: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-subtle-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-accented-bold-background));\n  --split-background-active: var(--salt-actionable-accented-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-accented-bold-background-hover);\n  --split-color: var(--salt-actionable-bold-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
 
 module.exports = splitButtonCss;
 //# sourceMappingURL=SplitButton.css.js.map

package/cjs/split-button/SplitButton.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var vuuPopups = require('@vuu-ui/vuu-popups');
 var core = require('@salt-ds/core');
-var React = require('react');
-var useSplitButton = require('./useSplitButton.js');
-var cx = require('clsx');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var SplitButton$1 = require('./SplitButton.css.js');
 var vuuContextMenu = require('@vuu-ui/vuu-context-menu');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+var cx = require('clsx');
+var React = require('react');
+var useSplitButton = require('./useSplitButton.js');
+var SplitButton$1 = require('./SplitButton.css.js');
 
 const classBase = "vuuSplitButton";
 const SplitButton = React.forwardRef(
@@ -54,10 +54,11 @@ const SplitButton = React.forwardRef(
             core.Button,
             {
               ...ButtonProps2,
+              appearance: "solid",
               className: `${classBase}-main`,
               disabled,
               ref: buttonRef,
-              variant,
+              sentiment: "neutral",
               children
             }
           ),
@@ -65,11 +66,12 @@ const SplitButton = React.forwardRef(
             vuuPopups.PopupMenu,
             {
               ...PopupMenuProps2,
+              appearance: "solid",
               className: `${classBase}-trigger`,
               disabled,
               icon: PopupMenuProps2?.icon ?? "chevron-down",
               tabIndex: segmented ? 0 : -1,
-              variant
+              sentiment: "neutral"
             }
           )
         ]

package/cjs/split-button/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            variant={variant}\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            variant={variant}\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","ContextMenuProvider","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,sCACGC,kCACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGP,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACAM,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGP,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitButton.js","sources":["../../../../packages/vuu-ui-controls/src/split-button/SplitButton.tsx"],"sourcesContent":["import { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-context-menu\";\nimport { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <ContextMenuProvider>\n        <div\n          {...htmlAttributes}\n          {...rootProps}\n          className={cx(classBase, `${classBase}-${variant}`, className, {\n            [`${classBase}-disabled`]: disabled,\n            [`${classBase}-segmented`]: segmented,\n          })}\n          ref={useForkRef(forwardedRef, rootRef)}\n          data-showcase-center\n          tabIndex={-1}\n        >\n          <Button\n            {...ButtonProps}\n            appearance=\"solid\"\n            className={`${classBase}-main`}\n            disabled={disabled}\n            ref={buttonRef}\n            sentiment=\"neutral\"\n          >\n            {children}\n          </Button>\n          <PopupMenu\n            {...PopupMenuProps}\n            appearance=\"solid\"\n            className={`${classBase}-trigger`}\n            disabled={disabled}\n            icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n            tabIndex={segmented ? 0 : -1}\n            sentiment=\"neutral\"\n          />\n        </div>\n      </ContextMenuProvider>\n    );\n  },\n);\n"],"names":["forwardRef","SplitButton","useWindow","useComponentCssInjection","splitButtonCss","ButtonProps","PopupMenuProps","useSplitButton","ContextMenuProvider","jsxs","useForkRef","jsx","Button","PopupMenu"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAAA,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpEC,6BAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,sCACGC,kCACC,EAAA,EAAA,QAAA,kBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,WAAA;AAAA,YAAA;AAAA,cACE,GAAGP,YAAAA;AAAA,cACJ,UAAW,EAAA,OAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,SAAU,EAAA,SAAA;AAAA,cAET;AAAA;AAAA,WACH;AAAA,0BACAM,cAAA;AAAA,YAACE,mBAAA;AAAA,YAAA;AAAA,cACE,GAAGP,eAAAA;AAAA,cACJ,UAAW,EAAA,OAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B,SAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAGN;;;;"}

package/cjs/toolbar/Toolbar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var toolbarCss = ".vuuToolbar {\n    --toolbar-height: var(--vuuToolbar-height, 36px);\n    --toolbar-item-height: var(--vuuToolbarItem-height, 100%);\n    --vuuOverflowContainer-background: var(--vuuToolbar-background);\n    --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);\n    --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);\n    --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);\n    height: var(--toolbar-height);\n}\n\n.vuuToolbar-alignCenter {\n    --vuuOverflowContainer-justifyContent: center;\n}\n\n.vuuToolbar-alignEnd {\n    --vuuOverflowContainer-justifyContent: flex-end;\n}\n\n/* .vuuToolbarItem {\n    height: var(--toolbar-item-height);\n} */\n\n.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {\n    content: '';\n    position: absolute;\n    left: calc(-1 * var(--overflow-item-gap));\n    top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2);\n    width: 1px;\n    /* height: calc(var(--basket-selector-height) - 16px); */\n    height: var(--toolbar-item-height);\n    background-color: var(--vuu-color-gray-05);\n}\n\n\n.vuuToolbarItem.vuuFocusVisible {\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n  }\n\n\n  .vuuToolbarItem:focus,\n  .vuuToolbarItem:focus-visible {\n\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n\n}\n\n\n  ";
+var toolbarCss = ".vuuToolbar {\n    --toolbar-height: var(--vuuToolbar-height, 36px);\n    --toolbar-item-height: var(--vuuToolbarItem-height, 100%);\n    --vuuOverflowContainer-background: var(--vuuToolbar-background);\n    --vuuOverflowContainer-borderColor: var(--vuuToolbar-borderColor);\n    --vuuOverflowContainer-borderStyle: var(--vuuToolbar-borderStyle);\n    --vuuOverflowContainer-borderWidth: var(--vuuToolbar-borderWidth);\n    height: var(--toolbar-height);\n}\n\n.vuuToolbar-alignCenter {\n    --vuuOverflowContainer-justifyContent: center;\n}\n\n.vuuToolbar-alignEnd {\n    --vuuOverflowContainer-justifyContent: flex-end;\n}\n\n/* .vuuToolbarItem {\n    height: var(--toolbar-item-height);\n} */\n\n.vuuToolbar-withSeparators .vuuOverflowContainer-item:not(:first-child):before {\n    content: '';\n    position: absolute;\n    left: calc(-1 * var(--overflow-item-gap));\n    /* top: calc((var(--toolbar-height) - var(--toolbar-item-height)) /2); */\n    top: 0px;\n    width: 1px;\n    height: var(--toolbar-item-height);\n    background-color: var(--salt-separable-primary-borderColor);\n}\n\n\n.vuuToolbarItem.vuuFocusVisible {\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--salt-focused-outlineColor));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n  }\n\n\n  .vuuToolbarItem:focus,\n  .vuuToolbarItem:focus-visible {\n\n    outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));\n    outline-style: dashed;\n    outline-width: 1px;\n    outline-offset: 0px;\n\n}\n\n\n  ";
 
 module.exports = toolbarCss;
 //# sourceMappingURL=Toolbar.css.js.map

package/cjs/vuu-typeahead-input/VuuTypeaheadInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VuuTypeaheadInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx"],"sourcesContent":["import { ComboBox, ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { NO_DATA_MATCH } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  useVuuTypeaheadInput,\n  VuuTypeaheadInputHookProps,\n} from \"./useVuuTypeaheadInput\";\nimport vuuTypeaheadInputCss from \"./VuuTypeaheadInput.css\";\n\nconst classBase = \"vuuTypeaheadInput\";\nconst [noMatchingData] = NO_DATA_MATCH;\n\nexport interface VuuTypeaheadInputProps\n  extends VuuTypeaheadInputHookProps,\n    Pick<ComboBoxProps, \"selectOnTab\"> {\n  className?: string;\n}\n\nexport const VuuTypeaheadInput = ({\n  allowFreeInput,\n  className,\n  column,\n  freeTextWarning,\n  highlightFirstSuggestion,\n  inputProps: inputPropsProp,\n  minCharacterCountToTriggerSuggestions,\n  onCommit,\n  selectOnTab,\n  table,\n}: VuuTypeaheadInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-typeahead-input\",\n    css: vuuTypeaheadInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    inputProps,\n    noFreeText,\n    onChange,\n    onKeyDown,\n    onOpenChange,\n    onSelectionChange,\n    open,\n    ref,\n    typeaheadValues,\n    value,\n  } = useVuuTypeaheadInput({\n    allowFreeInput,\n    column,\n    freeTextWarning,\n    highlightFirstSuggestion,\n    inputProps: inputPropsProp,\n    minCharacterCountToTriggerSuggestions,\n    onCommit,\n    table,\n  });\n\n  // need latest version of salt combobox\n  // const defaultHighlightedIndex =\n  //   highlightFirstSuggestion === false ? -1 : undefined;\n\n  return (\n    <ComboBox\n      className={cx(classBase, className)}\n      // defaultHighlightedIndex={defaultHighlightedIndex}\n      inputProps={inputProps}\n      onChange={onChange}\n      onKeyDown={onKeyDown}\n      onOpenChange={onOpenChange}\n      onSelectionChange={onSelectionChange}\n      open={open}\n      ref={ref}\n      selectOnTab={selectOnTab}\n      value={value}\n    >\n      {typeaheadValues.map((state) => (\n        <Option\n          className=\"vuuTypeaheadOption\"\n          value={state}\n          key={state}\n          disabled={state === noMatchingData || state === noFreeText}\n        />\n      ))}\n    </ComboBox>\n  );\n};\n"],"names":["NO_DATA_MATCH","useWindow","useComponentCssInjection","vuuTypeaheadInputCss","useVuuTypeaheadInput","jsx","ComboBox","Option"],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,mBAAA;AAClB,MAAM,CAAC,cAAc,CAAI,GAAAA,sBAAA;AAQlB,MAAM,oBAAoB,CAAC;AAAA,EAChC,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,qCAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,yCAAqB,CAAA;AAAA,IACvB,cAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,qCAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAMD,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAElC,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,KACpB,qBAAAD,cAAA;AAAA,QAACE,WAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,oBAAA;AAAA,UACV,KAAO,EAAA,KAAA;AAAA,UAEP,QAAA,EAAU,KAAU,KAAA,cAAA,IAAkB,KAAU,KAAA;AAAA,SAAA;AAAA,QAD3C;AAAA,OAGR;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"VuuTypeaheadInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx"],"sourcesContent":["import { ComboBox, ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { NO_DATA_MATCH } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n  useVuuTypeaheadInput,\n  VuuTypeaheadInputHookProps,\n} from \"./useVuuTypeaheadInput\";\n\nimport vuuTypeaheadInputCss from \"./VuuTypeaheadInput.css\";\n\nconst classBase = \"vuuTypeaheadInput\";\nconst [noMatchingData] = NO_DATA_MATCH;\n\nexport interface VuuTypeaheadInputProps\n  extends VuuTypeaheadInputHookProps,\n    Pick<ComboBoxProps, \"selectOnTab\"> {\n  className?: string;\n}\n\nexport const VuuTypeaheadInput = ({\n  allowFreeInput,\n  className,\n  column,\n  freeTextWarning,\n  highlightFirstSuggestion,\n  inputProps: inputPropsProp,\n  minCharacterCountToTriggerSuggestions,\n  onCommit,\n  selectOnTab,\n  table,\n}: VuuTypeaheadInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-typeahead-input\",\n    css: vuuTypeaheadInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    inputProps,\n    noFreeText,\n    onChange,\n    onKeyDown,\n    onOpenChange,\n    onSelectionChange,\n    open,\n    ref,\n    typeaheadValues,\n    value,\n  } = useVuuTypeaheadInput({\n    allowFreeInput,\n    column,\n    freeTextWarning,\n    highlightFirstSuggestion,\n    inputProps: inputPropsProp,\n    minCharacterCountToTriggerSuggestions,\n    onCommit,\n    table,\n  });\n\n  return (\n    <ComboBox\n      className={cx(classBase, className)}\n      inputProps={inputProps}\n      onChange={onChange}\n      onKeyDown={onKeyDown}\n      onOpenChange={onOpenChange}\n      onSelectionChange={onSelectionChange}\n      open={open}\n      ref={ref}\n      selectOnTab={selectOnTab}\n      value={value}\n    >\n      {typeaheadValues.map((state) => (\n        <Option\n          className=\"vuuTypeaheadOption\"\n          value={state}\n          key={state}\n          disabled={state === noMatchingData || state === noFreeText}\n        />\n      ))}\n    </ComboBox>\n  );\n};\n"],"names":["NO_DATA_MATCH","useWindow","useComponentCssInjection","vuuTypeaheadInputCss","useVuuTypeaheadInput","jsx","ComboBox","Option"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,mBAAA;AAClB,MAAM,CAAC,cAAc,CAAI,GAAAA,sBAAA;AAQlB,MAAM,oBAAoB,CAAC;AAAA,EAChC,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,qCAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,yCAAqB,CAAA;AAAA,IACvB,cAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,qCAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,KACpB,qBAAAD,cAAA;AAAA,QAACE,WAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,oBAAA;AAAA,UACV,KAAO,EAAA,KAAA;AAAA,UAEP,QAAA,EAAU,KAAU,KAAA,cAAA,IAAkB,KAAU,KAAA;AAAA,SAAA;AAAA,QAD3C;AAAA,OAGR;AAAA;AAAA,GACH;AAEJ;;;;"}

package/cjs/vuu-typeahead-input/useVuuTypeaheadInput.js

@@ -79,7 +79,15 @@ const useVuuTypeaheadInput = ({
           } else {
             setTypeaheadValues(suggestions);
             if (pendingListFocusRef.current && inputRef.current) {
-              vuuUtils.dispatchKeyboardEvent(inputRef.current, "keydown", "ArrowUp");
+              setTimeout(() => {
+                if (inputRef.current) {
+                  vuuUtils.dispatchKeyboardEvent(
+                    inputRef.current,
+                    "keydown",
+                    "ArrowDown"
+                  );
+                }
+              }, 60);
             }
           }
           pendingListFocusRef.current = false;