x-ui-design 0.5.73 → 0.5.75

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TRangePickerProps } from '../../../types/datepicker';
 import './style.css';
-declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onCalendarChange, style, className, separator, defaultValue, bordered }: TRangePickerProps) => React.JSX.Element;
+declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onOpenChange, onCalendarChange, style, className, separator, defaultValue, bordered }: TRangePickerProps) => React.JSX.Element;
 export default RangePicker;

package/dist/esm/types/types/datepicker.d.ts

@@ -33,6 +33,7 @@ export type TDatePickerProps = DefaultProps & {
     };
     onChange?: (date: RuleType | RuleType[], dateString: string | string[]) => void;
     onCalendarChange?: (date: RuleType | RuleType[], dateString: string | string[], info: BaseInfo) => void;
+    onOpenChange?: (open: boolean) => void;
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
     showToday?: boolean;
     inputReadOnly?: boolean;

package/dist/index.esm.js

@@ -2029,7 +2029,11 @@ const DatePicker = ({
       [`${prefixCls}-disabled`]: disabled
     }]),
     disabled: disabled,
-    onClick: () => setIsOpen(!isOpen)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpen(!isOpen);
+    }
   }, prefix || null, /*#__PURE__*/React.createElement("input", {
     size: INPUT_SIZE$1,
     disabled: disabled,
@@ -2060,25 +2064,49 @@ const DatePicker = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-nav-buttons`
   }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => setCurrentYear(y => y - 1)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setCurrentYear(y => y - 1);
+    }
   }, "\xAB"), /*#__PURE__*/React.createElement("button", {
-    onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1);
+    }
   }, "\u2039")), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-dropdown-selects`
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: `${prefixCls}-select`,
-    onClick: () => setViewMode('year')
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setViewMode('year');
+    }
   }, currentYear), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: `${prefixCls}-select`,
