@webiny/admin-ui 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\n/**\n * Reproduces the Website Builder style sidebar at its 206px value column: the preview stacks,\n * the file name truncates in the middle so the extension and version suffix survive, and the\n * actions spell themselves out instead of costing a fixed block of the row.\n */\nexport const CompactWithLongFileNameInNarrowContainer: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState<FileItemDto | null>({\n            name: \"tide-cc-statuses-2026-08-21-final-v2.png\",\n            mimeType: \"image/png\",\n            size: 674161,\n            url: \"https://picsum.photos/1200/800\"\n        });\n\n        return (\n            <div style={{ width: 206 }}>\n                <FilePicker\n                    {...args}\n                    value={selectedFile}\n                    onSelectItem={() => setSelectedFile(getFile())}\n                    onRemoveItem={() => setSelectedFile(null)}\n                />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","CompactWithLongFileNameInNarrowContainer","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/FilePicker/primitives/components/previews/ItemDescription.js

@@ -7,7 +7,7 @@ const ItemDescription = ({ className, disabled, item, small, ...props })=>{
         unitSeparator: " "
     });
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("flex flex-col gap-xxs overflow-hidden flex-1 min-w-0", className),
+        className: cn("flex flex-col gap-xxs overflow-hidden min-w-0", className),
         ...props
     }, /*#__PURE__*/ react.createElement(Text, {
         size: "sm",

package/FilePicker/primitives/components/previews/ItemDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div\n            className={cn(\"flex flex-col gap-xxs overflow-hidden flex-1 min-w-0\", className)}\n            {...props}\n        >\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GAAG,wDAAwDP;QACrE,GAAGI,KAAK;qBAET,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div className={cn(\"flex flex-col gap-xxs overflow-hidden min-w-0\", className)} {...props}>\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWK,GAAG,iDAAiDP;QAAa,GAAGI,KAAK;qBACrF,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}

package/IconPicker/primitives/IconPickerPrimitive.js

@@ -49,8 +49,7 @@ const IconPickerPrimitive = (props)=>{
         size: props.size
     }))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
         align: "start",
-        className: "min-w-96",
-        onWheel: (e)=>e.stopPropagation()
+        className: "min-w-96"
     }, /*#__PURE__*/ react.createElement(IconPickerInput, {
         value: vm.searchQuery,
         onChange: searchIcon,

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","e","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QACrB,OAAO;QACP,WAAW;QACX,SAASI,CAAAA,IAAKA,EAAE,eAAe;qBAE/B,oBAACC,iBAAeA;QAAC,OAAOd,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACU,gBAAcA;QACX,OAAOf,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content align={\"start\"} className={\"min-w-96\"}>\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QAAC,OAAO;QAAS,WAAW;qBACjD,oBAACI,iBAAeA;QAAC,OAAOb,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACS,gBAAcA;QACX,OAAOd,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}

package/ImageEditor/types.js

@@ -17,7 +17,7 @@ const DEFAULT_ASPECT_RATIOS = [
     {
         id: "3:4",
         label: "Portrait (3:4)",
-        ratio: 3 / 4
+        ratio: 0.75
     },
     {
         id: "9:16",

package/ImageEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor/types.js","sources":["../../src/ImageEditor/types.ts"],"sourcesContent":["/**\n * Generic, self-contained types for the reusable image editor dialog.\n *\n * These are intentionally NOT imported from `@webiny/website-builder-sdk`:\n * `@webiny/admin-ui` is the low-level design-system layer and must not depend on\n * higher-level SDKs. The shapes are structurally identical to the SDK's\n * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website\n * Builder) can pass values across the boundary without any mapping.\n */\n\n/** Minimal information the editor needs about the source image. */\nexport interface ImageEditorImage {\n    src: string;\n    /** Intrinsic (original) pixel width. */\n    width: number;\n    /** Intrinsic (original) pixel height. */\n    height: number;\n}\n\n/** Crop stored as the fraction (0..1) cut off from each edge of the image. */\nexport interface ImageEditorCrop {\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n}\n\n/** Focal region in normalized (0..1) coordinates of the original image. */\nexport interface ImageEditorHotspot {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/** The complete non-destructive edit produced by the dialog. */\nexport interface ImageEditorValue {\n    crop?: ImageEditorCrop;\n    hotspot?: ImageEditorHotspot;\n    alt?: string;\n    caption?: string;\n}\n\n/** A single aspect ratio used both for the crop selector and the preview strip. */\nexport interface ImageEditorAspectRatio {\n    id: string;\n    label: string;\n    /** `width / height`. */\n    ratio: number;\n}\n\n/**\n * The single source of truth for selectable aspect ratios, shared by the crop\n * shape selector and the preview-shapes dropdown so their labels stay identical.\n */\nexport const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[] = [\n    { id: \"1:1\", label: \"Square (1:1)\", ratio: 1 },\n    { id: \"4:3\", label: \"Landscape (4:3)\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"Widescreen (16:9)\", ratio: 16 / 9 },\n    { id: \"3:4\", label: \"Portrait (3:4)\", ratio: 3 / 4 },\n    { id: \"9:16\", label: \"Tall (9:16)\", ratio: 9 / 16 }\n];\n\n/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */\nexport const DEFAULT_PREVIEW_RATIO_IDS = [\"1:1\", \"4:3\", \"16:9\"];\n"],"names":["DEFAULT_ASPECT_RATIOS","DEFAULT_PREVIEW_RATIO_IDS"],"mappings":"AAuDO,MAAMA,wBAAkD;IAC3D;QAAE,IAAI;QAAO,OAAO;QAAgB,OAAO;IAAE;IAC7C;QAAE,IAAI;QAAO,OAAO;QAAmB,OAAO,IAAI;IAAE;IACpD;QAAE,IAAI;QAAQ,OAAO;QAAqB,OAAO,KAAK;IAAE;IACxD;QAAE,IAAI;QAAO,OAAO;QAAkB,OAAO,IAAI;IAAE;IACnD;QAAE,IAAI;QAAQ,OAAO;QAAe,OAAO,IAAI;IAAG;CACrD;AAGM,MAAMC,4BAA4B;IAAC;IAAO;IAAO;CAAO"}
+{"version":3,"file":"ImageEditor/types.js","sources":["../../src/ImageEditor/types.ts"],"sourcesContent":["/**\n * Generic, self-contained types for the reusable image editor dialog.\n *\n * These are intentionally NOT imported from `@webiny/website-builder-sdk`:\n * `@webiny/admin-ui` is the low-level design-system layer and must not depend on\n * higher-level SDKs. The shapes are structurally identical to the SDK's\n * `WebinyImageEdit`/`WebinyImageValue`, so consumers (File Manager, Website\n * Builder) can pass values across the boundary without any mapping.\n */\n\n/** Minimal information the editor needs about the source image. */\nexport interface ImageEditorImage {\n    src: string;\n    /** Intrinsic (original) pixel width. */\n    width: number;\n    /** Intrinsic (original) pixel height. */\n    height: number;\n}\n\n/** Crop stored as the fraction (0..1) cut off from each edge of the image. */\nexport interface ImageEditorCrop {\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n}\n\n/** Focal region in normalized (0..1) coordinates of the original image. */\nexport interface ImageEditorHotspot {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n}\n\n/** The complete non-destructive edit produced by the dialog. */\nexport interface ImageEditorValue {\n    crop?: ImageEditorCrop;\n    hotspot?: ImageEditorHotspot;\n    alt?: string;\n    caption?: string;\n}\n\n/** A single aspect ratio used both for the crop selector and the preview strip. */\nexport interface ImageEditorAspectRatio {\n    id: string;\n    label: string;\n    /** `width / height`. */\n    ratio: number;\n}\n\n/**\n * The single source of truth for selectable aspect ratios, shared by the crop\n * shape selector and the preview-shapes dropdown so their labels stay identical.\n */\nexport const DEFAULT_ASPECT_RATIOS: ImageEditorAspectRatio[] = [\n    { id: \"1:1\", label: \"Square (1:1)\", ratio: 1 },\n    { id: \"4:3\", label: \"Landscape (4:3)\", ratio: 4 / 3 },\n    { id: \"16:9\", label: \"Widescreen (16:9)\", ratio: 16 / 9 },\n    { id: \"3:4\", label: \"Portrait (3:4)\", ratio: 3 / 4 },\n    { id: \"9:16\", label: \"Tall (9:16)\", ratio: 9 / 16 }\n];\n\n/** Preview shapes selected by default (the originally specified square / 4:3 / 16:9). */\nexport const DEFAULT_PREVIEW_RATIO_IDS = [\"1:1\", \"4:3\", \"16:9\"];\n"],"names":["DEFAULT_ASPECT_RATIOS","DEFAULT_PREVIEW_RATIO_IDS"],"mappings":"AAuDO,MAAMA,wBAAkD;IAC3D;QAAE,IAAI;QAAO,OAAO;QAAgB,OAAO;IAAE;IAC7C;QAAE,IAAI;QAAO,OAAO;QAAmB,OAAO,IAAI;IAAE;IACpD;QAAE,IAAI;QAAQ,OAAO;QAAqB,OAAO,KAAK;IAAE;IACxD;QAAE,IAAI;QAAO,OAAO;QAAkB,OAAO;IAAM;IACnD;QAAE,IAAI;QAAQ,OAAO;QAAe,OAAO,IAAI;IAAG;CACrD;AAGM,MAAMC,4BAA4B;IAAC;IAAO;IAAO;CAAO"}

package/Markdown/Markdown.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { type TextProps } from "../Text/index.js";
+/**
+ * Styling for compiled markdown BLOCKS.
+ *
+ * Tailwind's preflight strips list markers and paragraph margins, and the markdown compiler emits
+ * bare elements, so without this a list renders as unindented run-on text and a fenced code block as
+ * plain prose. Child selectors rather than a global stylesheet, so this reaches only markdown that
+ * was asked to be styled.
+ *
+ * Exported for a caller that needs the classes without this component, e.g. one already rendering
+ * compiled markdown inside its own element.
+ */
+export declare const markdownBlockClasses: string;
+export interface MarkdownProps extends Pick<TextProps, "size" | "className"> {
+    children: React.ReactNode;
+}
+/**
+ * Renders markdown that contains block content: paragraphs, lists, fenced code.
+ *
+ * `Alert`, `Label` and the form-field descriptions call `compileMarkdown` directly and need none of
+ * this, because they render a sentence with a bold word or a link. Reach for this component when the
+ * source is long-form and its structure has to survive.
+ *
+ * Renders a `div`, since `Text` is a span by default and block markdown nested in one is invalid.
+ */
+declare const MarkdownBase: ({ children, size, className }: MarkdownProps) => React.JSX.Element;
+declare const Markdown: typeof MarkdownBase & {
+    original: typeof MarkdownBase;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof MarkdownBase & {
+        original: typeof MarkdownBase;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof MarkdownBase & {
+        original: typeof MarkdownBase;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Markdown };

package/Markdown/Markdown.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { cn, makeDecoratable } from "../utils.js";
+import { Text } from "../Text/index.js";
+import { useAdminUi } from "../AdminUiProvider/index.js";
+const markdownBlockClasses = "[&_p]:mb-xs [&_p:last-child]:mb-0 [&_ul]:mb-xs [&_ul]:list-disc [&_ul]:pl-lg [&_ol]:mb-xs [&_ol]:list-decimal [&_ol]:pl-lg [&_li]:mt-xxs [&_strong]:font-semibold [&_a]:underline [&_code]:rounded [&_code]:bg-neutral-subtle [&_code]:px-xs [&_code]:font-mono [&_pre]:mb-xs [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-neutral-subtle [&_pre]:p-sm";
+const MarkdownBase = ({ children, size = "sm", className })=>{
+    const { compileMarkdown } = useAdminUi();
+    return /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: size,
+        className: cn(markdownBlockClasses, className)
+    }, compileMarkdown(children));
+};
+const Markdown = makeDecoratable("Markdown", MarkdownBase);
+export { Markdown, markdownBlockClasses };
+
+//# sourceMappingURL=Markdown.js.map

package/Markdown/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown/Markdown.js","sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text, type TextProps } from \"~/Text/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\n/**\n * Styling for compiled markdown BLOCKS.\n *\n * Tailwind's preflight strips list markers and paragraph margins, and the markdown compiler emits\n * bare elements, so without this a list renders as unindented run-on text and a fenced code block as\n * plain prose. Child selectors rather than a global stylesheet, so this reaches only markdown that\n * was asked to be styled.\n *\n * Exported for a caller that needs the classes without this component, e.g. one already rendering\n * compiled markdown inside its own element.\n */\nexport const markdownBlockClasses = [\n    \"[&_p]:mb-xs [&_p:last-child]:mb-0\",\n    \"[&_ul]:mb-xs [&_ul]:list-disc [&_ul]:pl-lg\",\n    \"[&_ol]:mb-xs [&_ol]:list-decimal [&_ol]:pl-lg\",\n    \"[&_li]:mt-xxs\",\n    \"[&_strong]:font-semibold\",\n    \"[&_a]:underline\",\n    \"[&_code]:rounded [&_code]:bg-neutral-subtle [&_code]:px-xs [&_code]:font-mono\",\n    \"[&_pre]:mb-xs [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-neutral-subtle [&_pre]:p-sm\"\n].join(\" \");\n\nexport interface MarkdownProps extends Pick<TextProps, \"size\" | \"className\"> {\n    children: React.ReactNode;\n}\n\n/**\n * Renders markdown that contains block content: paragraphs, lists, fenced code.\n *\n * `Alert`, `Label` and the form-field descriptions call `compileMarkdown` directly and need none of\n * this, because they render a sentence with a bold word or a link. Reach for this component when the\n * source is long-form and its structure has to survive.\n *\n * Renders a `div`, since `Text` is a span by default and block markdown nested in one is invalid.\n */\nconst MarkdownBase = ({ children, size = \"sm\", className }: MarkdownProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    return (\n        <Text as=\"div\" size={size} className={cn(markdownBlockClasses, className)}>\n            {compileMarkdown(children)}\n        </Text>\n    );\n};\n\nconst Markdown = makeDecoratable(\"Markdown\", MarkdownBase);\n\nexport { Markdown };\n"],"names":["markdownBlockClasses","MarkdownBase","children","size","className","compileMarkdown","useAdminUi","Text","cn","Markdown","makeDecoratable"],"mappings":";;;;AAgBO,MAAMA,uBAAuB;AAwBpC,MAAMC,eAAe,CAAC,EAAEC,QAAQ,EAAEC,OAAO,IAAI,EAAEC,SAAS,EAAiB;IACrE,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAE5B,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,IAAG;QAAM,MAAMJ;QAAM,WAAWK,GAAGR,sBAAsBI;OAC1DC,gBAAgBH;AAG7B;AAEA,MAAMO,WAAWC,gBAAgB,YAAYT"}

package/Markdown/index.d.ts

@@ -0,0 +1 @@
+export * from "./Markdown.js";

package/Markdown/index.js

@@ -0,0 +1 @@
+export * from "./Markdown.js";

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.d.ts

@@ -82,6 +82,12 @@ interface MultiAutoCompletePrimitiveProps {
      * Custom renderer for the selected options.
      */
     selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Filter the options by the typed text on the client. Defaults to `true`.
+     * Set to `false` when `onValueSearch` already returns the matching options,
+     * so options matched on data other than their label are not dropped.
+     */
+    shouldFilter?: boolean;
     /**
      * Icon to be displayed at the start of the input field.
      */

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js

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

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete.js\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components/index.js\";\nimport type { MultiAutoCompleteOption } from \"../domains/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"names":["DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","useMultiAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleCreateOption","PopoverPrimitive","Command","String","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","e","MultiAutoCompleteList","MultiAutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAkHA,MAAMA,wCAAwC,CAACC;IAC3C,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,oBAAoB,EACpBC,oBAAoB,EACpBC,YAAY,EACf,GAAGC,qBAAqBR;IAEzB,MAAMS,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIX,MAAM,QAAQ,EACd;QAGJ,IAAI,CAACC,GAAG,aAAa,CAAC,IAAI,EACtBC,iBAAiB;QAGrB,IAAIS,AAA4B,aAA5BA,MAAM,GAAG,CAAC,WAAW,IACrBT,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;QAAkBC;QAAmBF,GAAG,aAAa,CAAC,IAAI;KAAC;IAGhF,MAAMW,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGV,kBAAkBU;QAClBX,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMY,qBAAqBJ,MAAAA,WAAiB,CACxC,CAACG;QACGN,aAAaM;QACbX,iBAAiB;IACrB,GACA;QAACK;QAAcL;KAAiB;IAGpC,OAAO,WAAP,GACI,oBAACa,kBAAgBA;QAAC,MAAMd,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACc,SAAOA;QAAC,OAAOC,OAAOjB,MAAM,KAAK;QAAG,WAAWS;qBAC5C,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACG,wBAAsBA;QACnB,UAAUlB,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,aAAaA,GAAG,OAAO,CAAC,WAAW;QACnC,aAAaG;QACb,WAAW,IAAMF,iBAAiB;QAClC,UAAU,IAAMA,iBAAiB;QACjC,SAASF,MAAM,OAAO;QACtB,MAAMA,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,sBAAsBK;QACtB,wBAAwBL,MAAM,sBAAsB;QACpD,iBAAiBC,GAAG,iBAAiB,CAAC,OAAO;QAC7C,UAAUD,MAAM,QAAQ;QACxB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACmB,6BAA2BA;YACxB,WAAWnB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBACI,CAACC,GAAG,iBAAiB,CAAC,KAAK,IAAIA,GAAG,OAAO,CAAC,kBAAkB;YAEhE,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcM;YACd,cAAc,IAAMJ,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;wBAM/E,oBAACc,iBAAiB,OAAO;QACrB,OAAO;YAAE,OAAO;QAAqC;QACrD,iBAAiBK,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,uBAAqBA;QAClB,cAAcpB,GAAG,aAAa,CAAC,YAAY;QAC3C,OAAOA,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,gBAAgBa;QAChB,gBAAgBF;QAChB,gBAAgBZ,MAAM,cAAc;QACpC,SAASC,GAAG,aAAa,CAAC,OAAO;QACjC,iBAAiBA,GAAG,iBAAiB,CAAC,MAAM;;AAMpE;AAEA,MAAMqB,6BAA6BC,gBAC/B,8BACAxB"}
+{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete.js\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components/index.js\";\nimport type { MultiAutoCompleteOption } from \"../domains/index.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Filter the options by the typed text on the client. Defaults to `true`.\n     * Set to `false` when `onValueSearch` already returns the matching options,\n     * so options matched on data other than their label are not dropped.\n     */\n    shouldFilter?: boolean;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command\n                label={String(props.label)}\n                shouldFilter={props.shouldFilter}\n                onKeyDown={handleKeyDown}\n            >\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"names":["DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","useMultiAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleCreateOption","PopoverPrimitive","Command","String","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","e","MultiAutoCompleteList","MultiAutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAwHA,MAAMA,wCAAwC,CAACC;IAC3C,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,oBAAoB,EACpBC,oBAAoB,EACpBC,YAAY,EACf,GAAGC,qBAAqBR;IAEzB,MAAMS,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIX,MAAM,QAAQ,EACd;QAGJ,IAAI,CAACC,GAAG,aAAa,CAAC,IAAI,EACtBC,iBAAiB;QAGrB,IAAIS,AAA4B,aAA5BA,MAAM,GAAG,CAAC,WAAW,IACrBT,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;QAAkBC;QAAmBF,GAAG,aAAa,CAAC,IAAI;KAAC;IAGhF,MAAMW,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGV,kBAAkBU;QAClBX,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMY,qBAAqBJ,MAAAA,WAAiB,CACxC,CAACG;QACGN,aAAaM;QACbX,iBAAiB;IACrB,GACA;QAACK;QAAcL;KAAiB;IAGpC,OAAO,WAAP,GACI,oBAACa,kBAAgBA;QAAC,MAAMd,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACc,SAAOA;QACJ,OAAOC,OAAOjB,MAAM,KAAK;QACzB,cAAcA,MAAM,YAAY;QAChC,WAAWS;qBAEX,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACG,wBAAsBA;QACnB,UAAUlB,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,aAAaA,GAAG,OAAO,CAAC,WAAW;QACnC,aAAaG;QACb,WAAW,IAAMF,iBAAiB;QAClC,UAAU,IAAMA,iBAAiB;QACjC,SAASF,MAAM,OAAO;QACtB,MAAMA,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,sBAAsBK;QACtB,wBAAwBL,MAAM,sBAAsB;QACpD,iBAAiBC,GAAG,iBAAiB,CAAC,OAAO;QAC7C,UAAUD,MAAM,QAAQ;QACxB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACmB,6BAA2BA;YACxB,WAAWnB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBACI,CAACC,GAAG,iBAAiB,CAAC,KAAK,IAAIA,GAAG,OAAO,CAAC,kBAAkB;YAEhE,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcM;YACd,cAAc,IAAMJ,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;wBAM/E,oBAACc,iBAAiB,OAAO;QACrB,OAAO;YAAE,OAAO;QAAqC;QACrD,iBAAiBK,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,uBAAqBA;QAClB,cAAcpB,GAAG,aAAa,CAAC,YAAY;QAC3C,OAAOA,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,gBAAgBa;QAChB,gBAAgBF;QAChB,gBAAgBZ,MAAM,cAAc;QACpC,SAASC,GAAG,aAAa,CAAC,OAAO;QACjC,iBAAiBA,GAAG,iBAAiB,CAAC,MAAM;;AAMpE;AAEA,MAAMqB,6BAA6BC,gBAC/B,8BACAxB"}

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: "min(250px, var(--radix-popover-content-available-height, 250px))"
+            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: \"min(250px, var(--radix-popover-content-available-height, 250px))\"\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.stories.d.ts

@@ -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\";\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/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/RadioGroup/primitives/RadioGroupPrimitive.d.ts

@@ -26,7 +26,7 @@ interface RadioGroupRendererProps extends Omit<RadioGroupPrimitiveProps, "onChan
     items: RadioItemFormatted[];
     changeValue: (value: string) => void;
 }
-declare const RadioGroupRenderer: ({ items, changeValue, value, disabled }: RadioGroupRendererProps) => React.JSX.Element;
+declare const RadioGroupRenderer: ({ items, changeValue, value, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: RadioGroupRendererProps) => React.JSX.Element;
 /**
  * Radio Group Primitive
  */