@vuu-ui/vuu-ui-controls 0.0.26

package/esm/dropdown/useDropdown.js

@@ -0,0 +1,113 @@
+import { useControlled } from '@salt-ds/core';
+import { useCallback, useMemo } from 'react';
+import '../list/common-hooks/keyUtils.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/use-resize-observer.js';
+import { isMultiSelection } from '../common-hooks/selectionTypes.js';
+import '@vuu-ui/vuu-utils';
+import '../list/Highlighter.js';
+import '../list/ListItem.js';
+import '../list/List.js';
+import { useList } from '../list/useList.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+
+const useDropdown = ({
+  collectionHook,
+  defaultHighlightedIndex: defaultHighlightedIndexProp,
+  defaultIsOpen,
+  defaultSelected,
+  highlightedIndex: highlightedIndexProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString,
+  onHighlight,
+  onOpenChange,
+  onSelectionChange,
+  onSelect,
+  selected,
+  selectionStrategy
+}) => {
+  const isMultiSelect = isMultiSelection(selectionStrategy);
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen ?? false,
+    name: "useDropdownList"
+  });
+  const handleSelectionChange = useCallback(
+    (evt, selected2) => {
+      if (!isMultiSelect) {
+        setIsOpen(false);
+        onOpenChange?.(false);
+      }
+      if (Array.isArray(selected2)) {
+        onSelectionChange?.(
+          evt,
+          selected2
+        );
+      } else if (selected2) {
+        onSelectionChange?.(
+          evt,
+          selected2
+        );
+      }
+    },
+    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
+  );
+  const handleSelect = useCallback(
+    (evt, selected2) => {
+      if (!isMultiSelect) {
+        setIsOpen(false);
+        onOpenChange?.(false);
+      }
+      onSelect?.(evt, selected2);
+    },
+    [isMultiSelect, onOpenChange, onSelect, setIsOpen]
+  );
+  const listHook = useList({
+    collectionHook,
+    defaultHighlightedIndex: defaultHighlightedIndexProp ?? highlightedIndexProp === void 0 ? 0 : void 0,
+    defaultSelected,
+    label: "DropDown",
+    onSelectionChange: handleSelectionChange,
+    onSelect: handleSelect,
+    highlightedIndex: highlightedIndexProp,
+    onHighlight,
+    selected,
+    selectionStrategy,
+    tabToSelect: !isMultiSelect
+  });
+  const handleOpenChange = useCallback(
+    (open) => {
+      setIsOpen(open);
+      onOpenChange?.(open);
+    },
+    [onOpenChange, setIsOpen]
+  );
+  const triggerLabel = useMemo(() => {
+    if (Array.isArray(listHook.selected)) {
+      const selectedItems = listHook.selected.map(
+        (id) => collectionHook.itemById(id)
+      );
+      if (selectedItems.length === 0) {
+        return void 0;
+      } else if (selectedItems.length === 1) {
+        const [item] = selectedItems;
+        return item === null ? void 0 : itemToString$1(item);
+      } else {
+        return `${selectedItems.length} items selected`;
+      }
+    }
+  }, [collectionHook, itemToString$1, listHook.selected]);
+  return {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    triggerLabel,
+    ...listHook
+  };
+};
+
+export { useDropdown };
+//# sourceMappingURL=useDropdown.js.map

