@bifrostui/react 2.0.0-alpha.32 → 2.0.0-alpha.33

package/es/Countdown/__tests__/fixtures/A11yDemos.d.ts

@@ -1,23 +1,22 @@
-import * as React from 'react';
 /**
  * 自定义 Countdown 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
  * 文件名必须是 customDemoComponent.tsx（固定约定）
  */
-export declare const basicCountdownDemo: () => React.JSX.Element;
-export declare const ariaLabelCountdownDemo: () => React.JSX.Element;
-export declare const ariaLabelledbyCountdownDemo: () => React.JSX.Element;
-export declare const ariaDescribedbyCountdownDemo: () => React.JSX.Element;
-export declare const customRenderCountdownDemo: () => React.JSX.Element;
-export declare const endTimestampCountdownDemo: () => React.JSX.Element;
-export declare const serverTimestampCountdownDemo: () => React.JSX.Element;
+export declare const basicCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ariaLabelCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ariaLabelledbyCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const ariaDescribedbyCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const customRenderCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const endTimestampCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+export declare const serverTimestampCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
 declare const _default: {
-    basicCountdownDemo: () => React.JSX.Element;
-    ariaLabelCountdownDemo: () => React.JSX.Element;
-    ariaLabelledbyCountdownDemo: () => React.JSX.Element;
-    ariaDescribedbyCountdownDemo: () => React.JSX.Element;
-    customRenderCountdownDemo: () => React.JSX.Element;
-    endTimestampCountdownDemo: () => React.JSX.Element;
-    serverTimestampCountdownDemo: () => React.JSX.Element;
+    basicCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    ariaLabelCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    ariaLabelledbyCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    ariaDescribedbyCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    customRenderCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    endTimestampCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
+    serverTimestampCountdownDemo: () => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/es/Countdown/__tests__/fixtures/A11yDemos.js

@@ -1,51 +1,65 @@
-import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Countdown from "../../Countdown";
 const basicCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { remainingTime: 60 * 1e3 }));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Countdown, { remainingTime: 60 * 1e3 }) });
 };
 const ariaLabelCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Countdown, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }) });
 };
 const ariaLabelledbyCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { id: "flash-sale-title" }, "\u9650\u65F6\u62A2\u8D2D"), /* @__PURE__ */ React.createElement(
-    Countdown,
-    {
-      remainingTime: 180 * 1e3,
-      "aria-labelledby": "flash-sale-title"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { id: "flash-sale-title", children: "\u9650\u65F6\u62A2\u8D2D" }),
+    /* @__PURE__ */ jsx(
+      Countdown,
+      {
+        remainingTime: 180 * 1e3,
+        "aria-labelledby": "flash-sale-title"
+      }
+    )
+  ] });
 };
 const ariaDescribedbyCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    Countdown,
-    {
-      remainingTime: 240 * 1e3,
-      "aria-describedby": "countdown-description"
-    }
-  ), /* @__PURE__ */ React.createElement("p", { id: "countdown-description" }, "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7"));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Countdown,
+      {
+        remainingTime: 240 * 1e3,
+        "aria-describedby": "countdown-description"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { id: "countdown-description", children: "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7" })
+  ] });
 };
 const customRenderCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     Countdown,
     {
       remainingTime: 300 * 1e3,
       renderContent: ({ hours, minutes, seconds }) => {
-        return /* @__PURE__ */ React.createElement("span", null, "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269", hours, "\u5C0F\u65F6", minutes, "\u5206\u949F", seconds, "\u79D2");
+        return /* @__PURE__ */ jsxs("span", { children: [
+          "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269",
+          hours,
+          "\u5C0F\u65F6",
+          minutes,
+          "\u5206\u949F",
+          seconds,
+          "\u79D2"
+        ] });
       }
     }
-  ));
+  ) });
 };
 const endTimestampCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { endTimestamp: Date.now() + 360 * 1e3 }));
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Countdown, { endTimestamp: Date.now() + 360 * 1e3 }) });
 };
 const serverTimestampCountdownDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
     Countdown,
     {
       serverTimestamp: Date.now() - 10 * 1e3,
       endTimestamp: Date.now() + 420 * 1e3
     }
