@simplybusiness/mobius-datepicker 3.12.2 → 4.0.0-beta.11

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Changelog
 
-All notable changes to this project will be documented in this file, or link in [archives](#archived).
-
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Added
+
+Added accessibility features to DatePicker:
+
+- A focus trap ensures that keyboard navigation remains on the calendar when open
+- Screen reader announce text on open
+- DOM body is set to aria-hidden="true" when calendar is open
+- Pressing escape or clicking outside calendar closes it
+
+## [4.0.0-alpha.0] - 2023-10-23
+
+### Added
+
+- Added exit animations to `Modal`
+
 ### Changed
 
 - Move DatePicker component under `@simplybusiness/mobius-datepicker`

package/dist/cjs/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,9 @@
-import { DatePickerStateOptions } from "@react-stately/datepicker";
-import { AriaDatePickerProps } from "@react-aria/datepicker";
-import { DateValue } from "@internationalized/date";
-export interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerStateOptions<DateValue> {
-    label: string;
+import { TextFieldProps } from "@simplybusiness/mobius";
+export interface DatePickerProps extends Omit<TextFieldProps, "defaultValue" | "onChange" | "onBlur" | "onFocus"> {
+    onChange?: (date: string | undefined) => void;
+    defaultValue?: string;
+    min?: string;
+    max?: string;
+    id?: string;
 }
-export declare function DatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,51 +1,109 @@
 "use strict";
 "use client";
+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]];
+        }
+    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 datepicker_1 = require("@react-stately/datepicker");
-const datepicker_2 = require("@react-aria/datepicker");
-const react_1 = require("react");
-const overlays_1 = require("@react-aria/overlays");
-const interactions_1 = require("@react-aria/interactions");
-const focus_1 = require("@react-aria/focus");
-const clsx_1 = __importDefault(require("clsx"));
-const visually_hidden_1 = require("@react-aria/visually-hidden");
 const mobius_1 = require("@simplybusiness/mobius");
