@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/MultiSelect/MultiSelect.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { MultiSelect } from "./MultiSelect.js";
 declare const meta: Meta<typeof MultiSelect>;
 export default meta;

package/MultiSelect/MultiSelect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"MultiSelect/MultiSelect.stories.js","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiSelect } from \"./MultiSelect.js\";\n\nconst defaultOptions = [\n    { label: \"Option 1\", value: \"option-1\" },\n    { label: \"Option 2\", value: \"option-2\" },\n    { label: \"Option 3\", value: \"option-3\" },\n    { label: \"Option 4\", value: \"option-4\" },\n    { label: \"Option 5\", value: \"option-5\" },\n    { label: \"Option 6\", value: \"option-6\" }\n];\n\nconst meta: Meta<typeof MultiSelect> = {\n    title: \"Components/Form/MultiSelect\",\n    component: MultiSelect,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string[]>(args.value ?? []);\n        return <MultiSelect {...args} value={value} onChange={setValue} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiSelect>;\n\nexport const Default: Story = {\n    args: {\n        options: defaultOptions\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\"\n    }\n};\n\nexport const WithPreselected: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"]\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        description: \"Select one or more options from the list.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        disabled: true,\n        value: [\"option-1\", \"option-2\"]\n    }\n};\n\nexport const WithSelectionCount: Story = {\n    args: {\n        ...Default.args,\n        label: \"Label\",\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        showSelectionCount: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        label: \"Label\",\n        description: \"Select one or more options from the list.\",\n        note: \"Note: Ensure your selection is accurate before proceeding.\",\n        required: true,\n        options: defaultOptions,\n        value: [\"option-1\", \"option-2\", \"option-3\"],\n        validation: {\n            isValid: false,\n            message: \"At least one option must be selected.\"\n        }\n    }\n};\n"],"names":["defaultOptions","meta","MultiSelect","args","value","setValue","useState","Default","WithLabel","WithPreselected","WithDescription","WithErrors","Disabled","WithSelectionCount","FullExample"],"mappings":";;AAIA,MAAMA,iBAAiB;IACnB;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;IACvC;QAAE,OAAO;QAAY,OAAO;IAAW;CAC1C;AAED,MAAMC,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmBH,KAAK,KAAK,IAAI,EAAE;QAC7D,OAAO,WAAP,GAAO,oBAACD,aAAWA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUC;;IAC1D;AACJ;AAEA,4BAAeJ;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,SAASP;IACb;AACJ;AAEO,MAAMQ,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,kBAAyB;IAClC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;IAC/C;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMI,aAAoB;IAC7B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,OAAO;QACP,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YAAC;YAAY;SAAW;IACnC;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,oBAAoB;IACxB;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,SAASd;QACT,OAAO;YAAC;YAAY;YAAY;SAAW;QAC3C,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ"}

package/MultiSelect/primitives/MultiSelectPrimitive.d.ts

@@ -23,21 +23,25 @@ interface MultiSelectPrimitiveProps {
     size?: VariantProps<typeof selectTriggerVariants>["size"];
     variant?: VariantProps<typeof selectTriggerVariants>["variant"];
 }
