@dreamtree-org/twreact-ui 1.3.9 → 1.3.10

package/dist/esm/components/core/DatePicker.js

@@ -3,9 +3,10 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useMemo, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, subMonths, format, addMonths, isSameDay, isSameMonth, isToday, isBefore, isAfter } from 'date-fns';
+import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, isSameDay, subMonths, format, addMonths, isSameMonth, isToday, isBefore, isAfter, addDays } from 'date-fns';
 import { cn } from '../../utils/cn.js';
-import { ChevronLeft, ChevronRight, X, Calendar } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { ChevronLeft, ChevronRight, Calendar, X } from 'lucide-react';
 
 var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
@@ -64,19 +65,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     setCurrentMonth = _useState4[1];
   var datePickerRef = useRef(null);
   var popupRef = useRef(null);
+  var triggerRef = useRef(null);
   var gridButtonRefs = useRef([]);
-  var _useState5 = useState({}),
+  // Roving tabindex: the day the user moved to with the keyboard (or focused).
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    popupStyle = _useState6[0],
-    setPopupStyle = _useState6[1];
+    focusedDate = _useState6[0],
+    setFocusedDate = _useState6[1];
+  // Set when a keyboard action / open should move DOM focus to the active day.
+  var pendingFocusRef = useRef(false);
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupStyle = _useState8[0],
+    setPopupStyle = _useState8[1];
   useImperativeHandle(forwardedRef, function () {
     return datePickerRef.current;
   }, []);
   // Keep currentMonth in sync with external value changes
-  var _useState7 = useState(selected),
-    _useState8 = _slicedToArray(_useState7, 2),
-    prevSelected = _useState8[0],
-    setPrevSelected = _useState8[1];
+  var _useState9 = useState(selected),
+    _useState0 = _slicedToArray(_useState9, 2),
+    prevSelected = _useState0[0],
+    setPrevSelected = _useState0[1];
   if (selected !== prevSelected) {
     setPrevSelected(selected);
     if (selected) setCurrentMonth(selected);
@@ -98,7 +107,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     var handleKey = function handleKey(e) {
       if (!isOpen) return;
       if (e.key === "Escape") {
+        var _triggerRef$current;
+        var hadFocusInside = popupRef.current && popupRef.current.contains(document.activeElement);
         setIsOpen(false);
+        if (hadFocusInside) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       }
     };
     document.addEventListener("keydown", handleKey);
@@ -139,62 +151,81 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var handleDateSelect = function handleDateSelect(date) {
     if (isDateDisabled(date)) return;
     onChange === null || onChange === void 0 || onChange(date);
-    if (closeOnSelect) setIsOpen(false);
+    if (closeOnSelect) {
+      var _triggerRef$current2;
+      setIsOpen(false);
+      // The focused day unmounts with the popup; keep focus on the field.
+      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+    }
   };
-  // keyboard navigation inside the calendar grid
-  var focusDayAtIndex = function focusDayAtIndex(index) {
-    var btn = gridButtonRefs.current[index];
+  // Roving tabindex target: exactly one enabled day in the grid is tabbable.
+  // Priority: keyboard-focused day ?? selected ?? today (if shown & enabled)
+  // ?? first enabled day of the visible month ?? first enabled grid day.
+  var isUsable = function isUsable(d) {
+    return d && isSameMonth(d, currentMonth) && !isDateDisabled(d);
+  };
+  var activeDate = null;
+  if (isUsable(focusedDate)) activeDate = focusedDate;else if (isUsable(selected)) activeDate = selected;else if (isUsable(new Date())) activeDate = new Date();else activeDate = days.find(function (d) {
+    return isUsable(d);
+  }) || days.find(function (d) {
+    return !isDateDisabled(d);
+  }) || null;
+  var activeIndex = activeDate ? days.findIndex(function (d) {
+    return isSameDay(d, activeDate);
+  }) : -1;
+  // Move DOM focus to the active day after a keyboard action / open.
+  useEffect(function () {
+    if (!isOpen || !pendingFocusRef.current) return;
+    pendingFocusRef.current = false;
+    var btn = gridButtonRefs.current[activeIndex];
     if (btn && typeof btn.focus === "function") btn.focus();
+  });
+  var moveFocusTo = function moveFocusTo(date) {
+    if (!date || isDateDisabled(date)) return;
+    if (!isSameMonth(date, currentMonth)) setCurrentMonth(date);
+    setFocusedDate(date);
+    pendingFocusRef.current = true;
   };
   var handleGridKeyDown = function handleGridKeyDown(e, idx) {
+    var day = days[idx];
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(e.key)) {
       e.preventDefault();
     }
     switch (e.key) {
       case "ArrowLeft":
-        focusDayAtIndex(Math.max(0, idx - 1));
+        moveFocusTo(addDays(day, -1));
         break;
       case "ArrowRight":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 1));
+        moveFocusTo(addDays(day, 1));
         break;
       case "ArrowUp":
-        focusDayAtIndex(Math.max(0, idx - 7));
+        moveFocusTo(addDays(day, -7));
         break;
       case "ArrowDown":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 7));
