@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/esm/toolbar/useToolbar.js

@@ -0,0 +1,98 @@
+import { isValidNumber } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useSelection } from './useSelection.js';
+
+const useToolbar = ({
+  activeItemIndex: activeItemIndexProp,
+  defaultActiveItemIndex,
+  containerRef,
+  itemQuery = "vuuToolbarItem",
+  onActiveChange,
+  onNavigateOutOfBounds,
+  orientation,
+  selectionStrategy
+}) => {
+  const lastSelection = useRef(activeItemIndexProp);
+  const {
+    focusItem: keyboardHookFocusItem,
+    highlightedIdx,
+    onClick: keyboardHookHandleClick,
+    onKeyDown: keyboardHookHandleKeyDown,
+    setHighlightedIdx: keyboardHookSetHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation({
+    containerRef,
+    onNavigateOutOfBounds,
+    orientation
+  });
+  const {
+    activateItem: selectionHookActivateItem,
+    itemHandlers: { onClick, onKeyDown },
+    selected: selectionHookSelected
+  } = useSelection({
+    containerRef,
+    defaultSelected: defaultActiveItemIndex,
+    highlightedIdx,
+    itemQuery,
+    onSelectionChange: onActiveChange,
+    selected: activeItemIndexProp,
+    selectionStrategy
+  });
+  lastSelection.current = selectionHookSelected;
+  const handleClick = useCallback(
+    (evt) => {
+      const target = evt.target;
+      const toolbarItem = target.closest("[data-index]");
+      if (toolbarItem) {
+        const index = parseInt(toolbarItem.dataset.index ?? "-1");
+        if (index !== -1 && isValidNumber(index)) {
+          keyboardHookHandleClick(evt, index);
+          onClick?.(evt, index);
+        }
+      }
+    },
+    [keyboardHookHandleClick, onClick]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      keyboardHookHandleKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        onKeyDown?.(evt);
+      }
+    },
+    [keyboardHookHandleKeyDown, onKeyDown]
+  );
+  const onSwitchWrappedItemIntoView = useCallback(
+    (item) => {
+      const index = parseInt(item.index);
+      if (!isNaN(index)) {
+        selectionHookActivateItem(index);
+        keyboardHookFocusItem(index);
+      }
+    },
+    [keyboardHookFocusItem, selectionHookActivateItem]
+  );
+  const itemProps = {
+    onClick: handleClick,
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  return {
+    activeItemIndex: selectionHookSelected,
+    focusableIdx: keyboardHook.focusableIdx,
+    focusVisible: keyboardHook.focusVisible,
+    containerProps: {
+      PopupMenuProps: {
+        onKeyDown: handleKeyDown,
+        onMenuClose: keyboardHook.onOverflowMenuClose
+      },
+      ...keyboardHook.containerProps,
+      onSwitchWrappedItemIntoView
+    },
+    itemProps
+  };
+};
+
+export { useToolbar };
+//# sourceMappingURL=useToolbar.js.map

