@simplybusiness/mobius-datepicker 9.0.9 → 9.1.1

package/dist/esm/chunk-TAURHEHL.js

@@ -0,0 +1,193 @@
+import {
+  validateDateFormat
+} from "./chunk-AOSXRXGA.js";
+import {
+  formatErrorMessageText
+} from "./chunk-UJQXNOUG.js";
+import {
+  isTouchDevice
+} from "./chunk-52KEWVWB.js";
+
+// src/components/DatePicker/DatePicker.tsx
+import { calendarDay } from "@simplybusiness/icons";
+import {
+  Button,
+  Icon,
+  TextField,
+  VisuallyHidden,
+  useValidationClasses
+} from "@simplybusiness/mobius";
+import classNames from "classnames/dedupe";
+import {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import "@simplybusiness/mobius-datepicker/src/components/DatePicker/DatePicker.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePickerModal = lazy(() => import("./components/DatePicker/DatePickerModal.js"));
+var getValidationState = (isInvalid) => {
+  if (isInvalid) {
+    return true;
+  }
+  if (isInvalid === false) {
+    return false;
+  }
+  return void 0;
+};
+var DatePicker = (props) => {
+  const {
+    onChange,
+    defaultValue = "",
+    isDisabled,
+    isInvalid,
+    errorMessage = "",
+    ...otherProps
+  } = props;
+  const containerRef = useRef(null);
+  const [top, setTop] = useState(0);
+  const inputRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [textFieldVal, setTextFieldVal] = useState(
+    validateDateFormat(defaultValue)
+  );
+  const [isValid, setIsValid] = useState(void 0);
+  const isInvalidProp = getValidationState(isValid === false || isInvalid);
+  const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
+  const touchDevice = isTouchDevice();
+  const validationClasses = useValidationClasses({ isInvalid: isInvalidProp });
+  const containerClasses = classNames(
+    "mobius-date-picker__container",
+    {
+      "--is-disabled": isDisabled,
+      "--is-touch-device": touchDevice
+    },
+    validationClasses
+  );
+  const popoverToggleClasses = classNames(
+    "mobius-date-picker__field-button",
+    validationClasses
+  );
+  const validate = useCallback(() => {
+    if (isOpen) return;
+    const isValidInput = inputRef.current?.checkValidity();
+    if (!isValidInput) {
+      setIsValid(false);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!inputRef.current) return;
+    const validatedValue = validateDateFormat(defaultValue);
+    setTextFieldVal(validatedValue);
+    inputRef.current.value = validatedValue;
+    setIsValid(true);
+    validate();
+  }, [defaultValue, validate]);
+  const togglePopoverVisibility = () => {
+    setIsValid(true);
+    setIsOpen(!isOpen);
+  };
+  const handleTextFieldChange = (event) => {
+    setTextFieldVal(event.target.value);
+    setIsValid(true);
+  };
+  const onDateSelected = (selectedDate) => {
+    if (selectedDate) {
+      setTextFieldVal(selectedDate);
+      setIsValid(true);
+      onChange?.(selectedDate);
+    }
+    inputRef.current?.focus();
+    setIsOpen(false);
+  };
+  const handleBlur = (event) => {
+    const target = event.target;
+    if (isOpen && event.relatedTarget && containerRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    validate();
+    if (!textFieldVal) {
+      setIsValid(false);
+    }
+    onChange?.(target.value);
+  };
+  const handleClick = (event) => {
+    event.preventDefault();
+    togglePopoverVisibility();
+  };
+  useEffect(() => {
+    if (isOpen) {
+      setTop(containerRef.current?.getBoundingClientRect().height || 0);
+      setIsValid(true);
+      return;
+    }
+    validate();
+  }, [isOpen, validate]);
+  if (touchDevice) {
+    return /* @__PURE__ */ jsx("div", { className: containerClasses, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: inputRef,
+        type: "date",
+        className: "mobius-date-picker",
+        onBlur: handleBlur,
+        onChange: handleTextFieldChange,
+        value: textFieldVal,
+        isDisabled,
+        isInvalid: isInvalidProp,
+        ...otherProps,
+        errorMessage: errorMessage || errorMessageText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, ref: containerRef, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: inputRef,
+        type: "date",
+        className: "mobius-date-picker",
+        onBlur: handleBlur,
+        onChange: handleTextFieldChange,
+        onClick: handleClick,
+        value: textFieldVal,
+        isDisabled,
+        isInvalid: isInvalidProp,
+        ...otherProps,
+        errorMessage: errorMessage || errorMessageText,
+        suffixOutside: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: popoverToggleClasses,
+            onClick: togglePopoverVisibility,
+            isDisabled,
+            size: "sm",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: "sm", icon: calendarDay }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: "Pick date" })
+            ]
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+      DatePickerModal,
+      {
+        date: textFieldVal,
+        isOpen,
+        top,
+        onSelected: onDateSelected,
+        min: props.min,
+        max: props.max
+      }
+    ) })
+  ] });
+};
+
+export {
+  DatePicker
+};
+//# sourceMappingURL=chunk-TAURHEHL.js.map

