@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/index.d.ts

@@ -1,4 +1,4 @@
-export { Select } from './select';
-export { Multiselect } from './multiselect';
-export { NativeSelect } from './native-select';
-export type { SelectProps, MultiselectProps, NativeSelectProps, SelectOption, Key } from './types';
+export { Select } from './select';
+export { Multiselect } from './multiselect';
+export { NativeSelect } from './native-select';
+export type { SelectProps, MultiselectProps, NativeSelectProps, SelectOption, Key } from './types';

package/lib/multiselect.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import type { MultiselectProps } from './types';
-export declare function Multiselect({ options, value: selectedItems, onChange, error, label, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): JSX.Element;
+import React from 'react';
+import type { MultiselectProps } from './types';
+export declare function Multiselect({ options, value, onChange, error, label, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): React.JSX.Element;

package/lib/multiselect.js

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+"use client";
+import React, { useMemo, useRef } from 'react';
 import cn from 'classnames';
-import { Dropdown } from '@rescui/dropdown';
 import { useSelect } from 'downshift';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import scrollIntoView from 'scroll-into-view-if-needed';
@@ -8,11 +8,11 @@ import { useLabelFocus } from './hooks/use-label-focus.js';
 import { useOptions } from './hooks/use-options.js';
 import { useMultiHandlers } from './hooks/use-multi-handlers.js';
 import { useA11y } from './hooks/use-a11y.js';
-import { ListBox } from './parts/list-box.js';
 import { Icons } from './parts/icons.js';
 import { MultiTrigger } from './parts/multi-trigger.js';
 import { HiddenSelect } from './parts/hidden-select.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
+import { PopupContent } from './parts/popup-content.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
 import { mergeProps } from './utils/merge-props.js';
 import { itemToString } from './utils/item-to-string.js';
@@ -37,7 +37,7 @@ const stateReducer = (state, actionAndChanges) => {
   const {
     changes,
     type
-  } = actionAndChanges; // console.log(type, state, changes);
+  } = actionAndChanges;
 
   switch (type) {
     case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
@@ -45,6 +45,7 @@ const stateReducer = (state, actionAndChanges) => {
     case useSelect.stateChangeTypes.ItemClick:
       return { ...changes,
         isOpen: true,
+        // Keep menu open after selection.
         highlightedIndex: state.highlightedIndex
       };
 
@@ -59,7 +60,7 @@ const stateReducer = (state, actionAndChanges) => {
 function Multiselect(_ref) {
   let {
     options = [],
-    value: selectedItems = [],
+    value,
     onChange,
     error,
     label,
@@ -83,10 +84,11 @@ function Multiselect(_ref) {
     placeholder,
     ...rest
   } = _ref;
+  const selectedItems = useMemo(() => value ?? [], [value]);
   const theme = useThemeWithUndefined(themeFromProps);
-  const triggerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const dropdownRef = useRef(null);
   const {
     selectedMap,
     removeItem: removeSelectedItem,
@@ -109,7 +111,8 @@ function Multiselect(_ref) {
   } = useA11y({
     prefix: 'multiselect',
     error,
-    description: note
+    description: note,
+    isDisabled
   });
   const {
     isOpen,
@@ -122,6 +125,7 @@ function Multiselect(_ref) {
   } = useSelect({
     items: flattenedOptions,
     itemToString,
+    itemToKey: getOptionValue,
     id: baseId,
 
     onIsOpenChange(newIsOpen) {
@@ -180,7 +184,13 @@ function Multiselect(_ref) {
     ref: triggerRef,
     // eslint-disable-next-line complexity
     onKeyDown: event => {
-      // shift + arrow up/down selection (when popup is open)
+      // prevent default behavior of Downshift when pressing Ctrl
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDownshiftDefault = true;
+        return;
+      } // shift + arrow up/down selection (when popup is open)
+
+
       if (isOpen && event.shiftKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
         const newHighlightedIndex = event.key === 'ArrowUp' ? Math.max(highlightedIndex - 1, 0) : Math.min(highlightedIndex + 1, flattenedOptions.length - 1);
 
@@ -205,13 +215,7 @@ function Multiselect(_ref) {
     ...(isOpen && isListBoxEmpty ? {
       'aria-activedescendant': menuProps.id
     } : {})
-  }); // recalculate the popup position after a possible trigger height change
-
-  useEffect(() => {
-    if (dropdownRef.current) {
-      dropdownRef.current.scheduleUpdate();
-    }
-  }, [selectedItems]);
+  });
   const {
     isFocusedByLabel,
     labelClickProps,
@@ -224,7 +228,6 @@ function Multiselect(_ref) {
   });
   const listBoxState = {
     selectedMap,
-    selectionMode: 'multiple',
     highlightedIndex,
     getItemProps,
     menuProps
@@ -251,16 +254,19 @@ function Multiselect(_ref) {
     value: selectedItems,
     isMultiple: true,
     options: flattenedOptions
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    mode: mode,
+  }), /*#__PURE__*/React.createElement(PopupContent, {
     theme: theme,
-    ref: dropdownRef,
+    size: size,
+    mode: mode,
+    dropdownRef: dropdownRef,
+    triggerRef: triggerRef,
     placement: placement,
-    maxWidth: "trigger",
-    minWidth: "trigger",
     isOpen: isOpen,
-    cancelCloseAnimation: true,
-    disableFocusLock: true,
+    listBoxState: listBoxState,
+    maxVisibleItems: maxVisibleItems,
+    emptyListMessage: emptyListMessage,
+    listBoxItems: listBoxItems,
+    dropdownUpdateDeps: [selectedItems],
     trigger: _ref3 => {
       let {
         ref: triggerRefForDropdown
@@ -274,9 +280,8 @@ function Multiselect(_ref) {
         triggerProps, labelFocusForTriggerProps, {
           ref: triggerRefForDropdown
         }),
+        tabIndex: isDisabled ? undefined : 0,
         className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
-        "data-open": isOpen,
-        "data-label-focused": isFocusedByLabel,
         "data-test": "multiselect__trigger"
       }, /*#__PURE__*/React.createElement(MultiTrigger, {
         selectedItems: selectedItems,
@@ -290,23 +295,15 @@ function Multiselect(_ref) {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && selectedItems.length > 0,
         onClear: () => {
-          var _triggerRef$current;
-
           reset();
-          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+          triggerRef.current?.focus({
             focusVisible: false
           });
         },
         triggerId: triggerProps.id
       })));
     }
-  }, /*#__PURE__*/React.createElement(ListBox, {
-    state: listBoxState,
-    size: size,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    items: listBoxItems
-  }))));
+  })));
 }
 
 export { Multiselect };

package/lib/native-select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { NativeSelectProps } from './types';
-export declare const NativeSelect: React.FC<NativeSelectProps>;
-export default NativeSelect;
+import React from 'react';
+import type { NativeSelectProps } from './types';
+export declare const NativeSelect: React.FC<NativeSelectProps>;
+export default NativeSelect;

package/lib/native-select.js

@@ -27,10 +27,8 @@ function findSelectedOption(options, selectedValue) {
 
   options.forEach(optionOrGroup => {
     if (isOptionAGroup(optionOrGroup)) {
-      var _group$options;
-
       const group = optionOrGroup;
-      (_group$options = group.options) === null || _group$options === void 0 || _group$options.forEach(checkOption);
+      group.options?.forEach(checkOption);
     } else {
       checkOption(optionOrGroup);
     }
@@ -83,7 +81,8 @@ const NativeSelect = _ref => {
     error,
     description: note,
     label,
-    fieldRef: triggerRef
+    fieldRef: triggerRef,
+    isDisabled
   });
 
   const reset = () => onChange(null);
@@ -154,7 +153,7 @@ const NativeSelect = _ref => {
     disabled: isDisabled ? true : undefined,
     onChange: handleChange,
     name: name,
-    value: (value === null || value === void 0 ? void 0 : value.value) ?? ''
+    value: value?.value ?? ''
   }, /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
     optionsWithGroups: options,
     placeholder: placeholder,
@@ -162,29 +161,27 @@ const NativeSelect = _ref => {
   })), trigger ? trigger({
     focused: isFocused,
     hovered: isHovered,
-    selectedLabel: value === null || value === void 0 ? void 0 : value.label,
-    selectedValue: value === null || value === void 0 ? void 0 : value.value,
+    selectedLabel: value?.label,
+    selectedValue: value?.value,
     placeholder
   }) : /*#__PURE__*/React.createElement("div", {
     className: cn(styles.trigger),
     "data-test": 'native-select_trigger',
     "data-rs-internal": 'select-native-trigger'
   }, /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.triggerText, !(value !== null && value !== void 0 && value.value) && styles.labelNotSelected),
+    className: cn(styles.triggerText, !value?.value && styles.labelNotSelected),
     "data-test": 'native-select_trigger_text',
     "aria-hidden": "true"
-  }, (value === null || value === void 0 ? void 0 : value.label) ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+  }, value?.label ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
     isLoading: isLoading,
     triggerId: fieldProps.id,
     onClear: () => {
-      var _triggerRef$current;
-
       reset();
-      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+      triggerRef.current?.focus({
         focusVisible: false
       });
     },
-    canHaveClearIcon: isClearable && !isDisabled && Boolean(value === null || value === void 0 ? void 0 : value.value)
+    canHaveClearIcon: isClearable && !isDisabled && Boolean(value?.value)
   })))));
 };
 

