@vuu-ui/vuu-ui-controls 0.0.26

package/esm/common-hooks/useSelection.js

@@ -0,0 +1,205 @@
+import { getElementDataIndex, getElementByDataIndex, isSelectableElement } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+import { selectionIsDisallowed } from './selectionTypes.js';
+import { useControlled } from './useControlled.js';
+
+const CHECKBOX = "checkbox";
+const GROUP_SELECTION_NONE = "none";
+const GROUP_SELECTION_SINGLE = "single";
+const GROUP_SELECTION_CASCADE = "cascade";
+const defaultSelectionKeys = ["Enter", " "];
+const groupSelectionEnabled = (groupSelection) => groupSelection && groupSelection !== GROUP_SELECTION_NONE;
+const useSelection = ({
+  containerRef,
+  defaultSelected,
+  disableSelection = false,
+  // groupSelection = GROUP_SELECTION_NONE,
+  highlightedIndex,
+  itemQuery,
+  onClick,
+  // label,
+  onSelect,
+  onSelectionChange,
+  selected: selectedProp,
+  selectionStrategy,
+  selectionKeys = defaultSelectionKeys,
+  tabToSelect
+}) => {
+  const isDeselectable = selectionStrategy === "deselectable";
+  const isMultipleSelect = selectionStrategy === "multiple";
+  const isExtendedSelect = selectionStrategy === "extended";
+  const lastActive = useRef(-1);
+  const isSelectionEvent = useCallback(
+    (evt) => selectionKeys.includes(evt.key),
+    [selectionKeys]
+  );
+  const [selected, setSelected] = useControlled({
+    controlled: selectedProp,
+    default: defaultSelected ?? [],
+    name: "UseSelection",
+    state: "selected"
+  });
+  const isItemSelected = useCallback(
+    (itemId) => selected.includes(itemId),
+    [selected]
+  );
+  const selectDeselectable = useCallback(
+    (itemId) => isItemSelected(itemId) ? [] : [itemId],
+    [isItemSelected]
+  );
+  const selectMultiple = useCallback(
+    (itemId) => {
+      const nextItems = isItemSelected(itemId) ? selected.filter((i) => i !== itemId) : selected.concat(itemId);
+      nextItems.sort();
+      return nextItems;
+    },
+    [isItemSelected, selected]
+  );
+  const selectRange = useCallback(
+    (idx, preserveExistingSelection) => {
+      const currentSelection = preserveExistingSelection ? selected : [];
+      const [lastSelectedItemId] = selected.slice(-1);
+      const lastSelectedItemIndex = lastSelectedItemId ? getElementDataIndex(document.getElementById(lastSelectedItemId)) : 0;
+      const startRegion = Math.min(idx, lastSelectedItemIndex);
+      const endRegion = Math.max(idx, lastSelectedItemIndex);
+      const container = containerRef.current;
+      const allItems = Array.from(
+        container.querySelectorAll(itemQuery)
+      );
+      const rangeSelection = allItems.slice(startRegion, endRegion + 1).map((el) => el.id);
+      const nextItems = [.../* @__PURE__ */ new Set([...currentSelection, ...rangeSelection])];
+      nextItems.sort();
+      return nextItems;
+    },
+    [containerRef, itemQuery, selected]
+  );
+  const selectItemAtIndex = useCallback(
+    (evt, idx, rangeSelect, preserveExistingSelection) => {
+      const { current: container } = containerRef;
+      const { id } = getElementByDataIndex(container, idx, true);
+      let newSelected;
+      if (isMultipleSelect) {
+        newSelected = selectMultiple(id);
+      } else if (isExtendedSelect) {
+        if (preserveExistingSelection && !rangeSelect) {
+          newSelected = selectMultiple(id);
+        } else if (rangeSelect) {
+          newSelected = selectRange(idx, preserveExistingSelection);
+        } else {
+          newSelected = [id];
+        }
+      } else if (isDeselectable) {
+        newSelected = selectDeselectable(id);
+      } else {
+        newSelected = [id];
+      }
+      if (newSelected !== selected) {
+        setSelected(newSelected);
+      }
+      onSelect?.(evt, id);
+      if (newSelected !== selected) {
+        if (onSelectionChange) {
+          onSelectionChange(evt, newSelected);
+        }
+      }
+    },
+    [
+      containerRef,
+      isMultipleSelect,
+      isExtendedSelect,
+      isDeselectable,
+      selected,
+      onSelect,
+      selectMultiple,
+      selectRange,
+      selectDeselectable,
+      setSelected,
+      onSelectionChange
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      const { current: container } = containerRef;
+      const element = getElementByDataIndex(container, highlightedIndex);
+      if (isSelectableElement(element)) {
+        if (isSelectionEvent(evt) || tabToSelect && evt.key === "Tab") {
+          if (evt.key !== "Tab") {
+            evt.preventDefault();
+          }
+          selectItemAtIndex(
+            evt,
+            highlightedIndex,
+            false,
+            evt.ctrlKey || evt.metaKey
+          );
+          if (isExtendedSelect) {
+            lastActive.current = highlightedIndex;
+          }
+        }
+      }
+    },
+    [
+      highlightedIndex,
+      containerRef,
+      isSelectionEvent,
+      tabToSelect,
+      selectItemAtIndex,
+      isExtendedSelect
+    ]
+  );
+  const handleKeyboardNavigation = useCallback(
+    (evt, currentIndex) => {
+      if (isExtendedSelect && evt.shiftKey) {
+        const { current: container } = containerRef;
+        const element = getElementByDataIndex(container, currentIndex);
+        if (isSelectableElement(element)) {
+          selectItemAtIndex(evt, currentIndex, true);
+        }
+      }
+    },
+    [isExtendedSelect, containerRef, selectItemAtIndex]
+  );
+  const handleClick = useCallback(
+    (evt) => {
+      const { current: container } = containerRef;
+      const element = getElementByDataIndex(container, highlightedIndex);
+      if (!disableSelection && isSelectableElement(element)) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        selectItemAtIndex(
+          evt,
+          highlightedIndex,
+          evt.shiftKey,
+          evt.ctrlKey || evt.metaKey
+        );
+        if (isExtendedSelect) {
+          lastActive.current = highlightedIndex;
+        }
+      }
+      onClick?.(evt);
+    },
+    [
+      containerRef,
+      highlightedIndex,
+      disableSelection,
+      onClick,
+      selectItemAtIndex,
+      isExtendedSelect
+    ]
+  );
+  const listHandlers = selectionIsDisallowed(selectionStrategy) ? {
+    onClick
+  } : {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onKeyboardNavigation: handleKeyboardNavigation
+  };
+  return {
+    listHandlers,
+    selected,
+    setSelected
+  };
+};
+
+export { CHECKBOX, GROUP_SELECTION_CASCADE, GROUP_SELECTION_NONE, GROUP_SELECTION_SINGLE, groupSelectionEnabled, useSelection };
+//# sourceMappingURL=useSelection.js.map

