@broxus/react-uikit 0.1.2 → 0.2.0

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

@@ -1,160 +1,61 @@
 import * as React from 'react';
-import { tuple } from '@broxus/js-utils';
+import { addClass, removeClass } from '@broxus/js-utils';
 import classNames from 'classnames';
 import RcDrawer from 'rc-drawer';
-import { addModalMode, removeModalMode, useForceUpdate } from '../../utils';
+import { useConfig } from '../ConfrigProvider';
+import { addModalMode, getMotionName, removeModalMode } from '../../utils';
 import './index.scss';
-const DrawerContext = React.createContext(null);
-const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
-const SizeTypes = tuple('default', 'large');
+const SizeTypes = ['default', 'large'];
 const defaultPushState = { distance: 180 };
-export const Drawer = React.forwardRef((props, ref) => {
-    const { animation, children, className, defaultOpen, destroyOnClose, direction, duration = 'var(--drawer-transition-duration)', ease = 'var(--ease-in-out-circ)', keyboard = true, level = null, maskClosable = true, open, placement = 'right', prefixCls = 'uk-drawer', push = defaultPushState, showMask = true, size = 'default', style, trigger, wrapperClassName, zIndex, ...restProps } = props;
-    const forceUpdate = useForceUpdate();
-    const parentDrawer = React.useContext(DrawerContext);
-    const destroyClose = React.useRef(false);
-    const [internalPush, setPush] = React.useState(false);
+export const Drawer = React.memo((props) => {
+    const config = useConfig();
+    const { animation, children, className, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size = 'default', rootClassName, trigger, ...restProps } = props;
     const [internalOpen, setOpen] = React.useState(defaultOpen);
-    // eslint-disable-next-line no-param-reassign
     const mergedOpen = open === undefined ? internalOpen : open;
-    React.useEffect(() => {
-        // fix: delete drawer in child and re-render, no push started.
-        // <Drawer>{show && <Drawer />}</Drawer>
-        if (mergedOpen && parentDrawer) {
-            parentDrawer.push();
-        }
-        return () => {
-            if (parentDrawer) {
-                parentDrawer.pull();
-                // parentDrawer = null
-            }
-        };
-    }, []);
-    React.useEffect(() => {
-        if (parentDrawer) {
-            if (mergedOpen) {
-                parentDrawer.push();
-                forceUpdate();
-            }
-            else {
-                parentDrawer.pull();
-                forceUpdate();
-            }
-        }
-    }, [mergedOpen]);
-    const drawerClassName = React.useMemo(() => classNames({
-        [`${prefixCls}-${size}`]: size !== undefined,
-        [`${prefixCls}-${animation}`]: animation !== undefined,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-        'no-mask': !showMask,
-    }, className), [prefixCls, size, animation, showMask, direction, className]);
-    const drawerWrapperClassName = React.useMemo(() => classNames(`${prefixCls}-container`, {
-        [`${prefixCls}-${animation}-container`]: animation !== undefined,
-    }, wrapperClassName), [prefixCls, animation, wrapperClassName]);
-    const operations = React.useMemo(() => ({
-        pull() {
-            if (push) {
-                setPush(false);
-                forceUpdate();
-            }
-        },
-        push() {
-            if (push) {
-                setPush(true);
-                forceUpdate();
-            }
-        },
-    }), [push]);
-    React.useImperativeHandle(ref, () => operations, [operations]);
-    const isDestroyOnClose = destroyOnClose && !mergedOpen;
-    const afterVisibleChange = (visible) => {
-        restProps.afterVisibleChange?.(visible);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'drawer'), [config, prefixCls]);
+    const drawerRootClassName = React.useMemo(() => classNames({
+        [`${rootCls}-${size}`]: size !== undefined,
+        [`${rootCls}-${animation}`]: animation !== undefined,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        'no-mask': !mask,
+    }, rootClassName), [rootCls, size, animation, mask, direction, rootClassName]);
+    const drawerWrapperClassName = React.useMemo(() => classNames(`${rootCls}-container`, {
+        [`${rootCls}-${animation}-container`]: animation !== undefined,
+    }), [rootCls, animation]);
+    const afterOpenChange = React.useCallback((visible) => {
+        restProps.afterOpenChange?.(visible);
         if (visible) {
+            addClass(document.body, drawerWrapperClassName);
             addModalMode();
         }
         else {
             removeModalMode();
+            removeClass(document.body, drawerWrapperClassName);
         }
-    };
-    const getRcDrawerStyle = () => {
-        // get drawer push width or height
-        const getPushTransform = (_placement) => {
-            let distance;
-            // noinspection SuspiciousTypeOfGuard
-            if (typeof push === 'boolean') {
-                distance = push ? defaultPushState.distance : 0;
-            }
-            else {
-                distance = push?.distance;
-            }
-            distance = parseFloat(String(distance || 0));
-            if (_placement === 'left' || _placement === 'right') {
-                return `translateX(${_placement === 'left' ? distance : -distance}px)`;
-            }
-            if (_placement === 'top' || _placement === 'bottom') {
-                return `translateY(${_placement === 'top' ? distance : -distance}px)`;
-            }
-            return '';
-        };
-        return {
-            transform: internalPush ? getPushTransform(placement) : undefined,
-            zIndex,
-            ...style,
-        };
-    };
-    const collapse = () => {
+    }, [drawerWrapperClassName, restProps]);
+    const collapse = React.useCallback(() => {
         setOpen(false);
-    };
-    const expand = () => {
+    }, []);
+    const expand = React.useCallback(() => {
         setOpen(true);
-    };
-    const onClose = (event) => {
+    }, []);
+    const onClose = React.useCallback((event) => {
         setOpen(false);
         restProps.onClose?.(event);
-    };
-    const onDestroyTransitionEnd = () => {
-        if (!isDestroyOnClose) {
-            return;
-        }
-        if (!mergedOpen) {
-            destroyClose.current = true;
-            forceUpdate();
-        }
-    };
-    const renderBody = () => {
-        if (destroyClose.current && !mergedOpen) {
-            return null;
-        }
-        destroyClose.current = false;
-        const containerStyle = {};
-        if (isDestroyOnClose) {
-            // Increase the opacity transition, delete children after closing.
-            containerStyle.opacity = 0;
-            containerStyle.transition = 'opacity var(--transition-duration)';
-        }
-        return (React.createElement("div", { className: `${prefixCls}-body-wrapper`, style: containerStyle, onTransitionEnd: onDestroyTransitionEnd },
-            React.createElement("div", { className: `${prefixCls}-body` }, children)));
-    };
-    return (React.createElement(DrawerContext.Provider, { value: operations },
+    }, [restProps]);
+    return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { ...{
-                afterVisibleChange,
-                children,
-                className: drawerClassName,
-                defaultOpen,
-                duration,
-                ease,
-                handler: false,
-                keyboard,
-                level: (animation !== undefined && level == null) ? 'all' : level,
-                maskClosable,
-                open: mergedOpen,
-                placement,
-                prefixCls,
-                showMask,
-                style: getRcDrawerStyle(),
-                wrapperClassName: drawerWrapperClassName,
-                ...restProps,
-                onClose,
-            } }, renderBody())));
+        React.createElement(RcDrawer, { afterOpenChange: afterOpenChange, className: className, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+                motionDeadline: 200,
+                motionName: getMotionName(prefixCls || config.prefixCls, 'fade'),
+            }, motion: motionPlacement => ({
+                motionAppear: true,
+                motionDeadline: 200,
+                motionEnter: true,
+                motionLeave: true,
+                motionName: getMotionName(config.prefixCls, `slide-${motionPlacement}`),
+            }), open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, onClose: onClose, ...restProps }, children)));
 });
