@economic/taco 0.0.1-alpha.1543 → 0.0.2-alpha.0

package/dist/esm/src/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';\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=\"flex justify-end mt-8\" 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 fixed-center', {\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        'yt-dialog 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 overlayClassName = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'\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 className={overlayClassName}>\n                <DialogPrimitive.Content\n                    {...props}\n                    className={className}\n                    data-taco=\"dialog\"\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}>\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag absolute-center-x h-3 rounded bg-grey-light cursor-move text-center w-24 top-1.5\"\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            </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","overlayClassName","handleInteractOutside","event","preventDefault","output","drawer","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 { 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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"}

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

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

package/dist/esm/src/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=\"bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]\"\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;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;IAnBT,CADJ;AAuBH,CA1BqB;;;;"}
+{"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;;;;"}

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

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

package/dist/esm/src/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 rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset\"\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;AACVD,IAAAA,GAAG,EAAEA;IAHT,CADJ;AAOH,CARoB;;;;"}
+{"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;;;;"}

package/dist/esm/src/components/Dialog/components/Trigger.js

@@ -1,11 +1,12 @@
 import { forwardRef, createElement } from 'react';
+import mergeRefs from '../../../utils/mergeRefs.js';
 import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
 
 var Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, ref) {
   var dialog = useCurrentDialog();
   return createElement(Trigger$1, Object.assign({}, dialog.props, props, {
-    ref: ref,
+    ref: mergeRefs([dialog.ref, ref]),
     asChild: true
   }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(props: DialogTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    return <DialogPrimitive.Trigger {...dialog.props} {...props} ref={ref} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","ref","dialog","useCurrentDialog","DialogPrimitive","asChild"],"mappings":";;;;IAMaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,aAAT,CAAuBC,KAAvB,EAAkDC,GAAlD;AACpC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AACA,SAAOL,aAAA,CAACM,SAAD,oBAA6BF,MAAM,CAACF,OAAWA;AAAOC,IAAAA,GAAG,EAAEA;AAAKI,IAAAA,OAAO;IAAvE,CAAP;AACH,CAHsB;;;;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useCurrentDialog } from '../Context';\nimport mergeRefs from '../../../utils/mergeRefs';\n\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DialogTrigger(props: DialogTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    return <DialogPrimitive.Trigger {...dialog.props} {...props} ref={mergeRefs([dialog.ref, ref])} asChild />;\n});\n"],"names":["Trigger","React","DialogTrigger","props","ref","dialog","useCurrentDialog","DialogPrimitive","mergeRefs","asChild"],"mappings":";;;;;IAOaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,aAAT,CAAuBC,KAAvB,EAAkDC,GAAlD;AACpC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AACA,SAAOL,aAAA,CAACM,SAAD,oBAA6BF,MAAM,CAACF,OAAWA;AAAOC,IAAAA,GAAG,EAAEI,SAAS,CAAC,CAACH,MAAM,CAACD,GAAR,EAAaA,GAAb,CAAD;AAAqBK,IAAAA,OAAO;IAAhG,CAAP;AACH,CAHsB;;;;"}

package/dist/esm/src/components/Hanger/Hanger.js

@@ -1,19 +1,21 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useMemo, createElement, createContext, forwardRef, useContext } from 'react';
+import { forwardRef, useMemo, createElement, createContext, useContext } from 'react';
 import cn from 'classnames';
-import { IconButton } from '../IconButton/IconButton.js';
-import { useLocalization } from '../Provider/Provider.js';
 import { Root, Anchor as Anchor$1, Close } from '@radix-ui/react-popover';
 import { UnstyledContent, UnstyledArrow } from '../Popover/Primitives.js';
+import { useLocalization } from '../Provider/Provider.js';
+import mergeRefs from '../../utils/mergeRefs.js';
+import { IconButton } from '../IconButton/IconButton.js';
 
 var _excluded = ["children"];
 var HangerContext = /*#__PURE__*/createContext({
-  props: {}
+  props: {},
+  ref: null
 });
 var Anchor = /*#__PURE__*/forwardRef(function (props, ref) {
   var context = useContext(HangerContext);
   return createElement(Anchor$1, Object.assign({}, context.props, props, {
-    ref: ref,
+    ref: mergeRefs([context.ref, ref]),
     asChild: true
   }));
 });
@@ -40,18 +42,19 @@ var Content = /*#__PURE__*/forwardRef(function (props, ref) {
   }, createElement(IconButton, {
     appearance: "primary",
     "aria-label": texts.hanger.close,
-    className: "text-white ml-2 absolute top-0 right-0 mr-2 mt-2",
+    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
     icon: "close",
     onClick: props.onClose
   })));
 });
