@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -1,15 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import Trigger from 'rc-trigger';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import Placements from '../../components/Drop/placements';
-import { getMotionName } from '../../utils';
+import { getMotionName, mergeDropMaskMotion } from '../../utils';
 import './index.scss';
 export const Drop = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { align, alignPoint, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = config.prefixCls, placement = 'bottom-left', placements = Placements, rootCls: externalRootCls, showAction, trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const { action = ['hover'], align, alignPoint, arrow = false, children, defaultVisible, destroyOnHide, getPopupContainer, hideAction, maskMotion, motion, minOverlayWidthMatchTrigger, openClassName, overlay, overlayClassName, overlayStyle, prefixCls = config.prefixCls, placement = 'bottom-left', placements = Placements, rootCls: externalRootCls, showAction, visible, onAlign, onOverlayClick, onVisibleChange, ...restProps } = props;
     const triggerRef = React.useRef(null);
-    const [triggerVisible, setTriggerVisible] = React.useState();
+    const [triggerVisible, setTriggerVisible] = React.useState(defaultVisible);
     const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
     const rootCls = React.useMemo(() => externalRootCls ?? config.getRootPrefixCls(prefixCls || config.prefixCls, 'drop'), [config, prefixCls, externalRootCls]);
     const onPopupVisibleChange = React.useCallback((value) => {
@@ -23,10 +23,10 @@ export const Drop = React.forwardRef((props, ref) => {
         return overlay;
     }, [overlay]);
     const getDropElement = React.useCallback(() => (React.createElement(React.Fragment, null,
-        arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
+        arrow && React.createElement("div", { className: `${rootCls}-arrow` }),
         React.cloneElement(getOverlayElement(), {
             onClick: onOverlayClick,
-        }))), [arrow, getOverlayElement, onOverlayClick, prefixCls]);
+        }))), [arrow, getOverlayElement, onOverlayClick, rootCls]);
     const getDropElementOrLambda = React.useCallback(() => {
         if (typeof overlay === 'function') {
             return getDropElement();
@@ -55,20 +55,20 @@ export const Drop = React.forwardRef((props, ref) => {
         open() {
             setTriggerVisible(true);
         },
-        // @ts-ignore
         triggerRef: triggerRef.current,
     }));
     let triggerHideAction = hideAction;
-    if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
+    if (!triggerHideAction && action.indexOf('contextMenu') > -1) {
         triggerHideAction = ['click'];
     }
-    return (React.createElement(Trigger, { ref: triggerRef, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: classNames(overlayClassName, {
+    return (React.createElement(Trigger, { ref: triggerRef, action: action, builtinPlacements: placements, className: "test", destroyPopupOnHide: destroyOnHide, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], maskMotion: mergeDropMaskMotion(prefixCls || config.prefixCls, maskMotion), mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: classNames(overlayClassName, {
             [`${rootCls}-show-arrow`]: arrow,
-        }), popupMotion: {
+            [openClassName ?? '']: mergedVisible,
+        }), popupMotion: motion ?? {
             forceRender: true,
             motionDeadline: 300,
             motionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
-        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onPopupAlign: onAlign, onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
 });
 if (process.env.NODE_ENV !== 'production') {
     Drop.displayName = 'Drop';

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

@@ -44,6 +44,28 @@
 .uk-drop-hidden { display: none; }
 
 
+/* Drop mask
+ ========================================================================== */
+
+.uk-drop-mask {
+    background-color: var(--drop-mask-background);
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    @if mixin-exists(hook-drop-mask) {
+        @include hook-drop-mask;
+    }
+}
+
+.uk-drop-mask.uk-active {
+    opacity: 1;
+    @if mixin-exists(hook-drop-mask-active) {
+        @include hook-drop-mask-active;
+    }
+}
+
+
 /* Grid modifiers
  ========================================================================== */
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import { Drop } from '../../components/Drop';
 import './index.scss';
 export const Dropdown = React.forwardRef((props, ref) => {

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type PolymorphicProps } from '../../components/Component';
+import { type BreakpointsConfig } from '../../types';
+export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
+export type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export type FlexBreakpoint = {
+    alignContent?: FlexAlignContent;
+    alignItems?: FlexAlignItems;
+    flexDirection?: FlexDirection;
+    flexWrap?: FlexWrap;
+    justifyContent?: FlexJustifyContent | BreakpointsConfig<FlexJustifyContent>;
+};
+export type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
+export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
+    inline?: boolean;
+    prefixCls?: string;
+}
+export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
+export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Flex/Flex.js

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { Component } from '../../components/Component';
+import { ComponentProvider } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
+import { getBreakpointsConfigClasses } from '../../utils';
+const defaultElement = 'div';
+export const Flex = React.memo((props) => {
+    const config = useConfig();
+    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
+    const justifyContentCls = React.useMemo(() => (typeof justifyContent === 'string'
+        ? `${rootCls}-${justifyContent}`
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', justifyContent)), [config.prefixCls, justifyContent, prefixCls, rootCls]);
+    return (React.createElement(ComponentProvider, { component: "flex", prefixCls: prefixCls || config.prefixCls },
+        React.createElement(Component, { className: classNames({
+                [rootCls]: !inline,
+                [`${rootCls}-inline`]: inline,
+                [`${rootCls}-${alignItems}`]: alignItems !== undefined,
+                [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
+                [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
+                [`${rootCls}-wrap-${alignContent}`]: alignContent !== undefined,
+            }, justifyContentCls, className), component: defaultElement, ...restProps })));
+});

package/dist/esm/components/Flex/Item.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type PolymorphicProps } from '../../components/Component';
+import { type BreakpointsConfig } from '../../types';
+export type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
+type Order = 'first' | 'last';
+export interface ItemOwnItem {
+    itemDimensions?: FlexItemDimensions;
+    order?: Order | BreakpointsConfig<Order>;
+    prefixCls?: string;
+}
+export type ItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ItemOwnItem & PolymorphicProps<E>> & PolymorphicProps<E, ItemOwnItem>;
+export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: ItemProps<E>) => React.JSX.Element)>;
+export {};

package/dist/esm/components/Flex/Item.js

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { Component } from '../../components/Component';
+import { useComponentContext } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
+import { getBreakpointsConfigClasses } from '../../utils';
+const defaultElement = 'div';
+export const Item = React.memo((props) => {
+    const config = useConfig();
+    const { getRootCls } = useComponentContext();
+    const { className, itemDimensions, order, prefixCls = getRootCls(), ...restProps } = props;
+    const orderCls = React.useMemo(() => (typeof order === 'string'
+        ? `${prefixCls}-${order}`
+        : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', order)), [config.prefixCls, order, prefixCls]);
+    return (React.createElement(Component, { className: classNames({
+            [`${prefixCls}-${itemDimensions}`]: itemDimensions !== undefined,
+        }, orderCls, className), component: defaultElement, ...restProps }));
+});

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

@@ -1,25 +1,9 @@
-import * as React from 'react';
-import { type PolymorphicProps } from '../../components/Component';
-import { type BreakpointsConfig } from '../../types';
+import type * as React from 'react';
+import { type FlexProps } from '../../components/Flex/Flex';
+import { type ItemProps as FlexItemProps, Item } from '../../components/Flex/Item';
 import './index.scss';
-export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
-export type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-export type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
-export type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
-export type FlexBreakpoint = {
-    alignContent?: FlexAlignContent;
-    alignItems?: FlexAlignItems;
-    flexDirection?: FlexDirection;
-    flexWrap?: FlexWrap;
-    itemDimensions?: FlexItemDimensions;
-    justifyContent?: FlexJustifyContent;
-};
-export type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
-export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
-    inline?: boolean;
-    prefixCls?: string;
+export type { FlexProps, FlexItemProps };
+export interface Flex extends React.MemoExoticComponent<React.FunctionComponent<FlexProps>> {
+    Item: typeof Item;
 }
-export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
-export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => JSX.Element)>;
+export declare const Flex: Flex;

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

@@ -1,21 +1,5 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Component } from '../../components/Component';
-import { useConfig } from '../../components/ConfrigProvider';
+import { Flex as InternalFlex } from '../../components/Flex/Flex';
+import { Item } from '../../components/Flex/Item';
 import './index.scss';
-const defaultElement = 'div';
-export const Flex = React.memo((props) => {
-    const config = useConfig();
-    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
-    return (React.createElement(Component, { className: classNames({
-            [rootCls]: !inline,
-            [`${rootCls}-inline`]: inline,
-            [`${rootCls}-${alignItems}`]: alignItems !== undefined,
-            [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
-            [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
-            [`${rootCls}-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
-            [`${rootCls}-${justifyContent}`]: justifyContent !== undefined,
-            [`${rootCls}-${itemDimensions}`]: itemDimensions !== undefined,
-        }, className), component: defaultElement, ...restProps }));
-});
+export const Flex = InternalFlex;
+Flex.Item = Item;

package/dist/esm/components/Form/Controls.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare const Controls: React.MemoExoticComponent<(props: ControlsProps) => JSX.Element>;
+export declare const Controls: React.MemoExoticComponent<(props: ControlsProps) => React.JSX.Element>;

package/dist/esm/components/Form/Controls.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { useComponentContext } from '../../components/ComponentProvider';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 export const Controls = React.memo((props) => {
     const config = useConfig();
     const { getRootCls } = useComponentContext();

package/dist/esm/components/Form/ControlsText.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ControlsTextProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare const ControlsText: React.MemoExoticComponent<(props: ControlsTextProps) => JSX.Element>;
+export declare const ControlsText: React.MemoExoticComponent<(props: ControlsTextProps) => React.JSX.Element>;

package/dist/esm/components/Form/ControlsText.js

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
 import { useComponentContext } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
 export const ControlsText = React.memo((props) => {
     const config = useConfig();
     const { getRootCls } = useComponentContext();

package/dist/esm/components/Form/Fieldset.d.ts

@@ -3,4 +3,4 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
     layout?: 'stacked' | 'horizontal';
     prefixCls?: string;
 }
-export declare const Fieldset: React.MemoExoticComponent<(props: FieldsetProps) => JSX.Element>;
+export declare const Fieldset: React.MemoExoticComponent<(props: FieldsetProps) => React.JSX.Element>;

package/dist/esm/components/Form/Fieldset.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 Fieldset = React.memo((props) => {
     const config = useConfig();
     const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -5,4 +5,4 @@ export interface FormOwnProps {
     prefixCls?: string;
 }
 export type FormProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FormOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FormOwnProps>;
-export declare const Form: React.MemoExoticComponent<(<E extends React.ElementType<any> = "form">(props: FormProps<E>) => JSX.Element)>;
+export declare const Form: React.MemoExoticComponent<(<E extends React.ElementType<any> = "form">(props: FormProps<E>) => React.JSX.Element)>;

package/dist/esm/components/Form/Form.js

@@ -1,8 +1,8 @@
-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 { ComponentProvider } from '../../components/ComponentProvider';
+import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'form';
 export const Form = React.memo((props) => {
     const config = useConfig();

package/dist/esm/components/Form/Label.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     prefixCls?: string;
 }
-export declare const Label: React.MemoExoticComponent<(props: LabelProps) => JSX.Element>;
+export declare const Label: React.MemoExoticComponent<(props: LabelProps) => React.JSX.Element>;

package/dist/esm/components/Form/Label.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';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 export const Label = React.memo((props) => {
     const config = useConfig();

package/dist/esm/components/Form/Legend.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface LegendProps extends React.HTMLAttributes<HTMLLegendElement> {
     prefixCls?: string;
 }
-export declare const Legend: React.MemoExoticComponent<(props: LegendProps) => JSX.Element>;
+export declare const Legend: React.MemoExoticComponent<(props: LegendProps) => React.JSX.Element>;

package/dist/esm/components/Form/Legend.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 Legend = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -14,4 +14,4 @@ export type GridOwnProps = {
     rowGap?: GridGap;
 };
 export type GridProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<GridOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, GridOwnProps>;
-export declare const Grid: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: GridProps<E>) => JSX.Element)>;
+export declare const Grid: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: GridProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-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 { getChildWidthClassname } from '../../components/Width';
 import './index.scss';
 const defaultElement = 'div';

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

@@ -7,4 +7,4 @@ export type HeadingOwnProps = {
     size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 };
 export type HeadingProps<E extends React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
-export declare const Heading: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: HeadingProps<E>) => JSX.Element)>;
+export declare const Heading: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: HeadingProps<E>) => React.JSX.Element)>;

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

@@ -1,7 +1,7 @@
-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 Heading = React.memo((props) => {

package/dist/esm/components/Icon/Button.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type IconProps } from '../../components/Icon/Icon';
-export declare const Button: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
+export declare const Button: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>;

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

@@ -8,4 +8,4 @@ export type IconOwnProps = {
     round?: boolean;
 };
 export type IconProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<IconOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, IconOwnProps>;
-export declare const Icon: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: IconProps<E>) => JSX.Element | null)>;
+export declare const Icon: React.MemoExoticComponent<(<E extends React.ElementType<any> = "span">(props: IconProps<E>) => React.JSX.Element | null)>;

package/dist/esm/components/Icon/Icon.js

@@ -1,7 +1,7 @@
-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';
 const defaultElement = 'span';
 export const Icon = React.memo((props) => {
     const config = useConfig();

package/dist/esm/components/Icon/Link.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type IconProps } from '../../components/Icon/Icon';
-export declare const Link: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
+export declare const Link: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>;

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

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

package/dist/esm/components/Iconnav/Iconnav.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 Iconnav = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, vertical, ...restProps } = props;

package/dist/esm/components/Iconnav/Item.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface IconnavItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     isActive?: boolean;
 }
-export declare const Item: React.MemoExoticComponent<(props: IconnavItemProps) => JSX.Element>;
+export declare const Item: React.MemoExoticComponent<(props: IconnavItemProps) => React.JSX.Element>;

package/dist/esm/components/Iconnav/Item.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 Item = React.memo((props) => {
     const config = useConfig();
     const { children, className, isActive, ...restProps } = props;

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

@@ -5,4 +5,4 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     type?: 'success' | 'warning' | 'danger';
 }
-export declare const Label: React.MemoExoticComponent<(props: LabelProps) => JSX.Element>;
+export declare const Label: React.MemoExoticComponent<(props: LabelProps) => React.JSX.Element>;

package/dist/esm/components/Label/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 Label = React.memo((props) => {
     const config = useConfig();

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

@@ -1,7 +1,7 @@
-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 = 'a';
 const ForwardedLink = React.forwardRef((props, ref) => {

package/dist/esm/components/List/Item.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 type Props = React.LiHTMLAttributes<HTMLLIElement>;
-export declare const Item: React.MemoExoticComponent<(props: Props) => JSX.Element>;
+export declare const Item: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

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

@@ -5,4 +5,4 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     size?: 'large' | 'collapse';
     type?: 'bullet' | 'disc' | 'divider' | 'striped' | 'circle' | 'square' | 'decimal' | 'hyphen';
 }
-export declare const List: React.MemoExoticComponent<(props: ListProps) => JSX.Element>;
+export declare const List: React.MemoExoticComponent<(props: ListProps) => React.JSX.Element>;

package/dist/esm/components/List/List.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 List = React.memo((props) => {
     const config = useConfig();
     const { className, color, prefixCls = config.prefixCls, size, type, ...restProps } = props;

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

@@ -1,6 +1,6 @@
 import type * as React from 'react';
-import { type ListProps } from '../../components/List/List';
 import { Item } from '../../components/List/Item';
+import { type ListProps } from '../../components/List/List';
 import './index.scss';
 export type { ListProps };
 export interface List extends React.MemoExoticComponent<React.FunctionComponent<ListProps>> {

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

@@ -1,5 +1,5 @@
-import { List as InnerList } from '../../components/List/List';
 import { Item } from '../../components/List/Item';
+import { List as InnerList } from '../../components/List/List';
 import './index.scss';
 export const List = InnerList;
 List.Item = Item;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { type DialogProps } from 'rc-dialog';
+import * as React from 'react';
 import { type Direction } from '../../types';
 export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     centered?: boolean;
@@ -9,4 +9,4 @@ export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
     type?: 'info' | 'success' | 'warning' | 'error' | 'confirm';
     onClosed?: VoidFunction;
 }
-export declare const Modal: React.MemoExoticComponent<(props: ModalProps) => JSX.Element>;
+export declare const Modal: React.MemoExoticComponent<(props: ModalProps) => React.JSX.Element>;

package/dist/esm/components/Modal/Modal.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
 import { canUseDocElement } from '@broxus/js-utils';
 import classNames from 'classnames';
 import Dialog from 'rc-dialog';
+import * as React from 'react';
 import { Close } from '../../components/Close';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 import { getMotionName } from '../../utils';
 let mousePosition;
 const getClickPosition = (event) => {

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

@@ -80,7 +80,7 @@
  */
 
 .uk-modal-page {
-    overflow: hidden;
+    overflow: clip;
 }
 
 

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { type NavDividerType } from '../../components/Nav/types';
 export type DividerProps = Omit<NavDividerType, 'type'>;
-export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => JSX.Element | null>;
+export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => React.JSX.Element | null>;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { NavContext } from '../../components/Nav/context/NavContext';
 import { useMeasure } from '../../components/Nav/context/PathContext';
 export const Divider = React.memo((props) => {

package/dist/esm/components/Nav/Group/InternalNavItemGroup.d.ts

@@ -8,4 +8,4 @@ export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | '
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }
-export declare const InternalNavItemGroup: React.MemoExoticComponent<(props: NavItemGroupProps) => JSX.Element>;
+export declare const InternalNavItemGroup: React.MemoExoticComponent<(props: NavItemGroupProps) => React.JSX.Element>;

package/dist/esm/components/Nav/Group/InternalNavItemGroup.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import classNames from 'classnames';
 import { stopEventPropagate } from '@broxus/js-utils';
+import classNames from 'classnames';
+import * as React from 'react';
 import { NavContext } from '../../../components/Nav/context/NavContext';
 export const InternalNavItemGroup = React.memo((props) => {
     const { children, className, title, ...restProps } = props;

package/dist/esm/components/Nav/Group/index.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type NavItemGroupProps } from '../../../components/Nav/Group/InternalNavItemGroup';
-export declare const Group: React.MemoExoticComponent<(props: NavItemGroupProps) => JSX.Element>;
+export declare const Group: React.MemoExoticComponent<(props: NavItemGroupProps) => React.JSX.Element>;