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

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

@@ -0,0 +1,174 @@
+import { useTypeaheadSuggestions } from '@vuu-ui/vuu-data-react';
+import { useStateRef, getVuuTable, NO_DATA_MATCH, dispatchKeyboardEvent } from '@vuu-ui/vuu-utils';
+import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+
+const meetsMinTextLengthThreshold = (value, minLength) => value.length >= minLength;
+const defaultFreeTextWarning = "Please select a value from the list of suggestions. If no suggestions match your text, then the value is not valid. If you believe this should be a valid value, please reach out to the support team";
+const useVuuTypeaheadInput = ({
+  allowFreeInput = true,
+  column,
+  freeTextWarning,
+  highlightFirstSuggestion = true,
+  inputProps: inputPropsProp,
+  minCharacterCountToTriggerSuggestions = 1,
+  onCommit,
+  table
+}) => {
+  const NO_FREE_TEXT = useMemo(
+    () => [freeTextWarning ?? defaultFreeTextWarning],
+    [freeTextWarning]
+  );
+  const [valueRef, setValue] = useStateRef("");
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  const [typeaheadValues, setTypeaheadValues] = useState([]);
+  const getSuggestions = useTypeaheadSuggestions();
+  const pendingListFocusRef = useRef(false);
+  const { current: value } = valueRef;
+  useMemo(() => {
+    if (inputPropsProp?.value !== void 0 && inputPropsProp?.value !== valueRef.current) {
+      setValue(`${inputPropsProp.value}`);
+    }
+  }, [inputPropsProp?.value, setValue, valueRef]);
+  const commitTimeout = useRef(null);
+  const handleKeyDown = useCallback(
+    (evt) => {
+      const { current: value2 } = valueRef;
+      if (evt.key === "Enter" && value2 !== "") {
+        if (allowFreeInput) {
+          commitTimeout.current = setTimeout(() => {
+            onCommit?.(evt, value2, "text-input");
+            setOpen(false);
+            commitTimeout.current = null;
+          }, 200);
+        } else {
+          setTypeaheadValues(NO_FREE_TEXT);
+        }
+      } else if (evt.key === "Enter" && value2 === "") {
+        console.log("ENTER no value");
+      }
+    },
+    [NO_FREE_TEXT, allowFreeInput, onCommit, valueRef]
+  );
+  const callbackRef = useCallback((el) => {
+    rootRef.current = el;
+    const input = el?.querySelector("input") ?? null;
+    inputRef.current = input;
+  }, []);
+  const refreshSuggestions = useCallback(() => {
+    if (table) {
+      const vuuTable = getVuuTable(table);
+      if (meetsMinTextLengthThreshold(
+        value,
+        minCharacterCountToTriggerSuggestions
+      )) {
+        const params = value ? [vuuTable, column, value] : [vuuTable, column];
+        getSuggestions(params).then((suggestions) => {
+          if (suggestions === false) {
+            setTypeaheadValues([]);
+          } else if (suggestions.length === 0 && value) {
+            setTypeaheadValues(
+              (values) => (
+                // Do not update if we have already set suggestions to the no free text warning
+                values === NO_FREE_TEXT ? NO_FREE_TEXT : NO_DATA_MATCH
+              )
+            );
+          } else {
+            setTypeaheadValues(suggestions);
+            if (pendingListFocusRef.current && inputRef.current) {
+              setTimeout(() => {
+                if (inputRef.current) {
+                  dispatchKeyboardEvent(
+                    inputRef.current,
+                    "keydown",
+                    "ArrowDown"
+                  );
+                }
+              }, 60);
+            }
+          }
+          pendingListFocusRef.current = false;
+        }).catch((err) => {
+          console.error("Error getting suggestions", err);
+        });
+      } else {
+        setTypeaheadValues([]);
+      }
+    }
+  }, [
+    NO_FREE_TEXT,
+    column,
+    getSuggestions,
+    minCharacterCountToTriggerSuggestions,
+    table,
+    value
+  ]);
+  useEffect(() => {
+    refreshSuggestions();
+  }, [refreshSuggestions]);
+  const handleChange = useCallback(
+    (evt) => {
+      const { value: newValue } = evt.target;
+      const { current: value2 } = valueRef;
+      if (value2 === "" && newValue) {
+        setOpen(true);
+        const input = rootRef.current?.querySelector("input");
+        if (input && highlightFirstSuggestion) {
+          pendingListFocusRef.current = true;
+        }
+      } else if (newValue === "" && value2) {
+        onCommit(evt, "");
+      }
+      setValue(newValue);
+    },
+    [highlightFirstSuggestion, onCommit, setValue, valueRef]
+  );
+  const handleSelectionChange = (evt, [newSelected]) => {
+    if (commitTimeout.current) {
+      clearTimeout(commitTimeout.current);
+      commitTimeout.current = null;
+    }
+    setValue(newSelected);
+    onCommit(
+      evt,
+      newSelected,
+      "typeahead-suggestion"
+    );
+  };
+  const handleOpenChange = (newOpen) => {
+    if (newOpen && valueRef.current === "") {
+      setOpen(newOpen);
+    } else {
+      setOpen(newOpen);
+    }
+  };
+  const handleInputFocus = useCallback(
+    (e) => {
+      inputPropsProp?.onFocus?.(e);
+      refreshSuggestions();
+    },
+    [inputPropsProp, refreshSuggestions]
+  );
+  const inputProps = {
+    ...inputPropsProp,
+    autoComplete: "off",
+    onFocus: handleInputFocus
+  };
+  const [noFreeText] = NO_FREE_TEXT;
+  return {
+    inputProps,
+    noFreeText,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onOpenChange: handleOpenChange,
+    onSelectionChange: handleSelectionChange,
+    open,
+    ref: callbackRef,
+    typeaheadValues,
+    value: valueRef.current
+  };
+};
+
+export { useVuuTypeaheadInput };
+//# sourceMappingURL=useVuuTypeaheadInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVuuTypeaheadInput.js","sources":["../../../../packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput.ts"],"sourcesContent":["import { PillInputProps } from \"@salt-ds/core/dist-types/pill-input\";\nimport { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  getVuuTable,\n  useStateRef,\n  NO_DATA_MATCH,\n  type CommitHandler,\n  dispatchKeyboardEvent,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type RefCallback,\n  type SyntheticEvent,\n} from \"react\";\n\nconst meetsMinTextLengthThreshold = (value: string, minLength: number) =>\n  value.length >= minLength;\n\nexport interface VuuTypeaheadInputHookProps {\n  /**\n   * Allows a text string to be submitted that does not match any suggestion\n   * Defaults to true\n   */\n  allowFreeInput?: boolean;\n  column: string;\n  /**\n   * A warning to display to the user if allowFreeText is false and they attempt\n   * to commit text which does not match any suggestions. A default message will\n   * be shown if not provided\n   */\n  freeTextWarning?: string;\n  /**\n   * When suggestions are displayed, should first option be highlighted ?\n   * Highlighted option will be selected if Enter pressed. If this option\n   * is not applied and no suggestion is highlighted, Enter will commit\n   * current text. This will be desirable if filter operator  will be\n   * 'contains', not if filter operator will be '='.\n   */\n  highlightFirstSuggestion?: boolean;\n  inputProps?: PillInputProps[\"inputProps\"];\n  /**\n   * If zero, suggestions will be shown even without any text input.\n   * Suggestions will be displayed on click, or, if focused via keynoard,\n   * on ArrowDown.\n   * If n, where n > 0, then n characters must be typed before suggestion\n   * list will be fetched.\n   */\n  minCharacterCountToTriggerSuggestions?: 0 | 1 | 2 | 3;\n  onCommit: CommitHandler<HTMLInputElement>;\n  table: TableSchemaTable;\n}\n\nconst defaultFreeTextWarning =\n  \"Please select a value from the list of suggestions. If no suggestions match your text, then the value is not valid. If you believe this should be a valid value, please reach out to the support team\";\n\nexport const useVuuTypeaheadInput = ({\n  allowFreeInput = true,\n  column,\n  freeTextWarning,\n  highlightFirstSuggestion = true,\n  inputProps: inputPropsProp,\n  minCharacterCountToTriggerSuggestions = 1,\n  onCommit,\n  table,\n}: VuuTypeaheadInputHookProps) => {\n  const NO_FREE_TEXT = useMemo(\n    () => [freeTextWarning ?? defaultFreeTextWarning],\n    [freeTextWarning],\n  );\n  const [valueRef, setValue] = useStateRef(\"\");\n  const [open, setOpen] = useState(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n  const getSuggestions = useTypeaheadSuggestions();\n  const pendingListFocusRef = useRef(false);\n\n  const { current: value } = valueRef;\n\n  useMemo(() => {\n    if (\n      inputPropsProp?.value !== undefined &&\n      inputPropsProp?.value !== valueRef.current\n    ) {\n      setValue(`${inputPropsProp.value}`);\n    }\n  }, [inputPropsProp?.value, setValue, valueRef]);\n\n  const commitTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const { current: value } = valueRef;\n      if (evt.key === \"Enter\" && value !== \"\") {\n        if (allowFreeInput) {\n          commitTimeout.current = setTimeout(() => {\n            onCommit?.(evt, value, \"text-input\");\n            setOpen(false);\n            commitTimeout.current = null;\n          }, 200);\n        } else {\n          setTypeaheadValues(NO_FREE_TEXT);\n        }\n      } else if (evt.key === \"Enter\" && value === \"\") {\n        console.log(\"ENTER no value\");\n      }\n    },\n    [NO_FREE_TEXT, allowFreeInput, onCommit, valueRef],\n  );\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    rootRef.current = el;\n    const input = el?.querySelector(\"input\") ?? null;\n    inputRef.current = input;\n  }, []);\n\n  const refreshSuggestions = useCallback(() => {\n    if (table) {\n      const vuuTable = getVuuTable(table);\n      if (\n        meetsMinTextLengthThreshold(\n          value,\n          minCharacterCountToTriggerSuggestions,\n        )\n      ) {\n        const params: TypeaheadParams = value\n          ? [vuuTable, column, value]\n          : [vuuTable, column];\n        getSuggestions(params)\n          .then((suggestions) => {\n            if (suggestions === false) {\n              // TODO is this right\n              setTypeaheadValues([]);\n            } else if (suggestions.length === 0 && value) {\n              setTypeaheadValues((values) =>\n                // Do not update if we have already set suggestions to the no free text warning\n                values === NO_FREE_TEXT ? NO_FREE_TEXT : NO_DATA_MATCH,\n              );\n            } else {\n              setTypeaheadValues(suggestions);\n              if (pendingListFocusRef.current && inputRef.current) {\n                setTimeout(() => {\n                  if (inputRef.current) {\n                      dispatchKeyboardEvent(\n                        inputRef.current,\n                        \"keydown\",\n                        \"ArrowDown\",\n                      );\n                    }\n                },60);\n              }\n            }\n            pendingListFocusRef.current = false;\n          })\n          .catch((err) => {\n            console.error(\"Error getting suggestions\", err);\n          });\n      } else {\n        setTypeaheadValues([]);\n      }\n    }\n  }, [\n    NO_FREE_TEXT,\n    column,\n    getSuggestions,\n    minCharacterCountToTriggerSuggestions,\n    table,\n    value,\n  ]);\n\n  useEffect(() => {\n    // This will preload suggestions for controls with no char input minimum\n    refreshSuggestions();\n  }, [refreshSuggestions]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n    (evt) => {\n      const { value: newValue } = evt.target;\n      const { current: value } = valueRef;\n      if (value === \"\" && newValue) {\n        setOpen(true);\n        const input = rootRef.current?.querySelector(\"input\");\n        if (input && highlightFirstSuggestion) {\n          pendingListFocusRef.current = true;\n        }\n      } else if (newValue === \"\" && value) {\n        // treat clear value as a commit event\n        onCommit(evt, \"\");\n      }\n      setValue(newValue);\n    },\n    [highlightFirstSuggestion, onCommit, setValue, valueRef],\n  );\n\n  const handleSelectionChange = (\n    evt: SyntheticEvent,\n    [newSelected]: string[],\n  ) => {\n    if (commitTimeout.current) {\n      clearTimeout(commitTimeout.current);\n      commitTimeout.current = null;\n    }\n    setValue(newSelected);\n    onCommit(\n      evt as SyntheticEvent<HTMLInputElement>,\n      newSelected,\n      \"typeahead-suggestion\",\n    );\n  };\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (newOpen && valueRef.current === \"\") {\n      // ignore this, don't open dropdown unless user has typed at least one character\n      setOpen(newOpen);\n    } else {\n      setOpen(newOpen);\n    }\n  };\n\n  const handleInputFocus = useCallback<FocusEventHandler<HTMLInputElement>>(\n    (e) => {\n      inputPropsProp?.onFocus?.(e);\n      refreshSuggestions();\n    },\n    [inputPropsProp, refreshSuggestions],\n  );\n\n  const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n    ...inputPropsProp,\n    autoComplete: \"off\",\n    onFocus: handleInputFocus,\n  };\n\n  const [noFreeText] = NO_FREE_TEXT;\n  return {\n    inputProps,\n    noFreeText,\n    onChange: handleChange,\n    onKeyDown: handleKeyDown,\n    onOpenChange: handleOpenChange,\n    onSelectionChange: handleSelectionChange,\n    open,\n    ref: callbackRef,\n    typeaheadValues,\n    value: valueRef.current,\n  };\n};\n"],"names":["value"],"mappings":"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"}

