@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.108

package/dist/esm/components/Icon/Icon.js

@@ -1,20 +1,19 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cn from 'classnames';
 import { icons } from './components/index.js';
 export { icons } from './components/index.js';
 
-var _excluded = ["name"];
-var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  var name = props.name,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var Component = icons[name];
+  const {
+    name,
+    ...otherProps
+  } = props;
+  const Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  var className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
+  const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\n    ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;;;IAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;EACjC,IAAQC,IAAR,GAAgCF,KAAhC,CAAQE,IAAR;MAAiBC,UAAjB,iCAAgCH,KAAhC;;EACA,IAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;;;EAEA,IAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDP,KAAK,CAACM,SAA5D,EAAuE;IACvF,+BAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;GADK,CAApB;EAIA,OAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;IAAYG,SAAS,EAAEA;iBAAqB;IAAOG,SAAS,EAAC;IAAQR,GAAG,EAAEA;IAAKS,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\n    ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;EACjC,MAAM;IAAEC,IAAF;IAAQ,GAAGC;MAAeH,KAAhC;EACA,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;;;EAEA,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDP,KAAK,CAACM,SAA5D,EAAuE;IACvF,+BAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;GADK,CAApB;EAIA,OAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;IAAYG,SAAS,EAAEA;iBAAqB;IAAOG,SAAS,EAAC;IAAQR,GAAG,EAAEA;IAAKS,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}

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

@@ -1,17 +1,15 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
 
-var _excluded = ["icon", "rounded"];
-var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
-  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(otherProps.appearance, true), {
+const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
+  const {
+    icon,
+    rounded = false,
+    ...otherProps
+  } = props;
+  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -22,13 +20,13 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton(_extends({}, otherProps, {
+  return createButton({ ...otherProps,
     children: createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
     }),
     'data-taco': 'icon-button'
-  }), className, ref);
+  }, className, ref);
 });
 
 export { IconButton };

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 { 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;EACvC,IAAQC,IAAR,GAAiDF,KAAjD,CAAQE,IAAR;uBAAiDF,KAAjD,CAAcG,OAAd;MAAcA,OAAd,+BAAwB,KAAxB;MAAkCC,UAAlC,iCAAiDJ,KAAjD;;EAEA,IAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;IACI,gBAAgBN,OADpB;IAEIA,OAAO,EAAE,CAACA,OAFd;IAGI,iCAAiCH,KAAK,CAACU,QAH3C;IAII,wCAAwC,CAACV,KAAK,CAACU;GARnC,EAUhBV,KAAK,CAACK,SAVU,CAApB;;EAaA,IAAI,CAACH,IAAL,EAAW;IACP,OAAO,IAAP;;;EAGJ,OAAOS,YAAY,cACVP,UADU;IACEQ,QAAQ,EAAEb,aAAA,CAACc,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CADZ;IACsD,aAAa;MAClFA,SAFe,EAGfJ,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":";;;;;MAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,MAAM;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyB,GAAGC;MAAeJ,KAAjD;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;IACI,gBAAgBN,OADpB;IAEIA,OAAO,EAAE,CAACA,OAFd;IAGI,iCAAiCH,KAAK,CAACU,QAH3C;IAII,wCAAwC,CAACV,KAAK,CAACU;GARnC,EAUhBV,KAAK,CAACK,SAVU,CAApB;;EAaA,IAAI,CAACH,IAAL,EAAW;IACP,OAAO,IAAP;;;EAGJ,OAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;IAAiBQ,QAAQ,EAAEb,aAAA,CAACc,IAAD;MAAMC,IAAI,EAAEZ;MAAMG,SAAS,EAAC;KAA5B,CAA3B;IAAqE,aAAa;GADnE,EAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}

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

@@ -1,25 +1,25 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useEffect, createElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { getInputClasses, getButtonStateClasses } from './util.js';
 
-var _excluded = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
-var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
-  var button = props.button,
-      icon = props.icon,
-      invalid = props.invalid,
-      onKeyDown = props.onKeyDown,
-      autoFocus = props.autoFocus,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var inputRef = useProxiedRef(ref);
-  var hasContainer = button || icon;
-  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
+const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
+  const {
+    button,
+    icon,
+    highlighted,
+    invalid,
+    onKeyDown,
+    autoFocus,
+    ...otherProps
+  } = props;
+  const inputRef = useProxiedRef(ref);
+  const hasContainer = button || icon;
+  const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
     'pr-8': !!hasContainer
   }, !hasContainer && otherProps.className);
-  useEffect(function () {
+  useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -27,10 +27,10 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
     }
 
@@ -39,7 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     }
   };
 
