@pushwoosh/dumb-components 1.1.140 → 1.1.142

package/shared/dropdownField/useDropdownItems.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { DEFAULT_DEBOUNCE_MS } from './constants';
+import { defaultLabelFilter } from './shared';
+import { useAsyncItems } from './useAsyncItems';
+export function useDropdownItems({
+  items,
+  loadItems,
+  localItems,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  getLabel,
+  filter,
+  query,
+  isOpen
+}) {
+  const isAsync = !!loadItems;
+  const {
+    items: loadedItems,
+    loading
+  } = useAsyncItems({
+    loadItems,
+    query,
+    isOpen,
+    debounceMs
+  });
+  const sourceItems = useMemo(() => isAsync ? loadedItems : [...(items ?? []), ...(localItems ?? [])], [isAsync, loadedItems, items, localItems]);
+  const filteredItems = useMemo(() => {
+    if (isAsync || !query) return sourceItems;
+    const fn = filter ?? ((item, q) => defaultLabelFilter(item, q, getLabel));
+    return sourceItems.filter(item => fn(item, query));
+  }, [isAsync, sourceItems, query, filter, getLabel]);
+  return {
+    sourceItems,
+    filteredItems,
+    loading
+  };
+}

package/shared/dropdownField/useDropdownPosition.d.ts

@@ -0,0 +1,11 @@
+type Args = {
+    isOpen?: boolean;
+    onClickOutside?: () => void;
+};
+export declare function useDropdownPosition({ isOpen, onClickOutside }: Args): {
+    setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+    setFloating: (node: HTMLElement | null) => void;
+    floatingRef: import("react").MutableRefObject<HTMLElement | null>;
+    floatingStyles: import("react").CSSProperties;
+};
+export {};

package/shared/dropdownField/useDropdownPosition.js

@@ -0,0 +1,41 @@
+import { autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom';
+import { DROPDOWN_MAX_WIDTH } from './constants';
+import { useOnClickOutside } from '../../hooks';
+export function useDropdownPosition({
+  isOpen,
+  onClickOutside
+}) {
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    open: isOpen,
+    strategy: 'fixed',
+    placement: 'bottom-start',
+    middleware: [offset(4), flip(), size({
+      apply({
+        rects,
+        elements,
+        availableWidth,
+        availableHeight
+      }) {
+        const maxWidth = Math.min(DROPDOWN_MAX_WIDTH, availableWidth);
+        Object.assign(elements.floating.style, {
+          minWidth: `${Math.min(rects.reference.width, maxWidth)}px`,
+          maxWidth: `${maxWidth}px`,
+          maxHeight: `${Math.max(0, availableHeight - 8)}px`
+        });
+      }
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  useOnClickOutside([refs.reference, refs.floating], () => {
+    if (isOpen) onClickOutside === null || onClickOutside === void 0 || onClickOutside();
+  });
+  return {
+    setReference: refs.setReference,
+    setFloating: refs.setFloating,
+    floatingRef: refs.floating,
+    floatingStyles
+  };
+}

package/shared/dropdownField/useFieldOpenEffects.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+type Args = {
+    isOpen: boolean;
+    open: () => void;
+    onClose?: () => void;
+    autoFocus?: boolean;
+    inputRef: RefObject<HTMLInputElement>;
+};
+export declare function useFieldOpenEffects({ isOpen, open, onClose, autoFocus, inputRef, }: Args): void;
+export {};

package/shared/dropdownField/useFieldOpenEffects.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+export function useFieldOpenEffects({
+  isOpen,
+  open,
+  onClose,
+  autoFocus,
+  inputRef
+}) {
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const wasOpenRef = useRef(isOpen);
+  useEffect(() => {
+    var _onCloseRef$current;
+    if (wasOpenRef.current && !isOpen) (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+  const didAutoFocusRef = useRef(false);
+  useEffect(() => {
+    var _inputRef$current;
+    if (!autoFocus || didAutoFocusRef.current) return;
+    didAutoFocusRef.current = true;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    open();
+  }, [autoFocus, open, inputRef]);
+}

package/shared/dropdownField/useListNavigation.d.ts

@@ -0,0 +1,16 @@
+import { type Dispatch, type KeyboardEvent, type SetStateAction } from 'react';
+type Args = {
+    isOpen: boolean;
+    open: () => void;
+    itemCount: number;
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+    onSelectIndex: (index: number) => void;
+    onEscape: () => void;
+    hasExtraRow?: boolean;
+    onSelectExtra?: () => void;
+    isQueryEmpty?: boolean;
+    onBackspaceEmpty?: () => void;
+};
+export declare function useListNavigation({ isOpen, open, itemCount, activeIndex, setActiveIndex, onSelectIndex, onEscape, hasExtraRow, onSelectExtra, isQueryEmpty, onBackspaceEmpty, }: Args): (event: KeyboardEvent<HTMLInputElement>) => void;
+export {};

package/shared/dropdownField/useListNavigation.js

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+export function useListNavigation({
+  isOpen,
+  open,
+  itemCount,
+  activeIndex,
+  setActiveIndex,
+  onSelectIndex,
+  onEscape,
+  hasExtraRow,
+  onSelectExtra,
+  isQueryEmpty,
+  onBackspaceEmpty
+}) {
+  const total = itemCount + (hasExtraRow ? 1 : 0);
+  return useCallback(event => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!isOpen) open();else if (total > 0) setActiveIndex(prev => prev >= total - 1 ? 0 : prev + 1);
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!isOpen) open();else if (total > 0) setActiveIndex(prev => prev <= 0 ? total - 1 : prev - 1);
+      return;
+    }
+    if (event.key === 'Enter') {
+      if (!isOpen || activeIndex < 0 || activeIndex >= total) return;
+      event.preventDefault();
+      if (hasExtraRow && activeIndex === 0) onSelectExtra === null || onSelectExtra === void 0 || onSelectExtra();else onSelectIndex(hasExtraRow ? activeIndex - 1 : activeIndex);
+      return;
+    }
+    if (event.key === 'Escape') {
+      if (isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        onEscape();
+      }
+      return;
+    }
+    if (event.key === 'Backspace' && isQueryEmpty && onBackspaceEmpty) {
+      onBackspaceEmpty();
+    }
+  }, [isOpen, open, total, activeIndex, setActiveIndex, onSelectIndex, onSelectExtra, onEscape, hasExtraRow, isQueryEmpty, onBackspaceEmpty]);
+}