@acusti/uikit-docs 0.1.0 → 0.3.0

package/dist/assets/Dropdown-DUP_ybXe.js

@@ -0,0 +1,84 @@
+import{a as ct,S as lt}from"./index-BRXcJgsA.js";import{c as Ye,a as Ae}from"./clsx-hXifHU8N.js";import{R as Ce,r as A}from"./iframe-ByGa_ItU.js";const{useEffect:dt,useState:ft}=Ce,Y=()=>{},mt={disconnect:Y,observe:Y,unobserve:Y},ze=Object.freeze({bottom:void 0,left:void 0,right:void 0,top:void 0}),pt=Object.freeze({boundingClientRect:ze,maybeCleanupElement:Y,maybeCleanupTimer:null,renderTimeSetters:new Set,retryCount:0,scheduleUpdate:Y,updateBoundingClientRect:Y,updaterFrameID:null}),Oe=60*1e3,Q=new WeakMap;let ke=mt;typeof ResizeObserver=="function"&&(ke=new ResizeObserver((t,e)=>{for(const n of t){const a=n.target,i=Q.get(a);if(!i){e.unobserve(a);return}i.scheduleUpdate()}}));const gt=t=>{const e=Q.get(t);e&&(e.scheduleUpdate!=null&&e.scheduleUpdate!==Y||(e.updateBoundingClientRect=()=>{e.updaterFrameID=null;const n=t.getBoundingClientRect();if(!n.height&&!n.width){e.retryCount<10&&(e.retryCount++,e.updaterFrameID=requestAnimationFrame(e.updateBoundingClientRect));return}if(e.retryCount&&(e.retryCount=0),e.boundingClientRect.bottom===n.bottom&&e.boundingClientRect.left===n.left&&e.boundingClientRect.right===n.right&&e.boundingClientRect.top===n.top)return;e.boundingClientRect={bottom:n.bottom,left:n.left,right:n.right,top:n.top};const a=typeof Date.now=="function"?Date.now():0;for(const i of e.renderTimeSetters)i(a)},e.scheduleUpdate=()=>{e.updaterFrameID==null&&(e.updaterFrameID=requestAnimationFrame(e.updateBoundingClientRect))},e.maybeCleanupElement=()=>{if(e.maybeCleanupTimer!=null&&(clearTimeout(e.maybeCleanupTimer),e.maybeCleanupTimer=null),e.renderTimeSetters.size&&t.closest("html")){e.maybeCleanupTimer=setTimeout(e.maybeCleanupElement,Oe);return}Q.delete(t),ke.unobserve(t)},e.maybeCleanupTimer=setTimeout(e.maybeCleanupElement,Oe)))},ht=(t,e)=>{const n=Q.get(t);n&&(n.renderTimeSetters.delete(e),n.maybeCleanupElement())},Ne=t=>{const e=Ye.c(9),[,n]=ft(0);let a=!1,i;e[0]!==t?(i=(t&&Q.get(t))??null,e[0]=t,e[1]=i):i=e[1];let r=i;t&&!r&&(a=!0,e[2]!==t?(r={...pt,renderTimeSetters:new Set},Q.set(t,r),e[2]=t,e[3]=r):r=e[3],gt(t),ke.observe(t)),r&&(r.renderTimeSetters.add(n),a&&r.updateBoundingClientRect());let o;e[4]!==t||e[5]!==n?(o=()=>t?()=>{ht(t,n)}:Y,e[4]=t,e[5]=n,e[6]=o):o=e[6];let s;return e[7]!==t?(s=[t],e[7]=t,e[8]=s):s=e[8],dt(o,s),(r==null?void 0:r.boundingClientRect)??ze},{useRef:ye}=Ce,le=Object.freeze({bottom:!1,hasLayout:!1,left:!1,maxHeight:null,maxWidth:null,right:!1,top:!1}),Be=Object.freeze({...le,hasLayout:!0}),Et=t=>{for(;t!=null&&t.parentElement;){if(t.parentElement.tagName==="BODY"||getComputedStyle(t.parentElement).overflowX!=="visible")return t.parentElement;t=t.parentElement}return null},ae=(t,e)=>t>-10||e-t<=40?!1:e>=t*.75,De=({length:t,positionAfter:e,positionBefore:n})=>Number.isNaN(e)?!1:Number.isNaN(n)?!0:n>=0?!1:e<t/2,yt=t=>{const e=ye(le),n=ye(t??null),a=ye(null),i=Ne(t),r=Et(t),o=Ne(r);if(t!==n.current&&(n.current=t??null,a.current=null),!t||i.top==null)return e.current=le,le;if(o.top==null)return e.current=Be,Be;const s=e.current,p=i.bottom,h=i.left,u=i.right,y=i.top,l=(r==null?void 0:r.tagName)==="BODY"?r.ownerDocument.documentElement.clientHeight:o.bottom,d=o.left,E=o.right,T=o.top,L=p-y,z=u-h;let C=p>l||s.bottom,D=h<d||s.left,_=u>E||s.right,R=y<T||s.top;if(C||D||_||R){const k=a.current??getComputedStyle(t);a.current??(a.current=k);const U=De({length:L,positionAfter:parseFloat(k.getPropertyValue("bottom")),positionBefore:parseFloat(k.getPropertyValue("top"))}),X=De({length:z,positionAfter:parseFloat(k.getPropertyValue("right")),positionBefore:parseFloat(k.getPropertyValue("left"))}),W=U?L:0,de=X?0:z,fe=X?z:0,M=U?0:L,w=h-de-d,H=E-(u+fe),V=y-M-T,j=l-(p+W);U&&R?(R=ae(V,j),C=!R):!U&&C&&(C=ae(j,V),R=!C),X&&D?(D=ae(w,H),_=!D):!X&&_&&(_=ae(H,w),D=!_)}const B=!C||R?l-y:p-T,te=!_||D?E-h:u-d;return(!s.hasLayout||C!==s.bottom||D!==s.left||B!==s.maxHeight||te!==s.maxWidth||_!==s.right||R!==s.top)&&(e.current={bottom:C,hasLayout:!0,left:D,maxHeight:B,maxWidth:te,right:_,top:R}),e.current},oe={config:new Map,keydown:[],keypress:[],keyup:[]},bt=-50,vt=50,Ue=bt*-1,Tt=()=>{};function be({eventType:t,handler:e,ignoreUsedKeyboardEvents:n=!0,priority:a}){if(!e)return Tt;const i=Math.min(vt+Ue,Math.max(0,(a??0)+Ue)),r=oe[t];return r[i]??(r[i]=new Set),r[i].add(e),oe.config.set(e,{ignoreUsedKeyboardEvents:n,priority:i}),()=>{if(oe.config.delete(e),r[i]!=null&&(r[i].delete(e),!r[i].size)){delete r[i];for(let o=i;o>-1&&r[o]==null&&r.length===o+1;o--)r.length=o}}}const Rt=new Set(["button","checkbox","color","file","hidden","image","radio","range","reset","submit"]),wt=new Set([" ","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter"]),St=t=>t.isContentEditable||t.tagName==="TEXTAREA"||t.tagName==="INPUT",We=t=>{const e=t.target;return e==null||!St(e)?!1:e.tagName!=="INPUT"||!Rt.has(e.type)?!0:wt.has(t.key)};function Ge(t){if(!(!(t!=null&&t.defaultView)||t.defaultView.__useKeyboardEventsAttached__))return t.defaultView.__useKeyboardEventsAttached__=!0,t.addEventListener("keydown",Z),t.addEventListener("keypress",Z),t.addEventListener("keyup",Z),()=>{t.defaultView&&(t.defaultView.__useKeyboardEventsAttached__=!1),t.removeEventListener("keydown",Z),t.removeEventListener("keypress",Z),t.removeEventListener("keyup",Z)}}function Z(t){const e=t.type,n=oe[e];let a=n.length;const i=We(t);for(;a--;){const r=n[a];if(r!=null)for(const o of r){const s=oe.config.get(o);if((!i||(s==null?void 0:s.ignoreUsedKeyboardEvents)===!1)&&o(t)===!1)return}}}function Lt(t){const e=Ye.c(16),{ignoreUsedKeyboardEvents:n,onKeyDown:a,onKeyPress:i,onKeyUp:r,priority:o}=t;let s;e[0]===Symbol.for("react.memo_cache_sentinel")?(s=[],e[0]=s):s=e[0],A.useEffect(Ct,s);let p,h;e[1]!==n||e[2]!==a||e[3]!==o?(p=()=>be({eventType:"keydown",handler:a,ignoreUsedKeyboardEvents:n,priority:o}),h=[n,a,o],e[1]=n,e[2]=a,e[3]=o,e[4]=p,e[5]=h):(p=e[4],h=e[5]),A.useEffect(p,h);let u,y;e[6]!==n||e[7]!==i||e[8]!==o?(u=()=>be({eventType:"keypress",handler:i,ignoreUsedKeyboardEvents:n,priority:o}),y=[n,i,o],e[6]=n,e[7]=i,e[8]=o,e[9]=u,e[10]=y):(u=e[9],y=e[10]),A.useEffect(u,y);let l,d;e[11]!==n||e[12]!==r||e[13]!==o?(l=()=>be({eventType:"keyup",handler:r,ignoreUsedKeyboardEvents:n,priority:o}),d=[n,r,o],e[11]=n,e[12]=r,e[13]=o,e[14]=l,e[15]=d):(l=e[14],d=e[15]),A.useEffect(l,d)}function Ct(){Ge(document),document.querySelectorAll("iframe").forEach(kt)}function kt(t){!Mt(t)||!t.contentDocument||Ge(t.contentDocument)}function Mt(t){try{return typeof t.contentWindow.location.href=="string"}catch{return!1}}const _t=48,$e=57,It=65,He=15,qe=.99999,xt=.999999,je=.81,At=(t,e,n)=>{if(t===e)return 1;const a=t.length,i=e.length,r=Math.min(a,i);if(!r)return 0;const[o,s]=a>i?[t,e]:[e,t],p=o.indexOf(s);if(p>-1){const E=.15/(o.length-2)*p;return Math.max(xt-E,je)}const h=Math.min(.4,3/r);let u=0,y=0,l=0;for(let d=0;d<r;d++){const E=t.charCodeAt(d),T=e.charCodeAt(d);let L=Math.abs(E-T);E>=_t&&E<=$e&&T>It&&(L=$e+1-E),u+=Math.min(He,L),y+=He,L===0&&(u===l?(l+=-10*((d+1)*h),u=l):u-=1)}return u<=0?qe:(u=(y-u)/y,Math.min(qe,u))},Ot=({excludeMismatches:t,items:e,text:n})=>{if(n=n.trim().toUpperCase(),!n||!e.length)return e;const a=[[],[]],[i]=e.reduce(([r,o],s)=>{const p=At(s.trim().toUpperCase(),n);if(t&&p<je)return[r,o];let h=r.length;if(p>o[0])h=0;else if(p>o[o.length-1]){const u=o.findIndex(y=>y<p);u!==-1&&(h=u)}return r.splice(h,0,s),o.splice(h,0,p),[r,o]},a);return i},Nt=t=>Ot(t)[0],ee="uktdropdown",ce=`.${ee}`,Je=`${ee}-body`,Ze=`${ee}-label`,Qe=`${ee}-label-text`,we=`${ee}-trigger`,F=`.${Je}`,Pe=`.${Ze}`,Bt=`.${Qe}`,Dt=`.${we}`,Se="--uktdd-body-max-height",Le="--uktdd-body-max-width",Ut=`
+:root {
+  --uktdd-font-family: ${ct};
+  --uktdd-body-bg-color: #fff;
+  --uktdd-body-bg-color-hover: rgb(105,162,249);
+  --uktdd-body-color-hover: #fff;
+  --uktdd-body-buffer: 10px;
+  ${Se}: calc(100vh - var(--uktdd-body-buffer));
+  ${Le}: calc(100vw - var(--uktdd-body-buffer));
+  --uktdd-body-pad-bottom: 9px;
+  --uktdd-body-pad-left: 12px;
+  --uktdd-body-pad-right: 12px;
+  --uktdd-body-pad-top: 9px;
+  --uktdd-label-pad-right: 10px;
+}
+${ce},
+${Dt} {
+  font-family: var(--uktdd-font-family);
+}
+${ce} {
+  position: relative;
+  display: inline-block;
+}
+${ce}.disabled {
+  pointer-events: none;
+}
+${ce} > * {
+  cursor: default;
+}
+${Pe} {
+  display: flex;
+}
+${Bt} {
+  padding-right: var(--uktdd-label-pad-right);
+}
+${F} {
+  box-sizing: border-box;
+  position: absolute;
+  top: 100%;
+  max-height: var(${Se});
+  min-height: 50px;
+  max-width: var(${Le});
+  min-width: 100%;
+  overflow: auto;
+  z-index: 2;
+  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);
+  background-color: var(--uktdd-body-bg-color);
+  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
+}
+${F}.calculating-position {
+  visibility: hidden;
+}
+${F}.out-of-bounds-bottom:not(.out-of-bounds-top) {
+  top: auto;
+  bottom: 100%;
+}
+${F}.out-of-bounds-right:not(.out-of-bounds-left) {
+  left: auto;
+  right: 0px;
+}
+${Pe} + ${F} {
+  left: auto;
+  right: 0;
+}
+${F}.has-items {
+  user-select: none;
+}
+${F} [data-ukt-active] {
+  background-color: var(--uktdd-body-bg-color-hover);
+  color: var(--uktdd-body-color-hover);
+}
+`,et="[data-ukt-item], [data-ukt-value]",tt=t=>{if(!t)return null;const e=t.querySelector(F);if(!e)return null;let n=e.querySelectorAll(et);if(n.length)return n;for(n=e.children;n.length===1&&n[0].children!=null;)n=n[0].children;return n.length===1&&(n=e.children),n},ve=t=>t?t.querySelector("[data-ukt-active]"):null,Te=t=>{t.forEach(e=>{e.hasAttribute("data-ukt-active")&&delete e.dataset.uktActive})},G=({dropdownElement:t,element:e,index:n,indexAddend:a,isExactMatch:i,text:r})=>{const o=tt(t);if(!o)return;const s=Array.from(o);if(!s.length)return;const p=s.length-1,h=s.findIndex(l=>l.hasAttribute("data-ukt-active"));let u=h;if(typeof n=="number"&&(u=n<0?s.length+n:n),e)u=s.findIndex(l=>l===e);else if(typeof a=="number")h===-1&&a===-1?u=p:u+=a,u<0?u=0:u>p&&(u=p);else if(typeof r=="string"){if(!r){Te(s);return}const l=s.map(d=>d.innerText);if(i){const d=r.toLowerCase();u=l.findIndex(E=>E.toLowerCase().startsWith(d)),u===-1&&Te(s)}else{const d=Nt({items:l,text:r});u=l.findIndex(E=>E===d)}}if(u===-1||u===h)return;Te(s);const y=o[u];if(y!=null){y.setAttribute("data-ukt-active","");let{parentElement:l}=y,d=null;for(;!d&&l&&l!==t;)l.scrollHeight>l.clientHeight+15?d=l:l=l.parentElement;if(d){const E=d.getBoundingClientRect(),T=y.getBoundingClientRect(),L=T.top<E.top,z=T.bottom>E.bottom;if(L||z){let{scrollTop:C}=d;L?C-=E.top-T.top:C+=T.bottom-E.bottom,d.scrollTop=C}}}},{Children:$t,Fragment:Ht,useEffect:Ke,useRef:b,useState:Re}=Ce,Fe=()=>{},Xe="@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.",Ve="input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";function qt({allowCreate:t,allowEmpty:e=!0,children:n,className:a,disabled:i,hasItems:r=!0,isOpenOnMount:o,isSearchable:s,keepOpenOnSubmit:p=!r,label:h,name:u,onClick:y,onClose:l,onMouseDown:d,onMouseUp:E,onOpen:T,onSubmitItem:L,placeholder:z,style:C,tabIndex:D,value:_}){const R=$t.count(n);if(R!==1&&R!==2){if(R===0)throw new Error(Xe+" Received no children.");console.error(`${Xe} Received ${R} children.`)}let B;R>1&&(B=n[0]);const te=A.isValidElement(B),[k,U]=Re(o??!1),[X,W]=Re(!o),[de,fe]=Re(null),M=b(null),w=b(null),H=b(null),V=b(null),j=b("mouse"),ie=b(null),q=b(""),me=b(null),S=yt(de),se=b(t),Me=b(e),$=b(r),P=b(k),ue=b(X),_e=b(p),pe=b(l),ne=b(T),ge=b(L),he=b(_);Ke(()=>{se.current=t,Me.current=e,$.current=r,P.current=k,ue.current=X,_e.current=p,pe.current=l,ne.current=T,ge.current=L,he.current=_},[t,e,r,k,X,p,l,T,L,_]);const Ie=b(!1);Ke(()=>{if(!Ie.current){Ie.current=!0,P.current&&ne.current&&ne.current();return}k&&ne.current?ne.current():!k&&pe.current&&pe.current()},[k]);const J=()=>{U(!1),W(!1),me.current=null,H.current&&(clearTimeout(H.current),H.current=null)},xe=c=>{var N;const g=c.target;if(P.current&&!_e.current){const v=g.closest("[data-ukt-keep-open]");(!(v!=null&&v.dataset.uktKeepOpen)||v.dataset.uktKeepOpen==="false")&&(H.current=setTimeout(J,90))}if(!$.current)return;const f=ve(M.current);if(!f&&!se.current&&(!Me.current||(N=w.current)!=null&&N.value))return;let m=(f==null?void 0:f.innerText)??"";w.current&&(f?w.current.value=m:m=w.current.value,w.current===w.current.ownerDocument.activeElement&&w.current.blur());const O=(f==null?void 0:f.dataset.uktValue)??m;he.current&&he.current===O||ge.current&&ge.current({element:f,event:c,label:m,value:O})},nt=({clientX:c,clientY:g})=>{j.current="mouse";const f=me.current;f&&(Math.abs(f.clientX-c)<12&&Math.abs(f.clientY-g)<12||W(!1))},rt=c=>{if(!$.current||j.current!=="mouse")return;const g=M.current;if(!g)return;const f=tt(g);if(!f)return;const m=c.target,N=m.closest(et)??m;for(const v of f)if(v===N){G({dropdownElement:g,element:N});return}},ot=c=>{if(!$.current)return;const g=ve(M.current);if(!g)return;const f=c.relatedTarget;g!==c.target||g.contains(f)||delete g.dataset.uktActive},it=c=>{d&&d(c),!P.current&&(U(!0),W(!0),me.current={clientX:c.clientX,clientY:c.clientY},V.current=setTimeout(()=>{W(!1),V.current=null},1e3))},st=c=>{if(E&&E(c),ue.current||!P.current||H.current)return;const g=c.target;if(!g.closest(F)){!ue.current&&w.current!==g.ownerDocument.activeElement&&J();return}$.current&&xe(c)};Lt({ignoreUsedKeyboardEvents:!1,onKeyDown:c=>{const{altKey:g,ctrlKey:f,key:m,metaKey:O}=c,N=c.target,v=M.current;if(!v)return;const I=()=>{c.stopPropagation(),c.preventDefault(),j.current="keyboard"},x=v.contains(N);if(!P.current){if(!x)return;(m===" "||m==="Enter"||$.current&&(m==="ArrowUp"||m==="ArrowDown"))&&(I(),U(!0));return}const K=We(c);if($.current&&!K){let re=!f&&!O&&/^[A-Za-z0-9]$/.test(m);if(!re&&q.current&&(re=m===" "||m==="Backspace"),re){I(),m==="Backspace"?q.current=q.current.slice(0,-1):q.current+=m,G({dropdownElement:v,isExactMatch:se.current,text:q.current}),ie.current&&clearTimeout(ie.current),ie.current=setTimeout(()=>{q.current="",ie.current=null},1500);return}}if(m==="Enter"||m===" "&&!w.current){I(),xe(c);return}if(m==="Escape"||x&&m===" "&&!$.current){($.current||!K)&&J();return}if($.current){if(m==="ArrowUp"){I(),G(g||O?{dropdownElement:v,index:0}:{dropdownElement:v,indexAddend:-1});return}if(m==="ArrowDown"){I(),G(g||O?{dropdownElement:v,index:-1}:{dropdownElement:v,indexAddend:1});return}}}});const Ee=b(Fe),ut=c=>{if(M.current=c,!c){Ee.current(),Ee.current=Fe;return}const{ownerDocument:g}=c;let f=w.current;te&&!f&&c.firstElementChild&&(c.firstElementChild.matches(Ve)?f=c.firstElementChild:f=c.firstElementChild.querySelector(Ve),w.current=f);const m=({target:I})=>{const x=I;M.current&&!M.current.contains(x)&&J()},O=({target:I})=>{var K;if(!P.current||H.current)return;if(ue.current){W(!1),V.current&&(clearTimeout(V.current),V.current=null);return}const x=I;(K=M.current)!=null&&K.contains(x)||J()},N=({target:I})=>{if(!P.current)return;const x=I;!M.current||M.current.contains(x)||x.contains(M.current)||J()};document.addEventListener("focusin",N),document.addEventListener("mousedown",m),document.addEventListener("mouseup",O),g!==document&&(g.addEventListener("focusin",N),g.addEventListener("mousedown",m),g.addEventListener("mouseup",O)),o&&c.focus();const v=I=>{const x=M.current;if(!x)return;P.current||U(!0);const K=I.target,re=q.current.length>K.value.length;q.current=K.value,!(re&&K.value.length&&ve(x))&&G({dropdownElement:x,isExactMatch:se.current,text:q.current})};f&&f.addEventListener("input",v),Ee.current=()=>{document.removeEventListener("focusin",N),document.removeEventListener("mousedown",m),document.removeEventListener("mouseup",O),g!==document&&(g.removeEventListener("focusin",N),g.removeEventListener("mousedown",m),g.removeEventListener("mouseup",O)),f&&f.removeEventListener("input",v)}};te||(s?B=A.createElement("input",{autoComplete:"off",className:we,defaultValue:_??"",disabled:i,name:u,onFocus:()=>U(!0),placeholder:z,ref:w,tabIndex:D,type:"text"}):B=A.createElement("button",{className:we,tabIndex:0},B)),h&&(B=A.createElement("label",{className:Ze},A.createElement("div",{className:Qe},h),B));const at={...C,...S.maxHeight!=null&&S.maxHeight>0?{[Se]:`calc(${S.maxHeight}px - var(--uktdd-body-buffer))`}:null,...S.maxWidth!=null&&S.maxWidth>0?{[Le]:`calc(${S.maxWidth}px - var(--uktdd-body-buffer))`}:null};return A.createElement(Ht,null,A.createElement(lt,{href:"@acusti/dropdown/Dropdown"},Ut),A.createElement("div",{className:Ae(ee,a,{disabled:i,"is-open":k,"is-searchable":s}),onClick:y,onMouseDown:it,onMouseMove:nt,onMouseOut:ot,onMouseOver:rt,onMouseUp:st,ref:ut,style:at},B,k?A.createElement("div",{className:Ae(Je,{"calculating-position":!S.hasLayout,"has-items":r,"out-of-bounds-bottom":S.bottom&&!S.top,"out-of-bounds-left":S.left&&!S.right,"out-of-bounds-right":S.right&&!S.left,"out-of-bounds-top":S.top&&!S.bottom}),ref:fe},R>1?n[1]:n):null))}qt.__docgenInfo={description:"",methods:[],displayName:"Dropdown",props:{allowCreate:{required:!1,tsType:{name:"boolean"},description:`Boolean indicating if the user can submit a value not already in the
+dropdown.`},allowEmpty:{required:!1,tsType:{name:"boolean"},description:`Boolean indicating if the user can submit an empty value (i.e. clear
+the value). Defaults to true.`,defaultValue:{value:"true",computed:!1}},children:{required:!0,tsType:{name:"union",raw:"ChildrenTuple | React.JSX.Element",elements:[{name:"tuple",raw:"[React.ReactNode, React.ReactNode]",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"ReactReactNode",raw:"React.ReactNode"}]},{name:"React.JSX.Element"}]},description:"Can take a single React element or exactly two renderable children."},className:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},group:{required:!1,tsType:{name:"string"},description:`Group identifier string links dropdowns together into a menu
+(like macOS top menubar).`},hasItems:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},isOpenOnMount:{required:!1,tsType:{name:"boolean"},description:""},isSearchable:{required:!1,tsType:{name:"boolean"},description:""},keepOpenOnSubmit:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"!hasItems",computed:!1}},label:{required:!1,tsType:{name:"string"},description:""},name:{required:!1,tsType:{name:"string"},description:`Only usable in conjunction with {isSearchable: true}.
+Used as search input’s name.`},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.MouseEvent<HTMLElement>) => unknown",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLElement>",elements:[{name:"HTMLElement"}]},name:"event"}],return:{name:"unknown"}}},description:""},onClose:{required:!1,tsType:{name:"signature",type:"function",raw:"() => unknown",signature:{arguments:[],return:{name:"unknown"}}},description:""},onMouseDown:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.MouseEvent<HTMLElement>) => unknown",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLElement>",elements:[{name:"HTMLElement"}]},name:"event"}],return:{name:"unknown"}}},description:""},onMouseUp:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.MouseEvent<HTMLElement>) => unknown",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLElement>",elements:[{name:"HTMLElement"}]},name:"event"}],return:{name:"unknown"}}},description:""},onOpen:{required:!1,tsType:{name:"signature",type:"function",raw:"() => unknown",signature:{arguments:[],return:{name:"unknown"}}},description:""},onSubmitItem:{required:!1,tsType:{name:"signature",type:"function",raw:"(payload: Item) => void",signature:{arguments:[{type:{name:"signature",type:"object",raw:`{
+    element: HTMLElement | null;
+    event: Event | React.SyntheticEvent<HTMLElement>;
+    label: string;
+    value: string;
+}`,signature:{properties:[{key:"element",value:{name:"union",raw:"HTMLElement | null",elements:[{name:"HTMLElement"},{name:"null"}],required:!0}},{key:"event",value:{name:"union",raw:"Event | React.SyntheticEvent<HTMLElement>",elements:[{name:"Event"},{name:"ReactSyntheticEvent",raw:"React.SyntheticEvent<HTMLElement>",elements:[{name:"HTMLElement"}]}],required:!0}},{key:"label",value:{name:"string",required:!0}},{key:"value",value:{name:"string",required:!0}}]}},name:"payload"}],return:{name:"void"}}},description:""},placeholder:{required:!1,tsType:{name:"string"},description:`Only usable in conjunction with {isSearchable: true}.
+Used as search input’s placeholder.`},style:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:""},tabIndex:{required:!1,tsType:{name:"number"},description:`Only usable in conjunction with {isSearchable: true}.
+Used as search input’s tabIndex.`},value:{required:!1,tsType:{name:"string"},description:`Used as search input’s value if props.isSearchable === true
+Used to determine if value has changed to avoid triggering onSubmitItem if not`}}};export{qt as D};

