@coopdigital/react 1.11.0 → 1.13.0

package/dist/components/DatePicker/DatePicker.js

@@ -1,150 +1,251 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useMemo, useReducer, useCallback } from 'react';
-import { DayPicker } from 'react-day-picker';
-import { Button } from '../Button/Button.js';
-import { useField } from '../Field/Field.context.js';
-import { CalendarIcon } from '../icons/CalendarIcon.js';
-import { CrossIcon } from '../icons/CrossIcon.js';
-import { TickIcon } from '../icons/TickIcon.js';
-import { Popover } from '../Popover/Popover.js';
-import { TextInput } from '../TextInput/TextInput.js';
-import { getInitialDate, getStartDate, getEndDate, getDefaultMonth, getDateValues, shouldClose, shouldSkipParsing } from './datepicker-utils.js';
-
-const now = new Date();
+import { CalendarIcon } from "../icons/CalendarIcon.js";
+import { CrossIcon } from "../icons/CrossIcon.js";
+import { TickIcon } from "../icons/TickIcon.js";
+import { Button } from "../Button/Button.js";
+import { useField } from "../Field/Field.context.js";
+import { Popover } from "../Popover/Popover.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { getDateValues, getDefaultMonth, getEndDate, getInitialDate, getStartDate, shouldClose, shouldSkipParsing } from "./datepicker-utils.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useReducer } from "react";
+import { DayPicker } from "react-day-picker";
+//#region src/components/DatePicker/DatePicker.tsx
+const now = /* @__PURE__ */ new Date();
 const baseValueProps = {
-    readOnly: true,
-    type: "hidden",
+	readOnly: true,
+	type: "hidden"
 };
 const footerMessage = {
-    multiple: "Pick one or more dates.",
-    range: "Pick a date range.",
-    single: "Pick a date.",
+	multiple: "Pick one or more dates.",
+	range: "Pick a date range.",
+	single: "Pick a date."
 };
 const initialState = {
-    message: undefined,
-    validated: false,
-};
-const defaultFormatters = {
-    formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2),
+	message: void 0,
+	validated: false
 };
