@worldresources/wri-design-systems 2.165.0 → 2.167.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +2 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.esm.js +2 -2
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2178,7 +2178,7 @@
|
|
|
2178
2178
|
&:disabled {
|
|
2179
2179
|
background-color: ${h("neutral",200)};
|
|
2180
2180
|
}
|
|
2181
|
-
`,Hi=({id:n,label:r,caption:o,icon:i,value:a,variant:s="data",onItemClick:l,isExpanded:c=!1,ariaLabel:u,disabled:d=!1})=>{const
|
|
2181
|
+
`,Hi=({id:n,label:r,caption:o,icon:i,value:a,variant:s="data",onItemClick:l,isExpanded:c=!1,ariaLabel:u,disabled:d=!1,isHighlighted:p=!1})=>{const f=("navigation"===s||"select"===s)&&!!l,x=f?e.chakra.button:e.chakra.div,g=u||("data"===s&&a?`${r}, ${a}`:r);return t.jsxs(x,{id:n,css:["data"===s?zi:Bi,p&&{backgroundColor:h("neutral",200)}],onClick:f?l:void 0,tabIndex:f?0:void 0,onKeyDown:e=>{f&&("Enter"!==e.key&&" "!==e.key||l?.())},role:f?"button":void 0,"aria-expanded":f?c:void 0,"aria-label":g,disabled:d,"aria-selected":p,children:[t.jsxs(e.Flex,{gap:3,flex:"1",overflow:"hidden",children:[i,t.jsxs(e.Box,{flex:"1",minWidth:0,children:[t.jsx(e.Text,{fontWeight:"data"===s?"400":"700",css:Ii(d),children:r}),o&&t.jsx(e.Text,{css:Vi,children:o})]})]}),"data"===s&&a&&t.jsx(e.Text,{css:Ni,children:a}),"navigation"===s&&t.jsx(e.Icon,{as:S,boxSize:4,"aria-hidden":"true",css:Ai(d)})]})},Fi=({items:n,noBorder:r,highlightedIndex:o})=>t.jsx(e.Box,{css:Di(r),children:n.map(((e,n)=>t.jsx(Hi,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick,isHighlighted:n===o},e.id??e.label)))}),Zi=r.css`
|
|
2182
2182
|
svg {
|
|
2183
2183
|
path {
|
|
2184
2184
|
fill: ${h("primary",500)};
|
|
@@ -3621,4 +3621,4 @@ function Jd(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3621
3621
|
border: 1px solid ${h("neutral",300)};
|
|
3622
3622
|
border-radius: 4px;
|
|
3623
3623
|
${a?`background: ${a};`:""}
|
|
3624
|
-
`)}):t.jsx("div",{css:Si,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Ei,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Ri,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Ei,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Li,style:{width:"100%"},children:e})},e)))}):null]});var a},exports.Search=({placeholder:r,disabled:o,size:i="default",options:a=[],resultsMaxHeight:s="200px",isLoading:l=!1,displayResults:c="text",onSelect:u,onQueryChange:d,onClear:p,renderResults:f})=>{const[x,g]=n.useState(""),{open:v,onOpen:m,onClose:b}=e.useDisclosure(),[y,w]=n.useState(a),[C,j]=n.useState(-1),k=n.useRef(null),$=`search-results-${n.useId()}`,S=e=>{const t=a.find((t=>t.id===e||t.label===e));t&&(u?.(t),g(""),b())};n.useEffect((()=>{if(d?.(x),!x)return void w(a);const e=a.filter((e=>e.id?.toLowerCase().includes(x.toLowerCase())||e.label.toLowerCase().includes(x.toLowerCase())||e.caption?.toLowerCase().includes(x.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>S(e.id||e.label)})));w(e),m()}),[x]),n.useEffect((()=>{function e(e){v&&k.current&&!k.current.contains(e.target)&&b()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[v]);const E=x.length?t.jsx(se,{style:{marginTop:"-12px"},onClick:()=>{g(""),p?.()}}):null,R="none"!==c&&!!x.length&&y.length>0&&v;return t.jsxs("div",{ref:k,style:{position:"relative",width:"100%"},children:[t.jsx(e.InputGroup,{startElement:t.jsx(ne,{fill:o?h("neutral",500):h("primary",700),style:{marginTop:"-12px"}}),endElement:E,children:t.jsx(Ct,{autoComplete:"off",placeholder:r||"Filter",onChange:e=>{const{value:t}=e.target;g(t)},value:x,label:"",style:{paddingLeft:"40px"},type:"search","aria-label":r||"Search filter","aria-expanded":R,"aria-controls":$,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),j((e=>Math.min(e+1,y.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),j((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),C>=0)){const e=y[C];S(e.id||e.label)}"Escape"===e.key&&b()}}})}),(R||l&&!!x.length)&&"custom"===c&&f&&!l&&f({items:y,highlightedIndex:C,query:x,onSelect:S}),(R||l&&!!x.length)&&t.jsx(e.Portal,{container:k,children:t.jsxs(e.Box,{position:"absolute",marginTop:"-20px",width:"100%",backgroundColor:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",boxShadow:"md",zIndex:1e3,overflowY:"auto",maxHeight:s,children:[l&&t.jsx(e.Box,{padding:"1rem",children:t.jsx(e.Spinner,{})}),"text"===c&&!l&&t.jsx(Sf,{highlightedIndex:C,items:y,query:x,onSelect:S}),"list"===c&&!l&&t.jsx(Fi,{items:y})]})})]})},exports.Select=Ut,exports.Sheet=({header:e,content:r,footer:o,open:i=!1,onClose:a,minimizedHeight:s,midHeight:l=200,maxFullHeight:c,defaultSnap:u="minimized",className:d,blocking:p,zIndex:h=1e3})=>{const f=n.useRef(null),x=n.useRef([]),[g,v]=n.useState(null),m=window.innerWidth>768,b=x.current;let y="Expand sheet";if(null!=g){const e=Th(g,b);e>0&&e<b.length-1?y="Make full screen":e===b.length-1&&(y="Expanded sheet")}const w=!(null==g||!b.length||Th(g,b)!==b.length-1);return t.jsx(Rh,{ref:f,css:Oh(!!e,h),className:d,open:i,onDismiss:a,header:t.jsxs("div",{children:[t.jsx("button",{type:"button",disabled:w,"aria-label":y,css:Lh,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=b[b.length-1];if(m)return void f.current?.snapTo?.((()=>t));const n=g??b[0];let r=b.findIndex((e=>e>n));-1===r&&(r=b.length-1);const o=b[r];f.current?.snapTo?.((()=>o))},children:t.jsx("div",{})}),t.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:y}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,s||e,l+(o?n:0),c||t-t/6];return x.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===u?r=s||e:"mid"===u?r=l+(o?n:0):"full"===u&&(r=c||t-t/6),r},blocking:p,children:i?r:null})},exports.SimpleMapPin=({onClick:e,triggerRef:t,showFocusState:n,count:r,mode:i,variant:a="simple-pin"})=>o.jsx(Ln,{count:r,mode:i,onClick:e,ref:t,showFocusState:n,variant:a}),exports.Slider=tt,exports.SliderInput=({label:e,caption:r,size:o="default",sliderItem:i,required:a,onChange:s})=>{const[l,c]=n.useState(i.value||[]),u=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const a=i.min||0,s=i.max||100;o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>s?s:o,r[t]=o,c(r)},d=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const a=i.min||0,u=i.max||100;if(o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>u?u:o,2===l?.length){o=Number.isNaN(o)?a:o;const e=l[0],n=l[1];0===t?(o=o<a?a:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>u?u:o)}r[t]=o,c(r),s&&s(r)};return t.jsxs("div",{children:[t.jsxs("p",{css:un(o),"aria-label":e,children:[a?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:dn(o),"aria-label":r,children:r}):null,t.jsxs("div",{css:pn,children:[i.step&&i.marks?t.jsx(Ut,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),s&&s(t)}}):t.jsx(Ct,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>u(e,0),onBlur:e=>d(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(tt,{css:{},...i,value:l,onValueChangeEnd:e=>{c(e.value),s&&s(e.value)}}),2===l?.length?t.jsx(Ct,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>u(e,1),onBlur:e=>d(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:Yf,children:[e.map(((e,r)=>t.jsxs("div",{css:Kf,children:[t.jsx("button",{css:Jf(n>=r+1,n<r+1),type:"button",onClick:e.onClick,"aria-current":n===r+1,"aria-disabled":n<r+1,disabled:n<r+1,"aria-label":`Current Step ${r}${e.label?` ${e.label}`:""}`,"data-active":n>=r+1,children:n>r+1?t.jsx(C,{height:"16px",width:"16px"}):r+1}),e.label?t.jsx("p",{css:Qf(n===r+1),children:e.label}):null]},`${e.label}-${r}`))),t.jsx("div",{css:ex,children:t.jsx("div",{css:tx})})]}),exports.Switch=rt,exports.TabBar=({variant:r="panel",defaultValue:o,tabs:i,onTabClick:a,activationMode:s="manual"})=>{const[l,c]=n.useState(jf(i,o)||0),u="view"===r;return t.jsx("div",{css:mf(r),children:t.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(jf(i,t=e)),void(a&&a(t));var t},activationMode:s,children:t.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((r,o)=>t.jsxs(n.Fragment,{children:[u&&1===o&&"left"===kf(l)?t.jsx("div",{css:wf}):null,t.jsx(e.Tabs.Trigger,{css:[bf,u?Cf:yf],"aria-label":r["aria-label"]||r.label,...r,children:t.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"5px",children:[r.icon,r.label]})},r.label),u&&1===o&&"right"===kf(l)?t.jsx("div",{css:wf}):null]},r.label)))})})})},exports.Table=({columns:r,data:o=[],renderRow:i,striped:a,stickyHeader:s,pagination:l,selectable:c,selectedRows:u,variant:d="default",onSortColumn:p,onPageSizeChange:f,onPageChange:x,onAllItemsSelected:g,loading:v})=>{const[m,b]=n.useState({key:"",order:""}),{totalItems:y=o.length,currentPage:w=1,pageSize:C=10,showItemCount:j,showItemCountText:k}=l||{},S=(e,t)=>{b({key:e,order:t}),p&&p({key:e,order:t})},E=u?.length===o?.length,R=u&&u.length>0&&!E;return t.jsxs("div",{children:[t.jsxs(e.Table.Root,{css:Xi(d),striped:a,stickyHeader:s,interactive:!0,children:[t.jsx(e.Table.Header,{css:Yi(d),children:t.jsxs(e.Table.Row,{children:[c?t.jsx(e.Table.ColumnHeader,{children:t.jsx(Le,{name:"header-checkbox",checked:E,indeterminate:R,onCheckedChange:({checked:e})=>{g&&g(e)}})}):null,r.map((n=>t.jsx(e.Table.ColumnHeader,{role:n.sortable?"columnheader":void 0,"aria-sort":n.sortable&&"asc"===m.order?"ascending":n.sortable&&"desc"===m.order?"descending":void 0,children:t.jsxs("div",{css:Ki,children:[n.label,n.sortable?t.jsxs("div",{css:Ji,children:[t.jsx(ae,{css:Qi(m.key===n.key&&"asc"===m.order),icon:t.jsx($,{style:{transform:"rotate(180deg)"}}),onClick:()=>S(n.key,"asc"),"aria-label":"Ascending"}),t.jsx(ae,{css:Qi(m.key===n.key&&"desc"===m.order),icon:t.jsx($,{}),onClick:()=>S(n.key,"desc"),"aria-label":"Descending"})]}):null]})},n.key)))]})}),t.jsx(e.Table.Body,{css:na,children:o.map((e=>t.jsx(n.Fragment,{children:i(e)},e.id)))})]}),v?t.jsx("div",{css:ra,children:t.jsx(e.Spinner,{size:"lg",color:h("primary",500)})}):null,t.jsxs("div",{css:ea,children:[t.jsx("div",{children:j?t.jsx(_i,{pageSize:C,currentPage:w,totalItems:y,onPageSizeChange:f,showItemCountText:k}):null}),l?t.jsx("div",{css:ta,children:t.jsx(Ui,{totalItems:y,pageSize:C,currentPage:w,onPageChange:x})}):null]})]})},exports.TableCell=ia,exports.TableRow=oa,exports.Tag=Wt,exports.TextInput=Ct,exports.Textarea=({label:r,caption:o,placeholder:i,errorMessage:a,required:s,disabled:l,size:c="default",defaultValue:u="",onChange:d,minLength:p,maxLength:h,...f})=>{const[x,g]=n.useState(u),[v,m]=n.useState(!1),[b,y]=n.useState(!1),[w,C]=n.useState(""),j=n.useId(),k=n.useId(),$=n.useId();n.useEffect((()=>{const{length:e}=u;p&&e<p&&e>0?(m(e<p),y(!1),C(`Enter at least ${p-e} characters`)):p&&0===e&&C(`Min ${p} characters`),h&&e>0?(m(!1),y(e>h),C(`You have ${h-e} characters remaining`)):h&&0===e&&C(`Max ${h} characters`)}),[]);const S=!!a||v||b,E=[o?j:null,S?k:null,w?$:null].filter(Boolean).join(" ")||void 0;return t.jsxs("div",{css:hn(c),children:[S?t.jsx("div",{css:fn}):null,t.jsxs(e.Field.Root,{required:s,invalid:S,gap:"0",style:{marginLeft:S?"19px":"0px"},children:[r?t.jsxs(e.Field.Label,{css:xn(c,l),"aria-label":r,children:[t.jsx(e.Field.RequiredIndicator,{"aria-label":"required"}),r,s?"":t.jsx("span",{children:" (Optional)"})]}):null,o?t.jsx(e.Field.HelperText,{id:j,css:gn(c,l),children:o}):null,a?t.jsx(e.Field.ErrorText,{id:k,css:mn,"aria-label":`Error: ${a}`,"aria-live":"polite",children:a}):null,t.jsx(e.Textarea,{placeholder:i,disabled:l,css:bn(c,x,u),onChange:e=>{g(e.target.value);const{length:t}=e.target.value;p&&h?(m(t<p),y(t>h),C(`You have ${h-t} characters remaining`)):p?(m(t<p),y(!1),C(t<p?`Enter at least ${p-t} characters`:"")):h&&(y(t>h),m(!1),C(`You have ${h-t} characters remaining`)),d&&d(e)},value:x,"aria-describedby":E,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...f}),v&&p?t.jsxs(e.Field.ErrorText,{id:k,css:mn,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",p-x.length," more characters"]}):null,b&&h?t.jsxs(e.Field.ErrorText,{id:k,css:mn,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",x.length-h," characters too many"]}):null,!w||b||v?null:t.jsx(e.Field.HelperText,{id:$,css:vn,"aria-live":"polite",children:w})]})]})},exports.Toast=()=>Object.keys(lx).map((n=>t.jsx(e.Portal,{children:t.jsx(e.Toaster,{toaster:lx[n],insetInline:{mdDown:"4"},children:r=>t.jsxs(e.Toast.Root,{css:nx,width:{md:"sm"},children:[t.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===r.type?r.meta?.icon?r.meta.icon:t.jsx(k,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===r.type?t.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===r.type?r.meta?.icon?r.meta.icon:t.jsx(P,{color:"var(--chakra-colors-success-500)"}):null,"warning"===r.type?r.meta?.icon?r.meta.icon:t.jsx(M,{color:"var(--chakra-colors-warning-500)"}):null,"error"===r.type?r.meta?.icon?r.meta.icon:t.jsx(_,{color:"var(--chakra-colors-error-500)"}):null,t.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[t.jsx(e.Toast.Title,{css:rx,"aria-label":`${r.title}`,children:r.title}),r.description?t.jsx(e.Toast.Title,{css:ox,"aria-label":`${r.description}`,children:r.description}):null]})]}),r.action||r.meta?.closable?t.jsxs(e.Stack,{flexDirection:"row",children:[r.action?t.jsx(b,{css:ix,label:r.action.label,size:"small",variant:"info"===r.type?"primary":"secondary",onClick:()=>{r?.action?.onClick&&r.action.onClick(),lx[n].dismiss()}}):null,r.meta?.closable?t.jsx(b,{css:ax,label:r.meta.closableLabel,"aria-label":r.meta?.closableLabel||"Dismiss",leftIcon:t.jsx(E,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>lx[n].dismiss()}):null]}):null]})})},n))),exports.Toolbar=fe,exports.Tooltip=pe,exports.designSystemStyles=p,exports.designSystemStylesForTailwind=d,exports.getThemedColor=h,exports.showToast=e=>{lx[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};
|
|
3624
|
+
`)}):t.jsx("div",{css:Si,children:e?.map(((e,r)=>t.jsx("div",{"data-test":`${e}-${n?.[r]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${n?.[r]}`)))}),t.jsx("div",{css:Ei,children:n?.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Ri,children:e})},e)))}),o&&o.length?t.jsx("div",{css:Ei,children:o.map((e=>t.jsx("div",{style:{width:i?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:t.jsx("p",{css:Li,style:{width:"100%"},children:e})},e)))}):null]});var a},exports.Search=({placeholder:r,disabled:o,size:i="default",options:a=[],resultsMaxHeight:s="200px",isLoading:l=!1,displayResults:c="text",onSelect:u,onQueryChange:d,onClear:p,renderResults:f})=>{const[x,g]=n.useState(""),{open:v,onOpen:m,onClose:b}=e.useDisclosure(),[y,w]=n.useState(a),[C,j]=n.useState(-1),k=n.useRef(null),$=`search-results-${n.useId()}`,S=e=>{const t=a.find((t=>t.id===e||t.label===e));t&&(u?.(t),g(""),b())};n.useEffect((()=>{if(d?.(x),!x)return void w(a);const e=a.filter((e=>e.id?.toLowerCase().includes(x.toLowerCase())||e.label.toLowerCase().includes(x.toLowerCase())||e.caption?.toLowerCase().includes(x.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>S(e.id||e.label)})));w(e),m()}),[x]),n.useEffect((()=>{function e(e){v&&k.current&&!k.current.contains(e.target)&&b()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[v]);const E=x.length?t.jsx(se,{style:{marginTop:"-12px"},onClick:()=>{g(""),p?.()}}):null,R="none"!==c&&!!x.length&&y.length>0&&v;return t.jsxs("div",{ref:k,style:{position:"relative",width:"100%"},children:[t.jsx(e.InputGroup,{startElement:t.jsx(ne,{fill:o?h("neutral",500):h("primary",700),style:{marginTop:"-12px"}}),endElement:E,children:t.jsx(Ct,{autoComplete:"off",placeholder:r||"Filter",onChange:e=>{const{value:t}=e.target;g(t)},value:x,label:"",style:{paddingLeft:"40px"},type:"search","aria-label":r||"Search filter","aria-expanded":R,"aria-controls":$,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),j((e=>Math.min(e+1,y.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),j((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),C>=0)){const e=y[C];S(e.id||e.label)}"Escape"===e.key&&b()}}})}),(R||l&&!!x.length)&&"custom"===c&&f&&!l&&f({items:y,highlightedIndex:C,query:x,onSelect:S}),(R||l&&!!x.length)&&t.jsx(e.Portal,{container:k,children:t.jsxs(e.Box,{position:"absolute",marginTop:"-20px",width:"100%",backgroundColor:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",boxShadow:"md",zIndex:1e3,overflowY:"auto",maxHeight:s,children:[l&&t.jsx(e.Box,{padding:"1rem",children:t.jsx(e.Spinner,{})}),"text"===c&&!l&&t.jsx(Sf,{highlightedIndex:C,items:y,query:x,onSelect:S}),"list"===c&&!l&&t.jsx(Fi,{items:y,highlightedIndex:C})]})})]})},exports.Select=Ut,exports.Sheet=({header:e,content:r,footer:o,open:i=!1,onClose:a,minimizedHeight:s,midHeight:l=200,maxFullHeight:c,defaultSnap:u="minimized",className:d,blocking:p,zIndex:h=1e3})=>{const f=n.useRef(null),x=n.useRef([]),[g,v]=n.useState(null),m=window.innerWidth>768,b=x.current;let y="Expand sheet";if(null!=g){const e=Th(g,b);e>0&&e<b.length-1?y="Make full screen":e===b.length-1&&(y="Expanded sheet")}const w=!(null==g||!b.length||Th(g,b)!==b.length-1);return t.jsx(Rh,{ref:f,css:Oh(!!e,h),className:d,open:i,onDismiss:a,header:t.jsxs("div",{children:[t.jsx("button",{type:"button",disabled:w,"aria-label":y,css:Lh,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=b[b.length-1];if(m)return void f.current?.snapTo?.((()=>t));const n=g??b[0];let r=b.findIndex((e=>e>n));-1===r&&(r=b.length-1);const o=b[r];f.current?.snapTo?.((()=>o))},children:t.jsx("div",{})}),t.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:y}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,s||e,l+(o?n:0),c||t-t/6];return x.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===u?r=s||e:"mid"===u?r=l+(o?n:0):"full"===u&&(r=c||t-t/6),r},blocking:p,children:i?r:null})},exports.SimpleMapPin=({onClick:e,triggerRef:t,showFocusState:n,count:r,mode:i,variant:a="simple-pin"})=>o.jsx(Ln,{count:r,mode:i,onClick:e,ref:t,showFocusState:n,variant:a}),exports.Slider=tt,exports.SliderInput=({label:e,caption:r,size:o="default",sliderItem:i,required:a,onChange:s})=>{const[l,c]=n.useState(i.value||[]),u=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const a=i.min||0,s=i.max||100;o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>s?s:o,r[t]=o,c(r)},d=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const a=i.min||0,u=i.max||100;if(o=Number.isNaN(o)?a:o,o=o<a?a:o,o=o>u?u:o,2===l?.length){o=Number.isNaN(o)?a:o;const e=l[0],n=l[1];0===t?(o=o<a?a:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>u?u:o)}r[t]=o,c(r),s&&s(r)};return t.jsxs("div",{children:[t.jsxs("p",{css:un(o),"aria-label":e,children:[a?t.jsx("span",{children:"*"}):null,e]}),r?t.jsx("p",{css:dn(o),"aria-label":r,children:r}):null,t.jsxs("div",{css:pn,children:[i.step&&i.marks?t.jsx(Ut,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),s&&s(t)}}):t.jsx(Ct,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>u(e,0),onBlur:e=>d(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),t.jsx(tt,{css:{},...i,value:l,onValueChangeEnd:e=>{c(e.value),s&&s(e.value)}}),2===l?.length?t.jsx(Ct,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>u(e,1),onBlur:e=>d(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:n})=>t.jsxs("div",{css:Yf,children:[e.map(((e,r)=>t.jsxs("div",{css:Kf,children:[t.jsx("button",{css:Jf(n>=r+1,n<r+1),type:"button",onClick:e.onClick,"aria-current":n===r+1,"aria-disabled":n<r+1,disabled:n<r+1,"aria-label":`Current Step ${r}${e.label?` ${e.label}`:""}`,"data-active":n>=r+1,children:n>r+1?t.jsx(C,{height:"16px",width:"16px"}):r+1}),e.label?t.jsx("p",{css:Qf(n===r+1),children:e.label}):null]},`${e.label}-${r}`))),t.jsx("div",{css:ex,children:t.jsx("div",{css:tx})})]}),exports.Switch=rt,exports.TabBar=({variant:r="panel",defaultValue:o,tabs:i,onTabClick:a,activationMode:s="manual"})=>{const[l,c]=n.useState(jf(i,o)||0),u="view"===r;return t.jsx("div",{css:mf(r),children:t.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(jf(i,t=e)),void(a&&a(t));var t},activationMode:s,children:t.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((r,o)=>t.jsxs(n.Fragment,{children:[u&&1===o&&"left"===kf(l)?t.jsx("div",{css:wf}):null,t.jsx(e.Tabs.Trigger,{css:[bf,u?Cf:yf],"aria-label":r["aria-label"]||r.label,...r,children:t.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"5px",children:[r.icon,r.label]})},r.label),u&&1===o&&"right"===kf(l)?t.jsx("div",{css:wf}):null]},r.label)))})})})},exports.Table=({columns:r,data:o=[],renderRow:i,striped:a,stickyHeader:s,pagination:l,selectable:c,selectedRows:u,variant:d="default",onSortColumn:p,onPageSizeChange:f,onPageChange:x,onAllItemsSelected:g,loading:v})=>{const[m,b]=n.useState({key:"",order:""}),{totalItems:y=o.length,currentPage:w=1,pageSize:C=10,showItemCount:j,showItemCountText:k}=l||{},S=(e,t)=>{b({key:e,order:t}),p&&p({key:e,order:t})},E=u?.length===o?.length,R=u&&u.length>0&&!E;return t.jsxs("div",{children:[t.jsxs(e.Table.Root,{css:Xi(d),striped:a,stickyHeader:s,interactive:!0,children:[t.jsx(e.Table.Header,{css:Yi(d),children:t.jsxs(e.Table.Row,{children:[c?t.jsx(e.Table.ColumnHeader,{children:t.jsx(Le,{name:"header-checkbox",checked:E,indeterminate:R,onCheckedChange:({checked:e})=>{g&&g(e)}})}):null,r.map((n=>t.jsx(e.Table.ColumnHeader,{role:n.sortable?"columnheader":void 0,"aria-sort":n.sortable&&"asc"===m.order?"ascending":n.sortable&&"desc"===m.order?"descending":void 0,children:t.jsxs("div",{css:Ki,children:[n.label,n.sortable?t.jsxs("div",{css:Ji,children:[t.jsx(ae,{css:Qi(m.key===n.key&&"asc"===m.order),icon:t.jsx($,{style:{transform:"rotate(180deg)"}}),onClick:()=>S(n.key,"asc"),"aria-label":"Ascending"}),t.jsx(ae,{css:Qi(m.key===n.key&&"desc"===m.order),icon:t.jsx($,{}),onClick:()=>S(n.key,"desc"),"aria-label":"Descending"})]}):null]})},n.key)))]})}),t.jsx(e.Table.Body,{css:na,children:o.map((e=>t.jsx(n.Fragment,{children:i(e)},e.id)))})]}),v?t.jsx("div",{css:ra,children:t.jsx(e.Spinner,{size:"lg",color:h("primary",500)})}):null,t.jsxs("div",{css:ea,children:[t.jsx("div",{children:j?t.jsx(_i,{pageSize:C,currentPage:w,totalItems:y,onPageSizeChange:f,showItemCountText:k}):null}),l?t.jsx("div",{css:ta,children:t.jsx(Ui,{totalItems:y,pageSize:C,currentPage:w,onPageChange:x})}):null]})]})},exports.TableCell=ia,exports.TableRow=oa,exports.Tag=Wt,exports.TextInput=Ct,exports.Textarea=({label:r,caption:o,placeholder:i,errorMessage:a,required:s,disabled:l,size:c="default",defaultValue:u="",onChange:d,minLength:p,maxLength:h,...f})=>{const[x,g]=n.useState(u),[v,m]=n.useState(!1),[b,y]=n.useState(!1),[w,C]=n.useState(""),j=n.useId(),k=n.useId(),$=n.useId();n.useEffect((()=>{const{length:e}=u;p&&e<p&&e>0?(m(e<p),y(!1),C(`Enter at least ${p-e} characters`)):p&&0===e&&C(`Min ${p} characters`),h&&e>0?(m(!1),y(e>h),C(`You have ${h-e} characters remaining`)):h&&0===e&&C(`Max ${h} characters`)}),[]);const S=!!a||v||b,E=[o?j:null,S?k:null,w?$:null].filter(Boolean).join(" ")||void 0;return t.jsxs("div",{css:hn(c),children:[S?t.jsx("div",{css:fn}):null,t.jsxs(e.Field.Root,{required:s,invalid:S,gap:"0",style:{marginLeft:S?"19px":"0px"},children:[r?t.jsxs(e.Field.Label,{css:xn(c,l),"aria-label":r,children:[t.jsx(e.Field.RequiredIndicator,{"aria-label":"required"}),r,s?"":t.jsx("span",{children:" (Optional)"})]}):null,o?t.jsx(e.Field.HelperText,{id:j,css:gn(c,l),children:o}):null,a?t.jsx(e.Field.ErrorText,{id:k,css:mn,"aria-label":`Error: ${a}`,"aria-live":"polite",children:a}):null,t.jsx(e.Textarea,{placeholder:i,disabled:l,css:bn(c,x,u),onChange:e=>{g(e.target.value);const{length:t}=e.target.value;p&&h?(m(t<p),y(t>h),C(`You have ${h-t} characters remaining`)):p?(m(t<p),y(!1),C(t<p?`Enter at least ${p-t} characters`:"")):h&&(y(t>h),m(!1),C(`You have ${h-t} characters remaining`)),d&&d(e)},value:x,"aria-describedby":E,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...f}),v&&p?t.jsxs(e.Field.ErrorText,{id:k,css:mn,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",p-x.length," more characters"]}):null,b&&h?t.jsxs(e.Field.ErrorText,{id:k,css:mn,style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",x.length-h," characters too many"]}):null,!w||b||v?null:t.jsx(e.Field.HelperText,{id:$,css:vn,"aria-live":"polite",children:w})]})]})},exports.Toast=()=>Object.keys(lx).map((n=>t.jsx(e.Portal,{children:t.jsx(e.Toaster,{toaster:lx[n],insetInline:{mdDown:"4"},children:r=>t.jsxs(e.Toast.Root,{css:nx,width:{md:"sm"},children:[t.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===r.type?r.meta?.icon?r.meta.icon:t.jsx(k,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===r.type?t.jsx(e.Spinner,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===r.type?r.meta?.icon?r.meta.icon:t.jsx(P,{color:"var(--chakra-colors-success-500)"}):null,"warning"===r.type?r.meta?.icon?r.meta.icon:t.jsx(M,{color:"var(--chakra-colors-warning-500)"}):null,"error"===r.type?r.meta?.icon?r.meta.icon:t.jsx(_,{color:"var(--chakra-colors-error-500)"}):null,t.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[t.jsx(e.Toast.Title,{css:rx,"aria-label":`${r.title}`,children:r.title}),r.description?t.jsx(e.Toast.Title,{css:ox,"aria-label":`${r.description}`,children:r.description}):null]})]}),r.action||r.meta?.closable?t.jsxs(e.Stack,{flexDirection:"row",children:[r.action?t.jsx(b,{css:ix,label:r.action.label,size:"small",variant:"info"===r.type?"primary":"secondary",onClick:()=>{r?.action?.onClick&&r.action.onClick(),lx[n].dismiss()}}):null,r.meta?.closable?t.jsx(b,{css:ax,label:r.meta.closableLabel,"aria-label":r.meta?.closableLabel||"Dismiss",leftIcon:t.jsx(E,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>lx[n].dismiss()}):null]}):null]})})},n))),exports.Toolbar=fe,exports.Tooltip=pe,exports.designSystemStyles=p,exports.designSystemStylesForTailwind=d,exports.getThemedColor=h,exports.showToast=e=>{lx[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})};
|
package/dist/index.d.ts
CHANGED
|
@@ -579,13 +579,15 @@ interface ListItemProps {
|
|
|
579
579
|
onItemClick?: () => void;
|
|
580
580
|
ariaLabel?: string;
|
|
581
581
|
disabled?: boolean;
|
|
582
|
+
isHighlighted?: boolean;
|
|
582
583
|
}
|
|
583
584
|
interface ListProps {
|
|
584
585
|
items: ListItemProps[];
|
|
585
586
|
noBorder?: boolean;
|
|
587
|
+
highlightedIndex?: number;
|
|
586
588
|
}
|
|
587
589
|
|
|
588
|
-
declare const List: ({ items, noBorder }: ListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
590
|
+
declare const List: ({ items, noBorder, highlightedIndex }: ListProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
589
591
|
|
|
590
592
|
type TableProps = {
|
|
591
593
|
columns: {
|
package/dist/index.esm.js
CHANGED
|
@@ -2234,7 +2234,7 @@ import{createSystem as e,defaultConfig as t,Button as n,Box as r,Spinner as i,Ic
|
|
|
2234
2234
|
&:disabled {
|
|
2235
2235
|
background-color: ${we("neutral",200)};
|
|
2236
2236
|
}
|
|
2237
|
-
`,vl=({id:e,label:t,caption:n,icon:i,value:a,variant:l="data",onItemClick:s,isExpanded:c=!1,ariaLabel:d,disabled:u=!1})=>{const
|
|
2237
|
+
`,vl=({id:e,label:t,caption:n,icon:i,value:a,variant:l="data",onItemClick:s,isExpanded:c=!1,ariaLabel:d,disabled:u=!1,isHighlighted:p=!1})=>{const h=("navigation"===l||"select"===l)&&!!s,f=h?L.button:L.div,g=d||("data"===l&&a?`${t}, ${a}`:t);return q(f,{id:e,css:["data"===l?fl:gl,p&&{backgroundColor:we("neutral",200)}],onClick:h?s:void 0,tabIndex:h?0:void 0,onKeyDown:e=>{h&&("Enter"!==e.key&&" "!==e.key||s?.())},role:h?"button":void 0,"aria-expanded":h?c:void 0,"aria-label":g,disabled:u,"aria-selected":p,children:[q(O,{gap:3,flex:"1",overflow:"hidden",children:[i,q(r,{flex:"1",minWidth:0,children:[G(R,{fontWeight:"data"===l?"400":"700",css:dl(u),children:t}),n&&G(R,{css:ul,children:n})]})]}),"data"===l&&a&&G(R,{css:pl,children:a}),"navigation"===l&&G(o,{as:De,boxSize:4,"aria-hidden":"true",css:hl(u)})]})},ml=({items:e,noBorder:t,highlightedIndex:n})=>G(r,{css:cl(t),children:e.map(((e,t)=>G(vl,{id:e.id,icon:e.icon,label:e.label,caption:e.caption,value:e.value,variant:e.variant??"data",onItemClick:e.onItemClick,isHighlighted:t===n},e.id??e.label)))}),xl=de`
|
|
2238
2238
|
svg {
|
|
2239
2239
|
path {
|
|
2240
2240
|
fill: ${we("primary",500)};
|
|
@@ -3317,7 +3317,7 @@ function Ph(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
|
|
|
3317
3317
|
opacity: 1;
|
|
3318
3318
|
}
|
|
3319
3319
|
}
|
|
3320
|
-
`,sv=(e,t)=>Math.max(0,e.findIndex((e=>e.value===t))),cv=e=>1===e?"none":2===e?"left":"right",dv=({variant:e="panel",defaultValue:t,tabs:n,onTabClick:i,activationMode:o="manual"})=>{const[a,l]=J(sv(n,t)||0),s="view"===e;return G("div",{css:rv(e),children:G(N.Root,{width:"full",defaultValue:t||n?.[0]?.value,onValueChange:({value:e})=>{return l(sv(n,t=e)),void(i&&i(t));var t},activationMode:o,children:G(N.List,{alignItems:"center",border:"none",children:n.map(((e,t)=>q(ce,{children:[s&&1===t&&"left"===cv(a)?G("div",{css:av}):null,G(N.Trigger,{css:[iv,s?lv:ov],"aria-label":e["aria-label"]||e.label,...e,children:q(r,{display:"flex",alignItems:"center",gap:"5px",children:[e.icon,e.label]})},e.label),s&&1===t&&"right"===cv(a)?G("div",{css:av}):null]},e.label)))})})})},uv=({text:e,query:t})=>{if(!t)return e;const n=new RegExp(`(${t})`,"ig"),r=e.split(n);return ue(he,{children:r.map((e=>n.test(e)?ue("strong",{children:e},e):ue("span",{children:e},e)))})},pv=({items:e,query:t,onSelect:n,highlightedIndex:i})=>{const o=Q(null);return ee((()=>{if(!o.current)return;const e=o.current.children[i];e&&e.scrollIntoView({block:"nearest"})}),[i]),ue(r,{padding:"8px",children:e.map(((e,a)=>ue(r,{ref:o,padding:"6px 8px",borderRadius:"md",cursor:"pointer",bg:a===i?"gray.100":void 0,_hover:{background:"gray.50"},onClick:()=>n(e.id||e.label),children:ue(uv,{text:e.label,query:t})},e.id)))})},hv=({placeholder:e,disabled:t,size:n="default",options:o=[],resultsMaxHeight:a="200px",isLoading:s=!1,displayResults:c="text",onSelect:d,onQueryChange:u,onClear:p,renderResults:h})=>{const[f,g]=J(""),{open:v,onOpen:m,onClose:x}=A(),[b,y]=J(o),[w,C]=J(-1),$=Q(null),k=`search-results-${te()}`,S=e=>{const t=o.find((t=>t.id===e||t.label===e));t&&(d?.(t),g(""),x())};ee((()=>{if(u?.(f),!f)return void y(o);const e=o.filter((e=>e.id?.toLowerCase().includes(f.toLowerCase())||e.label.toLowerCase().includes(f.toLowerCase())||e.caption?.toLowerCase().includes(f.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>S(e.id||e.label)})));y(e),m()}),[f]),ee((()=>{function e(e){v&&$.current&&!$.current.contains(e.target)&&x()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[v]);const E=f.length?G(gt,{style:{marginTop:"-12px"},onClick:()=>{g(""),p?.()}}):null,L="none"!==c&&!!f.length&&b.length>0&&v;return q("div",{ref:$,style:{position:"relative",width:"100%"},children:[G(z,{startElement:G(dt,{fill:t?we("neutral",500):we("primary",700),style:{marginTop:"-12px"}}),endElement:E,children:G(Vn,{autoComplete:"off",placeholder:e||"Filter",onChange:e=>{const{value:t}=e.target;g(t)},value:f,label:"",style:{paddingLeft:"40px"},type:"search","aria-label":e||"Search filter","aria-expanded":L,"aria-controls":k,role:"combobox","aria-autocomplete":"list",disabled:t,size:n,onKeyDown:e=>{if(L){if("ArrowDown"===e.key&&(e.preventDefault(),C((e=>Math.min(e+1,b.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),C((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),w>=0)){const e=b[w];S(e.id||e.label)}"Escape"===e.key&&x()}}})}),(L||s&&!!f.length)&&"custom"===c&&h&&!s&&h({items:b,highlightedIndex:w,query:f,onSelect:S}),(L||s&&!!f.length)&&G(l,{container:$,children:q(r,{position:"absolute",marginTop:"-20px",width:"100%",backgroundColor:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",boxShadow:"md",zIndex:1e3,overflowY:"auto",maxHeight:a,children:[s&&G(r,{padding:"1rem",children:G(i,{})}),"text"===c&&!s&&G(pv,{highlightedIndex:w,items:b,query:f,onSelect:S}),"list"===c&&!s&&G(ml,{items:b})]})})]})},fv={small:"16px",medium:"24px",large:"40px",default:"16px"};function gv(e,t,n,r){const i=function(e,t){return"string"==typeof t&&""!==t.trim()?t:e&&fv[e]?fv[e]:fv.default}(e,t),o=n?we("neutral",200):we("primary",300),a=r??o,l=r&&n?"opacity: 0.7;":"",s=we("neutral",n?400:800);return de`
|
|
3320
|
+
`,sv=(e,t)=>Math.max(0,e.findIndex((e=>e.value===t))),cv=e=>1===e?"none":2===e?"left":"right",dv=({variant:e="panel",defaultValue:t,tabs:n,onTabClick:i,activationMode:o="manual"})=>{const[a,l]=J(sv(n,t)||0),s="view"===e;return G("div",{css:rv(e),children:G(N.Root,{width:"full",defaultValue:t||n?.[0]?.value,onValueChange:({value:e})=>{return l(sv(n,t=e)),void(i&&i(t));var t},activationMode:o,children:G(N.List,{alignItems:"center",border:"none",children:n.map(((e,t)=>q(ce,{children:[s&&1===t&&"left"===cv(a)?G("div",{css:av}):null,G(N.Trigger,{css:[iv,s?lv:ov],"aria-label":e["aria-label"]||e.label,...e,children:q(r,{display:"flex",alignItems:"center",gap:"5px",children:[e.icon,e.label]})},e.label),s&&1===t&&"right"===cv(a)?G("div",{css:av}):null]},e.label)))})})})},uv=({text:e,query:t})=>{if(!t)return e;const n=new RegExp(`(${t})`,"ig"),r=e.split(n);return ue(he,{children:r.map((e=>n.test(e)?ue("strong",{children:e},e):ue("span",{children:e},e)))})},pv=({items:e,query:t,onSelect:n,highlightedIndex:i})=>{const o=Q(null);return ee((()=>{if(!o.current)return;const e=o.current.children[i];e&&e.scrollIntoView({block:"nearest"})}),[i]),ue(r,{padding:"8px",children:e.map(((e,a)=>ue(r,{ref:o,padding:"6px 8px",borderRadius:"md",cursor:"pointer",bg:a===i?"gray.100":void 0,_hover:{background:"gray.50"},onClick:()=>n(e.id||e.label),children:ue(uv,{text:e.label,query:t})},e.id)))})},hv=({placeholder:e,disabled:t,size:n="default",options:o=[],resultsMaxHeight:a="200px",isLoading:s=!1,displayResults:c="text",onSelect:d,onQueryChange:u,onClear:p,renderResults:h})=>{const[f,g]=J(""),{open:v,onOpen:m,onClose:x}=A(),[b,y]=J(o),[w,C]=J(-1),$=Q(null),k=`search-results-${te()}`,S=e=>{const t=o.find((t=>t.id===e||t.label===e));t&&(d?.(t),g(""),x())};ee((()=>{if(u?.(f),!f)return void y(o);const e=o.filter((e=>e.id?.toLowerCase().includes(f.toLowerCase())||e.label.toLowerCase().includes(f.toLowerCase())||e.caption?.toLowerCase().includes(f.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>S(e.id||e.label)})));y(e),m()}),[f]),ee((()=>{function e(e){v&&$.current&&!$.current.contains(e.target)&&x()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[v]);const E=f.length?G(gt,{style:{marginTop:"-12px"},onClick:()=>{g(""),p?.()}}):null,L="none"!==c&&!!f.length&&b.length>0&&v;return q("div",{ref:$,style:{position:"relative",width:"100%"},children:[G(z,{startElement:G(dt,{fill:t?we("neutral",500):we("primary",700),style:{marginTop:"-12px"}}),endElement:E,children:G(Vn,{autoComplete:"off",placeholder:e||"Filter",onChange:e=>{const{value:t}=e.target;g(t)},value:f,label:"",style:{paddingLeft:"40px"},type:"search","aria-label":e||"Search filter","aria-expanded":L,"aria-controls":k,role:"combobox","aria-autocomplete":"list",disabled:t,size:n,onKeyDown:e=>{if(L){if("ArrowDown"===e.key&&(e.preventDefault(),C((e=>Math.min(e+1,b.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),C((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),w>=0)){const e=b[w];S(e.id||e.label)}"Escape"===e.key&&x()}}})}),(L||s&&!!f.length)&&"custom"===c&&h&&!s&&h({items:b,highlightedIndex:w,query:f,onSelect:S}),(L||s&&!!f.length)&&G(l,{container:$,children:q(r,{position:"absolute",marginTop:"-20px",width:"100%",backgroundColor:"white",border:"1px solid",borderColor:"gray.200",borderRadius:"md",boxShadow:"md",zIndex:1e3,overflowY:"auto",maxHeight:a,children:[s&&G(r,{padding:"1rem",children:G(i,{})}),"text"===c&&!s&&G(pv,{highlightedIndex:w,items:b,query:f,onSelect:S}),"list"===c&&!s&&G(ml,{items:b,highlightedIndex:w})]})})]})},fv={small:"16px",medium:"24px",large:"40px",default:"16px"};function gv(e,t,n,r){const i=function(e,t){return"string"==typeof t&&""!==t.trim()?t:e&&fv[e]?fv[e]:fv.default}(e,t),o=n?we("neutral",200):we("primary",300),a=r??o,l=r&&n?"opacity: 0.7;":"",s=we("neutral",n?400:800);return de`
|
|
3321
3321
|
height: ${i};
|
|
3322
3322
|
width: ${i};
|
|
3323
3323
|
border-radius: 50%;
|