package/dist/esm/chunk-TAURHEHL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/DatePicker/DatePicker.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { calendarDay } from \"@simplybusiness/icons\";\nimport type {\n  TextFieldElementType,\n  TextFieldProps,\n  Validation,\n} from \"@simplybusiness/mobius\";\nimport {\n  Button,\n  Icon,\n  TextField,\n  VisuallyHidden,\n  useValidationClasses,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport {\n  Suspense,\n  lazy,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type MouseEvent,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\nimport \"./DatePicker.css\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nconst getValidationState = (isInvalid: boolean | undefined) => {\n  if (isInvalid) {\n    return true;\n  }\n\n  if (isInvalid === false) {\n    return false;\n  }\n\n  return undefined;\n};\n\nexport interface DatePickerProps\n  extends\n    Validation,\n    Omit<TextFieldProps, \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"> {\n  onChange?: (date: string | undefined) => void;\n  defaultValue?: string;\n  min?: string;\n  max?: string;\n  id?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    onChange,\n    defaultValue = \"\",\n    isDisabled,\n    isInvalid,\n    errorMessage = \"\",\n    ...otherProps\n  } = props;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [top, setTop] = useState<number>(0);\n  const inputRef = useRef<TextFieldElementType | null>(null);\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [textFieldVal, setTextFieldVal] = useState<string>(\n    validateDateFormat(defaultValue),\n  );\n  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);\n  const isInvalidProp = getValidationState(isValid === false || isInvalid);\n  const errorMessageText = isInvalidProp\n    ? formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = useValidationClasses({ isInvalid: isInvalidProp });\n\n  const containerClasses = classNames(\n    \"mobius-date-picker__container\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-touch-device\": touchDevice,\n    },\n    validationClasses,\n  );\n\n  const popoverToggleClasses = classNames(\n    \"mobius-date-picker__field-button\",\n    validationClasses,\n  );\n\n  const validate = useCallback(() => {\n    if (isOpen) return;\n\n    // If 'min' or 'max' values are provided, checkValidity() will\n    // validate the date and return a boolean\n    const isValidInput = inputRef.current?.checkValidity();\n\n    if (!isValidInput) {\n      setIsValid(false);\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!inputRef.current) return;\n    const validatedValue = validateDateFormat(defaultValue);\n    setTextFieldVal(validatedValue);\n    inputRef.current.value = validatedValue;\n    setIsValid(true);\n    validate();\n  }, [defaultValue, validate]);\n\n  const togglePopoverVisibility = () => {\n    setIsValid(true);\n    setIsOpen(!isOpen);\n  };\n\n  const handleTextFieldChange = (event: ChangeEvent<TextFieldElementType>) => {\n    setTextFieldVal(event.target.value);\n    // onChange only triggers on a valid date\n    // so this clears the error\n    setIsValid(true);\n  };\n\n  const onDateSelected = (selectedDate: string | undefined) => {\n    // Handle null callback from useOnClickOutside\n    if (selectedDate) {\n      setTextFieldVal(selectedDate);\n      setIsValid(true);\n      // Add other callback events here\n      onChange?.(selectedDate);\n    }\n    // Focus the input\n    inputRef.current?.focus();\n    setIsOpen(false);\n  };\n\n  // User has interacted with the component and navigated away\n  const handleBlur = (event: FocusEvent) => {\n    const target = event.target as TextFieldElementType;\n    // If the blur is caused by focusing on the DayPicker modal, do nothing\n    // The modal is rendered after the input in the DOM,\n    // so check if the relatedTarget is inside the modal\n    if (\n      isOpen &&\n      event.relatedTarget &&\n      containerRef.current?.contains(event.relatedTarget as HTMLElement)\n    ) {\n      return;\n    }\n    validate();\n\n    // User hasn't entered a date, or entered an invalid date\n    if (!textFieldVal) {\n      setIsValid(false);\n    }\n\n    onChange?.(target.value);\n  };\n\n  const handleClick = (event: MouseEvent<TextFieldElementType>) => {\n    event.preventDefault();\n    togglePopoverVisibility();\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      setTop(containerRef.current?.getBoundingClientRect().height || 0);\n      // Disable validation when day picker is open\n      setIsValid(true);\n      return;\n    }\n\n    validate();\n  }, [isOpen, validate]);\n\n  if (touchDevice) {\n    return (\n      <div className={containerClasses}>\n        <TextField\n          ref={inputRef}\n          type=\"date\"\n          className=\"mobius-date-picker\"\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          isInvalid={isInvalidProp}\n          {...otherProps}\n          errorMessage={errorMessage || errorMessageText}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerClasses} ref={containerRef}>\n      <TextField\n        ref={inputRef}\n        type=\"date\"\n        className=\"mobius-date-picker\"\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        // @ts-expect-error onClick is not in TextField's props but is passed through via otherProps spread\n        onClick={handleClick}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        isInvalid={isInvalidProp}\n        {...otherProps}\n        errorMessage={errorMessage || errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n            size=\"sm\"\n          >\n            <Icon size=\"sm\" icon={calendarDay} />\n            <VisuallyHidden>Pick date</VisuallyHidden>\n          </Button>\n        }\n      />\n      {isOpen && (\n        <Suspense>\n          <DatePickerModal\n            date={textFieldVal}\n            isOpen={isOpen}\n            top={top}\n            onSelected={onDateSelected}\n            min={props.min}\n            max={props.max}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/chunk-UJQXNOUG.js

@@ -0,0 +1,25 @@
+// src/components/DatePicker/utils/formatErrorMessageText.ts
+import { isAfter, isBefore } from "date-fns";
+var DEFAULT_INVALID_DATE_MESSAGE = "Please enter a valid date";
+var DEFAULT_BEFORE_MIN = "The date you selected is before the earliest allowed date";
+var DEFAULT_AFTER_MAX = "The date you selected is after the latest allowed date";
+var formatErrorMessageText = (actual, min, max) => {
+  const actualDate = new Date(actual);
+  const minDate = min && new Date(min);
+  const maxDate = max && new Date(max);
+  if (minDate && isBefore(actualDate, minDate)) {
+    return DEFAULT_BEFORE_MIN;
+  }
+  if (maxDate && isAfter(actualDate, maxDate)) {
+    return DEFAULT_AFTER_MAX;
+  }
+  return DEFAULT_INVALID_DATE_MESSAGE;
+};
+
+export {
+  DEFAULT_INVALID_DATE_MESSAGE,
+  DEFAULT_BEFORE_MIN,
+  DEFAULT_AFTER_MAX,
+  formatErrorMessageText
+};
+//# sourceMappingURL=chunk-UJQXNOUG.js.map

package/dist/esm/chunk-UJQXNOUG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/DatePicker/utils/formatErrorMessageText.ts"],
+  "sourcesContent": ["import { isAfter, isBefore } from \"date-fns\";\n\nexport const DEFAULT_INVALID_DATE_MESSAGE = \"Please enter a valid date\";\nexport const DEFAULT_BEFORE_MIN =\n  \"The date you selected is before the earliest allowed date\";\nexport const DEFAULT_AFTER_MAX =\n  \"The date you selected is after the latest allowed date\";\n\nexport const formatErrorMessageText = (\n  actual: string,\n  min?: string,\n  max?: string,\n) => {\n  const actualDate = new Date(actual);\n  const minDate = min && new Date(min);\n  const maxDate = max && new Date(max);\n\n  if (minDate && isBefore(actualDate, minDate)) {\n    return DEFAULT_BEFORE_MIN;\n  }\n\n  if (maxDate && isAfter(actualDate, maxDate)) {\n    return DEFAULT_AFTER_MAX;\n  }\n\n  return DEFAULT_INVALID_DATE_MESSAGE;\n};\n"],
+  "mappings": ";AAAA,SAAS,SAAS,gBAAgB;AAE3B,IAAM,+BAA+B;AACrC,IAAM,qBACX;AACK,IAAM,oBACX;AAEK,IAAM,yBAAyB,CACpC,QACA,KACA,QACG;AACH,QAAM,aAAa,IAAI,KAAK,MAAM;AAClC,QAAM,UAAU,OAAO,IAAI,KAAK,GAAG;AACnC,QAAM,UAAU,OAAO,IAAI,KAAK,GAAG;AAEnC,MAAI,WAAW,SAAS,YAAY,OAAO,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ,YAAY,OAAO,GAAG;AAC3C,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/chunk-UNC7C5OV.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-UNC7C5OV.js.map

package/dist/esm/chunk-UNC7C5OV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/CustomComponents/CaptionLabel.js

@@ -0,0 +1,7 @@
+import {
+  CaptionLabel
+} from "../../../chunk-KW6EFBPT.js";
+export {
+  CaptionLabel
+};
+//# sourceMappingURL=CaptionLabel.js.map

package/dist/esm/components/DatePicker/CustomComponents/CaptionLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/CustomComponents/ChevronComponent.js

@@ -0,0 +1,7 @@
+import {
+  ChevronComponent
+} from "../../../chunk-GKDMKCFX.js";
+export {
+  ChevronComponent
+};
+//# sourceMappingURL=ChevronComponent.js.map

package/dist/esm/components/DatePicker/CustomComponents/ChevronComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/CustomComponents/index.js

@@ -0,0 +1,12 @@
+import "../../../chunk-24MISPYQ.js";
+import {
+  CaptionLabel
+} from "../../../chunk-KW6EFBPT.js";
+import {
+  ChevronComponent
+} from "../../../chunk-GKDMKCFX.js";
+export {
+  CaptionLabel,
+  ChevronComponent
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DatePicker/CustomComponents/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+"use client";
+import {
+  DatePicker
+} from "../../chunk-TAURHEHL.js";
+import "../../chunk-E5XSED6Z.js";
+import "../../chunk-AOSXRXGA.js";
+import "../../chunk-A62CZFEQ.js";
+import "../../chunk-4UUTCJ7P.js";
+import "../../chunk-CH3KSJSE.js";
+import "../../chunk-UJQXNOUG.js";
+import "../../chunk-52KEWVWB.js";
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,7 @@
+// src/components/DatePicker/DatePickerIcon.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var DatePickerIcon = () => /* @__PURE__ */ jsx(Fragment, { children: " " });
+export {
+  DatePickerIcon
+};
+//# sourceMappingURL=DatePickerIcon.js.map

package/dist/esm/components/DatePicker/DatePickerIcon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DatePicker/DatePickerIcon.tsx"],
+  "sourcesContent": ["export const DatePickerIcon = () => <> </>;\n"],
+  "mappings": ";AAAoC;AAA7B,IAAM,iBAAiB,MAAM,gCAAE,eAAC;",
+  "names": []
+}

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

@@ -0,0 +1,134 @@
+"use client";
+import {
+  getStartWeekday
+} from "../../chunk-6TTD4G74.js";
+import {
+  toLocal
+} from "../../chunk-IVRD2PA6.js";
+import "../../chunk-24MISPYQ.js";
+import {
+  CaptionLabel
+} from "../../chunk-KW6EFBPT.js";
+import {
+  ChevronComponent
+} from "../../chunk-GKDMKCFX.js";
+import "../../chunk-E5XSED6Z.js";
+import "../../chunk-AOSXRXGA.js";
+import {
+  weekdayAsOneLetter
+} from "../../chunk-A62CZFEQ.js";
+import "../../chunk-4UUTCJ7P.js";
+import {
+  dateObjToString
+} from "../../chunk-CH3KSJSE.js";
+import "../../chunk-UJQXNOUG.js";
+import {
+  FocusTrap
+} from "../../chunk-LR7ML4HC.js";
+
+// src/components/DatePicker/DatePickerModal.tsx
+import { useOnClickOutside } from "@simplybusiness/mobius-hooks";
+import { VisuallyHidden } from "@simplybusiness/mobius";
+import classNames from "classnames/dedupe";
+import { parseISO } from "date-fns";
+import { useId, useRef } from "react";
+import { DayPicker } from "react-day-picker";
+import { jsx, 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
+);
+var DatePickerModal = ({
+  date,
+  isOpen,
+  onSelected,
+  top,
+  min,
+  max
+}) => {
+  const modalRef = useRef(null);
+  const initialDate = date ? toLocal(date) : void 0;
+  const minDate = min ? toLocal(min) : void 0;
+  const maxDate = max ? toLocal(max) : void 0;
+  const hiddenId = `screen-reader-title-${useId()}`;
+  const handleSelected = (selectedDate) => {
+    onSelected(selectedDate);
+  };
+  const handleDayPickerSelect = (selectedDate) => {
+    if (!selectedDate) return;
+    handleSelected(dateObjToString(selectedDate));
+  };
+  useOnClickOutside(modalRef, () => {
+    if (modalRef.current && isOpen) {
+      handleSelected();
+    }
+  });
+  const modalClasses = classNames("mobius-date-picker__modal", {
+    "--is-open": isOpen
+  });
+  return /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: modalRef,
+      className: modalClasses,
+      style: { top },
+      "aria-describedby": hiddenId,
+      "data-testid": "modal-container",
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("div", { id: hiddenId, children: "Please select a date from the calendar" }) }),
+        /* @__PURE__ */ jsx(
+          DayPicker,
+          {
+            autoFocus: true,
+            mode: "single",
+            ...minDate && { startMonth: minDate },
+            ...maxDate && { endMonth: maxDate },
+            disabled: {
+              ...min && { before: parseISO(min) },
+              ...max && { after: parseISO(max) }
+            },
+            selected: initialDate,
+            defaultMonth: initialDate,
+            onSelect: handleDayPickerSelect,
+            pagedNavigation: true,
+            showOutsideDays: true,
+            weekStartsOn: startWeekday,
+            formatters: { formatWeekdayName: weekdayAsOneLetter },
+            components: {
+              Chevron: ChevronComponent,
+              CaptionLabel
+            },
+            classNames: {
+              root: "mobius-date-picker__root",
+              months: "mobius-date-picker__months",
+              month: "mobius-date-picker__month",
+              nav: "mobius-date-picker__nav",
+              button_previous: "mobius-date-picker__nav-button --previous",
+              button_next: "mobius-date-picker__nav-button --next",
+              month_caption: "mobius-date-picker__caption",
+              caption_label: "mobius-date-picker__caption-label",
+              month_grid: "mobius-date-picker__month-grid",
+              weekdays: "mobius-date-picker__weekdays",
+              weekday: "mobius-date-picker__weekday",
+              weeks: "mobius-date-picker__weeks",
+              week: "mobius-date-picker__week",
+              day: "mobius-date-picker__day",
+              day_button: "mobius-date-picker__day-button",
+              selected: "--is-selected",
+              disabled: "--is-disabled",
+              outside: "--is-outside",
+              hidden: "--is-hidden",
+              today: "--is-today",
+              focused: "--is-focused"
+            }
+          }
+        )
+      ]
+    }
+  ) });
+};
+var DatePickerModal_default = DatePickerModal;
+export {
+  DatePickerModal_default as default
+};
+//# sourceMappingURL=DatePickerModal.js.map

