@worldresources/wri-design-systems 2.193.0 → 2.194.0

package/dist/index.cjs.js

@@ -2325,10 +2325,55 @@
     color: ${w("neutral",900)};
     font-weight: 700;
   }
-`,Tw=({totalItems:t,pageSize:n,currentPage:o,variant:i="default",onPageChange:s,labels:a})=>{const l=Mf("Pagination",a),c="compact"===i||"compact-with-buttons"===i,d="compact-with-buttons"===i;return r.jsx("div",{"aria-label":l.paginationLabel,children:r.jsx(e.Pagination.Root,{count:t,pageSize:n,defaultPage:o,onPageChange:e=>s&&s(e.page),siblingCount:1,children:r.jsxs(e.ButtonGroup,{gap:"2",size:"sm",variant:"ghost",css:Mw,children:[r.jsx(e.Pagination.PrevTrigger,{asChild:!0,children:d?r.jsx(jf,{variant:"secondary",label:l.previousLabel,size:"small",leftIcon:r.jsx(If,{style:{rotate:"90deg"},color:"var(--chakra-colors-primary-500)"})}):r.jsx(Of,{css:$w,style:{rotate:"90deg"},icon:r.jsx(If,{}),"aria-label":l.previousPageLabel})}),c?r.jsx(e.Pagination.PageText,{css:Ew}):r.jsx(e.Pagination.Items,{render:e=>r.jsx(Of,{css:jw,"aria-label":l.pageLabel(e.value),icon:r.jsx("p",{children:e.value})})}),r.jsx(e.Pagination.NextTrigger,{asChild:!0,children:d?r.jsx(jf,{variant:"secondary",label:l.nextLabel,size:"small",rightIcon:r.jsx(If,{style:{rotate:"270deg"},color:"var(--chakra-colors-primary-500)"})}):r.jsx(Of,{css:$w,style:{rotate:"270deg"},icon:r.jsx(If,{}),"aria-label":l.nextPageLabel})})]})})})},Ow=e=>i.css`
+`,Tw=({totalItems:t,pageSize:n,currentPage:o,variant:i="default",onPageChange:s,labels:a})=>{const l=Mf("Pagination",a),c="compact"===i||"compact-with-buttons"===i,d="compact-with-buttons"===i;return r.jsx("div",{"aria-label":l.paginationLabel,children:r.jsx(e.Pagination.Root,{count:t,pageSize:n,defaultPage:o,onPageChange:e=>s&&s(e.page),siblingCount:1,children:r.jsxs(e.ButtonGroup,{gap:"2",size:"sm",variant:"ghost",css:Mw,children:[r.jsx(e.Pagination.PrevTrigger,{asChild:!0,children:d?r.jsx(jf,{variant:"secondary",label:l.previousLabel,size:"small",leftIcon:r.jsx(If,{style:{rotate:"90deg"},color:"var(--chakra-colors-primary-500)"})}):r.jsx(Of,{css:$w,style:{rotate:"90deg"},icon:r.jsx(If,{}),"aria-label":l.previousPageLabel})}),c?r.jsx(e.Pagination.PageText,{css:Ew}):r.jsx(e.Pagination.Items,{render:e=>r.jsx(Of,{css:jw,"aria-label":l.pageLabel(e.value),icon:r.jsx("p",{children:e.value})})}),r.jsx(e.Pagination.NextTrigger,{asChild:!0,children:d?r.jsx(jf,{variant:"secondary",label:l.nextLabel,size:"small",rightIcon:r.jsx(If,{style:{rotate:"270deg"},color:"var(--chakra-colors-primary-500)"})}):r.jsx(Of,{css:$w,style:{rotate:"270deg"},icon:r.jsx(If,{}),"aria-label":l.nextPageLabel})})]})})})},Ow=(e,t)=>i.css`
   border: ${"full-width"===e?"none":`${E(100)} solid ${w("neutral",300)}`};
   border-radius: ${$(200)};
   box-shadow: ${"full-width"===e?"none":`0 0 0 0.0625rem ${w("neutral",300)}`};