-  ));
+  ) });
 };
 var A11yDemos_default = {
   basicCountdownDemo,

package/es/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/es/DatePicker/DatePicker.js

@@ -29,7 +29,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
 import clsx from "clsx";
 import { useValue } from "@bifrostui/utils";
 import Picker from "../Picker";
@@ -287,7 +288,7 @@ const DatePicker = forwardRef((props, ref) => {
   useEffect(() => {
     setOptions(generateRangeOptions());
   }, [currentDate, views, propMinDate, propMaxDate]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Picker,
     __spreadProps(__spreadValues({}, others), {
       "data-selected": currentDate ? currentDate.getTime() : "",

package/es/DesktopDatePicker/DesktopDatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DesktopDatePickerProps } from './DesktopDatePicker.types';
 import './DesktopDatePicker.less';
-declare const DesktopDatePicker: React.ForwardRefExoticComponent<Omit<DesktopDatePickerProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DesktopDatePicker: React.ForwardRefExoticComponent<Omit<DesktopDatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DesktopDatePicker;

package/es/DesktopDatePicker/DesktopDatePicker.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DateOutlinedIcon } from "@bifrostui/icons";
 import dayjs from "dayjs";
 import clsx from "clsx";
@@ -197,53 +198,57 @@ const DesktopDatePicker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   useEffect(() => {
     setUseUserStr(false);
   }, [calendarValue]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, others), {
       className: clsx(prefixCls, className, {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref
-    }),
-    /* @__PURE__ */ React.createElement(
-      DesktopPicker,
-      __spreadValues({
-        open: open != null ? open : isOpen,
-        miniBackdropInvisible: open !== void 0,
-        onClose: (e, data) => {
-          setIsOpen(data == null ? void 0 : data.value);
-        },
-        onMount,
-        onUnmounted: unMounted,
-        content: desktopDatePicker()
-      }, DesktopPickerProps),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, /* @__PURE__ */ React.createElement(
-        "input",
-        __spreadProps(__spreadValues({}, inputProps), {
-          "aria-invalid": true,
-          autoComplete: "off",
-          placeholder: showPlaceholder,
-          type: "text",
-          inputMode: "text",
-          ref: inputRef,
-          className: clsx(`${prefixCls}-input`, {
-            [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
-          }),
-          onBlur: () => setUseUserStr(false),
-          onClick: handleDatePickerInputClick,
-          onChange: onInputChange,
-          value: renderValue
+      ref,
+      children: /* @__PURE__ */ jsx(
+        DesktopPicker,
+        __spreadProps(__spreadValues({
+          open: open != null ? open : isOpen,
+          miniBackdropInvisible: open !== void 0,
+          onClose: (e, data) => {
+            setIsOpen(data == null ? void 0 : data.value);
+          },
+          onMount,
+          onUnmounted: unMounted,
+          content: desktopDatePicker()
+        }, DesktopPickerProps), {
+          children: /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-container`, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              __spreadProps(__spreadValues({}, inputProps), {
+                "aria-invalid": true,
+                autoComplete: "off",
+                placeholder: showPlaceholder,
+                type: "text",
+                inputMode: "text",
+                ref: inputRef,
+                className: clsx(`${prefixCls}-input`, {
+                  [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
+                }),
+                onBlur: () => setUseUserStr(false),
+                onClick: handleDatePickerInputClick,
+                onChange: onInputChange,
+                value: renderValue
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: handleDatePickerIconClick,
+                className: `${prefixCls}-icon`,
+                children: icon || /* @__PURE__ */ jsx(DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
+              }
+            )
+          ] })
         })
-      ), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: handleDatePickerIconClick,
-          className: `${prefixCls}-icon`
-        },
-        icon || /* @__PURE__ */ React.createElement(DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
-      ))
-    )
+      )
+    })
   );
 });
 DesktopDatePicker.displayName = "BUIDatePicker";

package/es/DesktopDatePicker/useGetDatePickerContent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import './deskTopPickerContainer.less';
 declare const useGetDatePickerContent: (props: any) => {
-    desktopDatePicker: () => React.JSX.Element;
+    desktopDatePicker: () => import("react/jsx-runtime").JSX.Element;
 };
 export default useGetDatePickerContent;

package/es/DesktopDatePicker/useGetDatePickerContent.js

@@ -29,10 +29,11 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import Calendar from "../Calendar";
 import "./deskTopPickerContainer.css";
 import { useLocaleText } from "../locales";
@@ -185,17 +186,17 @@ const useGetDatePickerContent = (props) => {
   };
   const renderTd = (its, currentData) => {
     if (yearRender && selectType === "year") {
-      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, yearRender({ year: its, currentData }));
+      return /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-col-content`), children: yearRender({ year: its, currentData }) });
     }
     if (monthRender && selectType === "month") {
-      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, monthRender({ month: its, currentData }));
+      return /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-col-content`), children: monthRender({ month: its, currentData }) });
     }
-    return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-col-text`) }, selectType === "month" ? monthMap[its] : its));
+    return /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-col-content`), children: /* @__PURE__ */ jsx("span", { className: clsx(`${prefixCls}-col-text`), children: selectType === "month" ? monthMap[its] : its }) });
   };
   const renderTable = () => {
     const dataList = selectType === "year" ? yearList : mouthList;
     return dataList.map((item, index) => {
-      return /* @__PURE__ */ React.createElement("div", { key: index + 1, className: clsx(`${prefixCls}-row`) }, item.map((its, idx) => {
+      return /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-row`), children: item.map((its, idx) => {
         let disabledClick = false;
         if (selectType === "year") {
           const currentData = dayjs(calendarValue).set("year", its);
@@ -210,10 +211,9 @@ const useGetDatePickerContent = (props) => {
             disabledClick = disabledDate == null ? void 0 : disabledDate(currentData.toDate());
           }
         }
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           "div",
           {
-            key: idx + 1,
             className: clsx(`${prefixCls}-col`, {
               [`${prefixCls}-col-active`]: (selectType === "year" ? dayjs(calendarValue).year() : dayjs(calendarValue).month() + 1) === its && !disabledClick,
               [`${prefixCls}-col-disabled`]: disabledClick
@@ -222,11 +222,12 @@ const useGetDatePickerContent = (props) => {
               if (!disabledClick) {
                 handleTdClick(e, its);
               }
-            }
+            },
+            children: renderTd(its, calendarValue)
           },
-          renderTd(its, calendarValue)
+          idx + 1
         );
-      }));
+      }) }, index + 1);
     });
   };
   const handleClickTitle = (e, data) => {
@@ -254,14 +255,14 @@ const useGetDatePickerContent = (props) => {
           str = "";
         }
         domArr.push(
-          /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(`${prefixCls}-title-text`),
-              key: i,
-              onClick: (e) => handleClickTitle(e, matchArr[i])
+              onClick: (e) => handleClickTitle(e, matchArr[i]),
+              children: dayjs(value).format(matchArr[i])
             },
-            dayjs(value).format(matchArr[i])
+            i
           )
         );
       } else {
@@ -271,39 +272,45 @@ const useGetDatePickerContent = (props) => {
     return domArr;
   };
   const desktopDatePicker = () => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
         className: clsx(`${prefixCls}-main`)
       }, others), {
         onClick: (e) => {
           e.stopPropagation();
-        }
-      }),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-handler` }, selectType !== "year" && /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${prefixCls}-handler-btn` }, headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ React.createElement(
-        CaretLeftIcon,
-        {
-          className: `${prefixCls}-handler-icon`,
-          htmlColor: isMinMonth && "var(--bui-color-white)"
-        }
-      )), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, calendarValue ? renderTitle(format, calendarValue) : format), selectType !== "year" && /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${prefixCls}-handler-btn` }, headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ React.createElement(
-        CaretRightIcon,
-        {
-          className: `${prefixCls}-handler-icon`,
-          htmlColor: isMaxMonth && "var(--bui-color-white)"
-        }
-      ))),
-      selectType === "day" ? /* @__PURE__ */ React.createElement(
-        Calendar,
-        __spreadValues({
-          headerVisible: true,
-          minDate,
-          maxDate,
-          disabledDate,
-          value: calendarValue,
-          onChange: calendarChange
-        }, CalendarProps)
-      ) : /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-list`) }, /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-box`) }, renderTable()))
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-handler`, children: [
+            selectType !== "year" && /* @__PURE__ */ jsx("div", { onClick: onClickPrev, className: `${prefixCls}-handler-btn`, children: headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ jsx(
+              CaretLeftIcon,
+              {
+                className: `${prefixCls}-handler-icon`,
+                htmlColor: isMinMonth && "var(--bui-color-white)"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: `${prefixCls}-title`, children: calendarValue ? renderTitle(format, calendarValue) : format }),
+            selectType !== "year" && /* @__PURE__ */ jsx("div", { onClick: onClickNext, className: `${prefixCls}-handler-btn`, children: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ jsx(
+              CaretRightIcon,
+              {
+                className: `${prefixCls}-handler-icon`,
+                htmlColor: isMaxMonth && "var(--bui-color-white)"
+              }
+            ) })
+          ] }),
+          selectType === "day" ? /* @__PURE__ */ jsx(
+            Calendar,
+            __spreadValues({
+              headerVisible: true,
+              minDate,
+              maxDate,
+              disabledDate,
+              value: calendarValue,
+              onChange: calendarChange
+            }, CalendarProps)
+          ) : /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-list`), children: /* @__PURE__ */ jsx("div", { className: clsx(`${prefixCls}-box`), children: renderTable() }) })
+        ]
+      })
     );
   };
   return {

package/es/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DateTimePickerProps } from './DesktopDateTimePicker.types';
 import './index.less';
-declare const DesktopDateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DesktopDateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DesktopDateTimePicker;

package/es/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DateOutlinedIcon } from "@bifrostui/icons";
 import dayjs from "dayjs";
 import clsx from "clsx";
@@ -226,7 +227,7 @@ const DesktopDateTimePicker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   useEffect(() => {
     setUseUserStr(false);
   }, [calendarValue]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, others), {
       className: clsx(prefixCls, className, {
@@ -234,58 +235,63 @@ const DesktopDateTimePicker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         [`${prefixCls}-active`]: isOpen,
         [`${prefixCls}-invalid`]: isInvalid
       }),
-      ref
-    }),
-    /* @__PURE__ */ React.createElement(
-      DesktopPicker,
-      __spreadProps(__spreadValues({
-        open: open != null ? open : isOpen,
-        miniBackdropInvisible: open !== void 0,
-        onClose: (e, data) => {
-          setIsOpen(data == null ? void 0 : data.value);
-        },
-        onMount: onmount,
-        onUnmounted: unMounted,
-        content: /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${prefixCls}-box`,
-            onClick: (e) => {
-              e.stopPropagation();
-            }
+      ref,
+      children: /* @__PURE__ */ jsx(
+        DesktopPicker,
+        __spreadProps(__spreadValues({
+          open: open != null ? open : isOpen,
+          miniBackdropInvisible: open !== void 0,
+          onClose: (e, data) => {
+            setIsOpen(data == null ? void 0 : data.value);
           },
-          desktopDatePicker(),
-          desktopTimePanel()
-        )
-      }, DesktopPickerProps), {
-        inheritWidth: false
-      }),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, /* @__PURE__ */ React.createElement(
-        "input",
-        __spreadProps(__spreadValues({}, inputProps), {
-          "aria-invalid": true,
-          autoComplete: "off",
-          placeholder: showPlaceholder,
-          type: "text",
-          inputMode: "text",
-          ref: inputRef,
-          className: clsx(`${prefixCls}-input`, {
-            [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
-          }),
-          onBlur: () => setUseUserStr(false),
-          onClick: handleDatePickerInputClick,
-          onChange: onInputChange,
-          value: renderValue
+          onMount: onmount,
+          onUnmounted: unMounted,
+          content: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${prefixCls}-box`,
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              children: [
+                desktopDatePicker(),
+                desktopTimePanel()
+              ]
+            }
+          )
+        }, DesktopPickerProps), {
+          inheritWidth: false,
+          children: /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-container`, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              __spreadProps(__spreadValues({}, inputProps), {
+                "aria-invalid": true,
+                autoComplete: "off",
+                placeholder: showPlaceholder,
+                type: "text",
+                inputMode: "text",
+                ref: inputRef,
+                className: clsx(`${prefixCls}-input`, {
+                  [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
+                }),
+                onBlur: () => setUseUserStr(false),
+                onClick: handleDatePickerInputClick,
+                onChange: onInputChange,
+                value: renderValue
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: handleDatePickerIconClick,
+                className: `${prefixCls}-icon`,
+                children: icon || /* @__PURE__ */ jsx(DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
+              }
+            )
+          ] })
         })
-      ), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: handleDatePickerIconClick,
-          className: `${prefixCls}-icon`
-        },
-        icon || /* @__PURE__ */ React.createElement(DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
-      ))
-    )
+      )
+    })
   );
 });
 DesktopDateTimePicker.displayName = "BUIDesktopDateTimePicker";

package/es/DesktopPicker/DesktopPicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DesktopPickerProps } from './DesktopPicker.types';
 import './index.less';
-declare const DesktopPicker: React.ForwardRefExoticComponent<Omit<DesktopPickerProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DesktopPicker: React.ForwardRefExoticComponent<Omit<DesktopPickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DesktopPicker;