package/lib/parts/foldable.d.ts

@@ -1,33 +1,34 @@
-import React, { Component } from 'react';
-export declare type FoldableProps = {
-    className?: string;
-    children: React.ReactNode;
-    renderHiddenCounter?: (num: number, ref: React.Ref<HTMLElement>) => React.ReactNode;
-};
-declare type FoldableState = {
-    lastVisible: number;
-    renderingStage: number;
-    prevChildren: React.ReactNode;
-};
-export default class Foldable extends Component<FoldableProps, FoldableState> {
-    containerRef: React.RefObject<HTMLDivElement>;
-    plusNRef: React.RefObject<HTMLElement>;
-    childrenEls: HTMLElement[];
-    childrenWidths: number[];
-    resizeObserver: ResizeObserver;
-    tagsResizeObserver: ResizeObserver;
-    constructor(props: FoldableProps);
-    static getDerivedStateFromProps(props: FoldableProps, state: FoldableState): {
-        prevChildren: React.ReactNode;
-        renderingStage: number;
-    };
-    observeChildren(): void;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    measureChildren: () => void;
-    recalculateLastVisibleAndSetStage: (nextStage?: number) => void;
-    renderChildren(lastVisible: number): React.FunctionComponentElement<any>[];
-    render(): JSX.Element;
-}
-export {};
+import React, { Component } from 'react';
+import type { JSX } from 'react';
+export type FoldableProps = {
+    className?: string;
+    children: React.ReactNode;
+    renderHiddenCounter?: (num: number, ref: React.Ref<HTMLElement>) => React.ReactNode;
+};
+type FoldableState = {
+    lastVisible: number;
+    renderingStage: number;
+    prevChildren: React.ReactNode;
+};
+export default class Foldable extends Component<FoldableProps, FoldableState> {
+    containerRef: React.RefObject<HTMLDivElement>;
+    plusNRef: React.RefObject<HTMLElement>;
+    childrenEls: HTMLElement[];
+    childrenWidths: number[];
+    resizeObserver: ResizeObserver;
+    tagsResizeObserver: ResizeObserver;
+    constructor(props: FoldableProps);
+    static getDerivedStateFromProps(props: FoldableProps, state: FoldableState): {
+        prevChildren: React.ReactNode;
+        renderingStage: number;
+    };
+    observeChildren(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    measureChildren: () => void;
+    recalculateLastVisibleAndSetStage: (nextStage?: number) => void;
+    renderChildren(lastVisible: number): React.FunctionComponentElement<any>[];
+    render(): JSX.Element;
+}
+export {};

package/lib/parts/form-trigger-wrapper.d.ts

@@ -1,34 +1,34 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { SelectSize } from '../types';
-export declare type FormTriggerWrapperProps = {
-    size?: SelectSize;
-    theme?: Theme;
-    className?: string;
-    disabled?: boolean;
-    error?: boolean | React.ReactNode;
-    reserveErrorLine?: boolean;
-    errorMessageProps?: object;
-    label?: React.ReactNode;
-    labelProps?: object;
-    note?: React.ReactNode;
-    descriptionProps?: object;
-    boldLabel?: boolean;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
-    size?: SelectSize;
-    theme?: Theme;
-    className?: string;
-    disabled?: boolean;
-    error?: boolean | React.ReactNode;
-    reserveErrorLine?: boolean;
-    errorMessageProps?: object;
-    label?: React.ReactNode;
-    labelProps?: object;
-    note?: React.ReactNode;
-    descriptionProps?: object;
-    boldLabel?: boolean;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export default FormTriggerWrapper;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { SelectSize } from '../types';
+export type FormTriggerWrapperProps = {
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    disabled?: boolean;
+    error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
+    errorMessageProps?: object;
+    label?: React.ReactNode;
+    labelProps?: object;
+    note?: React.ReactNode;
+    descriptionProps?: object;
+    boldLabel?: boolean;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    disabled?: boolean;
+    error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
+    errorMessageProps?: object;
+    label?: React.ReactNode;
+    labelProps?: object;
+    note?: React.ReactNode;
+    descriptionProps?: object;
+    boldLabel?: boolean;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export default FormTriggerWrapper;

package/lib/parts/hidden-select.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import type { SelectOption } from '../types';
-export declare type HiddenSelectProps = {
-    name?: string;
-    options: SelectOption[];
-} & ({
-    value: SelectOption[];
-    isMultiple: true;
-} | {
-    value: SelectOption;
-    isMultiple: false;
-});
-export declare const HiddenSelect: ({ name, options, value, isMultiple }: HiddenSelectProps) => JSX.Element;
+import React from 'react';
+import type { SelectOption } from '../types';
+export type HiddenSelectProps = {
+    name?: string;
+    options: SelectOption[];
+} & ({
+    value: SelectOption[];
+    isMultiple: true;
+} | {
+    value: SelectOption;
+    isMultiple: false;
+});
+export declare const HiddenSelect: ({ name, options, value, isMultiple }: HiddenSelectProps) => React.JSX.Element;

package/lib/parts/icons.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-declare type ClearOrLoadingProps = {
-    isLoading: boolean;
-    canHaveClearIcon: boolean;
-    onClearClick: () => void;
-    triggerId?: string;
-    className?: string;
-};
-export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
-export declare type IconsProps = {
-    isLoading?: boolean;
-    canHaveClearIcon?: boolean;
-    onClear?: () => void;
-    triggerId?: string;
-};
-export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => JSX.Element;
-export {};
+import React from 'react';
+type ClearOrLoadingProps = {
+    isLoading: boolean;
+    canHaveClearIcon: boolean;
+    onClearClick: () => void;
+    triggerId?: string;
+    className?: string;
+};
+export declare const ClearOrLoading: React.FC<ClearOrLoadingProps>;
+export type IconsProps = {
+    isLoading?: boolean;
+    canHaveClearIcon?: boolean;
+    onClear?: () => void;
+    triggerId?: string;
+};
+export declare const Icons: ({ isLoading, canHaveClearIcon, onClear, triggerId }: IconsProps) => React.JSX.Element;
+export {};

package/lib/parts/list-box.d.ts

@@ -1,11 +1,13 @@
-/// <reference types="react" />
-import { SelectSize, ListBoxItem, ListBoxState } from '../types';
-export declare type ListBoxProps = {
-    state: ListBoxState;
-    items: ListBoxItem[];
-    size?: SelectSize;
-    className?: string;
-    maxVisibleItems?: number;
-    emptyListMessage: string;
-};
-export declare function ListBox({ state, items, size, maxVisibleItems, emptyListMessage }: ListBoxProps): JSX.Element;
+import React from 'react';
+import { SelectSize, SelectMode, ListBoxItem, ListBoxState } from '../types';
+export type ListBoxProps = {
+    state: ListBoxState;
+    items: ListBoxItem[];
+    size?: SelectSize;
+    mode?: SelectMode;
+    className?: string;
+    maxVisibleItems?: number;
+    emptyListMessage: string;
+    isPrimaryContrast?: boolean;
+};
+export declare function ListBox({ state, items, size, mode, maxVisibleItems, emptyListMessage, isPrimaryContrast }: ListBoxProps): React.JSX.Element;

package/lib/parts/list-box.js

@@ -10,6 +10,10 @@ const SIZE_STYLES = {
   m: styles.sizeM,
   l: styles.sizeL
 };
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
 
 function Option(_ref) {
   let {
@@ -20,7 +24,6 @@ function Option(_ref) {
   const ref = useRef(null);
   const {
     selectedMap,
-    selectionMode,
     getItemProps,
     highlightedIndex
   } = state;
@@ -39,7 +42,7 @@ function Option(_ref) {
     "data-rs-internal": "select-list-box__item",
     "data-focused": isHighlighted,
     "data-test": `select-options-list__item_${item.key}`
-  }, /*#__PURE__*/React.createElement("span", null, item.label), selectionMode === 'multiple' && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
+  }, /*#__PURE__*/React.createElement("span", null, item.label), /*#__PURE__*/React.createElement(CheckOutlineIcon, {
     "data-rs-internal": "select-list-box__check-icon",
     className: cn(styles.checkIcon, isSelected && styles.visible)
   }));
@@ -77,24 +80,25 @@ function ListBoxGroup(_ref2) {
 }
 
 function ListBox(_ref3) {
-  var _items$find;
-
   let {
     state,
     items,
     size,
+    mode,
     maxVisibleItems = 5,
-    emptyListMessage
+    emptyListMessage,
+    isPrimaryContrast = false
   } = _ref3;
   const {
     menuProps
   } = state;
-  const firstGroupKey = (_items$find = items.find(item => item.type === 'group')) === null || _items$find === void 0 ? void 0 : _items$find.key;
+  const firstGroupKey = items.find(item => item.type === 'group')?.key;
   const itemsCount = getRealItemsCnt(items);
   return /*#__PURE__*/React.createElement("ul", { ...menuProps,
-    className: cn(styles.listBox, SIZE_STYLES[size]),
+    className: cn(styles.listBox, SIZE_STYLES[size], MODE_STYLES[mode]),
     style: {
-      '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems)
+      '--_rs-select-list-box-max-height-by-items': calculateMaxHeightByItems(itemsCount, maxVisibleItems),
+      '--rs-select-contrast-primary': isPrimaryContrast ? '1' : '0'
     },
     "data-rs-internal": "select-list-box",
     "data-test": "select-options-list"

package/lib/parts/multi-trigger.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-import type { SelectOption } from '../types';
-export interface MultiTriggerProps {
-    selectedItems: SelectOption[];
-    removeSelectedItem: (item: SelectOption) => void;
-    valueProps: object;
-    isSingleLine: boolean;
-    isDisabled: boolean;
-    placeholder?: string;
-    triggerRef?: React.RefObject<HTMLDivElement>;
-}
-export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): JSX.Element;
+import React from 'react';
+import type { SelectOption } from '../types';
+export interface MultiTriggerProps {
+    selectedItems: SelectOption[];
+    removeSelectedItem: (item: SelectOption) => void;
+    valueProps: object;
+    isSingleLine: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    triggerRef?: React.RefObject<HTMLDivElement>;
+}
+export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): React.JSX.Element;

package/lib/parts/multi-trigger.js

@@ -34,10 +34,8 @@ function MultiTrigger(_ref) {
       className: styles.tag,
       disabled: isDisabled,
       onRemoveClick: () => {
-        var _triggerRef$current;
-
         removeSelectedItem(option);
-        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+        triggerRef.current?.focus({
           focusVisible: false
         });
       },
@@ -46,9 +44,7 @@ function MultiTrigger(_ref) {
       "aria-label": getTextFromNodes(option.label),
       onFocus: e => {
         if (e.target.getAttribute('tabindex') === '-1') {
-          var _triggerRef$current2;
-
-          (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus({
+          triggerRef.current?.focus({
             focusVisible: false
           });
         }

package/lib/parts/native-select-options-with-groups.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { NativeSelectOptionOrGroup } from '../types';
-export declare type NativeSelectOptionsWithGroupsProps = {
-    optionsWithGroups: NativeSelectOptionOrGroup[];
-    placeholder?: string;
-    emptyListMessage?: string;
-};
-export declare const NativeSelectOptionsWithGroups: React.FC<NativeSelectOptionsWithGroupsProps>;
+import React from 'react';
+import type { NativeSelectOptionOrGroup } from '../types';
+export type NativeSelectOptionsWithGroupsProps = {
+    optionsWithGroups: NativeSelectOptionOrGroup[];
+    placeholder?: string;
+    emptyListMessage?: string;
+};
+export declare const NativeSelectOptionsWithGroups: React.FC<NativeSelectOptionsWithGroupsProps>;

package/lib/parts/popup-content.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { DropdownProps, DropdownImperativeHandle } from '@rescui/dropdown';
+import type { SelectMode, SelectSize, ListBoxState, ListBoxItem, Placement } from '../types';
+export type PopupContentProps = {
+    theme: Theme;
+    listBoxState: ListBoxState;
+    triggerRef: React.RefObject<HTMLElement>;
+    dropdownRef?: React.RefObject<DropdownImperativeHandle>;
+    listBoxItems?: ListBoxItem[];
+    placement: Placement;
+    size?: SelectSize;
+    mode?: SelectMode;
+    emptyListMessage: string;
+    maxVisibleItems?: number;
+    trigger?: DropdownProps['trigger'];
+    isOpen?: boolean;
+    dropdownUpdateDeps?: unknown[];
+};
+export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;