@broxus/react-uikit 0.3.1 → 0.4.1

package/dist/cjs/components/Card/Media.js

@@ -27,18 +27,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Media = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const Component_1 = require("../../components/Component");
 const ComponentProvider_1 = require("../../components/ComponentProvider");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
+const defaultElement = 'div';
 exports.Media = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
     const { className, position, prefixCls = getRootCls(), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'media'), [config, prefixCls]);
-    return (React.createElement("div", { className: (0, classnames_1.default)({
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)({
             [`${rootCls}-${position}`]: position !== undefined,
-        }, className), ...restProps }));
+        }, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Media.displayName = 'Card.Media';

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

@@ -4,4 +4,4 @@ export type CardTitleOwnProps = {
     prefixCls?: string;
 };
 export type CardTitleProps<E extends React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
-export declare const Title: React.MemoExoticComponent<(<E extends React.ElementType<any> = "h3">(props: CardTitleProps<E>) => JSX.Element)>;
+export declare const Title: React.MemoExoticComponent<(<E extends React.ElementType<any> = "h3">(props: CardTitleProps<E>) => React.JSX.Element)>;

package/dist/cjs/components/Card/Title.js

@@ -27,18 +27,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ComponentProvider_1 = require("../../components/ComponentProvider");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'h3';
 exports.Title = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = (0, ComponentProvider_1.useComponentContext)();
     const { className, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
-    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps }));
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'title'), [config, prefixCls]);
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Title.displayName = 'Card.Title';

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
 import { type IconProps } from '../../components/Icon';
+import './index.scss';
 export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
-export declare const Close: React.MemoExoticComponent<(<E extends React.ElementType<any> = "button">(props: CloseProps<E>) => JSX.Element)>;
+export declare const Close: React.MemoExoticComponent<(<E extends React.ElementType<any> = "button">(props: CloseProps<E>) => React.JSX.Element)>;

package/dist/cjs/components/Close/index.js

