A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{i as e,t}from"./jsx-runtime-D-oznMWL.js";import{t as n}from"./react-DNjXG-IQ.js";import{$ as r,Bt as i,E as a,Ft as o,Gt as s,I as c,J as l,Lt as u,Pt as d,Q as f,S as p,Yt as m,Z as h,_ as g,a as _,at as v,c as y,et as b,g as x,h as S,ht as C,it as w,l as T,lt as E,p as D,qt as O,rt as k,s as A,y as j}from"./button-B3FtKFjE.js";import{_ as M}from"./typography.stylex-ZkAqsnF0.js";import{F as N,G as P,J as F,M as I,N as L,O as R,b as ee,h as te,s as ne}from"./SelectionIndicator-D6_3UuYP.js";import{a as re}from"./icon-button-BFGSYviR.js";import{n as ie}from"./useLocalizedStringFormatter-DkD75zZh.js";import{t as ae}from"./useFilter-DcdqT13M.js";import{d as oe,f as se,h as ce,i as le}from"./Dialog-I4SMYRTn.js";import{n as z,r as B}from"./ListBox-T58IHUzj.js";import{t as V}from"./search-field-cB5nPedo.js";import{t as H}from"./Autocomplete-Bc9WtO7c.js";import{i as U}from"./Separator-vYV6cmuY.js";import{t as W}from"./useListState-CzdWVnix.js";import{t as ue}from"./intlStrings-GsTGY_cb.js";import{n as de,t as fe}from"./Virtualizer-F0WUv2oN.js";import{t as pe}from"./chevron-down-D6TeByrN.js";import{t as me}from"./usePopoverStyles-Dfy7mt0T.js";import{t as he}from"./suffix-icon-B752tq3D.js";import{t as G}from"./useInputStyles-BNn_FOM8.js";import{t as ge}from"./useListBoxItemStyles-Dp7eJMDi.js";import{a as _e,t as ve}from"./listbox-Clp-j1PB.js";var K=e(n(),1);function ye(e={}){let{locale:t}=l();return(0,K.useMemo)(()=>new Intl.ListFormat(t,e),[t,e])}var q=new WeakMap;function be(e,t,n){let{keyboardDelegate:r,isDisabled:i,isRequired:a,name:l,form:f,validationBehavior:p=`aria`}=e,m=P({usage:`search`,sensitivity:`base`}),h=(0,K.useMemo)(()=>r||new R(t.collection,t.disabledKeys,n,m),[r,t.collection,t.disabledKeys,m,n]),{menuTriggerProps:g,menuProps:_}=ce({isDisabled:i,type:`listbox`},t,n),v=e=>{if(t.selectionManager.selectionMode!==`multiple`)switch(e.key){case`ArrowLeft`:{e.preventDefault();let n=t.selectedKey==null?h.getFirstKey?.call(h):h.getKeyAbove?.call(h,t.selectedKey);n&&t.setSelectedKey(n);break}case`ArrowRight`:{e.preventDefault();let n=t.selectedKey==null?h.getFirstKey?.call(h):h.getKeyBelow?.call(h,t.selectedKey);n&&t.setSelectedKey(n);break}}},{typeSelectProps:y}=I({keyboardDelegate:h,selectionManager:t.selectionManager,onTypeSelect(e){t.setSelectedKey(e)}}),{isInvalid:b,validationErrors:x,validationDetails:S}=t.displayValidation,{labelProps:C,fieldProps:w,descriptionProps:T,errorMessageProps:E}=L({...e,labelElementType:`span`,isInvalid:b,errorMessage:e.errorMessage||x});y.onKeyDown=y.onKeyDownCapture,delete y.onKeyDownCapture,t.selectionManager.selectionMode===`multiple`&&(y={});let D=d(e,{labelable:!0}),k=o(y,g,w),A=O();return q.set(t,{isDisabled:i,isRequired:a,name:l,form:f,validationBehavior:p}),{labelProps:{...C,onClick:()=>{if(!e.isDisabled){var t;(t=n.current)==null||t.focus(),c(`keyboard`)}}},triggerProps:o(D,{...k,isDisabled:i,onKeyDown:s(k.onKeyDown,v,e.onKeyDown),onKeyUp:e.onKeyUp,"aria-labelledby":[A,k[`aria-labelledby`],k[`aria-label`]&&!k[`aria-labelledby`]?k.id:null].filter(Boolean).join(` `),onFocus(n){t.isFocused||(e.onFocus&&e.onFocus(n),e.onFocusChange&&e.onFocusChange(!0),t.setFocused(!0))},onBlur(n){t.isOpen||(e.onBlur&&e.onBlur(n),e.onFocusChange&&e.onFocusChange(!1),t.setFocused(!1))}}),valueProps:{id:A},menuProps:{..._,autoFocus:t.focusStrategy||!0,shouldSelectOnPressUp:!0,shouldFocusOnHover:!0,disallowEmptySelection:!0,linkBehavior:`selection`,onBlur:n=>{u(n.currentTarget,n.relatedTarget)||(e.onBlur&&e.onBlur(n),e.onFocusChange&&e.onFocusChange(!1),t.setFocused(!1))},"aria-labelledby":[w[`aria-labelledby`],k[`aria-label`]&&!w[`aria-labelledby`]?k.id:null].filter(Boolean).join(` `)},descriptionProps:T,errorMessageProps:E,isInvalid:b,validationErrors:x,validationDetails:S,hiddenSelectProps:{isDisabled:i,name:l,label:e.label,state:t,triggerRef:n,form:f}}}function xe(e,t,n){let r=q.get(t)||{},{autoComplete:a,name:o=r.name,form:s=r.form,isDisabled:c=r.isDisabled}=e,{validationBehavior:l,isRequired:u}=r,{visuallyHiddenProps:d}=N({style:{position:`fixed`,top:0,left:0}});F(e.selectRef,t.defaultValue,t.setValue),te({validationBehavior:l,focus:()=>n.current?.focus()},t,e.selectRef);let f=t.setValue,p=(0,K.useCallback)(e=>{let t=i(e);t.multiple?f(Array.from(t.selectedOptions,e=>e.value)):f(e.currentTarget.value)},[f]);return{containerProps:{...d,"aria-hidden":!0,"data-react-aria-prevent-focus":!0,"data-a11y-ignore":`aria-hidden-focus`},inputProps:{style:{display:`none`}},selectProps:{tabIndex:-1,autoComplete:a,disabled:c,multiple:t.selectionManager.selectionMode===`multiple`,required:l===`native`&&u,name:o,form:s,value:t.value??``,onChange:p,onInput:p}}}function Se(e){let{state:t,triggerRef:n,label:r,name:i,form:a,isDisabled:o}=e,s=(0,K.useRef)(null),c=(0,K.useRef)(null),{containerProps:l,selectProps:u}=xe({...e,selectRef:t.collection.size<=300?s:c},t,n),d=Array.isArray(t.value)?t.value:[t.value];if(t.collection.size<=300)return K.createElement(`div`,{...l,"data-testid":`hidden-select-container`},K.createElement(`label`,null,r,K.createElement(`select`,{...u,ref:s},K.createElement(`option`,null),[...t.collection.getKeys()].map(e=>{let n=t.collection.getItem(e);if(n&&n.type===`item`)return K.createElement(`option`,{key:n.key,value:n.key},n.textValue)}),t.collection.size===0&&i&&d.map((e,t)=>K.createElement(`option`,{key:t,value:e??``})))));if(i){let{validationBehavior:e}=q.get(t)||{};d.length===0&&(d=[null]);let n=d.map((t,n)=>{let r={type:`hidden`,autoComplete:u.autoComplete,name:i,form:a,disabled:o,value:t??``};return e===`native`?K.createElement(`input`,{key:n,...r,ref:n===0?c:null,style:{display:`none`},type:`text`,required:n===0?u.required:!1,onChange:()=>{}}):K.createElement(`input`,{key:n,...r,ref:n===0?c:null})});return K.createElement(K.Fragment,null,n)}return null}function Ce(e){let{selectionMode:t=`single`}=e,n=re(e),[r,i]=(0,K.useState)(null),a=(0,K.useMemo)(()=>e.defaultValue===void 0?t===`single`?e.defaultSelectedKey??null:[]:e.defaultValue,[e.defaultValue,e.defaultSelectedKey,t]),[o,s]=E((0,K.useMemo)(()=>e.value===void 0?t===`single`?e.selectedKey:void 0:e.value,[e.value,e.selectedKey,t]),a,e.onChange),c=t===`single`&&Array.isArray(o)?o[0]:o,l=n=>{if(t===`single`){var r;let t=Array.isArray(n)?n[0]??null:n;s(t),t!==c&&((r=e.onSelectionChange)==null||r.call(e,t))}else{let e=[];Array.isArray(n)?e=n:n!=null&&(e=[n]),s(e)}},u=W({...e,selectionMode:t,disallowEmptySelection:t===`single`,allowDuplicateSelectionEvents:!0,selectedKeys:(0,K.useMemo)(()=>we(c),[c]),onSelectionChange:e=>{e!==`all`&&(t===`single`?(l(e.values().next().value??null),n.close()):l([...e]),p.commitValidation())}}),d=u.selectionManager.firstSelectedKey,f=(0,K.useMemo)(()=>[...u.selectionManager.selectedKeys].map(e=>u.collection.getItem(e)).filter(e=>e!=null),[u.selectionManager.selectedKeys,u.collection]),p=ee({...e,value:Array.isArray(c)&&c.length===0?null:c}),[m,h]=(0,K.useState)(!1),[g]=(0,K.useState)(c);return{...p,...u,...n,value:c,defaultValue:a??g,setValue:l,selectedKey:d,setSelectedKey:l,selectedItem:f[0]??null,selectedItems:f,defaultSelectedKey:e.defaultSelectedKey??(e.selectionMode===`single`?g:null),focusStrategy:r,open(t=null){(u.collection.size!==0||e.allowsEmptyCollection)&&(i(t),n.open())},toggle(t=null){(u.collection.size!==0||e.allowsEmptyCollection)&&(i(t),n.toggle())},isFocused:m,setFocused:h}}function we(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function Te(e){return e&&e.__esModule?e.default:e}var J=(0,K.createContext)(null),Y=(0,K.createContext)(null),Ee=(0,K.forwardRef)(function(e,t){[e,t]=f(e,t,J);let{children:n,isDisabled:r=!1,isInvalid:i=!1,isRequired:a=!1}=e,o=(0,K.useMemo)(()=>typeof n==`function`?n({isOpen:!1,isDisabled:r,isInvalid:i,isRequired:a,isFocused:!1,isFocusVisible:!1,defaultChildren:null}):n,[n,r,i,a]);return K.createElement(U,{content:o},n=>K.createElement(De,{props:e,collection:n,selectRef:t}))}),X=[j,x,S];function De({props:e,selectRef:t,collection:n}){let{validationBehavior:i}=v(ne)||{},s=e.validationBehavior??i??`native`,c=Ce({...e,collection:n,children:void 0,validationBehavior:s}),{isFocusVisible:l,focusProps:u}=a({within:!0}),f=(0,K.useRef)(null),[p,m]=b(!e[`aria-label`]&&!e[`aria-labelledby`]),{labelProps:g,triggerProps:_,valueProps:y,menuProps:T,descriptionProps:E,errorMessageProps:O,hiddenSelectProps:A,...M}=be({...w(e),label:m,validationBehavior:s},c,f),[N,P]=(0,K.useState)(null);C({ref:f,onResize:(0,K.useCallback)(()=>{f.current&&P(f.current.offsetWidth+`px`)},[f])});let F=(0,K.useMemo)(()=>({isOpen:c.isOpen,isFocused:c.isFocused,isFocusVisible:l,isDisabled:e.isDisabled||!1,isInvalid:M.isInvalid||!1,isRequired:e.isRequired||!1}),[c.isOpen,c.isFocused,l,e.isDisabled,M.isInvalid,e.isRequired]),I=r({...e,values:F,defaultClassName:`react-aria-Select`}),L=d(e,{global:!0});delete L.id;let R=(0,K.useRef)(null);return K.createElement(h,{values:[[J,e],[Y,c],[Z,y],[j,{...g,ref:p,elementType:`span`}],[x,{..._,ref:f,isPressed:c.isOpen,autoFocus:e.autoFocus}],[le,c],[se,{trigger:`Select`,triggerRef:f,scrollRef:R,placement:`bottom start`,style:{"--trigger-width":N},"aria-labelledby":T[`aria-labelledby`],clearContexts:X}],[B,{...T,ref:R}],[z,c],[S,{slots:{description:E,errorMessage:O}}],[D,M]]},K.createElement(k.div,{...o(L,I,u),ref:t,slot:e.slot||void 0,"data-focused":c.isFocused||void 0,"data-focus-visible":l||void 0,"data-open":c.isOpen||void 0,"data-disabled":e.isDisabled||void 0,"data-invalid":M.isInvalid||void 0,"data-required":e.isRequired||void 0},I.children,K.createElement(Se,{...A,autoComplete:e.autoComplete})))}var Z=(0,K.createContext)(null),Oe=p(function(e,t){[e,t]=f(e,t,Z);let n=(0,K.useContext)(Y),{placeholder:i}=v(J),a=n.selectedItems.map(e=>{let t=e.props?.children;return typeof t==`function`&&(t=t({isHovered:!1,isPressed:!1,isSelected:!1,isFocused:!1,isFocusVisible:!1,isDisabled:!1,selectionMode:`single`,selectionBehavior:`toggle`})),t}),o=ye(),s=(0,K.useMemo)(()=>n.selectedItems.map(e=>e?.textValue),[n.selectedItems]),c=n.selectionManager.selectionMode,l=(0,K.useMemo)(()=>c===`single`?s[0]??``:o.format(s),[c,o,s]),u=(0,K.useMemo)(()=>{if(c===`single`)return a[0];let e=o.formatToParts(s);if(e.length===0)return null;let t=0;return e.map(e=>e.type===`element`?K.createElement(K.Fragment,{key:t},a[t++]):e.value)},[c,o,s,a]),p=ie(Te(ue),`react-aria-components`),m=r({...e,defaultChildren:u??i??p.format(`selectPlaceholder`),defaultClassName:`react-aria-SelectValue`,values:{selectedItem:n.selectedItems[0]?.value??null,selectedItems:(0,K.useMemo)(()=>n.selectedItems.map(e=>e.value??null),[n.selectedItems]),selectedText:l,isPlaceholder:n.selectedItems.length===0,state:n}}),h=d(e,{global:!0});return K.createElement(k.span,{ref:t,...h,...m,"data-placeholder":n.selectedItems.length===0||void 0},K.createElement(S.Provider,{value:void 0},m.children))}),Q=t(),$={matchWidth:{k7Eaqz:`x1p2lbcj`,$$css:!0},listBox:{kskxy:`x9v6m0g`,$$css:!0}};function ke({isOpen:e,isVirtualized:t,label:n,description:r,errorMessage:i,size:a,variant:o,validationState:s,isInvalid:c,placeholder:l,prefix:u,suffix:d,isSearchable:f,items:p,children:h,shouldCloseOnInteractOutside:v,shouldFlip:b,shouldUpdatePosition:x,placement:S,labelVariant:C}){let w=G({size:a,variant:o,labelVariant:C,validationState:c?`invalid`:s}),T=me(),{contains:E}=ae({sensitivity:`base`}),D=(0,K.useRef)(null);m(()=>{if(!e)return;let t=0,n=0;return t=requestAnimationFrame(()=>{n=requestAnimationFrame(()=>{(D.current?.querySelector(`[role="option"][aria-selected="true"]`))?.scrollIntoView({block:`nearest`,inline:`nearest`})})}),()=>{cancelAnimationFrame(t),cancelAnimationFrame(n)}},[e]);let O=(0,Q.jsx)(ve,{items:p,style:$.listBox,children:h});return t&&(O=(0,Q.jsx)(fe,{layout:de,layoutOptions:{estimatedRowHeight:ge[a]},children:O})),f&&(O=(0,Q.jsxs)(H,{filter:E,children:[(0,Q.jsx)(`div`,{className:`x1k1nxsf xwg2xyc xgewa70`,children:(0,Q.jsx)(V,{placeholder:`Search`,variant:`secondary`})}),(0,Q.jsx)(_e,{}),O]})),(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(y,{style:w.label,children:n}),(0,Q.jsxs)(g,{...M(w.wrapper),children:[u!=null&&(0,Q.jsx)(`div`,{...M(w.addon),children:u}),(0,Q.jsx)(Oe,{...M(w.input),children:({selectedText:e,isPlaceholder:t,defaultChildren:n})=>t?l:e||n}),(0,Q.jsx)(he,{suffix:(0,Q.jsxs)(Q.Fragment,{children:[d,(0,Q.jsx)(pe,{size:16,"aria-hidden":`true`})]}),style:w.addon,validationIconStyle:w.validationIcon,validationState:s})]}),(0,Q.jsx)(_,{style:w.description,children:r}),(0,Q.jsx)(A,{style:w.errorMessage,children:i}),(0,Q.jsx)(oe,{ref:D,containerPadding:8,shouldCloseOnInteractOutside:v,shouldFlip:b,shouldUpdatePosition:x,placement:S,...M(T.wrapper,T.animation,$.matchWidth),children:O})]})}function Ae({label:e,description:t,errorMessage:n,children:r,items:i,style:a,size:o,variant:s,labelVariant:c,validationState:l,shouldCloseOnInteractOutside:u,shouldFlip:d,shouldUpdatePosition:f,placement:p,placeholder:m=`Select an option`,prefix:h,suffix:g,isSearchable:_=!1,isVirtualized:v=!1,...y}){let b=o||(0,K.use)(T),x=G({size:b,variant:s,labelVariant:c,validationState:l});return(0,Q.jsx)(T,{value:b,children:(0,Q.jsx)(Ee,{...y,isInvalid:l?l===`invalid`:void 0,...M(x.field,a),placeholder:m,children:({isInvalid:a,isOpen:o})=>(0,Q.jsx)(ke,{isOpen:o,isVirtualized:v,label:e,description:t,errorMessage:n,size:b,variant:s,validationState:l,isInvalid:a,placeholder:m,prefix:h,suffix:g,isSearchable:_,items:i,shouldCloseOnInteractOutside:u,shouldFlip:d,shouldUpdatePosition:f,placement:p,labelVariant:c,children:r})})})}export{Ae as t};