+
+  [data-sticky] {
+    position: sticky;
+    background-color: ${w("neutral",100)};
+
+    &::after {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      top: 0;
+      bottom: -0.0625rem;
+      width: ${k(800)};
+    }
+  }
+
+  th[data-sticky] {
+    background-color: ${w("neutral","full-width"===e?100:200)};
+    z-index: ${t?4:2};
+    top: ${t?"0":"auto"};
+  }
+
+  thead {
+    z-index: ${t?3:"auto"};
+  }
+
+  [data-sticky='start']::after {
+    content: none;
+  }
+
+  [data-sticky-last='true']::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    bottom: -0.0625rem;
+    inset-inline-end: 0;
+    translate: 100% 0;
+    width: 0.0625rem;
+    background: ${w("neutral",400)};
+    box-shadow: 0.0625rem 0 0.125rem 0 rgba(0, 0, 0, 0.2);
+  }
+
+  [data-sticky-last='true'] {
+    border-inline-end: 0.0625rem solid ${w("neutral",400)};
+  }
 `,Lw=e=>i.css`
   tr {
     background-color: ${w("neutral","full-width"===e?100:200)};
@@ -2389,11 +2434,19 @@
 
     :hover {
       background-color: ${w("neutral",200)};
+
+      td[data-sticky] {
+        background-color: ${w("neutral",200)};
+      }
     }
 
     &.selected {
       background-color: ${w("primary",100)} !important;
       border-bottom: 0.125rem solid ${w("primary",700)} !important;
+
+      td[data-sticky] {
+        background-color: ${w("primary",100)};
+      }
     }
   }
 `,zw=e=>i.css`