package/esm/dropdown/useDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","sources":["../../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { RefObject, useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  itemToString as defaultItemToString,\n  SelectHandler,\n  SelectionStrategy,\n  isMultiSelection,\n  MultiSelectionHandler,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\n\nexport interface DropdownListHookProps<\n  Item,\n  S extends SelectionStrategy = \"default\"\n> extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, S>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n  listRef: RefObject<HTMLDivElement>;\n}\n\nexport interface DropdownListHookResult<Item>\n  extends Partial<ListHookResult<Item>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <Item, S extends SelectionStrategy>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, S>): DropdownListHookResult<Item> => {\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      if (Array.isArray(selected)) {\n        (onSelectionChange as MultiSelectionHandler<Item>)?.(\n          evt,\n          selected as Item[]\n        );\n      } else if (selected) {\n        (onSelectionChange as SingleSelectionHandler<Item>)?.(\n          evt,\n          selected as Item\n        );\n      }\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect, setIsOpen]\n  );\n\n  const listHook = useList<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"DropDown\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected.map((id) =>\n        collectionHook.itemById(id)\n      );\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const [item] = selectedItems;\n        return item === null ? undefined : itemToString(item);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    }\n  }, [collectionHook, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":"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"}

package/esm/dropdown/useDropdownBase.js

@@ -0,0 +1,167 @@
+import { useControlled, useForkRef } from '@salt-ds/core';
+import { useRef, useState, useCallback } from 'react';
+import '../common-hooks/collectionProvider.js';
+import { useResizeObserver, WidthOnly } from '../common-hooks/use-resize-observer.js';
+import { targetWithinSubPopup, useClickAway } from './useClickAway.js';
+
+const NO_OBSERVER = [];
+const useDropdownBase = ({
+  defaultIsOpen,
+  disabled,
+  // TODO check how we're using fullWidth, do we need a separate value for the popup component
+  fullWidth: fullWidthProp,
+  id,
+  isOpen: isOpenProp,
+  onOpenChange,
+  onKeyDown: onKeyDownProp,
+  openKeys = ["Enter", "ArrowDown", " "],
+  openOnFocus,
+  popupComponent,
+  popupWidth: popupWidthProp,
+  rootRef,
+  width
+}) => {
+  const justFocused = useRef(null);
+  const popperRef = useRef(null);
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: Boolean(defaultIsOpen),
+    name: "useDropdown",
+    state: "isOpen"
+  });
+  const [popup, setPopup] = useState({
+    width: popupWidthProp ?? width ?? 0
+  });
+  const showDropdown = useCallback(() => {
+    setIsOpen(true);
+    onOpenChange?.(true);
+  }, [onOpenChange, setIsOpen]);
+  const hideDropdown = useCallback(
+    (reason) => {
+      console.log(`hide dropdown ${reason}`);
+      setIsOpen(false);
+      onOpenChange?.(false, reason);
+    },
+    [onOpenChange, setIsOpen]
+  );
+  const handleComponentFocusOut = useCallback(
+    (evt) => {
+      const target = evt.relatedTarget;
+      if (target === null) {
+        requestAnimationFrame(() => {
+          if (!popperRef.current?.contains(document.activeElement)) {
+            hideDropdown("Tab");
+          }
+        });
+      } else if (!popperRef.current?.contains(target)) {
+        if (!targetWithinSubPopup(popperRef.current, target)) {
+          hideDropdown("Tab");
+        }
+      }
+    },
+    [hideDropdown]
+  );
+  const popperCallbackRef = useCallback(
+    (element) => {
+      if (element) {
+        element.addEventListener("focusout", handleComponentFocusOut);
+      } else if (popperRef.current) {
+        popperRef.current.removeEventListener(
+          "focusout",
+          handleComponentFocusOut
+        );
+      }
+      popperRef.current = element;
+    },
+    [handleComponentFocusOut]
+  );
+  useClickAway({
+    popperRef,
+    rootRef,
+    isOpen,
+    onClose: hideDropdown
+  });
+  const handleTriggerFocus = useCallback(() => {
+    if (!disabled) {
+      if (openOnFocus) {
+        setIsOpen(true);
+        onOpenChange?.(true);
+        justFocused.current = window.setTimeout(() => {
+          justFocused.current = null;
+        }, 1e3);
+      }
+    }
+  }, [disabled, onOpenChange, openOnFocus, setIsOpen]);
+  const handleTriggerToggle = useCallback(
+    (e) => {
+      if (["Enter", " "].indexOf(
+        e.key
+      ) === -1) {
+        const newIsOpen = !isOpen;
+        setIsOpen(newIsOpen);
+        onOpenChange?.(newIsOpen);
+      }
+    },
+    [isOpen, setIsOpen, onOpenChange]
+  );
+  const handleKeydown = useCallback(
+    (evt) => {
+      if (
+        /* evt.key === "Tab" || */
+        evt.key === "Escape" && isOpen
+      ) {
+        if (evt.key === "Escape") {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }
+        hideDropdown(evt.key);
+      } else if (openKeys.includes(evt.key) && !isOpen) {
+        evt.preventDefault();
+        showDropdown();
+      } else {
+        onKeyDownProp?.(evt);
+      }
+    },
+    [hideDropdown, isOpen, onKeyDownProp, openKeys, showDropdown]
+  );
+  const handleBlur = useCallback(
+    (evt) => {
+      if (isOpen) {
+        if (popperRef.current?.contains(evt.relatedTarget)) ; else {
+          hideDropdown("blur");
+        }
+      }
+    },
+    [hideDropdown, isOpen]
+  );
+  const fullWidth = fullWidthProp ?? false;
+  const measurements2 = fullWidth ? WidthOnly : NO_OBSERVER;
+  useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
+  const componentId = `${id}-dropdown`;
+  const triggerProps = {
+    "aria-expanded": isOpen,
+    "aria-owns": isOpen ? componentId : void 0,
+    id: `${id}-control`,
+    onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
+    onFocus: handleTriggerFocus,
+    role: "listbox",
+    onBlur: handleBlur,
+    onKeyDown: disabled ? void 0 : handleKeydown,
+    style: { width: fullWidth ? void 0 : width }
+  };
+  const dropdownComponentProps = {
+    id: componentId,
+    width: popup.width
+  };
+  const popupComponentRef = useForkRef(popperCallbackRef, popupComponent.ref);
+  return {
+    componentProps: dropdownComponentProps,
+    popupComponentRef,
+    isOpen,
+    label: "Dropdown Button",
+    triggerProps
+  };
+};
+
+export { useDropdownBase };
+//# sourceMappingURL=useDropdownBase.js.map

