@economic/taco 0.0.5-alpha.0 → 0.0.9-alpha.0

package/dist/esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport { DialogContentProps, DialogTitleProps, DialogFooterProps, DialogCloseProps };\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const { children: initialChildren, draggable = false, onClose, open: defaultOpen, size = 'sm', ...otherProps } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            size,\n            ref,\n        }),\n        [open, drawerOpen, drawer, extra, otherProps]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","draggable","onClose","defaultOpen","open","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n    DialogSize,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.forEach(initialChildren, (child: any) => {\n            if (child.type.displayName === 'Drawer') {\n                drawer = child;\n            } else if (child.type.displayName === 'Extra') {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef((props: DialogProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        draggable = false,\n        onClose,\n        open: defaultOpen,\n        showCloseButton = true,\n        size = 'sm',\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n\n    const [open, setOpen] = React.useState(defaultOpen);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            close: () => setOpen(false),\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root children={children} open={open} onOpenChange={setOpen} />\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","forEach","child","type","displayName","push","Dialog","props","ref","closeOnEscape","draggable","onClose","defaultOpen","open","showCloseButton","size","otherProps","setOpen","drawerOpen","setDrawerOpen","context","close","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Extra","Drawer","Close"],"mappings":"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"}

package/dist/esm/components/Dialog/components/Content.js

@@ -3,25 +3,26 @@ import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { useLocalization } from '../../Provider/Provider.js';
+import { useCurrentMenu } from '../../Menu/Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 import { useDraggable } from '../../../utils/hooks/useDraggable.js';
-import { useCurrentMenu } from '../../Menu/Context.js';
-import { Group } from '../../Group/Group.js';
 import { IconButton } from '../../IconButton/IconButton.js';
 
 var Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  var className = cn('text-center', props.className);
   return createElement(Title$1, Object.assign({}, props, {
-    className: "text-center",
+    className: className,
     ref: ref
   }));
 });
 var Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
+  var className = cn('mt-8 flex justify-end', props.className);
   return createElement("div", Object.assign({}, props, {
-    className: "mt-8 flex justify-end",
+    className: className,
     ref: ref
-  }), createElement(Group, null, props.children));
+  }), props.children);
 });
 var Close = /*#__PURE__*/forwardRef(function DialogClose(props, ref) {
   var dialog = useCurrentDialog();
@@ -63,7 +64,16 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   });
   var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
     'rounded-b-none': !!dialog.elements.extra
