@economic/taco 2.47.0-server.9 → 2.48.0

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

@@ -1,15 +1,14 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { Truncate } from '../Truncate/Truncate.js';
 
-var _excluded = ["noPadding"],
-  _excluded2 = ["title", "menu", "children", "className"];
-var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
-  var noPadding = externalProps.noPadding,
-    props = _objectWithoutPropertiesLoose(externalProps, _excluded);
-  var className = cn('flex-grow overflow-auto', {
+const Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
+  const {
+    noPadding,
+    ...props
+  } = externalProps;
+  const className = cn('flex-grow overflow-auto', {
     'mx-4 mb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/createElement("div", Object.assign({}, props, {
@@ -18,13 +17,15 @@ var Content = /*#__PURE__*/forwardRef(function CardContent(externalProps, ref) {
     ref: ref
   }));
 });
-var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
-  var title = props.title,
-    menu = props.menu,
-    children = props.children,
-    className = props.className,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-  var cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
+  const {
+    title,
+    menu,
+    children,
+    className,
+    ...otherProps
+  } = props;
+  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
   return /*#__PURE__*/createElement("div", Object.assign({}, otherProps, {
     className: cardClassName,
     "data-taco": "card",

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","_objectWithoutPropertiesLoose","_excluded","className","cn","Card","title","menu","children","otherProps","_excluded2","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;;;;AAWA,IAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,IAAQC,SAAS,GAAeF,aAAa,CAArCE,SAAS;IAAKC,KAAK,GAAAC,6BAAA,CAAKJ,aAAa,EAAAK,SAAA;EAC7C,IAAMC,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACL;GACjB,EACDC,KAAK,CAACG,SAAS,CAClB;EACD,oBAAOR,uCAASK,KAAK;IAAEG,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACL,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;IASWO,IAAI,gBAAGV,UAAgB,CAA4B,SAASU,IAAIA,CAACL,KAAK,EAAEF,GAAG;EACpF,IAAQQ,KAAK,GAA+CN,KAAK,CAAzDM,KAAK;IAAEC,IAAI,GAAyCP,KAAK,CAAlDO,IAAI;IAAEC,QAAQ,GAA+BR,KAAK,CAA5CQ,QAAQ;IAAEL,SAAS,GAAoBH,KAAK,CAAlCG,SAAS;IAAKM,UAAU,GAAAR,6BAAA,CAAKD,KAAK,EAAAU,UAAA;EACjE,IAAMC,aAAa,GAAGP,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIR,uCAASc,UAAU;IAAEN,SAAS,EAAEQ,aAAa;iBAAY,MAAM;IAACb,GAAG,EAAEA;mBACjEH;IAAKQ,SAAS,EAAC;KACVG,KAAK,kBACFX,cAACiB,QAAQ;IAACC,OAAO,EAAEP;kBACfX;IAAIQ,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGZ,cAACmB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACT,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACX,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const cardClassName = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        className\n    );\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex justify-between\">\n                {title && (\n                    <Truncate tooltip={title}>\n                        <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                    </Truncate>\n                )}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","otherProps","cardClassName","Truncate","tooltip","IconButton","icon","appearance"],"mappings":";;;;;AAWA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;iBAAY,cAAc;IAACH,GAAG,EAAEA;KAAO;AACtF,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEL,SAAS;IAAE,GAAGM;GAAY,GAAGP,KAAK;EACjE,MAAMQ,aAAa,GAAGN,EAAE,CACpB,kHAAkH,EAClHD,SAAS,CACZ;EAED,oBACIN,uCAASY,UAAU;IAAEN,SAAS,EAAEO,aAAa;iBAAY,MAAM;IAACV,GAAG,EAAEA;mBACjEH;IAAKM,SAAS,EAAC;KACVG,KAAK,kBACFT,cAACc,QAAQ;IAACC,OAAO,EAAEN;kBACfT;IAAIM,SAAS,EAAC;KAAqCG,KAAK,CAAM,CACvD,CACd,EACAC,IAAI,gBAAGV,cAACgB,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACR,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

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

@@ -1,22 +1,22 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { useId } from '../../hooks/useId.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
-var _excluded = ["checked", "indeterminate", "invalid", "label", "loading", "onChange"];
-var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  var checked = props.checked,
-    indeterminate = props.indeterminate,
-    invalid = props.invalid,
-    label = props.label,
-    loading = props.loading,
-    onChange = props.onChange,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var id = useId(props.id);
-  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  const {
+    checked,
+    indeterminate,
+    invalid,
+    label,
+    loading,
+    onChange,
+    ...otherProps
+  } = props;
+  const id = useId(props.id);
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
   }, invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
@@ -25,31 +25,29 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
     'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
-  var handleChange;
+  let handleChange;
   if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
-    };
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
-  var labelledByProps = null;
+  let labelledByProps = null;
   if (label) {
     labelledByProps = {
-      'aria-labelledby': id + "-label",
-      id: id
+      'aria-labelledby': `${id}-label`,
+      id
     };
   }
   // the enter keyboard shortcut isn't supported by default, but we want it
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (event.key === 'Enter') {
       event.currentTarget.click();
     }
   };
