@economic/taco 0.0.30-alpha.0 → 0.0.31-alpha.2

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/Menu/Menu.js

@@ -1,3 +1,4 @@
+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';
@@ -10,26 +11,48 @@ import { RadioGroup } from './components/RadioGroup.js';
 import { Separator } from './components/Separator.js';
 import { Header } from './components/Header.js';
 
-const Menu = externalProps => {
-  const {
-    appearance: externalAppearance,
-    children,
-    trigger,
-    ...props
-  } = externalProps;
-  const [open, setOpen] = useState(false);
-  const [appearance, setAppearance] = useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default');
-  const [indented, setIndented] = useState(false);
-  const [minWidth, setMinWidth] = useState(undefined);
-  const context = useMemo(() => ({
-    appearance,
-    setAppearance: appearance => setAppearance(appearance),
-    indented,
-    registerIndentation: () => setIndented(true),
-    minWidth,
-    setMinWidth: width => setMinWidth(width),
-    close: () => setOpen(false)
-  }), [indented, minWidth, appearance]);
+var _excluded = ["appearance", "children", "trigger"];
+var Menu = function Menu(externalProps) {
+  var externalAppearance = externalProps.appearance,
+      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(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default'),
+      appearance = _React$useState2[0],
+      _setAppearance = _React$useState2[1];
+
+  var _React$useState3 = useState(false),
+      indented = _React$useState3[0],
+      setIndented = _React$useState3[1];
+
+  var _React$useState4 = useState(undefined),
+      minWidth = _React$useState4[0],
+      _setMinWidth = _React$useState4[1];
+
+  var context = useMemo(function () {
+    return {
+      appearance: appearance,
+      setAppearance: function setAppearance(appearance) {
+        return _setAppearance(appearance);
+      },
+      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, appearance]);
   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';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport { MenuContext } from './Context';\r\nimport { Content } from './components/Content';\r\nimport { Item } from './components/Item';\r\nimport { Link } from './components/Link';\r\nimport { Trigger } from './components/Trigger';\r\nimport { Checkbox } from './components/Checkbox';\r\nimport { RadioGroup } from './components/RadioGroup';\r\nimport { Separator } from './components/Separator';\r\nimport { Header } from './components/Header';\r\nimport { Appearance } from '../..';\r\n\r\nexport type MenuProps = {\r\n    /** Appearance will change the style of the button */\r\n    appearance?: Appearance;\r\n    children: React.ReactNode;\r\n    id?: string;\r\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\r\n    const { appearance: externalAppearance, children, trigger, ...props } = externalProps;\r\n    const [open, setOpen] = React.useState(false);\r\n    const [appearance, setAppearance] = React.useState<Appearance>(externalAppearance ?? 'default');\r\n    const [indented, setIndented] = React.useState(false);\r\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            appearance,\r\n            setAppearance: (appearance: Appearance) => setAppearance(appearance),\r\n            indented,\r\n            registerIndentation: () => setIndented(true),\r\n            minWidth,\r\n            setMinWidth: (width: number) => setMinWidth(width),\r\n            close: () => setOpen(false),\r\n        }),\r\n        [indented, minWidth, appearance]\r\n    );\r\n\r\n    return (\r\n        <MenuContext.Provider value={context}>\r\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DropdownMenuPrimitive.Root>\r\n        </MenuContext.Provider>\r\n    );\r\n};\r\nMenu.Trigger = Trigger;\r\nMenu.Content = Content;\r\nMenu.Item = Item;\r\nMenu.Link = Link;\r\nMenu.Checkbox = Checkbox;\r\nMenu.Separator = Separator;\r\nMenu.Header = Header;\r\nMenu.RadioGroup = RadioGroup;\r\n"],"names":["Menu","externalProps","appearance","externalAppearance","children","trigger","props","open","setOpen","React","setAppearance","indented","setIndented","minWidth","setMinWidth","undefined","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;MAsBaA,IAAI,GAAIC,aAAD;AAChB,QAAM;AAAEC,IAAAA,UAAU,EAAEC,kBAAd;AAAkCC,IAAAA,QAAlC;AAA4CC,IAAAA,OAA5C;AAAqD,OAAGC;AAAxD,MAAkEL,aAAxE;AACA,QAAM,CAACM,IAAD,EAAOC,OAAP,IAAkBC,QAAA,CAAe,KAAf,CAAxB;AACA,QAAM,CAACP,UAAD,EAAaQ,aAAb,IAA8BD,QAAA,CAA2BN,kBAA3B,aAA2BA,kBAA3B,cAA2BA,kBAA3B,GAAiD,SAAjD,CAApC;AACA,QAAM,CAACQ,QAAD,EAAWC,WAAX,IAA0BH,QAAA,CAAe,KAAf,CAAhC;AACA,QAAM,CAACI,QAAD,EAAWC,WAAX,IAA0BL,QAAA,CAAmCM,SAAnC,CAAhC;AAEA,QAAMC,OAAO,GAAGP,OAAA,CACZ,OAAO;AACHP,IAAAA,UADG;AAEHQ,IAAAA,aAAa,EAAGR,UAAD,IAA4BQ,aAAa,CAACR,UAAD,CAFrD;AAGHS,IAAAA,QAHG;AAIHM,IAAAA,mBAAmB,EAAE,MAAML,WAAW,CAAC,IAAD,CAJnC;AAKHC,IAAAA,QALG;AAMHC,IAAAA,WAAW,EAAGI,KAAD,IAAmBJ,WAAW,CAACI,KAAD,CANxC;AAOHC,IAAAA,KAAK,EAAE,MAAMX,OAAO,CAAC,KAAD;AAPjB,GAAP,CADY,EAUZ,CAACG,QAAD,EAAWE,QAAX,EAAqBX,UAArB,CAVY,CAAhB;AAaA,SACIO,aAAA,CAACW,WAAW,CAACC,QAAb;AAAsBC,IAAAA,KAAK,EAAEN;GAA7B,EACIP,aAAA,CAACc,IAAD,oBAAgCjB;AAAOkB,IAAAA,KAAK,EAAE;AAAOjB,IAAAA,IAAI,EAAEA;AAAMkB,IAAAA,YAAY,EAAEjB;IAA/E,EACKH,OAAO,IAAII,aAAA,CAACiB,OAAD,MAAA,EAAUrB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDJ,IAAI,CAAC0B,OAAL,GAAeA,OAAf;AACA1B,IAAI,CAAC2B,OAAL,GAAeA,OAAf;AACA3B,IAAI,CAAC4B,IAAL,GAAYA,IAAZ;AACA5B,IAAI,CAAC6B,IAAL,GAAYA,IAAZ;AACA7B,IAAI,CAAC8B,QAAL,GAAgBA,QAAhB;AACA9B,IAAI,CAAC+B,SAAL,GAAiBA,SAAjB;AACA/B,IAAI,CAACgC,MAAL,GAAcA,MAAd;AACAhC,IAAI,CAACiC,UAAL,GAAkBA,UAAlB;;;;"}
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport { MenuContext } from './Context';\r\nimport { Content } from './components/Content';\r\nimport { Item } from './components/Item';\r\nimport { Link } from './components/Link';\r\nimport { Trigger } from './components/Trigger';\r\nimport { Checkbox } from './components/Checkbox';\r\nimport { RadioGroup } from './components/RadioGroup';\r\nimport { Separator } from './components/Separator';\r\nimport { Header } from './components/Header';\r\nimport { Appearance } from '../..';\r\n\r\nexport type MenuProps = {\r\n    /** Appearance will change the style of the button */\r\n    appearance?: Appearance;\r\n    children: React.ReactNode;\r\n    id?: string;\r\n    /** A trigger to be used for the menu, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nexport const Menu = (externalProps: MenuProps): JSX.Element => {\r\n    const { appearance: externalAppearance, children, trigger, ...props } = externalProps;\r\n    const [open, setOpen] = React.useState(false);\r\n    const [appearance, setAppearance] = React.useState<Appearance>(externalAppearance ?? 'default');\r\n    const [indented, setIndented] = React.useState(false);\r\n    const [minWidth, setMinWidth] = React.useState<number | undefined>(undefined);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            appearance,\r\n            setAppearance: (appearance: Appearance) => setAppearance(appearance),\r\n            indented,\r\n            registerIndentation: () => setIndented(true),\r\n            minWidth,\r\n            setMinWidth: (width: number) => setMinWidth(width),\r\n            close: () => setOpen(false),\r\n        }),\r\n        [indented, minWidth, appearance]\r\n    );\r\n\r\n    return (\r\n        <MenuContext.Provider value={context}>\r\n            <DropdownMenuPrimitive.Root {...props} modal={false} open={open} onOpenChange={setOpen}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DropdownMenuPrimitive.Root>\r\n        </MenuContext.Provider>\r\n    );\r\n};\r\nMenu.Trigger = Trigger;\r\nMenu.Content = Content;\r\nMenu.Item = Item;\r\nMenu.Link = Link;\r\nMenu.Checkbox = Checkbox;\r\nMenu.Separator = Separator;\r\nMenu.Header = Header;\r\nMenu.RadioGroup = RadioGroup;\r\n"],"names":["Menu","externalProps","externalAppearance","appearance","children","trigger","props","React","open","setOpen","setAppearance","indented","setIndented","undefined","minWidth","setMinWidth","context","registerIndentation","width","close","MenuContext","Provider","value","DropdownMenuPrimitive","modal","onOpenChange","Trigger","Content","Item","Link","Checkbox","Separator","Header","RadioGroup"],"mappings":";;;;;;;;;;;;;;IAsBaA,IAAI,GAAG,SAAPA,IAAO,CAACC,aAAD;AAChB,MAAoBC,kBAApB,GAAwED,aAAxE,CAAQE,UAAR;AAAA,MAAwCC,QAAxC,GAAwEH,aAAxE,CAAwCG,QAAxC;AAAA,MAAkDC,OAAlD,GAAwEJ,aAAxE,CAAkDI,OAAlD;AAAA,MAA8DC,KAA9D,iCAAwEL,aAAxE;;AACA,wBAAwBM,QAAA,CAAe,KAAf,CAAxB;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,yBAAoCF,QAAA,CAA2BL,kBAA3B,aAA2BA,kBAA3B,cAA2BA,kBAA3B,GAAiD,SAAjD,CAApC;AAAA,MAAOC,UAAP;AAAA,MAAmBO,cAAnB;;AACA,yBAAgCH,QAAA,CAAe,KAAf,CAAhC;AAAA,MAAOI,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAAgCL,QAAA,CAAmCM,SAAnC,CAAhC;AAAA,MAAOC,QAAP;AAAA,MAAiBC,YAAjB;;AAEA,MAAMC,OAAO,GAAGT,OAAA,CACZ;AAAA,WAAO;AACHJ,MAAAA,UAAU,EAAVA,UADG;AAEHO,MAAAA,aAAa,EAAE,uBAACP,UAAD;AAAA,eAA4BO,cAAa,CAACP,UAAD,CAAzC;AAAA,OAFZ;AAGHQ,MAAAA,QAAQ,EAARA,QAHG;AAIHM,MAAAA,mBAAmB,EAAE;AAAA,eAAML,WAAW,CAAC,IAAD,CAAjB;AAAA,OAJlB;AAKHE,MAAAA,QAAQ,EAARA,QALG;AAMHC,MAAAA,WAAW,EAAE,qBAACG,KAAD;AAAA,eAAmBH,YAAW,CAACG,KAAD,CAA9B;AAAA,OANV;AAOHC,MAAAA,KAAK,EAAE;AAAA,eAAMV,OAAO,CAAC,KAAD,CAAb;AAAA;AAPJ,KAAP;AAAA,GADY,EAUZ,CAACE,QAAD,EAAWG,QAAX,EAAqBX,UAArB,CAVY,CAAhB;AAaA,SACII,aAAA,CAACa,WAAW,CAACC,QAAb;AAAsBC,IAAAA,KAAK,EAAEN;GAA7B,EACIT,aAAA,CAACgB,IAAD,oBAAgCjB;AAAOkB,IAAAA,KAAK,EAAE;AAAOhB,IAAAA,IAAI,EAAEA;AAAMiB,IAAAA,YAAY,EAAEhB;IAA/E,EACKJ,OAAO,IAAIE,aAAA,CAACmB,OAAD,MAAA,EAAUrB,OAAV,CADhB,EAEKD,QAFL,CADJ,CADJ;AAQH;AACDJ,IAAI,CAAC0B,OAAL,GAAeA,OAAf;AACA1B,IAAI,CAAC2B,OAAL,GAAeA,OAAf;AACA3B,IAAI,CAAC4B,IAAL,GAAYA,IAAZ;AACA5B,IAAI,CAAC6B,IAAL,GAAYA,IAAZ;AACA7B,IAAI,CAAC8B,QAAL,GAAgBA,QAAhB;AACA9B,IAAI,CAAC+B,SAAL,GAAiBA,SAAjB;AACA/B,IAAI,CAACgC,MAAL,GAAcA,MAAd;AACAhC,IAAI,CAACiC,UAAL,GAAkBA,UAAlB;;;;"}

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

@@ -16,20 +16,20 @@ const Icon = ({
 const getAppearanceClasses = appearance => {
   switch (appearance) {
     case 'primary':
-      return 'wcag-blue aria-disabled:text-blue-dark focus:wcag-blue-light';
+      return 'wcag-blue aria-disabled:text-blue-dark hover:wcag-blue-light focus:wcag-blue-light';
 
     case 'danger':
-      return 'wcag-red aria-disabled:text-red-dark focus:wcag-red-light';
+      return 'wcag-red aria-disabled:text-red-dark hover:wcag-red-light focus:wcag-red-light';
 
     case 'ghost':
-      return 'text-blue aria-disabled:text-grey focus:wcag-blue';
+      return 'text-blue aria-disabled:text-grey hover:wcag-blue focus:wcag-blue';
 
     case 'discrete':
-      return 'text-black aria-disabled:text-grey focus:wcag-blue-lightest';
+      return 'text-black aria-disabled:text-grey hover:wcag-blue-lightest focus:wcag-blue-lightest';
 
     case 'default':
     default:
-      return 'wcag-grey-light aria-disabled:text-grey-darker focus:wcag-grey-dark';
+      return 'wcag-grey-light aria-disabled:text-grey-darker hover:wcag-grey-dark focus:wcag-grey-dark';
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport cn from 'classnames';\r\nimport { IconName } from '../../Icon/Icon';\r\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\r\nimport { useCurrentMenu } from '../Context';\r\nimport { Appearance } from '../../../types';\r\nimport { DialogProps } from '../../Dialog/Dialog';\r\n\r\nexport const Icon = ({ name }) => (\r\n    <span className=\"absolute left-0 ml-1\">\r\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\r\n    </span>\r\n);\r\n\r\nconst getAppearanceClasses = (appearance: Appearance | undefined) => {\r\n    switch (appearance) {\r\n        case 'primary':\r\n            return 'wcag-blue aria-disabled:text-blue-dark focus:wcag-blue-light';\r\n\r\n        case 'danger':\r\n            return 'wcag-red aria-disabled:text-red-dark focus:wcag-red-light';\r\n\r\n        case 'ghost':\r\n            return 'text-blue aria-disabled:text-grey focus:wcag-blue';\r\n\r\n        case 'discrete':\r\n            return 'text-black aria-disabled:text-grey focus:wcag-blue-lightest';\r\n\r\n        case 'default':\r\n        default:\r\n            return 'wcag-grey-light aria-disabled:text-grey-darker focus:wcag-grey-dark';\r\n    }\r\n};\r\n\r\nexport const useItemStyling = ({ disabled, indented, className }) => {\r\n    const menu = useCurrentMenu();\r\n\r\n    React.useEffect(() => {\r\n        if (indented && !menu?.indented) {\r\n            menu?.registerIndentation();\r\n        }\r\n    }, [indented]);\r\n\r\n    return cn(\r\n        'flex items-center justify-start h-7 pr-1.5 relative rounded w-full focus:outline-none group',\r\n        getAppearanceClasses(menu?.appearance),\r\n        {\r\n            'pl-7': menu?.indented,\r\n            'pl-1.5': !menu?.indented,\r\n            'cursor-pointer': !disabled,\r\n            'cursor-not-allowed': disabled,\r\n        },\r\n        className\r\n    );\r\n};\r\n\r\nexport const Shortcut = props => {\r\n    const menu = useCurrentMenu();\r\n    let appearance;\r\n\r\n    switch (menu?.appearance) {\r\n        case 'primary':\r\n            appearance = 'text-blue-lightest group-focus:text-black';\r\n            break;\r\n\r\n        case 'danger':\r\n            appearance = 'text-red-lightest group-focus:text-white';\r\n            break;\r\n\r\n        case 'ghost':\r\n            appearance = 'text-blue-light group-focus:text-blue-lightest';\r\n            break;\r\n\r\n        case 'discrete':\r\n            appearance = 'text-grey-darker group-focus:text-blue-light';\r\n            break;\r\n\r\n        case 'default':\r\n        default:\r\n            appearance = 'text-grey-darkest';\r\n            break;\r\n    }\r\n\r\n    const className = cn('ml-auto pl-3', appearance);\r\n\r\n    return <span {...props} className={className} />;\r\n};\r\n\r\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\r\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n    disabled?: boolean;\r\n    icon?: IconName;\r\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\r\n    shortcut?: string;\r\n};\r\n\r\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\r\n    const className = useItemStyling({\r\n        disabled: props.disabled,\r\n        indented: !!icon,\r\n        className: props.className,\r\n    });\r\n\r\n    const disabled = props.disabled ?? props['aria-disabled'];\r\n\r\n    let handleClick;\r\n\r\n    // radix has a bug that does not disable clicks when disabled is set on items\r\n    if (disabled) {\r\n        handleClick = event => {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n        };\r\n    }\r\n\r\n    const handleSelect = event => {\r\n        if (onClick) {\r\n            onClick(event);\r\n        }\r\n\r\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\r\n            event.preventDefault();\r\n        }\r\n    };\r\n\r\n    let button = (\r\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\r\n            {icon && <Icon name={icon} />}\r\n            {props.children}\r\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\r\n        </DropdownMenuPrimitive.Item>\r\n    );\r\n\r\n    if (typeof dialog === 'function') {\r\n        button = dialog({ trigger: button });\r\n    }\r\n\r\n    return button;\r\n});\r\n"],"names":["Icon","name","React","className","IconPrimitive","getAppearanceClasses","appearance","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\r\nimport cn from 'classnames';\r\nimport { IconName } from '../../Icon/Icon';\r\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\r\nimport { useCurrentMenu } from '../Context';\r\nimport { Appearance } from '../../../types';\r\nimport { DialogProps } from '../../Dialog/Dialog';\r\n\r\nexport const Icon = ({ name }) => (\r\n    <span className=\"absolute left-0 ml-1\">\r\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\r\n    </span>\r\n);\r\n\r\nconst getAppearanceClasses = (appearance: Appearance | undefined) => {\r\n    switch (appearance) {\r\n        case 'primary':\r\n            return 'wcag-blue aria-disabled:text-blue-dark hover:wcag-blue-light focus:wcag-blue-light';\r\n\r\n        case 'danger':\r\n            return 'wcag-red aria-disabled:text-red-dark hover:wcag-red-light focus:wcag-red-light';\r\n\r\n        case 'ghost':\r\n            return 'text-blue aria-disabled:text-grey hover:wcag-blue focus:wcag-blue';\r\n\r\n        case 'discrete':\r\n            return 'text-black aria-disabled:text-grey hover:wcag-blue-lightest focus:wcag-blue-lightest';\r\n\r\n        case 'default':\r\n        default:\r\n            return 'wcag-grey-light aria-disabled:text-grey-darker hover:wcag-grey-dark focus:wcag-grey-dark';\r\n    }\r\n};\r\n\r\nexport const useItemStyling = ({ disabled, indented, className }) => {\r\n    const menu = useCurrentMenu();\r\n\r\n    React.useEffect(() => {\r\n        if (indented && !menu?.indented) {\r\n            menu?.registerIndentation();\r\n        }\r\n    }, [indented]);\r\n\r\n    return cn(\r\n        'flex items-center justify-start h-7 pr-1.5 relative rounded w-full focus:outline-none group',\r\n        getAppearanceClasses(menu?.appearance),\r\n        {\r\n            'pl-7': menu?.indented,\r\n            'pl-1.5': !menu?.indented,\r\n            'cursor-pointer': !disabled,\r\n            'cursor-not-allowed': disabled,\r\n        },\r\n        className\r\n    );\r\n};\r\n\r\nexport const Shortcut = props => {\r\n    const menu = useCurrentMenu();\r\n    let appearance;\r\n\r\n    switch (menu?.appearance) {\r\n        case 'primary':\r\n            appearance = 'text-blue-lightest group-focus:text-black';\r\n            break;\r\n\r\n        case 'danger':\r\n            appearance = 'text-red-lightest group-focus:text-white';\r\n            break;\r\n\r\n        case 'ghost':\r\n            appearance = 'text-blue-light group-focus:text-blue-lightest';\r\n            break;\r\n\r\n        case 'discrete':\r\n            appearance = 'text-grey-darker group-focus:text-blue-light';\r\n            break;\r\n\r\n        case 'default':\r\n        default:\r\n            appearance = 'text-grey-darkest';\r\n            break;\r\n    }\r\n\r\n    const className = cn('ml-auto pl-3', appearance);\r\n\r\n    return <span {...props} className={className} />;\r\n};\r\n\r\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\r\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n    disabled?: boolean;\r\n    icon?: IconName;\r\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\r\n    shortcut?: string;\r\n};\r\n\r\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\r\n    const className = useItemStyling({\r\n        disabled: props.disabled,\r\n        indented: !!icon,\r\n        className: props.className,\r\n    });\r\n\r\n    const disabled = props.disabled ?? props['aria-disabled'];\r\n\r\n    let handleClick;\r\n\r\n    // radix has a bug that does not disable clicks when disabled is set on items\r\n    if (disabled) {\r\n        handleClick = event => {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n        };\r\n    }\r\n\r\n    const handleSelect = event => {\r\n        if (onClick) {\r\n            onClick(event);\r\n        }\r\n\r\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\r\n            event.preventDefault();\r\n        }\r\n    };\r\n\r\n    let button = (\r\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\r\n            {icon && <Icon name={icon} />}\r\n            {props.children}\r\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\r\n        </DropdownMenuPrimitive.Item>\r\n    );\r\n\r\n    if (typeof dialog === 'function') {\r\n        button = dialog({ trigger: button });\r\n    }\r\n\r\n    return button;\r\n});\r\n"],"names":["Icon","name","React","className","IconPrimitive","getAppearanceClasses","appearance","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
@@ -5,20 +6,25 @@ import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { Treeview } from '../Treeview/Treeview.js';
 import { useDropTarget } from '../../utils/hooks/useDropTarget.js';
 
-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', {
+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', {
     '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,
@@ -26,7 +32,7 @@ const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     'yt-navigation__item--dropping bg-blue': isDraggedOver
   }, props.className);
 
-  const handleClick = event => {
+  var handleClick = function handleClick(event) {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
       return;
     }
@@ -49,19 +55,19 @@ const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     className: "yt-navigation__item__postfix ml-1"
   }, postfix));
 });
-const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+var 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
   }));
 });
-const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  const className = cn('flex-shrink-0 space-y-1 outline-none', {
+var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  var className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, props.className);
 
-  const title = expanded => {
-    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+  var title = function title(expanded) {
+    var 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
     });
@@ -78,14 +84,16 @@ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(prop
     ref: ref
   }));
 });
-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 => {
+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) {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
-        const x = scrollableAreas[scrollableAreas.length - 1];
+        var x = scrollableAreas[scrollableAreas.length - 1];
 
         if (Array.isArray(x)) {
           x.push(child);
@@ -99,18 +107,19 @@ const 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((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));
+  }), 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;
+  }));
 });
 Menu.Group = MenuGroup;
-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);
+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);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",