@bifrostui/react 1.5.0 → 2.0.0-alpha.0

package/es/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -1,163 +0,0 @@
-import React, { Ref } from 'react';
-import { OverrideProps } from '@bifrostui/types';
-import { DesktopPickerProps } from '../DesktopPicker';
-import { CalendarProps } from '../Calendar';
-export type IDatePickerValue = Date | null;
-export interface IDatePickerInstance {
-    /** 日期对象 */
-    day: Date;
-    /** 是否禁用 */
-    disabled: boolean;
-}
-export interface IDatePickerCustomIconProps {
-    /**
-     * 是否是最小时间
-     */
-    isMinMonth?: boolean;
-    /**
-     * 是否是最大时间
-     */
-    isMaxMonth?: boolean;
-}
-export interface IDatePickerCalendarProps {
-    /**
-     * 是否隐藏当前月之外的日期，默认为false
-     */
-    hideDaysOutsideCurrentMonth?: boolean;
-    /**
-     * 高亮的日期，默认为today
-     * today 若选中的非当天，则当天高亮显示，若选中的是当天，则当天展示选中态
-     * weekend 可选的周末高亮显示
-     */
-    highlightDate?: 'today' | 'weekend';
-    /**
-     * 自定义日期单元格的内容
-     */
-    dateRender?: (currentDate: IDatePickerInstance) => React.ReactNode;
-    /**
-     * 自定义周单元格的内容
-     */
-    weekRender?: (week: string) => React.ReactNode;
-}
-export type DesktopDatePickerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & {
-        /**
-         * 默认选中的值，当组件非受控时使用
-         */
-        defaultValue?: IDatePickerValue;
-        /**
-         * 选中的值，当组件受控时使用
-         */
-        value?: IDatePickerValue;
-        /**
-         * 输入框占位内容
-         */
-        placeholder?: string;
-        /**
-         * 可选择的最小日期，默认为当前日期
-         * 渲染指定月时：value=null并指定minDate
-         */
-        minDate?: Date;
-        /**
-         * 可选择的最大日期，默认为当前日期的一年后
-         */
-        maxDate?: Date;
-        /**
-         * 弹层是否打开
-         */
-        open?: boolean;
-        /**
-         * 输入框icon
-         */
-        icon?: React.ReactNode;
-        /**
-         * inputRef
-         */
-        inputRef?: Ref<HTMLInputElement>;
-        /**
-         * inputProp
-         */
-        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-        /**
-         * 日期选择器类型
-         */
-        picker?: 'year' | 'month' | 'day';
-        /**
-         * 头部操作栏左边图标
-         */
-        headerBarLeftIcon?: (options: IDatePickerCustomIconProps) => React.ReactNode;
-        /**
-         * 头部操作栏右边图标
-         */
-        headerBarRightIcon?: (options: IDatePickerCustomIconProps) => React.ReactNode;
-        /**
-         * 是否禁用日期选择器
-         */
-        disabled?: boolean;
-        /**
-         * 不可选择的日期
-         */
-        disabledDate?: (currentDate: Date) => boolean;
-        /**
-         * 自定义月份单元格的内容
-         */
-        monthRender?: ({ month, currentDate, }: {
-            month: string | number;
-            currentDate: IDatePickerInstance;
-        }) => React.ReactNode;
-        /**
-         * 自定义年份单元格的内容
-         */
-        yearRender?: ({ year, currentDate, }: {
-            year: string | number;
-            currentDate: IDatePickerInstance;
-        }) => React.ReactNode;
-        /**
-         * 日期发生变化的回调
-         */
-        onChange?: (e: React.SyntheticEvent, data: {
-            value: IDatePickerValue;
-        }) => void;
-        /**
-         * 选择日期后是否立刻关闭
-         */
-        closeOnSelect?: boolean;
-        /**
-         * 禁用弹层选择功能
-         */
-        disableOpenPicker?: boolean;
-        /**
-         * 日期格式化
-         */
-        format?: string;
-        /**
-         * 弹层关闭的回调
-         */
-        onClose?: () => void;
-        /**
-         * 弹层打开的回调
-         */
-        onOpen?: () => void;
-        /**
-         * 月份切换的回调
-         */
-        onMonthChange?: (e: React.SyntheticEvent, data: {
-            value: Date;
-        }) => void;
-        /**
-         * 年份切换的回调
-         */
-        onYearChange?: (e: React.SyntheticEvent, data: {
-            value: Date;
-        }) => void;
-        /**
-         * DesktopPickerProps
-         */
-        DesktopPickerProps?: Omit<DesktopPickerProps, 'open'>;
-        /**
-         * CalendarProps
-         */
-        CalendarProps?: CalendarProps;
-    };
-    defaultComponent: D;
-}, D>;