+        moveFocusTo(addDays(day, 7));
         break;
       case "PageUp":
-        setCurrentMonth(function (m) {
-          return subMonths(m, 1);
-        });
+        moveFocusTo(subMonths(day, 1));
         break;
       case "PageDown":
-        setCurrentMonth(function (m) {
-          return addMonths(m, 1);
-        });
+        moveFocusTo(addMonths(day, 1));
         break;
       case "Home":
-        focusDayAtIndex(Math.floor(idx / 7) * 7);
+        moveFocusTo(days[Math.floor(idx / 7) * 7]);
         break;
       case "End":
-        focusDayAtIndex(Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6));
+        moveFocusTo(days[Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6)]);
         break;
       case "Enter":
-        if (!isDateDisabled(days[idx])) handleDateSelect(days[idx]);
+        if (!isDateDisabled(day)) handleDateSelect(day);
         break;
     }
   };
   var openAndFocusSelected = function openAndFocusSelected() {
+    setFocusedDate(null);
     setIsOpen(true);
-    // focus after opening on next tick
-    setTimeout(function () {
-      var idx = selected ? days.findIndex(function (d) {
-        return isSameDay(d, selected);
-      }) : days.findIndex(function (d) {
-        return isToday(d);
-      });
-      if (idx >= 0) focusDayAtIndex(idx);
-    }, 0);
+    // the active-day effect moves focus once the grid has rendered
+    pendingFocusRef.current = true;
   };
   // compute popup position so it's aware of viewport edges (top/bottom/left/right)
   var computePopupPosition = function computePopupPosition() {
@@ -266,7 +297,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className: "mb-4 flex items-center justify-between",
     children: [jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(subMonths(currentMonth, 1));
       },
@@ -279,7 +310,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       children: format(currentMonth, "MMMM yyyy")
     }), jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(addMonths(currentMonth, 1));
       },
@@ -321,12 +352,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             return gridButtonRefs.current[idx] = el;
           },
           role: "gridcell",
-          tabIndex: isSelected ? 0 : -1,
-          "aria-selected": isSelected,
+          tabIndex: idx === activeIndex ? 0 : -1,
+          "aria-selected": Boolean(isSelected),
           onKeyDown: function onKeyDown(e) {
             return handleGridKeyDown(e, idx);
           },
-          className: cn("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
+          onFocus: function onFocus() {
+            if (!focusedDate || !isSameDay(focusedDate, day)) setFocusedDate(day);
+          },
+          className: cn("h-8 w-8 rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", {
             "text-primary-400": !isCurrentMonth,
             "bg-primary-600 text-white": isSelected,
             "bg-primary-100 text-primary-600": isTodayDate && !isSelected,
@@ -382,6 +416,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       ref: datePickerRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
+        ref: triggerRef,
         type: "button",
         id: fieldId,
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
@@ -389,7 +424,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected
+          "text-primary-500": !selected,
+          // leave room for the sibling clear button overlaid on the field
+          "pr-16": showClear && selected
         }, className),
         onClick: function onClick() {
           return isOpen ? setIsOpen(false) : openAndFocusSelected();
@@ -402,24 +439,26 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "truncate",
           id: valueId,
           children: formatDisplayValue()
-        }), jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [showClear && selected && jsx("div", {
-            type: "button",
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              onChange === null || onChange === void 0 || onChange(null);
-            },
-            "aria-label": "Clear date",
-            className: "p-1",
-            children: jsx(X, {
-              className: "h-4 w-4 text-primary-400"
-            })
-          }), jsx(Calendar, {
-            className: "h-4 w-4 text-primary-400"
-          })]
+        }), jsx(Calendar, {
+          className: "h-4 w-4 shrink-0 text-primary-400",
+          "aria-hidden": "true"
         })]
