@economic/taco 0.0.31-alpha.0 → 0.0.32-alpha.0

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

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

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

@@ -1,19 +1,20 @@
+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';
 
-const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+var _excluded = ["name"];
+var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  const {
-    name,
-    ...otherProps
-  } = props;
-  const Component = icons[name];
+  var name = props.name,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
+  var className = cn('inline-flex h-[1.715em] w-[1.715em]', 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';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n    /** Set what svg icon should be rendered */\r\n    name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n    const { name, ...otherProps } = props;\r\n    const Component = icons[name];\r\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n    const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n        'p-[3px]': props.className?.includes('rounded-full'),\r\n    });\r\n\r\n    return Component ? (\r\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n    ) : null;\r\n});\r\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;;;AACjC,QAAM;AAAEC,IAAAA,IAAF;AAAQ,OAAGC;AAAX,MAA0BH,KAAhC;AACA,QAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,QAAMI,SAAS,GAAGC,EAAE,CAAC,qCAAD,EAAwCP,KAAK,CAACM,SAA9C,EAAyD;AACzE,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD8D,GAAzD,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n    /** Set what svg icon should be rendered */\r\n    name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n    const { name, ...otherProps } = props;\r\n    const Component = icons[name];\r\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n    const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n        'p-[3px]': props.className?.includes('rounded-full'),\r\n    });\r\n\r\n    return Component ? (\r\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n    ) : null;\r\n});\r\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;;;AACjC,MAAQC,IAAR,GAAgCF,KAAhC,CAAQE,IAAR;AAAA,MAAiBC,UAAjB,iCAAgCH,KAAhC;;AACA,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAAC,qCAAD,EAAwCP,KAAK,CAACM,SAA9C,EAAyD;AACzE,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD8D,GAAzD,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}

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

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

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

@@ -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';
 
-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', {
+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', {
     'pr-8': !!hasContainer
   }, !hasContainer && otherProps.className);
-  useEffect(() => {
+  useEffect(function () {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -27,10 +27,10 @@ const 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
 
-  const handleKeyDown = event => {
+  var handleKeyDown = function handleKeyDown(event) {
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
     }
 
@@ -39,7 +39,7 @@ const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
     }
   };
 
-  const input = createElement("input", Object.assign({}, otherProps, {
+  var input = createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -47,21 +47,19 @@ const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
   }));
 
   if (hasContainer) {
-    let extra;
+    var extra;
 
     if (button) {
-      var _button$props$disable;
+      var _button$props$disable, _cn;
 
-      const disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : 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);
+      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : 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);
       extra = cloneElement(button, {
         className: buttonClassName,
-        disabled
+        disabled: disabled
       });
     } else if (icon) {
-      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', {
+      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', {
         'text-grey-dark': props.disabled,
         'text-grey-darkest': !props.disabled
       });
@@ -73,7 +71,7 @@ const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
       });
     }
 
-    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    var 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';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n    /** Shows a button within the input field */\r\n    button?: React.ReactElement;\r\n    /** Shows an icon within the input field  */\r\n    icon?: IconName | JSX.Element;\r\n    /** Draws attention to the input by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const hasContainer = button || icon;\r\n    const className = cn(\r\n        getInputClasses(props),\r\n        'min-h-[theme(spacing.8)] pointer-events-all',\r\n        {\r\n            'pr-8': !!hasContainer,\r\n        },\r\n        !hasContainer && otherProps.className\r\n    );\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && inputRef.current) {\r\n            inputRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n    if (hasContainer) {\r\n        let extra: any;\r\n\r\n        if (button) {\r\n            const disabled = button.props.disabled ?? otherProps.disabled;\r\n            const buttonClassName = cn(\r\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n                {\r\n                    [getButtonStateClasses(invalid)]: !props.disabled,\r\n                },\r\n                button.props.className\r\n            );\r\n            extra = React.cloneElement(button, {\r\n                className: buttonClassName,\r\n                disabled,\r\n            });\r\n        } else if (icon) {\r\n            const iconClassName = cn(\r\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',\r\n                {\r\n                    'text-grey-dark': props.disabled,\r\n                    'text-grey-darkest': !props.disabled,\r\n                }\r\n            );\r\n            extra =\r\n                typeof icon === 'string' ? (\r\n                    <Icon className={iconClassName} name={icon} />\r\n                ) : (\r\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n                );\r\n        }\r\n\r\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n        return (\r\n            <div className={containerClassName} data-taco=\"input-container\">\r\n                {input}\r\n                {extra}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n    /** Shows a button within the input field */\r\n    button?: React.ReactElement;\r\n    /** Shows an icon within the input field  */\r\n    icon?: IconName | JSX.Element;\r\n    /** Draws attention to the input by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const hasContainer = button || icon;\r\n    const className = cn(\r\n        getInputClasses(props),\r\n        'min-h-[theme(spacing.8)] pointer-events-all',\r\n        {\r\n            'pr-8': !!hasContainer,\r\n        },\r\n        !hasContainer && otherProps.className\r\n    );\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && inputRef.current) {\r\n            inputRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n    if (hasContainer) {\r\n        let extra: any;\r\n\r\n        if (button) {\r\n            const disabled = button.props.disabled ?? otherProps.disabled;\r\n            const buttonClassName = cn(\r\n                'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n                {\r\n                    [getButtonStateClasses(invalid)]: !props.disabled,\r\n                },\r\n                button.props.className\r\n            );\r\n            extra = React.cloneElement(button, {\r\n                className: buttonClassName,\r\n                disabled,\r\n            });\r\n        } else if (icon) {\r\n            const iconClassName = cn(\r\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',\r\n                {\r\n                    'text-grey-dark': props.disabled,\r\n                    'text-grey-darkest': !props.disabled,\r\n                }\r\n            );\r\n            extra =\r\n                typeof icon === 'string' ? (\r\n                    <Icon className={iconClassName} name={icon} />\r\n                ) : (\r\n                    React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n                );\r\n        }\r\n\r\n        const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n        return (\r\n            <div className={containerClassName} data-taco=\"input-container\">\r\n                {input}\r\n                {extra}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}

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

@@ -1,52 +1,53 @@
+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';
 
-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);
+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);
   return createElement("span", {
     "data-taco": "listbox",
     className: className
   }, createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
+    style: _extends({}, list.style, {
       maxHeight: 'calc(12rem + 2px)'
       /* (6 * option height) + listbox border */
 
-    }
+    })
   })), createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
   })));
 });
