@simplybusiness/mobius-datepicker 4.2.7 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.3.0
+
+### Minor Changes
+
+- 6f657c1: Use locale to display relevant start day in popup calendar
+
 ## 4.2.7
 
 ### Patch Changes

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -1,91 +1,110 @@
-"use strict";
 "use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+    enumerable: true,
+    get: function() {
+        return DatePicker;
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
+const _jsxruntime = require("react/jsx-runtime");
+const _mobius = require("@simplybusiness/mobius");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _react = require("react");
+const _isTouchDevice = require("../../utils/isTouchDevice");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
         }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mobius_1 = require("@simplybusiness/mobius");
-const dedupe_1 = __importDefault(require("classnames/dedupe"));
-const react_1 = require("react");
-const isTouchDevice_1 = require("../../utils/isTouchDevice");
-const utils_1 = require("./utils");
-const DatePickerModal = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require("./DatePickerModal"))));
-const DatePicker = (props) => {
-    const { onChange, defaultValue = "", isDisabled, validationState, errorMessage = "" } = props, otherProps = __rest(props, ["onChange", "defaultValue", "isDisabled", "validationState", "errorMessage"]);
-    const containerRef = (0, react_1.useRef)(null);
-    const [top, setTop] = (0, react_1.useState)(0);
-    const inputRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [textFieldVal, setTextFieldVal] = (0, react_1.useState)((0, utils_1.validateDateFormat)(defaultValue));
-    const [isValid, setIsValid] = (0, react_1.useState)(true);
-    const errorMessageText = !isValid
-        ? // eslint-disable-next-line react/destructuring-assignment
-            (0, utils_1.formatErrorMessageText)(textFieldVal, props.min, props.max)
-        : errorMessage;
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const DatePickerModal = /*#__PURE__*/ (0, _react.lazy)(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./DatePickerModal"))));
+const DatePicker = (props)=>{
+    const { onChange, defaultValue = "", isDisabled, validationState, errorMessage = "", ...otherProps } = props;
+    const containerRef = (0, _react.useRef)(null);
+    const [top, setTop] = (0, _react.useState)(0);
+    const inputRef = (0, _react.useRef)(null);
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [textFieldVal, setTextFieldVal] = (0, _react.useState)((0, _utils.validateDateFormat)(defaultValue));
+    const [isValid, setIsValid] = (0, _react.useState)(true);
+    const errorMessageText = !isValid ? (0, _utils.formatErrorMessageText)(textFieldVal, props.min, props.max) : errorMessage;
     const inputValidationState = !isValid ? "invalid" : validationState;
-    const touchDevice = (0, isTouchDevice_1.isTouchDevice)();
+    const touchDevice = (0, _isTouchDevice.isTouchDevice)();
     const validationClasses = {
         "--is-valid": validationState === "valid",
-        "--is-invalid": validationState === "invalid" || !isValid,
+        "--is-invalid": validationState === "invalid" || !isValid
     };
-    const containerClasses = (0, dedupe_1.default)("mobius/DatePickerContainer", Object.assign({ "--is-disabled": isDisabled, "--is-touch-device": touchDevice }, validationClasses));
-    const popoverToggleClasses = (0, dedupe_1.default)("mobius/DateFieldButton", Object.assign({}, validationClasses));
-    const togglePopoverVisibility = () => {
+    const containerClasses = (0, _dedupe.default)("mobius/DatePickerContainer", {
+        "--is-disabled": isDisabled,
+        "--is-touch-device": touchDevice,
+        ...validationClasses
+    });
+    const popoverToggleClasses = (0, _dedupe.default)("mobius/DateFieldButton", {
+        ...validationClasses
+    });
+    const togglePopoverVisibility = ()=>{
         setIsValid(true);
         setIsOpen(!isOpen);
     };
-    const handleTextFieldChange = (event) => {
+    const handleTextFieldChange = (event)=>{
         setTextFieldVal(event.target.value);
         // onChange only triggers on a valid date
         // so this clears the error
         setIsValid(true);
     };
-    const validate = () => {
-        var _a;
+    const validate = ()=>{
+        var _inputRef_current;
         // If 'min' or 'max' values are provided, checkValidity() will
         // validate the date and return a boolean
-        const isValidInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity();
+        const isValidInput = (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.checkValidity();
         if (!isValidInput) {
             setIsValid(false);
         }
     };
-    const onDateSelected = (selectedDate) => {
+    const onDateSelected = (selectedDate)=>{
         // Handle null callback from useOnClickOutside
         if (selectedDate) {
             setTextFieldVal(selectedDate);
@@ -96,7 +115,7 @@ const DatePicker = (props) => {
         setIsOpen(false);
     };
     // User has interacted with the component and navigated away
-    const handleBlur = (event) => {
+    const handleBlur = (event)=>{
         validate();
         // User hasn't entered a date OR
         // entered an invalid date
@@ -105,28 +124,75 @@ const DatePicker = (props) => {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
     };
-    (0, react_1.useEffect)(() => {
-        var _a;
+    (0, _react.useEffect)(()=>{
         if (isOpen) {
-            setTop(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0);
+            var _containerRef_current;
+            setTop(((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect().height) || 0);
             // Disable validation when day picker is open
             setIsValid(true);
             return;
         }
         validate();
-    }, [isOpen]);
+    }, [
+        isOpen
+    ]);
     if (touchDevice) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: containerClasses, children: (0, jsx_runtime_1.jsx)(mobius_1.TextField, Object.assign({ ref: inputRef, type: "date", className: "mobius/DatePicker", 
-                // @ts-ignore
-                onBlur: handleBlur, onChange: handleTextFieldChange, value: textFieldVal, isDisabled: isDisabled, validationState: inputValidationState }, otherProps, { errorMessage: errorMessageText })) }));
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: containerClasses,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.TextField, {
+                ref: inputRef,
+                type: "date",
+                className: "mobius/DatePicker",
+                // @ts-expect-error event type
+                onBlur: handleBlur,
+                onChange: handleTextFieldChange,
+                value: textFieldVal,
+                isDisabled: isDisabled,
+                validationState: inputValidationState,
+                ...otherProps,
+                errorMessage: errorMessageText
+            })
+        });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: containerClasses, ref: containerRef, children: [(0, jsx_runtime_1.jsx)(mobius_1.TextField, Object.assign({ ref: inputRef, type: "date", className: "mobius/DatePicker", 
-                // @ts-ignore
-                onBlur: handleBlur, onChange: handleTextFieldChange, value: textFieldVal, isDisabled: isDisabled, validationState: inputValidationState }, otherProps, { errorMessage: errorMessageText, suffixOutside: (0, jsx_runtime_1.jsx)(mobius_1.Button, { className: popoverToggleClasses, onClick: togglePopoverVisibility, isDisabled: isDisabled, children: (0, jsx_runtime_1.jsx)(mobius_1.VisuallyHidden, { children: "Pick date" }) }) })), isOpen && ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(DatePickerModal, { date: textFieldVal, isOpen: isOpen, top: top, onSelected: onDateSelected, 
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: containerClasses,
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.TextField, {
+                ref: inputRef,
+                type: "date",
+                className: "mobius/DatePicker",
+                // @ts-expect-error event type
+                onBlur: handleBlur,
+                onChange: handleTextFieldChange,
+                value: textFieldVal,
+                isDisabled: isDisabled,
+                validationState: inputValidationState,
+                ...otherProps,
+                errorMessage: errorMessageText,
+                suffixOutside: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.Button, {
+                    className: popoverToggleClasses,
+                    onClick: togglePopoverVisibility,
+                    isDisabled: isDisabled,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.VisuallyHidden, {
+                        children: "Pick date"
+                    })
+                })
+            }),
+            isOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.Suspense, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(DatePickerModal, {
+                    date: textFieldVal,
+                    isOpen: isOpen,
+                    top: top,
+                    onSelected: onDateSelected,
                     // eslint-disable-next-line react/destructuring-assignment
-                    min: props.min, 
+                    min: props.min,
                     // eslint-disable-next-line react/destructuring-assignment
-                    max: props.max }) }))] }));
+                    max: props.max
+                })
+            })
+        ]
+    });
 };