-  var input = createElement("input", Object.assign({}, otherProps, {
+  const input = createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -47,19 +47,19 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   }));
 
   if (hasContainer) {
-    var extra;
+    let extra;
 
     if (button) {
-      var _cn;
-
-      var disabled = button.props.disabled || otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
+      const disabled = button.props.disabled || otherProps.disabled;
+      const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
+        [getButtonStateClasses(invalid)]: !props.disabled
+      }, button.props.className);
       extra = cloneElement(button, {
         className: buttonClassName,
-        disabled: disabled
+        disabled
       });
     } else if (icon) {
-      var iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
+      const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
         'text-grey-dark': props.disabled,
         'text-grey-darkest': !props.disabled
       });
@@ -71,7 +71,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
       });
     }
 
-    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
     return createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"

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    /* 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.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        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","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;;;IAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;MAC1BC,MAAR,GAAoFF,KAApF,CAAQE,MAAR;MAAgBC,IAAhB,GAAoFH,KAApF,CAAgBG,IAAhB;MAAmCC,OAAnC,GAAoFJ,KAApF,CAAmCI,OAAnC;MAA4CC,SAA5C,GAAoFL,KAApF,CAA4CK,SAA5C;MAAuDC,SAAvD,GAAoFN,KAApF,CAAuDM,SAAvD;MAAqEC,UAArE,iCAAoFP,KAApF;;EACA,IAAMQ,QAAQ,GAAGC,aAAa,CAAmBR,GAAnB,CAA9B;EACA,IAAMS,YAAY,GAAGR,MAAM,IAAIC,IAA/B;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACb,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACU;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAZ,SAAA,CAAgB;IACZ,IAAIO,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,IAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,IAAMS,KAAK,GAAG3B,aAAA,QAAA,oBAAWQ;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAef,GAAG,EAAEO;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAIzB,MAAJ,EAAY;MAAA;;MACR,IAAM0B,QAAQ,GAAG1B,MAAM,CAACF,KAAP,CAAa4B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,IAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,iBAGjBkB,qBAAqB,CAAC1B,OAAD,CAHJ,IAGgB,CAACJ,KAAK,CAAC4B,QAHvB,QAKtB1B,MAAM,CAACF,KAAP,CAAaW,SALS,CAA1B;MAOAgB,KAAK,GAAG5B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BS,SAAS,EAAEkB,eADoB;QAE/BD,QAAQ,EAARA;OAFI,CAAR;KATJ,MAaO,IAAIzB,IAAJ,EAAU;MACb,IAAM4B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBZ,KAAK,CAAC4B,QAD5B;QAEI,qBAAqB,CAAC5B,KAAK,CAAC4B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOxB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACiC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE9B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAEQ,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB5B,IAAI,CAACH,KAAL,CAAWW,SAA3B;OAAxC,CAJR;;;IAQJ,IAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIZ,aAAA,MAAA;MAAKY,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}
+{"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.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n        }\n\n        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","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;MAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,WAAhB;IAA6BC,OAA7B;IAAsCC,SAAtC;IAAiDC,SAAjD;IAA4D,GAAGC;MAAeR,KAApF;EACA,MAAMS,QAAQ,GAAGC,aAAa,CAAmBT,GAAnB,CAA9B;EACA,MAAMU,YAAY,GAAGT,MAAM,IAAIC,IAA/B;EACA,MAAMS,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACd,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACW;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAb,SAAA,CAAgB;IACZ,IAAIQ,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,MAAMS,KAAK,GAAG5B,aAAA,QAAA,oBAAWS;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAehB,GAAG,EAAEQ;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAI1B,MAAJ,EAAY;MACR,MAAM2B,QAAQ,GAAG3B,MAAM,CAACF,KAAP,CAAa6B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,MAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,EAEtB;QACI,CAACkB,qBAAqB,CAAC1B,OAAD,CAAtB,GAAkC,CAACL,KAAK,CAAC6B;OAHvB,EAKtB3B,MAAM,CAACF,KAAP,CAAaY,SALS,CAA1B;MAOAgB,KAAK,GAAG7B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BU,SAAS,EAAEkB,eADoB;QAE/BD;OAFI,CAAR;KATJ,MAaO,IAAI1B,IAAJ,EAAU;MACb,MAAM6B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBb,KAAK,CAAC6B,QAD5B;QAEI,qBAAqB,CAAC7B,KAAK,CAAC6B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOzB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACkC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE/B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAES,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB7B,IAAI,CAACH,KAAL,CAAWY,SAA3B;OAAxC,CAJR;;;IAQJ,MAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIb,aAAA,MAAA;MAAKa,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","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;EACpC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,kBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;MAAQK,IAAR,eAAQA,IAAR;MAAcC,KAAd,eAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eAAOJ,IAAI,CAACI,KAAZ;MAAmBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,uBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;MAAQK,IAAR,oBAAQA,IAAR;MAAcC,KAAd,oBAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eACEJ,IAAI,CAACI,KADP;MAEDC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,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","className","externalClassName","otherProps","list","input","useListbox","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;MAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;MAAiBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;MAEHC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useMemo, createElement } from 'react';
 import { MenuContext } from './Context.js';
 import { Root } from '@radix-ui/react-dropdown-menu';
@@ -11,39 +10,22 @@ import { RadioGroup } from './components/RadioGroup.js';
 import { Separator } from './components/Separator.js';
 import { Header } from './components/Header.js';
 
-var _excluded = ["children", "trigger"];
-var Menu = function Menu(externalProps) {
-  var children = externalProps.children,
-      trigger = externalProps.trigger,
-      props = _objectWithoutPropertiesLoose(externalProps, _excluded);
-
-  var _React$useState = useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
-
-  var _React$useState2 = useState(false),
-      indented = _React$useState2[0],
-      setIndented = _React$useState2[1];
-
-  var _React$useState3 = useState(undefined),
-      minWidth = _React$useState3[0],
-      _setMinWidth = _React$useState3[1];
-
-  var context = useMemo(function () {
-    return {
-      indented: indented,
-      registerIndentation: function registerIndentation() {
-        return setIndented(true);
-      },
-      minWidth: minWidth,
-      setMinWidth: function setMinWidth(width) {
-        return _setMinWidth(width);
-      },
-      close: function close() {
-        return setOpen(false);
-      }
-    };
-  }, [indented, minWidth]);
+const Menu = externalProps => {
+  const {
+    children,
+    trigger,
+    ...props
+  } = externalProps;
+  const [open, setOpen] = useState(false);
+  const [indented, setIndented] = useState(false);
+  const [minWidth, setMinWidth] = useState(undefined);
+  const context = useMemo(() => ({
+    indented,
+    registerIndentation: () => setIndented(true),
+    minWidth,
+    setMinWidth: width => setMinWidth(width),
+    close: () => setOpen(false)
+  }), [indented, minWidth]);
   return createElement(MenuContext.Provider, {
     value: context
   }, createElement(Root, Object.assign({}, props, {

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';\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 [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth]\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","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAmBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;EAChB,IAAQC,QAAR,GAAwCD,aAAxC,CAAQC,QAAR;MAAkBC,OAAlB,GAAwCF,aAAxC,CAAkBE,OAAlB;MAA8BC,KAA9B,iCAAwCH,aAAxC;;EACA,sBAAwBI,QAAA,CAAe,KAAf,CAAxB;MAAOC,IAAP;MAAaC,OAAb;;EACA,uBAAgCF,QAAA,CAAe,KAAf,CAAhC;MAAOG,QAAP;MAAiBC,WAAjB;;EACA,uBAAgCJ,QAAA,CAAmCK,SAAnC,CAAhC;MAAOC,QAAP;MAAiBC,YAAjB;;EAEA,IAAMC,OAAO,GAAGR,OAAA,CACZ;IAAA,OAAO;MACHG,QAAQ,EAARA,QADG;MAEHM,mBAAmB,EAAE;QAAA,OAAML,WAAW,CAAC,IAAD,CAAjB;OAFlB;MAGHE,QAAQ,EAARA,QAHG;MAIHC,WAAW,EAAE,qBAACG,KAAD;QAAA,OAAmBH,YAAW,CAACG,KAAD,CAA9B;OAJV;MAKHC,KAAK,EAAE;QAAA,OAAMT,OAAO,CAAC,KAAD,CAAb;;KALX;GADY,EAQZ,CAACC,QAAD,EAAWG,QAAX,CARY,CAAhB;EAWA,OACIN,aAAA,CAACY,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIR,aAAA,CAACe,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOf,IAAI,EAAEA;IAAMgB,YAAY,EAAEf;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACkB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,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';\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 [indented, setIndented] = React.useState(false);\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\n\n    const context = React.useMemo(\n        () => ({\n            indented,\n            registerIndentation: () => setIndented(true),\n            minWidth,\n            setMinWidth: (width: number) => setMinWidth(width),\n            close: () => setOpen(false),\n        }),\n        [indented, minWidth]\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","open","setOpen","React","indented","setIndented","minWidth","setMinWidth","undefined","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;MAmBaA,IAAI,GAAIC,aAAD;EAChB,MAAM;IAAEC,QAAF;IAAYC,OAAZ;IAAqB,GAAGC;MAAUH,aAAxC;EACA,MAAM,CAACI,IAAD,EAAOC,OAAP,IAAkBC,QAAA,CAAe,KAAf,CAAxB;EACA,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BF,QAAA,CAAe,KAAf,CAAhC;EACA,MAAM,CAACG,QAAD,EAAWC,WAAX,IAA0BJ,QAAA,CAAmCK,SAAnC,CAAhC;EAEA,MAAMC,OAAO,GAAGN,OAAA,CACZ,OAAO;IACHC,QADG;IAEHM,mBAAmB,EAAE,MAAML,WAAW,CAAC,IAAD,CAFnC;IAGHC,QAHG;IAIHC,WAAW,EAAGI,KAAD,IAAmBJ,WAAW,CAACI,KAAD,CAJxC;IAKHC,KAAK,EAAE,MAAMV,OAAO,CAAC,KAAD;GALxB,CADY,EAQZ,CAACE,QAAD,EAAWE,QAAX,CARY,CAAhB;EAWA,OACIH,aAAA,CAACU,WAAW,CAACC,QAAb;IAAsBC,KAAK,EAAEN;GAA7B,EACIN,aAAA,CAACa,IAAD,oBAAgChB;IAAOiB,KAAK,EAAE;IAAOhB,IAAI,EAAEA;IAAMiB,YAAY,EAAEhB;IAA/E,EACKH,OAAO,IAAII,aAAA,CAACgB,OAAD,MAAA,EAAUpB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDF,IAAI,CAACuB,OAAL,GAAeA,OAAf;AACAvB,IAAI,CAACwB,OAAL,GAAeA,OAAf;AACAxB,IAAI,CAACyB,IAAL,GAAYA,IAAZ;AACAzB,IAAI,CAAC0B,IAAL,GAAYA,IAAZ;AACA1B,IAAI,CAAC2B,QAAL,GAAgBA,QAAhB;AACA3B,IAAI,CAAC4B,SAAL,GAAiBA,SAAjB;AACA5B,IAAI,CAAC6B,MAAL,GAAcA,MAAd;AACA7B,IAAI,CAAC8B,UAAL,GAAkBA,UAAlB;;;;"}

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
@@ -6,25 +5,20 @@ import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { Treeview } from '../Treeview/Treeview.js';
 import { useDropTarget } from '../../utils/hooks/useDropTarget.js';
 
-var _excluded = ["active", "children", "onDrop", "postfix", "prefix", "role"],
-    _excluded2 = ["children"];
-var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
-  var active = props.active,
-      children = props.children,
-      onDrop = props.onDrop,
-      postfix = props.postfix,
-      prefix = props.prefix,
-      role = props.role,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var proxyRef = useProxiedRef(ref);
-
-  var _useDropTarget = useDropTarget(onDrop),
-      isDraggedOver = _useDropTarget[0],
-      dropTargetProps = _useDropTarget[1];
-
-  var isTreeitem = role === 'treeitem';
-  var className = cn('yt-navigation__item cursor-pointer', {
+const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+  const {
+    active,
+    children,
+    onDrop,
+    postfix,
+    prefix,
+    role,
+    ...otherProps
+  } = props;
+  const proxyRef = useProxiedRef(ref);
+  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
+  const isTreeitem = role === 'treeitem';
+  const className = cn('yt-navigation__item cursor-pointer', {
     'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
     'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
     'yt-navigation__item--active': active && !isDraggedOver,
@@ -32,7 +26,7 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     'yt-navigation__item--dropping bg-blue': isDraggedOver
   }, props.className);
 
-  var handleClick = function handleClick(event) {
+  const handleClick = event => {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
       return;
     }
@@ -55,19 +49,19 @@ var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     className: "yt-navigation__item__postfix ml-1"
   }, postfix));
 });
-var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     className: cn('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
-var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  var className = cn('flex-shrink-0 space-y-1 outline-none', {
+const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, props.className);
 
-  var title = function title(expanded) {
-    var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+  const title = expanded => {
+    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
       'mb-1': expanded,
       'cursor-pointer hover:text-blue': !props.fixed
     });
@@ -84,16 +78,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
     ref: ref
   }));
 });
-var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
-  var scrollableAreas = React__default.useMemo(function () {
-    var scrollableAreas = [];
-    React__default.Children.toArray(props.children).filter(function (child) {
-      return !!child;
-    }).map(function (child) {
+const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
+  const scrollableAreas = React__default.useMemo(() => {
+    const scrollableAreas = [];
+    React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
-        var x = scrollableAreas[scrollableAreas.length - 1];
+        const x = scrollableAreas[scrollableAreas.length - 1];
 
         if (Array.isArray(x)) {
           x.push(child);
@@ -107,19 +99,18 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
   return React__default.createElement(Treeview, Object.assign({}, props, {
     className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
-  }), scrollableAreas.map(function (area, i) {
-    return Array.isArray(area) ? React__default.createElement("div", {
-      className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
-      key: i
-    }, area) : area;
-  }));
+  }), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
+    className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
+    key: i
+  }, area) : area));
 });
 Menu.Group = MenuGroup;
-var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
+const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",