@simplybusiness/mobius-datepicker 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 7.1.0
+
+### Minor Changes
+
+- 6c33527: Add accessibility changes
+
+### Patch Changes
+
+- e587a8f: placeholder text style on date picker
+- Updated dependencies [f902a17]
+- Updated dependencies [d3d22b2]
+- Updated dependencies [4e7ea0b]
+  - @simplybusiness/mobius@6.1.0
+
 ## 7.0.0
 
 ### Major Changes

package/dist/cjs/index.js

@@ -144,7 +144,7 @@ var init_useFocusTrap = __esm({
         if (containerRef.current) {
           const element = containerRef.current;
           const focusableElements = containerRef.current.querySelectorAll(
-            '.rdp-nav_button, [tabindex="0"]'
+            '[tabindex="0"], .mobius-date-picker__nav-button'
           );
           const firstElement = focusableElements[0];
           const lastElement = focusableElements[focusableElements.length - 1];
@@ -153,7 +153,9 @@ var init_useFocusTrap = __esm({
               if (event.shiftKey && document.activeElement === firstElement) {
                 event.preventDefault();
                 lastElement.focus();
-              } else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf("rdp-day") > -1) {
+              } else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf(
+                "mobius-date-picker__day-button"
+              ) > -1) {
                 event.preventDefault();
                 firstElement.focus();
               }
@@ -203,18 +205,55 @@ var init_timezoneOffset = __esm({
   }
 });
 
+// src/components/DatePicker/CustomComponents/CaptionLabel.tsx
+var import_jsx_runtime2, CaptionLabel;
+var init_CaptionLabel = __esm({
+  "src/components/DatePicker/CustomComponents/CaptionLabel.tsx"() {
+    "use strict";
+    import_jsx_runtime2 = require("react/jsx-runtime");
+    CaptionLabel = (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { ...props });
+    };
+  }
+});
+
+// src/components/DatePicker/CustomComponents/ChevronComponent.tsx
+var import_icons, import_mobius, import_jsx_runtime3, ChevronComponent;
+var init_ChevronComponent = __esm({
+  "src/components/DatePicker/CustomComponents/ChevronComponent.tsx"() {
+    "use strict";
+    import_icons = require("@simplybusiness/icons");
+    import_mobius = require("@simplybusiness/mobius");
+    import_jsx_runtime3 = require("react/jsx-runtime");
+    ChevronComponent = ({ orientation }) => {
+      if (orientation === "left") {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius.Icon, { icon: import_icons.chevronLeft });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius.Icon, { icon: import_icons.chevronRight });
+    };
+  }
+});
+
+// src/components/DatePicker/CustomComponents/index.tsx
+var init_CustomComponents = __esm({
+  "src/components/DatePicker/CustomComponents/index.tsx"() {
+    "use strict";
+    init_CaptionLabel();
+    init_ChevronComponent();
+  }
+});
+
 // src/components/DatePicker/DatePickerModal.tsx
 var DatePickerModal_exports = {};
 __export(DatePickerModal_exports, {
   default: () => DatePickerModal_default
 });