-  var spinnerClassname = cn(
+  const spinnerClassname = cn(
   //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
   "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
     'text-blue-500': !checked && !indeterminate
   });
-  var element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
+  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
     "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
@@ -66,7 +64,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   }))));
   if (label) {
-    var labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/createElement("span", {
@@ -74,7 +72,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
       "data-taco": "checkbox-container"
     }, element, /*#__PURE__*/createElement("label", {
       htmlFor: id,
-      id: id + "-label"
+      id: `${id}-label`
     }, label));
   }
   return element;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;;;IA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,IAAQC,OAAO,GAAsEF,KAAK,CAAlFE,OAAO;IAAEC,aAAa,GAAuDH,KAAK,CAAzEG,aAAa;IAAEC,OAAO,GAA8CJ,KAAK,CAA1DI,OAAO;IAAEC,KAAK,GAAuCL,KAAK,CAAjDK,KAAK;IAAEC,OAAO,GAA8BN,KAAK,CAA1CM,OAAO;IAAEC,QAAQ,GAAoBP,KAAK,CAAjCO,QAAQ;IAAKC,UAAU,GAAAC,6BAAA,CAAKT,KAAK,EAAAU,SAAA;EAC1F,IAAMC,EAAE,GAAGC,KAAK,CAACZ,KAAK,CAACW,EAAE,CAAC;EAE1B,IAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACT;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACe,QAAQ;IACnB,mFAAmF,EAAEf,KAAK,CAACe;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACf,KAAK,CAACe,QAAQ;IACnB,kFAAkF,EAAEf,KAAK,CAACe;GAC7F,EACPf,KAAK,CAACa,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIT,QAAQ,EAAE;IACVS,YAAY,GAAG,SAAAA,aAACd,OAAqB;MAAA,OAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;;EAGrG,IAAIe,eAAe,GAAkC,IAAI;EAEzD,IAAIZ,KAAK,EAAE;IACPY,eAAe,GAAG;MACd,iBAAiB,EAAKN,EAAE,WAAQ;MAChCA,EAAE,EAAFA;KACH;;;EAIL,IAAMO,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,IAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACZ,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,IAAMqB,OAAO,gBACTzB,cAAC0B,IAAsB,oBACfjB,UAAU,EACVS,eAAe;oBACLb,OAAO,GAAG,MAAM,GAAGsB,SAAS;iBAChC,UAAU;IACpBxB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDW,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBjB,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC8B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCxB,cAAC0B,SAA2B;IAACZ,SAAS,EAAC;kBACnCd,cAAC+B,IAAI;IAACC,IAAI,EAAE5B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEU,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIR,KAAK,EAAE;IACP,IAAM2B,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEd,KAAK,CAACe;KAC7C,CAAC;IAEF,oBACIhB;MAAMc,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRzB;MAAOkC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAKA,EAAE;OACxBN,KAAK,CACF,CACL;;EAIf,OAAOmB,OAAO;AAClB,CAAC;AACD1B,QAAQ,CAACoC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { Spinner } from '../Spinner/Spinner';\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /** Displays loading state in checkbox */\n    loading?: boolean;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.Ref<HTMLButtonElement>) {\n    const { checked, indeterminate, invalid, label, loading, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white',\n        {\n            'self-start': !!label,\n        },\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled,\n              },\n        props.className\n    );\n\n    let handleChange: ((checked: CheckedState) => void) | undefined;\n\n    if (onChange) {\n        handleChange = (checked: CheckedState) => onChange(checked === 'indeterminate' ? false : checked);\n    }\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            event.currentTarget.click();\n        }\n    };\n\n    const spinnerClassname = cn(\n        //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side\n        \"m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]\",\n        { 'text-blue-500': !checked && !indeterminate }\n    );\n\n    const element = (\n        <CheckboxPrimitive.Root\n            {...otherProps}\n            {...labelledByProps}\n            aria-invalid={invalid ? 'true' : undefined}\n            data-taco=\"checkbox\"\n            checked={indeterminate ? 'indeterminate' : checked}\n            className={className}\n            onCheckedChange={handleChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}>\n            {loading ? (\n                <Spinner className={spinnerClassname} />\n            ) : (\n                <CheckboxPrimitive.Indicator className=\"flex h-full w-full\">\n                    <Icon name={indeterminate ? 'line' : 'tick'} className=\"!h-full !w-full\" />\n                </CheckboxPrimitive.Indicator>\n            )}\n        </CheckboxPrimitive.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","props","ref","checked","indeterminate","invalid","label","loading","onChange","otherProps","id","useId","className","cn","disabled","handleChange","labelledByProps","handleKeyDown","event","key","currentTarget","click","spinnerClassname","element","CheckboxPrimitive","undefined","onCheckedChange","onKeyDown","Spinner","Icon","name","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;;;MA0CaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAiC;EAC9G,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC,OAAO;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC1F,MAAMS,EAAE,GAAGC,KAAK,CAACV,KAAK,CAACS,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,iIAAiI,EACjI;IACI,YAAY,EAAE,CAAC,CAACP;GACnB,EACDD,OAAO,GACD;IACI,qSAAqS,EACjS,CAACJ,KAAK,CAACa,QAAQ;IACnB,mFAAmF,EAAEb,KAAK,CAACa;GAC9F,GACD;IACI,+SAA+S,EAC3S,CAACb,KAAK,CAACa,QAAQ;IACnB,kFAAkF,EAAEb,KAAK,CAACa;GAC7F,EACPb,KAAK,CAACW,SAAS,CAClB;EAED,IAAIG,YAA2D;EAE/D,IAAIP,QAAQ,EAAE;IACVO,YAAY,GAAIZ,OAAqB,IAAKK,QAAQ,CAACL,OAAO,KAAK,eAAe,GAAG,KAAK,GAAGA,OAAO,CAAC;;EAGrG,IAAIa,eAAe,GAAkC,IAAI;EAEzD,IAAIV,KAAK,EAAE;IACPU,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGN,EAAE,QAAQ;MAChCA;KACH;;;EAIL,MAAMO,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBD,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,gBAAgB,GAAGT,EAAE;;EAEvB,6EAA6E,EAC7E;IAAE,eAAe,EAAE,CAACV,OAAO,IAAI,CAACC;GAAe,CAClD;EAED,MAAMmB,OAAO,gBACTvB,cAACwB,IAAsB,oBACff,UAAU,EACVO,eAAe;oBACLX,OAAO,GAAG,MAAM,GAAGoB,SAAS;iBAChC,UAAU;IACpBtB,OAAO,EAAEC,aAAa,GAAG,eAAe,GAAGD,OAAO;IAClDS,SAAS,EAAEA,SAAS;IACpBc,eAAe,EAAEX,YAAY;IAC7BY,SAAS,EAAEV,aAAa;IACxBf,GAAG,EAAEA;MACJK,OAAO,iBACJP,cAAC4B,OAAO;IAAChB,SAAS,EAAEU;IAAoB,kBAExCtB,cAACwB,SAA2B;IAACZ,SAAS,EAAC;kBACnCZ,cAAC6B,IAAI;IAACC,IAAI,EAAE1B,aAAa,GAAG,MAAM,GAAG,MAAM;IAAEQ,SAAS,EAAC;IAAoB,CACjD,CACjC,CAER;EAED,IAAIN,KAAK,EAAE;IACP,MAAMyB,uBAAuB,GAAGlB,EAAE,CAAC,wCAAwC,EAAE;MACzE,kCAAkC,EAAEZ,KAAK,CAACa;KAC7C,CAAC;IAEF,oBACId;MAAMY,SAAS,EAAEmB,uBAAuB;mBAAY;OAC/CR,OAAO,eACRvB;MAAOgC,OAAO,EAAEtB,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBJ,KAAK,CACF,CACL;;EAIf,OAAOiB,OAAO;AAClB,CAAC;AACDxB,QAAQ,CAACkC,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,6 +1,5 @@
 import { forwardRef, useRef, createElement } from 'react';
 import cn from 'clsx';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Root, Anchor, Portal, Content } from '@radix-ui/react-popover';
@@ -9,23 +8,26 @@ import { Input } from '../Input/Input.js';
 import { ScrollableList } from '../Listbox/ScrollableList.js';
 import { useCombobox } from './useCombobox.js';
 
-var _excluded = ["className", "dialog", "style"];
-var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
-  var externalClassName = props.className,
-    dialog = props.dialog,
-    style = props.style,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCombobox = useCombobox(otherProps, ref),
-    combobox = _useCombobox.combobox,
-    button = _useCombobox.button,
-    input = _useCombobox.input,
-    popover = _useCombobox.popover,
-    list = _useCombobox.list;
-  var internalRef = useRef(null);
-  var _useLocalization = useLocalization(),
-    texts = _useLocalization.texts;
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative', {
+const Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
+  const {
+    className: externalClassName,
+    dialog,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    combobox,
+    button,
+    input,
+    popover,
+    list
+  } = useCombobox(otherProps, ref);
+  const internalRef = useRef(null);
+  const {
+    texts
+  } = useLocalization();
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return /*#__PURE__*/createElement("span", {
@@ -48,7 +50,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
-      onClick: function onClick() {
+      onClick: () => {
         var _input$ref$current;
         popover.onOpenChange(true);
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
@@ -59,7 +61,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: function onFocus(event) {
+      onFocus: event => {
         var _input$ref$current2;
         // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
         event.preventDefault();
@@ -71,7 +73,7 @@ var Combobox = /*#__PURE__*/forwardRef(function Combobox(props, ref) {
     })) : undefined
   })))), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, {
     align: "start",
-    onOpenAutoFocus: function onOpenAutoFocus(event) {
+    onOpenAutoFocus: event => {
       event.preventDefault();
     },
     sideOffset: 4

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.readOnly ? undefined : props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","externalClassName","className","dialog","style","otherProps","_objectWithoutPropertiesLoose","_excluded","_useCombobox","useCombobox","combobox","button","input","popover","list","internalRef","_useLocalization","useLocalization","texts","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;;;IA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,IAAmBC,iBAAiB,GAAmCF,KAAK,CAApEG,SAAS;IAAqBC,MAAM,GAA2BJ,KAAK,CAAtCI,MAAM;IAAEC,KAAK,GAAoBL,KAAK,CAA9BK,KAAK;IAAKC,UAAU,GAAAC,6BAAA,CAAKP,KAAK,EAAAQ,SAAA;EAC5E,IAAAC,YAAA,GAAmDC,WAAW,CAACJ,UAAU,EAAEL,GAAG,CAAC;IAAvEU,QAAQ,GAAAF,YAAA,CAARE,QAAQ;IAAEC,MAAM,GAAAH,YAAA,CAANG,MAAM;IAAEC,KAAK,GAAAJ,YAAA,CAALI,KAAK;IAAEC,OAAO,GAAAL,YAAA,CAAPK,OAAO;IAAEC,IAAI,GAAAN,YAAA,CAAJM,IAAI;EAC9C,IAAMC,WAAW,GAAGjB,MAAY,CAAiB,IAAI,CAAC;EACtD,IAAAkB,gBAAA,GAAkBC,eAAe,EAAE;IAA3BC,KAAK,GAAAF,gBAAA,CAALE,KAAK;EACb,IAAMC,gBAAgB,GAAGC,6BAA6B,CAACL,WAAW,CAAC;EACnE,IAAMb,SAAS,GAAGmB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAEtB,KAAK,CAACuB;GAChC,EACDrB,iBAAiB,CACpB;EAED,oBACIH;IAAMI,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACE,KAAK,EAAEA;kBACpDN,cAACyB,IAAqB,oBAAKV,OAAO,gBAC9Bf,cAACyB,MAAuB;IAACC,OAAO;IAACxB,GAAG,EAAEe;kBAClCjB,uCAASY,QAAQ;IAAER,SAAS,EAAC,eAAe;IAACF,GAAG,EAAEA;mBAC9CF,cAAC2B,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFZ,KAAK,CAAC4B,QAAQ,GAAGC,SAAS,GAAG7B,KAAK,CAACuB,MAAM,iBACrCxB,cAAC+B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrB5B,SAAS,EAAC,uEAAuE;MACjF6B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAE,SAAAA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACZ,GAAG,CAACoC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACFnC,MAAM,iBACNL,cAAC+B,UAAU;oBACKX,KAAK,CAACR,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAEzC,KAAK,CAAC4B,QAAQ,IAAI5B,KAAK,CAACyC,QAAQ;MAC1CrC,MAAM,EAAEA,MAAM;MACdsC,OAAO,EAAE,SAAAA,QAACC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACZ,GAAG,CAACoC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDrC,GAAG,EAAEW,MAAM,CAACX,GAAG;MACfsC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAErB,KAAK,CAACR,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B9B,cAACyB,MAAuB,qBACpBzB,cAACyB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAE,SAAAA,gBAAAJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZjD,cAACkD,cAAc,oBACPlC,IAAI;IACRZ,SAAS,EAAEmB,EAAE,CAAC,2EAA2E,CAAC;IAC1FjB,KAAK,EAAE;MAAE6C,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../../../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { IconButton } from '../IconButton/IconButton';\nimport './Combobox.css';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, ref);\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <span className={className} data-taco=\"combobox\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Anchor asChild ref={internalRef}>\n                    <div {...combobox} className=\"inline w-full\" ref={ref}>\n                        <Input\n                            {...input}\n                            autoComplete=\"off\"\n                            button={\n                                props.readOnly ? undefined : props.inline ? (\n                                    <IconButton\n                                        // In case of inline combobox, this icon button acts only as visual chevron representation,\n                                        // so should be taken out of screen reader scope.\n                                        aria-hidden\n                                        appearance=\"discrete\"\n                                        className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                                        icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                                        onClick={() => {\n                                            popover.onOpenChange(true);\n                                            input.ref.current?.focus();\n                                        }}\n                                        tabIndex={-1}\n                                    />\n                                ) : dialog ? (\n                                    <IconButton\n                                        aria-label={texts.combobox.tooltip}\n                                        icon=\"list-search\"\n                                        disabled={props.readOnly || props.disabled}\n                                        dialog={dialog}\n                                        onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                            // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                            event.preventDefault();\n                                            input.ref.current?.focus();\n                                        }}\n                                        ref={button.ref}\n                                        tabIndex={-1}\n                                        tooltip={texts.combobox.tooltip}\n                                    />\n                                ) : undefined\n                            }\n                        />\n                    </div>\n                </PopoverPrimitive.Anchor>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                        }}\n                        sideOffset={4}>\n                        <ScrollableList\n                            {...list}\n                            className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                            style={{ minWidth: selectDimensions?.width }}\n                            tabIndex={popover.open ? 0 : -1}\n                        />\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n"],"names":["Combobox","React","props","ref","className","externalClassName","dialog","style","otherProps","combobox","button","input","popover","list","useCombobox","internalRef","texts","useLocalization","selectDimensions","useBoundingClientRectListener","cn","inline","PopoverPrimitive","asChild","Input","autoComplete","readOnly","undefined","IconButton","appearance","icon","open","onClick","onOpenChange","_input$ref$current","current","focus","tabIndex","tooltip","disabled","onFocus","event","preventDefault","_input$ref$current2","align","onOpenAutoFocus","sideOffset","ScrollableList","minWidth","width"],"mappings":";;;;;;;;;;MA+DaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAgC;EAC7G,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAM;IAAEO,QAAQ;IAAEC,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAM,GAAGC,WAAW,CAACN,UAAU,EAAEL,GAAG,CAAC;EAC/E,MAAMY,WAAW,GAAGd,MAAY,CAAiB,IAAI,CAAC;EACtD,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,gBAAgB,GAAGC,6BAA6B,CAACJ,WAAW,CAAC;EACnE,MAAMX,SAAS,GAAGgB,EAAE,CAChB,sBAAsB,EACtB;IACI,qBAAqB,EAAElB,KAAK,CAACmB;GAChC,EACDhB,iBAAiB,CACpB;EAED,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,UAAU;IAACG,KAAK,EAAEA;kBACpDN,cAACqB,IAAqB,oBAAKV,OAAO,gBAC9BX,cAACqB,MAAuB;IAACC,OAAO;IAACpB,GAAG,EAAEY;kBAClCd,uCAASQ,QAAQ;IAAEL,SAAS,EAAC,eAAe;IAACD,GAAG,EAAEA;mBAC9CF,cAACuB,KAAK,oBACEb,KAAK;IACTc,YAAY,EAAC,KAAK;IAClBf,MAAM,EACFR,KAAK,CAACwB,QAAQ,GAAGC,SAAS,GAAGzB,KAAK,CAACmB,MAAM,iBACrCpB,cAAC2B;;;;;MAIGC,UAAU,EAAC,UAAU;MACrBzB,SAAS,EAAC,uEAAuE;MACjF0B,IAAI,EAAElB,OAAO,CAACmB,IAAI,GAAG,YAAY,GAAG,cAAc;MAClDC,OAAO,EAAEA;;QACLpB,OAAO,CAACqB,YAAY,CAAC,IAAI,CAAC;QAC1B,CAAAC,kBAAA,GAAAvB,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;OAC7B;MACDC,QAAQ,EAAE,CAAC;MACb,IACF/B,MAAM,iBACNL,cAAC2B,UAAU;oBACKZ,KAAK,CAACP,QAAQ,CAAC6B,OAAO;MAClCR,IAAI,EAAC,aAAa;MAClBS,QAAQ,EAAErC,KAAK,CAACwB,QAAQ,IAAIxB,KAAK,CAACqC,QAAQ;MAC1CjC,MAAM,EAAEA,MAAM;MACdkC,OAAO,EAAGC,KAA0C;;;QAEhDA,KAAK,CAACC,cAAc,EAAE;QACtB,CAAAC,mBAAA,GAAAhC,KAAK,CAACR,GAAG,CAACgC,OAAO,cAAAQ,mBAAA,uBAAjBA,mBAAA,CAAmBP,KAAK,EAAE;OAC7B;MACDjC,GAAG,EAAEO,MAAM,CAACP,GAAG;MACfkC,QAAQ,EAAE,CAAC,CAAC;MACZC,OAAO,EAAEtB,KAAK,CAACP,QAAQ,CAAC6B;MAC1B,IACFX;KAEV,CACA,CACgB,eAC1B1B,cAACqB,MAAuB,qBACpBrB,cAACqB,OAAwB;IACrBsB,KAAK,EAAC,OAAO;IACbC,eAAe,EAAEJ,KAAK;MAClBA,KAAK,CAACC,cAAc,EAAE;KACzB;IACDI,UAAU,EAAE;kBACZ7C,cAAC8C,cAAc,oBACPlC,IAAI;IACRT,SAAS,EAAEgB,EAAE,CAAC,2EAA2E,CAAC;IAC1Fb,KAAK,EAAE;MAAEyC,QAAQ,EAAE9B,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAE+B;KAAO;IAC5CZ,QAAQ,EAAEzB,OAAO,CAACmB,IAAI,GAAG,CAAC,GAAG,CAAC;KAChC,CACqB,CACL,CACN,CACrB;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -1,5 +1,4 @@
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { isElementInsideTable3OrReport } from '../../utils/dom.js';
 import { v4 } from 'uuid';
@@ -8,61 +7,49 @@ import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
 import { useFlattenedData, filterData, getIndexFromValue, setInputValueByRef, findByValue, sanitizeItem, getOptionParents } from '../Listbox/util.js';
 
-var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
-var debouncer = /*#__PURE__*/debounce(function (f) {
-  return f();
-}, 200);
-var convertToInputValue = function convertToInputValue(value) {
-  return String(value !== null && value !== void 0 ? value : '');
-};
-var useCombobox = function useCombobox(_ref, ref) {
-  var ariaLabelledBy = _ref['aria-labelledby'],
-    _ref$data = _ref.data,
-    unfilteredData = _ref$data === void 0 ? [] : _ref$data,
-    defaultValue = _ref.defaultValue,
-    disabled = _ref.disabled,
-    inline = _ref.inline,
-    onChange = _ref.onChange,
-    onClick = _ref.onClick,
-    onKeyDown = _ref.onKeyDown,
-    onSearch = _ref.onSearch,
-    readOnly = _ref.readOnly,
-    value = _ref.value,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var inputRef = useMergedRef(ref);
-  var buttonRef = useRef(null);
-  var listRef = useRef(null);
-  var _React$useState = useState(false),
-    open = _React$useState[0],
-    setOpen = _React$useState[1];
-  var listId = useMemo(function () {
-    return v4();
-  }, []);
-  var _React$useState2 = useState(convertToInputValue(value)),
-    inputValue = _React$useState2[0],
-    setInputValue = _React$useState2[1];
-  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
-  var flattenedData = useFlattenedData(unfilteredData);
-  var data = useMemo(function () {
-    return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
-  }, [shouldFilterData, inputValue, flattenedData]);
+const debouncer = /*#__PURE__*/debounce(f => f(), 200);
+const convertToInputValue = value => String(value !== null && value !== void 0 ? value : '');
+const useCombobox = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  data: unfilteredData = [],
+  defaultValue,
+  disabled,
+  id: nativeId,
+  inline,
+  loading: __,
+  onChange,
+  onClick,
+  onKeyDown,
+  onSearch,
+  readOnly,
+  value,
+  ...props
+}, ref) => {
+  const inputRef = useMergedRef(ref);
+  const buttonRef = useRef(null);
+  const listRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const listId = useMemo(() => v4(), []);
+  const [inputValue, setInputValue] = useState(convertToInputValue(value));
+  const shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
+  const flattenedData = useFlattenedData(unfilteredData);
+  const data = useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
-  var _React$useState3 = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
-    currentIndex = _React$useState3[0],
-    setCurrentIndex = _React$useState3[1];
-  var setInputValueByIndex = function setInputValueByIndex(index) {
+  const [currentIndex, setCurrentIndex] = useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
+  const setInputValueByIndex = index => {
     if (index !== undefined) {
-      var option = data[index];
+      const option = data[index];
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value, 'focusout');
       }
     }
   };