package/esm/common-hooks/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sources":["../../src/common-hooks/useSelection.ts"],"sourcesContent":["import {\n  getElementByDataIndex,\n  getElementDataIndex,\n  isSelectableElement,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  SelectionHookProps,\n  SelectionHookResult,\n  selectionIsDisallowed,\n} from \"./selectionTypes\";\nimport { useControlled } from \"./useControlled\";\n\nexport const CHECKBOX = \"checkbox\";\n\nexport const GROUP_SELECTION_NONE = \"none\";\nexport const GROUP_SELECTION_SINGLE = \"single\";\nexport const GROUP_SELECTION_CASCADE = \"cascade\";\n\nexport type GroupSelectionMode = \"none\" | \"single\" | \"cascade\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport const groupSelectionEnabled = (\n  groupSelection: GroupSelectionMode\n): boolean => groupSelection && groupSelection !== GROUP_SELECTION_NONE;\n\nexport const useSelection = ({\n  containerRef,\n  defaultSelected,\n  disableSelection = false,\n  // groupSelection = GROUP_SELECTION_NONE,\n  highlightedIndex,\n  itemQuery,\n  onClick,\n  // label,\n  onSelect,\n  onSelectionChange,\n  selected: selectedProp,\n  selectionStrategy,\n  selectionKeys = defaultSelectionKeys,\n  tabToSelect,\n}: SelectionHookProps): SelectionHookResult => {\n  const isDeselectable = selectionStrategy === \"deselectable\";\n  const isMultipleSelect = selectionStrategy === \"multiple\";\n  const isExtendedSelect = selectionStrategy === \"extended\";\n  const lastActive = useRef(-1);\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => selectionKeys.includes(evt.key),\n    [selectionKeys]\n  );\n\n  const [selected, setSelected] = useControlled<string[]>({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"UseSelection\",\n    state: \"selected\",\n  });\n\n  const isItemSelected = useCallback(\n    (itemId: string) => selected.includes(itemId),\n    [selected]\n  );\n\n  const selectDeselectable = useCallback(\n    (itemId: string) => (isItemSelected(itemId) ? [] : [itemId]),\n    [isItemSelected]\n  );\n  const selectMultiple = useCallback(\n    (itemId: string) => {\n      const nextItems = isItemSelected(itemId)\n        ? (selected as string[]).filter((i) => i !== itemId)\n        : (selected as string[]).concat(itemId);\n      nextItems.sort();\n      return nextItems;\n    },\n    [isItemSelected, selected]\n  );\n  const selectRange = useCallback(\n    (idx: number, preserveExistingSelection?: boolean) => {\n      const currentSelection = preserveExistingSelection\n        ? (selected as string[])\n        : ([] as string[]);\n\n      const [lastSelectedItemId] = (selected as string[]).slice(-1);\n      const lastSelectedItemIndex = lastSelectedItemId\n        ? getElementDataIndex(document.getElementById(lastSelectedItemId))\n        : 0;\n\n      const startRegion = Math.min(idx, lastSelectedItemIndex);\n      const endRegion = Math.max(idx, lastSelectedItemIndex);\n\n      const container = containerRef.current as HTMLElement;\n      const allItems = Array.from(\n        container.querySelectorAll(itemQuery)\n      ) as HTMLElement[];\n      const rangeSelection = allItems\n        .slice(startRegion, endRegion + 1)\n        .map((el) => el.id);\n      // concat the current selection with a new selection and remove duplicates for overlaps\n      const nextItems = [...new Set([...currentSelection, ...rangeSelection])];\n      nextItems.sort();\n      return nextItems;\n    },\n    [containerRef, itemQuery, selected]\n  );\n\n  const selectItemAtIndex = useCallback(\n    (\n      evt: SyntheticEvent,\n      idx: number,\n      rangeSelect: boolean,\n      preserveExistingSelection?: boolean\n    ) => {\n      const { current: container } = containerRef;\n      const { id } = getElementByDataIndex(container, idx, true);\n\n      let newSelected;\n      if (isMultipleSelect) {\n        newSelected = selectMultiple(id);\n      } else if (isExtendedSelect) {\n        if (preserveExistingSelection && !rangeSelect) {\n          newSelected = selectMultiple(id);\n        } else if (rangeSelect) {\n          newSelected = selectRange(idx, preserveExistingSelection);\n        } else {\n          newSelected = [id];\n        }\n      } else if (isDeselectable) {\n        newSelected = selectDeselectable(id);\n      } else {\n        newSelected = [id];\n      }\n\n      if (newSelected !== selected) {\n        setSelected(newSelected);\n      }\n\n      // We fire onSelect irrespective of whether selection changes\n      onSelect?.(evt, id);\n\n      if (newSelected !== selected) {\n        if (onSelectionChange) {\n          onSelectionChange(evt, newSelected);\n        }\n      }\n    },\n    [\n      containerRef,\n      isMultipleSelect,\n      isExtendedSelect,\n      isDeselectable,\n      selected,\n      onSelect,\n      selectMultiple,\n      selectRange,\n      selectDeselectable,\n      setSelected,\n      onSelectionChange,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      const { current: container } = containerRef;\n      const element = getElementByDataIndex(container, highlightedIndex);\n      if (isSelectableElement(element)) {\n        if (isSelectionEvent(evt) || (tabToSelect && evt.key === \"Tab\")) {\n          // We do not inhibit Tab behaviour, if we are selecting on Tab then we apply\n          // selection as a side effect of the Tab, not as a replacement for Tabbing.\n          if (evt.key !== \"Tab\") {\n            evt.preventDefault();\n          }\n          selectItemAtIndex(\n            evt,\n            highlightedIndex,\n            false,\n            evt.ctrlKey || evt.metaKey\n          );\n          if (isExtendedSelect) {\n            lastActive.current = highlightedIndex;\n          }\n        }\n      }\n    },\n    [\n      highlightedIndex,\n      containerRef,\n      isSelectionEvent,\n      tabToSelect,\n      selectItemAtIndex,\n      isExtendedSelect,\n    ]\n  );\n\n  const handleKeyboardNavigation = useCallback(\n    (evt: KeyboardEvent, currentIndex: number) => {\n      if (isExtendedSelect && evt.shiftKey) {\n        const { current: container } = containerRef;\n        const element = getElementByDataIndex(container, currentIndex);\n        if (isSelectableElement(element)) {\n          selectItemAtIndex(evt, currentIndex, true);\n        }\n      }\n    },\n    [isExtendedSelect, containerRef, selectItemAtIndex]\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      const { current: container } = containerRef;\n      const element = getElementByDataIndex(container, highlightedIndex);\n      if (!disableSelection && isSelectableElement(element)) {\n        evt.preventDefault();\n        evt.stopPropagation();\n        selectItemAtIndex(\n          evt,\n          highlightedIndex,\n          evt.shiftKey,\n          evt.ctrlKey || evt.metaKey\n        );\n        if (isExtendedSelect) {\n          lastActive.current = highlightedIndex;\n        }\n      }\n      onClick?.(evt);\n    },\n    [\n      containerRef,\n      highlightedIndex,\n      disableSelection,\n      onClick,\n      selectItemAtIndex,\n      isExtendedSelect,\n    ]\n  );\n\n  const listHandlers = selectionIsDisallowed(selectionStrategy)\n    ? {\n        onClick,\n      }\n    : {\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onKeyboardNavigation: handleKeyboardNavigation,\n      };\n\n  return {\n    listHandlers,\n    selected,\n    setSelected,\n  };\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAW,GAAA,WAAA;AAEjB,MAAM,oBAAuB,GAAA,OAAA;AAC7B,MAAM,sBAAyB,GAAA,SAAA;AAC/B,MAAM,uBAA0B,GAAA,UAAA;AAIvC,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAEnC,MAAM,qBAAwB,GAAA,CACnC,cACY,KAAA,cAAA,IAAkB,cAAmB,KAAA,qBAAA;AAE5C,MAAM,eAAe,CAAC;AAAA,EAC3B,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAmB,GAAA,KAAA;AAAA;AAAA,EAEnB,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA;AAAA,EAEA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,aAAgB,GAAA,oBAAA;AAAA,EAChB,WAAA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,iBAAiB,iBAAsB,KAAA,cAAA,CAAA;AAC7C,EAAA,MAAM,mBAAmB,iBAAsB,KAAA,UAAA,CAAA;AAC/C,EAAA,MAAM,mBAAmB,iBAAsB,KAAA,UAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,CAAE,CAAA,CAAA,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,aAAc,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IACtD,CAAC,aAAa,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAwB,CAAA;AAAA,IACtD,UAAY,EAAA,YAAA;AAAA,IACZ,OAAA,EAAS,mBAAmB,EAAC;AAAA,IAC7B,IAAM,EAAA,cAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,MAAA,KAAmB,QAAS,CAAA,QAAA,CAAS,MAAM,CAAA;AAAA,IAC5C,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,WAAoB,cAAe,CAAA,MAAM,IAAI,EAAC,GAAI,CAAC,MAAM,CAAA;AAAA,IAC1D,CAAC,cAAc,CAAA;AAAA,GACjB,CAAA;AACA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,MAAmB,KAAA;AAClB,MAAA,MAAM,SAAY,GAAA,cAAA,CAAe,MAAM,CAAA,GAClC,QAAsB,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAM,KAAA,MAAM,CAChD,GAAA,QAAA,CAAsB,OAAO,MAAM,CAAA,CAAA;AACxC,MAAA,SAAA,CAAU,IAAK,EAAA,CAAA;AACf,MAAO,OAAA,SAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,gBAAgB,QAAQ,CAAA;AAAA,GAC3B,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAa,yBAAwC,KAAA;AACpD,MAAM,MAAA,gBAAA,GAAmB,yBACpB,GAAA,QAAA,GACA,EAAC,CAAA;AAEN,MAAA,MAAM,CAAC,kBAAkB,CAAK,GAAA,QAAA,CAAsB,MAAM,CAAE,CAAA,CAAA,CAAA;AAC5D,MAAA,MAAM,wBAAwB,kBAC1B,GAAA,mBAAA,CAAoB,SAAS,cAAe,CAAA,kBAAkB,CAAC,CAC/D,GAAA,CAAA,CAAA;AAEJ,MAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,GAAA,EAAK,qBAAqB,CAAA,CAAA;AACvD,MAAA,MAAM,SAAY,GAAA,IAAA,CAAK,GAAI,CAAA,GAAA,EAAK,qBAAqB,CAAA,CAAA;AAErD,MAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAA;AAC/B,MAAA,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,QACrB,SAAA,CAAU,iBAAiB,SAAS,CAAA;AAAA,OACtC,CAAA;AACA,MAAM,MAAA,cAAA,GAAiB,QACpB,CAAA,KAAA,CAAM,WAAa,EAAA,SAAA,GAAY,CAAC,CAAA,CAChC,GAAI,CAAA,CAAC,EAAO,KAAA,EAAA,CAAG,EAAE,CAAA,CAAA;AAEpB,MAAM,MAAA,SAAA,GAAY,CAAC,mBAAO,IAAA,GAAA,CAAI,CAAC,GAAG,gBAAkB,EAAA,GAAG,cAAc,CAAC,CAAC,CAAA,CAAA;AACvE,MAAA,SAAA,CAAU,IAAK,EAAA,CAAA;AACf,MAAO,OAAA,SAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,YAAc,EAAA,SAAA,EAAW,QAAQ,CAAA;AAAA,GACpC,CAAA;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CACE,GAAA,EACA,GACA,EAAA,WAAA,EACA,yBACG,KAAA;AACH,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA,CAAA;AAC/B,MAAA,MAAM,EAAE,EAAG,EAAA,GAAI,qBAAsB,CAAA,SAAA,EAAW,KAAK,IAAI,CAAA,CAAA;AAEzD,MAAI,IAAA,WAAA,CAAA;AACJ,MAAA,IAAI,gBAAkB,EAAA;AACpB,QAAA,WAAA,GAAc,eAAe,EAAE,CAAA,CAAA;AAAA,iBACtB,gBAAkB,EAAA;AAC3B,QAAI,IAAA,yBAAA,IAA6B,CAAC,WAAa,EAAA;AAC7C,UAAA,WAAA,GAAc,eAAe,EAAE,CAAA,CAAA;AAAA,mBACtB,WAAa,EAAA;AACtB,UAAc,WAAA,GAAA,WAAA,CAAY,KAAK,yBAAyB,CAAA,CAAA;AAAA,SACnD,MAAA;AACL,UAAA,WAAA,GAAc,CAAC,EAAE,CAAA,CAAA;AAAA,SACnB;AAAA,iBACS,cAAgB,EAAA;AACzB,QAAA,WAAA,GAAc,mBAAmB,EAAE,CAAA,CAAA;AAAA,OAC9B,MAAA;AACL,QAAA,WAAA,GAAc,CAAC,EAAE,CAAA,CAAA;AAAA,OACnB;AAEA,MAAA,IAAI,gBAAgB,QAAU,EAAA;AAC5B,QAAA,WAAA,CAAY,WAAW,CAAA,CAAA;AAAA,OACzB;AAGA,MAAA,QAAA,GAAW,KAAK,EAAE,CAAA,CAAA;AAElB,MAAA,IAAI,gBAAgB,QAAU,EAAA;AAC5B,QAAA,IAAI,iBAAmB,EAAA;AACrB,UAAA,iBAAA,CAAkB,KAAK,WAAW,CAAA,CAAA;AAAA,SACpC;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA,CAAA;AAC/B,MAAM,MAAA,OAAA,GAAU,qBAAsB,CAAA,SAAA,EAAW,gBAAgB,CAAA,CAAA;AACjE,MAAI,IAAA,mBAAA,CAAoB,OAAO,CAAG,EAAA;AAChC,QAAA,IAAI,iBAAiB,GAAG,CAAA,IAAM,WAAe,IAAA,GAAA,CAAI,QAAQ,KAAQ,EAAA;AAG/D,UAAI,IAAA,GAAA,CAAI,QAAQ,KAAO,EAAA;AACrB,YAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AAAA,WACrB;AACA,UAAA,iBAAA;AAAA,YACE,GAAA;AAAA,YACA,gBAAA;AAAA,YACA,KAAA;AAAA,YACA,GAAA,CAAI,WAAW,GAAI,CAAA,OAAA;AAAA,WACrB,CAAA;AACA,UAAA,IAAI,gBAAkB,EAAA;AACpB,YAAA,UAAA,CAAW,OAAU,GAAA,gBAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,wBAA2B,GAAA,WAAA;AAAA,IAC/B,CAAC,KAAoB,YAAyB,KAAA;AAC5C,MAAI,IAAA,gBAAA,IAAoB,IAAI,QAAU,EAAA;AACpC,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA,CAAA;AAC/B,QAAM,MAAA,OAAA,GAAU,qBAAsB,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAC7D,QAAI,IAAA,mBAAA,CAAoB,OAAO,CAAG,EAAA;AAChC,UAAkB,iBAAA,CAAA,GAAA,EAAK,cAAc,IAAI,CAAA,CAAA;AAAA,SAC3C;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,YAAA,EAAc,iBAAiB,CAAA;AAAA,GACpD,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAoB,KAAA;AACnB,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA,CAAA;AAC/B,MAAM,MAAA,OAAA,GAAU,qBAAsB,CAAA,SAAA,EAAW,gBAAgB,CAAA,CAAA;AACjE,MAAA,IAAI,CAAC,gBAAA,IAAoB,mBAAoB,CAAA,OAAO,CAAG,EAAA;AACrD,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,QAAA,iBAAA;AAAA,UACE,GAAA;AAAA,UACA,gBAAA;AAAA,UACA,GAAI,CAAA,QAAA;AAAA,UACJ,GAAA,CAAI,WAAW,GAAI,CAAA,OAAA;AAAA,SACrB,CAAA;AACA,QAAA,IAAI,gBAAkB,EAAA;AACpB,UAAA,UAAA,CAAW,OAAU,GAAA,gBAAA,CAAA;AAAA,SACvB;AAAA,OACF;AACA,MAAA,OAAA,GAAU,GAAG,CAAA,CAAA;AAAA,KACf;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,qBAAsB,CAAA,iBAAiB,CACxD,GAAA;AAAA,IACE,OAAA;AAAA,GAEF,GAAA;AAAA,IACE,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA,aAAA;AAAA,IACX,oBAAsB,EAAA,wBAAA;AAAA,GACxB,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/common-hooks/useStateRef.js

