@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

package/data-table/types.d.ts

@@ -1,40 +1,72 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { ErrorDisplayAttributes } from "../error-display/types";
+/** Props for the `DataTable` component. */
 export interface DataTableProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
-    /** Configuration for each header */
+    /** Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry. */
     headers: HeaderProps[];
+    /** Row data to render. When omitted or empty the empty state is shown. */
     rows?: RowProps[] | undefined;
     className?: string | undefined;
+    /**
+     * The ids of selected items. If undefined, the Select All checkbox remains
+     * enabled when rows are non-empty.
+     * @remarks Must be provided alongside `enableMultiSelect` for selection to work. Pass an
+     * empty array (not `undefined`) to enable the select-all checkbox while having no rows
+     * selected.
+     */
     selectedIds?: string[] | undefined;
+    /** Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible. */
     disabledIds?: string[] | undefined;
-    /** Enables a checkbox for each row */
+    /** Renders a checkbox column as the first column of each row to support row selection. */
     enableMultiSelect?: boolean | undefined;
-    /** Enables a select all checkbox */
+    /** Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`. */
     enableSelectAll?: boolean | undefined;
-    /** Specifies if an action bar is visible when one or more rows are selected */
+    /** Shows the action bar whenever one or more rows are selected. */
     enableActionBar?: boolean | undefined;
-    /** Specifies if the header is fixed to the top */
+    /** Shows the action bar even when no rows are selected. Requires `enableActionBar`. */
+    enableActionBarWithoutSelection?: boolean | undefined;
+    /** Keeps the header row visible as the user scrolls down through the table. */
     enableStickyHeader?: boolean | undefined;
-    /** Custom content to be rendered within the action bar */
+    /** Additional content rendered inside the action bar. */
     actionBarContent?: ReactNode | undefined;
+    /**
+     * Controls whether the table body renders data rows or a loading indicator.
+     * @default "success"
+     */
     loadState?: LoadStateType | undefined;
+    /** Called when a row's checkbox is toggled; receives the row ID and the new selected state. */
     onSelect?: ((rowId: string, isSelected: boolean) => void) | undefined;
+    /**
+     * Called when the select-all checkbox is toggled.
+     */
     onSelectAll?: ((isAllSelected: boolean) => void) | undefined;
+    /** Called when a header cell is clicked; receives the `fieldKey` of the clicked column. */
     onHeaderClick?: ((fieldKey: string) => void) | undefined;
+    /** Called when the "Clear selection" button inside the action bar is clicked. */
     onClearSelectionClick?: (() => void) | undefined;
-    /** Specifies the sort indicator display state for each column **/
+    /**
+     * Maps each `fieldKey` to its current sort direction. A key present in this map causes the
+     * corresponding header to render a directional arrow and expose sort controls to assistive
+     * technology.
+     */
     sortIndicators?: SortIndicatorsProps | undefined;
-    /** Specifies if every alternate row has a different background colour */
+    /** Applies an alternate background colour to every odd-indexed row. */
     alternatingRows?: boolean | undefined;
-    /** Override props for the empty view display */
+    /**
+     * Overrides the title and description shown in the built-in empty state. Ignored when
+     * `renderCustomEmptyView` is provided.
+     */
     emptyView?: ErrorDisplayAttributes | undefined;
-    /** Returns a custom view to be rendered when the table is empty */
+    /** Renders a fully custom empty state in place of the default `ErrorDisplay`. */
     renderCustomEmptyView?: (() => ReactNode) | undefined;
 }
+/** Whether the table body is in a loading or data-ready state. */
 export type LoadStateType = "loading" | "success";
+/** Direction of a column sort indicator. */
 export type SortIndicatorType = "asc" | "desc";
+/** Maps column `fieldKey` values to their current sort direction. */
 export interface SortIndicatorsProps {
     [fieldKey: string]: SortIndicatorType;
 }
