@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/Countdown/Countdown.js

@@ -61,6 +61,7 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_useCountdown = __toESM(require("./useCountdown"));
 var import_utils2 = require("./utils");
+var import_locales = require("../locales");
 var import_index = require("./index.css");
 const prefixCls = "bui-countdown";
 const Countdown = (0, import_react.forwardRef)((props, ref) => {
@@ -70,25 +71,28 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
     endTimestamp,
     remainingTime = 0,
     format = "HH:mm:ss",
-    unitStyle = {},
-    valueStyle = [{}, {}],
-    timeSliceStyle = {},
     renderContent,
     onChange,
-    onFinish
+    onFinish,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    role = "timer"
   } = _a, others = __objRest(_a, [
     "className",
     "serverTimestamp",
     "endTimestamp",
     "remainingTime",
     "format",
-    "unitStyle",
-    "valueStyle",
-    "timeSliceStyle",
     "renderContent",
     "onChange",
-    "onFinish"
+    "onFinish",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "role"
   ]);
+  const { remain, remainTime, willEnd, hasEnd, timer } = (0, import_locales.useLocaleText)("countdown");
   const [startTime, setStartTime] = (0, import_react.useState)(
     () => serverTimestamp != null ? serverTimestamp : Date.now()
   );
@@ -117,9 +121,38 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
       setEndTime(endTimestamp);
     }
   }, [serverTimestamp, endTimestamp]);
+  const getAccessibleTimeDescription = (timeIns) => {
+    const { years, months, days, hours, minutes, seconds, total } = timeIns;
+    if (total <= 0) {
+      return hasEnd;
+    }
+    const parts = [];
+    if (parseInt(years, 10) > 0)
+      parts.push(`${parseInt(years, 10)}${remain.year}`);
+    if (parseInt(months, 10) > 0)
+      parts.push(`${parseInt(months, 10)}${remain.month}`);
+    if (parseInt(days, 10) > 0)
+      parts.push(`${parseInt(days, 10)}${remain.day}`);
+    if (parseInt(hours, 10) > 0)
+      parts.push(`${parseInt(hours, 10)}${remain.hour}`);
+    if (parseInt(minutes, 10) > 0)
+      parts.push(`${parseInt(minutes, 10)}${remain.minute}`);
+    if (parseInt(seconds, 10) > 0)
+      parts.push(`${parseInt(seconds, 10)}${remain.second}`);
+    return parts.length > 0 ? `${remainTime}\uFF1A${parts.join("")}` : willEnd;
+  };
   const defaultRender = (timeIns) => {
     const { timeList } = (0, import_utils2.formatCountdown)(timeIns.total, format);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, timeList.map((item, index) => {
+    const accessibleDescription = getAccessibleTimeDescription(timeIns);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: (0, import_clsx.default)(`${prefixCls}-sr-only`),
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      },
+      accessibleDescription
+    ), timeList.map((item, index) => {
       const { unitText, valStr } = item;
       const valueList = valStr.split("");
       return /* @__PURE__ */ import_react.default.createElement(
@@ -127,29 +160,36 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
         {
           key: `slice-${index}`,
           className: (0, import_clsx.default)(`${prefixCls}-slice`),
-          style: timeSliceStyle
+          "aria-hidden": "true"
         },
         /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-item`) }, valueList.map((val, i) => /* @__PURE__ */ import_react.default.createElement(
           "span",
           {
             key: `slice-value-${i}`,
-            className: (0, import_clsx.default)(`${prefixCls}-slice-value`),
-            style: valueStyle[i]
+            className: (0, import_clsx.default)(`${prefixCls}-slice-value`)
           },
           val
         ))),
-        unitText && /* @__PURE__ */ import_react.default.createElement(
-          "span",
-          {
-            className: (0, import_clsx.default)(`${prefixCls}-slice-unit`),
-            style: unitStyle
-          },
-          unitText
-        )
+        unitText && /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-unit`) }, unitText)
       );
     }));
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), renderContent ? renderContent(time) : defaultRender(time));
+  const ariaProps = {
+    role,
+    "aria-label": ariaLabel || `${timer}\uFF0C${getAccessibleTimeDescription(time)}`,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref,
+      className: (0, import_clsx.default)(prefixCls, className)
+    }, ariaProps), others),
+    renderContent ? renderContent(time) : defaultRender(time)
+  );
 });
 Countdown.displayName = "BuiCountdown";
 var Countdown_default = Countdown;