package/esm/toolbar/useToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbar.js","sources":["../../../../packages/vuu-ui-controls/src/toolbar/useToolbar.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { OverflowItem } from \"../overflow-container\";\nimport { ToolbarProps } from \"./Toolbar\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nexport interface ToolbarHookProps\n  extends Pick<\n      ToolbarProps,\n      | \"activeItemIndex\"\n      | \"defaultActiveItemIndex\"\n      | \"onActiveChange\"\n      | \"onNavigateOutOfBounds\"\n    >,\n    Required<Pick<ToolbarProps, \"orientation\" | \"selectionStrategy\">> {\n  containerRef: RefObject<HTMLElement | null>;\n  itemQuery?: string;\n}\n\nexport const useToolbar = ({\n  activeItemIndex: activeItemIndexProp,\n  defaultActiveItemIndex,\n  containerRef,\n  itemQuery = \"vuuToolbarItem\",\n  onActiveChange,\n  onNavigateOutOfBounds,\n  orientation,\n  selectionStrategy,\n}: ToolbarHookProps) => {\n  const lastSelection = useRef(activeItemIndexProp);\n\n  const {\n    focusItem: keyboardHookFocusItem,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    onNavigateOutOfBounds,\n    orientation,\n  });\n\n  const {\n    activateItem: selectionHookActivateItem,\n    itemHandlers: { onClick, onKeyDown },\n    selected: selectionHookSelected,\n  } = useSelection({\n    containerRef,\n    defaultSelected: defaultActiveItemIndex,\n    highlightedIdx,\n    itemQuery,\n    onSelectionChange: onActiveChange,\n    selected: activeItemIndexProp,\n    selectionStrategy,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const toolbarItem = target.closest(\"[data-index]\") as HTMLElement;\n      if (toolbarItem) {\n        const index = parseInt(toolbarItem.dataset.index ?? \"-1\");\n        if (index !== -1 && isValidNumber(index)) {\n          keyboardHookHandleClick(evt, index);\n          onClick?.(evt, index);\n        }\n      }\n    },\n    [keyboardHookHandleClick, onClick],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [keyboardHookHandleKeyDown, onKeyDown],\n  );\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        //TODO need to be able to reset the overflow-priority without selecting the item\n        selectionHookActivateItem(index);\n        keyboardHookFocusItem(index);\n      }\n    },\n    [keyboardHookFocusItem, selectionHookActivateItem],\n  );\n\n  const itemProps = {\n    onClick: handleClick,\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  return {\n    activeItemIndex: selectionHookSelected,\n    focusableIdx: keyboardHook.focusableIdx,\n    focusVisible: keyboardHook.focusVisible,\n    containerProps: {\n      PopupMenuProps: {\n        onKeyDown: handleKeyDown,\n        onMenuClose: keyboardHook.onOverflowMenuClose,\n      },\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    itemProps,\n  };\n};\n"],"names":[],"mappings":"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"}

package/{src → esm}/utils/escapeRegExp.js

@@ -1,5 +1,7 @@
 const regExp = /[.*+?^${}()|[\]\\]/g;
 function escapeRegExp(string) {
-    return string.replace(regExp, "\\$&");
+  return string.replace(regExp, "\\$&");
 }
+
 export { escapeRegExp };
+//# sourceMappingURL=escapeRegExp.js.map

package/esm/utils/escapeRegExp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeRegExp.js","sources":["../../../../packages/vuu-ui-controls/src/utils/escapeRegExp.ts"],"sourcesContent":["const regExp = /[.*+?^${}()|[\\]\\\\]/g;\n\nexport function escapeRegExp(string: string): string {\n  return string.replace(regExp, \"\\\\$&\");\n}\n"],"names":[],"mappings":"AAAA,MAAM,MAAS,GAAA,qBAAA;AAER,SAAS,aAAa,MAAwB,EAAA;AACnD,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,MAAA,EAAQ,MAAM,CAAA;AACtC;;;;"}

package/esm/utils/forwardCallbackProps.js

@@ -0,0 +1,20 @@
+const forwardCallbackProps = (ownProps, overrideProps) => {
+  const props = Object.keys(ownProps).reduce(
+    (map, name) => {
+      const ownProp = ownProps[name];
+      const overrideProp = overrideProps[name];
+      if (typeof ownProp === "function" && typeof overrideProp === "function") {
+        map[name] = (...args) => {
+          ownProp(...args);
+          overrideProp(...args);
+        };
+      }
+      return map;
+    },
+    { ...overrideProps }
+  );
+  return props;
+};
+
+export { forwardCallbackProps };
+//# sourceMappingURL=forwardCallbackProps.js.map