+if (process.env.NODE_ENV !== 'production') {
+    Drawer.displayName = 'Drawer';
+}

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

@@ -32,10 +32,8 @@
 
 .uk-drawer {
     height: 100%;
+    pointer-events: none;
     position: fixed;
-    transition: height 0s ease var(--drawer-transition-duration),
-        transform var(--drawer-transition-duration) var(--ease-in-out-circ),
-        width 0s ease var(--drawer-transition-duration);
     width: 0;
     z-index: var(--drawer-z-index);
     @if mixin-exists(hook-drawer) {
@@ -52,11 +50,6 @@
     transform: none !important;
 }
 
-.uk-drawer > * {
-    transition: box-shadow var(--drawer-transition-duration) var(--ease-in-out-circ),
-        transform var(--drawer-transition-duration) var(--ease-in-out-circ);
-}
-
 /* Reveal animation */
 .uk-drawer-reveal:not(.uk-drawer-open) .uk-drawer-content-wrapper {
     transform: none !important;
@@ -97,12 +90,18 @@
 .uk-drawer-content-wrapper {
     height: 100%;
     position: absolute;
+    transition: transform;
+    transition-duration: var(--drawer-transition-duration);
     width: 100%;
     @if mixin-exists(hook-drawer-content-wrapper) {
         @include hook-drawer-content-wrapper;
     }
 }
 
+.uk-drawer-content-wrapper-hidden {
+    display: none;
+}
+
 .uk-drawer-content {
     background-clip: padding-box;
     background-color: var(--drawer-content-background);
@@ -110,6 +109,7 @@
     height: 100%;
     outline: 0 none;
     overflow: visible;
+    pointer-events: auto;
     position: relative;
     width: 100%;
     z-index: 1;
@@ -144,7 +144,7 @@
 }
 
 
-// Side
+// Sides
 // ========================================================================
 
 /*
@@ -246,16 +246,14 @@
 // ========================================================================
 
 .uk-drawer-mask {
-    animation: uk-motion-fade var(--drawer-transition-duration) var(--ease-in-out-circ);
     background-color: var(--drawer-mask-background);
-    height: 0;
+    bottom: 0;
     left: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
+    right: 0;
     top: 0;
-    transition: height 0s ease var(--drawer-transition-duration), opacity var(--drawer-transition-duration) linear;
-    width: 100%;
     @if mixin-exists(hook-drawer-mask) {
         @include hook-drawer-mask;
     }
@@ -265,7 +263,6 @@
     height: 100%;
     opacity: 1;
     pointer-events: auto;
-    transition: opacity var(--drawer-transition-duration) linear;
     @if mixin-exists(hook-drawer-mask-open) {
         @include hook-drawer-mask-open;
     }

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import type { TriggerProps } from 'rc-trigger';
-import type { ActionType, AlignType, AnimationType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import { type BuildInPlacements, type TriggerProps } from 'rc-trigger';
+import { type ActionType, type AlignType } from 'rc-trigger/lib/interface';
 import './index.scss';
 export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
     align?: AlignType;
     alignPoint?: boolean;
-    animation?: AnimationType;
     arrow?: boolean;
     hideAction?: ActionType[];
     minOverlayWidthMatchTrigger?: boolean;
@@ -16,6 +15,7 @@ export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupCont
     placement?: string;
     placements?: BuildInPlacements;
     prefixCls?: string;
+    rootCls?: string;
     showAction?: ActionType[];
     transitionName?: string;
     trigger?: ActionType | ActionType[];
@@ -23,4 +23,12 @@ export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupCont
     onOverlayClick?: (e: Event) => void;
     onVisibleChange?: (visible: boolean) => void;
 }
-export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;
+export type TriggerRef = {
+    forceAlign: VoidFunction;
+};
+export type DropRef = {
+    close: VoidFunction;
+    open: VoidFunction;
+    triggerRef: TriggerRef;
+};
+export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;

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

@@ -1,57 +1,74 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import Trigger from 'rc-trigger';
-import Placements from './placements';
+import { useConfig } from '../ConfrigProvider';
+import Placements from '../Drop/placements';
+import { getMotionName } from '../../utils';
 import './index.scss';
 export const Drop = React.forwardRef((props, ref) => {
-    const { align, alignPoint, animation, arrow = false, children, getPopupContainer, hideAction, minOverlayWidthMatchTrigger, overlay, overlayClassName, overlayStyle, prefixCls = 'uk-drop', placement = 'bottom-left', placements = Placements, showAction, transitionName = 'uk-motion-slide-up', trigger = ['hover'], visible, onOverlayClick, onVisibleChange, ...restProps } = props;
+    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 triggerRef = React.useRef(null);
     const [triggerVisible, setTriggerVisible] = React.useState();
     const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
-    const onPopupVisibleChange = (value) => {
+    const rootCls = React.useMemo(() => externalRootCls ?? config.getRootPrefixCls(prefixCls || config.prefixCls, 'drop'), [config, prefixCls, externalRootCls]);
+    const onPopupVisibleChange = React.useCallback((value) => {
         setTriggerVisible(value);
         onVisibleChange?.(value);
-    };
-    const getOverlayElement = () => {
+    }, [onVisibleChange]);
+    const getOverlayElement = React.useCallback(() => {
         if (typeof overlay === 'function') {
             return overlay();
         }
         return overlay;
-    };
-    const getDropElement = () => (React.createElement(React.Fragment, null,
+    }, [overlay]);
+    const getDropElement = React.useCallback(() => (React.createElement(React.Fragment, null,
         arrow && React.createElement("div", { className: `${prefixCls}-arrow` }),
         React.cloneElement(getOverlayElement(), {
             onClick: onOverlayClick,
-        })));
-    const getDropElementOrLambda = () => {
+        }))), [arrow, getOverlayElement, onOverlayClick, prefixCls]);
+    const getDropElementOrLambda = React.useCallback(() => {
         if (typeof overlay === 'function') {
-            return getDropElement;
+            return getDropElement();
         }
-        return getDropElement();
-    };
-    const getMinOverlayWidthMatchTrigger = () => {
+        return getDropElement;
+    }, [getDropElement, overlay]);
+    const getMinOverlayWidthMatchTrigger = React.useCallback(() => {
         if (minOverlayWidthMatchTrigger !== undefined) {
             return minOverlayWidthMatchTrigger;
         }
         return !alignPoint;
-    };
-    const renderChildren = () => {
+    }, [alignPoint, minOverlayWidthMatchTrigger]);
+    const renderChildren = React.useCallback(() => {
         const childrenProps = children.props ? children.props : {};
-        const childClassName = classNames(childrenProps.className, 'uk-open');
+        const childClassName = classNames(childrenProps.className, `${prefixCls || config.prefixCls}-open`);
         return triggerVisible && children
             ? React.cloneElement(children, {
                 className: childClassName,
             })
             : children;
-    };
-    React.useImperativeHandle(ref, () => triggerRef.current);
+    }, [children, config.prefixCls, prefixCls, triggerVisible]);
+    React.useImperativeHandle(ref, () => ({
+        close() {
+            setTriggerVisible(false);
+        },
+        open() {
+            setTriggerVisible(true);
+        },
+        // @ts-ignore
+        triggerRef: triggerRef.current,
+    }));
     let triggerHideAction = hideAction;
     if (!triggerHideAction && trigger.indexOf('contextMenu') > -1) {
         triggerHideAction = ['click'];
     }
-    return (React.createElement(Trigger, { ref: triggerRef, ...restProps, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], popup: getDropElementOrLambda(), popupAlign: align, popupAnimation: animation, popupClassName: classNames(overlayClassName, {
-            [`${prefixCls}-show-arrow`]: arrow,
-        }), popupPlacement: placement, popupStyle: overlayStyle, popupTransitionName: transitionName, popupVisible: mergedVisible, prefixCls: prefixCls, showAction: showAction, stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', onPopupVisibleChange: onPopupVisibleChange }, renderChildren()));
+    return (React.createElement(Trigger, { ref: triggerRef, action: trigger, builtinPlacements: placements, getPopupContainer: getPopupContainer, hideAction: triggerHideAction || [], mouseLeaveDelay: 0.2, popup: getDropElementOrLambda(), popupAlign: align, popupClassName: classNames(overlayClassName, {
+            [`${rootCls}-show-arrow`]: arrow,
+        }), popupMotion: {
+            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()));
 });
 if (process.env.NODE_ENV !== 'production') {
     Drop.displayName = 'Drop';

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

@@ -44,32 +44,6 @@
 .uk-drop-hidden { display: none; }
 
 
-/* Position Animation
- ========================================================================== */
-
-[class*='uk-drop-placement-bottom'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-up-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-up-out;
-    }
-}
-
-[class*='uk-drop-placement-top'] {
-    &.uk-slide-up-enter.uk-slide-up-enter-active,
-    &.uk-slide-up-appear.uk-slide-up-appear-active {
-        animation-name: uk-slide-down-in;
-    }
-
-    &.uk-slide-up-leave.uk-slide-up-leave-active {
-        animation-name: uk-slide-down-out;
-    }
-}
-
-
 /* Grid modifiers
  ========================================================================== */
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { DropProps } from '../Drop';
+import { type DropProps, type DropRef } from '../Drop';
 import './index.scss';
-export declare type DropdownProps = DropProps;
-export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;
+export type DropdownProps = DropProps;
+export declare const Dropdown: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;

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

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { useConfig } from '../ConfrigProvider';
 import { Drop } from '../Drop';
 import './index.scss';
 export const Dropdown = React.forwardRef((props, ref) => {
-    const { children, ...restProps } = props;
-    return (React.createElement(Drop, { ref: ref, ...restProps, prefixCls: "uk-dropdown" }, children));
+    const config = useConfig();
+    const { children, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'dropdown'), [config, prefixCls]);
+    return (React.createElement(Drop, { ref: ref, ...restProps, rootCls: rootCls }, children));
 });
 if (process.env.NODE_ENV !== 'production') {
     Dropdown.displayName = 'Dropdown';

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import type { BreakpointsConfig } from '../../types';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
+import { type BreakpointsConfig } from '../../types';
 import './index.scss';
-export declare type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
-export declare type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
-export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export declare type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-export declare type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
-export declare type FlexItemDimensions = 'none' | 'auto' | 'fill' | '1';
-export declare type FlexBreakpoint = {
+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;
@@ -16,11 +16,10 @@ export declare type FlexBreakpoint = {
     itemDimensions?: FlexItemDimensions;
     justifyContent?: FlexJustifyContent;
 };
-export declare type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
-export declare type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
+export type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
+export type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
     inline?: boolean;
+    prefixCls?: string;
 };
-export declare type FlexProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, FlexOwnProps>;
-declare const defaultElement = "div";
-export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): JSX.Element;
-export {};
+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)>;

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