package/esm/dropdown/useDropdownBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownBase.js","sources":["../../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../common-hooks\";\nimport {\n  CloseReason,\n  DropdownHookProps,\n  DropdownHookResult,\n  DropdownOpenKey,\n} from \"./dropdownTypes\";\nimport { useClickAway, targetWithinSubPopup } from \"./useClickAway\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openKeys = [\"Enter\", \"ArrowDown\", \" \"],\n  openOnFocus,\n  popupComponent,\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(\n    (reason: CloseReason) => {\n      console.log(`hide dropdown ${reason}`);\n      setIsOpen(false);\n      onOpenChange?.(false, reason);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  // Focus is not usually applied to the popped up component, we\n  // manipulate active descendant whilst keeping focus in the\n  // trigger. Some component, like Calendar ARE focussed, as they\n  // have more complicated navigation. In these cases, we need to\n  // listen for focus out.\n  const handleComponentFocusOut = useCallback(\n    (evt: FocusEvent) => {\n      const target = evt.relatedTarget as HTMLElement;\n      if (target === null) {\n        // if component sets focus on a timeout (as calendar does when\n        // transitioning month) wait before testing\n        requestAnimationFrame(() => {\n          if (!popperRef.current?.contains(document.activeElement)) {\n            hideDropdown(\"Tab\");\n          }\n        });\n      } else if (!popperRef.current?.contains(target)) {\n        if (!targetWithinSubPopup(popperRef.current, target)) {\n          hideDropdown(\"Tab\");\n        }\n      }\n    },\n    [hideDropdown]\n  );\n\n  const popperCallbackRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (element) {\n        element.addEventListener(\"focusout\", handleComponentFocusOut);\n      } else if (popperRef.current) {\n        popperRef.current.removeEventListener(\n          \"focusout\",\n          handleComponentFocusOut\n        );\n      }\n      popperRef.current = element;\n    },\n    [handleComponentFocusOut]\n  );\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setIsOpen]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (/* evt.key === \"Tab\" || */ evt.key === \"Escape\" && isOpen) {\n        // No preventDefault for Tab, but if we've handled Escape, we should own it\n        if (evt.key === \"Escape\") {\n          evt.stopPropagation();\n          evt.preventDefault();\n        }\n        hideDropdown(evt.key);\n      } else if (openKeys.includes(evt.key as DropdownOpenKey) && !isOpen) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, openKeys, showDropdown]\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (evt) => {\n      if (isOpen) {\n        if (popperRef.current?.contains(evt.relatedTarget)) {\n          // ignore\n        } else {\n          hideDropdown(\"blur\");\n        }\n      }\n    },\n    [hideDropdown, isOpen]\n  );\n\n  const fullWidth = fullWidthProp ?? false;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    \"aria-expanded\": isOpen,\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    role: \"listbox\",\n    onBlur: handleBlur,\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    id: componentId,\n    width: popup.width,\n  };\n\n  const popupComponentRef = useForkRef(popperCallbackRef, popupComponent.ref);\n\n  return {\n    componentProps: dropdownComponentProps,\n    popupComponentRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["measurements"],"mappings":"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"}

