@pushwoosh/dumb-components 1.1.140 → 1.1.142

package/hooks/useOnClickOutside.js

@@ -2,12 +2,13 @@ import { useEffect } from 'react';
 export function useOnClickOutside(ref, handler) {
   useEffect(() => {
     const references = Array.isArray(ref) ? ref : [ref];
-    function listener({
-      target
-    }) {
+    function listener(event) {
+      const target = event.target;
+      const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
       const isClickInArea = references.some(reference => {
-        var _reference$current;
-        return (_reference$current = reference.current) === null || _reference$current === void 0 ? void 0 : _reference$current.contains(target);
+        const element = reference.current;
+        if (!element) return false;
+        return path.includes(element) || (target ? element.contains(target) : false);
       });
       if (!isClickInArea) {
         handler();

package/index.d.ts

@@ -22,6 +22,8 @@ export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type SelectOption, type MultiSelectOptions, type SingleValue, type MultiValue, } from './Select';
+export { Combobox, type ComboboxProps, type FreeComboboxProps, type SelectComboboxProps, } from './Combobox';
+export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, type TooltipPosition, TooltipTrigger } from './Tooltip';

package/index.js

@@ -22,6 +22,8 @@ export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
 export { Select, SelectAsync, CreatableSelect, SelectComponents, CLASS_NAME_PREFIX } from './Select';
+export { Combobox } from './Combobox';
+export { ComboboxMulti } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, TooltipTrigger } from './Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.140",
+  "version": "1.1.142",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -47,7 +47,7 @@
     "@codemirror/lang-liquid": "^6.2.2",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^1.6.14",
+    "@pushwoosh/kit-constants": "^1.7.0",
     "@pushwoosh/kit-helpers": "^4.11.0",
     "@pushwoosh/kit-icons": "^2.1.16",
     "@pushwoosh/kit-typography": "^1.7.5",

package/shared/dropdownField/FieldInput.d.ts

@@ -0,0 +1,5 @@
+import { type InputHTMLAttributes } from 'react';
+export declare const FieldInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    value: string;
+    autosize?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/shared/dropdownField/FieldInput.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import { AutosizeMirror, Input } from './styles';
+export const FieldInput = forwardRef(({
+  autosize,
+  value,
+  placeholder,
+  ...rest
+}, ref) => {
+  const mirrorRef = useRef(null);
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (!autosize) return;
+    const el = mirrorRef.current;
+    if (el) setWidth(el.offsetWidth);
+  }, [autosize, value, placeholder]);
+  if (!autosize) {
+    return _jsx(Input, {
+      ref: ref,
+      value: value,
+      placeholder: placeholder,
+      ...rest
+    });
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsx(Input, {
+      ref: ref,
+      value: value,
+      placeholder: placeholder,
+      style: {
+        flex: 'none',
+        minWidth: 0,
+        width: Math.max(width + 2, 8)
+      },
+      ...rest
+    }), _jsx(AutosizeMirror, {
+      ref: mirrorRef,
+      "aria-hidden": true,
+      children: value || placeholder || ''
+    })]
+  });
+});
+FieldInput.displayName = 'FieldInput';

package/shared/dropdownField/FieldShell.d.ts