@@ -3876,4 +3929,4 @@ function RM(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Obj
   border: ${E(100)} solid ${w("neutral",300)};
   border-radius: ${$(300)};
   ${s?`background: ${s};`:""}
-`)}):r.jsx("div",{css:aw,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:lw,children:t?.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:cw,children:e})},e)))}),n&&n.length?r.jsx("div",{css:lw,children:n.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:dw,style:{width:"100%"},children:e})},e)))}):null]});var s},exports.Search=({placeholder:t,disabled:o,size:i="default",options:s=[],resultsMaxHeight:a=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:h,onClear:p,renderResults:f,labels:m})=>{const g=Mf("Search",m),[v,b]=n.useState(""),{open:y,onOpen:x,onClose:C}=e.useDisclosure(),[k,S]=n.useState(s),[$,E]=n.useState(-1),[M,j]=n.useState(!1),T=n.useRef(null),O=`search-results-${n.useId()}`,L=e=>{const t=s.find((t=>t.id===e||t.label===e));t&&(d?.(t),b(""),C())};n.useEffect((()=>{if(h?.(v),!v)return void S(s);const e=s.filter((e=>e.id?.toLowerCase().includes(v.toLowerCase())||e.label.toLowerCase().includes(v.toLowerCase())||e.caption?.toLowerCase().includes(v.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>L(e.id||e.label)})));S(e),x()}),[v]),n.useEffect((()=>{function e(e){y&&T.current&&!T.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[y]);const A=v.length?r.jsx(Km,{onClick:()=>{b(""),p?.()}}):null,R="none"!==c&&!!v.length&&k.length>0&&y;let N=w("neutral",500);o?N=w("neutral",500):M&&(N=w("primary",700));const D="small"===i?"1rem":"1.25rem",I=u(a);return r.jsxs("div",{ref:T,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(hm,{width:D,height:D,fill:N}),endElement:A,children:r.jsx(iv,{autoComplete:"off",placeholder:t||g.filterPlaceholder,onChange:e=>{const{value:t}=e.target;b(t)},onFocus:()=>j(!0),onBlur:()=>j(!1),value:v,label:"",style:{paddingLeft:"2.5rem"},type:"search","aria-label":t||g.filterAriaLabel,"aria-expanded":R,"aria-controls":O,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),E((e=>Math.min(e+1,k.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),E((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=k[$];L(e.id||e.label)}"Escape"===e.key&&C()}}})}),(R||l&&!!v.length)&&"custom"===c&&f&&!l&&f({items:k,highlightedIndex:$,query:v,onSelect:L}),(R||l&&!!v.length)&&r.jsx(e.Portal,{container:T,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:I,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(cO,{highlightedIndex:$,items:k,query:v,onSelect:L}),"list"===c&&!l&&r.jsx(Sw,{items:k,highlightedIndex:$})]})})]})},exports.Select=Lv,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:s,minimizedHeight:a,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:h,zIndex:p=1e3})=>{const f=n.useRef(null),m=n.useRef([]),[g,v]=n.useState(null),b=window.innerWidth>768,y=m.current;let x="Expand sheet";if(null!=g){const e=hT(g,y);e>0&&e<y.length-1?x="Make full screen":e===y.length-1&&(x="Expanded sheet")}const w=!(null==g||!y.length||hT(g,y)!==y.length-1);return r.jsx(cT,{ref:f,css:uT(!!e,p),className:u,open:i,onDismiss:s,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":x,css:dT,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=y[y.length-1];if(b)return void f.current?.snapTo?.((()=>t));const n=g??y[0];let r=y.findIndex((e=>e>n));-1===r&&(r=y.length-1);const o=y[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,a||e,l+(o?n:0),c||t-t/6];return m.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=a||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:h,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="simple-pin"})=>t.jsx(ub,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Slider=Ig,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:s,onChange:a})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const s=i.min||0,a=i.max||100;o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>a?a:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const s=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?s:o;const e=l[0],n=l[1];0===t?(o=o<s?s:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),a&&a(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:Uv(o),"aria-label":e,children:[s?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:Kv(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:Gv,children:[i.step&&i.marks?r.jsx(Lv,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"5.625rem"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):r.jsx(iv,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(Ig,{css:{},...i,value:l,"aria-label":2===l?.length?[`${e} minimum`,`${e} maximum`]:[e],onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===l?.length?r.jsx(iv,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=Mf("StepProgressIndicator",n);return r.jsxs("div",{css:IO,children:[e.map(((e,n)=>r.jsxs("div",{css:PO,children:[r.jsx("button",{css:zO(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx(Rf,{height:"1rem",width:"1rem"}):n+1}),e.label?r.jsx("p",{css:VO(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:BO,children:r.jsx("div",{css:_O})})]})},exports.Switch=zg,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:s,activationMode:a="manual"})=>{const[l,c]=n.useState(sO(i,o)||0);return r.jsx("div",{css:eO(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(sO(i,t=e)),void(s&&s(t));var t},activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===aO(l)?r.jsx("div",{css:rO}):null,r.jsx(e.Tabs.Trigger,{css:[tO,"view"===t&&oO,"panel"===t&&nO,"transparent"===t&&iO],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===aO(l)?r.jsx("div",{css:rO}):null]},o.label)))})})})},exports.Table=({columns:t,data:o=[],renderRow:i,striped:s,stickyHeader:a,pagination:l,selectable:c,selectedRows:d,variant:u="default",onSortColumn:h,onPageSizeChange:p,onPageChange:f,onAllItemsSelected:m,loading:g,height:v,labels:b})=>{const y=Mf("Table",b),[x,C]=n.useState({key:"",order:""}),{totalItems:k=o.length,currentPage:S=1,pageSize:$=10,showItemCount:E,showItemCountText:M}=l||{},j=(e,t)=>{C({key:e,order:t}),h&&h({key:e,order:t})},T=d?.length===o?.length,O=d&&d.length>0&&!T;return r.jsxs("div",{children:[r.jsx("div",{css:v?zw(v):void 0,children:r.jsxs(e.Table.Root,{css:Ow(u),striped:s,stickyHeader:a,interactive:!0,children:[r.jsx(e.Table.Header,{css:Lw(u),children:r.jsxs(e.Table.Row,{children:[c?r.jsx(e.Table.ColumnHeader,{children:r.jsx(dg,{name:"header-checkbox","aria-label":"Select all rows",checked:T,indeterminate:O,onCheckedChange:({checked:e})=>{m&&m(e)}})}):null,t.map((t=>r.jsx(e.Table.ColumnHeader,{role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===x.order?"ascending":t.sortable&&"desc"===x.order?"descending":void 0,children:r.jsxs("div",{css:Aw,children:[t.label,t.sortable?r.jsxs("div",{css:Rw,children:[r.jsx(Of,{css:Nw(x.key===t.key&&"asc"===x.order),icon:r.jsx(If,{style:{transform:"rotate(180deg)"}}),onClick:()=>j(t.key,"asc"),"aria-label":y.ascendingLabel}),r.jsx(Of,{css:Nw(x.key===t.key&&"desc"===x.order),icon:r.jsx(If,{}),onClick:()=>j(t.key,"desc"),"aria-label":y.descendingLabel})]}):null]})},t.key)))]})}),r.jsx(e.Table.Body,{css:Pw,children:o.map((e=>r.jsx(n.Fragment,{children:i(e,{className:d?.some((t=>t.id===e.id))?"selected":void 0})},e.id)))})]})}),g?r.jsx("div",{css:Vw,children:r.jsx(e.Spinner,{size:"lg",color:w("primary",500)})}):null,r.jsxs("div",{css:Dw,children:[r.jsx("div",{children:E?r.jsx(mw,{pageSize:$,currentPage:S,totalItems:k,onPageSizeChange:p,showItemCountText:M}):null}),l?r.jsx("div",{css:Iw,children:r.jsx(Tw,{totalItems:k,pageSize:$,currentPage:S,onPageChange:f})}):null]})]})},exports.TableCell=_w,exports.TableRow=Bw,exports.Tag=jv,exports.TextInput=iv,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:s,required:a,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:h,maxLength:p,labels:f,...m})=>{const g=Mf("Textarea",f),[v,b]=n.useState(d),[y,x]=n.useState(!1),[w,C]=n.useState(!1),[k,S]=n.useState(""),$=n.useId(),E=n.useId(),M=n.useId();n.useEffect((()=>{const{length:e}=d;h&&e<h&&e>0?(x(e<h),C(!1),S(g.enterAtLeastChars(h-e))):h&&0===e&&S(g.minChars(h)),p&&e>0?(x(!1),C(e>p),S(g.charsRemaining(p-e))):p&&0===e&&S(g.maxChars(p))}),[]);const j=!!s||y||w,T=[o?$:null,j?E:null,k?M:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:Zv(c),children:[j?r.jsx("div",{css:Jv}):null,r.jsxs(e.Field.Root,{required:a,invalid:j,gap:"0",style:{marginLeft:j?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:Xv(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":g.requiredSymbolLabel}),t,a?"":r.jsx("span",{children:g.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:$,css:Yv(c,l),children:o}):null,s?r.jsx(e.Field.ErrorText,{id:E,css:eb,"aria-label":`${g.errorPrefix} ${s}`,"aria-live":"polite",children:s}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:tb(c,v,d),onChange:e=>{b(e.target.value);const{length:t}=e.target.value;h&&p?(x(t<h),C(t>p),S(g.charsRemaining(p-t))):h?(x(t<h),C(!1),S(t<h?g.enterAtLeastChars(h-t):"")):p&&(C(t>p),x(!1),S(g.charsRemaining(p-t))),u&&u(e)},value:v,"aria-label":t||i,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...m}),y&&h?r.jsx(e.Field.ErrorText,{id:E,css:eb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.needMoreChars(h-v.length)}):null,w&&p?r.jsx(e.Field.ErrorText,{id:E,css:eb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.tooManyChars(v.length-p)}):null,!k||w||y?null:r.jsx(e.Field.HelperText,{id:M,css:Qv,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=Mf("Toast",t);return Object.keys(GO).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:GO[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:HO,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Df,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"0.1875rem",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Hf,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Ff,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(qf,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:FO,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:qO,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(jf,{css:WO,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),GO[t].dismiss()}}):null,o.meta?.closable?r.jsx(jf,{css:UO,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(zf,{height:"0.625rem!",width:"0.625rem!"}),size:"small",variant:"secondary",onClick:()=>{o.meta?.onClose&&o.meta.onClose(),GO[t].dismiss()}}):null]}):null]})})},t)))},exports.Toolbar=Ym,exports.Tooltip=$m,exports.designSystemStyles=x,exports.designSystemStylesForTailwind=y,exports.getThemedBorderWidth=E,exports.getThemedColor=w,exports.getThemedFontSize=C,exports.getThemedLineHeight=S,exports.getThemedRadius=$,exports.getThemedSpacing=k,exports.showToast=e=>{GO[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel,onClose:e.onClose},...e})};
+`)}):r.jsx("div",{css:aw,children:e?.map(((e,n)=>r.jsx("div",{"data-test":`${e}-${t?.[n]}`,style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${t?.[n]}`)))}),r.jsx("div",{css:lw,children:t?.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:cw,children:e})},e)))}),n&&n.length?r.jsx("div",{css:lw,children:n.map((e=>r.jsx("div",{style:{width:o?"auto":`calc(100% / ${t.length})`,display:"flex",justifyContent:"center"},children:r.jsx("p",{css:dw,style:{width:"100%"},children:e})},e)))}):null]});var s},exports.Search=({placeholder:t,disabled:o,size:i="default",options:s=[],resultsMaxHeight:a=50,isLoading:l=!1,displayResults:c="text",onSelect:d,onQueryChange:h,onClear:p,renderResults:f,labels:m})=>{const g=Mf("Search",m),[v,b]=n.useState(""),{open:y,onOpen:x,onClose:C}=e.useDisclosure(),[k,S]=n.useState(s),[$,E]=n.useState(-1),[M,j]=n.useState(!1),T=n.useRef(null),O=`search-results-${n.useId()}`,L=e=>{const t=s.find((t=>t.id===e||t.label===e));t&&(d?.(t),b(""),C())};n.useEffect((()=>{if(h?.(v),!v)return void S(s);const e=s.filter((e=>e.id?.toLowerCase().includes(v.toLowerCase())||e.label.toLowerCase().includes(v.toLowerCase())||e.caption?.toLowerCase().includes(v.toLowerCase()))).map((e=>({id:e.id,label:e.label,caption:e.caption,variant:"select",icon:e.icon,onItemClick:()=>L(e.id||e.label)})));S(e),x()}),[v]),n.useEffect((()=>{function e(e){y&&T.current&&!T.current.contains(e.target)&&C()}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[y]);const A=v.length?r.jsx(Km,{onClick:()=>{b(""),p?.()}}):null,R="none"!==c&&!!v.length&&k.length>0&&y;let N=w("neutral",500);o?N=w("neutral",500):M&&(N=w("primary",700));const D="small"===i?"1rem":"1.25rem",I=u(a);return r.jsxs("div",{ref:T,style:{position:"relative",width:"100%"},children:[r.jsx(e.InputGroup,{startElement:r.jsx(hm,{width:D,height:D,fill:N}),endElement:A,children:r.jsx(iv,{autoComplete:"off",placeholder:t||g.filterPlaceholder,onChange:e=>{const{value:t}=e.target;b(t)},onFocus:()=>j(!0),onBlur:()=>j(!1),value:v,label:"",style:{paddingLeft:"2.5rem"},type:"search","aria-label":t||g.filterAriaLabel,"aria-expanded":R,"aria-controls":O,role:"combobox","aria-autocomplete":"list",disabled:o,size:i,noMarginBottom:!0,onKeyDown:e=>{if(R){if("ArrowDown"===e.key&&(e.preventDefault(),E((e=>Math.min(e+1,k.length-1)))),"ArrowUp"===e.key&&(e.preventDefault(),E((e=>Math.max(e-1,0)))),"Enter"===e.key&&(e.preventDefault(),$>=0)){const e=k[$];L(e.id||e.label)}"Escape"===e.key&&C()}}})}),(R||l&&!!v.length)&&"custom"===c&&f&&!l&&f({items:k,highlightedIndex:$,query:v,onSelect:L}),(R||l&&!!v.length)&&r.jsx(e.Portal,{container:T,children:r.jsxs(e.Box,{position:"absolute",width:"100%",backgroundColor:"white",border:"custom"===c?"none":"0.0625rem solid",borderColor:"gray.200",borderRadius:"md",zIndex:1e3,overflowY:"auto",maxHeight:I,children:[l&&r.jsx(e.Box,{padding:"1rem",children:r.jsx(e.Spinner,{})}),"text"===c&&!l&&r.jsx(cO,{highlightedIndex:$,items:k,query:v,onSelect:L}),"list"===c&&!l&&r.jsx(Sw,{items:k,highlightedIndex:$})]})})]})},exports.Select=Lv,exports.Sheet=({header:e,content:t,footer:o,open:i=!1,onClose:s,minimizedHeight:a,midHeight:l=200,maxFullHeight:c,defaultSnap:d="minimized",className:u,blocking:h,zIndex:p=1e3})=>{const f=n.useRef(null),m=n.useRef([]),[g,v]=n.useState(null),b=window.innerWidth>768,y=m.current;let x="Expand sheet";if(null!=g){const e=hT(g,y);e>0&&e<y.length-1?x="Make full screen":e===y.length-1&&(x="Expanded sheet")}const w=!(null==g||!y.length||hT(g,y)!==y.length-1);return r.jsx(cT,{ref:f,css:uT(!!e,p),className:u,open:i,onDismiss:s,header:r.jsxs("div",{children:[r.jsx("button",{type:"button",disabled:w,"aria-label":x,css:dT,onKeyDown:e=>{if("Enter"!==e.key&&" "!==e.key)return;e.preventDefault();const t=y[y.length-1];if(b)return void f.current?.snapTo?.((()=>t));const n=g??y[0];let r=y.findIndex((e=>e>n));-1===r&&(r=y.length-1);const o=y[r];f.current?.snapTo?.((()=>o))},children:r.jsx("div",{})}),r.jsx("span",{"aria-live":"polite",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0 0 0 0)"},children:x}),e]}),footer:o,snapPoints:({headerHeight:e,maxHeight:t,footerHeight:n})=>{const r=[20,a||e,l+(o?n:0),c||t-t/6];return m.current=r,r},onSpringEnd:()=>{const e=f.current?.height;e&&v(e)},defaultSnap:({headerHeight:e,maxHeight:t,footerHeight:n})=>{let r=20;return"minimized"===d?r=a||e:"mid"===d?r=l+(o?n:0):"full"===d&&(r=c||t-t/6),r},blocking:h,children:i?t:null})},exports.SimpleMapPin=({onClick:e,triggerRef:n,showFocusState:r,count:o,mode:i,variant:s="simple-pin"})=>t.jsx(ub,{count:o,mode:i,onClick:e,ref:n,showFocusState:r,variant:s}),exports.Slider=Ig,exports.SliderInput=({label:e,caption:t,size:o="default",sliderItem:i,required:s,onChange:a})=>{const[l,c]=n.useState(i.value||[]),d=(e,t)=>{const n=e.target.value,r=[...l];let o=n?parseInt(n,10):n;const s=i.min||0,a=i.max||100;o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>a?a:o,r[t]=o,c(r)},u=(e,t)=>{const n=e.target.value||"0",r=[...l];let o=parseInt(n,10);const s=i.min||0,d=i.max||100;if(o=Number.isNaN(o)?s:o,o=o<s?s:o,o=o>d?d:o,2===l?.length){o=Number.isNaN(o)?s:o;const e=l[0],n=l[1];0===t?(o=o<s?s:o,o=o>n?n:o):1===t&&(o=o<e?e:o,o=o>d?d:o)}r[t]=o,c(r),a&&a(r)};return r.jsxs("div",{children:[r.jsxs("p",{css:Uv(o),"aria-label":e,children:[s?r.jsx("span",{children:"*"}):null,e]}),t?r.jsx("p",{css:Kv(o),"aria-label":t,children:t}):null,r.jsxs("div",{css:Gv,children:[i.step&&i.marks?r.jsx(Lv,{items:i.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"5.625rem"},value:[`${l?.[0]}`],onChange:e=>{const t=e.map((e=>parseInt(e,10)));c(t),a&&a(t)}}):r.jsx(iv,{"aria-label":e,min:i.min,max:i.max,value:l?.[0],type:"number",onChange:e=>d(e,0),onBlur:e=>u(e,0),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}),r.jsx(Ig,{css:{},...i,value:l,"aria-label":2===l?.length?[`${e} minimum`,`${e} maximum`]:[e],onValueChangeEnd:e=>{c(e.value),a&&a(e.value)}}),2===l?.length?r.jsx(iv,{"aria-label":e,min:i.min,max:i.max,value:l?.[1],type:"number",onChange:e=>d(e,1),onBlur:e=>u(e,1),className:"ds-opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},exports.StepProgressIndicator=({steps:e,currentStep:t,labels:n})=>{const o=Mf("StepProgressIndicator",n);return r.jsxs("div",{css:IO,children:[e.map(((e,n)=>r.jsxs("div",{css:PO,children:[r.jsx("button",{css:zO(t>=n+1,t<n+1),type:"button",onClick:e.onClick,"aria-current":t===n+1,"aria-disabled":t<n+1,disabled:t<n+1,"aria-label":o.currentStepLabel(n+1,e.label||"",t>n+1),"data-active":t>=n+1,children:t>n+1?r.jsx(Rf,{height:"1rem",width:"1rem"}):n+1}),e.label?r.jsx("p",{css:VO(t===n+1),children:e.label}):null]},`${e.label}-${n}`))),r.jsx("div",{css:BO,children:r.jsx("div",{css:_O})})]})},exports.Switch=zg,exports.TabBar=({variant:t="panel",defaultValue:o,tabs:i,onTabClick:s,activationMode:a="manual"})=>{const[l,c]=n.useState(sO(i,o)||0);return r.jsx("div",{css:eO(t),children:r.jsx(e.Tabs.Root,{width:"full",defaultValue:o||i?.[0]?.value,onValueChange:({value:e})=>{return c(sO(i,t=e)),void(s&&s(t));var t},activationMode:a,children:r.jsx(e.Tabs.List,{alignItems:"center",border:"none",children:i.map(((o,i)=>r.jsxs(n.Fragment,{children:["view"===t&&1===i&&"left"===aO(l)?r.jsx("div",{css:rO}):null,r.jsx(e.Tabs.Trigger,{css:[tO,"view"===t&&oO,"panel"===t&&nO,"transparent"===t&&iO],"aria-label":o["aria-label"]||o.label,...o,children:r.jsxs(e.Box,{display:"flex",alignItems:"center",gap:"0.3125rem",children:[o.icon,o.label]})},o.label),"view"===t&&1===i&&"right"===aO(l)?r.jsx("div",{css:rO}):null]},o.label)))})})})},exports.Table=({columns:t,data:o=[],renderRow:i,striped:s,stickyHeader:a,pagination:l,selectable:c,selectedRows:d,variant:u="default",onSortColumn:h,onPageSizeChange:p,onPageChange:f,onAllItemsSelected:m,loading:g,height:v,labels:b})=>{const y=Mf("Table",b),[x,C]=n.useState({key:"",order:""}),k=n.useRef({}),[S,$]=n.useState({}),{totalItems:E=o.length,currentPage:M=1,pageSize:j=10,showItemCount:T,showItemCountText:O}=l||{},L=(e,t)=>{C({key:e,order:t}),h&&h({key:e,order:t})},A=d?.length===o?.length,R=d&&d.length>0&&!A,N=n.useMemo((()=>t.reduce(((e,t)=>(e[t.key]=t,e)),{})),[t]),D=t.filter((e=>e.sticky)).map((e=>e.key)),I=D.length>0?D[D.length-1]:void 0,P=n.useCallback((()=>{const e={};let n=0;t.filter((e=>e.sticky)).forEach((t=>{e[t.key]=n,n+=k.current[t.key]?.offsetWidth||0})),$(e)}),[t]);n.useEffect((()=>{P()}),[P,o.length]),n.useEffect((()=>{const e=()=>{P()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[P]);const z=e=>{const t=N[e]?.width;return t?{width:t,minWidth:t}:{}},V=e=>{const t=S[e.key];return void 0===t?{}:{"data-sticky":"start","data-sticky-last":e.key===I?"true":void 0,left:`${t}px`}},B=e=>{const t=z(e),n=S[e];return void 0===n?t:{...t,"data-sticky":"start","data-sticky-last":e===I?"true":void 0,left:`${n}px`}};return r.jsxs("div",{children:[r.jsx("div",{css:v?zw(v):void 0,children:r.jsxs(e.Table.Root,{css:Ow(u,a),striped:s,stickyHeader:a,interactive:!0,children:[r.jsx(e.Table.Header,{css:Lw(u),children:r.jsxs(e.Table.Row,{children:[c?r.jsx(e.Table.ColumnHeader,{children:r.jsx(dg,{name:"header-checkbox","aria-label":"Select all rows",checked:A,indeterminate:R,onCheckedChange:({checked:e})=>{m&&m(e)}})}):null,t.map((t=>r.jsx(e.Table.ColumnHeader,{ref:e=>{k.current[t.key]=e},...z(t.key),role:t.sortable?"columnheader":void 0,"aria-sort":t.sortable&&"asc"===x.order?"ascending":t.sortable&&"desc"===x.order?"descending":void 0,...V(t),children:r.jsxs("div",{css:Aw,children:[t.label,t.sortable?r.jsxs("div",{css:Rw,children:[r.jsx(Of,{css:Nw(x.key===t.key&&"asc"===x.order),icon:r.jsx(If,{style:{transform:"rotate(180deg)"}}),onClick:()=>L(t.key,"asc"),"aria-label":y.ascendingLabel}),r.jsx(Of,{css:Nw(x.key===t.key&&"desc"===x.order),icon:r.jsx(If,{}),onClick:()=>L(t.key,"desc"),"aria-label":y.descendingLabel})]}):null]})},t.key)))]})}),r.jsx(e.Table.Body,{css:Pw,children:o.map((e=>r.jsx(n.Fragment,{children:i(e,{className:d?.some((t=>t.id===e.id))?"selected":void 0,getCellProps:B})},e.id)))})]})}),g?r.jsx("div",{css:Vw,children:r.jsx(e.Spinner,{size:"lg",color:w("primary",500)})}):null,r.jsxs("div",{css:Dw,children:[r.jsx("div",{children:T?r.jsx(mw,{pageSize:j,currentPage:M,totalItems:E,onPageSizeChange:p,showItemCountText:O}):null}),l?r.jsx("div",{css:Iw,children:r.jsx(Tw,{totalItems:E,pageSize:j,currentPage:M,onPageChange:f})}):null]})]})},exports.TableCell=_w,exports.TableRow=Bw,exports.Tag=jv,exports.TextInput=iv,exports.Textarea=({label:t,caption:o,placeholder:i,errorMessage:s,required:a,disabled:l,size:c="default",defaultValue:d="",onChange:u,minLength:h,maxLength:p,labels:f,...m})=>{const g=Mf("Textarea",f),[v,b]=n.useState(d),[y,x]=n.useState(!1),[w,C]=n.useState(!1),[k,S]=n.useState(""),$=n.useId(),E=n.useId(),M=n.useId();n.useEffect((()=>{const{length:e}=d;h&&e<h&&e>0?(x(e<h),C(!1),S(g.enterAtLeastChars(h-e))):h&&0===e&&S(g.minChars(h)),p&&e>0?(x(!1),C(e>p),S(g.charsRemaining(p-e))):p&&0===e&&S(g.maxChars(p))}),[]);const j=!!s||y||w,T=[o?$:null,j?E:null,k?M:null].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{css:Zv(c),children:[j?r.jsx("div",{css:Jv}):null,r.jsxs(e.Field.Root,{required:a,invalid:j,gap:"0",style:{marginLeft:j?"1.1875rem":"0px"},children:[t?r.jsxs(e.Field.Label,{css:Xv(c,l),"aria-label":t,children:[r.jsx(e.Field.RequiredIndicator,{"aria-label":g.requiredSymbolLabel}),t,a?"":r.jsx("span",{children:g.optionalSuffix})]}):null,o?r.jsx(e.Field.HelperText,{id:$,css:Yv(c,l),children:o}):null,s?r.jsx(e.Field.ErrorText,{id:E,css:eb,"aria-label":`${g.errorPrefix} ${s}`,"aria-live":"polite",children:s}):null,r.jsx(e.Textarea,{placeholder:i,disabled:l,css:tb(c,v,d),onChange:e=>{b(e.target.value);const{length:t}=e.target.value;h&&p?(x(t<h),C(t>p),S(g.charsRemaining(p-t))):h?(x(t<h),C(!1),S(t<h?g.enterAtLeastChars(h-t):"")):p&&(C(t>p),x(!1),S(g.charsRemaining(p-t))),u&&u(e)},value:v,"aria-label":t||i,"aria-describedby":T,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...m}),y&&h?r.jsx(e.Field.ErrorText,{id:E,css:eb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.needMoreChars(h-v.length)}):null,w&&p?r.jsx(e.Field.ErrorText,{id:E,css:eb,style:{marginTop:"0.5rem",fontSize:"0.75rem",lineHeight:"1rem"},"aria-live":"polite",children:g.tooManyChars(v.length-p)}):null,!k||w||y?null:r.jsx(e.Field.HelperText,{id:M,css:Qv,"aria-live":"polite",children:k})]})]})},exports.Toast=({labels:t})=>{const n=Mf("Toast",t);return Object.keys(GO).map((t=>r.jsx(e.Portal,{children:r.jsx(e.Toaster,{toaster:GO[t],insetInline:{mdDown:"4"},children:o=>r.jsxs(e.Toast.Root,{css:HO,width:{md:"sm"},children:[r.jsxs(e.Stack,{flexDirection:"row",className:"ds-toast-icon-container",children:["info"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Df,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===o.type?r.jsx(e.Spinner,{size:"lg",borderWidth:"0.1875rem",color:"var(--chakra-colors-primary-500)"}):null,"success"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Hf,{color:"var(--chakra-colors-success-500)"}):null,"warning"===o.type?o.meta?.icon?o.meta.icon:r.jsx(Ff,{color:"var(--chakra-colors-warning-500)"}):null,"error"===o.type?o.meta?.icon?o.meta.icon:r.jsx(qf,{color:"var(--chakra-colors-error-500)"}):null,r.jsxs(e.Stack,{gap:"1",flex:"1",maxWidth:"100%",children:[r.jsx(e.Toast.Title,{css:FO,"aria-label":`${o.title}`,children:o.title}),o.description?r.jsx(e.Toast.Title,{css:qO,"aria-label":`${o.description}`,children:o.description}):null]})]}),o.action||o.meta?.closable?r.jsxs(e.Stack,{flexDirection:"row",children:[o.action?r.jsx(jf,{css:WO,label:o.action.label,size:"small",variant:"info"===o.type?"primary":"secondary",onClick:()=>{o?.action?.onClick&&o.action.onClick(),GO[t].dismiss()}}):null,o.meta?.closable?r.jsx(jf,{css:UO,label:o.meta.closableLabel,"aria-label":o.meta?.closableLabel||n.dismissLabel,leftIcon:r.jsx(zf,{height:"0.625rem!",width:"0.625rem!"}),size:"small",variant:"secondary",onClick:()=>{o.meta?.onClose&&o.meta.onClose(),GO[t].dismiss()}}):null]}):null]})})},t)))},exports.Toolbar=Ym,exports.Tooltip=$m,exports.designSystemStyles=x,exports.designSystemStylesForTailwind=y,exports.getThemedBorderWidth=E,exports.getThemedColor=w,exports.getThemedFontSize=C,exports.getThemedLineHeight=S,exports.getThemedRadius=$,exports.getThemedSpacing=k,exports.showToast=e=>{GO[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel,onClose:e.onClose},...e})};

package/dist/index.d.ts

@@ -1224,14 +1224,22 @@ interface ListProps {
 
 declare const List: ({ items, noBorder, highlightedIndex }: ListProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type TableColumn = {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    /** When true, this column sticks to the left during horizontal scroll. */
+    sticky?: boolean;
+};
+type TableRenderRowContext = {
+    className?: string;
+    getCellProps: (columnKey: string) => Record<string, any>;
+};
 type TableProps = {
-    columns: {
-        key: string;
-        label: string;
-        sortable?: boolean;
-    }[];
+    columns: TableColumn[];
     data?: any;
-    renderRow: any;
+    renderRow: (row: any, context?: TableRenderRowContext) => ReactNode;
     striped?: boolean;
     stickyHeader?: boolean;
     selectable?: boolean;