x-ui-design 0.5.74 → 0.5.76

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, ref, }: TRangePickerProps) => React.JSX.Element;
 export default RangePicker;

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

@@ -1,4 +1,4 @@
-import { FocusEvent, ReactNode } from 'react';
+import { FocusEvent, ForwardedRef, ReactNode } from 'react';
 import { DefaultProps, RuleType, SizeType } from '.';
 export interface BaseInfo {
     range?: 'start' | 'end';
@@ -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;
@@ -44,6 +45,7 @@ export type TRangePickerProps = Omit<TDatePickerProps, 'placeholder' | 'value' |
     value?: Date[];
     defaultValue?: Date[];
     separator?: ReactNode;
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
 };
 export type Locale = {
     locale: string;

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,12 +2209,14 @@ const RangePicker = ({
   picker = 'date',
   locale,
   disabledDate,
+  onOpenChange,
   onCalendarChange,
   style = {},
   className = '',
   separator,
   defaultValue,
-  bordered = true
+  bordered = true,
+  ref
 }) => {
   const containerRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -2191,10 +2231,19 @@ const RangePicker = ({
     month: 'short'
   }));
   const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  useImperativeHandle(ref, () => ({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    focus: containerRef.current?.focus,
+    input: containerRef.current,
+    blur: containerRef.current.blur,
+    nativeElement: containerRef.current
+  }));
   useEffect(() => {
     const handleClickOutside = event => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
+        onOpenChange?.(false);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
@@ -2212,6 +2261,7 @@ const RangePicker = ({
       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 => {
@@ -2246,25 +2296,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) => {
@@ -2308,8 +2382,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,
@@ -2322,7 +2404,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');
       },
@@ -2337,7 +2421,9 @@ const RangePicker = ({
         key: year,
         className: `${prefixCls}-year`,
         disabled: isYearDisabled(year),
-        onClick: () => {
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
           setCurrentYear(year);
           setViewMode('month');
         }
@@ -2365,19 +2451,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", {