-const DateField_1 = require("./DateField");
-const Popover_1 = require("./Popover");
-const Calendar_1 = require("./Calendar");
-function DatePicker(props) {
-    const { label, isRequired } = props;
-    const state = (0, datepicker_1.useDatePickerState)(props);
-    const ref = (0, react_1.useRef)(null);
-    const { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = (0, datepicker_2.useDatePicker)(props, state, ref);
-    const classes = (0, clsx_1.default)("mobius/DatePicker", {
-        "--is-valid": state.validationState === "valid",
-        "--is-invalid": state.validationState === "invalid",
-        "--is-required": typeof isRequired === "boolean" && isRequired,
-        "--is-optional": typeof isRequired === "boolean" && !isRequired,
-    });
-    const { hoverProps, isHovered } = (0, interactions_1.useHover)(Object.assign({}, props));
-    const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)(props);
-    const dateFieldGroupClasses = (0, clsx_1.default)("mobius/DateFieldGroup", {
-        "--is-hovered": isHovered,
-        "--is-focused": isFocusVisible,
-    });
-    const dateFieldClasses = (0, clsx_1.default)("mobius/DateField", {
-        "--is-hovered": isHovered,
-        "--is-focused": isFocusVisible,
-    });
-    const buttonClasses = (0, clsx_1.default)("mobius/DateFieldButton", {
-        "--is-hovered": isHovered,
-        "--is-focused": isFocusVisible,
-    });
-    return ((0, jsx_runtime_1.jsx)(overlays_1.ModalProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes, style: { position: "relative" }, children: [(0, jsx_runtime_1.jsx)(mobius_1.Label, Object.assign({}, labelProps, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, hoverProps, focusProps, { ref: ref, className: dateFieldGroupClasses, children: [(0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, fieldProps, { className: dateFieldClasses })), (0, jsx_runtime_1.jsx)(mobius_1.Button, Object.assign({ variant: "secondary" }, buttonProps, { className: buttonClasses, children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: "Pick date" }) }))] })), state.isOpen && (
-                /* @ts-expect-error */
-                (0, jsx_runtime_1.jsx)(Popover_1.Popover, Object.assign({}, dialogProps, { isOpen: state.isOpen, onClose: () => state.setOpen(false), children: (0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)) })))] }) }));
-}
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const react_1 = require("react");
+const isTouchDevice_1 = require("../../utils/isTouchDevice");
+const DatePickerModal_1 = require("./DatePickerModal");
+const utils_1 = require("./utils");
+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;
+    const inputValidationState = !isValid ? "invalid" : validationState;
+    const touchDevice = (0, isTouchDevice_1.isTouchDevice)();
+    const validationClasses = {
+        "--is-valid": validationState === "valid",
+        "--is-invalid": validationState === "invalid" || !isValid,
+    };
+    const containerClasses = (0, dedupe_1.default)("mobius/DatePickerContainer", Object.assign({ "--is-disabled": isDisabled }, validationClasses));
+    const popoverToggleClasses = (0, dedupe_1.default)("mobius/DateFieldButton", Object.assign({}, validationClasses));
+    const togglePopoverVisibility = () => {
+        setIsValid(true);
+        setIsOpen(!isOpen);
+    };
+    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;
+        // 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();
+        if (!isValidInput) {
+            setIsValid(false);
+        }
+    };
+    const onDateSelected = (selectedDate) => {
+        // Handle null callback from useOnClickOutside
+        if (selectedDate) {
+            setTextFieldVal(selectedDate);
+            setIsValid(true);
+            // Add other callback events here
+            onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate);
+        }
+        setIsOpen(false);
+    };
+    // User has interacted with the component and navigated away
+    const handleBlur = (event) => {
+        validate();
+        // User hasn't entered a date OR
+        // entered an invalid date
+        if (!textFieldVal) {
+            setIsValid(false);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen) {
+            setTop(((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0);
+            // Disable validation when day picker is open
+            setIsValid(true);
+            return;
+        }
+        validate();
+    }, [isOpen]);
+    if (touchDevice) {
+        return ((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 ((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, children: (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)(DatePickerModal_1.DatePickerModal, { date: textFieldVal, isOpen: isOpen, top: top, onSelected: onDateSelected, 
+                // eslint-disable-next-line react/destructuring-assignment
+                min: props.min, 
+                // eslint-disable-next-line react/destructuring-assignment
+                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":";AAAA,YAAY,CAAC;;;;;;;AAEb,0DAGmC;AACnC,uDAA4E;AAC5E,iCAA+B;AAC/B,mDAAqD;AAErD,2DAAoD;AACpD,6CAAiD;AACjD,gDAAwB;AACxB,iEAA6D;AAC7D,mDAAuD;AACvD,2CAAwC;AACxC,uCAAoC;AACpC,yCAAsC;AAQtC,SAAgB,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,KAAK,GAAG,IAAA,+BAAkB,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,GACd,GAAG,IAAA,0BAAa,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,IAAA,cAAI,EAAC,mBAAmB,EAAE;QACxC,YAAY,EAAE,KAAK,CAAC,eAAe,KAAK,OAAO;QAC/C,cAAc,EAAE,KAAK,CAAC,eAAe,KAAK,SAAS;QACnD,eAAe,EAAE,OAAO,UAAU,KAAK,SAAS,IAAI,UAAU;QAC9D,eAAe,EAAE,OAAO,UAAU,KAAK,SAAS,IAAI,CAAC,UAAU;KAChE,CAAC,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAA,uBAAQ,oBACrC,KAAK,EACR,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,qBAAqB,GAAG,IAAA,cAAI,EAAC,uBAAuB,EAAE;QAC1D,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,IAAA,cAAI,EAAC,kBAAkB,EAAE;QAChD,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,cAAI,EAAC,wBAAwB,EAAE;QACnD,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,cAAc;KAC/B,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,wBAAa,cACZ,iCAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aACtD,uBAAC,cAAK,oBAAK,UAAU,cAAG,KAAK,IAAS,EACtC,iDACM,UAAU,EACV,UAAU,EACV,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,qBAAqB,aAEhC,uBAAC,qBAAS,oBAAK,UAAU,IAAE,SAAS,EAAE,gBAAgB,IAAI,EAE1D,uBAAC,eAAM,kBACL,OAAO,EAAC,WAAW,IACf,WAAW,IACf,SAAS,EAAE,aAAa,YAExB,uBAAC,gCAAc,4BAA2B,IACnC,KACL,EACL,KAAK,CAAC,MAAM,IAAI;gBACf,sBAAsB;gBACtB,uBAAC,iBAAO,oBACF,WAAW,IACf,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,YAEnC,uBAAC,mBAAQ,oBAAK,aAAa,EAAI,IACvB,CACX,IACG,GACQ,CACjB,CAAC;AACJ,CAAC;AA3ED,gCA2EC"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/DatePicker/DatePicker.stories.d.ts

@@ -1,16 +1,34 @@
 import type { Meta } from "@storybook/react";
-import { DatePicker } from "./DatePicker";
+import { DatePicker, DatePickerProps } from "./DatePicker";
 declare const _default: {
     title: string;
-    component: typeof DatePicker;
+    component: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        locale: {
+        validationState: {
+            options: string[];
             control: {
                 type: string;
             };
-            options: string[];
+            mapping: {
+                valid: string;
+                invalid: string;
+                neither: string;
+            };
         };
     };
+    args: {
+        defaultValue: string;
+        errorMessage: string;
+        isDisabled: boolean;
+        isRequired: boolean;
+        min: string;
+        max: string;
+    };
 };
 export default _default;
 export declare const Normal: Meta<typeof DatePicker>;
+export declare const WithMinValue: Meta<typeof DatePicker>;
+export declare const WithMaxValue: Meta<typeof DatePicker>;
+export declare const Disabled: Meta<typeof DatePicker>;
+export declare const Valid: Meta<typeof DatePicker>;
+export declare const Invalid: Meta<typeof DatePicker>;

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

@@ -1,28 +1,75 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Normal = void 0;
+exports.Invalid = exports.Valid = exports.Disabled = exports.WithMaxValue = exports.WithMinValue = exports.Normal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const date_1 = require("@internationalized/date");
-const i18n_1 = require("@react-aria/i18n");
+const date_fns_1 = require("date-fns");
+const excludeControls_1 = require("../../utils/excludeControls");
 const DatePicker_1 = require("./DatePicker");
 exports.default = {
     title: "Forms/DatePicker",
     component: DatePicker_1.DatePicker,
-    argTypes: {
-        locale: {
-            control: { type: "select" },
-            options: ["", "en-GB", "en-US"],
-        },
+    argTypes: Object.assign({ validationState: {
+            options: ["valid", "invalid", "neither"],
+            control: { type: "radio" },
+            mapping: {
+                valid: "valid",
+                invalid: "invalid",
+                neither: "",
+            },
+        } }, (0, excludeControls_1.excludeControls)("onChange", "id", "className", "description", "type", "aria-label", "aria-labelledby", "labelElementType", "inputElementType", "isReadOnly", "aria-describedby", "aria-errormessage")),
+    args: {
+        defaultValue: "",
+        errorMessage: "",
+        isDisabled: false,
+        isRequired: false,
+        min: "",
+        max: "",
     },
 };
 exports.Normal = {
-    render: (args) => ((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({ minValue: (0, date_1.parseDate)("2022-05-05") }, args))),
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
     args: {
         label: "Start date",
-        isRequired: false,
     },
-    decorators: [
-        (Story, context) => ((0, jsx_runtime_1.jsx)(i18n_1.I18nProvider, { locale: context.allArgs.locale, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
-    ],
+};
+const aWeekFromToday = (0, date_fns_1.format)((0, date_fns_1.add)(new Date(), { weeks: 1 }), "yyyy-MM-dd");
+const twoMonthsFromToday = (0, date_fns_1.format)((0, date_fns_1.add)(new Date(), { months: 2 }), "yyyy-MM-dd");
+exports.WithMinValue = {
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
+    args: {
+        label: "Start date (a week from today)",
+        min: aWeekFromToday,
+        isRequired: true,
+    },
+};
+exports.WithMaxValue = {
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
+    args: {
+        label: "End date (two months from today)",
+        max: twoMonthsFromToday,
+        isRequired: true,
+    },
+};
+exports.Disabled = {
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
+    args: {
+        label: "Start date",
+        isDisabled: true,
+    },
+};
+exports.Valid = {
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
+    args: {
+        label: "Start date",
+        validationState: "valid",
+    },
+};
+exports.Invalid = {
+    render: (args) => (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, args)),
+    args: {
+        label: "Start date",
+        validationState: "invalid",
+        errorMessage: "This is an error message",
+    },
 };
 //# sourceMappingURL=DatePicker.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,kDAAoD;AACpD,2CAAgD;AAChD,6CAA2D;AAE3D,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;SAChC;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAA4B;IAC7C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,CACjC,uBAAC,uBAAU,kBAAC,QAAQ,EAAE,IAAA,gBAAS,EAAC,YAAY,CAAC,IAAM,IAAI,EAAI,CAC5D;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,KAAK;KAClB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAClB,uBAAC,mBAAY,IAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,YAC1C,uBAAC,KAAK,KAAG,GACI,CAChB;KACF;CACF,CAAC"}
+{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAAuC;AACvC,iEAA8D;AAC9D,6CAA2D;AAE3D,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,uBAAU;IACrB,QAAQ,kBACN,eAAe,EAAE;YACf,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,EAAE;aACZ;SACF,IACE,IAAA,iCAAe,EAChB,UAAU,EACV,IAAI,EACJ,WAAW,EACX,aAAa,EACb,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,CACpB,CACF;IACD,IAAI,EAAE;QACJ,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,KAAK;QACjB,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;KACR;CACF,CAAC;AAEW,QAAA,MAAM,GAA4B;IAC7C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;KACpB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,IAAA,iBAAM,EAAC,IAAA,cAAG,EAAC,IAAI,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;AAC3E,MAAM,kBAAkB,GAAG,IAAA,iBAAM,EAAC,IAAA,cAAG,EAAC,IAAI,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;AAEnE,QAAA,YAAY,GAA4B;IACnD,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,gCAAgC;QACvC,GAAG,EAAE,cAAc;QACnB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEW,QAAA,YAAY,GAA4B;IACnD,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,kCAAkC;QACzC,GAAG,EAAE,kBAAkB;QACvB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEW,QAAA,QAAQ,GAA4B;IAC/C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEW,QAAA,KAAK,GAA4B;IAC5C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,eAAe,EAAE,OAAO;KACzB;CACF,CAAC;AAEW,QAAA,OAAO,GAA4B;IAC9C,MAAM,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,uBAAC,uBAAU,oBAAK,IAAI,EAAI;IAC3D,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,0BAA0B;KACzC;CACF,CAAC"}

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

@@ -1,14 +1,98 @@
 "use strict";
+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 react_1 = require("@testing-library/react");
-const i18n_1 = require("@react-aria/i18n");
-const date_1 = require("@internationalized/date");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const _1 = require(".");
+const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+const DEVICES = [
+    ["touch device", true],
+    ["non-touch device", false],
+];
 describe("DatePicker", () => {
-    it("should render without errors", () => {
-        const component = (0, react_1.render)((0, jsx_runtime_1.jsx)(i18n_1.I18nProvider, { locale: "en-GB", children: (0, jsx_runtime_1.jsx)(_1.DatePicker, { minValue: (0, date_1.parseDate)("2022-05-05"), label: "Start date" }) }));
-        expect(component).toBeTruthy();
+    describe.each(DEVICES)(`given it is a %s`, (_, value) => {
+        beforeEach(() => {
+            mockMatchMedia(value);
+        });
+        it("should render without errors", () => {
+            const exampleDate = "2023-11-13";
+            const labelText = "Start date";
+            const testId = "date-picker";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.DatePicker, { defaultValue: exampleDate, label: labelText, "data-testid": testId }));
+            const inputField = react_1.screen.getByTestId(testId);
+            const label = react_1.screen.getByLabelText(labelText);
+            expect(inputField).toHaveValue(exampleDate);
+            expect(label).toBeInTheDocument();
+        });
+        describe("when value changes", () => {
+            it("triggers onChange", async () => {
+                const labelText = "Start date";
+                const testId = "date-picker";
+                const onChange = jest.fn();
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.DatePicker, { label: labelText, "data-testid": testId, onChange: onChange }));
+                const inputField = react_1.screen.getByTestId(testId);
+                const newDate = "2015-06-01";
+                react_1.fireEvent.change(inputField, { target: { value: newDate } });
+                expect(inputField).toHaveValue(newDate);
+                // Tab outside, so that date picker triggers onBlur event
+                await user_event_1.default.tab();
+                await user_event_1.default.tab();
+                expect(onChange).toHaveBeenCalledWith(newDate);
+            });
+        });
+        it("displays custom error message", () => {
+            const testId = "date-picker";
+            const errorMessage = "Input error";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.DatePicker, { label: "Start date", "data-testid": testId, errorMessage: errorMessage }));
+            const error = react_1.screen.getByText(errorMessage);
+            expect(error).toBeInTheDocument();
+        });
+        describe("given a min prop is provided", () => {
+            describe("given a default invalid date falls into rangeUnderflow", () => {
+                it("should display an error", () => {
+                    const exampleDate = "2023-11-13";
+                    const minimumDate = "2024-01-01";
+                    const labelText = "Start date";
+                    const testId = "date-picker";
+                    const errorMessage = `The selected date ${exampleDate} is before earliest possible ${minimumDate} date`;
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.DatePicker, { defaultValue: exampleDate, min: minimumDate, label: labelText, "data-testid": testId }));
+                    const error = react_1.screen.getByText(errorMessage);
+                    expect(error).toBeInTheDocument();
+                });
+            });
+        });
+        describe("given a max prop is provided", () => {
+            describe("given a default invalid date falls into rangeOverflow", () => {
+                it("should display an error", () => {
+                    const exampleDate = "2025-11-13";
+                    const maximumDate = "2024-01-01";
+                    const labelText = "Start date";
+                    const testId = "date-picker";
+                    const errorMessage = `The selected date ${exampleDate} is after latest possible ${maximumDate} date`;
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.DatePicker, { defaultValue: exampleDate, max: maximumDate, label: labelText, "data-testid": testId }));
+                    const error = react_1.screen.getByText(errorMessage);
+                    expect(error).toBeInTheDocument();
+                });
+            });
+        });
     });
 });
 //# sourceMappingURL=DatePicker.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.test.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.test.tsx"],"names":[],"mappings":";;;AACA,kDAAgD;AAChD,2CAAgD;AAChD,kDAAoD;AACpD,wBAA+B;AAE/B,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACtC,MAAM,SAAS,GAAG,IAAA,cAAM,EACtB,uBAAC,mBAAY,IAAC,MAAM,EAAC,OAAO,YAC1B,uBAAC,aAAU,IAAC,QAAQ,EAAE,IAAA,gBAAS,EAAC,YAAY,CAAC,EAAE,KAAK,EAAC,YAAY,GAAG,GACvD,CAChB,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"DatePicker.test.js","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/DatePicker/DatePickerIcon.d.ts

@@ -0,0 +1 @@
+export declare const DatePickerIcon: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+"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;
+//# sourceMappingURL=DatePickerIcon.js.map

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

@@ -0,0 +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"}

package/dist/cjs/components/DatePicker/DatePickerModal.d.ts

@@ -0,0 +1,9 @@
+export type DatePickerModalProps = {
+    date?: string;
+    isOpen: boolean;
+    top: number;
+    onSelected: (date?: string | undefined) => void;
+    min?: string;
+    max?: string;
+};
+export declare const DatePickerModal: ({ date, isOpen, onSelected, top, min, max, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerModal = 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 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");
+const PARENT_NODE = typeof document !== "undefined" && document.body;
+const DatePickerModal = ({ date, isOpen, onSelected, top, min, max, }) => {
+    const modalRef = (0, react_1.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");
+        onSelected(selectedDate);
+    };
+    const handleDayPickerSelect = (selectedDate) => {
+        if (!selectedDate)
+            return;
+        handleSelected((0, utils_1.dateObjToString)(selectedDate));
+    };
+    (0, mobius_1.useOnClickOutside)(modalRef, () => {
+        if (modalRef.current && isOpen) {
+            handleSelected();
+        }
+    });
+    const modalClasses = (0, dedupe_1.default)("mobius/DatePickerModal", {
+        "--is-open": isOpen,
+    });
+    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.DatePickerModal = DatePickerModal;
+//# sourceMappingURL=DatePickerModal.js.map

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

@@ -0,0 +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;AAW9D,MAAM,eAAe,GAAG,CAAC,EAC9B,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;QACzB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAClD;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;YAC9B,cAAc,EAAE,CAAC;SAClB;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;AAvEW,QAAA,eAAe,mBAuE1B"}

package/dist/cjs/components/DatePicker/DatePickerModal.test.d.ts

@@ -0,0 +1 @@
+export {};