@antscorp/antsomi-ui 2.0.118 → 3.0.0-beta.1

package/es/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,8 +1,74 @@
-import { DatePicker as AntdDatePicker } from 'antd';
-import { AdvancedPicker } from './components/AdvancedPicker';
-import { AdvancedRangePicker } from './components/AdvancedRangePicker';
-export type TDatePicker = typeof AntdDatePicker & {
-    AdvancedPicker: typeof AdvancedPicker;
-    AdvancedRangePicker: typeof AdvancedRangePicker;
+/// <reference types="react" />
+import { Dayjs } from 'dayjs';
+import { DatePickerProps } from 'antd';
+export declare const DatePicker: ((props: DatePickerProps<Dayjs>) => import("react/jsx-runtime").JSX.Element) & {
+    AdvancedPicker: import("react").ForwardRefExoticComponent<import("./components/AdvancedPicker").AdvancedPickerProps & import("react").RefAttributes<import("./components/AdvancedPicker").AdvancedPickerHandle>>;
+    AdvancedRangePicker: import("react").FC<import("./components/AdvancedRangePicker/AdvancedRangePicker").AdvancedRangePickerProps>;
+    displayName?: string | undefined;
+    WeekPicker: (<ValueType = Dayjs>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Dayjs, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs>, "picker">, ValueType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    MonthPicker: (<ValueType_1 = Dayjs>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Dayjs, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs>, "picker">, ValueType_1>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    YearPicker: (<ValueType_2 = Dayjs>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Dayjs, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs>, "picker">, ValueType_2>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    RangePicker: import("react").ForwardRefExoticComponent<Omit<import("rc-picker").RangePickerProps<Dayjs>, "classNames" | "styles" | "locale" | "generateConfig" | "hideHeader"> & {
+        locale?: import("antd/es/date-picker/generatePicker").PickerLocale | undefined;
+        size?: import("antd/es/button").ButtonSize;
+        placement?: "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
+        bordered?: boolean | undefined;
+        status?: "" | "warning" | "error" | undefined;
+        variant?: "filled" | "outlined" | "borderless" | "underlined" | undefined;
+        dropdownClassName?: string | undefined;
+        popupClassName?: string | undefined;
+        rootClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+        styles?: import("antd/es/date-picker/generatePicker/interface").PickerStyles | undefined;
+        classNames?: import("antd/es/date-picker/generatePicker/interface").PickerClassNames | undefined;
+    } & import("react").RefAttributes<import("rc-picker").PickerRef>>;
+    TimePicker: (<ValueType_3 = Dayjs>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Dayjs, Omit<import("antd/es/date-picker/generatePicker/interface").GenericTimePickerProps<Dayjs>, "picker">, ValueType_3>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    QuarterPicker: (<ValueType_4 = Dayjs>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<Dayjs, Omit<import("antd/es/date-picker/generatePicker").PickerProps<Dayjs>, "picker">, ValueType_4>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+    _InternalRangePanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+    generatePicker: <DateType extends import("antd/es/_util/type").AnyObject = import("antd/es/_util/type").AnyObject>(generateConfig: import("rc-picker/lib/generate").GenerateConfig<DateType>) => (<ValueType_5 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, import("antd/es/date-picker/generatePicker").PickerProps<DateType>, ValueType_5>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    } & {
+        displayName?: string | undefined;
+        WeekPicker: (<ValueType_6 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, Omit<import("antd/es/date-picker/generatePicker").PickerProps<DateType>, "picker">, ValueType_6>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+            displayName?: string | undefined;
+        };
+        MonthPicker: (<ValueType_7 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, Omit<import("antd/es/date-picker/generatePicker").PickerProps<DateType>, "picker">, ValueType_7>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+            displayName?: string | undefined;
+        };
+        YearPicker: (<ValueType_8 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, Omit<import("antd/es/date-picker/generatePicker").PickerProps<DateType>, "picker">, ValueType_8>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+            displayName?: string | undefined;
+        };
+        RangePicker: import("react").ForwardRefExoticComponent<Omit<import("rc-picker").RangePickerProps<DateType>, "classNames" | "styles" | "locale" | "generateConfig" | "hideHeader"> & {
+            locale?: import("antd/es/date-picker/generatePicker").PickerLocale | undefined;
+            size?: import("antd/es/button").ButtonSize;
+            placement?: "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
+            bordered?: boolean | undefined;
+            status?: "" | "warning" | "error" | undefined;
+            variant?: "filled" | "outlined" | "borderless" | "underlined" | undefined;
+            dropdownClassName?: string | undefined;
+            popupClassName?: string | undefined;
+            rootClassName?: string | undefined;
+            popupStyle?: import("react").CSSProperties | undefined;
+            styles?: import("antd/es/date-picker/generatePicker/interface").PickerStyles | undefined;
+            classNames?: import("antd/es/date-picker/generatePicker/interface").PickerClassNames | undefined;
+        } & import("react").RefAttributes<import("rc-picker").PickerRef>>;
+        TimePicker: (<ValueType_9 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, Omit<import("antd/es/date-picker/generatePicker/interface").GenericTimePickerProps<DateType>, "picker">, ValueType_9>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+            displayName?: string | undefined;
+        };
+        QuarterPicker: (<ValueType_10 = DateType>(props: import("antd/es/date-picker/generatePicker/interface").PickerPropsWithMultiple<DateType, Omit<import("antd/es/date-picker/generatePicker").PickerProps<DateType>, "picker">, ValueType_10>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+            displayName?: string | undefined;
+        };
+    };
 };
-export declare const DatePicker: TDatePicker;
+export type TDatePicker = typeof DatePicker;

package/es/components/molecules/DatePicker/DatePicker.js

@@ -5,9 +5,10 @@ import { AdvancedPicker } from './components/AdvancedPicker';
 import { AdvancedRangePicker } from './components/AdvancedRangePicker';
 import { EventIcon } from '@antscorp/antsomi-ui/es/components/icons';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const DatePicker = AntdDatePicker;
-DatePicker.defaultProps = {
-    suffixIcon: _jsx(EventIcon, { width: 20, height: 20, color: globalToken?.bw8 }),
-};
-DatePicker.AdvancedPicker = AdvancedPicker;
-DatePicker.AdvancedRangePicker = AdvancedRangePicker;
+const DEFAULT_SUFFIX_ICON = _jsx(EventIcon, { width: 20, height: 20, color: globalToken?.bw8 });
+const DatePickerWrapper = (props) => (_jsx(AntdDatePicker, { suffixIcon: DEFAULT_SUFFIX_ICON, ...props }));
+export const DatePicker = Object.assign(DatePickerWrapper, {
+    ...AntdDatePicker,
+    AdvancedPicker,
+    AdvancedRangePicker,
+});

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -24,6 +24,7 @@ import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeade
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
+import { toNumber } from 'lodash';
 const isDisabledSpecificTime = (current, info, disabledTime, date) => {
     if (typeof current !== 'number' || !disabledTime)
         return false;
@@ -39,6 +40,13 @@ const isDisabledSpecificTime = (current, info, disabledTime, date) => {
     }
 };
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
+const isCustomPickerKey = (v) => v === 'WEEK' || v === 'DAY_OF_WEEK' || v === 'MONTH_DAY' || v === 'DAY';
+const TIME_UNIT_SETTERS = {
+    hour: (d, v) => d.hour(v),
+    minute: (d, v) => d.minute(v),
+    second: (d, v) => d.second(v),
+    millisecond: (d, v) => d.millisecond(v),
+};
 const { useToken } = theme;
 const { Text } = Typography;
 export const AdvancedPicker = React.forwardRef((props, ref) => {
@@ -105,14 +113,16 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
         }
         if (showCalculationTypeCondition && option.dateType) {
             if (showCalculationTypeCondition.dateType[option.dateType.value]) {
-                const draftCalculationTypes = showCalculationTypeCondition.dateType[option.dateType.value]?.map(dateType => CALCULATION_TYPES.find(({ value }) => value === dateType));
-                if (!draftCalculationTypes.find(({ value }) => value === option.calculationType.value)) {
+                const draftCalculationTypes = (showCalculationTypeCondition.dateType[option.dateType.value] ?? []).flatMap(dateType => {
+                    const match = CALCULATION_TYPES.find(({ value }) => value === dateType);
+                    return match ? [match] : [];
+                });
+                const firstCalcType = draftCalculationTypes[0];
+                if (firstCalcType &&
+                    !draftCalculationTypes.find(({ value }) => value === option.calculationType.value)) {
                     setState(state => ({
                         ...state,
-                        option: {
-                            ...state.option,
-                            calculationType: draftCalculationTypes[0],
-                        },
+                        option: { ...state.option, calculationType: firstCalcType },
                     }));
                 }
                 return draftCalculationTypes;
@@ -257,10 +267,7 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
-    const disableDate = useCallback((current) => typeof current === 'number'
-        ? current > dayjs(disableAfterDate, format).date() ||
-            current < dayjs(disableBeforeDate, format).date()
-        : current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format), [disableAfterDate, disableBeforeDate, format]);
+    const disableDate = useCallback((current) => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format), [disableAfterDate, disableBeforeDate, format]);
     const toggleOpenDropdown = (isOpen) => {
         try {
             setState(() => ({
@@ -340,32 +347,34 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
         const getCellSelected = (item, index) => {
             switch (valueType) {
                 case 'WEEK':
-                    return currWeek === item;
+                    return typeof item === 'number' && currWeek === item;
                 case 'DAY_OF_WEEK':
                     return index === currDay;
                 case 'MONTH_DAY':
-                    return item === currDayOfMonth && currMonth === currMonthSelected;
+                    return (typeof item === 'number' && item === currDayOfMonth && currMonth === currMonthSelected);
                 case 'DAY':
-                    return item === currDayOfMonth;
+                    return typeof item === 'number' && item === currDayOfMonth;
                 default:
                     return false;
             }
         };
         const getNewDate = (item, index) => {
+            const n = typeof item === 'number' ? item : 0;
             switch (valueType) {
                 case 'WEEK':
-                    return dayjs(date).isoWeek(item);
+                    return dayjs(date).isoWeek(n);
                 case 'DAY_OF_WEEK':
                     return dayjs(date).day(index);
                 case 'MONTH_DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(item);
+                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(n);
                 case 'DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(item);
+                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(n);
                 default:
                     return dayjs(date);
             }
         };
-        return (_jsxs("div", { style: contentStyle, ref: refDropdown, children: [_jsx(DropdownHeader, { className: "dropdown-header", children: _jsx(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, operatorKey: operatorKey }) }), _jsxs(DropdownContent, { className: "dropdown-content", children: [renderDateTypeOptions(), isShowFixed ? (_jsxs(_Fragment, { children: [valueType === 'MONTH_DAY' ? (_jsxs("div", { className: "month-controller", children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }), MONTH_LABEL_FULL[currMonthSelected], _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) })] })) : null, _jsx("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType) ? ' day-of-month-container' : ''}`, children: customPickerArr[valueType].map((item, index) => (_jsx("div", { className: clsx('custom-picker-item', {
+        const pickerItems = isCustomPickerKey(valueType) ? customPickerArr[valueType] : [];
+        return (_jsxs("div", { style: contentStyle, ref: refDropdown, children: [_jsx(DropdownHeader, { className: "dropdown-header", children: _jsx(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, operatorKey: operatorKey }) }), _jsxs(DropdownContent, { className: "dropdown-content", children: [renderDateTypeOptions(), isShowFixed ? (_jsxs(_Fragment, { children: [valueType === 'MONTH_DAY' ? (_jsxs("div", { className: "month-controller", children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }), MONTH_LABEL_FULL[currMonthSelected], _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) })] })) : null, _jsx("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType) ? ' day-of-month-container' : ''}`, children: pickerItems.map((item, index) => (_jsx("div", { className: clsx('custom-picker-item', {
                                             'custom-picker-item-selected': getCellSelected(item, index),
                                         }), onClick: () => {
                                             const newDate = getNewDate(item, index);
@@ -376,14 +385,18 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
                                         }, children: item }, `day_${item}`))) })] })) : (_jsxs(_Fragment, { children: [_jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationTypes, value: option.calculationType.value, onChange: value => {
                                         const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
                                         onChangeOption({ calculationType });
-                                    } }), _jsx(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => onChangeOption({ value: Math.floor(value) }) }), _jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationDates, value: option.calculationDate.value, onChange: value => {
+                                    } }), _jsx(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => {
+                                        if (typeof toNumber(value) === 'number') {
+                                            onChangeOption({ value: Math.floor(toNumber(value)) });
+                                        }
+                                    } }), _jsx(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationDates, value: option.calculationDate.value, onChange: value => {
                                         const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
                                         onChangeOption({ calculationDate });
                                     } })] })), _jsx(ErrorMessage, { errorMessage: errorMessage })] }), renderDropdownFooter()] }));
     };
     const cellRender = useCallback((current, info) => {
         const isDisabledTime = isDisabledSpecificTime(current, info, disabledTime, dayjs(date));
-        const isDisableDate = disableDate(current) && info.type === 'date';
+        const isDisableDate = info.type === 'date' && dayjs.isDayjs(current) && disableDate(current);
         return (_jsx("div", { className: "antsomi-picker-cell-inner", style: {
                 pointerEvents: 'all',
                 width: '100%',
@@ -404,11 +417,13 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
                 if (info.type === 'time' && typeof current === 'number') {
                     e.preventDefault();
                     e.stopPropagation();
-                    if (info.subType && info.subType !== 'meridiem') {
-                        setState(state => ({
-                            ...state,
-                            date: dayjs(date)[info.subType](current).format(format),
-                        }));
+                    if (info.subType && info.subType !== 'meridiem' && typeof current === 'number') {
+                        const setter = TIME_UNIT_SETTERS[info.subType];
+                        if (setter)
+                            setState(state => ({
+                                ...state,
+                                date: setter(dayjs(date), current).format(format),
+                            }));
                     }
                     return;
                 }
@@ -422,9 +437,14 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
                 // onChangeDatePicker(current);
             }, children: getCellRender(current, valueType, info) }));
     }, [valueType, format, date, disabledTime, disableDate]);
+    const _pickerTitle = React.useRef(selectedDateTitle);
+    _pickerTitle.current = selectedDateTitle;
+    const _pickerToggle = React.useRef(toggleOpenDropdown);
+    _pickerToggle.current = toggleOpenDropdown;
+    const PickerCustomInput = React.useRef(() => (_jsx(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: _pickerTitle.current, onClick: () => _pickerToggle.current() }))).current;
     if (isViewMode)
         return (_jsxs(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: refDropdown, children: [!!label && typeof label === 'string' ? (_jsx(Text, { style: { color: '#666666' }, children: label })) : (label), _jsx("span", { className: "date-picker__title--view-mode", children: selectedDateTitle })] }));
