@pushwoosh/dumb-components 1.1.177 → 1.1.179

package/Combobox/Combobox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState } from 'react';
-import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown, useToggleOpen } from '../shared/dropdownField';
 function FreeCombobox({
   items,
   loadItems,
@@ -228,17 +228,7 @@ function SelectCombobox({
     onReachEnd: loadMore
   });
   const onShellMouseDown = useShellMouseDown(inputRef, isOpen, open);
-  const toggleOpen = useCallback(() => {
-    if (isOpen) {
-      var _inputRef$current3;
-      close();
-      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
-    } else {
-      var _inputRef$current4;
-      open();
-      (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 || _inputRef$current4.focus();
-    }
-  }, [isOpen, open, close]);
+  const toggleOpen = useToggleOpen(inputRef, isOpen, open, close);
   useFieldOpenEffects({
     isOpen,
     open,
@@ -279,9 +269,9 @@ function SelectCombobox({
     showChevron: true,
     onToggle: toggleOpen,
     onClear: () => {
-      var _inputRef$current5;
+      var _inputRef$current3;
       onChange(null);
-      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.focus();
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
     },
     dropdownItems: dropdownItems,
     emptyText: resolveDropdownText(emptyText, query),

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, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown } from '../shared/dropdownField';
+import { DEFAULT_DEBOUNCE_MS, FieldInput, FieldShell, defaultGetKey, resolveDropdownText, useActiveIndex, useDropdownItems, useFieldOpenEffects, useListNavigation, useShellMouseDown, useToggleOpen } from '../shared/dropdownField';
 function defaultCanCreate(query, items, getLabel) {
   const trimmed = query.trim();
   if (!trimmed) return false;
@@ -136,17 +136,7 @@ export function ComboboxMulti({
     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 toggleOpen = useToggleOpen(inputRef, isOpen, open, close);
   const itemOffset = canCreateNow ? 1 : 0;
   const dropdownItems = useMemo(() => visibleItems.map((item, idx) => {
     const key = getKey(item);

package/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from 'react';
 import type { GroupBase } from 'react-select';
-import type { SelectProps, SelectAsyncProps, SelectCreatableProps } from './types';
+import type { SelectProps, SelectAsyncProps } from './types';
 /**
  * Styled `react-select` dropdown (single or multi via `isMulti`).
  *
@@ -20,11 +20,3 @@ export declare function Select<Option, IsMulti extends boolean = false, Group ex
  * <SelectAsync loadOptions={fetchOptions} defaultOptions />
  */
 export declare function SelectAsync<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectAsyncProps<Option, IsMulti, Group>): ReactElement;
-/**
- * Styled `react-select` dropdown that lets the user create new options by typing.
- *
- * @deprecated Use the free-text {@link Combobox} instead.
- * @example
- * <CreatableSelect options={options} onCreateOption={addOption} />
- */
-export declare function CreatableSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectCreatableProps<Option, IsMulti, Group>): ReactElement;

package/Select/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { CLASS_NAME_PREFIX } from './constants';
-import { SelectStyled, SelectAsyncStyled, SelectCreatableStyled, ClearIndicatorBox } from './styles';
+import { SelectStyled, SelectAsyncStyled, ClearIndicatorBox } from './styles';
 const componentsProps = {
   ClearIndicator: ({
     clearValue
@@ -54,24 +54,4 @@ export function SelectAsync(props) {
     components: componentsProps,
     ...customProps
   });
-}
-/**
- * Styled `react-select` dropdown that lets the user create new options by typing.
- *
- * @deprecated Use the free-text {@link Combobox} instead.
- * @example
- * <CreatableSelect options={options} onCreateOption={addOption} />
- */
-export function CreatableSelect(props) {
-  const {
-    classNamePrefix = CLASS_NAME_PREFIX
-  } = props;
-  const customProps = {
-    ...props,
-    classNamePrefix
-  };
-  return _jsx(SelectCreatableStyled, {
-    components: componentsProps,
-    ...customProps
-  });
 }

package/Select/index.d.ts

@@ -1,5 +1,5 @@
 export { components as SelectComponents } from 'react-select';
 export type { SingleValue, MultiValue } from 'react-select';
 export { CLASS_NAME_PREFIX } from './constants';
-export { Select, SelectAsync, CreatableSelect } from './Select';
+export { Select, SelectAsync } from './Select';
 export type { SelectBase, SelectOption, MultiSelectOptions } from './types';

package/Select/index.js

@@ -1,3 +1,3 @@
 export { components as SelectComponents } from 'react-select';
 export { CLASS_NAME_PREFIX } from './constants';
-export { Select, SelectAsync, CreatableSelect } from './Select';
+export { Select, SelectAsync } from './Select';

package/Select/styles.d.ts

@@ -1,7 +1,5 @@
 import ReactSelect from 'react-select';
 import ReactSelectAsync from 'react-select/async';
-import ReactSelectCreatable from 'react-select/creatable';
 export declare const SelectStyled: typeof ReactSelect;
 export declare const SelectAsyncStyled: typeof ReactSelectAsync;
-export declare const SelectCreatableStyled: typeof ReactSelectCreatable;
 export declare const ClearIndicatorBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Select/styles.js

@@ -1,6 +1,5 @@
 import ReactSelect from 'react-select';
 import ReactSelectAsync from 'react-select/async';
-import ReactSelectCreatable from 'react-select/creatable';
 import styled, { css } from 'styled-components';
 import { Color, FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
 import { CLASS_NAME_PREFIX } from './constants';
@@ -25,11 +24,7 @@ export const SelectAsyncStyled = styled(ReactSelectAsync).withConfig({
   displayName: "SelectAsyncStyled",
   componentId: "sc-c2oq4h-1"
 })(["", ";"], selectStyles);
-export const SelectCreatableStyled = styled(ReactSelectCreatable).withConfig({
-  displayName: "SelectCreatableStyled",
-  componentId: "sc-c2oq4h-2"
-})(["", ";"], selectStyles);
 export const ClearIndicatorBox = styled.div.withConfig({
   displayName: "ClearIndicatorBox",
-  componentId: "sc-c2oq4h-3"
+  componentId: "sc-c2oq4h-2"
 })(["color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{color:", ";transform:scale(1.2);}"], Color.PHANTOM, Color.MAIN);

package/Select/types.d.ts

@@ -1,6 +1,5 @@
 import type { Props, GroupBase, MultiValue } from 'react-select';
 import type { AsyncProps } from 'react-select/async';
-import type { CreatableProps } from 'react-select/creatable';
 /** A single `{ label, value }` option for the `react-select`-based selects. */
 export type SelectOption = {
     /** Text shown in the control and dropdown. */
@@ -27,8 +26,3 @@ export type SelectProps<Option, IsMulti extends boolean = false, Group extends G
  * @deprecated Use {@link Combobox} with `loadItems` instead.
  */
 export type SelectAsyncProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = SelectProps<Option, IsMulti, Group> & AsyncProps<Option, IsMulti, Group> & SelectBase;
-/**
- * Props of {@link CreatableSelect} — {@link SelectProps} plus `react-select/creatable` props.
- * @deprecated Use the free-text {@link Combobox} instead.
- */
-export type SelectCreatableProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = SelectProps<Option, IsMulti, Group> & CreatableProps<Option, IsMulti, Group> & SelectBase;

package/index.d.ts

@@ -21,7 +21,7 @@ export { RadioCard } from './RadioCard';
 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 { Select, SelectAsync, SelectComponents, CLASS_NAME_PREFIX, type SelectBase, type SelectOption, type MultiSelectOptions, type SingleValue, type MultiValue, } from './Select';
 export { Combobox, type ComboboxProps, type ComboboxChangeSource, type ComboboxChangeMeta, type FreeComboboxProps, type SelectComboboxProps, } from './Combobox';
 export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';

package/index.js

@@ -21,7 +21,7 @@ export { RadioCard } from './RadioCard';
 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 { Select, SelectAsync, SelectComponents, CLASS_NAME_PREFIX } from './Select';
 export { Combobox } from './Combobox';
 export { ComboboxMulti } from './ComboboxMulti';
 export { Switch } from './Switch';

package/package.json

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

package/shared/dropdownField/index.d.ts

@@ -8,6 +8,6 @@ export { useDropdownItems } from './useDropdownItems';
 export { useActiveIndex } from './useActiveIndex';
 export { useFieldOpenEffects } from './useFieldOpenEffects';
 export { useListNavigation } from './useListNavigation';
-export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown, } from './shared';
+export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown, useToggleOpen, } from './shared';
 export { DEFAULT_DEBOUNCE_MS } from './constants';
 export type { ItemState, DropdownItemDescriptor, DropdownText, GetKeyProp, ItemsSource, LoadItems, LoadItemsResult, } from './types';

package/shared/dropdownField/index.js

@@ -8,5 +8,5 @@ export { useDropdownItems } from './useDropdownItems';
 export { useActiveIndex } from './useActiveIndex';
 export { useFieldOpenEffects } from './useFieldOpenEffects';
 export { useListNavigation } from './useListNavigation';
-export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown } from './shared';
+export { defaultGetKey, defaultLabelFilter, resolveDropdownText, useShellMouseDown, useToggleOpen } from './shared';
 export { DEFAULT_DEBOUNCE_MS } from './constants';

package/shared/dropdownField/shared.d.ts

@@ -11,3 +11,4 @@ export declare function defaultLabelFilter<T>(item: T, query: string, getLabel:
  * while letting clicks on the input itself or on inner buttons through.
  */
 export declare function useShellMouseDown(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void): (event: MouseEvent<HTMLDivElement>) => void;
+export declare function useToggleOpen(inputRef: RefObject<HTMLInputElement>, isOpen: boolean, open: () => void, close: () => void): () => void;

package/shared/dropdownField/shared.js

@@ -25,4 +25,17 @@ export function useShellMouseDown(inputRef, isOpen, open) {
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     if (!isOpen) open();
   }, [inputRef, isOpen, open]);
+}
+export function useToggleOpen(inputRef, isOpen, open, close) {
+  return 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();
+    }
+  }, [inputRef, isOpen, open, close]);
 }