@@ -1,18 +1,21 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'div';
-export function Flex(props) {
-    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, itemDimensions, justifyContent, ...restProps } = props;
+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({
-            'uk-flex': !inline,
-            'uk-flex-inline': inline,
-            [`uk-flex-${alignItems}`]: alignItems !== undefined,
-            [`uk-flex-${flexDirection}`]: flexDirection !== undefined,
-            [`uk-flex-${flexWrap}`]: flexWrap !== undefined,
-            [`uk-flex-wrap-${alignContent}`]: flexWrap !== undefined && alignContent !== undefined,
-            [`uk-flex-${justifyContent}`]: justifyContent !== undefined,
-            [`uk-flex-${itemDimensions}`]: itemDimensions !== undefined,
-        }, className), component: defaultElement, ...restProps }));
-}
+            [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), ...restProps }));
+});

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function Controls(props: ControlsProps): JSX.Element;
-export declare namespace Controls {
-    var displayName: string;
+export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
 }
+export declare const Controls: React.MemoExoticComponent<(props: ControlsProps) => JSX.Element>;

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function Controls(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement("div", { className: classNames('uk-form-controls', className), ...restProps }));
-}
+import { useComponentContext } from '../ComponentProvider';
+import { useConfig } from '../ConfrigProvider';
+export const Controls = React.memo((props) => {
+    const config = useConfig();
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'controls'), [config, prefixCls]);
+    return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     Controls.displayName = 'Form.Controls';
 }

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-export declare type ControlsTextProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function ControlsText(props: ControlsTextProps): JSX.Element;
-export declare namespace ControlsText {
-    var displayName: string;
+export interface ControlsTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
 }
+export declare const ControlsText: React.MemoExoticComponent<(props: ControlsTextProps) => JSX.Element>;

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function ControlsText(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement("div", { className: classNames('uk-form-controls-text', className), ...restProps }));
-}
+import { useConfig } from '../ConfrigProvider';
+import { useComponentContext } from '../ComponentProvider';
+export const ControlsText = React.memo((props) => {
+    const config = useConfig();
+    const { getRootCls } = useComponentContext();
+    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'controls-text'), [config, prefixCls]);
+    return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
+});
 if (process.env.NODE_ENV !== 'production') {
     ControlsText.displayName = 'Form.ControlsText';
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type FieldsetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
-export declare function Fieldset(props: FieldsetProps): JSX.Element;
-export declare namespace Fieldset {
-    var displayName: string;
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    layout?: 'stacked' | 'horizontal';
+    prefixCls?: string;
 }
+export declare const Fieldset: React.MemoExoticComponent<(props: FieldsetProps) => JSX.Element>;