-declare const MultiSelectPrimitive: (({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-    original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+/**
+ * MultiSelect Primitive
+ */
+declare const DecoratableMultiSelectPrimitive: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+declare const MultiSelectPrimitive: typeof DecoratableMultiSelectPrimitive & {
+    original: typeof DecoratableMultiSelectPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-        original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableMultiSelectPrimitive & {
+        original: typeof DecoratableMultiSelectPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-        original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableMultiSelectPrimitive & {
+        original: typeof DecoratableMultiSelectPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/MultiSelect/primitives/MultiSelectPrimitive.js

@@ -7,6 +7,8 @@ import { CheckboxPrimitiveRenderer } from "../../Checkbox/index.js";
 import { Icon } from "../../Icon/index.js";
 import { IconButton } from "../../Button/index.js";
 import { selectTriggerVariants } from "../../Select/primitives/components/index.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
+import { useEscapeScrollLock } from "../../hooks/index.js";
 const MultiSelectTrigger = ({ displayValue, hasValue, placeholder, displayResetAction, disabled, invalid, size, variant, onValueReset })=>{
     const resetButton = useMemo(()=>{
         if (!hasValue || !displayResetAction) return;
@@ -49,14 +51,18 @@ const MultiSelectTrigger = ({ displayValue, hasValue, placeholder, displayResetA
         className: "h-md w-md"
     })));
 };
-const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
-        className: cn("relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
+const MultiSelectContent = ({ options, value, onToggle })=>{
+    const contentRef = useEscapeScrollLock();
+    return /*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+        ref: contentRef,
+        className: cn("relative z-popover shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
         style: {
-            width: "var(--radix-popover-trigger-width)",
-            maxHeight: "var(--radix-popover-content-available-height, 24rem)"
+            width: "var(--radix-popover-trigger-width)"
         },
         align: "start",
         sideOffset: 4
+    }, /*#__PURE__*/ react.createElement(ScrollArea, {
+        viewportClassName: cn("py-sm", "max-h-[calc(min(250px,var(--radix-popover-content-available-height,250px))_-_2*var(--border-width-sm))]")
     }, options.map((option)=>/*#__PURE__*/ react.createElement("div", {
             key: option.value,
             className: cn("rounded-sm p-sm mx-sm cursor-pointer", "hover:bg-neutral-dimmed", option.disabled && "opacity-50 pointer-events-none"),
@@ -72,7 +78,8 @@ const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.c
             indeterminate: false,
             hasLabel: true,
             changeChecked: ()=>{}
-        }))))));
+        })))))));
+};
 const DecoratableMultiSelectPrimitive = ({ options = [], value = [], onChange, onValueReset, placeholder = "Select options", disabled, invalid, displayResetAction = true, showSelectionCount, size, variant })=>{
     const displayValue = useMemo(()=>{
         if (0 === value.length) return "";

package/MultiSelect/primitives/MultiSelectPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                className={cn(\n                    \"relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{\n                    width: \"var(--radix-popover-trigger-width)\",\n                    maxHeight: \"var(--radix-popover-content-available-height, 24rem)\"\n                }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {options.map(option => (\n                    <div\n                        key={option.value}\n                        className={cn(\n                            \"rounded-sm p-sm mx-sm cursor-pointer\",\n                            \"hover:bg-neutral-dimmed\",\n                            option.disabled && \"opacity-50 pointer-events-none\"\n                        )}\n                        onClick={() => onToggle(option.value)}\n                    >\n                        <div className={\"pointer-events-none\"}>\n                            <CheckboxPrimitiveRenderer\n                                id={option.value}\n                                label={option.label}\n                                value={option.value}\n                                checked={value.includes(option.value)}\n                                disabled={option.disabled ?? false}\n                                indeterminate={false}\n                                hasLabel={true}\n                                changeChecked={() => {}}\n                            />\n                        </div>\n                    </div>\n                ))}\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":"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"}
+{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\nimport { useEscapeScrollLock } from \"~/hooks/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    /*\n     * This popover is built on the Radix primitive directly, so it needs the same scroll-lock\n     * escape hatch that `PopoverPrimitive.Content` applies.\n     */\n    const contentRef = useEscapeScrollLock<HTMLDivElement>();\n\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                ref={contentRef}\n                className={cn(\n                    \"relative z-popover shadow-lg overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {/*\n                 * The padding sits inside the scroller so the scrollbar runs the full height, and\n                 * the cap leaves room for the popover's border, so the whole dropdown fits in the\n                 * space Radix says is available.\n                 */}\n                <ScrollArea\n                    viewportClassName={cn(\n                        \"py-sm\",\n                        \"max-h-[calc(min(250px,var(--radix-popover-content-available-height,250px))_-_2*var(--border-width-sm))]\"\n                    )}\n                >\n                    {options.map(option => (\n                        <div\n                            key={option.value}\n                            className={cn(\n                                \"rounded-sm p-sm mx-sm cursor-pointer\",\n                                \"hover:bg-neutral-dimmed\",\n                                option.disabled && \"opacity-50 pointer-events-none\"\n                            )}\n                            onClick={() => onToggle(option.value)}\n                        >\n                            <div className={\"pointer-events-none\"}>\n                                <CheckboxPrimitiveRenderer\n                                    id={option.value}\n                                    label={option.label}\n                                    value={option.value}\n                                    checked={value.includes(option.value)}\n                                    disabled={option.disabled ?? false}\n                                    indeterminate={false}\n                                    hasLabel={true}\n                                    changeChecked={() => {}}\n                                />\n                            </div>\n                        </div>\n                    ))}\n                </ScrollArea>\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","contentRef","useEscapeScrollLock","ScrollArea","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":"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"}

package/Popover/Popover.d.ts

@@ -9,21 +9,22 @@ interface PopoverProps extends PopoverPrimitiveProps, Omit<PopoverPrimitiveProps
     trigger: React.ReactNode;
     variant?: PopoverPrimitiveContentProps["variant"];
 }
-declare const Popover: (({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-    original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+declare const DecoratablePopover: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+declare const Popover: typeof DecoratablePopover & {
+    original: typeof DecoratablePopover;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-        original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+    original: typeof DecoratablePopover & {
+        original: typeof DecoratablePopover;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-        original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratablePopover & {
+        original: typeof DecoratablePopover;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Popover/Popover.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Popover } from "./Popover.js";
 declare const meta: Meta<typeof Popover>;
 export default meta;
@@ -9,3 +9,10 @@ export declare const WithArrowAccentVariant: Story;
 export declare const SubtleVariant: Story;
 export declare const WithArrowSubtleVariant: Story;
 export declare const Documentation: Story;
+/**
+ * A dialog locks scrolling outside of its own content, and the popover is portaled out of it, so
+ * the lock covers the popover too. What that costs is the wheel and the trackpad: the list below
+ * still moved by its scrollbar and by the arrow keys, but a wheel event over it did nothing at all.
+ * It has to scroll by wheel while the dialog is open.
+ */
+export declare const InsideDialog: Story;

package/Popover/Popover.stories.js

@@ -1,5 +1,7 @@
 import react from "react";
 import { Popover } from "./Popover.js";
+import { Button } from "../Button/index.js";
+import { Dialog } from "../Dialog/index.js";
 const meta = {
     title: "Components/Popover",
     component: Popover,
@@ -130,7 +132,28 @@ const Documentation = {
         }
     }
 };
+const InsideDialog = {
+    render: ()=>/*#__PURE__*/ react.createElement(Dialog, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open dialog"
+            }),
+            title: "Popover inside a dialog"
+        }, /*#__PURE__*/ react.createElement(Popover, {
+            trigger: /*#__PURE__*/ react.createElement("span", null, /*#__PURE__*/ react.createElement(Button, {
+                variant: "secondary",
+                text: "Open popover"
+            })),
+            content: /*#__PURE__*/ react.createElement("ul", {
+                className: "max-h-48 w-[220px] overflow-y-auto"
+            }, Array.from({
+                length: 40
+            }, (_, index)=>/*#__PURE__*/ react.createElement("li", {
+                    key: index
+                }, "Option ", index + 1)))
+        }))
+};
 export default Popover_stories;
-export { AccentVariant, Default, Documentation, SubtleVariant, WithArrowAccentVariant, WithArrowSubtleVariant };
+export { AccentVariant, Default, Documentation, InsideDialog, SubtleVariant, WithArrowAccentVariant, WithArrowSubtleVariant };
 
 //# sourceMappingURL=Popover.stories.js.map

package/Popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Popover } from \"./Popover.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Dialog } from \"~/Dialog/index.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n\n/**\n * A dialog locks scrolling outside of its own content, and the popover is portaled out of it, so\n * the lock covers the popover too. What that costs is the wheel and the trackpad: the list below\n * still moved by its scrollbar and by the arrow keys, but a wheel event over it did nothing at all.\n * It has to scroll by wheel while the dialog is open.\n */\nexport const InsideDialog: Story = {\n    render: () => (\n        <Dialog\n            trigger={<Button variant={\"primary\"} text={\"Open dialog\"} />}\n            title={\"Popover inside a dialog\"}\n        >\n            <Popover\n                trigger={\n                    <span>\n                        <Button variant={\"secondary\"} text={\"Open popover\"} />\n                    </span>\n                }\n                content={\n                    <ul className={\"max-h-48 w-[220px] overflow-y-auto\"}>\n                        {Array.from({ length: 40 }, (_, index) => (\n                            <li key={index}>Option {index + 1}</li>\n                        ))}\n                    </ul>\n                }\n            />\n        </Dialog>\n    )\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation","InsideDialog","Dialog","Button","Array","_","index"],"mappings":";;;;AAMA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAQO,MAAMC,eAAsB;IAC/B,QAAQ,kBACJ,oBAACC,QAAMA;YACH,uBAAS,oBAACC,QAAMA;gBAAC,SAAS;gBAAW,MAAM;;YAC3C,OAAO;yBAEP,oBAACV,SAAOA;YACJ,uBACI,oBAAC,4BACG,oBAACU,QAAMA;gBAAC,SAAS;gBAAa,MAAM;;YAG5C,uBACI,oBAAC;gBAAG,WAAW;eACVC,MAAM,IAAI,CAAC;gBAAE,QAAQ;YAAG,GAAG,CAACC,GAAGC,QAAAA,WAAAA,GAC5B,oBAAC;oBAAG,KAAKA;mBAAO,WAAQA,QAAQ;;AAO5D"}

package/Popover/primitives/PopoverPrimitive.d.ts

@@ -1,9 +1,9 @@
-import { type PopoverAnchorProps as PopoverPrimitiveAnchorProps, type PopoverArrowProps as PopoverPrimitiveArrowProps, type PopoverCloseProps as PopoverPrimitiveCloseProps, type PopoverContentProps as PopoverPrimitiveContentProps, type PopoverRootProps as PopoverPrimitiveProps, type PopoverTriggerProps as PopoverPrimitiveTriggerProps } from "./components/index.js";
-declare const PopoverPrimitive: (({ ...props }: PopoverPrimitiveProps) => import("react").JSX.Element) & {
-    Anchor: ({ ...props }: PopoverPrimitiveAnchorProps) => import("react").JSX.Element;
-    Arrow: ({ variant, className, ...props }: PopoverPrimitiveArrowProps) => import("react").JSX.Element;
-    Close: ({ ...props }: PopoverPrimitiveCloseProps) => import("react").JSX.Element;
-    Content: ({ className, variant, arrow, align, sideOffset, collisionPadding, ...props }: PopoverPrimitiveContentProps) => import("react").JSX.Element;
-    Trigger: ({ ...props }: PopoverPrimitiveTriggerProps) => import("react").JSX.Element;
+import { PopoverAnchor, PopoverArrow, PopoverContent, PopoverClose, PopoverRoot, PopoverTrigger, type PopoverAnchorProps as PopoverPrimitiveAnchorProps, type PopoverArrowProps as PopoverPrimitiveArrowProps, type PopoverCloseProps as PopoverPrimitiveCloseProps, type PopoverContentProps as PopoverPrimitiveContentProps, type PopoverRootProps as PopoverPrimitiveProps, type PopoverTriggerProps as PopoverPrimitiveTriggerProps } from "./components/index.js";
+declare const PopoverPrimitive: typeof PopoverRoot & {
+    Anchor: typeof PopoverAnchor;
+    Arrow: typeof PopoverArrow;
+    Close: typeof PopoverClose;
+    Content: typeof PopoverContent;
+    Trigger: typeof PopoverTrigger;
 };
 export { PopoverPrimitive, type PopoverPrimitiveProps, type PopoverPrimitiveAnchorProps, type PopoverPrimitiveArrowProps, type PopoverPrimitiveCloseProps, type PopoverPrimitiveContentProps, type PopoverPrimitiveTriggerProps };

package/Popover/primitives/components/PopoverContent.js

@@ -1,5 +1,6 @@
 import { Popover } from "radix-ui";
 import { cn, cva } from "../../../utils.js";
+import { useEscapeScrollLock } from "../../../hooks/index.js";
 import * as __rspack_external_react from "react";
 const popoverContentVariants = cva([
     "bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover",
@@ -27,7 +28,10 @@ const popoverContentVariants = cva([
         variant: "subtle"
     }
 });
-const PopoverContent = ({ className, variant, arrow = false, align = "center", sideOffset = 6, collisionPadding = 8, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Popover.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Popover.Content, {
+const PopoverContent = ({ className, variant, arrow = false, align = "center", sideOffset = 6, collisionPadding = 8, ...props })=>{
+    const contentRef = useEscapeScrollLock();
+    return /*#__PURE__*/ __rspack_external_react.createElement(Popover.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Popover.Content, {
+        ref: contentRef,
         "data-slot": "popover-content",
         align: align,
         sideOffset: sideOffset,
@@ -38,6 +42,7 @@ const PopoverContent = ({ className, variant, arrow = false, align = "center", s
         }), className),
         ...props
     }));
+};
 export { PopoverContent };
 
 //# sourceMappingURL=PopoverContent.js.map

package/Popover/primitives/components/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/primitives/components/PopoverContent.js","sources":["../../../../src/Popover/primitives/components/PopoverContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst popoverContentVariants = cva(\n    [\n        \"bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--radix-popover-content-transform-origin)\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light border-neutral-black\",\n                subtle: \"bg-neutral-base text-neutral-primary border-neutral-muted\"\n            },\n            arrow: {\n                true: [\n                    \"data-[side=top]:pb-xs-plus\",\n                    \"data-[side=bottom]:pt-xs-plus\",\n                    \"data-[side=left]:pr-xs-plus\",\n                    \"data-[side=right]:pl-xs-plus\"\n                ],\n                false: [\"border-sm\"]\n            }\n        },\n        defaultVariants: {\n            variant: \"subtle\"\n        }\n    }\n);\n\ntype PopoverContentProps = PopoverPrimitive.PopoverContentProps &\n    VariantProps<typeof popoverContentVariants>;\n\nconst PopoverContent = ({\n    className,\n    variant,\n    arrow = false,\n    align = \"center\",\n    sideOffset = 6,\n    collisionPadding = 8,\n    ...props\n}: PopoverContentProps) => (\n    <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n            data-slot=\"popover-content\"\n            align={align}\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(popoverContentVariants({ variant, arrow }), className)}\n            {...props}\n        />\n    </PopoverPrimitive.Portal>\n);\n\nexport { PopoverContent, type PopoverContentProps };\n"],"names":["popoverContentVariants","cva","PopoverContent","className","variant","arrow","align","sideOffset","collisionPadding","props","PopoverPrimitive","cn"],"mappings":";;;AAIA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;QACA,OAAO;YACH,MAAM;gBACF;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBAAC;aAAY;QACxB;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAMJ,MAAMC,iBAAiB,CAAC,EACpBC,SAAS,EACTC,OAAO,EACPC,QAAQ,KAAK,EACbC,QAAQ,QAAQ,EAChBC,aAAa,CAAC,EACdC,mBAAmB,CAAC,EACpB,GAAGC,OACe,iBAClB,sCAACC,QAAAA,MAAuB,sBACpB,sCAACA,QAAAA,OAAwB;QACrB,aAAU;QACV,OAAOJ;QACP,YAAYC;QACZ,kBAAkBC;QAClB,WAAWG,GAAGX,uBAAuB;YAAEI;YAASC;QAAM,IAAIF;QACzD,GAAGM,KAAK"}
+{"version":3,"file":"Popover/primitives/components/PopoverContent.js","sources":["../../../../src/Popover/primitives/components/PopoverContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { useEscapeScrollLock } from \"~/hooks/index.js\";\n\nconst popoverContentVariants = cva(\n    [\n        \"bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--radix-popover-content-transform-origin)\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light border-neutral-black\",\n                subtle: \"bg-neutral-base text-neutral-primary border-neutral-muted\"\n            },\n            arrow: {\n                true: [\n                    \"data-[side=top]:pb-xs-plus\",\n                    \"data-[side=bottom]:pt-xs-plus\",\n                    \"data-[side=left]:pr-xs-plus\",\n                    \"data-[side=right]:pl-xs-plus\"\n                ],\n                false: [\"border-sm\"]\n            }\n        },\n        defaultVariants: {\n            variant: \"subtle\"\n        }\n    }\n);\n\ntype PopoverContentProps = PopoverPrimitive.PopoverContentProps &\n    VariantProps<typeof popoverContentVariants>;\n\nconst PopoverContent = ({\n    className,\n    variant,\n    arrow = false,\n    align = \"center\",\n    sideOffset = 6,\n    collisionPadding = 8,\n    ...props\n}: PopoverContentProps) => {\n    /*\n     * The popover is portaled to `document.body`, which puts it outside of a modal dialog's scroll\n     * lock. Without this, anything scrollable within the popover freezes while a dialog is open.\n     */\n    const contentRef = useEscapeScrollLock<HTMLDivElement>();\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                ref={contentRef}\n                data-slot=\"popover-content\"\n                align={align}\n                sideOffset={sideOffset}\n                collisionPadding={collisionPadding}\n                className={cn(popoverContentVariants({ variant, arrow }), className)}\n                {...props}\n            />\n        </PopoverPrimitive.Portal>\n    );\n};\n\nexport { PopoverContent, type PopoverContentProps };\n"],"names":["popoverContentVariants","cva","PopoverContent","className","variant","arrow","align","sideOffset","collisionPadding","props","contentRef","useEscapeScrollLock","PopoverPrimitive","cn"],"mappings":";;;;AAKA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;QACA,OAAO;YACH,MAAM;gBACF;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBAAC;aAAY;QACxB;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAMJ,MAAMC,iBAAiB,CAAC,EACpBC,SAAS,EACTC,OAAO,EACPC,QAAQ,KAAK,EACbC,QAAQ,QAAQ,EAChBC,aAAa,CAAC,EACdC,mBAAmB,CAAC,EACpB,GAAGC,OACe;IAKlB,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,sCAACC,QAAAA,MAAuB,sBACpB,sCAACA,QAAAA,OAAwB;QACrB,KAAKF;QACL,aAAU;QACV,OAAOJ;QACP,YAAYC;QACZ,kBAAkBC;QAClB,WAAWK,GAAGb,uBAAuB;YAAEI;YAASC;QAAM,IAAIF;QACzD,GAAGM,KAAK;;AAIzB"}

package/ProgressBar/ProgressBar.d.ts

@@ -3,21 +3,22 @@ import { type ProgressRootProps } from "./components/index.js";
 interface ProgressBarProps extends ProgressRootProps {
     valuePosition?: "start" | "end" | "both";
 }
-declare const ProgressBar: (({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-    original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+declare const DecoratableProgressBar: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: typeof DecoratableProgressBar & {
+    original: typeof DecoratableProgressBar;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-        original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+    original: typeof DecoratableProgressBar & {
+        original: typeof DecoratableProgressBar;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-        original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableProgressBar & {
+        original: typeof DecoratableProgressBar;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/ProgressBar/ProgressBar.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { ProgressBar } from "./ProgressBar.js";
 declare const meta: Meta<typeof ProgressBar>;
 export declare const Documentation: Story;

package/ProgressBar/ProgressBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}
+{"version":3,"file":"ProgressBar/ProgressBar.stories.js","sources":["../../src/ProgressBar/ProgressBar.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressBar } from \"./ProgressBar.js\";\n\nconst meta: Meta<typeof ProgressBar> = {\n    title: \"Components/ProgressBar\",\n    component: ProgressBar,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        value: 50\n    },\n    argTypes: {\n        value: {\n            description: \"Current progress value (0-100)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        max: {\n            description: \"Maximum value for the progress bar. Defaults to 100.\",\n            control: { type: \"number\", min: 1 }\n        },\n        valuePosition: {\n            description:\n                \"Position of the value label relative to the progress bar. Can be 'start', 'end',  or 'both'. Defaults to 'undefined'.\",\n            control: {\n                type: \"select\",\n                options: [\"start\", \"end\", \"both\"]\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Default: Story = {\n    args: {\n        value: 50\n    }\n};\n\nexport const WithCustomMaxValue: Story = {\n    args: {\n        ...Default.args,\n        max: 200\n    }\n};\n\nexport const WithValuePositionStart: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"start\"\n    }\n};\n\nexport const WithValuePositionEnd: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"end\"\n    }\n};\n\nexport const WithValuePositionBoth: Story = {\n    args: {\n        ...Default.args,\n        valuePosition: \"both\"\n    }\n};\n\nexport const WithGetValueLabel: Story = {\n    args: {\n        ...Default.args,\n        getValueLabel: (value: number) => `${value} mb`\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    const value = Number(prevValue);\n\n                    if (value === 100) {\n                        return value;\n                    }\n                    return value + 5;\n                });\n            }, 100);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <ProgressBar {...args} value={value} />;\n    }\n};\n"],"names":["meta","ProgressBar","Documentation","Default","WithCustomMaxValue","WithValuePositionStart","WithValuePositionEnd","WithValuePositionBoth","WithGetValueLabel","value","WithControlledValue","args","setValue","useState","useEffect","interval","setInterval","prevValue","Number","clearInterval"],"mappings":";;AAIA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;IACX;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;gBAAG,KAAK;YAAI;QAChD;QACA,KAAK;YACD,aAAa;YACb,SAAS;gBAAE,MAAM;gBAAU,KAAK;YAAE;QACtC;QACA,eAAe;YACX,aACI;YACJ,SAAS;gBACL,MAAM;gBACN,SAAS;oBAAC;oBAAS;oBAAO;iBAAO;YACrC;QACJ;IACJ;AACJ;AAEA,4BAAeF;AAGR,MAAMG,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMI,wBAA+B;IACxC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,eAAe;IACnB;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,eAAe,CAACM,QAAkB,GAAGA,MAAM,GAAG,CAAC;IACnD;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,OAAO;IACX;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACF,OAAOG,SAAS,GAAGC,SAASF,KAAK,KAAK;QAE7CG,UAAU;YACN,MAAMC,WAAWC,YAAY;gBACzBJ,SAAS,CAACK,YAAY,CAAC;oBACnB,MAAMR,QAAQS,OAAOD;oBAErB,IAAIR,AAAU,QAAVA,OACA,OAAOA;oBAEX,OAAOA,QAAQ;gBACnB;YACJ,GAAG;YAEH,OAAO,IAAMU,cAAcJ;QAC/B,GAAG,EAAE;QAEL,OAAO,WAAP,GAAO,oBAACd,aAAWA;YAAE,GAAGU,IAAI;YAAE,OAAOF;;IACzC;AACJ"}

package/RadioGroup/RadioGroup.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { RadioGroupPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;
-declare const RadioGroup: (({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+declare const DecoratableRadioGroup: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: typeof DecoratableRadioGroup & {
+    original: typeof DecoratableRadioGroup;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+    original: typeof DecoratableRadioGroup & {
+        original: typeof DecoratableRadioGroup;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRadioGroup & {
+        original: typeof DecoratableRadioGroup;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RadioGroup/RadioGroup.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { RadioGroup } from "./RadioGroup.js";
 declare const meta: Meta<typeof RadioGroup>;
 export default meta;

package/RadioGroup/RadioGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true,\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}
+{"version":3,"file":"RadioGroup/RadioGroup.stories.js","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioGroup } from \"./RadioGroup.js\";\n\nconst meta: Meta<typeof RadioGroup> = {\n    title: \"Components/Form/RadioGroup\",\n    component: RadioGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <RadioGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RadioGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ]\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true,\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ]\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one option!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <RadioGroup\n                {...args}\n                value={value}\n                validation={validation}\n                onChange={newValue => setValue(newValue)}\n                onBlur={handleValidation}\n            />\n        );\n    },\n    args: {\n        label: \"Deployment Option\",\n        description: \"Choose your preferred deployment method\",\n        note: \"This setting will determine how your application is deployed\",\n        required: true,\n        disabled: false,\n        items: [\n            {\n                label: \"Automatic Deployment\",\n                value: \"automatic\"\n            },\n            {\n                label: \"Manual Deployment\",\n                value: \"manual\"\n            },\n            {\n                label: \"Scheduled Deployment\",\n                value: \"scheduled\"\n            }\n        ]\n    }\n};\n"],"names":["meta","RadioGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","validation","setValidation","handleValidation","newValue"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACD,YAAUA;YAAE,GAAGC,IAAI;YAAE,OAAOC;YAAO,UAAUA,CAAAA,QAASC,SAASD;;IAC3E;AACJ;AAEA,2BAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;SACH;IACL;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aACI;QACJ,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQZ,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;QACnC,MAAM,CAACU,YAAYC,cAAc,GAAGX,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAE1E,MAAMY,mBAAmB;YACjBf,KAAK,QAAQ,IAAI,CAACC,QAClBa,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAEA,OAAO,WAAP,GACI,oBAACf,YAAUA;YACN,GAAGC,IAAI;YACR,OAAOC;YACP,YAAYY;YACZ,UAAUG,CAAAA,WAAYd,SAASc;YAC/B,QAAQD;;IAGpB;IACA,MAAM;QACF,OAAO;QACP,aAAa;QACb,MAAM;QACN,UAAU;QACV,UAAU;QACV,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/RadioGroup/primitives/Radio.d.ts

@@ -7,21 +7,22 @@ interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPri
     label: string | React.ReactNode;
     id: string;
 }
-declare const Radio: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-    original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+declare const DecoratableRadio: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+declare const Radio: typeof DecoratableRadio & {
+    original: typeof DecoratableRadio;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+    original: typeof DecoratableRadio & {
+        original: typeof DecoratableRadio;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableRadio & {
+        original: typeof DecoratableRadio;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RadioGroup/primitives/RadioGroupPrimitive.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitives } from "radix-ui";
 import type { RadioItemParams, RadioItemFormatted } from "../domains/index.js";
+/**
+ * Radio Group Root
+ */
+declare const RadioGroupRoot: ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => React.JSX.Element;
 /**
  * Radio Group Renderer
  */
@@ -33,5 +37,5 @@ declare const RadioGroupPrimitive: (props: RadioGroupPrimitiveProps) => React.JS
  * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.
  * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.
  */
-declare const DeprecatedRadioGroup: ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => React.JSX.Element;
+declare const DeprecatedRadioGroup: typeof RadioGroupRoot;
 export { RadioGroupPrimitive, RadioGroupRenderer, DeprecatedRadioGroup, type RadioGroupPrimitiveProps, type RadioGroupVm };

package/RadioGroup/primitives/RadioGroupPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { RadioGroupPrimitive } from "./RadioGroupPrimitive.js";
 declare const meta: Meta<typeof RadioGroupPrimitive>;
 export default meta;