package/esm/editable/editable-utils.js

@@ -0,0 +1,35 @@
+import { getEditRuleValidator } from '@vuu-ui/vuu-utils';
+
+const buildValidationChecker = (rules) => (value) => applyRules(rules, value);
+function applyRules(rules, value) {
+  let result = void 0;
+  for (const rule of rules) {
+    const editRuleValidator = getEditRuleValidator(rule.name);
+    if (editRuleValidator) {
+      const ruleResult = editRuleValidator(rule, value);
+      switch (ruleResult) {
+        case true:
+          break;
+        case false:
+          if (result === void 0) {
+            result = false;
+          }
+          break;
+        default:
+          if (result === void 0 || result === false) {
+            result = ruleResult;
+          } else {
+            result += `::${ruleResult}`;
+          }
+      }
+    } else {
+      throw Error(
+        `editable-utils applyRules, no validator registered for rule '${rule.name}'`
+      );
+    }
+  }
+  return result;
+}
+
+export { buildValidationChecker };
+//# sourceMappingURL=editable-utils.js.map

package/esm/editable/editable-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-utils.js","sources":["../../src/editable/editable-utils.ts"],"sourcesContent":["import {\n  ClientSideValidationChecker,\n  EditValidationRule,\n} from \"@vuu-ui/vuu-table-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { getEditRuleValidator } from \"@vuu-ui/vuu-utils\";\n\nexport const buildValidationChecker =\n  (rules: EditValidationRule[]): ClientSideValidationChecker =>\n  (value?: VuuRowDataItemType) =>\n    applyRules(rules, value);\n\nfunction applyRules(\n  rules: EditValidationRule[],\n  value?: VuuRowDataItemType\n): string | false | undefined {\n  let result: false | string | undefined = undefined;\n  for (const rule of rules) {\n    const editRuleValidator = getEditRuleValidator(rule.name);\n    if (editRuleValidator) {\n      const ruleResult = editRuleValidator(rule, value);\n      switch (ruleResult) {\n        case true:\n          break;\n        case false:\n          if (result === undefined) {\n            result = false;\n          }\n          break;\n        default:\n          if (result === undefined || result === false) {\n            result = ruleResult;\n          } else {\n            result += `::${ruleResult}`;\n          }\n      }\n    } else {\n      throw Error(\n        `editable-utils applyRules, no validator registered for rule '${rule.name}'`\n      );\n    }\n  }\n\n  return result;\n}\n"],"names":[],"mappings":";;AAOO,MAAM,yBACX,CAAC,KAAA,KACD,CAAC,KACC,KAAA,UAAA,CAAW,OAAO,KAAK,EAAA;AAE3B,SAAS,UAAA,CACP,OACA,KAC4B,EAAA;AAC5B,EAAA,IAAI,MAAqC,GAAA,KAAA,CAAA,CAAA;AACzC,EAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,IAAM,MAAA,iBAAA,GAAoB,oBAAqB,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AACxD,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAM,MAAA,UAAA,GAAa,iBAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAChD,MAAA,QAAQ,UAAY;AAAA,QAClB,KAAK,IAAA;AACH,UAAA,MAAA;AAAA,QACF,KAAK,KAAA;AACH,UAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,YAAS,MAAA,GAAA,KAAA,CAAA;AAAA,WACX;AACA,UAAA,MAAA;AAAA,QACF;AACE,UAAI,IAAA,MAAA,KAAW,KAAa,CAAA,IAAA,MAAA,KAAW,KAAO,EAAA;AAC5C,YAAS,MAAA,GAAA,UAAA,CAAA;AAAA,WACJ,MAAA;AACL,YAAA,MAAA,IAAU,KAAK,UAAU,CAAA,CAAA,CAAA;AAAA,WAC3B;AAAA,OACJ;AAAA,KACK,MAAA;AACL,MAAM,MAAA,KAAA;AAAA,QACJ,CAAA,6DAAA,EAAgE,KAAK,IAAI,CAAA,CAAA,CAAA;AAAA,OAC3E,CAAA;AAAA,KACF;AAAA,GACF;AAEA,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/esm/editable/useEditableText.js

