@frontify/fondue-components 19.2.0 → 19.3.0

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: props.modal ?? false }), [props.modal]);\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,16 +1,19 @@
 import { AriaAttributes } from 'react';
 import { ChangeEvent } from 'react';
+import { ChangeEventHandler } from 'react';
 import { CommonAriaAttrs } from '../../utilities/types';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
 import { FocusEvent as FocusEvent_2 } from 'react';
+import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
 import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { KeyboardEventHandler } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { ReactElement } from 'react';
@@ -20,7 +23,7 @@ import { SyntheticEvent } from 'react';
 
 export declare const Accordion: {
     Root: {
-        ({ "data-test-id": dataTestId, border, children, defaultValue, disabled, value, }: AccordionRootProps): JSX_2.Element;
+        ({ "data-test-id": dataTestId, border, children, defaultValue, disabled, value, padding, }: AccordionRootProps): JSX_2.Element;
         displayName: string;
     };
     Item: {
@@ -28,17 +31,20 @@ export declare const Accordion: {
         displayName: string;
     };
     Header: {
-        ({ onClick, children }: AccordionHeaderProps): JSX_2.Element;
-        displayName: string;
-    };
-    Trigger: {
-        ({ "data-test-id": dataTestId, asChild, children, }: AccordionTriggerProps): JSX_2.Element;
+        ({ "data-test-id": dataTestId, asChild, onClick, children, }: AccordionHeaderProps): JSX_2.Element;
         displayName: string;
     };
+    /**
+     * @deprecated Use `Accordion.Header` instead.
+     */
+    Trigger: ({ children }: {
+        children: ReactNode;
+    }) => ReactNode;
     Content: {
         ({ "data-test-id": dataTestId, children, divider, onClick, padding, }: AccordionContentProps): JSX_2.Element;
         displayName: string;
     };
+    Slot: ForwardRefExoticComponent<AccordionSlotProps & RefAttributes<HTMLDivElement>>;
 };
 
 declare type AccordionContentProps = {
@@ -63,12 +69,18 @@ declare type AccordionContentProps = {
 };
 
 declare type AccordionHeaderProps = {
+    'data-test-id'?: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
     /**
      * Click callback for this item.
      */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /**
-     * Children of the Accordion header. This should contain `Accordion.Trigger`
+     * Children of the Accordion header.
      */
     children?: ReactNode;
 };
@@ -117,19 +129,17 @@ declare type AccordionRootProps = {
      * The controlled stateful value of the accordion items whose contents are expanded.
      */
     value?: string[];
+    /**
+     * Controls if we show paddings around the header.
+     * @default 'large'
+     */
+    padding?: AccordionPadding;
 };
 
-declare type AccordionTriggerProps = {
+declare type AccordionSlotProps = {
+    children: ReactNode;
+    name?: 'action';
     'data-test-id'?: string;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-    /**
-     * Children of the Accordion trigger. This contains the actually clickable and visible header content
-     */
-    children?: ReactNode;
 };
 
 declare type AriaLabelAttrs = Pick<AriaAttributes, 'aria-label'> & Pick<AriaAttributes, 'aria-labelledby'>;
@@ -366,16 +376,6 @@ declare type CheckboxProps = {
     'aria-describedby'?: string;
 };
 
-declare type ClickableTableRowProps = BaseTableRowProps & {
-    /**
-     * Handler called when the row is clicked or activated via keyboard
-     * If provided, the row will be hoverable and interactive
-     */
-    onClick: (selected: boolean) => void;
-    onNavigate?: never;
-    href?: never;
-};
-
 declare type ColorFormat = 'HEX' | 'RGBA';
 
 export declare const ColorPicker: {
@@ -797,6 +797,12 @@ declare type DropdownTriggerProps = {
 
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
+declare type ExtraAction = {
+    icon: ReactElement;
+    title: string;
+    callback: () => void;
+};
+
 export declare const Flex: ForwardRefExoticComponent<LayoutComponentProps & {
 /**
 * The element to render the Flex component as.
@@ -1294,26 +1300,6 @@ declare type LoadingCircleProps = {
     'data-test-id'?: string;
 };
 
-declare type NavigableTableRowProps = BaseTableRowProps & {
-    onClick?: never;
-    /**
-     * Handler called when the row is clicked or activated via keyboard for navigation
-     * Must be provided together with href
-     */
-    onNavigate: (href: string) => void;
-    /**
-     * URL associated with this row for navigation
-     * Must be provided together with onNavigate
-     */
-    href: string;
-};
-
-declare type NonInteractiveTableRowProps = BaseTableRowProps & {
-    onClick?: never;
-    onNavigate?: never;
-    href?: never;
-};
-
 declare type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 
 declare type PositionValue = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
@@ -1621,6 +1607,8 @@ declare type SortDirection = 'ascending' | 'descending' | undefined;
 
 declare type SpacingValue = (string & {}) | (number & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
+declare type Status = 'default' | 'loading' | 'success' | 'error';
+
 export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;
 
 declare type SwitchProps = {
@@ -1677,7 +1665,13 @@ export declare const Table: {
     Header: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>>;
     HeaderCell: ForwardRefExoticComponent<TableHeaderCellProps & RefAttributes<HTMLTableCellElement>>;
     Body: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
-    Row: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+    Row: ForwardRefExoticComponent<BaseTableRowProps & {
+    /**
+    * Handler called when the row is clicked or activated via keyboard
+    * If provided, the row will be hoverable and interactive
+    */
+    onClick?: (selected: boolean) => void;
+    } & RefAttributes<HTMLTableRowElement>>;
     RowCell: ForwardRefExoticComponent<TableRowCellProps & RefAttributes<HTMLTableCellElement>>;
 };
 
@@ -1787,8 +1781,6 @@ declare type TableRowCellProps = {
     'aria-label'?: string;
 };
 
-declare type TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;
-
 export declare const Tabs: {
     Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
     Tab: ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
@@ -1798,6 +1790,7 @@ export declare const Tabs: {
 
 declare type TabsContentProps = {
     children: ReactNode;
+    asChild?: boolean;
 };
 
 declare type TabsRootProps = {
@@ -1882,6 +1875,88 @@ declare const Text_2: (<TTag extends TagType_2 = "span">(props: TextProps<TTag>
 };
 export { Text_2 as Text }
 
+export declare const Textarea: ({ "data-test-id": dataTestId, autocomplete, autosize, clearable, decorator, defaultValue, disabled, extraActions, focusOnMount, minRows: rows, maxRows, onEnterPressed, readOnly, resizable, selectable, status, value: inputValue, ...props }: TextareaProps) => JSX_2.Element;
+
+declare type TextareaProps = {
+    'data-test-id'?: string;
+    /**
+     * If `true`, Textarea will have `autoComplete` functionality
+     */
+    autocomplete?: boolean;
+    /**
+     * If `true`, component rendered is a auto sizing Textarea
+     */
+    autosize?: boolean;
+    /**
+     * Render `clear` button to clear input on click
+     */
+    clearable?: boolean;
+    /**
+     * A `ReactElement` that will be rendered at the start of the `Textarea`
+     */
+    decorator?: ReactElement;
+    /**
+     * Initial value
+     */
+    defaultValue?: string;
+    disabled?: boolean;
+    /**
+     * Collection of extra actions the input can preform
+     */
+    extraActions?: ExtraAction[];
+    /**
+     * If `true`, Textarea will be focused on mount
+     */
+    focusOnMount?: boolean;
+    /**
+     * If autosize is false, this is used as rows property for default textarea
+     * @default 1
+     */
+    minRows?: number;
+    /**
+     * If `autosize` is `false`, this property is ignored
+     */
+    maxRows?: number;
+    /**
+     * Event handler called when the textarea value changes
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text input is blurred
+     */
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text input is focused
+     */
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when a key is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when Enter is pressed
+     */
+    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when a key is released
+     */
+    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;
+    /**
+     * Event handler called when the text inside of text input is selected
+     */
+    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    resizable?: boolean;
+    selectable?: boolean;
+    /**
+     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.
+     * @default 'default'
+     */
+    status?: Status;
+    value?: string;
+};
+
 declare type TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';
 
 declare type TextElementMap = {