@broxus/react-uikit 0.22.0 → 0.23.0

package/dist/esm/components/Card/Footer.d.ts

@@ -5,7 +5,7 @@ export interface CardFooterOwnProps {
 }
 export type CardFooterProps<E extends React.ElementType = React.ElementType> = CardFooterOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardFooterOwnProps>;
 declare const defaultElement = "footer";
-export declare function Footer<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardFooterProps<E>>): React.JSX.Element;
+export declare function Footer<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardFooterProps<E>>): React.ReactElement;
 export declare namespace Footer {
     var displayName: string;
 }

package/dist/esm/components/Card/Header.d.ts

@@ -5,7 +5,7 @@ export interface CardHeaderOwnProps {
 }
 export type CardHeaderProps<E extends React.ElementType = React.ElementType> = CardHeaderOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardHeaderOwnProps>;
 declare const defaultElement = "header";
-export declare function Header<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardHeaderProps<E>>): React.JSX.Element;
+export declare function Header<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardHeaderProps<E>>): React.ReactElement;
 export declare namespace Header {
     var displayName: string;
 }

package/dist/esm/components/Card/Media.d.ts

@@ -6,7 +6,7 @@ export interface CardMediaOwnProps {
 }
 export type CardMediaProps<E extends React.ElementType = React.ElementType> = CardMediaOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardMediaOwnProps>;
 declare const defaultElement = "div";
-export declare function Media<E extends React.ElementType = typeof defaultElement>({ className, component, position, ...props }: React.PropsWithChildren<CardMediaProps<E>>): React.JSX.Element;
+export declare function Media<E extends React.ElementType = typeof defaultElement>({ className, component, position, ...props }: React.PropsWithChildren<CardMediaProps<E>>): React.ReactElement;
 export declare namespace Media {
     var displayName: string;
 }

package/dist/esm/components/Card/Title.d.ts

@@ -5,7 +5,7 @@ export interface CardTitleOwnProps {
 }
 export type CardTitleProps<E extends React.ElementType = React.ElementType> = CardTitleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, CardTitleOwnProps>;
 declare const defaultElement = "h3";
-export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardTitleProps<E>>): React.JSX.Element;
+export declare function Title<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<CardTitleProps<E>>): React.ReactElement;
 export declare namespace Title {
     var displayName: string;
 }

package/dist/esm/components/Close/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type IconProps } from '../../components/Icon';
 export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
 declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>({ className, ...props }: CloseProps<E>): React.JSX.Element;
+export declare function Close<E extends React.ElementType = typeof defaultElement>({ className, ...props }: CloseProps<E>): React.ReactElement;
 export declare namespace Close {
     var displayName: string;
 }

package/dist/esm/components/Component/index.d.ts

@@ -5,7 +5,7 @@ type ComponentOwnProp<T extends React.ElementType = React.ElementType> = React.C
 type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = object> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
 export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = object> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
 export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = object> {
-    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.JSX.Element;
+    <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.ReactElement;
     defaultProps?: Partial<any>;
     displayName?: string;
     id?: string;

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type AccordionItemProps } from '../../components/Accordion';
 import { type ButtonProps } from '../../components/Button';
 import { type PickerLocale } from '../../components/DatePicker';
 import { type ColorMode } from '../../components/Inverse';
@@ -8,7 +9,52 @@ interface PropsWithMouseHandler {
     onClick: React.HTMLAttributes<HTMLElement>['onClick'];
 }
 export { SizeContext } from '../../components/ConfigProvider/SizeContext';