@@ -0,0 +1,103 @@
+import { useLayoutEffectSkipFirst, dispatchCustomEvent } from '@vuu-ui/vuu-utils';
+import { useState, useRef, useCallback } from 'react';
+
+const WarnCommit = () => {
+  console.warn(
+    "onCommit handler has not been provided to InputCell cell renderer"
+  );
+  return Promise.resolve(true);
+};
+const useEditableText = ({
+  clientSideEditValidationCheck,
+  initialValue,
+  onCommit,
+  type
+}) => {
+  const [message, setMessage] = useState();
+  const [value, setValue] = useState(initialValue);
+  const initialValueRef = useRef(initialValue);
+  const isDirtyRef = useRef(false);
+  const hasCommittedRef = useRef(false);
+  useLayoutEffectSkipFirst(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  const commit = useCallback(
+    (target) => {
+      if (isDirtyRef.current) {
+        hasCommittedRef.current = true;
+        const warningMessage = clientSideEditValidationCheck?.(value);
+        if (warningMessage) {
+          setMessage(warningMessage);
+        } else {
+          setMessage(void 0);
+          console.log(`commit value ${value}`);
+          onCommit(value).then((response) => {
+            if (response === true) {
+              isDirtyRef.current = false;
+              dispatchCustomEvent(target, "vuu-commit");
+            } else {
+              setMessage(response);
+            }
+          });
+        }
+      } else {
+        dispatchCustomEvent(target, "vuu-commit");
+        hasCommittedRef.current = false;
+      }
+    },
+    [clientSideEditValidationCheck, onCommit, value]
+  );
+  const handleKeyDown = 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) {
+          isDirtyRef.current = false;
+          setMessage(void 0);
+          setValue(initialValueRef.current);
+        }
+      }
+    },
+    [commit]
+  );
+  const handleBlur = useCallback(
+    (evt) => {
+      if (isDirtyRef.current) {
+        commit(evt.target);
+      }
+    },
+    [commit]
+  );
+  const handleChange = useCallback(
+    (evt) => {
+      let typedValue = evt.target.value;
+      if (type === "number" && !isNaN(parseFloat(typedValue))) {
+        typedValue = parseFloat(typedValue);
+      }
+      isDirtyRef.current = value !== initialValueRef.current;
+      setValue(typedValue);
+      if (hasCommittedRef.current && value !== void 0) {
+        const warningMessage = clientSideEditValidationCheck?.(value);
+        if (warningMessage !== message && warningMessage !== false) {
+          setMessage(warningMessage);
+        }
+      }
+    },
+    [clientSideEditValidationCheck, message, type, value]
+  );
+  return {
+    inputProps: {
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    },
+    onChange: handleChange,
+    value: value ?? "",
+    warningMessage: message
+  };
+};
+
+export { WarnCommit, useEditableText };
+//# sourceMappingURL=useEditableText.js.map

