@economic/taco 2.18.0 → 2.20.0

package/dist/esm/packages/taco/src/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import cn from 'clsx';
 
 const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,wOAAwO,EACxO;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,wOAAwO,EACxO;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}

package/dist/esm/packages/taco/src/components/Layout/Layout.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { LayoutContext } from './components/Context.js';
 import { Content } from './components/Content.js';
 import { Sidebar } from './components/Sidebar.js';
@@ -8,7 +8,7 @@ import { Page } from './components/Page.js';
 
 const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(props, ref) {
   const [sidebarOpen, setSidebarOpen] = React__default.useState(false);
-  const className = cn('flex h-screen w-screen flex-col overflow-hidden relative', props.className);
+  const className = cn('flex h-screen w-screen flex-col overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement(LayoutContext.Provider, {
     value: {
       sidebarOpen,

package/dist/esm/packages/taco/src/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../../../../../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { LayoutContext } from './components/Context';\nimport { Content } from './components/Content';\nimport { Sidebar } from './components/Sidebar';\nimport { Top } from './components/Top';\nimport { Page } from './components/Page';\n\nexport type LayoutProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(function Layout(props, ref) {\n    const [sidebarOpen, setSidebarOpen] = React.useState(false);\n    const className = cn('flex h-screen w-screen flex-col overflow-hidden relative', props.className);\n\n    return (\n        <LayoutContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\n            <div {...props} className={className} ref={ref} />\n        </LayoutContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<LayoutProps> & {\n    Top: typeof Top;\n    Page: typeof Page;\n    Sidebar: typeof Sidebar;\n    Content: typeof Content;\n};\n\nLayout.Top = Top;\nLayout.Page = Page;\nLayout.Sidebar = Sidebar;\nLayout.Content = Content;\n\nexport type { LayoutContentProps } from './components/Content';\nexport type { LayoutPageProps } from './components/Page';\nexport type { LayoutSidebarProps } from './components/Sidebar';\nexport type { LayoutTopProps } from './components/Top';\n"],"names":["Layout","React","forwardRef","props","ref","sidebarOpen","setSidebarOpen","useState","className","cn","LayoutContext","Provider","value","Top","Page","Sidebar","Content"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAMA,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGL,cAAK,CAACM,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMC,SAAS,GAAGC,EAAE,CAAC,0DAA0D,EAAEN,KAAK,CAACK,SAAS,CAAC;EAEjG,oBACIP,6BAACS,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAE;MAAEP,WAAW;MAAEC;;kBAC1CL,sDAASE,KAAK;IAAEK,SAAS,EAAEA,SAAS;IAAEJ,GAAG,EAAEA;KAAO,CAC7B;AAEjC,CAAC;AAODJ,MAAM,CAACa,GAAG,GAAGA,GAAG;AAChBb,MAAM,CAACc,IAAI,GAAGA,IAAI;AAClBd,MAAM,CAACe,OAAO,GAAGA,OAAO;AACxBf,MAAM,CAACgB,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Layout.js","sources":["../../../../../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { LayoutContext } from './components/Context';\nimport { Content } from './components/Content';\nimport { Sidebar } from './components/Sidebar';\nimport { Top } from './components/Top';\nimport { Page } from './components/Page';\n\nexport type LayoutProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(function Layout(props, ref) {\n    const [sidebarOpen, setSidebarOpen] = React.useState(false);\n    const className = cn(\n        'flex h-screen w-screen flex-col overflow-hidden print:overflow-visible print:h-full relative',\n        props.className\n    );\n\n    return (\n        <LayoutContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\n            <div {...props} className={className} ref={ref} />\n        </LayoutContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<LayoutProps> & {\n    Top: typeof Top;\n    Page: typeof Page;\n    Sidebar: typeof Sidebar;\n    Content: typeof Content;\n};\n\nLayout.Top = Top;\nLayout.Page = Page;\nLayout.Sidebar = Sidebar;\nLayout.Content = Content;\n\nexport type { LayoutContentProps } from './components/Content';\nexport type { LayoutPageProps } from './components/Page';\nexport type { LayoutSidebarProps } from './components/Sidebar';\nexport type { LayoutTopProps } from './components/Top';\n"],"names":["Layout","React","forwardRef","props","ref","sidebarOpen","setSidebarOpen","useState","className","cn","LayoutContext","Provider","value","Top","Page","Sidebar","Content"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAMA,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGL,cAAK,CAACM,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAMC,SAAS,GAAGC,EAAE,CAChB,8FAA8F,EAC9FN,KAAK,CAACK,SAAS,CAClB;EAED,oBACIP,6BAACS,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAE;MAAEP,WAAW;MAAEC;;kBAC1CL,sDAASE,KAAK;IAAEK,SAAS,EAAEA,SAAS;IAAEJ,GAAG,EAAEA;KAAO,CAC7B;AAEjC,CAAC;AAODJ,MAAM,CAACa,GAAG,GAAGA,GAAG;AAChBb,MAAM,CAACc,IAAI,GAAGA,IAAI;AAClBd,MAAM,CAACe,OAAO,GAAGA,OAAO;AACxBf,MAAM,CAACgB,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Layout/components/Content.js

@@ -1,8 +1,8 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 
 const Content = /*#__PURE__*/React__default.forwardRef(function LayoutContent(props, ref) {
-  const className = cn('flex-grow overflow-y-auto bg-white flex flex-shrink flex-col relative', props.className);
+  const className = cn('flex-grow overflow-y-auto print:overflow-visible print:h-full print:!p-0 bg-white flex flex-shrink flex-col relative', props.className);
   return /*#__PURE__*/React__default.createElement("main", Object.assign({}, props, {
     className: className,
     ref: ref

package/dist/esm/packages/taco/src/components/Layout/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Layout/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nexport type LayoutContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Content = React.forwardRef<HTMLDivElement, LayoutContentProps>(function LayoutContent(props, ref) {\n    const className = cn('flex-grow overflow-y-auto bg-white flex flex-shrink flex-col relative', props.className);\n    return <main {...props} className={className} ref={ref} />;\n});\n"],"names":["Content","React","forwardRef","LayoutContent","props","ref","className","cn"],"mappings":";;;MAKaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAAC,uEAAuE,EAAEH,KAAK,CAACE,SAAS,CAAC;EAC9G,oBAAOL,uDAAUG,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC9D,CAAC;;;;"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Layout/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type LayoutContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Content = React.forwardRef<HTMLDivElement, LayoutContentProps>(function LayoutContent(props, ref) {\n    const className = cn(\n        'flex-grow overflow-y-auto print:overflow-visible print:h-full print:!p-0 bg-white flex flex-shrink flex-col relative',\n        props.className\n    );\n    return <main {...props} className={className} ref={ref} />;\n});\n"],"names":["Content","React","forwardRef","LayoutContent","props","ref","className","cn"],"mappings":";;;MAKaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChB,sHAAsH,EACtHH,KAAK,CAACE,SAAS,CAClB;EACD,oBAAOL,uDAAUG,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC9D,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Layout/components/Page.js

@@ -1,8 +1,8 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {
-  const className = cn('flex flex-grow overflow-hidden relative', props.className);
+  const className = cn('flex flex-grow overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref

package/dist/esm/packages/taco/src/components/Layout/components/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../../../../../../src/components/Layout/components/Page.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nexport type LayoutPageProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Page = React.forwardRef<HTMLDivElement, LayoutPageProps>(function LayoutPage(props, ref) {\n    const className = cn('flex flex-grow overflow-hidden relative', props.className);\n    return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["Page","React","forwardRef","LayoutPage","props","ref","className","cn"],"mappings":";;;MAKaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAChG,MAAMC,SAAS,GAAGC,EAAE,CAAC,yCAAyC,EAAEH,KAAK,CAACE,SAAS,CAAC;EAChF,oBAAOL,sDAASG,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC7D,CAAC;;;;"}
+{"version":3,"file":"Page.js","sources":["../../../../../../../../src/components/Layout/components/Page.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nexport type LayoutPageProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Page = React.forwardRef<HTMLDivElement, LayoutPageProps>(function LayoutPage(props, ref) {\n    const className = cn('flex flex-grow overflow-hidden print:overflow-visible print:h-full relative', props.className);\n    return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["Page","React","forwardRef","LayoutPage","props","ref","className","cn"],"mappings":";;;MAKaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAChG,MAAMC,SAAS,GAAGC,EAAE,CAAC,6EAA6E,EAAEH,KAAK,CAACE,SAAS,CAAC;EACpH,oBAAOL,sDAASG,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC7D,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useIsLargeScreen } from '../../../hooks/useIsLargeScreen.js';
@@ -40,7 +40,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
   }, [isSmallScreen, sidebarOpen]);
   const showBackdrop = isSmallScreen && sidebarOpen === true;
   const [ready, setReady] = React__default.useState(isSmallScreen);
-  const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0', {
+  const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden', {
     'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,
     // prevent animation when crossing the boundary from large to small screen,
     // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)

package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop, BackdropProps } from '../../Backdrop/Backdrop';\n\nconst SidebarBackdrop = motion<BackdropProps>(Backdrop);\n\nexport type LayoutSidebarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <SidebarBackdrop\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"z-[1]\"\n                        onClick={() => setSidebarOpen(false)}\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","motion","Backdrop","Sidebar","React","forwardRef","LayoutSidebar","props","ref","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","useEffect","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","ready","setReady","useState","className","cn","invisible","setTimeout","toggleSidebar","open","content","AnimatePresence","initial","opacity","animate","exit","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,MAAM,CAAgBC,QAAQ,CAAC;MAI1CC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAM;IAAEI,WAAW;IAAEC;GAAgB,GAAGR,cAAK,CAACS,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9CP,cAAK,CAACe,SAAS,CAAC;IACZP,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBX,cAAK,CAACe,SAAS,CAAC;IACZ,MAAMC,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBZ,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Bc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACH,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMiB,YAAY,GAAGX,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAM,CAACkB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAACd,aAAa,CAAC;EAEvD,MAAMe,SAAS,GAAGC,EAAE,CAChB,kDAAkD,EAClD;IACI,4CAA4C,EAAEhB,aAAa;;;IAG3DiB,SAAS,EAAEjB,aAAa,IAAI,CAACY,KAAK;IAClC,6CAA6C,EAAEZ,aAAa,IAAIY,KAAK;IACrE,gCAAgC,EAAE,CAACD;GACtC,EACDrB,KAAK,CAACyB,SAAS,CAClB;EAED5B,cAAK,CAACe,SAAS,CAAC;;IAEZgB,UAAU,CAAC;MACPL,QAAQ,CAACb,aAAa,CAAC;KAC1B,EAAE,CAAC,CAAC;GACR,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMmB,aAAa,GAAGA,MAAMxB,cAAc,CAACyB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAO7B,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEsB,IAAI,EAAE1B,WAAW;IAAEyB;GAAe,CAAC,GAAG3B,QAAQ;EAEzH,IAAI,CAAC6B,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIlC,yEACIA,sDAASM,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEc,SAAS,EAAEA,SAAS;IAAExB,GAAG,EAAEA;MACpG8B,OAAO,CACN,eACNlC,6BAACmC,eAAe,QACXX,YAAY,mBACTxB,6BAACJ,eAAe;IACZwC,OAAO,EAAE;MAAEC,OAAO,EAAE;KAAG;IACvBC,OAAO,EAAE;MAAED,OAAO,EAAE;KAAG;IACvBE,IAAI,EAAE;MAAEF,OAAO,EAAE;KAAG;IACpBT,SAAS,EAAC,OAAO;IACjBY,OAAO,EAAEA,MAAMhC,cAAc,CAAC,KAAK;IACrC,CACL,CACa,CACnB;AAEX,CAAC;;;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop, BackdropProps } from '../../Backdrop/Backdrop';\n\nconst SidebarBackdrop = motion<BackdropProps>(Backdrop);\n\nexport type LayoutSidebarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <SidebarBackdrop\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"z-[1]\"\n                        onClick={() => setSidebarOpen(false)}\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","motion","Backdrop","Sidebar","React","forwardRef","LayoutSidebar","props","ref","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","useEffect","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","ready","setReady","useState","className","cn","invisible","setTimeout","toggleSidebar","open","content","AnimatePresence","initial","opacity","animate","exit","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,MAAM,CAAgBC,QAAQ,CAAC;MAI1CC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAM;IAAEI,WAAW;IAAEC;GAAgB,GAAGR,cAAK,CAACS,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9CP,cAAK,CAACe,SAAS,CAAC;IACZP,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBX,cAAK,CAACe,SAAS,CAAC;IACZ,MAAMC,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBZ,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Bc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACH,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMiB,YAAY,GAAGX,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAM,CAACkB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAACd,aAAa,CAAC;EAEvD,MAAMe,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D;IACI,4CAA4C,EAAEhB,aAAa;;;IAG3DiB,SAAS,EAAEjB,aAAa,IAAI,CAACY,KAAK;IAClC,6CAA6C,EAAEZ,aAAa,IAAIY,KAAK;IACrE,gCAAgC,EAAE,CAACD;GACtC,EACDrB,KAAK,CAACyB,SAAS,CAClB;EAED5B,cAAK,CAACe,SAAS,CAAC;;IAEZgB,UAAU,CAAC;MACPL,QAAQ,CAACb,aAAa,CAAC;KAC1B,EAAE,CAAC,CAAC;GACR,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMmB,aAAa,GAAGA,MAAMxB,cAAc,CAACyB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAO7B,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEsB,IAAI,EAAE1B,WAAW;IAAEyB;GAAe,CAAC,GAAG3B,QAAQ;EAEzH,IAAI,CAAC6B,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIlC,yEACIA,sDAASM,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEc,SAAS,EAAEA,SAAS;IAAExB,GAAG,EAAEA;MACpG8B,OAAO,CACN,eACNlC,6BAACmC,eAAe,QACXX,YAAY,mBACTxB,6BAACJ,eAAe;IACZwC,OAAO,EAAE;MAAEC,OAAO,EAAE;KAAG;IACvBC,OAAO,EAAE;MAAED,OAAO,EAAE;KAAG;IACvBE,IAAI,EAAE;MAAEF,OAAO,EAAE;KAAG;IACpBT,SAAS,EAAC,OAAO;IACjBY,OAAO,EAAEA,MAAMhC,cAAc,CAAC,KAAK;IACrC,CACL,CACa,CACnB;AAEX,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { ScrollableList } from './ScrollableList.js';
 import { useListbox } from './useListbox.js';
 import { useMultiListbox } from './useMultiListbox.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC1G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGC,UAAU,CAACH,UAAU,EAAEH,GAAG,CAAC;EACnD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MAAE,GAAGL,IAAI,CAACK,KAAK;MAAEC,SAAS,EAAE,mBAAmB;;KACxD,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;MAEYC,YAAY,gBAAGd,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC/G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGQ,eAAe,CAACV,UAAU,EAAEH,GAAG,CAAC;EACxD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MACH,GAAGL,IAAI,CAACK,KAAK;MACbC,SAAS,EAAE,yBAAyB;;KAE1C,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC1G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGC,UAAU,CAACH,UAAU,EAAEH,GAAG,CAAC;EACnD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MAAE,GAAGL,IAAI,CAACK,KAAK;MAAEC,SAAS,EAAE,mBAAmB;;KACxD,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;MAEYC,YAAY,gBAAGd,UAAgB,CAAC,SAASD,OAAOA,CAACE,KAAmB,EAAEC,GAAgC;EAC/G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC7D,MAAM;IAAEK,IAAI;IAAEC;GAAO,GAAGQ,eAAe,CAACV,UAAU,EAAEH,GAAG,CAAC;EACxD,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAsC,EAAEL,iBAAiB,CAAC;EAE/E,oBACIJ;iBAAgB,SAAS;IAACG,SAAS,EAAEA;kBACjCH,cAACU,cAAc,oBACPJ,IAAI;IACRK,KAAK,EAAE;MACH,GAAGL,IAAI,CAACK,KAAK;MACbC,SAAS,EAAE,yBAAyB;;KAE1C,eACFZ,yCAAWO,KAAK;IAAEJ,SAAS,EAAC,QAAQ;IAACU,IAAI,EAAC;KAAS,CAChD;AAEf,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';

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

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

package/dist/esm/packages/taco/src/components/Menu/components/Content.js

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, Children, createRef, cloneElement, useEffect, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { createShortcutKeyDownHandler } from '../../../utils/keyboard.js';
 import { useCurrentMenu } from '../Context.js';

package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Header.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
 

package/dist/esm/packages/taco/src/components/Menu/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props, ref) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} ref={ref} />;\n});\n"],"names":["Header","React","MenuHeader","props","ref","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAgB,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAClG,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,SAAS,GAAGC,EAAE,CAChB,kEAAkE,EAClE;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ;IACtB,QAAQ,EAAE,EAACJ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ;GAC5B,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBAAON,cAACS,KAA2B,oBAAKP,KAAK;IAAEI,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACrF,CAAC;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props, ref) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} ref={ref} />;\n});\n"],"names":["Header","React","MenuHeader","props","ref","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAgB,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAClG,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,SAAS,GAAGC,EAAE,CAChB,kEAAkE,EAClE;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ;IACtB,QAAQ,EAAE,EAACJ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ;GAC5B,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBAAON,cAACS,KAA2B,oBAAKP,KAAK;IAAEI,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACrF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Item.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement, useEffect } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon as Icon$1 } from '../../Icon/Icon.js';
 import { useCurrentMenu } from '../Context.js';
 import { Sub, SubTrigger, Item as Item$1 } from '@radix-ui/react-dropdown-menu';

package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, popover, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    if (subMenu) {\n        return (\n            <DropdownMenuPrimitive.Sub>\n                <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </DropdownMenuPrimitive.SubTrigger>\n                {subMenu()}\n            </DropdownMenuPrimitive.Sub>\n        );\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-grey-700\" />\n                </span>\n            ) : null}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, popover, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    if (subMenu) {\n        return (\n            <DropdownMenuPrimitive.Sub>\n                <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </DropdownMenuPrimitive.SubTrigger>\n                {subMenu()}\n            </DropdownMenuPrimitive.Sub>\n        );\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-grey-700\" />\n                </span>\n            ) : null}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js

@@ -1,5 +1,5 @@
 import { useContext, createElement, createContext, forwardRef } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { RadioItem as RadioItem$1, ItemIndicator, RadioGroup as RadioGroup$1 } from '@radix-ui/react-dropdown-menu';
 import { useItemStyling } from './Item.js';
 import { getRadioGroupItemValueAsString, useRadioGroup } from '../../RadioGroup/RadioGroup.js';

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props, ref) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} ref={ref} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","ref","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAA8B;EACpD,MAAMC,OAAO,GAAGC,UAAgB,CAACC,qBAAqB,CAAC;EACvD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChD,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAQ,IAAIP,KAAK,CAACO,QAAQ;EACnD,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QAAQ;IAClBG,QAAQ,EAAE,IAAI;IACdF,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,oBACIN,cAACS,WAA+B,oBACxBL,UAAU;IACdE,SAAS,EAAEA,SAAS;IACpBD,QAAQ,EAAEA,QAAQ;IAClBF,KAAK,EAAEO,8BAA8B,CAACP,KAAK;mBAC3CH,cAACS,aAAmC;IAACH,SAAS,EAAC;kBAC3CN;IAAMM,SAAS,EAAC;IAAmD,CACjC,EACrCJ,QAAQ,CACqB;AAE1C;AAEA,MAAMD,qBAAqB,gBAAGD,aAAmB,CAAC;EAAEK,QAAQ,EAAE;CAAO,CAAC;MAUzDM,UAAU,gBAAGX,UAAgB,CAAsC,SAASY,aAAaA,CAACd,KAAK,EAAEe,GAAG;EAC7G,MAAM;IAAEd,OAAO;IAAED,KAAK,EAAEM;GAAY,GAAGU,aAAa,CAAChB,KAAK,CAAC;EAC3D,MAAMQ,SAAS,GAAGS,EAAE,CAAC,eAAe,EAAEjB,KAAK,CAACQ,SAAS,CAAC;EAEtD,oBACIN,cAACC,qBAAqB,CAACe,QAAQ;IAACb,KAAK,EAAEJ;kBACnCC,cAACS,YAAgC,oBAAKL,UAAU;IAAEE,SAAS,EAAEA,SAAS;IAAEO,GAAG,EAAEA;KAAO,CACvD;AAEzC,CAAC;AACDF,UAAU,CAACM,IAAI,GAAGpB,SAAS;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props, ref) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} ref={ref} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","ref","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAA8B;EACpD,MAAMC,OAAO,GAAGC,UAAgB,CAACC,qBAAqB,CAAC;EACvD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChD,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAQ,IAAIP,KAAK,CAACO,QAAQ;EACnD,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QAAQ;IAClBG,QAAQ,EAAE,IAAI;IACdF,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,oBACIN,cAACS,WAA+B,oBACxBL,UAAU;IACdE,SAAS,EAAEA,SAAS;IACpBD,QAAQ,EAAEA,QAAQ;IAClBF,KAAK,EAAEO,8BAA8B,CAACP,KAAK;mBAC3CH,cAACS,aAAmC;IAACH,SAAS,EAAC;kBAC3CN;IAAMM,SAAS,EAAC;IAAmD,CACjC,EACrCJ,QAAQ,CACqB;AAE1C;AAEA,MAAMD,qBAAqB,gBAAGD,aAAmB,CAAC;EAAEK,QAAQ,EAAE;CAAO,CAAC;MAUzDM,UAAU,gBAAGX,UAAgB,CAAsC,SAASY,aAAaA,CAACd,KAAK,EAAEe,GAAG;EAC7G,MAAM;IAAEd,OAAO;IAAED,KAAK,EAAEM;GAAY,GAAGU,aAAa,CAAChB,KAAK,CAAC;EAC3D,MAAMQ,SAAS,GAAGS,EAAE,CAAC,eAAe,EAAEjB,KAAK,CAACQ,SAAS,CAAC;EAEtD,oBACIN,cAACC,qBAAqB,CAACe,QAAQ;IAACb,KAAK,EAAEJ;kBACnCC,cAACS,YAAgC,oBAAKL,UAAU;IAAEE,SAAS,EAAEA,SAAS;IAAEO,GAAG,EAAEA;KAAO,CACvD;AAEzC,CAAC;AACDF,UAAU,CAACM,IAAI,GAAGpB,SAAS;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { Portal, SubContent } from '@radix-ui/react-dropdown-menu';
 

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.js","sources":["../../../../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nexport type MenuSubMenuProps = Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps, 'children' | 'side'> & {\n    children: React.ReactNode;\n};\n\nexport const SubMenu = React.forwardRef(function MenuSubMenu(props: MenuSubMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const { children, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.SubContent\n                {...otherProps}\n                className={className}\n                data-taco=\"menu-submenu\"\n                sideOffset={4}\n                ref={internalRef}>\n                {children}\n            </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["SubMenu","React","MenuSubMenu","props","ref","internalRef","useMergedRef","children","otherProps","className","cn","DropdownMenuPrimitive","sideOffset"],"mappings":";;;;;MASaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAM;IAAEG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACzC,MAAMM,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEP,KAAK,CAACM,SAAS,CAAC;EAEtH,oBACIR,cAACU,MAA4B,qBACzBV,cAACU,UAAgC,oBACzBH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,cAAc;IACxBG,UAAU,EAAE,CAAC;IACbR,GAAG,EAAEC;MACJE,QAAQ,CACsB,CACR;AAEvC,CAAC;;;;"}
+{"version":3,"file":"SubMenu.js","sources":["../../../../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nexport type MenuSubMenuProps = Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps, 'children' | 'side'> & {\n    children: React.ReactNode;\n};\n\nexport const SubMenu = React.forwardRef(function MenuSubMenu(props: MenuSubMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const { children, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.SubContent\n                {...otherProps}\n                className={className}\n                data-taco=\"menu-submenu\"\n                sideOffset={4}\n                ref={internalRef}>\n                {children}\n            </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["SubMenu","React","MenuSubMenu","props","ref","internalRef","useMergedRef","children","otherProps","className","cn","DropdownMenuPrimitive","sideOffset"],"mappings":";;;;;MASaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAM;IAAEG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACzC,MAAMM,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEP,KAAK,CAACM,SAAS,CAAC;EAEtH,oBACIR,cAACU,MAA4B,qBACzBV,cAACU,UAAgC,oBACzBH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,cAAc;IACxBG,UAAU,EAAE,CAAC;IACbR,GAAG,EAAEC;MACJE,QAAQ,CACsB,CACR;AAEvC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Thumb } from '@radix-ui/react-switch';
 

package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"!h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAc,CAC7B,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"!h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAc,CAC7B,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { Treeview } from '../Treeview/Treeview.js';