@rockshin/tao-ui 0.0.9 → 0.0.11

package/dist/components/breadcrumb/breadcrumb.css

@@ -22,12 +22,16 @@
 
 [data-tao-breadcrumb-link] {
   color: var(--tao-color-text-secondary);
+  font: inherit;
   border-radius: var(--tao-radius-sm);
   cursor: pointer;
   transition: color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
+  background: none;
+  border: 0;
   outline: none;
   align-items: center;
   gap: 4px;
+  padding: 0;
   text-decoration: none;
   display: inline-flex;
 }

package/dist/components/breadcrumb/breadcrumb.js

@@ -13,7 +13,8 @@ function ChevronIcon() {
         t0 = /*#__PURE__*/ jsx("svg", {
             viewBox: "0 0 16 16",
             fill: "none",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M6 4l4 4-4 4",
                 stroke: "currentColor",
@@ -33,7 +34,8 @@ function EllipsisIcon() {
         t0 = /*#__PURE__*/ jsxs("svg", {
             viewBox: "0 0 16 16",
             fill: "currentColor",
-            "aria-hidden": true,
+            "aria-hidden": "true",
+            focusable: "false",
             children: [
                 /*#__PURE__*/ jsx("circle", {
                     cx: "3",
@@ -114,9 +116,9 @@ function Breadcrumb(t0) {
                 ...linkProps,
                 children: content
             });
-            if (item.onClick) return /*#__PURE__*/ jsx("span", {
-                role: "link",
-                tabIndex: disabled ? void 0 : 0,
+            if (item.onClick) return /*#__PURE__*/ jsx("button", {
+                type: "button",
+                disabled: disabled,
                 ...linkProps,
                 children: content
             });
@@ -199,7 +201,7 @@ function Breadcrumb(t0) {
                         !isLast_0 && /*#__PURE__*/ jsx("li", {
                             "data-tao-breadcrumb-separator": "",
                             role: "presentation",
-                            "aria-hidden": true,
+                            "aria-hidden": "true",
                             className: cx(classNames?.separator),
                             style: styles?.separator,
                             children: sep

package/dist/components/checkbox/checkbox.js

@@ -269,6 +269,8 @@ function CheckIcon() {
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
             "data-tao-checkbox-icon": "",
+            "aria-hidden": "true",
+            focusable: "false",
             width: "12",
             height: "12",
             viewBox: "0 0 24 24",
@@ -291,6 +293,8 @@ function MinusIcon() {
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
             "data-tao-checkbox-icon": "",
+            "aria-hidden": "true",
+            focusable: "false",
             width: "12",
             height: "12",
             viewBox: "0 0 24 24",

package/dist/components/date-picker/calendar/calendar-grid.js

@@ -88,7 +88,7 @@ function CalendarGrid(t0) {
             });
             $[25] = t4;
         } else t4 = $[25];
-        t1 = weeks.map((week, wi)=>/*#__PURE__*/ jsx("tr", {
+        t1 = weeks.map((week)=>/*#__PURE__*/ jsx("tr", {
                 children: week.map((date_3)=>{
                     const isOtherMonth = date_3.month() !== currentMonth;
                     const disabled = isDisabled(date_3);
@@ -99,25 +99,29 @@ function CalendarGrid(t0) {
                     const rEnd = !isOtherMonth && isRangeEnd(date_3);
                     return /*#__PURE__*/ jsx("td", {
                         "data-tao-calendar-cell": "",
-                        "data-tao-selected": isSelected || void 0,
-                        "data-tao-today": isToday || void 0,
-                        "data-tao-other-month": isOtherMonth || void 0,
-                        "data-tao-disabled": disabled || void 0,
-                        "data-tao-in-range": inRange || void 0,
-                        "data-tao-range-start": rStart || void 0,
-                        "data-tao-range-end": rEnd || void 0,
-                        onClick: ()=>{
-                            if (!disabled) onSelect(date_3);
-                        },
-                        onMouseEnter: ()=>onHover?.(date_3),
-                        onMouseLeave: ()=>onHover?.(null),
-                        children: /*#__PURE__*/ jsx("span", {
-                            "data-tao-calendar-cell-inner": "",
-                            children: date_3.date()
+                        children: /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            "data-tao-calendar-cell-button": "",
+                            "data-tao-selected": isSelected || void 0,
+                            "data-tao-today": isToday || void 0,
+                            "data-tao-other-month": isOtherMonth || void 0,
+                            "data-tao-disabled": disabled || void 0,
+                            "data-tao-in-range": inRange || void 0,
+                            "data-tao-range-start": rStart || void 0,
+                            "data-tao-range-end": rEnd || void 0,
+                            disabled: disabled,
+                            onClick: ()=>onSelect(date_3),
+                            onMouseEnter: ()=>onHover?.(date_3),
+                            onMouseLeave: ()=>onHover?.(null),
+                            "aria-label": date_3.format("YYYY-MM-DD"),
+                            children: /*#__PURE__*/ jsx("span", {
+                                "data-tao-calendar-cell-inner": "",
+                                children: date_3.date()
+                            })
                         })
                     }, date_3.format("YYYY-MM-DD"));
                 })
-            }, wi));
+            }, week[0]?.format("YYYY-MM-DD")));
         $[0] = disabledDate;
         $[1] = hoverDate;
         $[2] = maxDate;

package/dist/components/date-picker/calendar/calendar-header.js

@@ -244,6 +244,8 @@ function LeftIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -265,6 +267,8 @@ function RightIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -286,6 +290,8 @@ function DoubleLeftIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",
@@ -312,6 +318,8 @@ function DoubleRightIcon() {
     let t0;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = /*#__PURE__*/ jsxs("svg", {
+            "aria-hidden": "true",
+            focusable: "false",
             width: "14",
             height: "14",
             viewBox: "0 0 24 24",

package/dist/components/date-picker/calendar/month-grid.js

@@ -34,7 +34,7 @@ function MonthGrid(t0) {
                 disabled: disabled,
                 onClick: ()=>onSelect(m),
                 children: MONTH_LABELS[i]
-            }, i);
+            }, m.format("YYYY-MM"));
         });
         $[0] = disabledDate;
         $[1] = onSelect;

package/dist/components/date-picker/calendar/time-panel.js

@@ -121,8 +121,8 @@ function TimePanel(t0) {
     return t10;
 }
 function TimeColumn(t0) {
-    const $ = c(21);
-    const { values, selected, onSelect, label, scrollKey } = t0;
+    const $ = c(18);
+    const { values, selected, onSelect, label } = t0;
     const listRef = useRef(null);
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -140,45 +140,42 @@ function TimeColumn(t0) {
     const scrollToSelected = t1;
     const initRef = _temp;
     let t2;
+    let t3;
     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
         t2 = ()=>{
             scrollToSelected();
         };
-        $[1] = t2;
-    } else t2 = $[1];
-    let t3;
-    if ($[2] !== scrollKey || $[3] !== selected) {
         t3 = [
-            selected,
-            scrollKey,
             scrollToSelected
         ];
-        $[2] = scrollKey;
-        $[3] = selected;
-        $[4] = t3;
-    } else t3 = $[4];
+        $[1] = t2;
+        $[2] = t3;
+    } else {
+        t2 = $[1];
+        t3 = $[2];
+    }
     useEffect(t2, t3);
     let t4;
-    if ($[5] !== label) {
+    if ($[3] !== label) {
         t4 = /*#__PURE__*/ jsx("div", {
             "data-tao-time-column-title": "",
             children: label
         });
-        $[5] = label;
-        $[6] = t4;
-    } else t4 = $[6];
+        $[3] = label;
+        $[4] = t4;
+    } else t4 = $[4];
     let t5;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
         t5 = (el_1)=>{
             listRef.current = el_1;
             initRef(el_1);
         };
-        $[7] = t5;
-    } else t5 = $[7];
+        $[5] = t5;
+    } else t5 = $[5];
     let t6;
-    if ($[8] !== onSelect || $[9] !== selected || $[10] !== values) {
+    if ($[6] !== onSelect || $[7] !== selected || $[8] !== values) {
         let t7;
-        if ($[12] !== onSelect || $[13] !== selected) {
+        if ($[10] !== onSelect || $[11] !== selected) {
             t7 = (v)=>/*#__PURE__*/ jsx("button", {
                     type: "button",
                     "data-tao-time-cell": "",
@@ -186,41 +183,39 @@ function TimeColumn(t0) {
                     onClick: ()=>onSelect(v),
                     children: String(v).padStart(2, "0")
                 }, v);
-            $[12] = onSelect;
-            $[13] = selected;
-            $[14] = t7;
-        } else t7 = $[14];
+            $[10] = onSelect;
+            $[11] = selected;
+            $[12] = t7;
+        } else t7 = $[12];
         t6 = values.map(t7);
-        $[8] = onSelect;
-        $[9] = selected;
-        $[10] = values;
-        $[11] = t6;
-    } else t6 = $[11];
+        $[6] = onSelect;
+        $[7] = selected;
+        $[8] = values;
+        $[9] = t6;
+    } else t6 = $[9];
     let t7;
-    if ($[15] !== t6) {
+    if ($[13] !== t6) {
         t7 = /*#__PURE__*/ jsx("div", {
             "data-tao-time-column-list": "",
             ref: t5,
             children: t6
         });
-        $[15] = t6;
-        $[16] = t7;
-    } else t7 = $[16];
+        $[13] = t6;
+        $[14] = t7;
+    } else t7 = $[14];
     let t8;
-    if ($[17] !== label || $[18] !== t4 || $[19] !== t7) {
+    if ($[15] !== t4 || $[16] !== t7) {
         t8 = /*#__PURE__*/ jsxs("div", {
             "data-tao-time-column": "",
-            "aria-label": label,
             children: [
                 t4,
                 t7
             ]
         });
-        $[17] = label;
-        $[18] = t4;
-        $[19] = t7;
-        $[20] = t8;
-    } else t8 = $[20];
+        $[15] = t4;
+        $[16] = t7;
+        $[17] = t8;
+    } else t8 = $[17];
     return t8;
 }
 function _temp(el_0) {

package/dist/components/date-picker/date-picker.css

@@ -76,6 +76,9 @@ button[data-tao-picker-trigger][data-tao-size="large"] {
   color: var(--tao-color-text-quaternary);
   cursor: pointer;
   transition: color var(--tao-motion-duration-fast) ease-out;
+  background: none;
+  border: 0;
+  padding: 0;
 }
 
 [data-tao-picker-clear]:hover {
@@ -239,14 +242,25 @@ button[data-tao-calendar-title-btn]:hover {
 }
 
 [data-tao-calendar-cell] {
-  text-align: center;
-  cursor: pointer;
   vertical-align: middle;
   padding: 2px 0;
+}
+
+[data-tao-calendar-cell-button] {
+  text-align: center;
+  width: 100%;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  outline: none;
+  padding: 0;
+  display: block;
   position: relative;
 }
 
-[data-tao-calendar-cell]:before {
+[data-tao-calendar-cell-button]:before {
   content: "";
   top: 50%;
   z-index: 0;
@@ -272,57 +286,57 @@ button[data-tao-calendar-title-btn]:hover {
   position: relative;
 }
 
-[data-tao-calendar-cell]:not([data-tao-disabled]):not([data-tao-selected]):not([data-tao-range-start]):not([data-tao-range-end]):not([data-tao-in-range]):hover [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button]:not([data-tao-disabled]):not([data-tao-selected]):not([data-tao-range-start]):not([data-tao-range-end]):not([data-tao-in-range]):hover [data-tao-calendar-cell-inner] {
   background: var(--tao-color-fill-tertiary);
 }
 
-[data-tao-calendar-cell][data-tao-selected] [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-selected] [data-tao-calendar-cell-inner] {
   background: var(--tao-primary);
   color: #fff;
 }
 
-[data-tao-calendar-cell][data-tao-today]:not([data-tao-selected]):not([data-tao-range-start]):not([data-tao-range-end]) [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-today]:not([data-tao-selected]):not([data-tao-range-start]):not([data-tao-range-end]) [data-tao-calendar-cell-inner] {
   border: var(--tao-line-width) solid var(--tao-primary);
 }
 
-[data-tao-calendar-cell][data-tao-other-month] [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-other-month] [data-tao-calendar-cell-inner] {
   color: var(--tao-color-text-quaternary);
 }
 
-[data-tao-calendar-cell][data-tao-disabled] {
+[data-tao-calendar-cell-button][data-tao-disabled] {
   cursor: not-allowed;
 }
 
-[data-tao-calendar-cell][data-tao-disabled] [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-disabled] [data-tao-calendar-cell-inner] {
   color: var(--tao-color-text-disabled);
   background: none;
 }
 
-[data-tao-calendar-cell][data-tao-in-range]:before {
+[data-tao-calendar-cell-button][data-tao-in-range]:before {
   background: var(--tao-primary-bg);
 }
 
-[data-tao-calendar-cell][data-tao-range-start]:before {
+[data-tao-calendar-cell-button][data-tao-range-start]:before {
   background: var(--tao-primary-bg);
   inset-inline-start: 50%;
 }
 
-[data-tao-calendar-cell][data-tao-range-start] [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-range-start] [data-tao-calendar-cell-inner] {
   background: var(--tao-primary);
   color: #fff;
 }
 
-[data-tao-calendar-cell][data-tao-range-end]:before {
+[data-tao-calendar-cell-button][data-tao-range-end]:before {
   background: var(--tao-primary-bg);
   inset-inline-end: 50%;
 }
 
-[data-tao-calendar-cell][data-tao-range-end] [data-tao-calendar-cell-inner] {
+[data-tao-calendar-cell-button][data-tao-range-end] [data-tao-calendar-cell-inner] {
   background: var(--tao-primary);
   color: #fff;
 }
 
-[data-tao-calendar-cell][data-tao-range-start][data-tao-range-end]:before {
+[data-tao-calendar-cell-button][data-tao-range-start][data-tao-range-end]:before {
   background: none;
 }
 
@@ -689,7 +703,7 @@ button[data-tao-range-trigger][data-tao-size="large"] {
     font-size: var(--tao-font-size-base);
   }
 
-  [data-tao-drawer] [data-tao-calendar-cell]:before {
+  [data-tao-drawer] [data-tao-calendar-cell-button]:before {
     height: 36px;
   }