@@ -0,0 +1,30 @@
+import { type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import { type DropdownItemDescriptor } from './types';
+type FieldShellProps = {
+    children: ReactNode;
+    isOpen?: boolean;
+    dropdownOpen?: boolean;
+    isErrored?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    width?: string;
+    minWidth?: string;
+    autosize?: boolean;
+    tightLeft?: boolean;
+    onShellMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    onClose?: () => void;
+    showClear?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+    showChevron?: boolean;
+    onToggle?: () => void;
+    dropdownItems: DropdownItemDescriptor[];
+    emptyText?: ReactNode;
+    createLabel?: ReactNode;
+    createActive?: boolean;
+    onCreate?: () => void;
+    listboxId?: string;
+    createId?: string;
+};
+export declare function FieldShell({ children, isOpen, dropdownOpen, isErrored, disabled, loading, width, minWidth, autosize, tightLeft, onShellMouseDown, onClose, showClear, onClear, clearLabel, showChevron, onToggle, dropdownItems, emptyText, createLabel, createActive, onCreate, listboxId, createId, }: FieldShellProps): ReactElement;
+export {};

package/shared/dropdownField/FieldShell.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronIcon, CloseIcon } from '@pushwoosh/kit-icons';
+import { IndicatorButton, Indicators, Shell, ShellInner } from './styles';
+import { SuggestionsDropdown } from './SuggestionsDropdown';
+import { useDropdownPosition } from './useDropdownPosition';
+import { useLayer } from '../../hooks';
+export function FieldShell({
+  children,
+  isOpen,
+  dropdownOpen,
+  isErrored,
+  disabled,
+  loading,
+  width,
+  minWidth,
+  autosize,
+  tightLeft,
+  onShellMouseDown,
+  onClose,
+  showClear,
+  onClear,
+  clearLabel = 'Clear',
+  showChevron,
+  onToggle,
+  dropdownItems,
+  emptyText,
+  createLabel,
+  createActive,
+  onCreate,
+  listboxId,
+  createId
+}) {
+  const {
+    setReference,
+    setFloating,
+    floatingRef,
+    floatingStyles
+  } = useDropdownPosition({
+    isOpen: dropdownOpen,
+    onClickOutside: onClose
+  });
+  const {
+    zIndex
+  } = useLayer({
+    isOpen: !!dropdownOpen,
+    onClose
+  });
+  const onShellBlur = event => {
+    var _floatingRef$current;
+    if (!isOpen) return;
+    const next = event.relatedTarget;
+    if (!next) return;
+    if (event.currentTarget.contains(next)) return;
+    if ((_floatingRef$current = floatingRef.current) !== null && _floatingRef$current !== void 0 && _floatingRef$current.contains(next)) return;
+    onClose === null || onClose === void 0 || onClose();
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsxs(Shell, {
+      ref: setReference,
+      "$isFocused": isOpen,
+      "$isErrored": isErrored,
+      "$isDisabled": disabled,
+      "$isLoading": loading,
+      "$width": width,
+      "$minWidth": minWidth,
+      "$autosize": autosize,
+      "$tightLeft": tightLeft,
+      onMouseDown: onShellMouseDown,
+      onBlur: onShellBlur,
+      children: [_jsx(ShellInner, {
+        children: children
+      }), _jsxs(Indicators, {
+        children: [showClear && !disabled && _jsx(IndicatorButton, {
+          onMouseDown: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClear === null || onClear === void 0 || onClear();
+          },
+          "aria-label": clearLabel,
+          children: _jsx(CloseIcon, {
+            size: "small"
+          })
+        }), showChevron && _jsx(IndicatorButton, {
+          tabIndex: -1,
+          "aria-label": isOpen ? 'Close' : 'Open',
+          onMouseDown: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle === null || onToggle === void 0 || onToggle();
+          },
+          children: _jsx(ChevronIcon, {
+            direction: isOpen ? 'up' : 'down',
+            size: "small"
+          })
+        })]
+      })]
+    }), dropdownOpen && _jsx(SuggestionsDropdown, {
+      floatingRef: setFloating,
+      floatingStyles: floatingStyles,
+      items: dropdownItems,
+      emptyText: emptyText,
+      createLabel: createLabel,
+      createActive: createActive,
+      onCreate: onCreate,
+      listboxId: listboxId,
+      createId: createId,
+      zIndex: zIndex
+    })]
+  });
+}

package/shared/dropdownField/SuggestionsDropdown.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type DropdownItemDescriptor } from './types';
+type SuggestionsDropdownProps = {
+    floatingRef: Ref<HTMLDivElement>;
+    floatingStyles: CSSProperties;
+    items: DropdownItemDescriptor[];
+    emptyText?: ReactNode;
+    createLabel?: ReactNode;
+    createActive?: boolean;
+    onCreate?: () => void;
+    listboxId?: string;
+    createId?: string;
+    zIndex?: number;
+};
+export declare function SuggestionsDropdown({ floatingRef, floatingStyles, items, emptyText, createLabel, createActive, onCreate, listboxId, createId, zIndex, }: SuggestionsDropdownProps): ReactElement | null;
+export {};

