@webiny/admin-ui 6.5.0-beta.7 → 6.5.0-beta.8

package/DatePicker/primitives/DateOnlyPicker.js

@@ -3,7 +3,7 @@ import { format } from "date-fns";
 import { Button } from "../../Button/index.js";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat })=>{
     const [open, setOpen] = useState(false);
@@ -16,7 +16,7 @@ const DateOnlyPicker = ({ value, onChange, placeholder, disabled, size, variant,
         handleOpenChange(false);
     };
     const displayValue = formatDateForDisplay(value, "date", displayFormat);
-    const selectedDate = value ? new Date(value) : void 0;
+    const selectedDate = value ? parseDateValue(value) : void 0;
     return /*#__PURE__*/ react.createElement("div", {
         className: className
     }, /*#__PURE__*/ react.createElement(PopoverPrimitive, {

package/DatePicker/primitives/DateOnlyPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DateOnlyPicker.js","sources":["../../../src/DatePicker/primitives/DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    presets,\n    displayFormat\n}: DateOnlyPickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const handlePresetClick = (computeDate: () => Date) => {\n        if (onChange) {\n            onChange(format(computeDate(), \"yyyy-MM-dd\"));\n        }\n        handleOpenChange(false);\n    };\n\n    const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n    const selectedDate = value ? new Date(value) : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className={presets?.length ? \"flex\" : undefined}>\n                        <Calendar\n                            mode=\"single\"\n                            selected={selectedDate}\n                            onSelect={date => {\n                                if (onChange) {\n                                    onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n                                }\n                                handleOpenChange(false);\n                            }}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        {presets && presets.length > 0 && (\n                            <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n                                {presets.map(preset => {\n                                    const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n                                    return (\n                                        <Button\n                                            key={preset.label}\n                                            variant={value === presetDate ? \"primary\" : \"ghost\"}\n                                            size=\"sm\"\n                                            text={preset.label}\n                                            onClick={() => handlePresetClick(preset.value)}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateOnlyPicker };\n"],"names":["DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","Date","undefined","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AASA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,aAAa,EACK;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIR,cACAA,aAAaQ;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAIjB,UACAA,SAASkB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBrB,OAAO,QAAQW;IACzD,MAAMW,eAAetB,QAAQ,IAAIuB,KAAKvB,SAASwB;IAE/C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWf;qBACZ,oBAACgB,kBAAgBA;QAAC,MAAMb;QAAM,cAAcG;qBACxC,oBAACW,mBAAiBA;QACd,cAAcN;QACd,aAAalB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACmB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWf,SAAS,SAAS,SAASc;qBACvC,oBAACG,UAAQA;QACL,MAAK;QACL,UAAUL;QACV,UAAUM,CAAAA;YACN,IAAI3B,UACAA,SAAS2B,OAAOT,OAAOS,MAAM,gBAAgBJ;YAEjDT,iBAAiB;QACrB;QACA,cAAcR;QAEjBG,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACmB,CAAAA;QACT,MAAMC,aAAaX,OAAOU,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAS7B,UAAU8B,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMZ,kBAAkBY,OAAO,KAAK;;IAGzD;AAQhC"}
+{"version":3,"file":"DatePicker/primitives/DateOnlyPicker.js","sources":["../../../src/DatePicker/primitives/DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    presets,\n    displayFormat\n}: DateOnlyPickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const handlePresetClick = (computeDate: () => Date) => {\n        if (onChange) {\n            onChange(format(computeDate(), \"yyyy-MM-dd\"));\n        }\n        handleOpenChange(false);\n    };\n\n    const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n    const selectedDate = value ? parseDateValue(value) : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <div className={presets?.length ? \"flex\" : undefined}>\n                        <Calendar\n                            mode=\"single\"\n                            selected={selectedDate}\n                            onSelect={date => {\n                                if (onChange) {\n                                    onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n                                }\n                                handleOpenChange(false);\n                            }}\n                            weekStartsOn={weekStartsOn}\n                        />\n                        {presets && presets.length > 0 && (\n                            <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n                                {presets.map(preset => {\n                                    const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n                                    return (\n                                        <Button\n                                            key={preset.label}\n                                            variant={value === presetDate ? \"primary\" : \"ghost\"}\n                                            size=\"sm\"\n                                            text={preset.label}\n                                            onClick={() => handlePresetClick(preset.value)}\n                                        />\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateOnlyPicker };\n"],"names":["DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","handlePresetClick","computeDate","format","displayValue","formatDateForDisplay","selectedDate","parseDateValue","undefined","PopoverPrimitive","DatePickerTrigger","Calendar","date","preset","presetDate","Button"],"mappings":";;;;;;;AASA,MAAMA,iBAAiB,CAAC,EACpBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,OAAO,EACPC,aAAa,EACK;IAClB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIR,cACAA,aAAaQ;IAErB;IAEA,MAAMC,oBAAoB,CAACC;QACvB,IAAIjB,UACAA,SAASkB,OAAOD,eAAe;QAEnCH,iBAAiB;IACrB;IAEA,MAAMK,eAAeC,qBAAqBrB,OAAO,QAAQW;IACzD,MAAMW,eAAetB,QAAQuB,eAAevB,SAASwB;IAErD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWf;qBACZ,oBAACgB,kBAAgBA;QAAC,MAAMb;QAAM,cAAcG;qBACxC,oBAACW,mBAAiBA;QACd,cAAcN;QACd,aAAalB,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACmB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAAC;QAAI,WAAWf,SAAS,SAAS,SAASc;qBACvC,oBAACG,UAAQA;QACL,MAAK;QACL,UAAUL;QACV,UAAUM,CAAAA;YACN,IAAI3B,UACAA,SAAS2B,OAAOT,OAAOS,MAAM,gBAAgBJ;YAEjDT,iBAAiB;QACrB;QACA,cAAcR;QAEjBG,WAAWA,QAAQ,MAAM,GAAG,KAAK,WAAL,GACzB,oBAAC;QAAI,WAAU;OACVA,QAAQ,GAAG,CAACmB,CAAAA;QACT,MAAMC,aAAaX,OAAOU,OAAO,KAAK,IAAI;QAC1C,OAAO,WAAP,GACI,oBAACE,QAAMA;YACH,KAAKF,OAAO,KAAK;YACjB,SAAS7B,UAAU8B,aAAa,YAAY;YAC5C,MAAK;YACL,MAAMD,OAAO,KAAK;YAClB,SAAS,IAAMZ,kBAAkBY,OAAO,KAAK;;IAGzD;AAQhC"}

package/DatePicker/primitives/DateRangePicker.js

@@ -2,7 +2,7 @@ import react, { useState } from "react";
 import { format } from "date-fns";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 const toDateStr = (d)=>format(d, "yyyy-MM-dd");
 const DateRangePicker = ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, displayFormat })=>{
@@ -19,8 +19,8 @@ const DateRangePicker = ({ value, onChange, placeholder, disabled, size, variant
         }) : onChange(void 0);
     };
     const selected = value?.from ? {
-        from: new Date(value.from),
-        to: value.to ? new Date(value.to) : void 0
+        from: parseDateValue(value.from),
+        to: value.to ? parseDateValue(value.to) : void 0
     } : void 0;
     return /*#__PURE__*/ react.createElement("div", {
         className: className

package/DatePicker/primitives/DateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/DateRangePicker.js","sources":["../../../src/DatePicker/primitives/DateRangePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateRangePickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst DateRangePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    displayFormat\n}: DateRangePickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"dateRange\", displayFormat);\n\n    const handleRangeSelect = (range: DateRange | undefined) => {\n        if (onChange) {\n            if (range?.from) {\n                onChange({\n                    from: toDateStr(range.from),\n                    to: range.to ? toDateStr(range.to) : undefined\n                });\n            } else {\n                onChange(undefined);\n            }\n        }\n    };\n\n    const selected: DateRange | undefined = value?.from\n        ? { from: new Date(value.from), to: value.to ? new Date(value.to) : undefined }\n        : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date range\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"range\"\n                        selected={selected}\n                        onSelect={handleRangeSelect}\n                        numberOfMonths={2}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateRangePicker };\n"],"names":["toDateStr","d","format","DateRangePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleRangeSelect","range","undefined","selected","Date","PopoverPrimitive","DatePickerTrigger","Calendar"],"mappings":";;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,kBAAkB,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,aAAa,EACM;IACnB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBjB,OAAO,aAAaU;IAE9D,MAAMQ,oBAAoB,CAACC;QACvB,IAAIlB,UACIkB,OAAO,OACPlB,SAAS;YACL,MAAML,UAAUuB,MAAM,IAAI;YAC1B,IAAIA,MAAM,EAAE,GAAGvB,UAAUuB,MAAM,EAAE,IAAIC;QACzC,KAEAnB,SAASmB;IAGrB;IAEA,MAAMC,WAAkCrB,OAAO,OACzC;QAAE,MAAM,IAAIsB,KAAKtB,MAAM,IAAI;QAAG,IAAIA,MAAM,EAAE,GAAG,IAAIsB,KAAKtB,MAAM,EAAE,IAAIoB;IAAU,IAC5EA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWX;qBACZ,oBAACc,kBAAgBA;QAAC,MAAMZ;QAAM,cAAcG;qBACxC,oBAACU,mBAAiBA;QACd,cAAcR;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUJ;QACV,UAAUH;QACV,gBAAgB;QAChB,cAAcX;;AAMtC"}
+{"version":3,"file":"DatePicker/primitives/DateRangePicker.js","sources":["../../../src/DatePicker/primitives/DateRangePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateRangePickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst DateRangePicker = ({\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className,\n    displayFormat\n}: DateRangePickerProps) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"dateRange\", displayFormat);\n\n    const handleRangeSelect = (range: DateRange | undefined) => {\n        if (onChange) {\n            if (range?.from) {\n                onChange({\n                    from: toDateStr(range.from),\n                    to: range.to ? toDateStr(range.to) : undefined\n                });\n            } else {\n                onChange(undefined);\n            }\n        }\n    };\n\n    const selected: DateRange | undefined = value?.from\n        ? { from: parseDateValue(value.from), to: value.to ? parseDateValue(value.to) : undefined }\n        : undefined;\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick a date range\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"range\"\n                        selected={selected}\n                        onSelect={handleRangeSelect}\n                        numberOfMonths={2}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n        </div>\n    );\n};\n\nexport { DateRangePicker };\n"],"names":["toDateStr","d","format","DateRangePicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","displayFormat","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","handleRangeSelect","range","undefined","selected","parseDateValue","PopoverPrimitive","DatePickerTrigger","Calendar"],"mappings":";;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,kBAAkB,CAAC,EACrBC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACTC,aAAa,EACM;IACnB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBjB,OAAO,aAAaU;IAE9D,MAAMQ,oBAAoB,CAACC;QACvB,IAAIlB,UACIkB,OAAO,OACPlB,SAAS;YACL,MAAML,UAAUuB,MAAM,IAAI;YAC1B,IAAIA,MAAM,EAAE,GAAGvB,UAAUuB,MAAM,EAAE,IAAIC;QACzC,KAEAnB,SAASmB;IAGrB;IAEA,MAAMC,WAAkCrB,OAAO,OACzC;QAAE,MAAMsB,eAAetB,MAAM,IAAI;QAAG,IAAIA,MAAM,EAAE,GAAGsB,eAAetB,MAAM,EAAE,IAAIoB;IAAU,IACxFA;IAEN,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWX;qBACZ,oBAACc,kBAAgBA;QAAC,MAAMZ;QAAM,cAAcG;qBACxC,oBAACU,mBAAiBA;QACd,cAAcR;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACiB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUJ;QACV,UAAUH;QACV,gBAAgB;QAChB,cAAcX;;AAMtC"}

package/DatePicker/primitives/MultipleDatesPicker.js

@@ -2,7 +2,7 @@ import react, { useState } from "react";
 import { format } from "date-fns";
 import { Calendar } from "../../Calendar/index.js";
 import { PopoverPrimitive } from "../../Popover/index.js";
-import { formatDateForDisplay } from "../utils/dateHelpers.js";
+import { formatDateForDisplay, parseDateValue } from "../utils/dateHelpers.js";
 import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
 import { SelectedTagsList } from "./components/SelectedTagsList.js";
 const toDateStr = (d)=>format(d, "yyyy-MM-dd");
@@ -14,7 +14,7 @@ const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled
         if (onOpenChange) onOpenChange(isOpen);
     };
     const displayValue = formatDateForDisplay(value, "multipleDates");
-    const selectedDates = value.map((s)=>new Date(s));
+    const selectedDates = value.map((s)=>parseDateValue(s));
     const handleSelect = (dates)=>{
         if (onChange) {
             const sorted = [
@@ -28,7 +28,7 @@ const MultipleDatesPicker = ({ value: valueProp, onChange, placeholder, disabled
     };
     const tagItems = value.map((d)=>({
             key: d,
-            label: format(new Date(d), "MMM d, yyyy")
+            label: format(parseDateValue(d), "MMM d, yyyy")
         }));
     return /*#__PURE__*/ react.createElement("div", {
         className: className

package/DatePicker/primitives/MultipleDatesPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/primitives/MultipleDatesPicker.js","sources":["../../../src/DatePicker/primitives/MultipleDatesPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleDatesPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst MultipleDatesPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className\n}: MultipleDatesPickerProps) => {\n    const value = valueProp ?? [];\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"multipleDates\");\n\n    const selectedDates = value.map(s => new Date(s));\n\n    const handleSelect = (dates: Date[] | undefined) => {\n        if (onChange) {\n            const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());\n            onChange(sorted.map(toDateStr));\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(d => d !== key));\n        }\n    };\n\n    const tagItems = value.map(d => ({\n        key: d,\n        label: format(new Date(d), \"MMM d, yyyy\")\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick dates\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"multiple\"\n                        selected={selectedDates}\n                        onSelect={handleSelect}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleDatesPicker };\n"],"names":["toDateStr","d","format","MultipleDatesPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","selectedDates","s","Date","handleSelect","dates","sorted","a","b","handleRemove","key","tagItems","PopoverPrimitive","DatePickerTrigger","Calendar","SelectedTagsList"],"mappings":";;;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,gBAAgBR,MAAM,GAAG,CAACS,CAAAA,IAAK,IAAIC,KAAKD;IAE9C,MAAME,eAAe,CAACC;QAClB,IAAIrB,UAAU;YACV,MAAMsB,SAAS;mBAAKD,SAAS,EAAE;aAAE,CAAC,IAAI,CAAC,CAACE,GAAGC,IAAMD,EAAE,OAAO,KAAKC,EAAE,OAAO;YACxExB,SAASsB,OAAO,GAAG,CAAC3B;QACxB;IACJ;IAEA,MAAM8B,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASS,MAAM,MAAM,CAACb,CAAAA,IAAKA,MAAM8B;IAEzC;IAEA,MAAMC,WAAWlB,MAAM,GAAG,CAACb,CAAAA,IAAM;YAC7B,KAAKA;YACL,OAAOC,OAAO,IAAIsB,KAAKvB,IAAI;QAC/B;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWY;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUb;QACV,UAAUG;QACV,cAAcd;wBAI1B,oBAACyB,kBAAgBA;QAAC,OAAOJ;QAAU,UAAUF;QAAc,UAAUvB;;AAGjF"}
+{"version":3,"file":"DatePicker/primitives/MultipleDatesPicker.js","sources":["../../../src/DatePicker/primitives/MultipleDatesPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { MultipleDatesPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay, parseDateValue } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\nimport { SelectedTagsList } from \"./components/SelectedTagsList.js\";\n\nconst toDateStr = (d: Date) => format(d, \"yyyy-MM-dd\");\n\nconst MultipleDatesPicker = ({\n    value: valueProp,\n    onChange,\n    placeholder,\n    disabled,\n    size,\n    variant,\n    invalid,\n    weekStartsOn,\n    onOpenChange,\n    className\n}: MultipleDatesPickerProps) => {\n    const value = valueProp ?? [];\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (isOpen: boolean) => {\n        setOpen(isOpen);\n        if (onOpenChange) {\n            onOpenChange(isOpen);\n        }\n    };\n\n    const displayValue = formatDateForDisplay(value, \"multipleDates\");\n\n    const selectedDates = value.map(s => parseDateValue(s));\n\n    const handleSelect = (dates: Date[] | undefined) => {\n        if (onChange) {\n            const sorted = [...(dates ?? [])].sort((a, b) => a.getTime() - b.getTime());\n            onChange(sorted.map(toDateStr));\n        }\n    };\n\n    const handleRemove = (key: string) => {\n        if (onChange) {\n            onChange(value.filter(d => d !== key));\n        }\n    };\n\n    const tagItems = value.map(d => ({\n        key: d,\n        label: format(parseDateValue(d), \"MMM d, yyyy\")\n    }));\n\n    return (\n        <div className={className}>\n            <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n                <DatePickerTrigger\n                    displayValue={displayValue}\n                    placeholder={placeholder ?? \"Pick dates\"}\n                    disabled={disabled}\n                    size={size}\n                    variant={variant}\n                    invalid={invalid}\n                />\n                <PopoverPrimitive.Content align=\"start\">\n                    <Calendar\n                        mode=\"multiple\"\n                        selected={selectedDates}\n                        onSelect={handleSelect}\n                        weekStartsOn={weekStartsOn}\n                    />\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive>\n            <SelectedTagsList items={tagItems} onRemove={handleRemove} disabled={disabled} />\n        </div>\n    );\n};\n\nexport { MultipleDatesPicker };\n"],"names":["toDateStr","d","format","MultipleDatesPicker","valueProp","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","value","open","setOpen","useState","handleOpenChange","isOpen","displayValue","formatDateForDisplay","selectedDates","s","parseDateValue","handleSelect","dates","sorted","a","b","handleRemove","key","tagItems","PopoverPrimitive","DatePickerTrigger","Calendar","SelectedTagsList"],"mappings":";;;;;;;AASA,MAAMA,YAAY,CAACC,IAAYC,OAAOD,GAAG;AAEzC,MAAME,sBAAsB,CAAC,EACzB,OAAOC,SAAS,EAChBC,QAAQ,EACRC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,SAAS,EACc;IACvB,MAAMC,QAAQV,aAAa,EAAE;IAC7B,MAAM,CAACW,MAAMC,QAAQ,GAAGC,SAAS;IAEjC,MAAMC,mBAAmB,CAACC;QACtBH,QAAQG;QACR,IAAIP,cACAA,aAAaO;IAErB;IAEA,MAAMC,eAAeC,qBAAqBP,OAAO;IAEjD,MAAMQ,gBAAgBR,MAAM,GAAG,CAACS,CAAAA,IAAKC,eAAeD;IAEpD,MAAME,eAAe,CAACC;QAClB,IAAIrB,UAAU;YACV,MAAMsB,SAAS;mBAAKD,SAAS,EAAE;aAAE,CAAC,IAAI,CAAC,CAACE,GAAGC,IAAMD,EAAE,OAAO,KAAKC,EAAE,OAAO;YACxExB,SAASsB,OAAO,GAAG,CAAC3B;QACxB;IACJ;IAEA,MAAM8B,eAAe,CAACC;QAClB,IAAI1B,UACAA,SAASS,MAAM,MAAM,CAACb,CAAAA,IAAKA,MAAM8B;IAEzC;IAEA,MAAMC,WAAWlB,MAAM,GAAG,CAACb,CAAAA,IAAM;YAC7B,KAAKA;YACL,OAAOC,OAAOsB,eAAevB,IAAI;QACrC;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWY;qBACZ,oBAACoB,kBAAgBA;QAAC,MAAMlB;QAAM,cAAcG;qBACxC,oBAACgB,mBAAiBA;QACd,cAAcd;QACd,aAAad,eAAe;QAC5B,UAAUC;QACV,MAAMC;QACN,SAASC;QACT,SAASC;sBAEb,oBAACuB,iBAAiB,OAAO;QAAC,OAAM;qBAC5B,oBAACE,UAAQA;QACL,MAAK;QACL,UAAUb;QACV,UAAUG;QACV,cAAcd;wBAI1B,oBAACyB,kBAAgBA;QAAC,OAAOJ;QAAU,UAAUF;QAAc,UAAUvB;;AAGjF"}

package/DatePicker/utils/dateHelpers.d.ts

@@ -1,3 +1,8 @@
+/**
+ * `new Date("2026-10-10")` is UTC midnight, which is the previous day west of UTC.
+ * Bare dates are calendar days, so build them at local midnight instead.
+ */
+export declare function parseDateValue(value: string | Date | number): Date;
 export declare function formatDateForDisplay(value: Date | string | number | {
     from?: string;
     to?: string;

package/DatePicker/utils/dateHelpers.js

@@ -1,10 +1,17 @@
 import { endOfISOWeek, format, getISOWeek, getISOWeekYear, startOfISOWeek } from "date-fns";
 import { DEFAULT_YEAR_RANGE_SIZE, MONTH_NAMES_SHORT } from "./constants.js";
+function parseDateValue(value) {
+    if ("string" == typeof value) {
+        const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (match) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    }
+    return new Date(value);
+}
 function formatDateForDisplay(value, type, displayFormat) {
     if (null == value) return;
     switch(type){
         case "date":
-            return format(new Date(value), displayFormat ?? "PPP");
+            return format(parseDateValue(value), displayFormat ?? "PPP");
         case "time":
             return value;
         case "dateTimeLocal":
@@ -54,8 +61,8 @@ function formatDateForDisplay(value, type, displayFormat) {
                 const range = value;
                 const fmt = displayFormat ?? "PPP";
                 if (!range.from) return;
-                if (!range.to) return format(new Date(range.from), fmt);
-                return `${format(new Date(range.from), fmt)} – ${format(new Date(range.to), fmt)}`;
+                if (!range.to) return format(parseDateValue(range.from), fmt);
+                return `${format(parseDateValue(range.from), fmt)} – ${format(parseDateValue(range.to), fmt)}`;
             }
         case "multipleDates":
             {
@@ -147,6 +154,6 @@ function parseWeekValue(value) {
         week: Number(match[2])
     };
 }
-export { defaultYearRange, extractTimezone, formatDateForDisplay, formatMonthValue, formatTimeValue, formatWeekValue, getLocalTimezone, parseMonthValue, parseTimeValue, parseWeekValue, toIsoWithTz, toLocalNaive };
+export { defaultYearRange, extractTimezone, formatDateForDisplay, formatMonthValue, formatTimeValue, formatWeekValue, getLocalTimezone, parseDateValue, parseMonthValue, parseTimeValue, parseWeekValue, toIsoWithTz, toLocalNaive };
 
 //# sourceMappingURL=dateHelpers.js.map

package/DatePicker/utils/dateHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/utils/dateHelpers.js","sources":["../../../src/DatePicker/utils/dateHelpers.ts"],"sourcesContent":["import { format, getISOWeek, getISOWeekYear, startOfISOWeek, endOfISOWeek } from \"date-fns\";\nimport { DEFAULT_YEAR_RANGE_SIZE, MONTH_NAMES_SHORT } from \"./constants.js\";\n\nexport function formatDateForDisplay(\n    value:\n        | Date\n        | string\n        | number\n        | { from?: string; to?: string }\n        | Date[]\n        | string[]\n        | number[]\n        | undefined,\n    type: string,\n    displayFormat?: string\n): string | undefined {\n    if (value === undefined || value === null) {\n        return undefined;\n    }\n\n    switch (type) {\n        case \"date\":\n            return format(new Date(value as string), displayFormat ?? \"PPP\");\n        case \"time\":\n            return value as string;\n        case \"dateTimeLocal\":\n            return format(new Date(value as string), displayFormat ?? \"PPP p\");\n        case \"dateTimeTz\": {\n            if (!value) {\n                return undefined;\n            }\n            const isoStr = value instanceof Date ? value.toISOString() : (value as string);\n            const tzMatch = isoStr.match(/([+-]\\d{2}:\\d{2})$/);\n            const tz = tzMatch ? `UTC${tzMatch[1]}` : \"\";\n            const dateWithoutTz = isoStr.replace(/[+-]\\d{2}:\\d{2}$/, \"\");\n            const parts = dateWithoutTz.split(\"T\");\n            if (parts.length < 2) {\n                return isoStr;\n            }\n            const datePart = new Date(parts[0] + \"T00:00:00\");\n            const timeParts = parts[1].split(\":\");\n            const hours = Number(timeParts[0]);\n            const minutes = timeParts[1] ?? \"00\";\n            const ampm = hours >= 12 ? \"PM\" : \"AM\";\n            const h12 = hours % 12 || 12;\n            if (displayFormat) {\n                return `${format(datePart, displayFormat)} ${h12}:${minutes} ${ampm} (${tz})`;\n            }\n            return `${format(datePart, \"PPP\")} ${h12}:${minutes} ${ampm} (${tz})`;\n        }\n        case \"month\": {\n            if (displayFormat) {\n                const parsed = parseMonthValue(value as string);\n                if (!parsed) {\n                    return undefined;\n                }\n                return format(new Date(parsed.year, parsed.month), displayFormat);\n            }\n            const parsed = parseMonthValue(value as string);\n            if (!parsed) {\n                return undefined;\n            }\n            return `${MONTH_NAMES_SHORT[parsed.month]} ${parsed.year}`;\n        }\n        case \"week\": {\n            const parsed = parseWeekValue(value as string);\n            if (!parsed) {\n                return undefined;\n            }\n            const weekStart = startOfISOWeek(new Date(parsed.year, 0, 4 + (parsed.week - 1) * 7));\n            const weekEnd = endOfISOWeek(weekStart);\n            if (displayFormat) {\n                return `${format(weekStart, displayFormat)} – ${format(weekEnd, displayFormat)}`;\n            }\n            return `Week ${parsed.week}, ${format(weekStart, \"MMM d\")} – ${format(weekEnd, \"MMM d, yyyy\")}`;\n        }\n        case \"year\":\n            return String(value);\n        case \"dateRange\": {\n            const range = value as { from?: string; to?: string };\n            const fmt = displayFormat ?? \"PPP\";\n            if (!range.from) {\n                return undefined;\n            }\n            if (!range.to) {\n                return format(new Date(range.from), fmt);\n            }\n            return `${format(new Date(range.from), fmt)} – ${format(new Date(range.to), fmt)}`;\n        }\n        case \"multipleDates\": {\n            const dates = value as string[];\n            if (dates.length === 0) {\n                return undefined;\n            }\n            return `${dates.length} date${dates.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        case \"multipleMonths\": {\n            const months = value as string[];\n            if (months.length === 0) {\n                return undefined;\n            }\n            return `${months.length} month${months.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        case \"multipleYears\": {\n            const years = value as number[];\n            if (years.length === 0) {\n                return undefined;\n            }\n            return `${years.length} year${years.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        default:\n            return undefined;\n    }\n}\n\nexport function defaultYearRange(centerYear?: number): [number, number] {\n    const center = centerYear ?? new Date().getFullYear();\n    const half = Math.floor(DEFAULT_YEAR_RANGE_SIZE / 2);\n    return [center - half, center + half - 1];\n}\n\nexport function formatMonthValue(year: number, month: number): string {\n    return `${year}-${String(month + 1).padStart(2, \"0\")}`;\n}\n\nexport function parseMonthValue(value: string): { year: number; month: number } | undefined {\n    const match = value.match(/^(\\d{4})-(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { year: Number(match[1]), month: Number(match[2]) - 1 };\n}\n\nexport function formatTimeValue(date: Date): string {\n    return format(date, \"HH:mm\");\n}\n\nexport function parseTimeValue(time: string): { hours: number; minutes: number } | undefined {\n    const match = time.match(/^(\\d{2}):(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { hours: Number(match[1]), minutes: Number(match[2]) };\n}\n\nexport function toIsoWithTz(date: Date, timezone?: string): string {\n    if (timezone) {\n        return format(date, \"yyyy-MM-dd'T'HH:mm:ss\") + timezone;\n    }\n    const offset = -date.getTimezoneOffset();\n    const sign = offset >= 0 ? \"+\" : \"-\";\n    const absOffset = Math.abs(offset);\n    const hours = String(Math.floor(absOffset / 60)).padStart(2, \"0\");\n    const minutes = String(absOffset % 60).padStart(2, \"0\");\n    return format(date, \"yyyy-MM-dd'T'HH:mm:ss\") + `${sign}${hours}:${minutes}`;\n}\n\nexport function getLocalTimezone(): string {\n    const offset = -new Date().getTimezoneOffset();\n    const sign = offset >= 0 ? \"+\" : \"-\";\n    const absOffset = Math.abs(offset);\n    const hours = String(Math.floor(absOffset / 60)).padStart(2, \"0\");\n    const minutes = String(absOffset % 60).padStart(2, \"0\");\n    return `${sign}${hours}:${minutes}`;\n}\n\nexport function extractTimezone(isoString: string | Date | unknown): string | undefined {\n    if (typeof isoString !== \"string\") {\n        return undefined;\n    }\n    const match = isoString.match(/([+-]\\d{2}:\\d{2})$/);\n    if (match) {\n        return match[1];\n    }\n    return undefined;\n}\n\nexport function toLocalNaive(isoString: string): Date {\n    return new Date(isoString);\n}\n\nexport function formatWeekValue(date: Date): string {\n    const week = getISOWeek(date);\n    const year = getISOWeekYear(date);\n    return `${year}-W${String(week).padStart(2, \"0\")}`;\n}\n\nexport function parseWeekValue(value: string): { year: number; week: number } | undefined {\n    const match = value.match(/^(\\d{4})-W(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { year: Number(match[1]), week: Number(match[2]) };\n}\n"],"names":["formatDateForDisplay","value","type","displayFormat","format","Date","isoStr","tzMatch","tz","dateWithoutTz","parts","datePart","timeParts","hours","Number","minutes","ampm","h12","parsed","parseMonthValue","MONTH_NAMES_SHORT","parseWeekValue","weekStart","startOfISOWeek","weekEnd","endOfISOWeek","String","range","fmt","dates","months","years","defaultYearRange","centerYear","center","half","Math","DEFAULT_YEAR_RANGE_SIZE","formatMonthValue","year","month","match","formatTimeValue","date","parseTimeValue","time","toIsoWithTz","timezone","offset","sign","absOffset","getLocalTimezone","extractTimezone","isoString","toLocalNaive","formatWeekValue","week","getISOWeek","getISOWeekYear"],"mappings":"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"}
+{"version":3,"file":"DatePicker/utils/dateHelpers.js","sources":["../../../src/DatePicker/utils/dateHelpers.ts"],"sourcesContent":["import { format, getISOWeek, getISOWeekYear, startOfISOWeek, endOfISOWeek } from \"date-fns\";\nimport { DEFAULT_YEAR_RANGE_SIZE, MONTH_NAMES_SHORT } from \"./constants.js\";\n\n/**\n * `new Date(\"2026-10-10\")` is UTC midnight, which is the previous day west of UTC.\n * Bare dates are calendar days, so build them at local midnight instead.\n */\nexport function parseDateValue(value: string | Date | number): Date {\n    if (typeof value === \"string\") {\n        const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n        if (match) {\n            return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));\n        }\n    }\n    return new Date(value);\n}\n\nexport function formatDateForDisplay(\n    value:\n        | Date\n        | string\n        | number\n        | { from?: string; to?: string }\n        | Date[]\n        | string[]\n        | number[]\n        | undefined,\n    type: string,\n    displayFormat?: string\n): string | undefined {\n    if (value === undefined || value === null) {\n        return undefined;\n    }\n\n    switch (type) {\n        case \"date\":\n            return format(parseDateValue(value as string), displayFormat ?? \"PPP\");\n        case \"time\":\n            return value as string;\n        case \"dateTimeLocal\":\n            return format(new Date(value as string), displayFormat ?? \"PPP p\");\n        case \"dateTimeTz\": {\n            if (!value) {\n                return undefined;\n            }\n            const isoStr = value instanceof Date ? value.toISOString() : (value as string);\n            const tzMatch = isoStr.match(/([+-]\\d{2}:\\d{2})$/);\n            const tz = tzMatch ? `UTC${tzMatch[1]}` : \"\";\n            const dateWithoutTz = isoStr.replace(/[+-]\\d{2}:\\d{2}$/, \"\");\n            const parts = dateWithoutTz.split(\"T\");\n            if (parts.length < 2) {\n                return isoStr;\n            }\n            const datePart = new Date(parts[0] + \"T00:00:00\");\n            const timeParts = parts[1].split(\":\");\n            const hours = Number(timeParts[0]);\n            const minutes = timeParts[1] ?? \"00\";\n            const ampm = hours >= 12 ? \"PM\" : \"AM\";\n            const h12 = hours % 12 || 12;\n            if (displayFormat) {\n                return `${format(datePart, displayFormat)} ${h12}:${minutes} ${ampm} (${tz})`;\n            }\n            return `${format(datePart, \"PPP\")} ${h12}:${minutes} ${ampm} (${tz})`;\n        }\n        case \"month\": {\n            if (displayFormat) {\n                const parsed = parseMonthValue(value as string);\n                if (!parsed) {\n                    return undefined;\n                }\n                return format(new Date(parsed.year, parsed.month), displayFormat);\n            }\n            const parsed = parseMonthValue(value as string);\n            if (!parsed) {\n                return undefined;\n            }\n            return `${MONTH_NAMES_SHORT[parsed.month]} ${parsed.year}`;\n        }\n        case \"week\": {\n            const parsed = parseWeekValue(value as string);\n            if (!parsed) {\n                return undefined;\n            }\n            const weekStart = startOfISOWeek(new Date(parsed.year, 0, 4 + (parsed.week - 1) * 7));\n            const weekEnd = endOfISOWeek(weekStart);\n            if (displayFormat) {\n                return `${format(weekStart, displayFormat)} – ${format(weekEnd, displayFormat)}`;\n            }\n            return `Week ${parsed.week}, ${format(weekStart, \"MMM d\")} – ${format(weekEnd, \"MMM d, yyyy\")}`;\n        }\n        case \"year\":\n            return String(value);\n        case \"dateRange\": {\n            const range = value as { from?: string; to?: string };\n            const fmt = displayFormat ?? \"PPP\";\n            if (!range.from) {\n                return undefined;\n            }\n            if (!range.to) {\n                return format(parseDateValue(range.from), fmt);\n            }\n            return `${format(parseDateValue(range.from), fmt)} – ${format(parseDateValue(range.to), fmt)}`;\n        }\n        case \"multipleDates\": {\n            const dates = value as string[];\n            if (dates.length === 0) {\n                return undefined;\n            }\n            return `${dates.length} date${dates.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        case \"multipleMonths\": {\n            const months = value as string[];\n            if (months.length === 0) {\n                return undefined;\n            }\n            return `${months.length} month${months.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        case \"multipleYears\": {\n            const years = value as number[];\n            if (years.length === 0) {\n                return undefined;\n            }\n            return `${years.length} year${years.length > 1 ? \"s\" : \"\"} selected`;\n        }\n        default:\n            return undefined;\n    }\n}\n\nexport function defaultYearRange(centerYear?: number): [number, number] {\n    const center = centerYear ?? new Date().getFullYear();\n    const half = Math.floor(DEFAULT_YEAR_RANGE_SIZE / 2);\n    return [center - half, center + half - 1];\n}\n\nexport function formatMonthValue(year: number, month: number): string {\n    return `${year}-${String(month + 1).padStart(2, \"0\")}`;\n}\n\nexport function parseMonthValue(value: string): { year: number; month: number } | undefined {\n    const match = value.match(/^(\\d{4})-(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { year: Number(match[1]), month: Number(match[2]) - 1 };\n}\n\nexport function formatTimeValue(date: Date): string {\n    return format(date, \"HH:mm\");\n}\n\nexport function parseTimeValue(time: string): { hours: number; minutes: number } | undefined {\n    const match = time.match(/^(\\d{2}):(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { hours: Number(match[1]), minutes: Number(match[2]) };\n}\n\nexport function toIsoWithTz(date: Date, timezone?: string): string {\n    if (timezone) {\n        return format(date, \"yyyy-MM-dd'T'HH:mm:ss\") + timezone;\n    }\n    const offset = -date.getTimezoneOffset();\n    const sign = offset >= 0 ? \"+\" : \"-\";\n    const absOffset = Math.abs(offset);\n    const hours = String(Math.floor(absOffset / 60)).padStart(2, \"0\");\n    const minutes = String(absOffset % 60).padStart(2, \"0\");\n    return format(date, \"yyyy-MM-dd'T'HH:mm:ss\") + `${sign}${hours}:${minutes}`;\n}\n\nexport function getLocalTimezone(): string {\n    const offset = -new Date().getTimezoneOffset();\n    const sign = offset >= 0 ? \"+\" : \"-\";\n    const absOffset = Math.abs(offset);\n    const hours = String(Math.floor(absOffset / 60)).padStart(2, \"0\");\n    const minutes = String(absOffset % 60).padStart(2, \"0\");\n    return `${sign}${hours}:${minutes}`;\n}\n\nexport function extractTimezone(isoString: string | Date | unknown): string | undefined {\n    if (typeof isoString !== \"string\") {\n        return undefined;\n    }\n    const match = isoString.match(/([+-]\\d{2}:\\d{2})$/);\n    if (match) {\n        return match[1];\n    }\n    return undefined;\n}\n\nexport function toLocalNaive(isoString: string): Date {\n    return new Date(isoString);\n}\n\nexport function formatWeekValue(date: Date): string {\n    const week = getISOWeek(date);\n    const year = getISOWeekYear(date);\n    return `${year}-W${String(week).padStart(2, \"0\")}`;\n}\n\nexport function parseWeekValue(value: string): { year: number; week: number } | undefined {\n    const match = value.match(/^(\\d{4})-W(\\d{2})$/);\n    if (!match) {\n        return undefined;\n    }\n    return { year: Number(match[1]), week: Number(match[2]) };\n}\n"],"names":["parseDateValue","value","match","Date","Number","formatDateForDisplay","type","displayFormat","format","isoStr","tzMatch","tz","dateWithoutTz","parts","datePart","timeParts","hours","minutes","ampm","h12","parsed","parseMonthValue","MONTH_NAMES_SHORT","parseWeekValue","weekStart","startOfISOWeek","weekEnd","endOfISOWeek","String","range","fmt","dates","months","years","defaultYearRange","centerYear","center","half","Math","DEFAULT_YEAR_RANGE_SIZE","formatMonthValue","year","month","formatTimeValue","date","parseTimeValue","time","toIsoWithTz","timezone","offset","sign","absOffset","getLocalTimezone","extractTimezone","isoString","toLocalNaive","formatWeekValue","week","getISOWeek","getISOWeekYear"],"mappings":"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"}

package/DatePicker/utils/dateHelpers.test.d.ts

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

package/DatePicker/utils/dateHelpers.test.js

@@ -0,0 +1,32 @@
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { formatDateForDisplay, parseDateValue } from "./dateHelpers.js";
+describe("dateHelpers in a timezone west of UTC", ()=>{
+    const originalTz = process.env.TZ;
+    beforeAll(()=>{
+        process.env.TZ = "America/Chicago";
+    });
+    afterAll(()=>{
+        process.env.TZ = originalTz;
+    });
+    it("should parse a bare date as that calendar day", ()=>{
+        const date = parseDateValue("2026-10-10");
+        expect(date.getFullYear()).toBe(2026);
+        expect(date.getMonth()).toBe(9);
+        expect(date.getDate()).toBe(10);
+    });
+    it("should leave full ISO strings to the Date constructor", ()=>{
+        const date = parseDateValue("2026-10-10T00:00:00.000Z");
+        expect(date.toISOString()).toBe("2026-10-10T00:00:00.000Z");
+    });
+    it("should display a date-only value as the stored day", ()=>{
+        expect(formatDateForDisplay("2026-10-10", "date")).toBe("October 10th, 2026");
+    });
+    it("should display a date range as the stored days", ()=>{
+        expect(formatDateForDisplay({
+            from: "2026-10-10",
+            to: "2026-10-12"
+        }, "dateRange", "yyyy-MM-dd")).toBe("2026-10-10 – 2026-10-12");
+    });
+});
+
+//# sourceMappingURL=dateHelpers.test.js.map

package/DatePicker/utils/dateHelpers.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker/utils/dateHelpers.test.js","sources":["../../../src/DatePicker/utils/dateHelpers.test.ts"],"sourcesContent":["import { afterAll, beforeAll, describe, expect, it } from \"vitest\";\nimport { formatDateForDisplay, parseDateValue } from \"./dateHelpers.js\";\n\ndescribe(\"dateHelpers in a timezone west of UTC\", () => {\n    const originalTz = process.env.TZ;\n\n    beforeAll(() => {\n        process.env.TZ = \"America/Chicago\";\n    });\n\n    afterAll(() => {\n        process.env.TZ = originalTz;\n    });\n\n    it(\"should parse a bare date as that calendar day\", () => {\n        const date = parseDateValue(\"2026-10-10\");\n        expect(date.getFullYear()).toBe(2026);\n        expect(date.getMonth()).toBe(9);\n        expect(date.getDate()).toBe(10);\n    });\n\n    it(\"should leave full ISO strings to the Date constructor\", () => {\n        const date = parseDateValue(\"2026-10-10T00:00:00.000Z\");\n        expect(date.toISOString()).toBe(\"2026-10-10T00:00:00.000Z\");\n    });\n\n    it(\"should display a date-only value as the stored day\", () => {\n        expect(formatDateForDisplay(\"2026-10-10\", \"date\")).toBe(\"October 10th, 2026\");\n    });\n\n    it(\"should display a date range as the stored days\", () => {\n        expect(\n            formatDateForDisplay(\n                { from: \"2026-10-10\", to: \"2026-10-12\" },\n                \"dateRange\",\n                \"yyyy-MM-dd\"\n            )\n        ).toBe(\"2026-10-10 – 2026-10-12\");\n    });\n});\n"],"names":["describe","originalTz","process","beforeAll","afterAll","it","date","parseDateValue","expect","formatDateForDisplay"],"mappings":";;AAGAA,SAAS,yCAAyC;IAC9C,MAAMC,aAAaC,QAAQ,GAAG,CAAC,EAAE;IAEjCC,UAAU;QACND,QAAQ,GAAG,CAAC,EAAE,GAAG;IACrB;IAEAE,SAAS;QACLF,QAAQ,GAAG,CAAC,EAAE,GAAGD;IACrB;IAEAI,GAAG,iDAAiD;QAChD,MAAMC,OAAOC,eAAe;QAC5BC,OAAOF,KAAK,WAAW,IAAI,IAAI,CAAC;QAChCE,OAAOF,KAAK,QAAQ,IAAI,IAAI,CAAC;QAC7BE,OAAOF,KAAK,OAAO,IAAI,IAAI,CAAC;IAChC;IAEAD,GAAG,yDAAyD;QACxD,MAAMC,OAAOC,eAAe;QAC5BC,OAAOF,KAAK,WAAW,IAAI,IAAI,CAAC;IACpC;IAEAD,GAAG,sDAAsD;QACrDG,OAAOC,qBAAqB,cAAc,SAAS,IAAI,CAAC;IAC5D;IAEAJ,GAAG,kDAAkD;QACjDG,OACIC,qBACI;YAAE,MAAM;YAAc,IAAI;QAAa,GACvC,aACA,eAEN,IAAI,CAAC;IACX;AACJ"}

package/Drawer/Drawer.d.ts

@@ -9,6 +9,10 @@ interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DrawerRoot>,
     showCloseButton?: boolean;
     bodyPadding?: boolean;
     headerSeparator?: boolean;
+    /**
+     * Controls rendered in the header, next to the close button.
+     */
+    headerActions?: React.ReactNode;
     footerSeparator?: boolean;
     description?: React.ReactNode;
     children: React.ReactNode;
@@ -79,21 +83,21 @@ declare const Drawer: typeof DrawerBase & {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Icon: (({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element) & {
-        original: ({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element;
+    Icon: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").IconProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element;
+        original: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element) & {
-            original: ({ className, ...props }: import("../index.js").IconProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;

package/Drawer/Drawer.js

@@ -13,7 +13,7 @@ import { CancelButton } from "./components/CancelButton.js";
 import * as __rspack_external_react from "react";
 const DrawerBase = (props)=>{
     const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } = __rspack_external_react.useMemo(()=>{
-        const { defaultOpen, open, onOpenChange: originalOnOpenChange, onClose, onOpen, modal = false, dir, trigger, title, icon, description, showCloseButton, headerSeparator, children, bodyPadding, actions, info, footerSeparator, ...rest } = props;
+        const { defaultOpen, open, onOpenChange: originalOnOpenChange, onClose, onOpen, modal = false, dir, trigger, title, icon, description, showCloseButton, headerSeparator, headerActions, children, bodyPadding, actions, info, footerSeparator, ...rest } = props;
         const onOpenChange = (open)=>{
             originalOnOpenChange && originalOnOpenChange(open);
             if (onClose && !open) onClose();
@@ -35,6 +35,7 @@ const DrawerBase = (props)=>{
                 icon,
                 description,
                 showCloseButton,
+                headerActions,
                 separator: headerSeparator
             },
             bodyProps: {

package/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer/Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { DrawerContent } from \"./components/DrawerContent.js\";\nimport { DrawerFooter } from \"./components/DrawerFooter.js\";\nimport { DrawerHeader } from \"./components/DrawerHeader.js\";\nimport { DrawerOverlay } from \"./components/DrawerOverlay.js\";\nimport { DrawerPortal } from \"./components/DrawerPortal.js\";\nimport { DrawerRoot } from \"./components/DrawerRoot.js\";\nimport { DrawerTrigger } from \"./components/DrawerTrigger.js\";\nimport { DrawerBody } from \"~/Drawer/components/DrawerBody.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmButton } from \"./components/ConfirmButton.js\";\nimport { CancelButton } from \"./components/CancelButton.js\";\n\ninterface DrawerProps\n    extends\n        React.ComponentPropsWithoutRef<typeof DrawerRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DrawerContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    modal?: boolean;\n    showCloseButton?: boolean;\n    bodyPadding?: boolean;\n    headerSeparator?: boolean;\n    footerSeparator?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    width?: React.CSSProperties[\"width\"];\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DrawerBase = (props: DrawerProps) => {\n    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =\n        React.useMemo(() => {\n            const {\n                // Root props.\n                defaultOpen,\n                open,\n                onOpenChange: originalOnOpenChange,\n                onClose,\n                onOpen,\n\n                // We want the drawer to always allow interaction with the outside elements.\n                modal = false,\n                dir,\n\n                // Trigger props.\n                trigger,\n\n                // Header props.\n                title,\n                icon,\n                description,\n                showCloseButton,\n                headerSeparator,\n\n                // Body props.\n                children,\n                bodyPadding,\n\n                // Footer props.\n                actions,\n                info,\n                footerSeparator,\n\n                // Content props.\n                ...rest\n            } = props;\n\n            // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n            const onOpenChange = (open: boolean) => {\n                originalOnOpenChange && originalOnOpenChange(open);\n\n                if (onClose && !open) {\n                    onClose();\n                }\n\n                if (onOpen && open) {\n                    onOpen();\n                }\n            };\n\n            return {\n                rootProps: {\n                    defaultOpen,\n                    open,\n                    onOpenChange,\n                    modal,\n                    dir\n                },\n                triggerProps: {\n                    // Temporary fix. We need this because `ref` doesn't get passed to components\n                    // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                    children: <div>{trigger}</div>\n                },\n                headerProps: {\n                    title,\n                    icon,\n                    description,\n                    showCloseButton,\n                    separator: headerSeparator\n                },\n                bodyProps: { children, bodyPadding },\n                footerProps: { info, actions, separator: footerSeparator },\n                contentProps: rest\n            };\n        }, [props]);\n\n    return (\n        <DrawerRoot {...rootProps}>\n            {triggerProps.children && <DrawerTrigger {...triggerProps} asChild />}\n            <DrawerPortal>\n                <div data-role=\"drawer\" className={\"absolute z-overlay\"}>\n                    {rootProps.modal && <DrawerOverlay />}\n                    <DrawerContent {...contentProps} modal={rootProps.modal}>\n                        <DrawerHeader {...headerProps} />\n                        <DrawerBody {...bodyProps} />\n                        <DrawerFooter {...footerProps} />\n                    </DrawerContent>\n                </div>\n            </DrawerPortal>\n        </DrawerRoot>\n    );\n};\n\nDrawerBase.displayName = \"Drawer\";\n\nconst DecoratableDrawer = makeDecoratable(\"Drawer\", DrawerBase);\n\nconst Drawer = withStaticProps(DecoratableDrawer, {\n    ConfirmButton,\n    CancelButton,\n    Icon\n});\n\nexport { Drawer, type DrawerProps };\n"],"names":["DrawerBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","React","defaultOpen","open","originalOnOpenChange","onClose","onOpen","modal","dir","trigger","title","icon","description","showCloseButton","headerSeparator","children","bodyPadding","actions","info","footerSeparator","rest","onOpenChange","DrawerRoot","DrawerTrigger","DrawerPortal","DrawerOverlay","DrawerContent","DrawerHeader","DrawerBody","DrawerFooter","DecoratableDrawer","makeDecoratable","Drawer","withStaticProps","ConfirmButton","CancelButton","Icon"],"mappings":";;;;;;;;;;;;;AAmCA,MAAMA,aAAa,CAACC;IAChB,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAChFC,wBAAAA,OAAa,CAAC;QACV,MAAM,EAEFC,WAAW,EACXC,IAAI,EACJ,cAAcC,oBAAoB,EAClCC,OAAO,EACPC,MAAM,EAGNC,QAAQ,KAAK,EACbC,GAAG,EAGHC,OAAO,EAGPC,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,eAAe,EACfC,eAAe,EAGfC,QAAQ,EACRC,WAAW,EAGXC,OAAO,EACPC,IAAI,EACJC,eAAe,EAGf,GAAGC,MACN,GAAG1B;QAGJ,MAAM2B,eAAe,CAAClB;YAClBC,wBAAwBA,qBAAqBD;YAE7C,IAAIE,WAAW,CAACF,MACZE;YAGJ,IAAIC,UAAUH,MACVG;QAER;QAEA,OAAO;YACH,WAAW;gBACPJ;gBACAC;gBACAkB;gBACAd;gBACAC;YACJ;YACA,cAAc;gBAGV,UAAU,WAAV,GAAU,sCAAC,aAAKC;YACpB;YACA,aAAa;gBACTC;gBACAC;gBACAC;gBACAC;gBACA,WAAWC;YACf;YACA,WAAW;gBAAEC;gBAAUC;YAAY;YACnC,aAAa;gBAAEE;gBAAMD;gBAAS,WAAWE;YAAgB;YACzD,cAAcC;QAClB;IACJ,GAAG;QAAC1B;KAAM;IAEd,OAAO,WAAP,GACI,sCAAC4B,YAAe3B,WACXC,aAAa,QAAQ,IAAI,WAAJ,GAAI,sCAAC2B,eAAaA;QAAE,GAAG3B,YAAY;QAAE;sBAC3D,sCAAC4B,cAAYA,MAAAA,WAAAA,GACT,sCAAC;QAAI,aAAU;QAAS,WAAW;OAC9B7B,UAAU,KAAK,IAAI,WAAJ,GAAI,sCAAC8B,eAAaA,OAAAA,WAAAA,GAClC,sCAACC,eAAaA;QAAE,GAAG7B,YAAY;QAAE,OAAOF,UAAU,KAAK;qBACnD,sCAACgC,cAAiB7B,cAAAA,WAAAA,GAClB,sCAAC8B,YAAe7B,YAAAA,WAAAA,GAChB,sCAAC8B,cAAiB7B;AAM1C;AAEAP,WAAW,WAAW,GAAG;AAEzB,MAAMqC,oBAAoBC,gBAAgB,UAAUtC;AAEpD,MAAMuC,SAASC,gBAAgBH,mBAAmB;IAC9CI,eAAaA;IACbC,cAAYA;IACZC,MAAIA;AACR"}
+{"version":3,"file":"Drawer/Drawer.js","sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { DrawerContent } from \"./components/DrawerContent.js\";\nimport { DrawerFooter } from \"./components/DrawerFooter.js\";\nimport { DrawerHeader } from \"./components/DrawerHeader.js\";\nimport { DrawerOverlay } from \"./components/DrawerOverlay.js\";\nimport { DrawerPortal } from \"./components/DrawerPortal.js\";\nimport { DrawerRoot } from \"./components/DrawerRoot.js\";\nimport { DrawerTrigger } from \"./components/DrawerTrigger.js\";\nimport { DrawerBody } from \"~/Drawer/components/DrawerBody.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmButton } from \"./components/ConfirmButton.js\";\nimport { CancelButton } from \"./components/CancelButton.js\";\n\ninterface DrawerProps\n    extends\n        React.ComponentPropsWithoutRef<typeof DrawerRoot>,\n        Omit<React.ComponentPropsWithoutRef<typeof DrawerContent>, \"title\"> {\n    trigger?: React.ReactNode;\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    modal?: boolean;\n    showCloseButton?: boolean;\n    bodyPadding?: boolean;\n    headerSeparator?: boolean;\n    /**\n     * Controls rendered in the header, next to the close button.\n     */\n    headerActions?: React.ReactNode;\n    footerSeparator?: boolean;\n    description?: React.ReactNode;\n    children: React.ReactNode;\n    actions?: React.ReactNode;\n    info?: React.ReactNode;\n    width?: React.CSSProperties[\"width\"];\n    onClose?: () => void;\n    onOpen?: () => void;\n}\n\nconst DrawerBase = (props: DrawerProps) => {\n    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =\n        React.useMemo(() => {\n            const {\n                // Root props.\n                defaultOpen,\n                open,\n                onOpenChange: originalOnOpenChange,\n                onClose,\n                onOpen,\n\n                // We want the drawer to always allow interaction with the outside elements.\n                modal = false,\n                dir,\n\n                // Trigger props.\n                trigger,\n\n                // Header props.\n                title,\n                icon,\n                description,\n                showCloseButton,\n                headerSeparator,\n                headerActions,\n\n                // Body props.\n                children,\n                bodyPadding,\n\n                // Footer props.\n                actions,\n                info,\n                footerSeparator,\n\n                // Content props.\n                ...rest\n            } = props;\n\n            // Handles dialog open state changes, calling original and onClose / onOpen callbacks as needed\n            const onOpenChange = (open: boolean) => {\n                originalOnOpenChange && originalOnOpenChange(open);\n\n                if (onClose && !open) {\n                    onClose();\n                }\n\n                if (onOpen && open) {\n                    onOpen();\n                }\n            };\n\n            return {\n                rootProps: {\n                    defaultOpen,\n                    open,\n                    onOpenChange,\n                    modal,\n                    dir\n                },\n                triggerProps: {\n                    // Temporary fix. We need this because `ref` doesn't get passed to components\n                    // that are decorated with `makeDecoratable`. This will be fixed in the future.\n                    children: <div>{trigger}</div>\n                },\n                headerProps: {\n                    title,\n                    icon,\n                    description,\n                    showCloseButton,\n                    headerActions,\n                    separator: headerSeparator\n                },\n                bodyProps: { children, bodyPadding },\n                footerProps: { info, actions, separator: footerSeparator },\n                contentProps: rest\n            };\n        }, [props]);\n\n    return (\n        <DrawerRoot {...rootProps}>\n            {triggerProps.children && <DrawerTrigger {...triggerProps} asChild />}\n            <DrawerPortal>\n                <div data-role=\"drawer\" className={\"absolute z-overlay\"}>\n                    {rootProps.modal && <DrawerOverlay />}\n                    <DrawerContent {...contentProps} modal={rootProps.modal}>\n                        <DrawerHeader {...headerProps} />\n                        <DrawerBody {...bodyProps} />\n                        <DrawerFooter {...footerProps} />\n                    </DrawerContent>\n                </div>\n            </DrawerPortal>\n        </DrawerRoot>\n    );\n};\n\nDrawerBase.displayName = \"Drawer\";\n\nconst DecoratableDrawer = makeDecoratable(\"Drawer\", DrawerBase);\n\nconst Drawer = withStaticProps(DecoratableDrawer, {\n    ConfirmButton,\n    CancelButton,\n    Icon\n});\n\nexport { Drawer, type DrawerProps };\n"],"names":["DrawerBase","props","rootProps","triggerProps","contentProps","headerProps","bodyProps","footerProps","React","defaultOpen","open","originalOnOpenChange","onClose","onOpen","modal","dir","trigger","title","icon","description","showCloseButton","headerSeparator","headerActions","children","bodyPadding","actions","info","footerSeparator","rest","onOpenChange","DrawerRoot","DrawerTrigger","DrawerPortal","DrawerOverlay","DrawerContent","DrawerHeader","DrawerBody","DrawerFooter","DecoratableDrawer","makeDecoratable","Drawer","withStaticProps","ConfirmButton","CancelButton","Icon"],"mappings":";;;;;;;;;;;;;AAuCA,MAAMA,aAAa,CAACC;IAChB,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAEC,WAAW,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAChFC,wBAAAA,OAAa,CAAC;QACV,MAAM,EAEFC,WAAW,EACXC,IAAI,EACJ,cAAcC,oBAAoB,EAClCC,OAAO,EACPC,MAAM,EAGNC,QAAQ,KAAK,EACbC,GAAG,EAGHC,OAAO,EAGPC,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,eAAe,EACfC,eAAe,EACfC,aAAa,EAGbC,QAAQ,EACRC,WAAW,EAGXC,OAAO,EACPC,IAAI,EACJC,eAAe,EAGf,GAAGC,MACN,GAAG3B;QAGJ,MAAM4B,eAAe,CAACnB;YAClBC,wBAAwBA,qBAAqBD;YAE7C,IAAIE,WAAW,CAACF,MACZE;YAGJ,IAAIC,UAAUH,MACVG;QAER;QAEA,OAAO;YACH,WAAW;gBACPJ;gBACAC;gBACAmB;gBACAf;gBACAC;YACJ;YACA,cAAc;gBAGV,UAAU,WAAV,GAAU,sCAAC,aAAKC;YACpB;YACA,aAAa;gBACTC;gBACAC;gBACAC;gBACAC;gBACAE;gBACA,WAAWD;YACf;YACA,WAAW;gBAAEE;gBAAUC;YAAY;YACnC,aAAa;gBAAEE;gBAAMD;gBAAS,WAAWE;YAAgB;YACzD,cAAcC;QAClB;IACJ,GAAG;QAAC3B;KAAM;IAEd,OAAO,WAAP,GACI,sCAAC6B,YAAe5B,WACXC,aAAa,QAAQ,IAAI,WAAJ,GAAI,sCAAC4B,eAAaA;QAAE,GAAG5B,YAAY;QAAE;sBAC3D,sCAAC6B,cAAYA,MAAAA,WAAAA,GACT,sCAAC;QAAI,aAAU;QAAS,WAAW;OAC9B9B,UAAU,KAAK,IAAI,WAAJ,GAAI,sCAAC+B,eAAaA,OAAAA,WAAAA,GAClC,sCAACC,eAAaA;QAAE,GAAG9B,YAAY;QAAE,OAAOF,UAAU,KAAK;qBACnD,sCAACiC,cAAiB9B,cAAAA,WAAAA,GAClB,sCAAC+B,YAAe9B,YAAAA,WAAAA,GAChB,sCAAC+B,cAAiB9B;AAM1C;AAEAP,WAAW,WAAW,GAAG;AAEzB,MAAMsC,oBAAoBC,gBAAgB,UAAUvC;AAEpD,MAAMwC,SAASC,gBAAgBH,mBAAmB;IAC9CI,eAAaA;IACbC,cAAYA;IACZC,MAAIA;AACR"}

package/Drawer/Drawer.stories.d.ts

@@ -16,5 +16,6 @@ export declare const CustomWidth: Story;
 export declare const WithTabs: Story;
 export declare const DropdownMenuInDrawer: Story;
 export declare const WithIcon: Story;
+export declare const WithHeaderActions: Story;
 export declare const AsModal: Story;
 export declare const Documentation: Story;

package/Drawer/Drawer.stories.js

@@ -1,9 +1,10 @@
 import react from "react";
 import { Drawer } from "./Drawer.js";
-import { Button } from "../Button/index.js";
+import { Button, IconButton } from "../Button/index.js";
 import { DropdownMenu } from "../DropdownMenu/index.js";
 import { Tabs } from "../Tabs/index.js";
 import { ReactComponent } from "@webiny/icons/ring_volume.svg";
+import { ReactComponent as refresh_svg_ReactComponent } from "@webiny/icons/refresh.svg";
 const meta = {
     title: "Components/Drawer",
     component: Drawer,
@@ -198,6 +199,20 @@ const WithIcon = {
         children: /*#__PURE__*/ react.createElement(react.Fragment, null, "The icon helps to visually identify the purpose of this drawer.")
     }
 };
+const WithHeaderActions = {
+    args: {
+        ...Default.args,
+        headerActions: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "md",
+            iconSize: "lg",
+            title: "Refresh",
+            "aria-label": "Refresh",
+            icon: /*#__PURE__*/ react.createElement(refresh_svg_ReactComponent, null)
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "Header actions sit next to the close button.")
+    }
+};
 const AsModal = {
     args: {
         ...Default.args,
@@ -287,6 +302,9 @@ const Documentation = {
             control: "boolean",
             defaultValue: true
         },
+        headerActions: {
+            description: "Controls rendered in the header, next to the close button, e.g. icon buttons."
+        },
         footerSeparator: {
             description: "Show separator above the footer",
             control: "boolean",
@@ -307,6 +325,6 @@ const Documentation = {
     }
 };
 export default Drawer_stories;
-export { AsModal, ControlledVisibility, CustomWidth, Default, Documentation, DropdownMenuInDrawer, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, WithDropdownMenu, WithIcon, WithOpenCloseEventHandler, WithTabs, WithoutCloseButton };
+export { AsModal, ControlledVisibility, CustomWidth, Default, Documentation, DropdownMenuInDrawer, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, WithDropdownMenu, WithHeaderActions, WithIcon, WithOpenCloseEventHandler, WithTabs, WithoutCloseButton };
 
 //# sourceMappingURL=Drawer.stories.js.map

package/Drawer/Drawer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer/Drawer.stories.js","sources":["../../src/Drawer/Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Drawer } from \"./Drawer.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key=\"account\"\n                            value=\"account\"\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"company\"\n                            value=\"company\"\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"security\"\n                            value=\"security\"\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"development\"\n                            value=\"development\"\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDrawer: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item content={\"Billing\"} />\n                    <DropdownMenu.Item content={\"Settings\"} />\n                    <DropdownMenu.Item content={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md, mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.'\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["meta","Drawer","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","CustomWidth","WithTabs","Tabs","DropdownMenuInDrawer","WithIcon","DoorbellIcon","AsModal","Documentation","args","undefined"],"mappings":";;;;;;AAQA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;AACf;AAEA,uBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAACC,QAAMA;YAAC,SAAQ;YAAU,MAAM;;QACzC,OAAO;QACP,aAAa;QACb,MAAM,WAAN,GACI,0CAAE,wCACwB,oBAAC;YAAE,MAAM;WAAK,SAAQ;QAGpD,UAAU,WAAV,GACI,wDACI,oBAAC;YAAE,WAAW;WAAS,gYAOvB,oBAAC;YAAE,WAAW;WAAS,2aAQvB,oBAAC;YAAE,WAAW;WAAS,2ZAOvB,oBAAC;YAAE,WAAW;WAAS;QAO/B,cAAcC,CAAAA;YACVC,QAAQ,GAAG,CAAC,CAAC,UAAU,EAAED,SAAS,WAAW,SAAS,CAAC,CAAC;QAC5D;QACA,SAAS,WAAT,GACI,wDACI,oBAACH,OAAO,YAAY,uBACpB,oBAACA,OAAO,aAAa;QAG7B,aAAa;QACb,iBAAiB;QACjB,iBAAiB;IACrB;IACA,UAAU,CAAC;AACf;AAEO,MAAMK,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMM,YAAmB;IAC5B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,iBAAwB;IACjC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,uBAA8B;IACvC,QAAQC,CAAAA;QACJ,MAAM,CAACC,MAAMC,QAAQ,GAAGC,MAAAA,QAAc,CAAC;QAEvC,OAAO,WAAP,GACI,wDACI,oBAACX,QAAMA;YAAC,SAAQ;YAAU,MAAM;YAAQ,SAAS,IAAMU,QAAQ;0BAC/D,oBAACZ,QAAMA;YACF,GAAGU,KAAK;YACT,MAAMC;YACN,cAAcA,CAAAA;gBACV,IAAI,CAACA,MACDC,QAAQ;YAEhB;;IAIhB;IACA,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,SAAS;QACT,UAAU,WAAV,GAAU,0CAAE;IAChB;AACJ;AAEO,MAAMa,4BAAmC;IAC5C,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;YACLG,QAAQ,GAAG,CAAC;QAChB;QACA,QAAQ;YACJA,QAAQ,GAAG,CAAC;QAChB;IACJ;AACJ;AAEO,MAAMW,mBAA0B;IACnC,QAAQL,CAAAA;QACJ,MAAM,CAACC,MAAMC,QAAQ,GAAGC,MAAAA,QAAc,CAAC;QAEvC,OAAO,WAAP,GACI,wDACI,oBAACG,cAAYA;YAAC,uBAAS,oBAACd,QAAMA;gBAAC,SAAQ;gBAAU,MAAM;;yBACnD,oBAACc,aAAa,IAAI;YACd,MAAM;YACN,SAAS;YACT,SAAS,IAAMJ,QAAQ;2BAI/B,oBAACZ,QAAMA;YAAE,GAAGU,KAAK;YAAE,MAAMC;YAAM,cAAc,IAAMC,QAAQ;;IAGvE;IACA,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,SAAS;QACT,UAAU,WAAV,GAAU,0CAAE;IAChB;AACJ;AAEO,MAAMgB,qBAA4B;IACrC,MAAM;QACF,GAAGhB,QAAQ,IAAI;QACf,iBAAiB;QACjB,UAAU,WAAV,GAAU,0CAAE;IAChB;AACJ;AAEO,MAAMiB,cAAqB;IAC9B,MAAM;QACF,GAAGjB,QAAQ,IAAI;QACf,OAAO;QACP,UAAU,WAAV,GAAU,0CAAE;IAChB;AACJ;AAEO,MAAMkB,WAAkB;IAC3B,MAAM;QACF,GAAGlB,QAAQ,IAAI;QACf,aAAa;QACb,iBAAiB;QACjB,UAAU,WAAV,GACI,wDACI,oBAACmB,MAAIA;YACD,WAAW;YACX,SAAS;YACT,MAAM;8BACF,oBAACA,KAAK,GAAG;oBACL,KAAI;oBACJ,OAAM;oBACN,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAI;oBACJ,OAAM;oBACN,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAI;oBACJ,OAAM;oBACN,SAAS;oBACT,SAAS;;8BAEb,oBAACA,KAAK,GAAG;oBACL,KAAI;oBACJ,OAAM;oBACN,SAAS;oBACT,SAAS;;aAEhB;;IAIjB;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,GAAGpB,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDACI,oBAACe,cAAYA;YAAC,uBAAS,oBAACd,QAAMA;gBAAC,SAAQ;gBAAU,MAAM;;yBACnD,oBAACc,aAAa,IAAI;YAAC,SAAS;0BAC5B,oBAACA,aAAa,IAAI;YAAC,SAAS;0BAC5B,oBAACA,aAAa,IAAI;YAAC,SAAS;;IAI5C;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGrB,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACD,OAAO,IAAI;YAAC,oBAAM,oBAACuB,gBAAYA;YAAK,OAAO;;QAClD,UAAU,WAAV,GAAU,0CAAE;IAChB;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,GAAGvB,QAAQ,IAAI;QACf,OAAO;QACP,UAAU,WAAV,GACI,0CAAE;IAKV;AACJ;AAEO,MAAMwB,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACf,MAAMC,QAAQ,GAAGC,MAAAA,QAAc,CAAC;QAEvC,OAAO,WAAP,GACI,wDACI,oBAACX,QAAMA;YAAC,SAAQ;YAAU,MAAK;YAAc,SAAS,IAAMU,QAAQ;0BAEpE,oBAACZ,QAAMA;YAAE,GAAG0B,IAAI;YAAE,MAAMf;YAAM,cAAcA,CAAAA,OAAQC,QAAQD;;IAGxE;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,iBAAiB;QACjB,aAAa;QACb,iBAAiB;QACjB,iBAAiB;QACjB,MAAM;QACN,OAAO;QACP,MAAM,WAAN,GACI,0CAAE,wCACwB,oBAAC;YAAE,MAAM;WAAK,SAAQ;QAGpD,UAAU,WAAV,GACI,wDACI,oBAAC;YAAE,WAAW;WAAgB,sIAI9B,oBAAC;YAAE,WAAW;WAAS;QAM/B,SAAS,WAAT,GACI,wDACI,oBAACX,OAAO,YAAY,uBACpB,oBAACA,OAAO,aAAa;QAG7B,OAAO2B;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAQ;YAC1B,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,MAAM;YACF,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;IACJ;AACJ"}
+{"version":3,"file":"Drawer/Drawer.stories.js","sources":["../../src/Drawer/Drawer.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Drawer } from \"./Drawer.js\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as DoorbellIcon } from \"@webiny/icons/ring_volume.svg\";\nimport { ReactComponent as RefreshIcon } from \"@webiny/icons/refresh.svg\";\n\nconst meta: Meta<typeof Drawer> = {\n    title: \"Components/Drawer\",\n    component: Drawer,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Drawer>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        title: \"Drawer Title\",\n        description: \"A short dialog description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md\"}>\n                    The amazing, splendid, and most useful umbrella, resistant to rain and friendly\n                    to winds, is something that deserves all admiration. Crafted with perfect\n                    textures, it bravely withstands storms and gently shades the rays of the sun. A\n                    remarkable innovation, with an ergonomically designed grip most suited to the\n                    hand, it remains stable even in the fiercest weather.\n                </p>\n                <p className={\"mb-md\"}>\n                    Its fabric, woven from the highest quality materials, ensures that you stay dry,\n                    no matter the intensity of the rain. With a frame engineered for strength yet\n                    lightweight enough to carry with ease, this umbrella is a marvel of modern\n                    design. Not just a shield against the elements, but a companion in your everyday\n                    journey, it provides peace of mind, knowing you’re prepared for whatever the\n                    skies may bring.\n                </p>\n                <p className={\"mb-md\"}>\n                    The sleek, stylish design complements any outfit, making it not only a practical\n                    accessory but also a fashion statement. With its smooth opening mechanism, you\n                    can effortlessly transition from a sunny day to a rainy one without missing a\n                    beat. Whether you are navigating through a busy city street or enjoying a quiet\n                    stroll in the park, this umbrella offers unmatched comfort and protection.\n                </p>\n                <p className={\"mb-md\"}>\n                    Indeed, it is not just an umbrella — it is an experience. One that elevates your\n                    daily routine, making every step in both sun and storm feel just a little bit\n                    brighter.\n                </p>\n            </>\n        ),\n        onOpenChange: opened => {\n            console.log(`Drawer is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true\n    },\n    argTypes: {}\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const ControlledVisibility: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text={\"Open\"} onClick={() => setOpen(true)} />\n                <Drawer\n                    {...props}\n                    open={open}\n                    onOpenChange={open => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                    }}\n                />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer&apos;s visibility is controlled by the open state.</>\n    }\n};\n\nexport const WithOpenCloseEventHandler: Story = {\n    args: {\n        ...Default.args,\n        onClose: () => {\n            console.log(\"onClose triggered\");\n        },\n        onOpen: () => {\n            console.log(\"onOpen triggered\");\n        }\n    }\n};\n\nexport const WithDropdownMenu: Story = {\n    render: props => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item\n                        text={\"Open Drawer\"}\n                        content={\"Open Drawer\"}\n                        onClick={() => setOpen(true)}\n                    />\n                </DropdownMenu>\n\n                <Drawer {...props} open={open} onOpenChange={() => setOpen(false)} />\n            </>\n        );\n    },\n    args: {\n        ...Default.args,\n        trigger: null,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const WithoutCloseButton: Story = {\n    args: {\n        ...Default.args,\n        showCloseButton: false,\n        children: <>This drawer is opened from a dropdown menu item.</>\n    }\n};\n\nexport const CustomWidth: Story = {\n    args: {\n        ...Default.args,\n        width: 1000,\n        children: <>This drawer has a custom width of 1000px, making it wider than the default.</>\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        headerSeparator: false,\n        children: (\n            <>\n                <Tabs\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key=\"account\"\n                            value=\"account\"\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"company\"\n                            value=\"company\"\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"security\"\n                            value=\"security\"\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key=\"development\"\n                            value=\"development\"\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const DropdownMenuInDrawer: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item content={\"Billing\"} />\n                    <DropdownMenu.Item content={\"Settings\"} />\n                    <DropdownMenu.Item content={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Drawer.Icon icon={<DoorbellIcon />} label={\"Icon label...\"} />,\n        children: <>The icon helps to visually identify the purpose of this drawer.</>\n    }\n};\n\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        headerActions: (\n            <IconButton\n                variant={\"ghost\"}\n                size={\"md\"}\n                iconSize={\"lg\"}\n                title={\"Refresh\"}\n                aria-label={\"Refresh\"}\n                icon={<RefreshIcon />}\n            />\n        ),\n        children: <>Header actions sit next to the close button.</>\n    }\n};\n\nexport const AsModal: Story = {\n    args: {\n        ...Default.args,\n        modal: true,\n        children: (\n            <>\n                This drawer has modal=true, which means it will show an overlay behind it and\n                prevent interaction with the content underneath.\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n            <>\n                <Button variant=\"primary\" text=\"Open Drawer\" onClick={() => setOpen(true)} />\n\n                <Drawer {...args} open={open} onOpenChange={open => setOpen(open)} />\n            </>\n        );\n    },\n    args: {\n        title: \"Drawer Title\",\n        description: \"A short drawer description.\",\n        showCloseButton: true,\n        bodyPadding: true,\n        headerSeparator: true,\n        footerSeparator: true,\n        side: \"right\",\n        modal: false,\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                <p className={\"mb-md, mt-md\"}>\n                    This is the drawer content area. You can place any content here including forms,\n                    text, images, or other components.\n                </p>\n                <p className={\"mb-md\"}>\n                    Drawers are useful for displaying additional information or actions without\n                    navigating away from the current page.\n                </p>\n            </>\n        ),\n        actions: (\n            <>\n                <Drawer.CancelButton />\n                <Drawer.ConfirmButton />\n            </>\n        ),\n        width: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Title displayed in the header\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Description displayed below the title\",\n            control: \"text\"\n        },\n        side: {\n            description: \"Side from which the drawer appears\",\n            control: \"select\",\n            options: [\"left\", \"right\"],\n            defaultValue: \"right\"\n        },\n        size: {\n            description: \"Controls the size of the drawer\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        showCloseButton: {\n            description: \"Show close button in the top-right corner\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        modal: {\n            description: \"Whether the drawer should behave as a modal\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        bodyPadding: {\n            description: \"Add padding to the drawer body\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerSeparator: {\n            description: \"Show separator below the header\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        headerActions: {\n            description:\n                \"Controls rendered in the header, next to the close button, e.g. icon buttons.\"\n        },\n        footerSeparator: {\n            description: \"Show separator above the footer\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        width: {\n            description:\n                'Width defines the horizontal size of the Drawer and accepts any valid CSS width value. You can pass a number (interpreted as pixels) or a string like \"80%\", \"50vw\", \"auto\", etc., following React.CSSProperties[\"width\"] types.'\n        },\n        info: {\n            description:\n                \"Additional info displayed below the description, please refer to the example below for details.\"\n        },\n        children: {\n            description:\n                \"Content of the Drawer, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details.\"\n        },\n        actions: {\n            description:\n                \"Actions displayed in the footer, please refer to the code example for details.\"\n        }\n    }\n};\n"],"names":["meta","Drawer","Default","Button","opened","console","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","ControlledVisibility","props","open","setOpen","React","WithOpenCloseEventHandler","WithDropdownMenu","DropdownMenu","WithoutCloseButton","CustomWidth","WithTabs","Tabs","DropdownMenuInDrawer","WithIcon","DoorbellIcon","WithHeaderActions","IconButton","RefreshIcon","AsModal","Documentation","args","undefined"],"mappings":"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,OAAO,YAAY,uBACpB,oBAACA,OAAO,aAAa;QAG7B,OAAO8B;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAQ;YAC1B,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,eAAe;YACX,aACI;QACR;QACA,iBAAiB;YACb,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,OAAO;YACH,aACI;QACR;QACA,MAAM;YACF,aACI;QACR;QACA,UAAU;YACN,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;IACJ;AACJ"}

package/Drawer/components/DrawerHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type DrawerProps } from "../Drawer.js";
-export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pick<DrawerProps, "title" | "icon" | "description" | "showCloseButton"> & {
+export type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & Pick<DrawerProps, "title" | "icon" | "description" | "showCloseButton" | "headerActions"> & {
     separator?: DrawerProps["headerSeparator"];
 };
-export declare const DrawerHeader: ({ title, icon, description, showCloseButton, separator, className, ...props }: DrawerHeaderProps) => React.JSX.Element | null;
+export declare const DrawerHeader: ({ title, icon, description, showCloseButton, headerActions, separator, className, ...props }: DrawerHeaderProps) => React.JSX.Element | null;

package/Drawer/components/DrawerHeader.js

@@ -6,29 +6,32 @@ import { IconButton } from "../../Button/index.js";
 import { Dialog } from "radix-ui";
 import { Separator } from "../../Separator/index.js";
 import * as __rspack_external_react from "react";
-const DrawerHeader = ({ title, icon, description, showCloseButton, separator, className, ...props })=>{
-    const nothingToRender = (0, __rspack_external_react.useMemo)(()=>!title && !description && !icon && !showCloseButton, [
+const DrawerHeader = ({ title, icon, description, showCloseButton, headerActions, separator, className, ...props })=>{
+    const nothingToRender = (0, __rspack_external_react.useMemo)(()=>!title && !description && !icon && !showCloseButton && !headerActions, [
         title,
         description,
         icon,
-        showCloseButton
+        showCloseButton,
+        headerActions
     ]);
     if (nothingToRender) return null;
     return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement("div", {
         ...props,
         className: cn("flex flex-col gap-sm px-lg py-md text-center sm:text-left text-neutral-primary", className)
-    }, /*#__PURE__*/ __rspack_external_react.createElement(DrawerTitle, {
-        className: "flex justify-between"
     }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
-        className: "flex gap-xs"
-    }, icon, title), false !== showCloseButton && /*#__PURE__*/ __rspack_external_react.createElement(Dialog.Close, {
+        className: "flex items-center justify-between gap-sm"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DrawerTitle, {
+        className: "items-center gap-xs"
+    }, icon, title), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex items-center gap-xs"
+    }, headerActions, false !== showCloseButton && /*#__PURE__*/ __rspack_external_react.createElement(Dialog.Close, {
         asChild: true
     }, /*#__PURE__*/ __rspack_external_react.createElement(IconButton, {
         size: "md",
         iconSize: "lg",
         variant: "ghost",
         icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null)
-    }))), description && /*#__PURE__*/ __rspack_external_react.createElement(DrawerDescription, null, description)), separator && /*#__PURE__*/ __rspack_external_react.createElement(Separator, null));
+    })))), description && /*#__PURE__*/ __rspack_external_react.createElement(DrawerDescription, null, description)), separator && /*#__PURE__*/ __rspack_external_react.createElement(Separator, null));
 };
 export { DrawerHeader };
 

package/Drawer/components/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer/components/DrawerHeader.js","sources":["../../../src/Drawer/components/DrawerHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { type DrawerProps } from \"../Drawer.js\";\nimport { DrawerTitle } from \"./DrawerTitle.js\";\nimport { DrawerDescription } from \"./DrawerDescription.js\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { useMemo } from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nexport type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> &\n    Pick<DrawerProps, \"title\" | \"icon\" | \"description\" | \"showCloseButton\"> & {\n        separator?: DrawerProps[\"headerSeparator\"];\n    };\n\nexport const DrawerHeader = ({\n    title,\n    icon,\n    description,\n    showCloseButton,\n    separator,\n    className,\n    ...props\n}: DrawerHeaderProps) => {\n    const nothingToRender = useMemo(() => {\n        return !title && !description && !icon && !showCloseButton;\n    }, [title, description, icon, showCloseButton]);\n\n    if (nothingToRender) {\n        return null;\n    }\n\n    return (\n        <>\n            <div\n                {...props}\n                className={cn(\n                    \"flex flex-col gap-sm px-lg py-md text-center sm:text-left text-neutral-primary\",\n                    className\n                )}\n            >\n                <DrawerTitle className={\"flex justify-between\"}>\n                    <div className={\"flex gap-xs\"}>\n                        {icon}\n                        {title}\n                    </div>\n\n                    {showCloseButton !== false && (\n                        <DrawerPrimitive.Close asChild>\n                            <IconButton\n                                size=\"md\"\n                                iconSize=\"lg\"\n                                variant={\"ghost\"}\n                                icon={<XIcon />}\n                            />\n                        </DrawerPrimitive.Close>\n                    )}\n                </DrawerTitle>\n                {description && <DrawerDescription>{description}</DrawerDescription>}\n            </div>\n            {separator && <Separator />}\n        </>\n    );\n};\n"],"names":["DrawerHeader","title","icon","description","showCloseButton","separator","className","props","nothingToRender","useMemo","cn","DrawerTitle","DrawerPrimitive","IconButton","XIcon","DrawerDescription","Separator"],"mappings":";;;;;;;;AAgBO,MAAMA,eAAe,CAAC,EACzBC,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,eAAe,EACfC,SAAS,EACTC,SAAS,EACT,GAAGC,OACa;IAChB,MAAMC,kBAAkBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ,IACrB,CAACR,SAAS,CAACE,eAAe,CAACD,QAAQ,CAACE,iBAC5C;QAACH;QAAOE;QAAaD;QAAME;KAAgB;IAE9C,IAAII,iBACA,OAAO;IAGX,OAAO,WAAP,GACI,4FACI,sCAAC;QACI,GAAGD,KAAK;QACT,WAAWG,GACP,kFACAJ;qBAGJ,sCAACK,aAAWA;QAAC,WAAW;qBACpB,sCAAC;QAAI,WAAW;OACXT,MACAD,QAGJG,AAAoB,UAApBA,mBAA6B,WAAT,GACjB,sCAACQ,OAAAA,KAAqB;QAAC;qBACnB,sCAACC,YAAUA;QACP,MAAK;QACL,UAAS;QACT,SAAS;QACT,oBAAM,sCAACC,gBAAKA;UAK3BX,eAAe,WAAfA,GAAe,sCAACY,mBAAiBA,MAAEZ,eAEvCE,aAAa,WAAbA,GAAa,sCAACW,WAASA;AAGpC"}
+{"version":3,"file":"Drawer/components/DrawerHeader.js","sources":["../../../src/Drawer/components/DrawerHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { type DrawerProps } from \"../Drawer.js\";\nimport { DrawerTitle } from \"./DrawerTitle.js\";\nimport { DrawerDescription } from \"./DrawerDescription.js\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport { useMemo } from \"react\";\nimport { Separator } from \"~/Separator/index.js\";\n\nexport type DrawerHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> &\n    Pick<DrawerProps, \"title\" | \"icon\" | \"description\" | \"showCloseButton\" | \"headerActions\"> & {\n        separator?: DrawerProps[\"headerSeparator\"];\n    };\n\nexport const DrawerHeader = ({\n    title,\n    icon,\n    description,\n    showCloseButton,\n    headerActions,\n    separator,\n    className,\n    ...props\n}: DrawerHeaderProps) => {\n    const nothingToRender = useMemo(() => {\n        return !title && !description && !icon && !showCloseButton && !headerActions;\n    }, [title, description, icon, showCloseButton, headerActions]);\n\n    if (nothingToRender) {\n        return null;\n    }\n\n    return (\n        <>\n            <div\n                {...props}\n                className={cn(\n                    \"flex flex-col gap-sm px-lg py-md text-center sm:text-left text-neutral-primary\",\n                    className\n                )}\n            >\n                {/* Buttons stay outside the title, so they don't become part of the dialog's name. */}\n                <div className={\"flex items-center justify-between gap-sm\"}>\n                    <DrawerTitle className={\"items-center gap-xs\"}>\n                        {icon}\n                        {title}\n                    </DrawerTitle>\n\n                    <div className={\"flex items-center gap-xs\"}>\n                        {headerActions}\n                        {showCloseButton !== false && (\n                            <DrawerPrimitive.Close asChild>\n                                <IconButton\n                                    size=\"md\"\n                                    iconSize=\"lg\"\n                                    variant={\"ghost\"}\n                                    icon={<XIcon />}\n                                />\n                            </DrawerPrimitive.Close>\n                        )}\n                    </div>\n                </div>\n                {description && <DrawerDescription>{description}</DrawerDescription>}\n            </div>\n            {separator && <Separator />}\n        </>\n    );\n};\n"],"names":["DrawerHeader","title","icon","description","showCloseButton","headerActions","separator","className","props","nothingToRender","useMemo","cn","DrawerTitle","DrawerPrimitive","IconButton","XIcon","DrawerDescription","Separator"],"mappings":";;;;;;;;AAgBO,MAAMA,eAAe,CAAC,EACzBC,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,eAAe,EACfC,aAAa,EACbC,SAAS,EACTC,SAAS,EACT,GAAGC,OACa;IAChB,MAAMC,kBAAkBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ,IACrB,CAACT,SAAS,CAACE,eAAe,CAACD,QAAQ,CAACE,mBAAmB,CAACC,eAChE;QAACJ;QAAOE;QAAaD;QAAME;QAAiBC;KAAc;IAE7D,IAAII,iBACA,OAAO;IAGX,OAAO,WAAP,GACI,4FACI,sCAAC;QACI,GAAGD,KAAK;QACT,WAAWG,GACP,kFACAJ;qBAIJ,sCAAC;QAAI,WAAW;qBACZ,sCAACK,aAAWA;QAAC,WAAW;OACnBV,MACAD,QAAAA,WAAAA,GAGL,sCAAC;QAAI,WAAW;OACXI,eACAD,AAAoB,UAApBA,mBAA6B,WAAT,GACjB,sCAACS,OAAAA,KAAqB;QAAC;qBACnB,sCAACC,YAAUA;QACP,MAAK;QACL,UAAS;QACT,SAAS;QACT,oBAAM,sCAACC,gBAAKA;WAM/BZ,eAAe,WAAfA,GAAe,sCAACa,mBAAiBA,MAAEb,eAEvCG,aAAa,WAAbA,GAAa,sCAACW,WAASA;AAGpC"}

package/Drawer/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type IconProps = IconComponentProps;
-declare const IconBase: ({ className, ...props }: IconProps) => React.JSX.Element;
+declare const IconBase: (props: IconProps) => React.JSX.Element;
 export declare const Icon: typeof IconBase & {
     original: typeof IconBase;
     originalName: string;

package/Drawer/components/Icon.js

@@ -1,11 +1,10 @@
-import { cn, makeDecoratable } from "../../utils.js";
+import { makeDecoratable } from "../../utils.js";
 import { Icon } from "../../Icon/index.js";
 import * as __rspack_external_react from "react";
-const IconBase = ({ className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+const IconBase = (props)=>/*#__PURE__*/ __rspack_external_react.createElement(Icon, {
         size: "lg",
         color: "neutral-strong",
-        ...props,
-        className: cn("pt-xs", className)
+        ...props
     });
 const Icon_Icon = makeDecoratable("Icon", IconBase);
 export { Icon_Icon as Icon };

package/Drawer/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer/components/Icon.js","sources":["../../../src/Drawer/components/Icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconComponentProps } from \"~/Icon/index.js\";\nimport { Icon as IconComponent } from \"~/Icon/index.js\";\n\ntype IconProps = IconComponentProps;\n\nconst IconBase = ({ className, ...props }: IconProps) => {\n    return (\n        <IconComponent\n            size={\"lg\"}\n            color={\"neutral-strong\"}\n            {...props}\n            className={cn(\"pt-xs\", className)}\n        />\n    );\n};\n\nexport const Icon = makeDecoratable(\"Icon\", IconBase);\n"],"names":["IconBase","className","props","IconComponent","cn","Icon","makeDecoratable"],"mappings":";;;AAOA,MAAMA,WAAW,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAAkB,GACzC,WAAP,GACI,sCAACC,MAAaA;QACV,MAAM;QACN,OAAO;QACN,GAAGD,KAAK;QACT,WAAWE,GAAG,SAASH;;AAK5B,MAAMI,YAAOC,gBAAgB,QAAQN"}
+{"version":3,"file":"Drawer/components/Icon.js","sources":["../../../src/Drawer/components/Icon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { IconProps as IconComponentProps } from \"~/Icon/index.js\";\nimport { Icon as IconComponent } from \"~/Icon/index.js\";\n\ntype IconProps = IconComponentProps;\n\nconst IconBase = (props: IconProps) => {\n    return <IconComponent size={\"lg\"} color={\"neutral-strong\"} {...props} />;\n};\n\nexport const Icon = makeDecoratable(\"Icon\", IconBase);\n"],"names":["IconBase","props","IconComponent","Icon","makeDecoratable"],"mappings":";;;AAOA,MAAMA,WAAW,CAACC,QACP,WAAP,GAAO,sCAACC,MAAaA;QAAC,MAAM;QAAM,OAAO;QAAmB,GAAGD,KAAK;;AAGjE,MAAME,YAAOC,gBAAgB,QAAQJ"}

package/Tabs/Tabs.d.ts

@@ -1,15 +1,20 @@
 import React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
-import type { TabProps, tabListVariants } from "./components/index.js";
+import type { TabProps } from "./components/index.js";
+import { tabListVariants } from "./components/index.js";
 interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
     tabs: React.ReactElement<TabProps>[];
     size?: VariantProps<typeof tabListVariants>["size"];
     spacing?: VariantProps<typeof tabListVariants>["spacing"];
     separator?: VariantProps<typeof tabListVariants>["separator"];
     loading?: boolean;
+    /**
+     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.
+     */
+    actions?: React.ReactNode;
 }
-declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
 declare const Tabs: typeof DecoratableTabs & {
     original: typeof DecoratableTabs;
     originalName: string;

package/Tabs/Tabs.js

@@ -1,20 +1,16 @@
 import react, { useMemo, useState } from "react";
 import { Tabs } from "radix-ui";
-import { makeDecoratable, withStaticProps } from "../utils.js";
-import { Content, List, Tab, TabsContext, Trigger } from "./components/index.js";
+import { cn, makeDecoratable, withStaticProps } from "../utils.js";
+import { Content, List, Tab, TabsContext, Trigger, tabListVariants } from "./components/index.js";
 const Root = Tabs.Root;
-const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props })=>{
+const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props })=>{
     const [tabs, setTabs] = useState([]);
     const defaultValue = useMemo(()=>initialValue || tabComponents.find((tab)=>!tab.props.disabled && false !== tab.props.visible)?.props.value, [
         initialValue,
         tabComponents
     ]);
-    const triggers = useMemo(()=>/*#__PURE__*/ react.createElement(List, {
-            key: tabs.map((tab)=>tab.id).join(";"),
-            size: size,
-            spacing: spacing,
-            separator: separator
-        }, tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
+    const triggers = useMemo(()=>{
+        const triggerList = tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
                 "data-testid": tab["data-testid"],
                 disabled: tab.disabled,
                 icon: tab.icon,
@@ -24,12 +20,34 @@ const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator,
                 text: tab.trigger,
                 value: tab.value,
                 visible: tab.visible
-            }))), [
+            }));
+        const listKey = tabs.map((tab)=>tab.id).join(";");
+        if (!actions) return /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            spacing: spacing,
+            separator: separator
+        }, triggerList);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: cn(tabListVariants({
+                size,
+                spacing,
+                separator
+            }))
+        }, /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            className: "w-auto"
+        }, triggerList), /*#__PURE__*/ react.createElement("div", {
+            className: "ml-auto flex items-center gap-sm"
+        }, actions));
+    }, [
         tabs,
         size,
         spacing,
         separator,
-        loading
+        loading,
+        actions
     ]);
     const contents = useMemo(()=>tabs.map((tab)=>/*#__PURE__*/ react.createElement(Content, {
                 key: tab.id,

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        loading={loading}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing, separator, loading]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","List","Trigger","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAU/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBX,gBACAK,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACZ;QAAcK;KAAc;IAEhC,MAAMQ,WAAWF,QACb,kBACI,oBAACG,MAAIA;YACD,KAAKP,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;YAClC,MAAMX;YACN,SAASC;YACT,WAAWC;WAEVI,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACN,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAASR;gBACT,MAAMH;gBACN,MAAMW,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;kBAKpC;QAACL;QAAMN;QAAMC;QAASC;QAAWC;KAAQ;IAG7C,MAAMY,WAAWL,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACK,SAAOA;gBACJ,KAAKL,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIV;gBACxB,WAAWU,IAAI,SAAS;iBAGpC;QAACL;QAAML;KAAQ;IAGnB,MAAMgB,UAAwBP,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMY,gBAAgBZ,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIa,gBAAgB,IAChB,OAAO;2BACAZ,KAAK,KAAK,CAAC,GAAGY;wBACjBb;2BACGC,KAAK,KAAK,CAACY,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIZ;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUc,EAAE;gBACRZ,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKQ;YAClD;QACJ,IACA;QAACZ;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACX,MAAIA;QAAE,GAAGS,KAAK;QAAE,cAAcI;OAC1BG,UACAG,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUb;AAGnD;AAEA,MAAMiB,WAAWC,gBAAgB,QAAQxB;AAEzC,MAAMyB,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}
+{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger, tabListVariants } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n    /**\n     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.\n     */\n    actions?: React.ReactNode;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    actions,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(() => {\n        const triggerList = tabs.map(tab => (\n            <Trigger\n                data-testid={tab[\"data-testid\"]}\n                disabled={tab.disabled}\n                icon={tab.icon}\n                key={tab.id}\n                loading={loading}\n                size={size}\n                text={tab.trigger}\n                value={tab.value}\n                visible={tab.visible}\n            />\n        ));\n        const listKey = tabs.map(tab => tab.id).join(\";\");\n\n        if (!actions) {\n            return (\n                <List key={listKey} size={size} spacing={spacing} separator={separator}>\n                    {triggerList}\n                </List>\n            );\n        }\n\n        // Actions sit outside the tablist, so arrow keys only move between tabs.\n        return (\n            <div className={cn(tabListVariants({ size, spacing, separator }))}>\n                <List key={listKey} size={size} className={\"w-auto\"}>\n                    {triggerList}\n                </List>\n                <div className={\"ml-auto flex items-center gap-sm\"}>{actions}</div>\n            </div>\n        );\n    }, [tabs, size, spacing, separator, loading, actions]);\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","actions","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","triggerList","Trigger","listKey","List","cn","tabListVariants","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAc/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBZ,gBACAM,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACb;QAAcM;KAAc;IAEhC,MAAMQ,WAAWF,QAAQ;QACrB,MAAMG,cAAcP,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACzB,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAAST;gBACT,MAAMH;gBACN,MAAMY,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;;QAG5B,MAAMI,UAAUT,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7C,IAAI,CAACR,SACD,OAAO,WAAP,GACI,oBAACa,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,SAASC;YAAS,WAAWC;WACxDY;QAMb,OAAO,WAAP,GACI,oBAAC;YAAI,WAAWI,GAAGC,gBAAgB;gBAAEnB;gBAAMC;gBAASC;YAAU;yBAC1D,oBAACe,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,WAAW;WACtCc,cAAAA,WAAAA,GAEL,oBAAC;YAAI,WAAW;WAAqCV;IAGjE,GAAG;QAACG;QAAMP;QAAMC;QAASC;QAAWC;QAASC;KAAQ;IAErD,MAAMgB,WAAWT,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACS,SAAOA;gBACJ,KAAKT,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIX;gBACxB,WAAWW,IAAI,SAAS;iBAGpC;QAACL;QAAMN;KAAQ;IAGnB,MAAMqB,UAAwBX,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMgB,gBAAgBhB,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIiB,gBAAgB,IAChB,OAAO;2BACAhB,KAAK,KAAK,CAAC,GAAGgB;wBACjBjB;2BACGC,KAAK,KAAK,CAACgB,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIhB;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUkB,EAAE;gBACRhB,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKY;YAClD;QACJ,IACA;QAAChB;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACZ,MAAIA;QAAE,GAAGU,KAAK;QAAE,cAAcI;OAC1BG,UACAO,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUjB;AAGnD;AAEA,MAAMqB,WAAWC,gBAAgB,QAAQ7B;AAEzC,MAAM8B,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}

package/Tabs/Tabs.mdx

@@ -385,6 +385,33 @@ const [value, setValue] = useState("password");
 export default WithControlledValueExample;
 ` } } />
 
+### With Actions
+
+Use `actions` to put controls at the end of the tab row, such as a filter checkbox or a button. They render outside the tab list, so arrow keys still move only between tabs.
+
+<Canvas of={Tabs.WithActions} source={ { code: `
+import React, { useState } from "react";
+import { Checkbox, Tabs } from "@webiny/admin-ui";
+
+const WithActionsExample = () => {
+const [unreadOnly, setUnreadOnly] = useState(false);
+
+    return (
+        <Tabs
+            separator={true}
+            actions={<Checkbox label="Unread only" checked={unreadOnly} onChange={setUnreadOnly} />}
+            tabs={[
+                <Tabs.Tab key="inbox" value="inbox" trigger="Inbox" content="Inbox content" />,
+                <Tabs.Tab key="archive" value="archive" trigger="Archive" content="Archive content" />
+            ]}
+        />
+    );
+
+};
+
+export default WithActionsExample;
+` } } />
+
 ### With Icons
 
 <Canvas of={Tabs.WithIcons} source={ { code: `

package/Tabs/Tabs.stories.d.ts

@@ -17,6 +17,7 @@ export declare const SpacingDoubleExtraLarge: Story;
 export declare const WithSeparator: Story;
 export declare const WithDefaultValue: Story;
 export declare const WithControlledValue: Story;
+export declare const WithActions: Story;
 export declare const WithIcons: Story;
 export declare const WithDisabledTab: Story;
 export declare const WithHiddenTab: Story;

package/Tabs/Tabs.stories.js

@@ -1,6 +1,7 @@
 import react, { useState } from "react";
 import { ReactComponent } from "@webiny/icons/person.svg";
 import { ReactComponent as lock_svg_ReactComponent } from "@webiny/icons/lock.svg";
+import { Checkbox } from "../Checkbox/index.js";
 import { Tabs } from "./Tabs.js";
 const meta = {
     title: "Components/Tabs",
@@ -114,6 +115,23 @@ const WithControlledValue = {
         });
     }
 };
+const WithActions = {
+    args: {
+        ...Default.args,
+        separator: true
+    },
+    render: (args)=>{
+        const [unreadOnly, setUnreadOnly] = useState(false);
+        return /*#__PURE__*/ react.createElement(Tabs, {
+            ...args,
+            actions: /*#__PURE__*/ react.createElement(Checkbox, {
+                label: "Unread only",
+                checked: unreadOnly,
+                onChange: setUnreadOnly
+            })
+        });
+    }
+};
 const WithIcons = {
     args: {
         ...Default.args,
@@ -271,6 +289,6 @@ const Documentation = {
     }
 };
 export default Tabs_stories;
-export { Default, Documentation, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, SpacingDoubleExtraLarge, SpacingExtraLarge, SpacingExtraSmall, SpacingLarge, SpacingMedium, SpacingSmall, WithControlledValue, WithCustomTabSpacing, WithDefaultValue, WithDisabledTab, WithHiddenTab, WithIcons, WithSeparator };
+export { Default, Documentation, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, SpacingDoubleExtraLarge, SpacingExtraLarge, SpacingExtraSmall, SpacingLarge, SpacingMedium, SpacingSmall, WithActions, WithControlledValue, WithCustomTabSpacing, WithDefaultValue, WithDisabledTab, WithHiddenTab, WithIcons, WithSeparator };
 
 //# sourceMappingURL=Tabs.stories.js.map

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.stories.js","sources":["../../src/Tabs/Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs.js\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tabs","Default","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","WithDefaultValue","WithControlledValue","args","value","setValue","useState","WithIcons","PersonIcon","LockIcon","WithDisabledTab","WithHiddenTab","WithCustomTabSpacing","Documentation","JSON","undefined"],"mappings":";;;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,YAAmB;IAC5B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,iBAAwB;IACjC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,gBAAuB;IAChC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMQ,eAAsB;IAC/B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMU,0BAAiC;IAC1C,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,gBAAuB;IAChC,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMY,mBAA0B;IACnC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,cAAc;IAClB;AACJ;AAEO,MAAMa,sBAA6B;IACtC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQc,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACf,MAAIA;YAAE,GAAGe,IAAI;YAAE,OAAOC;YAAO,eAAeC;;IACxD;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGlB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,oBAAM,oBAACoB,gBAAUA;;0BAErB,oBAACpB,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,oBAAM,oBAACqB,yBAAQA;;SAEtB;IACL;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGrB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,UAAU;;0BAEd,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAMuB,gBAAuB;IAChC,MAAM;QACF,GAAGtB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,SAAS;;0BAEb,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAMwB,uBAA8B;IACvC,MAAM;QACF,GAAGvB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,SAAS;;0BAEb,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAGO,MAAMyB,gBAAuB;IAChC,QAAQV,CAAAA,OAEG,WAAP,GAAO,oBAACf,MAAIA;YAAC,KAAK0B,KAAK,SAAS,CAACX;YAAQ,GAAGA,IAAI;;IAEpD,MAAM;QACF,MAAM;QACN,SAAS;QACT,WAAW;QACX,cAAc;QACd,MAAM;0BACF,oBAACf,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;QACD,OAAO2B;IACX;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;aAAM;YAC9C,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,cAAc;YACV,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aACI;QACR;QACA,MAAM;YACF,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Tabs/Tabs.stories.js","sources":["../../src/Tabs/Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { Tabs } from \"./Tabs.js\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    },\n    render: args => {\n        const [unreadOnly, setUnreadOnly] = useState(false);\n        return (\n            <Tabs\n                {...args}\n                actions={\n                    <Checkbox label=\"Unread only\" checked={unreadOnly} onChange={setUnreadOnly} />\n                }\n            />\n        );\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tabs","Default","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","WithDefaultValue","WithControlledValue","args","value","setValue","useState","WithActions","unreadOnly","setUnreadOnly","Checkbox","WithIcons","PersonIcon","LockIcon","WithDisabledTab","WithHiddenTab","WithCustomTabSpacing","Documentation","JSON","undefined"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.5.0-beta.7",
+	"version": "6.5.0-beta.8",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -18,10 +18,10 @@
 		"@minoru/react-dnd-treeview": "3.5.4",
 		"@monaco-editor/react": "4.7.0",
 		"@radix-ui/react-scroll-area": "1.2.18",
-		"@tanstack/react-table": "9.2.4",
-		"@webiny/icons": "6.5.0-beta.7",
-		"@webiny/react-composition": "6.5.0-beta.7",
-		"@webiny/utils": "6.5.0-beta.7",
+		"@tanstack/react-table": "9.2.5",
+		"@webiny/icons": "6.5.0-beta.8",
+		"@webiny/react-composition": "6.5.0-beta.8",
+		"@webiny/utils": "6.5.0-beta.8",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
@@ -29,13 +29,13 @@
 		"date-fns": "4.4.0",
 		"lodash": "4.18.1",
 		"minimatch": "10.2.6",
-		"mobx": "7.0.5",
+		"mobx": "7.0.6",
 		"monaco-editor": "0.53.0",
 		"radix-ui": "1.6.7",
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
-		"react-day-picker": "10.0.1",
+		"react-day-picker": "10.0.2",
 		"react-dnd": "16.0.1",
 		"react-virtualized": "9.22.6",
 		"sonner": "2.0.8",
@@ -46,26 +46,26 @@
 	},
 	"devDependencies": {
 		"@fortawesome/free-solid-svg-icons": "7.3.1",
-		"@rsbuild/core": "2.2.10",
+		"@rsbuild/core": "2.2.11",
 		"@rsbuild/plugin-svgr": "2.0.5",
-		"@storybook/addon-a11y": "10.6.0",
-		"@storybook/addon-docs": "10.6.0",
-		"@storybook/react": "10.6.0",
+		"@storybook/addon-a11y": "10.6.1",
+		"@storybook/addon-docs": "10.6.1",
+		"@storybook/react": "10.6.1",
 		"@tailwindcss/postcss": "4.3.3",
 		"@types/react": "18.3.31",
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
-		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.5.0-beta.7",
-		"@webiny/project": "6.5.0-beta.7",
+		"@types/react-virtualized": "9.22.4",
+		"@webiny/build-tools": "6.5.0-beta.8",
+		"@webiny/project": "6.5.0-beta.8",
 		"chalk": "6.0.1",
-		"oxfmt": "0.70.0",
+		"oxfmt": "0.71.0",
 		"rimraf": "6.1.3",
-		"sass": "1.105.0",
-		"storybook": "10.6.0",
+		"sass": "1.105.1",
+		"storybook": "10.6.1",
 		"storybook-react-rsbuild": "3.6.0",
 		"typescript": "7.0.2",
-		"vitest": "5.0.2"
+		"vitest": "5.0.3"
 	},
 	"publishConfig": {
 		"access": "public"