@pushwoosh/dumb-components 1.1.140 → 1.1.141

package/shared/dropdownField/useDropdownPosition.js

@@ -0,0 +1,40 @@
+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,
+    floatingStyles
+  };
+}

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]);
+}