package/esm/utils/forwardCallbackProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forwardCallbackProps.js","sources":["../../../../packages/vuu-ui-controls/src/utils/forwardCallbackProps.ts"],"sourcesContent":["/*\n  When we clone a React element and inject props, if any of these are\n  callback props, make sure original callback props are also invoked.\n\n React.cloneElement(\n    element,\n    forwardCallbackProps(element.props, overrideProps)\n  )\n */\n\ntype Props = Record<string, unknown>;\n\nexport const forwardCallbackProps = <P1 extends Props, P2 extends Props>(\n  ownProps: P1,\n  overrideProps: P2\n): P1 & P2 => {\n  const props = Object.keys(ownProps).reduce<Props>(\n    (map, name) => {\n      const ownProp = ownProps[name];\n      const overrideProp = overrideProps[name];\n      if (typeof ownProp === \"function\" && typeof overrideProp === \"function\") {\n        map[name] = (...args: unknown[]) => {\n          ownProp(...args);\n          overrideProp(...args);\n        };\n      }\n      return map;\n    },\n    { ...overrideProps }\n  );\n\n  return props as P1 & P2;\n};\n"],"names":[],"mappings":"AAYa,MAAA,oBAAA,GAAuB,CAClC,QAAA,EACA,aACY,KAAA;AACZ,EAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,IAClC,CAAC,KAAK,IAAS,KAAA;AACb,MAAM,MAAA,OAAA,GAAU,SAAS,IAAI,CAAA;AAC7B,MAAM,MAAA,YAAA,GAAe,cAAc,IAAI,CAAA;AACvC,MAAA,IAAI,OAAO,OAAA,KAAY,UAAc,IAAA,OAAO,iBAAiB,UAAY,EAAA;AACvE,QAAI,GAAA,CAAA,IAAI,CAAI,GAAA,CAAA,GAAI,IAAoB,KAAA;AAClC,UAAA,OAAA,CAAQ,GAAG,IAAI,CAAA;AACf,UAAA,YAAA,CAAa,GAAG,IAAI,CAAA;AAAA,SACtB;AAAA;AAEF,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,EAAE,GAAG,aAAc;AAAA,GACrB;AAEA,EAAO,OAAA,KAAA;AACT;;;;"}

package/esm/utils/isOverflowElement.js

@@ -0,0 +1,6 @@
+const isOverflowElement = (element) => element !== null && element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains(
+  "vuuOverflowContainer-wrapContainer-overflowed"
+);
+
+export { isOverflowElement };
+//# sourceMappingURL=isOverflowElement.js.map

package/esm/utils/isOverflowElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isOverflowElement.js","sources":["../../../../packages/vuu-ui-controls/src/utils/isOverflowElement.ts"],"sourcesContent":["// TODO this is very fragile\nexport const isOverflowElement = (element: HTMLElement | null) =>\n  element !== null &&\n  element.dataset.index === \"overflow\" &&\n  element.parentElement !== null &&\n  element.parentElement.classList.contains(\n    \"vuuOverflowContainer-wrapContainer-overflowed\"\n  );\n"],"names":[],"mappings":"AACO,MAAM,iBAAoB,GAAA,CAAC,OAChC,KAAA,OAAA,KAAY,QACZ,OAAQ,CAAA,OAAA,CAAQ,KAAU,KAAA,UAAA,IAC1B,OAAQ,CAAA,aAAA,KAAkB,IAC1B,IAAA,OAAA,CAAQ,cAAc,SAAU,CAAA,QAAA;AAAA,EAC9B;AACF;;;;"}

package/esm/utils/isPlainObject.js

@@ -0,0 +1,4 @@
+const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
+
+export { isPlainObject };
+//# sourceMappingURL=isPlainObject.js.map

package/esm/utils/isPlainObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isPlainObject.js","sources":["../../../../packages/vuu-ui-controls/src/utils/isPlainObject.ts"],"sourcesContent":["export const isPlainObject = (obj: Record<never, never>): boolean =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":"AAAa,MAAA,aAAA,GAAgB,CAAC,GAC5B,KAAA,MAAA,CAAO,UAAU,QAAS,CAAA,IAAA,CAAK,GAAG,CAAM,KAAA;;;;"}

package/esm/vuu-date-picker/VuuDatePicker.js

@@ -0,0 +1,120 @@
+import { useState, useRef, useCallback, createElement } from 'react';
+import { getLocalTimeZone, isSameDay, isSameMonth, isSameYear } from '@internationalized/date';
+import cx from 'clsx';
+import { DatePicker } from '../date-picker/DatePicker.js';
+
+const classBase = "VuuDatePicker";
+const isSameDate = (d1, d2) => d2 !== void 0 && isSameDay(d1, d2) && isSameMonth(d1, d2) && isSameYear(d1, d2);
+const datePattern = /^\d{1,2} [a-z]{3} \d{4}$/i;
+const isValidDate = (value) => value !== void 0 && value?.match(datePattern) !== null && !Number.isNaN(new Date(value).getDay());
+const localTimeZone = getLocalTimeZone();
+const toEpochMillis = (date, timezone = getLocalTimeZone()) => date.toDate(timezone).getTime();
+const getDates = (selectedDate) => {
+  if (selectedDate) {
+    return {
+      datePickerKey: "controlled",
+      defaultDate: void 0,
+      selectedDate
+    };
+  } else {
+    return {
+      datePickerKey: "uncontrolled",
+      defaultDate: void 0,
+      selectedDate
+    };
+  }
+};
+const VuuDatePicker = ({
+  className,
+  onSelectionChange,
+  selectedDate: selectedDateProp,
+  onCommit,
+  preserveFocusOnSelect,
+  ...props
+}) => {
+  const [open, _setOpen] = useState(false);
+  const valueRef = useRef("");
+  const datePickerRef = useRef(null);
+  const dateState = useRef(getDates(selectedDateProp));
+  const setOpen = (o) => {
+    console.log(`setOpen ${o}`);
+    _setOpen(o);
+  };
+  const commitDateChange = useCallback(
+    (e, date) => {
+      onSelectionChange?.(e, date);
+      setOpen(false);
+      onCommit?.(
+        e,
+        toEpochMillis(date, localTimeZone)
+      );
+      if (preserveFocusOnSelect) {
+        requestAnimationFrame(() => {
+          datePickerRef.current?.querySelector("input")?.focus();
+        });
+      }
+    },
+    [onCommit, onSelectionChange, preserveFocusOnSelect]
+  );
+  const handleSelectionChange = useCallback(
+    (e, date) => {
+      const { selectedDate: selectedDate2 } = dateState.current;
+      if (date) {
+        if (selectedDate2 === void 0) {
+          dateState.current = getDates(date);
+          commitDateChange(e, date);
+        } else if (!isSameDate(date, selectedDate2)) {
+          dateState.current.selectedDate = date;
+          commitDateChange(e, date);
+        }
+      }
+    },
+    [commitDateChange]
+  );
+  const handleChange = (evt, value = "") => {
+    console.log(`handleChange`, {
+      evt,
+      value
+    });
+    valueRef.current = value;
+    console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      setOpen(true);
+    }
+  };
+  const handleKeyDownCapture = (e) => {
+    if (e.key === "Enter") {
+      if (isValidDate(valueRef.current)) {
+        console.log(`committayaface (${valueRef.current})`);
+      } else {
+        console.log(
+          `nice try cowboy, but '${valueRef.current}' is nota valid date`
+        );
+        e.stopPropagation();
+      }
+    }
+  };
+  const { datePickerKey, defaultDate, selectedDate } = dateState.current;
+  return /* @__PURE__ */ createElement(
+    DatePicker,
+    {
+      ...props,
+      className: cx(classBase, className),
+      defaultSelectedDate: defaultDate,
+      key: datePickerKey,
+      open,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onKeyDownCapture: handleKeyDownCapture,
+      onOpenChange: setOpen,
+      ref: datePickerRef,
+      onSelectionChange: (e, date) => handleSelectionChange(e, date),
+      selectedDate
+    }
+  );
+};
+
+export { VuuDatePicker };
+//# sourceMappingURL=VuuDatePicker.js.map

package/esm/vuu-date-picker/VuuDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VuuDatePicker.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport {\n  DateValue,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isSameYear,\n} from \"@internationalized/date\";\nimport cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { SingleSelectionValueType } from \"../calendar\";\nimport { DatePicker, DatePickerProps } from \"../date-picker\";\n\nconst classBase = \"VuuDatePicker\";\n\nconst isSameDate = (d1: DateValue, d2?: DateValue) =>\n  d2 !== undefined &&\n  isSameDay(d1, d2) &&\n  isSameMonth(d1, d2) &&\n  isSameYear(d1, d2);\n\nconst datePattern = /^\\d{1,2} [a-z]{3} \\d{4}$/i;\nconst isValidDate = (value?: string) =>\n  value !== undefined &&\n  value?.match(datePattern) !== null &&\n  !Number.isNaN(new Date(value).getDay());\n\nconst localTimeZone = getLocalTimeZone();\n\nconst toEpochMillis = (\n  date: DateValue,\n  timezone: string = getLocalTimeZone(),\n): number => date.toDate(timezone).getTime();\n\ntype DateState =\n  | {\n      datePickerKey: \"controlled\";\n      defaultDate: undefined;\n      selectedDate: DateValue;\n    }\n  | {\n      datePickerKey: \"uncontrolled\";\n      defaultDate: DateValue | undefined;\n      selectedDate: undefined;\n    };\n\nconst getDates = (selectedDate: DateValue | undefined): DateState => {\n  if (selectedDate) {\n    return {\n      datePickerKey: \"controlled\",\n      defaultDate: undefined,\n      selectedDate,\n    };\n  } else {\n    return {\n      datePickerKey: \"uncontrolled\",\n      defaultDate: undefined,\n      selectedDate,\n    };\n  }\n};\n\nexport const VuuDatePicker = ({\n  className,\n  onSelectionChange,\n  selectedDate: selectedDateProp,\n  onCommit,\n  preserveFocusOnSelect,\n  ...props\n}: Omit<DatePickerProps<SingleSelectionValueType>, \"defaultSelectedDate\"> & {\n  onCommit?: CommitHandler<HTMLElement, number>;\n  preserveFocusOnSelect?: boolean;\n}) => {\n  const [open, _setOpen] = useState(false);\n  const valueRef = useRef(\"\");\n  const datePickerRef = useRef<HTMLDivElement>(null);\n\n  const dateState = useRef<DateState>(getDates(selectedDateProp));\n\n  const setOpen = (o: boolean) => {\n    console.log(`setOpen ${o}`);\n    _setOpen(o);\n  };\n\n  const commitDateChange = useCallback(\n    (e: SyntheticEvent<Element>, date: DateValue) => {\n      onSelectionChange?.(e, date);\n      setOpen(false);\n      onCommit?.(\n        e as SyntheticEvent<HTMLElement>,\n        toEpochMillis(date, localTimeZone),\n      );\n\n      if (preserveFocusOnSelect) {\n        requestAnimationFrame(() => {\n          datePickerRef.current?.querySelector(\"input\")?.focus();\n        });\n      }\n    },\n    [onCommit, onSelectionChange, preserveFocusOnSelect],\n  );\n\n  const handleSelectionChange = useCallback(\n    (e: SyntheticEvent<Element>, date: DateValue) => {\n      const { selectedDate } = dateState.current;\n      // id date is undefined, we're openung the picker on an empty field\n      if (date) {\n        if (selectedDate === undefined) {\n          dateState.current = getDates(date);\n          commitDateChange(e, date);\n        } else if (!isSameDate(date, selectedDate)) {\n          dateState.current.selectedDate = date;\n          commitDateChange(e, date);\n        }\n      }\n    },\n    [commitDateChange],\n  );\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>, value = \"\") => {\n    console.log(`handleChange`, {\n      evt,\n      value,\n    });\n    valueRef.current = value;\n    console.log(`is '${value}' a valid date ? ${isValidDate(value)}`);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"ArrowDown\") {\n      setOpen(true);\n    }\n  };\n\n  const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"Enter\") {\n      if (isValidDate(valueRef.current)) {\n        console.log(`committayaface (${valueRef.current})`);\n      } else {\n        console.log(\n          `nice try cowboy, but '${valueRef.current}' is nota valid date`,\n        );\n        e.stopPropagation();\n      }\n    }\n  };\n\n  const { datePickerKey, defaultDate, selectedDate } = dateState.current;\n\n  return (\n    <DatePicker\n      {...props}\n      className={cx(classBase, className)}\n      defaultSelectedDate={defaultDate}\n      key={datePickerKey}\n      open={open}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onKeyDownCapture={handleKeyDownCapture}\n      onOpenChange={setOpen}\n      ref={datePickerRef}\n      onSelectionChange={(e, date) =>\n        handleSelectionChange(e, date as DateValue)\n      }\n      selectedDate={selectedDate}\n    />\n  );\n};\n"],"names":["selectedDate"],"mappings":"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"}