-    onClick: () => setViewMode('month')
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setViewMode('month');
+    }
   }, localeMonths[currentMonth])), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-nav-buttons`
   }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1);
+    }
   }, "\u203A"), /*#__PURE__*/React.createElement("button", {
-    onClick: () => setCurrentYear(y => y + 1)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setCurrentYear(y => y + 1);
+    }
   }, "\xBB"))), viewMode === 'day' && /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-grid day`
   }, localeWeekdays.map(day => /*#__PURE__*/React.createElement("div", {
@@ -2097,7 +2125,11 @@ const DatePicker = ({
         [`${prefixCls}-selected`]: isSelected,
         [`${prefixCls}-other-month`]: !current
       }]),
-      onClick: () => handleSelect(day, month, year),
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSelect(day, month, year);
+      },
       disabled: disabledDate?.(new Date(year, month, day), {
         from: undefined,
         to: undefined
@@ -2108,7 +2140,9 @@ const DatePicker = ({
   }, localeMonths.map((m, i) => /*#__PURE__*/React.createElement("button", {
     key: i,
     className: `${prefixCls}-month`,
-    onClick: () => {
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
       setCurrentMonth(i);
       setViewMode('day');
     },
@@ -2123,7 +2157,9 @@ const DatePicker = ({
       key: year,
       className: `${prefixCls}-year`,
       disabled: isYearDisabled(year),
-      onClick: () => {
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
         setCurrentYear(year);
         setViewMode('month');
       }
@@ -2139,7 +2175,9 @@ const DatePicker = ({
       from: undefined,
       to: undefined
     }),
-    onClick: () => {
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
       handleSelect(DateNow.getDate(), DateNow.getMonth(), DateNow.getFullYear());
     }
   }, locale?.today || 'Today')))));
@@ -2171,6 +2209,7 @@ const RangePicker = ({
   picker = 'date',
   locale,
   disabledDate,
+  onOpenChange,
   onCalendarChange,
   style = {},
   className = '',
@@ -2195,6 +2234,7 @@ const RangePicker = ({
     const handleClickOutside = event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
+        onOpenChange?.(false);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
@@ -2203,14 +2243,16 @@ const RangePicker = ({
   const handleSelect = date => {
     if (!selectedDates[0] || selectedDates[0] && selectedDates[1]) {
       setSelectedDates([date, null]);
-      onCalendarChange?.(date.toUTCString(), formatDate(date), {});
+      onCalendarChange?.([date.toUTCString(), undefined], [formatDate(date)], {});
     } else {
       const start = selectedDates[0];
       const end = date < start ? start : date;
       const begin = date < start ? date : start;
       setSelectedDates([begin, end]);
       onChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)]);
+      onCalendarChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)], {});
       setIsOpen(false);
+      onOpenChange?.(false);
     }
   };
   const isMonthDisabled = month => {
@@ -2245,25 +2287,49 @@ const RangePicker = ({
     }, all || !monthOffset ? /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-nav-buttons`
     }, /*#__PURE__*/React.createElement("button", {
-      onClick: () => setCurrentYear(y => y - 1)
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentYear(y => y - 1);
+      }
     }, "\xAB"), /*#__PURE__*/React.createElement("button", {
-      onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1)
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1);
+      }
     }, "\u2039")) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-dropdown-selects`
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: `${prefixCls}-select`,
-      onClick: () => setViewMode('year')
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setViewMode('year');
+      }
     }, baseYear), /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: `${prefixCls}-select`,
-      onClick: () => setViewMode('month')
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setViewMode('month');
+      }
     }, localeMonths[baseMonth])), all || monthOffset ? /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-nav-buttons`
     }, /*#__PURE__*/React.createElement("button", {
-      onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1)
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1);
+      }
     }, "\u203A"), /*#__PURE__*/React.createElement("button", {
-      onClick: () => setCurrentYear(y => y + 1)
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentYear(y => y + 1);
+      }
     }, "\xBB")) : /*#__PURE__*/React.createElement("span", null));
   };
   const renderCalendar = (monthOffset = 0, all) => {
@@ -2307,8 +2373,16 @@ const RangePicker = ({
           from: undefined,
           to: undefined
         }),
-        onClick: () => day && handleSelect(day),
-        onMouseEnter: () => day && setHoveredDate(day),
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          day && handleSelect(day);
+        },
+        onMouseEnter: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          day && setHoveredDate(day);
+        },
         className: clsx([`${prefixCls}-day`, {
           [`${prefixCls}-selected`]: isSelected,
           [`${prefixCls}-in-range`]: inRange,
@@ -2321,7 +2395,9 @@ const RangePicker = ({
     }, localeMonths.map((m, i) => /*#__PURE__*/React.createElement("button", {
       key: i,
       className: `${prefixCls}-month`,
-      onClick: () => {
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
         setCurrentMonth(i);
         setViewMode('day');
       },
@@ -2336,7 +2412,9 @@ const RangePicker = ({
         key: year,
         className: `${prefixCls}-year`,
         disabled: isYearDisabled(year),
-        onClick: () => {
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
           setCurrentYear(year);
           setViewMode('month');
         }
@@ -2364,19 +2442,24 @@ const RangePicker = ({
       [`${prefixCls}-disabled`]: disabled
     }]),
     disabled: disabled,
-    onClick: () => setIsOpen(!isOpen)
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpen(!isOpen);
+      onOpenChange?.(!isOpen);
+    }
   }, prefix, /*#__PURE__*/React.createElement("input", {
     readOnly: inputReadOnly,
     className: `${prefixCls}-selected-date`,
     placeholder: placeholder[0],
-    value: selectedDates[0] ? formatDate(selectedDates[0]) : ''
+    [inputReadOnly ? 'value' : 'defaultValue']: selectedDates[0] ? formatDate(selectedDates[0]) : ''
   }), /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-range-separator`
   }, separator || /*#__PURE__*/React.createElement(DateDistanceIcon, null)), /*#__PURE__*/React.createElement("input", {
     readOnly: inputReadOnly,
     className: `${prefixCls}-selected-date`,
     placeholder: placeholder[1],
-    value: selectedDates[1] ? formatDate(selectedDates[1]) : ''
+    [inputReadOnly ? 'value' : 'defaultValue']: selectedDates[1] ? formatDate(selectedDates[1]) : ''
   }), /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-icon`
   }, allowClear && (selectedDates[0] || selectedDates[1]) ? /*#__PURE__*/React.createElement("span", {