@pushwoosh/dumb-components 1.1.140 → 1.1.142

package/Combobox/Combobox.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import { type FreeComboboxProps, type SelectComboboxProps } from './types';
+export declare function Combobox(props: FreeComboboxProps): ReactElement;
+export declare function Combobox<T>(props: SelectComboboxProps<T>): ReactElement;

package/Combobox/Combobox.js

@@ -0,0 +1,272 @@
+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, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+function FreeCombobox({
+  items,
+  loadItems,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  value,
+  onChange,
+  onClose,
+  autoFocus,
+  getLabel: getLabelProp,
+  filter,
+  renderItem,
+  renderEmpty,
+  placeholder,
+  disabled,
+  loading,
+  clearable,
+  autosize,
+  $isErrored,
+  width,
+  minWidth
+}) {
+  const inputRef = useRef(null);
+  const baseId = useId();
+  const listboxId = `${baseId}-list`;
+  const getLabel = useMemo(() => getLabelProp ?? (item => item), [getLabelProp]);
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    filteredItems,
+    loading: asyncLoading
+  } = useDropdownItems({
+    items,
+    loadItems,
+    debounceMs,
+    getLabel,
+    filter,
+    query: value,
+    isOpen
+  });
+  const [activeIndex, setActiveIndex] = useActiveIndex(filteredItems.length, -1);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }, [setActiveIndex]);
+  const pick = useCallback(item => {
+    onChange(getLabel(item));
+    setIsOpen(false);
+    setActiveIndex(-1);
+  }, [onChange, getLabel, setActiveIndex]);
+  const onInputKeyDown = useListNavigation({
+    isOpen,
+    open,
+    itemCount: filteredItems.length,
+    activeIndex,
+    setActiveIndex,
+    onSelectIndex: index => pick(filteredItems[index]),
+    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 = {
+      active: idx === activeIndex,
+      selected
+    };
+    return {
+      key: item,
+      id: `${baseId}-opt-${item}`,
+      label: renderItem ? renderItem(item, state) : getLabel(item),
+      active: state.active,
+      selected,
+      onSelect: () => pick(item)
+    };
+  }), [filteredItems, activeIndex, value, getLabel, renderItem, pick, baseId]);
+  const dropdownVisible = isOpen && filteredItems.length > 0;
+  const activeDescendant = activeIndex >= 0 && activeIndex < filteredItems.length ? `${baseId}-opt-${filteredItems[activeIndex]}` : undefined;
+  const onInputChange = event => {
+    onChange(event.target.value);
+    if (!isOpen) open();
+  };
+  return _jsx(FieldShell, {
+    isOpen: isOpen,
+    dropdownOpen: dropdownVisible,
+    isErrored: $isErrored,
+    disabled: disabled,
+    loading: loading || asyncLoading,
+    width: width,
+    minWidth: minWidth,
+    autosize: autosize,
+    onShellMouseDown: onShellMouseDown,
+    onClose: close,
+    showClear: !!(clearable && value),
+    onClear: () => {
+      var _inputRef$current;
+      onChange('');
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    },
+    dropdownItems: dropdownItems,
+    emptyText: renderEmpty ? renderEmpty(value) : undefined,
+    listboxId: listboxId,
+    children: _jsx(FieldInput, {
+      ref: inputRef,
+      autosize: autosize,
+      value: value,
+      onChange: onInputChange,
+      onKeyDown: onInputKeyDown,
+      onFocus: open,
+      placeholder: placeholder,
+      disabled: disabled,
+      role: "combobox",
+      "aria-expanded": dropdownVisible,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeDescendant
+    })
+  });
+}
+function SelectCombobox({
+  items,
+  loadItems,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  value,
+  onChange,
+  onClose,
+  autoFocus,
+  getLabel,
+  getKey: getKeyProp,
+  filter,
+  renderItem,
+  renderEmpty,
+  placeholder,
+  disabled,
+  loading,
+  clearable,
+  autosize,
+  $isErrored,
+  width,
+  minWidth
+}) {
+  const inputRef = useRef(null);
+  const baseId = useId();
+  const listboxId = `${baseId}-list`;
+  const optionId = key => `${baseId}-opt-${key}`;
+  const getKey = getKeyProp ?? defaultGetKey;
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const {
+    sourceItems,
+    filteredItems,
+    loading: asyncLoading
+  } = useDropdownItems({
+    items,
+    loadItems,
+    debounceMs,
+    getLabel,
+    filter,
+    query,
+    isOpen
+  });
+  const [activeIndex, setActiveIndex] = useActiveIndex(filteredItems.length, 0);
+  const hasValue = value !== null && value !== undefined;
+  const valueLabel = hasValue ? getLabel(value) : '';
+  const selectedKey = hasValue ? getKey(value) : null;
+  const inputValue = isOpen ? query : valueLabel;
+  const open = useCallback(() => {
+    if (isOpen) return;
+    setIsOpen(true);
+    setQuery('');
+    const idx = sourceItems.findIndex(it => getKey(it) === selectedKey);
+    setActiveIndex(idx >= 0 ? idx : 0);
+  }, [isOpen, sourceItems, getKey, selectedKey, setActiveIndex]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setQuery('');
+  }, []);
+  const commit = useCallback(item => {
+    var _inputRef$current2;
+    onChange(item);
+    setIsOpen(false);
+    setQuery('');
+    setActiveIndex(0);
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+  }, [onChange, setActiveIndex]);
+  const onInputKeyDown = useListNavigation({
+    isOpen,
+    open,
+    itemCount: filteredItems.length,
+    activeIndex,
+    setActiveIndex,
+    onSelectIndex: index => commit(filteredItems[index]),
+    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;
+    const state = {
+      active: idx === activeIndex,
+      selected
+    };
+    return {
+      key,
+      id: `${baseId}-opt-${key}`,
+      label: renderItem ? renderItem(item, state) : getLabel(item),
+      active: state.active,
+      selected,
+      onSelect: () => commit(item)
+    };
+  }), [filteredItems, activeIndex, selectedKey, getLabel, getKey, renderItem, commit, baseId]);
+  const activeDescendant = activeIndex >= 0 && activeIndex < filteredItems.length ? optionId(getKey(filteredItems[activeIndex])) : undefined;
+  return _jsx(FieldShell, {
+    isOpen: isOpen,
+    dropdownOpen: isOpen,
+    isErrored: $isErrored,
+    disabled: disabled,
+    loading: loading || asyncLoading,
+    width: width,
+    minWidth: minWidth,
+    autosize: autosize,
+    onShellMouseDown: onShellMouseDown,
+    onClose: close,
+    showClear: !!(clearable && hasValue),
+    onClear: () => {
+      var _inputRef$current3;
+      onChange(null);
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+    },
+    dropdownItems: dropdownItems,
+    emptyText: renderEmpty ? renderEmpty(query) : undefined,
+    listboxId: listboxId,
+    children: _jsx(FieldInput, {
+      ref: inputRef,
+      autosize: autosize,
+      value: inputValue,
+      onChange: event => setQuery(event.target.value),
+      onKeyDown: onInputKeyDown,
+      onFocus: open,
+      placeholder: placeholder,
+      disabled: disabled,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeDescendant
+    })
+  });
+}
+export function Combobox(props) {
+  if (props.select) return _jsx(SelectCombobox, {
+    ...props
+  });
+  return _jsx(FreeCombobox, {
+    ...props
+  });
+}

