@infinityfx/fluid/dist/components/display/table.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{combineClasses as l,classes as o}from"../../core/utils.js";import{useState as c}from"react";import a from"../feedback/halo.js";import t from"../layout/scrollarea.js";import i from"../input/button.js";import n from"../input/checkbox.js";import s from"./action-menu/index.js";import{createStyles as d}from"../../core/style.js";import{Icon as m}from"../../core/icons.js";const p=d("table",{".table":{backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-sml)",border:"solid 1px var(--f-clr-fg-200)",display:"flex"},".rows":{minWidth:"max-content",display:"flex",flexDirection:"column",flexGrow:1},".row":{position:"relative",display:"grid",gridAutoFlow:"column",alignItems:"center",padding:".6em",gap:"var(--f-spacing-sml)",color:"var(--f-clr-text-100)"},".row:not(:last-child)":{borderBottom:"solid 1px var(--f-clr-fg-200)"},".row > *:not(.collapsed)":{whiteSpace:"nowrap"},'.row > [role="gridcell"]':{paddingInline:".4rem"},".collapsed":{minWidth:"2rem",display:"flex"},".header":{fontSize:".9em",fontWeight:700,background:"var(--f-clr-fg-200)"},".label":{position:"relative",borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-700)",display:"flex",alignItems:"center",gap:"var(--f-spacing-xxs)",width:"max-content",padding:".2rem .4rem",border:"none",background:"none",outline:"none"},".label:enabled":{cursor:"pointer"},".row .checkbox":{borderColor:"var(--f-clr-grey-300)"},".row .checkmark":{stroke:"var(--f-clr-text-200)"},".empty":{alignSelf:"center",marginBlock:"auto",padding:".6em",color:"var(--f-clr-grey-700)",fontWeight:600}});function h({cc:d={},data:h,columns:f,selectable:g,sortable:u,selected:b,onSelect:v,columnFormatters:x={},rowActions:k,emptyMessage:y="Nothing to display",...w}){const N=l(p,d),[j,C]=c(""),[A,z]=c("nil"),[S,W]=void 0!==b?[b]:c([]);function I(e){W?.(e),v?.(e)}const R="nil"!==A?h.slice().sort(((e,r)=>r[j]<e[j]?"asc"===A?1:-1:r[j]>e[j]?"asc"===A?-1:1:0)):h,T=`${g?"auto":""} repeat(${f.length}, 1fr) ${k?"auto":""}`;return e(t,{...w,role:"grid",horizontal:!0,behavior:"shift",className:o(N.table,w.className),"data-fb":!0,children:r("div",{role:"rowgroup",className:N.rows,children:[r("div",{role:"row",className:o(N.row,N.header),style:{gridTemplateColumns:T},children:[g&&e("div",{className:N.collapsed,children:e(n,{size:"xsm",color:"var(--f-clr-text-100)",cc:{checkbox:N.checkbox,checkmark:N.checkmark},intermediate:S.length!==R.length,checked:!!S.length,onChange:e=>{if(!e.target.checked)return I([]);I(new Array(R.length).fill(0).map(((e,r)=>r)))}})}),f.map(((l,o)=>{const c=Array.isArray(u)?u.includes(l):u;return e("div",{role:"columnheader",children:e(a,{disabled:!c,children:r("button",{className:N.label,type:"button",disabled:!c,onClick:()=>{C(l),z(j!==l||"nil"===A?"asc":"asc"===A?"dsc":"nil")},children:[l,(j!==l||"nil"===A)&&c&&e(m,{type:"sort"}),j===l&&"asc"===A&&e(m,{type:"sortAscend"}),j===l&&"dsc"===A&&e(m,{type:"sortDescend"})]})})},o)})),k?e("div",{className:N.collapsed}):null]}),R.map(((l,o)=>e(a,{disabled:!g,children:r("div",{role:"row",className:N.row,style:{gridTemplateColumns:T},children:[g&&e("div",{className:N.collapsed,children:e(n,{size:"xsm",color:"var(--f-clr-text-100)",cc:{checkbox:N.checkbox,checkmark:N.checkmark},checked:S.includes(o),onChange:e=>{const r=S.slice();e.target.checked?r.push(o):r.splice(r.indexOf(o),1),I(r)}})}),f.map(((r,o)=>{const c=x[r]||(e=>e.toString());return e("div",{role:"gridcell",children:c(l[r])},o)})),k?.length?e("div",{className:N.collapsed,children:r(s.Root,{children:[e(s.Trigger,{children:e(i,{compact:!0,variant:"minimal",size:"sml",style:{marginLeft:"auto"},children:e(m,{type:"more"})})}),e(s.Menu,{children:k(R[o],o)})]})}):null]})},o))),!R.length&&e("div",{className:N.empty,children:y})]})})}export{h as default};
//# sourceMappingURL=table.js.map