@@ -27,13 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Close = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Icon_1 = require("../../components/Icon");
+require("./index.scss");
 const defaultElement = 'button';
 exports.Close = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'close'), [config, prefixCls]);
     return (React.createElement(Icon_1.Icon, { "aria-hidden": "false", className: (0, classnames_1.default)(rootCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));

package/dist/cjs/components/ComponentProvider/index.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentProvider = exports.useComponentContext = exports.ComponentContext = void 0;
 const React = __importStar(require("react"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const hooks_1 = require("../../hooks");
 exports.ComponentContext = React.createContext({
     getRootCls() {
@@ -37,7 +37,7 @@ function useComponentContext() {
 }
 exports.useComponentContext = useComponentContext;
 function ComponentProvider(props) {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { children, component, prefixCls = config.prefixCls } = props;
     const context = React.useMemo(() => ({
         getRootCls() {

package/dist/cjs/components/{ConfrigProvider → ConfigProvider}/index.d.ts

@@ -9,8 +9,8 @@ export type ConfigContextConsumerProps = {
     direction?: string;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
-    getTooltipConfig: (props: string | TooltipOptions) => {
-        'data-uk-tooltip': string;
+    getTooltipConfig: (props: string | TooltipOptions | undefined) => {
+        'data-uk-tooltip'?: string;
     };
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
@@ -24,4 +24,4 @@ export type ConfigContextConsumerProps = {
 export type ConfigContextProviderProps = React.PropsWithChildren<ConfigContextConsumerProps>;
 export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
 export declare function useConfig(): ConfigContextConsumerProps;
-export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): JSX.Element;
+export declare const ConfigContextProvider: React.MemoExoticComponent<(props: Partial<ConfigContextProviderProps>) => React.JSX.Element>;

package/dist/cjs/components/{ConfrigProvider → ConfigProvider}/index.js

@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfigContextProvider = exports.useConfig = exports.ConfigContext = void 0;
-const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
-const hooks_1 = require("../../hooks");
+const React = __importStar(require("react"));
 exports.ConfigContext = React.createContext({
     breakpoints: {
-        l: 960,
-        m: 768,
-        s: 480,
-        xl: 1200,
-        xs: 320,
+        l: 1200,
+        m: 960,
+        s: 640,
+        xl: 1600,
+        xs: 480,
     },
     // cardPrimaryColorMode: 'light',
     // cardSecondaryColorMode: 'light',
@@ -42,6 +41,9 @@ exports.ConfigContext = React.createContext({
         return `${prefix ? `${prefix}-` : `${this.prefixCls}-`}${module ?? ''}`;
     },
     getTooltipConfig(props) {
+        if (props == null) {
+            return {};
+        }
         if (typeof props === 'string') {
             return { 'data-uk-tooltip': `title: ${props}` };
         }
@@ -52,9 +54,9 @@ exports.ConfigContext = React.createContext({
                 props.cls ? `cls: ${props.cls}` : false,
                 props.delay !== undefined ? `delay: ${props.delay}` : false,
                 props.duration !== undefined ? `duration: ${props.duration}` : false,
-            ]
-                .filter(Boolean)
-                .join(';'),
+                props.offset ? `offset: ${props.offset}` : false,
+                props.pos ? `pos: ${props.pos}` : false,
+            ].filter(Boolean).join(';'),
         };
     },
     // inverseGlobalColorMode: 'light',
@@ -67,10 +69,10 @@ exports.ConfigContext = React.createContext({
     // tileTertiaryColorMode: 'light',
 });
 function useConfig() {
-    return (0, hooks_1.useContext)(exports.ConfigContext);
+    return React.useContext(exports.ConfigContext);
 }
 exports.useConfig = useConfig;
-function ConfigContextProvider(props) {
+exports.ConfigContextProvider = React.memo((props) => {
     const initialContext = useConfig();
     const { children, ...restProps } = props;
     const context = React.useMemo(() => {
@@ -84,8 +86,7 @@ function ConfigContextProvider(props) {
         return { ...initialContext, direction, ...restProps };
     }, [initialContext, restProps]);
     return React.createElement(exports.ConfigContext.Provider, { value: context }, children);
-}
-exports.ConfigContextProvider = ConfigContextProvider;
+});
 if (process.env.NODE_ENV !== 'production') {
     exports.ConfigContext.displayName = 'ConfigContext';
 }

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

@@ -5,7 +5,8 @@ export interface ContainerOwnProps {
     expandLeft?: boolean;
     expandRight?: boolean;
     prefixCls?: string;
+    preserve?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
 }
 export type ContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ContainerOwnProps>;
-export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ContainerProps<E>) => JSX.Element)>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ContainerProps<E>) => React.JSX.Element)>;

package/dist/cjs/components/Container/index.js

@@ -27,20 +27,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 require("./index.scss");
 const defaultElement = 'div';
 exports.Container = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
-    const { className, expandLeft, expandRight, prefixCls = config.prefixCls, size, ...restProps } = props;
+    const config = (0, ConfigProvider_1.useConfig)();
+    const { className, expandLeft, expandRight, prefixCls = config.prefixCls, preserve, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'container'), [config, prefixCls]);
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-expand-left`]: expandLeft,
             [`${rootCls}-expand-right`]: expandRight,
+            [`${prefixCls || config.prefixCls}-preserve`]: preserve,
         }, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/components/Container/index.scss

@@ -70,7 +70,7 @@
  * Remove padding from nested containers
  */
 
-.uk-container .uk-container {
+.uk-container .uk-container:not(.uk-preserve) {
     padding-left: 0;
     padding-right: 0;
 }

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const CheckboxGroupContext_1 = require("../../../components/Control/Checkbox/CheckboxGroupContext");
 const ForwardedCheckbox = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const checkboxGroup = (0, CheckboxGroupContext_1.useCheckboxGroup)();
     const { block, children, className, direction = config.direction, disabled, id, prefixCls = config.prefixCls, size, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
     const prevValue = React.useRef(restProps.value);

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Checkbox_1 = require("../../../components/Control/Checkbox/Checkbox");
 const CheckboxGroupContext_1 = require("../../../components/Control/Checkbox/CheckboxGroupContext");
 const ForwardedGroup = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.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([]);

package/dist/cjs/components/Control/Checkbox/index.scss

@@ -113,6 +113,10 @@
     }
 }
 
+
+/* States
+ ========================================================================== */
+
 // Hover state
 .uk-checkbox-wrapper:not(.uk-checked):hover {
     @if mixin-exists(hook-checkbox-hover) {

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

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const omit_1 = __importDefault(require("rc-util/lib/omit"));
-const ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const useInput_1 = require("../../../components/Control/Input/useInput");
 const Icon_1 = require("../../../components/Icon");
 const ForwardedInput = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { allowClear, inputRef, prefix, prefixCls = config.prefixCls, suffix, wrapperClasses, onClear, ...restProps } = (0, useInput_1.useInput)({
         type: 'text',
         ...props,
@@ -62,7 +62,7 @@ const ForwardedInput = React.forwardRef((props, ref) => {
         prefix && (React.createElement("span", { key: "prefix", className: `${controlCls}-prefix` }, prefix)),
         React.createElement("span", { key: "input", className: `${controlCls}-input` },
             React.createElement("input", { ref: inputRef, ...inputProps, type: restProps.type })),
-        allowClear && restProps.value && (React.createElement(Icon_1.Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clearfix`, onClick: onClear })),
+        allowClear && restProps.value && (React.createElement(Icon_1.Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear })),
         suffix && (React.createElement("span", { key: "suffix", className: `${controlCls}-suffix` }, suffix))));
 });
 exports.Input = React.memo(ForwardedInput);

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

@@ -27,16 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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("../../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../../components/ConfigProvider");
 const useInput_1 = require("../../../../components/Control/Input/useInput");
 const Icon_1 = require("../../../../components/Icon");
 require("./index.scss");
 /* eslint-disable jsx-a11y/label-has-associated-control */
 const ForwardedInputNumber = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { inputRef, prefixCls = config.prefixCls, wrapperClasses, ...restProps } = (0, useInput_1.useInput)({ ...props, type: 'number' });
     React.useImperativeHandle(ref, () => ({
         blur() {

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

@@ -24,14 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 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("../../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../../components/ConfigProvider");
 const Input_1 = require("../../../../components/Control/Input/Input");
 const Icon_1 = require("../../../../components/Icon");
 require("./index.scss");
 const ForwardedPassword = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);

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

@@ -10,23 +10,26 @@
    Component: Password
  ========================================================================== */
 
-/*
- * Icon
- */
+.uk-control-password,
+.uk-control-text {
+    /*
+     * Icon
+     */
 
-.uk-control-password-icon {
-    color: var(--control-icon-color);
-    cursor: pointer;
-    font-size: 1.3rem;
-    transition: all var(--transition-duration);
-}
+    .uk-control-password-icon {
+        color: var(--control-icon-color);
+        cursor: pointer;
+        font-size: 0.8rem;
+        transition: all var(--transition-duration);
+    }
 
-// Hover state
-.uk-control-password-icon:hover {
-    color: var(--control-icon-hover-color);
-}
+    // Hover state
+    .uk-control-password-icon:hover {
+        color: var(--control-icon-hover-color);
+    }
 
-// Disabled state
-.uk-control-password.uk-disabled .uk-control-password-icon {
-    display: none;
+    // Disabled state
+    .uk-control-password.uk-disabled .uk-control-password-icon {
+        display: none;
+    }
 }

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

@@ -1,5 +1,5 @@
-import type * as React from 'react';
 import { type InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import type * as React from 'react';
 import { type ControlProps, type ValueType } from '../../../components/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 type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
+export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'defaultChecked' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type ValueType } from '../../../components/Control/types';
 import { type InputNumberProps, type InputProps } from '../../../components/Control/Input/types';
+import { type ValueType } from '../../../components/Control/types';
 interface HookConsumedProps {
     inputRef: React.RefObject<HTMLInputElement>;
     prefixCls?: string;

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

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 function fixControlledValue(value) {
     if (value == null) {
         return '';
@@ -38,9 +38,9 @@ function fixControlledValue(value) {
 }
 exports.fixControlledValue = fixControlledValue;
 function useInput(props) {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const inputRef = React.useRef(null);
-    const { className, direction, prefixCls = config.prefixCls, size, state, useInternalValueState = true, onPressEnter, ...restProps } = props;
+    const { className, direction, prefixCls = config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -52,14 +52,15 @@ function useInput(props) {
                 setInternalValue(event.target.value);
             }
         }
-        restProps.onChange?.(event);
-    }, [restProps, useInternalValueState]);
+        onChangeCallback?.(event);
+    }, [onChangeCallback, useInternalValueState]);
     const onClear = React.useCallback(event => {
         if (inputRef.current) {
             inputRef.current.value = '';
         }
+        onClearCallback?.(event);
         onChange(event);
-    }, [onChange]);
+    }, [onChange, onClearCallback]);
     const onBlur = React.useCallback(event => {
         setFocused(false);
         restProps.onBlur?.(event);

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

@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Radio_1 = require("../../../components/Control/Radio/Radio");
 const RadioGroupContext_1 = require("../../../components/Control/Radio/RadioGroupContext");
 const ForwardedGroup = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_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,

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

@@ -27,13 +27,13 @@ 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 ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const RadioGroupContext_1 = require("../../../components/Control/Radio/RadioGroupContext");
 const ForwardedRadio = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_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

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 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 * as React from 'react';
 import { type ControlProps, type SizeType } from '../../../components/Control/types';
 import './index.scss';
 export type { BaseSelectRef, OptionProps };

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

@@ -27,17 +27,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_select_1 = __importStar(require("rc-select"));
-const ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Icon_1 = require("../../../components/Icon");
 const Spinner_1 = require("../../../components/Spinner");
 require("./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 config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.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);

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from 'rc-textarea';
+import * as React from 'react';
 import { type SizeType, type StateType } from '../../../components/Control/types';
 import './index.scss';
 interface ShowCountProps {

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

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const rc_textarea_1 = __importDefault(require("rc-textarea"));
 const omit_1 = __importDefault(require("rc-util/lib/omit"));
-const ConfrigProvider_1 = require("../../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Input_1 = require("../../../components/Control/Input");
 require("./index.scss");
 function fixEmojiLength(value, maxLength) {
@@ -39,7 +39,7 @@ function fixEmojiLength(value, maxLength) {
 }
 /* eslint-disable jsx-a11y/label-has-associated-control */
 const ForwardedTextArea = React.forwardRef((props, ref) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, dir, disabled, maxLength, prefixCls = config.prefixCls, readOnly, showCount, state, onPressEnter, ...restProps } = props;
     const hasMaxLength = Number(maxLength) > 0;
     const [compositing, setCompositing] = React.useState(false);
@@ -121,9 +121,9 @@ const ForwardedTextArea = React.forwardRef((props, ref) => {
         rootCls,
     ]);
     let value = (0, Input_1.fixControlledValue)(internalValue);
-    if (!compositing &&
-        hasMaxLength &&
-        (restProps.value === null || restProps.value === undefined)) {
+    if (!compositing
+        && hasMaxLength
+        && (restProps.value === null || restProps.value === undefined)) {
         value = fixEmojiLength(value, maxLength ?? 0);
     }
     let dataCount;

package/dist/cjs/components/Control/TextArea/index.scss

@@ -27,8 +27,8 @@
     height: auto;
     max-width: 100%;
     padding: 0;
-    @if mixin-exists(hook-control-textarea) {
-        @include hook-control-textarea;
+    @if mixin-exists(hook-textarea-control) {
+        @include hook-textarea-control;
     }
 }
 
@@ -44,8 +44,8 @@
     position: absolute;
     right: 5px;
     white-space: nowrap;
-    @if mixin-exists(hook-control-textarea-counter) {
-        @include hook-control-textarea-counter;
+    @if mixin-exists(hook-textarea-counter) {
+        @include hook-textarea-counter;
     }
 }
 
@@ -65,8 +65,8 @@
     padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
     resize: none;
     vertical-align: bottom;
-    @if mixin-exists(hook-control-textarea-input) {
-        @include hook-control-textarea-input;
+    @if mixin-exists(hook-textarea) {
+        @include hook-textarea;
     }
 }