@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2-RUI-291-Update-next-js-to-the-latest-version-8f54dec0a.66

package/lib/types.d.ts

@@ -1,197 +1,202 @@
-import React from 'react';
-import type { Theme } from '@rescui/ui-contexts';
-import type { UseSelectPropGetters } from 'downshift';
-export declare type Key = string | number;
-export declare type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
-export declare type SelectSize = 'l' | 'm' | 's';
-export declare type SelectMode = 'classic' | 'rock';
-export declare type SelectOption = {
-    label: React.ReactNode;
-    value?: Key;
-};
-export declare type SelectOptionsGroup = {
-    label?: React.ReactNode;
-    options: SelectOption[];
-};
-export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
-export declare type SelectOptions = SelectOptionOrGroup[];
-export declare type ListBoxOptionItem = SelectOption & {
-    index: number;
-    type: 'option';
-    key: Key;
-    disabled?: boolean;
-};
-export declare type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
-    options: ListBoxOptionItem[];
-    type: 'group';
-    key: Key;
-};
-export declare type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
-export declare type ListBoxItems = ListBoxItem[];
-export declare type ListBoxState = {
-    menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
-    getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
-    selectionMode: 'single' | 'multiple';
-    highlightedIndex: number;
-    selectedMap: Map<Key, SelectOption>;
-    menuRef?: React.RefObject<HTMLUListElement>;
-};
-export declare type NativeSelectOption = {
-    label: string;
-    value?: Key;
-    disabled?: boolean;
-};
-export declare type NativeSelectOptionsGroup = {
-    label?: string;
-    disabled?: boolean;
-    options: NativeSelectOption[];
-};
-export declare type NativeSelectOptionOrGroup = NativeSelectOption | NativeSelectOptionsGroup;
-export declare type NativeSelectOptions = NativeSelectOptionOrGroup[];
-export declare type Groups = SelectOptionsGroup[];
-export declare type NoOptionsMessageConfig = {
-    noOptions: string;
-    nothingFound?: string;
-    loading?: string;
-};
-export declare type NoOptionsMessage = string | NoOptionsMessageConfig;
-export declare type SelectProps = {
-    /**
-     * Value of the select
-     */
-    value?: SelectOption | null;
-    /**
-     * Change value callback. `value => ...`. Pass `null` on clear.
-     */
-    onChange?: (newValue: SelectOption | null) => void;
-    /**
-     * Additional class name
-     */
-    className?: string;
-    style?: React.CSSProperties;
-    id?: string;
-    /**
-     * Array of options or option groups
-     */
-    options?: (SelectOption | SelectOptionsGroup)[] | null;
-    /**
-     * Is select supports clearing the value
-     */
-    isClearable?: boolean;
-    /**
-     * Is select supports inplace filtering
-     */
-    isSearchable?: boolean;
-    /**
-     * Is the component has been disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Is loader displayed inside the trigger part
-     */
-    isLoading?: boolean;
-    /**
-     * A hint to the user of what can be entered in the control
-     */
-    placeholder?: string;
-    /**
-     * Size
-     */
-    size?: SelectSize;
-    /**
-     * Appearance mode
-     */
-    mode?: SelectMode;
-    /**
-     * Appearance theme
-     */
-    theme?: Theme;
-    /**
-     * Error state flag or `React.ReactNode` (use with forms)
-     */
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    /**
-     * Label element (use with forms)
-     */
-    label?: React.ReactNode;
-    /**
-     * If `true`, label will be bold
-     */
-    boldLabel?: boolean;
-    /**
-     * Placement of dropdown element
-     */
-    placement?: Placement;
-    /**
-     * Note element at the bottom (use with forms)
-     */
-    note?: React.ReactNode;
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsMessage?: NoOptionsMessage;
-    /**
-     * Input name attribute
-     */
-    name?: string;
-    /**
-     * Maximum number of fully visible items in the dropdown list.
-     * For large lists, `n + 0.5` items will be visible at a time.
-     * If the maximum number of items in a list is exactly `n + 1`, all
-     * items will be shown instead (to avoid creating a scroll for half an item only).
-     */
-    maxVisibleItems?: number;
-};
-export declare type MultiselectProps = {
-    /**
-     * Value of the multiselect (array of selected options)
-     */
-    value?: SelectOption[] | null;
-    /**
-     * Change value callback. `value => ...`. Pass `[]` on clear.
-     */
-    onChange?: (newValue: SelectOption[]) => void;
-    /**
-     * Display tags in single line with "+N" counter
-     */
-    isSingleLine?: boolean;
-} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
-export declare type TriggerFuncProps = {
-    selectedLabel?: string;
-    selectedValue?: Key;
-    placeholder?: string;
-    hovered: boolean;
-    focused: boolean;
-};
-export declare type NativeSelectProps = {
-    options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
-    size?: SelectSize;
-    theme?: Theme;
-    className?: string;
-    id?: string;
-    style?: React.CSSProperties;
-    value?: NativeSelectOption | null;
-    onChange?: (newValue: NativeSelectOption | null) => void;
-    placeholder?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    isClearable?: boolean;
-    trigger?: (props: TriggerFuncProps) => React.ReactNode;
-    label?: React.ReactNode;
-    note?: React.ReactNode;
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    noOptionsMessage?: NoOptionsMessage;
-    name?: string;
-    boldLabel?: boolean;
-};
-export declare type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;
+import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { UseSelectPropGetters } from 'downshift';
+export type Key = string | number;
+export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
+export type SelectSize = 'l' | 'm' | 's';
+export type SelectMode = 'classic' | 'rock';
+export type SelectOption = {
+    label: React.ReactNode;
+    value?: Key;
+};
+export type SelectOptionsGroup = {
+    label?: React.ReactNode;
+    options: SelectOption[];
+};
+export type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
+export type SelectOptions = SelectOptionOrGroup[];
+export type ListBoxOptionItem = SelectOption & {
+    index: number;
+    type: 'option';
+    key: Key;
+    disabled?: boolean;
+};
+export type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
+    options: ListBoxOptionItem[];
+    type: 'group';
+    key: Key;
+};
+export type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
+export type ListBoxItems = ListBoxItem[];
+export type ListBoxState = {
+    menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
+    getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
+    highlightedIndex: number;
+    selectedMap: Map<Key, SelectOption>;
+    menuRef?: React.RefObject<HTMLUListElement>;
+};
+export type NativeSelectOption = {
+    label: string;
+    value?: Key;
+    disabled?: boolean;
+};
+export type NativeSelectOptionsGroup = {
+    label?: string;
+    disabled?: boolean;
+    options: NativeSelectOption[];
+};
+export type NativeSelectOptionOrGroup = NativeSelectOption | NativeSelectOptionsGroup;
+export type NativeSelectOptions = NativeSelectOptionOrGroup[];
+export type Groups = SelectOptionsGroup[];
+export type NoOptionsMessageConfig = {
+    noOptions: string;
+    nothingFound?: string;
+    loading?: string;
+};
+export type NoOptionsMessage = string | NoOptionsMessageConfig;
+export type SelectProps = {
+    /**
+     * Value of the select
+     */
+    value?: SelectOption | null;
+    /**
+     * Change value callback. `value => ...`. Pass `null` on clear.
+     */
+    onChange?: (newValue: SelectOption | null) => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    /**
+     * Array of options or option groups
+     */
+    options?: (SelectOption | SelectOptionsGroup)[] | null;
+    /**
+     * Is select supports clearing the value
+     */
+    isClearable?: boolean;
+    /**
+     * Is select supports inplace filtering
+     */
+    isSearchable?: boolean;
+    /**
+     * Is the component has been disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Is loader displayed inside the trigger part
+     */
+    isLoading?: boolean;
+    /**
+     * A hint to the user of what can be entered in the control
+     */
+    placeholder?: string;
+    /**
+     * Size
+     */
+    size?: SelectSize;
+    /**
+     * Appearance mode
+     */
+    mode?: SelectMode;
+    /**
+     * Appearance theme
+     */
+    theme?: Theme;
+    /**
+     * Error state flag or `React.ReactNode` (use with forms)
+     */
+    error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
+    /**
+     * Label element (use with forms)
+     */
+    label?: React.ReactNode;
+    /**
+     * If `true`, label will be bold
+     */
+    boldLabel?: boolean;
+    /**
+     * Placement of dropdown element
+     */
+    placement?: Placement;
+    /**
+     * Note element at the bottom (use with forms)
+     */
+    note?: React.ReactNode;
+    /**
+     * Text to display when there are no options
+     */
+    noOptionsMessage?: NoOptionsMessage;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Maximum number of fully visible items in the dropdown list.
+     * For large lists, `n + 0.5` items will be visible at a time.
+     * If the maximum number of items in a list is exactly `n + 1`, all
+     * items will be shown instead (to avoid creating a scroll for half an item only).
+     */
+    maxVisibleItems?: number;
+};
+export type MultiselectProps = {
+    /**
+     * Value of the multiselect (array of selected options)
+     */
+    value?: SelectOption[] | null;
+    /**
+     * Change value callback. `value => ...`. Pass `[]` on clear.
+     */
+    onChange?: (newValue: SelectOption[]) => void;
+    /**
+     * Display tags in single line with "+N" counter
+     */
+    isSingleLine?: boolean;
+} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
+export type TriggerFuncProps = {
+    selectedLabel?: string;
+    selectedValue?: Key;
+    placeholder?: string;
+    hovered: boolean;
+    focused: boolean;
+};
+export type NativeSelectProps = {
+    options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    value?: NativeSelectOption | null;
+    onChange?: (newValue: NativeSelectOption | null) => void;
+    placeholder?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    trigger?: (props: TriggerFuncProps) => React.ReactNode;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
+    noOptionsMessage?: NoOptionsMessage;
+    name?: string;
+    boldLabel?: boolean;
+};
+export type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;
+export type DownshiftSyntheticEvent = React.SyntheticEvent & {
+    preventDownshiftDefault?: boolean;
+    nativeEvent: {
+        preventDownshiftDefault?: boolean;
+    };
+};

