-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcomponents-select-field-stories.a1335ac2.iframe.bundle.js
1 lines (1 loc) · 29.7 KB
/
components-select-field-stories.a1335ac2.iframe.bundle.js
1
"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[5107],{"../../node_modules/@headlessui/react/dist/components/listbox/listbox.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W:()=>Mt});var n,o,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-disposables.js"),_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-id.js"),_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js"),_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-computed.js"),_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-sync-refs.js"),_utils_render_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/render.js"),_utils_match_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/match.js"),_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/disposables.js"),_keyboard_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/keyboard.js"),_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/calculate-active-index.js"),_utils_bugs_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/bugs.js"),_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/focus-management.js"),_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/open-closed.js"),_hooks_use_resolve_button_type_js__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-resolve-button-type.js"),_hooks_use_outside_click_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-outside-click.js"),_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/hidden.js"),_utils_form_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/form.js"),_utils_owner_js__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/owner.js"),_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-event.js"),_hooks_use_controllable_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-controllable.js"),_hooks_use_latest_value_js__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),_hooks_use_tracked_pointer_js__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-tracked-pointer.js"),Ue=((o=Ue||{})[o.Open=0]="Open",o[o.Closed=1]="Closed",o),Be=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(Be||{}),He=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(He||{}),Ge=((n=Ge||{})[n.OpenListbox=0]="OpenListbox",n[n.CloseListbox=1]="CloseListbox",n[n.GoToOption=2]="GoToOption",n[n.Search=3]="Search",n[n.ClearSearch=4]="ClearSearch",n[n.RegisterOption=5]="RegisterOption",n[n.UnregisterOption=6]="UnregisterOption",n[n.RegisterLabel=7]="RegisterLabel",n);function q(e,r=(o=>o)){let o=null!==e.activeOptionIndex?e.options[e.activeOptionIndex]:null,p=(0,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.wl)(r(e.options.slice()),(c=>c.dataRef.current.domRef.current)),i=o?p.indexOf(o):null;return-1===i&&(i=null),{options:p,activeOptionIndex:i}}let je={1:e=>e.dataRef.current.disabled||1===e.listboxState?e:{...e,activeOptionIndex:null,listboxState:1},0(e){if(e.dataRef.current.disabled||0===e.listboxState)return e;let r=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,p=e.options.findIndex((i=>o(i.dataRef.current.value)));return-1!==p&&(r=p),{...e,listboxState:0,activeOptionIndex:r}},2(e,r){var i;if(e.dataRef.current.disabled||1===e.listboxState)return e;let o=q(e),p=(0,_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.X)(r,{resolveItems:()=>o.options,resolveActiveIndex:()=>o.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});return{...e,...o,searchQuery:"",activeOptionIndex:p,activationTrigger:null!=(i=r.trigger)?i:1}},3:(e,r)=>{if(e.dataRef.current.disabled||1===e.listboxState)return e;let p=""!==e.searchQuery?0:1,i=e.searchQuery+r.value.toLowerCase(),t=(null!==e.activeOptionIndex?e.options.slice(e.activeOptionIndex+p).concat(e.options.slice(0,e.activeOptionIndex+p)):e.options).find((n=>{var T;return!n.dataRef.current.disabled&&(null==(T=n.dataRef.current.textValue)?void 0:T.startsWith(i))})),u=t?e.options.indexOf(t):-1;return-1===u||u===e.activeOptionIndex?{...e,searchQuery:i}:{...e,searchQuery:i,activeOptionIndex:u,activationTrigger:1}},4:e=>e.dataRef.current.disabled||1===e.listboxState||""===e.searchQuery?e:{...e,searchQuery:""},5:(e,r)=>{let o={id:r.id,dataRef:r.dataRef},p=q(e,(i=>[...i,o]));return null===e.activeOptionIndex&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(p.activeOptionIndex=p.options.indexOf(o)),{...e,...p}},6:(e,r)=>{let o=q(e,(p=>{let i=p.findIndex((c=>c.id===r.id));return-1!==i&&p.splice(i,1),p}));return{...e,...o,activationTrigger:1}},7:(e,r)=>({...e,labelId:r.id})},X=(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);function B(e){let r=(0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(X);if(null===r){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,B),o}return r}X.displayName="ListboxActionsContext";let J=(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);function H(e){let r=(0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(J);if(null===r){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,H),o}return r}function Ke(e,r){return(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(r.type,je,e,r)}J.displayName="ListboxDataContext";let Ve=react__WEBPACK_IMPORTED_MODULE_0__.Fragment,Ne=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){let{value:p,defaultValue:i,name:c,onChange:t,by:u=((l,f)=>l===f),disabled:n=!1,horizontal:T=!1,multiple:g=!1,...A}=r;const m=T?"horizontal":"vertical";let P=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(o),[y=(g?[]:void 0),S]=(0,_hooks_use_controllable_js__WEBPACK_IMPORTED_MODULE_6__.P)(p,t,i),[h,s]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(Ke,{dataRef:(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),a=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({static:!1,hold:!1}),x=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),D=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),Q=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),M=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)("string"==typeof u?(l,f)=>{let v=u;return(null==l?void 0:l[v])===(null==f?void 0:f[v])}:u),L=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((l=>(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(d.mode,{1:()=>y.some((f=>M(f,l))),0:()=>M(y,l)})),[y]),d=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({...h,value:y,disabled:n,mode:g?1:0,orientation:m,compare:M,isSelected:L,optionsPropsRef:a,labelRef:x,buttonRef:D,optionsRef:Q})),[y,n,g,h]);(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>{h.dataRef.current=d}),[d]),(0,_hooks_use_outside_click_js__WEBPACK_IMPORTED_MODULE_9__.j)([d.buttonRef,d.optionsRef],((l,f)=>{var v;s({type:1}),(0,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.Bm)(f,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.MZ.Loose)||(l.preventDefault(),null==(v=d.buttonRef.current)||v.focus())}),0===d.listboxState);let G=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===d.listboxState,disabled:n,value:y})),[d,n,y]),ie=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>{let f=d.options.find((v=>v.id===l));!f||k(f.dataRef.current.value)})),re=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{if(null!==d.activeOptionIndex){let{dataRef:l,id:f}=d.options[d.activeOptionIndex];k(l.current.value),s({type:2,focus:_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,id:f})}})),ae=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:0}))),le=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:1}))),se=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)(((l,f,v)=>l===_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific?s({type:2,focus:_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,id:f,trigger:v}):s({type:2,focus:l,trigger:v}))),ue=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)(((l,f)=>(s({type:5,id:l,dataRef:f}),()=>s({type:6,id:l})))),pe=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>(s({type:7,id:l}),()=>s({type:7,id:null})))),k=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(d.mode,{0:()=>null==S?void 0:S(l),1(){let f=d.value.slice(),v=f.findIndex((w=>M(w,l)));return-1===v?f.push(l):f.splice(v,1),null==S?void 0:S(f)}}))),de=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>s({type:3,value:l}))),ce=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:4}))),fe=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({onChange:k,registerOption:ue,registerLabel:pe,goToOption:se,closeListbox:le,openListbox:ae,selectActiveOption:re,selectOption:ie,search:de,clearSearch:ce})),[]),be={ref:P},j=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),Te=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)();return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{!j.current||void 0!==i&&Te.addEventListener(j.current,"reset",(()=>{k(i)}))}),[j,k]),react__WEBPACK_IMPORTED_MODULE_0__.createElement(X.Provider,{value:fe},react__WEBPACK_IMPORTED_MODULE_0__.createElement(J.Provider,{value:d},react__WEBPACK_IMPORTED_MODULE_0__.createElement(_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.El,{value:(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(d.listboxState,{0:_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Open,1:_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Closed})},null!=c&&null!=y&&(0,_utils_form_js__WEBPACK_IMPORTED_MODULE_12__.h)({[c]:y}).map((([l,f],v)=>react__WEBPACK_IMPORTED_MODULE_0__.createElement(_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__.j,{features:_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__.O.Hidden,ref:0===v?w=>{var Y;j.current=null!=(Y=null==w?void 0:w.closest("form"))?Y:null}:void 0,...(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.oE)({key:l,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:l,value:f})}))),(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:be,theirProps:A,slot:G,defaultTag:Ve,name:"Listbox"}))))})),Qe=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){var h;let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-button-${p}`,...c}=r,t=H("Listbox.Button"),u=B("Listbox.Button"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.buttonRef,o),T=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),g=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{switch(s.key){case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Enter:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowDown:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.First)}));break;case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowUp:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Last)}))}})),A=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{if(s.key===_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space)s.preventDefault()})),m=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{if((0,_utils_bugs_js__WEBPACK_IMPORTED_MODULE_16__.l)(s.currentTarget))return s.preventDefault();0===t.listboxState?(u.closeListbox(),T.nextFrame((()=>{var a;return null==(a=t.buttonRef.current)?void 0:a.focus({preventScroll:!0})}))):(s.preventDefault(),u.openListbox())})),P=(0,_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__.H)((()=>{if(t.labelId)return[t.labelId,i].join(" ")}),[t.labelId,i]),y=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled,value:t.value})),[t]),S={ref:n,id:i,type:(0,_hooks_use_resolve_button_type_js__WEBPACK_IMPORTED_MODULE_18__.c)(r,t.buttonRef),"aria-haspopup":"listbox","aria-controls":null==(h=t.optionsRef.current)?void 0:h.id,"aria-expanded":t.disabled?void 0:0===t.listboxState,"aria-labelledby":P,disabled:t.disabled,onKeyDown:g,onKeyUp:A,onClick:m};return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:S,theirProps:c,slot:y,defaultTag:"button",name:"Listbox.Button"})})),ze=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-label-${p}`,...c}=r,t=H("Listbox.Label"),u=B("Listbox.Label"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.labelRef,o);(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>u.registerLabel(i)),[i]);let T=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{var m;return null==(m=t.buttonRef.current)?void 0:m.focus({preventScroll:!0})})),g=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled})),[t]);return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:{ref:n,id:i,onClick:T},theirProps:c,slot:g,defaultTag:"label",name:"Listbox.Label"})})),Xe=_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.O5.RenderStrategy|_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.O5.Static,Je=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){var s;let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-options-${p}`,...c}=r,t=H("Listbox.Options"),u=B("Listbox.Options"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.optionsRef,o),T=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),g=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),A=(0,_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.O_)(),m=null!==A?A===_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Open:0===t.listboxState;(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{var x;let a=t.optionsRef.current;!a||0===t.listboxState&&a!==(null==(x=(0,_utils_owner_js__WEBPACK_IMPORTED_MODULE_19__.T)(a))?void 0:x.activeElement)&&a.focus({preventScroll:!0})}),[t.listboxState,t.optionsRef]);let P=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((a=>{switch(g.dispose(),a.key){case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space:if(""!==t.searchQuery)return a.preventDefault(),a.stopPropagation(),u.search(a.key);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Enter:if(a.preventDefault(),a.stopPropagation(),null!==t.activeOptionIndex){let{dataRef:x}=t.options[t.activeOptionIndex];u.onChange(x.current.value)}0===t.mode&&(u.closeListbox(),(0,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.e)().nextFrame((()=>{var x;return null==(x=t.buttonRef.current)?void 0:x.focus({preventScroll:!0})})));break;case(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(t.orientation,{vertical:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowDown,horizontal:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowRight}):return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Next);case(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(t.orientation,{vertical:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowUp,horizontal:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowLeft}):return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Previous);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Home:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.PageUp:return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.First);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.End:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.PageDown:return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Last);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Escape:return a.preventDefault(),a.stopPropagation(),u.closeListbox(),T.nextFrame((()=>{var x;return null==(x=t.buttonRef.current)?void 0:x.focus({preventScroll:!0})}));case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Tab:a.preventDefault(),a.stopPropagation();break;default:1===a.key.length&&(u.search(a.key),g.setTimeout((()=>u.clearSearch()),350))}})),y=(0,_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__.H)((()=>{var a,x,D;return null!=(D=null==(a=t.labelRef.current)?void 0:a.id)?D:null==(x=t.buttonRef.current)?void 0:x.id}),[t.labelRef.current,t.buttonRef.current]),S=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===t.listboxState})),[t]),h={"aria-activedescendant":null===t.activeOptionIndex||null==(s=t.options[t.activeOptionIndex])?void 0:s.id,"aria-multiselectable":1===t.mode||void 0,"aria-labelledby":y,"aria-orientation":t.orientation,id:i,onKeyDown:P,role:"listbox",tabIndex:0,ref:n};return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:h,theirProps:c,slot:S,defaultTag:"ul",features:Xe,visible:m,name:"Listbox.Options"})})),Ze=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-option-${p}`,disabled:c=!1,value:t,...u}=r,n=H("Listbox.Option"),T=B("Listbox.Option"),g=null!==n.activeOptionIndex&&n.options[n.activeOptionIndex].id===i,A=n.isSelected(t),m=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),P=(0,_hooks_use_latest_value_js__WEBPACK_IMPORTED_MODULE_21__.Y)({disabled:c,value:t,domRef:m,get textValue(){var L,d;return null==(d=null==(L=m.current)?void 0:L.textContent)?void 0:d.toLowerCase()}}),y=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(o,m);(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>{if(0!==n.listboxState||!g||0===n.activationTrigger)return;let L=(0,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.e)();return L.requestAnimationFrame((()=>{var d,G;null==(G=null==(d=m.current)?void 0:d.scrollIntoView)||G.call(d,{block:"nearest"})})),L.dispose}),[m,g,n.listboxState,n.activationTrigger,n.activeOptionIndex]),(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>T.registerOption(i,P)),[P,i]);let S=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{if(c)return L.preventDefault();T.onChange(t),0===n.mode&&(T.closeListbox(),(0,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.e)().nextFrame((()=>{var d;return null==(d=n.buttonRef.current)?void 0:d.focus({preventScroll:!0})})))})),h=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{if(c)return T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Nothing);T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,i)})),s=(0,_hooks_use_tracked_pointer_js__WEBPACK_IMPORTED_MODULE_22__.J)(),a=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>s.update(L))),x=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{!s.wasMoved(L)||c||g||T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,i,0)})),D=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{!s.wasMoved(L)||c||!g||T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Nothing)})),Q=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({active:g,selected:A,disabled:c})),[g,A,c]);return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:{id:i,ref:y,role:"option",tabIndex:!0===c?void 0:-1,"aria-disabled":!0===c||void 0,"aria-selected":A,disabled:void 0,onClick:S,onFocus:h,onPointerEnter:a,onMouseEnter:a,onPointerMove:x,onMouseMove:x,onPointerLeave:D,onMouseLeave:D},theirProps:u,slot:Q,defaultTag:"li",name:"Listbox.Option"})})),Mt=Object.assign(Ne,{Button:Qe,Label:ze,Options:Je,Option:Ze})},"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/components/select-field/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChildrenProp:()=>ChildrenProp,Factory:()=>Factory,OptionsProp:()=>OptionsProp,Validation:()=>Validation,WithError:()=>WithError,WithLabelAndDescription:()=>WithLabelAndDescription,WithLabelSuffix:()=>WithLabelSuffix,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_preview_api__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("@storybook/preview-api"),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),___WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/select-field/index.js"),_storybook_interactive_docs_page__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./.storybook/interactive-docs-page.js"),_constants__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/elements/validation/constants.js"),_index__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/elements/badge/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Template=args=>{const[,updateArgs]=(0,_storybook_preview_api__WEBPACK_IMPORTED_MODULE_0__.useArgs)(),handleChange=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((value=>{const newArgs={value};var _find,_find$props;args.children&&(newArgs.selectedLabel=(null===(_find=(0,lodash__WEBPACK_IMPORTED_MODULE_1__.find)(args.children,["props.value",value]))||void 0===_find||null===(_find$props=_find.props)||void 0===_find$props?void 0:_find$props.label)||"");updateArgs(newArgs)}),[updateArgs,args.options,args.children]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_4__.A,{...args,onChange:handleChange})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"select-field-0",name:"name-0",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"},{value:"4",label:"Option 4"}],value:"1",label:"A select field"}},WithLabelAndDescription={render:Template.bind({}),name:"With label and description",parameters:{controls:{disable:!1}},args:{id:"select-field-1",name:"name-1",options:Factory.args.options,value:Factory.args.options[2].value,label:"Select field with a label",description:"Select field with a description."}},WithError={render:Template.bind({}),name:"With error",parameters:{controls:{disable:!1}},args:{id:"select-field-2",name:"name-2",options:Factory.args.options,value:Factory.args.options[1].value,label:"Select field with a label",validation:{variant:"error",message:"Select field with an error."}}},WithLabelSuffix={render:Template.bind({}),name:"With label suffix",parameters:{controls:{disable:!1}},args:{id:"select-field-3",name:"name-3",options:Factory.args.options,value:Factory.args.options[2].value,label:"Select field with a label suffix",labelSuffix:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_index__WEBPACK_IMPORTED_MODULE_5__.A,{className:"yst-ml-1.5",size:"small",children:"Beta"})}},OptionsProp={render:Template.bind({}),name:"Options prop",parameters:{controls:{disable:!1},docs:{description:{story:"Add options as an array of objects with `options` prop. Each object must contain `value` and `label` parameters. The displayed selected label will be updated automatically on change."}}},args:{id:"select-field-4",name:"name-4",options:Factory.args.options,value:Factory.args.options[2].value,label:"Select field with a options as array"}},ChildrenProp={render:Template.bind({}),name:"Children prop",parameters:{controls:{disable:!1},docs:{description:{story:"Add options as an array of React components with `children` prop, using the exposed option component `SelectField.Option`. In this case changing the `selectedLabel` should be updated in the handleChange function. See the value updating in the code."}}},args:{id:"select-field-5",name:"name-5",children:Factory.args.options.map((option=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_4__.A.Option,{...option},option.value))),value:Factory.args.options[2].value,selectedLabel:Factory.args.options[2].label,label:"Select field with options as exposed React components"}},Validation=()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"yst-space-y-8",children:(0,lodash__WEBPACK_IMPORTED_MODULE_1__.map)(_constants__WEBPACK_IMPORTED_MODULE_6__.U,(variant=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_4__.A,{id:`validation-${variant}`,name:`validation-${variant}`,options:Factory.args.options,value:Factory.args.options[0].value,label:`With validation of variant ${variant}`,onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,validation:{variant,message:{success:"Looks like you are nailing it!",warning:"Looks like you could do better!",info:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:["Looks like you could use some ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("a",{href:"https://yoast.com",target:"_blank",rel:"noreferrer",children:"more info"}),"!"]}),error:"Looks like you are doing it wrong!"}[variant]}},variant)))});Validation.displayName="Validation";const __WEBPACK_DEFAULT_EXPORT__={title:"2) Components/Select field",component:___WEBPACK_IMPORTED_MODULE_4__.A,argTypes:{description:{control:"text"},children:{description:"Alternative to options.",control:"text"},labelSuffix:{control:"text"}},parameters:{docs:{description:{component:"A simple select field component that extends select element."},page:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_storybook_interactive_docs_page__WEBPACK_IMPORTED_MODULE_7__.f,{stories:[WithLabelAndDescription,WithError,WithLabelSuffix,OptionsProp,ChildrenProp,Validation]})}},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"yst-pb-32",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Story,{})})]};Validation.__docgenInfo={description:"",methods:[],displayName:"Validation"}}}]);