package/esm/vuu-input/VuuInput.css.js

@@ -0,0 +1,4 @@
+var vuuInputCss = ".vuuInput {\n  --vuu-icon-size: 16px;\n}\n\n.vuuInput-errorIcon:after {\n  --vuu-icon-color: var(--salt-status-error-background);\n  cursor: pointer;\n}\n";
+
+export { vuuInputCss as default };
+//# sourceMappingURL=VuuInput.css.js.map

package/esm/vuu-input/VuuInput.css.js.map

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

package/esm/vuu-input/VuuInput.js

@@ -0,0 +1,100 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useId, isValidNumber } from '@vuu-ui/vuu-utils';
+import { Input, Tooltip } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import vuuInputCss from './VuuInput.css.js';
+
+const classBase = "vuuInput";
+const VuuInput = forwardRef(function VuuInput2({
+  className,
+  commitOnBlur = true,
+  commitWhenCleared = false,
+  errorMessage,
+  id: idProp,
+  onCommit,
+  onKeyDown,
+  type,
+  ...props
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-input",
+    css: vuuInputCss,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const commitValue = useCallback(
+    (evt, value) => {
+      if (type === "number") {
+        const numericValue = parseFloat(value);
+        if (isValidNumber(numericValue)) {
+          onCommit(evt, numericValue, "text-input");
+        } else {
+          throw Error("Invalid value");
+        }
+      } else if (type === "boolean") {
+        onCommit(evt, Boolean(value), "text-input");
+      } else {
+        onCommit(evt, value, "text-input");
+      }
+    },
+    [onCommit, type]
+  );
+  const handleChange = useCallback(
+    (evt) => {
+      const value = evt.target.value;
+      if (value.trim() === "" && commitWhenCleared) {
+        onCommit?.(evt, value);
+      }
+      props.inputProps?.onChange?.(evt);
+    },
+    [commitWhenCleared, onCommit, props.inputProps]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === "Enter") {
+        evt.preventDefault();
+        evt.stopPropagation();
+        const { value } = evt.target;
+        commitValue(evt, value);
+      }
+      onKeyDown?.(evt);
+    },
+    [commitValue, onKeyDown]
+  );
+  const handleBlur = useCallback(
+    (evt) => {
+      if (commitOnBlur) {
+        const { value } = evt.target;
+        commitValue(evt, value);
+      }
+    },
+    [commitOnBlur, commitValue]
+  );
+  const endAdornment = errorMessage ? /* @__PURE__ */ jsx(Tooltip, { content: errorMessage, status: "error", children: /* @__PURE__ */ jsx("span", { className: `${classBase}-errorIcon`, "data-icon": "error" }) }) : void 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      endAdornment,
+      id,
+      inputProps: {
+        autoComplete: "off",
+        ...props.inputProps,
+        onChange: handleChange
+      },
+      className: cx(classBase, className, {
+        [`${classBase}-error`]: errorMessage
+      }),
+      onBlur: handleBlur,
+      ref: forwardedRef,
+      onKeyDown: handleKeyDown
+    }
+  ) });
+});
+
+export { VuuInput };
+//# sourceMappingURL=VuuInput.js.map