package/lib/utils/calculate-max-height-by-items.d.ts

@@ -1,13 +1,13 @@
-/**
- * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
- * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
- * `itemsCount == allowedMaxVisibleItems + 1` differently.
- *
- * For allowedMaxVisibleItems={5}:
- * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
- * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
- * - If items itemsCount > 6: restrain by 5.5 items
- *
- * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
- */
-export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+ */
+export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;

package/lib/utils/calculate-max-height-by-items.js

@@ -1,14 +1,14 @@
-/**
- * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
- * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
- * `itemsCount == allowedMaxVisibleItems + 1` differently.
- *
- * For allowedMaxVisibleItems={5}:
- * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
- * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
- * - If items itemsCount > 6: restrain by 5.5 items
- *
- * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
  */
 const calculateMaxHeightByItems = (itemsCount, allowedMaxVisibleItems) => {
   const allowedFloor = Math.floor(allowedMaxVisibleItems);

package/lib/utils/get-empty-message.d.ts

@@ -1,6 +1,6 @@
-import type { NoOptionsMessage } from '../types';
-export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
-    isLoading: boolean;
-    isNothingFound: boolean;
-    noOptionsMessage: NoOptionsMessage;
-}): string;
+import type { NoOptionsMessage } from '../types';
+export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
+    isLoading: boolean;
+    isNothingFound: boolean;
+    noOptionsMessage: NoOptionsMessage;
+}): string;