-  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className);
+
+  var handleEscapeKeyDown = function handleEscapeKeyDown(event) {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  }; // the chosen behaviour in taco is that outside clicks do not close the dialog
+
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -84,7 +94,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     asChild: true
   }, createElement(Backdrop, null, createElement(Content$1, Object.assign({}, props, {
     className: className,
-    onEscapeKeyDown: dialog.onClose,
+    onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
     ref: ref,
@@ -98,7 +108,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   }, output, dialog.draggable && createElement("div", Object.assign({}, dragHandleProps, {
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
-  })), createElement(Close$1, {
+  })), dialog.showCloseButton ? createElement(Close$1, {
     asChild: true,
     onClick: dialog.onClose
   }, createElement(IconButton, {
@@ -106,7 +116,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra))));
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 export { Close, Content, Footer, Title };

package/dist/esm/components/Dialog/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Group } from '../../Group/Group';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    return <DialogPrimitive.Title {...props} className=\"text-center\" ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div {...props} className=\"mt-8 flex justify-end\" ref={ref}>\n            <Group>{props.children}</Group>\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible description to be announced when the dialog is opened */\n    'aria-describedby': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={dialog.onClose}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                            top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                                <IconButton\n                                    appearance=\"discrete\"\n                                    aria-label={texts.dialog.close}\n                                    className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                    icon=\"close\"\n                                />\n                            </DialogPrimitive.Close>\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","DialogPrimitive","className","Footer","DialogFooter","Group","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","cn","size","containerClassName","elements","extra","handleInteractOutside","event","preventDefault","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","IconButton","appearance","icon"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentDrawerRenderProps = {\n    open: boolean;\n    toggle: () => void;\n};\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const handleEscapeKeyDown = event => {\n        if (!dialog.closeOnEscape) {\n            event.preventDefault();\n        } else if (dialog.onClose) {\n            dialog.onClose();\n        }\n    };\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={handleEscapeKeyDown}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                            top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            {dialog.showCloseButton ? (\n                                <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                                    <IconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                        icon=\"close\"\n                                    />\n                                </DialogPrimitive.Close>\n                            ) : null}\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/components/Dialog/components/Drawer.js

@@ -1,4 +1,5 @@
 import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
 import { motion } from 'framer-motion';
 import { useCurrentDialog } from '../Context.js';
 
@@ -6,8 +7,9 @@ var Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;
 
   var dialog = useCurrentDialog();
+  var className = cn('absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
   return createElement(motion.div, Object.assign({}, props, {
-    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
+    className: className,
     "data-taco": "dialog-drawer",
     "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
     variants: {

package/dist/esm/components/Dialog/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left\"\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;iBACA;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA3BqB;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;;IAUaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBL,KAAK,CAACI,SAFU,CAApB;AAKA,SACIN,aAAA,CAACQ,MAAM,CAACC,GAAR,oBACQP;AACJI,IAAAA,SAAS,EAAEA;iBACD;mBACG,oBAACF,MAAM,CAACM,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CR,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA/BqB;;;;"}

package/dist/esm/components/Dialog/components/Extra.js

@@ -1,8 +1,10 @@
 import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
 
 var Extra = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    className: className,
     "data-taco": "dialog-extra",
     ref: ref
   }));

package/dist/esm/components/Dialog/components/Extra.js.map

@@ -1 +1 @@
-{"version":3,"file":"Extra.js","sources":["../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left\"\n            data-taco=\"dialog-extra\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;iBACA;AACVD,IAAAA,GAAG,EAAEA;IAJT,CADJ;AAQH,CAToB;;;;"}
+{"version":3,"file":"Extra.js","sources":["../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\n        props.className\n    );\n\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\n});\n"],"names":["Extra","React","props","ref","className","cn"],"mappings":";;;IAKaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,MAAMC,SAAS,GAAGC,EAAE,CAChB,6GADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;AAKA,SAAOH,aAAA,MAAA,oBAASC;AAAOE,IAAAA,SAAS,EAAEA;iBAAqB;AAAeD,IAAAA,GAAG,EAAEA;IAApE,CAAP;AACH,CAPoB;;;;"}

package/dist/esm/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: React.ReactElement<DialogProps>;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Hanger component associated with the button. */\n    hanger?: React.ReactElement<HangerProps>;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: React.ReactElement<PopoverProps>;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { appearance, icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAoCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAFJ,EAGhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAHgB,EAShBV,KAAK,CAACM,SATU,CAApB;;AAYA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAxByB;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: React.ReactElement<DialogProps>;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Hanger component associated with the button. */\n    hanger?: React.ReactElement<HangerProps>;\n    /** Menu component associated with the button. */\n    menu?: React.ReactElement<MenuProps>;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: React.ReactElement<PopoverProps>;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { appearance, icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EADA,EAEhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAFJ,EAGhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAHgB,EAShBV,KAAK,CAACM,SATU,CAApB;;AAYA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAxByB;;;;"}

package/dist/esm/components/Input/Input.js

@@ -5,7 +5,7 @@ import { Icon } from '../Icon/Icon.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses, getButtonStateClasses } from './util.js';
 
-var _excluded = ["button", "defaultValue", "icon", "highlighted", "state", "autoFocus"];
+var _excluded = ["button", "icon", "highlighted", "state", "autoFocus"];
 var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,

package/dist/esm/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** State will change the style of the input **/\n    state?: State;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, defaultValue: _, icon, highlighted, state, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(state)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","state","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;;;IAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,MAAQC,MAAR,GAAwFF,KAAxF,CAAQE,MAAR;AAAA,MAAiCC,IAAjC,GAAwFH,KAAxF,CAAiCG,IAAjC;AAAA,MAAoDC,KAApD,GAAwFJ,KAAxF,CAAoDI,KAApD;AAAA,MAA2DC,SAA3D,GAAwFL,KAAxF,CAA2DK,SAA3D;AAAA,MAAyEC,UAAzE,iCAAwFN,KAAxF;;AACA,MAAMO,QAAQ,GAAGC,aAAa,CAAmBP,GAAnB,CAA9B;AACA,MAAMQ,YAAY,GAAGP,MAAM,IAAIC,IAA/B;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACZ,KAAD,CADC,EAEhB,6CAFgB,EAGhB;AACI,YAAQ,CAAC,CAACS;AADd,GAHgB,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;AASAX,EAAAA,SAAA,CAAgB;AACZ,QAAIM,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;AAC/BN,MAAAA,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,MAAMC,KAAK,GAAGhB,aAAA,QAAA,oBAAWO;AAAYI,IAAAA,SAAS,EAAEA;iBAAqB;AAAQT,IAAAA,GAAG,EAAEM;IAApE,CAAd;;AAEA,MAAIE,YAAJ,EAAkB;AACd,QAAIO,KAAJ;;AAEA,QAAId,MAAJ,EAAY;AAAA;;AACR,UAAMe,QAAQ,4BAAGf,MAAM,CAACF,KAAP,CAAaiB,QAAhB,yEAA4BX,UAAU,CAACW,QAArD;AACA,UAAMC,eAAe,GAAGP,EAAE,CACtB,2HADsB,iBAGjBQ,qBAAqB,CAACf,KAAD,CAHJ,IAGc,CAACJ,KAAK,CAACiB,QAHrB,QAKtBf,MAAM,CAACF,KAAP,CAAaU,SALS,CAA1B;AAOAM,MAAAA,KAAK,GAAGjB,YAAA,CAAmBG,MAAnB,EAA2B;AAC/BQ,QAAAA,SAAS,EAAEQ,eADoB;AAE/BD,QAAAA,QAAQ,EAARA;AAF+B,OAA3B,CAAR;AAIH,KAbD,MAaO,IAAId,IAAJ,EAAU;AACb,UAAMiB,aAAa,GAAGT,EAAE,CACpB,8GADoB,EAEpB;AACI,0BAAkBX,KAAK,CAACiB,QAD5B;AAEI,6BAAqB,CAACjB,KAAK,CAACiB;AAFhC,OAFoB,CAAxB;AAOAD,MAAAA,KAAK,GACD,OAAOb,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACsB,IAAD;AAAMX,QAAAA,SAAS,EAAEU;AAAeE,QAAAA,IAAI,EAAEnB;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;AAAEO,QAAAA,SAAS,EAAEC,EAAE,CAACS,aAAD,EAAgBjB,IAAI,CAACH,KAAL,CAAWU,SAA3B;AAAf,OAAzB,CAJR;AAMH;;AAED,QAAMa,kBAAkB,GAAGZ,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;AAEA,WACIX,aAAA,MAAA;AAAKW,MAAAA,SAAS,EAAEa;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;AAMH;;AAED,SAAOD,KAAP;AACH,CAhEoB;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { State } from '../../types';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** State will change the style of the input **/\n    state?: State;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, state, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(state)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","state","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;;;IAkBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,MAAQC,MAAR,GAAuEF,KAAvE,CAAQE,MAAR;AAAA,MAAgBC,IAAhB,GAAuEH,KAAvE,CAAgBG,IAAhB;AAAA,MAAmCC,KAAnC,GAAuEJ,KAAvE,CAAmCI,KAAnC;AAAA,MAA0CC,SAA1C,GAAuEL,KAAvE,CAA0CK,SAA1C;AAAA,MAAwDC,UAAxD,iCAAuEN,KAAvE;;AACA,MAAMO,QAAQ,GAAGC,aAAa,CAAmBP,GAAnB,CAA9B;AACA,MAAMQ,YAAY,GAAGP,MAAM,IAAIC,IAA/B;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACZ,KAAD,CADC,EAEhB,6CAFgB,EAGhB;AACI,YAAQ,CAAC,CAACS;AADd,GAHgB,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;AASAX,EAAAA,SAAA,CAAgB;AACZ,QAAIM,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;AAC/BN,MAAAA,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,MAAMC,KAAK,GAAGhB,aAAA,QAAA,oBAAWO;AAAYI,IAAAA,SAAS,EAAEA;iBAAqB;AAAQT,IAAAA,GAAG,EAAEM;IAApE,CAAd;;AAEA,MAAIE,YAAJ,EAAkB;AACd,QAAIO,KAAJ;;AAEA,QAAId,MAAJ,EAAY;AAAA;;AACR,UAAMe,QAAQ,4BAAGf,MAAM,CAACF,KAAP,CAAaiB,QAAhB,yEAA4BX,UAAU,CAACW,QAArD;AACA,UAAMC,eAAe,GAAGP,EAAE,CACtB,2HADsB,iBAGjBQ,qBAAqB,CAACf,KAAD,CAHJ,IAGc,CAACJ,KAAK,CAACiB,QAHrB,QAKtBf,MAAM,CAACF,KAAP,CAAaU,SALS,CAA1B;AAOAM,MAAAA,KAAK,GAAGjB,YAAA,CAAmBG,MAAnB,EAA2B;AAC/BQ,QAAAA,SAAS,EAAEQ,eADoB;AAE/BD,QAAAA,QAAQ,EAARA;AAF+B,OAA3B,CAAR;AAIH,KAbD,MAaO,IAAId,IAAJ,EAAU;AACb,UAAMiB,aAAa,GAAGT,EAAE,CACpB,8GADoB,EAEpB;AACI,0BAAkBX,KAAK,CAACiB,QAD5B;AAEI,6BAAqB,CAACjB,KAAK,CAACiB;AAFhC,OAFoB,CAAxB;AAOAD,MAAAA,KAAK,GACD,OAAOb,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACsB,IAAD;AAAMX,QAAAA,SAAS,EAAEU;AAAeE,QAAAA,IAAI,EAAEnB;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;AAAEO,QAAAA,SAAS,EAAEC,EAAE,CAACS,aAAD,EAAgBjB,IAAI,CAACH,KAAL,CAAWU,SAA3B;AAAf,OAAzB,CAJR;AAMH;;AAED,QAAMa,kBAAkB,GAAGZ,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;AAEA,WACIX,aAAA,MAAA;AAAKW,MAAAA,SAAS,EAAEa;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;AAMH;;AAED,SAAOD,KAAP;AACH,CAhEoB;;;;"}

package/dist/esm/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 import { useState, useMemo, createElement } from 'react';
-import { MenuContext } from './Context.js';
 import { Root } from '@radix-ui/react-dropdown-menu';
+import { MenuContext } from './Context.js';
 import { Content } from './components/Content.js';
 import { Item } from './components/Item.js';
 import { Link } from './components/Link.js';

package/dist/esm/components/Menu/components/Content.js

@@ -1,9 +1,9 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
-import { useCurrentMenu } from '../Context.js';
 import { Content as Content$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 
 var _excluded = ["children", "placement"];
 

package/dist/esm/components/Menu/components/Header.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import cn from 'classnames';
-import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 var getAppearanceClasses = function getAppearanceClasses(appearance) {
   switch (appearance) {

package/dist/esm/components/Menu/components/Item.js

@@ -2,8 +2,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
 import { forwardRef, createElement, useEffect } from 'react';
 import cn from 'classnames';
 import { Icon as Icon$1 } from '../../Icon/Icon.js';
-import { useCurrentMenu } from '../Context.js';
 import { Item as Item$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 var _excluded = ["icon", "shortcut"];
 var Icon = function Icon(_ref) {

package/dist/esm/components/Menu/components/Separator.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import cn from 'classnames';
-import { useCurrentMenu } from '../Context.js';
 import { Separator as Separator$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
 
 var getAppearanceClasses = function getAppearanceClasses(appearance) {
   switch (appearance) {

package/dist/esm/components/Menu/components/Trigger.js

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, createElement } from 'react';
-import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
-import { useCurrentMenu } from '../Context.js';
 import { Trigger as Trigger$1 } from '@radix-ui/react-dropdown-menu';
+import { useCurrentMenu } from '../Context.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
 
 var Trigger = /*#__PURE__*/forwardRef(function MenuTrigger(props, ref) {
   var _props$children3, _props$children3$prop;

package/dist/esm/components/Pagination/Pagination.js

@@ -2,8 +2,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../Provider/Provider.js';
-import { Group } from '../Group/Group.js';
 import { IconButton } from '../IconButton/IconButton.js';
+import { Group } from '../Group/Group.js';
 import { PageNumbers } from './PageNumbers.js';
 import { Select } from '../Select/Select.js';
 import { usePaginationShortcuts } from './usePaginationShortcuts.js';

package/dist/esm/components/SearchInput/SearchInput.js

@@ -11,7 +11,8 @@ import '../Spinner/Spinner.js';
 import '../Toast/Toaster.js';
 import { useLocalization } from '../Provider/Provider.js';
 import '../Hanger/Hanger.js';
-import '../Group/Group.js';
+import '../RadioGroup/RadioGroup.js';
+import '../Menu/Menu.js';
 import '../Dialog/Dialog.js';
 import '../Popover/Popover.js';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -27,10 +28,9 @@ import '../Combobox/Combobox.js';
 import '../../utils/date.js';
 import '../Datepicker/Datepicker.js';
 import '../Form/Form.js';
+import '../Group/Group.js';
 import '../Label/Label.js';
 import '../Listbox/Listbox.js';
-import '../RadioGroup/RadioGroup.js';
-import '../Menu/Menu.js';
 import '../Treeview/Treeview.js';
 import '../Navigation/Navigation.js';
 import '../Select/Select.js';

package/dist/esm/components/Table/components/Table.js

@@ -38,8 +38,7 @@ var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
   }
 
   return React__default.createElement(React__default.Fragment, null, paginationElement, React__default.createElement(BaseTable, Object.assign({}, tableProps, {
-    ref: tableRef,
-    tabIndex: 0
+    ref: tableRef
   }), rows.length ? rows.map(function (row, index) {
     prepareRow(row, index);
     return React__default.createElement(Row, Object.assign({}, rowProps, {

package/dist/esm/components/Table/components/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n    let paginationElement;\n\n    if (pagination) {\n        paginationElement = (\n            <Pagination\n                className=\"my-4 w-full\"\n                length={pagination.length}\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                setPageIndex={pagination.setPageIndex}\n                setPageSize={pagination.setPageSize}\n                showPageControls={pagination.length > pagination.pageSize}\n                dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n            />\n        );\n    }\n\n    return (\n        <>\n            {paginationElement}\n            <BaseTable {...tableProps} ref={tableRef} tabIndex={0}>\n                {rows.length\n                    ? rows.map((row: InternalTableRow, index: number) => {\n                          prepareRow(row, index);\n                          return (\n                              <Row\n                                  {...rowProps}\n                                  key={index}\n                                  index={index}\n                                  row={row}\n                                  instance={instance}\n                                  headerGroups={tableProps.headerGroups}\n                              />\n                          );\n                      })\n                    : emptyStateRenderer()}\n            </BaseTable>\n            {paginationElement}\n        </>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","useTable","rowProps","tableProps","rows","prepareRow","pagination","instance","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","tabIndex","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;;;IASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;AAIlC,8BAAkED,KAAlE,CAAQE,kBAAR;AAAA,MAAQA,kBAAR,sCAA6BC,iBAA7B;AAAA,MAAmDC,UAAnD,iCAAkEJ,KAAlE;;AACA,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;;AACA,kBAAyEM,QAAQ,CAACH,UAAD,EAAaC,QAAb,CAAjF;AAAA,MAAQG,QAAR,aAAQA,QAAR;AAAA,MAAkBC,UAAlB,aAAkBA,UAAlB;AAAA,MAA8BC,IAA9B,aAA8BA,IAA9B;AAAA,MAAoCC,UAApC,aAAoCA,UAApC;AAAA,MAAgDC,UAAhD,aAAgDA,UAAhD;AAAA,MAA4DC,QAA5D,aAA4DA,QAA5D;;AAEA,MAAIC,iBAAJ;;AAEA,MAAIF,UAAJ,EAAgB;AACZE,IAAAA,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;AACIC,MAAAA,SAAS,EAAC;AACVC,MAAAA,MAAM,EAAEL,UAAU,CAACK;AACnBC,MAAAA,SAAS,EAAEN,UAAU,CAACM;AACtBC,MAAAA,QAAQ,EAAEP,UAAU,CAACO;AACrBC,MAAAA,YAAY,EAAER,UAAU,CAACQ;AACzBC,MAAAA,WAAW,EAAET,UAAU,CAACS;AACxBC,MAAAA,gBAAgB,EAAEV,UAAU,CAACK,MAAX,GAAoBL,UAAU,CAACO;AACjDI,MAAAA,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;AAYH;;AAED,SACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAef;AAAYR,IAAAA,GAAG,EAAEI;AAAUoB,IAAAA,QAAQ,EAAE;IAApD,EACKf,IAAI,CAACO,MAAL,GACKP,IAAI,CAACgB,GAAL,CAAS,UAACC,GAAD,EAAwBC,KAAxB;AACLjB,IAAAA,UAAU,CAACgB,GAAD,EAAMC,KAAN,CAAV;AACA,WACI9B,4BAAA,CAAC+B,GAAD,oBACQrB;AACJsB,MAAAA,GAAG,EAAEF;AACLA,MAAAA,KAAK,EAAEA;AACPD,MAAAA,GAAG,EAAEA;AACLd,MAAAA,QAAQ,EAAEA;AACVkB,MAAAA,YAAY,EAAEtB,UAAU,CAACsB;MAN7B,CADJ;AAUH,GAZD,CADL,GAcK7B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACmC,MAAN,GAAe;AAAA,SAAM,IAAN;AAAA,CAAf;;AACAnC,KAAK,CAACoC,KAAN,GAAc;AAAA,SAAM,IAAN;AAAA,CAAd;;;;"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["import React from 'react';\nimport { PluginHook } from 'react-table';\nimport { TableProps, InternalTableRow, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { Pagination } from '../../Pagination/Pagination';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\n\nexport const Table = React.forwardRef(function Table<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const { emptyStateRenderer = DefaultEmptyState, ...otherProps } = props;\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { rowProps, tableProps, rows, prepareRow, pagination, instance } = useTable(otherProps, tableRef);\n\n    let paginationElement;\n\n    if (pagination) {\n        paginationElement = (\n            <Pagination\n                className=\"my-4 w-full\"\n                length={pagination.length}\n                pageIndex={pagination.pageIndex}\n                pageSize={pagination.pageSize}\n                setPageIndex={pagination.setPageIndex}\n                setPageSize={pagination.setPageSize}\n                showPageControls={pagination.length > pagination.pageSize}\n                dangerouslyHijackGlobalKeyboardNavigation={props.dangerouslyHijackGlobalKeyboardNavigation}\n            />\n        );\n    }\n\n    return (\n        <>\n            {paginationElement}\n            <BaseTable {...tableProps} ref={tableRef}>\n                {rows.length\n                    ? rows.map((row: InternalTableRow, index: number) => {\n                          prepareRow(row, index);\n                          return (\n                              <Row\n                                  {...rowProps}\n                                  key={index}\n                                  index={index}\n                                  row={row}\n                                  instance={instance}\n                                  headerGroups={tableProps.headerGroups}\n                              />\n                          );\n                      })\n                    : emptyStateRenderer()}\n            </BaseTable>\n            {paginationElement}\n        </>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nTable.Column = () => null;\nTable.Group = () => null;\n"],"names":["Table","React","forwardRef","props","ref","emptyStateRenderer","DefaultEmptyState","otherProps","tableRef","useProxiedRef","useTable","rowProps","tableProps","rows","prepareRow","pagination","instance","paginationElement","Pagination","className","length","pageIndex","pageSize","setPageIndex","setPageSize","showPageControls","dangerouslyHijackGlobalKeyboardNavigation","BaseTable","map","row","index","Row","key","headerGroups","Column","Group"],"mappings":";;;;;;;;;IASaA,KAAK,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,KAAT,CAClCG,KADkC,EAElCC,GAFkC;AAIlC,8BAAkED,KAAlE,CAAQE,kBAAR;AAAA,MAAQA,kBAAR,sCAA6BC,iBAA7B;AAAA,MAAmDC,UAAnD,iCAAkEJ,KAAlE;;AACA,MAAMK,QAAQ,GAAQC,aAAa,CAAiBL,GAAjB,CAAnC;;AACA,kBAAyEM,QAAQ,CAACH,UAAD,EAAaC,QAAb,CAAjF;AAAA,MAAQG,QAAR,aAAQA,QAAR;AAAA,MAAkBC,UAAlB,aAAkBA,UAAlB;AAAA,MAA8BC,IAA9B,aAA8BA,IAA9B;AAAA,MAAoCC,UAApC,aAAoCA,UAApC;AAAA,MAAgDC,UAAhD,aAAgDA,UAAhD;AAAA,MAA4DC,QAA5D,aAA4DA,QAA5D;;AAEA,MAAIC,iBAAJ;;AAEA,MAAIF,UAAJ,EAAgB;AACZE,IAAAA,iBAAiB,GACbhB,4BAAA,CAACiB,UAAD;AACIC,MAAAA,SAAS,EAAC;AACVC,MAAAA,MAAM,EAAEL,UAAU,CAACK;AACnBC,MAAAA,SAAS,EAAEN,UAAU,CAACM;AACtBC,MAAAA,QAAQ,EAAEP,UAAU,CAACO;AACrBC,MAAAA,YAAY,EAAER,UAAU,CAACQ;AACzBC,MAAAA,WAAW,EAAET,UAAU,CAACS;AACxBC,MAAAA,gBAAgB,EAAEV,UAAU,CAACK,MAAX,GAAoBL,UAAU,CAACO;AACjDI,MAAAA,yCAAyC,EAAEvB,KAAK,CAACuB;KARrD,CADJ;AAYH;;AAED,SACIzB,4BAAA,wBAAA,MAAA,EACKgB,iBADL,EAEIhB,4BAAA,CAAC0B,SAAD,oBAAef;AAAYR,IAAAA,GAAG,EAAEI;IAAhC,EACKK,IAAI,CAACO,MAAL,GACKP,IAAI,CAACe,GAAL,CAAS,UAACC,GAAD,EAAwBC,KAAxB;AACLhB,IAAAA,UAAU,CAACe,GAAD,EAAMC,KAAN,CAAV;AACA,WACI7B,4BAAA,CAAC8B,GAAD,oBACQpB;AACJqB,MAAAA,GAAG,EAAEF;AACLA,MAAAA,KAAK,EAAEA;AACPD,MAAAA,GAAG,EAAEA;AACLb,MAAAA,QAAQ,EAAEA;AACViB,MAAAA,YAAY,EAAErB,UAAU,CAACqB;MAN7B,CADJ;AAUH,GAZD,CADL,GAcK5B,kBAAkB,EAf5B,CAFJ,EAmBKY,iBAnBL,CADJ;AAuBH,CAhDoB;;AAkDrBjB,KAAK,CAACkC,MAAN,GAAe;AAAA,SAAM,IAAN;AAAA,CAAf;;AACAlC,KAAK,CAACmC,KAAN,GAAc;AAAA,SAAM,IAAN;AAAA,CAAd;;;;"}

package/dist/esm/components/Table/components/WindowedTable.js

@@ -186,7 +186,6 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
   return React__default.createElement(BaseTable, Object.assign({}, tableProps, {
     className: className,
     headerRef: headerRef,
-    tabIndex: 0,
     ref: tableRef
   }), list ? list : emptyStateRenderer());
 });

package/dist/esm/components/Table/components/WindowedTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const rowsRef = React.useRef<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef.current) {\n                rowsRef.current.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n            rowsRef.current.scrollToItem(rowProps.activeIndex);\n        }\n    }, [rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef.current) {\n            rowsRef.current.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                rowsRef.current = list;\n                            }}\n                        >\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} tabIndex={0} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","tabIndex","Column","Group"],"mappings":"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"}
+{"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const rowsRef = React.useRef<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef.current) {\n                rowsRef.current.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n            rowsRef.current.scrollToItem(rowProps.activeIndex);\n        }\n    }, [rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef.current) {\n            rowsRef.current.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                rowsRef.current = list;\n                            }}\n                        >\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}

package/dist/esm/components/Table/hooks/plugins/useRowActions.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
+import { Menu } from '../../../Menu/Menu.js';
 import { IconButton } from '../../../IconButton/IconButton.js';
 import keycode from 'keycode';
-import { Menu } from '../../../Menu/Menu.js';
 import { sanitizeRowProps } from '../../util.js';
 import { InView } from 'react-intersection-observer';
 

package/dist/esm/components/Table/hooks/useTable.js

@@ -84,6 +84,8 @@ var useTableSortingListener = function useTableSortingListener(data, sortedRows,
 
 var DEFAULT_PAGE_SIZE = 10;
 var useTable = function useTable(props, ref) {
+  var _otherProps$tabIndex;
+
   var children = props.children,
       data = props.data,
       onRowClick = props.onRowClick,
@@ -216,7 +218,8 @@ var useTable = function useTable(props, ref) {
     tableProps: _extends({}, otherProps, {
       headerGroups: headerGroups,
       onFocus: handleFocus,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      tabIndex: (_otherProps$tabIndex = otherProps.tabIndex) !== null && _otherProps$tabIndex !== void 0 ? _otherProps$tabIndex : 0
     }),
     state: state,
     pagination: !disablePagination ? {