@@ -0,0 +1,21 @@
+import { useState, useRef, useCallback } from 'react';
+
+const isSimpleStateValue = (arg) => typeof arg !== "function";
+const useStateRef = (initialValue) => {
+  const [value, _setValue] = useState(initialValue);
+  const ref = useRef(value);
+  const setValue = useCallback((arg) => {
+    if (isSimpleStateValue(arg)) {
+      ref.current = arg;
+      _setValue(arg);
+    } else {
+      const { current: prev } = ref;
+      ref.current = arg(prev);
+      _setValue(ref.current);
+    }
+  }, []);
+  return [ref, setValue];
+};
+
+export { useStateRef };
+//# sourceMappingURL=useStateRef.js.map

package/esm/common-hooks/useStateRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateRef.js","sources":["../../src/common-hooks/useStateRef.ts"],"sourcesContent":["import {\n  Dispatch,\n  MutableRefObject,\n  SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nconst isSimpleStateValue = <T>(arg: SetStateAction<T>): arg is T =>\n  typeof arg !== \"function\";\n\n// Keeps a ref value in sync with a state value\nexport const useStateRef = <T = string>(\n  initialValue: T\n): [MutableRefObject<T>, Dispatch<SetStateAction<T>>] => {\n  const [value, _setValue] = useState<T>(initialValue);\n  const ref = useRef<T>(value);\n\n  const setValue = useCallback<Dispatch<SetStateAction<T>>>((arg) => {\n    if (isSimpleStateValue(arg)) {\n      ref.current = arg;\n      _setValue(arg);\n    } else {\n      const { current: prev } = ref;\n      ref.current = arg(prev);\n      _setValue(ref.current);\n    }\n  }, []);\n  return [ref, setValue];\n};\n"],"names":[],"mappings":";;AASA,MAAM,kBAAqB,GAAA,CAAI,GAC7B,KAAA,OAAO,GAAQ,KAAA,UAAA,CAAA;AAGJ,MAAA,WAAA,GAAc,CACzB,YACuD,KAAA;AACvD,EAAA,MAAM,CAAC,KAAA,EAAO,SAAS,CAAA,GAAI,SAAY,YAAY,CAAA,CAAA;AACnD,EAAM,MAAA,GAAA,GAAM,OAAU,KAAK,CAAA,CAAA;AAE3B,EAAM,MAAA,QAAA,GAAW,WAAyC,CAAA,CAAC,GAAQ,KAAA;AACjE,IAAI,IAAA,kBAAA,CAAmB,GAAG,CAAG,EAAA;AAC3B,MAAA,GAAA,CAAI,OAAU,GAAA,GAAA,CAAA;AACd,MAAA,SAAA,CAAU,GAAG,CAAA,CAAA;AAAA,KACR,MAAA;AACL,MAAM,MAAA,EAAE,OAAS,EAAA,IAAA,EAAS,GAAA,GAAA,CAAA;AAC1B,MAAI,GAAA,CAAA,OAAA,GAAU,IAAI,IAAI,CAAA,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AAAA,KACvB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AACL,EAAO,OAAA,CAAC,KAAK,QAAQ,CAAA,CAAA;AACvB;;;;"}

