@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -30,16 +30,14 @@ exports.InputNumber = void 0;
 const React = __importStar(require("react"));
 const rc_input_number_1 = __importDefault(require("rc-input-number"));
 const omit_1 = __importDefault(require("rc-util/lib/omit"));
+const ConfrigProvider_1 = require("../../../ConfrigProvider");
+const useInput_1 = require("../../../Control/Input/useInput");
 const Icon_1 = require("../../../Icon");
-const useInput_1 = require("../useInput");
 require("./index.scss");
-exports.InputNumber = React.forwardRef((props, ref) => {
-    // Hooks
-    const { inputRef, wrapperClasses, ...restProps } = (0, useInput_1.useInput)({
-        ...props,
-        type: 'number',
-    });
-    // External component API
+/* eslint-disable jsx-a11y/label-has-associated-control */
+const ForwardedInputNumber = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { inputRef, prefixCls = config.prefixCls, wrapperClasses, ...restProps } = (0, useInput_1.useInput)({ ...props, type: 'number' });
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -51,16 +49,23 @@ exports.InputNumber = React.forwardRef((props, ref) => {
             return inputRef;
         },
     }));
-    // Pre-render logic
-    const upIcon = React.useMemo(() => (React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_up", className: "uk-number-handler-up-inner" })), []);
-    const downIcon = React.useMemo(() => (React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_down", className: "uk-number-handler-down-inner" })), []);
-    const inputProps = (0, omit_1.default)({
-        ...restProps,
-        className: 'uk-number-wrapper',
-    }, ['allowClear', 'prefix', 'size', 'suffix', 'onClear']);
-    // Render
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'number'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const upIcon = React.useMemo(() => React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_up", className: `${rootCls}-handler-up-inner` }), [rootCls]);
+    const downIcon = React.useMemo(() => React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_down", className: `${rootCls}-handler-down-inner` }), [rootCls]);
+    const inputProps = (0, omit_1.default)({ ...restProps, className: `${rootCls}-wrapper` }, [
+        'allowClear',
+        'prefix',
+        'size',
+        'suffix',
+        'onClear',
+    ]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement("div", { className: "uk-control-input" },
-            React.createElement(rc_input_number_1.default, { ...inputProps, downHandler: downIcon, prefixCls: "uk-number", ref: inputRef, upHandler: upIcon }))));
+        React.createElement("div", { className: `${controlCls}-input` },
+            React.createElement(rc_input_number_1.default, { ...inputProps, downHandler: downIcon, prefixCls: rootCls, ref: inputRef, upHandler: upIcon }))));
 });
-exports.InputNumber.displayName = 'Input.Number';
+exports.InputNumber = React.memo(ForwardedInputNumber);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedInputNumber.displayName = 'Input.Number.Forwarded';
+    exports.InputNumber.displayName = 'Input.Number';
+}

package/dist/cjs/components/Control/Input/Password/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { InputRef, PasswordProps } from '../types';
+import { type InputRef, type PasswordProps } from '../../../Control/Input/types';
 import './index.scss';
-export declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>;
+export declare const Password: React.MemoExoticComponent<React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>>;

package/dist/cjs/components/Control/Input/Password/index.js

@@ -26,38 +26,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Password = void 0;
 const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
+const ConfrigProvider_1 = require("../../../ConfrigProvider");
+const Input_1 = require("../../../Control/Input/Input");
 const Icon_1 = require("../../../Icon");
-const Input_1 = require("../Input");
 require("./index.scss");