package/package.json

@@ -1,21 +1,20 @@
 {
-  "version": "2.1.19-beta.2",
+  "version": "2.1.19-beta.4",
   "description": "VUU UI Controls",
   "author": "heswell",
   "license": "Apache-2.0",
-  "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.2"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.4",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.4",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.4"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "2.1.19-beta.2",
-    "@vuu-ui/vuu-data-react": "2.1.19-beta.2",
-    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table": "2.1.19-beta.2",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
+    "@vuu-ui/vuu-context-menu": "2.1.19-beta.4",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.4",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.4",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.4",
+    "@vuu-ui/vuu-table": "2.1.19-beta.4",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.4",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/icons": "1.16.0",
     "@salt-ds/styles": "0.2.1",
@@ -30,18 +29,22 @@
     "react-dom": "^19.2.3"
   },
   "sideEffects": false,
+  "type": "module",
   "files": [
     "README.md",
-    "src",
+    "esm",
+    "cjs",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./src/index.js",
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "module": "index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "name": "@vuu-ui/vuu-ui-controls",
   "types": "types/index.d.ts"
 }

package/types/calendar/useCalendar.d.ts

@@ -16,16 +16,16 @@ interface BaseUseCalendarProps {
 export type useCalendarProps = (Omit<UseSingleSelectionCalendarProps, "isDaySelectable"> | Omit<UseMultiSelectionCalendarProps, "isDaySelectable"> | Omit<UseRangeSelectionCalendarProps, "isDaySelectable"> | Omit<UseOffsetSelectionCalendarProps, "isDaySelectable">) & BaseUseCalendarProps;
 export declare function useCalendar(props: useCalendarProps): {
     state: {
-        selectedDate: DateValue[] | {
+        selectedDate: DateValue | import("./useSelection").RangeSelectionValueType | {
             startDate?: DateValue;
             endDate?: DateValue;
-        } | import("./useSelection").RangeSelectionValueType | DateValue | null | undefined;
+        } | DateValue[] | null | undefined;
         hoveredDate: import("@internationalized/date").CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
         visibleMonth: DateValue;
         focusedDate: DateValue;
         minDate: DateValue | undefined;
         maxDate: DateValue | undefined;
-        selectionVariant: "default" | "multiselect" | "offset" | "range";
+        selectionVariant: "offset" | "range" | "multiselect" | "default";
         hideOutOfRangeDates: boolean | undefined;
         calendarFocused: boolean;
     };

package/types/calendar/useSelection.d.ts

@@ -38,7 +38,7 @@ export declare function isRangeOrOffsetSelectionValue(selectionValue?: AllSelect
 export declare function isRangeOrOffsetSelectionWithStartDate(selectionValue?: AllSelectionValueType): selectionValue is RangeSelectionValueType | OffsetSelectionValueType;
 export declare function useSelectionCalendar(props: useSelectionCalendarProps): {
     state: {
-        selectedDate: MultiSelectionValueType | OffsetSelectionValueType | RangeSelectionValueType | DateValue | null | undefined;
+        selectedDate: DateValue | RangeSelectionValueType | OffsetSelectionValueType | MultiSelectionValueType | null | undefined;
         hoveredDate: CalendarDate | import("@internationalized/date").CalendarDateTime | import("@internationalized/date").ZonedDateTime | null | undefined;
     };
     helpers: {

package/types/date-input/DateInput.d.ts

@@ -57,4 +57,4 @@ export interface DateInputProps<SelectionVariantType> extends Omit<ComponentProp
      */
     onChange?: SelectionVariantType extends SingleSelectionValueType ? (event: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => void : (event: ChangeEvent<HTMLInputElement>, startDateInputValue?: string, endDateInputValue?: string) => void;
 }
-export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/types/date-picker/DatePicker.d.ts

@@ -63,4 +63,4 @@ export interface DatePickerProps<SelectionVariantType> extends DateInputProps<Se
      */
     visibleMonths?: 1 | 2;
 }
-export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/types/date-picker/DatePickerContext.d.ts

@@ -15,5 +15,5 @@ export interface DatePickerContextValue<SelectionVariantType> extends Partial<Pi
     selectionVariant: "default" | "range";
     getPanelPosition: () => Record<string, unknown>;
 }
-export declare const DatePickerContext: import("react").Context<DatePickerContextValue<RangeSelectionValueType | DateValue>>;
-export declare function useDatePickerContext(): DatePickerContextValue<RangeSelectionValueType | DateValue>;
+export declare const DatePickerContext: import("react").Context<DatePickerContextValue<DateValue | RangeSelectionValueType>>;
+export declare function useDatePickerContext(): DatePickerContextValue<DateValue | RangeSelectionValueType>;

package/types/date-picker/DatePickerPanel.d.ts

@@ -7,4 +7,4 @@ export interface DatePickerPanelProps<SelectionVariantType> extends ComponentPro
     visibleMonths?: 1 | 2;
     CalendarProps?: Partial<Omit<CalendarProps, "selectionVariant" | "selectedDate" | "defaultSelectedDate" | "onSelectedDateChange">>;
 }
-export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<RangeSelectionValueType | DateValue> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DatePickerPanel: import("react").ForwardRefExoticComponent<DatePickerPanelProps<DateValue | RangeSelectionValueType> & import("react").RefAttributes<HTMLDivElement>>;

package/types/instrument-picker/useTablePicker.d.ts

@@ -10,9 +10,13 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
     dataSource: import("@vuu-ui/vuu-data-types").DataSource;
     highlightedIndex: number | undefined;
     floatingUIProps: {
+        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
+        x: number;
+        y: number;
         isPositioned: boolean;
         update: () => void;
         floatingStyles: React.CSSProperties;
@@ -22,10 +26,6 @@ export declare const useTablePicker: ({ TableProps, onSelect, rowToString, schem
             setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
             setFloating: (node: HTMLElement | null) => void;
         } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
-        floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
-        x: number;
-        y: number;
     };
     inputProps: {
         inputProps: {

package/types/split-button/useSplitButton.d.ts

@@ -6,7 +6,127 @@ export interface SplitButtonHookProps extends Pick<SplitButtonProps, "PopupMenuP
 }
 export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuProps, classBase, onClick, }: SplitButtonHookProps) => {
     ButtonProps: {
+        onClick: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+        onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+        type?: "submit" | "reset" | "button" | undefined;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined;
         key?: import("react").Key | null | undefined;
+        disabled?: boolean;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        name?: string | undefined;
+        value?: string | readonly string[] | number | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
         children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
@@ -177,131 +297,11 @@ export declare const useSplitButton: ({ ButtonProps: ButtonPropsProp, PopupMenuP
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-        "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: ("false" | "true" | boolean) | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-        "aria-braillelabel"?: string | undefined;
-        "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: ("false" | "true" | boolean) | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colindextext"?: string | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-description"?: string | undefined;
-        "aria-details"?: string | undefined;
-        "aria-disabled"?: ("false" | "true" | boolean) | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: ("false" | "true" | boolean) | undefined;
-        "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: ("false" | "true" | boolean) | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: ("false" | "true" | boolean) | undefined;
-        "aria-multiline"?: ("false" | "true" | boolean) | undefined;
-        "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: ("false" | "true" | boolean) | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: ("false" | "true" | boolean) | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowindextext"?: string | undefined;
-        "aria-rowspan"?: number | undefined;
-        "aria-selected"?: ("false" | "true" | boolean) | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-        autoFocus?: boolean | undefined;
-        className?: string | undefined;
-        contentEditable?: ("false" | "true" | boolean) | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: ("false" | "true" | boolean) | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        slot?: string | undefined;
-        spellCheck?: ("false" | "true" | boolean) | undefined;
-        style?: import("react").CSSProperties | undefined;
-        tabIndex?: number | undefined;
-        title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
-        radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
-        about?: string | undefined;
-        content?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        color?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-        popoverTarget?: string | undefined;
-        inert?: boolean | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        exportparts?: string | undefined;
-        part?: string | undefined;
-        form?: string | undefined;
-        formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
-        formEncType?: string | undefined;
-        formMethod?: string | undefined;
-        formNoValidate?: boolean | undefined;
-        formTarget?: string | undefined;
-        name?: string | undefined;
-        type?: "submit" | "reset" | "button" | undefined;
-        value?: string | readonly string[] | number | undefined;
-        disabled?: boolean;
         focusableWhenDisabled?: boolean;
         appearance?: import("@salt-ds/core").ButtonAppearance;
         sentiment?: import("@salt-ds/core").ButtonSentiment;
         loading?: boolean;
         loadingAnnouncement?: string;
-        onClick: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-        onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
     };
     PopupMenuProps: PopupMenuProps;
     buttonRef: import("react").RefObject<HTMLButtonElement | null>;

package/types/tabs-next/hooks/useOverflow.d.ts

@@ -7,5 +7,5 @@ interface UseOverflowProps {
     tabs: Item[];
     overflowButton: RefObject<HTMLButtonElement | null>;
 }
-export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal)[], (string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal)[], false] | readonly [(string | number | bigint | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal)[], readonly [], true];
+export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], false] | readonly [(string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[], readonly [], true];
 export {};

package/types/tabstrip/Tab.d.ts

@@ -1,7 +1,7 @@
 import { KeyboardEvent, MouseEvent } from "react";
 import { EditableLabelProps } from "../editable-label";
 import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "onKeyUp" | "onClick"> & {
     ariaControls?: import("react").AriaAttributes["aria-controls"];
     closeable?: boolean;
     draggable?: boolean;