@webiny/admin-ui 6.5.0-beta.9 → 6.5.1-beta.0

package/AutoComplete/primitives/AutoCompletePrimitive.d.ts

@@ -74,6 +74,12 @@ interface AutoCompletePrimitiveProps {
      * Refer to `InputPrimitiveProps["size"]` for possible values.
      */
     size?: InputPrimitiveProps["size"];
+    /**
+     * Filter the options by the typed text on the client. Defaults to `true`.
+     * Set to `false` when `onValueSearch` already returns the matching options,
+     * so options matched on data other than their label are not dropped.
+     */
+    shouldFilter?: boolean;
     /**
      * Icon to be displayed at the start of the input field.
      */

package/AutoComplete/primitives/AutoCompletePrimitive.js

@@ -31,6 +31,7 @@ const DecoratableAutoCompletePrimitive = (props)=>{
         onOpenChange: ()=>setListOpenState(true)
     }, /*#__PURE__*/ react.createElement(Command, {
         label: String(props.label),
+        shouldFilter: props.shouldFilter,
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
         asChild: true

package/AutoComplete/primitives/AutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { useAutoComplete } from \"./useAutoComplete.js\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components/index.js\";\nimport type { AutoCompleteOption } from \"../domains/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ minWidth: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"names":["DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","useAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleOnBlur","PopoverPrimitive","Command","String","AutoCompleteInputIcons","e","AutoCompleteList","AutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAkGA,MAAMA,mCAAmC,CAACC;IACtC,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,mBAAmB,EACnBC,kBAAkB,EACrB,GAAGC,gBAAgBP;IAEpB,MAAMQ,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIV,MAAM,QAAQ,EACd;QAG4B,aAA5BU,MAAM,GAAG,CAAC,WAAW,KACrBR,iBAAiB,SAEjBA,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;KAAiB;IAGtC,MAAMS,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGT,kBAAkBS;QAClBV,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMW,eAAeJ,MAAAA,WAAiB,CAAC;QACnCP,iBAAiB;QACjBI;IACJ,GAAG;QAACJ;KAAiB;IAErB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAMb,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACa,SAAOA;QAAC,OAAOC,OAAOhB,MAAM,KAAK;QAAG,WAAWQ;qBAC5C,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACC,QAAQ,KAAK;QACV,UAAUf,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,eAAeG;QACf,aAAaH,GAAG,OAAO,CAAC,WAAW;QACnC,MAAMD,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,UAAUA,MAAM,QAAQ;QACxB,SAASA,MAAM,OAAO;QACtB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACiB,wBAAsBA;YACnB,WAAWjB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBAAoBC,GAAG,OAAO,CAAC,kBAAkB;YACjD,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcK;YACd,cAAc,IAAMH,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;QAGnE,QAAQY;QACR,SAAS,IAAMX,iBAAiB;wBAI5C,oBAACY,iBAAiB,OAAO;QACrB,OAAO;YAAE,UAAU;QAAqC;QACxD,iBAAiBI,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,kBAAgBA;QACb,SAASlB,GAAG,aAAa,CAAC,OAAO;QACjC,gBAAgBU;QAChB,OAAOV,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,cAAcA,GAAG,aAAa,CAAC,YAAY;QAC3C,gBAAgBD,MAAM,cAAc;;AAM5D;AAEA,MAAMoB,wBAAwBC,gBAC1B,yBACAtB"}
+{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { useAutoComplete } from \"./useAutoComplete.js\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components/index.js\";\nimport type { AutoCompleteOption } from \"../domains/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Filter the options by the typed text on the client. Defaults to `true`.\n     * Set to `false` when `onValueSearch` already returns the matching options,\n     * so options matched on data other than their label are not dropped.\n     */\n    shouldFilter?: boolean;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command\n                label={String(props.label)}\n                shouldFilter={props.shouldFilter}\n                onKeyDown={handleKeyDown}\n            >\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ minWidth: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"names":["DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","useAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleOnBlur","PopoverPrimitive","Command","String","AutoCompleteInputIcons","e","AutoCompleteList","AutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAwGA,MAAMA,mCAAmC,CAACC;IACtC,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,mBAAmB,EACnBC,kBAAkB,EACrB,GAAGC,gBAAgBP;IAEpB,MAAMQ,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIV,MAAM,QAAQ,EACd;QAG4B,aAA5BU,MAAM,GAAG,CAAC,WAAW,KACrBR,iBAAiB,SAEjBA,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;KAAiB;IAGtC,MAAMS,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGT,kBAAkBS;QAClBV,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMW,eAAeJ,MAAAA,WAAiB,CAAC;QACnCP,iBAAiB;QACjBI;IACJ,GAAG;QAACJ;KAAiB;IAErB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAMb,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACa,SAAOA;QACJ,OAAOC,OAAOhB,MAAM,KAAK;QACzB,cAAcA,MAAM,YAAY;QAChC,WAAWQ;qBAEX,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACC,QAAQ,KAAK;QACV,UAAUf,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,eAAeG;QACf,aAAaH,GAAG,OAAO,CAAC,WAAW;QACnC,MAAMD,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,UAAUA,MAAM,QAAQ;QACxB,SAASA,MAAM,OAAO;QACtB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACiB,wBAAsBA;YACnB,WAAWjB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBAAoBC,GAAG,OAAO,CAAC,kBAAkB;YACjD,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcK;YACd,cAAc,IAAMH,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;QAGnE,QAAQY;QACR,SAAS,IAAMX,iBAAiB;wBAI5C,oBAACY,iBAAiB,OAAO;QACrB,OAAO;YAAE,UAAU;QAAqC;QACxD,iBAAiBI,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,kBAAgBA;QACb,SAASlB,GAAG,aAAa,CAAC,OAAO;QACjC,gBAAgBU;QAChB,OAAOV,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,cAAcA,GAAG,aAAa,CAAC,YAAY;QAC3C,gBAAgBD,MAAM,cAAc;;AAM5D;AAEA,MAAMoB,wBAAwBC,gBAC1B,yBACAtB"}

package/DatePicker/DatePicker.stories.d.ts

@@ -12,6 +12,16 @@ export declare const WithErrors: Story;
 export declare const Disabled: Story;
 export declare const FullExample: Story;
 export declare const WithPresets: Story;
+/**
+ * Picks a date one step at a time: a day, then a month, then a year (newest first). Built for
+ * dates far in the past, like a date of birth. The value is a `YYYY-MM-DD` string.
+ */
+export declare const TypeBirthday: Story;
+/**
+ * With `minDate` and `maxDate`, years run from the latest allowed one down to the earliest,
+ * and days and months that can't make an allowed date are dimmed. Here: 18 to 100 years old.
+ */
+export declare const TypeBirthdayWithLimits: Story;
 export declare const TypeTime: Story;
 export declare const TypeDateTimeLocal: Story;
 export declare const TypeDateTimeTz: Story;

package/DatePicker/DatePicker.stories.js

@@ -12,6 +12,7 @@ const meta = {
             control: "select",
             options: [
                 "date",
+                "birthday",
                 "time",
                 "dateTimeLocal",
                 "dateTimeTz",
@@ -144,6 +145,48 @@ const WithPresets = {
         description: "Choose a date or use a preset."
     }
 };
+const TypeBirthday = {
+    render: (args)=>{
+        const [value, setValue] = useState("1990-02-09");
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-md max-w-[480px]"
+        }, /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "birthday",
+            value: value,
+            onChange: setValue
+        }), /*#__PURE__*/ react.createElement("span", {
+            className: "text-sm text-neutral-muted"
+        }, "Value: ", value ?? "(empty)"));
+    },
+    args: {
+        label: "Date of birth"
+    }
+};
+const TypeBirthdayWithLimits = {
+    render: (args)=>{
+        const [value, setValue] = useState();
+        const today = new Date();
+        const [minDate] = useState(()=>new Date(today.getFullYear() - 100, today.getMonth(), today.getDate()));
+        const [maxDate] = useState(()=>new Date(today.getFullYear() - 18, today.getMonth(), today.getDate()));
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-md max-w-[480px]"
+        }, /*#__PURE__*/ react.createElement(DatePicker, {
+            ...args,
+            type: "birthday",
+            value: value,
+            onChange: setValue,
+            minDate: minDate,
+            maxDate: maxDate
+        }), /*#__PURE__*/ react.createElement("span", {
+            className: "text-sm text-neutral-muted"
+        }, "Value: ", value ?? "(empty)"));
+    },
+    args: {
+        label: "Date of birth",
+        description: "You must be 18 or older."
+    }
+};
 const TypeTime = {
     render: (args)=>{
         const [value, setValue] = useState();
@@ -399,6 +442,6 @@ const Documentation = {
     }
 };
 export default DatePicker_stories;
-export { Default, Disabled, Documentation, FullExample, TypeDateRange, TypeDateTimeLocal, TypeDateTimeTz, TypeMonth, TypeMultipleDates, TypeMultipleMonths, TypeMultipleYears, TypeTime, TypeWeek, TypeYear, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes, WithPresets };
+export { Default, Disabled, Documentation, FullExample, TypeBirthday, TypeBirthdayWithLimits, TypeDateRange, TypeDateTimeLocal, TypeDateTimeTz, TypeMonth, TypeMultipleDates, TypeMultipleMonths, TypeMultipleYears, TypeTime, TypeWeek, TypeYear, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes, WithPresets };
 
 //# sourceMappingURL=DatePicker.stories.js.map

package/DatePicker/DatePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/DatePicker.stories.js","sources":["../../src/DatePicker/DatePicker.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { addDays, nextSaturday } from \"date-fns\";\nimport { DatePicker } from \"./DatePicker.js\";\n\nconst meta: Meta<typeof DatePicker> = {\n    title: \"Components/Form/DatePicker\",\n    component: DatePicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"date\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<any>();\n        return <DatePicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DatePicker>;\n\nexport const Default: Story = {\n    args: {\n        type: \"date\"\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        type: \"date\",\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        type: \"date\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        type: \"date\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithPresets: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        const presets = [\n            { label: \"Today\", value: () => new Date() },\n            { label: \"Tomorrow\", value: () => addDays(new Date(), 1) },\n            { label: \"In 3 days\", value: () => addDays(new Date(), 3) },\n            { label: \"In a week\", value: () => addDays(new Date(), 7) },\n            { label: \"In 2 weeks\", value: () => addDays(new Date(), 14) },\n            { label: \"Next Saturday\", value: () => nextSaturday(new Date()) }\n        ];\n        return (\n            <DatePicker {...args} type=\"date\" value={value} onChange={setValue} presets={presets} />\n        );\n    },\n    args: {\n        label: \"Pick a date\",\n        description: \"Choose a date or use a preset.\"\n    }\n};\n\nexport const TypeTime: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"time\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Time\"\n    }\n};\n\nexport const TypeDateTimeLocal: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeLocal\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (local)\"\n    }\n};\n\nexport const TypeDateTimeTz: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeTz\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (with timezone)\"\n    }\n};\n\nexport const TypeMonth: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"month\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Month\"\n    }\n};\n\nexport const TypeWeek: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"week\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Week\"\n    }\n};\n\nexport const TypeYear: Story = {\n    render: args => {\n        const [value, setValue] = useState<number | undefined>();\n        return (\n            <DatePicker\n                {...args}\n                type=\"year\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Year\"\n    }\n};\n\nexport const TypeDateRange: Story = {\n    render: args => {\n        const [value, setValue] = useState<{ from?: string; to?: string } | undefined>();\n        return <DatePicker {...args} type=\"dateRange\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date Range\"\n    }\n};\n\nexport const TypeMultipleDates: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleDates\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Dates\"\n    }\n};\n\nexport const TypeMultipleMonths: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleMonths\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Months\"\n    }\n};\n\nexport const TypeMultipleYears: Story = {\n    render: args => {\n        const [value, setValue] = useState<number[]>([]);\n        return (\n            <DatePicker\n                {...args}\n                type=\"multipleYears\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Multiple Years\"\n    }\n};\n\nconst formatValue = (value: any): string => {\n    if (value === undefined || value === null) {\n        return \"undefined\";\n    }\n    if (value instanceof Date) {\n        return value.toISOString();\n    }\n    if (Array.isArray(value)) {\n        return JSON.stringify(\n            value.map((v: any) => (v instanceof Date ? v.toISOString() : v)),\n            null,\n            2\n        );\n    }\n    if (typeof value === \"object\") {\n        return JSON.stringify(value, (_k, v) => (v instanceof Date ? v.toISOString() : v), 2);\n    }\n    return String(value);\n};\n\nconst DocumentationInner = (args: any) => {\n    const isMultiple = (args.type as string)?.startsWith(\"multiple\");\n    const [value, setValue] = useState<any>(isMultiple ? [] : undefined);\n    const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n    const handleChange = (newValue: any) => {\n        setValue(newValue);\n        const isEmpty =\n            newValue === undefined ||\n            newValue === null ||\n            newValue === \"\" ||\n            (Array.isArray(newValue) && newValue.length === 0);\n        if (args.required && isEmpty) {\n            setValidation({ isValid: false, message: \"This field is required\" });\n        } else {\n            setValidation({ isValid: true, message: \"\" });\n        }\n    };\n\n    return (\n        <div>\n            <DatePicker {...args} value={value} onChange={handleChange} validation={validation} />\n            <div className=\"mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm\">\n                <div className=\"text-xs font-medium text-neutral-dimmed mb-xs\">Current value</div>\n                <pre className=\"text-sm text-neutral-strong whitespace-pre-wrap m-0\">\n                    {formatValue(value)}\n                </pre>\n            </div>\n        </div>\n    );\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <DocumentationInner key={args.type as string} {...args} />;\n    },\n    args: {\n        type: \"date\",\n        label: \"Event Date\",\n        required: true,\n        disabled: false,\n        description: \"Select the date for your event\",\n        note: \"Note: Choose a date that works for all participants\",\n        placeholder: \"Pick a date\",\n        validation: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"The type of date picker variant to render\",\n            control: \"select\",\n            options: [\n                \"date\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        label: {\n            description: \"Label text displayed above the picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the date picker\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the picker\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no date is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Callback function when the value changes\"\n        }\n    }\n};\n"],"names":["meta","DatePicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","WithPresets","presets","Date","addDays","nextSaturday","TypeTime","TypeDateTimeLocal","TypeDateTimeTz","TypeMonth","TypeWeek","TypeYear","TypeDateRange","TypeMultipleDates","TypeMultipleMonths","TypeMultipleYears","formatValue","Array","JSON","v","_k","String","DocumentationInner","isMultiple","undefined","validation","setValidation","handleChange","newValue","isEmpty","Documentation"],"mappings":"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"}
+{"version":3,"file":"DatePicker/DatePicker.stories.js","sources":["../../src/DatePicker/DatePicker.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { addDays, nextSaturday } from \"date-fns\";\nimport { DatePicker } from \"./DatePicker.js\";\n\nconst meta: Meta<typeof DatePicker> = {\n    title: \"Components/Form/DatePicker\",\n    component: DatePicker,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"date\",\n                \"birthday\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<any>();\n        return <DatePicker {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DatePicker>;\n\nexport const Default: Story = {\n    args: {\n        type: \"date\"\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        type: \"date\",\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        type: \"date\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        type: \"date\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        type: \"date\",\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const WithPresets: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        const presets = [\n            { label: \"Today\", value: () => new Date() },\n            { label: \"Tomorrow\", value: () => addDays(new Date(), 1) },\n            { label: \"In 3 days\", value: () => addDays(new Date(), 3) },\n            { label: \"In a week\", value: () => addDays(new Date(), 7) },\n            { label: \"In 2 weeks\", value: () => addDays(new Date(), 14) },\n            { label: \"Next Saturday\", value: () => nextSaturday(new Date()) }\n        ];\n        return (\n            <DatePicker {...args} type=\"date\" value={value} onChange={setValue} presets={presets} />\n        );\n    },\n    args: {\n        label: \"Pick a date\",\n        description: \"Choose a date or use a preset.\"\n    }\n};\n\n/**\n * Picks a date one step at a time: a day, then a month, then a year (newest first). Built for\n * dates far in the past, like a date of birth. The value is a `YYYY-MM-DD` string.\n */\nexport const TypeBirthday: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>(\"1990-02-09\");\n        return (\n            <div className=\"flex flex-col gap-md max-w-[480px]\">\n                <DatePicker {...args} type=\"birthday\" value={value} onChange={setValue} />\n                <span className=\"text-sm text-neutral-muted\">Value: {value ?? \"(empty)\"}</span>\n            </div>\n        );\n    },\n    args: {\n        label: \"Date of birth\"\n    }\n};\n\n/**\n * With `minDate` and `maxDate`, years run from the latest allowed one down to the earliest,\n * and days and months that can't make an allowed date are dimmed. Here: 18 to 100 years old.\n */\nexport const TypeBirthdayWithLimits: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        const today = new Date();\n        const [minDate] = useState(\n            () => new Date(today.getFullYear() - 100, today.getMonth(), today.getDate())\n        );\n        const [maxDate] = useState(\n            () => new Date(today.getFullYear() - 18, today.getMonth(), today.getDate())\n        );\n        return (\n            <div className=\"flex flex-col gap-md max-w-[480px]\">\n                <DatePicker\n                    {...args}\n                    type=\"birthday\"\n                    value={value}\n                    onChange={setValue}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                />\n                <span className=\"text-sm text-neutral-muted\">Value: {value ?? \"(empty)\"}</span>\n            </div>\n        );\n    },\n    args: {\n        label: \"Date of birth\",\n        description: \"You must be 18 or older.\"\n    }\n};\n\nexport const TypeTime: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"time\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Time\"\n    }\n};\n\nexport const TypeDateTimeLocal: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeLocal\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (local)\"\n    }\n};\n\nexport const TypeDateTimeTz: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"dateTimeTz\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date & Time (with timezone)\"\n    }\n};\n\nexport const TypeMonth: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"month\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Month\"\n    }\n};\n\nexport const TypeWeek: Story = {\n    render: args => {\n        const [value, setValue] = useState<string | undefined>();\n        return <DatePicker {...args} type=\"week\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Week\"\n    }\n};\n\nexport const TypeYear: Story = {\n    render: args => {\n        const [value, setValue] = useState<number | undefined>();\n        return (\n            <DatePicker\n                {...args}\n                type=\"year\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Year\"\n    }\n};\n\nexport const TypeDateRange: Story = {\n    render: args => {\n        const [value, setValue] = useState<{ from?: string; to?: string } | undefined>();\n        return <DatePicker {...args} type=\"dateRange\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Date Range\"\n    }\n};\n\nexport const TypeMultipleDates: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleDates\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Dates\"\n    }\n};\n\nexport const TypeMultipleMonths: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return <DatePicker {...args} type=\"multipleMonths\" value={value} onChange={setValue} />;\n    },\n    args: {\n        label: \"Multiple Months\"\n    }\n};\n\nexport const TypeMultipleYears: Story = {\n    render: args => {\n        const [value, setValue] = useState<number[]>([]);\n        return (\n            <DatePicker\n                {...args}\n                type=\"multipleYears\"\n                value={value}\n                onChange={setValue}\n                yearRange={[2015, 2035]}\n            />\n        );\n    },\n    args: {\n        label: \"Multiple Years\"\n    }\n};\n\nconst formatValue = (value: any): string => {\n    if (value === undefined || value === null) {\n        return \"undefined\";\n    }\n    if (value instanceof Date) {\n        return value.toISOString();\n    }\n    if (Array.isArray(value)) {\n        return JSON.stringify(\n            value.map((v: any) => (v instanceof Date ? v.toISOString() : v)),\n            null,\n            2\n        );\n    }\n    if (typeof value === \"object\") {\n        return JSON.stringify(value, (_k, v) => (v instanceof Date ? v.toISOString() : v), 2);\n    }\n    return String(value);\n};\n\nconst DocumentationInner = (args: any) => {\n    const isMultiple = (args.type as string)?.startsWith(\"multiple\");\n    const [value, setValue] = useState<any>(isMultiple ? [] : undefined);\n    const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n    const handleChange = (newValue: any) => {\n        setValue(newValue);\n        const isEmpty =\n            newValue === undefined ||\n            newValue === null ||\n            newValue === \"\" ||\n            (Array.isArray(newValue) && newValue.length === 0);\n        if (args.required && isEmpty) {\n            setValidation({ isValid: false, message: \"This field is required\" });\n        } else {\n            setValidation({ isValid: true, message: \"\" });\n        }\n    };\n\n    return (\n        <div>\n            <DatePicker {...args} value={value} onChange={handleChange} validation={validation} />\n            <div className=\"mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm\">\n                <div className=\"text-xs font-medium text-neutral-dimmed mb-xs\">Current value</div>\n                <pre className=\"text-sm text-neutral-strong whitespace-pre-wrap m-0\">\n                    {formatValue(value)}\n                </pre>\n            </div>\n        </div>\n    );\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <DocumentationInner key={args.type as string} {...args} />;\n    },\n    args: {\n        type: \"date\",\n        label: \"Event Date\",\n        required: true,\n        disabled: false,\n        description: \"Select the date for your event\",\n        note: \"Note: Choose a date that works for all participants\",\n        placeholder: \"Pick a date\",\n        validation: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"The type of date picker variant to render\",\n            control: \"select\",\n            options: [\n                \"date\",\n                \"time\",\n                \"dateTimeLocal\",\n                \"dateTimeTz\",\n                \"month\",\n                \"week\",\n                \"year\",\n                \"dateRange\",\n                \"multipleDates\",\n                \"multipleMonths\",\n                \"multipleYears\"\n            ],\n            defaultValue: \"date\"\n        },\n        label: {\n            description: \"Label text displayed above the picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the date picker\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the picker\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when no date is selected\",\n            control: \"text\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onChange: {\n            description: \"Callback function when the value changes\"\n        }\n    }\n};\n"],"names":["meta","DatePicker","args","value","setValue","useState","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","WithPresets","presets","Date","addDays","nextSaturday","TypeBirthday","TypeBirthdayWithLimits","today","minDate","maxDate","TypeTime","TypeDateTimeLocal","TypeDateTimeTz","TypeMonth","TypeWeek","TypeYear","TypeDateRange","TypeMultipleDates","TypeMultipleMonths","TypeMultipleYears","formatValue","Array","JSON","v","_k","String","DocumentationInner","isMultiple","undefined","validation","setValidation","handleChange","newValue","isEmpty","Documentation"],"mappings":"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"}

package/DatePicker/primitives/BirthdayPicker.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { BirthdayPickerProps } from "../utils/types.js";
+/**
+ * Picks a date one part at a time: a day, then a month, then a year. Each pick moves to the
+ * next step. A pick that completes the date commits it, and the last step closes the picker.
+ * Meant for dates far in the past, like a date of birth, where paging a calendar month by
+ * month is slow.
+ *
+ * The value is a `YYYY-MM-DD` string, the same as the `date` picker's. Days, months and years
+ * that can't make a date between `minDate` and `maxDate` can't be picked.
+ */
+declare const BirthdayPicker: ({ value, onChange, disabled, size, variant, invalid, yearRange, minDate, maxDate, onOpenChange, className }: BirthdayPickerProps) => React.JSX.Element;
+export { BirthdayPicker };

package/DatePicker/primitives/BirthdayPicker.js

@@ -0,0 +1,355 @@
+import react, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Popover } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/calendar_month.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { Icon } from "../../Icon/index.js";
+import { inputVariants } from "../../Input/index.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
+import { useEscapeScrollLock } from "../../hooks/index.js";
+import { cn, cva } from "../../utils.js";
+import { BirthdayPickerCell } from "./BirthdayPickerCell.js";
+import { BirthdayPickerSegments } from "./BirthdayPickerSegments.js";
+import { MONTH_NAMES_FULL } from "../utils/constants.js";
+import { birthdayYears, formatBirthdayValue, isDayDisabled, isMonthDisabled, isYearDisabled, nextBirthdayStep, pad, parseBirthdayValue, pickDay, pickMonth, pickYear } from "../utils/birthdayHelpers.js";
+const STEPS = [
+    "day",
+    "month",
+    "year"
+];
+const STEP_LABELS = {
+    day: "Select a day",
+    month: "Select a month",
+    year: "Select a year"
+};
+const DAYS = Array.from({
+    length: 31
+}, (_, index)=>index + 1);
+const MONTHS = Array.from({
+    length: 12
+}, (_, index)=>index + 1);
+const EXPAND_MS = 250;
+const SLIDE_MS = 300;
+const FADE_OUT_MS = 120;
+const COLLAPSE_MS = 200;
+const cardVariants = cva([
+    "bg-neutral-base border-sm border-neutral-black shadow-lg overflow-hidden",
+    "text-md text-neutral-strong fill-neutral-xstrong",
+    "w-(--radix-popover-trigger-width) min-w-[320px]"
+], {
+    variants: {
+        size: {
+            md: "rounded-md",
+            lg: "rounded-md",
+            xl: "rounded-lg leading-6"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+const cardHeaderVariants = cva("flex items-center justify-between gap-sm", {
+    variants: {
+        size: {
+            md: "px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]",
+            lg: "px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]",
+            xl: "px-[calc(var(--padding-md)-(var(--border-width-sm)))]"
+        }
+    },
+    defaultVariants: {
+        size: "lg"
+    }
+});
+const gridHeight = "h-[calc(6*var(--spacing-xl)+5*var(--spacing-sm)+2*var(--spacing-xs))]";
+const dayGridWidth = "max-w-[calc(6*var(--spacing-xxl)+5*var(--spacing-xs))]";
+const wideGridWidth = "max-w-[calc(5*var(--spacing-3xl)+4*var(--spacing-sm))]";
+const BirthdayPicker = ({ value, onChange, disabled, size, variant, invalid, yearRange, minDate, maxDate, onOpenChange, className })=>{
+    const [open, setOpen] = useState(false);
+    const [phase, setPhase] = useState("collapsed");
+    const [step, setStep] = useState("day");
+    const [draft, setDraft] = useState({});
+    const [barHeight, setBarHeight] = useState(0);
+    const [bodyHeight, setBodyHeight] = useState(0);
+    const barRef = useRef(null);
+    const cardRef = useRef(null);
+    const bodyRef = useRef(null);
+    const panelRefs = useRef({
+        day: null,
+        month: null,
+        year: null
+    });
+    const picked = useRef(new Set());
+    const closeTimer = useRef();
+    const escapeScrollLock = useEscapeScrollLock();
+    const saved = useMemo(()=>parseBirthdayValue(value), [
+        value
+    ]);
+    const years = useMemo(()=>birthdayYears(yearRange, saved.year, {
+            minDate,
+            maxDate
+        }), [
+        yearRange,
+        saved.year,
+        minDate,
+        maxDate
+    ]);
+    const range = useMemo(()=>({
+            years,
+            minDate,
+            maxDate
+        }), [
+        years,
+        minDate,
+        maxDate
+    ]);
+    useEffect(()=>()=>clearTimeout(closeTimer.current), []);
+    const expand = ()=>{
+        if (disabled || open) return;
+        clearTimeout(closeTimer.current);
+        setBarHeight(barRef.current?.offsetHeight ?? 0);
+        setDraft(saved);
+        picked.current = new Set();
+        setStep("day");
+        setPhase("collapsed");
+        setOpen(true);
+        onOpenChange?.(true);
+    };
+    const collapse = ()=>{
+        if ("collapsing" === phase) return;
+        setPhase("collapsing");
+        closeTimer.current = setTimeout(()=>{
+            setOpen(false);
+            setPhase("collapsed");
+            onOpenChange?.(false);
+        }, FADE_OUT_MS + COLLAPSE_MS);
+    };
+    useLayoutEffect(()=>{
+        if (!open || "collapsed" !== phase) return;
+        let second = 0;
+        const first = requestAnimationFrame(()=>{
+            second = requestAnimationFrame(()=>{
+                setBodyHeight(bodyRef.current?.offsetHeight ?? 0);
+                setPhase("expanded");
+            });
+        });
+        return ()=>{
+            cancelAnimationFrame(first);
+            cancelAnimationFrame(second);
+        };
+    }, [
+        open,
+        phase
+    ]);
+    useEffect(()=>{
+        if ("expanded" !== phase) return;
+        const timer = setTimeout(()=>{
+            const rect = cardRef.current?.getBoundingClientRect();
+            if (rect && rect.bottom > window.innerHeight) barRef.current?.scrollIntoView({
+                block: "center",
+                behavior: "smooth"
+            });
+        }, EXPAND_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        phase
+    ]);
+    useEffect(()=>{
+        if (!open || "expanded" !== phase) return;
+        const panel = panelRefs.current[step];
+        if (!panel) return;
+        const selected = panel.querySelector("[data-selected=true]");
+        const viewport = panel.querySelector("[data-slot=scroll-area-viewport]");
+        if (viewport) if (selected) {
+            const offset = selected.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+            viewport.scrollTop += offset - viewport.clientHeight / 2 + selected.offsetHeight / 2;
+        } else viewport.scrollTop = 0;
+        const target = selected ?? panel.querySelector("button:enabled");
+        target?.focus({
+            preventScroll: true
+        });
+    }, [
+        open,
+        phase,
+        step
+    ]);
+    const goToStep = (next)=>{
+        setStep(next);
+    };
+    const onPick = (pickedStep, next)=>{
+        setDraft(next);
+        picked.current.add(pickedStep);
+        const nextValue = formatBirthdayValue(next);
+        if (nextValue) onChange?.(nextValue);
+        const nextStep = nextBirthdayStep(next, pickedStep, picked.current);
+        if (nextStep) return void goToStep(nextStep);
+        collapse();
+    };
+    const onPickDay = (day)=>onPick("day", pickDay(draft, day, range));
+    const onPickMonth = (month)=>onPick("month", pickMonth(draft, month, range));
+    const onPickYear = (year)=>onPick("year", pickYear(draft, year));
+    const onBarKeyDown = (event)=>{
+        if (event.target !== event.currentTarget) return;
+        if ("Enter" === event.key || " " === event.key || "ArrowDown" === event.key) {
+            event.preventDefault();
+            expand();
+        }
+    };
+    const expanded = "expanded" === phase;
+    const cardHeight = expanded ? barHeight + bodyHeight : barHeight;
+    const stepIndex = STEPS.indexOf(step);
+    const icons = (interactive)=>/*#__PURE__*/ react.createElement("span", {
+            className: "flex items-center gap-xs shrink-0"
+        }, interactive && value && !disabled ? /*#__PURE__*/ react.createElement("button", {
+            type: "button",
+            "aria-label": "Clear date",
+            className: "flex cursor-pointer rounded-xs outline-none focus-visible:ring-sm focus-visible:ring-primary-dimmed",
+            onClick: (event)=>{
+                event.stopPropagation();
+                onChange?.(void 0);
+            },
+            onKeyDown: (event)=>event.stopPropagation()
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, null),
+            label: "Clear",
+            size: "sm",
+            color: "inherit"
+        })) : null, /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Calendar",
+            size: "sm",
+            color: "inherit"
+        }));
+    const panelProps = (panelStep)=>({
+            ref: (element)=>{
+                panelRefs.current[panelStep] = element;
+            },
+            "aria-hidden": step !== panelStep,
+            "data-step": panelStep
+        });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className
+    }, /*#__PURE__*/ react.createElement(Popover.Root, {
+        open: open,
+        onOpenChange: (isOpen)=>isOpen ? expand() : collapse()
+    }, /*#__PURE__*/ react.createElement(Popover.Anchor, {
+        asChild: true
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: barRef,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "data-disabled": disabled,
+        "data-focused": open,
+        onClick: expand,
+        onKeyDown: onBarKeyDown,
+        className: cn(inputVariants({
+            size,
+            variant,
+            invalid
+        }), "cursor-pointer justify-between select-none min-w-0 overflow-hidden outline-none", disabled && "pointer-events-none")
+    }, /*#__PURE__*/ react.createElement(BirthdayPickerSegments, {
+        parts: saved
+    }), icons(true))), /*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+        ref: escapeScrollLock,
+        side: "bottom",
+        align: "start",
+        sideOffset: -barHeight,
+        avoidCollisions: false,
+        onOpenAutoFocus: (event)=>event.preventDefault(),
+        onCloseAutoFocus: (event)=>{
+            event.preventDefault();
+            barRef.current?.focus({
+                preventScroll: true
+            });
+        },
+        className: "z-popover outline-none"
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: cardRef,
+        role: "dialog",
+        "aria-label": STEP_LABELS[step],
+        "data-phase": phase,
+        className: cn(cardVariants({
+            size
+        }), "collapsing" === phase && "pointer-events-none"),
+        style: {
+            height: cardHeight,
+            transition: "collapsing" === phase ? `height ${COLLAPSE_MS}ms ease-in ${FADE_OUT_MS}ms` : `height ${EXPAND_MS}ms ease-out`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cardHeaderVariants({
+            size
+        }),
+        style: {
+            height: `calc(${barHeight}px - 2 * var(--border-width-sm))`
+        }
+    }, /*#__PURE__*/ react.createElement(BirthdayPickerSegments, {
+        parts: draft,
+        activeStep: step,
+        onStepClick: goToStep
+    }), icons(false)), /*#__PURE__*/ react.createElement("div", {
+        ref: bodyRef
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "h-px bg-neutral-dimmed origin-center",
+        style: {
+            transform: expanded ? "scaleX(1)" : "scaleX(0)",
+            transition: `transform ${EXPAND_MS}ms ease-out`
+        }
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "pb-md",
+        style: {
+            opacity: expanded ? 1 : 0,
+            transition: expanded ? `opacity 200ms ease-out ${EXPAND_MS - 100}ms` : `opacity ${FADE_OUT_MS}ms ease-in`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "pt-sm-extra pb-xs text-center text-sm text-neutral-muted",
+        "aria-live": "polite"
+    }, STEP_LABELS[step]), /*#__PURE__*/ react.createElement("div", {
+        className: cn("overflow-hidden", gridHeight)
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex h-full w-[300%]",
+        style: {
+            transform: `translateX(-${100 * stepIndex / 3}%)`,
+            transition: `transform ${SLIDE_MS}ms ease-in-out`
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("day"),
+        className: "w-1/3 h-full px-md py-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-6 gap-x-xs gap-y-sm mx-auto", dayGridWidth)
+    }, DAYS.map((day)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: day,
+            selected: draft.day === day,
+            disabled: isDayDisabled(day, range),
+            tabbable: "day" === step,
+            onClick: ()=>onPickDay(day)
+        }, pad(day))))), /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("month"),
+        className: "w-1/3 h-full px-md py-xs flex items-center"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-3 gap-x-sm gap-y-md w-full mx-auto", wideGridWidth)
+    }, MONTHS.map((month)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: month,
+            selected: draft.month === month,
+            disabled: isMonthDisabled(month, draft, range),
+            tabbable: "month" === step,
+            onClick: ()=>onPickMonth(month)
+        }, MONTH_NAMES_FULL[month - 1])))), /*#__PURE__*/ react.createElement("div", {
+        ...panelProps("year"),
+        className: "w-1/3 h-full"
+    }, /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "h-full"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "px-md py-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn("grid grid-cols-5 gap-sm w-full mx-auto", wideGridWidth)
+    }, years.map((year)=>/*#__PURE__*/ react.createElement(BirthdayPickerCell, {
+            key: year,
+            selected: draft.year === year,
+            disabled: isYearDisabled(year, draft, range),
+            tabbable: "year" === step,
+            onClick: ()=>onPickYear(year)
+        }, year)))))))))))))));
+};
+export { BirthdayPicker };
+
+//# sourceMappingURL=BirthdayPicker.js.map