-var Hanger = function Hanger(props) {
+var Hanger = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var context = useMemo(function () {
     return {
-      props: otherProps
+      props: otherProps,
+      ref: ref
     };
   }, [otherProps]);
   return createElement(HangerContext.Provider, {
@@ -60,7 +63,7 @@ var Hanger = function Hanger(props) {
     children: children,
     defaultOpen: true
   }));
-};
+});
 Hanger.Anchor = Anchor;
 Hanger.Content = Content;
 

package/dist/esm/src/components/Hanger/Hanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\n\nconst HangerContext = React.createContext({\n    props: {},\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef((props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) => {\n    const context = React.useContext(HangerContext);\n    return <PopoverPrimitive.Anchor {...context.props} {...props} ref={ref} asChild />;\n});\n\nexport type CloseHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | undefined;\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Handler called when user closes the hanger */\n    onClose?: CloseHandler;\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef((props: HangerContentProps, ref: React.Ref<HTMLDivElement>) => {\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}\n        >\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"text-white ml-2 absolute top-0 right-0 mr-2 mt-2\"\n                    icon=\"close\"\n                    onClick={props.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{}>;\nexport const Hanger = (props: HangerProps): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    const context = React.useMemo(() => ({ props: otherProps }), [otherProps]);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root children={children} defaultOpen />\n        </HangerContext.Provider>\n    );\n};\nHanger.Anchor = Anchor;\nHanger.Content = Content;\n"],"names":["HangerContext","React","props","Anchor","ref","context","PopoverPrimitive","asChild","Content","useLocalization","texts","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","children","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","otherProps","Provider","value","defaultOpen"],"mappings":";;;;;;;;;AASA,IAAMA,aAAa,gBAAGC,aAAA,CAAoB;AACtCC,EAAAA,KAAK,EAAE;AAD+B,CAApB,CAAtB;AAUA,IAAMC,MAAM,gBAAGF,UAAA,CAAiB,UAACC,KAAD,EAA2BE,GAA3B;AAC5B,MAAMC,OAAO,GAAGJ,UAAA,CAAiBD,aAAjB,CAAhB;AACA,SAAOC,aAAA,CAACK,QAAD,oBAA6BD,OAAO,CAACH,OAAWA;AAAOE,IAAAA,GAAG,EAAEA;AAAKG,IAAAA,OAAO;IAAxE,CAAP;AACH,CAHc,CAAf;AAaA,IAAMC,OAAO,gBAAGP,UAAA,CAAiB,UAACC,KAAD,EAA4BE,GAA5B;AAC7B,yBAAkBK,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,kGADgB,EAEhBV,KAAK,CAACS,SAFU,CAApB;;AAIA,MAAME,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,KAAD;AAC1BA,IAAAA,KAAK,CAACC,cAAN;AACH,GAFD;;AAIA,SACId,aAAA,CAACe,eAAD;AACIL,IAAAA,SAAS,EAAEA;iBACD;AACVM,IAAAA,iBAAiB,EAAEJ;AACnBK,IAAAA,SAAS,EAAEhB,KAAK,CAACgB;AACjBd,IAAAA,GAAG,EAAEA;GALT,EAOKF,KAAK,CAACiB,QAPX,EAQIlB,aAAA,CAACmB,aAAD;AAAeT,IAAAA,SAAS,EAAC;GAAzB,CARJ,EASIV,aAAA,CAACK,KAAD;AAAwBC,IAAAA,OAAO;GAA/B,EACIN,aAAA,CAACoB,UAAD;AACIC,IAAAA,UAAU,EAAC;kBACCZ,KAAK,CAACa,MAAN,CAAaC;AACzBb,IAAAA,SAAS,EAAC;AACVc,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAExB,KAAK,CAACyB;GALnB,CADJ,CATJ,CADJ;AAqBH,CA/Be,CAAhB;IAkCaC,MAAM,GAAG,SAATA,MAAS,CAAC1B,KAAD;AAClB,MAAQiB,QAAR,GAAoCjB,KAApC,CAAQiB,QAAR;AAAA,MAAqBU,UAArB,iCAAoC3B,KAApC;;AAEA,MAAMG,OAAO,GAAGJ,OAAA,CAAc;AAAA,WAAO;AAAEC,MAAAA,KAAK,EAAE2B;AAAT,KAAP;AAAA,GAAd,EAA6C,CAACA,UAAD,CAA7C,CAAhB;AAEA,SACI5B,aAAA,CAACD,aAAa,CAAC8B,QAAf;AAAwBC,IAAAA,KAAK,EAAE1B;GAA/B,EACIJ,aAAA,CAACK,IAAD;AAAuBa,IAAAA,QAAQ,EAAEA;AAAUa,IAAAA,WAAW;GAAtD,CADJ,CADJ;AAKH;AACDJ,MAAM,CAACzB,MAAP,GAAgBA,MAAhB;AACAyB,MAAM,CAACpB,OAAP,GAAiBA,OAAjB;;;;"}
+{"version":3,"file":"Hanger.js","sources":["../../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport mergeRefs from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef((props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) => {\n    const context = React.useContext(HangerContext);\n    return <PopoverPrimitive.Anchor {...context.props} {...props} ref={mergeRefs([context.ref, ref])} asChild />;\n});\n\nexport type CloseHandler = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | undefined;\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Handler called when user closes the hanger */\n    onClose?: CloseHandler;\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef((props: HangerContentProps, ref: React.Ref<HTMLDivElement>) => {\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}\n        >\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                    icon=\"close\"\n                    onClick={props.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n};\n\nexport const Hanger = React.forwardRef((props: HangerProps, ref: React.Ref<HTMLElement>): JSX.Element => {\n    const { children, ...otherProps } = props;\n\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root children={children} defaultOpen />\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\n"],"names":["HangerContext","React","props","ref","Anchor","context","PopoverPrimitive","mergeRefs","asChild","Content","useLocalization","texts","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","children","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","otherProps","Provider","value","defaultOpen"],"mappings":";;;;;;;;;;AAcA,IAAMA,aAAa,gBAAGC,aAAA,CAAwC;AAC1DC,EAAAA,KAAK,EAAE,EADmD;AAE1DC,EAAAA,GAAG,EAAE;AAFqD,CAAxC,CAAtB;AAWA,IAAMC,MAAM,gBAAGH,UAAA,CAAiB,UAACC,KAAD,EAA2BC,GAA3B;AAC5B,MAAME,OAAO,GAAGJ,UAAA,CAAiBD,aAAjB,CAAhB;AACA,SAAOC,aAAA,CAACK,QAAD,oBAA6BD,OAAO,CAACH,OAAWA;AAAOC,IAAAA,GAAG,EAAEI,SAAS,CAAC,CAACF,OAAO,CAACF,GAAT,EAAcA,GAAd,CAAD;AAAsBK,IAAAA,OAAO;IAAlG,CAAP;AACH,CAHc,CAAf;AAaA,IAAMC,OAAO,gBAAGR,UAAA,CAAiB,UAACC,KAAD,EAA4BC,GAA5B;AAC7B,yBAAkBO,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,kGADgB,EAEhBX,KAAK,CAACU,SAFU,CAApB;;AAIA,MAAME,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,KAAD;AAC1BA,IAAAA,KAAK,CAACC,cAAN;AACH,GAFD;;AAIA,SACIf,aAAA,CAACgB,eAAD;AACIL,IAAAA,SAAS,EAAEA;iBACD;AACVM,IAAAA,iBAAiB,EAAEJ;AACnBK,IAAAA,SAAS,EAAEjB,KAAK,CAACiB;AACjBhB,IAAAA,GAAG,EAAEA;GALT,EAOKD,KAAK,CAACkB,QAPX,EAQInB,aAAA,CAACoB,aAAD;AAAeT,IAAAA,SAAS,EAAC;GAAzB,CARJ,EASIX,aAAA,CAACK,KAAD;AAAwBE,IAAAA,OAAO;GAA/B,EACIP,aAAA,CAACqB,UAAD;AACIC,IAAAA,UAAU,EAAC;kBACCZ,KAAK,CAACa,MAAN,CAAaC;AACzBb,IAAAA,SAAS,EAAC;AACVc,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAEzB,KAAK,CAAC0B;GALnB,CADJ,CATJ,CADJ;AAqBH,CA/Be,CAAhB;IAwCaC,MAAM,gBAAG5B,UAAA,CAAiB,UAACC,KAAD,EAAqBC,GAArB;AACnC,MAAQiB,QAAR,GAAoClB,KAApC,CAAQkB,QAAR;AAAA,MAAqBU,UAArB,iCAAoC5B,KAApC;;AAEA,MAAMG,OAAO,GAAGJ,OAAA,CAAc;AAAA,WAAO;AAAEC,MAAAA,KAAK,EAAE4B,UAAT;AAAqB3B,MAAAA,GAAG,EAAHA;AAArB,KAAP;AAAA,GAAd,EAAkD,CAAC2B,UAAD,CAAlD,CAAhB;AAEA,SACI7B,aAAA,CAACD,aAAa,CAAC+B,QAAf;AAAwBC,IAAAA,KAAK,EAAE3B;GAA/B,EACIJ,aAAA,CAACK,IAAD;AAAuBc,IAAAA,QAAQ,EAAEA;AAAUa,IAAAA,WAAW;GAAtD,CADJ,CADJ;AAKH,CAVqB;AAWtBJ,MAAM,CAACzB,MAAP,GAAgBA,MAAhB;AACAyB,MAAM,CAACpB,OAAP,GAAiBA,OAAjB;;;;"}

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

@@ -1,9 +1,8 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
-import { Button } from '../../primitives/Button.js';
-import { getButtonClasses, getAppearanceClasses } from '../Button/util.js';
+import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
 
 var _excluded = ["appearance", "icon", "rounded"];
 var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
@@ -24,14 +23,13 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createElement(Button, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "icon-button",
-    ref: ref
-  }), createElement(Icon, {
-    name: icon,
-    className: "m-0 p-0"
-  }));
+  return createButton(_extends({}, otherProps, {
+    children: createElement(Icon, {
+      name: icon,
+      className: "m-0 p-0"
+    }),
+    'data-taco': 'icon-button'
+  }), className, ref);
 });
 
 export { IconButton };

