@pushwoosh/dumb-components 1.1.141 → 1.1.142

package/Combobox/Combobox.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
-import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
 function FreeCombobox({
   items,
   loadItems,
   debounceMs = DEFAULT_DEBOUNCE_MS,
   value,
   onChange,
+  onClose,
+  autoFocus,
   getLabel: getLabelProp,
   filter,
   renderItem,
@@ -58,6 +60,13 @@ function FreeCombobox({
     onEscape: close
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
+  useFieldOpenEffects({
+    isOpen,
+    open,
+    onClose,
+    autoFocus,
+    inputRef
+  });
   const dropdownItems = useMemo(() => filteredItems.map((item, idx) => {
     const selected = getLabel(item) === value;
     const state = {
@@ -122,6 +131,8 @@ function SelectCombobox({
   debounceMs = DEFAULT_DEBOUNCE_MS,
   value,
   onChange,
+  onClose,
+  autoFocus,
   getLabel,
   getKey: getKeyProp,
   filter,
@@ -190,6 +201,13 @@ function SelectCombobox({
     onEscape: close
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
+  useFieldOpenEffects({
+    isOpen,
+    open,
+    onClose,
+    autoFocus,
+    inputRef
+  });
   const dropdownItems = useMemo(() => filteredItems.map((item, idx) => {
     const key = getKey(item);
     const selected = key === selectedKey;

package/Combobox/types.d.ts

@@ -13,6 +13,8 @@ type CommonProps<T> = {
     filter?: (item: T, query: string) => boolean;
     renderItem?: (item: T, state: ItemState) => ReactNode;
     renderEmpty?: (query: string) => ReactNode;
+    onClose?: () => void;
+    autoFocus?: boolean;
     placeholder?: string;
     disabled?: boolean;
     loading?: boolean;

package/ComboboxMulti/ComboboxMulti.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import { type ComboboxMultiProps } from './types';
-export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, value, onChange, getLabel, getKey: getKeyProp, filter, renderItem, renderEmpty, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, $isErrored, width, minWidth, }: ComboboxMultiProps<T>): ReactElement;
+export declare function ComboboxMulti<T>({ items, loadItems, debounceMs, value, onChange, onClose, autoFocus, getLabel, getKey: getKeyProp, filter, renderItem, renderEmpty, creatable, onCreate, canCreate, renderCreateLabel, maxValues, placeholder, disabled, loading, clearable, autosize, $isErrored, width, minWidth, }: ComboboxMultiProps<T>): ReactElement;

package/ComboboxMulti/ComboboxMulti.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { Chip } from '../Chip';
-import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
 function defaultCanCreate(query, items, getLabel) {
   const trimmed = query.trim();
   if (!trimmed) return false;
@@ -14,6 +14,8 @@ export function ComboboxMulti({
   debounceMs = DEFAULT_DEBOUNCE_MS,
   value,
   onChange,
+  onClose,
+  autoFocus,
   getLabel,
   getKey: getKeyProp,
   filter,
@@ -107,6 +109,13 @@ export function ComboboxMulti({
     onBackspaceEmpty: () => onChange(value.slice(0, -1))
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
+  useFieldOpenEffects({
+    isOpen,
+    open,
+    onClose,
+    autoFocus,
+    inputRef
+  });
   const toggleOpen = useCallback(() => {
     if (isOpen) {
       var _inputRef$current2;

package/ComboboxMulti/types.d.ts

@@ -13,6 +13,8 @@ type CreatableProp<T> = [T] extends [string] ? {
 export type ComboboxMultiProps<T> = ItemsSource<T> & GetKeyProp<T> & CreatableProp<T> & {
     value: T[];
     onChange: (value: T[]) => void;
+    onClose?: () => void;
+    autoFocus?: boolean;
     getLabel: (item: T) => string;
     filter?: (item: T, query: string) => boolean;
     renderItem?: (item: T, state: ItemState) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.141",
+  "version": "1.1.142",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/FieldShell.js

@@ -33,6 +33,7 @@ export function FieldShell({
   const {
     setReference,
     setFloating,
+    floatingRef,
     floatingStyles
   } = useDropdownPosition({
     isOpen: dropdownOpen,
@@ -44,6 +45,15 @@ export function FieldShell({
     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,
@@ -56,6 +66,7 @@ export function FieldShell({
       "$autosize": autosize,
       "$tightLeft": tightLeft,
       onMouseDown: onShellMouseDown,
+      onBlur: onShellBlur,
       children: [_jsx(ShellInner, {
         children: children
       }), _jsxs(Indicators, {

package/shared/dropdownField/index.d.ts

@@ -6,6 +6,7 @@ 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/index.js

@@ -6,6 +6,7 @@ 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/useDropdownPosition.d.ts

@@ -5,6 +5,7 @@ type Args = {
 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

@@ -35,6 +35,7 @@ export function useDropdownPosition({
   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]);
+}