package/Combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { Combobox } from './Combobox';
+export type { ComboboxProps, FreeComboboxProps, SelectComboboxProps, } from './types';

package/Combobox/index.js

@@ -0,0 +1 @@
+export { Combobox } from './Combobox';

package/Combobox/types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { GetKeyProp, ItemState } from '../shared/dropdownField';
+type ComboboxSource<T> = {
+    items?: T[];
+    loadItems?: never;
+    debounceMs?: never;
+} | {
+    items?: never;
+    loadItems: (query: string) => Promise<T[]>;
+    debounceMs?: number;
+};
+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;
+    clearable?: boolean;
+    autosize?: boolean;
+    $isErrored?: boolean;
+    width?: string;
+    minWidth?: string;
+};
+export type FreeComboboxProps = ComboboxSource<string> & CommonProps<string> & {
+    select?: false;
+    value: string;
+    onChange: (value: string) => void;
+    getLabel?: (item: string) => string;
+};
+export type SelectComboboxProps<T> = ComboboxSource<T> & GetKeyProp<T> & CommonProps<T> & {
+    select: true;
+    value: T | null;
+    onChange: (value: T | null) => void;
+    getLabel: (item: T) => string;
+};
+export type ComboboxProps<T> = FreeComboboxProps | SelectComboboxProps<T>;
+export {};

