npm - @economic/taco - Versions diffs - 1.1.13-alpha.0 → 1.2.0 - Mend

@economic/taco 1.1.13-alpha.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

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

	@@ -1 +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":";;;;;;;;;;;;;IA2FaA,KAAK,GAAG,SAARA,KAAQ,CAACC,EAAD,EAAaC,KAAb;EAAA,OAA2DD,EAA3D,SAAiEC,KAAjE;AAAA;;AAErB,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CACvBC,KADuB,EAEvBC,IAFuB,EAGvBC,KAHuB;EAKvB,IAAMC,SAAS,GAAGC,uBAAuB,CAACJ,KAAK,CAACK,OAAP,EAAgBJ,IAAI,CAACK,MAArB,EAA6BJ,KAA7B,CAAzC;;EAEA,IAAIC,SAAJ,EAAe;IACX,IAAIA,SAAS,KAAKD,KAAlB,EAAyB;MACrB,OAAOA,KAAP;KADJ,MAEO,IAAID,IAAI,CAACE,SAAD,CAAJ,IAAmBF,IAAI,CAACE,SAAD,CAAJ,CAAgBI,QAAvC,EAAiD;MACpD,OAAOR,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcE,SAAd,CAAzB;;;;EAIR,OAAOA,SAAP;AACH,CAhBD;;IAkBaK,cAAc,gBAAGC,UAAA,CAAiB,SAASD,cAAT,CAC3CE,KAD2C,EAE3CC,GAF2C;MAKvCV,IADJ,GAkBIS,KAlBJ,CACIT,IADJ;MAEIM,QAFJ,GAkBIG,KAlBJ,CAEIH,QAFJ;MAIIV,EAJJ,GAkBIa,KAlBJ,CAIIb,EAJJ;MAMIe,OANJ,GAkBIF,KAlBJ,CAMIE,OANJ;MAOcC,eAPd,GAkBIH,KAlBJ,CAOII,QAPJ;MAQIC,OARJ,GAkBIL,KAlBJ,CAQIK,OARJ;MASIC,OATJ,GAkBIN,KAlBJ,CASIM,OATJ;MAUIC,SAVJ,GAkBIP,KAlBJ,CAUIO,SAVJ;MAWIC,QAXJ,GAkBIR,KAlBJ,CAWIQ,QAXJ;6BAkBIR,KAlBJ,CAYIS,aAZJ;MAYIA,aAZJ,qCAYoB,KAZpB;MAaWC,YAbX,GAkBIV,KAlBJ,CAaIZ,KAbJ;MAcIuB,WAdJ,GAkBIX,KAlBJ,CAcIW,WAdJ;8BAkBIX,KAlBJ,CAeIY,eAfJ;MAeIA,eAfJ,sCAesB,EAftB;8BAkBIZ,KAlBJ,CAgBIa,kBAhBJ;MAgBIA,kBAhBJ,sCAgByB,KAhBzB;MAiBOC,UAjBP,iCAkBId,KAlBJ;;EAmBA,IAAMe,OAAO,GAAGC,aAAa,CAAmBf,GAAnB,CAA7B;EACA,IAAMgB,QAAQ,GAAGlB,OAAA,CAAc;IAAA,OAAMR,IAAI,CAAC2B,GAAL,CAAS;MAAA,OAAMnB,SAAA,EAAN;KAAT,CAAN;GAAd,EAAsE,CAACR,IAAD,CAAtE,CAAjB;;EACA,uBAAkB4B,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,uBAAqBC,eAAe,CAACN,OAAD,EAAUE,QAAV,CAApC;MAAQK,QAAR,oBAAQA,QAAR;;EAEAvB,SAAA,CAAgB;;;IACZ,IAAIW,YAAY,6BAAIO,QAAQ,CAACP,YAAD,CAAZ,kDAAI,sBAAwBa,OAA5C,EAAqD;MAAA;;MACjD,0BAAAN,QAAQ,CAACP,YAAD,CAAR,CAAuBa,OAAvB,kFAAgCC,cAAhC,CAA+C;QAC3CC,KAAK,EAAE;OADX;;GAFR,EAMG,EANH;EAQA1B,SAAA,CAAgB;IACZuB,QAAQ,CAACZ,YAAD,CAAR;GADJ,EAEG,CAACA,YAAD,CAFH;;EAIA,IAAMgB,aAAa,GAAG,SAAhBA,aAAgB,CAACpC,KAAD;IAClB,IAAMG,SAAS,GAAGJ,kBAAkB,CAACC,KAAD,EAAQC,IAAR,EAAcmB,YAAd,CAApC;;IAEA,IAAIjB,SAAS,KAAKkC,SAAd,IAA2BlC,SAAS,KAAKiB,YAA7C,EAA2D;MACvDpB,KAAK,CAACsC,cAAN;MACAN,QAAQ,CAAC7B,SAAD,CAAR;MACAU,eAAe,CAACV,SAAD,CAAf;;;IAGJ,IAAIc,SAAJ,EAAe;MACXjB,KAAK,CAACuC,OAAN;MACA,IAAMrC,KAAK,GAAGC,SAAS,KAAKkC,SAAd,GAA0BlC,SAA1B,GAAsCiB,YAApD;MACAH,SAAS,CAACjB,KAAD,EAAQE,KAAR,CAAT;;GAZR;;EAgBA,IAAMsC,WAAW,GAAG,SAAdA,WAAc,CAACtC,KAAD;IAAA,OAAmB,UAACF,KAAD;MACnCa,eAAe,CAACX,KAAD,CAAf;;MAEA,IAAIa,OAAJ,EAAa;QACTf,KAAK,CAACuC,OAAN;QACAxB,OAAO,CAACf,KAAD,EAAQE,KAAR,CAAP;;KALY;GAApB;;EASA,IAAMuC,WAAW,GAAG,SAAdA,WAAc,CAACzC,KAAD;IAChB,IAAImB,aAAJ,EAAmB;MACfa,QAAQ,CAACZ,YAAD,CAAR;;;IAGJ,IAAIJ,OAAJ,EAAa;MACThB,KAAK,CAACuC,OAAN;MACAvB,OAAO,CAAChB,KAAD,CAAP;;GAPR;;EAWA,IAAM0C,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,WAAD,EAAsBzC,KAAtB;IAC1B,IAAIyC,WAAW,KAAK,eAApB,EAAqC;MACjC,OAAOpB,kBAAP;KADJ,MAEO,IAAI,CAACoB,WAAD,IAAgB,CAACrB,eAArB,EAAsC;MACzC,OAAO,KAAP;KADG,MAEA;MACH,OAAOA,eAAe,CAACsB,SAAhB,CAA0B,UAAAC,CAAC;QAAA,OAAIA,CAAC,KAAK3C,KAAV;OAA3B,MAAgD,CAAC,CAAxD;;GANR;;EAUA,IAAM4C,IAAI,gBAEHtB,UAFG;IAGNuB,SAAS,EAAEC,EAAE,CACT,gEADS,EAETC,eAAe,CAACvC,KAAD,CAFN,EAGT;MACI,wBAAwBW,WAD5B;MAEI,uBAAuBd,QAF3B;MAGI,sBAAsBA,QAAQ,IAAIW;KAN7B,EAQTM,UAAU,CAACuB,SARF,CAHP;IAaNxC,QAAQ,EAARA,QAbM;IAcNV,EAAE,EAAFA,EAdM;IAeNmB,OAAO,EAAE,CAACT,QAAD,IAAa,CAACW,QAAd,GAAyBuB,WAAzB,GAAuCJ,SAf1C;IAgBNpB,SAAS,EAAE,CAACV,QAAD,IAAa,CAACW,QAAd,GAAyBkB,aAAzB,GAAyCC,SAhB9C;IAiBNnB,QAAQ,EAARA,QAjBM;IAkBNP,GAAG,EAAEc,OAlBC;IAmBNyB,IAAI,EAAE,SAnBA;IAoBNC,QAAQ,EAAE3B,UAAU,CAAC2B,QAAX,IAAuB;IApBrC;;EAuBA,IAAMC,OAAO,GAAGnD,IAAI,CAAC2B,GAAL,CAAS,UAACyB,MAAD,EAASnD,KAAT;IACrB,IAAMoD,KAAK,GAAGD,MAAM,CAACE,IAAP,GAAcF,MAAM,CAACE,IAAP,CAAYC,KAAZ,CAAkB,GAAlB,EAAuBlD,MAAvB,GAAgC,CAA9C,GAAkD,CAAhE;IAEA,OAAO;MACH,iBAAiBe,WAAW,GAAGqB,qBAAqB,CAACe,MAAM,CAACJ,MAAM,CAACvD,KAAR,CAAP,EAAuBI,KAAvB,CAAxB,GAAwDkB,YAAY,KAAKlB,KADlG;MAEH,gBAAgBkB,YAAY,KAAKlB,KAF9B;MAGHwD,QAAQ,EAAEL,MAAM,CAACM,IAHd;MAIHZ,SAAS,EAAEC,EAAE,CACT,yGADS,EAET;QACI,0BAA0BM,KAAK,KAAK,CAAV,IAAe,CAAC,CAACD,MAAM,CAACO;OAH7C,CAJV;MAUHrD,QAAQ,EAAE8C,MAAM,CAAC9C,QAVd;MAWHsD,IAAI,EAAER,MAAM,CAACQ,IAXV;MAYHhE,EAAE,EAAED,KAAK,CAACC,EAAD,EAAKwD,MAAM,CAACvD,KAAZ,CAZN;MAaHgE,GAAG,EAAElE,KAAK,CAACC,EAAD,EAAKwD,MAAM,CAACvD,KAAZ,CAbP;MAcHiB,OAAO,EAAE,CAACR,QAAD,IAAa,CAACW,QAAd,GAAyBsB,WAAW,CAACtC,KAAD,CAApC,GAA8CmC,SAdpD;MAeH1B,GAAG,EAAEgB,QAAQ,CAACzB,KAAD,CAfV;MAgBHgD,IAAI,EAAE,QAhBH;MAiBHa,KAAK,EACDT,KAAK,GAAG,CAAR,GACM;QACIU,WAAW,EAAKV,KAAK,GAAG,CAAb;OAFrB,GAIMjB;KAtBd;GAHY,CAAhB;EA6BA,OACI5B,aAAA,KAAA,oBAAQqC;iBAAgB;IAAxB,EACKlC,OAAO,GACJH,aAAA,KAAA;IAAIsC,SAAS,EAAC;GAAd,EACItC,aAAA,OAAA,MAAA,EACIA,aAAA,CAACwD,OAAD;IAASC,KAAK,EAAE;GAAhB,CADJ,CADJ,EAIIzD,aAAA,OAAA,MAAA,EAAOqB,KAAK,CAACqC,OAAN,CAAcvD,OAArB,CAJJ,CADI,GAOJwC,OAAO,CAAC9C,MAAR,GACA8C,OAAO,CAACxB,GAAR,CAAY;IAAA,IAAG8B,QAAH,QAAGA,QAAH;QAAaG,IAAb,QAAaA,IAAb;QAAsBO,WAAtB;;IAAA,OACR3D,aAAA,KAAA,oBAAQ2D,YAAR,EACKP,IADL,EAEIpD,aAAA,OAAA;MAAMsC,SAAS,EAAC;KAAhB,EAAgDW,QAAhD,CAFJ,EAGKrC,WAAW,IACRZ,aAAA,CAAC4D,QAAD;MACIC,OAAO,EAAEF,WAAW,CAAC,eAAD;MACpBtD,QAAQ,EAAE;QAAA,OAAM,IAAN;;MACViC,SAAS,EAAC;KAHd,CAJR,CADQ;GAAZ,CADA,GAeAtC,aAAA,KAAA;IAAIsC,SAAS,EAAC;GAAd,EACItC,aAAA,OAAA,MAAA,EAAOqB,KAAK,CAACqC,OAAN,CAAcI,KAArB,CADJ,CAvBR,CADJ;AA8BH,CAxK6B;;;;"}
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 { getNextIndexFromKey } 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 = getNextIndexFromKey(event.key, 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","getNextIndexFromKey","key","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","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

package/dist/esm/components/Listbox/useListbox.js CHANGED Viewed

@@ -1,46 +1,40 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
 import { useFlattenedData, getIndexFromValue, getActiveDescendant, setInputValueByRef, findByValue, sanitizeItem } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
-var _excluded = ["data", "defaultValue", "disabled", "emptyValue", "id", "invalid", "name", "onChange", "onFocus", "onKeyDown", "value"];
-var useListbox = function useListbox(_ref, ref) {
-  var _ref$data = _ref.data,
-      externalData = _ref$data === void 0 ? [] : _ref$data,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      emptyValue = _ref.emptyValue,
-      nativeId = _ref.id,
-      invalid = _ref.invalid,
-      name = _ref.name,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? emptyValue : _ref$value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var data = useFlattenedData(emptyValue !== undefined ? [{
+const useListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue,
+  id: nativeId,
+  invalid,
+  name,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value = emptyValue,
+  ...otherProps
+}, ref) => {
+  const data = useFlattenedData(emptyValue !== undefined ? [{
     text: '',
     value: emptyValue
-  }].concat(externalData) : externalData);
-  var id = useMemo(function () {
-    return nativeId || v4();
-  }, [nativeId]);
-  var inputRef = useProxiedRef(ref);
-  var currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
-  var _useTypeahead = useTypeahead({
-    data: data,
-    currentIndex: currentIndex
-  }),
-      getNextIndex = _useTypeahead.getNextIndex;
-  var setInputValueByIndex = function setInputValueByIndex(index) {
+  }, ...externalData] : externalData);
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useProxiedRef(ref);
+  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const setInputValueByIndex = index => {
     if (index !== undefined) {
-      var option = data[index];
+      const option = data[index];
       if (option && !option.disabled) {
         setInputValueByRef(inputRef.current, option.value);
@@ -48,14 +42,14 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
-  var handleListboxChange = function handleListboxChange(index) {
+  const handleListboxChange = index => {
     setInputValueByIndex(index);
   };
-  useEffect(function () {
+  useEffect(() => {
     if (data.length && currentIndex === undefined) {
       if (defaultValue !== undefined) {
-        var defaultValueIndex = getIndexFromValue(data, defaultValue);
+        const defaultValueIndex = getIndexFromValue(data, defaultValue);
         if (defaultValueIndex !== undefined) {
           setInputValueByIndex(defaultValueIndex);
@@ -66,11 +60,12 @@ var useListbox = function useListbox(_ref, ref) {
     }
   }, [data]);
-  var handleListboxKeyDown = function handleListboxKeyDown(event) {
-    var charKey = String.fromCharCode(event.keyCode);
+  const handleListboxKeyDown = event => {
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
-    if (charKey.match(/(\w)/g)) {
-      var nextIndex = getNextIndex(charKey);
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+      const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);
@@ -85,7 +80,7 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
-  var handleListboxFocus = function handleListboxFocus(event) {
+  const handleListboxFocus = event => {
     if (currentIndex === undefined && data.length) {
       setInputValueByIndex(0);
     }
@@ -96,26 +91,24 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
-  var handleInputChange = function handleInputChange(event) {
+  const handleInputChange = event => {
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      var item = findByValue(data, event.target.value);
+      const item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
-      var indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+      const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
       if (indexes.length > 1) {
         // we don't want to map the current item
         indexes.pop(); // we need to rebuild the path as we map
-        var lastPath;
-        event.detail.parents = indexes.map(function (i) {
+        let lastPath;
+        event.detail.parents = indexes.map(i => {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(function (i) {
-            return i.path === lastPath;
-          }));
+          return sanitizeItem(data.find(i => i.path === lastPath));
         });
       }
@@ -123,30 +116,29 @@ var useListbox = function useListbox(_ref, ref) {
     }
   };
-  var list = _extends({}, otherProps, {
+  const list = { ...otherProps,
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data: data,
-    disabled: disabled,
-    id: id,
-    invalid: invalid,
+    data,
+    disabled,
+    id,
+    invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: true,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex
-  });
-  var input = {
-    name: name,
+  };
+  const input = {
+    name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list: list,
-    input: input
+    list,
+    input
   };
 };

package/dist/esm/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n list: ScrollableListProps;\n input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n {\n data: externalData = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n invalid,\n name,\n onChange,\n onFocus,\n onKeyDown,\n value = emptyValue,\n ...otherProps\n }: ListboxProps,\n ref: React.Ref<HTMLInputElement>\n): useListbox => {\n const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n const id = React.useMemo(() => nativeId \|\| uuid(), [nativeId]);\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\n const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\n const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n const setInputValueByIndex = (index: number \| undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value);\n }\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setInputValueByIndex(index);\n };\n\n React.useEffect(() => {\n if (data.length && currentIndex === undefined) {\n if (defaultValue !== undefined) {\n const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n if (defaultValueIndex !== undefined) {\n setInputValueByIndex(defaultValueIndex);\n }\n } else {\n setInputValueByIndex(0);\n }\n }\n }, [data]);\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n const charKey = String.fromCharCode(event.keyCode);\n\n if (charKey.~~match(~~/(\\w)/g)) {\n const nextIndex = getNextIndex(charKey);\n\n if (nextIndex > -1 && nextIndex !== currentIndex) {\n setInputValueByIndex(nextIndex);\n }\n return;\n }\n\n if (onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n if (currentIndex === undefined && data.length) {\n setInputValueByIndex(0);\n }\n\n if (onFocus) {\n event.persist();\n onFocus(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(data, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(data.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const list: ScrollableListProps = {\n ...otherProps,\n 'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n data,\n disabled,\n id,\n invalid,\n onChange: handleListboxChange,\n onFocus: handleListboxFocus,\n onKeyDown: handleListboxKeyDown,\n scrollOnFocus: true,\n tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n value: currentIndex,\n };\n\n const input = {\n name,\n onChange: handleInputChange,\n ref: inputRef,\n tabIndex: -1,\n value: value ?? '',\n };\n\n return { list, input };\n};\n"],"names":["useListbox","~~ref","~~data","externalData","defaultValue","disabled","emptyValue","~~nativeId~~","id","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","~~useTypeahead~~","~~getNextIndex~~","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","~~String~~","~~fromCharCode~~","~~keyCode","match","~~nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"~~;;;;;;;;IAaaA~~,UAAU,GAAG,~~SAAbA~~,~~UAAa~~,~~OAetBC~~,~~GAfsB~~;~~uBAElBC~~;~~MAAMC~~,~~sCAAe~~;~~MACrBC~~,~~oBAAAA~~;~~MACAC~~,~~gBAAAA~~;~~MACAC~~,~~kBAAAA~~;~~MACIC~~,~~gBAAJC~~;~~MACAC~~,~~eAAAA~~;~~MACAC~~,~~YAAAA~~;~~MACAC~~,~~gBAAAA~~;~~MACAC~~,~~eAAAA~~;~~MACAC~~,~~iBAAAA~~;~~wBACAC;MAAAA~~,~~gCAAQR~~;~~MACLS;;EAIP~~,~~IAAMb~~,IAAI,~~GAAGc~~,gBAAgB,~~CAACV~~,UAAU,~~KAAKW~~,SAAf,~~IAA4B~~;IAAEC,IAAI,EAAE,EAAR;~~IAAYJ~~,KAAK,EAAER;~~GAA/C~~,~~SAAgEH~~,~~YAAhE~~,~~IAAgFA~~,YAAjF,CAA7B;EACA,~~IAAMK~~,EAAE,~~GAAGW~~,OAAA,CAAc~~;IAAA~~,~~OAAMZ~~,QAAQ,IAAIa,EAAI,~~EAAtB;GAAd~~,EAAwC,CAACb,QAAD,CAAxC,CAAX;EACA,~~IAAMc~~,QAAQ,GAAGC,aAAa,~~CAAmBrB~~,GAAnB,CAA9B;EACA,~~IAAMsB~~,YAAY,~~GAAGT~~,KAAK,~~KAAKG~~,SAAV,GAAsBO,iBAAiB,~~CAACtB~~,IAAD,EAAOY,KAAP,CAAvC,~~GAAuDG~~,SAA5E;;EACA,~~oBAAyBQ~~,YAAY,CAAC;~~IAAEvB~~,~~IAAI,EAAJA,~~IAAF;~~IAAQqB,YAAY,EAAZA~~;GAAT,CAArC~~;MAAQG,YAAR,iBAAQA,YAAR~~;;EAEA,~~IAAMC~~,oBAAoB,~~GAAG~~,~~SAAvBA,oBAAuB,CAACC,~~KAAD;IACzB,IAAIA,KAAK,KAAKX,SAAd,EAAyB;MACrB,~~IAAMY~~,MAAM,~~GAAG3B~~,IAAI,~~CAAC0B~~,KAAD,CAAnB;;MAEA,IAAIC,MAAM,IAAI,CAACA,MAAM,~~CAACxB~~,QAAtB,EAAgC;~~QAC5ByB~~,kBAAkB,CAACT,QAAQ,CAACU,OAAV,EAAmBF,MAAM,~~CAACf~~,KAA1B,CAAlB;;;GALZ;;EAUA,~~IAAMkB~~,mBAAmB,~~GAAG~~,~~SAAtBA,mBAAsB,CAACJ,~~KAAD;IACxBD,oBAAoB,CAACC,KAAD,CAApB;GADJ;;EAIAT,SAAA,CAAgB;IACZ,~~IAAIjB~~,IAAI,~~CAAC+B~~,MAAL,IAAeV,YAAY,KAAKN,SAApC,EAA+C;MAC3C,~~IAAIb~~,YAAY,~~KAAKa~~,SAArB,EAAgC;QAC5B,~~IAAMiB~~,iBAAiB,GAAGV,iBAAiB,~~CAACtB~~,IAAD,EAAOE,YAAP,CAA3C;;QAEA,~~IAAI8B~~,iBAAiB,KAAKjB,SAA1B,EAAqC;UACjCU,oBAAoB,CAACO,iBAAD,CAApB;;OAJR,MAMO;QACHP,oBAAoB,CAAC,CAAD,CAApB;;;GATZ,EAYG,~~CAACzB~~,IAAD,CAZH;;EAcA,~~IAAMiC~~,oBAAoB,~~GAAG~~,~~SAAvBA,oBAAuB,CAACC,~~KAAD;IACzB,~~IAAMC~~,OAAO,~~GAAGC~~,~~MAAM~~,~~CAACC~~,~~YAAP~~,~~CAAoBH~~,~~KAAK~~,~~CAACI~~,~~OAA1B~~,~~CAAhB;;IAEA~~,~~IAAIH~~,~~OAAO~~,~~CAACI~~,~~KAAR~~,~~CAAc~~,~~OAAd~~,~~CAAJ~~,~~EAA4B~~;~~MACxB~~,~~IAAMC~~,SAAS,~~GAAGhB~~,YAAY,~~CAACW~~,OAAD,CAA9B;;MAEA,~~IAAIK~~,SAAS,GAAG,CAAC,CAAb,IAAkBA,SAAS,~~KAAKnB~~,YAApC,EAAkD;QAC9CI,oBAAoB,~~CAACe~~,SAAD,CAApB;;;MAEJ;;;IAGJ,~~IAAI7B~~,SAAJ,EAAe;~~MACXuB~~,KAAK,~~CAACO~~,OAAN;~~MACA9B~~,SAAS,~~CAACuB~~,KAAD,CAAT;;~~GAdR~~;;~~EAkBA~~,~~IAAMQ~~,kBAAkB,~~GAAG~~,~~SAArBA,kBAAqB,CAACR,~~KAAD;IACvB,IAAIb,YAAY,KAAKN,SAAjB,~~IAA8Bf~~,IAAI,~~CAAC+B~~,MAAvC,EAA+C;MAC3CN,oBAAoB,CAAC,CAAD,CAApB;;;IAGJ,~~IAAIf~~,OAAJ,EAAa;~~MACTwB~~,KAAK,~~CAACO~~,OAAN;~~MACA/B~~,OAAO,~~CAACwB~~,KAAD,CAAP;;GAPR;;EAWA,~~IAAMS~~,iBAAiB,~~GAAG~~,~~SAApBA,iBAAoB,CAACT,~~KAAD;IACtBA,KAAK,~~CAACO~~,OAAN;;IAEA,~~IAAIhC~~,QAAJ,EAAc;MAAA;;MACV,~~IAAMmC~~,IAAI,GAAGC,WAAW,~~CAAC7C~~,IAAD,~~EAAOkC~~,KAAK,~~CAACY~~,MAAN,~~CAAalC~~,KAApB,CAAxB;~~MACCsB~~,KAAa,~~CAACa~~,MAAd,GAAuBC,YAAY,CAACJ,IAAD,CAAnC;MAED,~~IAAMK~~,OAAO,uBAAGL,IAAH,aAAGA,IAAH,qCAAGA,IAAI,CAAEM,IAAT,+CAAG,WAAYC,KAAZ,CAAkB,GAAlB,CAAH,+DAA6B,EAA1C;;MAEA,IAAIF,OAAO,~~CAAClB~~,MAAR,GAAiB,CAArB,EAAwB;;~~QAEpBkB~~,OAAO,CAACG,GAAR,GAFoB;;QAIpB,IAAIC,QAAJ;~~QAECnB~~,KAAa,~~CAACa~~,MAAd,CAAqBO,OAArB,GAA+BL,OAAO,CAACM,GAAR,~~CAAY~~,~~UAAAC,~~CAAC;UACzCH,QAAQ,GAAGA,QAAQ,GAAG,CAACA,QAAD,EAAWG,CAAX,EAAcC,IAAd,CAAmB,GAAnB,CAAH,GAA6BD,CAAhD;UACA,OAAOR,YAAY,~~CAAChD~~,IAAI,~~CAAC0D~~,IAAL,~~CAAU~~,~~UAAAF,~~CAAC~~;YAAA~~,~~OAAIA~~,CAAC,CAACN,IAAF,KAAWG,~~QAAf;WAAX~~,CAAD,CAAnB;SAF4B,CAA/B;;;~~MAML5C~~,QAAQ,~~CAACyB~~,KAAD,CAAR;;GArBR;;EAyBA,~~IAAMyB~~,IAAI,~~gBACH9C~~,~~UADG~~;~~IAEN~~,~~yBAAyB+C~~,mBAAmB,~~CAAC5D~~,IAAD,~~EAAOqB~~,YAAP,~~EAAqBf~~,EAArB,~~CAFtC~~;~~IAGNN~~,~~IAAI,EAAJA,IAHM~~;~~IAING~~,~~QAAQ,EAARA,QAJM~~;~~IAKNG~~,~~EAAE,EAAFA,EALM~~;~~IAMNC~~,~~OAAO,EAAPA,OANM~~;~~IAONE~~,QAAQ,~~EAAEqB~~,~~mBAPJ~~;~~IAQNpB~~,OAAO,~~EAAEgC~~,~~kBARH~~;~~IASN/B~~,SAAS,~~EAAEsB~~,~~oBATL~~;~~IAUN4B~~,aAAa,EAAE,~~IAVT~~;~~IAWNC~~,QAAQ,~~EAAE3D~~,QAAQ,GAAG,CAAC,CAAJ,GAAQU,UAAU,~~CAACiD~~,QAAX,~~GAAsBjD~~,UAAU,~~CAACiD~~,QAAjC,GAA4C,~~CAXhE~~;~~IAYNlD~~,KAAK,~~EAAES~~;~~IAZX;;~~EAeA,~~IAAM0C~~,KAAK,GAAG;~~IACVvD~~,~~IAAI,EAAJA,~~IADU;IAEVC,QAAQ,~~EAAEkC~~,iBAFA;~~IAGV5C~~,GAAG,~~EAAEoB~~,QAHK;~~IAIV2C~~,QAAQ,EAAE,CAAC,CAJD;~~IAKVlD~~,KAAK,EAAEA,KAAF,aAAEA,KAAF,cAAEA,KAAF,GAAW;GALpB;EAQA,OAAO;~~IAAE+C~~,~~IAAI,EAAJA,~~IAAF;IAAQI~~,KAAK,EAALA~~;GAAf;AACH;;;;"}
1	+ {"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n list: ScrollableListProps;\n input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n {\n data: externalData = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n invalid,\n name,\n onChange,\n onFocus,\n onKeyDown,\n value = emptyValue,\n ...otherProps\n }: ListboxProps,\n ref: React.Ref<HTMLInputElement>\n): useListbox => {\n const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n const id = React.useMemo(() => nativeId \|\| uuid(), [nativeId]);\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\n const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\n const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n const setInputValueByIndex = (index: number \| undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value);\n }\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setInputValueByIndex(index);\n };\n\n React.useEffect(() => {\n if (data.length && currentIndex === undefined) {\n if (defaultValue !== undefined) {\n const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n if (defaultValueIndex !== undefined) {\n setInputValueByIndex(defaultValueIndex);\n }\n } else {\n setInputValueByIndex(0);\n }\n }\n }, [data]);\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n const charKey = event.key;\n\n // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n const nextIndex = getNextIndex(charKey);\n\n if (nextIndex > -1 && nextIndex !== currentIndex) {\n setInputValueByIndex(nextIndex);\n }\n return;\n }\n\n if (onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n if (currentIndex === undefined && data.length) {\n setInputValueByIndex(0);\n }\n\n if (onFocus) {\n event.persist();\n onFocus(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(data, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(data.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const list: ScrollableListProps = {\n ...otherProps,\n 'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n data,\n disabled,\n id,\n invalid,\n onChange: handleListboxChange,\n onFocus: handleListboxFocus,\n onKeyDown: handleListboxKeyDown,\n scrollOnFocus: true,\n tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n value: currentIndex,\n };\n\n const input = {\n name,\n onChange: handleInputChange,\n ref: inputRef,\n tabIndex: -1,\n value: value ?? '',\n };\n\n return { list, input };\n};\n"],"names":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","ref","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","key","test","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}

package/dist/esm/components/Listbox/useMultiListbox.js CHANGED Viewed

@@ -1,68 +1,51 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useMemo, useState, useEffect } from 'react';
 import { v4 } from 'uuid';
 import { useLocalization } from '../Provider/Provider.js';
 import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
-import keycode from 'keycode';
 import { getIndexFromValue, getSelectedIndexesFromValue, setInputValueByRef, getActiveDescendant, findByValue } from './util.js';
 import { useTypeahead } from './useTypeahead.js';
-var _excluded = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onClick", "onChange", "onFocus", "onKeyDown", "value"];
-var useMultiListbox = function useMultiListbox(_ref, ref) {
-  var _ref$data = _ref.data,
-      externalData = _ref$data === void 0 ? [] : _ref$data,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      nativeId = _ref.id,
-      name = _ref.name,
-      onClick = _ref.onClick,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-  var id = useMemo(function () {
-    return nativeId || v4();
-  }, [nativeId]);
-  var inputRef = useProxiedRef(ref);
-  var data = useMemo(function () {
+const useMultiListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue: _,
+  id: nativeId,
+  name,
+  onClick,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value,
+  ...otherProps
+}, ref) => {
+  const {
+    texts
+  } = useLocalization();
+  const id = useMemo(() => nativeId || v4(), [nativeId]);
+  const inputRef = useProxiedRef(ref);
+  const data = useMemo(() => {
     return [{
       text: texts.listbox.allOption,
       value: '#ALL-OPTIONS#'
-    }].concat(externalData);
+    }, ...externalData];
   }, [externalData]);
-  var _React$useState = useState(getIndexFromValue(data, value) || 0),
-      currentIndex = _React$useState[0],
-      setCurrentIndex = _React$useState[1];
-  var _React$useState2 = useState(false),
-      allOptionsSelected = _React$useState2[0],
-      setAllOptionsSelected = _React$useState2[1];
-  var _useTypeahead = useTypeahead({
-    data: data,
-    currentIndex: currentIndex
-  }),
-      getNextIndex = _useTypeahead.getNextIndex;
-  var _React$useState3 = useState(getSelectedIndexesFromValue(data, value)),
-      selectedIndexes = _React$useState3[0],
-      setSelectedIndexes = _React$useState3[1];
-  useEffect(function () {
+  const [currentIndex, setCurrentIndex] = useState(getIndexFromValue(data, value) || 0);
+  const [allOptionsSelected, setAllOptionsSelected] = useState(false);
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const [selectedIndexes, setSelectedIndexes] = useState(getSelectedIndexesFromValue(data, value));
+  useEffect(() => {
     if (defaultValue && !value) {
       setInputValueByRef(inputRef.current, defaultValue.toString());
     }
   }, []);
-  useEffect(function () {
-    var selectableItemsCount = data.filter(function (item) {
-      return !item.disabled;
-    }).length - 1;
+  useEffect(() => {
+    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
     if (selectableItemsCount === selectedIndexes.length) {
       setAllOptionsSelected(true);
@@ -71,38 +54,30 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     }
   }, [selectedIndexes, data]);
-  var setInputValueByIndex = function setInputValueByIndex(index) {
+  const setInputValueByIndex = index => {
     if (index !== undefined) {
-      var option = data[index];
+      const option = data[index];
       if (option && !option.disabled) {
         var _inputRef$current;
-        var newInputValue = '';
-        var currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-        var currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
-        var optionAlreadySelected = currentValuesArray.findIndex(function (val) {
-          return val === String(option.value);
-        }) !== -1; // Handling the select_all option
+        let newInputValue = '';
+        const currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+        const currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
+        const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1; // Handling the select_all option
         if (option.value === '#ALL-OPTIONS#') {
           if (!allOptionsSelected) {
-            newInputValue = data.filter(function (option, index) {
-              return index !== 0 && !option.disabled;
-            }).map(function (option) {
-              return option.value;
-            }).join(',');
+            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
           } else {
             newInputValue = '';
           }
         } else {
           // Handling rest options
           if (optionAlreadySelected) {
-            newInputValue = currentValuesArray.filter(function (val) {
-              return val !== String(option.value);
-            }).join(',');
+            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
           } else {
-            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
+            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
           }
         }
@@ -111,7 +86,7 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     }
   };
-  var handleListboxClick = function handleListboxClick(event, index) {
+  const handleListboxClick = (event, index) => {
     event.preventDefault();
     if (!data[index].disabled) {
@@ -124,11 +99,12 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     }
   };
-  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
-    var charKey = String.fromCharCode(event.keyCode);
+  const handleListboxKeyDown = (event, index) => {
+    const charKey = event.key; // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
-    if (charKey.match(/(\w)/g)) {
-      var nextIndex = getNextIndex(charKey);
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+      const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setCurrentIndex(nextIndex);
@@ -137,15 +113,15 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
       return;
     }
-    switch (event.keyCode) {
-      case keycode('space'):
+    switch (event.key) {
+      case ' ':
         {
           event.preventDefault();
           setInputValueByIndex(index);
           break;
         }
-      case keycode('enter'):
+      case 'Enter':
         {
           setInputValueByIndex(index);
           break;
@@ -160,22 +136,22 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     }
   };
-  var handleListboxFocus = function handleListboxFocus(event) {
+  const handleListboxFocus = event => {
     if (onFocus) {
       event.persist();
       onFocus(event);
     }
   };
-  var handleInputChange = function handleInputChange(event) {
+  const handleInputChange = event => {
     event.persist();
     setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
     if (onChange) {
-      var detail = [];
-      var valuesArray = event.target.value.split(',');
-      valuesArray.forEach(function (val) {
-        var item = findByValue(data, val);
+      const detail = [];
+      const valuesArray = event.target.value.split(',');
+      valuesArray.forEach(val => {
+        const item = findByValue(data, val);
         if (item) {
           detail.push(item);
@@ -186,36 +162,33 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     }
   };
-  var list = _extends({}, otherProps, {
+  const list = { ...otherProps,
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
     'aria-multiselectable': true,
-    data: data,
-    disabled: disabled,
-    id: id,
-    onChange: function onChange() {
-      return null;
-    },
+    data,
+    disabled,
+    id,
+    onChange: () => null,
     onClick: handleListboxClick,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
     scrollOnFocus: false,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
     value: currentIndex,
-    selectedIndexes: selectedIndexes,
+    selectedIndexes,
     multiselect: true,
-    allOptionsSelected: allOptionsSelected
-  });
-  var input = {
-    name: name,
+    allOptionsSelected
+  };
+  const input = {
+    name,
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
     value: value !== null && value !== void 0 ? value : ''
   };
   return {
-    list: list,
-    input: input
+    list,
+    input
   };
 };