-exports.DatePicker = DatePicker;
+
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  TextField,\n  TextFieldElementType,\n  TextFieldProps,\n  VisuallyHidden,\n} from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  Suspense,\n  lazy,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { isTouchDevice } from \"../../utils/isTouchDevice\";\nimport { formatErrorMessageText, validateDateFormat } from \"./utils\";\n\nconst DatePickerModal = lazy(() => import(\"./DatePickerModal\"));\n\nexport interface DatePickerProps\n  extends Omit<\n    TextFieldProps,\n    \"defaultValue\" | \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\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    validationState,\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>(true);\n  const errorMessageText = !isValid\n    ? // eslint-disable-next-line react/destructuring-assignment\n      formatErrorMessageText(textFieldVal, props.min, props.max)\n    : errorMessage;\n  const inputValidationState = !isValid ? \"invalid\" : validationState;\n  const touchDevice = isTouchDevice();\n\n  const validationClasses = {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\" || !isValid,\n  };\n\n  const containerClasses = classNames(\"mobius/DatePickerContainer\", {\n    \"--is-disabled\": isDisabled,\n    \"--is-touch-device\": touchDevice,\n    ...validationClasses,\n  });\n\n  const popoverToggleClasses = classNames(\"mobius/DateFieldButton\", {\n    ...validationClasses,\n  });\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 validate = () => {\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  };\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\n    setIsOpen(false);\n  };\n\n  // User has interacted with the component and navigated away\n  const handleBlur = (event: FocusEvent<TextFieldElementType>) => {\n    validate();\n\n    // User hasn't entered a date OR\n    // entered an invalid date\n    if (!textFieldVal) {\n      setIsValid(false);\n    }\n\n    onChange?.(event.target.value);\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]);\n\n  if (touchDevice) {\n    return (\n      <div className={containerClasses}>\n        <TextField\n          ref={inputRef}\n          type=\"date\"\n          className=\"mobius/DatePicker\"\n          // @ts-expect-error event type\n          onBlur={handleBlur}\n          onChange={handleTextFieldChange}\n          value={textFieldVal}\n          isDisabled={isDisabled}\n          validationState={inputValidationState}\n          {...otherProps}\n          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/DatePicker\"\n        // @ts-expect-error event type\n        onBlur={handleBlur}\n        onChange={handleTextFieldChange}\n        value={textFieldVal}\n        isDisabled={isDisabled}\n        validationState={inputValidationState}\n        {...otherProps}\n        errorMessage={errorMessageText}\n        suffixOutside={\n          <Button\n            className={popoverToggleClasses}\n            onClick={togglePopoverVisibility}\n            isDisabled={isDisabled}\n          >\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            // eslint-disable-next-line react/destructuring-assignment\n            min={props.min}\n            // eslint-disable-next-line react/destructuring-assignment\n            max={props.max}\n          />\n        </Suspense>\n      )}\n    </div>\n  );\n};\n"],"names":["DatePicker","DatePickerModal","lazy","props","onChange","defaultValue","isDisabled","validationState","errorMessage","otherProps","containerRef","useRef","top","setTop","useState","inputRef","isOpen","setIsOpen","textFieldVal","setTextFieldVal","validateDateFormat","isValid","setIsValid","errorMessageText","formatErrorMessageText","min","max","inputValidationState","touchDevice","isTouchDevice","validationClasses","containerClasses","classNames","popoverToggleClasses","togglePopoverVisibility","handleTextFieldChange","event","target","value","validate","isValidInput","current","checkValidity","onDateSelected","selectedDate","handleBlur","useEffect","getBoundingClientRect","height","div","className","TextField","ref","type","onBlur","suffixOutside","Button","onClick","VisuallyHidden","Suspense","date","onSelected"],"mappings":"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"}

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