package/dist/Countdown/Countdown.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 /**
  * 当前时间
  */
@@ -57,18 +57,6 @@ export type CountdownProps<D extends React.ElementType = 'div', P = {}> = Overri
          * @default HH:mm:ss
          */
         format?: string;
-        /**
-         * 时间单位的样式
-         */
-        unitStyle?: CSSProperties;
-        /**
-         * 倒计时位数的样式，用于定制第一、第二位数字的样式
-         */
-        valueStyle?: CSSProperties[];
-        /**
-         * 各时间区块的样式，用于定制各个时间块的样式，若第一、第二位数字的样式相同，则可替代valueStyle
-         */
-        timeSliceStyle?: CSSProperties;
         /**
          * 倒计时完成时触发
          */
@@ -83,13 +71,30 @@ export type CountdownProps<D extends React.ElementType = 'div', P = {}> = Overri
          * 自定义render内容
          */
         renderContent?: (data: CurrentTime) => React.ReactNode;
+        /**
+         * 无障碍标签，为屏幕阅读器提供组件描述
+         */
+        'aria-label'?: string;
+        /**
+         * 引用其他元素ID作为标签
+         */
+        'aria-labelledby'?: string;
+        /**
+         * 引用其他元素ID作为描述
+         */
+        'aria-describedby'?: string;
+        /**
+         * 组件的语义角色
+         * @default 'timer'
+         */
+        role?: string;
     };
     defaultComponent: D;
 }, D>;
 /**
  * 倒计时格式化后分割项
  */
-interface CountdownItem {
+export interface CountdownItem {
     /**
      * 倒计时切片字符串
      */
@@ -120,4 +125,3 @@ export type FormatedCountdown = {
      */
     timeList: CountdownItem[];
 };
-export {};

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

@@ -0,0 +1,23 @@
+import 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;
+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;
+};
+export default _default;

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

@@ -0,0 +1,107 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaDescribedbyCountdownDemo: () => ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo: () => ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo: () => ariaLabelledbyCountdownDemo,
+  basicCountdownDemo: () => basicCountdownDemo,
+  customRenderCountdownDemo: () => customRenderCountdownDemo,
+  default: () => A11yDemos_default,
+  endTimestampCountdownDemo: () => endTimestampCountdownDemo,
+  serverTimestampCountdownDemo: () => serverTimestampCountdownDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Countdown = __toESM(require("../../Countdown"));
+const basicCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 60 * 1e3 }));
+};
+const ariaLabelCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }));
+};
+const ariaLabelledbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", { id: "flash-sale-title" }, "\u9650\u65F6\u62A2\u8D2D"), /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 180 * 1e3,
+      "aria-labelledby": "flash-sale-title"
+    }
+  ));
+};
+const ariaDescribedbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 240 * 1e3,
+      "aria-describedby": "countdown-description"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { id: "countdown-description" }, "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7"));
+};
+const customRenderCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 300 * 1e3,
+      renderContent: ({ hours, minutes, seconds }) => {
+        return /* @__PURE__ */ import_react.default.createElement("span", null, "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269", hours, "\u5C0F\u65F6", minutes, "\u5206\u949F", seconds, "\u79D2");
+      }
+    }
+  ));
+};
+const endTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { endTimestamp: Date.now() + 360 * 1e3 }));
+};
+const serverTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      serverTimestamp: Date.now() - 10 * 1e3,
+      endTimestamp: Date.now() + 420 * 1e3
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  ariaDescribedbyCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  basicCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+});

package/dist/Countdown/index.css

@@ -15,6 +15,17 @@ xhs-page {
   font-weight: var(--bui-countdown-font-weight);
   font-family: var(--bui-font-family);
 }