package/esm/cycle-state-button/CycleStateButton.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import cx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+
+const classBase = "vuuCycleStateButton";
+const getNextValue = (value, valueList) => {
+  const index = valueList.map((v) => v.toUpperCase()).indexOf(value.toUpperCase());
+  if (index === valueList.length - 1) {
+    return valueList[0];
+  } else {
+    return valueList[index + 1];
+  }
+};
+const CycleStateButton = forwardRef(function CycleStateButton2({
+  className,
+  onChange,
+  onCommit,
+  value = "",
+  values,
+  ...buttonProps
+}, forwardedRef) {
+  const handleClick = useCallback(
+    (evt) => {
+      const nextValue = getNextValue(value, values);
+      onChange?.(nextValue);
+      onCommit?.(evt, nextValue).then((response) => {
+        if (response !== true) {
+          console.error(response);
+        }
+      });
+    },
+    [onChange, onCommit, value, values]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      className: cx(
+        classBase,
+        className,
+        `${classBase}-${value.toLowerCase()}`
+      ),
+      onClick: handleClick,
+      ref: forwardedRef,
+      children: value
+    }
+  );
+});
+
+export { CycleStateButton };
+//# sourceMappingURL=CycleStateButton.js.map

package/esm/cycle-state-button/CycleStateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CycleStateButton.js","sources":["../../src/cycle-state-button/CycleStateButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport type { CommitResponse } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  VuuColumnDataType,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport { ForwardedRef, forwardRef, SyntheticEvent, useCallback } from \"react\";\n\nconst classBase = \"vuuCycleStateButton\";\n\nexport type CycleStateCommitHandler = (\n  evt: SyntheticEvent,\n  value: VuuRowDataItemType\n) => CommitResponse;\n\nexport interface CycleStateButtonProps extends Omit<ButtonProps, \"onChange\"> {\n  onChange?: (value: VuuRowDataItemType) => void;\n  onCommit?: CycleStateCommitHandler;\n  values: string[];\n  value: string;\n}\n\nconst getNextValue = (value: string, valueList: string[]) => {\n  const index = valueList\n    .map((v) => v.toUpperCase())\n    .indexOf(value.toUpperCase());\n  if (index === valueList.length - 1) {\n    return valueList[0];\n  } else {\n    return valueList[index + 1];\n  }\n};\n\nexport const CycleStateButton = forwardRef(function CycleStateButton(\n  {\n    className,\n    onChange,\n    onCommit,\n    value = \"\",\n    values,\n    ...buttonProps\n  }: CycleStateButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const handleClick = useCallback(\n    (evt: SyntheticEvent<HTMLButtonElement>) => {\n      const nextValue = getNextValue(value, values);\n      onChange?.(nextValue);\n      onCommit?.(evt, nextValue as VuuColumnDataType).then((response) => {\n        if (response !== true) {\n          console.error(response);\n        }\n      });\n    },\n    [onChange, onCommit, value, values]\n  );\n\n  return (\n    <Button\n      {...buttonProps}\n      className={cx(\n        classBase,\n        className,\n        `${classBase}-${value.toLowerCase()}`\n      )}\n      onClick={handleClick}\n      ref={forwardedRef}\n    >\n      {value}\n    </Button>\n  );\n});\n"],"names":["CycleStateButton"],"mappings":";;;;;AASA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAclB,MAAM,YAAA,GAAe,CAAC,KAAA,EAAe,SAAwB,KAAA;AAC3D,EAAA,MAAM,KAAQ,GAAA,SAAA,CACX,GAAI,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,WAAY,EAAC,CAC1B,CAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,EAAa,CAAA,CAAA;AAC9B,EAAI,IAAA,KAAA,KAAU,SAAU,CAAA,MAAA,GAAS,CAAG,EAAA;AAClC,IAAA,OAAO,UAAU,CAAC,CAAA,CAAA;AAAA,GACb,MAAA;AACL,IAAO,OAAA,SAAA,CAAU,QAAQ,CAAC,CAAA,CAAA;AAAA,GAC5B;AACF,CAAA,CAAA;AAEa,MAAA,gBAAA,GAAmB,UAAW,CAAA,SAASA,iBAClD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAQ,GAAA,EAAA;AAAA,EACR,MAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAA2C,KAAA;AAC1C,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAC5C,MAAA,QAAA,GAAW,SAAS,CAAA,CAAA;AACpB,MAAA,QAAA,GAAW,GAAK,EAAA,SAA8B,CAAE,CAAA,IAAA,CAAK,CAAC,QAAa,KAAA;AACjE,QAAA,IAAI,aAAa,IAAM,EAAA;AACrB,UAAA,OAAA,CAAQ,MAAM,QAAQ,CAAA,CAAA;AAAA,SACxB;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,QAAA,EAAU,QAAU,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GACpC,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA,SAAA;AAAA,QACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,KAAA,CAAM,aAAa,CAAA,CAAA;AAAA,OACrC;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC;;;;"}

