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

package/es/CSSTransition/demo/CSSTransitionDemo.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Button, Alert, CSSTransition } from "@bifrostui/react";
+import "./index.css";
+const StackDemo = () => {
+  const [open, setOpen] = useState(true);
+  const transitionClasses = {
+    enter: "slide-enter",
+    enterActive: "slide-enter-active",
+    enterDone: "slide-enter-done",
+    exit: "slide-exit",
+    exitActive: "slide-exit-active",
+    exitDone: "slide-exit-done"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: "300px",
+        height: "100px",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: () => {
+          setOpen((prev) => !prev);
+        }
+      },
+      open ? "Exit" : "Enter"
+    ),
+    /* @__PURE__ */ React.createElement(
+      CSSTransition,
+      {
+        in: open,
+        timeout: 300,
+        unmountOnExit: false,
+        classNames: transitionClasses
+      },
+      /* @__PURE__ */ React.createElement(Alert, { className: "my-node", color: "success" }, "\u8FC7\u6E21\u8FC7\u7A0B\u4E2D\u4F1A\u4FEE\u6539className")
+    )
+  );
+};
+var CSSTransitionDemo_default = StackDemo;
+export {
+  CSSTransitionDemo_default as default
+};

package/es/CSSTransition/demo/index.css

@@ -0,0 +1,25 @@
+.bui-btn {
+  margin-bottom: 18px;
+}
+.slide-enter {
+  transform: translate3d(-100%, 0, 0);
+}
+.slide-enter-active {
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-enter-done {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit-active {
+  will-change: transform;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-exit-done {
+  transform: translate3d(-100%, 0, 0);
+}

package/es/CSSTransition/index.d.ts

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

package/es/CSSTransition/index.js

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

package/es/Calendar/Calendar.js

@@ -29,16 +29,20 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
-import { useDidMountEffect, useValue } from "@bifrostui/utils";
+import React, { useMemo, useState, useRef } from "react";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import isoWeek from "dayjs/plugin/isoWeek";
-import React, { useMemo, useState } from "react";
-import { formatDate, isRange, isSame } from "./utils";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
+import { useDidMountEffect, useValue } from "@bifrostui/utils";
+import CSSTransition from "../CSSTransition";
+import TransitionGroup from "../TransitionGroup";
 import { useLocaleText } from "../locales";
+import { formatDate, isDateInRange, isSame, isEqualVal } from "./utils";
 import "./index.css";
 dayjs.extend(isoWeek);
+dayjs.extend(customParseFormat);
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -61,6 +65,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       headerBarRightIcon,
       disabledDate,
       highlightDate = "today",
+      headerVisible = false,
+      enableTransition = false,
+      CSSTransitionProps,
       dateRender,
       weekRender,
       onMonthChange,
@@ -78,6 +85,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "headerBarRightIcon",
       "disabledDate",
       "highlightDate",
+      "headerVisible",
+      "enableTransition",
+      "CSSTransitionProps",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -110,12 +120,10 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       defaultValue: formattedDefaultValue,
       onChange
     });
-    const selectedStartDate = useMemo(() => {
-      return calendarValue == null ? void 0 : calendarValue[0];
-    }, [calendarValue]);
-    const selectedEndDate = useMemo(() => {
-      return calendarValue == null ? void 0 : calendarValue[1];
+    const [selectedStartDate, selectedEndDate] = useMemo(() => {
+      return [calendarValue == null ? void 0 : calendarValue[0], calendarValue == null ? void 0 : calendarValue[1]];
     }, [calendarValue]);
+    const slideDirection = useRef("");
     const isMinMonth = dayjs(minDate).isSame(renderMonth, "month");
     const isMaxMonth = dayjs(maxDate).isSame(renderMonth, "month");
     const headerBarIcon = {
@@ -134,10 +142,23 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         }
       )
     };
+    const prevValueRef = useRef(value);
     useDidMountEffect(() => {
-      const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
-      setRenderMonth(dayjs(initMonth || minDate).toDate());
-    }, [JSON.stringify(value), JSON.stringify(defaultValue)]);
+      if (!isEqualVal(prevValueRef.current, value)) {
+        const latestDate = formattedValue == null ? void 0 : formattedValue[0];
+        const lastInitialValue = renderMonth;
+        const inSameMonth = isRangeMode && selectedStartDate && selectedEndDate || latestDate && dayjs(latestDate).isSame(lastInitialValue, "month");
+        if (!inSameMonth) {
+          const latestBeforeThanLast = dayjs(latestDate).isBefore(
+            lastInitialValue,
+            "month"
+          );
+          slideDirection.current = latestBeforeThanLast ? "right" : "left";
+          setRenderMonth(dayjs(latestDate || minDate).toDate());
+        }
+        prevValueRef.current = value;
+      }
+    }, [JSON.stringify(value)]);
     const getDaysInMonth = (args) => {
       const m = dayjs(args).format("YYYY/MM");
       const count = dayjs(m).daysInMonth();
@@ -159,7 +180,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       }
       [...Array(count)].forEach((_, i) => {
         const day = dayjs(`${m}/${i + 1}`).toDate();
-        const defaultDisable = !isRange(day, minDate, maxDate);
+        const defaultDisable = !isDateInRange(day, minDate, maxDate);
         const propsDisable = disabledDate ? !!(disabledDate == null ? void 0 : disabledDate(day)) : false;
         list.push({
           day,
@@ -208,7 +229,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
             classes.day,
             (ins == null ? void 0 : ins.disabled) && classes.disabled,
             dayClassName
-          )
+          ),
+          "aria-disabled": ins == null ? void 0 : ins.disabled,
+          "aria-current": dayjs(ins.day).isSame(dayjs(), "day") ? "date" : void 0
         },
         ins.day && dayjs(ins.day).format("D")
       );