package/lib/utils/get-option-value.d.ts

@@ -1,2 +1,2 @@
-import type { SelectOption, Key } from '../types';
-export declare function getOptionValue(option?: SelectOption): Key | null;
+import type { SelectOption, Key } from '../types';
+export declare function getOptionValue(option?: SelectOption): Key | null;

package/lib/utils/get-real-items-cnt.d.ts

@@ -1,2 +1,2 @@
-import { ListBoxItem } from '../types';
-export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;
+import { ListBoxItem } from '../types';
+export declare const getRealItemsCnt: (items: ListBoxItem[]) => number;

package/lib/utils/get-text-from-nodes.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;
+import React from 'react';
+export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;

package/lib/utils/get-text-from-nodes.js

@@ -1,8 +1,6 @@
 import React from 'react';
 
 const getTextFromNodes = function (node) {
-  var _node$type;
-
   let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
   if (typeof node === 'string' || typeof node === 'number') {
@@ -18,7 +16,7 @@ const getTextFromNodes = function (node) {
     return node.map(n => getTextFromNodes(n, depth + 1)).join('');
   }
 
-  if ( /*#__PURE__*/React.isValidElement(node) && (node === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.toString()) === null || _node$type === void 0 ? void 0 : _node$type.toLowerCase()) !== 'svg') {
+  if ( /*#__PURE__*/React.isValidElement(node) && node?.type?.toString()?.toLowerCase() !== 'svg') {
     return getTextFromNodes(node.props.children, depth + 1);
   }
 

package/lib/utils/is-option-a-group.d.ts

@@ -1,2 +1,2 @@
-import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
-export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;
+import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
+export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;

package/lib/utils/item-to-string.d.ts

@@ -1,2 +1,2 @@
-import type { SelectOption } from '../types';
-export declare function itemToString(item: SelectOption): string;
+import type { SelectOption } from '../types';
+export declare function itemToString(item: SelectOption): string;

package/lib/utils/merge-props.d.ts

@@ -1,29 +1,19 @@
-/**
- * Copied from react-aria repo
- * @see https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/utils/mergeProps.ts
- */
-import type { MutableRefObject, RefCallback } from 'react';
-/**
- * Merges multiple refs into one. Works with either callback or object refs.
- */
-export declare function mergeRefs<T>(...refs: Array<RefCallback<T> | MutableRefObject<T> | null | undefined>): RefCallback<T> | MutableRefObject<T>;
-export declare function chain(...callbacks: any[]): (...args: any[]) => void;
-interface Props {
-    [key: string]: any;
-}
-declare type PropsArg = Props | null | undefined;
-declare type TupleTypes<T> = {
-    [P in keyof T]: T[P];
-} extends {
-    [key: number]: infer V;
-} ? NullToObject<V> : never;
-declare type NullToObject<T> = T extends null | undefined ? object : T;
-declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-/**
- * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, ids are deduplicated, and refs are merged.
- * For all other props, the last prop object overrides all previous ones.
- * @param args - Multiple sets of props to merge together.
- */
-export declare function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>>;
-export {};
+import { RefCallback } from 'react';
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+/**
+ * Combines multiple sets of props into a single object:
+ *  - conflicting `className` values are joined with a space
+ *  - conflicting `style` objects are shallow-merged (rightmost wins on conflict)
+ *  - conflicting function props (event handlers) are composed and called left to right
+ *  - conflicting `ref` props (object refs, callback refs, or null) are merged into a single
+ *    callback ref that assigns all of them; cleanup functions returned by callback refs are
+ *    collected and called together on detach
+ *  - any other conflicting prop is resolved by taking the value from the rightmost props object
+ * @param props One or more props objects to merge. Props further to the right take precedence.
+ */
+export declare function mergeProps<T extends object[]>(...props: T): {
+    [K in keyof UnionToIntersection<T[number]>]: K extends 'className' ? string : K extends 'style' ? UnionToIntersection<T[number]>[K] : K extends 'ref' ? RefCallback<any> : Exclude<Extract<T[number], {
+        [Q in K]: unknown;
+    }>[K], undefined>;
+};
+export {};