package/esm/editable/useEditableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import {\n  ClientSideValidationChecker,\n  DataItemCommitHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchCustomEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nexport const WarnCommit = (): Promise<true> => {\n  console.warn(\n    \"onCommit handler has not been provided to InputCell cell renderer\"\n  );\n  return Promise.resolve(true);\n};\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType\n> {\n  clientSideEditValidationCheck?: ClientSideValidationChecker;\n  initialValue?: T;\n  onCommit: DataItemCommitHandler<T>;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\nexport const useEditableText = <T extends string | number = string>({\n  clientSideEditValidationCheck,\n  initialValue,\n  onCommit,\n  type,\n}: EditableTextHookProps<T>) => {\n  const [message, setMessage] = useState<string | undefined>();\n  const [value, setValue] = useState<T | undefined>(initialValue);\n  const initialValueRef = useRef<T | undefined>(initialValue);\n  const isDirtyRef = useRef(false);\n  const hasCommittedRef = useRef(false);\n\n  useLayoutEffectSkipFirst(() => {\n    //TODO this isn't right, review the state we're using\n    setValue(initialValue);\n  }, [initialValue]);\n\n  const commit = useCallback(\n    (target: HTMLElement) => {\n      if (isDirtyRef.current) {\n        hasCommittedRef.current = true;\n        const warningMessage = clientSideEditValidationCheck?.(value);\n        if (warningMessage) {\n          setMessage(warningMessage);\n        } else {\n          setMessage(undefined);\n          console.log(`commit value ${value}`);\n          onCommit(value as T).then((response) => {\n            if (response === true) {\n              isDirtyRef.current = false;\n              dispatchCustomEvent(target, \"vuu-commit\");\n            } else {\n              setMessage(response);\n            }\n          });\n        }\n      } else {\n        // why, if not dirty ?\n        dispatchCustomEvent(target, \"vuu-commit\");\n        hasCommittedRef.current = false;\n      }\n    },\n    [clientSideEditValidationCheck, onCommit, value]\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          isDirtyRef.current = false;\n          setMessage(undefined);\n          setValue(initialValueRef.current);\n        }\n      }\n    },\n    [commit]\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      let typedValue: VuuRowDataItemType = (evt.target as HTMLInputElement)\n        .value;\n      if (type === \"number\" && !isNaN(parseFloat(typedValue))) {\n        typedValue = parseFloat(typedValue);\n      }\n      isDirtyRef.current = value !== initialValueRef.current;\n      setValue(typedValue as T);\n      if (hasCommittedRef.current && value !== undefined) {\n        const warningMessage = clientSideEditValidationCheck?.(value);\n        if (warningMessage !== message && warningMessage !== false) {\n          setMessage(warningMessage);\n        }\n      }\n    },\n    [clientSideEditValidationCheck, message, type, value]\n  );\n\n  return {\n    inputProps: {\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: value ?? \"\",\n    warningMessage: message,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/editable-label/EditableLabel.css.js

@@ -0,0 +1,4 @@
+var editableLabelCss = ".vuuEditableLabel {\n  --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n  --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n  --saltInput-background: transparent;\n  --saltInput-height: calc(var(--editableLabel-height) - 4px);\n  --saltInput-minWidth: 14px;\n\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  letter-spacing: normal;\n\n  /* max-width: 170px; */\n  outline: none;\n  overflow: hidden;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--editableLabel-padding, 0);\n  top: var(--saltEditableLabel-top, 1px);\n  width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuEditableLabel-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin:0;\n  min-width:0;\n  outline: none;\n  padding: 0;\n}\n\n.vuuEditableLabel-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+
+export { editableLabelCss as default };
+//# sourceMappingURL=EditableLabel.css.js.map

package/esm/editable-label/EditableLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/editable-label/EditableLabel.js

@@ -0,0 +1,135 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { forwardRef, useRef, useCallback, useLayoutEffect, useImperativeHandle } from 'react';
+import { useControlled, Input } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import editableLabelCss from './EditableLabel.css.js';
+
+const classBase = "vuuEditableLabel";
+const NullEditAPI = {
+  beginEdit: () => void 0
+};
+const EditableLabel = forwardRef(function EditableLabel2({
+  className: classNameProp,
+  defaultEditing,
+  defaultValue,
+  editLabelApiRef,
+  editing: editingProp,
+  onChange,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp,
+  ...restProps
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-editable-label",
+    css: editableLabelCss,
+    window: targetWindow
+  });
+  const inputRef = useRef(null);
+  const editingRef = useRef(false);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    name: "EditableLabel",
+    state: "value"
+  });
+  const [editing, _setEditing] = useControlled({
+    controlled: editingProp,
+    default: defaultEditing ?? false,
+    name: "EditableLabel",
+    state: "editing"
+  });
+  const setEditing = useCallback(
+    (value2) => {
+      _setEditing(editingRef.current = value2);
+    },
+    [_setEditing]
+  );
+  const initialValue = useRef(value);
+  useLayoutEffect(() => {
+    if (editing) {
+      if (inputRef.current !== null) {
+        inputRef.current.select();
+        inputRef.current.focus();
+      }
+    }
+  }, [editing, inputRef]);
+  const beginEdit = useCallback(() => {
+    setEditing(true);
+    onEnterEditMode?.();
+  }, [onEnterEditMode, setEditing]);
+  useImperativeHandle(
+    editLabelApiRef,
+    () => ({
+      beginEdit
+    }),
+    [beginEdit]
+  );
+  const exitEditMode = ({
+    cancelEdit = false,
+    allowDeactivation = false
+  } = {}) => {
+    setEditing(false);
+    const originalValue = initialValue.current;
+    if (originalValue !== value) {
+      if (cancelEdit) {
+        setValue(originalValue);
+      } else {
+        initialValue.current = value;
+      }
+    }
+    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
+  };
+  const handleChange = (evt) => {
+    const { value: value2 } = evt.target;
+    setValue(value2);
+    onChange && onChange(value2);
+  };
+  const handleBlur = () => {
+    if (editingRef.current) {
+      exitEditMode({ allowDeactivation: true });
+    }
+  };
+  const handleKeyDown = (evt) => {
+    if (editing && evt.key === "Enter") {
+      evt.stopPropagation();
+      exitEditMode();
+    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      evt.stopPropagation();
+    } else if (evt.key === "Escape") {
+      exitEditMode({ cancelEdit: true });
+    }
+  };
+  const className = cx(classBase, classNameProp, {
+    [`${classBase}-editing`]: editing
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className,
+      "data-text": value,
+      ref: forwardedRef,
+      children: editing ? /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputProps: { className: `${classBase}-input`, spellCheck: false },
+          value,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          inputRef,
+          style: { padding: 0 },
+          textAlign: "left",
+          variant: "secondary"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: value })
+    }
+  );
+});
+
+export { EditableLabel, NullEditAPI };
+//# sourceMappingURL=EditableLabel.js.map