-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);
+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);
   return createElement("span", {
     "data-taco": "listbox",
     className: className
   }, createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
+    style: _extends({}, 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';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n    /**\r\n     * Text displayed in the listbox if no data provided.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    empty: string;\r\n    /**\r\n     * Text displayed in the listbox to indicate the data is loading.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    loading: string;\r\n    /**\r\n     * The first option displayed in a multiselect listbox that selects all available options.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n        /** Data indicating the options in listbox */\r\n        data?: ListboxItem[];\r\n        /**\r\n         * Initial value of the listbox.\r\n         * This is used when listbox is mounted, if no value is provided.\r\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n         */\r\n        defaultValue?: ListboxValue;\r\n        /** Set what value should have an empty option in listbox */\r\n        emptyValue?: ListboxValue;\r\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n        highlighted?: boolean;\r\n        /* Whether the input is in an invalid state */\r\n        invalid?: boolean;\r\n        /**\r\n         * Shows a loading indicator with a text next to it.\r\n         * Read more about how to provide the text in [Provider](component:provider) component\r\n         */\r\n        loading?: boolean;\r\n        /**\r\n         * Value of the listbox representing the selected item.\r\n         * It needs to be an existing value from the provided data\r\n         */\r\n        value?: ListboxValue;\r\n    };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useMultiListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{\r\n                    ...list.style,\r\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n                }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\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;AACpC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;AAAiBC,MAAAA,SAAS,EAAE;AAAoB;;AAAhD;IAFX,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgC,OAAGC;AAAnC,MAAkDJ,KAAxD;AACA,QAAM;AAAEK,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AACA,QAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;AAEA,SACIJ,aAAA,OAAA;iBAAgB;AAAUG,IAAAA,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;AACJK,IAAAA,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;AAEHC,MAAAA,SAAS,EAAE;AAA0B;;AAFlC;IAFX,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;AAAOJ,IAAAA,SAAS,EAAC;AAASU,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useListbox } from './useListbox';\r\nimport { useMultiListbox } from './useMultiListbox';\r\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\r\n\r\nexport type ListboxItem = ScrollableListItem;\r\nexport type ListboxValue = ScrollableListItemValue;\r\n\r\nexport type ListboxTexts = {\r\n    /**\r\n     * Text displayed in the listbox if no data provided.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    empty: string;\r\n    /**\r\n     * Text displayed in the listbox to indicate the data is loading.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    loading: string;\r\n    /**\r\n     * The first option displayed in a multiselect listbox that selects all available options.\r\n     * Read more about how to provide the text in [Provider](component:provider) component\r\n     */\r\n    allOption: string;\r\n};\r\n\r\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\r\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\r\n        /** Data indicating the options in listbox */\r\n        data?: ListboxItem[];\r\n        /**\r\n         * Initial value of the listbox.\r\n         * This is used when listbox is mounted, if no value is provided.\r\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\r\n         */\r\n        defaultValue?: ListboxValue;\r\n        /** Set what value should have an empty option in listbox */\r\n        emptyValue?: ListboxValue;\r\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\r\n        highlighted?: boolean;\r\n        /* Whether the input is in an invalid state */\r\n        invalid?: boolean;\r\n        /**\r\n         * Shows a loading indicator with a text next to it.\r\n         * Read more about how to provide the text in [Provider](component:provider) component\r\n         */\r\n        loading?: boolean;\r\n        /**\r\n         * Value of the listbox representing the selected item.\r\n         * It needs to be an existing value from the provided data\r\n         */\r\n        value?: ListboxValue;\r\n    };\r\n\r\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, ...otherProps } = props;\r\n    const { list, input } = useMultiListbox(otherProps, ref);\r\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\r\n\r\n    return (\r\n        <span data-taco=\"listbox\" className={className}>\r\n            <ScrollableList\r\n                {...list}\r\n                style={{\r\n                    ...list.style,\r\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\r\n                }}\r\n            />\r\n            <input {...input} className=\"hidden\" type=\"text\" />\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAuDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import '../Icon/components/index.js';
 import '../Icon/Icon.js';
@@ -48,22 +49,22 @@ import '../Switch/Switch.js';
 import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 
-const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
-  onSearch,
-  ...props
-}, ref) {
-  const {
-    texts
-  } = useLocalization();
+var _excluded = ["onSearch"];
+var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
+  var onSearch = _ref.onSearch,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  const handleClick = () => {
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var handleClick = function handleClick() {
     if (!props.disabled) {
       onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
     }
   };
 
-  const handleKeyDown = event => {
-    const isEnterKeyPressed = event.keyCode === keycode('enter');
+  var handleKeyDown = function handleKeyDown(event) {
+    var isEnterKeyPressed = event.keyCode === keycode('enter');
 
     if (isEnterKeyPressed) {
       handleClick();

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

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