package/esm/vuu-input/VuuInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VuuInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { CommitHandler, isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps, Tooltip } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  ForwardedRef,\n  KeyboardEventHandler,\n  ReactElement,\n  ReactNode,\n  forwardRef,\n  useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n  extends Omit<InputProps, \"validationStatus\"> {\n  commitOnBlur?: boolean;\n  commitWhenCleared?: boolean;\n  errorMessage?: ReactNode;\n  onCommit: CommitHandler;\n  type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n  T extends VuuRowDataItemType = string,\n>(\n  {\n    className,\n    commitOnBlur = true,\n    commitWhenCleared = false,\n    errorMessage,\n    id: idProp,\n    onCommit,\n    onKeyDown,\n    type,\n    ...props\n  }: VuuInputProps<T>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-input\",\n    css: vuuInputCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const commitValue = useCallback<CommitHandler<HTMLInputElement, string>>(\n    (evt, value) => {\n      if (type === \"number\") {\n        const numericValue = parseFloat(value);\n        if (isValidNumber(numericValue)) {\n          onCommit(evt, numericValue as T, \"text-input\");\n        } else {\n          //TODO add validation logic\n          throw Error(\"Invalid value\");\n        }\n      } else if (type === \"boolean\") {\n        onCommit(evt, Boolean(value) as T, \"text-input\");\n      } else {\n        onCommit(evt, value as T, \"text-input\");\n      }\n    },\n    [onCommit, type],\n  );\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const value = evt.target.value;\n      if (value.trim() === \"\" && commitWhenCleared) {\n        onCommit?.(evt, value as T);\n      }\n      props.inputProps?.onChange?.(evt);\n    },\n    [commitWhenCleared, onCommit, props.inputProps],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        evt.preventDefault();\n        evt.stopPropagation();\n        const { value } = evt.target as HTMLInputElement;\n        commitValue(evt, value);\n      }\n      onKeyDown?.(evt);\n    },\n    [commitValue, onKeyDown],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    (evt) => {\n      if (commitOnBlur) {\n        const { value } = evt.target as HTMLInputElement;\n        commitValue(evt, value);\n      }\n    },\n    [commitOnBlur, commitValue],\n  );\n\n  const endAdornment = errorMessage ? (\n    <Tooltip content={errorMessage} status=\"error\">\n      <span className={`${classBase}-errorIcon`} data-icon=\"error\" />\n    </Tooltip>\n  ) : undefined;\n\n  return (\n    <>\n      <Input\n        {...props}\n        endAdornment={endAdornment}\n        id={id}\n        inputProps={{\n          autoComplete: \"off\",\n          ...props.inputProps,\n          onChange: handleChange,\n        }}\n        className={cx(classBase, className, {\n          [`${classBase}-error`]: errorMessage,\n        })}\n        onBlur={handleBlur}\n        ref={forwardedRef}\n        onKeyDown={handleKeyDown}\n      />\n    </>\n  );\n}) as <T extends VuuRowDataItemType = string>(\n  props: VuuInputProps<T> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["VuuInput"],"mappings":"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"}

