@simplybusiness/mobius-datepicker 6.5.7 → 6.5.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 6.5.9
+
+### Patch Changes
+
+- Updated dependencies [4dd33c1]
+  - @simplybusiness/mobius@5.25.4
+
+## 6.5.8
+
+### Patch Changes
+
+- 30c903a: Switch from SWC to esbuild
+- Updated dependencies [30c903a]
+  - @simplybusiness/mobius@5.25.3
+  - @simplybusiness/icons@4.23.1
+
 ## 6.5.7
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,20 +1,512 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-_export_star(require("./components/DatePicker"), exports);
-function _export_star(from, to) {
-    Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
-            Object.defineProperty(to, k, {
-                enumerable: true,
-                get: function() {
-                    return from[k];
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DatePicker/utils/timezoneOffset.ts
+function toLocal(utcDate) {
+  return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 6e4);
+}
+var init_timezoneOffset = __esm({
+  "src/components/DatePicker/utils/timezoneOffset.ts"() {
+    "use strict";
+  }
+});
+
+// src/components/DatePicker/utils/dateObjToString.ts
+var import_date_fns, dateObjToString;
+var init_dateObjToString = __esm({
+  "src/components/DatePicker/utils/dateObjToString.ts"() {
+    "use strict";
+    import_date_fns = require("date-fns");
+    init_timezoneOffset();
+    dateObjToString = (date) => (0, import_date_fns.format)(toLocal(date), "yyyy-MM-dd");
+  }
+});
+
+// src/components/DatePicker/utils/formatErrorMessageText.ts
+var import_date_fns2, DEFAULT_INVALID_DATE_MESSAGE, DEFAULT_BEFORE_MIN, DEFAULT_AFTER_MAX, formatErrorMessageText;
+var init_formatErrorMessageText = __esm({
+  "src/components/DatePicker/utils/formatErrorMessageText.ts"() {
+    "use strict";
+    import_date_fns2 = require("date-fns");
+    DEFAULT_INVALID_DATE_MESSAGE = "Please enter a valid date";
+    DEFAULT_BEFORE_MIN = "The date you selected is before the earliest allowed date";
+    DEFAULT_AFTER_MAX = "The date you selected is after the latest allowed date";
+    formatErrorMessageText = (actual, min, max) => {
+      const actualDate = new Date(actual);
+      const minDate = min && new Date(min);
+      const maxDate = max && new Date(max);
+      if (minDate && (0, import_date_fns2.isBefore)(actualDate, minDate)) {
+        return DEFAULT_BEFORE_MIN;
+      }
+      if (maxDate && (0, import_date_fns2.isAfter)(actualDate, maxDate)) {
+        return DEFAULT_AFTER_MAX;
+      }
+      return DEFAULT_INVALID_DATE_MESSAGE;
+    };
+  }
+});
+
+// src/components/DatePicker/utils/validateDateFormat.ts
+var import_date_fns3, DATE_FORMAT, validateDateFormat;
+var init_validateDateFormat = __esm({
+  "src/components/DatePicker/utils/validateDateFormat.ts"() {
+    "use strict";
+    import_date_fns3 = require("date-fns");
+    DATE_FORMAT = "yyyy-MM-dd";
+    validateDateFormat = (date) => {
+      if (date === "") {
+        return "";
+      }
+      if ((0, import_date_fns3.isMatch)(date, DATE_FORMAT)) {
+        return date;
+      }
+      throw Error(
+        `DatePicker defaultValue '${date}' is invalid. The expected format is '${DATE_FORMAT}' `
+      );
+    };
+  }
+});
+
+// src/components/DatePicker/constants.ts
+var SUNDAY_AS_NUMBER, MONDAY_AS_NUMBER, DEFAULT_LOCALE;
+var init_constants = __esm({
+  "src/components/DatePicker/constants.ts"() {
+    "use strict";
+    SUNDAY_AS_NUMBER = 0;
+    MONDAY_AS_NUMBER = 1;
+    DEFAULT_LOCALE = "en-GB";
+  }
+});
+
+// src/components/DatePicker/utils/weekdayAsOneLetter.ts
+var weekdayAsOneLetter;
+var init_weekdayAsOneLetter = __esm({
+  "src/components/DatePicker/utils/weekdayAsOneLetter.ts"() {
+    "use strict";
+    init_constants();
+    init_timezoneOffset();
+    weekdayAsOneLetter = (date) => {
+      const locale = navigator.language || DEFAULT_LOCALE;
+      const oneLetter = toLocal(date).toLocaleString(locale, {
+        weekday: "narrow"
+      });
+      return oneLetter;
+    };
+  }
+});
+
+// src/components/DatePicker/utils/index.ts
+var init_utils = __esm({
+  "src/components/DatePicker/utils/index.ts"() {
+    "use strict";
+    init_dateObjToString();
+    init_formatErrorMessageText();
+    init_validateDateFormat();
+    init_weekdayAsOneLetter();
+  }
+});
+
+// src/hooks/useFocusTrap/useFocusTrap.tsx
+function FocusTrap({ children }) {
+  const focusRef = useFocusTrap();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trap", ref: focusRef, children });
+}
+var import_react, import_jsx_runtime, useFocusTrap;
+var init_useFocusTrap = __esm({
+  "src/hooks/useFocusTrap/useFocusTrap.tsx"() {
+    "use strict";
+    import_react = require("react");
+    import_jsx_runtime = require("react/jsx-runtime");
+    useFocusTrap = () => {
+      const containerRef = (0, import_react.useRef)(null);
+      (0, import_react.useEffect)(() => {
+        if (containerRef.current) {
+          const element = containerRef.current;
+          const focusableElements = containerRef.current.querySelectorAll(
+            '.rdp-nav_button, [tabindex="0"]'
+          );
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+          const handleTabKeyPress = (event) => {
+            if (event.key === "Tab") {
+              if (event.shiftKey && document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+              } else if (!event.shiftKey && document.activeElement && document.activeElement.className.indexOf("rdp-day") > -1) {
+                event.preventDefault();
+                firstElement.focus();
+              }
+            }
+          };
+          element.addEventListener("keydown", handleTabKeyPress);
+          return () => {
+            element.removeEventListener("keydown", handleTabKeyPress);
+          };
+        }
+        return () => {
+        };
+      }, []);
+      return containerRef;
+    };
+  }
+});
+
+// src/components/DatePicker/utils/getStartWeekday.ts
+var getStartWeekday;
+var init_getStartWeekday = __esm({
+  "src/components/DatePicker/utils/getStartWeekday.ts"() {
+    "use strict";
+    init_constants();
+    getStartWeekday = (locale) => {
+      switch (locale || DEFAULT_LOCALE) {
+        case "en-US":
+          return SUNDAY_AS_NUMBER;
+        default:
+          return MONDAY_AS_NUMBER;
+      }
+    };
+  }
+});
+
+// src/components/DatePicker/DatePickerModal.tsx
+var DatePickerModal_exports = {};
+__export(DatePickerModal_exports, {
+  default: () => DatePickerModal_default
+});
+var import_icons, import_mobius, import_dedupe, import_date_fns4, import_react2, import_react_day_picker, import_jsx_runtime2, PARENT_NODE, ChevronComponent, 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_dedupe = __toESM(require("classnames/dedupe"));
+    import_date_fns4 = require("date-fns");
+    import_react2 = require("react");
+    import_react_day_picker = require("react-day-picker");
+    init_useFocusTrap();
+    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 });
+    };
+    startWeekday = getStartWeekday(navigator?.language);
+    DatePickerModal = ({
+      date,
+      isOpen,
+      onSelected,
+      top,
+      min,
+      max
+    }) => {
+      const modalRef = (0, import_react2.useRef)(null);
+      const initialDate = date ? toLocal(new Date(date)) : void 0;
+      const minDate = min ? toLocal(new Date(min)) : void 0;
+      const maxDate = max ? toLocal(new Date(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, () => {
+        if (modalRef.current && isOpen) {
+          handleSelected();
+        }
+      });
+      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)(
+        "div",
+        {
+          ref: modalRef,
+          className: modalClasses,
+          style: { top },
+          "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)(
+              import_react_day_picker.DayPicker,
+              {
+                mode: "single",
+                ...minDate && { startMonth: minDate },
+                ...maxDate && { endMonth: maxDate },
+                disabled: {
+                  ...min && { before: (0, import_date_fns4.parseISO)(min) },
+                  ...max && { after: (0, import_date_fns4.parseISO)(max) }
+                },
+                selected: initialDate,
+                defaultMonth: initialDate,
+                onSelect: handleDayPickerSelect,
+                pagedNavigation: true,
+                showOutsideDays: true,
+                weekStartsOn: startWeekday,
+                formatters: { formatWeekdayName: weekdayAsOneLetter },
+                components: {
+                  Chevron: ChevronComponent
+                },
+                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"
                 }
-            });
+              }
+            )
+          ]
         }
