@broxus/react-uikit 0.16.0 → 0.16.1

package/dist/cjs/components/Button/Button.js

@@ -45,7 +45,7 @@ const Link_1 = require("../../components/Link");
 const defaultElement = 'button';
 exports.Button = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls || config.prefixCls, shape = config.button?.shape || config.buttonShape, size = config.button?.size || config.buttonSize, type, ...restProps } = props;
+    const { component = defaultElement, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -54,7 +54,7 @@ exports.Button = React.forwardRef((props, ref) => {
         }
         restProps.onClick?.(event);
     }, [restProps]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => (0, classnames_1.default)(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
@@ -62,9 +62,9 @@ exports.Button = React.forwardRef((props, ref) => {
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
-        return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));
     }
-    return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Button.displayName = 'Button';

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

@@ -21,16 +21,16 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     checkbox?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     control?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
     datePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
@@ -39,7 +39,7 @@ export type ConfigContextConsumedProps = {
         superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
     };
-    direction?: Direction | string;
+    direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
     getTooltipConfig: (props: string | TooltipOptions | undefined) => {
@@ -48,7 +48,7 @@ export type ConfigContextConsumedProps = {
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     radio?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     section?: {
@@ -58,7 +58,7 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     select?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
@@ -70,7 +70,7 @@ export type ConfigContextConsumedProps = {
         searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
     timePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         suffixIcon?: React.ReactNode;

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

@@ -43,11 +43,11 @@ require("./index.scss");
 require("../../index.scss");
 exports.Password = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { prefixCls = config.control?.prefixCls || config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
             const input = inputRef?.current?.getInputRef()?.current;

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

@@ -50,7 +50,7 @@ function fixControlledValue(value) {
 function useInput(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const inputRef = React.useRef(null);
-    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls || config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
+    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls ?? config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -87,6 +87,7 @@ function useInput(props) {
     }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
         ...restProps,
+        prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
@@ -94,16 +95,16 @@ function useInput(props) {
         onClear,
         onFocus,
         onKeyDown,
-    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    }), [restProps, prefixCls, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => (0, classnames_1.default)(controlCls, {
         [`${controlCls}-${restProps.type}`]: restProps.type,
         [`${controlCls}-${size}`]: size,
         [`${controlCls}-${state}`]: state,
         [`${controlCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
+        [`${prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
         controlCls,
         restProps.type,
@@ -113,8 +114,6 @@ function useInput(props) {
         state,
         direction,
         prefixCls,
-        config.control?.prefixCls,
-        config.prefixCls,
         focused,
         className,
     ]);

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

@@ -31,7 +31,7 @@
     box-sizing: border-box;
     color: var(--control-color);
     cursor: text;
-    display: inline-flex;
+    display: flex;
     font-size: inherit;
     min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);

package/dist/cjs/components/DatePicker/generatePurePicker.d.ts

@@ -0,0 +1,24 @@
+import { type GenerateConfig } from 'rc-picker/lib/generate';
+import * as React from 'react';
+import { type GenericTimePickerProps, type PickerPanelProps, type PickerPanelPropsWithMultiple } from '../../components/DatePicker/types';
+import { type AnyObject } from '../../types';
+export declare const generatePurePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+    DatePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, PickerPanelProps<DateType>, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    TimePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    WeekPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};

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

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePurePicker = void 0;
+const rc_picker_1 = require("rc-picker");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
+const constants_1 = require("../../components/DatePicker/constants");
+// eslint-disable-next-line camelcase
+const en_US_1 = __importDefault(require("../../components/DatePicker/locale/en_US"));
+const useComponents_1 = require("../../components/DatePicker/useComponents");
+const utils_1 = require("../../utils");
+const generatePurePicker = (generateConfig) => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    const getPanel = (picker, displayName) => {
+        const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
+        const Picker = React.forwardRef((props, ref) => {
+            const config = (0, ConfigProvider_1.useConfig)();
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { components, direction = ctxPickerConfig.direction || config.direction, locale = en_US_1.default, prefixCls = `${config.prefixCls}-datepicker`, ...restProps } = props;
+            const pickerRef = React.useRef(null);
+            const mergedPicker = picker || restProps.picker;
+            const mergedComponents = (0, useComponents_1.useComponents)(components);
+            React.useImperativeHandle(ref, () => pickerRef.current, []);
+            return (
+            // @ts-ignore
+            React.createElement(rc_picker_1.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: (0, utils_1.getMotionName)(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+        });
+        if (process.env.NODE_ENV !== 'production' && displayName) {
+            Picker.displayName = displayName;
+        }
+        return Picker;
+    };
+    const DatePicker = getPanel();
+    const MonthPicker = getPanel(constants_1.MONTH, constants_1.MONTHPICKER);
+    const QuarterPicker = getPanel(constants_1.QUARTER, constants_1.QUARTERPICKER);
+    // @ts-ignore
+    const TimePicker = getPanel(constants_1.TIME, constants_1.TIMEPICKER);
+    const WeekPicker = getPanel(constants_1.WEEK, constants_1.WEEKPICKER);
+    const YearPicker = getPanel(constants_1.YEAR, constants_1.YEARPICKER);
+    return { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker };
+};
+exports.generatePurePicker = generatePurePicker;

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

@@ -56,8 +56,8 @@ const generateSinglePicker = (generateConfig) => {
         const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
             const config = (0, ConfigProvider_1.useConfig)();
-            const ctxPickerConfig = config[consumerName] || {};
-            const { allowClear = true, builtinPlacements = placements_1.default, className, components, direction = ctxPickerConfig.direction || config.direction, getPopupContainer = config.getPopupContainer, locale = en_US_1.default, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
+            const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
+            const { allowClear = true, builtinPlacements = placements_1.default, className, components, direction = ctxPickerConfig.direction ?? config.direction, getPopupContainer = config.getPopupContainer, locale = en_US_1.default, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
             const pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = (0, useComponents_1.useComponents)(components);
@@ -89,7 +89,7 @@ const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: (0, classnames_1.default)(popupClassName),
-                    }, components: mergedComponents, directio: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: (0, utils_1.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: (0, utils_2.getMotionName)(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
+                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: (0, utils_1.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: (0, utils_2.getMotionName)(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
                         popup: { ...restProps.styles },
                     } })));
         });

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

@@ -1,9 +1,12 @@
 import { type DateTime } from 'luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 export interface DatePicker extends ReturnType<typeof generatePicker<DateTime>> {
     generatePicker: typeof generatePicker;
+    generatePurePicker: typeof generatePurePicker;
+    Panel: ReturnType<typeof generatePurePicker<DateTime>>;
 }
 export declare const DatePicker: DatePicker;

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

@@ -20,9 +20,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const luxon_1 = __importDefault(require("rc-picker/lib/generate/luxon"));
 const generatePicker_1 = require("../../components/DatePicker/generatePicker");
+const generatePurePicker_1 = require("../../components/DatePicker/generatePurePicker");
 require("./index.scss");
 __exportStar(require("../../components/DatePicker/locale"), exports);
 __exportStar(require("../../components/DatePicker/types"), exports);
 const InternalDatePicker = (0, generatePicker_1.generatePicker)(luxon_1.default);
 exports.DatePicker = InternalDatePicker;
 exports.DatePicker.generatePicker = generatePicker_1.generatePicker;
+exports.DatePicker.generatePurePicker = generatePurePicker_1.generatePurePicker;
+exports.DatePicker.Panel = (0, generatePurePicker_1.generatePurePicker)(luxon_1.default);

package/dist/cjs/components/DatePicker/index.scss

@@ -429,7 +429,7 @@
     z-index: 1;
 }
 
-.uk-datepicker-cell-disabled {
+.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -520,7 +520,7 @@
     color: var(--datepicker-cell-active-color);
 }
 
-.uk-datepicker-time-panel-cell-disabled .uk-datepicker-time-panel-cell-inner {
+.uk-datepicker-time-panel-cell-disabled:not(.uk-datepicker-time-panel-cell-selected) .uk-datepicker-time-panel-cell-inner {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -618,13 +618,13 @@
     --datepicker-header-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-font-size: var(--global-font-size);
     --datepicker-header-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-height: var(--global-control-height);
+    --datepicker-header-height: var(--global-control-large-height);
     --datepicker-body-padding-horizontal: var(--global-gutter);
     --datepicker-body-padding-vertical: var(--global-small-gutter);
     --datepicker-header-button-color: var(--global-muted-color);
     --datepicker-header-button-font-size: var(--global-font-size);
     --datepicker-header-button-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-button-line-height: #{$datepicker-button-line-height};
+    --datepicker-header-button-line-height: var(--global-control-large-height);
     --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-button-hover-color: var(--global-color);
     --datepicker-header-view-button-hover-color: var(--global-primary-color);
@@ -633,7 +633,7 @@
     --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
     --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
     --datepicker-cell-border-radius: var(--global-small-border-radius);
-    --datepicker-cell-height: #{$datepicker-cell-height};
+    --datepicker-cell-height: var(--global-control-height);
     --datepicker-cell-width: #{$datepicker-cell-width};
     --datepicker-cell-padding: var(--global-xsmall-gutter);
     --datepicker-cell-color: var(--global-color);

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

@@ -1,7 +1,9 @@
-import { type PickerRef, type PickerProps as RcPickerProps, type RangePickerProps as RcRangePickerProps } from 'rc-picker';
+import { type PickerRef, type PickerPanelProps as RcPickerPanelProps, type PickerProps as RcPickerProps, type RangePickerProps as RcRangePickerProps } from 'rc-picker';
 import { type Locale as RcPickerLocale } from 'rc-picker/lib/interface';
 import type * as React from 'react';
+import { type TimePickerLocale } from '../../components/TimePicker';
 import { type AnyObject, type SizeType, type StateType } from '../../types';
+import { PickerPanelRef } from 'rc-picker/lib/PickerPanel';
 export interface AdditionalPickerLocaleProps {
     dateFormat?: string;
     dateTimeFormat?: string;
@@ -22,7 +24,7 @@ export interface AdditionalPickerLocaleLangProps {
 }
 export interface PickerLocale extends AdditionalPickerLocaleProps {
     lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
-    timePickerLocale: any;
+    timePickerLocale: TimePickerLocale;
 }
 declare const DatePickerPlacements: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight"];
 type DatePickerPlacement = (typeof DatePickerPlacements)[number];
@@ -35,7 +37,10 @@ type InjectDefaultProps<Props> = Omit<Props, 'locale' | 'generateConfig' | 'hide
     size?: SizeType;
     state?: StateType;
 };
-export interface PickerProps<DateType extends AnyObject = any> extends InjectDefaultProps<RcPickerProps<DateType>> {
+export interface PickerProps<DateType extends AnyObject = AnyObject> extends InjectDefaultProps<RcPickerProps<DateType>> {
+}
+export interface PickerPanelProps<DateType extends AnyObject = AnyObject> extends Omit<RcPickerPanelProps<DateType>, 'locale' | 'generateConfig' | 'hideHeader'> {
+    locale?: PickerLocale;
 }
 export interface RangePickerProps<DateType extends AnyObject = AnyObject> extends InjectDefaultProps<RcRangePickerProps<DateType>> {
 }
@@ -47,4 +52,10 @@ export type PickerPropsWithMultiple<DateType extends AnyObject = any, InnerPicke
     onChange?: (date: ValueType, dateString: string | string[]) => void;
     onConfirm?: (date: ValueType) => void;
 };
+export type PickerPanelPropsWithMultiple<DateType extends AnyObject = any, InnerPickerProps extends PickerProps<DateType> = PickerProps<DateType>, ValueType = DateType> = Omit<InnerPickerProps, 'defaultValue' | 'value' | 'onChange' | 'onOk'> & React.RefAttributes<PickerPanelRef> & {
+    defaultValue?: ValueType | null;
+    value?: ValueType | null;
+    onChange?: (date: ValueType, dateString: string | string[]) => void;
+    onConfirm?: (date: ValueType) => void;
+};
 export {};

package/dist/cjs/styles/variables.scss

@@ -623,19 +623,14 @@ $countdown-separator-font-size-m:                               3rem !default; /
 // DatePicker
 // ========================================================================
 
-$datepicker-dropdown-background:                                $global-muted-background !default;
-$datepicker-dropdown-border:                                    $global-border !default;
-$datepicker-dropdown-border-style:                              $global-border-style !default;
-$datepicker-dropdown-border-width:                              $global-border-width !default;
-$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 $datepicker-button-font-size:                                   $global-font-size !default;
-$datepicker-button-line-height:                                 40px !default;
+$datepicker-button-line-height:                                 $global-control-large-height !default;
 $datepicker-button-padding-horizontal:                          $global-small-gutter !default;
 $datepicker-body-padding-vertical:                              $global-small-gutter !default;
 $datepicker-body-padding-horizontal:                            $global-gutter !default;
 $datepicker-cell-border-radius:                                 $global-small-border-radius !default;
-$datepicker-cell-height:                                        32px !default;
-$datepicker-cell-width:                                         44px !default;
+$datepicker-cell-height:                                        $global-control-height !default;
+$datepicker-cell-width:                                         $global-control-height * 1.05 !default;
 $datepicker-cell-padding:                                       $global-xsmall-gutter !default;
 $datepicker-cell-color:                                         $global-color !default;
 $datepicker-cell-hover-background:                              $global-secondary-background !default;
@@ -646,6 +641,11 @@ $datepicker-cell-disabled-color:                                $global-muted-co
 $datepicker-time-column-height:                                 252px !default;
 $datepicker-time-column-width:                                  60px !default;
 $datepicker-time-cell-height:                                   28px !default;
+$datepicker-dropdown-background:                                $global-muted-background !default;
+$datepicker-dropdown-border:                                    $global-border !default;
+$datepicker-dropdown-border-style:                              $global-border-style !default;
+$datepicker-dropdown-border-width:                              $global-border-width !default;
+$datepicker-dropdown-border-radius:                             $global-border-radius !default;
 
 
 // Description list