-    return (_jsxs(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", children: [!!label && typeof label === 'string' ? (_jsx(Text, { style: { color: '#666666' }, children: label })) : (label), isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (_jsx(Tooltip, { title: selectedDateTitle, children: _jsx(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: { textOverflow: 'ellipsis', ...inputStyle }, status: errorMessage ? 'error' : '', inputRender: () => (_jsx(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+    return (_jsxs(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", children: [!!label && typeof label === 'string' ? (_jsx(Text, { style: { color: '#666666' }, children: label })) : (label), isShowFixed && !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (_jsx(Tooltip, { title: selectedDateTitle, children: _jsx(DatePicker, { disabled: disabled, open: !disabled && isOpen, styles: { popup: { root: popupStyle } }, allowClear: false, inputReadOnly: true, style: { textOverflow: 'ellipsis', ...inputStyle }, status: errorMessage ? 'error' : '', components: { input: PickerCustomInput }, value: currDate, disabledDate: disableDate, format: formatDisplay, showNow: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
                         '--error': errorMessage,
                         'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
                         'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
@@ -439,7 +459,7 @@ export const AdvancedPicker = React.forwardRef((props, ref) => {
                         }
                         : undefined, suffixIcon: _jsx(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',
-                        }, onClick: () => toggleOpenDropdown(), children: _jsx(EventIcon, { width: 20, height: 20, fill: errorMessage ? THEME.token?.colorError : THEME.token?.bw10 }) }), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() }) })) : (_jsx(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], 
+                        }, onClick: () => toggleOpenDropdown(), children: _jsx(EventIcon, { width: 20, height: 20, fill: errorMessage ? THEME.token?.colorError : THEME.token?.bw10 }) }), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() }) })) : (_jsx(Dropdown, { disabled: disabled, open: !disabled && isOpen, popupRender: dropdownRender, trigger: ['click'], 
                 // onOpenChange={(open, info) => {
                 //   console.log('🚀🚀🚀 ', 4, { open, info });
                 //   toggleOpenDropdown();

package/es/components/molecules/DatePicker/components/AdvancedPicker/types.d.ts

@@ -1,3 +1,4 @@
+import type { DatePickerProps } from 'antd';
 import { VALUE_TYPES } from './constants';
 export type TOption = {
     dateType: TDateType;
@@ -34,3 +35,22 @@ export type TAdvancedType = 'startDate' | 'endDate';
  * @type MINUTE -> 'MM'
  */
 export type ValueTypes = (typeof VALUE_TYPES)[keyof typeof VALUE_TYPES];
+/**
+ * Subset of `rc-picker`'s `PanelMode`. We previously imported this from
+ * `rc-picker/es/interface`, but that deep path is no longer resolvable
+ * from the project root in antd 5.29.3 (rc-picker is now nested under
+ * antd's own node_modules). The alias is kept here so callers can keep
+ * using a strongly-typed cellRender signature without taking a hard
+ * dependency on rc-picker.
+ */
+export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade';
+/**
+ * `info` shape passed to `cellRender` callbacks on antd `DatePicker`
+ * (antd 5.29.3). Extracted via `Parameters` so it is always in sync
+ * with whatever antd exposes, without requiring a deep rc-picker import
+ * and without fragile conditional-type inference.
+ *
+ * The `_DateType` parameter is kept for call-site backward compat only
+ * (callers using `CellRenderInfo<Dayjs>` continue to compile).
+ */
+export type CellRenderInfo<_DateType = unknown> = Parameters<NonNullable<DatePickerProps['cellRender']>>[1];

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Dayjs } from 'dayjs';
-import type { CellRenderInfo } from 'rc-picker/es/interface';
+import type { CellRenderInfo } from './types';
 import { TAdvancedType, TCalculationDate, TDateType, TOperatorKey, ValueTypes } from './types';
 type DateTypeKey = Exclude<TDateType, 'fixed'>;
 /**
@@ -21,7 +21,7 @@ export declare const calculationDateAdvanced: (dateTypeKey?: DateTypeKey, operat
  * @param {ValueTypes} valueType type of value (get from component props)
  * @returns {number | string} label of cell according to valueType
  */
-export declare const getCellRender: (current: number | Dayjs, valueType: ValueTypes, info: Pick<CellRenderInfo<Dayjs>, 'type'>) => number | string;
+export declare const getCellRender: (current: number | string | Dayjs, valueType: ValueTypes, info: Pick<CellRenderInfo<Dayjs>, 'type'>) => number | string;
 /**
  * Get the type of calendar picker based on valueType
  * @param {ValueTypes} valueType type of value (get from component props)

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.js

@@ -53,6 +53,8 @@ export const calculationDateAdvanced = (dateTypeKey = 'today', operator = 'minus
 export const getCellRender = (current, valueType, info) => {
     if (typeof current === 'number')
         return current;
+    if (typeof current === 'string')
+        return current;
     if (info.type === 'decade')
         return `${current.year()}-${current.year() + 10}`;
     if (info.type === 'year')

package/es/components/molecules/DatePickerV2/index.js

@@ -28,11 +28,15 @@ export const DatePickerV2 = props => {
             setFocused(focused);
         }
     }, [focused]);
-    return (_jsx(DatePickerWrapper, { children: _jsxs(Space, { direction: "vertical", size: 5, children: [_jsx(AntDatePicker, { ...restOf, onBlur: e => {
+    return (_jsx(DatePickerWrapper, { children: _jsxs(Space, { direction: "vertical", size: 5, children: [_jsx(AntDatePicker, { ...restOf, onBlur: (e, info) => {
                         if (!isFocused) {
                             setFocused(true);
                         }
-                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                        props.onBlur && props.onBlur(e);
+                        if (props.onBlur) {
+                            // antd 5.13+ widens onBlur to a PickerFocusEventHandler
+                            // `(e, info) => void` (info is unused here but required
+                            // by the type).
+                            props.onBlur(e, info);
+                        }
                     }, onChange: date => onChange('date-picker', date) }), requiredMsg ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8 }, children: requiredMsg })) : null] }) }));
 };

package/es/components/molecules/DisplayFormat/styled.d.ts

@@ -3,13 +3,14 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
+} & {
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
 export declare const ModalCustom: import("styled-components").StyledComponent<import("react").FC<import("../Modal").ModalProps> & {
     confirm: (props: import("antd").ModalFuncProps) => {
         destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        update: (configUpdate: import("antd/es/modal/confirm").ConfigUpdate) => void;
     };
     useModal: typeof import("antd/es/modal/useModal").default;
     success: import("antd/es/modal/confirm").ModalFunc;

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -129,10 +129,9 @@ export const DrawerDetail = props => {
         }, classNames: {
             body: 'drawer-detail-body',
             ...restClassNames,
-        }, contentWrapperStyle: {
-            transition: 'none',
-        }, maskStyle: {
-            transition: 'none',
+        }, styles: {
+            wrapper: { transition: 'none' },
+            mask: { transition: 'none' },
         }, destroyOnClose: destroyOnClose, ...restProps, children: [showCloseIcon && (_jsx("div", { className: "close-btn", ...restOfCloseIcon, onClick: e => {
                     onCloseIconClick(e);
                     onClose(e);

package/es/components/molecules/DrawerDetail/styled.d.ts

@@ -5,5 +5,7 @@ export declare const Content: import("styled-components").StyledComponent<"div",
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
 export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DrawerDetail/types.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import type { DrawerProps, MenuProps as AntdProps, FlexProps } from 'antd';
-import { ItemType } from 'antd/es/menu/hooks/useItems';
+import { ItemType } from 'antd/es/menu/interface';
 export type TDefaultSize = 'max' | 'min';
 export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'title'> {
     name?: string;

package/es/components/molecules/EditingList/styled.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const EditingListRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const EditingListRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledAddBtn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const StyledAddBtn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const AmountSelected: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/es/components/molecules/EmojiCollections/CommonCollection/index.js

@@ -93,7 +93,7 @@ const CommonCollection = ({ onEmojiClick, getPopupContainer }) => {
         });
         return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
     }, [emojiCollection, visibleCount, onScroll, onEmojiClick]);
-    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect, getPopupContainer: getPopupContainer })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
+    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), style: { minWidth: 280 }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect, getPopupContainer: getPopupContainer })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
 };
 CommonCollection.defaultProps = {
     onEmojiClick: () => { },

package/es/components/molecules/EmojiPopover/styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
+export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/tabs").TabsProps & import("react").RefAttributes<import("antd/es/tabs").TabsRef>> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;
 }, never>;
-export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<import("antd/es/tooltip").TooltipRef>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;

package/es/components/molecules/EmptyData/styled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const EmptyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const EmptyWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const EmptyIcon: import("styled-components").StyledComponent<"div", any, {
     $size?: TUISize | undefined;
 }, never>;

package/es/components/molecules/FontSizeInput/components/FontSizeControl.js

@@ -1,14 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputNumber } from 'antd';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { ControlButton, InputRoot } from '../styled';
 import { CLS } from '../utils';
 import clsx from 'clsx';
 import { AddIcon, MinusIcon } from '../../../icons';
-export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(ControlButton, { type: "text", onClick: onDecrement, disabled: rest.disabled ||
-                typeof rest.value !== 'number' ||
-                typeof rest.min !== 'number' ||
-                rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: ref, className: clsx(CLS.Input, rest.className), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
-                typeof rest.value !== 'number' ||
-                typeof rest.max !== 'number' ||
-                rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] })));
+export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => {
+    const inputElRef = useRef(null);
+    // antd 5.13+ widened InputNumber's ref to a richer handle
+    // (`InputNumberRef` from rc-input-number). We forward the inner
+    // HTMLInputElement to the consumer's ref so the public API stays
+    // a plain HTMLInputElement handle, while letting the inner ref
+    // satisfy the stricter InputNumber typing.
+    const handleInnerRef = useCallback((node) => {
+        inputElRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (_jsxs(InputRoot, { children: [_jsx(ControlButton, { type: "text", onClick: onDecrement, disabled: rest.disabled ||
+                    typeof rest.value !== 'number' ||
+                    typeof rest.min !== 'number' ||
+                    rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: handleInnerRef, className: clsx(CLS.Input, rest.className), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
+                    typeof rest.value !== 'number' ||
+                    typeof rest.max !== 'number' ||
+                    rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] }));
+});
+FontSizeControl.displayName = 'FontSizeControl';

package/es/components/molecules/FontSizeInput/styled.d.ts

@@ -2,6 +2,6 @@
 export declare const StyledListFont: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const StyledListItemFont: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const InputRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+export declare const ControlButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

package/es/components/molecules/ImageEditor/styled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const StageWrapperStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+export declare const StageWrapperStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, {
     $width: number;
     $height: number;
 }, never>;

package/es/components/molecules/InputSelectAttribute/index.js

@@ -113,8 +113,8 @@ const InputSelectAttribute = (props) => {
                                 }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], value?.code) })) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
-            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
-                    ...(openModal ? { display: 'none' } : {}),
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, styles: {
+                    popup: { root: { ...(openModal ? { display: 'none' } : {}) } },
                 } }));
         }
         return element;

package/es/components/molecules/ItemNotFound/styled.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const ContainerModule: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+export declare const ContainerModule: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>, any, {
     $height: string;
 }, never>;

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -395,7 +395,7 @@ export function MatchesAny(props) {
     return (_jsx(ConfigProvider, { theme: MATCHES_ANY_THEME, children: _jsxs(MatchesAnyWrapper, { ...restOfProps, vertical: true, justify: "space-between", children: [_jsxs(Flex, { style: { width: '100%', height: '100%' }, children: [renderSelectList(), renderSelectedList()] }), _jsxs(Flex, { className: "matches-any__footer", align: "center", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 10, children: [_jsx(Button, { type: "primary", disabled: isDisableApply, onClick: onClickApply, children: translate(translationsLocale._ACT_APPLY) }), _jsx(Button, { onClick: () => onCancel(), children: translate(translationsLocale._ACT_CANCEL) }), _jsxs("div", { children: [isApply && (maxItemsError || itemOverMaxLength) && (_jsx(Typography, { style: { color: globalToken?.colorError }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT) })), isExistString && (_jsx(Typography, { style: { color: globalToken?.orange6 }, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_VAL_NUM_VAL) }))] }), isApply && itemOverMaxLength && (_jsx(Button, { type: "text", onClick: handleClickRemoveInvalid, children: translate(translationsLocale._OPERATOR_MATCH_ANY_EX_VALUE_LIMIT_REMOVE_INV) }))] }), showExtendValue && (_jsx(ExtendValuePopup, { getPopupContainer: trigger => trigger.parentElement || document.body, shouldFilterNumber: shouldFilterNumber, onApply: onApplyExtendValue, children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-empty-flag" }), children: t(translations.extendValue.title).toString() }) }))] })] }) }));
 }
 export function MatchesAnySelect(props) {
-    const { dataType, maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
+    const { dataType, maxSelectedItem, maxLengthEachItem, placeholder = 'Select an item', styles, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, selectedTreeData, error, onChangeSearch, onChange = () => { }, onLoadMore, ...restProps } = props;
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -426,9 +426,8 @@ export function MatchesAnySelect(props) {
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => ({ ...prev, isOpenPopover: !isOpenPopover })), zIndex: 1400, ...popoverProps, children: _jsxs(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems?.map(item => item.title).join(', ') : ''}`, overlayInnerStyle: {
                 maxHeight: 300,
                 overflow: 'auto',
-            }, children: [_jsx(Select, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, dropdownStyle: {
-                        ...dropdownStyle,
-                        display: 'none',
-                        padding: 0,
-                    }, loading: loading, status: props.status || (error ? 'error' : undefined), ...restProps }), !!error && (_jsx(Text, { className: "ant-form-item-explain-error", type: "danger", children: error }))] }) }));
+            }, children: [_jsx(Select, { title: "", value: value, placeholder: placeholder, popupMatchSelectWidth: 700, styles: {
+                        ...styles,
+                        popup: { root: { display: 'none', padding: 0 } },
+                    }, loading: loading, status: props.status || (error ? 'error' : undefined), ...restProps }), !!error && (_jsx(Text, { className: "antsomi-form-item-explain-error", type: "danger", children: error }))] }) }));
 }