-      })), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+      })), showClear && selected && jsx("button", {
+        type: "button",
+        "aria-label": "Clear date",
+        disabled: disabled,
+        onClick: function onClick() {
+          var _triggerRef$current3;
+          onChange === null || onChange === void 0 || onChange(null);
+          // this button unmounts once the value clears
+          (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
+        },
+        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
+        children: jsx(X, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",

package/dist/esm/components/core/Form.js

@@ -40,6 +40,19 @@ var FieldMessage = function FieldMessage(_ref) {
   }
   return null;
 };
+// Static class map for field groups (DTUI-19). A dynamic `grid-cols-${n}`
+// string is invisible to Tailwind's content scan and gets purged, so every
+// layout is spelled out here. All layouts collapse to one column below `sm`.
+var GRID_COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gridColsClass = function gridColsClass(n) {
+  var cols = Math.min(4, Math.max(1, Math.trunc(Number(n)) || 1));
+  return GRID_COLS[cols];
+};
 var describedByFor = function describedByFor(fieldId, error, helperText) {
   return error ? "".concat(fieldId, "-error") : helperText ? "".concat(fieldId, "-helper") : undefined;
 };
@@ -72,8 +85,12 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     _methods$formState = methods.formState,
     errors = _methods$formState.errors,
     isSubmitting = _methods$formState.isSubmitting;
-  var handleFormSubmit = useCallback(function (data) {
-    onSubmit === null || onSubmit === void 0 || onSubmit(data);
+  var handleFormSubmit = useCallback(
+  // Return the handler's result so react-hook-form awaits an async
+  // onSubmit and `isSubmitting` (the submit button's loading state)
+  // reflects the real work (DTUI-19).
+  function (data) {
+    return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data);
   }, [onSubmit]);
   var handleReset = useCallback(function () {
     reset(defaultValues);
@@ -259,7 +276,8 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               ref = _ref8$field.ref;
             return jsxs("div", {
               className: "w-full",
-              children: [label && jsxs("label", {
+              children: [label && jsxs("span", {
+                id: "".concat(fieldId, "-label"),
                 className: "block text-sm font-medium mb-2",
                 children: [label, required && jsx("span", {
                   className: "text-error-500 ml-1",
@@ -268,20 +286,29 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               }), jsx("div", {
                 className: "space-y-2",
                 role: "radiogroup",
-                "aria-label": typeof label === "string" ? label : undefined,
+                "aria-labelledby": label ? "".concat(fieldId, "-label") : undefined,
+                "aria-required": required ? "true" : undefined,
                 "aria-describedby": describedBy,
-                children: options === null || options === void 0 ? void 0 : options.map(function (option) {
+                children: options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+                  // Shared `name` makes the options one native group
+                  // (arrow keys, single tab stop); id/htmlFor makes each
+                  // option label clickable and its accessible name.
+                  var optionId = "".concat(fieldId, "-option-").concat(index);
                   return jsxs("div", {
                     className: "flex items-center",
                     children: [jsx("input", {
-                      ref: ref,
+                      ref: index === 0 ? ref : undefined,
+                      id: optionId,
                       type: "radio",
+                      name: name,
+                      value: String(option.value),
                       checked: value === option.value,
                       onChange: function onChange() {
                         return _onChange2(option.value);
                       },
-                      className: "text-primary-600 focus:ring-primary-500"
+                      className: "text-primary-600 focus:ring-primary-500 focus-visible:ring-2"
                     }), jsx("label", {
+                      htmlFor: optionId,
                       className: "ml-2 text-sm",
                       children: option.label
                     })]
@@ -484,7 +511,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
           className: "text-sm text-primary-600",
           children: group.description
         }), jsx("div", {
-          className: cn("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1"),
+          className: cn("grid gap-4", gridColsClass(group.gridCols)),
           children: group.fields.map(renderField)
         })]
       }, group.name);

package/dist/esm/components/core/Input.js

@@ -90,7 +90,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
   var baseClasses = cn("w-full rounded-md border bg-white text-sm placeholder-gray-400 disabled:opacity-50", "h-10 leading-10",
   // consistent height
-  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "", className);
+  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "",
+  // Neutral state needs a visible keyboard focus indicator too.
+  !error && !success && "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", className);
   var inputType = isPassword && showPassword ? "text" : type;
   return jsxs("div", {
     className: "w-full",