package/esm/vuu-time-picker/VuuTimePicker.css.js

@@ -0,0 +1,4 @@
+var timePickerCss = ".vuuTimePicker {\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n\n    .TimeInput {\n        outline: none;\n    }\n}";
+
+export { timePickerCss as default };
+//# sourceMappingURL=VuuTimePicker.css.js.map

package/esm/vuu-time-picker/VuuTimePicker.css.js.map

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

package/esm/vuu-time-picker/VuuTimePicker.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { TimeInput } from '../time-input/TimeInput.js';
+import timePickerCss from './VuuTimePicker.css.js';
+
+const classBase = "vuuTimePicker";
+const VuuTimePicker = ({
+  className,
+  defaultValue,
+  onChange,
+  onCommit,
+  value,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-time-picker",
+    css: timePickerCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsx(
+    TimeInput,
+    {
+      defaultValue,
+      onChange,
+      onCommit,
+      value
+    }
+  ) });
+};
+
+export { VuuTimePicker };
+//# sourceMappingURL=VuuTimePicker.js.map

package/esm/vuu-time-picker/VuuTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VuuTimePicker.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-time-picker/VuuTimePicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CommitHandler, TimeString } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { TimeInput, TimeInputProps } from \"../time-input/TimeInput\";\n\nimport timePickerCss from \"./VuuTimePicker.css\";\n\nexport interface VuuTimePickerProps\n  extends Pick<TimeInputProps, \"defaultValue\" | \"onChange\" | \"value\">,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"defaultValue\" | \"onChange\" | \"value\"\n    > {\n  onCommit: CommitHandler<HTMLInputElement, TimeString>;\n}\n\nconst classBase = \"vuuTimePicker\";\n\nexport const VuuTimePicker = ({\n  className,\n  defaultValue,\n  onChange,\n  onCommit,\n  value,\n  ...htmlAttributes\n}: VuuTimePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-time-picker\",\n    css: timePickerCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <TimeInput\n        defaultValue={defaultValue}\n        onChange={onChange}\n        onCommit={onCommit}\n        value={value}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBA,MAAM,SAAY,GAAA,eAAA;AAEX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACzD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js

