@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useConfig } from '../../ConfrigProvider';
 export function fixControlledValue(value) {
     if (value == null) {
         return '';
     }
     return value;
 }
-export function useInput({ className, direction, size, state, useInternalValueState = true, onPressEnter, ...props }) {
-    // Refs
+export function useInput(props) {
+    const config = useConfig();
     const inputRef = React.useRef(null);
-    // States
+    const { className, direction, prefixCls = config.prefixCls, size, state, useInternalValueState = true, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
-    const [internalValue, setInternalValue] = React.useState(useInternalValueState ? (props.value || props.defaultValue) : undefined);
-    // Methods
-    const onChange = (event) => {
+    const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
+    const onChange = React.useCallback((event) => {
         if (useInternalValueState) {
             if (typeof event === 'string' || typeof event === 'number') {
                 setInternalValue(event);
@@ -22,67 +22,64 @@ export function useInput({ className, direction, size, state, useInternalValueSt
                 setInternalValue(event.target.value);
             }
         }
-        props.onChange?.(event);
-    };
-    const onClear = event => {
+        restProps.onChange?.(event);
+    }, [restProps, useInternalValueState]);
+    const onClear = React.useCallback(event => {
         if (inputRef.current) {
             inputRef.current.value = '';
         }
         onChange(event);
-    };
-    const onBlur = event => {
+    }, [onChange]);
+    const onBlur = React.useCallback(event => {
         setFocused(false);
-        props.onBlur?.(event);
-    };
-    const onFocus = event => {
+        restProps.onBlur?.(event);
+    }, [restProps]);
+    const onFocus = React.useCallback(event => {
         setFocused(true);
-        props.onFocus?.(event);
-    };
-    const onKeyDown = event => {
-        if (onPressEnter && event.keyCode === 13) {
+        restProps.onFocus?.(event);
+    }, [restProps]);
+    const onKeyDown = React.useCallback(event => {
+        if (onPressEnter && (event.keyCode === 13 || event.key === 'Enter')) {
             onPressEnter(event);
         }
-        props.onKeyDown?.(event);
-    };
-    // Effects
-    React.useEffect(() => {
-        if (useInternalValueState) {
-            setInternalValue(props.value);
-        }
-    }, [props.value]);
-    // Pre-render logic
+        restProps.onKeyDown?.(event);
+    }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
-        ...props,
-        value: fixControlledValue(internalValue || props.value),
+        ...restProps,
+        value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onClear,
         onFocus,
         onKeyDown,
-    }), [props, internalValue]);
-    const wrapperClasses = React.useMemo(() => classNames('uk-control', {
-        [`uk-control-${props.type}`]: props.type,
-        [`uk-control-${size}`]: size,
-        [`uk-control-${state}`]: state,
-        'uk-control-rtl': direction === 'rtl',
-        'uk-disabled': props.disabled,
-        'uk-focused': focused,
-        'uk-readonly': props.readOnly,
+    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const wrapperClasses = React.useMemo(() => classNames(controlCls, {
+        [`${controlCls}-${restProps.type}`]: restProps.type,
+        [`${controlCls}-${size}`]: size,
+        [`${controlCls}-${state}`]: state,
+        [`${controlCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls || config.prefixCls}-focused`]: focused,
+        [`${prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
-        className,
-        direction,
-        focused,
+        controlCls,
+        restProps.type,
+        restProps.disabled,
+        restProps.readOnly,
         size,
         state,
-        props.disabled,
-        props.readOnly,
-        props.type,
+        direction,
+        prefixCls,
+        config.prefixCls,
+        focused,
+        className,
     ]);
-    // Return consumed props
-    return {
-        ...inputProps,
-        inputRef,
-        wrapperClasses,
-    };
+    React.useEffect(() => {
+        if (useInternalValueState) {
+            setInternalValue(restProps.value);
+        }
+    }, [restProps.value, useInternalValueState]);
+    return { ...inputProps, inputRef, wrapperClasses };
 }

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

@@ -1,3 +1,8 @@
 import * as React from 'react';
-import type { RadioGroupProps } from './types';
-export declare const Group: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+import { type AbstractCheckboxGroupProps } from '../../Control/Checkbox';
+export interface RadioGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
+    defaultValue?: T;
+    value?: T;
+    onChange?: (option: T) => void;
+}
+export declare const Group: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioGroupProps<any> & React.RefAttributes<HTMLDivElement>>>;

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

@@ -1,45 +1,52 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { Radio } from './Radio';
-import { Context } from './Context';
-export const Group = React.forwardRef((props, ref) => {
-    const { block, children, className, defaultValue, direction, disabled, id, options, size, stack, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+import { useConfig } from '../../ConfrigProvider';
+import { Radio } from '../../Control/Radio/Radio';
+import { RadioGroupContext } from '../../Control/Radio/RadioGroupContext';
+const ForwardedGroup = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { block, children, className, defaultValue, direction = config.direction, disabled, id, options, prefixCls = config.prefixCls, size, stack, style, ...restProps } = props;
     const [value, setValue] = useMergedState(defaultValue, {
         value: restProps.value,
     });
-    const onRadioChange = (event) => {
+    const onChange = React.useCallback(event => {
         const lastValue = value;
         const val = event.target.value;
         if (!('value' in restProps)) {
             setValue(val);
         }
         if (val !== lastValue) {
-            restProps.onChange?.(event);
+            restProps.onChange?.(val);
         }
-    };
+    }, [restProps, setValue, value]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'radio-group'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         disabled,
         name: restProps.name,
         value,
         // eslint-disable-next-line sort-keys
-        onChange: onRadioChange,
-    }), [disabled, value, restProps]);
+        onChange,
+    }), [disabled, restProps.name, value, onChange]);
     const renderGroup = () => {
         let childrenToRender = children;
         if (options && options.length > 0) {
             childrenToRender = options.map((option) => {
                 if (typeof option === 'string') {
-                    return (React.createElement(Radio, { key: option, block: block, checked: value === option, direction: direction, disabled: disabled, size: size, value: option, className: "uk-radio-group-item" }, option));
+                    return (React.createElement(Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
-                return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, direction: direction, disabled: option.disabled || disabled, size: size, value: option.value, style: option.style, className: "uk-radio-group-item" }, option.label));
+                return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, className: `${rootCls}-item`, direction: direction, disabled: option.disabled || disabled, size: size, style: option.style, value: option.value }, option.label));
             });
         }
-        return (React.createElement("div", { ref: ref, className: classNames('uk-radio-group', {
-                'uk-radio-group-rtl': direction === 'rtl',
-                'uk-radio-group-stack': stack,
-            }, className), id: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, childrenToRender));
+        return (React.createElement("div", { className: classNames(rootCls, {
+                [`${rootCls}-rtl`]: direction === 'rtl',
+                [`${rootCls}-stack`]: stack,
+            }, className), id: id, style: style, ref: ref }, childrenToRender));
     };
-    return (React.createElement(Context.Provider, { value: context }, renderGroup()));
+    return React.createElement(RadioGroupContext.Provider, { value: context }, renderGroup());
 });
-Group.displayName = 'Radio.Group';
+export const Group = React.memo(ForwardedGroup);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedGroup.displayName = 'Radio.Group.Forwarded';
+    Group.displayName = 'Radio.Group';
+}

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

@@ -1,3 +1,7 @@
 import * as React from 'react';
-import type { RadioProps } from './types';
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+import { type AbstractCheckboxProps } from '../../Control/Checkbox';
+export interface RadioProps extends AbstractCheckboxProps {
+    onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
+}
+export declare const Radio: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>>;

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

@@ -1,56 +1,73 @@
 import * as React from 'react';
+import { retrieveGlobalAttributes } from '@broxus/js-utils';
 import classNames from 'classnames';
-import RcCheckbox from 'rc-checkbox';
-import { composeRef } from 'rc-util/lib/ref';
-import { useRadioGroup } from './Context';
-export const Radio = React.forwardRef((props, ref) => {
-    const { block, size, className, children, direction, skipGroup, style, type = 'radio', onMouseEnter, onMouseLeave, ...restProps } = props;
+import { useConfig } from '../../ConfrigProvider';
+import { useRadioGroup } from '../../Control/Radio/RadioGroupContext';
+const ForwardedRadio = React.forwardRef((props, ref) => {
+    const config = useConfig();
     const radioGroup = useRadioGroup();
-    const innerRef = React.useRef();
-    const mergedRef = composeRef(ref, innerRef);
-    const [internalChecked, setInternalChecked] = React.useState(restProps.checked
-        ?? restProps.defaultChecked
-        ?? ('value' in restProps && restProps.value === radioGroup?.value));
-    const onChange = (event) => {
+    const { block, size, className, children, direction = config.direction, disabled, id, prefixCls = config.prefixCls, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const [internalChecked, setInternalChecked] = React.useState(restProps.checked ??
+        restProps.defaultChecked ??
+        ('value' in restProps && restProps.value === radioGroup?.value));
+    const onChange = React.useCallback(event => {
         setInternalChecked(true);
         restProps.onChange?.(event);
         radioGroup?.onChange?.(event);
-    };
-    React.useEffect(() => {
-        setInternalChecked(restProps.checked
-            ?? restProps.defaultChecked
-            ?? ('value' in restProps && restProps.value === radioGroup?.value));
-    }, [restProps.checked, restProps.defaultChecked, radioGroup?.value]);
+    }, [radioGroup, restProps]);
     const radioProps = React.useMemo(() => ({
         ...restProps,
         checked: internalChecked,
-        type,
-        // eslint-disable-next-line sort-keys
+        disabled,
+        id,
         onChange,
-    }), [restProps, internalChecked]);
+    }), [disabled, id, internalChecked, onChange, restProps]);
     if (radioGroup && !skipGroup) {
         radioProps.checked = restProps.value === radioGroup.value;
-        radioProps.disabled = restProps.disabled || radioGroup.disabled;
+        radioProps.disabled = disabled || radioGroup.disabled;
         radioProps.name = radioGroup.name;
         radioProps.onChange = onChange;
     }
-    const prefixCls = 'uk-radio';
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'radio'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
-        'uk-control': block,
-        'uk-control-radio': block,
-        [`uk-control-${size}`]: block && size,
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-        // eslint-disable-next-line sort-keys
-        'uk-checked': internalChecked,
-        'uk-disabled': radioProps.disabled,
-    }, className), [radioProps, block, size, direction]);
-    return (React.createElement("label", { className: wrapperClasses, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-        React.createElement(RcCheckbox
-        // @ts-ignore
-        , { 
-            // @ts-ignore
-            ref: mergedRef, ...radioProps, prefixCls: prefixCls }),
-        children !== undefined && (React.createElement("span", { className: `${prefixCls}-label` }, children))));
+        [controlCls]: block,
+        [`${controlCls}-radio`]: block,
+        [`${controlCls}-${size}`]: block && size,
+        [`${rootCls}-wrapper`]: true,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls || config.prefixCls}-checked`]: internalChecked,
+        [`${prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
+    }, className), [
+        controlCls,
+        block,
+        size,
+        rootCls,
+        direction,
+        prefixCls,
+        config.prefixCls,
+        internalChecked,
+        radioProps.disabled,
+        className,
+    ]);
+    const radioClasses = React.useMemo(() => classNames(rootCls, {
+        [`${rootCls}-checked`]: internalChecked,
+        [`${rootCls}-disabled`]: disabled,
+    }), [rootCls, internalChecked, disabled]);
+    const globalAttributes = React.useMemo(() => retrieveGlobalAttributes(restProps), [restProps]);
+    React.useEffect(() => {
+        setInternalChecked(restProps.checked ??
+            restProps.defaultChecked ??
+            ('value' in restProps && restProps.value === radioGroup?.value));
+    }, [restProps.checked, restProps.defaultChecked, radioGroup?.value, restProps]);
+    return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+        React.createElement("span", { className: classNames(radioClasses) },
+            React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...radioProps, type: "radio", ...globalAttributes }),
+            React.createElement("span", { className: `${rootCls}-inner` })),
+        children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });
-Radio.displayName = 'Radio';
+export const Radio = React.memo(ForwardedRadio);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedRadio.displayName = 'Radio.Forwarded';
+    Radio.displayName = 'Radio';
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface RadioGroupConsumerProps<T = any> {
+    disabled?: boolean;
+    name?: string;
+    value?: T;
+    onChange: (option: T) => void;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupConsumerProps<any> | null>;
+export declare function useRadioGroup(): RadioGroupConsumerProps | null;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const RadioGroupContext = React.createContext(null);
+export function useRadioGroup() {
+    return React.useContext(RadioGroupContext);
+}
+if (process.env.NODE_ENV !== 'production') {
+    RadioGroupContext.displayName = 'RadioGroupContext';
+}

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Group } from './Group';
-import type { RadioProps } from './types';
+import type * as React from 'react';
+import { Group } from '../../Control/Radio/Group';
+import { type RadioProps } from '../../Control/Radio/Radio';
 import './index.scss';
-export * from './types';
-export interface CompoundedRadio extends React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> {
+export type { RadioProps };
+export interface Radio extends React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>> {
     Group: typeof Group;
 }
-export declare const Radio: CompoundedRadio;
+export declare const Radio: Radio;

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

@@ -1,6 +1,5 @@
-import { Group } from './Group';
-import { Radio as InternalRadio } from './Radio';
+import { Group } from '../../Control/Radio/Group';
+import { Radio as InternalRadio } from '../../Control/Radio/Radio';
 import './index.scss';
-export * from './types';
 export const Radio = InternalRadio;
 Radio.Group = Group;

package/dist/esm/components/Control/Radio/index.scss

@@ -93,6 +93,7 @@
 }
 
 .uk-radio-wrapper .uk-radio-label {
+    line-height: var(--radio-size);
     max-width: 100%;
     overflow: hidden;
     padding-left: var(--control-affix-margin);

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { OptGroup, Option } from 'rc-select';
-import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
-import type { OptionProps } from 'rc-select/lib/Option';
-import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
-import type { ControlProps, SizeType } from '../types';
+import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps } from 'rc-select';
+import { type OptionProps } from 'rc-select/lib/Option';
+import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
+import { type ControlProps, type SizeType } from '../../Control/types';
 import './index.scss';
-export type { OptionProps };
+export type { BaseSelectRef, OptionProps };
 export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
@@ -14,13 +13,10 @@ export interface InternalSelectProps<ValueType = any, OptionType extends BaseOpt
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
     mode?: 'multiple' | 'tags';
 }
-declare const ForwardedSelect: <ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
     ref?: React.Ref<BaseSelectRef> | undefined;
-}) => React.ReactElement;
-declare type InternalSelectType = typeof ForwardedSelect;
-interface Select extends InternalSelectType {
+}) => React.ReactElement) & {
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: typeof Option;
     OptGroup: typeof OptGroup;
-}
-export declare const Select: Select;
+};

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

@@ -1,38 +1,30 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import RcSelect, { OptGroup, Option } from 'rc-select';
+import RcSelect, { OptGroup, Option, } from 'rc-select';
+import { useConfig } from '../../ConfrigProvider';
 import { Icon } from '../../Icon';
 import { Spinner } from '../../Spinner';
 import './index.scss';
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+/* eslint-disable jsx-a11y/label-has-associated-control */
 function InternalSelect(props, ref) {
-    const { className, listHeight = 256, listItemHeight = 24, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
-    const innerRef = React.useRef(null);
+    const config = useConfig();
+    const { className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...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);
-    React.useImperativeHandle(ref, () => ({
-        blur() {
-            innerRef.current?.blur();
-        },
-        focus() {
-            innerRef.current?.focus();
-        },
-        scrollTo() {
-            return innerRef.current?.scrollTo;
-        },
-    }));
-    const onBlur = event => {
+    const onBlur = React.useCallback(event => {
         setFocused(false);
         setInternalOpen(false);
         restProps.onBlur?.(event);
-    };
-    const onFocus = event => {
+    }, [restProps]);
+    const onFocus = React.useCallback(event => {
         setFocused(true);
         restProps.onFocus?.(event);
-    };
-    const onKeyDown = event => {
+    }, [restProps]);
+    const onKeyDown = React.useCallback(event => {
         if (event.keyCode === 13) {
             setInternalOpen(true);
             onPressEnter?.(event);
@@ -41,17 +33,17 @@ function InternalSelect(props, ref) {
             setInternalOpen(true);
         }
         restProps.onKeyDown?.(event);
-    };
-    const onDropdownVisibleChange = (open) => {
+    }, [onPressEnter, restProps]);
+    const onDropdownVisibleChange = React.useCallback((open) => {
         setInternalOpen(open);
         restProps.onDropdownVisibleChange?.(open);
-    };
-    const onClickIcon = () => {
+    }, [restProps]);
+    const onClickIcon = React.useCallback(() => {
         setInternalOpen(true);
-    };
+    }, []);
     React.useEffect(() => {
         setInternalOpen(restProps.defaultOpen || restProps.open || internalOpen);
-    }, [restProps.open, restProps.defaultOpen]);
+    }, [restProps.open, restProps.defaultOpen, internalOpen]);
     React.useEffect(() => {
         const select = labelRef.current?.firstElementChild;
         if (select) {
@@ -61,9 +53,9 @@ function InternalSelect(props, ref) {
             }
             setOffsetY(offset);
         }
-    }, [labelRef.current, restProps.direction]);
-    const rootPrefixCls = 'uk';
-    const prefixCls = `${rootPrefixCls}-select`;
+    }, [restProps.direction]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'select'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const mode = React.useMemo(() => {
         const { mode: m } = restProps;
         if (m === 'combobox') {
@@ -73,34 +65,38 @@ function InternalSelect(props, ref) {
             return 'combobox';
         }
         return m;
-    }, [restProps.mode]);
-    const wrapperClasses = React.useMemo(() => classNames([
-        'uk-control',
-        'uk-control-select',
-    ], {
-        [`uk-control-${restProps.size}`]: restProps.size,
-        'uk-control-rtl': restProps.direction === 'rtl',
-        'uk-focused': focused,
-        // eslint-disable-next-line sort-keys
-        'uk-disabled': restProps.disabled,
-    }, className), [className, focused, restProps.direction, restProps.disabled, restProps.size]);
+    }, [restProps]);
+    const wrapperClasses = React.useMemo(() => classNames([controlCls, `${controlCls}-select`], {
+        [`${controlCls}-${restProps.size}`]: restProps.size,
+        [`${controlCls}-rtl`]: restProps.direction === 'rtl',
+        [`${prefixCls || config.prefixCls}-focused`]: focused,
+        [`${prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
+    }, className), [
+        className,
+        config.prefixCls,
+        controlCls,
+        focused,
+        prefixCls,
+        restProps.direction,
+        restProps.disabled,
+        restProps.size,
+    ]);
     const inputProps = React.useMemo(() => {
         // Arrow or loading icon
         let inputIcon;
         if (restProps.loading) {
-            inputIcon = (React.createElement(Spinner, { key: "spinner", ratio: 0.9 }));
+            inputIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.9 });
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                inputIcon = (React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon }));
+                inputIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
             }
             else if (showSearch && internalOpen) {
-                inputIcon = (React.createElement(Icon, { key: "manage_search", icon: "manage_search" }));
+                inputIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
             }
             else {
-                inputIcon = internalOpen
-                    ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+                inputIcon = internalOpen ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
             }
         }
         // Not found content
@@ -122,14 +118,14 @@ function InternalSelect(props, ref) {
             listItemHeight,
             menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
             open: internalOpen,
-            prefixCls,
+            prefixCls: rootCls,
             removeIcon: React.createElement(Icon, { icon: "clear" }),
             showArrow,
             showSearch,
-            transitionName: 'uk-motion-slide-up',
+            transitionName: `${prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
             dropdownClassName: classNames(restProps.dropdownClassName, {
-                [`${prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
+                [`${prefixCls || config.prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
             }),
             notFoundContent: mergedNotFound,
             onBlur,
@@ -137,14 +133,41 @@ function InternalSelect(props, ref) {
             onFocus,
             onKeyDown,
         };
-    }, [restProps, internalOpen, mode]);
+    }, [
+        restProps,
+        showArrow,
+        mode,
+        listHeight,
+        listItemHeight,
+        internalOpen,
+        rootCls,
+        showSearch,
+        prefixCls,
+        config.prefixCls,
+        onBlur,
+        onDropdownVisibleChange,
+        onFocus,
+        onKeyDown,
+        onClickIcon,
+    ]);
+    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: innerRef, ...inputProps, dropdownAlign: {
+        React.createElement(RcSelect, { ref: inputRef, ...inputProps, dropdownAlign: {
                 offset: [offsetY, 5],
             }, mode: mode })));
 }
 const ForwardedSelect = React.forwardRef(InternalSelect);
-export const Select = ForwardedSelect;
+export const Select = React.memo(ForwardedSelect);
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 Select.Option = Option;
 Select.OptGroup = OptGroup;