-export interface ConfigContextConsumedProps {
+interface ConfigDeprecatedProps {
+    /** @deprecated Use `button['shape']` config instead */
+    buttonShape?: ButtonProps['shape'];
+    /** @deprecated Use `button['size']` config instead */
+    buttonSize?: ButtonProps['size'];
+    /** @deprecated Use `card['primaryColorMode']` config instead */
+    cardPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `card['secondaryColorMode']` config instead */
+    cardSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `card['tertiaryColorMode']` config instead */
+    cardTertiaryColorMode?: ColorMode;
+    /** @deprecated Use `control['clearIcon']` config instead */
+    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+    /** @deprecated Use `section['primaryColorMode']` config instead */
+    sectionPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `section['secondaryColorMode']` config instead */
+    sectionSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `section['tertiaryColorMode']` config instead */
+    sectionTertiaryColorMode?: ColorMode;
+    /** @deprecated Use `select['addIcon']` config instead */
+    selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
+    /** @deprecated Use `select['arrowIcon']` config instead */
+    selectArrowIcon?: React.ReactNode | ((props: {
+        isOpen: boolean;
+    } & PropsWithMouseHandler) => React.ReactElement);
+    /** @deprecated Use `select['clearIcon']` config instead */
+    selectClearIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['loadingIcon']` config instead */
+    selectLoadingIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['notFoundContent']` config instead */
+    selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `select['searchIcon']` config instead */
+    selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
+    /** @deprecated Use `tile['primaryColorMode']` config instead */
+    tilePrimaryColorMode?: ColorMode;
+    /** @deprecated Use `tile['secondaryColorMode']` config instead */
+    tileSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `tile['tertiaryColorMode']` config instead */
+    tileTertiaryColorMode?: ColorMode;
+}
+export interface ConfigContextConsumedProps extends ConfigDeprecatedProps {
+    accordion?: {
+        direction?: Direction;
+        expandIcon?: (props: AccordionItemProps) => React.ReactNode;
+        prefixCls?: string;
+    };
     alert?: {
         closeIcon?: React.ReactNode | (() => React.ReactElement);
     };
@@ -19,22 +65,12 @@ export interface ConfigContextConsumedProps {
         shape?: ButtonProps['shape'];
         size?: ButtonProps['size'];
     };
-    /** @deprecated Use `button['shape']` config instead */
-    buttonShape?: ButtonProps['shape'];
-    /** @deprecated Use `button['size']` config instead */
-    buttonSize?: ButtonProps['size'];
     card?: {
         prefixCls?: string;
         primaryColorMode?: ColorMode;
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
-    /** @deprecated Use `card['primaryColorMode']` config instead */
-    cardPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `card['secondaryColorMode']` config instead */
-    cardSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `card['tertiaryColorMode']` config instead */
-    cardTertiaryColorMode?: ColorMode;
     checkbox?: {
         direction?: Direction;
         prefixCls?: string;
@@ -44,8 +80,6 @@ export interface ConfigContextConsumedProps {
         direction?: Direction;
         prefixCls?: string;
     };
-    /** @deprecated Use `control['clearIcon']` config instead */
-    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     datePicker?: {
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         direction?: Direction;
@@ -75,12 +109,6 @@ export interface ConfigContextConsumedProps {
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
-    /** @deprecated Use `section['primaryColorMode']` config instead */
-    sectionPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `section['secondaryColorMode']` config instead */
-    sectionSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `section['tertiaryColorMode']` config instead */
-    sectionTertiaryColorMode?: ColorMode;
     select?: {
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
@@ -93,32 +121,19 @@ export interface ConfigContextConsumedProps {
         prefixCls?: string;
         searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
-    /** @deprecated Use `select['addIcon']` config instead */
-    selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
-    /** @deprecated Use `select['arrowIcon']` config instead */
-    selectArrowIcon?: React.ReactNode | ((props: {
-        isOpen: boolean;
-    } & PropsWithMouseHandler) => React.ReactElement);
-    /** @deprecated Use `select['clearIcon']` config instead */
-    selectClearIcon?: React.ReactNode | (() => React.ReactElement);
-    /** @deprecated Use `select['loadingIcon']` config instead */
-    selectLoadingIcon?: React.ReactNode | (() => React.ReactElement);
-    /** @deprecated Use `select['notFoundContent']` config instead */
-    selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
-    /** @deprecated Use `select['searchIcon']` config instead */
-    selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
+    tabs?: {
+        addIcon?: React.ReactNode;
+        direction?: Direction;
+        moreIcon?: React.ReactNode;
+        prefixCls?: string;
+        removeIcon?: React.ReactNode;
+    };
     tile?: {
         prefixCls?: string;
         primaryColorMode?: ColorMode;
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
-    /** @deprecated Use `tile['primaryColorMode']` config instead */
-    tilePrimaryColorMode?: ColorMode;
-    /** @deprecated Use `tile['secondaryColorMode']` config instead */
-    tileSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `tile['tertiaryColorMode']` config instead */
-    tileTertiaryColorMode?: ColorMode;
     timePicker?: {
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         direction?: Direction;
@@ -129,4 +144,4 @@ export interface ConfigContextConsumedProps {
 }
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;
-export declare function ConfigContextProvider({ children, ...props }: Partial<React.PropsWithChildren<ConfigContextConsumedProps>>): React.JSX.Element;
+export declare function ConfigContextProvider({ children, ...props }: Partial<React.PropsWithChildren<ConfigContextConsumedProps>>): React.ReactElement;

package/dist/esm/components/Container/index.d.ts

@@ -9,7 +9,7 @@ export interface ContainerOwnProps {
 }
 export type ContainerProps<E extends React.ElementType = React.ElementType> = ContainerOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ContainerOwnProps>;
 declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, expandLeft, expandRight, preserve, size, ...props }: React.PropsWithChildren<ContainerProps<E>>): React.JSX.Element;
+export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, expandLeft, expandRight, preserve, size, ...props }: React.PropsWithChildren<ContainerProps<E>>): React.ReactElement;
 export declare namespace Container {
     var displayName: string;
 }

package/dist/esm/components/Control/Checkbox/Checkbox.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { type SizeType } from '../../../types';
+import { type Direction, type SizeType } from '../../../types';
 export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onMouseEnter' | 'onMouseLeave'> {
     autoFocus?: boolean;
     block?: boolean;
     children?: React.ReactNode;
     defaultChecked?: boolean;
-    direction?: string;
+    direction?: Direction;
     id?: string;
     name?: string;
     prefixCls?: string;

package/dist/esm/components/Control/Checkbox/Group.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CheckboxChangeEvent } from '../../../components/Control/Checkbox/Checkbox';
-import { type SizeType } from '../../../types';
+import { type Direction, type SizeType } from '../../../types';
 export interface CheckboxOptionType<T = any> {
     disabled?: boolean;
     id?: string;
@@ -15,7 +15,7 @@ export interface AbstractCheckboxGroupProps<T = any> {
     block?: boolean;
     children?: React.ReactNode;
     className?: string;
-    direction?: string;
+    direction?: Direction;
     disabled?: boolean;
     id?: string;
     name?: string;

package/dist/esm/components/Control/Checkbox/index.d.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import { type AbstractCheckboxProps, type CheckboxChangeEvent, type CheckboxProps } from '../../../components/Control/Checkbox/Checkbox';
 import { type CheckboxGroupConsumer } from '../../../components/Control/Checkbox/CheckboxGroupContext';
 import { type AbstractCheckboxGroupProps, type CheckboxGroupProps, type CheckboxOptionType, Group } from '../../../components/Control/Checkbox/Group';
-export type { AbstractCheckboxProps, AbstractCheckboxGroupProps, CheckboxChangeEvent, CheckboxGroupConsumer, CheckboxGroupProps, CheckboxOptionType, CheckboxProps, };
+export type { AbstractCheckboxGroupProps, AbstractCheckboxProps, CheckboxChangeEvent, CheckboxGroupConsumer, CheckboxGroupProps, CheckboxOptionType, CheckboxProps, };
 export interface Checkbox extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
     Group: typeof Group;
 }

package/dist/esm/components/Control/Input/Input.js

@@ -1,4 +1,4 @@
-import omit from '@rc-component/util/lib/omit';
+import { omit } from '@rc-component/util';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';

package/dist/esm/components/Control/Input/Number/index.js

@@ -1,5 +1,5 @@
 import RcInputNumber from '@rc-component/input-number';
-import omit from '@rc-component/util/lib/omit';
+import { omit } from '@rc-component/util';
 import * as React from 'react';
 import { useConfig } from '../../../../components/ConfigProvider';
 import { useInput } from '../../../../components/Control/Input/useInput';
@@ -21,8 +21,8 @@ export const InputNumber = React.forwardRef((props, ref) => {
     }));
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'number'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
-    const upIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-up-inner`, icon: "keyboard_arrow_up" }), [rootCls]);
-    const downIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-down-inner`, icon: "keyboard_arrow_down" }), [rootCls]);
+    const upIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-action-up-inner`, icon: "keyboard_arrow_up" }), [rootCls]);
+    const downIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-action-down-inner`, icon: "keyboard_arrow_down" }), [rootCls]);
     const inputProps = omit({ ...restProps, className: `${rootCls}-wrapper` }, [
         'allowClear',
         'prefix',

package/dist/esm/components/Control/Input/useInput.js

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
+import { KeyCode } from '../../../constants';
 export function fixControlledValue(value) {
     if (value == null) {
         return '';
@@ -40,7 +41,7 @@ export function useInput(props) {
         restProps.onFocus?.(event);
     }, [restProps]);
     const onKeyDown = React.useCallback(event => {
-        if (onPressEnter && (event.keyCode === 13 || event.key === 'Enter')) {
+        if (onPressEnter && (event.code === KeyCode.Enter)) {
             onPressEnter(event);
         }
         restProps.onKeyDown?.(event);

package/dist/esm/components/Control/Radio/Group.js

@@ -1,4 +1,4 @@
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import { useControlledState } from '@rc-component/util';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
@@ -7,9 +7,7 @@ import { RadioGroupContext } from '../../../components/Control/Radio/RadioGroupC
 export const Group = React.forwardRef(({ block, children, className, defaultValue, disabled, id, options, size, stack, style, ...props }, ref) => {
     const config = useConfig();
     const { direction = config.radio?.direction || config.direction, prefixCls = config.radio?.prefixCls || config.prefixCls, ...restProps } = props;
-    const [value, setValue] = useMergedState(defaultValue, {
-        value: restProps.value,
-    });
+    const [value, setValue] = useControlledState(defaultValue, restProps.value);
     const onChange = React.useCallback(event => {
         const lastValue = value;
         const val = event.target.value;

package/dist/esm/components/Control/Radio/index.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { Group, type RadioGroupProps } from '../../../components/Control/Radio/Group';
+import { type RadioGroupProps, Group } from '../../../components/Control/Radio/Group';
 import { type RadioChangeEvent, type RadioProps } from '../../../components/Control/Radio/Radio';
 export type { RadioChangeEvent, RadioGroupProps, RadioProps };
 export interface Radio extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> {

package/dist/esm/components/Control/Select/Select.d.ts

@@ -0,0 +1,18 @@
+import { type BaseSelectRef, type SelectProps as RcSelectProps, OptGroup, Option } from '@rc-component/select';
+import { type BaseOptionType, type DefaultOptionType } from '@rc-component/select/es/Select';
+import * as React from 'react';
+import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
+import { type SizeType } from '../../../types';
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'placement'> {
+    size?: SizeType;
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'allowClear' | 'defaultValue' | 'suffix' | 'value'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'getInputElement' | 'backfill'> {
+    placement?: SelectPlacement;
+    showArrow?: boolean;
+}
+export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+    ref?: React.Ref<BaseSelectRef>;
+}) => React.ReactElement) & {
+    OptGroup: typeof OptGroup;
+    Option: typeof Option;
+};

package/dist/esm/components/Control/Select/Select.js

@@ -0,0 +1,209 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import RcSelect, { OptGroup, Option } from '@rc-component/select';
+import classNames from 'classnames';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
+import { getBuiltInPlacements } from '../../../components/Control/Select/placements';
+import { Icon } from '../../../components/Icon';
+import { Spinner } from '../../../components/Spinner';
+import { KeyCode } from '../../../constants';
+function InternalSelect({ allowClear, popupMatchSelectWidth, builtinPlacements = getBuiltInPlacements(popupMatchSelectWidth), className, listHeight = 256, listItemHeight = 24, mode, placement = 'bottom-left', showArrow = true, showSearch = false, onPressEnter, ...props }, ref) {
+    const config = useConfig();
+    const { direction = config.select?.direction || config.direction, prefixCls = config.select?.prefixCls || config.prefixCls, ...restProps } = props;
+    const inputRef = React.useRef(null);
+    const labelRef = React.useRef(null);
+    const [focused, setFocused] = React.useState(false);
+    const [internalOpen, setInternalOpen] = React.useState(restProps.defaultOpen || restProps.open || false);
+    const [offsetY, setOffsetY] = React.useState(2);
+    const onBlur = React.useCallback(event => {
+        setFocused(false);
+        setInternalOpen(false);
+        restProps.onBlur?.(event);
+    }, [restProps]);
+    const onFocus = React.useCallback(event => {
+        setFocused(true);
+        restProps.onFocus?.(event);
+    }, [restProps]);
+    const onKeyDown = React.useCallback(event => {
+        if (event.code === KeyCode.Enter) {
+            setInternalOpen(true);
+            onPressEnter?.(event);
+        }
+        else if (event.code === KeyCode.Space) {
+            setInternalOpen(true);
+        }
+        restProps.onKeyDown?.(event);
+    }, [onPressEnter, restProps]);
+    const onPopupVisibleChange = React.useCallback((open) => {
+        setInternalOpen(open);
+        restProps.onPopupVisibleChange?.(open);
+    }, [restProps]);
+    const onClickIcon = React.useCallback(() => {
+        setInternalOpen(!internalOpen);
+    }, [internalOpen]);
+    React.useEffect(() => {
+        setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
+    }, [restProps.open, restProps.defaultOpen, internalOpen]);
+    React.useEffect(() => {
+        const select = labelRef.current?.firstElementChild;
+        if (select) {
+            let offset = parseInt(getComputedStyle?.(select).getPropertyValue('border-left-width'), 10);
+            if (direction !== 'rtl') {
+                offset *= -1;
+            }
+            setOffsetY(offset);
+        }
+    }, [direction]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'select'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const wrapperClasses = React.useMemo(() => classNames([controlCls, `${controlCls}-select`], {
+        [`${controlCls}-${restProps.size}`]: restProps.size,
+        [`${controlCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls || config.select?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls || config.select?.prefixCls || config.prefixCls}-focused`]: focused,
+    }, className), [
+        className,
+        config.select?.prefixCls,
+        config.prefixCls,
+        controlCls,
+        focused,
+        prefixCls,
+        direction,
+        restProps.disabled,
+        restProps.size,
+    ]);
+    const inputProps = React.useMemo(() => {
+        // Arrow or loading icon
+        let suffixIcon;
+        if (restProps.loading) {
+            if (typeof config.select?.loadingIcon === 'function') {
+                suffixIcon = config.select.loadingIcon();
+            }
+            else if (React.isValidElement(config.select?.loadingIcon)) {
+                suffixIcon = config.select.loadingIcon;
+            }
+            else {
+                suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.7 });
+            }
+            suffixIcon = React.createElement("div", { className: `${rootCls}-arrow ${rootCls}-arrow-loading` }, suffixIcon);
+        }
+        else if (showArrow) {
+            const isMultiple = mode === 'multiple' || mode === 'tags';
+            if (isMultiple) {
+                if (typeof config.select?.addIcon === 'function') {
+                    suffixIcon = config.select.addIcon({ onClick: onClickIcon });
+                }
+                else if (React.isValidElement(config.select?.addIcon)) {
+                    suffixIcon = config.select.addIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
+                }
+            }
+            else if (showSearch && internalOpen) {
+                if (typeof config.select?.searchIcon === 'function') {
+                    suffixIcon = config.select.searchIcon();
+                }
+                else if (React.isValidElement(config.select?.searchIcon)) {
+                    suffixIcon = config.select.searchIcon;
+                }
+                else {
+                    suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
+                }
+            }
+            else if (typeof config.select?.arrowIcon === 'function') {
+                suffixIcon = config.select.arrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
+            }
+            else if (React.isValidElement(config.select?.arrowIcon)) {
+                suffixIcon = config.select.arrowIcon;
+            }
+            else {
+                suffixIcon = internalOpen
+                    ? React.createElement(Icon, { key: "expand_less", icon: "expand_less", onClick: onClickIcon })
+                    : React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon });
+            }
+            suffixIcon = React.createElement("div", { className: `${rootCls}-arrow` }, suffixIcon);
+        }
+        // Not found content
+        let mergedNotFound;
+        if (restProps.notFoundContent !== undefined) {
+            mergedNotFound = restProps.notFoundContent;
+        }
+        else if (mode === 'combobox') {
+            mergedNotFound = null;
+        }
+        if (typeof config.select?.notFoundContent === 'function') {
+            mergedNotFound = config.select.notFoundContent();
+        }
+        else if (React.isValidElement(config.select?.notFoundContent)) {
+            mergedNotFound = config.select.notFoundContent;
+        }
+        let clearIcon = React.createElement(Icon, { icon: "clear" });
+        if (typeof config.select?.clearIcon === 'function') {
+            clearIcon = config.select.clearIcon();
+        }
+        else if (React.isValidElement(config.select?.clearIcon)) {
+            clearIcon = config.select.clearIcon;
+        }
+        return {
+            allowClear: (allowClear || allowClear === undefined) && {
+                clearIcon,
+            },
+            listHeight,
+            listItemHeight,
+            menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
+            open: internalOpen,
+            prefixCls: rootCls,
+            removeIcon: React.createElement(Icon, { icon: "clear" }),
+            showSearch,
+            suffix: suffixIcon,
+            transitionName: `${prefixCls || config.select?.prefixCls || config.prefixCls}-motion-slide-bottom-small`,
+            ...restProps,
+            notFoundContent: mergedNotFound,
+            popupClassName: classNames(restProps.popupClassName, {
+                [`${prefixCls || config.select?.prefixCls || config.prefixCls}-dropdown-rtl`]: direction === 'rtl',
+            }),
+            popupMatchSelectWidth: true,
+            onBlur,
+            onFocus,
+            onKeyDown,
+            onPopupVisibleChange,
+        };
+    }, [
+        restProps,
+        showArrow,
+        mode,
+        config,
+        allowClear,
+        listHeight,
+        listItemHeight,
+        internalOpen,
+        rootCls,
+        showSearch,
+        prefixCls,
+        direction,
+        onBlur,
+        onFocus,
+        onKeyDown,
+        onClickIcon,
+        onPopupVisibleChange,
+    ]);
+    React.useImperativeHandle(ref, () => ({
+        blur() {
+            inputRef.current?.blur();
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        scrollTo() {
+            return inputRef.current?.scrollTo;
+        },
+    }));
+    return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
+        React.createElement(RcSelect, { ref: inputRef, builtinPlacements: builtinPlacements, placement: placement, popupAlign: {
+                offset: [offsetY, 5],
+            }, ...inputProps, mode: mode })));
+}
+export const Select = React.forwardRef(InternalSelect);
+Select.Option = Option;
+Select.OptGroup = OptGroup;

package/dist/esm/components/Control/Select/index.d.ts

@@ -1,21 +1,4 @@
-import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps } from '@rc-component/select';
-import { type OptionProps } from '@rc-component/select/lib/Option';
-import { type BaseOptionType, type DefaultOptionType } from '@rc-component/select/lib/Select';
-import * as React from 'react';
-import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
-import { type SizeType } from '../../../types';
-export type { BaseSelectRef, OptionProps };
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'placement'> {
-    size?: SizeType;
-}
-export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'allowClear' | 'defaultValue' | 'suffix' | 'value'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'getInputElement' | 'backfill'> {
-    placement?: SelectPlacement;
-    showArrow?: boolean;
-}
-export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
-    ref?: React.Ref<BaseSelectRef>;
-}) => React.ReactElement) & {
-    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
-    Option: typeof Option;
-    OptGroup: typeof OptGroup;
-};
+export { Select } from '../../../components/Control/Select/Select';
+export { type SelectProps } from '../../../components/Control/Select/Select';
+export { type BaseSelectRef } from '@rc-component/select';
+export { type OptionProps } from '@rc-component/select/es/Option';