@@ -235,9 +258,11 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       const hasSelectedDate = selectedStartDate && isSame(ins.day, selectedStartDate);
       triggerChange == null ? void 0 : triggerChange(e, hasSelectedDate ? null : ins.day);
     };
-    const renderDayList = () => getDaysInMonth(renderMonth).map(
-      (ins, index) => {
+    const renderDayList = () => {
+      const days = getDaysInMonth(renderMonth);
+      return days.map((ins, index) => {
         const dayStr = dayjs(ins.day).format("YYYYMMDD");
+        const isSelected = selectedStartDate && isSame(selectedStartDate, ins.day) || selectedEndDate && isSame(selectedEndDate, ins.day);
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -245,16 +270,20 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
               [`${classes.root}-highlight-day`]: highlightDate === "weekend" && !ins.disabled && (index % 7 === 0 || index % 7 === 6)
             }),
             key: `${dayStr}-${index}`,
-            onClick: (e) => onClickDay(e, ins)
+            onClick: (e) => onClickDay(e, ins),
+            "aria-selected": isSelected,
+            "aria-disabled": ins.disabled,
+            tabIndex: ins.disabled ? -1 : 0
           },
           dateRender ? dateRender(ins) : defaultDateRender(ins)
         );
-      }
-    );
+      });
+    };
     const onClickPrev = (e) => {
       if (!isMinMonth) {
         const month = dayjs(renderMonth).subtract(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "right";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
           month: dayjs(month).format(headerBarFormat)
@@ -265,38 +294,106 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       if (!isMaxMonth) {
         const month = dayjs(renderMonth).add(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "left";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
           month: dayjs(month).format(headerBarFormat)
         });
       }
     };
-    let data = {};
-    if (isRangeMode) {
-      data = {
-        "data-start": dayjs(selectedStartDate).format("YYYYMMDD"),
-        "data-end": dayjs(selectedEndDate).format("YYYYMMDD")
-      };
-    } else {
-      data = {
-        "data-selected": dayjs(selectedStartDate).format("YYYYMMDD")
+    const data = isRangeMode ? {
+      "data-start": dayjs(selectedStartDate).format("YYYYMMDD"),
+      "data-end": dayjs(selectedEndDate).format("YYYYMMDD")
+    } : {
+      "data-selected": dayjs(selectedStartDate).format("YYYYMMDD")
+    };
+    const renderMonthDate = () => {
+      const hasSlideDirection = !!slideDirection.current;
+      const monthDateDom = /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(`${classes.root}-month`, {
+            "enable-transition": enableTransition,
+            visible: enableTransition && !hasSlideDirection
+          }),
+          "aria-label": "date select"
+        },
+        renderDayList()
+      );
+      if (!enableTransition) {
+        return monthDateDom;
+      }
+      const transitionClasses = {
+        exit: hasSlideDirection && "slide-exit",
+        exitActive: hasSlideDirection && `slide-exit-${slideDirection.current}`,
+        enter: hasSlideDirection && `slide-enter-${slideDirection.current}`,
+        enterActive: hasSlideDirection && "slide-active",
+        enterDone: "slide-enter-done"
       };
-    }
+      return /* @__PURE__ */ React.createElement(
+        TransitionGroup,
+        {
+          className: clsx(`${classes.root}-transition-group`),
+          childFactory: (element) => {
+            return React.cloneElement(element, {
+              classNames: transitionClasses
+            });
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          CSSTransition,
+          __spreadProps(__spreadValues({
+            timeout: 300
+          }, CSSTransitionProps), {
+            in: true,
+            appear: hasSlideDirection,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            key: renderMonth.toString(),
+            classNames: transitionClasses
+          }),
+          monthDateDom
+        )
+      );
+    };
     return /* @__PURE__ */ React.createElement(
       "div",
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref,
         className: clsx(classes.root, className, {
           [`${classes.root}-highlight-weekend`]: highlightDate === "weekend"
         })
       }, others), {
         "data-mode": mode
-      }), data),
-      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text` }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
-      /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
+      }), data), {
+        role: "application",
+        "aria-label": "Calendar"
+      }),
+      !headerVisible && /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickPrev,
+          className: `${classes.handler}-btn`,
+          "aria-label": "prev month",
+          tabIndex: 0
+        },
+        headerBarIcon.left
+      ), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text`, "aria-live": "polite" }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickNext,
+          className: `${classes.handler}-btn`,
+          "aria-label": "next month",
+          tabIndex: 0
+        },
+        headerBarIcon.right
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w, idx) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ React.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ React.createElement("div", { className: clsx(`${classes.root}-month`) }, renderDayList())
+      renderMonthDate()
     );
   }
 );