package/esm/editable-label/EditableLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing]\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit]\n  );\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode &&\n      onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = () => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var expandoInputCss = ".vuuExpandoInput {\n\n    --salt-editable-secondary-background: white;\n    --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n    --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n    --saltInput-height: var(--expandoInput-height);\n    --saltInput-minHeight: var(--saltInput-height);\n    --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n  \n    border: var(--vuuExpandoInput-border, none);\n    border-radius: var(--vuuExpandoInput-borderRadius, 0);\n    color: inherit;\n    cursor: default;\n    display: inline-block;\n    font-size: var(--salt-text-fontSize);\n    height: var(--expandoInput-height);\n    min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n    outline: none;\n    padding: 0 var(--expandoInput-padding);\n    position: relative;\n\n}\n\n.vuuExpandoInput:before {\n    content: attr(data-text);\n    display: block;\n    height: 0px;\n    visibility: hidden;\n    white-space: pre-wrap;\n  }\n  .vuuExpandoInput-error {\n    border-color: var(--vuu-color-red-50);\n  }\n\n  .vuuExpandoInput .saltInput {\n    font-weight: var(--salt-text-fontWeight);\n    left: var(--expandoInput-padding, 0);\n    padding: 0;\n    outline-style: none;\n    position: absolute;\n    right: var(--expandoInput-padding, 0);\n    top: var(--vuuExpandoInput-top, 2px);\n    width: auto;\n  }\n  \n  .vuuExpandoInput .saltInput-activationIndicator {\n    display: none;\n  }\n  \n  .vuuExpandoInput-input {\n    background-color: transparent;\n    border: none;\n    box-sizing: content-box;\n    display: block;\n    flex: 1;\n    font: inherit;\n    height: 20px;\n    margin:0;\n    min-width:0;\n    outline: none;\n    padding: 0;\n  }\n  ";
+
+export { expandoInputCss as default };
+//# sourceMappingURL=ExpandoInput.css.js.map

package/esm/expando-input/ExpandoInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}