package/shared/dropdownField/SuggestionsDropdown.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { CreateItemLabel, Dropdown, DropdownEmpty, DropdownItem } from './styles';
+const CREATE_KEY = '__create__';
+export function SuggestionsDropdown({
+  floatingRef,
+  floatingStyles,
+  items,
+  emptyText = 'No options',
+  createLabel,
+  createActive,
+  onCreate,
+  listboxId,
+  createId,
+  zIndex
+}) {
+  const activeItemRef = useRef(null);
+  const activeItem = items.find(item => item.active);
+  const activeKey = createActive ? CREATE_KEY : (activeItem === null || activeItem === void 0 ? void 0 : activeItem.key) ?? null;
+  useEffect(() => {
+    var _activeItemRef$curren;
+    if (activeKey === null) return;
+    (_activeItemRef$curren = activeItemRef.current) === null || _activeItemRef$curren === void 0 || _activeItemRef$curren.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [activeKey]);
+  if (typeof document === 'undefined') return null;
+  const isEmpty = items.length === 0 && !createLabel;
+  return createPortal(_jsxs(Dropdown, {
+    ref: floatingRef,
+    style: {
+      ...floatingStyles,
+      zIndex
+    },
+    id: listboxId,
+    role: "listbox",
+    children: [createLabel && _jsx(DropdownItem, {
+      ref: createActive ? activeItemRef : undefined,
+      id: createId,
+      role: "option",
+      "aria-selected": false,
+      "$active": createActive,
+      onMouseDown: e => {
+        e.preventDefault();
+        onCreate === null || onCreate === void 0 || onCreate();
+      },
+      children: _jsx(CreateItemLabel, {
+        children: createLabel
+      })
+    }), items.map(item => _jsx(DropdownItem, {
+      ref: item.active ? activeItemRef : undefined,
+      id: item.id,
+      role: "option",
+      "aria-selected": !!item.selected,
+      "$active": item.active,
+      "$selected": item.selected,
+      onMouseDown: e => {
+        var _item$onSelect;
+        e.preventDefault();
+        (_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item);
+      },
+      children: item.label
+    }, item.key)), isEmpty && _jsx(DropdownEmpty, {
+      children: emptyText
+    })]
+  }), document.body);
+}

package/shared/dropdownField/constants.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '@pushwoosh/kit-constants';
+export declare const LOADING_BORDER_COLORS: readonly [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
+export declare const LOADING_BORDER_ANIMATION_MS = 3000;
+export declare const DROPDOWN_MAX_HEIGHT = 280;
+export declare const DROPDOWN_MAX_WIDTH = 320;
+export declare const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/constants.js

@@ -0,0 +1,6 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const LOADING_BORDER_COLORS = [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
+export const LOADING_BORDER_ANIMATION_MS = 3000;
+export const DROPDOWN_MAX_HEIGHT = 280;
+export const DROPDOWN_MAX_WIDTH = 320;
+export const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/index.d.ts

@@ -0,0 +1,13 @@
+export { SuggestionsDropdown } from './SuggestionsDropdown';
+export { FieldShell } from './FieldShell';
+export { FieldInput } from './FieldInput';
+export { useDropdownPosition } from './useDropdownPosition';
+export { useDebouncedValue } from './useDebouncedValue';
+export { useAsyncItems } from './useAsyncItems';
+export { useDropdownItems } from './useDropdownItems';
+export { useActiveIndex } from './useActiveIndex';
+export { useFieldOpenEffects } from './useFieldOpenEffects';
+export { useListNavigation } from './useListNavigation';
+export { defaultGetKey, defaultLabelFilter, useShellMouseDown } from './shared';
+export { DEFAULT_DEBOUNCE_MS } from './constants';
+export type { ItemState, DropdownItemDescriptor, GetKeyProp, ItemsSource, } from './types';

package/shared/dropdownField/index.js

@@ -0,0 +1,12 @@
+export { SuggestionsDropdown } from './SuggestionsDropdown';
+export { FieldShell } from './FieldShell';
+export { FieldInput } from './FieldInput';
+export { useDropdownPosition } from './useDropdownPosition';
+export { useDebouncedValue } from './useDebouncedValue';
+export { useAsyncItems } from './useAsyncItems';
+export { useDropdownItems } from './useDropdownItems';
+export { useActiveIndex } from './useActiveIndex';
+export { useFieldOpenEffects } from './useFieldOpenEffects';
+export { useListNavigation } from './useListNavigation';
+export { defaultGetKey, defaultLabelFilter, useShellMouseDown } from './shared';
+export { DEFAULT_DEBOUNCE_MS } from './constants';

package/shared/dropdownField/shared.d.ts

@@ -0,0 +1,4 @@
+import { type MouseEvent, type RefObject } from 'react';
+export declare function defaultGetKey<T>(item: T): string | number;
+export declare function defaultLabelFilter<T>(item: T, query: string, getLabel: (item: T) => string): boolean;
+export declare function useShellMouseDown(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void): (event: MouseEvent<HTMLDivElement>) => void;

package/shared/dropdownField/shared.js

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+export function defaultGetKey(item) {
+  return item;
+}
+export function defaultLabelFilter(item, query, getLabel) {
+  return getLabel(item).toLowerCase().includes(query.toLowerCase());
+}
+export function useShellMouseDown(inputRef, isOpen, open) {
+  return useCallback(event => {
+    var _inputRef$current;
+    const target = event.target;
+    if (target instanceof HTMLInputElement) return;
+    if (target.closest('button')) return;
+    event.preventDefault();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    if (!isOpen) open();
+  }, [inputRef, isOpen, open]);
+}

package/shared/dropdownField/styles.d.ts

@@ -0,0 +1,24 @@
+export declare const Shell: import("styled-components").StyledComponent<"div", any, {
+    $isFocused?: boolean;
+    $isErrored?: boolean;
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+    $width?: string;
+    $minWidth?: string;
+    $autosize?: boolean;
+    $tightLeft?: boolean;
+}, never>;
+export declare const ShellInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const AutosizeMirror: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Indicators: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IndicatorButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export declare const Dropdown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownItem: import("styled-components").StyledComponent<"div", any, {
+    $active?: boolean;
+    $selected?: boolean;
+}, never>;
+export declare const DropdownEmpty: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CreateItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;

package/shared/dropdownField/styles.js

@@ -0,0 +1,81 @@
+import styled, { css, keyframes } from 'styled-components';
+import { Color, FontSize, LineHeight, Shadow, ShapeRadius, UnitSize } from '@pushwoosh/kit-constants';
+import { DROPDOWN_MAX_HEIGHT, LOADING_BORDER_ANIMATION_MS, LOADING_BORDER_COLORS } from './constants';
+const textBase = css(["font-size:", ";line-height:", ";color:", ";"], FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN);
+const rotate = keyframes(["from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(1turn);}"]);
+const [c1, c2, c3, c4] = LOADING_BORDER_COLORS;
+const loadingBorder = css(["&::before{content:'';position:absolute;z-index:0;top:50%;left:50%;width:200%;aspect-ratio:1;background-repeat:no-repeat;background-size:50% 50%,50% 50%,50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(", ",", "),linear-gradient(", ",", "),linear-gradient(", ",", "),linear-gradient(", ",", ");animation:", " ", "ms linear infinite;}&::after{content:'';position:absolute;z-index:1;inset:1px;background:", ";border-radius:calc(", " - 1px);}"], c1, c1, c2, c2, c3, c3, c4, c4, rotate, LOADING_BORDER_ANIMATION_MS, Color.CLEAR, ShapeRadius.CONTROL);
+export const Shell = styled.div.withConfig({
+  displayName: "Shell",
+  componentId: "sc-1pvwhhw-0"
+})(["position:relative;display:", ";align-items:center;gap:4px;width:", ";max-width:100%;min-width:", ";min-height:", ";padding:0 4px 0 ", ";", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-sizing:border-box;cursor:", ";overflow:hidden;", ""], ({
+  $autosize
+}) => $autosize ? 'inline-flex' : 'flex', ({
+  $autosize,
+  $width
+}) => {
+  if ($width) return $width;
+  return $autosize ? 'fit-content' : '100%';
+}, ({
+  $minWidth
+}) => $minWidth || '0', UnitSize.FIELD_HEIGHT, ({
+  $tightLeft
+}) => $tightLeft ? '6px' : '12px', textBase, ({
+  $isDisabled
+}) => $isDisabled ? Color.FROZEN : Color.CLEAR, ({
+  $isErrored,
+  $isFocused
+}) => {
+  if ($isErrored) return Color.DANGER;
+  if ($isFocused) return Color.BRIGHT;
+  return Color.FORM;
+}, ShapeRadius.CONTROL, ({
+  $isDisabled
+}) => $isDisabled ? 'not-allowed' : 'text', ({
+  $isLoading
+}) => $isLoading && css(["border-color:transparent;", ";"], loadingBorder));
+export const ShellInner = styled.div.withConfig({
+  displayName: "ShellInner",
+  componentId: "sc-1pvwhhw-1"
+})(["position:relative;z-index:2;display:flex;align-items:center;gap:4px;flex:1;min-width:0;flex-wrap:wrap;padding:3px 0;"]);
+export const Input = styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-1pvwhhw-2"
+})(["flex:1;min-width:30px;padding:0;margin:0;border:none;outline:none;background:transparent;font-family:inherit;", ";&::placeholder{color:", ";}&:disabled{cursor:not-allowed;}"], textBase, Color.PHANTOM);
+export const AutosizeMirror = styled.span.withConfig({
+  displayName: "AutosizeMirror",
+  componentId: "sc-1pvwhhw-3"
+})(["position:absolute;top:0;left:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;", ";"], textBase);
+export const Indicators = styled.div.withConfig({
+  displayName: "Indicators",
+  componentId: "sc-1pvwhhw-4"
+})(["position:relative;z-index:2;display:flex;align-items:center;gap:2px;flex-shrink:0;"]);
+export const IndicatorButton = styled.button.attrs({
+  type: 'button'
+}).withConfig({
+  displayName: "IndicatorButton",
+  componentId: "sc-1pvwhhw-5"
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:", ";cursor:pointer;border-radius:", ";transition:color 0.15s ease,background-color 0.15s ease;&:hover{color:", ";background-color:", ";}"], Color.PHANTOM, ShapeRadius.CONTROL, Color.MAIN, Color.FROZEN);
+export const Dropdown = styled.div.withConfig({
+  displayName: "Dropdown",
+  componentId: "sc-1pvwhhw-6"
+})(["max-height:", "px;overflow-y:auto;background:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";padding:4px 0;box-sizing:border-box;"], DROPDOWN_MAX_HEIGHT, Color.CLEAR, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR);
+export const DropdownItem = styled.div.withConfig({
+  displayName: "DropdownItem",
+  componentId: "sc-1pvwhhw-7"
+})(["display:flex;align-items:center;gap:6px;padding:6px 12px;overflow-wrap:anywhere;", ";& > *{min-width:0;}background:", ";cursor:pointer;&:hover{background:", ";}"], textBase, ({
+  $active,
+  $selected
+}) => {
+  if ($active) return Color.ROW_HOVER;
+  if ($selected) return Color.BRIGHT_LIGHT;
+  return 'transparent';
+}, Color.ROW_HOVER);
+export const DropdownEmpty = styled.div.withConfig({
+  displayName: "DropdownEmpty",
+  componentId: "sc-1pvwhhw-8"
+})(["padding:6px 12px;", ";color:", ";"], textBase, Color.PHANTOM);
+export const CreateItemLabel = styled.span.withConfig({
+  displayName: "CreateItemLabel",
+  componentId: "sc-1pvwhhw-9"
+})(["color:", ";"], Color.PRIMARY);

package/shared/dropdownField/types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export type ItemState = {
+    selected: boolean;
+    active: boolean;
+};
+export type GetKeyProp<T> = [T] extends [string | number] ? {
+    getKey?: (item: T) => string | number;
+} : {
+    getKey: (item: T) => string | number;
+};
+export type ItemsSource<T> = {
+    items: T[];
+    loadItems?: never;
+    debounceMs?: never;
+} | {
+    items?: never;
+    loadItems: (query: string) => Promise<T[]>;
+    debounceMs?: number;
+};
+export type DropdownItemDescriptor = {
+    key: string | number;
+    id?: string;
+    label: ReactNode;
+    active?: boolean;
+    selected?: boolean;
+    onSelect?: () => void;
+};

package/shared/dropdownField/types.js

@@ -0,0 +1 @@
+export {};

package/shared/dropdownField/useActiveIndex.d.ts

@@ -0,0 +1,2 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export declare function useActiveIndex(total: number, resetIndex: number): [number, Dispatch<SetStateAction<number>>];

package/shared/dropdownField/useActiveIndex.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export function useActiveIndex(total, resetIndex) {
+  const [activeIndex, setActiveIndex] = useState(resetIndex);
+  useEffect(() => {
+    setActiveIndex(prev => {
+      if (total === 0) return -1;
+      if (prev < 0 || prev >= total) return resetIndex;
+      return prev;
+    });
+  }, [total, resetIndex]);
+  return [activeIndex, setActiveIndex];
+}

package/shared/dropdownField/useAsyncItems.d.ts

@@ -0,0 +1,11 @@
+type Args<T> = {
+    loadItems?: (query: string) => Promise<T[]>;
+    query: string;
+    isOpen: boolean;
+    debounceMs?: number;
+};
+export declare function useAsyncItems<T>({ loadItems, query, isOpen, debounceMs, }: Args<T>): {
+    items: T[];
+    loading: boolean;
+};
+export {};

package/shared/dropdownField/useAsyncItems.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+import { DEFAULT_DEBOUNCE_MS } from './constants';
+import { useDebouncedValue } from './useDebouncedValue';
+export function useAsyncItems({
+  loadItems,
+  query,
+  isOpen,
+  debounceMs = DEFAULT_DEBOUNCE_MS
+}) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+  const loadItemsRef = useRef(loadItems);
+  loadItemsRef.current = loadItems;
+  const lastQueryRef = useRef(null);
+  useEffect(() => {
+    const loader = loadItemsRef.current;
+    if (!loader || !isOpen) {
+      lastQueryRef.current = null;
+      return undefined;
+    }
+    if (lastQueryRef.current === debouncedQuery) {
+      setLoading(false);
+      return undefined;
+    }
+    let cancelled = false;
+    setLoading(true);
+    Promise.resolve(loader(debouncedQuery)).then(result => {
+      if (cancelled) return;
+      lastQueryRef.current = debouncedQuery;
+      setItems(result);
+      setLoading(false);
+    }).catch(() => {
+      if (cancelled) return;
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+      setLoading(false);
+    };
+  }, [debouncedQuery, isOpen]);
+  return {
+    items,
+    loading
+  };
+}

package/shared/dropdownField/useDebouncedValue.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedValue<V>(value: V, delay: number): V;

package/shared/dropdownField/useDebouncedValue.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+export function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    if (delay <= 0) {
+      setDebounced(value);
+      return undefined;
+    }
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+}

package/shared/dropdownField/useDropdownItems.d.ts

@@ -0,0 +1,16 @@
+type Args<T> = {
+    items?: T[];
+    loadItems?: (query: string) => Promise<T[]>;
+    localItems?: T[];
+    debounceMs?: number;
+    getLabel: (item: T) => string;
+    filter?: (item: T, query: string) => boolean;
+    query: string;
+    isOpen: boolean;
+};
+export declare function useDropdownItems<T>({ items, loadItems, localItems, debounceMs, getLabel, filter, query, isOpen, }: Args<T>): {
+    sourceItems: T[];
+    filteredItems: T[];
+    loading: boolean;
+};
+export {};