@economic/taco 11.0.0 → 11.0.1-react-v19.0

package/dist/components/Banner/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["BadgeIcon"],"mappings":";;;;AAKO,MAAM,gBAAgB,CAAC,SAAoC;AAC9D;AAAA;AAAA,IAEI,sBAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,cAAQ,MAAA;AAAA,QACJ,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,QAChD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,QAC/C,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,QACvD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,QACpD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,QAC/C;AACI,iBAAO;AAAA,MAAA;AAAA,IAEnB,IACJ;AAAA;AAER;;"}
+{"version":3,"file":"util.cjs","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): React.JSX.Element | null => {\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["BadgeIcon"],"mappings":";;;;AAKO,MAAM,gBAAgB,CAAC,SAA0C;AACpE;AAAA;AAAA,IAEI,sBAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,cAAQ,MAAA;AAAA,QACJ,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,QAChD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,QAC/C,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,QACvD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,QACpD,KAAK;AACD,iBAAO,sBAAA,cAACA,qBAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,QAC/C;AACI,iBAAO;AAAA,MAAA;AAAA,IAEnB,IACJ;AAAA;AAER;;"}

package/dist/components/Banner/util.d.ts

@@ -1,2 +1,3 @@
+import { default as React } from 'react';
 import { State } from '../../types';
-export declare const getBannerIcon: (type: State) => JSX.Element | null;
+export declare const getBannerIcon: (type: State) => React.JSX.Element | null;

package/dist/components/Banner/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): JSX.Element | null => {\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAKO,MAAM,gBAAgB,CAAC,SAAoC;AAC9D;AAAA;AAAA,IAEIA,+BAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,cAAQ,MAAA;AAAA,QACJ,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,QAChD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,QAC/C,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,QACvD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,QACpD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,QAC/C;AACI,iBAAO;AAAA,MAAA;AAAA,IAEnB,IACJ;AAAA;AAER;"}
+{"version":3,"file":"util.js","sources":["../../../src/components/Banner/util.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { State } from '../../types';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBannerIcon = (type: State): React.JSX.Element | null => {\n    return (\n        // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\n        <div className=\"mt-[5px] self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'experiment':\n                        return <BadgeIcon icon=\"experiment\" color=\"purple\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;AAKO,MAAM,gBAAgB,CAAC,SAA0C;AACpE;AAAA;AAAA,IAEIA,+BAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,IACT,MAAM;AACJ,cAAQ,MAAA;AAAA,QACJ,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,SAAQ;AAAA,QAChD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,SAAQ,OAAM,OAAM;AAAA,QAC/C,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,cAAa,OAAM,UAAS;AAAA,QACvD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,WAAU,OAAM,UAAS;AAAA,QACpD,KAAK;AACD,iBAAOA,+BAAA,cAAC,WAAA,EAAU,MAAK,QAAO,OAAM,QAAO;AAAA,QAC/C;AACI,iBAAO;AAAA,MAAA;AAAA,IAEnB,IACJ;AAAA;AAER;"}

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,wDAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACIF,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACGA,iCAAA,cAACG,SAAAA,UAAA,EAAS,SAAS,SACfH,iCAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,wDAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACIF,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACGA,iCAAA,cAACG,SAAAA,UAAA,EAAS,SAAS,SACfH,iCAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}

package/dist/components/Card/Card.d.ts

@@ -7,7 +7,7 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
     /** Title of the Card */
     title?: string | React.ReactElement;
     /** Menu component associated with the Card */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
 };
 export type CardTexts = {
     /** Text and aria-label for menu button in Card */

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAcA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,6CAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACG,sBAAA,cAAC,UAAA,EAAS,SAAS,SACf,sBAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { MenuProps } from '../Menu/Menu';\nimport { useLocalization } from '../Provider/Localization';\nimport { Truncate } from '../Truncate/Truncate';\n\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAcA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,6CAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACG,sBAAA,cAAC,UAAA,EAAS,SAAS,SACf,sBAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}

package/dist/components/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Combobox/Combobox.d.ts