package/es/Calendar/Calendar.types.d.ts

@@ -1,5 +1,6 @@
-import { OverrideProps } from '@bifrostui/types';
 import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { CSSTransitionProps } from '../CSSTransition/CSSTransition.types';
 export interface ICalendarInstance {
     /** 日期对象 */
     day: Date;
@@ -74,6 +75,20 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * weekend 可选的周末高亮显示
          */
         highlightDate?: 'today' | 'weekend';
+        /**
+         * 是否隐藏头部
+         * default: false
+         */
+        headerVisible?: boolean;
+        /**
+         * 是否开启切换动效
+         * default: false
+         */
+        enableTransition?: boolean;
+        /**
+         * CSSTransition组件属性，仅enableTransition=true时生效
+         */
+        CSSTransitionProps?: CSSTransitionProps;
         /**
          * 自定义日期单元格的内容
          */

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalendarDemo: () => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import Calendar from "../../Calendar";
+const CalendarDemo = () => {
+  return /* @__PURE__ */ React.createElement(Calendar, null);
+};
+export {
+  CalendarDemo
+};

package/es/Calendar/index.css

@@ -1,21 +1,24 @@
 :root,
 page,
 xhs-page {
+  --bui-calendar-transition-exit: transform 300ms ease 0ms;
+  --bui-calendar-transition-enter: transform 300ms ease 0ms;
+  --bui-calendar-transition-group-min-height: 228px;
   --bui-calendar-padding: 6px 12px 7px;
   --bui-calendar-week-height: 30px;
   --bui-calendar-handler-height: 28px;
-  --bui-calendar-handler-margin-bottom: 7px;
+  --bui-calendar-handler-margin: 0 0 7px 0;
   --bui-calendar-handler-text-width: 80px;
   --bui-calendar-handler-btn-width: 46px;
   --bui-calendar-handler-btn-height: 100%;
   --bui-calendar-handler-btn-icon-font-size: 28px;
   --bui-calendar-day-box-height: 30px;
-  --bui-calendar-day-box-margin-bottom: 7px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
   --bui-calendar-day-disabled-color: #9c9ca5;
   --bui-calendar-middle-color: #000;
-  --bui-calendar-middle-background-color: #ffeaf1;
+  --bui-calendar-middle-bg-color: #ffeaf1;
   --bui-calendar-range-both-ends-color: #000;
-  --bui-calendar-range-both-ends-background-color: #ffc7da;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
 }
 .bui-calendar {
   overflow: hidden;
@@ -52,7 +55,7 @@ xhs-page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--bui-calendar-handler-margin-bottom);
+  margin-bottom: var(--bui-calendar-handler-margin);
 }
 .bui-calendar-handler-text {
   width: var(--bui-calendar-handler-text-width);
@@ -72,15 +75,28 @@ xhs-page {
 .bui-calendar-handler-btn-icon {
   font-size: var(--bui-calendar-handler-btn-icon-font-size);
 }
+.bui-calendar-transition-group {
+  position: relative;
+  min-height: var(--bui-calendar-transition-group-min-height);
+}
 .bui-calendar-month {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--bui-spacing-sm);
 }
+.bui-calendar-month.enable-transition {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+.bui-calendar-month.visible {
+  visibility: visible;
+}
 .bui-calendar-day-box {
   width: 14.28%;
   height: var(--bui-calendar-day-box-height);
-  margin-bottom: var(--bui-calendar-day-box-margin-bottom);
+  margin: var(--bui-calendar-day-box-margin);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -106,11 +122,11 @@ xhs-page {
 .bui-calendar-middle {
   color: var(--bui-calendar-middle-color);
   border-radius: 0;
-  background-color: var(--bui-calendar-middle-background-color);
+  background-color: var(--bui-calendar-middle-bg-color);
 }
 .bui-calendar-start {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
@@ -118,7 +134,34 @@ xhs-page {
 }
 .bui-calendar-end {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.bui-calendar .slide-enter-left {
+  transform: translate3d(100%, 0, 0);
+}
+.bui-calendar .slide-enter-right {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-enter-done {
+  visibility: visible;
+}
+.bui-calendar .slide-exit {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-exit);
+}
+.bui-calendar .slide-active {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-enter);
+}
+.bui-calendar .slide-exit-left {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-exit-right {
+  transform: translate3d(100%, 0, 0);
+}

package/es/Calendar/utils.d.ts

@@ -3,18 +3,22 @@ import { ICalendarMode, ICalendarValue } from './Calendar.types';
  * 判断日期是否相同
  */
 export declare const isSame: (start: Date, end: Date) => boolean;
+/**
+ * 判断value、defaultValue是否相同
+ */
+export declare const isEqualVal: (a: ICalendarValue, b: ICalendarValue) => boolean;
 /**
  * 计算日期差
  */
-export declare const geteDateDiff: (a: Date, b: Date) => number;
+export declare const getDateDiff: (a: Date, b: Date) => number;
 /**
  * 判断是否在日期区间内
  */
-export declare const isRange: (current: Date, start: Date, end: Date) => boolean;
+export declare const isDateInRange: (current: Date, start: Date, end: Date) => boolean;
 /**
  * 取数组第一个日期为开始日期，最后一个日期为结束日期
  */
-export declare const generateRangeDate: (value: Date[]) => {
+export declare const generateDateRange: (value: Date[]) => {
     start: Date;
     end: Date;
 };

package/es/Calendar/utils.js

@@ -1,19 +1,27 @@
 import dayjs from "dayjs/esm/index";
 const isSame = (start, end) => dayjs(start).isSame(end, "day");
-const geteDateDiff = (a, b) => {
-  return dayjs(dayjs(a).format("YYYYMMDD")).diff(
-    dayjs(dayjs(b).format("YYYYMMDD")),
-    "day"
-  );
-};
-const isRange = (current, start, end) => {
-  let flag = true;
-  if (geteDateDiff(current, start) < 0 || geteDateDiff(current, end) > 0) {
-    flag = false;
+const isEqualVal = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length)
+      return false;
+    return a.every((item, index) => isSame(item, b[index]));
   }
-  return flag;
+  if (typeof a !== typeof b)
+    return false;
+  return a instanceof Date && b instanceof Date && isSame(a, b);
+};
+const getDateDiff = (a, b) => {
+  const aDate = dayjs(dayjs(a).format("YYYYMMDD"));
+  const bDate = dayjs(dayjs(b).format("YYYYMMDD"));
+  return aDate.diff(bDate, "day");
 };
-const generateRangeDate = (value) => {
+const isDateInRange = (current, start, end) => {
+  return getDateDiff(current, start) >= 0 && getDateDiff(current, end) <= 0;
+};
+const generateDateRange = (value) => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return { start: null, end: null };
+  }
   const finalIndex = value.length - 1;
   return {
     start: value[0],
@@ -26,16 +34,16 @@ const formatDate = (mode, value, minDate, maxDate) => {
   let defaultStartDate = null;
   let defaultEndDate = null;
   if (mode === "single" && value) {
-    defaultStartDate = isRange(value, minDate, maxDate) ? value : null;
+    defaultStartDate = isDateInRange(value, minDate, maxDate) ? value : null;
   } else if (mode === "range") {
-    const { start, end } = generateRangeDate(value);
+    const { start, end } = generateDateRange(value);
     if (start) {
-      defaultStartDate = isRange(start, minDate, maxDate) ? start : null;
+      defaultStartDate = isDateInRange(start, minDate, maxDate) ? start : null;
     }
     if (end) {
-      defaultEndDate = isRange(end, minDate, maxDate) ? end : null;
+      defaultEndDate = isDateInRange(end, minDate, maxDate) ? end : null;
     }
-    if (start && end && geteDateDiff(start, end) > 0) {
+    if (start && end && getDateDiff(start, end) > 0) {
       defaultStartDate = end;
       defaultEndDate = start;
     }
@@ -44,8 +52,9 @@ const formatDate = (mode, value, minDate, maxDate) => {
 };
 export {
   formatDate,
-  generateRangeDate,
-  geteDateDiff,
-  isRange,
+  generateDateRange,
+  getDateDiff,
+  isDateInRange,
+  isEqualVal,
   isSame
 };

package/es/Checkbox/Checkbox.js

@@ -41,7 +41,7 @@ const Checkbox = forwardRef((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -67,6 +67,7 @@ const Checkbox = forwardRef((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = useContext(CheckboxContext);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -83,7 +84,7 @@ const Checkbox = forwardRef((props, ref) => {
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(SuccessCircleFilledIcon, { color: "primary" });
   const checkboxUncheckIcon = icon || /* @__PURE__ */ React.createElement(CircleOutlinedIcon, { color: "neutral" });
-  const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const checkboxDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const handleChange = (e) => {
     var _a2, _b2, _c2;
     const isChecked = !checkboxChecked;
@@ -114,14 +115,14 @@ const Checkbox = forwardRef((props, ref) => {
     }, others),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

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

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * 自定义 Checkbox 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicCheckboxDemo: () => React.JSX.Element;
+export declare const disabledCheckboxDemo: () => React.JSX.Element;
+export declare const ariaLabelCheckboxDemo: () => React.JSX.Element;
+declare const _default: {
+    basicCheckboxDemo: () => React.JSX.Element;
+    disabledCheckboxDemo: () => React.JSX.Element;
+    ariaLabelCheckboxDemo: () => React.JSX.Element;
+};
+export default _default;