package/dist/esm/components/DatePicker/DatePickerModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/DatePicker/DatePickerModal.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { useOnClickOutside } from \"@simplybusiness/mobius-hooks\";\nimport { VisuallyHidden } from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { parseISO } from \"date-fns\";\nimport { useId, useRef } from \"react\";\nimport type { Matcher } from \"react-day-picker\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\nimport { toLocal } from \"./utils/timezoneOffset\";\nimport { ChevronComponent, CaptionLabel } from \"./CustomComponents\";\n\nexport type DatePickerModalProps = {\n  date?: string; // yyyy-mm-dd\n  isOpen: boolean;\n  top: number;\n  onSelected: (date?: string) => void;\n  min?: string;\n  max?: string;\n};\n\nconst startWeekday = getStartWeekday(\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  typeof navigator !== \"undefined\" ? navigator?.language : undefined,\n);\n\nconst DatePickerModal = ({\n  date,\n  isOpen,\n  onSelected,\n  top,\n  min,\n  max,\n}: DatePickerModalProps) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const initialDate = date ? toLocal(date) : undefined;\n  const minDate = min ? toLocal(min) : undefined;\n  const maxDate = max ? toLocal(max) : undefined;\n  const hiddenId = `screen-reader-title-${useId()}`;\n\n  const handleSelected = (selectedDate?: string) => {\n    onSelected(selectedDate);\n  };\n\n  const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) return;\n\n    handleSelected(dateObjToString(selectedDate));\n  };\n\n  useOnClickOutside(modalRef, () => {\n    if (modalRef.current && isOpen) {\n      handleSelected();\n    }\n  });\n\n  const modalClasses = classNames(\"mobius-date-picker__modal\", {\n    \"--is-open\": isOpen,\n  });\n\n  return (\n    <FocusTrap>\n      <div\n        ref={modalRef}\n        className={modalClasses}\n        style={{ top }}\n        aria-describedby={hiddenId}\n        data-testid=\"modal-container\"\n      >\n        <VisuallyHidden>\n          <div id={hiddenId}>Please select a date from the calendar</div>\n        </VisuallyHidden>\n        <DayPicker\n          autoFocus\n          mode=\"single\"\n          {...(minDate && { startMonth: minDate })}\n          {...(maxDate && { endMonth: maxDate })}\n          disabled={\n            {\n              ...(min && { before: parseISO(min) }),\n              ...(max && { after: parseISO(max) }),\n            } as Matcher\n          }\n          selected={initialDate}\n          defaultMonth={initialDate}\n          onSelect={handleDayPickerSelect}\n          pagedNavigation\n          showOutsideDays\n          weekStartsOn={startWeekday}\n          formatters={{ formatWeekdayName: weekdayAsOneLetter }}\n          components={{\n            Chevron: ChevronComponent,\n            CaptionLabel,\n          }}\n          classNames={{\n            root: \"mobius-date-picker__root\",\n            months: \"mobius-date-picker__months\",\n            month: \"mobius-date-picker__month\",\n            nav: \"mobius-date-picker__nav\",\n            button_previous: \"mobius-date-picker__nav-button --previous\",\n            button_next: \"mobius-date-picker__nav-button --next\",\n            month_caption: \"mobius-date-picker__caption\",\n            caption_label: \"mobius-date-picker__caption-label\",\n            month_grid: \"mobius-date-picker__month-grid\",\n            weekdays: \"mobius-date-picker__weekdays\",\n            weekday: \"mobius-date-picker__weekday\",\n            weeks: \"mobius-date-picker__weeks\",\n            week: \"mobius-date-picker__week\",\n            day: \"mobius-date-picker__day\",\n            day_button: \"mobius-date-picker__day-button\",\n            selected: \"--is-selected\",\n            disabled: \"--is-disabled\",\n            outside: \"--is-outside\",\n            hidden: \"--is-hidden\",\n            today: \"--is-today\",\n            focused: \"--is-focused\",\n          }}\n        />\n      </div>\n    </FocusTrap>\n  );\n};\n\nexport default DatePickerModal;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,SAAS,OAAO,cAAc;AAE9B,SAAS,iBAAiB;AAyDpB,SAQI,KARJ;AAzCN,IAAM,eAAe;AAAA;AAAA,EAEnB,OAAO,cAAc,cAAc,WAAW,WAAW;AAC3D;AAEA,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,cAAc,OAAO,QAAQ,IAAI,IAAI;AAC3C,QAAM,UAAU,MAAM,QAAQ,GAAG,IAAI;AACrC,QAAM,UAAU,MAAM,QAAQ,GAAG,IAAI;AACrC,QAAM,WAAW,uBAAuB,MAAM,CAAC;AAE/C,QAAM,iBAAiB,CAAC,iBAA0B;AAChD,eAAW,YAAY;AAAA,EACzB;AAEA,QAAM,wBAAwB,CAAC,iBAAmC;AAChE,QAAI,CAAC,aAAc;AAEnB,mBAAe,gBAAgB,YAAY,CAAC;AAAA,EAC9C;AAEA,oBAAkB,UAAU,MAAM;AAChC,QAAI,SAAS,WAAW,QAAQ;AAC9B,qBAAe;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,eAAe,WAAW,6BAA6B;AAAA,IAC3D,aAAa;AAAA,EACf,CAAC;AAED,SACE,oBAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO,EAAE,IAAI;AAAA,MACb,oBAAkB;AAAA,MAClB,eAAY;AAAA,MAEZ;AAAA,4BAAC,kBACC,8BAAC,SAAI,IAAI,UAAU,oDAAsC,GAC3D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAS;AAAA,YACT,MAAK;AAAA,YACJ,GAAI,WAAW,EAAE,YAAY,QAAQ;AAAA,YACrC,GAAI,WAAW,EAAE,UAAU,QAAQ;AAAA,YACpC,UACE;AAAA,cACE,GAAI,OAAO,EAAE,QAAQ,SAAS,GAAG,EAAE;AAAA,cACnC,GAAI,OAAO,EAAE,OAAO,SAAS,GAAG,EAAE;AAAA,YACpC;AAAA,YAEF,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YACV,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,cAAc;AAAA,YACd,YAAY,EAAE,mBAAmB,mBAAmB;AAAA,YACpD,YAAY;AAAA,cACV,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YACA,YAAY;AAAA,cACV,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,KAAK;AAAA,cACL,iBAAiB;AAAA,cACjB,aAAa;AAAA,cACb,eAAe;AAAA,cACf,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,cACN,KAAK;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,11 @@
+import {
+  DEFAULT_LOCALE,
+  MONDAY_AS_NUMBER,
+  SUNDAY_AS_NUMBER
+} from "../../chunk-4UUTCJ7P.js";
+export {
+  DEFAULT_LOCALE,
+  MONDAY_AS_NUMBER,
+  SUNDAY_AS_NUMBER
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/components/DatePicker/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+import "../../chunk-5CHWCZUP.js";
+import {
+  DatePicker
+} from "../../chunk-TAURHEHL.js";
+import "../../chunk-E5XSED6Z.js";
+import "../../chunk-AOSXRXGA.js";
+import "../../chunk-A62CZFEQ.js";
+import "../../chunk-4UUTCJ7P.js";
+import "../../chunk-CH3KSJSE.js";
+import "../../chunk-UJQXNOUG.js";
+import "../../chunk-52KEWVWB.js";
+export {
+  DatePicker
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DatePicker/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/utils/dateObjToString.js

@@ -0,0 +1,7 @@
+import {
+  dateObjToString
+} from "../../../chunk-CH3KSJSE.js";
+export {
+  dateObjToString
+};
+//# sourceMappingURL=dateObjToString.js.map

package/dist/esm/components/DatePicker/utils/dateObjToString.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/utils/formatErrorMessageText.js

@@ -0,0 +1,13 @@
+import {
+  DEFAULT_AFTER_MAX,
+  DEFAULT_BEFORE_MIN,
+  DEFAULT_INVALID_DATE_MESSAGE,
+  formatErrorMessageText
+} from "../../../chunk-UJQXNOUG.js";
+export {
+  DEFAULT_AFTER_MAX,
+  DEFAULT_BEFORE_MIN,
+  DEFAULT_INVALID_DATE_MESSAGE,
+  formatErrorMessageText
+};
+//# sourceMappingURL=formatErrorMessageText.js.map

package/dist/esm/components/DatePicker/utils/formatErrorMessageText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/utils/getStartWeekday.js

@@ -0,0 +1,8 @@
+import {
+  getStartWeekday
+} from "../../../chunk-6TTD4G74.js";
+import "../../../chunk-4UUTCJ7P.js";
+export {
+  getStartWeekday
+};
+//# sourceMappingURL=getStartWeekday.js.map

package/dist/esm/components/DatePicker/utils/getStartWeekday.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/DatePicker/utils/index.js

@@ -0,0 +1,29 @@
+import "../../../chunk-E5XSED6Z.js";
+import {
+  DATE_FORMAT,
+  validateDateFormat
+} from "../../../chunk-AOSXRXGA.js";
+import {
+  weekdayAsOneLetter
+} from "../../../chunk-A62CZFEQ.js";
+import "../../../chunk-4UUTCJ7P.js";
+import {
+  dateObjToString
+} from "../../../chunk-CH3KSJSE.js";
+import {
+  DEFAULT_AFTER_MAX,
+  DEFAULT_BEFORE_MIN,
+  DEFAULT_INVALID_DATE_MESSAGE,
+  formatErrorMessageText
+} from "../../../chunk-UJQXNOUG.js";
+export {
+  DATE_FORMAT,
+  DEFAULT_AFTER_MAX,
+  DEFAULT_BEFORE_MIN,
+  DEFAULT_INVALID_DATE_MESSAGE,
+  dateObjToString,
+  formatErrorMessageText,
+  validateDateFormat,
+  weekdayAsOneLetter
+};
+//# sourceMappingURL=index.js.map