@acusti/uikit-docs 0.4.4 → 0.4.6

package/dist/assets/Dropdown-_IIsqrAA.js

@@ -0,0 +1,101 @@
+import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";import{t as i}from"./clsx-Bdud1Ih_.js";import{n as a,t as o}from"./dist-BreUZhw6.js";var s=r(),c=e(t(),1),{useEffect:l,useState:u}=c,d=()=>{},f={disconnect:d,observe:d,unobserve:d},p=Object.freeze({bottom:void 0,left:void 0,right:void 0,top:void 0}),m=Object.freeze({boundingClientRect:p,maybeCleanupElement:d,maybeCleanupTimer:null,renderTimeSetters:new Set,retryCount:0,scheduleUpdate:d,updateBoundingClientRect:d,updaterFrameID:null}),h=60*1e3,g=new WeakMap,_=f;typeof ResizeObserver==`function`&&(_=new ResizeObserver((e,t)=>{for(let n of e){let e=n.target,r=g.get(e);if(!r){t.unobserve(e);return}r.scheduleUpdate()}}));var ee=e=>{let t=g.get(e);t&&(t.scheduleUpdate!=null&&t.scheduleUpdate!==d||(t.updateBoundingClientRect=()=>{t.updaterFrameID=null;let n=e.getBoundingClientRect();if(!n.height&&!n.width){t.retryCount<10&&(t.retryCount++,t.updaterFrameID=requestAnimationFrame(t.updateBoundingClientRect));return}if(t.retryCount&&=0,t.boundingClientRect.bottom===n.bottom&&t.boundingClientRect.left===n.left&&t.boundingClientRect.right===n.right&&t.boundingClientRect.top===n.top)return;t.boundingClientRect={bottom:n.bottom,left:n.left,right:n.right,top:n.top};let r=typeof Date.now==`function`?Date.now():0;for(let e of t.renderTimeSetters)e(r)},t.scheduleUpdate=()=>{t.updaterFrameID??=requestAnimationFrame(t.updateBoundingClientRect)},t.maybeCleanupElement=()=>{if(t.maybeCleanupTimer!=null&&(clearTimeout(t.maybeCleanupTimer),t.maybeCleanupTimer=null),t.renderTimeSetters.size&&e.closest(`html`)){t.maybeCleanupTimer=setTimeout(t.maybeCleanupElement,h);return}g.delete(e),_.unobserve(e)},t.maybeCleanupTimer=setTimeout(t.maybeCleanupElement,h)))},v=(e,t)=>{let n=g.get(e);n&&(n.renderTimeSetters.delete(t),n.maybeCleanupElement())},te=e=>{let t=(0,s.c)(9),[,n]=u(0),r=!1,i;t[0]===e?i=t[1]:(i=(e&&g.get(e))??null,t[0]=e,t[1]=i);let a=i;e&&!a&&(r=!0,t[2]===e?a=t[3]:(a={...m,renderTimeSetters:new Set},g.set(e,a),t[2]=e,t[3]=a),ee(e),_.observe(e)),a&&(a.renderTimeSetters.add(n),r&&a.updateBoundingClientRect());let o;t[4]!==e||t[5]!==n?(o=()=>e?()=>{v(e,n)}:d,t[4]=e,t[5]=n,t[6]=o):o=t[6];let c;return t[7]===e?c=t[8]:(c=[e],t[7]=e,t[8]=c),l(o,c),a?.boundingClientRect??p},y={config:new Map,keydown:[],keypress:[],keyup:[]},b=-50,ne=50,x=b*-1,S=()=>{};function C({eventType:e,handler:t,ignoreUsedKeyboardEvents:n=!0,priority:r}){if(!t)return S;let i=Math.min(ne+x,Math.max(0,(r??0)+x)),a=y[e];return a[i]??=new Set,a[i].add(t),y.config.set(t,{ignoreUsedKeyboardEvents:n,priority:i}),()=>{if(y.config.delete(t),a[i]!=null&&(a[i].delete(t),!a[i].size)){delete a[i];for(let e=i;e>-1&&a[e]==null&&a.length===e+1;e--)a.length=e}}}var re=new Set([`button`,`checkbox`,`color`,`file`,`hidden`,`image`,`radio`,`range`,`reset`,`submit`]),ie=new Set([` `,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`ArrowUp`,`Enter`]),ae=e=>e.isContentEditable||e.tagName===`TEXTAREA`||e.tagName===`INPUT`,oe=e=>{let t=e.target;return t==null||!ae(t)?!1:t.tagName!==`INPUT`||!re.has(t.type)?!0:ie.has(e.key)};function w(e){if(!(!e?.defaultView||e.defaultView.__useKeyboardEventsAttached__))return e.defaultView.__useKeyboardEventsAttached__=!0,e.addEventListener(`keydown`,T),e.addEventListener(`keypress`,T),e.addEventListener(`keyup`,T),()=>{e.defaultView&&(e.defaultView.__useKeyboardEventsAttached__=!1),e.removeEventListener(`keydown`,T),e.removeEventListener(`keypress`,T),e.removeEventListener(`keyup`,T)}}function T(e){let t=y[e.type],n=t.length,r=oe(e);for(;n--;){let i=t[n];if(i!=null)for(let t of i){let n=y.config.get(t);if((!r||n?.ignoreUsedKeyboardEvents===!1)&&t(e)===!1)return}}}function se(e){let t=(0,s.c)(16),{ignoreUsedKeyboardEvents:n,onKeyDown:r,onKeyPress:i,onKeyUp:a,priority:o}=e,l;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(l=[],t[0]=l):l=t[0],(0,c.useEffect)(E,l);let u,d;t[1]!==n||t[2]!==r||t[3]!==o?(u=()=>C({eventType:`keydown`,handler:r,ignoreUsedKeyboardEvents:n,priority:o}),d=[n,r,o],t[1]=n,t[2]=r,t[3]=o,t[4]=u,t[5]=d):(u=t[4],d=t[5]),(0,c.useEffect)(u,d);let f,p;t[6]!==n||t[7]!==i||t[8]!==o?(f=()=>C({eventType:`keypress`,handler:i,ignoreUsedKeyboardEvents:n,priority:o}),p=[n,i,o],t[6]=n,t[7]=i,t[8]=o,t[9]=f,t[10]=p):(f=t[9],p=t[10]),(0,c.useEffect)(f,p);let m,h;t[11]!==n||t[12]!==a||t[13]!==o?(m=()=>C({eventType:`keyup`,handler:a,ignoreUsedKeyboardEvents:n,priority:o}),h=[n,a,o],t[11]=n,t[12]=a,t[13]=o,t[14]=m,t[15]=h):(m=t[14],h=t[15]),(0,c.useEffect)(m,h)}function E(){w(document),document.querySelectorAll(`iframe`).forEach(D)}function D(e){!ce(e)||!e.contentDocument||w(e.contentDocument)}function ce(e){try{return typeof e.contentWindow.location.href==`string`}catch{return!1}}var le=48,O=57,k=65,A=15,j=.99999,M=.999999,N=.81,P=(e,t,n)=>{if(n||(e=e.trim().toUpperCase(),t=t.trim().toUpperCase()),e===t)return 1;let r=e.length,i=t.length,a=Math.min(r,i);if(!a)return 0;let[o,s]=r>i?[e,t]:[t,e],c=o.indexOf(s);if(c>-1){let e=.15/(o.length-2)*c;return Math.max(M-e,N)}let l=Math.min(.4,3/a),u=0,d=0,f=0;for(let n=0;n<a;n++){let r=e.charCodeAt(n),i=t.charCodeAt(n),a=Math.abs(r-i);r>=le&&r<=O&&i>k&&(a=O+1-r),u+=Math.min(A,a),d+=A,a===0&&(u===f?(f+=-10*((n+1)*l),u=f):--u)}return u<=0?j:(u=(d-u)/d,Math.min(j,u))},ue=({excludeMismatches:e,items:t,text:n})=>{if(n=n.trim().toUpperCase(),!n||!t.length)return t;let[r]=t.reduce(([t,r],i)=>{let a=P(i.trim().toUpperCase(),n,!0);if(e&&a<N)return[t,r];let o=t.length;if(a>r[0])o=0;else if(a>r[r.length-1]){let e=r.findIndex(e=>e<a);e!==-1&&(o=e)}return t.splice(o,0,i),r.splice(o,0,a),[t,r]},[[],[]]);return r},de=e=>ue(e)[0];const F=`uktdropdown`,I=`.${F}`,fe=`${F}-body`,pe=`${F}-label`,me=`${F}-label-text`,he=`${F}-trigger`,ge=`.${fe}`,L=`.${pe}`,R=`.${me}`,z=`.${he}`,_e=`--uktdd-body-max-height`,ve=`--uktdd-body-max-width`,ye=`
+:root {
+  --uktdd-font-family: ${o};
+  --uktdd-body-bg-color: #fff;
+  --uktdd-body-bg-color-hover: rgb(105,162,249);
+  --uktdd-body-color-hover: #fff;
+  --uktdd-body-buffer: 10px;
+  ${_e}: calc(100vh - var(--uktdd-body-buffer));
+  ${ve}: 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;
+}
+${I},
+${z} {
+  font-family: var(--uktdd-font-family);
+}
+${I} {
+  width: max-content;
+  anchor-scope: --uktdd-anchor;
+}
+${I}.disabled {
+  pointer-events: none;
+}
+${I} > * {
+  cursor: default;
+}
+${I} > :first-child {
+  anchor-name: --uktdd-anchor;
+}
+${L} {
+  display: flex;
+  align-items: center;
+}
+${R} {
+  padding-right: var(--uktdd-label-pad-right);
+}
+${ge} {
+  box-sizing: border-box;
+  position: absolute;
+  position-anchor: --uktdd-anchor;
+  top: anchor(bottom);
+  left: anchor(left);
+  bottom: auto;
+  right: auto;
+  position-try-fallbacks: --uktdd-top-left, --uktdd-bottom-right, --uktdd-top-right;
+  min-height: 50px;
+  max-height: var(${_e});
+  min-width: min(50px, 100%);
+  max-width: var(${ve});
+  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);
+}
+@position-try --uktdd-top-left {
+  bottom: anchor(top);
+  left: anchor(left);
+  top: auto;
+  right: auto;
+}
+@position-try --uktdd-bottom-right {
+  top: anchor(bottom);
+  right: anchor(right);
+  bottom: auto;
+  left: auto;
+}
+@position-try --uktdd-top-right {
+  bottom: anchor(top);
+  right: anchor(right);
+  top: auto;
+  left: auto;
+}
+${ge}.has-items {
+  user-select: none;
+}
+${ge} [data-ukt-active] {
+  background-color: var(--uktdd-body-bg-color-hover);
+  color: var(--uktdd-body-color-hover);
+}
+`,be=`[data-ukt-item], [data-ukt-value]`,xe=e=>{if(!e)return null;let t=e.querySelector(ge);if(!t)return null;let n=t.querySelectorAll(be);if(n.length)return n;for(n=t.children;n.length===1&&n[0].children!=null;)n=n[0].children;return n.length===1&&(n=t.children),n},Se=e=>e?e.querySelector(`[data-ukt-active]`):null;var B=e=>{e.forEach(e=>{e.hasAttribute(`data-ukt-active`)&&delete e.dataset.uktActive})};const Ce=({dropdownElement:e,element:t,event:n,index:r,indexAddend:i,isExactMatch:a,onActiveItem:o,text:s})=>{let c=xe(e);if(!c)return;let l=Array.from(c);if(!l.length)return;let u=l.length-1,d=l.findIndex(e=>e.hasAttribute(`data-ukt-active`)),f=d;if(typeof r==`number`&&(f=r<0?l.length+r:r),t)f=l.findIndex(e=>e===t);else if(typeof i==`number`)d===-1&&i===-1?f=u:f+=i,f=Math.max(0,Math.min(f,u));else if(typeof s==`string`){if(!s){B(l);return}let e=l.map(e=>e.innerText);if(a){let t=s.toLowerCase();f=e.findIndex(e=>e.toLowerCase().startsWith(t)),f===-1&&B(l)}else{let t=de({items:e,text:s});f=e.findIndex(e=>e===t)}}let p=c[f];if(p==null||f===d)return;B(l),p.setAttribute(`data-ukt-active`,``);let m=p.innerText,h=p.dataset.uktValue??m;o?.({element:p,event:n,label:m,value:h});let{parentElement:g}=p,_=null;for(;!_&&g&&g!==e;)g.scrollHeight>g.clientHeight+15?_=g:g=g.parentElement;if(_){let e=_.getBoundingClientRect(),t=p.getBoundingClientRect(),n=t.top<e.top,r=t.bottom>e.bottom;if(n||r){let{scrollTop:r}=_;n?r-=e.top-t.top:r+=t.bottom-e.bottom,_.scrollTop=r}}};var V=n(),we=`@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.`,Te=`button, a[href], input[type="button"], input[type="submit"]`,Ee=`input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea`;function H(e){let t=(0,s.c)(95),{allowCreate:n,allowEmpty:r,children:o,className:l,disabled:u,hasItems:d,isOpenOnMount:f,isSearchable:p,keepOpenOnSubmit:m,label:h,minHeightBody:g,minWidthBody:_,name:ee,onActiveItem:v,onClick:y,onClose:b,onMouseDown:ne,onMouseUp:x,onOpen:S,onSubmitItem:C,placeholder:re,style:ie,tabIndex:ae,value:w}=e,T=r===void 0?!0:r,E=d===void 0?!0:d,D=m===void 0?!E:m,ce=g===void 0?30:g,le=_===void 0?100:_,O=c.Children.count(o);if(O!==1&&O!==2){if(O===0)throw Error(we+` Received no children.`);console.error(`${we} Received ${O} children.`)}let k;O>1&&(k=o[0]);let[A,j]=(0,c.useState)(f??!1),[M,N]=(0,c.useState)(!f),[P,ue]=(0,c.useState)(null),[de,I]=(0,c.useState)(null),L=(0,c.useRef)(null),R=(0,c.useRef)(null),z=(0,c.useRef)(null),B=(0,c.useRef)(`mouse`),H=(0,c.useRef)(null),U=(0,c.useRef)(``),Oe=(0,c.useRef)(null),ke=(0,c.useRef)(n),Ae=(0,c.useRef)(T),W=(0,c.useRef)(E),G=(0,c.useRef)(A),je=(0,c.useRef)(M),Me=(0,c.useRef)(D),Ne=(0,c.useRef)(b),Pe=(0,c.useRef)(S),Fe=(0,c.useRef)(C),Ie=(0,c.useRef)(w),Le,Re;t[0]!==n||t[1]!==T||t[2]!==E||t[3]!==A||t[4]!==M||t[5]!==D||t[6]!==b||t[7]!==S||t[8]!==C||t[9]!==w?(Le=()=>{ke.current=n,Ae.current=T,W.current=E,G.current=A,je.current=M,Me.current=D,Ne.current=b,Pe.current=S,Fe.current=C,Ie.current=w},Re=[n,T,E,A,M,D,b,S,C,w],t[0]=n,t[1]=T,t[2]=E,t[3]=A,t[4]=M,t[5]=D,t[6]=b,t[7]=S,t[8]=C,t[9]=w,t[10]=Le,t[11]=Re):(Le=t[10],Re=t[11]),(0,c.useEffect)(Le,Re);let ze=(0,c.useRef)(!1),Be,Ve;t[12]===A?(Be=t[13],Ve=t[14]):(Be=()=>{if(!ze.current){ze.current=!0,G.current&&Pe.current&&Pe.current();return}A&&Pe.current?Pe.current():!A&&Ne.current&&Ne.current()},Ve=[A],t[12]=A,t[13]=Be,t[14]=Ve),(0,c.useEffect)(Be,Ve);let He;t[15]===Symbol.for(`react.memo_cache_sentinel`)?(He=()=>{j(!1),N(!1),Oe.current=null,R.current!=null&&(clearTimeout(R.current),R.current=null)},t[15]=He):He=t[15];let K=He,Ue;t[16]===P?Ue=t[17]:(Ue=e=>{if(G.current&&!Me.current&&(R.current=setTimeout(K,90)),!W.current)return;let t=Se(P);if(!t&&!ke.current&&(!Ae.current||L.current?.value))return;let n=t?.innerText??``;L.current&&(t?L.current.value=n:n=L.current.value,L.current===L.current.ownerDocument.activeElement&&L.current.blur());let r=t?.dataset.uktValue??n;if(!(Ie.current&&Ie.current===r)){if(t){let n=e.target;if(t.matches(Te))t!==n&&!t.contains(n)&&t.click();else{let e=t.querySelectorAll(Te);if(e.length===1){let t=e[0];t!==n&&!t.contains(n)&&t.click()}}}Fe.current?.({element:t,event:e,label:n,value:r})}},t[16]=P,t[17]=Ue);let q=Ue,We;t[18]===Symbol.for(`react.memo_cache_sentinel`)?(We=e=>{let{clientX:t,clientY:n}=e;B.current=`mouse`;let r=Oe.current;r&&(Math.abs(r.clientX-t)<12&&Math.abs(r.clientY-n)<12||N(!1))},t[18]=We):We=t[18];let Ge=We,Ke;t[19]!==P||t[20]!==v?(Ke=e=>{if(!W.current||B.current!==`mouse`||!P)return;let t=xe(P);if(!t)return;let n=e.target,r=n.closest(be)??n;for(let n of t)if(n===r){Ce({dropdownElement:P,element:r,event:e,onActiveItem:v});return}},t[19]=P,t[20]=v,t[21]=Ke):Ke=t[21];let qe=Ke,Je;t[22]===P?Je=t[23]:(Je=e=>{if(!W.current)return;let t=Se(P);if(!t)return;let n=e.relatedTarget;t!==e.target||t.contains(n)||delete t.dataset.uktActive},t[22]=P,t[23]=Je);let Ye=Je,Xe;t[24]===ne?Xe=t[25]:(Xe=e=>{ne&&ne(e),!G.current&&(j(!0),N(!0),Oe.current={clientX:e.clientX,clientY:e.clientY},z.current=setTimeout(()=>{N(!1),z.current=null},1e3))},t[24]=ne,t[25]=Xe);let Ze=Xe,Qe;t[26]!==q||t[27]!==x?(Qe=e=>{if(x&&x(e),je.current||!G.current||R.current!=null)return;let t=e.target;if(!t.closest(ge)){!je.current&&L.current!==t.ownerDocument.activeElement&&K();return}W.current&&q(e)},t[26]=q,t[27]=x,t[28]=Qe):Qe=t[28];let $e=Qe,et;t[29]!==P||t[30]!==q||t[31]!==v?(et=e=>{let{altKey:t,ctrlKey:n,key:r,metaKey:i}=e,a=e.target;if(!P)return;let o=()=>{e.stopPropagation(),e.preventDefault(),B.current=`keyboard`},s=P.contains(a);if(!G.current){if(!s)return;(r===` `||r===`Enter`||W.current&&(r===`ArrowUp`||r===`ArrowDown`))&&(o(),j(!0));return}let c=oe(e);if(W.current&&!c){let t=!n&&!i&&/^[A-Za-z0-9]$/.test(r);if(!t&&U.current&&(t=r===` `||r===`Backspace`),t){o(),r===`Backspace`?U.current=U.current.slice(0,-1):U.current+=r,Ce({dropdownElement:P,event:e,isExactMatch:ke.current,onActiveItem:v,text:U.current}),H.current!=null&&clearTimeout(H.current),H.current=setTimeout(()=>{U.current=``,H.current=null},1500);return}}if(r===`Enter`||r===` `&&!L.current){o(),q(e);return}if(r===`Escape`||s&&r===` `&&!W.current){(W.current||!c)&&K();return}if(W.current){if(r===`ArrowUp`){o(),Ce(t||i?{dropdownElement:P,event:e,index:0,onActiveItem:v}:{dropdownElement:P,event:e,indexAddend:-1,onActiveItem:v});return}if(r===`ArrowDown`){o(),Ce(t||i?{dropdownElement:P,event:e,index:-1,onActiveItem:v}:{dropdownElement:P,event:e,indexAddend:1,onActiveItem:v});return}}},t[29]=P,t[30]=q,t[31]=v,t[32]=et):et=t[32];let tt=et,nt;t[33]===tt?nt=t[34]:(nt={ignoreUsedKeyboardEvents:!1,onKeyDown:tt},t[33]=tt,t[34]=nt),se(nt);let rt;t[35]!==f||t[36]!==v?(rt=e=>{if(ue(e),!e)return;let{ownerDocument:t}=e,n=L.current;!n&&e.firstElementChild&&(n=e.firstElementChild.matches(Ee)?e.firstElementChild:e.firstElementChild.querySelector(Ee),L.current=n);let r=t=>{let{target:n}=t,r=n;e.contains(r)||K()},i=t=>{let{target:n}=t;if(!G.current||R.current!=null)return;if(je.current){N(!1),z.current!=null&&(clearTimeout(z.current),z.current=null);return}let r=n;e.contains(r)||K()},a=t=>{let{target:n}=t;if(!G.current)return;let r=n;e.contains(r)||r.contains(e)||K()};document.addEventListener(`focusin`,a),document.addEventListener(`mousedown`,r),document.addEventListener(`mouseup`,i),t!==document&&(t.addEventListener(`focusin`,a),t.addEventListener(`mousedown`,r),t.addEventListener(`mouseup`,i)),f&&e.focus();let o=t=>{G.current||j(!0);let n=t.target,r=U.current.length>n.value.length;U.current=n.value,!(r&&n.value.length&&Se(e))&&Ce({dropdownElement:e,event:t,isExactMatch:ke.current,onActiveItem:v,text:U.current})};return n&&n.addEventListener(`input`,o),()=>{document.removeEventListener(`focusin`,a),document.removeEventListener(`mousedown`,r),document.removeEventListener(`mouseup`,i),t!==document&&(t.removeEventListener(`focusin`,a),t.removeEventListener(`mousedown`,r),t.removeEventListener(`mouseup`,i)),n&&n.removeEventListener(`input`,o)}},t[35]=f,t[36]=v,t[37]=rt):rt=t[37];let it=rt;if(!(0,c.isValidElement)(k))if(p){let e=w??``,n;t[38]===Symbol.for(`react.memo_cache_sentinel`)?(n=()=>j(!0),t[38]=n):n=t[38];let r;t[39]!==u||t[40]!==ee||t[41]!==re||t[42]!==e||t[43]!==ae?(r=(0,V.jsx)(`input`,{autoComplete:`off`,className:he,defaultValue:e,disabled:u,name:ee,onFocus:n,placeholder:re,ref:L,tabIndex:ae,type:`text`}),t[39]=u,t[40]=ee,t[41]=re,t[42]=e,t[43]=ae,t[44]=r):r=t[44],k=r}else{let e;t[45]===k?e=t[46]:(e=(0,V.jsx)(`button`,{className:he,tabIndex:0,type:`button`,children:k}),t[45]=k,t[46]=e),k=e}if(h){let e;t[47]===h?e=t[48]:(e=(0,V.jsx)(`div`,{className:me,children:h}),t[47]=h,t[48]=e);let n;t[49]!==e||t[50]!==k?(n=(0,V.jsxs)(`label`,{className:pe,children:[e,k]}),t[49]=e,t[50]=k,t[51]=n):n=t[51],k=n}let J=te(P),Y=te(de),at;t[52]===de?at=t[53]:(at=De(de),t[52]=de,t[53]=at);let ot=te(at),X,Z;if(Y.top!=null&&J.top!=null&&ot.top!=null){let e=Y.bottom-ot.top,n=ot.bottom-Y.top,r;t[54]!==Y.top||t[55]!==J.top||t[56]!==n||t[57]!==e?(r=Math.round(Y.top>J.top?n:e),t[54]=Y.top,t[55]=J.top,t[56]=n,t[57]=e,t[58]=r):r=t[58],X=r;let i=Y.right-ot.left,a=ot.right-Y.left,o;t[59]!==Y.left||t[60]!==J.left||t[61]!==i||t[62]!==a?(o=Math.round(Y.left>J.left?a:i),t[59]=Y.left,t[60]=J.left,t[61]=i,t[62]=a,t[63]=o):o=t[63],Z=o}let Q;t[64]!==X||t[65]!==ce?(Q=X!=null&&X>ce?{[_e]:`calc(${X}px - var(--uktdd-body-buffer))`}:null,t[64]=X,t[65]=ce,t[66]=Q):Q=t[66];let $;t[67]!==Z||t[68]!==le?($=Z!=null&&Z>le?{[ve]:`calc(${Z}px - var(--uktdd-body-buffer))`}:null,t[67]=Z,t[68]=le,t[69]=$):$=t[69];let st;t[70]!==ie||t[71]!==Q||t[72]!==$?(st={...ie,...Q,...$},t[70]=ie,t[71]=Q,t[72]=$,t[73]=st):st=t[73];let ct=st,lt;t[74]===Symbol.for(`react.memo_cache_sentinel`)?(lt=(0,V.jsx)(a,{href:`@acusti/dropdown/Dropdown`,children:ye}),t[74]=lt):lt=t[74];let ut;t[75]!==l||t[76]!==u||t[77]!==A||t[78]!==p?(ut=i(F,l,{disabled:u,"is-open":A,"is-searchable":p}),t[75]=l,t[76]=u,t[77]=A,t[78]=p,t[79]=ut):ut=t[79];let dt;t[80]!==o||t[81]!==O||t[82]!==A?(dt=A?(0,V.jsx)(`div`,{className:fe,ref:I,children:O>1?o[1]:o}):null,t[80]=o,t[81]=O,t[82]=A,t[83]=dt):dt=t[83];let ft;return t[84]!==Ze||t[85]!==Ye||t[86]!==qe||t[87]!==$e||t[88]!==it||t[89]!==y||t[90]!==ct||t[91]!==ut||t[92]!==dt||t[93]!==k?(ft=(0,V.jsxs)(c.Fragment,{children:[lt,(0,V.jsxs)(`div`,{className:ut,onClick:y,onMouseDown:Ze,onMouseMove:Ge,onMouseOut:Ye,onMouseOver:qe,onMouseUp:$e,ref:it,style:ct,children:[k,dt]})]}),t[84]=Ze,t[85]=Ye,t[86]=qe,t[87]=$e,t[88]=it,t[89]=y,t[90]=ct,t[91]=ut,t[92]=dt,t[93]=k,t[94]=ft):ft=t[94],ft}function De(e){for(;e?.parentElement;){if(e.parentElement.tagName===`BODY`||getComputedStyle(e.parentElement).overflowX!==`visible`)return e.parentElement;e=e.parentElement}return null}H.__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 | JSX.Element`,elements:[{name:`union`,raw:`[ReactNode, ReactNode] | readonly [ReactNode, ReactNode]`,elements:[{name:`tuple`,raw:`[ReactNode, ReactNode]`,elements:[{name:`ReactNode`},{name:`ReactNode`}]},{name:`unknown`}]},{name:`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:``},minHeightBody:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`30`,computed:!1}},minWidthBody:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`100`,computed:!1}},name:{required:!1,tsType:{name:`string`},description:`Only usable in conjunction with {isSearchable: true}.
+Used as search input’s name.`},onActiveItem:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(payload: Item) => void`,signature:{arguments:[{type:{name:`signature`,type:`object`,raw:`{
+    element: MaybeHTMLElement;
+    event: Event | 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 | SyntheticEvent<HTMLElement>`,elements:[{name:`Event`},{name:`SyntheticEvent`,elements:[{name:`HTMLElement`}],raw:`SyntheticEvent<HTMLElement>`}],required:!0}},{key:`label`,value:{name:`string`,required:!0}},{key:`value`,value:{name:`string`,required:!0}}]}},name:`payload`}],return:{name:`void`}}},description:``},onClick:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: ReactMouseEvent<HTMLElement>) => unknown`,signature:{arguments:[{type:{name:`ReactMouseEvent`,elements:[{name:`HTMLElement`}],raw:`ReactMouseEvent<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: ReactMouseEvent<HTMLElement>) => unknown`,signature:{arguments:[{type:{name:`ReactMouseEvent`,elements:[{name:`HTMLElement`}],raw:`ReactMouseEvent<HTMLElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onMouseUp:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: ReactMouseEvent<HTMLElement>) => unknown`,signature:{arguments:[{type:{name:`ReactMouseEvent`,elements:[{name:`HTMLElement`}],raw:`ReactMouseEvent<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: MaybeHTMLElement;
+    event: Event | 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 | SyntheticEvent<HTMLElement>`,elements:[{name:`Event`},{name:`SyntheticEvent`,elements:[{name:`HTMLElement`}],raw:`SyntheticEvent<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:`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{H as t};

package/dist/assets/Dropdown.stories-msGED41R.js

@@ -0,0 +1,364 @@
+import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import"./compiler-runtime-BOsKKfMw.js";import{t as r}from"./CSSValueInput-B69U5DrZ.js";/* empty css                  */import{t as i}from"./Dropdown-_IIsqrAA.js";var a=e(t()),o=n(),{fn:s}=__STORYBOOK_MODULE_TEST__,{Fragment:c}=a,l={args:{onClick:s(),onClose:s(),onMouseDown:s(),onMouseUp:s(),onOpen:s(),onSubmitItem:s()},component:i,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`};const u={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`0px`}),(0,o.jsx)(`li`,{children:`4px`}),(0,o.jsx)(`li`,{children:`9px`}),(0,o.jsx)(`li`,{children:`18px`}),(0,o.jsx)(`li`,{children:`36px`}),(0,o.jsx)(`li`,{children:`54px`}),(0,o.jsx)(`li`,{children:`72px`}),(0,o.jsx)(`li`,{children:`144px`}),(0,o.jsx)(`li`,{children:`167px`}),(0,o.jsx)(`li`,{children:`198px`})]}),className:`css-lengths no-trigger-text`}},d={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`Alabama`}),(0,o.jsx)(`li`,{children:`Alaska`}),(0,o.jsx)(`li`,{children:`Arizona`}),(0,o.jsx)(`li`,{children:`Arkansas`}),(0,o.jsx)(`li`,{children:`California`}),(0,o.jsx)(`li`,{children:`Colorado`}),(0,o.jsx)(`li`,{children:`Connecticut`}),(0,o.jsx)(`li`,{children:`Delaware`}),(0,o.jsx)(`li`,{children:`Florida`}),(0,o.jsx)(`li`,{children:`Georgia`}),(0,o.jsx)(`li`,{children:`Hawaii`}),(0,o.jsx)(`li`,{children:`Idaho`}),(0,o.jsx)(`li`,{children:`Illinois`}),(0,o.jsx)(`li`,{children:`Indiana`}),(0,o.jsx)(`li`,{children:`Iowa`}),(0,o.jsx)(`li`,{children:`Kansas`}),(0,o.jsx)(`li`,{children:`Kentucky`}),(0,o.jsx)(`li`,{children:`Louisiana`}),(0,o.jsx)(`li`,{children:`Maine`}),(0,o.jsx)(`li`,{children:`Maryland`}),(0,o.jsx)(`li`,{children:`Massachusetts`}),(0,o.jsx)(`li`,{children:`Michigan`}),(0,o.jsx)(`li`,{children:`Minnesota`}),(0,o.jsx)(`li`,{children:`Mississippi`}),(0,o.jsx)(`li`,{children:`Missouri`}),(0,o.jsx)(`li`,{children:`Montana`}),(0,o.jsx)(`li`,{children:`Nebraska`}),(0,o.jsx)(`li`,{children:`Nevada`}),(0,o.jsx)(`li`,{children:`New Hampshire`}),(0,o.jsx)(`li`,{children:`New Jersey`}),(0,o.jsx)(`li`,{children:`New Mexico`}),(0,o.jsx)(`li`,{children:`New York`}),(0,o.jsx)(`li`,{children:`North Carolina`}),(0,o.jsx)(`li`,{children:`North Dakota`}),(0,o.jsx)(`li`,{children:`Ohio`}),(0,o.jsx)(`li`,{children:`Oklahoma`}),(0,o.jsx)(`li`,{children:`Oregon`}),(0,o.jsx)(`li`,{children:`Pennsylvania`}),(0,o.jsx)(`li`,{children:`Rhode Island`}),(0,o.jsx)(`li`,{children:`South Carolina`}),(0,o.jsx)(`li`,{children:`South Dakota`}),(0,o.jsx)(`li`,{children:`Tennessee`}),(0,o.jsx)(`li`,{children:`Texas`}),(0,o.jsx)(`li`,{children:`Utah`}),(0,o.jsx)(`li`,{children:`Vermont`}),(0,o.jsx)(`li`,{children:`Virginia`}),(0,o.jsx)(`li`,{children:`Washington`}),(0,o.jsx)(`li`,{children:`West Virginia`}),(0,o.jsx)(`li`,{children:`Wisconsin`}),(0,o.jsx)(`li`,{children:`Wyoming`})]}),className:`states-dropdown`,isSearchable:!0,placeholder:`Choose a state…`}},f={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsxs)(`li`,{"data-ukt-value":`100`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`100`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`200`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`200`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`300`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`300`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`400`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`400`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`500`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`500`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`600`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`600`]}),(0,o.jsxs)(`li`,{"data-ukt-value":`700`,children:[(0,o.jsx)(`span`,{className:`item-title`,children:`Font Weight - `}),`700`]})]}),className:`font-weight`,isSearchable:!0}},p={args:{children:[`View menu`,(0,o.jsxs)(c,{children:[(0,o.jsx)(`h4`,{className:`heading`,children:`View`}),(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{"data-ukt-item":!0,children:`Open`}),(0,o.jsx)(`li`,{"data-ukt-item":!0,children:`Preview`})]}),(0,o.jsx)(`h4`,{className:`heading`,children:`Edit`}),(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{"data-ukt-value":`save-item`,children:`Save`}),(0,o.jsx)(`li`,{"data-ukt-value":`edit-item`,children:`Edit`}),(0,o.jsx)(`li`,{"data-ukt-value":`delete-item`,children:`Delete`})]})]})],className:`open-on-mount-context-menu`,isOpenOnMount:!0}},m={args:{children:[`Open`,(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`p`,{children:`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.`}),(0,o.jsx)(r,{cssValueType:`length`,label:`Width`,onSubmitValue:()=>{},placeholder:`100vw`,unit:`vw`}),(0,o.jsx)(r,{cssValueType:`length`,label:`Rotation`,onSubmitValue:()=>{},placeholder:`0deg`,step:5,unit:`deg`})]})],className:`dropdown-without-items`,hasItems:!1}},h={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`0px`}),(0,o.jsx)(`li`,{children:`4px`}),(0,o.jsx)(`li`,{children:`9px`}),(0,o.jsx)(`li`,{children:`18px`}),(0,o.jsx)(`li`,{children:`36px`}),(0,o.jsx)(`li`,{children:`54px`}),(0,o.jsx)(`li`,{children:`72px`}),(0,o.jsx)(`li`,{children:`144px`}),(0,o.jsx)(`li`,{children:`167px`}),(0,o.jsx)(`li`,{children:`198px`})]}),className:`searchable-with-label`,isSearchable:!0,label:`Font size`}},g={args:{allowCreate:!0,children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`0px`}),(0,o.jsx)(`li`,{children:`4px`}),(0,o.jsx)(`li`,{children:`9px`}),(0,o.jsx)(`li`,{children:`18px`}),(0,o.jsx)(`li`,{children:`36px`}),(0,o.jsx)(`li`,{children:`54px`}),(0,o.jsx)(`li`,{children:`72px`}),(0,o.jsx)(`li`,{children:`144px`}),(0,o.jsx)(`li`,{children:`167px`}),(0,o.jsx)(`li`,{children:`198px`})]}),className:`searchable-and-allow-create`,isSearchable:!0,label:`Font size`}},_={args:{allowCreate:!0,children:[(0,o.jsx)(r,{name:`cssinputbackgroundsize`,onSubmitValue:()=>{},placeholder:`cover`,validator:/^(auto|contain|cover)$/}),(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`cover`}),(0,o.jsx)(`li`,{children:`contain`}),(0,o.jsx)(`li`,{children:`auto`}),(0,o.jsx)(`li`,{children:`50px`}),(0,o.jsx)(`li`,{children:`100px`}),(0,o.jsx)(`li`,{children:`200px`}),(0,o.jsx)(`li`,{children:`50%`})]})],className:`css-value-input-trigger`,hasItems:!0,label:`Background size`}},v={args:{children:[(0,o.jsx)(`textarea`,{}),(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla quam, vel tincidunt nisl mattis vel.`}),(0,o.jsx)(`li`,{children:`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.`}),(0,o.jsx)(`li`,{children:`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.`}),(0,o.jsx)(`li`,{children:`Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor dapibus bibendum lobortis quis ante. Ut eget scelerisque massa.`}),(0,o.jsx)(`li`,{children:`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}},y={args:{children:[`Colors`,(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Red`]})}),(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Blue`]})}),(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Yellow`]})}),(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Cyan`]})}),(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Orchid`]})}),(0,o.jsx)(`li`,{children:(0,o.jsxs)(`label`,{children:[(0,o.jsx)(`input`,{type:`checkbox`}),` Slate`]})})]})],className:`checkboxes`,keepOpenOnSubmit:!0}};var b={children:[(0,o.jsx)(`button`,{"aria-label":`Open user menu`,className:`avatar-profile has-avatar`,popoverTarget:`avatar-menu-popover`,style:{backgroundImage:`url("https://picsum.photos/id/40/100/100")`},children:`AP`}),(0,o.jsxs)(`ul`,{className:`menu-list avatar-dropdown`,children:[(0,o.jsx)(`div`,{className:`avatar-edit has-avatar`,style:{backgroundImage:`url("https://picsum.photos/id/40/100/100")`},children:(0,o.jsx)(`div`,{className:`avatar-initials`,children:`AP`})}),(0,o.jsx)(`div`,{className:`profile-email-wrap`,children:(0,o.jsx)(`p`,{className:`profile-email`,children:`andrew@example.com`})}),(0,o.jsx)(`form`,{method:`post`,action:`/logout`,className:`sign-out-wrap`,children:(0,o.jsx)(`button`,{className:`btn-ghost`,type:`submit`,children:`Sign Out`})})]})],className:`avatar-menu`};const x={args:b,render(){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(`header`,{className:`mk-header`,children:[(0,o.jsxs)(`nav`,{className:`mk-nav a1`,children:[(0,o.jsx)(`a`,{className:`logo`,href:`/`}),(0,o.jsx)(`a`,{className:`btn-text logo-text`,href:`/`,children:`UIKit`})]}),(0,o.jsx)(`div`,{className:`mk-nav center`,children:(0,o.jsxs)(`h5`,{className:`mk subtitle`,children:[`Welcome! Join our`,` `,(0,o.jsx)(`a`,{className:`home-link`,rel:`noreferrer`,href:`https://discord.gg/dTpXZpQ9Rz`,target:`_blank`,children:`Discord.`})]})}),(0,o.jsxs)(`nav`,{className:`mk-nav a2`,children:[(0,o.jsx)(`a`,{className:`btn-text`,href:`/projects`,children:`Projects`}),(0,o.jsx)(i,{...b})]})]}),(0,o.jsx)(`h1`,{children:`Lorem ipsum`})]})}},S={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`0px`}),(0,o.jsx)(`li`,{children:`4px`}),(0,o.jsx)(`li`,{children:`9px`}),(0,o.jsx)(`li`,{children:`18px`}),(0,o.jsx)(`li`,{children:`36px`}),(0,o.jsx)(`li`,{children:`54px`}),(0,o.jsx)(`li`,{children:`72px`}),(0,o.jsx)(`li`,{children:`144px`}),(0,o.jsx)(`li`,{children:`167px`}),(0,o.jsx)(`li`,{children:`198px`})]}),className:`disabled-dropdown`,disabled:!0,isSearchable:!0,label:`Disabled`,name:`disabledexample`,value:`167px`}},C={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`the carbon in our apple pies`}),(0,o.jsx)(`li`,{children:`sea of tranquility tesseract`}),(0,o.jsx)(`li`,{children:`encyclopaedia galactica`}),(0,o.jsx)(`li`,{children:`billions upon billions`}),(0,o.jsx)(`li`,{children:`network of wormholes`}),(0,o.jsx)(`li`,{children:`tingling of the spine`}),(0,o.jsx)(`li`,{children:`corpus callosum`}),(0,o.jsx)(`li`,{children:`finite but unbounded`})]}),className:`overlapping-dropdown no-trigger-text`}},w={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`0px`}),(0,o.jsx)(`li`,{children:`4px`}),(0,o.jsx)(`li`,{children:`9px`}),(0,o.jsx)(`li`,{children:`18px`}),(0,o.jsx)(`li`,{children:`36px`}),(0,o.jsx)(`li`,{children:`54px`}),(0,o.jsx)(`li`,{children:`72px`}),(0,o.jsx)(`li`,{children:`144px`}),(0,o.jsx)(`li`,{children:`167px`}),(0,o.jsx)(`li`,{children:`198px`})]}),className:`out-of-bounds-example position-right`,isSearchable:!0,name:`outofboundsatright`,placeholder:`Fill available space`}},T={args:{children:(0,o.jsxs)(`ul`,{children:[(0,o.jsx)(`li`,{children:`Antarctica`}),(0,o.jsx)(`li`,{children:`Arctic Circle`}),(0,o.jsx)(`li`,{children:`North Pole`})]}),className:`out-of-bounds-example no-direction-change`,isSearchable:!0,name:`outofboundsatbottomnodirectionchange`,placeholder:`Show below even though it goes out of bounds`}};u.parameters={...u.parameters,docs:{...u.parameters?.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'
+  }
+}`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.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…'
+  }
+}`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.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
+  }
+}`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.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
+  }
+}`,...p.parameters?.docs?.source}}},m.parameters={...m.parameters,docs:{...m.parameters?.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
+  }
+}`,...m.parameters?.docs?.source}}},h.parameters={...h.parameters,docs:{...h.parameters?.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'
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.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'
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.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'
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.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
+  }
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.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
+  }
+}`,...y.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: FIXED_HEADER_PROPS,
+  render() {
+    // const [dateStart, setDateStart] = useState(
+    //     FIXED_HEADER_PROPS.dateStart,
+    // );
+    // const [dateEnd, setDateEnd] = useState(
+    //     FIXED_HEADER_PROPS.dateEnd,
+    // );
+
+    return <>
+                <header className="mk-header">
+                    <nav className="mk-nav a1">
+                        <a className="logo" href="/"></a>
+                        <a className="btn-text logo-text" href="/">
+                            UIKit
+                        </a>
+                    </nav>
+                    <div className="mk-nav center">
+                        <h5 className="mk subtitle">
+                            Welcome! Join our{' '}
+                            <a className="home-link" rel="noreferrer" href="https://discord.gg/dTpXZpQ9Rz" target="_blank">
+                                Discord.
+                            </a>
+                        </h5>
+                    </div>
+                    <nav className="mk-nav a2">
+                        <a className="btn-text" href="/projects">
+                            Projects
+                        </a>
+                        <Dropdown {...FIXED_HEADER_PROPS} />
+                    </nav>
+                </header>
+                <h1>Lorem ipsum</h1>
+            </>;
+  }
+}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.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'
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.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'
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.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: 'Fill available space'
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.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'
+  }
+}`,...T.parameters?.docs?.source}}};const E=[`CSSLengthsDropdown`,`StatesDropdown`,`FontWeightDropdown`,`ShowContextMenuOnMount`,`DropdownWithInteractiveContents`,`SearchableWithLabel`,`SearchableAndAllowCreate`,`CSSValueInputTrigger`,`TextareaTrigger`,`CheckboxesDropdown`,`FixedHeader`,`DisabledDropdown`,`OverlappingDropdown`,`OutOfBoundsAtRight`,`OutOfBoundsWithNoDirectionChange`];export{u as CSSLengthsDropdown,_ as CSSValueInputTrigger,y as CheckboxesDropdown,S as DisabledDropdown,m as DropdownWithInteractiveContents,x as FixedHeader,f as FontWeightDropdown,w as OutOfBoundsAtRight,T as OutOfBoundsWithNoDirectionChange,C as OverlappingDropdown,g as SearchableAndAllowCreate,h as SearchableWithLabel,p as ShowContextMenuOnMount,d as StatesDropdown,v as TextareaTrigger,E as __namedExportsOrder,l as default};

package/dist/assets/InputText-_BMv0r1n.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:#0000;max-width:300px}.input-text-double-click-to-edit:read-only{cursor:pointer}.multi-line-input-text{width:240px}.multi-line-input-css-transition{outline-offset:-1px;resize:none;background-color:#f8f8f8;border:1px solid #f2f2f2;border-radius:5px;outline:2px solid #0000;height:150px;padding:20px;font-size:14px;line-height:21px;transition:all .25s ease-in-out}[popover]{border:0;border-radius:5px;padding:25px 30px;box-shadow:0 3px 16px 1px #00000080}