@@ -1,7 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const DatePickerIcon = () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: " " });
-exports.DatePickerIcon = DatePickerIcon;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DatePickerIcon", {
+    enumerable: true,
+    get: function() {
+        return DatePickerIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const DatePickerIcon = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: " "
+    });
+
 //# sourceMappingURL=DatePickerIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerIcon.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePickerIcon.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,iEAAM,CAAC;AAA9B,QAAA,cAAc,kBAAgB"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerIcon.tsx"],"sourcesContent":["export const DatePickerIcon = () => <> </>;\n"],"names":["DatePickerIcon"],"mappings":";;;;+BAAaA;;;eAAAA;;;;AAAN,MAAMA,iBAAiB,kBAAM;kBAAE"}

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

@@ -1,49 +1,93 @@
-"use strict";
 "use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mobius_1 = require("@simplybusiness/mobius");
-const dedupe_1 = __importDefault(require("classnames/dedupe"));
-const react_1 = require("react");
-const react_day_picker_1 = require("react-day-picker");
-const useFocusTrap_1 = __importDefault(require("../../hooks/useFocusTrap/useFocusTrap"));
-const DatePickerIcon_1 = require("./DatePickerIcon");
-const constants_1 = require("./constants");
-const utils_1 = require("./utils");
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _mobius = require("@simplybusiness/mobius");
+const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
+const _react = require("react");
+const _reactdaypicker = require("react-day-picker");
+const _useFocusTrap = /*#__PURE__*/ _interop_require_default(require("../../hooks/useFocusTrap/useFocusTrap"));
+const _DatePickerIcon = require("./DatePickerIcon");
+const _utils = require("./utils");
+const _getStartWeekday = require("./utils/getStartWeekday");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _navigator;
 const PARENT_NODE = typeof document !== "undefined" && document.body;
