@economic/taco 1.1.5-alpha.0 → 1.1.5-alpha.1

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.shiftKey && (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","shiftKey","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.shiftKey && (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","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":";;;;;;MAiBaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;EAClC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,WAAhB;IAA6BC,OAA7B;IAAsCC,SAAtC;IAAiDC,SAAjD;IAA4D,GAAGC;MAAeR,KAApF;EACA,MAAMS,QAAQ,GAAGC,aAAa,CAAmBT,GAAnB,CAA9B;EACA,MAAMU,YAAY,GAAGT,MAAM,IAAIC,IAA/B;EACA,MAAMS,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAACd,KAAD,CADC,EAEhB,6CAFgB,EAGhB;IACI,QAAQ,CAAC,CAACW;GAJE,EAMhB,CAACA,YAAD,IAAiBH,UAAU,CAACI,SANZ,CAApB;EASAb,SAAA,CAAgB;IACZ,IAAIQ,SAAS,IAAIE,QAAQ,CAACM,OAA1B,EAAmC;MAC/BN,QAAQ,CAACM,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;;;;EASA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAI,CAACA,KAAK,CAACC,QAAP,KAAoBD,KAAK,CAACE,GAAN,KAAc,MAAd,IAAwBF,KAAK,CAACE,GAAN,KAAc,KAA1D,CAAJ,EAAsE;MAClEF,KAAK,CAACG,cAAN;MACA,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAN,KAAc,KAAd,GAAsBF,KAAK,CAACK,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAP,KAAK,CAACK,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACY,KAAD,CAAT;;GARR;;EAYA,MAAMS,KAAK,GAAG5B,aAAA,QAAA,oBAAWS;IAAYI,SAAS,EAAEA;iBAAqB;IAAQN,SAAS,EAAEW;IAAehB,GAAG,EAAEQ;IAA9F,CAAd;;EAEA,IAAIE,YAAJ,EAAkB;IACd,IAAIiB,KAAJ;;IAEA,IAAI1B,MAAJ,EAAY;MACR,MAAM2B,QAAQ,GAAG3B,MAAM,CAACF,KAAP,CAAa6B,QAAb,IAAyBrB,UAAU,CAACqB,QAArD;MACA,MAAMC,eAAe,GAAGjB,EAAE,CACtB,2HADsB,EAEtB;QACI,CAACkB,qBAAqB,CAAC1B,OAAD,CAAtB,GAAkC,CAACL,KAAK,CAAC6B;OAHvB,EAKtB3B,MAAM,CAACF,KAAP,CAAaY,SALS,CAA1B;MAOAgB,KAAK,GAAG7B,YAAA,CAAmBG,MAAnB,EAA2B;QAC/BU,SAAS,EAAEkB,eADoB;QAE/BD;OAFI,CAAR;KATJ,MAaO,IAAI1B,IAAJ,EAAU;MACb,MAAM6B,aAAa,GAAGnB,EAAE,CACpB,8GADoB,EAEpB;QACI,kBAAkBb,KAAK,CAAC6B,QAD5B;QAEI,qBAAqB,CAAC7B,KAAK,CAAC6B;OAJZ,CAAxB;MAOAD,KAAK,GACD,OAAOzB,IAAP,KAAgB,QAAhB,GACIJ,aAAA,CAACkC,IAAD;QAAMrB,SAAS,EAAEoB;QAAeE,IAAI,EAAE/B;OAAtC,CADJ,GAGIJ,YAAA,CAAmBI,IAAnB,EAAyB;QAAES,SAAS,EAAEC,EAAE,CAACmB,aAAD,EAAgB7B,IAAI,CAACH,KAAL,CAAWY,SAA3B;OAAxC,CAJR;;;IAQJ,MAAMuB,kBAAkB,GAAGtB,EAAE,CAAC,8CAAD,EAAiDL,UAAU,CAACI,SAA5D,CAA7B;IAEA,OACIb,aAAA,MAAA;MAAKa,SAAS,EAAEuB;mBAA8B;KAA9C,EACKR,KADL,EAEKC,KAFL,CADJ;;;EAQJ,OAAOD,KAAP;AACH,CA/EoB;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\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;EACpC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,kBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;MAAQK,IAAR,eAAQA,IAAR;MAAcC,KAAd,eAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eAAOJ,IAAI,CAACI,KAAZ;MAAmBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,IAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;MAAyCC,UAAzC,iCAAwDJ,KAAxD;;EACA,uBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;MAAQK,IAAR,oBAAQA,IAAR;MAAcC,KAAd,oBAAcA,KAAd;;EACA,IAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;EAEA,OACIH,aAAA,OAAA;iBAAgB;IAAUI,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;IACJI,KAAK,eACEJ,IAAI,CAACI,KADP;MAEDC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;IAAOJ,SAAS,EAAC;IAASS,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\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;EACpC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUC,UAAU,CAACH,UAAD,EAAaH,GAAb,CAAlC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EAAE,GAAGL,IAAI,CAACK,KAAV;MAAiBC,SAAS,EAAE;;;;IAFvC,CADJ,EAKIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;MAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACzC,MAAM;IAAEC,SAAS,EAAEC,iBAAb;IAAgC,GAAGC;MAAeJ,KAAxD;EACA,MAAM;IAAEK,IAAF;IAAQC;MAAUQ,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;EACA,MAAMC,SAAS,GAAGM,EAAE,CAAC,sCAAD,EAAyCL,iBAAzC,CAApB;EAEA,OACIJ,aAAA,OAAA;iBAAgB;IAAUG,SAAS,EAAEA;GAArC,EACIH,aAAA,CAACU,cAAD,oBACQJ;IACJK,KAAK,EAAE,EACH,GAAGL,IAAI,CAACK,KADL;MAEHC,SAAS,EAAE;;;;IAJnB,CADJ,EAQIZ,aAAA,QAAA,oBAAWO;IAAOJ,SAAS,EAAC;IAASU,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\r\nimport './Navigation.css';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\n\r\n// Item\r\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\r\n    /** Change the style to indicate the link is selected */\r\n    active?: boolean;\r\n    /** Handler to be used when dropping a dragged element over the navigation link */\r\n    onDrop?: React.DragEventHandler;\r\n    /**\r\n     * Small amount of information placed next to the text of the link.\r\n     * This can be any valid react element, for e.g. a `span`.\r\n     * Should be used to indicate a relevant information of the link,\r\n     * for e.g. the number of unread notifications\r\n     */\r\n    postfix?: React.ReactNode;\r\n    /**\r\n     * Small amount of information placed before the text of the link.\r\n     * This can be any valid react element, for e.g. a `span`.\r\n     * Should be used to indicate a feedback for user,\r\n     * for e.g. display some sort of visual informational state or a relevant icon.\r\n     */\r\n    prefix?: React.ReactNode;\r\n    /** Target of the link */\r\n    target?: string;\r\n};\r\n\r\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\r\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\r\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\r\n    const isTreeitem = role === 'treeitem';\r\n    const className = cn(\r\n        'yt-navigation__item cursor-pointer',\r\n        {\r\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\r\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\r\n            'yt-navigation__item--active': active && !isDraggedOver,\r\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\r\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\r\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\r\n            return;\r\n        }\r\n\r\n        if (proxyRef.current) {\r\n            proxyRef.current.click();\r\n        }\r\n    };\r\n\r\n    return (\r\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\r\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\r\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\r\n                {children}\r\n            </a>\r\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\r\n        </span>\r\n    );\r\n});\r\n\r\n// Panel\r\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\r\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\r\n});\r\n\r\n// Group\r\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\r\n\r\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn(\r\n        'flex-shrink-0 space-y-1 outline-none',\r\n        {\r\n            'bg-white pb-2': props.fixed,\r\n        },\r\n        props.className\r\n    );\r\n    const title = (expanded: boolean): JSX.Element => {\r\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\r\n            'mb-1': expanded,\r\n            'cursor-pointer hover:text-blue': !props.fixed,\r\n        });\r\n\r\n        return (\r\n            <span className={className}>\r\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\r\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\r\n            </span>\r\n        );\r\n    };\r\n\r\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\r\n});\r\n\r\n// Menu\r\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\r\n\r\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\r\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n    /** Expandable region reprezenting a group of related links */\r\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\r\n    const scrollableAreas = React.useMemo(() => {\r\n        const scrollableAreas: any[] = [];\r\n\r\n        React.Children.toArray(props.children)\r\n            .filter(child => !!child)\r\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\r\n                if (child.props.fixed) {\r\n                    scrollableAreas.push(child);\r\n                } else {\r\n                    const x = scrollableAreas[scrollableAreas.length - 1];\r\n                    if (Array.isArray(x)) {\r\n                        x.push(child);\r\n                    } else {\r\n                        scrollableAreas.push([child]);\r\n                    }\r\n                }\r\n            });\r\n\r\n        return scrollableAreas;\r\n    }, [props.children]);\r\n\r\n    return (\r\n        <Treeview\r\n            {...props}\r\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\r\n            ref={ref}\r\n        >\r\n            {scrollableAreas.map((area, i) =>\r\n                Array.isArray(area) ? (\r\n                    <div\r\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\r\n                        key={i}\r\n                    >\r\n                        {area}\r\n                    </div>\r\n                ) : (\r\n                    area\r\n                )\r\n            )}\r\n        </Treeview>\r\n    );\r\n}) as ForwardedNavigationMenuWithStatics;\r\n\r\nMenu.Group = MenuGroup;\r\n\r\n// Navigation\r\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\r\n    NavigationProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n    /** Navigation link */\r\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n    /**\r\n     * Container for the expandable groups that hold navigation links.\r\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\r\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\r\n     */\r\n    Menu: ForwardedNavigationMenuWithStatics;\r\n    /**\r\n     * Isolated container within the Navigation.\r\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\r\n     * containing useful information for user and quick actions\r\n     */\r\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { children, ...otherProps } = props;\r\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\r\n\r\n    return (\r\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\r\n            {children}\r\n        </div>\r\n    );\r\n}) as ForwardedNavigationWithStatics;\r\n\r\nNavigation.Menu = Menu;\r\nNavigation.Item = Item;\r\nNavigation.Panel = Panel;\r\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\r\nimport './Navigation.css';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\n\r\n// Item\r\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\r\n    /** Change the style to indicate the link is selected */\r\n    active?: boolean;\r\n    /** Handler to be used when dropping a dragged element over the navigation link */\r\n    onDrop?: React.DragEventHandler;\r\n    /**\r\n     * Small amount of information placed next to the text of the link.\r\n     * This can be any valid react element, for e.g. a `span`.\r\n     * Should be used to indicate a relevant information of the link,\r\n     * for e.g. the number of unread notifications\r\n     */\r\n    postfix?: React.ReactNode;\r\n    /**\r\n     * Small amount of information placed before the text of the link.\r\n     * This can be any valid react element, for e.g. a `span`.\r\n     * Should be used to indicate a feedback for user,\r\n     * for e.g. display some sort of visual informational state or a relevant icon.\r\n     */\r\n    prefix?: React.ReactNode;\r\n    /** Target of the link */\r\n    target?: string;\r\n};\r\n\r\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\r\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\r\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\r\n    const isTreeitem = role === 'treeitem';\r\n    const className = cn(\r\n        'yt-navigation__item cursor-pointer',\r\n        {\r\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\r\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\r\n            'yt-navigation__item--active': active && !isDraggedOver,\r\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\r\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\r\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\r\n            return;\r\n        }\r\n\r\n        if (proxyRef.current) {\r\n            proxyRef.current.click();\r\n        }\r\n    };\r\n\r\n    return (\r\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\r\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\r\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\r\n                {children}\r\n            </a>\r\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\r\n        </span>\r\n    );\r\n});\r\n\r\n// Panel\r\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\r\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\r\n});\r\n\r\n// Group\r\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\r\n\r\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn(\r\n        'flex-shrink-0 space-y-1 outline-none',\r\n        {\r\n            'bg-white pb-2': props.fixed,\r\n        },\r\n        props.className\r\n    );\r\n    const title = (expanded: boolean): JSX.Element => {\r\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\r\n            'mb-1': expanded,\r\n            'cursor-pointer hover:text-blue': !props.fixed,\r\n        });\r\n\r\n        return (\r\n            <span className={className}>\r\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\r\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\r\n            </span>\r\n        );\r\n    };\r\n\r\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\r\n});\r\n\r\n// Menu\r\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\r\n\r\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\r\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n    /** Expandable region reprezenting a group of related links */\r\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\r\n    const scrollableAreas = React.useMemo(() => {\r\n        const scrollableAreas: any[] = [];\r\n\r\n        React.Children.toArray(props.children)\r\n            .filter(child => !!child)\r\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\r\n                if (child.props.fixed) {\r\n                    scrollableAreas.push(child);\r\n                } else {\r\n                    const x = scrollableAreas[scrollableAreas.length - 1];\r\n                    if (Array.isArray(x)) {\r\n                        x.push(child);\r\n                    } else {\r\n                        scrollableAreas.push([child]);\r\n                    }\r\n                }\r\n            });\r\n\r\n        return scrollableAreas;\r\n    }, [props.children]);\r\n\r\n    return (\r\n        <Treeview\r\n            {...props}\r\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\r\n            ref={ref}\r\n        >\r\n            {scrollableAreas.map((area, i) =>\r\n                Array.isArray(area) ? (\r\n                    <div\r\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\r\n                        key={i}\r\n                    >\r\n                        {area}\r\n                    </div>\r\n                ) : (\r\n                    area\r\n                )\r\n            )}\r\n        </Treeview>\r\n    );\r\n}) as ForwardedNavigationMenuWithStatics;\r\n\r\nMenu.Group = MenuGroup;\r\n\r\n// Navigation\r\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\r\n    NavigationProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n    /** Navigation link */\r\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n    /**\r\n     * Container for the expandable groups that hold navigation links.\r\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\r\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\r\n     */\r\n    Menu: ForwardedNavigationMenuWithStatics;\r\n    /**\r\n     * Isolated container within the Navigation.\r\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\r\n     * containing useful information for user and quick actions\r\n     */\r\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { children, ...otherProps } = props;\r\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\r\n\r\n    return (\r\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\r\n            {children}\r\n        </div>\r\n    );\r\n}) as ForwardedNavigationWithStatics;\r\n\r\nNavigation.Menu = Menu;\r\nNavigation.Item = Item;\r\nNavigation.Panel = Panel;\r\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}

package/dist/esm/components/Pagination/Pagination.js

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -9,47 +8,41 @@ import { Select } from '../Select/Select.js';
 import { usePaginationShortcuts } from './usePaginationShortcuts.js';
 export { usePagination } from './usePagination.js';
 
-var _excluded = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
-
-var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
-  var minItemIndex = pageIndex * pageSize + 1;
-  var maxItemIndex = (pageIndex + 1) * pageSize;
+const getShowingLabel = (length, pageIndex, pageSize, texts) => {
+  const minItemIndex = pageIndex * pageSize + 1;
+  const maxItemIndex = (pageIndex + 1) * pageSize;
   return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
 };
 
-var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
-  var length = props.length,
-      pageIndex = props.pageIndex,
-      pageSize = props.pageSize,
-      _props$pageSizes = props.pageSizes,
-      pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100, 500] : _props$pageSizes,
-      setPageIndex = props.setPageIndex,
-      setPageSize = props.setPageSize,
-      _props$showPageContro = props.showPageControls,
-      showPageControls = _props$showPageContro === void 0 ? true : _props$showPageContro,
-      _props$showPageNumber = props.showPageNumbers,
-      showPageNumbers = _props$showPageNumber === void 0 ? true : _props$showPageNumber,
-      _props$showPageSize = props.showPageSize,
-      showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
-      _props$dangerouslyHij = props.dangerouslyHijackGlobalKeyboardNavigation,
-      dangerouslyHijackGlobalKeyboardNavigation = _props$dangerouslyHij === void 0 ? false : _props$dangerouslyHij,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var maxPageIndex = Math.ceil(length / pageSize) - 1;
-  var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
+const Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
+  const {
+    length,
+    pageIndex,
+    pageSize,
+    pageSizes = [10, 25, 50, 100, 500],
+    setPageIndex,
+    setPageSize,
+    showPageControls = true,
+    showPageNumbers = true,
+    showPageSize = true,
+    dangerouslyHijackGlobalKeyboardNavigation = false,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const maxPageIndex = Math.ceil(length / pageSize) - 1;
+  const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
   usePaginationShortcuts({
-    setPageIndex: setPageIndex,
-    maxPageIndex: maxPageIndex,
-    pageIndex: pageIndex,
-    dangerouslyHijackGlobalKeyboardNavigation: dangerouslyHijackGlobalKeyboardNavigation
+    setPageIndex,
+    maxPageIndex,
+    pageIndex,
+    dangerouslyHijackGlobalKeyboardNavigation
   });
-  var pageCount = Math.ceil(length / pageSize);
-  var canPreviousPage = pageIndex > 0;
-  var canNextPage = pageIndex < pageCount - 1;
-  var className = cn('inline-flex relative justify-between items-center', props.className);
+  const pageCount = Math.ceil(length / pageSize);
+  const canPreviousPage = pageIndex > 0;
+  const canNextPage = pageIndex < pageCount - 1;
+  const className = cn('inline-flex relative justify-between items-center', props.className);
   return createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "pagination",
@@ -59,13 +52,11 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
   }, getShowingLabel(length, pageIndex, pageSize, texts), createElement(Select, {
     "aria-label": texts.pagination.pageSize,
     className: "ml-4 !w-20",
-    data: pageSizes.map(function (pageSize) {
-      return {
-        text: String(pageSize),
-        value: pageSize
-      };
-    }),
-    onChange: function onChange(event) {
+    data: pageSizes.map(pageSize => ({
+      text: String(pageSize),
+      value: pageSize
+    })),
+    onChange: event => {
       setPageIndex(0);
       setPageSize(Number(event.target.value));
     },
@@ -77,18 +68,14 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-start",
-    onClick: function onClick() {
-      return setPageIndex(0);
-    },
+    onClick: () => setPageIndex(0),
     "aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
   }), createElement(IconButton, {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-left",
-    onClick: function onClick() {
-      return setPageIndex(pageIndex - 1);
-    },
+    onClick: () => setPageIndex(pageIndex - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
   }), showPageNumbers && pageCount > 0 && createElement(PageNumbers, {
@@ -99,18 +86,14 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-right",
-    onClick: function onClick() {
-      return setPageIndex(pageIndex + 1);
-    },
+    onClick: () => setPageIndex(pageIndex + 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
   }), createElement(IconButton, {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-end",
-    onClick: function onClick() {
-      return setPageIndex(pageCount - 1);
-    },
+    onClick: () => setPageIndex(pageCount - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
   })));