@economic/taco 0.0.26-alpha.9 → 0.0.28-alpha.5

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport './Field.css';\n\nexport type FieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: JSX.Element;\n    disabled?: boolean;\n    invalid?: boolean;\n    label?: string | JSX.Element;\n    message?: string | JSX.Element;\n    required?: boolean;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, disabled, invalid, label, message, required, ...otherProps } = props;\n    const idRef = React.useRef(children?.props?.id ?? uuid());\n    const isInvalid = children?.props?.invalid ?? invalid;\n    const isRequired = children?.props?.required ?? required;\n    const className = cn(\n        'flex flex-col',\n        {\n            'pt-5': !label,\n            'mb-4': !message,\n        },\n        props.className\n    );\n\n    const labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {\n        'text-grey-dark': disabled,\n    });\n\n    const messageClassName = cn('text-xs leading-normal truncate flex-none', {\n        'text-grey-darkest': !isInvalid,\n        'text-red': isInvalid,\n        'opacity-50': disabled,\n    });\n\n    if (!label && !children?.props['aria-label']) {\n        console.warn(\n            'TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.'\n        );\n    }\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"field\" ref={ref}>\n            {label && (\n                <label htmlFor={idRef.current} className={labelClassName} data-taco=\"label\">\n                    {label}\n                    {isRequired ? '*' : ''}\n                </label>\n            )}\n            {idRef.current !== children?.props?.id ? React.cloneElement(children, { id: idRef.current }) : children}\n            {message && (\n                <span className={messageClassName} role={isInvalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </div>\n    );\n});\n"],"names":["Field","React","props","ref","children","disabled","invalid","label","message","required","otherProps","idRef","id","uuid","isInvalid","isRequired","className","cn","labelClassName","messageClassName","console","warn","htmlFor","current","role","undefined"],"mappings":";;;;;;IAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;;;AAClC,MAAQC,QAAR,GAAiFF,KAAjF,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAAiFH,KAAjF,CAAkBG,QAAlB;AAAA,MAA4BC,OAA5B,GAAiFJ,KAAjF,CAA4BI,OAA5B;AAAA,MAAqCC,KAArC,GAAiFL,KAAjF,CAAqCK,KAArC;AAAA,MAA4CC,OAA5C,GAAiFN,KAAjF,CAA4CM,OAA5C;AAAA,MAAqDC,QAArD,GAAiFP,KAAjF,CAAqDO,QAArD;AAAA,MAAkEC,UAAlE,iCAAiFR,KAAjF;;AACA,MAAMS,KAAK,GAAGV,MAAA,uBAAaG,QAAb,aAAaA,QAAb,0CAAaA,QAAQ,CAAEF,KAAvB,oDAAa,gBAAiBU,EAA9B,mEAAoCC,EAAI,EAAxC,CAAd;AACA,MAAMC,SAAS,4BAAGV,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBI,OAApB,yEAA+BA,OAA9C;AACA,MAAMS,UAAU,4BAAGX,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBO,QAApB,yEAAgCA,QAAhD;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,eADgB,EAEhB;AACI,YAAQ,CAACV,KADb;AAEI,YAAQ,CAACC;AAFb,GAFgB,EAMhBN,KAAK,CAACc,SANU,CAApB;AASA,MAAME,cAAc,GAAGD,EAAE,CAAC,+CAAD,EAAkD;AACvE,sBAAkBZ;AADqD,GAAlD,CAAzB;AAIA,MAAMc,gBAAgB,GAAGF,EAAE,CAAC,2CAAD,EAA8C;AACrE,yBAAqB,CAACH,SAD+C;AAErE,gBAAYA,SAFyD;AAGrE,kBAAcT;AAHuD,GAA9C,CAA3B;;AAMA,MAAI,CAACE,KAAD,IAAU,EAACH,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEF,KAAV,CAAgB,YAAhB,CAAD,CAAd,EAA8C;AAC1CkB,IAAAA,OAAO,CAACC,IAAR,CACI,wJADJ;AAGH;;AAED,SACIpB,aAAA,MAAA,oBAASS;AAAYM,IAAAA,SAAS,EAAEA;iBAAqB;AAAQb,IAAAA,GAAG,EAAEA;IAAlE,EACKI,KAAK,IACFN,aAAA,QAAA;AAAOqB,IAAAA,OAAO,EAAEX,KAAK,CAACY;AAASP,IAAAA,SAAS,EAAEE;iBAA0B;GAApE,EACKX,KADL,EAEKQ,UAAU,GAAG,GAAH,GAAS,EAFxB,CAFR,EAOKJ,KAAK,CAACY,OAAN,MAAkBnB,QAAlB,aAAkBA,QAAlB,2CAAkBA,QAAQ,CAAEF,KAA5B,qDAAkB,iBAAiBU,EAAnC,IAAwCX,YAAA,CAAmBG,QAAnB,EAA6B;AAAEQ,IAAAA,EAAE,EAAED,KAAK,CAACY;AAAZ,GAA7B,CAAxC,GAA8FnB,QAPnG,EAQKI,OAAO,IACJP,aAAA,OAAA;AAAMe,IAAAA,SAAS,EAAEG;AAAkBK,IAAAA,IAAI,EAAEV,SAAS,GAAG,OAAH,GAAaW;GAA/D,EACKjB,OADL,CATR,CADJ;AAgBH,CA9CoB;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, invalid = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-dark': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn(\n        'h-4 text-xs text-left leading-normal font-normal truncate -mb-4',\n        {\n            'text-grey-darkest': !invalid,\n            'text-red': invalid,\n            'opacity-50': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","invalid","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;;;IAmBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,MAAQC,QAAR,GAAwEF,KAAxE,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAAwEH,KAAxE,CAAkBG,QAAlB;AAAA,uBAAwEH,KAAxE,CAA4BI,OAA5B;AAAA,MAA4BA,OAA5B,+BAAsC,KAAtC;AAAA,MAA6CC,OAA7C,GAAwEL,KAAxE,CAA6CK,OAA7C;AAAA,MAAyDC,UAAzD,iCAAwEN,KAAxE;;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,8EADgB,EAEhB;AACI,sBAAkBN;AADtB,GAFgB,EAKhBF,KAAK,CAACO,SALU,CAApB;AAOA,MAAME,gBAAgB,GAAGD,EAAE,CACvB,iEADuB,EAEvB;AACI,yBAAqB,CAACJ,OAD1B;AAEI,gBAAYA,OAFhB;AAGI,kBAAcF;AAHlB,GAFuB,EAOvBF,KAAK,CAACO,SAPiB,CAA3B;AAUA,SACIR,aAAA,QAAA,oBAAWO;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQN,IAAAA,GAAG,EAAEA;IAApE,EACKE,QADL,EAEKE,OAAO,IACJN,aAAA,OAAA;AAAMQ,IAAAA,SAAS,EAAEE;AAAkBC,IAAAA,IAAI,EAAEN,OAAO,GAAG,OAAH,GAAaO;GAA7D,EACKN,OADL,CAHR,CADJ;AAUH,CA7BoB;;;;"}

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