+.bui-countdown-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .bui-countdown-slice {
   display: flex;
   flex-direction: row;

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +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>>;
+export default DatePicker;

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,335 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  default: () => DatePicker_default
+});
+module.exports = __toCommonJS(DatePicker_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_Picker = __toESM(require("../Picker"));
+var import_locales = require("../locales");
+var import_constants = require("./constants");
+const MIN_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+const MAX_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31);
+const DEFAULT_PICKER = [
+  import_constants.DatePickerType.YEAR,
+  import_constants.DatePickerType.MONTH,
+  import_constants.DatePickerType.DAY
+];
+function isValidDate(value) {
+  return value instanceof Date && !Number.isNaN(value.getTime());
+}
+const padZero = (num, targetLength = 2) => {
+  let str = `${num}`;
+  while (str.length < targetLength) {
+    str = `0${str}`;
+  }
+  return str;
+};
+const getMaxDay = (year, monthIndex) => {
+  return new Date(year, monthIndex + 1, 0).getDate();
+};
+const getDateTypeValue = (date, type) => {
+  switch (type) {
+    case import_constants.DatePickerType.YEAR:
+      return date.getFullYear();
+    case import_constants.DatePickerType.MONTH:
+      return date.getMonth() + 1;
+    case import_constants.DatePickerType.DAY:
+      return date.getDate();
+    case import_constants.DatePickerType.HOUR:
+      return date.getHours();
+    case import_constants.DatePickerType.MINUTE:
+      return date.getMinutes();
+    case import_constants.DatePickerType.SECOND:
+      return date.getSeconds();
+    default:
+      throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+  }
+};
+const DatePicker = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, {
+    className,
+    value: propValue,
+    defaultValue,
+    views = DEFAULT_PICKER,
+    minDate: propMinDate = MIN_DATE,
+    maxDate: propMaxDate = MAX_DATE,
+    showUnit = false,
+    formatter,
+    filter,
+    disableDateTimeView,
+    dateTimeStep,
+    onConfirm,
+    onClose,
+    onChange
+  } = _a, others = __objRest(_a, [
+    "className",
+    "value",
+    "defaultValue",
+    "views",
+    "minDate",
+    "maxDate",
+    "showUnit",
+    "formatter",
+    "filter",
+    "disableDateTimeView",
+    "dateTimeStep",
+    "onConfirm",
+    "onClose",
+    "onChange"
+  ]);
+  const [options, setOptions] = (0, import_react.useState)([]);
+  const [pickerValue, setPickerValue] = (0, import_react.useState)([]);
+  const datePickerText = (0, import_locales.useLocaleText)("datePicker");
+  const formatDate = (date) => {
+    let formattedDate = date;
+    if (!formattedDate || !isValidDate(date) || formattedDate.getTime() < propMinDate.getTime()) {
+      formattedDate = propMinDate;
+    }
+    if (formattedDate.getTime() > propMaxDate.getTime()) {
+      formattedDate = propMaxDate;
+    }
+    return formattedDate;
+  };
+  const [currentDate, triggerChange] = (0, import_utils.useValue)({
+    value: propValue && formatDate(propValue),
+    defaultValue: formatDate(defaultValue)
+  });
+  const handleConfirm = (e) => {
+    onConfirm == null ? void 0 : onConfirm(e, { value: currentDate });
+  };
+  const handleClose = (e) => {
+    onClose == null ? void 0 : onClose(e, { value: currentDate });
+  };
+  const handleChange = (e, { value, columnIndex }) => {
+    if (value[columnIndex] === null)
+      return;
+    const current = new Date(currentDate);
+    switch (views[columnIndex]) {
+      case import_constants.DatePickerType.YEAR:
+        current.setFullYear(value[columnIndex]);
+        break;
+      case import_constants.DatePickerType.MONTH: {
+        const selectedMaxDay = getMaxDay(
+          current.getFullYear(),
+          Number(value[columnIndex]) - 1
+        );
+        if (current.getDate() > selectedMaxDay) {
+          current.setDate(selectedMaxDay);
+        }
+        current.setMonth(value[columnIndex] - 1);
+        break;
+      }
+      case import_constants.DatePickerType.DAY:
+        current.setDate(value[columnIndex]);
+        break;
+      case import_constants.DatePickerType.HOUR:
+        current.setHours(value[columnIndex]);
+        break;
+      case import_constants.DatePickerType.MINUTE:
+        current.setMinutes(value[columnIndex]);
+        break;
+      case import_constants.DatePickerType.SECOND:
+        current.setSeconds(value[columnIndex]);
+        break;
+      default:
+        throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${views[columnIndex]}`);
+    }
+    triggerChange(e, formatDate(current));
+    onChange == null ? void 0 : onChange(e, { type: views[columnIndex], value: current });
+  };
+  const formatOption = (type, value) => {
+    let label = padZero(value);
+    if (formatter) {
+      return formatter(type, {
+        value,
+        label
+      });
+    }
+    if (showUnit) {
+      label += datePickerText[type];
+    }
+    return { value, label };
+  };
+  const generateOptions = (min, max, type, columnIndex) => {
+    const step = (dateTimeStep == null ? void 0 : dateTimeStep[type]) || 1;
+    let valueIndex = 0;
+    const optionsArray = Array.from(
+      { length: (max - min + 1) / step || 1 },
+      (_, index) => {
+        const value = index * step + min;
+        if (value <= getDateTypeValue(currentDate, type)) {
+          valueIndex = index;
+        }
+        return formatOption(type, value);
+      }
+    );
+    pickerValue[columnIndex] = optionsArray[valueIndex].value;
+    setPickerValue([...pickerValue]);
+    if ((disableDateTimeView == null ? void 0 : disableDateTimeView[type]) && typeof disableDateTimeView[type] === "function") {
+      const disabledOptionsValue = disableDateTimeView[type](
+        optionsArray.map((i) => i.value)
+      );
+      return optionsArray.map((option) => {
+        if (disabledOptionsValue.includes(option.value)) {
+          return __spreadProps(__spreadValues({}, option), {
+            disabled: true
+          });
+        }
+        return option;
+      });
+    }
+    if (filter) {
+      return filter(type, optionsArray);
+    }
+    return optionsArray;
+  };
+  const getBoundary = (type, value) => {
+    const boundary = type === "min" ? propMinDate : propMaxDate;
+    const year = boundary.getFullYear();
+    let month = 1;
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+    let seconds = 0;
+    if (type === "max") {
+      month = 12;
+      date = getMaxDay(value.getFullYear(), value.getMonth());
+      hour = 23;
+      minute = 59;
+      seconds = 59;
+    }
+    if (value.getFullYear() === year) {
+      month = boundary.getMonth() + 1;
+      if (value.getMonth() + 1 === month) {
+        date = boundary.getDate();
+        if (value.getDate() === date) {
+          hour = boundary.getHours();
+          if (value.getHours() === hour) {
+            minute = boundary.getMinutes();
+            if (value.getMinutes() === minute) {
+              seconds = boundary.getSeconds();
+            }
+          }
+        }
+      }
+    }
+    return {
+      [`${type}Year`]: year,
+      [`${type}Month`]: month,
+      [`${type}Date`]: date,
+      [`${type}Hour`]: hour,
+      [`${type}Minute`]: minute,
+      [`${type}Seconds`]: seconds
+    };
+  };
+  const generateRanges = () => {
+    const ranges = [];
+    const { minYear, minMonth, minDate, minHour, minMinute, minSeconds } = getBoundary("min", currentDate);
+    const { maxYear, maxMonth, maxDate, maxHour, maxMinute, maxSeconds } = getBoundary("max", currentDate);
+    for (let i = 0; i < views.length; i += 1) {
+      const type = views[i];
+      switch (type) {
+        case import_constants.DatePickerType.YEAR:
+          ranges.push([minYear, maxYear]);
+          break;
+        case import_constants.DatePickerType.MONTH:
+          ranges.push([minMonth, maxMonth]);
+          break;
+        case import_constants.DatePickerType.DAY:
+          ranges.push([minDate, maxDate]);
+          break;
+        case import_constants.DatePickerType.HOUR:
+          ranges.push([minHour, maxHour]);
+          break;
+        case import_constants.DatePickerType.MINUTE:
+          ranges.push([minMinute, maxMinute]);
+          break;
+        case import_constants.DatePickerType.SECOND:
+          ranges.push([minSeconds, maxSeconds]);
+          break;
+        default:
+          throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+      }
+    }
+    return ranges;
+  };
+  const generateRangeOptions = () => generateRanges().map(
+    (range, index) => generateOptions(range[0], range[1], views[index], index)
+  );
+  (0, import_react.useEffect)(() => {
+    setOptions(generateRangeOptions());
+  }, [currentDate, views, propMinDate, propMaxDate]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Picker.default,
+    __spreadProps(__spreadValues({}, others), {
+      "data-selected": currentDate ? currentDate.getTime() : "",
+      className: (0, import_clsx.default)("bui-date-picker", className),
+      ref,
+      options,
+      value: pickerValue,
+      onConfirm: handleConfirm,
+      onClose: handleClose,
+      onOptionChange: handleChange
+    })
+  );
+});
+DatePicker.displayName = "BuiDatePicker";
+var DatePicker_default = DatePicker;