@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/esm/components/Card/Media.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
-export interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+import { type PolymorphicProps } from '../../components/Component';
+export type CardMediaOwnProps = {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
-}
-export declare const Media: React.MemoExoticComponent<(props: CardMediaProps) => JSX.Element>;
+};
+export type CardMediaProps<E extends React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
+export declare const Media: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: CardMediaProps<E>) => React.JSX.Element)>;

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

@@ -1,15 +1,17 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
+import { Component } from '../../components/Component';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
+const defaultElement = 'div';
 export const Media = React.memo((props) => {
     const config = useConfig();
     const { getRootCls } = 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: classNames({
+    return (React.createElement(Component, { className: classNames({
             [`${rootCls}-${position}`]: position !== undefined,
-        }, className), ...restProps }));
+        }, className), component: defaultElement, ...restProps }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Media.displayName = 'Card.Media';

package/dist/esm/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/esm/components/Card/Title.js

@@ -1,15 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'h3';
 export const Title = React.memo((props) => {
     const config = useConfig();
     const { getRootCls } = useComponentContext();
     const { className, prefixCls = getRootCls(), ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
-    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'title'), [config, prefixCls]);
+    return React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps });
 });
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Card.Title';

package/dist/esm/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/esm/components/Close/index.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
+import './index.scss';
 const defaultElement = 'button';
 export const Close = React.memo((props) => {
     const config = useConfig();

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import { useContext } from '../../hooks';
 export const ComponentContext = React.createContext({
     getRootCls() {

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

@@ -1,13 +1,13 @@
-import * as React from 'react';
 import { error } from '@broxus/js-utils';
+import * as React from 'react';
 import { useContext } from '../../hooks';
 export const 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',
@@ -26,9 +26,9 @@ export const 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',
@@ -44,7 +44,7 @@ export function useConfig() {
     return useContext(ConfigContext);
 }
 export function ConfigContextProvider(props) {
-    const initialContext = useConfig();
+    const initialContext = React.useContext(ConfigContext);
     const { children, ...restProps } = props;
     const context = React.useMemo(() => {
         let direction = 'ltr';

package/dist/esm/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/esm/components/Container/index.js

@@ -1,17 +1,18 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 const defaultElement = 'div';
 export const Container = React.memo((props) => {
     const config = useConfig();
-    const { className, expandLeft, expandRight, prefixCls = config.prefixCls, size, ...restProps } = props;
+    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, { className: classNames(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/esm/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/esm/components/Control/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { retrieveGlobalAttributes } from '@broxus/js-utils';
 import classNames from 'classnames';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { useCheckboxGroup } from '../../../components/Control/Checkbox/CheckboxGroupContext';
 const ForwardedCheckbox = React.forwardRef((props, ref) => {
     const config = useConfig();

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { Checkbox } from '../../../components/Control/Checkbox/Checkbox';
 import { CheckboxGroupContext, } from '../../../components/Control/Checkbox/CheckboxGroupContext';
 const ForwardedGroup = React.forwardRef((props, ref) => {

package/dist/esm/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/esm/components/Control/Input/Input.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { useInput } from '../../../components/Control/Input/useInput';
 import { Icon } from '../../../components/Icon';
 const ForwardedInput = React.forwardRef((props, ref) => {
@@ -33,7 +33,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, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clearfix`, onClick: onClear })),
+        allowClear && restProps.value && (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear })),
         suffix && (React.createElement("span", { key: "suffix", className: `${controlCls}-suffix` }, suffix))));
 });
 export const Input = React.memo(ForwardedInput);

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import RcInputNumber from 'rc-input-number';
 import omit from 'rc-util/lib/omit';
-import { useConfig } from '../../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../../components/ConfigProvider';
 import { useInput } from '../../../../components/Control/Input/useInput';
 import { Icon } from '../../../../components/Icon';
 import './index.scss';

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { preventEvent } from '@broxus/js-utils';
-import { useConfig } from '../../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../../components/ConfigProvider';
 import { Input } from '../../../../components/Control/Input/Input';
 import { Icon } from '../../../../components/Icon';
 import './index.scss';

package/dist/esm/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/esm/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/esm/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/esm/components/Control/Input/useInput.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 export function fixControlledValue(value) {
     if (value == null) {
         return '';
@@ -10,7 +10,7 @@ export function fixControlledValue(value) {
 export function useInput(props) {
     const config = 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) => {
@@ -22,14 +22,15 @@ export 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/esm/components/Control/Radio/Group.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { Radio } from '../../../components/Control/Radio/Radio';
 import { RadioGroupContext } from '../../../components/Control/Radio/RadioGroupContext';
 const ForwardedGroup = React.forwardRef((props, ref) => {

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { retrieveGlobalAttributes } from '@broxus/js-utils';
 import classNames from 'classnames';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { useRadioGroup } from '../../../components/Control/Radio/RadioGroupContext';
 const ForwardedRadio = React.forwardRef((props, ref) => {
     const config = useConfig();

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import RcSelect, { OptGroup, Option } from 'rc-select';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { Icon } from '../../../components/Icon';
 import { Spinner } from '../../../components/Spinner';
 import './index.scss';

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import RcTextArea from 'rc-textarea';
 import omit from 'rc-util/lib/omit';
-import { useConfig } from '../../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../../components/ConfigProvider';
 import { fixControlledValue } from '../../../components/Control/Input';
 import './index.scss';
 function fixEmojiLength(value, maxLength) {
@@ -92,9 +92,9 @@ const ForwardedTextArea = React.forwardRef((props, ref) => {
         rootCls,
     ]);
     let value = 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/esm/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;
     }
 }
 

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

@@ -221,14 +221,14 @@
 .uk-control-input,
 .uk-control-prefix,
 .uk-control-suffix,
-.uk-control-clearfix {
+.uk-control-clear {
     align-items: center;
     display: inline-flex;
 }
 
 .uk-control-prefix,
 .uk-control-suffix,
-.uk-control-clearfix {
+.uk-control-clear {
     min-width: fit-content;
     user-select: none;
 }
@@ -245,13 +245,14 @@
     }
 }
 
-.uk-control-clearfix {
+.uk-control-clear {
     cursor: pointer;
+    font-size: 0.8rem;
     opacity: 0.8;
     transition: opacity var(--transition-medium-fast-duration);
 }
 
-.uk-control-clearfix:hover { opacity: 0.6 }
+.uk-control-clear:hover { opacity: 0.6 }
 
 
 /* Right to Left Direction
@@ -284,22 +285,6 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
 }
 
 
-// Effects
-// ========================================================================
-
-@keyframes uk-wave-effect {
-    0% {
-        opacity: 0.5;
-        transform: scale(1);
-    }
-
-    100% {
-        opacity: 0;
-        transform: scale(1.6);
-    }
-}
-
-
 // Vars
 // ========================================================================
 

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

@@ -1,13 +1,11 @@
 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 SizeType = 'small' | 'medium' | 'large';
+export type StateType = 'success' | 'warning' | '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;
     allowClear?: boolean;
     defaultValue?: T;
     direction?: Direction;

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

@@ -6,4 +6,4 @@ export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
     width?: number;
 }
-export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => JSX.Element>;
+export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => React.JSX.Element>;

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { debounce, Dimensions } from '@broxus/js-utils';
+import { Dimensions, debounce } from '@broxus/js-utils';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 export const Cover = React.memo((props) => {
     const config = useConfig();
@@ -37,10 +37,11 @@ export const Cover = React.memo((props) => {
     const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
+                ...child.props,
                 // @ts-ignore
                 ref: idx === 0 ? coveringElement : null,
                 // eslint-disable-next-line sort-keys
-                className: rootCls,
+                className: classNames(rootCls, child.props.className),
                 onLoadedMetadata: () => {
                     resize();
                 },

package/dist/esm/components/DescriptionList/Description.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const Description: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => JSX.Element>;
+export declare const Description: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => React.JSX.Element>;

package/dist/esm/components/DescriptionList/DescriptionList.d.ts

@@ -3,4 +3,4 @@ export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElem
     divided?: boolean;
     prefixCls?: string;
 }
-export declare const DescriptionList: React.MemoExoticComponent<(props: DescriptionListProps) => JSX.Element>;
+export declare const DescriptionList: React.MemoExoticComponent<(props: DescriptionListProps) => React.JSX.Element>;

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const DescriptionList = React.memo((props) => {
     const config = useConfig();
     const { className, divided, prefixCls = config.prefixCls, ...restProps } = props;

package/dist/esm/components/DescriptionList/Term.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const Term: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => JSX.Element>;
+export declare const Term: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => React.JSX.Element>;

package/dist/esm/components/Divider/index.d.ts

@@ -6,4 +6,4 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
     small?: boolean;
     vertical?: boolean;
 }
-export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => JSX.Element>;
+export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => React.JSX.Element>;

package/dist/esm/components/Divider/index.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 export const Divider = React.memo((props) => {
     const config = useConfig();

package/dist/esm/components/Dotnav/Dotnav.d.ts

@@ -3,4 +3,4 @@ export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare const Dotnav: React.MemoExoticComponent<(props: DotnavProps) => JSX.Element>;
+export declare const Dotnav: React.MemoExoticComponent<(props: DotnavProps) => React.JSX.Element>;