-exports.Password = React.forwardRef((props, ref) => {
-    const { onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+const ForwardedPassword = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
-    const [visible, toggleVisible] = React.useState(false);
-    const removePasswordValueAttribute = () => {
+    const [visible, setVisible] = React.useState(false);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
-            if (inputRef?.current?.getInputRef()?.current?.getAttribute('type') === 'password'
-                && inputRef?.current?.getInputRef()?.current?.hasAttribute('value')) {
-                inputRef?.current?.getInputRef()?.current?.removeAttribute('value');
+            const input = inputRef?.current?.getInputRef()?.current;
+            if (input?.getAttribute('type') === 'password' && input?.hasAttribute('value')) {
+                input?.removeAttribute('value');
             }
         });
-    };
-    const onChange = event => {
+    }, []);
+    const toggleVisibility = React.useCallback(() => {
+        setVisible(!visible);
+        restProps.onVisibilityChange?.(!visible);
+    }, [restProps, visible]);
+    const onChange = React.useCallback(event => {
         removePasswordValueAttribute();
         onChangeCallback?.(event);
-    };
-    const onBlur = event => {
+    }, [onChangeCallback, removePasswordValueAttribute]);
+    const onBlur = React.useCallback(event => {
         removePasswordValueAttribute();
         onBlurCallback?.(event);
-    };
-    const onFocus = event => {
+    }, [onBlurCallback, removePasswordValueAttribute]);
+    const onFocus = React.useCallback(event => {
         removePasswordValueAttribute();
         restProps.onFocus?.(event);
-    };
-    const onClickIcon = React.useCallback(() => {
-        toggleVisible(!visible);
-        restProps.onVisibilityChange?.(!visible);
-    }, [visible]);
+    }, [removePasswordValueAttribute, restProps]);
     React.useImperativeHandle(ref, () => ({
         blur() {
             inputRef.current?.blur();
@@ -66,9 +69,7 @@ exports.Password = React.forwardRef((props, ref) => {
             inputRef.current?.focus();
         },
         getInputRef() {
-            return inputRef.current
-                ? inputRef.current.getInputRef()
-                : null;
+            return inputRef.current ? inputRef.current.getInputRef() : null;
         },
     }));
     React.useEffect(() => {
@@ -78,12 +79,23 @@ exports.Password = React.forwardRef((props, ref) => {
                 clearTimeout(removePasswordTimeout.current);
             }
         };
-    }, []);
+    }, [removePasswordValueAttribute]);
     const suffix = React.useMemo(() => (React.createElement(React.Fragment, null,
         React.createElement(Icon_1.Icon, { key: "toggle_visibility_icon", icon: visible
-                ? (restProps.iconVisibility ?? 'visibility')
-                : (restProps.iconVisibilityOff ?? 'visibility_off'), className: "uk-control-password-icon", onClick: onClickIcon, onMouseDown: js_utils_1.preventEvent, onMouseUp: js_utils_1.preventEvent }),
-        restProps.suffix)), [restProps.iconVisibility, restProps.iconVisibilityOff, visible]);
+                ? restProps.iconVisibility ?? 'visibility'
+                : restProps.iconVisibilityOff ?? 'visibility_off', className: `${controlCls}-password-icon`, onClick: toggleVisibility, onMouseDown: js_utils_1.preventEvent, onMouseUp: js_utils_1.preventEvent }),
+        restProps.suffix)), [
+        controlCls,
+        restProps.iconVisibility,
+        restProps.iconVisibilityOff,
+        restProps.suffix,
+        toggleVisibility,
+        visible,
+    ]);
     return (React.createElement(Input_1.Input, { ...restProps, suffix: suffix, type: visible ? 'text' : 'password', ref: inputRef, onChange: onChange, onBlur: onBlur, onFocus: onFocus }));
 });
-exports.Password.displayName = 'Input.Password';
+exports.Password = React.memo(ForwardedPassword);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedPassword.displayName = 'Input.Password.Forwarded';
+    exports.Password.displayName = 'Input.Password';
+}

package/dist/cjs/components/Control/Input/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { InputNumber } from './Number';
-import { Password } from './Password';
-import type { InputProps, InputRef } from './types';
-export * from './types';
-export * from './useInput';
-export interface CompoundedInput extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
+import { InputNumber } from '../../Control/Input/Number';
+import { Password } from '../../Control/Input/Password';
+import type { InputProps, InputRef } from '../../Control/Input/types';
+export * from '../../Control/Input/types';
+export * from '../../Control/Input/useInput';
+export interface Input extends React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>> {
     Number: typeof InputNumber;
     Password: typeof Password;
 }
-export declare const Input: CompoundedInput;
+export declare const Input: Input;

package/dist/cjs/components/Control/Input/index.js

@@ -15,11 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const Input_1 = require("./Input");
-const Number_1 = require("./Number");
-const Password_1 = require("./Password");
-__exportStar(require("./types"), exports);
-__exportStar(require("./useInput"), exports);
+const Input_1 = require("../../Control/Input/Input");
+const Number_1 = require("../../Control/Input/Number");
+const Password_1 = require("../../Control/Input/Password");
+__exportStar(require("../../Control/Input/types"), exports);
+__exportStar(require("../../Control/Input/useInput"), exports);
 exports.Input = Input_1.Input;
 exports.Input.Number = Number_1.InputNumber;
 exports.Input.Password = Password_1.Password;

