sui-explorer-local/apps/explorer/storybook-static/assets/ListboxSelect.stories-857995d0.js

Local Sui Explorer

import{j as g}from"./jsx-runtime-ffb262ed.js";import{r as u,R as q}from"./index-76fb7be0.js";import{s as ue,l as k,a as p,O as te,U as P,y as F,u as C,k as De,m as Te,n as $e,h as Ce,i as z,f as ke,e as Pe,x as Fe,C as j,I as W,j as je,o as Ee,p as h,r as Ne,q as Ae}from"./keyboard-c7de49e8.js";import{p as V,o as Y,q as _e}from"./transition-b9d852df.js";import{T as Me}from"./use-resolve-button-type-bca47cd5.js";import{C as Be}from"./Check12-709d7c68.js";import{T as re}from"./Text-6932fd32.js";import"./_commonjsHelpers-de833af9.js";import"./index-dca19ccf.js";import"./sizeAndWeight-05769a6b.js";const qe=e=>g.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"none",viewBox:"0 0 16 16",...e,children:g.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"m4 6 4 4 4-4"})}),Qe=qe;try{ChevronDown16.displayName="ChevronDown16",ChevronDown16.__docgenInfo={description:"",displayName:"ChevronDown16",props:{}}}catch{}function ce(e,r){let[t,o]=u.useState(e),a=ue(e);return k(()=>o(a.current),[a,o,...r]),t}function Ue(e,r,t){let[o,a]=u.useState(t),n=e!==void 0,i=u.useRef(n),s=u.useRef(!1),f=u.useRef(!1);return n&&!i.current&&!s.current?(s.current=!0,i.current=n,console.error("A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.")):!n&&i.current&&!f.current&&(f.current=!0,i.current=n,console.error("A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.")),[n?e:o,p(x=>(n||a(x),r==null?void 0:r(x)))]}function ne(e){return[e.screenX,e.screenY]}function ze(){let e=u.useRef([-1,-1]);return{wasMoved(r){let t=ne(r);return e.current[0]===t[0]&&e.current[1]===t[1]?!1:(e.current=t,!0)},update(r){e.current=ne(r)}}}function Ve(e){throw new Error("Unexpected object: "+e)}var L=(e=>(e[e.First=0]="First",e[e.Previous=1]="Previous",e[e.Next=2]="Next",e[e.Last=3]="Last",e[e.Specific=4]="Specific",e[e.Nothing=5]="Nothing",e))(L||{});function He(e,r){let t=r.resolveItems();if(t.length<=0)return null;let o=r.resolveActiveIndex(),a=o??-1;switch(e.focus){case 0:{for(let n=0;n<t.length;++n)if(!r.resolveDisabled(t[n],n,t))return n;return o}case 1:{for(let n=a-1;n>=0;--n)if(!r.resolveDisabled(t[n],n,t))return n;return o}case 2:{for(let n=a+1;n<t.length;++n)if(!r.resolveDisabled(t[n],n,t))return n;return o}case 3:{for(let n=t.length-1;n>=0;--n)if(!r.resolveDisabled(t[n],n,t))return n;return o}case 4:{for(let n=0;n<t.length;++n)if(r.resolveId(t[n],n,t)===e.id)return n;return o}case 5:return null;default:Ve(e)}}function de(e={},r=null,t=[]){for(let[o,a]of Object.entries(e))fe(t,pe(r,o),a);return t}function pe(e,r){return e?e+"["+r+"]":r}function fe(e,r,t){if(Array.isArray(t))for(let[o,a]of t.entries())fe(e,pe(r,o.toString()),a);else t instanceof Date?e.push([r,t.toISOString()]):typeof t=="boolean"?e.push([r,t?"1":"0"]):typeof t=="string"?e.push([r,t]):typeof t=="number"?e.push([r,`${t}`]):t==null?e.push([r,""]):de(t,r,e)}let oe=/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g;function ie(e){var r,t;let o=(r=e.innerText)!=null?r:"",a=e.cloneNode(!0);if(!(a instanceof HTMLElement))return o;let n=!1;for(let s of a.querySelectorAll('[hidden],[aria-hidden],[role="img"]'))s.remove(),n=!0;let i=n?(t=a.innerText)!=null?t:"":o;return oe.test(i)&&(i=i.replace(oe,"")),i}function We(e){let r=e.getAttribute("aria-label");if(typeof r=="string")return r.trim();let t=e.getAttribute("aria-labelledby");if(t){let o=t.split(" ").map(a=>{let n=document.getElementById(a);if(n){let i=n.getAttribute("aria-label");return typeof i=="string"?i.trim():ie(n).trim()}return null}).filter(Boolean);if(o.length>0)return o.join(", ")}return ie(e).trim()}function Ge(e){let r=u.useRef(""),t=u.useRef("");return p(()=>{let o=e.current;if(!o)return"";let a=o.innerText;if(r.current===a)return t.current;let n=We(o).trim().toLowerCase();return r.current=a,t.current=n,n})}var Ke=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(Ke||{}),Xe=(e=>(e[e.Single=0]="Single",e[e.Multi=1]="Multi",e))(Xe||{}),Ye=(e=>(e[e.Pointer=0]="Pointer",e[e.Other=1]="Other",e))(Ye||{}),Je=(e=>(e[e.OpenListbox=0]="OpenListbox",e[e.CloseListbox=1]="CloseListbox",e[e.GoToOption=2]="GoToOption",e[e.Search=3]="Search",e[e.ClearSearch=4]="ClearSearch",e[e.RegisterOption=5]="RegisterOption",e[e.UnregisterOption=6]="UnregisterOption",e[e.RegisterLabel=7]="RegisterLabel",e))(Je||{});function X(e,r=t=>t){let t=e.activeOptionIndex!==null?e.options[e.activeOptionIndex]:null,o=Ae(r(e.options.slice()),n=>n.dataRef.current.domRef.current),a=t?o.indexOf(t):null;return a===-1&&(a=null),{options:o,activeOptionIndex:a}}let Ze={1(e){return e.dataRef.current.disabled||e.listboxState===1?e:{...e,activeOptionIndex:null,listboxState:1}},0(e){if(e.dataRef.current.disabled||e.listboxState===0)return e;let r=e.activeOptionIndex,{isSelected:t}=e.dataRef.current,o=e.options.findIndex(a=>t(a.dataRef.current.value));return o!==-1&&(r=o),{...e,listboxState:0,activeOptionIndex:r}},2(e,r){var t;if(e.dataRef.current.disabled||e.listboxState===1)return e;let o=X(e),a=He(r,{resolveItems:()=>o.options,resolveActiveIndex:()=>o.activeOptionIndex,resolveId:n=>n.id,resolveDisabled:n=>n.dataRef.current.disabled});return{...e,...o,searchQuery:"",activeOptionIndex:a,activationTrigger:(t=r.trigger)!=null?t:1}},3:(e,r)=>{if(e.dataRef.current.disabled||e.listboxState===1)return e;let t=e.searchQuery!==""?0:1,o=e.searchQuery+r.value.toLowerCase(),a=(e.activeOptionIndex!==null?e.options.slice(e.activeOptionIndex+t).concat(e.options.slice(0,e.activeOptionIndex+t)):e.options).find(i=>{var s;return!i.dataRef.current.disabled&&((s=i.dataRef.current.textValue)==null?void 0:s.startsWith(o))}),n=a?e.options.indexOf(a):-1;return n===-1||n===e.activeOptionIndex?{...e,searchQuery:o}:{...e,searchQuery:o,activeOptionIndex:n,activationTrigger:1}},4(e){return e.dataRef.current.disabled||e.listboxState===1||e.searchQuery===""?e:{...e,searchQuery:""}},5:(e,r)=>{let t={id:r.id,dataRef:r.dataRef},o=X(e,a=>[...a,t]);return e.activeOptionIndex===null&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(o.activeOptionIndex=o.options.indexOf(t)),{...e,...o}},6:(e,r)=>{let t=X(e,o=>{let a=o.findIndex(n=>n.id===r.id);return a!==-1&&o.splice(a,1),o});return{...e,...t,activationTrigger:1}},7:(e,r)=>({...e,labelId:r.id})},J=u.createContext(null);J.displayName="ListboxActionsContext";function E(e){let r=u.useContext(J);if(r===null){let t=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,E),t}return r}let Z=u.createContext(null);Z.displayName="ListboxDataContext";function N(e){let r=u.useContext(Z);if(r===null){let t=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,N),t}return r}function et(e,r){return C(r.type,Ze,e,r)}let tt=u.Fragment;function rt(e,r){let{value:t,defaultValue:o,form:a,name:n,onChange:i,by:s=(c,d)=>c===d,disabled:f=!1,horizontal:x=!1,multiple:O=!1,...I}=e;const $=x?"horizontal":"vertical";let D=F(r),[S=O?[]:void 0,w]=Ue(t,i,o),[b,l]=u.useReducer(et,{dataRef:u.createRef(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),m=u.useRef({static:!1,hold:!1}),A=u.useRef(null),_=u.useRef(null),G=u.useRef(null),y=p(typeof s=="string"?(c,d)=>{let R=s;return(c==null?void 0:c[R])===(d==null?void 0:d[R])}:s),T=u.useCallback(c=>C(v.mode,{1:()=>S.some(d=>y(d,c)),0:()=>y(S,c)}),[S]),v=u.useMemo(()=>({...b,value:S,disabled:f,mode:O?1:0,orientation:$,compare:y,isSelected:T,optionsPropsRef:m,labelRef:A,buttonRef:_,optionsRef:G}),[S,f,O,b]);k(()=>{b.dataRef.current=v},[v]),De([v.buttonRef,v.optionsRef],(c,d)=>{var R;l({type:1}),Te(d,$e.Loose)||(c.preventDefault(),(R=v.buttonRef.current)==null||R.focus())},v.listboxState===0);let ve=u.useMemo(()=>({open:v.listboxState===0,disabled:f,value:S}),[v,f,S]),xe=p(c=>{let d=v.options.find(R=>R.id===c);d&&K(d.dataRef.current.value)}),be=p(()=>{if(v.activeOptionIndex!==null){let{dataRef:c,id:d}=v.options[v.activeOptionIndex];K(c.current.value),l({type:2,focus:L.Specific,id:d})}}),me=p(()=>l({type:0})),ge=p(()=>l({type:1})),he=p((c,d,R)=>c===L.Specific?l({type:2,focus:L.Specific,id:d,trigger:R}):l({type:2,focus:c,trigger:R})),Oe=p((c,d)=>(l({type:5,id:c,dataRef:d}),()=>l({type:6,id:c}))),Se=p(c=>(l({type:7,id:c}),()=>l({type:7,id:null}))),K=p(c=>C(v.mode,{0(){return w==null?void 0:w(c)},1(){let d=v.value.slice(),R=d.findIndex(B=>y(B,c));return R===-1?d.push(c):d.splice(R,1),w==null?void 0:w(d)}})),ye=p(c=>l({type:3,value:c})),Re=p(()=>l({type:4})),Le=u.useMemo(()=>({onChange:K,registerOption:Oe,registerLabel:Se,goToOption:he,closeListbox:ge,openListbox:me,selectActiveOption:be,selectOption:xe,search:ye,clearSearch:Re}),[]),we={ref:D},M=u.useRef(null),Ie=V();return u.useEffect(()=>{M.current&&o!==void 0&&Ie.addEventListener(M.current,"reset",()=>{w==null||w(o)})},[M,w]),q.createElement(J.Provider,{value:Le},q.createElement(Z.Provider,{value:v},q.createElement(Ce,{value:C(v.listboxState,{0:z.Open,1:z.Closed})},n!=null&&S!=null&&de({[n]:S}).map(([c,d],R)=>q.createElement(ke,{features:Pe.Hidden,ref:R===0?B=>{var ee;M.current=(ee=B==null?void 0:B.closest("form"))!=null?ee:null}:void 0,...Fe({key:c,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:a,name:c,value:d})})),j({ourProps:we,theirProps:I,slot:ve,defaultTag:tt,name:"Listbox"}))))}let nt="button";function ot(e,r){var t;let o=W(),{id:a=`headlessui-listbox-button-${o}`,...n}=e,i=N("Listbox.Button"),s=E("Listbox.Button"),f=F(i.buttonRef,r),x=V(),O=p(b=>{switch(b.key){case h.Space:case h.Enter:case h.ArrowDown:b.preventDefault(),s.openListbox(),x.nextFrame(()=>{i.value||s.goToOption(L.First)});break;case h.ArrowUp:b.preventDefault(),s.openListbox(),x.nextFrame(()=>{i.value||s.goToOption(L.Last)});break}}),I=p(b=>{switch(b.key){case h.Space:b.preventDefault();break}}),$=p(b=>{if(Ne(b.currentTarget))return b.preventDefault();i.listboxState===0?(s.closeListbox(),x.nextFrame(()=>{var l;return(l=i.buttonRef.current)==null?void 0:l.focus({preventScroll:!0})})):(b.preventDefault(),s.openListbox())}),D=ce(()=>{if(i.labelId)return[i.labelId,a].join(" ")},[i.labelId,a]),S=u.useMemo(()=>({open:i.listboxState===0,disabled:i.disabled,value:i.value}),[i]),w={ref:f,id:a,type:Me(e,i.buttonRef),"aria-haspopup":"listbox","aria-controls":(t=i.optionsRef.current)==null?void 0:t.id,"aria-expanded":i.listboxState===0,"aria-labelledby":D,disabled:i.disabled,onKeyDown:O,onKeyUp:I,onClick:$};return j({ourProps:w,theirProps:n,slot:S,defaultTag:nt,name:"Listbox.Button"})}let it="label";function at(e,r){let t=W(),{id:o=`headlessui-listbox-label-${t}`,...a}=e,n=N("Listbox.Label"),i=E("Listbox.Label"),s=F(n.labelRef,r);k(()=>i.registerLabel(o),[o]);let f=p(()=>{var O;return(O=n.buttonRef.current)==null?void 0:O.focus({preventScroll:!0})}),x=u.useMemo(()=>({open:n.listboxState===0,disabled:n.disabled}),[n]);return j({ourProps:{ref:s,id:o,onClick:f},theirProps:a,slot:x,defaultTag:it,name:"Listbox.Label"})}let lt="ul",st=te.RenderStrategy|te.Static;function ut(e,r){var t;let o=W(),{id:a=`headlessui-listbox-options-${o}`,...n}=e,i=N("Listbox.Options"),s=E("Listbox.Options"),f=F(i.optionsRef,r),x=V(),O=V(),I=je(),$=(()=>I!==null?(I&z.Open)===z.Open:i.listboxState===0)();u.useEffect(()=>{var l;let m=i.optionsRef.current;m&&i.listboxState===0&&m!==((l=Ee(m))==null?void 0:l.activeElement)&&m.focus({preventScroll:!0})},[i.listboxState,i.optionsRef]);let D=p(l=>{switch(O.dispose(),l.key){case h.Space:if(i.searchQuery!=="")return l.preventDefault(),l.stopPropagation(),s.search(l.key);case h.Enter:if(l.preventDefault(),l.stopPropagation(),i.activeOptionIndex!==null){let{dataRef:m}=i.options[i.activeOptionIndex];s.onChange(m.current.value)}i.mode===0&&(s.closeListbox(),Y().nextFrame(()=>{var m;return(m=i.buttonRef.current)==null?void 0:m.focus({preventScroll:!0})}));break;case C(i.orientation,{vertical:h.ArrowDown,horizontal:h.ArrowRight}):return l.preventDefault(),l.stopPropagation(),s.goToOption(L.Next);case C(i.orientation,{vertical:h.ArrowUp,horizontal:h.ArrowLeft}):return l.preventDefault(),l.stopPropagation(),s.goToOption(L.Previous);case h.Home:case h.PageUp:return l.preventDefault(),l.stopPropagation(),s.goToOption(L.First);case h.End:case h.PageDown:return l.preventDefault(),l.stopPropagation(),s.goToOption(L.Last);case h.Escape:return l.preventDefault(),l.stopPropagation(),s.closeListbox(),x.nextFrame(()=>{var m;return(m=i.buttonRef.current)==null?void 0:m.focus({preventScroll:!0})});case h.Tab:l.preventDefault(),l.stopPropagation();break;default:l.key.length===1&&(s.search(l.key),O.setTimeout(()=>s.clearSearch(),350));break}}),S=ce(()=>{var l;return(l=i.buttonRef.current)==null?void 0:l.id},[i.buttonRef.current]),w=u.useMemo(()=>({open:i.listboxState===0}),[i]),b={"aria-activedescendant":i.activeOptionIndex===null||(t=i.options[i.activeOptionIndex])==null?void 0:t.id,"aria-multiselectable":i.mode===1?!0:void 0,"aria-labelledby":S,"aria-orientation":i.orientation,id:a,onKeyDown:D,role:"listbox",tabIndex:0,ref:f};return j({ourProps:b,theirProps:n,slot:w,defaultTag:lt,features:st,visible:$,name:"Listbox.Options"})}let ct="li";function dt(e,r){let t=W(),{id:o=`headlessui-listbox-option-${t}`,disabled:a=!1,value:n,...i}=e,s=N("Listbox.Option"),f=E("Listbox.Option"),x=s.activeOptionIndex!==null?s.options[s.activeOptionIndex].id===o:!1,O=s.isSelected(n),I=u.useRef(null),$=Ge(I),D=ue({disabled:a,value:n,domRef:I,get textValue(){return $()}}),S=F(r,I);k(()=>{if(s.listboxState!==0||!x||s.activationTrigger===0)return;let y=Y();return y.requestAnimationFrame(()=>{var T,v;(v=(T=I.current)==null?void 0:T.scrollIntoView)==null||v.call(T,{block:"nearest"})}),y.dispose},[I,x,s.listboxState,s.activationTrigger,s.activeOptionIndex]),k(()=>f.registerOption(o,D),[D,o]);let w=p(y=>{if(a)return y.preventDefault();f.onChange(n),s.mode===0&&(f.closeListbox(),Y().nextFrame(()=>{var T;return(T=s.buttonRef.current)==null?void 0:T.focus({preventScroll:!0})}))}),b=p(()=>{if(a)return f.goToOption(L.Nothing);f.goToOption(L.Specific,o)}),l=ze(),m=p(y=>l.update(y)),A=p(y=>{l.wasMoved(y)&&(a||x||f.goToOption(L.Specific,o,0))}),_=p(y=>{l.wasMoved(y)&&(a||x&&f.goToOption(L.Nothing))}),G=u.useMemo(()=>({active:x,selected:O,disabled:a}),[x,O,a]);return j({ourProps:{id:o,ref:S,role:"option",tabIndex:a===!0?void 0:-1,"aria-disabled":a===!0?!0:void 0,"aria-selected":O,disabled:void 0,onClick:w,onFocus:b,onPointerEnter:m,onMouseEnter:m,onPointerMove:A,onMouseMove:A,onPointerLeave:_,onMouseLeave:_},theirProps:i,slot:G,defaultTag:ct,name:"Listbox.Option"})}let pt=P(rt),ft=P(ot),vt=P(at),xt=P(ut),bt=P(dt),Q=Object.assign(pt,{Button:ft,Label:vt,Options:xt,Option:bt});function H({value:e,options:r,onSelect:t}){return g.jsx(Q,{value:e,onChange:t,children:g.jsxs("div",{className:"relative",children:[g.jsxs(Q.Button,{className:"group flex w-full flex-nowrap items-center gap-1 overflow-hidden text-hero-dark transition-all hover:text-hero-darkest",children:[g.jsx(re,{variant:"body/semibold",children:e}),g.jsx(Qe,{className:"text-gray-400 pointer-events-none h-4 w-4 text-steel transition-all group-hover:text-steel-dark","aria-hidden":"true"})]}),g.jsx(_e,{as:u.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:g.jsx(Q.Options,{className:"absolute right-0 top-0 z-10 max-h-60 w-max max-w-xs overflow-auto rounded-lg bg-white p-2 shadow",children:r.map((o,a)=>g.jsx(Q.Option,{className:"flex flex-1 cursor-pointer flex-nowrap items-center gap-4 rounded-sm p-2 hover:bg-sui-light/40",value:o,children:({selected:n})=>g.jsxs(g.Fragment,{children:[g.jsx("span",{className:"flex-1",children:g.jsx(re,{variant:"caption/medium",color:n?"steel-darker":"steel-dark",truncate:!0,children:o})}),n?g.jsx(Be,{className:"h-4 w-4 text-steel-darker","aria-hidden":"true"}):null]})},a))})})]})})}try{H.displayName="ListboxSelect",H.__docgenInfo={description:"",displayName:"ListboxSelect",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"string"}},options:{defaultValue:null,description:"",name:"options",required:!0,type:{name:"readonly T[]"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!0,type:{name:"(value: T) => void"}}}}}catch{}const Dt={component:H},U={render:e=>{const[r,t]=u.useState("Option 1");return g.jsx("div",{className:"flex justify-center",children:g.jsx(H,{...e,value:r,onSelect:t})})},args:{options:["Option 1","Option 2","Option 3","Long option"]}};var ae,le,se;U.parameters={...U.parameters,docs:{...(ae=U.parameters)==null?void 0:ae.docs,source:{originalSource:`{
  render: props => {
    const [value, onChange] = useState('Option 1');
    return <div className="flex justify-center">
                <ListboxSelect {...props} value={value} onSelect={onChange} />
            </div>;
  },
  args: {
    options: ['Option 1', 'Option 2', 'Option 3', 'Long option']
  }
}`,...(se=(le=U.parameters)==null?void 0:le.docs)==null?void 0:se.source}}};const Tt=["Default"];export{U as Default,Tt as __namedExportsOrder,Dt as default};