@@ -1,5 +1,5 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, useMemo, createElement, createContext, useContext, isValidElement } from 'react';
+import { forwardRef, useMemo, useState, useEffect, createElement, createContext, useContext, isValidElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Provider.js';
@@ -71,11 +71,22 @@ var Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
       props: otherProps,
       ref: ref
     };
-  }, [otherProps]);
+  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  useEffect(function () {
+    if (defaultOpen) {
+      setOpen(defaultOpen);
+    }
+  }, []);
   return createElement(HangerContext.Provider, {
     value: context
   }, createElement(Root, {
-    defaultOpen: defaultOpen
+    key: String(open),
+    defaultOpen: open
   }, anchor && createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport mergeRefs from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n    );\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}\n        >\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                    icon=\"close\"\n                    onClick={context.props.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n};\n\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\n    const { anchor, children, defaultOpen = true, ...otherProps } = props;\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root defaultOpen={defaultOpen}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","useLocalization","texts","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","Provider","value"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\nimport { useLocalization } from '../Provider/Provider';\nimport './Hanger.css';\nimport mergeRefs from '../../utils/mergeRefs';\n\ntype HangerContextValue = {\n    props: any;\n    ref: React.Ref<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    props: {},\n    ref: null,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    let children = props.children;\n\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n        console.warn(\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n        );\n        children = <span>{props.children}</span>;\n    }\n\n    return (\n        <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n    );\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\n        props.className\n    );\n    const handleInteractOutside = (event: CustomEvent): void => {\n        event.preventDefault();\n    };\n\n    return (\n        <UnstyledContent\n            className={className}\n            data-taco=\"hanger\"\n            onInteractOutside={handleInteractOutside}\n            placement={props.placement}\n            ref={ref}\n        >\n            {props.children}\n            <UnstyledArrow className=\"text-blue\" />\n            <PopoverPrimitive.Close asChild>\n                <IconButton\n                    appearance=\"primary\"\n                    aria-label={texts.hanger.close}\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\n                    icon=\"close\"\n                    onClick={context.props.onClose}\n                />\n            </PopoverPrimitive.Close>\n        </UnstyledContent>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n};\n\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\n    const { anchor, children, defaultOpen = true, ...otherProps } = props;\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    return (\n        <HangerContext.Provider value={context}>\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\n                {anchor && <Anchor>{anchor}</Anchor>}\n                {children}\n            </PopoverPrimitive.Root>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","useLocalization","texts","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

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

@@ -4,15 +4,14 @@ import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
 
-var _excluded = ["appearance", "icon", "rounded"];
+var _excluded = ["icon", "rounded"];
 var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
-  var appearance = props.appearance,
-      icon = props.icon,
+  var icon = props.icon,
       _props$rounded = props.rounded,
       rounded = _props$rounded === void 0 ? false : _props$rounded,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,

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

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

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

@@ -9,8 +9,7 @@ var _excluded = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoF
 var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalid = props.invalid,
       onKeyDown = props.onKeyDown,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
@@ -73,7 +72,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     }
 
     var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    input = createElement("div", {
+    return createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
     }, input, extra);

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    invalid?: boolean;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid = false, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // 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    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (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        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    let input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        input = (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"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 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getButtonStateClasses, getInputClasses } from './util';\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n};\n\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const hasContainer = button || icon;\n    const className = cn(\n        getInputClasses(props),\n        'min-h-[theme(spacing.8)] pointer-events-all',\n        {\n            'pr-8': !!hasContainer,\n        },\n        !hasContainer && otherProps.className\n    );\n\n    React.useEffect(() => {\n        if (autoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, []);\n\n    // 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    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (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        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\n\n    if (hasContainer) {\n        let extra: any;\n\n        if (button) {\n            const disabled = button.props.disabled ?? otherProps.disabled;\n            const buttonClassName = cn(\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\n                {\n                    [getButtonStateClasses(invalid)]: !props.disabled,\n                },\n                button.props.className\n            );\n            extra = React.cloneElement(button, {\n                className: buttonClassName,\n                disabled,\n            });\n        } else if (icon) {\n            const iconClassName = cn(\n                'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\n                {\n                    'text-grey-dark': props.disabled,\n                    'text-grey-darkest': !props.disabled,\n                }\n            );\n            extra =\n                typeof icon === 'string' ? (\n                    <Icon className={iconClassName} name={icon} />\n                ) : (\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\n                );\n        }\n\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\n\n        return (\n            <div className={containerClassName} data-taco=\"input-container\">\n                {input}\n                {extra}\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 
 var getInputClasses = function getInputClasses(props) {
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center', {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,

package/dist/esm/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    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;IAEaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;AAChC,SAAOC,EAAE,CACL,iMADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;IAEaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;AAChC,SAAOC,EAAE,CACL,gKADK,EAEL;AACI,6CAAyCD,KAAK,CAACE,QADnD;AAEI,sDAAkDF,KAAK,CAACG,QAF5D;AAGI,kCAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;AAII,gCAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;AAKI,2IACI,CAACH,KAAK,CAACK,OANf;AAOI,wIACIL,KAAK,CAACK;AARd,GAFK,CAAT;AAaH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,OAAD;AACjC,MAAIA,OAAJ,EAAa;AACT,WAAO,6HAAP;AACH;;AAED,SAAO,mHAAP;AACH;;;;"}

package/dist/esm/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        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","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAsDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"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","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -62,6 +62,17 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
   var _useListScrollTo = useListScrollTo(listRef, itemRefs),
       scrollTo = _useListScrollTo.scrollTo;
 
+  useEffect(function () {
+    var _itemRefs$currentInde;
+
+    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
+      var _itemRefs$currentInde2;
+
+      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
+        block: 'center'
+      });
+    }
+  }, []);
   useEffect(function () {
     scrollTo(currentIndex);
   }, [currentIndex]);

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { 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    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 = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        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 = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { 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 = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        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 = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        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\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

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

@@ -11,9 +11,10 @@ import { RadioGroup } from './components/RadioGroup.js';
 import { Separator } from './components/Separator.js';
 import { Header } from './components/Header.js';
 
-var _excluded = ["children", "trigger"];
+var _excluded = ["appearance", "children", "trigger"];
 var Menu = function Menu(externalProps) {
-  var children = externalProps.children,
+  var externalAppearance = externalProps.appearance,
+      children = externalProps.children,
       trigger = externalProps.trigger,
       props = _objectWithoutPropertiesLoose(externalProps, _excluded);
 
@@ -21,7 +22,7 @@ var Menu = function Menu(externalProps) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = useState('default'),
+  var _React$useState2 = useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default'),
       appearance = _React$useState2[0],
       _setAppearance = _React$useState2[1];
 

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { MenuContext } from './Context';\nimport { Content } from './components/Content';\nimport { Item } from './components/Item';\nimport { Link } from './components/Link';\nimport { Trigger } from './components/Trigger';\nimport { Checkbox } from './components/Checkbox';\nimport { RadioGroup } from './components/RadioGroup';\nimport { Separator } from './components/Separator';\nimport { Header } from './components/Header';\nimport { Appearance } from '../..';\n\nexport type MenuProps = {\n    children: React.ReactNode;\n    id?: string;\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\n    const { children, trigger, ...props } = externalProps;\n    const [open, setOpen] = React.useState(false);\n    const [appearance, setAppearance] = React.useState<Appearance>('default');\n    const [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            appearance,\n            setAppearance: (appearance: Appearance) => setAppearance(appearance),\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth, appearance]\n    );\n\n    return (\n        <MenuContext.Provider value={context}>\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DropdownMenuPrimitive.Root>\n        </MenuContext.Provider>\n    );\n};\nMenu.Trigger = Trigger;\nMenu.Content = Content;\nMenu.Item = Item;\nMenu.Link = Link;\nMenu.Checkbox = Checkbox;\nMenu.Separator = Separator;\nMenu.Header = Header;\nMenu.RadioGroup = RadioGroup;\n"],"names":["Menu","externalProps","children","trigger","props","React","open","setOpen","appearance","setAppearance","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAoBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;AAChB,MAAQC,QAAR,GAAwCD,aAAxC,CAAQC,QAAR;AAAA,MAAkBC,OAAlB,GAAwCF,aAAxC,CAAkBE,OAAlB;AAAA,MAA8BC,KAA9B,iCAAwCH,aAAxC;;AACA,wBAAwBI,QAAA,CAAe,KAAf,CAAxB;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,yBAAoCF,QAAA,CAA2B,SAA3B,CAApC;AAAA,MAAOG,UAAP;AAAA,MAAmBC,cAAnB;;AACA,yBAAgCJ,QAAA,CAAe,KAAf,CAAhC;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAAgCN,QAAA,CAAmCO,SAAnC,CAAhC;AAAA,MAAOC,QAAP;AAAA,MAAiBC,YAAjB;;AAEA,MAAMC,OAAO,GAAGV,OAAA,CACZ;AAAA,WAAO;AACHG,MAAAA,UAAU,EAAVA,UADG;AAEHC,MAAAA,aAAa,EAAE,uBAACD,UAAD;AAAA,eAA4BC,cAAa,CAACD,UAAD,CAAzC;AAAA,OAFZ;AAGHE,MAAAA,QAAQ,EAARA,QAHG;AAIHM,MAAAA,mBAAmB,EAAE;AAAA,eAAML,WAAW,CAAC,IAAD,CAAjB;AAAA,OAJlB;AAKHE,MAAAA,QAAQ,EAARA,QALG;AAMHC,MAAAA,WAAW,EAAE,qBAACG,KAAD;AAAA,eAAmBH,YAAW,CAACG,KAAD,CAA9B;AAAA,OANV;AAOHC,MAAAA,KAAK,EAAE;AAAA,eAAMX,OAAO,CAAC,KAAD,CAAb;AAAA;AAPJ,KAAP;AAAA,GADY,EAUZ,CAACG,QAAD,EAAWG,QAAX,EAAqBL,UAArB,CAVY,CAAhB;AAaA,SACIH,aAAA,CAACc,WAAW,CAACC,QAAb;AAAsBC,IAAAA,KAAK,EAAEN;GAA7B,EACIV,aAAA,CAACiB,IAAD,oBAAgClB;AAAOmB,IAAAA,KAAK,EAAE;AAAOjB,IAAAA,IAAI,EAAEA;AAAMkB,IAAAA,YAAY,EAAEjB;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACoB,OAAD,MAAA,EAAUtB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACyB,OAAL,GAAeA,OAAf;AACAzB,IAAI,CAAC0B,OAAL,GAAeA,OAAf;AACA1B,IAAI,CAAC2B,IAAL,GAAYA,IAAZ;AACA3B,IAAI,CAAC4B,IAAL,GAAYA,IAAZ;AACA5B,IAAI,CAAC6B,QAAL,GAAgBA,QAAhB;AACA7B,IAAI,CAAC8B,SAAL,GAAiBA,SAAjB;AACA9B,IAAI,CAAC+B,MAAL,GAAcA,MAAd;AACA/B,IAAI,CAACgC,UAAL,GAAkBA,UAAlB;;;;"}
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { MenuContext } from './Context';\nimport { Content } from './components/Content';\nimport { Item } from './components/Item';\nimport { Link } from './components/Link';\nimport { Trigger } from './components/Trigger';\nimport { Checkbox } from './components/Checkbox';\nimport { RadioGroup } from './components/RadioGroup';\nimport { Separator } from './components/Separator';\nimport { Header } from './components/Header';\nimport { Appearance } from '../..';\n\nexport type MenuProps = {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    children: React.ReactNode;\n    id?: string;\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\n    const { appearance: externalAppearance, children, trigger, ...props } = externalProps;\n    const [open, setOpen] = React.useState(false);\n    const [appearance, setAppearance] = React.useState<Appearance>(externalAppearance ?? 'default');\n    const [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            appearance,\n            setAppearance: (appearance: Appearance) => setAppearance(appearance),\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth, appearance]\n    );\n\n    return (\n        <MenuContext.Provider value={context}>\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DropdownMenuPrimitive.Root>\n        </MenuContext.Provider>\n    );\n};\nMenu.Trigger = Trigger;\nMenu.Content = Content;\nMenu.Item = Item;\nMenu.Link = Link;\nMenu.Checkbox = Checkbox;\nMenu.Separator = Separator;\nMenu.Header = Header;\nMenu.RadioGroup = RadioGroup;\n"],"names":["Menu","externalProps","externalAppearance","appearance","children","trigger","props","React","open","setOpen","setAppearance","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAsBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;AAChB,MAAoBC,kBAApB,GAAwED,aAAxE,CAAQE,UAAR;AAAA,MAAwCC,QAAxC,GAAwEH,aAAxE,CAAwCG,QAAxC;AAAA,MAAkDC,OAAlD,GAAwEJ,aAAxE,CAAkDI,OAAlD;AAAA,MAA8DC,KAA9D,iCAAwEL,aAAxE;;AACA,wBAAwBM,QAAA,CAAe,KAAf,CAAxB;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,yBAAoCF,QAAA,CAA2BL,kBAA3B,aAA2BA,kBAA3B,cAA2BA,kBAA3B,GAAiD,SAAjD,CAApC;AAAA,MAAOC,UAAP;AAAA,MAAmBO,cAAnB;;AACA,yBAAgCH,QAAA,CAAe,KAAf,CAAhC;AAAA,MAAOI,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAAgCL,QAAA,CAAmCM,SAAnC,CAAhC;AAAA,MAAOC,QAAP;AAAA,MAAiBC,YAAjB;;AAEA,MAAMC,OAAO,GAAGT,OAAA,CACZ;AAAA,WAAO;AACHJ,MAAAA,UAAU,EAAVA,UADG;AAEHO,MAAAA,aAAa,EAAE,uBAACP,UAAD;AAAA,eAA4BO,cAAa,CAACP,UAAD,CAAzC;AAAA,OAFZ;AAGHQ,MAAAA,QAAQ,EAARA,QAHG;AAIHM,MAAAA,mBAAmB,EAAE;AAAA,eAAML,WAAW,CAAC,IAAD,CAAjB;AAAA,OAJlB;AAKHE,MAAAA,QAAQ,EAARA,QALG;AAMHC,MAAAA,WAAW,EAAE,qBAACG,KAAD;AAAA,eAAmBH,YAAW,CAACG,KAAD,CAA9B;AAAA,OANV;AAOHC,MAAAA,KAAK,EAAE;AAAA,eAAMV,OAAO,CAAC,KAAD,CAAb;AAAA;AAPJ,KAAP;AAAA,GADY,EAUZ,CAACE,QAAD,EAAWG,QAAX,EAAqBX,UAArB,CAVY,CAAhB;AAaA,SACII,aAAA,CAACa,WAAW,CAACC,QAAb;AAAsBC,IAAAA,KAAK,EAAEN;GAA7B,EACIT,aAAA,CAACgB,IAAD,oBAAgCjB;AAAOkB,IAAAA,KAAK,EAAE;AAAOhB,IAAAA,IAAI,EAAEA;AAAMiB,IAAAA,YAAY,EAAEhB;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACmB,OAAD,MAAA,EAAUrB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDJ,IAAI,CAAC0B,OAAL,GAAeA,OAAf;AACA1B,IAAI,CAAC2B,OAAL,GAAeA,OAAf;AACA3B,IAAI,CAAC4B,IAAL,GAAYA,IAAZ;AACA5B,IAAI,CAAC6B,IAAL,GAAYA,IAAZ;AACA7B,IAAI,CAAC8B,QAAL,GAAgBA,QAAhB;AACA9B,IAAI,CAAC+B,SAAL,GAAiBA,SAAjB;AACA/B,IAAI,CAACgC,MAAL,GAAcA,MAAd;AACAhC,IAAI,CAACiC,UAAL,GAAkBA,UAAlB;;;;"}

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -25,14 +25,14 @@ var RadioGroupItem = /*#__PURE__*/forwardRef(function RadioGroupItem(props, ref)
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var disabled = context.disabled || props.disabled;
-  var className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {
+  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
     'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
     'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
     'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
   });
   var labelClassName = cn('flex items-center cursor-pointer', {
     'cursor-not-allowed text-grey-dark': disabled
-  });
+  }, props.className);
   return createElement("label", {
     className: labelClassName
   }, createElement(Item, Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | null;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n    React.ButtonHTMLAttributes<T>,\n    'children' | 'onSelect' | 'value'\n> & {\n    /** Label for the radio group item */\n    children: React.ReactNode;\n    /* Whether the radio group item is disabled */\n    disabled?: boolean;\n    /** Value of the radio button */\n    value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(RadioGroupContext);\n    const { children, value, ...otherProps } = props;\n\n    const disabled = context.disabled || props.disabled;\n\n    const className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {\n        'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n            !disabled && !context.invalid,\n        'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n        'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n            context.invalid && !disabled,\n    });\n    const labelClassName = cn('flex items-center cursor-pointer', {\n        'cursor-not-allowed text-grey-dark': disabled,\n    });\n\n    return (\n        <label className={labelClassName}>\n            <RadioGroupPrimitive.Item\n                {...otherProps}\n                className={className}\n                disabled={disabled}\n                ref={ref}\n                value={getRadioGroupItemValueAsString(value)}\n            >\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n            </RadioGroupPrimitive.Item>\n            {children}\n        </label>\n    );\n});\n\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: ReactGroupBaseChild[];\n    /* Whether the radio group is disabled */\n    disabled?: boolean;\n    /* Whether the radio group is in an invalid state */\n    invalid?: boolean;\n    /** The name of the radio group, used when submitting an HTML form */\n    name?: string;\n    /**\n     * Orientation of the radio group\n     * @defaultValue vertical\n     */\n    orientation?: Orientation;\n    /* Whether the radio group requires user input */\n    required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n    /* The default value (uncontrolled) */\n    defaultValue?: RadioGroupItemValue;\n    onChange?: never;\n    value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n    defaultValue?: never;\n    /** Handler called when the value changes */\n    onChange: (value: RadioGroupItemValue) => void;\n    /** The current value (controlled) */\n    value?: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Item component rendered in a `RadioGroup` component */\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n    const values = React.useMemo<RadioGroupItemValue[]>(() => {\n        const radioGroupItemValues: RadioGroupItemValue[] = [];\n\n        React.Children.forEach(children, child => {\n            if (React.isValidElement(child)) {\n                radioGroupItemValues.push(child.props.value);\n            }\n        });\n\n        return radioGroupItemValues;\n    }, [children]);\n\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n    let valueProps;\n\n    if (onChange !== undefined) {\n        const handleChange = (value: string): void => onChange(findByValue(values, value));\n\n        valueProps = {\n            onValueChange: handleChange,\n            value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\n        };\n    } else {\n        valueProps = {\n            defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\n        };\n    }\n\n    return {\n        context,\n        props: {\n            ...otherProps,\n            ...valueProps,\n            children,\n            orientation,\n        },\n    };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn(\n        'flex items-start',\n        {\n            'flex-wrap space-x-4': otherProps.orientation === 'horizontal',\n            'flex-col space-y-2': otherProps.orientation === 'vertical',\n        },\n        otherProps.className\n    );\n\n    return (\n        <RadioGroupContext.Provider value={context}>\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n        </RadioGroupContext.Provider>\n    );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | null;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => (value === null ? '' : String(value));\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n    React.ButtonHTMLAttributes<T>,\n    'children' | 'onSelect' | 'value'\n> & {\n    /** Label for the radio group item */\n    children: React.ReactNode;\n    /* Whether the radio group item is disabled */\n    disabled?: boolean;\n    /** Value of the radio button */\n    value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(RadioGroupContext);\n    const { children, value, ...otherProps } = props;\n\n    const disabled = context.disabled || props.disabled;\n\n    const className = cn(\n        'flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ',\n        {\n            'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue':\n                !disabled && !context.invalid,\n            'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,\n            'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n                context.invalid && !disabled,\n        }\n    );\n    const labelClassName = cn(\n        'flex items-center cursor-pointer',\n        {\n            'cursor-not-allowed text-grey-dark': disabled,\n        },\n        props.className\n    );\n\n    return (\n        <label className={labelClassName}>\n            <RadioGroupPrimitive.Item\n                {...otherProps}\n                className={className}\n                disabled={disabled}\n                ref={ref}\n                value={getRadioGroupItemValueAsString(value)}\n            >\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n            </RadioGroupPrimitive.Item>\n            {children}\n        </label>\n    );\n});\n\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: ReactGroupBaseChild[];\n    /* Whether the radio group is disabled */\n    disabled?: boolean;\n    /* Whether the radio group is in an invalid state */\n    invalid?: boolean;\n    /** The name of the radio group, used when submitting an HTML form */\n    name?: string;\n    /**\n     * Orientation of the radio group\n     * @defaultValue vertical\n     */\n    orientation?: Orientation;\n    /* Whether the radio group requires user input */\n    required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n    /* The default value (uncontrolled) */\n    defaultValue?: RadioGroupItemValue;\n    onChange?: never;\n    value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n    defaultValue?: never;\n    /** Handler called when the value changes */\n    onChange: (value: RadioGroupItemValue) => void;\n    /** The current value (controlled) */\n    value?: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Item component rendered in a `RadioGroup` component */\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n    const values = React.useMemo<RadioGroupItemValue[]>(() => {\n        const radioGroupItemValues: RadioGroupItemValue[] = [];\n\n        React.Children.forEach(children, child => {\n            if (React.isValidElement(child)) {\n                radioGroupItemValues.push(child.props.value);\n            }\n        });\n\n        return radioGroupItemValues;\n    }, [children]);\n\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n    let valueProps;\n\n    if (onChange !== undefined) {\n        const handleChange = (value: string): void => onChange(findByValue(values, value));\n\n        valueProps = {\n            onValueChange: handleChange,\n            value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\n        };\n    } else {\n        valueProps = {\n            defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\n        };\n    }\n\n    return {\n        context,\n        props: {\n            ...otherProps,\n            ...valueProps,\n            children,\n            orientation,\n        },\n    };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn(\n        'flex items-start',\n        {\n            'flex-wrap space-x-4': otherProps.orientation === 'horizontal',\n            'flex-col space-y-2': otherProps.orientation === 'vertical',\n        },\n        otherProps.className\n    );\n\n    return (\n        <RadioGroupContext.Provider value={context}>\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n        </RadioGroupContext.Provider>\n    );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}

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

@@ -76,7 +76,7 @@ var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
   }, props, {
     button: createElement(IconButton, {
       icon: "search",
-      className: "!border-transparent !bg-transparent",
+      className: "!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent",
       disabled: props.disabled,
       onClick: handleClick
     }),

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;AACLsB,IAAAA,IAAI,EAAC;IAbT,CADJ;AAiBH,CArC0B;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;AACLsB,IAAAA,IAAI,EAAC;IAbT,CADJ;AAiBH,CArC0B;;;;"}

package/dist/esm/components/Select/Select.js

@@ -32,7 +32,7 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
   var className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'text-left pr-0', {
+  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
   useEffect(function () {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        invalid: undefined,\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        invalid: undefined,\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}