@scattered-light/loomiere-base-ui 0.13.0 → 0.14.0

package/dist/design-system/components/DataTable/preview.html

@@ -468,7 +468,7 @@ Unable to find an `+(n===!1?"accessible ":"")+'element with the role "'+t+'"'+l+
 `)),i+=d+n[l+1]}),i}var H9=U9,Ec=xa({...zE},{intercept:(e,t)=>t[0]==="fireEvent"||e.startsWith("find")||e.startsWith("waitFor")});Ec.screen=new Proxy(Ec.screen,{get(e,t,r){return we.warn(H9`
           You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
           More info: https://storybook.js.org/docs/essentials/interactions
-        `),Reflect.get(e,t,r)}});var{buildQueries:CV,configure:SV,createEvent:AV,fireEvent:TV,findAllByAltText:PV,findAllByDisplayValue:OV,findAllByLabelText:qV,findAllByPlaceholderText:xV,findAllByRole:MV,findAllByTestId:NV,findAllByText:jV,findAllByTitle:IV,findByAltText:DV,findByDisplayValue:FV,findByLabelText:LV,findByPlaceholderText:BV,findByRole:kV,findByTestId:$V,findByText:UV,findByTitle:HV,getAllByAltText:VV,getAllByDisplayValue:zV,getAllByLabelText:GV,getAllByPlaceholderText:YV,getAllByRole:WV,getAllByTestId:KV,getAllByText:XV,getAllByTitle:JV,getByAltText:QV,getByDisplayValue:ZV,getByLabelText:e8,getByPlaceholderText:t8,getByRole:r8,getByTestId:n8,getByText:o8,getByTitle:a8,getConfig:i8,getDefaultNormalizer:s8,getElementError:l8,getNodeText:u8,getQueriesForElement:c8,getRoles:d8,getSuggestedQuery:p8,isInaccessible:f8,logDOM:m8,logRoles:h8,prettyDOM:y8,queries:b8,queryAllByAltText:g8,queryAllByAttribute:v8,queryAllByDisplayValue:E8,queryAllByLabelText:_8,queryAllByPlaceholderText:R8,queryAllByRole:w8,queryAllByTestId:C8,queryAllByText:S8,queryAllByTitle:A8,queryByAltText:T8,queryByAttribute:P8,queryByDisplayValue:O8,queryByLabelText:q8,queryByPlaceholderText:x8,queryByRole:M8,queryByTestId:N8,queryByText:j8,queryByTitle:I8,queryHelpers:D8,screen:F8,waitFor:L8,waitForElementToBeRemoved:B8,within:wt,prettyFormat:k8}=Ec,{userEvent:st}=xa({userEvent:$9},{intercept:!0}),{expect:Be}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},_c=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=_c(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=_c(o,t,n));return e}return e},z9=({initialArgs:e})=>{_c(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=wt(e.canvasElement))};De.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];De.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Xd=rn(zd(),1),Wn=rn(Gd(),1),Xe=rn(Yd(),1);var rR=rn(zd(),1),Xo=rn(Gd(),1),Nt=rn(Yd(),1);var Ui=window.React;function Q(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Z_=Ui.Fragment;var eR=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],tR=["Chase","Visitor fee","Camp store","Unassigned"],Jo=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:tR[t%tR.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:eR[t%eR.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),Y9=(0,Nt.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>Q(Xo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function Oe({rows:e=Jo,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y,totalStyle:b}){let v=(0,rR.useMemo)(()=>Y9,[]),C=(0,Nt.useCollection)({rows:e,columns:v,getRowId:S=>S.id,pageSize:t,initialSort:{id:"date",desc:!0},initialFilters:g??{status:"for_review"},canSelect:r,groupBy:n,getSubRows:h});return Q("div",{children:[Q(Nt.CollectionToolbar,{collection:C,searchLabel:"Find fee",showSort:o,actions:Q(Xo.Button,{emphasis:"standard",children:"Add fee"}),bulkActions:Q(Xo.Button,{emphasis:"standard",children:"Post selected"})}),Q(Nt.DataTable,{collection:C,label:"Park fees",onRowActivate:m,getRowHref:y,activeRowId:d,rowActions:p,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,totalStyle:b}),t?Q(Nt.CollectionPagination,{page:C.page,pageCount:C.pageCount,pageSize:C.pageSize,total:C.filteredCount,filtered:C.isFiltered,label:"Park fees",onPageChange:C.setPage}):null]})}async function Wd({canvasElement:e}){let t=wt(e),r=t.getByRole("searchbox",{name:"Find fee"});await Be(t.queryByRole("button",{name:"Clear search"})).toBeNull(),r.focus(),await st.keyboard("zzz"),await Be(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters");let n=await t.findByRole("button",{name:"Clear search"});await st.tab(),await Be(n).toHaveFocus(),await st.keyboard("{Enter}"),await Be(r).toHaveValue(""),await Be(r).toHaveFocus(),await Be(t.queryByRole("button",{name:"Clear search"})).toBeNull(),await st.keyboard("chase"),await st.keyboard("{Escape}"),await Be(r).toHaveValue("")}async function nR({canvasElement:e}){let t=wt(e);await Be(await t.findByRole("button",{name:"Clear filters"})).toBeTruthy(),await Be(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters")}var W9={title:"Components/Lib/DataTable",parameters:{layout:"padded"},tags:["autodocs"]},Jd=W9,K9={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByRole("searchbox",{name:"Find fee"});await st.type(r,"chase"),await Be(t.getByRole("table",{name:"Park fees"})).toBeTruthy()}},X9={render:()=>Q(Oe,{canSelect:e=>e.status==="for_review",onRowActivate:()=>{}}),play:async({canvasElement:e})=>{let t=wt(e);await st.click(t.getByRole("checkbox",{name:/Select all/})),await st.click(t.getByRole("tab",{name:/Posted/})),await Be(t.getByText(/hidden by filters/)).toBeTruthy()}},J9={render:()=>Q(Oe,{pageSize:40})},Q9={render:()=>Q(Oe,{pageSize:40,totalStyle:"grand"})},Z9={render:()=>Q(Oe,{groupBy:"park",pageSize:40}),play:async({canvasElement:e})=>{let r=wt(e).getAllByRole("button",{name:/Joshua Tree/})[0];r&&await st.click(r)}},eH=[{id:"assets",date:"",party:"Assets",memo:"",park:"",amount:"0",status:"posted",children:[{id:"jt",date:"",party:"Joshua Tree",memo:"",park:"Joshua Tree",amount:"0",status:"posted",children:Jo.slice(0,3).map(e=>({...e,id:`site-${e.id}`}))}]}],tH={render:()=>Q(rH,{}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByRole("button",{name:/Assets/});await st.click(r),await Be(t.queryByRole("button",{name:/Joshua Tree/})).toBeNull(),await st.click(r),await Be(t.getByRole("button",{name:/Joshua Tree/})).toBeTruthy()}};function rH(){return Q(Oe,{rows:eH,pageSize:40,getSubRows:e=>e.children,initialFilters:{},onRowActivate:()=>{}})}var Kd=[{id:"harbor",name:"Harbor Family Office",entities:3,docs:3,review:7,children:[{id:"harbor-1",name:"Harbor Holdings LLC",docs:2,review:4},{id:"harbor-2",name:"Seaside Rentals LLC",docs:1,review:3},{id:"harbor-more",name:"1 more Entity, nothing open",docs:0,review:0,kind:"link"}]},{id:"granite",name:"Granite Builders",entities:2,docs:3,review:5,children:[{id:"granite-1",name:"Granite Builders Inc",docs:2,review:3},{id:"granite-2",name:"Granite Equipment LLC",docs:1,review:2}]},{id:"alpha",name:"Alpha Services",entities:1,docs:2,review:2,children:[{id:"alpha-1",name:"North Company",docs:2,review:2}]},{id:"delta",name:"Delta Dental Group",entities:1,docs:1,review:2,children:[{id:"delta-1",name:"Delta Dental PC",docs:1,review:2}]},{id:"kestrel",name:"Kestrel Logistics",entities:1,docs:1,review:3,children:[{id:"kestrel-1",name:"Kestrel Freight LLC",docs:1,review:3}]},{id:"gamma",name:"Gamma Group",docs:0,review:0}],nH={render:()=>Q(oH,{})};function oH(){let e=(0,Xd.useMemo)(()=>(0,Xe.defineColumns)([{id:"name",header:"Client / Entity",value:r=>r.name,rowHeader:!0,searchable:!0,cell:r=>r.entities!=null?Q(Z_,{children:[Q("b",{children:r.name})," ",Q("small",{children:[r.entities," ",r.entities===1?"Entity":"Entities"]})]}):r.name},{id:"docs",header:"Docs",value:r=>r.docs,kind:"number",total:"sum"},{id:"review",header:"Review",value:r=>r.review,kind:"number",total:"sum"}]),[]),t=(0,Xe.useCollection)({rows:Kd,columns:e,getRowId:r=>r.id,getSubRows:r=>r.children,pageBy:"top-level",pageSize:2});return Q(Wn.Sheet,{label:"Clients",children:[Q(Xe.CollectionToolbar,{collection:t,searchLabel:"Find a client or Entity",searchWidth:"fixed",framed:!0,meta:`${Kd.length} clients`,metaEnd:"Sorted by most open"}),Q(Xe.DataTable,{collection:t,label:"Clients",treeLines:!0,disclosure:"small",getRowKind:r=>r.kind,onRowActivate:()=>{},totalRows:[{scope:"page",label:r=>`Page ${r.page} of ${r.pageCount} subtotal`},{scope:"all",label:`Total open, all ${Kd.length} clients`}]}),Q(Xe.CollectionPagination,{label:"Clients",page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,onPageChange:t.setPage})]})}var aH={render:()=>Q(Oe,{onRowActivate:()=>{},rowActions:()=>[{label:"Open",onSelect:()=>{}},{label:"Remove",onSelect:()=>{},tone:"danger"}]})},iH={render:()=>Q(Oe,{activeRowId:"fee-1",onRowActivate:()=>{}})},sH={render:()=>Q(Oe,{rows:[],empty:Q(Wn.EmptyState,{kind:"start",title:"No fees yet"})})},lH={render:()=>Q(Oe,{rows:Jo.slice(0,2).map(e=>({...e,status:"posted"}))}),play:nR},uH={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:Wd},cH={render:()=>Q("div",{style:{width:320},children:Q(Oe,{narrow:"list",onRowActivate:()=>{}})}),play:Wd},dH={render:()=>Q(Oe,{loading:!0})},pH={render:()=>Q("div",{style:{height:300,overflow:"auto"},children:Q(Oe,{pageSize:40})})},fH={render:()=>Q("div",{style:{width:480},children:Q(Oe,{stickyRowHeader:!0,pageSize:10})})},mH={render:()=>Q(hH,{}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByTestId("fee-frame");await Be(t.queryByRole("table")).toBeNull(),r.style.width="960px",await Be(await t.findByRole("table",{name:"Park fees"})).toBeTruthy(),r.style.width="320px",await Be(t.queryByRole("table")).toBeNull()}};function hH(){return Q("div",{"data-testid":"fee-frame",style:{width:320},children:Q(Oe,{narrow:"list",onRowActivate:()=>{}})})}var yH={render:()=>Q(Oe,{getRowHref:e=>`#${e.id}`}),play:async({canvasElement:e})=>{let r=wt(e).getAllByRole("link")[0],n=!1;r?.addEventListener("click",o=>{o.preventDefault(),n=!0}),r?.focus(),await st.keyboard("{Enter}"),await Be(n).toBe(!0)}},bH={render:()=>Q(gH,{})};function gH(){let e=(0,Xd.useMemo)(()=>(0,Xe.defineColumns)([{id:"party",header:"Party",value:n=>n.party,rowHeader:!0,searchable:!0,sortable:!0},{id:"park",header:"Park",value:n=>n.park,filter:{kind:"select",label:"Park"}}]),[]),t=(0,Xe.useCollection)({rows:Jo.slice(0,5),columns:e,getRowId:n=>n.id}),r=e[1];return Q(Xe.CollectionToolbar.Root,{children:[Q(Xe.CollectionToolbar.Search,{label:"Find fee",value:t.search,onChange:t.setSearch}),r?Q(Xe.CollectionToolbar.Filter,{collection:t,column:r}):null,Q(Xe.CollectionToolbar.Sort,{collection:t}),Q(Xe.CollectionToolbar.Actions,{children:Q(Wn.Button,{emphasis:"standard",children:"Add fee"})})]})}var vH={render:()=>Q("div",{dir:"rtl",children:Q(Oe,{})})},EH={render:()=>Q("div",{"data-color":"secondary",children:Q(Oe,{})})},_H={render:()=>Q("div",{style:{display:"grid",gap:24},children:[Q(Oe,{size:"sm",pageSize:3}),Q(Oe,{size:"md",pageSize:3})]})},RH={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:async({canvasElement:e})=>{wt(e).getAllByRole("button",{name:/Chase|Visitor|Camp|Unassigned/})[0]?.focus(),await st.keyboard("{ArrowDown}{Enter}")}};var en=window.React,oR=Jd||{},wH=["Default","Selection","Money","GrandTotal"];function CH({id:e}){let t=Qd[e],r={...oR.args||{},...t.args||{}};return(t.render||(o=>en.createElement(oR.component,o)))(r,{args:r,id:e,name:e})}var SH=wH.map(e=>en.createElement("section",{key:e,className:"ds-story"},en.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),en.createElement("div",{className:"ds-story-body"},en.createElement(CH,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(en.createElement(en.Fragment,null,SH));})();
+        `),Reflect.get(e,t,r)}});var{buildQueries:CV,configure:SV,createEvent:AV,fireEvent:TV,findAllByAltText:PV,findAllByDisplayValue:OV,findAllByLabelText:qV,findAllByPlaceholderText:xV,findAllByRole:MV,findAllByTestId:NV,findAllByText:jV,findAllByTitle:IV,findByAltText:DV,findByDisplayValue:FV,findByLabelText:LV,findByPlaceholderText:BV,findByRole:kV,findByTestId:$V,findByText:UV,findByTitle:HV,getAllByAltText:VV,getAllByDisplayValue:zV,getAllByLabelText:GV,getAllByPlaceholderText:YV,getAllByRole:WV,getAllByTestId:KV,getAllByText:XV,getAllByTitle:JV,getByAltText:QV,getByDisplayValue:ZV,getByLabelText:e8,getByPlaceholderText:t8,getByRole:r8,getByTestId:n8,getByText:o8,getByTitle:a8,getConfig:i8,getDefaultNormalizer:s8,getElementError:l8,getNodeText:u8,getQueriesForElement:c8,getRoles:d8,getSuggestedQuery:p8,isInaccessible:f8,logDOM:m8,logRoles:h8,prettyDOM:y8,queries:b8,queryAllByAltText:g8,queryAllByAttribute:v8,queryAllByDisplayValue:E8,queryAllByLabelText:_8,queryAllByPlaceholderText:R8,queryAllByRole:w8,queryAllByTestId:C8,queryAllByText:S8,queryAllByTitle:A8,queryByAltText:T8,queryByAttribute:P8,queryByDisplayValue:O8,queryByLabelText:q8,queryByPlaceholderText:x8,queryByRole:M8,queryByTestId:N8,queryByText:j8,queryByTitle:I8,queryHelpers:D8,screen:F8,waitFor:L8,waitForElementToBeRemoved:B8,within:wt,prettyFormat:k8}=Ec,{userEvent:st}=xa({userEvent:$9},{intercept:!0}),{expect:Be}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},_c=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=_c(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=_c(o,t,n));return e}return e},z9=({initialArgs:e})=>{_c(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=wt(e.canvasElement))};De.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];De.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Xd=rn(zd(),1),Wn=rn(Gd(),1),Xe=rn(Yd(),1);var rR=rn(zd(),1),Xo=rn(Gd(),1),Nt=rn(Yd(),1);var Ui=window.React;function Q(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Z_=Ui.Fragment;var eR=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],tR=["Chase","Visitor fee","Camp store","Unassigned"],Jo=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:tR[t%tR.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:eR[t%eR.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),Y9=(0,Nt.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>Q(Xo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function Oe({rows:e=Jo,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y,totalStyle:b}){let v=(0,rR.useMemo)(()=>Y9,[]),C=(0,Nt.useCollection)({rows:e,columns:v,getRowId:S=>S.id,pageSize:t,initialSort:{id:"date",desc:!0},initialFilters:g??{status:"for_review"},canSelect:r,groupBy:n,getSubRows:h});return Q("div",{children:[Q(Nt.CollectionToolbar,{collection:C,searchLabel:"Find fee",showSort:o,actions:Q(Xo.Button,{emphasis:"standard",children:"Add fee"}),bulkActions:Q(Xo.Button,{emphasis:"standard",children:"Post selected"})}),Q(Nt.DataTable,{collection:C,label:"Park fees",onRowActivate:m,getRowHref:y,activeRowId:d,rowActions:p,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,totalStyle:b}),t?Q(Nt.CollectionPagination,{page:C.page,pageCount:C.pageCount,pageSize:C.pageSize,total:C.filteredCount,filtered:C.isFiltered,label:"Park fees",onPageChange:C.setPage}):null]})}async function Wd({canvasElement:e}){let t=wt(e),r=t.getByRole("searchbox",{name:"Find fee"});await Be(t.queryByRole("button",{name:"Clear search"})).toBeNull(),r.focus(),await st.keyboard("zzz"),await Be(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters");let n=await t.findByRole("button",{name:"Clear search"});await st.tab(),await Be(n).toHaveFocus(),await st.keyboard("{Enter}"),await Be(r).toHaveValue(""),await Be(r).toHaveFocus(),await Be(t.queryByRole("button",{name:"Clear search"})).toBeNull(),await st.keyboard("chase"),await st.keyboard("{Escape}"),await Be(r).toHaveValue("")}async function nR({canvasElement:e}){let t=wt(e);await Be(await t.findByRole("button",{name:"Clear filters"})).toBeTruthy(),await Be(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters")}var W9={title:"Components/Lib/DataTable",parameters:{layout:"padded"},tags:["autodocs"]},Jd=W9,K9={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByRole("searchbox",{name:"Find fee"});await st.type(r,"chase"),await Be(t.getByRole("table",{name:"Park fees"})).toBeTruthy()}},X9={render:()=>Q(Oe,{canSelect:e=>e.status==="for_review",onRowActivate:()=>{}}),play:async({canvasElement:e})=>{let t=wt(e);await st.click(t.getByRole("checkbox",{name:/Select all/})),await st.click(t.getByRole("tab",{name:/Posted/})),await Be(t.getByText(/hidden by filters/)).toBeTruthy()}},J9={render:()=>Q(Oe,{pageSize:40})},Q9={render:()=>Q(Oe,{pageSize:40,totalStyle:"grand"})},Z9={render:()=>Q(Oe,{groupBy:"park",pageSize:40}),play:async({canvasElement:e})=>{let r=wt(e).getAllByRole("button",{name:/Joshua Tree/})[0];r&&await st.click(r)}},eH=[{id:"assets",date:"",party:"Assets",memo:"",park:"",amount:"0",status:"posted",children:[{id:"jt",date:"",party:"Joshua Tree",memo:"",park:"Joshua Tree",amount:"0",status:"posted",children:Jo.slice(0,3).map(e=>({...e,id:`site-${e.id}`}))}]}],tH={render:()=>Q(rH,{}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByRole("button",{name:/Assets/});await st.click(r),await Be(t.queryByRole("button",{name:/Joshua Tree/})).toBeNull(),await st.click(r),await Be(t.getByRole("button",{name:/Joshua Tree/})).toBeTruthy()}};function rH(){return Q(Oe,{rows:eH,pageSize:40,getSubRows:e=>e.children,initialFilters:{},onRowActivate:()=>{}})}var Kd=[{id:"harbor",name:"Harbor Family Office",entities:3,docs:3,review:7,children:[{id:"harbor-1",name:"Harbor Holdings LLC",docs:2,review:4},{id:"harbor-2",name:"Seaside Rentals LLC",docs:1,review:3},{id:"harbor-more",name:"1 more Entity, nothing open",docs:0,review:0,kind:"link"}]},{id:"granite",name:"Granite Builders",entities:2,docs:3,review:5,children:[{id:"granite-1",name:"Granite Builders Inc",docs:2,review:3},{id:"granite-2",name:"Granite Equipment LLC",docs:1,review:2}]},{id:"alpha",name:"Alpha Services",entities:1,docs:2,review:2,children:[{id:"alpha-1",name:"North Company",docs:2,review:2}]},{id:"delta",name:"Delta Dental Group",entities:1,docs:1,review:2,children:[{id:"delta-1",name:"Delta Dental PC",docs:1,review:2}]},{id:"kestrel",name:"Kestrel Logistics",entities:1,docs:1,review:3,children:[{id:"kestrel-1",name:"Kestrel Freight LLC",docs:1,review:3}]},{id:"gamma",name:"Gamma Group",docs:0,review:0}],nH={render:()=>Q(oH,{})};function oH(){let e=(0,Xd.useMemo)(()=>(0,Xe.defineColumns)([{id:"name",header:"Client / Entity",value:r=>r.name,rowHeader:!0,searchable:!0,cell:r=>r.entities!=null?Q(Z_,{children:[Q("b",{children:r.name})," ",Q("small",{children:[r.entities," ",r.entities===1?"Entity":"Entities"]})]}):r.name},{id:"docs",header:"Docs",value:r=>r.docs,kind:"number",total:"sum"},{id:"review",header:"Review",value:r=>r.review,kind:"number",total:"sum"}]),[]),t=(0,Xe.useCollection)({rows:Kd,columns:e,getRowId:r=>r.id,getSubRows:r=>r.children,pageBy:"top-level",pageSize:2});return Q(Wn.Sheet,{label:"Clients",children:[Q(Xe.CollectionToolbar,{collection:t,searchLabel:"Find a client or Entity",searchWidth:"fixed",searchPlaceholder:"Find a client or Entity",framed:!0,meta:`${Kd.length} clients`,metaEnd:"Sorted by most open"}),Q(Xe.DataTable,{collection:t,label:"Clients",treeLines:!0,headerStyle:"caps",figures:!0,disclosure:"small",getRowKind:r=>r.kind,onRowActivate:()=>{},totalRows:[{scope:"page",label:r=>`Page ${r.page} of ${r.pageCount} subtotal`},{scope:"all",label:`Total open, all ${Kd.length} clients`}]}),Q(Xe.CollectionPagination,{label:"Clients",page:t.page,pageCount:t.pageCount,pageSize:t.pageSize,total:t.pageTotal,onPageChange:t.setPage})]})}var aH={render:()=>Q(Oe,{onRowActivate:()=>{},rowActions:()=>[{label:"Open",onSelect:()=>{}},{label:"Remove",onSelect:()=>{},tone:"danger"}]})},iH={render:()=>Q(Oe,{activeRowId:"fee-1",onRowActivate:()=>{}})},sH={render:()=>Q(Oe,{rows:[],empty:Q(Wn.EmptyState,{kind:"start",title:"No fees yet"})})},lH={render:()=>Q(Oe,{rows:Jo.slice(0,2).map(e=>({...e,status:"posted"}))}),play:nR},uH={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:Wd},cH={render:()=>Q("div",{style:{width:320},children:Q(Oe,{narrow:"list",onRowActivate:()=>{}})}),play:Wd},dH={render:()=>Q(Oe,{loading:!0})},pH={render:()=>Q("div",{style:{height:300,overflow:"auto"},children:Q(Oe,{pageSize:40})})},fH={render:()=>Q("div",{style:{width:480},children:Q(Oe,{stickyRowHeader:!0,pageSize:10})})},mH={render:()=>Q(hH,{}),play:async({canvasElement:e})=>{let t=wt(e),r=t.getByTestId("fee-frame");await Be(t.queryByRole("table")).toBeNull(),r.style.width="960px",await Be(await t.findByRole("table",{name:"Park fees"})).toBeTruthy(),r.style.width="320px",await Be(t.queryByRole("table")).toBeNull()}};function hH(){return Q("div",{"data-testid":"fee-frame",style:{width:320},children:Q(Oe,{narrow:"list",onRowActivate:()=>{}})})}var yH={render:()=>Q(Oe,{getRowHref:e=>`#${e.id}`}),play:async({canvasElement:e})=>{let r=wt(e).getAllByRole("link")[0],n=!1;r?.addEventListener("click",o=>{o.preventDefault(),n=!0}),r?.focus(),await st.keyboard("{Enter}"),await Be(n).toBe(!0)}},bH={render:()=>Q(gH,{})};function gH(){let e=(0,Xd.useMemo)(()=>(0,Xe.defineColumns)([{id:"party",header:"Party",value:n=>n.party,rowHeader:!0,searchable:!0,sortable:!0},{id:"park",header:"Park",value:n=>n.park,filter:{kind:"select",label:"Park"}}]),[]),t=(0,Xe.useCollection)({rows:Jo.slice(0,5),columns:e,getRowId:n=>n.id}),r=e[1];return Q(Xe.CollectionToolbar.Root,{children:[Q(Xe.CollectionToolbar.Search,{label:"Find fee",value:t.search,onChange:t.setSearch}),r?Q(Xe.CollectionToolbar.Filter,{collection:t,column:r}):null,Q(Xe.CollectionToolbar.Sort,{collection:t}),Q(Xe.CollectionToolbar.Actions,{children:Q(Wn.Button,{emphasis:"standard",children:"Add fee"})})]})}var vH={render:()=>Q("div",{dir:"rtl",children:Q(Oe,{})})},EH={render:()=>Q("div",{"data-color":"secondary",children:Q(Oe,{})})},_H={render:()=>Q("div",{style:{display:"grid",gap:24},children:[Q(Oe,{size:"sm",pageSize:3}),Q(Oe,{size:"md",pageSize:3})]})},RH={render:()=>Q(Oe,{onRowActivate:()=>{}}),play:async({canvasElement:e})=>{wt(e).getAllByRole("button",{name:/Chase|Visitor|Camp|Unassigned/})[0]?.focus(),await st.keyboard("{ArrowDown}{Enter}")}};var en=window.React,oR=Jd||{},wH=["Default","Selection","Money","GrandTotal"];function CH({id:e}){let t=Qd[e],r={...oR.args||{},...t.args||{}};return(t.render||(o=>en.createElement(oR.component,o)))(r,{args:r,id:e,name:e})}var SH=wH.map(e=>en.createElement("section",{key:e,className:"ds-story"},en.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),en.createElement("div",{className:"ds-story-body"},en.createElement(CH,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(en.createElement(en.Fragment,null,SH));})();
 
 </script>
 </body>

package/dist/design-system/components/Table/README.md

@@ -10,7 +10,7 @@ Tokens: the table concept (--sl-table-*).
 
 | Class | Data attributes it answers to |
 |---|---|
-| `Table` | `data-sticky-header` |
+| `Table` | `data-header-style`: `caps`; `data-figures`; `data-sticky-header` |
 | `EmptyState` |   |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.