+const defaultFormatters = { formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2) };
 const Calendar = ({ captionLayout = "label", className, disabled, endMonth, formatters, showOutsideDays = true, startMonth, ...props }) => {
-    const combinedFormatters = useMemo(() => ({ ...defaultFormatters, ...formatters }), [formatters]);
-    return (jsx(DayPicker, { captionLayout: captionLayout, className: className, disabled: disabled, endMonth: endMonth, formatters: combinedFormatters, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
+	return /* @__PURE__ */ jsx(DayPicker, {
+		captionLayout,
+		className,
+		disabled,
+		endMonth,
+		formatters: useMemo(() => ({
+			...defaultFormatters,
+			...formatters
+		}), [formatters]),
+		navLayout: "around",
+		showOutsideDays,
+		startMonth,
+		weekStartsOn: 1,
+		...props
+	});
 };
 const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    const field = useField();
-    initialDate = getInitialDate(mode, initialDate);
-    const startDateProp = startDate;
-    const endDateProp = endDate;
-    startDate = useMemo(() => startDateProp !== null && startDateProp !== void 0 ? startDateProp : getStartDate(initialDate), [initialDate, startDateProp]);
-    endDate = useMemo(() => endDateProp !== null && endDateProp !== void 0 ? endDateProp : getEndDate(initialDate), [initialDate, endDateProp]);
-    const defaultMonth = useMemo(() => getDefaultMonth(initialDate), [initialDate]);
-    let initialValues = {
-        state: undefined,
-        view: defaultMonth,
-    };
-    if (initialSelected) {
-        initialValues = (_a = getDateValues(mode, initialDate, dateFormat, now)) !== null && _a !== void 0 ? _a : {};
-    }
-    const [state, setState] = useReducer((stale, fresh) => ({ ...stale, ...fresh }), { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view });
-    const dispatchChanges = useCallback((value) => {
-        if (typeof onChange === "function")
-            onChange(value);
-        if (typeof onSelect === "function")
-            onSelect(value);
-    }, [onChange, onSelect]);
-    const updateValues = useCallback((selected) => {
-        var _a, _b, _c;
-        const values = getDateValues(mode, selected, dateFormat, now);
-        if (values) {
-            setState({
-                message: values.message,
-                [mode]: values.state,
-                validated: values.validated,
-                view: values.view,
-                ...(shouldClose(mode, (_a = values.state) === null || _a === void 0 ? void 0 : _a.value, closeOnSelect) && {
-                    open: false,
-                }),
-            });
-            if (values.validated && values.state) {
-                dispatchChanges(values.state.field);
-            }
-            else {
-                dispatchChanges((_c = (_b = values.state) === null || _b === void 0 ? void 0 : _b.input) !== null && _c !== void 0 ? _c : undefined);
-            }
-        }
-    }, [dateFormat, mode, dispatchChanges, closeOnSelect]);
-    const updateFromInput = useCallback((e) => {
-        var _a;
-        if (shouldSkipParsing(e.currentTarget.value)) {
-            setState({
-                message: undefined,
-                [mode]: { input: e.currentTarget.value },
-                validated: false,
-            });
-            dispatchChanges(e.currentTarget.value);
-        }
-        else {
-            updateValues((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
-        }
-    }, [updateValues, mode, dispatchChanges]);
-    const setOpen = useCallback((open) => setState({ open }), []);
-    const setView = useCallback((view) => setState({ view }), []);
-    const resetState = useCallback(() => setState({ ...initialState, [mode]: undefined }), [mode]);
-    const componentProps = {
-        className: clsx("coop-datepicker", className),
-        "data-disabled": disabled !== null && disabled !== void 0 ? disabled : undefined,
-        "data-error": error || undefined,
-        "data-mode": mode,
-        ...props,
-    };
-    const calendarProps = {
-        multiple: { mode: "multiple", selected: (_b = state.multiple) === null || _b === void 0 ? void 0 : _b.value },
-        range: { mode: "range", selected: (_c = state.range) === null || _c === void 0 ? void 0 : _c.value },
-        single: { mode: "single", selected: (_d = state.single) === null || _d === void 0 ? void 0 : _d.value },
-    };
-    const valueProps = {
-        ...baseValueProps,
-        id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-        name: name,
-    };
-    const computedSuffix = useMemo(() => {
-        return disabled ? (jsx("span", { className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })) : (jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) }));
-    }, [disabled]);
-    const getPlaceholder = () => {
-        const lowerCaseDateFormat = dateFormat.toLowerCase();
-        switch (mode) {
-            case "range":
-                return lowerCaseDateFormat + " - " + lowerCaseDateFormat;
-            case "multiple":
-                return lowerCaseDateFormat + ", " + lowerCaseDateFormat;
-            default:
-                return lowerCaseDateFormat;
-        }
-    };
-    return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsx(Popover.Anchor, { className: "coop-datepicker-inner", children: jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: valueProps.id + "_display", 
-                            //maxLength={dateFormat.length}
-                            name: name + "_display", onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: computedSuffix, suffixInline: true, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
-                            // jsx-ally throws here because we set autoFocus, but this
-                            // is not a standard element. Daypicker uses this value to
-                            // focus the day rather than the nav when it renders.
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
-                            , { 
-                                // jsx-ally throws here because we set autoFocus, but this
-                                // is not a standard element. Daypicker uses this value to
-                                // focus the day rather than the nav when it renders.
-                                // eslint-disable-next-line jsx-a11y/no-autofocus
-                                autoFocus: true, captionLayout: "dropdown", 
-                                //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("output", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && (jsx("input", { ...valueProps, value: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${valueProps.id}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${valueProps.id}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
+	const field = useField();
+	initialDate = getInitialDate(mode, initialDate);
+	const startDateProp = startDate;
+	const endDateProp = endDate;
+	startDate = useMemo(() => startDateProp ?? getStartDate(initialDate), [initialDate, startDateProp]);
+	endDate = useMemo(() => endDateProp ?? getEndDate(initialDate), [initialDate, endDateProp]);
+	let initialValues = {
+		state: void 0,
+		view: useMemo(() => getDefaultMonth(initialDate), [initialDate])
+	};
+	if (initialSelected) initialValues = getDateValues(mode, initialDate, dateFormat, now) ?? {};
+	const [state, setState] = useReducer((stale, fresh) => ({
+		...stale,
+		...fresh
+	}), {
+		...initialState,
+		[mode]: initialValues.state,
+		open: false,
+		view: initialValues.view
+	});
+	const dispatchChanges = useCallback((value) => {
+		if (typeof onChange === "function") onChange(value);
+		if (typeof onSelect === "function") onSelect(value);
+	}, [onChange, onSelect]);
+	const updateValues = useCallback((selected) => {
+		const values = getDateValues(mode, selected, dateFormat, now);
+		if (values) {
+			setState({
+				message: values.message,
+				[mode]: values.state,
+				validated: values.validated,
+				view: values.view,
+				...shouldClose(mode, values.state?.value, closeOnSelect) && { open: false }
+			});
+			if (values.validated && values.state) dispatchChanges(values.state.field);
+			else dispatchChanges(values.state?.input ?? void 0);
+		}
+	}, [
+		dateFormat,
+		mode,
+		dispatchChanges,
+		closeOnSelect
+	]);
+	const updateFromInput = useCallback((e) => {
+		if (shouldSkipParsing(e.currentTarget.value)) {
+			setState({
+				message: void 0,
+				[mode]: { input: e.currentTarget.value },
+				validated: false
+			});
+			dispatchChanges(e.currentTarget.value);
+		} else updateValues(e.currentTarget?.value);
+	}, [
+		updateValues,
+		mode,
+		dispatchChanges
+	]);
+	const setOpen = useCallback((open) => setState({ open }), []);
+	const setView = useCallback((view) => setState({ view }), []);
+	const resetState = useCallback(() => setState({
+		...initialState,
+		[mode]: void 0
+	}), [mode]);
+	const componentProps = {
+		className: clsx("coop-datepicker", className),
+		"data-disabled": disabled ?? void 0,
+		"data-error": error || void 0,
+		"data-mode": mode,
+		...props
+	};
+	const calendarProps = {
+		multiple: {
+			mode: "multiple",
+			selected: state.multiple?.value
+		},
+		range: {
+			mode: "range",
+			selected: state.range?.value
+		},
+		single: {
+			mode: "single",
+			selected: state.single?.value
+		}
+	};
+	const valueProps = {
+		...baseValueProps,
+		id: id ?? field?.id,
+		name
+	};
+	const computedSuffix = useMemo(() => {
+		return disabled ? /* @__PURE__ */ jsx("span", {
+			className: "coop-datepicker-trigger",
+			children: /* @__PURE__ */ jsx(CalendarIcon, { width: 24 })
+		}) : /* @__PURE__ */ jsx(Popover.Trigger, {
+			"aria-label": "Choose date",
+			className: "coop-datepicker-trigger",
+			children: /* @__PURE__ */ jsx(CalendarIcon, { width: 24 })
+		});
+	}, [disabled]);
+	const getPlaceholder = () => {
+		const lowerCaseDateFormat = dateFormat.toLowerCase();
+		switch (mode) {
+			case "range": return lowerCaseDateFormat + " - " + lowerCaseDateFormat;
+			case "multiple": return lowerCaseDateFormat + ", " + lowerCaseDateFormat;
+			default: return lowerCaseDateFormat;
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
+		children: [
+			/* @__PURE__ */ jsxs(Popover, {
+				onOpenChange: setOpen,
+				open: state.open,
+				children: [/* @__PURE__ */ jsx(Popover.Anchor, {
+					className: "coop-datepicker-inner",
+					children: /* @__PURE__ */ jsx(TextInput, {
+						autoComplete: "off",
+						className: "coop-datepicker-input",
+						disabled,
+						id: valueProps.id + "_display",
+						name: name + "_display",
+						onChange: updateFromInput,
+						placeholder: getPlaceholder(),
+						ref,
+						required,
+						size,
+						suffix: computedSuffix,
+						suffixInline: true,
+						value: state?.[mode]?.input ?? ""
+					})
+				}), /* @__PURE__ */ jsxs(Popover.Content, {
+					"aria-label": "Date picker",
+					className: "coop-datepicker-calendar bg-white",
+					collisionPadding: 16,
+					sideOffset: 4,
+					children: [/* @__PURE__ */ jsx(Calendar, {
+						autoFocus: true,
+						captionLayout: "dropdown",
+						disabled: disabledDates,
+						endMonth: endDate,
+						month: state.view,
+						onMonthChange: setView,
+						onSelect: updateValues,
+						startMonth: startDate,
+						...calendarProps[mode]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "coop-datepicker-actions",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							"aria-label": "Cancel",
+							className: "bg-tint-grey",
+							onClick: resetState,
+							size: "sm",
+							children: ["Clear ", /* @__PURE__ */ jsx(CrossIcon, {
+								stroke: "black",
+								strokeWidth: 1
+							})]
+						}), /* @__PURE__ */ jsx(Popover.Close, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs(Button, {
+								"aria-label": "Accept",
+								size: "sm",
+								children: ["OK ", /* @__PURE__ */ jsx(TickIcon, {
+									stroke: "white",
+									strokeWidth: 1
+								})]
+							})
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("output", {
+				"aria-live": "assertive",
+				className: "sr-only coop-datepicker-status",
+				children: state.message ?? footerMessage[mode]
+			}),
+			mode === "single" && /* @__PURE__ */ jsx("input", {
+				...valueProps,
+				value: state.single?.field ?? state.single?.input ?? ""
+			}),
+			mode === "multiple" && /* @__PURE__ */ jsx("input", {
+				...valueProps,
+				value: state.multiple?.field ?? state.multiple?.input ?? ""
+			}),
+			mode === "range" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+				...baseValueProps,
+				id: `${valueProps.id}_start`,
+				name: `${name}_start`,
+				value: state.range?.field?.from ?? state.range?.input ?? ""
+			}), /* @__PURE__ */ jsx("input", {
+				...baseValueProps,
+				id: `${valueProps.id}_end`,
+				name: `${name}_end`,
+				value: state.range?.field?.to ?? state.range?.input ?? ""
+			})] })
+		]
+	});
 };
 DatePicker.slot = {
-    field: true,
-    name: "DatePicker",
-    suffix: "_display",
+	field: true,
+	name: "DatePicker",
+	suffix: "_display"
 };
-
+//#endregion
 export { DatePicker, DatePicker as default };

package/dist/components/DatePicker/datepicker-utils.d.ts

@@ -1,68 +1,8 @@
 import { Mode } from "react-day-picker";
-export interface DateRangeStr {
-    from?: string;
-    to?: string;
+//#region src/components/DatePicker/datepicker-utils.d.ts
+interface DateRange {
+  from: Date | undefined;
+  to?: Date | undefined;
 }
-export interface DateRange {
-    from: Date | undefined;
-    to?: Date | undefined;
-}
-interface DateReturn {
-    message?: string;
-    validated?: boolean;
-    view?: Date;
-}
-export type DateBase = string | undefined;
-export type DateType = Date | Date[] | DateRange | string | undefined;
-export interface TDateSingle {
-    event?: string;
-    field?: string;
-    input: string;
-    value?: Date;
-}
-export interface TDateMultiple {
-    event?: string[];
-    field?: string;
-    input: string;
-    value?: Date[];
-}
-export interface TDateRange {
-    event?: DateRangeStr;
-    field?: DateRangeStr;
-    input: string;
-    value?: DateRange;
-}
-type RDateSingle = DateReturn & {
-    state?: TDateSingle;
-};
-type RDateMultiple = DateReturn & {
-    state?: TDateMultiple;
-};
-type RDateRange = DateReturn & {
-    state?: TDateRange;
-};
-export declare function isValidDate(date: unknown): date is Date;
-export declare function isValidRangeFrom(date: unknown): date is {
-    from: Date;
-    to?: Date;
-};
-export declare function isValidRangeTo(date: unknown): date is {
-    from?: Date;
-    to: Date;
-};
-export declare function getISODateString(date: Date): string;
-export declare function getRangeFromString(input: string): DateRangeStr;
-export declare const getStartDate: (date: Date | Partial<DateRange>) => Date | undefined;
-export declare const getEndDate: (date: Date | Partial<DateRange>) => Date | undefined;
-export declare const getDefaultMonth: (date: Date | DateRange) => Date | undefined;
-export declare const getInitialDate: (mode: Mode, date: Date | DateRange) => Date | DateRange;
-export declare function getSingleDate(date: Date | DateBase, df: string, now: Date): RDateSingle;
-export declare function getMultipleDate(date: Date[] | DateBase, df: string, now: Date): RDateMultiple;
-export declare function getRangeDate(date: DateRange | DateBase, df: string, now: Date): RDateRange;
-export declare const getDateValues: (mode: Mode, selected: DateType, dateFormat: string, now: Date) => RDateSingle | RDateMultiple | RDateRange | undefined;
-export declare const shouldSkipParsing: (value: string) => boolean;
-export declare const shouldClose: (mode: Mode, value: DateType, closeOnSelect?: boolean) => boolean;
-export declare const isSingle: (m: Mode, d: DateType) => d is Date & DateBase;
-export declare const isMultiple: (m: Mode, d: DateType) => d is Date[] & DateBase;
-export declare const isRange: (m: Mode, d: DateType) => d is DateRange & DateBase;
-export {};
+//#endregion
+export { DateRange };