@simplybusiness/mobius-datepicker 8.0.4 → 9.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius-datepicker",
   "license": "UNLICENSED",
-  "version": "8.0.4",
+  "version": "9.0.1",
   "description": "Mobius date picker component",
   "repository": {
     "type": "git",
@@ -10,8 +10,8 @@
   "simplyBusiness": {
     "publishToPublicNpm": true
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "type": "module",
+  "main": "dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "src",
@@ -20,16 +20,29 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/esm/index.js"
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
     },
     "./src/*.css": "./src/*.css"
   },
+  "publishConfig": {
+    "main": "dist/esm/index.js",
+    "module": "dist/esm/index.js",
+    "types": "./dist/types/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/types/index.d.ts",
+        "import": "./dist/esm/index.js",
+        "default": "./dist/esm/index.js"
+      },
+      "./src/*.css": "./src/*.css"
+    }
+  },
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
     "prepack": "yarn run build",
-    "build:cjs": "build-package cjs",
+    "turbo:build": "yarn build:esm && yarn build:types",
     "build:esm": "build-package esm",
     "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "lint": "eslint",
@@ -45,8 +58,8 @@
     "@eslint/compat": "^2.0.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
-    "@simplybusiness/build-scripts": "^1.2.3",
-    "@simplybusiness/eslint-config": "^2.0.0",
+    "@simplybusiness/build-scripts": "^2.0.1",
+    "@simplybusiness/eslint-config": "^2.0.1",
     "@swc/core": "^1.12.5",
     "@swc/jest": "^0.2.39",
     "@testing-library/dom": "^10.4.1",
@@ -83,13 +96,14 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@simplybusiness/icons": "^4.41.0",
-    "@simplybusiness/mobius": "^7.1.3",
+    "@simplybusiness/icons": "^5.0.1",
+    "@simplybusiness/mobius": "^8.0.1",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.13.0"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --fix"
-  }
+  },
+  "module": "dist/esm/index.js"
 }

package/dist/cjs/index.js

@@ -1,546 +0,0 @@
-"use strict";
-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/dateObjToString.ts
-var dateObjToString;
-var init_dateObjToString = __esm({
-  "src/components/DatePicker/utils/dateObjToString.ts"() {
-    "use strict";
-    dateObjToString = (date) => {
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, "0");
-      const day = String(date.getDate()).padStart(2, "0");
-      return `${year}-${month}-${day}`;
-    };
-  }
-});
-
-// src/components/DatePicker/utils/formatErrorMessageText.ts
-var import_date_fns, 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_fns = 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_fns.isBefore)(actualDate, minDate)) {
-        return DEFAULT_BEFORE_MIN;
-      }
-      if (maxDate && (0, import_date_fns.isAfter)(actualDate, maxDate)) {
-        return DEFAULT_AFTER_MAX;
-      }
-      return DEFAULT_INVALID_DATE_MESSAGE;
-    };
-  }
-});
-
-// src/components/DatePicker/utils/validateDateFormat.ts
-var import_date_fns2, DATE_FORMAT, validateDateFormat;
-var init_validateDateFormat = __esm({
-  "src/components/DatePicker/utils/validateDateFormat.ts"() {
-    "use strict";
-    import_date_fns2 = require("date-fns");
-    DATE_FORMAT = "yyyy-MM-dd";
-    validateDateFormat = (date) => {
-      if (date === "") {
-        return "";
-      }
-      if ((0, import_date_fns2.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();
-    weekdayAsOneLetter = (date) => {
-      const locale = navigator.language || DEFAULT_LOCALE;
-      const oneLetter = 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(
-            '[tabindex="0"], .mobius-date-picker__nav-button'
-          );
-          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(
-                "mobius-date-picker__day-button"
-              ) > -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/utils/timezoneOffset.ts
-function toLocal(utcDateString) {
-  const utcDate = new Date(utcDateString);
-  if (Number.isNaN(utcDate.getTime())) {
-    throw new Error("Invalid date string");
-  }
-  return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 6e4);
-}
-var init_timezoneOffset = __esm({
-  "src/components/DatePicker/utils/timezoneOffset.ts"() {
-    "use strict";
-  }
-});
-
-// 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_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_mobius2 = require("@simplybusiness/mobius");
-    import_dedupe = __toESM(require("classnames/dedupe"));
-    import_date_fns3 = require("date-fns");
-    import_react2 = require("react");
-    import_react_day_picker = require("react-day-picker");
-    init_useFocusTrap();
-    init_utils();
-    init_getStartWeekday();
-    init_timezoneOffset();
-    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
-    );
-    DatePickerModal = ({
-      date,
-      isOpen,
-      onSelected,
-      top,
-      min,
-      max
-    }) => {
-      const modalRef = (0, import_react2.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-${(0, import_react2.useId)()}`;
-      const handleSelected = (selectedDate) => {
-        onSelected(selectedDate);
-      };
-      const handleDayPickerSelect = (selectedDate) => {
-        if (!selectedDate) return;
-        handleSelected(dateObjToString(selectedDate));
-      };
-      (0, import_mobius2.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_runtime4.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "div",
-        {
-          ref: modalRef,
-          className: modalClasses,
-          style: { top },
-          "aria-describedby": hiddenId,
-          "data-testid": "modal-container",
-          children: [
-            /* @__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 },
-                disabled: {
-                  ...min && { before: (0, import_date_fns3.parseISO)(min) },
-                  ...max && { after: (0, import_date_fns3.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"
-                }
-              }
-            )
-          ]
-        }
-      ) });
-    };
-    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_mobius3 = 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;
-};
-
-// src/components/DatePicker/DatePicker.tsx
-init_utils();
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DatePickerModal2 = (0, import_react3.lazy)(() => Promise.resolve().then(() => (init_DatePickerModal(), DatePickerModal_exports)));
-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 = (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(isValid === false || isInvalid);
-  const errorMessageText = isInvalidProp ? formatErrorMessageText(textFieldVal, props.min, props.max) : errorMessage;
-  const touchDevice = isTouchDevice();
-  const validationClasses = (0, import_mobius3.useValidationClasses)({ 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 = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
-    const isValidInput = inputRef.current?.checkValidity();
-    if (!isValidInput) {
-      setIsValid(false);
-    }
-  }, [isOpen]);
-  (0, import_react3.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();
-  };
-  (0, import_react3.useEffect)(() => {
-    if (isOpen) {
-      setTop(containerRef.current?.getBoundingClientRect().height || 0);
-      setIsValid(true);
-      return;
-    }
-    validate();
-  }, [isOpen, validate]);
-  if (touchDevice) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: containerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_mobius3.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_runtime5.jsxs)("div", { className: containerClasses, ref: containerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_mobius3.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_runtime5.jsxs)(
-          import_mobius3.Button,
-          {
-            className: popoverToggleClasses,
-            onClick: togglePopoverVisibility,
-            isDisabled,
-            size: "sm",
-            children: [
-              /* @__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_runtime5.jsx)(import_react3.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      DatePickerModal2,
-      {
-        date: textFieldVal,
-        isOpen,
-        top,
-        onSelected: onDateSelected,
-        min: props.min,
-        max: props.max
-      }
-    ) })
-  ] });
-};
-//# sourceMappingURL=index.js.map