@okta/odyssey-react-mui 1.45.0 → 1.47.1

package/dist/assets/DataView _labs_.stories-CXjSXDeF.js

@@ -0,0 +1,438 @@
+import{j as a}from"./jsx-runtime-CnH95YSl.js";import{a as H}from"./index-B-lxVbXh.js";import{f as na}from"./index-BJMTVygn.js";import{r as t}from"./index-NdkWRN8K.js";import{O as oa}from"./OdysseyStorybookThemeDecorator-BRjYVaUu.js";import{d as m,c as p,f as sa,r as ra}from"./personData-zrA1iJih.js";import{d as ia,a as U}from"./constants-CGUp4oSR.js";import{p as la}from"./constants-CyailK6t.js";import{M as c}from"./DataView-CYkwjPzk.js";import{M as b}from"./Box-BGpAHVQV.js";import{M as q}from"./EmptyState-9pxLjmqH.js";import{M as u}from"./Button-DGmXZ3jw.js";import{M as R}from"./MenuItem-n-UKDxiu.js";import{M as ua,a as ca}from"./Refresh-GVzSl4pN.js";import{M as da}from"./Status-BpzpxYZ-.js";const ma={component:c,decorators:[oa],argTypes:{getData:{table:{type:{summary:""}}},getRowId:{table:{type:{summary:""}}},hasRowReordering:{control:"boolean",table:{type:{summary:""}}},isRowReorderingDisabled:{control:"boolean"},onReorderRows:{table:{type:{summary:""}}},hasRowSelection:{control:"boolean"},onChangeRowSelection:{},bulkActionMenuItems:{},hasPagination:{control:"boolean"},currentPage:{control:"number"},metaText:{control:"text"},paginationType:{control:"select",options:la},resultsPerPage:{control:"number"},totalRows:{control:"number"},hasFilters:{control:"boolean"},hasSearch:{control:"boolean"},hasSearchSubmitButton:{control:"boolean"},filters:{},searchDelayTime:{control:"number"},enableVirtualization:{control:"boolean"},errorMessage:{control:"text"},emptyPlaceholder:{},noResultsPlaceholder:{},initialLayout:{control:"select",options:U},availableLayouts:{control:"check",options:U},columns:{name:"tableLayoutOptions.columns"},initialDensity:{control:"select",options:ia,name:"tableLayoutOptions.columns"},hasChangeableDensity:{control:"boolean",name:"tableLayoutOptions.hasChangeableDensity"},hasColumnResizing:{control:"boolean",name:"tableLayoutOptions.hasColumnResizing"},hasColumnVisibility:{control:"boolean",name:"tableLayoutOptions.hasColumnVisibility"},renderDetailPanel:{name:"tableLayoutOptions.renderDetailPanel"},rowActionButtons:{name:"tableLayoutOptions.rowActionButtons"},tableRowActionMenuItems:{name:"tableLayoutOptions.rowActionMenuItems"},hasSorting:{control:"boolean",name:"tableLayoutOptions.hasSorting"},itemProps:{name:"cardLayoutOptions.itemProps"},maxGridColumns:{control:"number",name:"cardLayoutOptions.maxGridColumns"},cardRowActionMenuItems:{name:"cardLayoutOptions.rowActionMenuItems"},isLoading:{control:"boolean"},isEmpty:{control:"boolean"},isNoResults:{control:"boolean"},isPaginationMoreDisabled:{control:"boolean",description:"If true, the pagination next or show more button will be disabled.",table:{type:{summary:"boolean"}}},hasCustomEmptyPlaceholder:{control:"boolean",name:"[STORY ONLY] Has custom empty placeholder?"},hasCustomNoResultsPlaceholder:{control:"boolean",name:"[STORY ONLY] Has custom 'no results' placeholder?"},hasActionMenuItems:{control:"boolean",name:"[STORY ONLY] Has action menu items?"},hasActionButtons:{control:"boolean",name:"[STORY ONLY] Has action buttons in table view?"},hasAdditionalActionButton:{control:"boolean",name:"[STORY ONLY] Has additional action button?"},hasAdditionalActionMenuItems:{control:"boolean",name:"[STORY ONLY] Has additional action menu items?"}},args:{availableLayouts:["table","list","grid"],currentPage:1,hasActionButtons:!1,hasActionMenuItems:!1,hasCustomEmptyPlaceholder:!1,hasCustomNoResultsPlaceholder:!1,maxGridColumns:3,onChangeRowSelection:na(),paginationType:"paged",resultsPerPage:20},render:function(e){const[o,s]=t.useState(m),{getData:r,onReorderRows:i,onChangeRowSelection:l}=h(o,s);return a.jsx(c,{additionalActionButton:e.hasAdditionalActionButton?ga:void 0,additionalActionMenuItems:e.hasAdditionalActionMenuItems?ya:void 0,availableLayouts:e.availableLayouts,bulkActionMenuItems:e.hasActionMenuItems?G:void 0,cardLayoutOptions:{itemProps:ta,rowActionMenuItems:e.hasActionMenuItems?G:void 0,maxGridColumns:e.maxGridColumns},currentPage:e.currentPage,emptyPlaceholder:e.hasCustomEmptyPlaceholder?Ca:void 0,enableVirtualization:e.enableVirtualization,errorMessage:e.errorMessage,getData:r,hasFilters:e.hasFilters,hasPagination:e.hasPagination,hasRowReordering:e.hasRowReordering,hasRowSelection:e.hasRowSelection,hasSearch:e.hasSearch,hasSearchSubmitButton:e.hasSearchSubmitButton,initialLayout:e.initialLayout,isEmpty:e.isEmpty,isLoading:e.isLoading,isNoResults:e.isNoResults,isPaginationMoreDisabled:e.isPaginationMoreDisabled,isRowReorderingDisabled:e.isRowReorderingDisabled,metaText:e.metaText,noResultsPlaceholder:e.hasCustomNoResultsPlaceholder?Da:void 0,onChangeRowSelection:l,onReorderRows:i,paginationType:e.paginationType,resultsPerPage:e.resultsPerPage,searchDelayTime:e.searchDelayTime,tableLayoutOptions:{columns:p,hasSorting:e.hasSorting,rowActionMenuItems:e.hasActionMenuItems?G:void 0,rowActionButtons:e.hasActionButtons?ba:void 0,renderDetailPanel:void 0,hasColumnVisibility:e.hasColumnVisibility,hasColumnResizing:e.hasColumnResizing,hasChangeableDensity:e.hasChangeableDensity,initialDensity:e.initialDensity},totalRows:e.totalRows})}},D=H("onClick"),Y=["table"],_=["list"],ha=["grid"],pa=["table","grid"],h=(n,e)=>{const o=t.useCallback(({...i})=>sa({data:n,...i}),[n]),s=t.useCallback(({...i})=>{const l=ra({data:n,...i});e(l)},[n,e]),r=t.useCallback(i=>{Object.keys(i).length>0&&H("onChangeRowSelection")(`${Object.keys(i).length} selected`)},[]);return{getData:o,onReorderRows:s,onChangeRowSelection:r}},ga=a.jsx(u,{label:"Add widget",variant:"primary"}),ya=a.jsxs(a.Fragment,{children:[a.jsx(R,{onClick:D,children:"Additional action 1"}),a.jsx(R,{onClick:D,children:"Additional action 2"})]}),G=()=>a.jsxs(a.Fragment,{children:[a.jsx(R,{onClick:D,children:"Action 1"}),a.jsx(R,{onClick:D,children:"Action 2"})]}),ba=()=>a.jsxs(b,{sx:{display:"flex",alignItems:"center",marginInlineEnd:2},children:[a.jsx(u,{ariaLabel:"Pause",endIcon:a.jsx(ua,{}),onClick:D,size:"small",variant:"floating"}),a.jsx(u,{ariaLabel:"Refresh",endIcon:a.jsx(ca,{}),onClick:D,size:"small",variant:"floating"})]}),Ca=a.jsx(q,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(u,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(u,{label:"Secondary",variant:"secondary"})}),Da=a.jsx(q,{description:"You should try searching or filtering for something else.",heading:"Whoops, there's nothing here!"}),ta=n=>({overline:`${n.city}, ${n.state}`,title:n.name,description:`${n.name} is ${n.age} years old.`,children:a.jsx(da,{label:n.risk.charAt(0).toUpperCase()+n.risk.slice(1),severity:n.risk==="low"?"success":n.risk==="medium"?"warning":"error"})}),w={args:{}},P={args:{availableLayouts:Y}},x={args:{availableLayouts:["list","grid"]}},A={args:{availableLayouts:_}},O={args:{availableLayouts:ha}},v={args:{hasRowReordering:!0,hasPagination:!0,hasFilters:!0,hasSearch:!0,hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!0,hasSorting:!0,hasActionButtons:!0,hasActionMenuItems:!0,hasRowSelection:!0,hasAdditionalActionButton:!0,hasAdditionalActionMenuItems:!0,metaText:"Last updated 12 hours ago"}},M={render:function(e){const[o,s]=t.useState(m),{getData:r,onReorderRows:i,onChangeRowSelection:l}=h(o,s),d=t.useCallback(({row:y})=>a.jsxs(b,{children:["This is additional content for row ",y.id]}),[]),g=t.useMemo(()=>({columns:p,renderDetailPanel:d}),[d]);return a.jsx(c,{availableLayouts:pa,cardLayoutOptions:{itemProps:ta,renderDetailPanel:d},getData:r,hasRowSelection:e.hasRowSelection,onChangeRowSelection:l,onReorderRows:i,tableLayoutOptions:g})}},I={render:function(){const e=t.useCallback(()=>{const s=[];return Array(10).fill(null).forEach(()=>{s.push({truncated:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",wrapped:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."})}),s},[]),o=t.useMemo(()=>({columns:[{accessorKey:"truncated",header:"Truncated"},{accessorKey:"wrapped",header:"Wrapped",hasTextWrapping:!0}],hasColumnResizing:!0}),[]);return a.jsx(c,{getData:e,tableLayoutOptions:o})}},k={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{onReorderRows:g,onChangeRowSelection:y}=h(l,d),C=t.useMemo(()=>a.jsx(q,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(u,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(u,{label:"Secondary",variant:"secondary"})}),[]),f=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,emptyPlaceholder:C,getData:()=>[],onChangeRowSelection:y,onReorderRows:g,tableLayoutOptions:f})}},j={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g,onReorderRows:y}=h(l,d),C=t.useMemo(()=>[...p,{id:"startLetter",label:"Name starting with...",render:L=>a.jsxs(b,{sx:{display:"flex",flexDirection:"column",alignContent:"stretch",gap:2},children:[a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Vowel",onClick:()=>L({filterId:"startLetter",value:"vowel"}),variant:"secondary"})}),a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Consonant",onClick:()=>L({filterId:"startLetter",value:"consonant"}),variant:"secondary"})}),a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Any",onClick:()=>L({filterId:"startLetter",value:"any"}),variant:"secondary"})})]})}],[]),f=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:C,getData:g,onReorderRows:y,tableLayoutOptions:f})}},V={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g,onReorderRows:y,onChangeRowSelection:C}=h(l,d),f=t.useMemo(()=>[...p.filter(S=>S.id!=="visit"),{id:"startLetter",label:"Starting letter ",render:S=>a.jsxs(b,{children:[a.jsx(u,{label:"🛰️ Vowel",onClick:()=>S({filterId:"startLetter",value:"vowel"}),variant:"secondary"}),a.jsx(u,{label:"🛸 Consonant",onClick:()=>S({filterId:"startLetter",value:"consonant"}),variant:"secondary"}),a.jsx(u,{label:"🤷‍♂️ Any",onClick:()=>S({filterId:"startLetter",value:""}),variant:"secondary"})]})}],[]),L=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:f,getData:g,onChangeRowSelection:C,onReorderRows:y,tableLayoutOptions:L})}},T={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g}=h(l,d),y=t.useMemo(()=>[...p,{id:"startLetter",label:"Starting letter",variant:"select",options:[{label:"Vowel",value:"vowel"},{label:"Consonant",value:"consonant"}]}],[]),C=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:y,getData:g,tableLayoutOptions:C})}},z={args:{hasAdditionalActionButton:!0,hasAdditionalActionMenuItems:!0}},B={render:function(){const e=t.useCallback(()=>[{name:"Core engineering access",apps:5,users:10},{name:"Core sales access",apps:8,users:28},{name:"Super user access",apps:3,users:1}],[]),o=t.useMemo(()=>({hasColumnResizing:!0,hasSorting:!0,columns:[{accessorKey:"name",header:"Name",grow:!0},{accessorKey:"apps",header:"Apps"},{accessorKey:"users",header:"Users assigned"}],rowActionMenuItems:G}),[]);return a.jsx(c,{getData:e,hasSearch:!0,tableLayoutOptions:o})}},F={args:{availableLayouts:Y,hasPagination:!0,paginationType:"loadMore",hasFilters:!0}},K={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(l=>{H("onPaginationChange")(l)},[]),i=t.useMemo(()=>({columns:p}),[]);return a.jsx(c,{getData:s,hasPagination:!0,onPaginationChange:r,tableLayoutOptions:i})}},Ra=n=>({overline:"Overline",title:n.name,description:`${n.name} is ${n.age} years old.`,variant:"stack",image:a.jsx("img",{alt:"Logo",src:"https://placehold.co/400"})}),E={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useMemo(()=>({itemProps:Ra,renderDetailPanel:()=>a.jsx(b,{children:"Details"}),rowActionMenuItems:()=>a.jsx(R,{children:"Test"})}),[]);return a.jsx(c,{availableLayouts:_,cardLayoutOptions:r,getData:s})}},fa=n=>({title:n.name,variant:"compact",image:a.jsx("img",{alt:"Logo",src:"https://placehold.co/400"})}),N={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(({row:d})=>d.age%2?a.jsx(b,{children:"Detail content"}):!1,[]),i=t.useCallback(()=>a.jsx(R,{children:"Test"}),[]),l=t.useMemo(()=>({itemProps:fa,renderDetailPanel:r,rowActionMenuItems:i}),[r,i]);return a.jsx(c,{availableLayouts:_,cardLayoutOptions:l,getData:s})}},W={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useMemo(()=>({columns:[{accessorKey:"order",header:"ID",enableColumnFilter:!1,grow:!0},{accessorKey:"name",header:"Name"},{accessorKey:"city",header:"City"}],hasColumnResizing:!0}),[]);return a.jsx(c,{availableLayouts:Y,getData:s,tableLayoutOptions:r})}},$={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(()=>a.jsx(u,{label:"Action",onClick:D,size:"small",variant:"secondary"}),[]),i=t.useMemo(()=>({columns:[{accessorKey:"order",header:"ID",enableColumnFilter:!1,grow:!0},{accessorKey:"name",header:"Name"},{accessorKey:"city",header:"City"}],hasColumnResizing:!0,rowActionButtons:r}),[r]);return a.jsx(c,{availableLayouts:Y,getData:s,tableLayoutOptions:i})}};var J,Q,X;w.parameters={...w.parameters,docs:{...(J=w.parameters)==null?void 0:J.docs,source:{originalSource:`{
+  args: {}
+}`,...(X=(Q=w.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};var Z,ee,ae;P.parameters={...P.parameters,docs:{...(Z=P.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: tableLayoutOnly
+  }
+}`,...(ae=(ee=P.parameters)==null?void 0:ee.docs)==null?void 0:ae.source}}};var te,ne,oe;x.parameters={...x.parameters,docs:{...(te=x.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: ["list", "grid"]
+  }
+}`,...(oe=(ne=x.parameters)==null?void 0:ne.docs)==null?void 0:oe.source}}};var se,re,ie;A.parameters={...A.parameters,docs:{...(se=A.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: listLayoutOnly
+  }
+}`,...(ie=(re=A.parameters)==null?void 0:re.docs)==null?void 0:ie.source}}};var le,ue,ce;O.parameters={...O.parameters,docs:{...(le=O.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: gridLayoutOnly
+  }
+}`,...(ce=(ue=O.parameters)==null?void 0:ue.docs)==null?void 0:ce.source}}};var de,me,he;v.parameters={...v.parameters,docs:{...(de=v.parameters)==null?void 0:de.docs,source:{originalSource:`{
+  args: {
+    hasRowReordering: true,
+    hasPagination: true,
+    hasFilters: true,
+    hasSearch: true,
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasSorting: true,
+    hasActionButtons: true,
+    hasActionMenuItems: true,
+    hasRowSelection: true,
+    hasAdditionalActionButton: true,
+    hasAdditionalActionMenuItems: true,
+    metaText: "Last updated 12 hours ago"
+  }
+}`,...(he=(me=v.parameters)==null?void 0:me.docs)==null?void 0:he.source}}};var pe,ge,ye;M.parameters={...M.parameters,docs:{...(pe=M.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  render: function C(args) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData,
+      onReorderRows,
+      onChangeRowSelection
+    } = useDataCallbacks(data, setData);
+    const renderAdditionalContent = useCallback(({
+      row
+    }: {
+      row: DataTableRowData;
+    }) => {
+      return <Box>This is additional content for row {row.id}</Box>;
+    }, []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      renderDetailPanel: renderAdditionalContent
+    }), [renderAdditionalContent]);
+    return <DataView availableLayouts={tableAndGridLayouts} cardLayoutOptions={{
+      itemProps: itemProps,
+      renderDetailPanel: renderAdditionalContent
+    }} getData={getData} hasRowSelection={args.hasRowSelection} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(ye=(ge=M.parameters)==null?void 0:ge.docs)==null?void 0:ye.source}}};var be,Ce,De;I.parameters={...I.parameters,docs:{...(be=I.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  render: function C() {
+    const getData = useCallback(() => {
+      const data: Array<{
+        truncated: string;
+        wrapped: string;
+      }> = [];
+      Array(10).fill(null).forEach(() => {
+        data.push({
+          truncated: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",
+          wrapped: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."
+        });
+      }); // Corrected the missing parenthesis here
+      return data;
+    }, []);
+    const tableLayoutOptions = useMemo(() => ({
+      columns: [{
+        accessorKey: "truncated",
+        header: "Truncated"
+      }, {
+        accessorKey: "wrapped",
+        header: "Wrapped",
+        hasTextWrapping: true
+      }],
+      hasColumnResizing: true
+    }), []);
+    return <DataView getData={getData} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(De=(Ce=I.parameters)==null?void 0:Ce.docs)==null?void 0:De.source}}};var Re,fe,Le;k.parameters={...k.parameters,docs:{...(Re=k.parameters)==null?void 0:Re.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C({
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    ...props
+  }) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      onReorderRows,
+      onChangeRowSelection
+    } = useDataCallbacks(data, setData);
+    const emptyPlaceholder = useMemo(() => <EmptyState description="All relevant data will be displayed and can be searched and filtered" heading="Start by adding data assets" PrimaryCallToActionComponent={<Button label="Primary" variant="primary" />} SecondaryCallToActionComponent={<Button label="Secondary" variant="secondary" />} />, []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      hasChangeableDensity: hasChangeableDensity,
+      hasColumnResizing: hasColumnResizing,
+      hasColumnVisibility: hasColumnVisibility,
+      hasSorting: hasSorting
+    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
+    return <DataView {...props} emptyPlaceholder={emptyPlaceholder} getData={() => []} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Le=(fe=k.parameters)==null?void 0:fe.docs)==null?void 0:Le.source}}};var Se,we,Pe;j.parameters={...j.parameters,docs:{...(Se=j.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C({
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    ...props
+  }) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData,
+      onReorderRows
+    } = useDataCallbacks(data, setData);
+    const filters = useMemo(() => [...personColumns, {
+      id: "startLetter",
+      label: "Name starting with...",
+      render: (updateFilters: UpdateFiltersOrValues) => <Box sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignContent: "stretch",
+        gap: 2
+      }}>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Vowel" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "vowel"
+          })} variant="secondary" />
+              </Box>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Consonant" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "consonant"
+          })} variant="secondary" />
+              </Box>
+              <Box sx={{
+          display: "flex",
+          alignItems: "stretch",
+          flexDirection: "column"
+        }}>
+                <Button isFullWidth label="Any" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "any"
+          })} variant="secondary" />
+              </Box>
+            </Box>
+    }], []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      hasChangeableDensity: hasChangeableDensity,
+      hasColumnResizing: hasColumnResizing,
+      hasColumnVisibility: hasColumnVisibility,
+      hasSorting: hasSorting
+    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
+    return <DataView {...props} filters={filters} getData={getData} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Pe=(we=j.parameters)==null?void 0:we.docs)==null?void 0:Pe.source}}};var xe,Ae,Oe;V.parameters={...V.parameters,docs:{...(xe=V.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: true,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C({
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    ...props
+  }) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData,
+      onReorderRows,
+      onChangeRowSelection
+    } = useDataCallbacks(data, setData);
+    const filters = useMemo(() => {
+      // Filter out the column with the id of "type"
+      const filteredPersonColumns = personColumns.filter(column => column.id !== "visit");
+      return [...filteredPersonColumns, {
+        id: "startLetter",
+        label: "Starting letter ",
+        render: (updateFilters: UpdateFiltersOrValues) => <Box>
+              <Button label="🛰️ Vowel" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "vowel"
+          })} variant="secondary" />
+              <Button label="🛸 Consonant" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: "consonant"
+          })} variant="secondary" />
+              <Button label="🤷‍♂️ Any" onClick={() => updateFilters({
+            filterId: "startLetter",
+            value: ""
+          })} variant="secondary" />
+            </Box>
+      }];
+    }, []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      hasChangeableDensity: hasChangeableDensity,
+      hasColumnResizing: hasColumnResizing,
+      hasColumnVisibility: hasColumnVisibility,
+      hasSorting: hasSorting
+    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
+    return <DataView {...props} filters={filters} getData={getData} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Oe=(Ae=V.parameters)==null?void 0:Ae.docs)==null?void 0:Oe.source}}};var ve,Me,Ie;T.parameters={...T.parameters,docs:{...(ve=T.parameters)==null?void 0:ve.docs,source:{originalSource:`{
+  args: {
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: false,
+    hasFilters: true,
+    hasPagination: false,
+    hasRowSelection: false,
+    hasSearch: true,
+    hasSorting: true,
+    hasRowReordering: false
+  },
+  render: function C({
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    ...props
+  }) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const filters = useMemo<DataViewMetaProps["filters"]>(() => {
+      return [...personColumns, {
+        id: "startLetter",
+        label: "Starting letter",
+        variant: "select",
+        options: [{
+          label: "Vowel",
+          value: "vowel"
+        }, {
+          label: "Consonant",
+          value: "consonant"
+        }]
+      }];
+    }, []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      hasChangeableDensity: hasChangeableDensity,
+      hasColumnResizing: hasColumnResizing,
+      hasColumnVisibility: hasColumnVisibility,
+      hasSorting: hasSorting
+    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
+    return <DataView {...props} filters={filters} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Ie=(Me=T.parameters)==null?void 0:Me.docs)==null?void 0:Ie.source}}};var ke,je,Ve;z.parameters={...z.parameters,docs:{...(ke=z.parameters)==null?void 0:ke.docs,source:{originalSource:`{
+  args: {
+    hasAdditionalActionButton: true,
+    hasAdditionalActionMenuItems: true
+  }
+}`,...(Ve=(je=z.parameters)==null?void 0:je.docs)==null?void 0:Ve.source}}};var Te,ze,Be;B.parameters={...B.parameters,docs:{...(Te=B.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  render: function C() {
+    const getData = useCallback<() => Privilege[]>(() => [{
+      name: "Core engineering access",
+      apps: 5,
+      users: 10
+    }, {
+      name: "Core sales access",
+      apps: 8,
+      users: 28
+    }, {
+      name: "Super user access",
+      apps: 3,
+      users: 1
+    }], []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Privilege>>(() => ({
+      hasColumnResizing: true,
+      hasSorting: true,
+      columns: [{
+        accessorKey: "name",
+        header: "Name",
+        grow: true
+      }, {
+        accessorKey: "apps",
+        header: "Apps"
+      }, {
+        accessorKey: "users",
+        header: "Users assigned"
+      }],
+      rowActionMenuItems: actionMenuItems
+    }), []);
+    return <DataView getData={getData} hasSearch tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Be=(ze=B.parameters)==null?void 0:ze.docs)==null?void 0:Be.source}}};var Fe,Ke,Ee;F.parameters={...F.parameters,docs:{...(Fe=F.parameters)==null?void 0:Fe.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: tableLayoutOnly,
+    hasPagination: true,
+    paginationType: "loadMore",
+    hasFilters: true
+  }
+}`,...(Ee=(Ke=F.parameters)==null?void 0:Ke.docs)==null?void 0:Ee.source}}};var Ne,We,$e;K.parameters={...K.parameters,docs:{...(Ne=K.parameters)==null?void 0:Ne.docs,source:{originalSource:`{
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const onPaginationChange = useCallback<Required<DataViewProps<Person>>["onPaginationChange"]>((pagination: {
+      pageIndex: number;
+      pageSize: number;
+    }) => {
+      action("onPaginationChange")(pagination);
+    }, []);
+    const tableLayoutOptions = useMemo(() => ({
+      columns: personColumns
+    }), []);
+    return <DataView getData={getData} hasPagination onPaginationChange={onPaginationChange} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...($e=(We=K.parameters)==null?void 0:We.docs)==null?void 0:$e.source}}};var Ge,Ye,He;E.parameters={...E.parameters,docs:{...(Ge=E.parameters)==null?void 0:Ge.docs,source:{originalSource:`{
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const cardLayoutOptions = useMemo(() => ({
+      itemProps: stackItemProps,
+      renderDetailPanel: () => <Box>Details</Box>,
+      rowActionMenuItems: () => <MenuItem>Test</MenuItem>
+    }), []);
+    return <DataView availableLayouts={listLayoutOnly} cardLayoutOptions={cardLayoutOptions} getData={getData} />;
+  }
+}`,...(He=(Ye=E.parameters)==null?void 0:Ye.docs)==null?void 0:He.source}}};var qe,_e,Ue;N.parameters={...N.parameters,docs:{...(qe=N.parameters)==null?void 0:qe.docs,source:{originalSource:`{
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const renderDetailPanel = useCallback<Required<CardLayoutProps<Person>>["renderDetailPanel"]>(({
+      row
+    }) => row.age % 2 ? <Box>Detail content</Box> : false, []);
+    const rowActionMenuItems = useCallback(() => <MenuItem>Test</MenuItem>, []);
+    const cardLayoutOptions = useMemo(() => ({
+      itemProps: compactItemProps,
+      renderDetailPanel,
+      rowActionMenuItems
+    }), [renderDetailPanel, rowActionMenuItems]);
+    return <DataView availableLayouts={listLayoutOnly} cardLayoutOptions={cardLayoutOptions} getData={getData} />;
+  }
+}`,...(Ue=(_e=N.parameters)==null?void 0:_e.docs)==null?void 0:Ue.source}}};var Je,Qe,Xe;W.parameters={...W.parameters,docs:{...(Je=W.parameters)==null?void 0:Je.docs,source:{originalSource:`{
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: [{
+        accessorKey: "order",
+        header: "ID",
+        enableColumnFilter: false,
+        grow: true
+      }, {
+        accessorKey: "name",
+        header: "Name"
+      }, {
+        accessorKey: "city",
+        header: "City"
+      }],
+      hasColumnResizing: true
+    }), []);
+    return <DataView availableLayouts={tableLayoutOnly} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(Xe=(Qe=W.parameters)==null?void 0:Qe.docs)==null?void 0:Xe.source}}};var Ze,ea,aa;$.parameters={...$.parameters,docs:{...(Ze=$.parameters)==null?void 0:Ze.docs,source:{originalSource:`{
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData
+    } = useDataCallbacks(data, setData);
+    const rowActions = useCallback(() => <Button label="Action" onClick={onClick} size="small" variant="secondary" />, []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: [{
+        accessorKey: "order",
+        header: "ID",
+        enableColumnFilter: false,
+        grow: true
+      }, {
+        accessorKey: "name",
+        header: "Name"
+      }, {
+        accessorKey: "city",
+        header: "City"
+      }],
+      hasColumnResizing: true,
+      rowActionButtons: rowActions
+    }), [rowActions]);
+    return <DataView availableLayouts={tableLayoutOnly} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(aa=(ea=$.parameters)==null?void 0:ea.docs)==null?void 0:aa.source}}};const La=["Default","TableOnly","ListAndGrid","ListOnly","GridOnly","Everything","ExpandableRowsAndCards","Truncation","Empty","CustomFilters","FilterWithCustomRender","CustomFilterWithDefaultVariant","AdditionalActions","ColumnGrowDemo","LoadMore","PaginationHook","StackCards","CompactCards","GrowColumnWithoutActions","GrowColumnWithActions"],Ka=Object.freeze(Object.defineProperty({__proto__:null,AdditionalActions:z,ColumnGrowDemo:B,CompactCards:N,CustomFilterWithDefaultVariant:T,CustomFilters:j,Default:w,Empty:k,Everything:v,ExpandableRowsAndCards:M,FilterWithCustomRender:V,GridOnly:O,GrowColumnWithActions:$,GrowColumnWithoutActions:W,ListAndGrid:x,ListOnly:A,LoadMore:F,PaginationHook:K,StackCards:E,TableOnly:P,Truncation:I,__namedExportsOrder:La,default:ma},Symbol.toStringTag,{value:"Module"}));export{Ka as D,w as a};