package/es/DesktopDatePicker/DesktopDatePicker.types.js

@@ -1 +0,0 @@
-export {};

package/es/DesktopDatePicker/deskTopPickerContainer.css

@@ -1,100 +0,0 @@
-:root,
-page,
-xhs-page {
-  --bui-calendar-padding: 6px 12px 7px;
-  --bui-d-date-picker-lay-font-family: var(--bui-font-family);
-  --bui-d-date-picker-lay-main-radius: 3px;
-  --bui-d-date-picker-lay-content-padding: 10px 16px;
-  --bui-d-date-picker-lay-content-height: 30px;
-  --bui-d-date-picker-lay-content-line-height: 30px;
-  --bui-d-date-picker-lay-content-width: 60px;
-  --bui-d-date-picker-lay-calendar-padding: 6px 12px 7px;
-  --bui-d-date-picker-lay-shadow: 0 0 0 2px var(--bui-color-bg-default);
-  --bui-d-date-picker-title-size: var(--bui-title-size-3);
-  --bui-d-date-picker-list-padding: 6px 12px 7px;
-  --bui-d-date-picker-col-bg: var(--bui-color-bg-view);
-  --bui-d-date-picker-content-radius: var(--bui-shape-radius-default, 6px);
-  --bui-d-date-picker-col-font-size: var(--bui-title-size-4);
-}
-.bui-d-date-picker-lay-main {
-  height: 308px;
-  font-family: var(--bui-d-date-picker-lay-font-family);
-  border-radius: var(--bui-d-date-picker-lay-main-radius);
-  padding: 3px 0;
-  box-shadow: var(--bui-d-date-picker-lay-shadow);
-  overflow: hidden;
-  flex: 1;
-}
-.bui-d-date-picker-lay-handler {
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 7px;
-  margin-top: 8px;
-}
-.bui-d-date-picker-lay-handler-btn {
-  font-size: 16px;
-  height: 100%;
-  width: 46px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.bui-d-date-picker-lay-handler-icon {
-  font-size: 28px;
-}
-.bui-d-date-picker-lay-title {
-  display: flex;
-  align-items: center;
-}
-.bui-d-date-picker-lay-title-text {
-  white-space: nowrap;
-  font-size: var(--bui-d-date-picker-title-size);
-  font-weight: var(--bui-font-weight-medium);
-  text-align: center;
-}
-.bui-d-date-picker-lay-title-text:hover {
-  cursor: pointer;
-  color: var(--bui-color-blue);
-}
-.bui-d-date-picker-lay-list {
-  max-height: 262px;
-  overflow: auto;
-  padding: var(--bui-d-date-picker-list-padding);
-}
-.bui-d-date-picker-lay-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-.bui-d-date-picker-lay-col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bui-d-date-picker-col-bg);
-  cursor: pointer;
-}
-.bui-d-date-picker-lay-col-content {
-  margin: 12px 8px;
-  padding: 4px 6px;
-  border-radius: var(--bui-d-date-picker-content-radius);
-  display: inline-block;
-  text-align: center;
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-fg-default);
-  font-family: var(--bui-d-date-picker-lay-font-family);
-}
-.bui-d-date-picker-lay-col-text {
-  display: inline-block;
-  width: 36px;
-  font-size: var(--bui-d-date-picker-col-font-size);
-  line-height: 1;
-}
-.bui-d-date-picker-lay-col-active .bui-d-date-picker-lay-col-content {
-  color: #000;
-  background-color: #ffc7da;
-}
-.bui-d-date-picker-lay-col-disabled .bui-d-date-picker-lay-col-content {
-  color: #ccc;
-}

package/es/DesktopDatePicker/index.css

@@ -1,61 +0,0 @@
-:root,
-page,
-xhs-page {
-  --bui-d-date-picker-height: var(--bui-input-height, 32px);
-  --bui-d-date-picker-min-width: var(--bui-input-min-width, 100px);
-  --bui-d-date-picker-font-size: var(--bui-title-size-3, 16px);
-  --bui-d-date-picker-icon-size: var(--bui-title-size-3, 16px);
-  --bui-d-date-picker-container-padding: var(--bui-spacing-md, 9px);
-  --bui-d-date-picker-bg: var(--bui-color-bg-view);
-  --bui-d-date-picker-font-family: var(--bui-font-family);
-  --bui-d-date-picker-border: 1px solid var(--bui-color-border-default);
-  --bui-d-date-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
-  --bui-d-date-picker-disabled-color: var(--bui-color-fg-subtle);
-}
-.bui-d-date-picker {
-  position: relative;
-  cursor: pointer;
-  vertical-align: middle;
-  height: var(--bui-d-date-picker-height);
-  min-width: var(--bui-d-date-picker-min-width);
-  font-size: var(--bui-d-date-picker-font-size);
-  border-radius: 5px;
-  background-color: var(--bui-d-date-picker-bg);
-  font-family: var(--bui-d-date-picker-font-family);
-  border: var(--bui-d-date-picker-border);
-}
-.bui-d-date-picker:active,
-.bui-d-date-picker-active {
-  box-shadow: var(--bui-d-date-picker-shadow);
-}
-.bui-d-date-picker-icon {
-  display: flex;
-  align-items: center;
-  font-size: var(--bui-d-date-picker-icon-size);
-  height: 100%;
-  padding-left: 6px;
-}
-.bui-d-date-picker-container {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--bui-d-date-picker-container-padding);
-  height: 100%;
-}
-.bui-d-date-picker-input {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-  height: 100%;
-  background-color: transparent;
-  outline: none;
-  border: 0;
-}
-.bui-d-date-picker.bui-d-date-picker-disabled {
-  pointer-events: none;
-  box-shadow: none;
-  background-color: rgba(188, 188, 188, 0.2);
-}
-.bui-d-date-picker.bui-d-date-picker-disabled input {
-  color: var(--bui-d-date-picker-disabled-color);
-}