package/dist/cjs/components/Control/Input/types.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
-import type { ControlProps, ValueType } from '../types';
+import type * as React from 'react';
+import { type InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import { type ControlProps, type ValueType } from '../../Control/types';
 export interface InputFocusOptions extends FocusOptions {
     cursor?: 'start' | 'end' | 'all';
 }
@@ -9,7 +9,7 @@ export interface InputRef {
     focus(): void;
     getInputRef(): React.RefObject<HTMLInputElement> | null;
 }
-export declare type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
+export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
@@ -19,7 +19,7 @@ export interface PasswordProps extends InputProps {
     iconVisibilityOff?: string;
     onVisibilityChange?(visible: boolean): void;
 }
-export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<RcInputNumberProps<T>, 'prefix' | 'size'>, ControlProps<T> {
+export interface InputNumberProps<T extends ValueType = ValueType> extends Omit<RcInputNumberProps<T>, 'prefix' | 'size' | 'type'>, Omit<ControlProps<T>, 'value'> {
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;
 }

package/dist/cjs/components/Control/Input/useInput.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { ValueType } from '../types';
-import type { InputNumberProps, InputProps } from './types';
+import { type ValueType } from '../../Control/types';
+import { type InputNumberProps, type InputProps } from '../../Control/Input/types';
 interface HookConsumedProps {
     inputRef: React.RefObject<HTMLInputElement>;
+    prefixCls?: string;
     wrapperClasses: string;
 }
-declare type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
+type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
 export declare function fixControlledValue<T>(value: T): T | string;
-export declare function useInput<T, U extends ValueType = ValueType>({ className, direction, size, state, useInternalValueState, onPressEnter, ...props }: Props<T, U>): T & HookConsumedProps;
+export declare function useInput<T, U extends ValueType = ValueType>(props: Props<T, U>): T & HookConsumedProps;
 export {};

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInput = exports.fixControlledValue = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../../ConfrigProvider");
 function fixControlledValue(value) {
     if (value == null) {
         return '';
@@ -36,14 +37,13 @@ function fixControlledValue(value) {
     return value;
 }
 exports.fixControlledValue = fixControlledValue;
-function useInput({ className, direction, size, state, useInternalValueState = true, onPressEnter, ...props }) {
-    // Refs
+function useInput(props) {
+    const config = (0, ConfrigProvider_1.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);
@@ -52,68 +52,65 @@ function useInput({ className, direction, size, state, useInternalValueState = t
                 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(() => (0, classnames_1.default)('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(() => (0, classnames_1.default)(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 };
 }
 exports.useInput = useInput;

package/dist/cjs/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/cjs/components/Control/Radio/Group.js

@@ -30,45 +30,52 @@ exports.Group = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useMergedState_1 = __importDefault(require("rc-util/lib/hooks/useMergedState"));
-const Radio_1 = require("./Radio");
-const Context_1 = require("./Context");
-exports.Group = React.forwardRef((props, ref) => {
-    const { block, children, className, defaultValue, direction, disabled, id, options, size, stack, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+const Radio_1 = require("../../Control/Radio/Radio");
+const RadioGroupContext_1 = require("../../Control/Radio/RadioGroupContext");
+const ForwardedGroup = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { block, children, className, defaultValue, direction = config.direction, disabled, id, options, prefixCls = config.prefixCls, size, stack, style, ...restProps } = props;
     const [value, setValue] = (0, useMergedState_1.default)(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_1.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_1.Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
-                return (React.createElement(Radio_1.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_1.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: (0, classnames_1.default)('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: (0, classnames_1.default)(rootCls, {
+                [`${rootCls}-rtl`]: direction === 'rtl',
+                [`${rootCls}-stack`]: stack,
+            }, className), id: id, style: style, ref: ref }, childrenToRender));
     };
-    return (React.createElement(Context_1.Context.Provider, { value: context }, renderGroup()));
+    return React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, { value: context }, renderGroup());
 });
-exports.Group.displayName = 'Radio.Group';
+exports.Group = React.memo(ForwardedGroup);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedGroup.displayName = 'Radio.Group.Forwarded';
+    exports.Group.displayName = 'Radio.Group';
+}

package/dist/cjs/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/cjs/components/Control/Radio/Radio.js

@@ -28,58 +28,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const React = __importStar(require("react"));
+const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
-const rc_checkbox_1 = __importDefault(require("rc-checkbox"));
-const ref_1 = require("rc-util/lib/ref");
-const Context_1 = require("./Context");
-exports.Radio = React.forwardRef((props, ref) => {
-    const { block, size, className, children, direction, skipGroup, style, type = 'radio', onMouseEnter, onMouseLeave, ...restProps } = props;
-    const radioGroup = (0, Context_1.useRadioGroup)();
-    const innerRef = React.useRef();
-    const mergedRef = (0, ref_1.composeRef)(ref, innerRef);
-    const [internalChecked, setInternalChecked] = React.useState(restProps.checked
-        ?? restProps.defaultChecked
-        ?? ('value' in restProps && restProps.value === radioGroup?.value));
-    const onChange = (event) => {
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+const RadioGroupContext_1 = require("../../Control/Radio/RadioGroupContext");
+const ForwardedRadio = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const radioGroup = (0, RadioGroupContext_1.useRadioGroup)();
+    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(() => (0, classnames_1.default)({
-        '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(rc_checkbox_1.default
-        // @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(() => (0, classnames_1.default)(rootCls, {
+        [`${rootCls}-checked`]: internalChecked,
+        [`${rootCls}-disabled`]: disabled,
+    }), [rootCls, internalChecked, disabled]);
+    const globalAttributes = React.useMemo(() => (0, js_utils_1.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: (0, classnames_1.default)(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)));
 });
-exports.Radio.displayName = 'Radio';
+exports.Radio = React.memo(ForwardedRadio);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedRadio.displayName = 'Radio.Forwarded';
+    exports.Radio.displayName = 'Radio';
+}

package/dist/cjs/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;