@@ -0,0 +1,4 @@
+var vuuTypeaheadInputCss = ".vuuTypeaheadInput {\n  .saltPillInput-activationIndicator {\n    display: none;\n  }\n\n  .saltPillInput-endAdornmentContainer {\n    padding:0;\n  }\n\n  .saltButton {\n    --vuuButton-borderColor: transparent;\n    height: 24px;\n    width: 24px;\n  }\n\n  .saltButton:before {\n    content: \"\";\n    background-color: var(--salt-separable-secondary-borderColor);\n    height: 100%;\n    left: calc(-1 * var(--salt-spacing-100));\n    position: absolute;\n    width: 1px;\n  }\n\n  .saltButton:after {\n    --vuu-icon-color: var(--salt-content-primary-foreground);\n    --vuu-icon-size: 10px;\n    --vuu-icon-transform: rotate(45deg);\n\n    content: \"\";\n    background-color: var(--vuu-icon-color);\n    height: var(--vuu-icon-size);\n    mask: var(--vuu-svg-triangle-right) center center/var(--vuu-icon-size)\n      var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    position: absolute;\n    top: 3px;\n    transform: var(--vuu-icon-transform, none);\n    width: var(--vuu-icon-size);\n  }\n}\n\n.vuuTypeaheadOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-secondary-foreground);\n}\n";
+
+export { vuuTypeaheadInputCss as default };
+//# sourceMappingURL=VuuTypeaheadInput.css.js.map