@@ -45,18 +77,39 @@ export interface SortIndicatorsProps {
  * For additional customisation, pass a `HeaderItemProps` object
  */
 export type HeaderProps = string | HeaderItemProps;
+/**
+ * Full object form of a column header definition;
+ * use instead of a plain string when custom labels, click handling,
+ * or accessibility metadata is needed. */
 interface HeaderItemProps {
+    /** Key used to read the corresponding cell value from each `RowProps` entry. */
     fieldKey: string;
+    /** Column heading content. Pass a string for plain text or a `ReactNode` for custom markup. */
     label: string | ReactNode;
+    /** Makes the header cell interactive, firing `onHeaderClick` when clicked. */
     clickable?: boolean | undefined;
+    /**
+     * Used with `enableMultiSelect`. Marks this column as descriptive of the row
+     * (e.g. a name or unique ID). Its value is used to label the row's checkbox
+     * for screen readers.
+     */
+    keyColumn?: boolean | undefined;
     style?: CSSProperties | undefined;
 }
+/** Props for each row of data in the table. */
 export interface RowProps {
+    /** Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. */
     id: string | number;
-    /** data with key matching fieldKey in `HeaderProps` */
+    /**
+     * Cell values keyed by the `fieldKey` of the matching `HeaderProps`. Values can be a
+     * primitive (rendered inside a `Typography.BodyBL`), a `ReactNode`, or a render function
+     * that receives the full row and `RowRenderProps`.
+     */
     [fieldKey: string]: string | number | ReactNode | ((row: RowProps, renderProps: RowRenderProps) => ReactNode) | undefined;
 }
+/** Runtime context passed to a cell's render function when the value is a function. */
 interface RowRenderProps {
+    /** Whether the row is currently in the `selectedIds` set. */
     isSelected: boolean;
 }
 export {};

package/date-input/date-input.d.ts

@@ -1,2 +1,8 @@
 import type { DateInputProps } from "./types";
-export declare const DateInput: ({ minDate, maxDate, disabled, disabledDates, error, hideInputKeyboard, value, onChange, onFocus, onBlur, onYearMonthDisplayChange, withButton, readOnly, id, allowDisabledSelection, zIndex, dropdownRootNode, ...otherProps }: DateInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A single-date input field with an attached calendar dropdown.
+ *
+ * Use this to enter or pick a single date.
+ * @keywords calendar, datepicker, field, form, input
+ */
+export declare const DateInput: ({ minDate, maxDate, disabled, disabledDates, error, hideInputKeyboard, value, onChange, onFocus, onBlur, onYearMonthDisplayChange, withButton, readOnly, id, allowDisabledSelection, zIndex, dropdownRootNode, className, ...otherProps }: DateInputProps) => import("react/jsx-runtime").JSX.Element;

package/date-input/date-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import r from"../external/dayjs/dayjs.min.js";import{useState as t,useRef as n,useEffect as o}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as i}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{CalendarDropdown as d}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{StandaloneDateInput as l}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateInputHelper as s}from"../util/date-input-helper.js";import"../util/string-helper.js";import{Container as u}from"./date-input.style.js";const c=c=>{var{minDate:p,maxDate:m,disabled:h,disabledDates:v,error:f,hideInputKeyboard:D,value:b,onChange:w,onFocus:y,onBlur:j,onYearMonthDisplayChange:g,withButton:I=!0,readOnly:x,id:Y,allowDisabledSelection:C,zIndex:B,dropdownRootNode:O}=c,z=e(c,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[M,F]=t(s.sanitizeInput(b)),[R,S]=t(s.sanitizeInput(b)),[$,K]=t(void 0),[N,V]=t(!1),[_,k]=t(!1),E=n(null),H=n(null),T=n(null);o((()=>{const e=s.sanitizeInput(b);F(e),S(e)}),[b]);const W=e=>{!C&&s.isDateDisabled(e,{disabledDates:v,minDate:p,maxDate:m})||(S(e),I||(L(e),F(e),e&&V(!1)))},Z=e=>{var a;S(e),I||(L(e),F(e),e&&(null===(a=H.current)||void 0===a||a.focusYearRef(),V(!1)),K(void 0))},q=()=>{x||h||(V(!0),_||(k(!0),y&&y()))},A=e=>{var a,r,t;const n=e.relatedTarget,o=T.current&&T.current.contains(n),i=E.current&&E.current.contains(n),d=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(_&&!N&&!i&&!d||N&&!i&&!o&&!d)&&(null===(t=H.current)||void 0===t||t.resetInput(),S(M),k(!1),V(!1),P())},G=e=>{K(e)},J=e=>{var a,t;switch(e){case"reset":S(M);break;case"confirmed":F(R),L(R)}r(R,"YYYY-MM-DD",!0).isValid()?null===(a=H.current)||void 0===a||a.focusYearRef():null===(t=E.current)||void 0===t||t.focus(),V(!1)},L=e=>{w&&w(e)},P=()=>{j&&j()};return a(i,{enabled:!x&&!h,isOpen:N,renderElement:()=>a(u,Object.assign({role:"group",tabIndex:0,ref:E,onBlur:A,onFocus:q,$disabled:h,$readOnly:x,$focused:_,$error:f,id:Y,"data-testid":z["data-testid"],"aria-disabled":h},z,{children:a(l,{ref:H,disabled:h,onChange:W,readOnly:x,focused:N,names:["start-day","start-month","start-year"],value:R,hoverValue:$,hideInputKeyboard:D})})),renderDropdown:({elementWidth:e})=>a(d,{variant:"single",ref:T,initialCalendarDate:R,withButton:I,value:R,disabledDates:v,minDate:p,maxDate:m,allowDisabledSelection:C,onHover:G,onSelect:Z,onDismiss:J,onYearMonthDisplayChange:g,width:e,isFocusable:!x&&!h}),onClose:()=>{var e;null===(e=H.current)||void 0===e||e.resetInput(),S(M),V(!1),k(!1),P(),K(void 0)},onDismiss:()=>{var e,a;null===(e=H.current)||void 0===e||e.resetInput(),null===(a=E.current)||void 0===a||a.focus(),S(M),V(!1)},customZIndex:B,offset:16,rootNode:O})};export{c as DateInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import r from"clsx";import t from"../external/dayjs/dayjs.min.js";import{useState as n,useRef as o,useEffect as i}from"react";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{CalendarDropdown as s}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{StandaloneDateInput as u}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateInputHelper as c}from"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{container as p}from"./date-input.styles.js";const m=m=>{var{minDate:h,maxDate:v,disabled:f,disabledDates:D,error:b,hideInputKeyboard:w,value:j,onChange:g,onFocus:y,onBlur:I,onYearMonthDisplayChange:x,withButton:Y=!0,readOnly:C,id:B,allowDisabledSelection:N,zIndex:O,dropdownRootNode:z,className:M}=m,F=e(m,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[R,S]=n(c.sanitizeInput(j)),[K,V]=n(c.sanitizeInput(j)),[_,k]=n(void 0),[E,H]=n(!1),[T,W]=n(!1),Z=o(null),q=o(null),A=o(null);i((()=>{const e=c.sanitizeInput(j);S(e),V(e)}),[j]);const G=e=>{!N&&c.isDateDisabled(e,{disabledDates:D,minDate:h,maxDate:v})||(V(e),Y||(X(e),S(e),e&&H(!1)))},J=e=>{var a;V(e),Y||(X(e),S(e),e&&(null===(a=q.current)||void 0===a||a.focusYearRef(),H(!1)),k(void 0))},L=()=>{C||f||(H(!0),T||(W(!0),y&&y()))},P=e=>{var a,r,t;const n=e.relatedTarget,o=A.current&&A.current.contains(n),i=Z.current&&Z.current.contains(n),l=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(T&&!E&&!i&&!l||E&&!i&&!o&&!l)&&(null===(t=q.current)||void 0===t||t.resetInput(),V(R),W(!1),H(!1),$())},Q=e=>{E&&k(e)},U=e=>{var a,r;switch(e){case"reset":V(R);break;case"confirmed":S(K),X(K)}t(K,"YYYY-MM-DD",!0).isValid()?null===(a=q.current)||void 0===a||a.focusYearRef():null===(r=Z.current)||void 0===r||r.focus(),H(!1)},X=e=>{g&&g(e)},$=()=>{I&&I()};return a(l,{enabled:!C&&!f,isOpen:E,renderElement:()=>a(d,Object.assign({role:"group",tabIndex:0,ref:Z,onBlur:P,onFocus:L,disabled:f,readOnly:C,focused:T,error:b,id:B,"data-testid":F["data-testid"],"aria-disabled":f,className:r(p,M)},F,{children:a(u,{ref:q,disabled:f,onChange:G,readOnly:C,focused:E,names:["start-day","start-month","start-year"],value:K,hoverValue:_,hideInputKeyboard:w})})),renderDropdown:({elementWidth:e})=>a(s,{variant:"single",ref:A,initialCalendarDate:K,withButton:Y,value:K,disabledDates:D,minDate:h,maxDate:v,allowDisabledSelection:N,onHover:Q,onSelect:J,onDismiss:U,onYearMonthDisplayChange:x,width:e,isFocusable:!C&&!f}),onClose:()=>{var e;null===(e=q.current)||void 0===e||e.resetInput(),V(R),H(!1),W(!1),$(),k(void 0)},onDismiss:()=>{var e,a;null===(e=q.current)||void 0===e||e.resetInput(),null===(a=Z.current)||void 0===a||a.focus(),V(R),H(!1)},customZIndex:O,offset:16,rootNode:z})};export{m as DateInput};
 //# sourceMappingURL=date-input.js.map

package/date-input/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport { Container } from \"./date-input.style\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <Container\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $focused={focused}\n                $error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </Container>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","Container","Object","assign","role","tabIndex","ref","$disabled","$focused","$error","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"0vBAgBO,MAAMA,EAAaC,IAAA,IAAAC,QACtBA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,MACbA,EAAKC,kBACLA,EAAiBC,MACjBA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,yBACNA,EAAwBC,WACxBA,GAAa,EAAIC,SACjBA,EAAQC,GACRA,EAAEC,uBACFA,EAAsBC,OACtBA,EAAMC,iBACNA,GAAgBjB,EACbkB,EAAUC,EAAAnB,EAlBS,iOAuBtB,MAAOoB,EAAaC,GAAkBC,EAClCC,EAAgBC,cAAcjB,KAE3BkB,EAAcC,GAAmBJ,EACpCC,EAAgBC,cAAcjB,KAE3BoB,EAAaC,GAAkBN,OAClCO,IAEGC,EAAcC,GAAmBT,GAAkB,IACnDU,EAASC,GAAcX,GAAkB,GAE1CY,EAAUC,EAAuB,MACjCC,EAAWD,EAA+B,MAC1CE,EAAcF,EAA4B,MAKhDG,GAAU,KACN,MAAMC,EAAWhB,EAAgBC,cAAcjB,GAC/Cc,EAAekB,GACfb,EAAgBa,EAAS,GAC1B,CAAChC,IAKJ,MAmBMiC,EAAgBC,KAEb1B,GACDQ,EAAgBmB,eAAeD,EAAK,CAChCrC,gBACAH,UACAC,cAMRwB,EAAgBe,GAEX7B,IACD+B,EAAuBF,GACvBpB,EAAeoB,GACXA,GACAV,GAAgB,IAExB,EAGEa,EAAgBH,UAClBf,EAAgBe,GAEX7B,IACD+B,EAAuBF,GACvBpB,EAAeoB,GACXA,IACgB,QAAhBzC,EAAAoC,EAASS,eAAO,IAAA7C,GAAAA,EAAE8C,eAClBf,GAAgB,IAIpBH,OAAeC,GACnB,EAGEkB,EAAc,KACZlC,GAAYV,IAEhB4B,GAAgB,GAEZC,IAEJC,GAAW,GAEPxB,GACAA,KACJ,EAGEuC,EAAcC,cAChB,MAAMC,EAASD,EAAEE,cAEXC,EACFf,EAAYQ,SAAWR,EAAYQ,QAAQQ,SAASH,GAClDI,EACFpB,EAAQW,SAAWX,EAAQW,QAAQQ,SAASH,GAC1CK,GACa,QAAfvD,EAAAkD,aAAM,EAANA,EAAQM,eAAO,IAAAxD,OAAA,EAAAA,EAAAyD,KAAAP,EAAG,mCACH,QAAfQ,EAAAR,aAAM,EAANA,EAAQM,eAAO,IAAAE,OAAA,EAAAA,EAAAD,KAAAP,EAAG,oCAIlBlB,IAAYF,IAAiBwB,IAAiBC,GAI9CzB,IACCwB,IACAF,IACAG,KAGe,QAAhBI,EAAAvB,EAASS,eAAO,IAAAc,GAAAA,EAAEC,aAClBlC,EAAgBN,GAChBa,GAAW,GACXF,GAAgB,GAChB8B,IACJ,EAGEC,EAAsBvD,IACxBqB,EAAerB,EAAM,EAGnBwD,EAAwBC,YAE1B,OAAQA,GACJ,IAAK,QACDtC,EAAgBN,GAChB,MACJ,IAAK,YACDC,EAAeI,GACfkB,EAAuBlB,GAIfwC,EAAMxC,EAAc,cAAc,GAAMyC,UAIpC,QAAhBlE,EAAAoC,EAASS,eAAO,IAAA7C,GAAAA,EAAE8C,eAEH,QAAfY,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QAErBpC,GAAgB,EAAM,EAMpBY,EAA0ByB,IACxB5D,GACAA,EAAS4D,EACb,EAGEP,EAAuB,KACrBnD,GACAA,GACJ,EA4DJ,OACI2D,EAACC,EAAmB,CAChBC,SAAU1D,IAAaV,EACvBqE,OAAQ1C,EACR2C,cA1DY,IAEZJ,EAACK,EAASC,OAAAC,OAAA,CACNC,KAAK,QACLC,SAAU,EACVC,IAAK7C,EACLxB,OAAQsC,EACRvC,QAASsC,EAAWiC,UACT7E,YACAU,EAAQoE,SACTjD,EAAOkD,OACT7E,EACRS,GAAIA,EAAE,cACOI,EAAW,+BACTf,GACXe,EAAU,CAAAiE,SAEdd,EAACe,EAAmB,CAChBL,IAAK3C,EACLjC,SAAUA,EACVK,SAAUgC,EACV3B,SAAUA,EACVmB,QAASF,EACTuD,MAAO,CAAC,YAAa,cAAe,cACpC9E,MAAOkB,EACP6D,WAAY3D,EACZrB,kBAAmBA,OAiC3BiF,eA3Be,EAAGC,kBAElBnB,EAACoB,EAAgB,CACbC,QAAQ,SACRX,IAAK1C,EACLsD,oBAAqBlE,EACrBb,WAAYA,EACZL,MAAOkB,EACPrB,cAAeA,EACfH,QAASA,EACTC,QAASA,EACTa,uBAAwBA,EACxB6E,QAAS9B,EACT+B,SAAUjD,EACVkD,UAAW/B,EACXpD,yBAA0BA,EAC1BoF,MAAOP,EACPQ,aAAcnF,IAAaV,IAW/B8F,QAhNY,WACA,QAAhBjG,EAAAoC,EAASS,eAAO,IAAA7C,GAAAA,EAAE4D,aAClBlC,EAAgBN,GAChBW,GAAgB,GAChBE,GAAW,GAEX4B,IAGAjC,OAAeC,EAAU,EAwMrBiE,UArMc,aACF,QAAhB9F,EAAAoC,EAASS,eAAO,IAAA7C,GAAAA,EAAE4D,aACH,QAAfF,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QACjBzC,EAAgBN,GAChBW,GAAgB,EAAM,EAkMlBmE,aAAclF,EACdmF,OAAQ,GACRC,SAAUnF,GACZ"}
+{"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n    CalendarAction,\n    InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n// @catalog\n/**\n * A single-date input field with an attached calendar dropdown.\n *\n * Use this to enter or pick a single date.\n * @keywords calendar, datepicker, field, form, input\n */\nexport const DateInput = ({\n    minDate,\n    maxDate,\n    disabled,\n    disabledDates,\n    error,\n    hideInputKeyboard,\n    value,\n    onChange,\n    onFocus,\n    onBlur,\n    onYearMonthDisplayChange,\n    withButton = true,\n    readOnly,\n    id,\n    allowDisabledSelection,\n    zIndex,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [initialDate, setInitialDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [selectedDate, setSelectedDate] = useState<string>(\n        DateInputHelper.sanitizeInput(value)\n    );\n    const [hoveredDate, setHoveredDate] = useState<string | undefined>(\n        undefined\n    );\n    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<StandaloneDateInputRef>(null);\n    const calendarRef = useRef<InternalCalendarRef>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const newValue = DateInputHelper.sanitizeInput(value);\n        setInitialDate(newValue);\n        setSelectedDate(newValue);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClose = () => {\n        inputRef.current?.resetInput();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n        setFocused(false);\n\n        performOnBlurHandler();\n\n        // clear hover value for mobile scrolling\n        setHoveredDate(undefined);\n    };\n\n    const handleDismiss = () => {\n        inputRef.current?.resetInput();\n        nodeRef.current?.focus();\n        setSelectedDate(initialDate);\n        setCalendarOpen(false);\n    };\n\n    const handleChange = (val: string) => {\n        if (\n            !allowDisabledSelection &&\n            DateInputHelper.isDateDisabled(val, {\n                disabledDates,\n                minDate,\n                maxDate,\n            })\n        ) {\n            return;\n        }\n\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                setCalendarOpen(false);\n            }\n        }\n    };\n\n    const handleSelect = (val: string) => {\n        setSelectedDate(val);\n\n        if (!withButton) {\n            performOnChangeHandler(val);\n            setInitialDate(val);\n            if (val) {\n                inputRef.current?.focusYearRef();\n                setCalendarOpen(false);\n            }\n\n            // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n            setHoveredDate(undefined);\n        }\n    };\n\n    const handleFocus = () => {\n        if (readOnly || disabled) return;\n\n        setCalendarOpen(true);\n\n        if (focused) return;\n\n        setFocused(true);\n\n        if (onFocus) {\n            onFocus();\n        }\n    };\n\n    const handleBlur = (e: React.FocusEvent) => {\n        const target = e.relatedTarget as HTMLElement;\n\n        const isInsideCalendar =\n            calendarRef.current && calendarRef.current.contains(target);\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n        // Condition when the calendar is open, and focus went outside both input and calendar\n        const shouldBlurWhenOpenOutside =\n            calendarOpen &&\n            !isInsideNode &&\n            !isInsideCalendar &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed || shouldBlurWhenOpenOutside) {\n            inputRef.current?.resetInput();\n            setSelectedDate(initialDate);\n            setFocused(false);\n            setCalendarOpen(false);\n            performOnBlurHandler();\n        }\n    };\n\n    const handleHoverDayCell = (value: string) => {\n        if (!calendarOpen) return;\n        setHoveredDate(value);\n    };\n\n    const handleCalendarAction = (buttonAction: CalendarAction) => {\n        // handle button in day calendar view\n        switch (buttonAction) {\n            case \"reset\":\n                setSelectedDate(initialDate);\n                break;\n            case \"confirmed\":\n                setInitialDate(selectedDate);\n                performOnChangeHandler(selectedDate);\n                break;\n        }\n\n        const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n        // Focus on year input if the selected date is valid to avoid restarting entire tab order\n        if (isValid) {\n            inputRef.current?.focusYearRef();\n        } else {\n            nodeRef.current?.focus();\n        }\n        setCalendarOpen(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (changeValue: string) => {\n        if (onChange) {\n            onChange(changeValue);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (onBlur) {\n            onBlur();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderInput = () => {\n        return (\n            <InputWrapper\n                role=\"group\"\n                tabIndex={0}\n                ref={nodeRef}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                disabled={disabled}\n                readOnly={readOnly}\n                focused={focused}\n                error={error}\n                id={id}\n                data-testid={otherProps[\"data-testid\"]}\n                aria-disabled={disabled}\n                className={clsx(styles.container, className)}\n                {...otherProps}\n            >\n                <StandaloneDateInput\n                    ref={inputRef}\n                    disabled={disabled}\n                    onChange={handleChange}\n                    readOnly={readOnly}\n                    focused={calendarOpen}\n                    names={[\"start-day\", \"start-month\", \"start-year\"]}\n                    value={selectedDate}\n                    hoverValue={hoveredDate}\n                    hideInputKeyboard={hideInputKeyboard}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                ref={calendarRef}\n                initialCalendarDate={selectedDate}\n                withButton={withButton}\n                value={selectedDate}\n                disabledDates={disabledDates}\n                minDate={minDate}\n                maxDate={maxDate}\n                allowDisabledSelection={allowDisabledSelection}\n                onHover={handleHoverDayCell}\n                onSelect={handleSelect}\n                onDismiss={handleCalendarAction}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                width={elementWidth}\n                isFocusable={!readOnly && !disabled}\n            />\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={calendarOpen}\n            renderElement={renderInput}\n            renderDropdown={renderCalendar}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            customZIndex={zIndex}\n            offset={16}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/date-input/date-input.styles.d.ts

@@ -0,0 +1 @@
+export declare const container: import("@linaria/core").LinariaClassName;

package/date-input/date-input.styles.js

@@ -0,0 +1,2 @@
+import"./date-input.styles_1r5kcc7.css";const t="c1udubt6";export{t as container};
+//# sourceMappingURL=date-input.styles.js.map

package/date-input/date-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.styles.js","sources":["../../src/date-input/date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const container = css`\n    height: 3rem;\n`;\n"],"names":["container"],"mappings":"kEAMO,MAAMA,EAAS"}

package/date-input/date-input.styles_1r5kcc7.css

@@ -0,0 +1 @@
+@layer fds{.c1udubt6{height:3rem;}}

package/date-input/types.d.ts

@@ -1,44 +1,60 @@
 import type { RefObject } from "react";
 import type { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
+/** Props for the `DateInput` component. */
 export interface DateInputProps extends CommonCalendarProps {
     className?: string | undefined;
     id?: string | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     "data-testid"?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * When `true`, suppresses the native on-screen keyboard on mobile devices
+     * while still allowing the calendar picker to open.
+     */
     hideInputKeyboard?: boolean | undefined;
     /**
-     * The value of the date input in "YYYY-MM-DD" or "YYYY-M-D" string format.
+     * The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.
+     *
+     * @remarks Passing `undefined` or an invalid string clears the selection.
      */
     value?: string | undefined;
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     /**
-     * Specifies if the "Done" and "Cancel" action buttons should be rendered.
-     * Is restricted to `true` on mobile viewports
+     * Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown.
+     * When `false`, a selection immediately commits and closes the calendar.
+     *
+     * @default true
      */
     withButton?: boolean | undefined;
-    /** The z-index of the calendar dropdown */
+    /** The z-index of the calendar dropdown. */
     zIndex?: number | undefined;
     /**
-     * Function that returns when a valid selection is made. Returns the start
-     * date in "YYYY-MM-DD" string format.
+     * Called when the user commits a date selection. Receives the selected date
+     * as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared.
+     *
+     * @remarks When `withButton` is `true`, this fires only after the user
+     * confirms via the "Done" button. When `withButton` is `false`, it fires
+     * immediately on each selection.
      */
     onChange?: ((value: string) => void) | undefined;
-    /**
-     * Called when the field is focused
-     */
+    /** Called when the input receives focus. */
     onFocus?: (() => void) | undefined;
-    /**
-     * Called when a defocus is made on the field
-     */
+    /** Called when focus leaves both the input and the calendar dropdown. */
     onBlur?: (() => void) | undefined;
-    /** Called when there is a change in the current visible month and year */
+    /** Called when the visible month or year in the calendar changes. */
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }

package/date-navigator/date-navigator.d.ts

@@ -1,2 +1,8 @@
 import type { DateNavigatorProps } from "./types";
-export declare const DateNavigator: ({ selectedDate, minDate, maxDate, loading, showDateAsShortForm, showCurrentDateAsToday, view, onLeftArrowClick, onRightArrowClick, onCalendarDateSelect, dropdownRootNode, ...otherProps }: DateNavigatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays a date with left/right navigation arrows for stepping through dates or weeks.
+ *
+ * Use when users need to browse content organised by day or week — such as schedules,
+ * calendars, or time-based feeds.
+ */
+export declare const DateNavigator: ({ selectedDate, minDate, maxDate, loading, showDateAsShortForm, showCurrentDateAsToday, view, onLeftArrowClick, onRightArrowClick, onCalendarDateSelect, dropdownRootNode, className, ...otherProps }: DateNavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/date-navigator/date-navigator.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as a}from"react/jsx-runtime";import r from"../external/dayjs/dayjs.min.js";import{useState as o}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as i}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{CalendarDropdown as n}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{ArrowLeft as d,ArrowRight as l}from"../shared/internal-calendar/calendar-manager.style.js";import{CalendarHelper as s}from"../util/calendar-helper.js";import{DateHelper as m}from"../util/date-helper.js";import"../util/string-helper.js";import{Container as p,HeaderArrowButton as D,StyledDateTextButton as c}from"./date-navigator.style.js";const w=w=>{var{selectedDate:y,minDate:h,maxDate:f,loading:g,showDateAsShortForm:j,showCurrentDateAsToday:u,view:k="day",onLeftArrowClick:v,onRightArrowClick:C,onCalendarDateSelect:b,dropdownRootNode:M}=w,Y=e(w,["selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode"]);const x=m.toDayjs(y),[S,A]=o(!1),T=e=>{null==b||b(e),A(!S)},$=()=>{A(!1),v(y)},N=()=>{A(!1),C(y)},O=()=>{if("week"===k){const e=(e=>{const t=m.toDayjs(e),a=t.startOf("week"),r=t.endOf("week");return{startDisplay:a.format("D MMM"),endDisplay:r.format("D MMM"),year:r.format("YYYY")}})(y);return`${e.startDisplay} - ${e.endDisplay}, ${e.year}`}return`${m.toDayjs(y).format(j?"D MMM YYYY":"D MMMM YYYY").toString()}, ${m.isSame(y,r())&&u?"Today":x.format(j?"ddd":"dddd")}`};return t(i,{enabled:!g,isOpen:S,renderElement:()=>{const e="week"===k?{left:"Previous week",right:"Next week"}:{left:"Previous day",right:"Next day"};return a(p,Object.assign({},Y,{children:[t(D,{"data-testid":"date-navigator-left-arrow-btn",disabled:g||!!h&&(s.isDisabledDay(x,void 0,h)||m.isSame(x,h)),"aria-label":e.left,onClick:$,styleType:"light",sizeType:"small",children:t(d,{})}),t(c,{onClick:()=>!!b&&!g&&A(!S),$enableDateClick:!!b&&!g,"data-testid":"date-navigator-date-text",styleType:"link",disabled:!b||g,children:O()}),t(D,{"data-testid":"date-navigator-right-arrow-btn",disabled:g||!!f&&(s.isDisabledDay(x,void 0,void 0,f)||m.isSame(x,f)),"aria-label":e.right,onClick:N,styleType:"light",sizeType:"small",children:t(l,{})})]}))},renderDropdown:({elementWidth:e})=>t(n,{variant:"single",initialCalendarDate:y,value:y,minDate:h,maxDate:f,onSelect:T,width:e}),onDismiss:()=>A(!1),onClose:()=>A(!1),offset:8,rootNode:M})};export{w as DateNavigator};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{ChevronLeftIcon as r}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import i from"clsx";import s from"../external/dayjs/dayjs.min.js";import{useState as n}from"react";import{Button as l}from"../button/button.js";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{BasicButton as m}from"../shared/input-wrapper/input-wrapper.js";import{CalendarDropdown as c}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{CalendarHelper as p}from"../util/calendar-helper.js";import{DateHelper as f}from"../util/date-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{headerArrowButton as D,headerArrowButtonIcon as h,dateTextButton as w,container as y}from"./date-navigator.styles.js";const g=g=>{var{selectedDate:u,minDate:j,maxDate:v,loading:b,showDateAsShortForm:k,showCurrentDateAsToday:C,view:M="day",onLeftArrowClick:N,onRightArrowClick:Y,onCalendarDateSelect:x,dropdownRootNode:S,className:A}=g,T=e(g,["selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className"]);const $=f.toDayjs(u),[O,R]=n(!1),z=e=>{null==x||x(e),R(!O)},F=()=>{R(!1),N(u)},L=()=>{R(!1),Y(u)},P=()=>{if("week"===M){const e=(e=>{const t=f.toDayjs(e),a=t.startOf("week"),r=t.endOf("week");return{startDisplay:a.format("D MMM"),endDisplay:r.format("D MMM"),year:r.format("YYYY")}})(u);return`${e.startDisplay} - ${e.endDisplay}, ${e.year}`}return`${f.toDayjs(u).format(k?"D MMM YYYY":"D MMMM YYYY").toString()}, ${f.isSame(u,s())&&C?"Today":$.format(k?"ddd":"dddd")}`};return t(d,{enabled:!b,isOpen:O,renderElement:()=>{const e="week"===M?{left:"Previous week",right:"Next week"}:{left:"Previous day",right:"Next day"};return a("div",Object.assign({},T,{className:i(y,A),children:[t(l,{className:D,"data-testid":"date-navigator-left-arrow-btn",disabled:b||!!j&&(p.isDisabledDay($,void 0,j)||f.isSame($,j)),"aria-label":e.left,onClick:F,styleType:"light",sizeType:"small",icon:t(r,{className:h})}),t(m,{onClick:()=>R(!O),className:w,"data-testid":"date-navigator-date-text",disabled:!x||b,children:P()}),t(l,{className:D,"data-testid":"date-navigator-right-arrow-btn",disabled:b||!!v&&(p.isDisabledDay($,void 0,void 0,v)||f.isSame($,v)),"aria-label":e.right,onClick:L,styleType:"light",sizeType:"small",icon:t(o,{className:h})})]}))},renderDropdown:({elementWidth:e})=>t(c,{variant:"single",initialCalendarDate:u,value:u,minDate:j,maxDate:v,onSelect:z,width:e}),onDismiss:()=>R(!1),onClose:()=>R(!1),offset:8,rootNode:S})};export{g as DateNavigator};
 //# sourceMappingURL=date-navigator.js.map

package/date-navigator/date-navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-navigator.js","sources":["../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport {\n    ArrowLeft,\n    ArrowRight,\n} from \"../shared/internal-calendar/calendar-manager.style\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport {\n    Container,\n    HeaderArrowButton,\n    StyledDateTextButton,\n} from \"./date-navigator.style\";\nimport type { DateNavigatorProps } from \"./types\";\n\nexport const DateNavigator = ({\n    selectedDate,\n    minDate,\n    maxDate,\n    loading,\n    showDateAsShortForm,\n    showCurrentDateAsToday,\n    view = \"day\",\n    onLeftArrowClick,\n    onRightArrowClick,\n    onCalendarDateSelect,\n    dropdownRootNode,\n    ...otherProps\n}: DateNavigatorProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const date = DateHelper.toDayjs(selectedDate);\n    const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isLeftArrowDisabled = () => {\n        if (!minDate) {\n            return false;\n        }\n        return (\n            CalendarHelper.isDisabledDay(date, undefined, minDate) ||\n            DateHelper.isSame(date, minDate)\n        );\n    };\n\n    const isRightArrowDisabled = () => {\n        if (!maxDate) {\n            return false;\n        }\n        return (\n            CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) ||\n            DateHelper.isSame(date, maxDate)\n        );\n    };\n\n    const handleSelect = (value: string) => {\n        onCalendarDateSelect?.(value);\n        setIsCalendarOpen(!isCalendarOpen);\n    };\n\n    const navigatePrevious = () => {\n        setIsCalendarOpen(false);\n        onLeftArrowClick(selectedDate);\n    };\n\n    const navigateNext = () => {\n        setIsCalendarOpen(false);\n        onRightArrowClick(selectedDate);\n    };\n\n    // Helper function to get week range\n    const getWeekRange = (selectedDate: string) => {\n        const currentDate = DateHelper.toDayjs(selectedDate);\n        const startOfWeek = currentDate.startOf(\"week\");\n        const endOfWeek = currentDate.endOf(\"week\");\n\n        return {\n            startDisplay: startOfWeek.format(\"D MMM\"),\n            endDisplay: endOfWeek.format(\"D MMM\"),\n            year: endOfWeek.format(\"YYYY\"),\n        };\n    };\n\n    // Calculate display text based on view\n    const getDisplayText = () => {\n        if (view === \"week\") {\n            const weekRange = getWeekRange(selectedDate);\n            return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n        }\n        const dateText = DateHelper.toDayjs(selectedDate)\n            .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n            .toString();\n        const isToday = DateHelper.isSame(selectedDate, dayjs());\n        const dayText =\n            isToday && showCurrentDateAsToday\n                ? \"Today\"\n                : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n        return `${dateText}, ${dayText}`;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                initialCalendarDate={selectedDate}\n                value={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                onSelect={handleSelect}\n                width={elementWidth}\n            />\n        );\n    };\n\n    const renderDateNavElement = () => {\n        const ariaLabel =\n            view === \"week\"\n                ? {\n                      left: \"Previous week\",\n                      right: \"Next week\",\n                  }\n                : {\n                      left: \"Previous day\",\n                      right: \"Next day\",\n                  };\n\n        return (\n            <Container {...otherProps}>\n                {\n                    <HeaderArrowButton\n                        data-testid=\"date-navigator-left-arrow-btn\"\n                        disabled={loading || isLeftArrowDisabled()}\n                        aria-label={ariaLabel.left}\n                        onClick={navigatePrevious}\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                    >\n                        <ArrowLeft />\n                    </HeaderArrowButton>\n                }\n                <StyledDateTextButton\n                    onClick={() =>\n                        !!onCalendarDateSelect &&\n                        !loading &&\n                        setIsCalendarOpen(!isCalendarOpen)\n                    }\n                    $enableDateClick={!!onCalendarDateSelect && !loading}\n                    data-testid=\"date-navigator-date-text\"\n                    styleType=\"link\"\n                    disabled={!onCalendarDateSelect || loading}\n                >\n                    {getDisplayText()}\n                </StyledDateTextButton>\n                {\n                    <HeaderArrowButton\n                        data-testid=\"date-navigator-right-arrow-btn\"\n                        disabled={loading || isRightArrowDisabled()}\n                        aria-label={ariaLabel.right}\n                        onClick={navigateNext}\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                    >\n                        <ArrowRight />\n                    </HeaderArrowButton>\n                }\n            </Container>\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!loading}\n            isOpen={isCalendarOpen}\n            renderElement={renderDateNavElement}\n            renderDropdown={renderCalendar}\n            onDismiss={() => setIsCalendarOpen(false)}\n            onClose={() => setIsCalendarOpen(false)}\n            offset={8}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateNavigator","_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Container","Object","assign","children","HeaderArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","ArrowLeft","StyledDateTextButton","$enableDateClick","ArrowRight","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"+yBAkBO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,uBACnBA,EAAsBC,KACtBA,EAAO,MAAKC,iBACZA,EAAgBC,kBAChBA,EAAiBC,qBACjBA,EAAoBC,iBACpBA,GAAgBX,EACbY,EAAUC,EAAAb,EAZa,CAAA,eAAA,UAAA,UAAA,UAAA,sBAAA,yBAAA,OAAA,mBAAA,oBAAA,uBAAA,qBAiB1B,MAAMc,EAAOC,EAAWC,QAAQf,IACzBgB,EAAgBC,GAAqBC,GAAkB,GAyBxDC,EAAgBC,IAClBX,SAAAA,EAAuBW,GACvBH,GAAmBD,EAAe,EAGhCK,EAAmB,KACrBJ,GAAkB,GAClBV,EAAiBP,EAAa,EAG5BsB,EAAe,KACjBL,GAAkB,GAClBT,EAAkBR,EAAa,EAiB7BuB,EAAiB,KACnB,GAAa,SAATjB,EAAiB,CACjB,MAAMkB,EAfO,CAACxB,IAClB,MAAMyB,EAAcX,EAAWC,QAAQf,GACjC0B,EAAcD,EAAYE,QAAQ,QAClCC,EAAYH,EAAYI,MAAM,QAEpC,MAAO,CACHC,aAAcJ,EAAYK,OAAO,SACjCC,WAAYJ,EAAUG,OAAO,SAC7BE,KAAML,EAAUG,OAAO,QAC1B,EAMqBG,CAAalC,GAC/B,MAAO,GAAGwB,EAAUM,kBAAkBN,EAAUQ,eAAeR,EAAUS,MAC7E,CASA,MAAO,GARUnB,EAAWC,QAAQf,GAC/B+B,OAAO3B,EAAsB,aAAe,eAC5C+B,eACWrB,EAAWsB,OAAOpC,EAAcqC,MAEjChC,EACL,QACAQ,EAAKkB,OAAO3B,EAAsB,MAAQ,SACpB,EA2EpC,OACIkC,EAACC,EAAmB,CAChBC,SAAUrC,EACVsC,OAAQzB,EACR0B,cA3DqB,KACzB,MAAMC,EACO,SAATrC,EACM,CACIsC,KAAM,gBACNC,MAAO,aAEX,CACID,KAAM,eACNC,MAAO,YAGrB,OACIC,EAACC,EAASC,OAAAC,OAAA,GAAKtC,EAAU,CAAAuC,SAAA,CAEjBZ,EAACa,EAAiB,CAAA,cACF,gCACZC,SAAUjD,KAlGrBF,IAIDoD,EAAeC,cAAczC,OAAM0C,EAAWtD,IAC9Ca,EAAWsB,OAAOvB,EAAMZ,iBA8FA0C,EAAUC,KACtBY,QAASnC,EACToC,UAAU,QACVC,SAAS,QAAOR,SAEhBZ,EAACqB,EAAS,CAAA,KAGlBrB,EAACsB,EAAoB,CACjBJ,QAAS,MACH/C,IACDN,GACDc,GAAmBD,GAAe6C,mBAElBpD,IAAyBN,EAAO,cACxC,2BACZsD,UAAU,OACVL,UAAW3C,GAAwBN,EAAO+C,SAEzC3B,MAGDe,EAACa,EAAiB,CAAA,cACF,iCACZC,SAAUjD,KAjHrBD,IAIDmD,EAAeC,cAAczC,OAAM0C,OAAWA,EAAWrD,IACzDY,EAAWsB,OAAOvB,EAAMX,IA4G+B,aAC/ByC,EAAUE,MACtBW,QAASlC,EACTmC,UAAU,QACVC,SAAS,QAAOR,SAEhBZ,EAACwB,EAAU,SAGX,EASZC,eA1Ee,EAAGC,kBAElB1B,EAAC2B,EAAgB,CACbC,QAAQ,SACRC,oBAAqBnE,EACrBoB,MAAOpB,EACPC,QAASA,EACTC,QAASA,EACTkE,SAAUjD,EACVkD,MAAOL,IAkEXM,UAAW,IAAMrD,GAAkB,GACnCsD,QAAS,IAAMtD,GAAkB,GACjCuD,OAAQ,EACRC,SAAU/D,GACZ"}
+{"version":3,"file":"date-navigator.js","sources":["../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport * as styles from \"./date-navigator.styles\";\nimport type { DateNavigatorProps } from \"./types\";\n\n// @catalog\n/**\n * Displays a date with left/right navigation arrows for stepping through dates or weeks.\n *\n * Use when users need to browse content organised by day or week — such as schedules,\n * calendars, or time-based feeds.\n */\nexport const DateNavigator = ({\n    selectedDate,\n    minDate,\n    maxDate,\n    loading,\n    showDateAsShortForm,\n    showCurrentDateAsToday,\n    view = \"day\",\n    onLeftArrowClick,\n    onRightArrowClick,\n    onCalendarDateSelect,\n    dropdownRootNode,\n    className,\n    ...otherProps\n}: DateNavigatorProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const date = DateHelper.toDayjs(selectedDate);\n    const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isLeftArrowDisabled = () => {\n        if (!minDate) {\n            return false;\n        }\n        return (\n            CalendarHelper.isDisabledDay(date, undefined, minDate) ||\n            DateHelper.isSame(date, minDate)\n        );\n    };\n\n    const isRightArrowDisabled = () => {\n        if (!maxDate) {\n            return false;\n        }\n        return (\n            CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) ||\n            DateHelper.isSame(date, maxDate)\n        );\n    };\n\n    const handleSelect = (value: string) => {\n        onCalendarDateSelect?.(value);\n        setIsCalendarOpen(!isCalendarOpen);\n    };\n\n    const navigatePrevious = () => {\n        setIsCalendarOpen(false);\n        onLeftArrowClick(selectedDate);\n    };\n\n    const navigateNext = () => {\n        setIsCalendarOpen(false);\n        onRightArrowClick(selectedDate);\n    };\n\n    // Helper function to get week range\n    const getWeekRange = (selectedDate: string) => {\n        const currentDate = DateHelper.toDayjs(selectedDate);\n        const startOfWeek = currentDate.startOf(\"week\");\n        const endOfWeek = currentDate.endOf(\"week\");\n\n        return {\n            startDisplay: startOfWeek.format(\"D MMM\"),\n            endDisplay: endOfWeek.format(\"D MMM\"),\n            year: endOfWeek.format(\"YYYY\"),\n        };\n    };\n\n    // Calculate display text based on view\n    const getDisplayText = () => {\n        if (view === \"week\") {\n            const weekRange = getWeekRange(selectedDate);\n            return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n        }\n        const dateText = DateHelper.toDayjs(selectedDate)\n            .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n            .toString();\n        const isToday = DateHelper.isSame(selectedDate, dayjs());\n        const dayText =\n            isToday && showCurrentDateAsToday\n                ? \"Today\"\n                : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n        return `${dateText}, ${dayText}`;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n        return (\n            <CalendarDropdown\n                variant=\"single\"\n                initialCalendarDate={selectedDate}\n                value={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                onSelect={handleSelect}\n                width={elementWidth}\n            />\n        );\n    };\n\n    const renderDateNavElement = () => {\n        const ariaLabel =\n            view === \"week\"\n                ? {\n                      left: \"Previous week\",\n                      right: \"Next week\",\n                  }\n                : {\n                      left: \"Previous day\",\n                      right: \"Next day\",\n                  };\n\n        return (\n            <div {...otherProps} className={clsx(styles.container, className)}>\n                <Button\n                    className={styles.headerArrowButton}\n                    data-testid=\"date-navigator-left-arrow-btn\"\n                    disabled={loading || isLeftArrowDisabled()}\n                    aria-label={ariaLabel.left}\n                    onClick={navigatePrevious}\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    icon={\n                        <ChevronLeftIcon\n                            className={styles.headerArrowButtonIcon}\n                        />\n                    }\n                />\n                <BasicButton\n                    onClick={() => setIsCalendarOpen(!isCalendarOpen)}\n                    className={styles.dateTextButton}\n                    data-testid=\"date-navigator-date-text\"\n                    disabled={!onCalendarDateSelect || loading}\n                >\n                    {getDisplayText()}\n                </BasicButton>\n                <Button\n                    className={styles.headerArrowButton}\n                    data-testid=\"date-navigator-right-arrow-btn\"\n                    disabled={loading || isRightArrowDisabled()}\n                    aria-label={ariaLabel.right}\n                    onClick={navigateNext}\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    icon={\n                        <ChevronRightIcon\n                            className={styles.headerArrowButtonIcon}\n                        />\n                    }\n                />\n            </div>\n        );\n    };\n\n    return (\n        <ElementWithDropdown\n            enabled={!loading}\n            isOpen={isCalendarOpen}\n            renderElement={renderDateNavElement}\n            renderDropdown={renderCalendar}\n            onDismiss={() => setIsCalendarOpen(false)}\n            onClose={() => setIsCalendarOpen(false)}\n            offset={8}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["DateNavigator","_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Object","assign","clsx","styles.container","children","Button","styles.headerArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","icon","ChevronLeftIcon","styles.headerArrowButtonIcon","BasicButton","styles.dateTextButton","ChevronRightIcon","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"+/BAsBO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,uBACnBA,EAAsBC,KACtBA,EAAO,MAAKC,iBACZA,EAAgBC,kBAChBA,EAAiBC,qBACjBA,EAAoBC,iBACpBA,EAAgBC,UAChBA,GAASZ,EACNa,EAAUC,EAAAd,EAba,mMAkB1B,MAAMe,EAAOC,EAAWC,QAAQhB,IACzBiB,EAAgBC,GAAqBC,GAAkB,GAyBxDC,EAAgBC,IAClBZ,SAAAA,EAAuBY,GACvBH,GAAmBD,EAAe,EAGhCK,EAAmB,KACrBJ,GAAkB,GAClBX,EAAiBP,EAAa,EAG5BuB,EAAe,KACjBL,GAAkB,GAClBV,EAAkBR,EAAa,EAiB7BwB,EAAiB,KACnB,GAAa,SAATlB,EAAiB,CACjB,MAAMmB,EAfO,CAACzB,IAClB,MAAM0B,EAAcX,EAAWC,QAAQhB,GACjC2B,EAAcD,EAAYE,QAAQ,QAClCC,EAAYH,EAAYI,MAAM,QAEpC,MAAO,CACHC,aAAcJ,EAAYK,OAAO,SACjCC,WAAYJ,EAAUG,OAAO,SAC7BE,KAAML,EAAUG,OAAO,QAC1B,EAMqBG,CAAanC,GAC/B,MAAO,GAAGyB,EAAUM,kBAAkBN,EAAUQ,eAAeR,EAAUS,MAC7E,CASA,MAAO,GARUnB,EAAWC,QAAQhB,GAC/BgC,OAAO5B,EAAsB,aAAe,eAC5CgC,eACWrB,EAAWsB,OAAOrC,EAAcsC,MAEjCjC,EACL,QACAS,EAAKkB,OAAO5B,EAAsB,MAAQ,SACpB,EA0EpC,OACImC,EAACC,EAAmB,CAChBC,SAAUtC,EACVuC,OAAQzB,EACR0B,cA1DqB,KACzB,MAAMC,EACO,SAATtC,EACM,CACIuC,KAAM,gBACNC,MAAO,aAEX,CACID,KAAM,eACNC,MAAO,YAGrB,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASrC,EAAU,CAAED,UAAWuC,EAAKC,EAAkBxC,GAAUyC,SAAA,CAC7Db,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,gCACZC,SAAUpD,KAlGjBF,IAIDuD,EAAeC,cAAc3C,OAAM4C,EAAWzD,IAC9Cc,EAAWsB,OAAOvB,EAAMb,IA6F0B,aAC9B2C,EAAUC,KACtBc,QAASrC,EACTsC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAACwB,EAAe,CACZpD,UAAWqD,MAIvBzB,EAAC0B,EAAW,CACRN,QAAS,IAAMzC,GAAmBD,GAClCN,UAAWuD,EAAqB,cACpB,2BACZX,UAAW9C,GAAwBN,EAAOiD,SAEzC5B,MAELe,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,iCACZC,SAAUpD,KA9GjBD,IAIDsD,EAAeC,cAAc3C,OAAM4C,OAAWA,EAAWxD,IACzDa,EAAWsB,OAAOvB,EAAMZ,IAyG2B,aAC/B0C,EAAUE,MACtBa,QAASpC,EACTqC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAAC4B,EAAgB,CACbxD,UAAWqD,SAIrB,EASNI,eAzEe,EAAGC,kBAElB9B,EAAC+B,EAAgB,CACbC,QAAQ,SACRC,oBAAqBxE,EACrBqB,MAAOrB,EACPC,QAASA,EACTC,QAASA,EACTuE,SAAUrD,EACVsD,MAAOL,IAiEXM,UAAW,IAAMzD,GAAkB,GACnC0D,QAAS,IAAM1D,GAAkB,GACjC2D,OAAQ,EACRC,SAAUpE,GACZ"}

package/date-navigator/date-navigator.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const headerArrowButton: import("@linaria/core").LinariaClassName;
+export declare const headerArrowButtonIcon: import("@linaria/core").LinariaClassName;
+export declare const dateTextButton: import("@linaria/core").LinariaClassName;

package/date-navigator/date-navigator.styles.js

@@ -0,0 +1,2 @@
+import"./date-navigator.styles_wokh56.css";const t="c1mdg68z",a="h1w7ufcd",o="h7gg62z",d="d1pl361j";export{t as container,d as dateTextButton,a as headerArrowButton,o as headerArrowButtonIcon};
+//# sourceMappingURL=date-navigator.styles.js.map

package/date-navigator/date-navigator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-navigator.styles.js","sources":["../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ${Colour[\"bg-strong\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n    margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n    color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    cursor: default;\n\n    &:not(:disabled) {\n        color: ${Colour[\"text-primary\"]};\n    }\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n        outline: none;\n        cursor: pointer;\n        text-decoration: underline;\n        text-underline-position: under;\n    }\n`;\n"],"names":["container","headerArrowButton","headerArrowButtonIcon","dateTextButton"],"mappings":"yEAIO,MAAMA,EAAS,WASTC,EAAiB,WAIjBC,EAAqB,UAIrBC,EAAc"}

package/date-navigator/date-navigator.styles_wokh56.css

@@ -0,0 +1,4 @@
+@layer fds{.c1mdg68z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);}
+.h1w7ufcd{margin:var(--fds-spacing-8);}
+.h7gg62z{color:var(--fds-colour-icon);}
+.d1pl361j{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);cursor:default;}.d1pl361j:not(:disabled){color:var(--fds-colour-text-primary);}.d1pl361j:not(:disabled):hover,.d1pl361j:not(:disabled):focus{outline:none;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;text-underline-position:under;}}

package/date-navigator/types.d.ts

@@ -1,27 +1,64 @@
 import type { RefObject } from "react";
+/** Props for the `DateNavigator` component. */
 export interface DateNavigatorProps {
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
-    /** The current visible date in YYYY-MM-DD format */
+    /** The currently displayed date in `YYYY-MM-DD` format. */
     selectedDate: string;
-    /** YYYY-MM-DD format */
+    /**
+     * The earliest selectable date in `YYYY-MM-DD` format. The left arrow is
+     * disabled when `selectedDate` reaches this boundary.
+     */
     minDate?: string | undefined;
-    /** YYYY-MM-DD format */
+    /**
+     * The latest selectable date in `YYYY-MM-DD` format. The right arrow is
+     * disabled when `selectedDate` reaches this boundary.
+     */
     maxDate?: string | undefined;
+    /**
+     * When `true`, both navigation arrows and the calendar trigger are disabled.
+     */
     loading?: boolean | undefined;
+    /**
+     * When `true`, formats the displayed date using abbreviated month and day names
+     * (e.g. `"3 Jul 2025, Wed"` instead of `"3 July 2025, Wednesday"`).
+     */
     showDateAsShortForm?: boolean | undefined;
+    /**
+     * When `true`, replaces the day-of-week label with `"Today"` if `selectedDate`
+     * matches the current calendar date.
+     */
     showCurrentDateAsToday?: boolean | undefined;
-    /** View type for navigation - 'day' for single day, 'week' for week range */
+    /**
+     * Controls whether navigation steps by a single day or by a full week. In
+     * `"week"` mode the label shows the Sunday–Saturday range that contains
+     * `selectedDate`.
+     *
+     * @default "day"
+     */
     view?: "day" | "week" | undefined;
+    /** Called with the current `selectedDate` value when the left arrow is clicked. */
     onLeftArrowClick: (currentDate: string) => void;
+    /** Called with the current `selectedDate` value when the right arrow is clicked. */
     onRightArrowClick: (currentDate: string) => void;
+    /**
+     * Called with the chosen date string when the user selects a date from the
+     * calendar dropdown. When omitted the date label is non-interactive and the
+     * calendar dropdown is not shown.
+     */
     onCalendarDateSelect?: ((currentDate: string) => void) | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
 }

package/date-range-input/date-range-input.d.ts

@@ -1,2 +1,7 @@
 import type { DateRangeInputProps } from "./types";
+/**
+ * A paired date input with an attached calendar dropdown that lets users
+ * select a contiguous date range.
+ * @keywords calendar, datepicker, end date, field, form, input, range, start date
+ */
 export declare const DateRangeInput: ({ minDate, maxDate, disabled, disabledDates, error, hideInputKeyboard, value, valueEnd, onChange, onFocus, onBlur, onYearMonthDisplayChange, withButton, variant, numberOfDays, readOnly, id, allowDisabledSelection, zIndex, dropdownRootNode: rootNode, ...otherProps }: DateRangeInputProps) => import("react/jsx-runtime").JSX.Element;

package/date-range-input/date-range-input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import n from"../external/dayjs/dayjs.min.js";import{useState as a,useRef as s,useEffect as d}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as i}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{CalendarDropdown as l}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{RangeInputInnerContainer as o}from"../shared/range-input-inner-container/range-input-inner-container.js";import{StandaloneDateInput as c}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateHelper as u}from"../util/date-helper.js";import{DateInputHelper as f}from"../util/date-input-helper.js";import"../util/string-helper.js";import{useContainerQuery as p}from"../util/use-container-query.js";import{useStateActions as v}from"../util/use-state-actions.js";import{Container as m,InputContainer as h,MOBILE_WRAP_WIDTH as g}from"./date-range-input.style.js";const D={initialStart:"",initialEnd:"",selectedStart:"",selectedEnd:"",currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1},b=b=>{var{minDate:O,maxDate:Y,disabled:j,disabledDates:y,error:E,hideInputKeyboard:S,value:w,valueEnd:M,onChange:F,onFocus:x,onBlur:k,onYearMonthDisplayChange:R,withButton:C=!0,variant:I="range",numberOfDays:B=7,readOnly:P,id:$,allowDisabledSelection:K,zIndex:z,dropdownRootNode:N}=b,V=e(b,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[W,A]=a(),[L,T]=a(void 0),_="week"===I,q="fixed-range"===I,[H,Z]=a(!1),[G,J]=a(!1),[{selectedStart:Q,selectedEnd:U,currentFocus:X,calendarOpen:ee,isStartDirty:te,isEndDirty:re,focused:ne},ae]=v({name:"date-range-input",initialState:D,reducers:{blur:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1}),dismiss:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),changeStart:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t,isStartDirty:!0}),changeEnd:(e,t)=>Object.assign(Object.assign({},e),{selectedEnd:t,isEndDirty:!0}),reselectStart:e=>Object.assign(Object.assign({},e),{selectedStart:"",currentFocus:"start"}),reselectEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:"",currentFocus:"end"}),focus:(e,t)=>Object.assign(Object.assign({},e),{currentFocus:_?"none":q?"start":t,calendarOpen:!P,focused:!0}),cancel:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1}),done:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t.start,selectedEnd:t.end,initialStart:t.start,initialEnd:t.end,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),resetStart:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart}),resetEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:e.initialEnd}),resetRange:(e,t)=>Object.assign(Object.assign({},e),{initialStart:t.start,selectedStart:t.start,initialEnd:t.end,selectedEnd:t.end})}}),se=s(!1),de=s(null),ie=s(null),le=s(null),oe=s(null),ce=p({maxWidth:g,targetRef:de});d((()=>{ae.resetRange({start:f.sanitizeInput(w),end:f.sanitizeInput(M)})}),[w,M]),d((()=>{"start"===X?A(Q):"end"===X&&U&&A(U)}),[X]);const ue=e=>{var t,r,n;"Enter"!==e.code||C||(Q&&U?(ae.done({start:Q,end:U}),null==F||F(Q,U)):(ae.dismiss(),null===(t=de.current)||void 0===t||t.focus(),null===(r=le.current)||void 0===r||r.resetPlaceholder(),null===(n=oe.current)||void 0===n||n.resetPlaceholder()))},fe=e=>{var t;if(we(e))return void(se.current=!0);if(ae.changeStart(e),e&&(null===(t=ie.current)||void 0===t||t.setCalendarDate(e)),se.current=!1,!e)return void(C||U||!re||(ae.resetRange({start:"",end:""}),null==F||F("","")));if(!U)return void ae.focus("end");if(n(e).isAfter(U,"day"))ae.reselectEnd();else{if(re)return C?void 0:(ae.done({start:e,end:U}),void(null==F||F(e,U)));ae.focus("end")}},pe=e=>{var t,r,a;if(we(e))return void(se.current=!0);if(n(e).isBefore(Q,"day"))return ae.changeStart(e),null===(t=ie.current)||void 0===t||t.setCalendarDate(e),void ae.reselectEnd();if(ae.changeEnd(e),e&&(null===(r=ie.current)||void 0===r||r.setCalendarDate(e)),e){if(Q)return C?void 0:(null===(a=oe.current)||void 0===a||a.focusYearRef(),ae.done({start:Q,end:e}),void(null==F||F(Q,e)));ae.focus("start")}else C||Q||!te||(ae.resetRange({start:"",end:""}),null==F||F("",""))},ve=e=>{var t,r;if(we(e))return void(se.current=!0);if(ae.changeStart(e),null===(t=ie.current)||void 0===t||t.setCalendarDate(e),se.current=!1,!e)return void(C?ae.changeEnd(""):(ae.resetRange({start:"",end:""}),null==F||F("","")));const a=n(e).format("YYYY-MM-DD"),s=n(a).add(B-1,"day").format("YYYY-MM-DD");return ae.changeStart(a),ae.changeEnd(s),se.current=!1,C?void 0:(ae.done({start:a,end:s}),null===(r=le.current)||void 0===r||r.focusYearRef(),void(null==F||F(a,s)))},me=()=>{(_||q)&&J(!0),_&&Z(!0),P||j||ne||(ae.focus("start"),null==x||x())},he=e=>{var t,r,n,a;const s=e.relatedTarget,d=ie.current&&ie.current.contains(s),i=de.current&&de.current.contains(s),l=(null===(t=null==s?void 0:s.matches)||void 0===t?void 0:t.call(s,"[data-floating-ui-focusable]"))||(null===(r=null==s?void 0:s.matches)||void 0===r?void 0:r.call(s,"[data-floating-ui-focus-guard]"));(ne&&!ee&&!i&&!l||ee&&!i&&!d&&!l)&&(ae.blur(),J(!1),Z(!1),null===(n=le.current)||void 0===n||n.resetPlaceholder(),null===(a=oe.current)||void 0===a||a.resetPlaceholder(),Se())},ge=e=>t=>{t.stopPropagation(),P||(ae.focus(e),De(),be(),ne||null==x||x())},De=()=>{if(_){const e=u.toDayjs(Q).startOf("week").format("YYYY-MM-DD");Z(!0),J(!0),A(e)}},be=()=>{q&&(J(!0),A(Q))},Oe=e=>{var t;e&&!se.current||(ae.resetStart(),null===(t=le.current)||void 0===t||t.resetInput())},Ye=e=>{var t;e&&!se.current||(ae.resetEnd(),null===(t=oe.current)||void 0===t||t.resetInput())},je=e=>{switch(I){case"week":(e=>{var t;const r=n(e).startOf("week").format("YYYY-MM-DD"),a=n(e).endOf("week").format("YYYY-MM-DD");if(ae.changeStart(r),ae.changeEnd(a),se.current=!1,!C)null===(t=oe.current)||void 0===t||t.focusYearRef(),ae.done({start:r,end:a}),null==F||F(r,a)})(e);break;case"fixed-range":ve(e);break;default:"start"===X?fe(e):"end"===X&&pe(e)}},ye=e=>{var t,r,n;switch(null===(t=de.current)||void 0===t||t.focus(),e){case"reset":ae.cancel();break;case"confirmed":if(ae.done({start:Q,end:U}),null==F||F(Q,U),_)break;Me(Q,U)&&("range"===I?null===(r=oe.current)||void 0===r||r.focusYearRef():null===(n=le.current)||void 0===n||n.focusYearRef())}},Ee=e=>{T(e)},Se=()=>{k&&k()},we=e=>!K&&e&&f.isDateDisabled(e,{disabledDates:y,minDate:O,maxDate:Y}),Me=(e,t)=>!(!e||!t)&&n(e).isBefore(t,"day"),Fe=e=>{let t={start:void 0,end:void 0};switch(I){case"range":t={start:"start"===X?L:void 0,end:"end"===X?L:void 0};break;case"week":if(!L)return;t={start:n(L).startOf("week").format("YYYY-MM-DD"),end:n(L).endOf("week").format("YYYY-MM-DD")};break;case"fixed-range":if(!L)return;t={start:n(L).format("YYYY-MM-DD"),end:n(L).add(B-1,"day").format("YYYY-MM-DD")}}return t[e]};return t(i,{enabled:!P&&!j,isOpen:ee,onClose:()=>{var e,t;ae.blur(),Z(!1),J(!1),null===(e=le.current)||void 0===e||e.resetPlaceholder(),null===(t=oe.current)||void 0===t||t.resetPlaceholder(),Se()},onDismiss:()=>{var e,t,r;ae.dismiss(),null===(e=de.current)||void 0===e||e.focus(),null===(t=le.current)||void 0===t||t.resetPlaceholder(),null===(r=oe.current)||void 0===r||r.resetPlaceholder()},renderElement:()=>t(m,Object.assign({role:"group",ref:de,tabIndex:0,onFocus:me,onBlur:he,$focused:ne,$disabled:j,$readOnly:P,$error:E,$wrap:ce,id:$,"data-testid":V["data-testid"],"aria-disabled":j,onKeyDown:ue},V,{children:r(o,{currentActive:X,wrap:ce,error:E,children:[t(h,{$wrap:ce,children:t(c,{ref:le,placeholder:"From",names:["start-day","start-month","start-year"],inputLabels:["Start Date","Start Month","Start Year"],value:Q,disabled:j,readOnly:H||P,focused:"start"===X,hoverValue:Fe("start"),onChange:q?ve:fe,onFocus:ge("start"),onBlur:Oe,hideInputKeyboard:S})}),t(h,{$wrap:ce,children:t(c,{ref:oe,placeholder:"To",names:["end-day","end-month","end-year"],inputLabels:["End Date","End Month","End Year"],value:U,disabled:j,readOnly:G||P,focused:"end"===X,hoverValue:Fe("end"),onChange:pe,onFocus:ge("end"),onBlur:Ye,hideInputKeyboard:S})})]})})),renderDropdown:({elementWidth:e})=>t(l,{ref:ie,variant:I,initialCalendarDate:W,withButton:C,value:Q,endValue:U,selectWithinRange:te||re,currentFocus:X,disabledDates:y,minDate:O,maxDate:Y,allowDisabledSelection:K,onSelect:je,onDismiss:ye,onHover:Ee,onYearMonthDisplayChange:R,numberOfDays:B,width:e,isFocusable:!P&&!j}),customZIndex:z,offset:16,rootNode:N})};export{b as DateRangeInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import n from"clsx";import a from"../external/dayjs/dayjs.min.js";import{useState as s,useRef as i,useEffect as d}from"react";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as o}from"../shared/input-wrapper/input-wrapper.js";import{CalendarDropdown as c}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{RangeInputInnerContainer as u}from"../shared/range-input-inner-container/range-input-inner-container.js";import{StandaloneDateInput as f}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateHelper as m}from"../util/date-helper.js";import{DateInputHelper as v}from"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useContainerQuery as p}from"../util/use-container-query.js";import"@react-aria/live-announcer";import{useStateActions as g}from"../util/use-state-actions.js";import{inputContainer as h,inputContainerWrap as D,containerWrap as b,containerWrapReadOnly as O,MOBILE_WRAP_WIDTH as Y}from"./date-range-input.styles.js";const j={initialStart:"",initialEnd:"",selectedStart:"",selectedEnd:"",currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1},y=y=>{var{minDate:E,maxDate:S,disabled:w,disabledDates:M,error:F,hideInputKeyboard:x,value:k,valueEnd:R,onChange:C,onFocus:I,onBlur:B,onYearMonthDisplayChange:P,withButton:N=!0,variant:K="range",numberOfDays:z=7,readOnly:V,id:W,allowDisabledSelection:A,zIndex:L,dropdownRootNode:T}=y,_=e(y,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[q,H]=s(),[Z,G]=s(void 0),J="week"===K,Q="fixed-range"===K,[U,X]=s(!1),[$,ee]=s(!1),[{selectedStart:te,selectedEnd:re,currentFocus:ne,calendarOpen:ae,isStartDirty:se,isEndDirty:ie,focused:de},le]=g({name:"date-range-input",initialState:j,reducers:{blur:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1}),dismiss:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),changeStart:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t,isStartDirty:!0}),changeEnd:(e,t)=>Object.assign(Object.assign({},e),{selectedEnd:t,isEndDirty:!0}),reselectStart:e=>Object.assign(Object.assign({},e),{selectedStart:"",currentFocus:"start"}),reselectEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:"",currentFocus:"end"}),focus:(e,t)=>Object.assign(Object.assign({},e),{currentFocus:J?"none":Q?"start":t,calendarOpen:!V,focused:!0}),cancel:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1}),done:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t.start,selectedEnd:t.end,initialStart:t.start,initialEnd:t.end,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),resetStart:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart}),resetEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:e.initialEnd}),resetRange:(e,t)=>Object.assign(Object.assign({},e),{initialStart:t.start,selectedStart:t.start,initialEnd:t.end,selectedEnd:t.end})}}),oe=i(!1),ce=i(null),ue=i(null),fe=i(null),me=i(null),ve=p({maxWidth:Y,targetRef:ce});d((()=>{le.resetRange({start:v.sanitizeInput(k),end:v.sanitizeInput(R)})}),[k,R]),d((()=>{"start"===ne?H(te):"end"===ne&&re&&H(re)}),[ne]);const pe=e=>{var t,r,n;"Enter"!==e.code||N||(te&&re?(le.done({start:te,end:re}),null==C||C(te,re)):(le.dismiss(),null===(t=ce.current)||void 0===t||t.focus(),null===(r=fe.current)||void 0===r||r.resetPlaceholder(),null===(n=me.current)||void 0===n||n.resetPlaceholder()))},ge=e=>{var t;if(ke(e))return void(oe.current=!0);if(le.changeStart(e),e&&(null===(t=ue.current)||void 0===t||t.setCalendarDate(e)),oe.current=!1,!e)return void(N||re||!ie||(le.resetRange({start:"",end:""}),null==C||C("","")));if(!re)return void le.focus("end");if(a(e).isAfter(re,"day"))le.reselectEnd();else{if(ie)return N?void 0:(le.done({start:e,end:re}),void(null==C||C(e,re)));le.focus("end")}},he=e=>{var t,r,n;if(ke(e))return void(oe.current=!0);if(a(e).isBefore(te,"day"))return le.changeStart(e),null===(t=ue.current)||void 0===t||t.setCalendarDate(e),void le.reselectEnd();if(le.changeEnd(e),e&&(null===(r=ue.current)||void 0===r||r.setCalendarDate(e)),e){if(te)return N?void 0:(null===(n=me.current)||void 0===n||n.focusYearRef(),le.done({start:te,end:e}),void(null==C||C(te,e)));le.focus("start")}else N||te||!se||(le.resetRange({start:"",end:""}),null==C||C("",""))},De=e=>{var t,r;if(ke(e))return void(oe.current=!0);if(le.changeStart(e),null===(t=ue.current)||void 0===t||t.setCalendarDate(e),oe.current=!1,!e)return void(N?le.changeEnd(""):(le.resetRange({start:"",end:""}),null==C||C("","")));const n=a(e).format("YYYY-MM-DD"),s=a(n).add(z-1,"day").format("YYYY-MM-DD");return le.changeStart(n),le.changeEnd(s),oe.current=!1,N?void 0:(le.done({start:n,end:s}),null===(r=fe.current)||void 0===r||r.focusYearRef(),void(null==C||C(n,s)))},be=()=>{(J||Q)&&ee(!0),J&&X(!0),V||w||de||(le.focus("start"),null==I||I())},Oe=e=>{var t,r,n,a;const s=e.relatedTarget,i=ue.current&&ue.current.contains(s),d=ce.current&&ce.current.contains(s),l=(null===(t=null==s?void 0:s.matches)||void 0===t?void 0:t.call(s,"[data-floating-ui-focusable]"))||(null===(r=null==s?void 0:s.matches)||void 0===r?void 0:r.call(s,"[data-floating-ui-focus-guard]"));(de&&!ae&&!d&&!l||ae&&!d&&!i&&!l)&&(le.blur(),ee(!1),X(!1),null===(n=fe.current)||void 0===n||n.resetPlaceholder(),null===(a=me.current)||void 0===a||a.resetPlaceholder(),xe())},Ye=e=>t=>{t.stopPropagation(),V||(le.focus(e),je(),ye(),de||null==I||I())},je=()=>{if(J){const e=m.toDayjs(te).startOf("week").format("YYYY-MM-DD");X(!0),ee(!0),H(e)}},ye=()=>{Q&&(ee(!0),H(te))},Ee=e=>{var t;e&&!oe.current||(le.resetStart(),null===(t=fe.current)||void 0===t||t.resetInput())},Se=e=>{var t;e&&!oe.current||(le.resetEnd(),null===(t=me.current)||void 0===t||t.resetInput())},we=e=>{switch(K){case"week":(e=>{var t;const r=a(e).startOf("week").format("YYYY-MM-DD"),n=a(e).endOf("week").format("YYYY-MM-DD");if(le.changeStart(r),le.changeEnd(n),oe.current=!1,!N)null===(t=me.current)||void 0===t||t.focusYearRef(),le.done({start:r,end:n}),null==C||C(r,n)})(e);break;case"fixed-range":De(e);break;default:"start"===ne?ge(e):"end"===ne&&he(e)}},Me=e=>{var t,r,n;switch(null===(t=ce.current)||void 0===t||t.focus(),e){case"reset":le.cancel();break;case"confirmed":if(le.done({start:te,end:re}),null==C||C(te,re),J)break;Re(te,re)&&("range"===K?null===(r=me.current)||void 0===r||r.focusYearRef():null===(n=fe.current)||void 0===n||n.focusYearRef())}},Fe=e=>{G(e)},xe=()=>{B&&B()},ke=e=>!A&&e&&v.isDateDisabled(e,{disabledDates:M,minDate:E,maxDate:S}),Re=(e,t)=>!(!e||!t)&&a(e).isBefore(t,"day"),Ce=e=>{let t={start:void 0,end:void 0};switch(K){case"range":t={start:"start"===ne?Z:void 0,end:"end"===ne?Z:void 0};break;case"week":if(!Z)return;t={start:a(Z).startOf("week").format("YYYY-MM-DD"),end:a(Z).endOf("week").format("YYYY-MM-DD")};break;case"fixed-range":if(!Z)return;t={start:a(Z).format("YYYY-MM-DD"),end:a(Z).add(z-1,"day").format("YYYY-MM-DD")}}return t[e]};return t(l,{enabled:!V&&!w,isOpen:ae,onClose:()=>{var e,t;le.blur(),X(!1),ee(!1),null===(e=fe.current)||void 0===e||e.resetPlaceholder(),null===(t=me.current)||void 0===t||t.resetPlaceholder(),xe()},onDismiss:()=>{var e,t,r;le.dismiss(),null===(e=ce.current)||void 0===e||e.focus(),null===(t=fe.current)||void 0===t||t.resetPlaceholder(),null===(r=me.current)||void 0===r||r.resetPlaceholder()},renderElement:()=>t(o,Object.assign({role:"group",ref:ce,tabIndex:0,onFocus:be,onBlur:Oe,focused:de,disabled:w,readOnly:V,error:F,id:W,"data-testid":_["data-testid"],"aria-disabled":w,onKeyDown:pe},_,{className:n(ve&&!V&&b,ve&&V&&O,_.className),children:r(u,{currentActive:ne,wrap:ve,error:F,children:[t("div",{className:n(h,ve&&D),children:t(f,{ref:fe,placeholder:"From",names:["start-day","start-month","start-year"],inputLabels:["Start Date","Start Month","Start Year"],value:te,disabled:w,readOnly:U||V,focused:"start"===ne,hoverValue:Ce("start"),onChange:Q?De:ge,onFocus:Ye("start"),onBlur:Ee,hideInputKeyboard:x})}),t("div",{className:n(h,ve&&D),children:t(f,{ref:me,placeholder:"To",names:["end-day","end-month","end-year"],inputLabels:["End Date","End Month","End Year"],value:re,disabled:w,readOnly:$||V,focused:"end"===ne,hoverValue:Ce("end"),onChange:he,onFocus:Ye("end"),onBlur:Se,hideInputKeyboard:x})})]})})),renderDropdown:({elementWidth:e})=>t(c,{ref:ue,variant:K,initialCalendarDate:q,withButton:N,value:te,endValue:re,selectWithinRange:se||ie,currentFocus:ne,disabledDates:M,minDate:E,maxDate:S,allowDisabledSelection:A,onSelect:we,onDismiss:Me,onHover:Fe,onYearMonthDisplayChange:P,numberOfDays:z,width:e,isFocusable:!V&&!w}),customZIndex:L,offset:16,rootNode:T})};export{y as DateRangeInput};
 //# sourceMappingURL=date-range-input.js.map