-const DatePickerModal = ({ date, isOpen, onSelected, top, min, max, }) => {
-    const modalRef = (0, react_1.useRef)(null);
+const startWeekday = (0, _getStartWeekday.getStartWeekday)((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.language);
+const DatePickerModal = ({ date, isOpen, onSelected, top, min, max })=>{
+    const modalRef = (0, _react.useRef)(null);
     const initialDate = date ? new Date(date) : undefined;
     const minDate = min ? new Date(min) : undefined;
     const maxDate = max ? new Date(max) : undefined;
     if (isOpen && PARENT_NODE) {
         PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.setAttribute("aria-hidden", "true");
     }
-    const handleSelected = (selectedDate) => {
-        if (PARENT_NODE)
-            PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.removeAttribute("aria-hidden");
+    const handleSelected = (selectedDate)=>{
+        if (PARENT_NODE) PARENT_NODE === null || PARENT_NODE === void 0 ? void 0 : PARENT_NODE.removeAttribute("aria-hidden");
         onSelected(selectedDate);
     };
-    const handleDayPickerSelect = (selectedDate) => {
-        if (!selectedDate)
-            return;
-        handleSelected((0, utils_1.dateObjToString)(selectedDate));
+    const handleDayPickerSelect = (selectedDate)=>{
+        if (!selectedDate) return;
+        handleSelected((0, _utils.dateObjToString)(selectedDate));
     };
-    (0, mobius_1.useOnClickOutside)(modalRef, () => {
+    (0, _mobius.useOnClickOutside)(modalRef, ()=>{
         if (modalRef.current && isOpen) {
             handleSelected();
         }
     });
-    const modalClasses = (0, dedupe_1.default)("mobius/DatePickerModal", {
-        "--is-open": isOpen,
+    const modalClasses = (0, _dedupe.default)("mobius/DatePickerModal", {
+        "--is-open": isOpen
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_useFocusTrap.default, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            ref: modalRef,
+            className: modalClasses,
+            style: {
+                top
+            },
+            "aria-describedby": "screen-reader-title",
+            "data-testid": "modal-container",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_mobius.VisuallyHidden, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        id: "screen-reader-title",
+                        children: "Please select a date from the calendar"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdaypicker.DayPicker, {
+                    mode: "single",
+                    fromDate: minDate,
+                    toDate: maxDate,
+                    selected: initialDate,
+                    defaultMonth: initialDate,
+                    onSelect: handleDayPickerSelect,
+                    pagedNavigation: true,
+                    showOutsideDays: true,
+                    weekStartsOn: startWeekday,
+                    formatters: {
+                        formatWeekdayName: _utils.weekdayAsOneLetter
+                    },
+                    components: {
+                        IconLeft: _DatePickerIcon.DatePickerIcon,
+                        IconRight: _DatePickerIcon.DatePickerIcon
+                    }
+                })
+            ]
+        })
     });
-    return ((0, jsx_runtime_1.jsx)(useFocusTrap_1.default, { children: (0, jsx_runtime_1.jsxs)("div", { ref: modalRef, className: modalClasses, style: { top }, "aria-describedby": "screen-reader-title", "data-testid": "modal-container", children: [(0, jsx_runtime_1.jsx)(mobius_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("div", { id: "screen-reader-title", children: "Please select a date from the calendar" }) }), (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "single", fromDate: minDate, toDate: maxDate, selected: initialDate, defaultMonth: initialDate, onSelect: handleDayPickerSelect, pagedNavigation: true, showOutsideDays: true, weekStartsOn: constants_1.MONDAY_AS_NUMBER, formatters: { formatWeekdayName: utils_1.weekdayAsOneLetter }, components: {
-                        IconLeft: DatePickerIcon_1.DatePickerIcon,
-                        IconRight: DatePickerIcon_1.DatePickerIcon,
-                    } })] }) }));
 };
-exports.default = DatePickerModal;
+const _default = DatePickerModal;
+
 //# sourceMappingURL=DatePickerModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerModal.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AAEb,mDAA2E;AAC3E,+DAA2C;AAC3C,iCAA+B;AAC/B,uDAA6C;AAC7C,yFAA8D;AAC9D,qDAAkD;AAClD,2CAA+C;AAC/C,mCAA8D;AAE9D,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC;AAWrE,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,UAAU,EACV,GAAG,EACH,GAAG,EACH,GAAG,GACkB,EAAE,EAAE;IACzB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACtD,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhD,IAAI,MAAM,IAAI,WAAW,EAAE,CAAC;QAC1B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,YAAiC,EAAE,EAAE;QAC3D,IAAI,WAAW;YAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,eAAe,CAAC,aAAa,CAAC,CAAC;QAC7D,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,YAA8B,EAAE,EAAE;QAC/D,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,cAAc,CAAC,IAAA,uBAAe,EAAC,YAAY,CAAC,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,IAAA,0BAAiB,EAAC,QAAQ,EAAE,GAAG,EAAE;QAC/B,IAAI,QAAQ,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;YAC/B,cAAc,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,gBAAU,EAAC,wBAAwB,EAAE;QACxD,WAAW,EAAE,MAAM;KACpB,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,sBAAS,cACR,iCACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,GAAG,EAAE,sBACG,qBAAqB,iBAC1B,iBAAiB,aAE7B,uBAAC,uBAAc,cACb,gCAAK,EAAE,EAAC,qBAAqB,uDAEvB,GACS,EACjB,uBAAC,4BAAS,IACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,WAAW,EACrB,YAAY,EAAE,WAAW,EACzB,QAAQ,EAAE,qBAAqB,EAC/B,eAAe,QACf,eAAe,QACf,YAAY,EAAE,4BAAgB,EAC9B,UAAU,EAAE,EAAE,iBAAiB,EAAE,0BAAkB,EAAE,EACrD,UAAU,EAAE;wBACV,QAAQ,EAAE,+BAAc;wBACxB,SAAS,EAAE,+BAAc;qBAC1B,GACD,IACE,GACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePickerModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { VisuallyHidden, useOnClickOutside } from \"@simplybusiness/mobius\";\nimport classNames from \"classnames/dedupe\";\nimport { useRef } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport FocusTrap from \"../../hooks/useFocusTrap/useFocusTrap\";\nimport { DatePickerIcon } from \"./DatePickerIcon\";\nimport { dateObjToString, weekdayAsOneLetter } from \"./utils\";\nimport { getStartWeekday } from \"./utils/getStartWeekday\";\n\nconst PARENT_NODE = typeof document !== \"undefined\" && document.body;\n\nexport type DatePickerModalProps = {\n  date?: string; // yyyy-mm-dd\n  isOpen: boolean;\n  top: number;\n  onSelected: (date?: string | undefined) => void;\n  min?: string;\n  max?: string;\n};\n\nconst startWeekday = getStartWeekday(navigator?.language);\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 ? new Date(date) : undefined;\n  const minDate = min ? new Date(min) : undefined;\n  const maxDate = max ? new Date(max) : undefined;\n\n  if (isOpen && PARENT_NODE) {\n    PARENT_NODE?.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  const handleSelected = (selectedDate?: string | undefined) => {\n    if (PARENT_NODE) PARENT_NODE?.removeAttribute(\"aria-hidden\");\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/DatePickerModal\", {\n    \"--is-open\": isOpen,\n  });\n\n  return (\n    <FocusTrap>\n      <div\n        ref={modalRef}\n        className={modalClasses}\n        style={{ top }}\n        aria-describedby=\"screen-reader-title\"\n        data-testid=\"modal-container\"\n      >\n        <VisuallyHidden>\n          <div id=\"screen-reader-title\">\n            Please select a date from the calendar\n          </div>\n        </VisuallyHidden>\n        <DayPicker\n          mode=\"single\"\n          fromDate={minDate}\n          toDate={maxDate}\n          selected={initialDate}\n          defaultMonth={initialDate}\n          onSelect={handleDayPickerSelect}\n          pagedNavigation\n          showOutsideDays\n          weekStartsOn={startWeekday}\n          formatters={{ formatWeekdayName: weekdayAsOneLetter }}\n          components={{\n            IconLeft: DatePickerIcon,\n            IconRight: DatePickerIcon,\n          }}\n        />\n      </div>\n    </FocusTrap>\n  );\n};\n\nexport default DatePickerModal;\n"],"names":["navigator","PARENT_NODE","document","body","startWeekday","getStartWeekday","language","DatePickerModal","date","isOpen","onSelected","top","min","max","modalRef","useRef","initialDate","Date","undefined","minDate","maxDate","setAttribute","handleSelected","selectedDate","removeAttribute","handleDayPickerSelect","dateObjToString","useOnClickOutside","current","modalClasses","classNames","FocusTrap","div","ref","className","style","aria-describedby","data-testid","VisuallyHidden","id","DayPicker","mode","fromDate","toDate","selected","defaultMonth","onSelect","pagedNavigation","showOutsideDays","weekStartsOn","formatters","formatWeekdayName","weekdayAsOneLetter","components","IconLeft","DatePickerIcon","IconRight"],"mappings":"AAAA;;;;;+BAiGA;;;eAAA;;;;wBA/FkD;+DAC3B;uBACA;gCACG;qEACJ;gCACS;uBACqB;iCACpB;;;;;;IAaKA;AAXrC,MAAMC,cAAc,OAAOC,aAAa,eAAeA,SAASC,IAAI;AAWpE,MAAMC,eAAeC,IAAAA,gCAAe,GAACL,aAAAA,uBAAAA,iCAAAA,WAAWM,QAAQ;AAExD,MAAMC,kBAAkB,CAAC,EACvBC,IAAI,EACJC,MAAM,EACNC,UAAU,EACVC,GAAG,EACHC,GAAG,EACHC,GAAG,EACkB;IACrB,MAAMC,WAAWC,IAAAA,aAAM,EAAiB;IACxC,MAAMC,cAAcR,OAAO,IAAIS,KAAKT,QAAQU;IAC5C,MAAMC,UAAUP,MAAM,IAAIK,KAAKL,OAAOM;IACtC,MAAME,UAAUP,MAAM,IAAII,KAAKJ,OAAOK;IAEtC,IAAIT,UAAUR,aAAa;QACzBA,wBAAAA,kCAAAA,YAAaoB,YAAY,CAAC,eAAe;IAC3C;IAEA,MAAMC,iBAAiB,CAACC;QACtB,IAAItB,aAAaA,wBAAAA,kCAAAA,YAAauB,eAAe,CAAC;QAC9Cd,WAAWa;IACb;IAEA,MAAME,wBAAwB,CAACF;QAC7B,IAAI,CAACA,cAAc;QAEnBD,eAAeI,IAAAA,sBAAe,EAACH;IACjC;IAEAI,IAAAA,yBAAiB,EAACb,UAAU;QAC1B,IAAIA,SAASc,OAAO,IAAInB,QAAQ;YAC9Ba;QACF;IACF;IAEA,MAAMO,eAAeC,IAAAA,eAAU,EAAC,0BAA0B;QACxD,aAAarB;IACf;IAEA,qBACE,qBAACsB,qBAAS;kBACR,cAAA,sBAACC;YACCC,KAAKnB;YACLoB,WAAWL;YACXM,OAAO;gBAAExB;YAAI;YACbyB,oBAAiB;YACjBC,eAAY;;8BAEZ,qBAACC,sBAAc;8BACb,cAAA,qBAACN;wBAAIO,IAAG;kCAAsB;;;8BAIhC,qBAACC,yBAAS;oBACRC,MAAK;oBACLC,UAAUvB;oBACVwB,QAAQvB;oBACRwB,UAAU5B;oBACV6B,cAAc7B;oBACd8B,UAAUrB;oBACVsB,eAAe;oBACfC,eAAe;oBACfC,cAAc7C;oBACd8C,YAAY;wBAAEC,mBAAmBC,yBAAkB;oBAAC;oBACpDC,YAAY;wBACVC,UAAUC,8BAAc;wBACxBC,WAAWD,8BAAc;oBAC3B;;;;;AAKV;MAEA,WAAehD"}

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

@@ -1,7 +1,26 @@
 "use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_LOCALE = exports.MONDAY_AS_NUMBER = void 0;
-exports.MONDAY_AS_NUMBER = 1;
-exports.DEFAULT_LOCALE = (typeof window !== "undefined" && ((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.language)) || "en-GB";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_LOCALE: function() {
+        return DEFAULT_LOCALE;
+    },
+    MONDAY_AS_NUMBER: function() {
+        return MONDAY_AS_NUMBER;
+    },
+    SUNDAY_AS_NUMBER: function() {
+        return SUNDAY_AS_NUMBER;
+    }
+});
+const SUNDAY_AS_NUMBER = 0;
+const MONDAY_AS_NUMBER = 1;
+const DEFAULT_LOCALE = "en-GB";
+
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/constants.ts"],"names":[],"mappings":";;;;AAAa,QAAA,gBAAgB,GAAG,CAAC,CAAC;AAErB,QAAA,cAAc,GACzB,CAAC,OAAO,MAAM,KAAK,WAAW,KAAI,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,0CAAE,QAAQ,CAAA,CAAC,IAAI,OAAO,CAAC"}
+{"version":3,"sources":["../../../../src/components/DatePicker/constants.ts"],"sourcesContent":["export const SUNDAY_AS_NUMBER = 0;\nexport const MONDAY_AS_NUMBER = 1;\nexport const DEFAULT_LOCALE = \"en-GB\";\n"],"names":["DEFAULT_LOCALE","MONDAY_AS_NUMBER","SUNDAY_AS_NUMBER"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IADAC,gBAAgB;eAAhBA;;IADAC,gBAAgB;eAAhBA;;;AAAN,MAAMA,mBAAmB;AACzB,MAAMD,mBAAmB;AACzB,MAAMD,iBAAiB"}

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

@@ -1,18 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DatePicker"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./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];
+                }
+            });
+        }
+    });
+    return from;
+}
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}
+{"version":3,"sources":["../../../../src/components/DatePicker/index.tsx"],"sourcesContent":["export * from \"./DatePicker\";\n"],"names":[],"mappings":";;;;qBAAc"}

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

@@ -1,7 +1,14 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateObjToString = void 0;
-const date_fns_1 = require("date-fns");
-const dateObjToString = (date) => (0, date_fns_1.format)(date, "yyyy-MM-dd");
-exports.dateObjToString = dateObjToString;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "dateObjToString", {
+    enumerable: true,
+    get: function() {
+        return dateObjToString;
+    }
+});
+const _datefns = require("date-fns");
+const dateObjToString = (date)=>(0, _datefns.format)(date, "yyyy-MM-dd");
+
 //# sourceMappingURL=dateObjToString.js.map