package/es/DesktopDatePicker/index.d.ts

@@ -1,2 +0,0 @@
-export { default, default as DesktopDatePicker } from './DesktopDatePicker';
-export * from './DesktopDatePicker.types';

package/es/DesktopDatePicker/index.js

@@ -1,6 +0,0 @@
-import { default as default2, default as default3 } from "./DesktopDatePicker";
-export * from "./DesktopDatePicker.types";
-export {
-  default3 as DesktopDatePicker,
-  default2 as default
-};

package/es/DesktopDatePicker/useGetDatePickerContent.d.ts

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

package/es/DesktopDatePicker/useGetDatePickerContent.js

@@ -1,316 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
-import clsx from "clsx";
-import dayjs from "dayjs";
-import React, { useMemo } from "react";
-import Calendar from "../Calendar";
-import "./deskTopPickerContainer.css";
-import { useLocaleText } from "../locales";
-const prefixCls = "bui-d-date-picker-lay";
-const useGetDatePickerContent = (props) => {
-  const yPatterns = ["YYYY", "YY"];
-  const mPatterns = ["MM", "M", "MMM", "MMMM"];
-  const dPatterns = ["D", "DD"];
-  const { month: monthMap } = useLocaleText("desktopDatePicker");
-  const _a = props, {
-    format,
-    minDate,
-    maxDate,
-    picker,
-    setIsOpen,
-    disabledDate,
-    calendarValue,
-    setSelectType,
-    selectType,
-    headerBarLeftIcon,
-    headerBarRightIcon,
-    closeOnSelect,
-    monthRender,
-    yearRender,
-    onMonthChange,
-    onYearChange,
-    triggerChange,
-    CalendarProps
-  } = _a, others = __objRest(_a, [
-    "format",
-    "minDate",
-    "maxDate",
-    "picker",
-    "setIsOpen",
-    "disabledDate",
-    "calendarValue",
-    "setSelectType",
-    "selectType",
-    "headerBarLeftIcon",
-    "headerBarRightIcon",
-    "closeOnSelect",
-    "monthRender",
-    "yearRender",
-    "onMonthChange",
-    "onYearChange",
-    "triggerChange",
-    "CalendarProps"
-  ]);
-  const isMinMonth = dayjs(minDate).isSame(calendarValue, "month");
-  const isMaxMonth = dayjs(maxDate).isSame(calendarValue, "month");
-  const yearList = useMemo(() => {
-    const maxYear = dayjs(maxDate).year();
-    const minYear = dayjs(minDate).year();
-    const years = [];
-    for (let i = minYear; i <= maxYear; i += 1) {
-      years.push(i);
-    }
-    const chunkedYears = [];
-    for (let i = 0; i < years.length; i += 3) {
-      chunkedYears.push(years.slice(i, i + 3));
-    }
-    return chunkedYears;
-  }, [maxDate, minDate]);
-  const mouthList = [
-    [1, 2, 3],
-    [4, 5, 6],
-    [7, 8, 9],
-    [10, 11, 12]
-  ];
-  const validateAndAdjustDate = (value) => {
-    const dateValue = dayjs(value);
-    const minValue = dayjs(minDate);
-    const maxValue = dayjs(maxDate);
-    if (dateValue.isBefore(minValue)) {
-      return minValue;
-    }
-    if (dateValue.isAfter(maxValue)) {
-      return maxValue;
-    }
-    return dateValue;
-  };
-  const onClickPrev = (e) => {
-    e.stopPropagation();
-    if (!isMinMonth) {
-      const month = dayjs(calendarValue).subtract(1, "month").toDate();
-      triggerChange(e, validateAndAdjustDate(month).toDate());
-    }
-  };
-  const onClickNext = (e) => {
-    e.stopPropagation();
-    if (!isMaxMonth) {
-      const month = dayjs(calendarValue).add(1, "month").toDate();
-      triggerChange(e, validateAndAdjustDate(month).toDate());
-    }
-  };
-  const calendarChange = (e, data) => {
-    e.stopPropagation();
-    if (data.value) {
-      const ymd = dayjs(data.value);
-      const hms = dayjs(calendarValue || /* @__PURE__ */ new Date());
-      const newValue = ymd.hour(hms.hour()).minute(hms.minute()).second(hms.second());
-      triggerChange(e, validateAndAdjustDate(newValue).toDate());
-    }
-    if (closeOnSelect) {
-      setIsOpen(false);
-    }
-  };
-  const handleTdClick = (e, data) => {
-    e.stopPropagation();
-    if (selectType === "year") {
-      triggerChange(
-        e,
-        validateAndAdjustDate(
-          dayjs(calendarValue || /* @__PURE__ */ new Date()).year(data)
-        ).toDate()
-      );
-      onYearChange == null ? void 0 : onYearChange(
-        e,
-        validateAndAdjustDate(
-          dayjs(calendarValue || /* @__PURE__ */ new Date()).year(data)
-        ).toDate()
-      );
-      if (picker === "year" && closeOnSelect) {
-        setIsOpen(false);
-        return;
-      }
-      setSelectType("month");
-    }
-    if (selectType === "month") {
-      triggerChange(
-        e,
-        validateAndAdjustDate(
-          dayjs(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
-        ).toDate()
-      );
-      onMonthChange == null ? void 0 : onMonthChange(
-        e,
-        validateAndAdjustDate(
-          dayjs(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
-        ).toDate()
-      );
-      if (picker === "day") {
-        setSelectType("day");
-        return;
-      }
-      if (closeOnSelect) {
-        setIsOpen(false);
-      }
-    }
-  };
-  const renderTd = (its, currentData) => {
-    if (yearRender && selectType === "year") {
-      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, yearRender({ year: its, currentData }));
-    }
-    if (monthRender && selectType === "month") {
-      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, 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));
-  };
-  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) => {
-        let disabledClick = false;
-        if (selectType === "year") {
-          const currentData = dayjs(calendarValue).set("year", its);
-          if (its < dayjs(minDate).year() || its > dayjs(maxDate).year() || (disabledDate == null ? void 0 : disabledDate(currentData.toDate()))) {
-            disabledClick = true;
-          }
-        }
-        if (selectType === "month") {
-          const currentData = dayjs(calendarValue).set("month", its - 1);
-          disabledClick = currentData.isBefore(minDate, "month") || currentData.isAfter(maxDate, "month");
-          if (disabledDate) {
-            disabledClick = disabledDate == null ? void 0 : disabledDate(currentData.toDate());
-          }
-        }
-        return /* @__PURE__ */ React.createElement(
-          "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
-            }),
-            onClick: (e) => {
-              if (!disabledClick) {
-                handleTdClick(e, its);
-              }
-            }
-          },
-          renderTd(its, calendarValue)
-        );
-      }));
-    });
-  };
-  const handleClickTitle = (e, data) => {
-    e.stopPropagation();
-    if (yPatterns.indexOf(data) > -1) {
-      setSelectType("year");
-    }
-    if (mPatterns.indexOf(data) > -1) {
-      setSelectType("month");
-    }
-    if (dPatterns.indexOf(data) > -1) {
-      setSelectType("day");
-    }
-  };
-  const renderTitle = (formate, value) => {
-    const allType = [...yPatterns, ...mPatterns, ...dPatterns];
-    const formattingTokens = /(\[[^[]*\])|([-_?:/.,()\s{0-9}]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
-    const matchArr = formate.match(formattingTokens);
-    const domArr = [];
-    let str = "";
-    for (let i = 0; i <= matchArr.length; i += 1) {
-      if (allType.indexOf(matchArr[i]) > -1) {
-        if (str !== "") {
-          domArr.push(str);
-          str = "";
-        }
-        domArr.push(
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: clsx(`${prefixCls}-title-text`),
-              key: i,
-              onClick: (e) => handleClickTitle(e, matchArr[i])
-            },
-            dayjs(value).format(matchArr[i])
-          )
-        );
-      } else {
-        str = `${matchArr[i]}${str}`;
-      }
-    }
-    return domArr;
-  };
-  const desktopDatePicker = () => {
-    return /* @__PURE__ */ React.createElement(
-      "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()))
-    );
-  };
-  return {
-    desktopDatePicker
-  };
-};
-var useGetDatePickerContent_default = useGetDatePickerContent;
-export {
-  useGetDatePickerContent_default as default
-};

package/es/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

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