@@ -45,7 +45,7 @@ type InlineComboboxProps = {
     inline: boolean;
 } & ComboboxBaseProps;
 type DialogComboboxProps = {
-    dialog: (props: Partial<DialogProps>) => JSX.Element;
+    dialog: (props: Partial<DialogProps>) => React.JSX.Element;
     inline?: never;
 } & ComboboxBaseProps;
 export type ComboboxProps = InlineComboboxProps | DialogComboboxProps;

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAsEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport type { DialogProps } from '../Dialog/Dialog';\nimport type { InputProps } from '../Input/Input';\nimport { Input } from '../Input/Input';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport type { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { ScrollableList } from '../Listbox/ScrollableList';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { useCombobox } from './useCombobox';\n\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /** Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ntype InlineComboboxProps = {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n} & ComboboxBaseProps;\n\ntype DialogComboboxProps = {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n} & ComboboxBaseProps;\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAsEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/Combobox/useCombobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}
+{"version":3,"file":"useCombobox.cjs","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["useMergedRef","React","nanoid","useFlattenedData","findByValue","filterData","getIndexFromValue","setInputValueByRef","sanitizeItem","getOptionParents","isElementInsideTable3OrReport","createCustomKeyboardEvent","input","getId"],"mappings":"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"}

package/dist/components/Combobox/useCombobox.d.ts

@@ -2,7 +2,7 @@ import { InputProps } from '../Input/Input';
 import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
 import { ComboboxProps } from './Combobox';
 import * as React from 'react';
-type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
+type useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {
     combobox: React.HTMLAttributes<HTMLSpanElement>;
     input: Omit<InputProps, 'defaultValue'> & {
         ref: React.RefObject<HTMLInputElement>;

package/dist/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,SAAS,CAAA,MAAK,EAAA,GAAK,GAAG;AAExC,MAAM,6BAA6B,CAAC,UAA+C,OAAO,SAAS,EAAE;AAU9F,MAAM,cAAc,CAAC,OAAsC,QAAkD;AAChH,QAAM;AAAA,IACF,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,MAAM,iBAAiB,CAAA;AAAA,IACvB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,WAAW,aAA+B,GAAG;AACnD,QAAM,YAAY,MAAM,OAA0B,IAAI;AACtD,QAAM,UAAU,MAAM,OAAyB,IAAI;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,SAAS,MAAM,QAAQ,MAAM,OAAA,GAAU,CAAA,CAAE;AAC/C,QAAM,gBAAgB,iBAAiB,cAAc;AAErD,QAAM,sBAAsB,MAAM;AAAA,IAC9B,CAAC,QAAqD;AAClD,YAAM,SAAS,YAAY,eAAe,GAAG;AAC7C,UAAI,OAAO,kBAAkB,cAAc,QAAQ;AAC/C,eAAO,cAAc,MAAM;AAAA,MAC/B;AACA,aAAO,2BAA2B,GAAG;AAAA,IACzC;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAGjC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAiB,oBAAoB,KAAK,CAAC;AACrF,QAAM,mBAAmB,CAAC,aAAa,CAAC,UAAW,UAAU,eAAe,oBAAoB,KAAK;AACrG,QAAM,OAAO,MAAM;AAAA,IACf,MAAO,mBAAmB,WAAW,eAAe,UAAU,IAAI;AAAA,IAClE,CAAC,kBAAkB,YAAY,aAAa;AAAA,EAAA;AAGhD,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM;AAAA,IAC1C,eAAe,SAAY,SAAY,kBAAkB,MAAM,UAAU;AAAA,EAAA;AAG7E,QAAM,uBAAuB,CAAC,OAA2B,UAAyB;AAC9E,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5B,cAAM,YAAY,SAAS;AAC3B,2BAAmB,SAAS,SAAS,OAAO,OAAO,SAAS;AAAA,MAChE;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,kBAAkB,CAAC,OAA2B,UAAmB;AACnE,QAAI,UAAU,QAAW;AACrB;AAAA,IACJ;AAEA,UAAM,SAAS,KAAK,KAAK;AAEzB,QAAI,QAAQ,UAAU,OAAO;AAEzB,oBAAc,oBAAoB,KAAK,CAAC;AAAA,IAC5C,OAAO;AAEH,2BAAqB,OAAO,KAAK;AAAA,IACrC;AAAA,EACJ;AAGA,QAAM,UAAU,MAAM;AAClB,QAAI,gBAAgB,CAAC,OAAO;AACxB,2BAAqB,kBAAkB,MAAM,YAAY,CAAC;AAAA,IAC9D;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAGT,QAAM,UAAU,MAAM;AAClB,QAAI,UAAU,QAAW;AACrB,YAAM,gBAAgB,oBAAoB,KAAK;AAG/C,UAAI,kBAAkB,YAAY;AAC9B,sBAAc,aAAa;AAAA,MAC/B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,MAAM;AAClB,QAAI,UAAU;AACV,gBAAU,MAAM;AACZ,iBAAS,UAAU;AAAA,MACvB,CAAC;AAAA,IACL;AAAA,EACJ,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,UAAU,MAAM;AAGlB,UAAM,iBAAiB,UAAU,UAAa,UAAU,QAAQ,eAAe,oBAAoB,KAAK;AAExG,QAAI,cAAc,KAAK,UAAU,CAAC,gBAAgB;AAC9C,sBAAgB,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAExD,UAAI,CAAC,MAAM;AACP,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ,OAAO;AACH,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ,GAAG,CAAC,YAAY,IAAI,CAAC;AAErB,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM;AACN,sBAAgB,kBAAkB,MAAM,UAAU,KAAK,CAAC;AAAA,IAC5D,OAAO;AACH,sBAAgB,MAAS;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAa,MAAM;AAAA,IACrB,CAAC,aAAqD;AAElD,YAAM,cAAc,YAAY,eAAe,QAAQ;AACvD,UAAI,aAAa;AACb,eAAO;AAAA,MACX;AAGA,UAAI,eAAe;AACf,eAAO,cAAc,KAAK,CAAA,WAAU,cAAc,MAAM,MAAM,QAAQ;AAAA,MAC1E;AAEA,aAAO;AAAA,IACX;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAAA;AAIjC,QAAM,kBAAkB,CAAC,UAAoD;AACzE,QAAI,QAAQ,WAAW,MAAM,kBAAkB,QAAQ,SAAS;AAC5D,YAAM,eAAA;AACN;AAAA,IACJ;AAEA,UAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAK1C,QAAI,QAAQ,KAAK,UAAU,OAAO;AAC9B,oBAAc,oBAAoB,KAAK,CAAC;AACxC,UAAI,MAAM,QAAQ;AACd,cAAM,OAAO,KAAK;AAAA,MACtB;AACA;AAAA,IACJ;AAGA,QAAI,YAAY,MAAM,OAAO,UAAU,oBAAoB,KAAK,GAAG;AAC9D,YAAc,SAAS,aAAa,IAAI;AAEzC,YAAM,UAAU,iBAAiB,eAAe,MAAM,IAAI;AAE1D,UAAI,YAAY,QAAQ,QAAQ,SAAS,GAAG;AACvC,cAAc,OAAO,UAAU;AAAA,MACpC;AAEA,eAAS,KAAK;AAAA,IAClB;AAEA,QAAI,MAAM,QAAQ;AACd,YAAM,OAAO,KAAK;AAAA,IACtB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,kBAAc,MAAM,OAAO,KAAK;AAAA,EACpC;AAEA,QAAM,mBAAmB,CAAC,UAAoD;AAC1E,QAAI,UAAW,CAAC,QAAQ,cAAc,KAAK,QAAS;AAChD,cAAQ,IAAI;AAAA,IAChB;AAEA,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAAuD;AAG/E,QACI,8BAA8B,MAAM,aAAa,MAChD,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,MACF;AACE,YAAM,gBAAA;AAAA,IACV;AAEA,QAAI,CAAC,MAAM,WAAW,CAAC,MAAM,SAAS;AAClC,cAAQ,MAAM,KAAA;AAAA,QACV,KAAK,aAAa;AACd;AAAA,QACJ;AAAA,QAEA,KAAK,UAAU;AACX,gBAAM,eAAA;AACN,cAAI,MAAM;AAEN,kBAAM,gBAAA;AAAA,UACV;AACA,wBAAc,oBAAoB,KAAK,CAAC;AACxC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,OAAO;AAER,0BAAgB,cAAc,QAAQ;AACtC,kBAAQ,KAAK;AACb;AAAA,QACJ;AAAA,QAEA,KAAK,SAAS;AACV,gBAAM,eAAA;AAEN,cAAI,8BAA8B,MAAM,aAAa,GAAG;AACpD,gBAAI,UAAU,CAAC,MAAM;AACjB,sBAAQ,IAAI;AAAA,YAChB,WAAW,UAAU,WAAW,CAAC,MAAM;AACnC,wBAAU,QAAQ,MAAA;AAAA,YACtB;AAAA,UACJ;AAEA,cAAI,MAAM;AAEN,4BAAgB,cAAc,UAAU;AACxC,oBAAQ,KAAK;AAAA,UACjB;AAEA;AAAA,QACJ;AAAA,QAEA,KAAK;AACD,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV,WAAW,CAAC,UAAU,UAAU,WAAW,CAAC,8BAA8B,MAAM,aAAa,GAAG;AAC5F,sBAAU,QAAQ,MAAA;AAAA,UACtB;AACA;AAAA,QAEJ,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,OAAO;AACR,cAAI,MAAM;AACN,kBAAM,eAAA;AAAA,UACV;AACA;AAAA,QACJ;AAAA,MAEA;AAIJ,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,cAAc,0BAA0B,KAAK,CAAC;AAAA,MAClE;AAEA,UACI,UACA,CAAC,SACA,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,CAAC,8BAA8B,MAAM,aAAa,GACpD;AACE,cAAM,eAAA;AACN,cAAM,eAAe,MAAM,QAAQ,YAAY,KAAK,SAAS,IAAI;AACjE,wBAAgB,iBAAiB,SAAY,eAAe,YAAY;AACxE,gBAAQ,IAAI;AAAA,MAChB;AAAA,IACJ;AAEA,QAAI,CAAC,MAAM,mBAAA,KAAwB,WAAW;AAC1C,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,oBAAgB,KAAK;AAAA,EACzB;AAEA,QAAM,qBAAqB,CAAC,OAAwC,UAAwB;AACxF,UAAM,eAAA;AACN,oBAAgB,KAAK;AACrB,YAAQ,KAAK;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACb,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,MAAM;AAAA,EAAA;AAGV,QAAM,QAAQ;AAAA,IACV,GAAG;AAAA,IACH,iBAAiB;AAAA;AAAA;AAAA,IAGjB,qBAAqB;AAAA;AAAA,IAErB,yBACI,iBAAiB,UAAa,KAAK,YAAY,IAAI,MAAM,QAAQ,OAAO,KAAK,YAAY,EAAE,KAAK,CAAC,IAAI;AAAA,IACzG,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,QAAQ,CAAC,YAAY,CAAC,WAAW,kBAAkB;AAAA,IACnD,UAAU,CAAC,YAAY,CAAC,WAAW,oBAAoB;AAAA,IACvD,SAAS,CAAC,YAAY,CAAC,WAAW,mBAAmB;AAAA,IACrD,kBAAkB,CAAC,YAAY,CAAC,WAAW,qBAAqB;AAAA,IAChE;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,cAAc;AAAA,EAAA;AAGzB,QAAM,OAAmC;AAAA,IACrC,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,KAAK;AAAA,IACL,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAGX,QAAM,SAAS;AAAA,IACX,KAAK;AAAA,EAAA;AAGT,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACL;AAAA,MACA,cAAc;AAAA;AAAA,IAAA;AAAA,EAElB;AAER;"}
+{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import debounce from 'lodash/debounce';\nimport { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport type { InputProps } from '../Input/Input';\nimport type { ScrollableListItem, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { getId } from '../Listbox/ScrollableList';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\n\nimport type { ComboboxProps } from './Combobox';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst defaultConvertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = Omit<React.HTMLAttributes<HTMLDivElement>, 'popover'> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (props: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>): useCombobox => {\n    const {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: _nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        valueRenderer,\n        ...otherProps\n    } = props;\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => nanoid(), []);\n    const flattenedData = useFlattenedData(unfilteredData);\n\n    const convertToInputValue = React.useCallback(\n        (val: ScrollableListItemValue | undefined): string => {\n            const option = findByValue(flattenedData, val);\n            if (typeof valueRenderer === 'function' && option) {\n                return valueRenderer(option);\n            }\n            return defaultConvertToInputValue(val);\n        },\n        [valueRenderer, flattenedData]\n    );\n\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue === undefined ? undefined : getIndexFromValue(data, inputValue)\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        if (option?.value === value) {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        } else {\n            // if the selected option is not already selected, trigger blur event\n            setInputValueByIndex(index, event);\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined) {\n            const renderedValue = convertToInputValue(value);\n            // Compare with rendered value to handle valueRenderer case\n            // (e.g., value is \"1000\" but renderedValue is \"1000 - Account Name\")\n            if (renderedValue !== inputValue) {\n                setInputValue(renderedValue);\n            }\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === convertToInputValue(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    const findOption = React.useCallback(\n        (inputVal: string): ScrollableListItem | undefined => {\n            // First try to find by raw value\n            const itemByValue = findByValue(flattenedData, inputVal);\n            if (itemByValue) {\n                return itemByValue;\n            }\n\n            // If valueRenderer is provided, also try to match against rendered values\n            if (valueRenderer) {\n                return flattenedData.find(option => valueRenderer(option) === inputVal);\n            }\n\n            return undefined;\n        },\n        [flattenedData, valueRenderer]\n    );\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        const item = findOption(event.target.value);\n\n        // If the found item's value equals the current value, just update the display to rendered format\n        // This handles the case where user types the raw value but valueRenderer shows something different\n        // (e.g., user types \"1000\" but display should be \"1000 - Account Name\")\n        if (item && item.value === value) {\n            setInputValue(convertToInputValue(value));\n            if (props.onBlur) {\n                props.onBlur(event);\n            }\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string (convertToInputValue) before checking the equality\n        if (onChange && event.target.value !== convertToInputValue(value)) {\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        // Explicitly stop propagation for arrow keys when Combobox is in open state and inside Table3\n        // This ensures Table3 won't react to these keys when using the Combobox\n        if (\n            isElementInsideTable3OrReport(event.currentTarget) &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n            open\n        ) {\n            event.stopPropagation();\n        }\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    if (open) {\n                        // as focus is on input, need to prevent propagation to not close dialog.\n                        event.stopPropagation();\n                    }\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                        buttonRef.current.click();\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (\n                inline &&\n                !open &&\n                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                !isElementInsideTable3OrReport(event.currentTarget)\n            ) {\n                event.preventDefault();\n                const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex === undefined ? initialIndex : currentIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...otherProps,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDownCapture: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport type {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { Content, Title, Footer, Close } from './components/Content';\nimport type { DialogDrawerProps, DialogDrawerRenderProps } from './components/DialogDrawer';\nimport { DialogDrawer } from './components/DialogDrawer';\nimport type { DialogExtraProps } from './components/Extra';\nimport { Extra } from './components/Extra';\nimport type { DialogTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport { DialogContext } from './Context';\nimport type { DialogSize } from './types';\n\nimport './Dialog.css';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = (initialChildren: React.ReactNode) => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n    const popupRef = React.useRef<HTMLElement | null>(null);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            popupRef,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (closeOnEscape === false) {\n                eventDetails.cancel();\n                return;\n            }\n            // call onClose, and fall through to also call onChange.\n            props.onClose?.();\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root\n                defaultOpen={defaultOpen}\n                disablePointerDismissal\n                modal\n                open={open}\n                onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["React","DialogDrawer","Extra","Dialog","open","DialogContext","DialogPrimitive","Trigger","Content","Title","Footer","Close"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,uBAAuB,CAAC,oBAAqC;AAC/D,SAAOA,iBAAM,QAAQ,MAAM;AACvB,UAAM,WAAkB,CAAA;AACxB,QAAI;AACJ,QAAI;AAEJA,qBAAM,SAAS,QAAQ,eAAe,EAAE,QAAQ,CAAC,UAAe;AAC5D,UAAI,MAAM,MAAM,gBAAgBC,aAAAA,aAAa,aAAa;AACtD,iBAAS;AAAA,MACb,WAAW,MAAM,MAAM,gBAAgBC,MAAAA,MAAM,aAAa;AACtD,gBAAQ;AAAA,MACZ,OAAO;AACH,iBAAS,KAAK,KAAK;AAAA,MACvB;AAAA,IACJ,CAAC;AAED,WAAO,CAAC,UAAU,QAAQ,KAAK;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AACxB;AAYO,MAAM,SAASF,iBAAM,WAAW,SAASG,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,QAAQ,KAAK,IAAI,qBAAqB,eAAe;AACtE,QAAM,CAAC,YAAY,aAAa,IAAIH,iBAAM,SAAS,KAAK;AACxD,QAAM,WAAWA,iBAAM,OAA2B,IAAI;AAEtD,QAAM,UAAUA,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,MAAM,cAAc,CAAA,iBAAgB,CAAC,YAAY;AAAA,MAAA;AAAA,MAE7D,UAAU;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,eAAe,YAAY,WAAW,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAAA;AAG3F,QAAM,mBAAmB,CAACI,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAGb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,kBAAkB,OAAO;AAChC,qBAAa,OAAA;AACb;AAAA,MACJ;AAEA,YAAM,UAAA;AAAA,IACV;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACIJ,iCAAA,cAACK,sBAAc,UAAd,EAAuB,OAAO,WAC3BL,iCAAA;AAAA,IAACM,OAAAA,OAAgB;AAAA,IAAhB;AAAA,MACG;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,IACb,WAAWN,iCAAA,cAACO,QAAAA,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAUA,QAAAA;AACjB,OAAO,UAAUC,QAAAA;AACjB,OAAO,QAAQC,QAAAA;AACf,OAAO,SAASC,QAAAA;AAChB,OAAO,QAAQR,MAAAA;AACf,OAAO,SAASD,aAAAA;AAChB,OAAO,QAAQU,QAAAA;;"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport type {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { Content, Title, Footer, Close } from './components/Content';\nimport type { DialogDrawerProps, DialogDrawerRenderProps } from './components/DialogDrawer';\nimport { DialogDrawer } from './components/DialogDrawer';\nimport type { DialogExtraProps } from './components/Extra';\nimport { Extra } from './components/Extra';\nimport type { DialogTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport { DialogContext } from './Context';\nimport type { DialogSize } from './types';\n\nimport './Dialog.css';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n};\n\nconst useSeparatedChildren = (initialChildren: React.ReactNode) => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n    const popupRef = React.useRef<HTMLElement | null>(null);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            popupRef,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (closeOnEscape === false) {\n                eventDetails.cancel();\n                return;\n            }\n            // call onClose, and fall through to also call onChange.\n            props.onClose?.();\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root\n                defaultOpen={defaultOpen}\n                disablePointerDismissal\n                modal\n                open={open}\n                onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["React","DialogDrawer","Extra","Dialog","open","DialogContext","DialogPrimitive","Trigger","Content","Title","Footer","Close"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,uBAAuB,CAAC,oBAAqC;AAC/D,SAAOA,iBAAM,QAAQ,MAAM;AACvB,UAAM,WAAkB,CAAA;AACxB,QAAI;AACJ,QAAI;AAEJA,qBAAM,SAAS,QAAQ,eAAe,EAAE,QAAQ,CAAC,UAAe;AAC5D,UAAI,MAAM,MAAM,gBAAgBC,aAAAA,aAAa,aAAa;AACtD,iBAAS;AAAA,MACb,WAAW,MAAM,MAAM,gBAAgBC,MAAAA,MAAM,aAAa;AACtD,gBAAQ;AAAA,MACZ,OAAO;AACH,iBAAS,KAAK,KAAK;AAAA,MACvB;AAAA,IACJ,CAAC;AAED,WAAO,CAAC,UAAU,QAAQ,KAAK;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AACxB;AAYO,MAAM,SAASF,iBAAM,WAAW,SAASG,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,QAAQ,KAAK,IAAI,qBAAqB,eAAe;AACtE,QAAM,CAAC,YAAY,aAAa,IAAIH,iBAAM,SAAS,KAAK;AACxD,QAAM,WAAWA,iBAAM,OAA2B,IAAI;AAEtD,QAAM,UAAUA,iBAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,MAAM,cAAc,CAAA,iBAAgB,CAAC,YAAY;AAAA,MAAA;AAAA,MAE7D,UAAU;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,eAAe,YAAY,WAAW,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAAA;AAG3F,QAAM,mBAAmB,CAACI,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAGb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,kBAAkB,OAAO;AAChC,qBAAa,OAAA;AACb;AAAA,MACJ;AAEA,YAAM,UAAA;AAAA,IACV;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACIJ,iCAAA,cAACK,sBAAc,UAAd,EAAuB,OAAO,WAC3BL,iCAAA;AAAA,IAACM,OAAAA,OAAgB;AAAA,IAAhB;AAAA,MACG;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,IACb,WAAWN,iCAAA,cAACO,QAAAA,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAUA,QAAAA;AACjB,OAAO,UAAUC,QAAAA;AACjB,OAAO,QAAQC,QAAAA;AACf,OAAO,SAASC,QAAAA;AAChB,OAAO,QAAQR,MAAAA;AACf,OAAO,SAASD,aAAAA;AAChB,OAAO,QAAQU,QAAAA;;"}

package/dist/components/Dialog/Dialog.d.ts

@@ -32,7 +32,7 @@ export type DialogProps = {
     /** Size of the dialog. This is the recommended way to set a size for dialog component. */
     size?: DialogSize;
     /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
 };
 export type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {
     Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport type {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { Content, Title, Footer, Close } from './components/Content';\nimport type { DialogDrawerProps, DialogDrawerRenderProps } from './components/DialogDrawer';\nimport { DialogDrawer } from './components/DialogDrawer';\nimport type { DialogExtraProps } from './components/Extra';\nimport { Extra } from './components/Extra';\nimport type { DialogTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport { DialogContext } from './Context';\nimport type { DialogSize } from './types';\n\nimport './Dialog.css';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = (initialChildren: React.ReactNode) => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n    const popupRef = React.useRef<HTMLElement | null>(null);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            popupRef,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (closeOnEscape === false) {\n                eventDetails.cancel();\n                return;\n            }\n            // call onClose, and fall through to also call onChange.\n            props.onClose?.();\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root\n                defaultOpen={defaultOpen}\n                disablePointerDismissal\n                modal\n                open={open}\n                onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["Dialog","open","DialogPrimitive"],"mappings":";;;;;;;;AAkEA,MAAM,uBAAuB,CAAC,oBAAqC;AAC/D,SAAO,MAAM,QAAQ,MAAM;AACvB,UAAM,WAAkB,CAAA;AACxB,QAAI;AACJ,QAAI;AAEJ,UAAM,SAAS,QAAQ,eAAe,EAAE,QAAQ,CAAC,UAAe;AAC5D,UAAI,MAAM,MAAM,gBAAgB,aAAa,aAAa;AACtD,iBAAS;AAAA,MACb,WAAW,MAAM,MAAM,gBAAgB,MAAM,aAAa;AACtD,gBAAQ;AAAA,MACZ,OAAO;AACH,iBAAS,KAAK,KAAK;AAAA,MACvB;AAAA,IACJ,CAAC;AAED,WAAO,CAAC,UAAU,QAAQ,KAAK;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AACxB;AAYO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,QAAQ,KAAK,IAAI,qBAAqB,eAAe;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AACxD,QAAM,WAAW,MAAM,OAA2B,IAAI;AAEtD,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,MAAM,cAAc,CAAA,iBAAgB,CAAC,YAAY;AAAA,MAAA;AAAA,MAE7D,UAAU;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,eAAe,YAAY,WAAW,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAAA;AAG3F,QAAM,mBAAmB,CAACC,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAGb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,kBAAkB,OAAO;AAChC,qBAAa,OAAA;AACb;AAAA,MACJ;AAEA,YAAM,UAAA;AAAA,IACV;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,IACb,WAAW,sBAAA,cAAC,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport * as React from 'react';\n\nimport type {\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { Content, Title, Footer, Close } from './components/Content';\nimport type { DialogDrawerProps, DialogDrawerRenderProps } from './components/DialogDrawer';\nimport { DialogDrawer } from './components/DialogDrawer';\nimport type { DialogExtraProps } from './components/Extra';\nimport { Extra } from './components/Extra';\nimport type { DialogTriggerProps } from './components/Trigger';\nimport { Trigger } from './components/Trigger';\nimport { DialogContext } from './Context';\nimport type { DialogSize } from './types';\n\nimport './Dialog.css';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: React.JSX.Element;\n};\n\nconst useSeparatedChildren = (initialChildren: React.ReactNode) => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n    const popupRef = React.useRef<HTMLElement | null>(null);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            popupRef,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    const handleOpenChange = (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails) => {\n        if (eventDetails.reason === 'escape-key') {\n            const triggeredFromRadixPortal = (eventDetails.event.target as HTMLElement)?.closest(\n                'div[data-radix-popper-content-wrapper]'\n            );\n\n            if (triggeredFromRadixPortal) {\n                // TODO: This could be removed when all radix overlays are replaced with base UI components, but currently it propagates through and closes the dialog.\n\n                // cancel closing the dialog\n                eventDetails.cancel();\n\n                // propagate to allow the radix overlay to close\n                eventDetails.allowPropagation();\n                return;\n            } else if (closeOnEscape === false) {\n                eventDetails.cancel();\n                return;\n            }\n            // call onClose, and fall through to also call onChange.\n            props.onClose?.();\n        }\n\n        onChange?.(open);\n    };\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root\n                defaultOpen={defaultOpen}\n                disablePointerDismissal\n                modal\n                open={open}\n                onOpenChange={handleOpenChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["Dialog","open","DialogPrimitive"],"mappings":";;;;;;;;AAkEA,MAAM,uBAAuB,CAAC,oBAAqC;AAC/D,SAAO,MAAM,QAAQ,MAAM;AACvB,UAAM,WAAkB,CAAA;AACxB,QAAI;AACJ,QAAI;AAEJ,UAAM,SAAS,QAAQ,eAAe,EAAE,QAAQ,CAAC,UAAe;AAC5D,UAAI,MAAM,MAAM,gBAAgB,aAAa,aAAa;AACtD,iBAAS;AAAA,MACb,WAAW,MAAM,MAAM,gBAAgB,MAAM,aAAa;AACtD,gBAAQ;AAAA,MACZ,OAAO;AACH,iBAAS,KAAK,KAAK;AAAA,MACvB;AAAA,IACJ,CAAC;AAED,WAAO,CAAC,UAAU,QAAQ,KAAK;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AACxB;AAYO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAA6B;AACpG,QAAM;AAAA,IACF,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,UAAU,QAAQ,KAAK,IAAI,qBAAqB,eAAe;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AACxD,QAAM,WAAW,MAAM,OAA2B,IAAI;AAEtD,QAAM,UAAU,MAAM;AAAA,IAClB,OAAO;AAAA,MACH;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,MAAM,cAAc,CAAA,iBAAgB,CAAC,YAAY;AAAA,MAAA;AAAA,MAE7D,UAAU;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEJ,CAAC,eAAe,YAAY,WAAW,QAAQ,OAAO,MAAM,YAAY,eAAe;AAAA,EAAA;AAG3F,QAAM,mBAAmB,CAACC,OAAe,iBAA0D;AAC/F,QAAI,aAAa,WAAW,cAAc;AACtC,YAAM,2BAA4B,aAAa,MAAM,QAAwB;AAAA,QACzE;AAAA,MAAA;AAGJ,UAAI,0BAA0B;AAI1B,qBAAa,OAAA;AAGb,qBAAa,iBAAA;AACb;AAAA,MACJ,WAAW,kBAAkB,OAAO;AAChC,qBAAa,OAAA;AACb;AAAA,MACJ;AAEA,YAAM,UAAA;AAAA,IACV;AAEA,eAAWA,KAAI;AAAA,EACnB;AAEA,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,WAC3B,sBAAA;AAAA,IAACC,SAAgB;AAAA,IAAhB;AAAA,MACG;AAAA,MACA,yBAAuB;AAAA,MACvB,OAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAAA;AAAA,IACb,WAAW,sBAAA,cAAC,SAAA,MAAS,OAAQ;AAAA,IAC7B;AAAA,EAAA,CAET;AAER,CAAC;AAED,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,QAAQ;"}

package/dist/components/Dialog/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { mergeRefs } from '../../../utils/mergeRefs';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.MutableRefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["React","DialogPrimitive","dialog","useCurrentDialog","RenderPropWrapper","mergeRefs","useDraggable","useLocalization","DIALOG_POSITION_CLASSNAMES","DIALOG_SIZE_CLASSNAME","Backdrop","LegacyIconButton"],"mappings":"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"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { mergeRefs } from '../../../utils/mergeRefs';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport type { DialogContext } from '../Context';\nimport { useCurrentDialog } from '../Context';\nimport { DIALOG_POSITION_CLASSNAMES, DIALOG_SIZE_CLASSNAME } from '../util';\n\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: DialogContentDrawerRenderProps;\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('text-center', props.className);\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('mt-8 flex justify-end', props.className);\n    return (\n        <div {...props} className={className} ref={ref}>\n            {props.children}\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {\n    children: React.JSX.Element;\n};\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n    const { children, ...restProps } = props;\n\n    return <DialogPrimitive.Close {...restProps} onClick={dialog.onClose} ref={ref} render={children} />;\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the dialog is opened */\n    'aria-label': string;\n    children: React.ReactNode | ((props: DialogContentRenderProps) => React.ReactNode);\n    initialFocus?: DialogPrimitive.Popup.Props['initialFocus'];\n    finalFocus?: DialogPrimitive.Popup.Props['finalFocus'];\n};\nexport const Content = React.forwardRef(function DialogContent(\n    props: DialogContentProps,\n    forwardedRef: React.Ref<HTMLDivElement>\n) {\n    const dialog = useCurrentDialog();\n    // Popup ref lives on the Dialog root so descendants can read it via `useDialogScope`;\n    // we attach it to the popup node here and merge in any forwarded ref.\n    const popupRef = dialog.popupRef as React.MutableRefObject<HTMLDivElement | null>;\n    const setPopupRef = React.useMemo(() => mergeRefs<HTMLDivElement>([popupRef, forwardedRef]), [popupRef, forwardedRef]);\n    const { position, dragging, handleProps: dragHandleProps } = useDraggable(popupRef);\n    const { texts } = useLocalization();\n\n    const className = cn(\n        'relative animate-[fade-in_150ms] rounded bg-white print:!static',\n        DIALOG_POSITION_CLASSNAMES,\n        DIALOG_SIZE_CLASSNAME[dialog.size],\n        'print:m-0 print:h-max print:w-full print:overflow-visible'\n    );\n\n    const containerClassName = cn(\n        'relative z-10 rounded bg-white p-6 shadow print:p-0',\n        // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.\n        'print:!inset-0 print:!m-0 print:h-max print:!transform-none print:overflow-visible',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = props.children;\n    }\n    return (\n        <DialogPrimitive.Portal>\n            <Backdrop>\n                <DialogPrimitive.Popup\n                    {...props}\n                    className={className}\n                    ref={setPopupRef}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `${position.x}px` : undefined,\n                        top: dialog.draggable ? `${position.y}px` : undefined,\n                    }}>\n                    <div className={containerClassName} data-taco=\"dialog\">\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                role=\"button\"\n                                draggable\n                                aria-grabbed={dragging}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag top-1.5 h-3 w-24 cursor-move rounded bg-gray-100 text-center absolute-center-x print:hidden\"\n                            />\n                        )}\n                        {dialog.showCloseButton ? (\n                            <DialogPrimitive.Close\n                                onClick={dialog.onClose}\n                                render={\n                                    <LegacyIconButton\n                                        appearance=\"discrete\"\n                                        aria-label={texts.dialog.close}\n                                        className=\"absolute right-0 top-0 mr-2 mt-2 print:hidden\"\n                                        icon=\"close\"\n                                    />\n                                }></DialogPrimitive.Close>\n                        ) : null}\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Popup>\n            </Backdrop>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["React","DialogPrimitive","dialog","useCurrentDialog","RenderPropWrapper","mergeRefs","useDraggable","useLocalization","DIALOG_POSITION_CLASSNAMES","DIALOG_SIZE_CLASSNAME","Backdrop","LegacyIconButton"],"mappings":"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"}

package/dist/components/Dialog/components/Content.d.ts

@@ -11,10 +11,10 @@ export declare const Title: React.ForwardRefExoticComponent<DialogTitleProps & R
 export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
 export type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement> & {
-    children: JSX.Element;
+    children: React.JSX.Element;
 };
 export declare const Close: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
-    children: JSX.Element;
+    children: React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement>>;
 export type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** An accessible label to be announced when the dialog is opened */