@broxus/react-uikit 0.13.7 → 0.14.0

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

@@ -1,6 +1,34 @@
 import * as React from 'react';
-import { type AbstractCheckboxProps } from '../../../components/Control/Checkbox/types';
-export interface CheckboxProps extends AbstractCheckboxProps {
+import { type SizeType } from '../../../components/Control';
+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;
+    name?: string;
+    prefixCls?: string;
+    required?: boolean;
+    rootClassName?: string;
+    size?: SizeType;
+    skipGroup?: boolean;
+    tabIndex?: number;
+    title?: string;
+    type?: string;
+    value?: any;
+    id?: string;
+    onChange?: (event: T) => void;
+}
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+    checked: boolean;
+}
+export interface CheckboxChangeEvent {
+    nativeEvent: MouseEvent;
+    preventDefault: VoidFunction;
+    stopPropagation: VoidFunction;
+    target: CheckboxChangeEventTarget;
+}
+export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
     indeterminate?: boolean;
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;

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

@@ -6,20 +6,27 @@ import { useCheckboxGroup } from '../../../components/Control/Checkbox/CheckboxG
 export const Checkbox = React.forwardRef((props, ref) => {
     const config = useConfig();
     const checkboxGroup = useCheckboxGroup();
-    const { block, children, className, direction = config.direction, disabled, id, prefixCls = config.prefixCls, size, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, children, className, direction = config.direction, disabled, id, prefixCls = config.prefixCls, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
     const prevValue = React.useRef(restProps.value);
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked || restProps.defaultChecked);
     const onChange = React.useCallback((event) => {
         setInternalChecked(!internalChecked);
-        restProps.onChange?.(event);
-    }, [internalChecked, restProps]);
+        onChangeCallback?.({
+            nativeEvent: event.nativeEvent,
+            preventDefault: event.preventDefault,
+            stopPropagation: event.stopPropagation,
+            target: { ...props, checked: !internalChecked },
+        });
+    }, [internalChecked, props, onChangeCallback]);
     const checkboxProps = React.useMemo(() => ({
         ...restProps,
         checked: internalChecked,
         disabled,
         id,
+        type,
+        // eslint-disable-next-line sort-keys
         onChange,
-    }), [disabled, id, internalChecked, onChange, restProps]);
+    }), [disabled, id, internalChecked, restProps, type, onChange]);
     if (checkboxGroup && !skipGroup) {
         checkboxProps.onChange = (...args) => {
             onChange(...args);
@@ -40,7 +47,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
         [`${controlCls}-${size}`]: block && size,
         [`${rootCls}-wrapper`]: true,
         [`${rootCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.prefixCls}-checked`]: internalChecked,
+        [`${prefixCls || config.prefixCls}-checked`]: checkboxProps.checked,
         [`${prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
     }, className), [
         controlCls,
@@ -50,15 +57,15 @@ export const Checkbox = React.forwardRef((props, ref) => {
         direction,
         prefixCls,
         config.prefixCls,
-        internalChecked,
+        checkboxProps.checked,
         checkboxProps.disabled,
         className,
     ]);
     const checkboxClasses = React.useMemo(() => classNames(rootCls, {
-        [`${rootCls}-checked`]: internalChecked,
+        [`${rootCls}-checked`]: checkboxProps.checked,
         [`${rootCls}-disabled`]: disabled,
         [`${rootCls}-indeterminate`]: checkboxProps.indeterminate,
-    }), [rootCls, internalChecked, disabled, checkboxProps.indeterminate]);
+    }), [rootCls, checkboxProps.checked, disabled, checkboxProps.indeterminate]);
     const globalAttributes = React.useMemo(() => retrieveGlobalAttributes(restProps), [restProps]);
     React.useEffect(() => {
         checkboxGroup?.registerValue(restProps.value);
@@ -76,9 +83,6 @@ export const Checkbox = React.forwardRef((props, ref) => {
         return () => checkboxGroup?.cancelValue(restProps.value);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [restProps.value, skipGroup]);
-    React.useEffect(() => {
-        setInternalChecked(restProps.checked || restProps.defaultChecked);
-    }, [restProps.checked, restProps.defaultChecked]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: classNames(checkboxClasses) },
             React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...checkboxProps, id: id, type: "checkbox", ...globalAttributes }),

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

@@ -1,26 +1,12 @@
 import * as React from 'react';
-import { type SizeType } from '../../../components/Control/types';
-export interface AbstractCheckboxGroupProps<T = any> {
-    block?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    direction?: string;
-    disabled?: boolean;
-    id?: string;
-    name?: string;
-    options?: T[];
-    prefixCls?: string;
-    size?: SizeType;
-    stack?: boolean;
-    style?: React.CSSProperties;
-}
-export interface CheckboxGroupConsumerProps<T = any> {
+import { type CheckboxOptionType } from '../../../components/Control/Checkbox/Group';
+export interface CheckboxGroupConsumer<T = any> {
+    cancelValue: (value: string) => void;
     disabled?: boolean;
     name?: string;
-    value?: any;
-    cancelValue: (value: string) => void;
     registerValue: (value: string) => void;
-    toggleOption?: (option: T) => void;
+    toggleOption?: (option: CheckboxOptionType<T>) => void;
+    value?: any;
 }
-export declare const CheckboxGroupContext: React.Context<CheckboxGroupConsumerProps<any> | null>;
-export declare function useCheckboxGroup<T = any>(): CheckboxGroupConsumerProps<T> | null;
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupConsumer<any> | null>;
+export declare function useCheckboxGroup<T = any>(): CheckboxGroupConsumer<T> | null;

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

@@ -1,15 +1,35 @@
 import * as React from 'react';
-import { type AbstractCheckboxGroupProps } from '../../../components/Control/Checkbox/CheckboxGroupContext';
-export interface CheckboxGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
-    defaultValue?: T[];
-    value?: T[];
-    onChange?: (values: T[]) => void;
-}
+import { type SizeType } from '../../../components/Control';
+import { type CheckboxChangeEvent } from '../../../components/Control/Checkbox/Checkbox';
 export interface CheckboxOptionType<T = any> {
-    disabled?: boolean;
     label: React.ReactNode;
     value: T;
     style?: React.CSSProperties;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    title?: string;
+    id?: string;
+    onChange?: (e: CheckboxChangeEvent) => void;
+    required?: boolean;
+}
+export interface AbstractCheckboxGroupProps<T = any> {
+    block?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    direction?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    options?: (CheckboxOptionType<T> | string | number)[];
+    prefixCls?: string;
+    size?: SizeType;
+    stack?: boolean;
+    style?: React.CSSProperties;
+}
+export interface CheckboxGroupProps<T = any> extends AbstractCheckboxGroupProps<T> {
+    defaultValue?: T[];
+    value?: T[];
+    onChange?: (values: T[]) => void;
 }
-export declare const Group: React.ForwardRefExoticComponent<CheckboxGroupProps<any> & React.RefAttributes<HTMLDivElement>>;
+type InternalCheckboxValueType = string | number | boolean;
+export declare const Group: React.ForwardRefExoticComponent<CheckboxGroupProps<InternalCheckboxValueType> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -2,28 +2,25 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { Checkbox } from '../../../components/Control/Checkbox/Checkbox';
-import { CheckboxGroupContext, } from '../../../components/Control/Checkbox/CheckboxGroupContext';
+import { CheckboxGroupContext } from '../../../components/Control/Checkbox/CheckboxGroupContext';
 export const Group = React.forwardRef((props, ref) => {
     const config = useConfig();
     const { block, children, className, defaultValue, direction = config.direction, options = [], prefixCls = config.prefixCls, size, stack, style, onChange, ...restProps } = props;
     const [value, setValue] = React.useState(restProps.value || defaultValue || []);
     const [registeredValues, setRegisteredValues] = React.useState([]);
-    const getOptions = React.useCallback(() => options?.map((option) => {
-        if (typeof option === 'string') {
-            return {
-                label: option,
-                value: option,
-            };
+    const memoOptions = React.useMemo(() => options.map((option) => {
+        if (typeof option === 'string' || typeof option === 'number') {
+            return { label: option, value: option };
         }
         return option;
     }), [options]);
-    const cancelValue = React.useCallback((val) => {
+    const cancelValue = val => {
         setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
-    }, []);
-    const registerValue = React.useCallback((val) => {
+    };
+    const registerValue = val => {
         setRegisteredValues(prevValues => [...prevValues, val]);
-    }, []);
-    const toggleOption = React.useCallback((option) => {
+    };
+    const toggleOption = option => {
         const optionIndex = value.indexOf(option.value);
         const newValue = [...value];
         if (optionIndex === -1) {
@@ -35,28 +32,28 @@ export const Group = React.forwardRef((props, ref) => {
         if (!('value' in restProps)) {
             setValue(newValue);
         }
-        const opts = getOptions();
         onChange?.(newValue
             .filter(val => registeredValues.indexOf(val) !== -1)
             .sort((a, b) => {
-            const indexA = opts.findIndex(opt => opt.value === a);
-            const indexB = opts.findIndex(opt => opt.value === b);
+            const indexA = memoOptions.findIndex(opt => opt.value === a);
+            const indexB = memoOptions.findIndex(opt => opt.value === b);
             return indexA - indexB;
         }));
-    }, [getOptions, onChange, registeredValues, restProps, value]);
+    };
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'checkbox-group'), [config, prefixCls]);
     const checkboxGroupClasses = React.useMemo(() => classNames(rootCls, {
         [`${rootCls}-rtl`]: direction === 'rtl',
         [`${rootCls}-stack`]: stack,
     }, className), [className, direction, rootCls, stack]);
-    const context = React.useMemo(() => ({
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const context = {
         cancelValue,
         disabled: restProps.disabled,
         name: restProps.name,
         registerValue,
         toggleOption,
         value,
-    }), [cancelValue, restProps.disabled, restProps.name, registerValue, toggleOption, value]);
+    };
     React.useEffect(() => {
         if ('value' in restProps) {
             setValue(restProps.value || []);
@@ -64,7 +61,7 @@ export const Group = React.forwardRef((props, ref) => {
     }, [restProps, restProps.value]);
     return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
         React.createElement(CheckboxGroupContext.Provider, { value: context }, options?.length > 0
-            ? getOptions().map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, value: option.value, className: `${rootCls}-item`, style: option.style, onChange: option.onChange }, option.label)))
+            ? memoOptions.map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, value: option.value, className: `${rootCls}-item`, style: option.style, onChange: option.onChange }, option.label)))
             : children)));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,10 +1,9 @@
 import type * as React from 'react';
-import { type CheckboxProps } from '../../../components/Control/Checkbox/Checkbox';
-import { type AbstractCheckboxGroupProps, type CheckboxGroupConsumerProps } from '../../../components/Control/Checkbox/CheckboxGroupContext';
-import { type CheckboxGroupProps, type CheckboxOptionType, Group } from '../../../components/Control/Checkbox/Group';
+import { type AbstractCheckboxProps, 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';
 import './index.scss';
-export type { AbstractCheckboxGroupProps, CheckboxGroupConsumerProps, CheckboxGroupProps, CheckboxOptionType, CheckboxProps, };
-export * from '../../../components/Control/Checkbox/types';
+export type { AbstractCheckboxProps, AbstractCheckboxGroupProps, CheckboxGroupConsumer, CheckboxGroupProps, CheckboxOptionType, CheckboxProps, };
 export interface Checkbox extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
     Group: typeof Group;
 }

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

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

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

@@ -31,8 +31,8 @@ export const Group = React.forwardRef((props, ref) => {
     const renderGroup = () => {
         let childrenToRender = children;
         if (options && options.length > 0) {
-            childrenToRender = options.map((option) => {
-                if (typeof option === 'string') {
+            childrenToRender = options.map(option => {
+                if (typeof option === 'string' || typeof option === 'number') {
                     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, className: `${rootCls}-item`, direction: direction, disabled: option.disabled || disabled, size: size, style: option.style, value: option.value }, option.label));

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

@@ -1,7 +1,16 @@
 import * as React from 'react';
 import { type AbstractCheckboxProps } from '../../../components/Control/Checkbox';
-export interface RadioProps extends AbstractCheckboxProps {
+export interface RadioProps extends AbstractCheckboxProps<RadioChangeEvent> {
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
 }
+export interface RadioChangeEventTarget extends RadioProps {
+    checked: boolean;
+}
+export interface RadioChangeEvent {
+    target: RadioChangeEventTarget;
+    stopPropagation: VoidFunction;
+    preventDefault: VoidFunction;
+    nativeEvent: MouseEvent;
+}
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -6,15 +6,20 @@ import { useRadioGroup } from '../../../components/Control/Radio/RadioGroupConte
 export const Radio = React.forwardRef((props, ref) => {
     const config = useConfig();
     const radioGroup = useRadioGroup();
-    const { block, size, className, children, direction = config.direction, disabled, id, prefixCls = config.prefixCls, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, size, className, children, direction = config.direction, disabled, id, prefixCls = config.prefixCls, skipGroup, style, onChange: onChangeCallback, 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);
+        onChangeCallback?.({
+            nativeEvent: event.nativeEvent,
+            preventDefault: event.preventDefault,
+            stopPropagation: event.stopPropagation,
+            target: { ...props, checked: !internalChecked },
+        });
         radioGroup?.onChange?.(event);
-    }, [radioGroup, restProps]);
+    }, [internalChecked, props, radioGroup, onChangeCallback]);
     const radioProps = React.useMemo(() => ({
         ...restProps,
         checked: internalChecked,

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-export interface RadioGroupConsumerProps<T = any> {
+export interface RadioGroupContextConsumer<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;
+export declare const RadioGroupContext: React.Context<RadioGroupContextConsumer<any> | null>;
+export declare function useRadioGroup(): RadioGroupContextConsumer | null;