package/Combobox/types.js

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

package/ComboboxMulti/ComboboxMulti.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import { type ComboboxMultiProps } from './types';
+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

@@ -0,0 +1,203 @@
+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, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+function defaultCanCreate(query, items, getLabel) {
+  const trimmed = query.trim();
+  if (!trimmed) return false;
+  const lower = trimmed.toLowerCase();
+  return !items.some(item => getLabel(item).toLowerCase() === lower);
+}
+export function ComboboxMulti({
+  items,
+  loadItems,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  value,
+  onChange,
+  onClose,
+  autoFocus,
+  getLabel,
+  getKey: getKeyProp,
+  filter,
+  renderItem,
+  renderEmpty,
+  creatable,
+  onCreate,
+  canCreate,
+  renderCreateLabel,
+  maxValues,
+  placeholder,
+  disabled,
+  loading,
+  clearable,
+  autosize,
+  $isErrored,
+  width,
+  minWidth
+}) {
+  const inputRef = useRef(null);
+  const isAsync = !!loadItems;
+  const getKey = getKeyProp ?? defaultGetKey;
+  const baseId = useId();
+  const listboxId = `${baseId}-list`;
+  const createId = `${baseId}-create`;
+  const optionId = key => `${baseId}-opt-${key}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [createdItems, setCreatedItems] = useState([]);
+  const {
+    sourceItems,
+    filteredItems,
+    loading: asyncLoading
+  } = useDropdownItems({
+    items,
+    loadItems,
+    localItems: createdItems,
+    debounceMs,
+    getLabel,
+    filter,
+    query,
+    isOpen
+  });
+  const selectedKeys = useMemo(() => {
+    const set = new Set();
+    value.forEach(item => set.add(getKey(item)));
+    return set;
+  }, [value, getKey]);
+  const visibleItems = useMemo(() => filteredItems.filter(item => !selectedKeys.has(getKey(item))), [filteredItems, selectedKeys, getKey]);
+  const atMax = maxValues !== undefined && value.length >= maxValues;
+  const canCreateNow = !!(creatable && query.trim() && !atMax && (canCreate ? canCreate(query, sourceItems) : defaultCanCreate(query, sourceItems, getLabel)));
+  const totalRows = visibleItems.length + (canCreateNow ? 1 : 0);
+  const [activeIndex, setActiveIndex] = useActiveIndex(totalRows, 0);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setQuery('');
+  }, []);
+  const toggle = useCallback(item => {
+    var _inputRef$current;
+    const key = getKey(item);
+    if (selectedKeys.has(key)) {
+      onChange(value.filter(v => getKey(v) !== key));
+      return;
+    }
+    if (maxValues !== undefined && value.length >= maxValues) return;
+    onChange([...value, item]);
+    setIsOpen(true);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, [value, getKey, selectedKeys, onChange, maxValues]);
+  const create = useCallback(() => {
+    const trimmed = query.trim();
+    if (!trimmed || atMax) return;
+    const item = onCreate ? onCreate(trimmed) : trimmed;
+    if (!isAsync) setCreatedItems(prev => [...prev, item]);
+    onChange([...value, item]);
+    setQuery('');
+    setActiveIndex(0);
+  }, [query, atMax, onCreate, isAsync, onChange, value, setActiveIndex]);
+  const onInputKeyDown = useListNavigation({
+    isOpen,
+    open,
+    itemCount: visibleItems.length,
+    activeIndex,
+    setActiveIndex,
+    onSelectIndex: index => toggle(visibleItems[index]),
+    onEscape: close,
+    hasExtraRow: canCreateNow,
+    onSelectExtra: create,
+    isQueryEmpty: !query && value.length > 0,
+    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;
+      close();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    } else {
+      var _inputRef$current3;
+      open();
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+    }
+  }, [isOpen, open, close]);
+  const itemOffset = canCreateNow ? 1 : 0;
+  const dropdownItems = useMemo(() => visibleItems.map((item, idx) => {
+    const key = getKey(item);
+    const state = {
+      active: idx + itemOffset === activeIndex,
+      selected: false
+    };
+    return {
+      key,
+      id: `${baseId}-opt-${key}`,
+      label: renderItem ? renderItem(item, state) : getLabel(item),
+      active: state.active,
+      selected: state.selected,
+      onSelect: () => toggle(item)
+    };
+  }), [visibleItems, itemOffset, activeIndex, renderItem, getLabel, getKey, toggle, baseId]);
+  const createActive = canCreateNow && activeIndex === 0;
+  const activeItem = visibleItems[activeIndex - itemOffset];
+  let activeDescendant;
+  if (createActive) activeDescendant = createId;else if (activeItem !== undefined) activeDescendant = optionId(getKey(activeItem));
+  let createLabel;
+  if (canCreateNow) {
+    createLabel = renderCreateLabel ? renderCreateLabel(query.trim()) : `Create "${query.trim()}"`;
+  }
+  const hasTags = value.length > 0;
+  return _jsxs(FieldShell, {
+    isOpen: isOpen,
+    dropdownOpen: isOpen,
+    isErrored: $isErrored,
+    disabled: disabled,
+    loading: loading || asyncLoading,
+    width: width,
+    minWidth: minWidth,
+    autosize: autosize,
+    tightLeft: hasTags,
+    onShellMouseDown: onShellMouseDown,
+    onClose: close,
+    showClear: !!(clearable && hasTags),
+    onClear: () => onChange([]),
+    clearLabel: "Clear all",
+    showChevron: true,
+    onToggle: toggleOpen,
+    dropdownItems: dropdownItems,
+    emptyText: renderEmpty ? renderEmpty(query) : undefined,
+    createLabel: createLabel,
+    createActive: createActive,
+    onCreate: create,
+    listboxId: listboxId,
+    createId: createId,
+    children: [value.map(item => {
+      const key = getKey(item);
+      return _jsx(Chip, {
+        "$readOnly": disabled,
+        "$onClose": disabled ? undefined : () => onChange(value.filter(v => getKey(v) !== key)),
+        "$maxWidth": "100%",
+        children: getLabel(item)
+      }, key);
+    }), _jsx(FieldInput, {
+      ref: inputRef,
+      autosize: autosize,
+      value: query,
+      onChange: e => setQuery(e.target.value),
+      onKeyDown: onInputKeyDown,
+      onFocus: open,
+      placeholder: hasTags ? undefined : placeholder,
+      disabled: disabled,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeDescendant
+    })]
+  });
+}

package/ComboboxMulti/index.d.ts

@@ -0,0 +1,2 @@
+export { ComboboxMulti } from './ComboboxMulti';
+export type { ComboboxMultiProps } from './types';

package/ComboboxMulti/index.js

@@ -0,0 +1 @@
+export { ComboboxMulti } from './ComboboxMulti';

package/ComboboxMulti/types.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { GetKeyProp, ItemState, ItemsSource } from '../shared/dropdownField';
+type CreatableProp<T> = [T] extends [string] ? {
+    creatable?: boolean;
+    onCreate?: (query: string) => T;
+} : {
+    creatable?: false;
+    onCreate?: never;
+} | {
+    creatable: true;
+    onCreate: (query: string) => T;
+};
+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;
+    renderEmpty?: (query: string) => ReactNode;
+    canCreate?: (query: string, items: T[]) => boolean;
+    renderCreateLabel?: (query: string) => ReactNode;
+    maxValues?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    clearable?: boolean;
+    autosize?: boolean;
+    $isErrored?: boolean;
+    width?: string;
+    minWidth?: string;
+};
+export {};

package/ComboboxMulti/types.js

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

package/hooks/useLayer.js

@@ -1,38 +1,65 @@
 import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 const BASE_Z_INDEX = 10000;
 const Z_INDEX_STEP = 100;
-const stack = [];
-const subscribers = new Set();
-let keydownAttached = false;
+const GLOBAL_KEY = '__pushwoosh_dumb_components_layer_state__';
+function createState() {
+  return {
+    stack: [],
+    subscribers: new Set(),
+    keydownHandler: null
+  };
+}
+function isLayerState(value) {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return Array.isArray(candidate.stack) && candidate.subscribers instanceof Set;
+}
+function getState() {
+  const globalScope = window;
+  if (!isLayerState(globalScope[GLOBAL_KEY])) {
+    globalScope[GLOBAL_KEY] = createState();
+  }
+  return globalScope[GLOBAL_KEY];
+}
 function notify() {
-  subscribers.forEach(subscriber => subscriber());
+  getState().subscribers.forEach(subscriber => subscriber());
 }
 function handleKeydown(event) {
   var _top$close;
   if (event.key !== 'Escape') {
     return;
   }
+  const {
+    stack
+  } = getState();
   const top = stack[stack.length - 1];
   top === null || top === void 0 || (_top$close = top.close) === null || _top$close === void 0 || _top$close.call(top);
 }
 function ensureKeydownListener() {
-  if (!keydownAttached && stack.length > 0) {
-    window.addEventListener('keydown', handleKeydown);
-    keydownAttached = true;
+  const state = getState();
+  if (!state.keydownHandler && state.stack.length > 0) {
+    state.keydownHandler = handleKeydown;
+    window.addEventListener('keydown', state.keydownHandler);
   }
 }
 function teardownKeydownListener() {
-  if (keydownAttached && stack.length === 0) {
-    window.removeEventListener('keydown', handleKeydown);
-    keydownAttached = false;
+  const state = getState();
+  if (state.keydownHandler && state.stack.length === 0) {
+    window.removeEventListener('keydown', state.keydownHandler);
+    state.keydownHandler = null;
   }
 }
 function registerLayer(entry) {
-  stack.push(entry);
+  getState().stack.push(entry);
   ensureKeydownListener();
   notify();
 }
 function unregisterLayer(id) {
+  const {
+    stack
+  } = getState();
   const index = stack.findIndex(entry => entry.id === id);
   if (index !== -1) {
     stack.splice(index, 1);
@@ -41,7 +68,7 @@ function unregisterLayer(id) {
   notify();
 }
 function getDepth(id) {
-  return stack.findIndex(entry => entry.id === id);
+  return getState().stack.findIndex(entry => entry.id === id);
 }
 export function useLayer({
   isOpen,
@@ -54,9 +81,9 @@ export function useLayer({
   const [, forceRender] = useState(0);
   useEffect(() => {
     const subscriber = () => forceRender(value => value + 1);
-    subscribers.add(subscriber);
+    getState().subscribers.add(subscriber);
     return () => {
-      subscribers.delete(subscriber);
+      getState().subscribers.delete(subscriber);
     };
   }, []);
   useLayoutEffect(() => {