package/esm/date-input/DateInput.css.js

@@ -0,0 +1,4 @@
+var dateInputCss = ".vuuDateInput {\n  border: solid 1px var(--salt-editable-borderColor);\n  display: inline-flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  gap: 1px;\n  padding: 0 0 0 2px;\n\n\n  .saltInput-input {\n    border: none;\n    outline: none;\n    padding-left: 0;\n  }\n}\n\n.vuuDateInput-calendar {\n  padding: 2px;\n}\n\n.vuuDatePickerInput:focus {\n  outline: none;\n}\n\ninput[type=\"date\"]{\n  font-family: var(--salt-typography-fontFamily);\n  min-width: 80px;\n}\n\ninput[type=\"date\"]::-webkit-calendar-picker-indicator {\n  display: none;\n}\n";
+
+export { dateInputCss as default };
+//# sourceMappingURL=DateInput.css.js.map

package/esm/date-input/DateInput.css.js.map

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

package/esm/date-input/DateInput.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { toCalendarDate } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { useRef, useCallback } from 'react';
+import { DatePopup } from '../date-popup/DatePopup.js';
+import { useDatePicker } from './useDatePicker.js';
+import dateInputCss from './DateInput.css.js';
+
+const classBase = "vuuDateInput";
+const DateInput = ({
+  inputProps,
+  selectedDate,
+  onChange,
+  onBlur,
+  className,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-data-input",
+    css: dateInputCss,
+    window: targetWindow
+  });
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const popupRef = useRef(null);
+  const onInputChange = useCallback(
+    (e) => {
+      const v = e.target.value;
+      if (v === "")
+        return;
+      else
+        onChange(toCalendarDate(new Date(v)), "input");
+    },
+    [onChange]
+  );
+  const onKeyDown = useCallback((e) => {
+    if (e.key === "Tab" && !e.shiftKey) {
+      requestAnimationFrame(() => {
+        popupRef.current?.focus();
+      });
+    }
+  }, []);
+  const onChangeCalendar = useCallback(
+    (date) => {
+      onChange(date, "calendar");
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: clsx(classBase, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            "aria-label": "date-input",
+            className: clsx("saltInput-input", classBase),
+            type: "date",
+            value: selectedDate?.toString() ?? "",
+            onChange: onInputChange,
+            onKeyDown,
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePopup,
+          {
+            "data-embedded": true,
+            onBlur,
+            onChange: onChangeCalendar,
+            ref: popupRef,
+            selectedDate,
+            selectionVariant: "default"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { DateInput };
+//# sourceMappingURL=DateInput.js.map

package/esm/date-input/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sources":["../../src/date-input/DateInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { DateValue } from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { CalendarProps } from \"../calendar/Calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport dateInputCss from \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;\n  onChange: (selected: DateValue, source: \"input\" | \"calendar\") => void;\n  selectedDate: DateValue | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateInput = ({\n  inputProps,\n  selectedDate,\n  onChange,\n  onBlur,\n  className,\n  ...htmlAttributes\n}: DateInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-data-input\",\n    css: dateInputCss,\n    window: targetWindow,\n  });\n\n  const { handleOnBlur } = useDatePicker({ onBlur });\n  const popupRef = useRef<HTMLButtonElement>(null);\n  const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const v = e.target.value;\n      if (v === \"\") return;\n      else onChange(toCalendarDate(new Date(v)), \"input\");\n    },\n    [onChange]\n  );\n\n  const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((e) => {\n    if (e.key === \"Tab\" && !e.shiftKey) {\n      requestAnimationFrame(() => {\n        popupRef.current?.focus();\n      });\n    }\n  }, []);\n\n  const onChangeCalendar = useCallback(\n    (date: DateValue) => {\n      onChange(date, \"calendar\");\n    },\n    [onChange]\n  );\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        {...inputProps}\n        aria-label=\"date-input\"\n        className={clsx(\"saltInput-input\", classBase)}\n        type=\"date\"\n        value={selectedDate?.toString() ?? \"\"}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        data-embedded\n        onBlur={onBlur}\n        onChange={onChangeCalendar}\n        ref={popupRef}\n        selectedDate={selectedDate}\n        selectionVariant=\"default\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAiBA,MAAM,SAAY,GAAA,cAAA,CAAA;AAaX,MAAM,YAAY,CAAC;AAAA,EACxB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAa,EAAA,GAAI,aAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAW,OAA0B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,IAAI,CAAM,KAAA,EAAA;AAAI,QAAA,OAAA;AAAA;AACT,QAAA,QAAA,CAAS,eAAe,IAAI,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,WAAoD,CAAA,CAAC,CAAM,KAAA;AAC3E,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,EAAE,QAAU,EAAA;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACnB,MAAA,QAAA,CAAS,MAAM,UAAU,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,IAAK,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACpC,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,YAAW,EAAA,YAAA;AAAA,YACX,SAAA,EAAW,IAAK,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,YAC5C,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,YAAc,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,YACnC,QAAU,EAAA,aAAA;AAAA,YACV,SAAA;AAAA,YACA,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,MAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,YAAA;AAAA,YACA,gBAAiB,EAAA,SAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/date-input/DateRangeInput.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { toCalendarDate } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useCallback } from 'react';
+import { DatePopup } from '../date-popup/DatePopup.js';
+import { useDatePicker } from './useDatePicker.js';
+
+const classBase = "vuuDateInput";
+const DateRangeInput = ({
+  selectedDateRange,
+  onChange,
+  className,
+  onBlur
+}) => {
+  const { handleOnBlur } = useDatePicker({ onBlur });
+  const getHandleInputChange = useCallback(
+    (k) => (e) => {
+      const v = e.target.value;
+      onChange({ ...selectedDateRange, [k]: toCalendarDate(new Date(v)) });
+    },
+    [selectedDateRange, onChange]
+  );
+  const handleDateInputChange = useCallback(
+    (dateRange) => {
+      console.log("date range change", {
+        dateRange
+      });
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("saltInput saltInput-primary", classBase, className),
+      onBlur: handleOnBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: cx("saltInput-input", classBase, className),
+            type: "date",
+            value: selectedDateRange?.["startDate"]?.toString() ?? "",
+            onChange: getHandleInputChange("startDate"),
+            "aria-label": "date-input",
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: "\u2014" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: cx("saltInput-input", classBase, className),
+            type: "date",
+            value: selectedDateRange?.["endDate"]?.toString() ?? "",
+            onChange: getHandleInputChange("endDate"),
+            "aria-label": "date-input",
+            max: "9999-12-31"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePopup,
+          {
+            onBlur,
+            onChange: handleDateInputChange,
+            selectedDate: selectedDateRange?.["startDate"],
+            selectionVariant: "range"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { DateRangeInput };
+//# sourceMappingURL=DateRangeInput.js.map

package/esm/date-input/DateRangeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.js","sources":["../../src/date-input/DateRangeInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { ChangeEventHandler, HTMLAttributes, useCallback } from \"react\";\nimport { CalendarProps, RangeSelectionValueType } from \"../calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateRangeInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: (selectedDateRange: RangeSelectionValueType) => void;\n  selectedDateRange: RangeSelectionValueType | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateRangeInput = ({\n  selectedDateRange,\n  onChange,\n  className,\n  onBlur,\n}: DateRangeInputProps) => {\n  const { handleOnBlur } = useDatePicker({ onBlur });\n\n  const getHandleInputChange = useCallback(\n    (k: keyof RangeSelectionValueType): ChangeEventHandler<HTMLInputElement> =>\n      (e) => {\n        const v = e.target.value;\n        onChange({ ...selectedDateRange, [k]: toCalendarDate(new Date(v)) });\n      },\n    [selectedDateRange, onChange]\n  );\n\n  const handleDateInputChange = useCallback(\n    (dateRange: RangeSelectionValueType) => {\n      console.log(\"date range change\", {\n        dateRange,\n      });\n    },\n    []\n  );\n\n  return (\n    <div\n      className={cx(\"saltInput saltInput-primary\", classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        className={cx(\"saltInput-input\", classBase, className)}\n        type=\"date\"\n        value={selectedDateRange?.[\"startDate\"]?.toString() ?? \"\"}\n        onChange={getHandleInputChange(\"startDate\")}\n        aria-label=\"date-input\"\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n      <span>—</span>\n      <input\n        className={cx(\"saltInput-input\", classBase, className)}\n        type=\"date\"\n        value={selectedDateRange?.[\"endDate\"]?.toString() ?? \"\"}\n        onChange={getHandleInputChange(\"endDate\")}\n        aria-label=\"date-input\"\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        onBlur={onBlur}\n        onChange={handleDateInputChange as any}\n        selectedDate={selectedDateRange?.[\"startDate\"]}\n        selectionVariant=\"range\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,YAAa,EAAA,GAAI,aAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AAEjD,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,CACC,KAAA,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,QAAA,CAAS,EAAE,GAAG,iBAAmB,EAAA,CAAC,CAAC,GAAG,cAAe,CAAA,IAAI,IAAK,CAAA,CAAC,CAAC,CAAA,EAAG,CAAA,CAAA;AAAA,KACrE;AAAA,IACF,CAAC,mBAAmB,QAAQ,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,SAAuC,KAAA;AACtC,MAAA,OAAA,CAAQ,IAAI,mBAAqB,EAAA;AAAA,QAC/B,SAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,6BAA+B,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACjE,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA,CAAG,iBAAmB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,YACrD,IAAK,EAAA,MAAA;AAAA,YACL,KAAO,EAAA,iBAAA,GAAoB,WAAW,CAAA,EAAG,UAAc,IAAA,EAAA;AAAA,YACvD,QAAA,EAAU,qBAAqB,WAAW,CAAA;AAAA,YAC1C,YAAW,EAAA,YAAA;AAAA,YACX,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBACA,GAAA,CAAC,UAAK,QAAC,EAAA,QAAA,EAAA,CAAA;AAAA,wBACP,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA,CAAG,iBAAmB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,YACrD,IAAK,EAAA,MAAA;AAAA,YACL,KAAO,EAAA,iBAAA,GAAoB,SAAS,CAAA,EAAG,UAAc,IAAA,EAAA;AAAA,YACrD,QAAA,EAAU,qBAAqB,SAAS,CAAA;AAAA,YACxC,YAAW,EAAA,YAAA;AAAA,YACX,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,QAAU,EAAA,qBAAA;AAAA,YACV,YAAA,EAAc,oBAAoB,WAAW,CAAA;AAAA,YAC7C,gBAAiB,EAAA,OAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/date-input/useDatePicker.js

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+
+function useDatePicker({ onBlur }) {
+  const handleOnBlur = useCallback(
+    (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        onBlur?.();
+      }
+    },
+    [onBlur]
+  );
+  return {
+    handleOnBlur
+  };
+}
+
+export { useDatePicker };
+//# sourceMappingURL=useDatePicker.js.map

package/esm/date-input/useDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePicker.js","sources":["../../src/date-input/useDatePicker.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\nexport interface DatePickerHookProps {\n  onBlur?: () => void;\n}\n\nexport function useDatePicker({ onBlur }: DatePickerHookProps) {\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!e.currentTarget.contains(e.relatedTarget)) {\n        onBlur?.();\n      }\n    },\n    [onBlur]\n  );\n\n  return {\n    handleOnBlur,\n  };\n}\n"],"names":[],"mappings":";;AAMgB,SAAA,aAAA,CAAc,EAAE,MAAA,EAA+B,EAAA;AAC7D,EAAA,MAAM,YAAwD,GAAA,WAAA;AAAA,IAC5D,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,CAAC,CAAE,CAAA,aAAA,CAAc,QAAS,CAAA,CAAA,CAAE,aAAa,CAAG,EAAA;AAC9C,QAAS,MAAA,IAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/date-popup/DatePopup.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getLocalTimeZone, today as today$1 } from '@internationalized/date';
+import { useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import '../calendar/internal/CalendarContext.js';
+import '../calendar/internal/utils.js';
+import '../calendar/useSelection.js';
+import { DropdownBase } from '../dropdown/DropdownBase.js';
+import '../dropdown/DropdownButton.js';
+import '../dropdown/Dropdown.js';
+import '../common-hooks/collectionProvider.js';
+import '../common-hooks/use-resize-observer.js';
+import '@vuu-ui/vuu-utils';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+import { IconButton } from '../icon-button/IconButton.js';
+import { useDatePopup } from './useDatePopup.js';
+
+const classBase = "vuuDatePopup";
+const tz = getLocalTimeZone();
+const today = today$1(tz);
+const DatePopup = forwardRef(
+  function DatePopup2({
+    selectedDate,
+    onChange,
+    onPopupClose,
+    onPopupOpen,
+    selectionVariant,
+    "data-embedded": dataEmbedded,
+    ...htmlAttributes
+  }, forwardedRef) {
+    const {
+      calendarRef,
+      date,
+      isOpen,
+      onSelectedDateChange,
+      onVisibleMonthChange,
+      handleOpenChange,
+      triggererRef,
+      visibleMonth
+    } = useDatePopup({
+      onChange,
+      onPopupClose,
+      onPopupOpen,
+      selectedDate: selectedDate || today,
+      selectionVariant
+    });
+    return /* @__PURE__ */ jsxs(
+      DropdownBase,
+      {
+        ...htmlAttributes,
+        className: classBase,
+        isOpen,
+        placement: "below",
+        onOpenChange: handleOpenChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "data-embedded": dataEmbedded,
+              icon: "date",
+              ref: useForkRef(forwardedRef, triggererRef),
+              variant: "secondary",
+              className: cx({ "saltButton-active": isOpen })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              visibleMonth,
+              ref: calendarRef,
+              selectedDate: date,
+              selectionVariant: "default",
+              onSelectedDateChange,
+              onVisibleMonthChange,
+              className: `${classBase}-calendar`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { DatePopup };
+//# sourceMappingURL=DatePopup.js.map

package/esm/date-popup/DatePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getTodayDate","DatePopup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAK,gBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQA,QAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACE,YAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}