@broxus/react-uikit 0.1.3 → 0.2.0

package/dist/cjs/components/Control/Radio/{Context.js → RadioGroupContext.js}

@@ -23,10 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRadioGroup = exports.Context = void 0;
+exports.useRadioGroup = exports.RadioGroupContext = void 0;
 const React = __importStar(require("react"));
-exports.Context = React.createContext(null);
+exports.RadioGroupContext = React.createContext(null);
 function useRadioGroup() {
-    return React.useContext(exports.Context);
+    return React.useContext(exports.RadioGroupContext);
 }
 exports.useRadioGroup = useRadioGroup;
+if (process.env.NODE_ENV !== 'production') {
+    exports.RadioGroupContext.displayName = 'RadioGroupContext';
+}

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

@@ -1,23 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-const Group_1 = require("./Group");
-const Radio_1 = require("./Radio");
+const Group_1 = require("../../Control/Radio/Group");
+const Radio_1 = require("../../Control/Radio/Radio");
 require("./index.scss");
-__exportStar(require("./types"), exports);
 exports.Radio = Radio_1.Radio;
 exports.Radio.Group = Group_1.Group;

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

@@ -30,38 +30,30 @@ 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("../../ConfrigProvider");
 const Icon_1 = require("../../Icon");
 const Spinner_1 = require("../../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 { className, listHeight = 256, listItemHeight = 24, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
-    const innerRef = React.useRef(null);
+    const config = (0, ConfrigProvider_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);
     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);