package/dist/assets/Dropdown.stories-2Wtw1otE.js

@@ -0,0 +1,336 @@
+import{r as e,R as ie}from"./iframe-ByGa_ItU.js";import{C as g}from"./CSSValueInput-BoZriUnh.js";import{D as re}from"./Dropdown-DUP_ybXe.js";/* empty css                  */import"./jsx-runtime-D_zvdyIk.js";import"./clsx-hXifHU8N.js";import"./index-BRXcJgsA.js";const{fn:l}=__STORYBOOK_MODULE_TEST__,{Fragment:se}=ie,Ee={component:re,parameters:{docs:{description:{component:"`Dropdown` is a React component that renders a menu-like UI with a trigger that the user clicks to disclose a dropdown positioned below the trigger. The body of the dropdown can include any DOM, and many dropdowns can be combined to form a multi-item menu, like the system menu in the top toolbar of macOS."}}},tags:["autodocs"],title:"UIKit/Controls/Dropdown"},n={args:{children:e.createElement("ul",null,e.createElement("li",null,"0px"),e.createElement("li",null,"4px"),e.createElement("li",null,"9px"),e.createElement("li",null,"18px"),e.createElement("li",null,"36px"),e.createElement("li",null,"54px"),e.createElement("li",null,"72px"),e.createElement("li",null,"144px"),e.createElement("li",null,"167px"),e.createElement("li",null,"198px")),className:"css-lengths no-trigger-text"}},t={args:{children:e.createElement("ul",null,e.createElement("li",null,"Alabama"),e.createElement("li",null,"Alaska"),e.createElement("li",null,"Arizona"),e.createElement("li",null,"Arkansas"),e.createElement("li",null,"California"),e.createElement("li",null,"Colorado"),e.createElement("li",null,"Connecticut"),e.createElement("li",null,"Delaware"),e.createElement("li",null,"Florida"),e.createElement("li",null,"Georgia"),e.createElement("li",null,"Hawaii"),e.createElement("li",null,"Idaho"),e.createElement("li",null,"Illinois"),e.createElement("li",null,"Indiana"),e.createElement("li",null,"Iowa"),e.createElement("li",null,"Kansas"),e.createElement("li",null,"Kentucky"),e.createElement("li",null,"Louisiana"),e.createElement("li",null,"Maine"),e.createElement("li",null,"Maryland"),e.createElement("li",null,"Massachusetts"),e.createElement("li",null,"Michigan"),e.createElement("li",null,"Minnesota"),e.createElement("li",null,"Mississippi"),e.createElement("li",null,"Missouri"),e.createElement("li",null,"Montana"),e.createElement("li",null,"Nebraska"),e.createElement("li",null,"Nevada"),e.createElement("li",null,"New Hampshire"),e.createElement("li",null,"New Jersey"),e.createElement("li",null,"New Mexico"),e.createElement("li",null,"New York"),e.createElement("li",null,"North Carolina"),e.createElement("li",null,"North Dakota"),e.createElement("li",null,"Ohio"),e.createElement("li",null,"Oklahoma"),e.createElement("li",null,"Oregon"),e.createElement("li",null,"Pennsylvania"),e.createElement("li",null,"Rhode Island"),e.createElement("li",null,"South Carolina"),e.createElement("li",null,"South Dakota"),e.createElement("li",null,"Tennessee"),e.createElement("li",null,"Texas"),e.createElement("li",null,"Utah"),e.createElement("li",null,"Vermont"),e.createElement("li",null,"Virginia"),e.createElement("li",null,"Washington"),e.createElement("li",null,"West Virginia"),e.createElement("li",null,"Wisconsin"),e.createElement("li",null,"Wyoming")),className:"states-dropdown",isSearchable:!0,placeholder:"Choose a state…"}},a={args:{children:e.createElement("ul",null,e.createElement("li",{"data-ukt-value":"100"},e.createElement("span",{className:"item-title"},"Font Weight - "),"100"),e.createElement("li",{"data-ukt-value":"200"},e.createElement("span",{className:"item-title"},"Font Weight - "),"200"),e.createElement("li",{"data-ukt-value":"300"},e.createElement("span",{className:"item-title"},"Font Weight - "),"300"),e.createElement("li",{"data-ukt-value":"400"},e.createElement("span",{className:"item-title"},"Font Weight - "),"400"),e.createElement("li",{"data-ukt-value":"500"},e.createElement("span",{className:"item-title"},"Font Weight - "),"500"),e.createElement("li",{"data-ukt-value":"600"},e.createElement("span",{className:"item-title"},"Font Weight - "),"600"),e.createElement("li",{"data-ukt-value":"700"},e.createElement("span",{className:"item-title"},"Font Weight - "),"700")),className:"font-weight",isSearchable:!0}},i={args:{children:["View menu",e.createElement(se,null,e.createElement("h4",{className:"heading"},"View"),e.createElement("ul",null,e.createElement("li",{"data-ukt-item":!0},"Open"),e.createElement("li",{"data-ukt-item":!0},"Preview")),e.createElement("h4",{className:"heading"},"Edit"),e.createElement("ul",null,e.createElement("li",{"data-ukt-value":"save-item"},"Save"),e.createElement("li",{"data-ukt-value":"edit-item"},"Edit"),e.createElement("li",{"data-ukt-value":"delete-item"},"Delete")))],className:"open-on-mount-context-menu",isOpenOnMount:!0,onClick:l(),onClose:l(),onMouseDown:l(),onMouseUp:l(),onOpen:l(),onSubmitItem:l()}},r={args:{children:["Open",e.createElement("div",null,e.createElement("p",null,"Try interacting with the controls here. The dropdown should only close when you click outside of the entire dropdown or if you hit the escape key when focus isn’t in the input controls."),e.createElement(g,{cssValueType:"length",label:"Width",onSubmitValue:()=>{},placeholder:"100vw",unit:"vw"}),e.createElement(g,{cssValueType:"length",label:"Rotation",onSubmitValue:()=>{},placeholder:"0deg",step:5,unit:"deg"}))],className:"dropdown-without-items",hasItems:!1}},s={args:{children:e.createElement("ul",null,e.createElement("li",null,"0px"),e.createElement("li",null,"4px"),e.createElement("li",null,"9px"),e.createElement("li",null,"18px"),e.createElement("li",null,"36px"),e.createElement("li",null,"54px"),e.createElement("li",null,"72px"),e.createElement("li",null,"144px"),e.createElement("li",null,"167px"),e.createElement("li",null,"198px")),className:"searchable-with-label",isSearchable:!0,label:"Font size"}},o={args:{allowCreate:!0,children:e.createElement("ul",null,e.createElement("li",null,"0px"),e.createElement("li",null,"4px"),e.createElement("li",null,"9px"),e.createElement("li",null,"18px"),e.createElement("li",null,"36px"),e.createElement("li",null,"54px"),e.createElement("li",null,"72px"),e.createElement("li",null,"144px"),e.createElement("li",null,"167px"),e.createElement("li",null,"198px")),className:"searchable-and-allow-create",isSearchable:!0,label:"Font size"}},c={args:{allowCreate:!0,children:[e.createElement(g,{name:"cssinputbackgroundsize",onSubmitValue:()=>{},placeholder:"cover",validator:/^(auto|contain|cover)$/}),e.createElement("ul",null,e.createElement("li",null,"cover"),e.createElement("li",null,"contain"),e.createElement("li",null,"auto"),e.createElement("li",null,"50px"),e.createElement("li",null,"100px"),e.createElement("li",null,"200px"),e.createElement("li",null,"50%"))],className:"css-value-input-trigger",hasItems:!0,label:"Background size"}},u={args:{children:[e.createElement("textarea",null),e.createElement("ul",null,e.createElement("li",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla quam, vel tincidunt nisl mattis vel."),e.createElement("li",null,"Aenean posuere erat sed enim luctus, et accumsan nisl elementum. Nulla vel blandit urna, vel accumsan nulla. Nulla varius luctus ex, gravida ultrices orci sagittis eu."),e.createElement("li",null,"Quisque vitae magna euismod ligula molestie maximus id et nunc. Nam et lacus euismod, porttitor massa vel, sollicitudin ex. Sed ut tellus suscipit, faucibus tortor nec, fermentum mi."),e.createElement("li",null,"Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor dapibus bibendum lobortis quis ante. Ut eget scelerisque massa."),e.createElement("li",null,"Vestibulum quis dignissim nunc. Mauris fringilla at nulla non lacinia. Etiam tristique elit non nisl finibus, fringilla hendrerit ligula hendrerit. Fusce eget leo lacinia, eleifend diam non, suscipit purus."))],className:"textarea-trigger",hasItems:!0}},m={args:{children:["Colors",e.createElement("ul",null,e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Red")),e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Blue")),e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Yellow")),e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Cyan")),e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Orchid")),e.createElement("li",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"})," Slate")))],className:"checkboxes",keepOpenOnSubmit:!0}},p={args:{children:e.createElement("ul",null,e.createElement("li",null,"0px"),e.createElement("li",null,"4px"),e.createElement("li",null,"9px"),e.createElement("li",null,"18px"),e.createElement("li",null,"36px"),e.createElement("li",null,"54px"),e.createElement("li",null,"72px"),e.createElement("li",null,"144px"),e.createElement("li",null,"167px"),e.createElement("li",null,"198px")),className:"disabled-dropdown",disabled:!0,isSearchable:!0,label:"Disabled",name:"disabledexample",value:"167px"}},d={args:{children:e.createElement("ul",null,e.createElement("li",null,"the carbon in our apple pies"),e.createElement("li",null,"sea of tranquility tesseract"),e.createElement("li",null,"encyclopaedia galactica"),e.createElement("li",null,"billions upon billions"),e.createElement("li",null,"network of wormholes"),e.createElement("li",null,"tingling of the spine"),e.createElement("li",null,"corpus callosum"),e.createElement("li",null,"finite but unbounded")),className:"overlapping-dropdown no-trigger-text"}},h={args:{children:e.createElement("ul",null,e.createElement("li",null,"0px"),e.createElement("li",null,"4px"),e.createElement("li",null,"9px"),e.createElement("li",null,"18px"),e.createElement("li",null,"36px"),e.createElement("li",null,"54px"),e.createElement("li",null,"72px"),e.createElement("li",null,"144px"),e.createElement("li",null,"167px"),e.createElement("li",null,"198px")),className:"out-of-bounds-example position-right",isSearchable:!0,name:"outofboundsatright",placeholder:"Show above & to the left"}},E={args:{children:e.createElement("ul",null,e.createElement("li",null,"Antarctica"),e.createElement("li",null,"Arctic Circle"),e.createElement("li",null,"North Pole")),className:"out-of-bounds-example no-direction-change",isSearchable:!0,name:"outofboundsatbottomnodirectionchange",placeholder:"Show below even though it goes out of bounds"}};var x,b,w;n.parameters={...n.parameters,docs:{...(x=n.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>0px</li>
+                <li>4px</li>
+                <li>9px</li>
+                <li>18px</li>
+                <li>36px</li>
+                <li>54px</li>
+                <li>72px</li>
+                <li>144px</li>
+                <li>167px</li>
+                <li>198px</li>
+            </ul>,
+    className: 'css-lengths no-trigger-text'
+  }
+}`,...(w=(b=n.parameters)==null?void 0:b.docs)==null?void 0:w.source}}};var S,k,v;t.parameters={...t.parameters,docs:{...(S=t.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>Alabama</li>
+                <li>Alaska</li>
+                <li>Arizona</li>
+                <li>Arkansas</li>
+                <li>California</li>
+                <li>Colorado</li>
+                <li>Connecticut</li>
+                <li>Delaware</li>
+                <li>Florida</li>
+                <li>Georgia</li>
+                <li>Hawaii</li>
+                <li>Idaho</li>
+                <li>Illinois</li>
+                <li>Indiana</li>
+                <li>Iowa</li>
+                <li>Kansas</li>
+                <li>Kentucky</li>
+                <li>Louisiana</li>
+                <li>Maine</li>
+                <li>Maryland</li>
+                <li>Massachusetts</li>
+                <li>Michigan</li>
+                <li>Minnesota</li>
+                <li>Mississippi</li>
+                <li>Missouri</li>
+                <li>Montana</li>
+                <li>Nebraska</li>
+                <li>Nevada</li>
+                <li>New Hampshire</li>
+                <li>New Jersey</li>
+                <li>New Mexico</li>
+                <li>New York</li>
+                <li>North Carolina</li>
+                <li>North Dakota</li>
+                <li>Ohio</li>
+                <li>Oklahoma</li>
+                <li>Oregon</li>
+                <li>Pennsylvania</li>
+                <li>Rhode Island</li>
+                <li>South Carolina</li>
+                <li>South Dakota</li>
+                <li>Tennessee</li>
+                <li>Texas</li>
+                <li>Utah</li>
+                <li>Vermont</li>
+                <li>Virginia</li>
+                <li>Washington</li>
+                <li>West Virginia</li>
+                <li>Wisconsin</li>
+                <li>Wyoming</li>
+            </ul>,
+    className: 'states-dropdown',
+    isSearchable: true,
+    placeholder: 'Choose a state…'
+  }
+}`,...(v=(k=t.parameters)==null?void 0:k.docs)==null?void 0:v.source}}};var N,f,y;a.parameters={...a.parameters,docs:{...(N=a.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li data-ukt-value="100">
+                    <span className="item-title">Font Weight - </span>
+                    100
+                </li>
+                <li data-ukt-value="200">
+                    <span className="item-title">Font Weight - </span>
+                    200
+                </li>
+                <li data-ukt-value="300">
+                    <span className="item-title">Font Weight - </span>
+                    300
+                </li>
+                <li data-ukt-value="400">
+                    <span className="item-title">Font Weight - </span>
+                    400
+                </li>
+                <li data-ukt-value="500">
+                    <span className="item-title">Font Weight - </span>
+                    500
+                </li>
+                <li data-ukt-value="600">
+                    <span className="item-title">Font Weight - </span>
+                    600
+                </li>
+                <li data-ukt-value="700">
+                    <span className="item-title">Font Weight - </span>
+                    700
+                </li>
+            </ul>,
+    className: 'font-weight',
+    isSearchable: true
+  }
+}`,...(y=(f=a.parameters)==null?void 0:f.docs)==null?void 0:y.source}}};var C,O,D;i.parameters={...i.parameters,docs:{...(C=i.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  args: {
+    children: ['View menu', <Fragment>
+                <h4 className="heading">View</h4>
+                <ul>
+                    <li data-ukt-item>Open</li>
+                    <li data-ukt-item>Preview</li>
+                </ul>
+                <h4 className="heading">Edit</h4>
+                <ul>
+                    <li data-ukt-value="save-item">Save</li>
+                    <li data-ukt-value="edit-item">Edit</li>
+                    <li data-ukt-value="delete-item">Delete</li>
+                </ul>
+            </Fragment>],
+    className: 'open-on-mount-context-menu',
+    isOpenOnMount: true,
+    // NOTE spies are a workaround for a bug related to implicit arg detection
+    // https://github.com/storybookjs/storybook/issues/23873
+    onClick: fn(),
+    onClose: fn(),
+    onMouseDown: fn(),
+    onMouseUp: fn(),
+    onOpen: fn(),
+    onSubmitItem: fn()
+  }
+}`,...(D=(O=i.parameters)==null?void 0:O.docs)==null?void 0:D.source}}};var M,W,I;r.parameters={...r.parameters,docs:{...(M=r.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    children: ['Open', <div>
+                <p>
+                    Try interacting with the controls here. The dropdown should only close
+                    when you click outside of the entire dropdown or if you hit the escape
+                    key when focus isn’t in the input controls.
+                </p>
+                <CSSValueInput cssValueType="length" label="Width" onSubmitValue={() => {}} placeholder="100vw" unit="vw" />
+                <CSSValueInput cssValueType="length" label="Rotation" onSubmitValue={() => {}} placeholder="0deg" step={5} unit="deg" />
+            </div>],
+    className: 'dropdown-without-items',
+    hasItems: false
+  }
+}`,...(I=(W=r.parameters)==null?void 0:W.docs)==null?void 0:I.source}}};var V,F,T;s.parameters={...s.parameters,docs:{...(V=s.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>0px</li>
+                <li>4px</li>
+                <li>9px</li>
+                <li>18px</li>
+                <li>36px</li>
+                <li>54px</li>
+                <li>72px</li>
+                <li>144px</li>
+                <li>167px</li>
+                <li>198px</li>
+            </ul>,
+    className: 'searchable-with-label',
+    isSearchable: true,
+    label: 'Font size'
+  }
+}`,...(T=(F=s.parameters)==null?void 0:F.docs)==null?void 0:T.source}}};var A,q,R;o.parameters={...o.parameters,docs:{...(A=o.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    allowCreate: true,
+    children: <ul>
+                <li>0px</li>
+                <li>4px</li>
+                <li>9px</li>
+                <li>18px</li>
+                <li>36px</li>
+                <li>54px</li>
+                <li>72px</li>
+                <li>144px</li>
+                <li>167px</li>
+                <li>198px</li>
+            </ul>,
+    className: 'searchable-and-allow-create',
+    isSearchable: true,
+    label: 'Font size'
+  }
+}`,...(R=(q=o.parameters)==null?void 0:q.docs)==null?void 0:R.source}}};var z,B,L;c.parameters={...c.parameters,docs:{...(z=c.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    allowCreate: true,
+    children: [<CSSValueInput name="cssinputbackgroundsize" onSubmitValue={() => {}} placeholder="cover" validator={/^(auto|contain|cover)$/} />, <ul>
+                <li>cover</li>
+                <li>contain</li>
+                <li>auto</li>
+                <li>50px</li>
+                <li>100px</li>
+                <li>200px</li>
+                <li>50%</li>
+            </ul>],
+    className: 'css-value-input-trigger',
+    hasItems: true,
+    label: 'Background size'
+  }
+}`,...(L=(B=c.parameters)==null?void 0:B.docs)==null?void 0:L.source}}};var U,P,_;u.parameters={...u.parameters,docs:{...(U=u.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  args: {
+    children: [<textarea></textarea>, <ul>
+                <li>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+                    ullamcorper fringilla quam, vel tincidunt nisl mattis vel.
+                </li>
+                <li>
+                    Aenean posuere erat sed enim luctus, et accumsan nisl elementum. Nulla
+                    vel blandit urna, vel accumsan nulla. Nulla varius luctus ex, gravida
+                    ultrices orci sagittis eu.
+                </li>
+                <li>
+                    Quisque vitae magna euismod ligula molestie maximus id et nunc. Nam et
+                    lacus euismod, porttitor massa vel, sollicitudin ex. Sed ut tellus
+                    suscipit, faucibus tortor nec, fermentum mi.
+                </li>
+                <li>
+                    Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor
+                    dapibus bibendum lobortis quis ante. Ut eget scelerisque massa.
+                </li>
+                <li>
+                    Vestibulum quis dignissim nunc. Mauris fringilla at nulla non lacinia.
+                    Etiam tristique elit non nisl finibus, fringilla hendrerit ligula
+                    hendrerit. Fusce eget leo lacinia, eleifend diam non, suscipit purus.
+                </li>
+            </ul>],
+    className: 'textarea-trigger',
+    hasItems: true
+  }
+}`,...(_=(P=u.parameters)==null?void 0:P.docs)==null?void 0:_.source}}};var K,Y,H;m.parameters={...m.parameters,docs:{...(K=m.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  args: {
+    children: ['Colors', <ul>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Red
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Blue
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Yellow
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Cyan
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Orchid
+                    </label>
+                </li>
+                <li>
+                    <label>
+                        <input type="checkbox" /> Slate
+                    </label>
+                </li>
+            </ul>],
+    className: 'checkboxes',
+    keepOpenOnSubmit: true
+  }
+}`,...(H=(Y=m.parameters)==null?void 0:Y.docs)==null?void 0:H.source}}};var j,G,J;p.parameters={...p.parameters,docs:{...(j=p.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>0px</li>
+                <li>4px</li>
+                <li>9px</li>
+                <li>18px</li>
+                <li>36px</li>
+                <li>54px</li>
+                <li>72px</li>
+                <li>144px</li>
+                <li>167px</li>
+                <li>198px</li>
+            </ul>,
+    className: 'disabled-dropdown',
+    disabled: true,
+    isSearchable: true,
+    label: 'Disabled',
+    name: 'disabledexample',
+    value: '167px'
+  }
+}`,...(J=(G=p.parameters)==null?void 0:G.docs)==null?void 0:J.source}}};var Q,$,X;d.parameters={...d.parameters,docs:{...(Q=d.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>the carbon in our apple pies</li>
+                <li>sea of tranquility tesseract</li>
+                <li>encyclopaedia galactica</li>
+                <li>billions upon billions</li>
+                <li>network of wormholes</li>
+                <li>tingling of the spine</li>
+                <li>corpus callosum</li>
+                <li>finite but unbounded</li>
+            </ul>,
+    className: 'overlapping-dropdown no-trigger-text'
+  }
+}`,...(X=($=d.parameters)==null?void 0:$.docs)==null?void 0:X.source}}};var Z,ee,le;h.parameters={...h.parameters,docs:{...(Z=h.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>0px</li>
+                <li>4px</li>
+                <li>9px</li>
+                <li>18px</li>
+                <li>36px</li>
+                <li>54px</li>
+                <li>72px</li>
+                <li>144px</li>
+                <li>167px</li>
+                <li>198px</li>
+            </ul>,
+    className: 'out-of-bounds-example position-right',
+    isSearchable: true,
+    name: 'outofboundsatright',
+    placeholder: 'Show above & to the left'
+  }
+}`,...(le=(ee=h.parameters)==null?void 0:ee.docs)==null?void 0:le.source}}};var ne,te,ae;E.parameters={...E.parameters,docs:{...(ne=E.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  args: {
+    children: <ul>
+                <li>Antarctica</li>
+                <li>Arctic Circle</li>
+                <li>North Pole</li>
+            </ul>,
+    className: 'out-of-bounds-example no-direction-change',
+    isSearchable: true,
+    name: 'outofboundsatbottomnodirectionchange',
+    placeholder: 'Show below even though it goes out of bounds'
+  }
+}`,...(ae=(te=E.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};const ge=["CSSLengthsDropdown","StatesDropdown","FontWeightDropdown","ShowContextMenuOnMount","DropdownWithInteractiveContents","SearchableWithLabel","SearchableAndAllowCreate","CSSValueInputTrigger","TextareaTrigger","CheckboxesDropdown","DisabledDropdown","OverlappingDropdown","OutOfBoundsAtRight","OutOfBoundsWithNoDirectionChange"];export{n as CSSLengthsDropdown,c as CSSValueInputTrigger,m as CheckboxesDropdown,p as DisabledDropdown,r as DropdownWithInteractiveContents,a as FontWeightDropdown,h as OutOfBoundsAtRight,E as OutOfBoundsWithNoDirectionChange,d as OverlappingDropdown,o as SearchableAndAllowCreate,s as SearchableWithLabel,i as ShowContextMenuOnMount,t as StatesDropdown,u as TextareaTrigger,ge as __namedExportsOrder,Ee as default};

package/dist/assets/InputText-Tkbh5amB.css

@@ -0,0 +1 @@
+.input-text{width:160px;padding:3px 6px;font-family:system-ui,sans-serif;font-size:13px;line-height:13px}.input-text-double-click-to-edit{border-color:transparent}.input-text-double-click-to-edit:read-only{cursor:pointer}.multi-line-input-text{width:240px}[popover]{border:0;box-shadow:0 3px 16px 1px #00000080;padding:25px 30px;border-radius:5px}

package/dist/assets/InputText.stories-BYt2Aj0_.js

@@ -0,0 +1,90 @@
+import{r as t,R as rt}from"./iframe-ByGa_ItU.js";/* empty css                  */const{useEffect:L,useImperativeHandle:ot,useRef:M,useState:U}=rt,b=t.forwardRef(function({autoCapitalize:s,autoComplete:a,autoFocus:y,className:Oe,disabled:_e,doubleClickToEdit:p,enterKeyHint:be,form:ye,id:Pe,initialValue:P,list:xe,max:Ne,maxHeight:x=1/0,maxLength:Fe,min:Re,minLength:we,multiLine:o,multiple:Le,name:Me,onBlur:D,onChange:W,onChangeValue:V,onFocus:A,onKeyDown:B,onKeyUp:Ue,pattern:De,placeholder:We,readOnly:Ve,required:Ae,rows:Be=1,selectTextOnFocus:k,size:ke,step:Ce,style:C,submitOnEnter:He,tabIndex:Ke,title:ze,type:Ge="text"},Ye){const r=M(null);ot(Ye,()=>r.current);const[N,qe]=U(null),l=M(null),F=e=>{r.current=e,qe(e)};L(()=>{r.current&&(r.current.value=P??"")},[P]);const[m,Xe]=U(!0);L(()=>{typeof CSS>"u"||Xe(CSS.supports("field-sizing","content"))},[]);const[H,R]=U(Ve??p),w=M(!0),$e=()=>{p&&R(!1)},c=()=>{if(!r.current||m||(r.current.style.height&&(r.current.style.height=""),!o))return;const e=Math.min(r.current.scrollHeight,typeof x=="string"?parseFloat(x):x);e&&(r.current.style.height=`${e}px`)};L(()=>{if(!(!N||!o||m))return c(),l.current=new ResizeObserver(()=>c()),l.current.observe(N),()=>{l.current&&(l.current.disconnect(),l.current=null)}},[N,o,c,m]);const je=e=>{W&&W(e),V&&V(e.target.value)},Je=e=>{A&&A(e),o&&c()},Qe=e=>{D&&D(e),p&&R(!0),k&&(F(e.currentTarget),w.current=!0)},Ze=e=>{if(!k)return;const n=e.currentTarget;if(F(n),!w.current||(w.current=!1,!n.value)||n.ownerDocument.activeElement!==n)return;const K=n.value.length;n.selectionStart===0&&n.selectionEnd===K||(n.selectionStart=0,n.selectionEnd=K)},et=e=>{var n;B&&B(e),e.key==="Enter"&&(He||o&&at(e))&&(!o||!e.shiftKey&&!e.altKey&&!e.ctrlKey)?(e.preventDefault(),(n=e.currentTarget.closest("form"))==null||n.requestSubmit(),e.currentTarget.blur()):p&&r.current&&(H?e.key==="Enter"&&R(!1):(e.key==="Enter"||e.key==="Escape")&&r.current.blur())},tt=o&&m?{...C,fieldSizing:"content"}:C,nt=o?"textarea":"input";return t.createElement(nt,{autoCapitalize:s,autoComplete:a,autoFocus:y,className:Oe,defaultValue:P??"",disabled:_e,enterKeyHint:be,form:ye,id:Pe,list:xe,maxLength:Fe,minLength:we,multiple:Le,name:Me,onBlur:Qe,onChange:je,onDoubleClick:$e,onFocus:Je,onKeyDown:et,onKeyUp:Ue,onSelect:Ze,pattern:De,placeholder:We,readOnly:H,ref:F,required:Ae,size:ke,style:tt,tabIndex:Ke,title:ze,type:Ge,...o?{onInput:c,rows:Be}:{max:Ne,min:Re,step:Ce}})}),it=/mac|iphone|ipad|ipod/i;function at(i){var a;const s=((a=globalThis.navigator)==null?void 0:a.platform)??"";return it.test(s)?i.metaKey:i.ctrlKey}const{fn:u}=__STORYBOOK_MODULE_TEST__,ct={component:b,parameters:{docs:{description:{component:'`InputText` is a React component that renders a textual input (`type: "text"|"email"|"number"|"password"|"search"|"tel"|"url"`) that is uncontrolled, but whose value is overwritten whenever `props.initialValue` changes. Also, if `props.selectTextOnFocus` is true, it selects the entire contents of the input whenever the input is focused. And it supports multiline inputs (rendered as a `<textarea>`) that automatically resize vertically to fit their content.'}}},tags:["autodocs"],title:"UIKit/Controls/InputText"},d={args:{className:"input-text",name:"empty",onBlur:u(),onChange:u(),onChangeValue:u(),onFocus:u(),onKeyDown:u(),onKeyUp:u(),placeholder:"enter text here…"}},h={args:{className:"input-text",initialValue:"Bolivia",placeholder:"enter country name"}},f={args:{className:"input-text",initialValue:"Bolivia",name:"country",placeholder:"enter country name (selectTextOnFocus)",selectTextOnFocus:!0}},g={args:{className:"multi-line-input-text",initialValue:"The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”",maxHeight:600,multiLine:!0,name:"multi-line-input",placeholder:"enter text of any length",selectTextOnFocus:!0}},_={className:"multi-line-input-text",maxHeight:600,multiLine:!0,name:"multi-line-submit-on-enter-input",placeholder:"enter text of any length",submitOnEnter:!0},ut=new Intl.DateTimeFormat(void 0,{timeStyle:"medium"}).format,I={args:_,render(){const[i,s]=t.useState(null),a=i?ut(i):"never";return t.createElement("form",{onSubmit:y=>{y.preventDefault(),s(new Date)}},t.createElement(b,{..._}),t.createElement("pre",null,"Last submitted: ",a))}},S={args:{..._,name:_.name+"-no-form"}},T={args:{className:"input-text-double-click-to-edit",doubleClickToEdit:!0,initialValue:"Lorem ipsum dolor sit amet",name:"double-click-to-edit-input"}},v={args:{autoFocus:!0,name:"autofocus-input"}},z={className:"multi-line-input-text",initialValue:"This multi-line input should resize to fit its contents when the popover opens even though it initializes with display: none as a result of being inside a hidden popover element so it doesn’t have any dimensions when the component initially renders.",multiLine:!0,name:"multi-line-input-in-popover",selectTextOnFocus:!0},E={args:z,render(){return t.createElement(t.Fragment,null,t.createElement("button",{popoverTarget:"multi-line-input-popover"},"Open Popover"),t.createElement("div",{id:"multi-line-input-popover",popover:"auto"},t.createElement(b,{...z})))}},G={autoFocus:!0,initialValue:"This multi-line input should be focused when the popover opens",multiLine:!0,name:"multi-line-input-with-autofocus-in-popover",selectTextOnFocus:!0},O={args:G,render(){return t.createElement(t.Fragment,null,t.createElement("button",{popoverTarget:"multi-line-input-with-autofocus-popover"},"Open Popover"),t.createElement("div",{id:"multi-line-input-with-autofocus-popover",popover:"auto"},t.createElement(b,{...G})))}};var Y,q,X;d.parameters={...d.parameters,docs:{...(Y=d.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    className: 'input-text',
+    name: 'empty',
+    // NOTE spies are a workaround for a bug related to implicit arg detection
+    onBlur: fn(),
+    onChange: fn(),
+    onChangeValue: fn(),
+    onFocus: fn(),
+    onKeyDown: fn(),
+    onKeyUp: fn(),
+    placeholder: 'enter text here…'
+  }
+}`,...(X=(q=d.parameters)==null?void 0:q.docs)==null?void 0:X.source}}};var $,j,J;h.parameters={...h.parameters,docs:{...($=h.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    className: 'input-text',
+    initialValue: 'Bolivia',
+    placeholder: 'enter country name'
+  }
+}`,...(J=(j=h.parameters)==null?void 0:j.docs)==null?void 0:J.source}}};var Q,Z,ee;f.parameters={...f.parameters,docs:{...(Q=f.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  args: {
+    className: 'input-text',
+    initialValue: 'Bolivia',
+    name: 'country',
+    placeholder: 'enter country name (selectTextOnFocus)',
+    selectTextOnFocus: true
+  }
+}`,...(ee=(Z=f.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var te,ne,re;g.parameters={...g.parameters,docs:{...(te=g.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  args: {
+    className: 'multi-line-input-text',
+    initialValue: 'The Black Hawk War, or, How to Demolish an Entire Civilization and Still Feel Good About Yourself in the Morning, or, We Apologize for the Inconvenience but You’re Going to Have to Leave Now, or, “I have fought the Big Knives and will continue to fight them until they are off our lands!”',
+    maxHeight: 600,
+    multiLine: true,
+    name: 'multi-line-input',
+    placeholder: 'enter text of any length',
+    selectTextOnFocus: true
+  }
+}`,...(re=(ne=g.parameters)==null?void 0:ne.docs)==null?void 0:re.source}}};var oe,ie,ae;I.parameters={...I.parameters,docs:{...(oe=I.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  args: SUBMIT_ON_ENTER_PROPS,
+  render() {
+    const [lastSubmitDate, setLastSubmitDate] = React.useState<Date | null>(null);
+    const lastSubmit = lastSubmitDate ? formatDate(lastSubmitDate) : 'never';
+    return <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setLastSubmitDate(new Date());
+    }}>
+                <InputText {...SUBMIT_ON_ENTER_PROPS} />
+                <pre>Last submitted: {lastSubmit}</pre>
+            </form>;
+  }
+}`,...(ae=(ie=I.parameters)==null?void 0:ie.docs)==null?void 0:ae.source}}};var ue,se,le;S.parameters={...S.parameters,docs:{...(ue=S.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  args: {
+    ...SUBMIT_ON_ENTER_PROPS,
+    name: SUBMIT_ON_ENTER_PROPS.name + '-no-form'
+  }
+}`,...(le=(se=S.parameters)==null?void 0:se.docs)==null?void 0:le.source}}};var ce,pe,me;T.parameters={...T.parameters,docs:{...(ce=T.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  args: {
+    className: 'input-text-double-click-to-edit',
+    doubleClickToEdit: true,
+    initialValue: 'Lorem ipsum dolor sit amet',
+    name: 'double-click-to-edit-input'
+  }
+}`,...(me=(pe=T.parameters)==null?void 0:pe.docs)==null?void 0:me.source}}};var de,he,fe;v.parameters={...v.parameters,docs:{...(de=v.parameters)==null?void 0:de.docs,source:{originalSource:`{
+  args: {
+    autoFocus: true,
+    name: 'autofocus-input'
+  }
+}`,...(fe=(he=v.parameters)==null?void 0:he.docs)==null?void 0:fe.source}}};var ge,Ie,Se;E.parameters={...E.parameters,docs:{...(ge=E.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  args: MULTI_LINE_INPUT_IN_POPOVER_PROPS,
+  render() {
+    return <>
+                <button popoverTarget="multi-line-input-popover">Open Popover</button>
+                <div id="multi-line-input-popover" popover="auto">
+                    <InputText {...MULTI_LINE_INPUT_IN_POPOVER_PROPS} />
+                </div>
+            </>;
+  }
+}`,...(Se=(Ie=E.parameters)==null?void 0:Ie.docs)==null?void 0:Se.source}}};var Te,ve,Ee;O.parameters={...O.parameters,docs:{...(Te=O.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  args: MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS,
+  render() {
+    return <>
+                <button popoverTarget="multi-line-input-with-autofocus-popover">
+                    Open Popover
+                </button>
+                <div id="multi-line-input-with-autofocus-popover" popover="auto">
+                    <InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
+                </div>
+            </>;
+  }
+}`,...(Ee=(ve=O.parameters)==null?void 0:ve.docs)==null?void 0:Ee.source}}};const pt=["EmptyInput","InputWithInitialValue","InputWithInitialValueAndSelectTextOnFocus","MultiLineInputWithInitialValueAndSelectTextOnFocus","MultiLineInputWithSubmitOnEnter","MultiLineInputWithSubmitOnEnterNoForm","InputWithDoubleClickToEdit","InputWithAutoFocus","MultiLineInputInPopover","MultiLineInputWithAutoFocusInPopover"];export{d as EmptyInput,v as InputWithAutoFocus,T as InputWithDoubleClickToEdit,h as InputWithInitialValue,f as InputWithInitialValueAndSelectTextOnFocus,E as MultiLineInputInPopover,O as MultiLineInputWithAutoFocusInPopover,g as MultiLineInputWithInitialValueAndSelectTextOnFocus,I as MultiLineInputWithSubmitOnEnter,S as MultiLineInputWithSubmitOnEnterNoForm,pt as __namedExportsOrder,ct as default};