-var import_icons, import_mobius, import_dedupe, import_date_fns3, import_react2, import_react_day_picker, import_jsx_runtime2, PARENT_NODE, ChevronComponent, startWeekday, DatePickerModal, DatePickerModal_default;
+var import_mobius2, import_dedupe, import_date_fns3, import_react2, import_react_day_picker, import_jsx_runtime4, startWeekday, DatePickerModal, DatePickerModal_default;
 var init_DatePickerModal = __esm({
   "src/components/DatePicker/DatePickerModal.tsx"() {
     "use strict";
     "use client";
-    import_icons = require("@simplybusiness/icons");
-    import_mobius = require("@simplybusiness/mobius");
+    import_mobius2 = require("@simplybusiness/mobius");
     import_dedupe = __toESM(require("classnames/dedupe"));
     import_date_fns3 = require("date-fns");
     import_react2 = require("react");
@@ -223,16 +262,8 @@ var init_DatePickerModal = __esm({
     init_utils();
     init_getStartWeekday();
     init_timezoneOffset();
-    import_jsx_runtime2 = require("react/jsx-runtime");
-    PARENT_NODE = typeof document !== "undefined" && document.body;
-    ChevronComponent = ({
-      orientation
-    }) => {
-      if (orientation === "left") {
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mobius.Icon, { icon: import_icons.chevronLeft });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mobius.Icon, { icon: import_icons.chevronRight });
-    };
+    init_CustomComponents();
+    import_jsx_runtime4 = require("react/jsx-runtime");
     startWeekday = getStartWeekday(
       // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
       typeof navigator !== "undefined" ? navigator?.language : void 0
@@ -250,18 +281,14 @@ var init_DatePickerModal = __esm({
       const minDate = min ? toLocal(min) : void 0;
       const maxDate = max ? toLocal(max) : void 0;
       const hiddenId = `screen-reader-title-${(0, import_react2.useId)()}`;
-      if (isOpen && PARENT_NODE) {
-        PARENT_NODE?.setAttribute("aria-hidden", "true");
-      }
       const handleSelected = (selectedDate) => {
-        if (PARENT_NODE) PARENT_NODE?.removeAttribute("aria-hidden");
         onSelected(selectedDate);
       };
       const handleDayPickerSelect = (selectedDate) => {
         if (!selectedDate) return;
         handleSelected(dateObjToString(selectedDate));
       };
-      (0, import_mobius.useOnClickOutside)(modalRef, () => {
+      (0, import_mobius2.useOnClickOutside)(modalRef, () => {
         if (modalRef.current && isOpen) {
           handleSelected();
         }
@@ -269,7 +296,7 @@ var init_DatePickerModal = __esm({
       const modalClasses = (0, import_dedupe.default)("mobius-date-picker__modal", {
         "--is-open": isOpen
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           ref: modalRef,
@@ -278,10 +305,11 @@ var init_DatePickerModal = __esm({
           "aria-describedby": hiddenId,
           "data-testid": "modal-container",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mobius.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mobius2.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               import_react_day_picker.DayPicker,
               {
+                autoFocus: true,
                 mode: "single",
                 ...minDate && { startMonth: minDate },
                 ...maxDate && { endMonth: maxDate },
@@ -297,7 +325,8 @@ var init_DatePickerModal = __esm({
                 weekStartsOn: startWeekday,
                 formatters: { formatWeekdayName: weekdayAsOneLetter },
                 components: {
-                  Chevron: ChevronComponent
+                  Chevron: ChevronComponent,
+                  CaptionLabel
                 },
                 classNames: {
                   root: "mobius-date-picker__root",
@@ -341,7 +370,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/DatePicker/DatePicker.tsx
 var import_icons2 = require("@simplybusiness/icons");
-var import_mobius2 = require("@simplybusiness/mobius");
+var import_mobius3 = require("@simplybusiness/mobius");
 var import_dedupe2 = __toESM(require("classnames/dedupe"));
 var import_react3 = require("react");
 
@@ -355,7 +384,7 @@ var isTouchDevice = () => {
 
 // src/components/DatePicker/DatePicker.tsx
 init_utils();
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DatePickerModal2 = (0, import_react3.lazy)(() => Promise.resolve().then(() => (init_DatePickerModal(), DatePickerModal_exports)));
 var getValidationState = (props) => {
   const { validationState, isInvalid } = props;
@@ -391,7 +420,7 @@ var DatePicker = (props) => {
   });
   const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
   const touchDevice = isTouchDevice();
-  const validationClasses = (0, import_mobius2.useValidationClasses)({
+  const validationClasses = (0, import_mobius3.useValidationClasses)({
     validationState,
     isInvalid: isInvalidProp
   });
@@ -408,6 +437,7 @@ var DatePicker = (props) => {
     validationClasses
   );
   const validate = () => {
+    if (isOpen) return;
     const isValidInput = inputRef.current?.checkValidity();
     if (!isValidInput) {
       setIsValid(false);
@@ -435,9 +465,13 @@ var DatePicker = (props) => {
       setIsValid(true);
       onChange?.(selectedDate);
     }
+    inputRef.current?.focus();
     setIsOpen(false);
   };
   const handleBlur = (event) => {
+    if (isOpen && event.relatedTarget && containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
     validate();
     if (!textFieldVal) {
       setIsValid(false);
@@ -457,8 +491,8 @@ var DatePicker = (props) => {
     validate();
   }, [isOpen]);
   if (touchDevice) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_mobius2.TextField,
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_mobius3.TextField,
       {
         ref: inputRef,
         type: "date",
@@ -473,9 +507,9 @@ var DatePicker = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: containerClasses, ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_mobius2.TextField,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: containerClasses, ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_mobius3.TextField,
       {
         ref: inputRef,
         type: "date",
@@ -488,22 +522,22 @@ var DatePicker = (props) => {
         isInvalid: isInvalidProp,
         ...otherProps,
         errorMessage: errorMessage || errorMessageText,
-        suffixOutside: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_mobius2.Button,
+        suffixOutside: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_mobius3.Button,
           {
             className: popoverToggleClasses,
             onClick: togglePopoverVisibility,
             isDisabled,
             size: "sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius2.Icon, { size: "sm", icon: import_icons2.calendarDay }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobius2.VisuallyHidden, { children: "Pick date" })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mobius3.Icon, { size: "sm", icon: import_icons2.calendarDay }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mobius3.VisuallyHidden, { children: "Pick date" })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       DatePickerModal2,
       {
         date: textFieldVal,

package/dist/esm/{DatePickerModal-AC36MP2W.js → DatePickerModal-CHBI5WBW.js}

@@ -1,12 +1,7 @@
 "use client";
 
 // src/components/DatePicker/DatePickerModal.tsx
-import { chevronLeft, chevronRight } from "@simplybusiness/icons";
-import {
-  Icon,
-  VisuallyHidden,
-  useOnClickOutside
-} from "@simplybusiness/mobius";
+import { VisuallyHidden, useOnClickOutside } from "@simplybusiness/mobius";
 import classNames from "classnames/dedupe";
 import { parseISO } from "date-fns";
 import { useId, useRef as useRef2 } from "react";
@@ -21,7 +16,7 @@ var useFocusTrap = () => {
     if (containerRef.current) {
       const element = containerRef.current;
       const focusableElements = containerRef.current.querySelectorAll(
-        '.rdp-nav_button, [tabindex="0"]'
+        '[tabindex="0"], .mobius-date-picker__nav-button'
       );
       const firstElement = focusableElements[0];
       const lastElement = focusableElements[focusableElements.length - 1];
@@ -30,7 +25,9 @@ var useFocusTrap = () => {
           if (event.shiftKey && document.activeElement === firstElement) {
             event.preventDefault();
             lastElement.focus();
-          } else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf("rdp-day") > -1) {
+          } else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf(
+            "mobius-date-picker__day-button"
+          ) > -1) {
             event.preventDefault();
             firstElement.focus();
           }
@@ -92,17 +89,25 @@ function toLocal(utcDateString) {
   return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 6e4);
 }
 
-// src/components/DatePicker/DatePickerModal.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var PARENT_NODE = typeof document !== "undefined" && document.body;
-var ChevronComponent = ({
-  orientation
-}) => {
+// src/components/DatePicker/CustomComponents/CaptionLabel.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CaptionLabel = (props) => {
+  return /* @__PURE__ */ jsx2("h2", { ...props });
+};
+
+// src/components/DatePicker/CustomComponents/ChevronComponent.tsx
+import { chevronLeft, chevronRight } from "@simplybusiness/icons";
+import { Icon } from "@simplybusiness/mobius";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChevronComponent = ({ orientation }) => {
   if (orientation === "left") {
-    return /* @__PURE__ */ jsx2(Icon, { icon: chevronLeft });
+    return /* @__PURE__ */ jsx3(Icon, { icon: chevronLeft });
   }
-  return /* @__PURE__ */ jsx2(Icon, { icon: chevronRight });
+  return /* @__PURE__ */ jsx3(Icon, { icon: chevronRight });
 };
+
+// src/components/DatePicker/DatePickerModal.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var startWeekday = getStartWeekday(
   // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   typeof navigator !== "undefined" ? navigator?.language : void 0
@@ -120,11 +125,7 @@ var DatePickerModal = ({
   const minDate = min ? toLocal(min) : void 0;
   const maxDate = max ? toLocal(max) : void 0;
   const hiddenId = `screen-reader-title-${useId()}`;
-  if (isOpen && PARENT_NODE) {
-    PARENT_NODE?.setAttribute("aria-hidden", "true");
-  }
   const handleSelected = (selectedDate) => {
-    if (PARENT_NODE) PARENT_NODE?.removeAttribute("aria-hidden");
     onSelected(selectedDate);
   };
   const handleDayPickerSelect = (selectedDate) => {
@@ -139,7 +140,7 @@ var DatePickerModal = ({
   const modalClasses = classNames("mobius-date-picker__modal", {
     "--is-open": isOpen
   });
-  return /* @__PURE__ */ jsx2(FocusTrap, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx4(FocusTrap, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: modalRef,
@@ -148,10 +149,11 @@ var DatePickerModal = ({
       "aria-describedby": hiddenId,
       "data-testid": "modal-container",
       children: [
-        /* @__PURE__ */ jsx2(VisuallyHidden, { children: /* @__PURE__ */ jsx2("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(VisuallyHidden, { children: /* @__PURE__ */ jsx4("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
+        /* @__PURE__ */ jsx4(
           DayPicker,
           {
+            autoFocus: true,
             mode: "single",
             ...minDate && { startMonth: minDate },
             ...maxDate && { endMonth: maxDate },
@@ -167,7 +169,8 @@ var DatePickerModal = ({
             weekStartsOn: startWeekday,
             formatters: { formatWeekdayName: weekdayAsOneLetter },
             components: {
-              Chevron: ChevronComponent
+              Chevron: ChevronComponent,
+              CaptionLabel
             },
             classNames: {
               root: "mobius-date-picker__root",

package/dist/esm/index.js

@@ -59,7 +59,7 @@ var validateDateFormat = (date) => {
 
 // src/components/DatePicker/DatePicker.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var DatePickerModal = lazy(() => import("./DatePickerModal-AC36MP2W.js"));
+var DatePickerModal = lazy(() => import("./DatePickerModal-CHBI5WBW.js"));
 var getValidationState = (props) => {
   const { validationState, isInvalid } = props;
   if (isInvalid || validationState === "invalid") {
@@ -111,6 +111,7 @@ var DatePicker = (props) => {
     validationClasses
   );
   const validate = () => {
+    if (isOpen) return;
     const isValidInput = inputRef.current?.checkValidity();
     if (!isValidInput) {
       setIsValid(false);
@@ -138,9 +139,13 @@ var DatePicker = (props) => {
       setIsValid(true);
       onChange?.(selectedDate);
     }
+    inputRef.current?.focus();
     setIsOpen(false);
   };
   const handleBlur = (event) => {
+    if (isOpen && event.relatedTarget && containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
     validate();
     if (!textFieldVal) {
       setIsValid(false);