-    });
-    return from;
-}
+      ) });
+    };
+    DatePickerModal_default = DatePickerModal;
+  }
+});
+
+// index.tsx
+var index_exports = {};
+__export(index_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/DatePicker/DatePicker.tsx
+var import_icons2 = require("@simplybusiness/icons");
+var import_mobius2 = require("@simplybusiness/mobius");
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+var import_react3 = require("react");
+
+// src/utils/isTouchDevice.ts
+var isTouchDevice = () => {
+  if (typeof window !== "undefined") {
+    return window.matchMedia("(hover: none), (pointer: coarse)").matches;
+  }
+  return void 0;
+};
 
-//# sourceMappingURL=index.js.map
+// src/components/DatePicker/DatePicker.tsx
+init_utils();
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DatePickerModal2 = (0, import_react3.lazy)(() => Promise.resolve().then(() => (init_DatePickerModal(), DatePickerModal_exports)));
+var getValidationState = (props) => {
+  const { validationState, isInvalid } = props;
+  if (isInvalid || validationState === "invalid") {
+    return true;
+  }
+  if (isInvalid === false || validationState === "valid") {
+    return false;
+  }
+  return void 0;
+};
+var DatePicker = (props) => {
+  const {
+    onChange,
+    defaultValue = "",
+    isDisabled,
+    validationState,
+    isInvalid,
+    errorMessage = "",
+    ...otherProps
+  } = props;
+  const containerRef = (0, import_react3.useRef)(null);
+  const [top, setTop] = (0, import_react3.useState)(0);
+  const inputRef = (0, import_react3.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [textFieldVal, setTextFieldVal] = (0, import_react3.useState)(
+    validateDateFormat(defaultValue)
+  );
+  const [isValid, setIsValid] = (0, import_react3.useState)(void 0);
+  const isInvalidProp = getValidationState({
+    validationState,
+    isInvalid: isValid === false || isInvalid
+  });
+  const errorMessageText = isInvalidProp ? (
+    // eslint-disable-next-line react/destructuring-assignment
+    formatErrorMessageText(textFieldVal, props.min, props.max)
+  ) : errorMessage;
+  const touchDevice = isTouchDevice();
+  const validationClasses = (0, import_mobius2.useValidationClasses)({
+    validationState,
+    isInvalid: isInvalidProp
+  });
+  const containerClasses = (0, import_dedupe2.default)(
+    "mobius-date-picker__container",
+    {
+      "--is-disabled": isDisabled,
+      "--is-touch-device": touchDevice
+    },
+    validationClasses
+  );
+  const popoverToggleClasses = (0, import_dedupe2.default)(
+    "mobius-date-picker__field-button",
+    validationClasses
+  );
+  const validate = () => {
+    const isValidInput = inputRef.current?.checkValidity();
+    if (!isValidInput) {
+      setIsValid(false);
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    if (!inputRef.current) return;
+    const validatedValue = validateDateFormat(defaultValue);
+    setTextFieldVal(validatedValue);
+    inputRef.current.value = validatedValue;
+    setIsValid(true);
+    validate();
+  }, [defaultValue]);
+  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);
+    }
+    setIsOpen(false);
+  };
+  const handleBlur = (event) => {
+    validate();
+    if (!textFieldVal) {
+      setIsValid(false);
+    }
+    onChange?.(event.target.value);
+  };
+  const handleClick = (event) => {
+    event.preventDefault();
+    togglePopoverVisibility();
+  };
+  (0, import_react3.useEffect)(() => {
+    if (isOpen) {
+      setTop(containerRef.current?.getBoundingClientRect().height || 0);
+      setIsValid(true);
+      return;
+    }
+    validate();
+  }, [isOpen]);
+  if (touchDevice) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_mobius2.TextField,
+      {
+        ref: inputRef,
+        type: "date",
+        className: "mobius-date-picker",
+        onBlur: handleBlur,
+        onChange: handleTextFieldChange,
+        value: textFieldVal,
+        isDisabled,
+        isInvalid: isInvalidProp,
+        ...otherProps,
+        errorMessage: errorMessage || errorMessageText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: containerClasses, ref: containerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_mobius2.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__ */ (0, import_jsx_runtime3.jsxs)(
+          import_mobius2.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" })
+            ]
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      DatePickerModal2,
+      {
+        date: textFieldVal,
+        isOpen,
+        top,
+        onSelected: onDateSelected,
+        min: props.min,
+        max: props.max
+      }
+    ) })
+  ] });
+};