-  var setCurrentValue = function setCurrentValue(index) {
+  const setCurrentValue = index => {
     if (index === undefined) {
       return;
     }
-    var option = data[index];
+    const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
       setInputValueByIndex(index);
@@ -72,29 +59,29 @@ var useCombobox = function useCombobox(_ref, ref) {
     }
   };
   // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set
-  useEffect(function () {
+  useEffect(() => {
     if (defaultValue && !value) {
       setInputValueByIndex(getIndexFromValue(data, defaultValue));
     }
   }, [data]);
   // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
-  useEffect(function () {
+  useEffect(() => {
     if (value !== undefined && value !== inputValue) {
       setInputValue(convertToInputValue(value));
     }
   }, [value]);
-  useEffect(function () {
+  useEffect(() => {
     if (onSearch) {
-      debouncer(function () {
+      debouncer(() => {
         onSearch(inputValue);
       });
     }
   }, [inputValue]);
   // show listbox based on input value
-  useEffect(function () {
+  useEffect(() => {
     // don't show the popover if the internal (input) value already is the current value
     // this prevents the popover showing after selecting a value or pressing escape
-    var isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
+    const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);
     if (inputValue && data.length && !isCurrentValue) {
       setCurrentIndex(0);
       if (!open) {
@@ -104,7 +91,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       setOpen(false);
     }
   }, [inputValue, data]);
-  useEffect(function () {
+  useEffect(() => {
     if (open) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
     } else {
@@ -112,7 +99,7 @@ var useCombobox = function useCombobox(_ref, ref) {
     }
   }, [open]);
   // event handlers
-  var handleInputBlur = function handleInputBlur(event) {
+  const handleInputBlur = event => {
     event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
@@ -120,9 +107,9 @@ var useCombobox = function useCombobox(_ref, ref) {
     }
     // event.target.value is always a string so it is important to cast value to a string before checking the equality
     if (onChange && event.target.value !== String(value)) {
-      var item = findByValue(flattenedData, event.target.value);
+      const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
-      var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
+      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
       }
@@ -132,10 +119,10 @@ var useCombobox = function useCombobox(_ref, ref) {
       props.onBlur(event);
     }
   };
-  var handleInputChange = function handleInputChange(event) {
+  const handleInputChange = event => {
     setInputValue(event.target.value);
   };
-  var handleInputClick = function handleInputClick(event) {
+  const handleInputClick = event => {
     if (inline || !open && inputValue && data.length) {
       setOpen(true);
     }
@@ -144,7 +131,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       onClick(event);
     }
   };
-  var handleInputKeyDown = function handleInputKeyDown(event) {
+  const handleInputKeyDown = event => {
     event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
@@ -207,7 +194,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       if (inline && !open) {
         if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
           event.preventDefault();
-          var initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
+          const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
           setOpen(true);
         }
@@ -218,21 +205,22 @@ var useCombobox = function useCombobox(_ref, ref) {
       onKeyDown(event);
     }
   };
-  var handleListboxChange = function handleListboxChange(index) {
+  const handleListboxChange = index => {
     setCurrentIndex(index);
   };
-  var handleListboxClick = function handleListboxClick(event, index) {
+  const handleListboxClick = (event, index) => {
     event.preventDefault();
     setCurrentValue(index);
     setOpen(false);
   };
-  var combobox = {
+  const combobox = {
     'aria-expanded': open,
     'aria-owns': listId,
     'aria-haspopup': 'listbox',
     role: 'combobox'
   };
-  var input = _extends({}, props, {
+  const input = {
+    ...props,
     'aria-controls': listId,
     // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions
     // are related to the string that is present in the textbox
@@ -240,20 +228,20 @@ var useCombobox = function useCombobox(_ref, ref) {
     // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element
     'aria-activedescendant': currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,
     'aria-labelledby': ariaLabelledBy,
-    disabled: disabled,
+    disabled,
     onBlur: !disabled && !readOnly ? handleInputBlur : undefined,
     onChange: !disabled && !readOnly ? handleInputChange : undefined,
     onClick: !disabled && !readOnly ? handleInputClick : undefined,
     onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,
-    readOnly: readOnly,
+    readOnly,
     ref: inputRef,
     type: 'text',
     value: inputValue !== null && inputValue !== void 0 ? inputValue : ''
-  });
-  var list = {
+  };
+  const list = {
     'aria-labelledby': ariaLabelledBy,
-    data: data,
-    disabled: disabled,
+    data,
+    disabled,
     id: listId,
     onChange: handleListboxChange,
     onClick: handleListboxClick,
@@ -262,16 +250,16 @@ var useCombobox = function useCombobox(_ref, ref) {
     tabIndex: -1,
     value: currentIndex
   };
-  var button = {
+  const button = {
     ref: buttonRef
   };
   return {
-    combobox: combobox,
-    input: input,
-    list: list,
-    button: button,
+    combobox,
+    input,
+    list,
+    button,
     popover: {
-      open: open,
+      open,
       onOpenChange: setOpen
     }
   };