@economic/taco 1.1.9 → 1.1.11

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

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

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

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

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 
-var getInputClasses = function getInputClasses(props) {
+const getInputClasses = props => {
   return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center', {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
@@ -10,7 +10,7 @@ var getInputClasses = function getInputClasses(props) {
     'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
   });
 };
-var getButtonStateClasses = function getButtonStateClasses(invalid) {
+const getButtonStateClasses = invalid => {
   if (invalid) {
     return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
   }

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

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\n                !props.invalid,\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\n                props.invalid,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n    }\n\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;IAEaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;EAChC,OAAOC,EAAE,CACL,gKADK,EAEL;IACI,yCAAyCD,KAAK,CAACE,QADnD;IAEI,kDAAkDF,KAAK,CAACG,QAF5D;IAGI,8BAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;IAII,4BAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;IAKI,uIACI,CAACH,KAAK,CAACK,OANf;IAOI,oIACIL,KAAK,CAACK;GAVT,CAAT;AAaH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,OAAD;EACjC,IAAIA,OAAJ,EAAa;IACT,OAAO,6HAAP;;;EAGJ,OAAO,mHAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\r\n\r\nexport const getInputClasses = props => {\r\n    return cn(\r\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center',\r\n        {\r\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\r\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\r\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\r\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\r\n            'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark':\r\n                !props.invalid,\r\n            'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark':\r\n                props.invalid,\r\n        }\r\n    );\r\n};\r\n\r\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\r\n    if (invalid) {\r\n        return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\r\n    }\r\n\r\n    return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\r\n};\r\n"],"names":["getInputClasses","props","cn","readOnly","disabled","highlighted","invalid","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,OAAOC,EAAE,CACL,gKADK,EAEL;IACI,yCAAyCD,KAAK,CAACE,QADnD;IAEI,kDAAkDF,KAAK,CAACG,QAF5D;IAGI,8BAA8BH,KAAK,CAACI,WAAN,IAAqBJ,KAAK,CAACG,QAH7D;IAII,4BAA4BH,KAAK,CAACI,WAAN,IAAqB,CAACJ,KAAK,CAACG,QAJ5D;IAKI,uIACI,CAACH,KAAK,CAACK,OANf;IAOI,oIACIL,KAAK,CAACK;GAVT,CAAT;AAaH;MAEYC,qBAAqB,GAAID,OAAD;EACjC,IAAIA,OAAJ,EAAa;IACT,OAAO,6HAAP;;;EAGJ,OAAO,mHAAP;AACH;;;;"}

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

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

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

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useMemo, createRef, useEffect, createElement } from 'react';
 import cn from 'classnames';
 import { Spinner } from '../Spinner/Spinner.js';
@@ -9,14 +8,10 @@ import { getInputClasses } from '../Input/util.js';
 import { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation.js';
 import { useListScrollTo } from '../../utils/hooks/useListScrollTo.js';
 
-var _excluded = ["data", "disabled", "highlighted", "id", "invalid", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
-    _excluded2 = ["children", "icon"];
-var getId = function getId(id, value) {
-  return id + "_" + value;
-};
+const getId = (id, value) => `${id}_${value}`;
 
-var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
-  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+const getNextEnabledItem = (event, data, index) => {
+  const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
 
   if (nextIndex) {
     if (nextIndex === index) {
@@ -29,40 +24,35 @@ var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
   return nextIndex;
 };
 
-var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
-  var data = props.data,
-      disabled = props.disabled,
-      id = props.id,
-      loading = props.loading,
-      setCurrentIndex = props.onChange,
-      onClick = props.onClick,
-      onFocus = props.onFocus,
-      onKeyDown = props.onKeyDown,
-      readOnly = props.readOnly,
-      _props$scrollOnFocus = props.scrollOnFocus,
-      scrollOnFocus = _props$scrollOnFocus === void 0 ? false : _props$scrollOnFocus,
-      currentIndex = props.value,
-      multiselect = props.multiselect,
-      _props$selectedIndexe = props.selectedIndexes,
-      selectedIndexes = _props$selectedIndexe === void 0 ? [] : _props$selectedIndexe,
-      _props$allOptionsSele = props.allOptionsSelected,
-      allOptionsSelected = _props$allOptionsSele === void 0 ? false : _props$allOptionsSele,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var listRef = useProxiedRef(ref);
-  var itemRefs = useMemo(function () {
-    return data.map(function () {
-      return createRef();
-    });
-  }, [data]);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var _useListScrollTo = useListScrollTo(listRef, itemRefs),
-      scrollTo = _useListScrollTo.scrollTo;
-
-  useEffect(function () {
+const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref) {
+  const {
+    data,
+    disabled,
+    highlighted,
+    id,
+    invalid: _,
+    loading,
+    onChange: setCurrentIndex,
+    onClick,
+    onFocus,
+    onKeyDown,
+    readOnly,
+    scrollOnFocus = false,
+    value: currentIndex,
+    multiselect,
+    selectedIndexes = [],
+    allOptionsSelected = false,
+    ...otherProps
+  } = props;
+  const listRef = useProxiedRef(ref);
+  const itemRefs = useMemo(() => data.map(() => createRef()), [data]);
+  const {
+    texts
+  } = useLocalization();
+  const {
+    scrollTo
+  } = useListScrollTo(listRef, itemRefs);
+  useEffect(() => {
     var _itemRefs$currentInde;
 
     if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
@@ -73,12 +63,12 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       });
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     scrollTo(currentIndex);
   }, [currentIndex]);
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var nextIndex = getNextEnabledItem(event, data, currentIndex);
+  const handleKeyDown = event => {
+    const nextIndex = getNextEnabledItem(event, data, currentIndex);
 
     if (nextIndex !== undefined && nextIndex !== currentIndex) {
       event.preventDefault();
@@ -88,23 +78,21 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
 
     if (onKeyDown) {
       event.persist();
-      var index = nextIndex !== undefined ? nextIndex : currentIndex;
+      const index = nextIndex !== undefined ? nextIndex : currentIndex;
       onKeyDown(event, index);
     }
   };
 
-  var handleClick = function handleClick(index) {
-    return function (event) {
-      setCurrentIndex(index);
+  const handleClick = index => event => {
+    setCurrentIndex(index);
 
-      if (onClick) {
-        event.persist();
-        onClick(event, index);
-      }
-    };
+    if (onClick) {
+      event.persist();
+      onClick(event, index);
+    }
   };
 
-  var handleFocus = function handleFocus(event) {
+  const handleFocus = event => {
     if (scrollOnFocus) {
       scrollTo(currentIndex);
     }
@@ -115,36 +103,33 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
     }
   };
 
-  var getOptionCheckedState = function getOptionCheckedState(optionValue, index) {
+  const getOptionCheckedState = (optionValue, index) => {
     if (optionValue === '#ALL-OPTIONS#') {
       return allOptionsSelected;
     } else if (!optionValue || !selectedIndexes) {
       return false;
     } else {
-      return selectedIndexes.findIndex(function (i) {
-        return i === index;
-      }) !== -1;
+      return selectedIndexes.findIndex(i => i === index) !== -1;
     }
   };
 
-  var list = _extends({}, otherProps, {
+  const list = { ...otherProps,
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
       'yt-list--multiselect': multiselect,
       'pointer-events-none': disabled,
       'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
-    disabled: disabled,
-    id: id,
+    disabled,
+    id,
     onFocus: !disabled && !readOnly ? handleFocus : undefined,
     onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly: readOnly,
+    readOnly,
     ref: listRef,
     role: 'listbox',
     tabIndex: otherProps.tabIndex || 0
-  });
-
-  var options = data.map(function (option, index) {
-    var depth = option.path ? option.path.split('.').length - 1 : 0;
+  };
+  const options = data.map((option, index) => {
+    const depth = option.path ? option.path.split('.').length - 1 : 0;
     return {
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
@@ -160,7 +145,7 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       ref: itemRefs[index],
       role: 'option',
       style: depth > 0 ? {
-        paddingLeft: depth + 1 + "rem"
+        paddingLeft: `${depth + 1}rem`
       } : undefined
     };
   });
@@ -170,21 +155,17 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
     className: "yt-list__empty"
   }, createElement("span", null, createElement(Spinner, {
     delay: 0
-  })), createElement("span", null, texts.listbox.loading)) : options.length ? options.map(function (_ref) {
-    var children = _ref.children,
-        icon = _ref.icon,
-        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
-
-    return createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
-      className: "flex-grow truncate text-left"
-    }, children), multiselect && createElement(Checkbox, {
-      checked: optionProps['aria-selected'],
-      onChange: function onChange() {
-        return null;
-      },
-      className: "pointer-events-none ml-2 self-center p-px"
-    }));
-  }) : createElement("li", {
+  })), createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
+    children,
+    icon,
+    ...optionProps
+  }) => createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, children), multiselect && createElement(Checkbox, {
+    checked: optionProps['aria-selected'],
+    onChange: () => null,
+    className: "pointer-events-none ml-2 self-center p-px"
+  }))) : createElement("li", {
     className: "yt-list__empty"
   }, createElement("span", null, texts.listbox.empty)));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\r\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\r\nimport './ScrollableList.css';\r\nimport { Spinner } from '../Spinner/Spinner';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { Checkbox } from '../Checkbox/Checkbox';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type ScrollableListItemValue = string | number | boolean | null;\r\n\r\nexport type ScrollableListItem = {\r\n    /**\r\n     * Set whether the item is disabled.\r\n     * This will both change the style and make the item unselectable\r\n     */\r\n    disabled?: boolean;\r\n    /* Specifies whether the item has child items -- intended for internal use only */\r\n    hasChildren?: boolean;\r\n    /** Place an icon before the item's text */\r\n    icon?: React.ReactElement;\r\n    /* The index path to the item -- intended for internal use only */\r\n    path?: string;\r\n    /** Text describing the item */\r\n    text: string | JSX.Element;\r\n    /** Value of the item */\r\n    value: ScrollableListItemValue;\r\n    /** Child items to show hierarchical data */\r\n    children?: ScrollableListItem[];\r\n};\r\n\r\n/** @internal */\r\nexport type ScrollableListProps = Omit<\r\n    React.HTMLAttributes<HTMLUListElement>,\r\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\r\n> & {\r\n    /** Data indicating the options in scrollable list */\r\n    data: ScrollableListItem[];\r\n    /** Sets the list to be disabled */\r\n    disabled?: boolean;\r\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** Set an id for the scrollable list */\r\n    id: string;\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.\r\n     */\r\n    loading?: boolean;\r\n    /**\r\n     * Handler called when current active/selected option changes in a scrollable list.\r\n     * @param index indicates the index of the current active option\r\n     */\r\n    onChange: (index: number) => void;\r\n    /** Handler called when option is clicked */\r\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\r\n    /**\r\n     * Set whether the selected item should be scrolled into view when listbox is focused.\r\n     * Default value is `false`\r\n     */\r\n    scrollOnFocus?: boolean;\r\n    /** Handler called when a key is pressed */\r\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\r\n    /* Sets the list to read only mode */\r\n    readOnly?: boolean;\r\n    /**\r\n     * Value of the scrollable list representing the selected item.\r\n     * It needs to be an existing value from the provided data.\r\n     */\r\n    value: number | undefined;\r\n    /**\r\n     * Allows to select multiple items from the list\r\n     */\r\n    multiselect?: boolean;\r\n    /**\r\n     * Contains the currently selected values when multiselect mode is ON.\r\n     */\r\n    selectedIndexes?: number[];\r\n    /**\r\n     * True when all available (not disabled) options are selected\r\n     */\r\n    allOptionsSelected?: boolean;\r\n};\r\n\r\n/** @internal */\r\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\r\n\r\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\r\n\r\nconst getNextEnabledItem = (\r\n    event: React.KeyboardEvent<HTMLElement>,\r\n    data: ScrollableListItem[],\r\n    index: number | undefined\r\n): number | undefined => {\r\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\r\n\r\n    if (nextIndex) {\r\n        if (nextIndex === index) {\r\n            return index;\r\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\r\n            return getNextEnabledItem(event, data, nextIndex);\r\n        }\r\n    }\r\n\r\n    return nextIndex;\r\n};\r\n\r\nexport const ScrollableList = React.forwardRef(function ScrollableList(\r\n    props: ScrollableListProps,\r\n    ref: React.Ref<HTMLUListElement>\r\n) {\r\n    const {\r\n        data,\r\n        disabled,\r\n        highlighted,\r\n        id,\r\n        invalid: _,\r\n        loading,\r\n        onChange: setCurrentIndex,\r\n        onClick,\r\n        onFocus,\r\n        onKeyDown,\r\n        readOnly,\r\n        scrollOnFocus = false,\r\n        value: currentIndex,\r\n        multiselect,\r\n        selectedIndexes = [],\r\n        allOptionsSelected = false,\r\n        ...otherProps\r\n    } = props;\r\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\r\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\r\n    const { texts } = useLocalization();\r\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\r\n\r\n    React.useEffect(() => {\r\n        if (currentIndex && itemRefs[currentIndex]?.current) {\r\n            itemRefs[currentIndex].current?.scrollIntoView({\r\n                block: 'center',\r\n            });\r\n        }\r\n    }, []);\r\n\r\n    React.useEffect(() => {\r\n        scrollTo(currentIndex);\r\n    }, [currentIndex]);\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\r\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\r\n\r\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\r\n            event.preventDefault();\r\n            scrollTo(nextIndex);\r\n            setCurrentIndex(nextIndex);\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            event.persist();\r\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\r\n            onKeyDown(event, index);\r\n        }\r\n    };\r\n\r\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\r\n        setCurrentIndex(index);\r\n\r\n        if (onClick) {\r\n            event.persist();\r\n            onClick(event, index);\r\n        }\r\n    };\r\n\r\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\r\n        if (scrollOnFocus) {\r\n            scrollTo(currentIndex);\r\n        }\r\n\r\n        if (onFocus) {\r\n            event.persist();\r\n            onFocus(event);\r\n        }\r\n    };\r\n\r\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\r\n        if (optionValue === '#ALL-OPTIONS#') {\r\n            return allOptionsSelected;\r\n        } else if (!optionValue || !selectedIndexes) {\r\n            return false;\r\n        } else {\r\n            return selectedIndexes.findIndex(i => i === index) !== -1;\r\n        }\r\n    };\r\n\r\n    const list: React.HTMLAttributes<HTMLUListElement> &\r\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\r\n        ...otherProps,\r\n        className: cn(\r\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\r\n            getInputClasses(props),\r\n            {\r\n                'yt-list--multiselect': multiselect,\r\n                'pointer-events-none': disabled,\r\n                'cursor-not-allowed': disabled || readOnly,\r\n            },\r\n            otherProps.className\r\n        ),\r\n        disabled,\r\n        id,\r\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\r\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\r\n        readOnly,\r\n        ref: listRef,\r\n        role: 'listbox',\r\n        tabIndex: otherProps.tabIndex || 0,\r\n    };\r\n\r\n    const options = data.map((option, index) => {\r\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\r\n\r\n        return {\r\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\r\n            'data-focused': currentIndex === index,\r\n            children: option.text,\r\n            className: cn(\r\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\r\n                {\r\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\r\n                }\r\n            ),\r\n            disabled: option.disabled,\r\n            icon: option.icon,\r\n            id: getId(id, option.value),\r\n            key: getId(id, option.value),\r\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\r\n            ref: itemRefs[index],\r\n            role: 'option',\r\n            style:\r\n                depth > 0\r\n                    ? {\r\n                          paddingLeft: `${depth + 1}rem`,\r\n                      }\r\n                    : undefined,\r\n        };\r\n    });\r\n\r\n    return (\r\n        <ul {...list} data-taco=\"scrollable-list\">\r\n            {loading ? (\r\n                <li className=\"yt-list__empty\">\r\n                    <span>\r\n                        <Spinner delay={0} />\r\n                    </span>\r\n                    <span>{texts.listbox.loading}</span>\r\n                </li>\r\n            ) : options.length ? (\r\n                options.map(({ children, icon, ...optionProps }) => (\r\n                    <li {...optionProps}>\r\n                        {icon}\r\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\r\n                        {multiselect && (\r\n                            <Checkbox\r\n                                checked={optionProps['aria-selected']}\r\n                                onChange={() => null}\r\n                                className=\"pointer-events-none ml-2 self-center p-px\"\r\n                            />\r\n                        )}\r\n                    </li>\r\n                ))\r\n            ) : (\r\n                <li className=\"yt-list__empty\">\r\n                    <span>{texts.listbox.empty}</span>\r\n                </li>\r\n            )}\r\n        </ul>\r\n    );\r\n});\r\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","current","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}