@visa/nova-react/use-listbox/index.mjs

Visa Product Design System Nova React library. Compatible with React ^19.

import{useRef as e,useState as t,useCallback as l,useEffect as r}from"react";const n={autoSelect:!1,defaultSelected:-1},a=(a=n)=>{const{defaultSelected:c,...o}={...n,...a},s=e([]),u=e(null),[i,d]=t(Array.isArray(c)?c.length?c[0]:-1:c),[f,S]=t([]),[b,p]=t(c),x=Array.isArray(b);x&&o.autoSelect&&(o.autoSelect=!1);const m=-1===i?0:f.indexOf(i),w=f.length,y=w-1,g=o?.ref||s,A=l(e=>x?b.includes(e):b===e,[x,b]),I=l(e=>{p(x?t=>A(e)?t.filter(t=>t!==e):[...t,e]:A(e)?-1:e),d(e)},[A,x]);return r(()=>{const e={...n,...a};x&&e.autoSelect&&console.warn("⚠️ useListbox: autoSelect is not compatible with multiple selection listbox. autoSelect will be set to false when multiple is true.")},[a,x]),r(()=>{S(g.current?.map((e,t)=>(!e?.ariaDisabled||"false"===e?.ariaDisabled)&&t).filter(e=>!1!==e))},[g]),{isIndexSelected:A,getTabIndex:(e,t=!1)=>(t||null!==u.current||(u.current=e),x?i===e||-1===i&&u.current===e?0:-1:b===e||-1===b&&u.current===e?0:-1),onKeyNavigation:e=>{const t=e.key;let l=null;if("ArrowDown"===t?l=(m+1)%w:"ArrowUp"===t?l=m-1<0?y:m-1:"End"===t?l=y:"Home"===t&&(l=0),"Enter"!==t&&" "!==t||I(f[m]),"Tab"===t&&d(x?f[m]:b),g.current&&null!==l&&w){e.preventDefault();const t=f[l];o.autoSelect&&p(t),d(t),g.current[t]?.focus()}},ref:g,selectedIndex:b,selectedIndices:b,toggleIndexSelected:I}};a.displayName="useListbox";export{a as default,a as useListbox};