package/esm/vuu-typeahead-input/VuuTypeaheadInput.css.js.map

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

package/esm/vuu-typeahead-input/VuuTypeaheadInput.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { ComboBox, Option } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { NO_DATA_MATCH } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useVuuTypeaheadInput } from './useVuuTypeaheadInput.js';
+import vuuTypeaheadInputCss from './VuuTypeaheadInput.css.js';
+
+const classBase = "vuuTypeaheadInput";
+const [noMatchingData] = NO_DATA_MATCH;
+const VuuTypeaheadInput = ({
+  allowFreeInput,
+  className,
+  column,
+  freeTextWarning,
+  highlightFirstSuggestion,
+  inputProps: inputPropsProp,
+  minCharacterCountToTriggerSuggestions,
+  onCommit,
+  selectOnTab,
+  table
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-typeahead-input",
+    css: vuuTypeaheadInputCss,
+    window: targetWindow
+  });
+  const {
+    inputProps,
+    noFreeText,
+    onChange,
+    onKeyDown,
+    onOpenChange,
+    onSelectionChange,
+    open,
+    ref,
+    typeaheadValues,
+    value
+  } = useVuuTypeaheadInput({
+    allowFreeInput,
+    column,
+    freeTextWarning,
+    highlightFirstSuggestion,
+    inputProps: inputPropsProp,
+    minCharacterCountToTriggerSuggestions,
+    onCommit,
+    table
+  });
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      className: cx(classBase, className),
+      inputProps,
+      onChange,
+      onKeyDown,
+      onOpenChange,
+      onSelectionChange,
+      open,
+      ref,
+      selectOnTab,
+      value,
+      children: typeaheadValues.map((state) => /* @__PURE__ */ jsx(
+        Option,
+        {
+          className: "vuuTypeaheadOption",
+          value: state,
+          disabled: state === noMatchingData || state === noFreeText
+        },
+        state
+      ))
+    }
+  );
+};
+
+export { VuuTypeaheadInput };
+//# sourceMappingURL=VuuTypeaheadInput.js.map

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

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