package/dist/esm/src/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 } from '../Button/util';\nimport { Appearance } from '../../types';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\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 (\n        <ButtonPrimitive.Button {...otherProps} className={className} data-taco=\"icon-button\" ref={ref}>\n            <Icon name={icon} className=\"m-0 p-0\" />\n        </ButtonPrimitive.Button>\n    );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","ButtonPrimitive","Icon","name"],"mappings":";;;;;;;;IAmBaA,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,SACIJ,aAAA,CAACY,MAAD,oBAA4BN;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAcL,IAAAA,GAAG,EAAEA;IAA3F,EACIF,aAAA,CAACa,IAAD;AAAMC,IAAAA,IAAI,EAAEV;AAAMG,IAAAA,SAAS,EAAC;GAA5B,CADJ,CADJ;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, 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;;;;"}

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 var getInputClasses = function getInputClasses(props) {
   var _cn;
 
-  return cn('bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled
   }, _cn[getStateClasses(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
@@ -29,19 +29,19 @@ var getStateClasses = function getStateClasses(value) {
 var getButtonStateClasses = function getButtonStateClasses(value) {
   switch (value) {
     case 'success':
-      return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
     case 'error':
-      return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
 
     case 'warning':
-      return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
     case 'information':
-      return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 
     default:
-      return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';\n\n        case 'error':\n            return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,4LADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,mIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,6GAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,0GAAP;;AAEJ;AACI,aAAO,+GAAP;AAdR;AAgBH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';\n\n        case 'error':\n            return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n\n        case 'warning':\n            return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';\n\n        case 'information':\n            return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n\n        default:\n            return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,iMADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,uIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,6HAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,gHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,8GAAP;;AAEJ;AACI,aAAO,mHAAP;AAdR;AAgBH;;;;"}

package/dist/esm/src/components/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { ScrollableList } from './ScrollableList.js';
@@ -15,10 +15,18 @@ var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useListbox.list,
       input = _useListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px)'
+      /* (6 * option height) + listbox border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
     type: "text"
   })));
 });
@@ -30,10 +38,18 @@ var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useMultiListbox.list,
       input = _useMultiListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px + 2px)'
+      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
     type: "text"
   })));
 });

package/dist/esm/src/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport './Listbox.css';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAyDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAXsB;IAaVC,YAAY,gBAAGZ,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBY,eAAe,CAACR,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAX2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAwDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

package/dist/esm/src/components/Listbox/ScrollableList.js

@@ -3,8 +3,8 @@ import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react'
 import cn from 'classnames';
 import { Spinner } from '../Spinner/Spinner.js';
 import { useLocalization } from '../Provider/Provider.js';
-import { Checkbox } from '../Checkbox/Checkbox.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 import { getInputClasses } from '../Input/util.js';
 import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
@@ -118,7 +118,9 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
 
   var list = _extends({}, otherProps, {
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
     disabled: disabled,
     id: id,
@@ -136,7 +138,7 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
       children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
         'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
       }),
       disabled: option.disabled,
@@ -163,13 +165,13 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
         optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
     return createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
-      className: "flex-grow text-left truncate"
+      className: "flex-grow truncate text-left"
     }, children), multiselect && createElement(Checkbox, {
       checked: optionProps['aria-selected'],
       onChange: function onChange() {
         return null;
       },
-      className: "ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px"
+      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
     }));
   }) : createElement("li", {
     className: "yt-list__empty"

package/dist/esm/src/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /** State will change the style of the scrollable list */\n    state?: State;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {\n                'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n            }),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow text-left truncate\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /** State will change the style of the scrollable list */\n    state?: State;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

package/dist/esm/src/components/Navigation/Navigation.js

@@ -49,7 +49,7 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   }), prefix && React__default.createElement("span", {
     className: "yt-navigation__item__prefix flex items-center"
   }, prefix), React__default.createElement("a", Object.assign({}, otherProps, {
-    className: "flex-grow block truncate",
+    className: "block flex-grow truncate",
     ref: proxyRef
   }), children), postfix && React__default.createElement("span", {
     className: "yt-navigation__item__postfix ml-1"
@@ -57,7 +57,7 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
 });
 var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
-    className: cn('bg-white p-3 w-full', props.className),
+    className: cn('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
@@ -105,11 +105,11 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
     return scrollableAreas;
   }, [props.children]);
   return React__default.createElement(Treeview, Object.assign({}, props, {
-    className: cn('flex flex-col flex-grow overflow-y-auto divide-y-2 divide-grey-light', props.className),
+    className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
   }), scrollableAreas.map(function (area, i) {
     return Array.isArray(area) ? React__default.createElement("div", {
-      className: "flex flex-col flex-auto flex-shrink-0 flex-grow overflow-y-auto divide-y-2 divide-grey-light h-0",
+      className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
       key: i
     }, area) : area;
   }));
@@ -122,6 +122,7 @@ var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(prop
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });