@broxus/react-uikit 0.20.0 → 0.21.0

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

@@ -54,9 +54,9 @@ export const Password = React.forwardRef((props, ref) => {
         };
     }, [removePasswordValueAttribute]);
     const suffix = React.useMemo(() => (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { key: "toggle_visibility_icon", icon: visible
+        React.createElement(Icon, { key: "toggle_visibility_icon", className: `${controlCls}-password-icon`, icon: visible
                 ? restProps.iconVisibility ?? 'visibility'
-                : restProps.iconVisibilityOff ?? 'visibility_off', className: `${controlCls}-password-icon`, onClick: toggleVisibility, onMouseDown: preventEvent, onMouseUp: preventEvent }),
+                : restProps.iconVisibilityOff ?? 'visibility_off', onClick: toggleVisibility, onMouseDown: preventEvent, onMouseUp: preventEvent }),
         restProps.suffix)), [
         controlCls,
         restProps.iconVisibility,
@@ -65,7 +65,7 @@ export const Password = React.forwardRef((props, ref) => {
         toggleVisibility,
         visible,
     ]);
-    return (React.createElement(Input, { ...restProps, suffix: suffix, type: visible ? 'text' : 'password', ref: inputRef, onChange: onChange, onBlur: onBlur, onFocus: onFocus }));
+    return (React.createElement(Input, { ref: inputRef, ...restProps, suffix: suffix, type: visible ? 'text' : 'password', onBlur: onBlur, onChange: onChange, onFocus: onFocus }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Password.displayName = 'Input.Password';

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

@@ -10,7 +10,7 @@ export interface InputRef {
     getInputRef(): React.RefObject<HTMLInputElement | null> | null;
 }
 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> {
+export interface InputProps<T extends ValueType = ValueType> extends ControlProps<T>, OmittedNativeInput {
     htmlSize?: number | undefined;
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;

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

@@ -49,7 +49,6 @@ export function useInput(props) {
         ...restProps,
         prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
-        // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onClear,

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

@@ -25,7 +25,6 @@ export const Group = React.forwardRef((props, ref) => {
         disabled,
         name: restProps.name,
         value,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [disabled, restProps.name, value, onChange]);
     const renderGroup = () => {
@@ -33,15 +32,15 @@ export const Group = React.forwardRef((props, ref) => {
         if (options && options.length > 0) {
             childrenToRender = options.map(option => {
                 if (typeof option === 'string' || typeof option === 'number') {
-                    return (React.createElement(Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
+                    return (React.createElement(Radio, { key: option, block: block, checked: value === option, className: `${rootCls}-item`, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
                 return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, className: `${rootCls}-item`, direction: direction, disabled: option.disabled || disabled, size: size, style: option.style, value: option.value }, option.label));
             });
         }
-        return (React.createElement("div", { className: classNames(rootCls, {
+        return (React.createElement("div", { ref: ref, className: classNames(rootCls, {
                 [`${rootCls}-rtl`]: direction === 'rtl',
                 [`${rootCls}-stack`]: stack,
-            }, className), id: id, style: style, ref: ref }, childrenToRender));
+            }, className), id: id, style: style }, childrenToRender));
     };
     return React.createElement(RadioGroupContext.Provider, { value: context }, renderGroup());
 });

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

@@ -8,9 +8,9 @@ export interface RadioChangeEventTarget extends RadioProps {
     checked: boolean;
 }
 export interface RadioChangeEvent {
-    target: RadioChangeEventTarget;
-    stopPropagation: VoidFunction;
-    preventDefault: VoidFunction;
     nativeEvent: MouseEvent;
+    preventDefault: VoidFunction;
+    stopPropagation: VoidFunction;
+    target: RadioChangeEventTarget;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -6,7 +6,7 @@ import { useRadioGroup } from '../../../components/Control/Radio/RadioGroupConte
 export const Radio = React.forwardRef((props, ref) => {
     const config = useConfig();
     const radioGroup = useRadioGroup();
-    const { block, size, className, children, direction = config.radio?.direction || config.direction, disabled, id, prefixCls = config.radio?.prefixCls || config.prefixCls, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { block, children, className, direction = config.radio?.direction || config.direction, disabled, id, prefixCls = config.radio?.prefixCls || config.prefixCls, size, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked
         ?? restProps.defaultChecked
         ?? ('value' in restProps && restProps.value === radioGroup?.value));
@@ -41,13 +41,13 @@ export const Radio = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'radio'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
-        [controlCls]: block,
-        [`${controlCls}-radio`]: block,
         [`${controlCls}-${size}`]: block && size,
-        [`${rootCls}-wrapper`]: true,
-        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${controlCls}-radio`]: block,
         [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-checked`]: radioProps.checked,
         [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${rootCls}-wrapper`]: true,
+        [controlCls]: block,
     }, className), [
         controlCls,
         block,
@@ -73,7 +73,7 @@ export const Radio = React.forwardRef((props, ref) => {
     }, [restProps.checked, restProps.defaultChecked, radioGroup?.value]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: classNames(radioClasses) },
-            React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...radioProps, type: "radio", ...globalAttributes }),
+            React.createElement("input", { ref: ref, className: `${rootCls}-input`, ...radioProps, type: "radio", ...globalAttributes }),
             React.createElement("span", { className: `${rootCls}-inner` })),
         children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });

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

@@ -73,7 +73,6 @@ export const TextArea = React.forwardRef((props, ref) => {
     const inputProps = React.useMemo(() => ({
         ...omit(restProps, ['allowClear', 'size']),
         prefixCls: rootCls,
-        // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onCompositionEnd,
@@ -109,7 +108,7 @@ export const 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: `${controlCls}-input` },
-            React.createElement(RcTextArea, { ...inputProps, value: value, ref: ref }))));
+            React.createElement(RcTextArea, { ...inputProps, ref: ref, value: value }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';

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

@@ -1,10 +1,10 @@
-import { Dimensions, debounce, isBrowser } from '@broxus/js-utils';
+import { debounce, Dimensions, isBrowser } from '@broxus/js-utils';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 export function Cover(props) {
     const config = useConfig();
-    const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
+    const { automute = true, children, className, height, prefixCls = config.prefixCls, width, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
     const resize = React.useCallback(() => {
@@ -37,13 +37,8 @@ export function Cover(props) {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
                 ...child.props,
-                ref: idx === 0 ? coveringElement : null,
-                // eslint-disable-next-line sort-keys
                 className: classNames(rootCls, child.props.className),
-                onLoadedMetadata: () => {
-                    resize();
-                },
-                // eslint-disable-next-line sort-keys
+                ref: idx === 0 ? coveringElement : null,
                 onLoad: () => {
                     if (automute) {
                         try {
@@ -52,6 +47,9 @@ export function Cover(props) {
                         catch (e) { }
                     }
                 },
+                onLoadedMetadata: () => {
+                    resize();
+                },
             });
         }
         return child;

package/dist/esm/components/DatePicker/generatePicker.d.ts

@@ -4,19 +4,19 @@ export declare const generatePicker: <DateType extends AnyObject = AnyObject>(ge
     displayName?: string;
 } & {
     displayName?: string;
-    WeekPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
-        displayName?: string;
-    };
     MonthPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
-    YearPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+    QuarterPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
     TimePicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
-    QuarterPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+    WeekPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
 };

package/dist/esm/components/DatePicker/generatePicker.js

@@ -1,5 +1,5 @@
 import { generateSinglePicker } from '../../components/DatePicker/generateSinglePicker';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+/* eslint-disable @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types,@typescript-eslint/no-unused-vars */
 export const generatePicker = (generateConfig) => {
     const { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker, } = generateSinglePicker(generateConfig);
     const MergedDatePicker = DatePicker;

package/dist/esm/components/DatePicker/generatePurePicker.js

@@ -6,7 +6,7 @@ import defaultPickerLocale from '../../components/DatePicker/locale/en_US';
 import { useComponents } from '../../components/DatePicker/useComponents';
 import { getMotionName } from '../../utils';
 export const generatePurePicker = (generateConfig) => {
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const getPanel = (picker, displayName) => {
         const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
@@ -19,7 +19,7 @@ export const generatePurePicker = (generateConfig) => {
             React.useImperativeHandle(ref, () => pickerRef.current, []);
             return (
             // @ts-ignore
-            React.createElement(PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, picker: mergedPicker, prefixCls: prefixCls, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+            React.createElement(PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), picker: mergedPicker, prefixCls: prefixCls, prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
         });
         if (process.env.NODE_ENV !== 'production' && displayName) {
             Picker.displayName = displayName;
@@ -29,7 +29,7 @@ export const generatePurePicker = (generateConfig) => {
     const DatePicker = getPanel();
     const MonthPicker = getPanel(MONTH, MONTHPICKER);
     const QuarterPicker = getPanel(QUARTER, QUARTERPICKER);
-    // @ts-ignore
+    // @ts-expect-error Type Omit<TimePickerProps, 'picker'> does not satisfy the constraint ...
     const TimePicker = getPanel(TIME, TIMEPICKER);
     const WeekPicker = getPanel(WEEK, WEEKPICKER);
     const YearPicker = getPanel(YEAR, YEARPICKER);

package/dist/esm/components/DatePicker/generateSinglePicker.js

@@ -10,8 +10,8 @@ import { useComponents } from '../../components/DatePicker/useComponents';
 import { getPlaceholder } from '../../components/DatePicker/utils';
 import { Icon } from '../../components/Icon';
 import { getMotionName } from '../../utils';
+/* eslint-disable @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types */
 export const generateSinglePicker = (generateConfig) => {
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
     const getPicker = (picker, displayName) => {
         const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
@@ -34,7 +34,6 @@ export const generateSinglePicker = (generateConfig) => {
                 if (mergedPicker === TIME) {
                     return React.createElement(Icon, { icon: "schedule" });
                 }
-                // @ts-ignore
                 if (mergedPicker && ![WEEK, MONTH, QUARTER, YEAR].includes(mergedPicker)) {
                     return React.createElement(Icon, { icon: "calendar_clock" });
                 }
@@ -50,7 +49,7 @@ export const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: classNames(popupClassName),
-                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
+                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), style: style, suffixIcon: suffixIcon, superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
                         popup: { minWidth: 'fit-content', ...restProps.styles },
                     } })));
         });

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

@@ -17,10 +17,10 @@ export interface AdditionalPickerLocaleLangProps {
     rangeMonthPlaceholder?: [string, string];
     rangePlaceholder?: [string, string];
     rangeQuarterPlaceholder?: [string, string];
-    rangeYearPlaceholder?: [string, string];
     rangeWeekPlaceholder?: [string, string];
-    yearPlaceholder?: string;
+    rangeYearPlaceholder?: [string, string];
     weekPlaceholder?: string;
+    yearPlaceholder?: string;
 }
 export interface PickerLocale extends AdditionalPickerLocaleProps {
     lang: RcPickerLocale & AdditionalPickerLocaleLangProps;

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

@@ -7,7 +7,7 @@ import { addModalMode, getMotionName, removeModalMode } from '../../utils';
 const defaultPushState = { distance: 180 };
 export const Drawer = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
+    const { animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, rootClassName, rootStyle, size, trigger, onClose: onCloseCallback, ...restProps } = props;
     const [isShown, setShown] = React.useState(defaultOpen);
     const [internalOpen, setOpen] = React.useState(defaultOpen);
     const mergedOpen = open === undefined ? internalOpen : open;
@@ -21,8 +21,8 @@ export const Drawer = React.forwardRef((props, ref) => {
         'no-mask': !mask,
     }, rootClassName), [rootCls, animation, mergedOpen, isShown, size, direction, mask, rootClassName]);
     const drawerContainerClassName = React.useMemo(() => classNames(`${rootCls}-container`, {
-        [`${rootCls}-container-large`]: size === 'large',
         [`${rootCls}-container-${animation}-${placement}`]: placement !== undefined && ['push', 'reveal'].includes(animation),
+        [`${rootCls}-container-large`]: size === 'large',
     }), [rootCls, size, placement, animation]);
     const internalMotion = React.useMemo(() => ({
         onAppearPrepare: element => {
@@ -100,7 +100,7 @@ export const Drawer = React.forwardRef((props, ref) => {
     React.useEffect(() => cleanup, [cleanup]);
     return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { className: className, destroyOnHidden: destroyOnHidden, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+        React.createElement(RcDrawer, { className: className, destroyOnHidden: destroyOnHidden, getContainer: getContainer, keyboard: keyboard, mask: mask, maskClosable: maskClosable, maskMotion: {
                 motionName: getMotionName(prefixCls || config.prefixCls, 'drawer-fade'),
             }, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps, classNames: {
                 ...restProps.classNames,

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

@@ -6,7 +6,7 @@ import placements from '../../components/Drop/placements';
 import { getMotionName, mergeDropMaskMotion } from '../../utils';
 export const Drop = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements, children, defaultVisible, getPopupContainer = config.getPopupContainer, hideAction = action, maskMotion, motion, minOverlayWidthMatchTrigger, openClassName, overlay, overlayClassName, overlayStyle, prefixCls = config.prefixCls, placement = 'bottom-left', rootCls: externalRootCls, showAction = action, visible, onAlign, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const { action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements, children, defaultVisible, getPopupContainer = config.getPopupContainer, hideAction = action, maskMotion, minOverlayWidthMatchTrigger, motion, openClassName, overlay, overlayClassName, overlayStyle, placement = 'bottom-left', prefixCls = config.prefixCls, rootCls: externalRootCls, showAction = action, visible, onAlign, onOverlayClick, onVisibleChange, ...restProps } = props;
     const triggerRef = React.useRef(null);
     const [triggerVisible, setTriggerVisible] = React.useState(defaultVisible);
     const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
@@ -68,7 +68,7 @@ export const Drop = React.forwardRef((props, ref) => {
             motionDeadline: 300,
             motionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
             ...motion,
-        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onPopupAlign: onAlign, onOpenChange: onPopupVisibleChange }, renderChildren()));
+        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onOpenChange: onPopupVisibleChange, onPopupAlign: onAlign }, renderChildren()));
 });
 if (process.env.NODE_ENV !== 'production') {
     Drop.displayName = 'Drop';

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

@@ -8,30 +8,30 @@ const defaultElement = 'div';
 const alignContentMap = new Map([
     ['around', 'around'],
     ['between', 'between'],
-    ['end', 'right'],
     ['center', 'middle'],
+    ['end', 'right'],
     ['start', 'left'],
     ['stretch', 'stretch'],
 ]);
 const alignItemsMap = new Map([
-    ['end', 'bottom'],
     ['center', 'middle'],
+    ['end', 'bottom'],
     ['start', 'top'],
     ['stretch', 'stretch'],
 ]);
 const justifyContentMap = new Map([
     ['around', 'around'],
     ['between', 'between'],
-    ['end', 'right'],
     ['center', 'center'],
+    ['end', 'right'],
     ['start', 'left'],
 ]);
 function mapJustifyContentBreakpoints(value) {
     const config = {};
     for (const key in value) {
-        // @ts-ignore
+        // @ts-ignore its fine
         if (justifyContentMap.has(value[key])) {
-            // @ts-ignore
+            // @ts-ignore its fine
             config[key] = justifyContentMap.get(value[key]);
         }
     }
@@ -53,11 +53,11 @@ export function Flex(props) {
     }), [rootCls]);
     return (React.createElement(FlexContext.Provider, { value: context },
         React.createElement(Component, { className: classNames({
-                [rootCls]: !inline,
-                [`${rootCls}-inline`]: inline,
                 [`${rootCls}-${alignItemsMap.get(alignItems)}`]: alignItems && alignItemsMap.has(alignItems),
                 [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
+                [`${rootCls}-inline`]: inline,
                 [`${rootCls}-wrap-${alignContentMap.get(alignContent)}`]: alignContent && alignContentMap.has(alignContent),
+                [rootCls]: !inline,
             }, justifyContentCls, className), component: defaultElement, ...restProps })));
 }

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

@@ -11,10 +11,10 @@ export function Grid(props) {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'grid'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${rootCls}-${gap}`]: gap !== undefined,
-            [`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
             [`${rootCls}-column-${columnGap}`]: columnGap !== undefined,
-            [`${rootCls}-margin-${margin}`]: margin !== undefined,
             [`${rootCls}-divider`]: divider,
+            [`${rootCls}-margin-${margin}`]: margin !== undefined,
             [`${rootCls}-match`]: match,
+            [`${rootCls}-row-${rowGap}`]: rowGap !== undefined,
         }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
 }

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

@@ -5,7 +5,7 @@ import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
 export function Heading(props) {
     const config = useConfig();
-    const { children, className, prefixCls = config.prefixCls, size, decoration, ...restProps } = props;
+    const { children, className, decoration, prefixCls = config.prefixCls, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'heading'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames({
             [`${rootCls}-${decoration}`]: decoration !== undefined,

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

@@ -11,9 +11,9 @@ export function Icon(props) {
         return null;
     }
     return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${rootCls}-${mode}`]: mode !== undefined,
             [`${rootCls}-button`]: type === 'button',
             [`${rootCls}-material`]: material,
             [`${rootCls}-round`]: material && round,
-            [`${rootCls}-${mode}`]: mode !== undefined,
         }, className), component: defaultElement, ...restProps }, material ? React.createElement("i", null, icon) : children));
 }

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

@@ -9,9 +9,9 @@ export var ColorMode;
 })(ColorMode || (ColorMode = {}));
 /* eslint-disable react/no-multi-comp */
 export const lib = {
-    [ColorMode.Dark]: () => (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    [ColorMode.Dark]: () => (React.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M13.1029 7.74566C13.1908 7.74566 13.2468 7.68401 13.2627 7.59923C13.5105 6.31985 13.5025 6.28902 14.8931 6.03468C14.981 6.01156 15.045 5.96532 15.045 5.87283C15.045 5.77264 14.981 5.7264 14.8931 5.71098C13.5025 5.44123 13.5425 5.4104 13.2627 4.13873C13.2468 4.05395 13.1908 4 13.1029 4C13.007 4 12.951 4.05395 12.9351 4.13873C12.6553 5.4104 12.7033 5.44123 11.3047 5.71098C11.2168 5.7264 11.1608 5.77264 11.1608 5.87283C11.1608 5.96532 11.2168 6.01156 11.3047 6.03468C12.7033 6.30443 12.6793 6.31985 12.9351 7.59923C12.951 7.68401 13.007 7.74566 13.1029 7.74566ZM16.9231 12.9557C17.0669 12.9557 17.1708 12.8555 17.1948 12.7091C17.4505 10.6435 17.5624 10.5973 19.7283 10.2582C19.8961 10.2351 20 10.1503 20 9.99615C20 9.84971 19.8961 9.76493 19.7602 9.7341C17.5784 9.33333 17.4505 9.34875 17.1948 7.28324C17.1708 7.1368 17.0669 7.03661 16.9231 7.03661C16.7792 7.03661 16.6673 7.1368 16.6513 7.27553C16.3796 9.36416 16.2997 9.43353 14.0859 9.7341C13.95 9.75723 13.8462 9.84971 13.8462 9.99615C13.8462 10.1426 13.95 10.2351 14.0859 10.2582C16.2997 10.6667 16.3716 10.6667 16.6513 12.7245C16.6673 12.8555 16.7792 12.9557 16.9231 12.9557ZM10.9051 20C13.7902 20 16.1319 18.6127 17.2028 16.2158C17.3227 15.9383 17.3067 15.7071 17.1628 15.5607C17.043 15.4528 16.8272 15.4297 16.5794 15.5222C15.9241 15.7765 15.1648 15.8921 14.2937 15.8921C10.6813 15.8921 8.33966 13.711 8.33966 10.2813C8.33966 9.41041 8.50749 8.43931 8.77922 7.90751C8.92308 7.63006 8.91508 7.39884 8.7952 7.25241C8.65934 7.09827 8.41159 7.07514 8.09191 7.19846C5.63836 8.13873 4 10.6127 4 13.4412C4 17.1869 6.86114 20 10.9051 20Z", fill: "#6C86AD" }))),
-    [ColorMode.Light]: () => (React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    [ColorMode.Light]: () => (React.createElement("svg", { fill: "none", height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { d: "M12 9C13.65 9 15 10.35 15 12C15 13.65 13.65 15 12 15C10.35 15 9 13.65 9 12C9 10.35 10.35 9 12 9ZM12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM2 13H4C4.55 13 5 12.55 5 12C5 11.45 4.55 11 4 11H2C1.45 11 1 11.45 1 12C1 12.55 1.45 13 2 13ZM20 13H22C22.55 13 23 12.55 23 12C23 11.45 22.55 11 22 11H20C19.45 11 19 11.45 19 12C19 12.55 19.45 13 20 13ZM11 2V4C11 4.55 11.45 5 12 5C12.55 5 13 4.55 13 4V2C13 1.45 12.55 1 12 1C11.45 1 11 1.45 11 2ZM11 20V22C11 22.55 11.45 23 12 23C12.55 23 13 22.55 13 22V20C13 19.45 12.55 19 12 19C11.45 19 11 19.45 11 20ZM5.99 4.58C5.6 4.19 4.96 4.19 4.58 4.58C4.19 4.97 4.19 5.61 4.58 5.99L5.64 7.05C6.03 7.44 6.67 7.44 7.05 7.05C7.43 6.66 7.44 6.02 7.05 5.64L5.99 4.58ZM18.36 16.95C17.97 16.56 17.33 16.56 16.95 16.95C16.56 17.34 16.56 17.98 16.95 18.36L18.01 19.42C18.4 19.81 19.04 19.81 19.42 19.42C19.81 19.03 19.81 18.39 19.42 18.01L18.36 16.95ZM19.42 5.99C19.81 5.6 19.81 4.96 19.42 4.58C19.03 4.19 18.39 4.19 18.01 4.58L16.95 5.64C16.56 6.03 16.56 6.67 16.95 7.05C17.34 7.43 17.98 7.44 18.36 7.05L19.42 5.99ZM7.05 18.36C7.44 17.97 7.44 17.33 7.05 16.95C6.66 16.56 6.02 16.56 5.64 16.95L4.58 18.01C4.19 18.4 4.19 19.04 4.58 19.42C4.97 19.8 5.61 19.81 5.99 19.42L7.05 18.36Z", fill: "#6C86AD" }))),
 };
 export const InverseContext = React.createContext(null);

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

@@ -35,12 +35,12 @@ export function Modal(props) {
     }, [config.prefixCls, prefixCls, visible]);
     return (React.createElement(Dialog, { className: classNames(className, {
             [`${rootCls}-centered`]: centered && !full,
-        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: afterClose, classNames: {
+        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, afterClose: afterClose, classNames: {
             ...restProps.classNames,
             wrapper: classNames({
                 [`${rootCls}-full`]: full && !centered,
             }),
-        }, closable: false, closeIcon: null },
+        }, closable: false, closeIcon: null, onClose: onClose },
         closable && (closeIcon || (React.createElement(Close, { className: classNames({
                 [`${rootCls}-close-default`]: !full,
                 [`${rootCls}-close-full`]: full,

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { type NavItemGroupType } from '../../../components/Nav/types';
 export interface NavItemGroupProps extends Omit<NavItemGroupType, 'children' | 'type' | 'label'> {
-    title?: React.ReactNode;
     children?: React.ReactNode;
     /** @private Internal filled key. Do not set it directly */
     eventKey?: string;
+    title?: React.ReactNode;
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 export interface HeaderProps {
     children: React.ReactNode;
     className?: string;
-    style?: React.CSSProperties;
     /** @private Internal filled key. Do not set it directly */
     eventKey?: string;
+    style?: React.CSSProperties;
     /** @private Do not use. Private warning empty usage */
     warnKey?: boolean;
 }

package/dist/esm/components/Nav/Item/InternalNavItem.js

@@ -70,11 +70,11 @@ export function InternalNavItem({ children, className, disabled, eventKey, itemI
     if (role === 'option') {
         optionRoleProps['aria-selected'] = selected || false;
     }
-    let renderNode = (React.createElement(LegacyNavItem, { "aria-disabled": disabled, className: classNames({
+    let renderNode = (React.createElement(LegacyNavItem, { ref: legacyNavItemRef, "aria-disabled": disabled, className: classNames({
             [`${config.prefixCls}-active`]: selected,
             [`${config.prefixCls}-disabled`]: disabled,
             [`${config.prefixCls}-hover`]: active,
-        }, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef, ref: legacyNavItemRef, role: role === null ? 'none' : role || 'menuitem', style: {
+        }, className), component: "li", "data-nav-id": overflowDisabled && domDataId ? null : domDataId, elementRef: elementRef, role: role === null ? 'none' : role || 'menuitem', style: {
             ...directionStyle,
             ...style,
         }, tabIndex: disabled ? null : -1, ...optionRoleProps, ...restProps, ...activeProps, onClick: onInternalClick, onFocus: onInternalFocus, onKeyDown: onInternalKeyDown },
@@ -88,7 +88,6 @@ export function InternalNavItem({ children, className, disabled, eventKey, itemI
             itemIcon,
             role,
             style,
-            // eslint-disable-next-line sort-keys
             onClick,
             onFocus,
             onKeyDown,

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

@@ -3,6 +3,23 @@ import * as React from 'react';
 import { type BuiltinPlacements, type ItemType, type NavClickEventHandler, type NavMode, type NavModifier, type NavRef, type RenderIconType, type SelectEventHandler, type TriggerSubNavAction } from '../../components/Nav/types';
 import { type Direction } from '../../types';
 export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
+        selected: boolean;
+    }) => React.ReactElement;
+    /**
+     * @private Only used for `pro-layout`. Do not use in your prod directly,
+     * and we do not promise any compatibility for this.
+     */
+    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
+        active: boolean;
+        disabled: boolean;
+        open: boolean;
+        selected: boolean;
+    }) => React.ReactElement;
     activeKey?: string;
     builtinPlacements?: BuiltinPlacements;
     children?: React.ReactNode;
@@ -39,22 +56,5 @@ export interface NavProps extends Omit<React.HTMLAttributes<HTMLUListElement>, '
     onDeselect?: SelectEventHandler;
     onOpenChange?: (openKeys: string[]) => void;
     onSelect?: SelectEventHandler;
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderMenuItem?: (originNode: React.ReactElement, menuItemProps: any, stateProps: {
-        selected: boolean;
-    }) => React.ReactElement;
-    /**
-     * @private Only used for `pro-layout`. Do not use in your prod directly,
-     * and we do not promise any compatibility for this.
-     */
-    _internalRenderSubMenuItem?: (originNode: React.ReactElement, subMenuItemProps: any, stateProps: {
-        selected: boolean;
-        open: boolean;
-        active: boolean;
-        disabled: boolean;
-    }) => React.ReactElement;
 }
 export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<NavRef>>;