@@ -70,17 +62,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) {
@@ -90,9 +82,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') {
@@ -102,34 +94,38 @@ function InternalSelect(props, ref) {
             return 'combobox';
         }
         return m;
-    }, [restProps.mode]);
-    const wrapperClasses = React.useMemo(() => (0, classnames_1.default)([
-        '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(() => (0, classnames_1.default)([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_1.Spinner, { key: "spinner", ratio: 0.9 }));
+            inputIcon = React.createElement(Spinner_1.Spinner, { key: "spinner", ratio: 0.9 });
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                inputIcon = (React.createElement(Icon_1.Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon }));
+                inputIcon = React.createElement(Icon_1.Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
             }
             else if (showSearch && internalOpen) {
-                inputIcon = (React.createElement(Icon_1.Icon, { key: "manage_search", icon: "manage_search" }));
+                inputIcon = React.createElement(Icon_1.Icon, { key: "manage_search", icon: "manage_search" });
             }
             else {
-                inputIcon = internalOpen
-                    ? (React.createElement(Icon_1.Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon_1.Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+                inputIcon = internalOpen ? (React.createElement(Icon_1.Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon_1.Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
             }
         }
         // Not found content
@@ -151,14 +147,14 @@ function InternalSelect(props, ref) {
             listItemHeight,
             menuItemSelectedIcon: React.createElement(Icon_1.Icon, { icon: "check" }),
             open: internalOpen,
-            prefixCls,
+            prefixCls: rootCls,
             removeIcon: React.createElement(Icon_1.Icon, { icon: "clear" }),
             showArrow,
             showSearch,
-            transitionName: 'uk-motion-slide-up',
+            transitionName: `${prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
             dropdownClassName: (0, classnames_1.default)(restProps.dropdownClassName, {
-                [`${prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
+                [`${prefixCls || config.prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
             }),
             notFoundContent: mergedNotFound,
             onBlur,
@@ -166,14 +162,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(rc_select_1.default, { ref: innerRef, ...inputProps, dropdownAlign: {
+        React.createElement(rc_select_1.default, { ref: inputRef, ...inputProps, dropdownAlign: {
                 offset: [offsetY, 5],
             }, mode: mode })));
 }
 const ForwardedSelect = React.forwardRef(InternalSelect);
-exports.Select = ForwardedSelect;
+exports.Select = React.memo(ForwardedSelect);
 exports.Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
 exports.Select.Option = rc_select_1.Option;
 exports.Select.OptGroup = rc_select_1.OptGroup;

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
-import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
-import type { InputFocusOptions } from '../Input';
-import type { SizeType, StateType } from '../types';
+import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from 'rc-textarea';
+import { type SizeType, type StateType } from '../../Control/types';
 import './index.scss';
 interface ShowCountProps {
     formatter: (args: {
@@ -16,10 +14,5 @@ export interface TextAreaProps extends RcTextAreaProps {
     size?: SizeType;
     state?: StateType;
 }
-export interface TextAreaRef {
-    focus: (options?: InputFocusOptions) => void;
-    blur: () => void;
-    resizableTextArea?: ResizableTextArea;
-}
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>>;
 export {};

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

@@ -31,48 +31,39 @@ 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 Input_1 = require("../Input");
+const ConfrigProvider_1 = require("../../ConfrigProvider");
+const Input_1 = require("../../Control/Input");
 require("./index.scss");
 function fixEmojiLength(value, maxLength) {
     return [...(value || '')].slice(0, maxLength).join('');
 }
-exports.TextArea = React.forwardRef((props, ref) => {
-    const { dir, disabled, maxLength, readOnly, state, className, showCount, onPressEnter, ...restProps } = props;
-    const inputRef = React.useRef(null);
+/* eslint-disable jsx-a11y/label-has-associated-control */
+const ForwardedTextArea = React.forwardRef((props, ref) => {
+    const config = (0, ConfrigProvider_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);
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(restProps.value ?? restProps.defaultValue);
-    React.useImperativeHandle(ref, () => ({
-        blur() {
-            inputRef.current?.blur();
-        },
-        focus() {
-            inputRef.current?.focus();
-        },
-        getInputRef() {
-            return inputRef;
-        },
-    }));
-    const setValue = (value, callback) => {
+    const setValue = React.useCallback((value, callback) => {
         if (restProps.value === undefined) {
             setInternalValue(value);
             callback?.();
         }
-    };
-    const onChange = event => {
+    }, [restProps.value]);
+    const onChange = React.useCallback(event => {
         let { value } = event.target;
         if (!compositing && hasMaxLength) {
             value = fixEmojiLength(value, maxLength ?? 0);
         }
         setValue(value);
         restProps.onChange?.(event);
-    };
-    const onCompositionStart = event => {
+    }, [compositing, hasMaxLength, maxLength, restProps, setValue]);
+    const onCompositionStart = React.useCallback(event => {
         setCompositing(true);
         restProps.onCompositionStart?.(event);
-    };
-    const onCompositionEnd = event => {
+    }, [restProps]);
+    const onCompositionEnd = React.useCallback(event => {
         setCompositing(false);
         let { value } = event.currentTarget;
         if (hasMaxLength) {
@@ -84,35 +75,34 @@ exports.TextArea = React.forwardRef((props, ref) => {
             onChange(event);
         }
         restProps.onCompositionEnd?.(event);
-    };
-    const onBlur = event => {
+    }, [hasMaxLength, internalValue, maxLength, onChange, restProps, setValue]);
+    const onBlur = React.useCallback(event => {
         setFocused(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 (onPressEnter && event.keyCode === 13) {
             onPressEnter(event);
         }
         restProps.onKeyDown?.(event);
-    };
-    const wrapperClasses = React.useMemo(() => (0, classnames_1.default)([
-        'uk-control',
-        'uk-control-textarea',
-    ], {
-        [`uk-control-${state}`]: state,
-        'uk-control-rtl': dir === 'rtl',
-        'uk-control-textarea-show-count': showCount !== undefined,
-        'uk-disabled': disabled,
-        'uk-focused': focused,
-        'uk-readonly': readOnly,
-    }, className), [className, dir, disabled, focused, readOnly, state]);
+    }, [onPressEnter, restProps]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'textarea'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const wrapperClasses = React.useMemo(() => (0, classnames_1.default)([controlCls, `${controlCls}-textarea`], {
+        [`${controlCls}-${state}`]: state,
+        [`${controlCls}-rtl`]: dir === 'rtl',
+        [`${controlCls}-textarea-show-count`]: showCount !== undefined,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: readOnly,
+    }, className), [className, controlCls, dir, disabled, focused, prefixCls, readOnly, showCount, state]);
     const inputProps = React.useMemo(() => ({
         ...(0, omit_1.default)(restProps, ['allowClear', 'size']),
-        prefixCls: 'uk-textarea',
+        prefixCls: rootCls,
         // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
@@ -120,11 +110,20 @@ exports.TextArea = React.forwardRef((props, ref) => {
         onCompositionStart,
         onFocus,
         onKeyDown,
-    }), []);
+    }), [
+        onBlur,
+        onChange,
+        onCompositionEnd,
+        onCompositionStart,
+        onFocus,
+        onKeyDown,
+        restProps,
+        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;
@@ -139,6 +138,11 @@ exports.TextArea = React.forwardRef((props, ref) => {
     }
     const dataCountAttribute = dataCount ? { 'data-count': dataCount } : {};
     return (React.createElement("label", { className: wrapperClasses, htmlFor: inputProps.id, ...dataCountAttribute },
-        React.createElement("span", { className: "uk-control-input" },
-            React.createElement(rc_textarea_1.default, { ...inputProps, value: value, ref: inputRef }))));
+        React.createElement("span", { className: `${controlCls}-input` },
+            React.createElement(rc_textarea_1.default, { ...inputProps, value: value, ref: ref }))));
 });
+exports.TextArea = React.memo(ForwardedTextArea);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedTextArea.displayName = 'TextArea.Forwarded';
+    exports.TextArea.displayName = 'TextArea';
+}

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

@@ -23,7 +23,7 @@
    Component: Textarea
  ========================================================================== */
 
-.uk-control-textarea {
+.uk-control.uk-control-textarea {
     height: auto;
     max-width: 100%;
     padding: 0;

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

@@ -1,7 +1,7 @@
 import './index.scss';
-export * from './Checkbox';
-export * from './Input';
-export * from './Radio';
-export * from './Select';
-export * from './TextArea';
-export * from './types';
+export * from '../Control/Checkbox';
+export * from '../Control/Input';
+export * from '../Control/Radio';
+export * from '../Control/Select';
+export * from '../Control/TextArea';
+export * from '../Control/types';

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

@@ -15,9 +15,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./index.scss");
-__exportStar(require("./Checkbox"), exports);
-__exportStar(require("./Input"), exports);
-__exportStar(require("./Radio"), exports);
-__exportStar(require("./Select"), exports);
-__exportStar(require("./TextArea"), exports);
-__exportStar(require("./types"), exports);
+__exportStar(require("../Control/Checkbox"), exports);
+__exportStar(require("../Control/Input"), exports);
+__exportStar(require("../Control/Radio"), exports);
+__exportStar(require("../Control/Select"), exports);
+__exportStar(require("../Control/TextArea"), exports);
+__exportStar(require("../Control/types"), exports);

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import type { Direction } from '../../types';
-export declare type LiteralUnion<T extends U, U> = T | (U & {});
-export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
-export declare type StateType = 'success' | 'danger' | 'blank';
-export declare type ValueType = string | number;
-export declare type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+import type * as React from 'react';
+import { type Direction } from '../../types';
+export type LiteralUnion<T extends U, U> = T | (U & {});
+export type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
+export type StateType = 'success' | 'danger' | 'blank';
+export type ValueType = string | number;
+export type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
 export interface ControlProps<T> {
     addonAfter?: React.ReactNode;
     addonBefore?: React.ReactNode;
@@ -12,6 +12,7 @@ export interface ControlProps<T> {
     defaultValue?: T;
     direction?: Direction;
     prefix?: React.ReactNode;
+    prefixCls?: string;
     size?: SizeType;
     state?: StateType;
     suffix?: React.ReactNode;

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

@@ -3,6 +3,7 @@ import './index.scss';
 export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
     automute?: boolean;
     height?: number;
+    prefixCls?: string;
     width?: number;
 }
-export declare function Cover(props: CoverProps): JSX.Element;
+export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => JSX.Element>;

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

@@ -30,26 +30,28 @@ exports.Cover = 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("../ConfrigProvider");
 require("./index.scss");
-function Cover(props) {
-    const { automute = true, className, children, height, width, ...restProps } = props;
+exports.Cover = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
-    const resize = () => {
+    const resize = React.useCallback(() => {
         if (coveringElement.current == null || container.current == null) {
             return;
         }
         const { current: el } = coveringElement;
         const { current: wrapper } = container;
         const { height: h, width: w } = js_utils_1.Dimensions.cover({
-            height: height
-                || el.naturalHeight
-                || el.videoHeight
-                || el.clientHeight,
-            width: width
-                || el.naturalWidth
-                || el.videoWidth
-                || el.clientWidth,
+            height: height ||
+                el.naturalHeight ||
+                el.videoHeight ||
+                el.clientHeight,
+            width: width ||
+                el.naturalWidth ||
+                el.videoWidth ||
+                el.clientWidth,
         }, {
             height: wrapper.offsetHeight + (wrapper.offsetHeight % 2 ? 1 : 0),
             width: wrapper.offsetWidth + (wrapper.offsetWidth % 2 ? 1 : 0),
@@ -59,13 +61,15 @@ function Cover(props) {
         }
         el.style.height = `${h}px`;
         el.style.width = `${w}px`;
-    };
+    }, [height, width]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'cover'), [config, prefixCls]);
     const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
+                // @ts-ignore
                 ref: idx === 0 ? coveringElement : null,
                 // eslint-disable-next-line sort-keys
-                className: 'uk-cover',
+                className: rootCls,
                 onLoadedMetadata: () => {
                     resize();
                 },
@@ -73,7 +77,8 @@ function Cover(props) {
                 onLoad: () => {
                     if (automute) {
                         try {
-                            coveringElement.current?.contentWindow?.postMessage('{"event": "command","method":"setVolume", "value":0}', '*');
+                            ;
+                            coveringElement.current?.contentWindow?.postMessage('{"event": "command", "method": "setVolume", "value": 0}', '*');
                         }
                         catch (e) { }
                     }
@@ -91,7 +96,9 @@ function Cover(props) {
             window.removeEventListener('resize', debounced);
             window.removeEventListener('orientationchange', debounced);
         };
-    }, []);
-    return (React.createElement("div", { ref: container, className: (0, classnames_1.default)('uk-cover-container', className), ...restProps }, childrenWithCoverClass));
+    }, [resize]);
+    return (React.createElement("div", { ref: container, className: (0, classnames_1.default)(`${rootCls}-container`, className), ...restProps }, childrenWithCoverClass));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Cover.displayName = 'Cover';
 }
-exports.Cover = Cover;