@okta/odyssey-react-mui 1.52.1 → 1.53.0

package/dist/assets/DataView.stories-CzFmgLtp.js

@@ -0,0 +1,439 @@
+import{r as t,j as a}from"./iframe-CQjT1fxh.js";import{O as ua}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{p as ca,d as h,c as m,f as da,r as ma}from"./personData-CV-uVWcJ.js";import{M as C}from"./Box-B3rdnavX.js";import{M as H}from"./EmptyState-B1EvR4rn.js";import{M as d}from"./Button-0PI4ljbj.js";import{M as S}from"./MenuItem-Cmq8TfUJ.js";import{M as ha}from"./Status-DyDCzqET.js";import{d as pa,a as Q}from"./constants-CGUp4oSR.js";import{M as c}from"./DataView-BS0E464o.js";import{M as ga,a as ya}from"./Refresh-ZZ_nNcXg.js";const{action:q}=__STORYBOOK_MODULE_ACTIONS__,{fn:ba}=__STORYBOOK_MODULE_TEST__,Ca={component:c,decorators:[ua],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:ca},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:Q},availableLayouts:{control:"check",options:Q},columns:{name:"tableLayoutOptions.columns"},initialDensity:{control:"select",options:pa,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:ba(),paginationType:"paged",resultsPerPage:20},render:function(e){const[s,o]=t.useState(h),{getData:r,onReorderRows:i,onChangeRowSelection:l}=p(s,o);return a.jsx(c,{additionalActionButton:e.hasAdditionalActionButton?Sa:void 0,additionalActionMenuItems:e.hasAdditionalActionMenuItems?fa:void 0,availableLayouts:e.availableLayouts,bulkActionMenuItems:e.hasActionMenuItems?_:void 0,cardLayoutOptions:{itemProps:J,rowActionMenuItems:e.hasActionMenuItems?_:void 0,maxGridColumns:e.maxGridColumns},currentPage:e.currentPage,emptyPlaceholder:e.hasCustomEmptyPlaceholder?ia: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?wa:void 0,onChangeRowSelection:l,onReorderRows:i,paginationType:e.paginationType,resultsPerPage:e.resultsPerPage,searchDelayTime:e.searchDelayTime,tableLayoutOptions:{columns:m,hasSorting:e.hasSorting,rowActionMenuItems:e.hasActionMenuItems?_:void 0,rowActionButtons:e.hasActionButtons?La:void 0,renderDetailPanel:void 0,hasColumnVisibility:e.hasColumnVisibility,hasColumnResizing:e.hasColumnResizing,hasChangeableDensity:e.hasChangeableDensity,initialDensity:e.initialDensity},totalRows:e.totalRows})}},R=q("onClick"),G=["table"],U=["list"],Da=["grid"],Ra=["table","grid"],p=(n,e)=>{const s=t.useCallback(({...i})=>da({data:n,...i}),[n]),o=t.useCallback(({...i})=>{const l=ma({data:n,...i});e(l)},[n,e]),r=t.useCallback(i=>{Object.keys(i).length>0&&q("onChangeRowSelection")(`${Object.keys(i).length} selected`)},[]);return{getData:s,onReorderRows:o,onChangeRowSelection:r}},Sa=a.jsx(d,{label:"Add widget",variant:"primary"}),fa=a.jsxs(a.Fragment,{children:[a.jsx(S,{onClick:R,children:"Additional action 1"}),a.jsx(S,{onClick:R,children:"Additional action 2"})]}),_=()=>a.jsxs(a.Fragment,{children:[a.jsx(S,{onClick:R,children:"Action 1"}),a.jsx(S,{onClick:R,children:"Action 2"})]}),La=()=>a.jsxs(C,{sx:{display:"flex",alignItems:"center",marginInlineEnd:2},children:[a.jsx(d,{ariaLabel:"Pause",endIcon:a.jsx(ga,{}),onClick:R,size:"small",variant:"floating"}),a.jsx(d,{ariaLabel:"Refresh",endIcon:a.jsx(ya,{}),onClick:R,size:"small",variant:"floating"})]}),ia=a.jsx(H,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(d,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(d,{label:"Secondary",variant:"secondary"})}),wa=a.jsx(H,{description:"You should try searching or filtering for something else.",heading:"Whoops, there's nothing here!"}),J=n=>({overline:`${n.city}, ${n.state}`,title:n.name,description:`${n.name} is ${n.age} years old.`,children:a.jsx(ha,{label:n.risk.charAt(0).toUpperCase()+n.risk.slice(1),severity:n.risk==="low"?"success":n.risk==="medium"?"warning":"error"})}),la={id:"startLetter",label:"Name starting with...",render:n=>a.jsxs(C,{sx:{display:"flex",flexDirection:"column",alignContent:"stretch",gap:2},children:[a.jsx(C,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(d,{isFullWidth:!0,label:"Vowel",onClick:()=>n({filterId:"startLetter",value:"vowel"}),variant:"secondary"})}),a.jsx(C,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(d,{isFullWidth:!0,label:"Consonant",onClick:()=>n({filterId:"startLetter",value:"consonant"}),variant:"secondary"})}),a.jsx(C,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(d,{isFullWidth:!0,label:"Any",onClick:()=>n({filterId:"startLetter",value:"any"}),variant:"secondary"})})]})},L={args:{}},w={args:{availableLayouts:G}},P={args:{availableLayouts:["list","grid"]}},O={args:{availableLayouts:U}},A={args:{availableLayouts:Da}},M={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"}},x={render:function(e){const[s,o]=t.useState(h),{getData:r,onReorderRows:i,onChangeRowSelection:l}=p(s,o),u=t.useCallback(({row:y})=>a.jsxs(C,{children:["This is additional content for row ",y.id]}),[]),g=t.useMemo(()=>({columns:m,renderDetailPanel:u}),[u]);return a.jsx(c,{availableLayouts:Ra,cardLayoutOptions:{itemProps:J,renderDetailPanel:u},getData:r,hasRowSelection:e.hasRowSelection,onChangeRowSelection:l,onReorderRows:i,tableLayoutOptions:g})}},v={render:function(){const e=t.useCallback(()=>{const o=[];return Array(10).fill(null).forEach(()=>{o.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."})}),o},[]),s=t.useMemo(()=>({columns:[{accessorKey:"truncated",header:"Truncated"},{accessorKey:"wrapped",header:"Wrapped",hasTextWrapping:!0}],hasColumnResizing:!0}),[]);return a.jsx(c,{getData:e,tableLayoutOptions:s})}},I={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r,...i}){const[l,u]=t.useState(h),{onReorderRows:g,onChangeRowSelection:y}=p(l,u),b=t.useMemo(()=>a.jsx(H,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(d,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(d,{label:"Secondary",variant:"secondary"})}),[]),D=t.useMemo(()=>({columns:m,hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r}),[e,s,o,r]);return a.jsx(c,{...i,emptyPlaceholder:b,getData:()=>[],onChangeRowSelection:y,onReorderRows:g,tableLayoutOptions:D})}},k={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r,...i}){const[l,u]=t.useState(h),{getData:g,onReorderRows:y}=p(l,u),b=t.useMemo(()=>[...m,la],[]),D=t.useMemo(()=>({columns:m,hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r}),[e,s,o,r]);return a.jsx(c,{...i,filters:b,getData:g,onReorderRows:y,tableLayoutOptions:D})}},V={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r,...i}){const[l,u]=t.useState(h),{onReorderRows:g}=p(l,u),y=t.useMemo(()=>[...m.map(Y=>({...Y,enableColumnFilter:!1})),la],[]),b=t.useMemo(()=>({columns:m,hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r}),[e,s,o,r]),D=t.useCallback(()=>[],[]);return a.jsx(c,{...i,cardLayoutOptions:{itemProps:J},emptyPlaceholder:ia,filters:y,getData:D,onReorderRows:g,tableLayoutOptions:b})}},j={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r,...i}){const[l,u]=t.useState(h),{getData:g,onReorderRows:y,onChangeRowSelection:b}=p(l,u),D=t.useMemo(()=>[...m.filter(f=>f.id!=="visit"),{id:"startLetter",label:"Starting letter ",render:f=>a.jsxs(C,{children:[a.jsx(d,{label:"🛰️ Vowel",onClick:()=>f({filterId:"startLetter",value:"vowel"}),variant:"secondary"}),a.jsx(d,{label:"🛸 Consonant",onClick:()=>f({filterId:"startLetter",value:"consonant"}),variant:"secondary"}),a.jsx(d,{label:"🤷‍♂️ Any",onClick:()=>f({filterId:"startLetter",value:""}),variant:"secondary"})]})}],[]),Y=t.useMemo(()=>({columns:m,hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r}),[e,s,o,r]);return a.jsx(c,{...i,filters:D,getData:g,onChangeRowSelection:b,onReorderRows:y,tableLayoutOptions:Y})}},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:s,hasColumnVisibility:o,hasSorting:r,...i}){const[l,u]=t.useState(h),{getData:g}=p(l,u),y=t.useMemo(()=>[...m,{id:"startLetter",label:"Starting letter",variant:"select",options:[{label:"Vowel",value:"vowel"},{label:"Consonant",value:"consonant"}]}],[]),b=t.useMemo(()=>({columns:m,hasChangeableDensity:e,hasColumnResizing:s,hasColumnVisibility:o,hasSorting:r}),[e,s,o,r]);return a.jsx(c,{...i,filters:y,getData:g,tableLayoutOptions:b})}},z={args:{hasAdditionalActionButton:!0,hasAdditionalActionMenuItems:!0}},F={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}],[]),s=t.useMemo(()=>({hasColumnResizing:!0,hasSorting:!0,columns:[{accessorKey:"name",header:"Name",grow:!0},{accessorKey:"apps",header:"Apps"},{accessorKey:"users",header:"Users assigned"}],rowActionMenuItems:_}),[]);return a.jsx(c,{getData:e,hasSearch:!0,tableLayoutOptions:s})}},B={args:{availableLayouts:G,hasPagination:!0,paginationType:"loadMore",hasFilters:!0}},E={render:function(){const[e,s]=t.useState(h),{getData:o}=p(e,s),r=t.useCallback(l=>{q("onPaginationChange")(l)},[]),i=t.useMemo(()=>({columns:m}),[]);return a.jsx(c,{getData:o,hasPagination:!0,onPaginationChange:r,tableLayoutOptions:i})}},Pa=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"})}),K={render:function(){const[e,s]=t.useState(h),{getData:o}=p(e,s),r=t.useMemo(()=>({itemProps:Pa,renderDetailPanel:()=>a.jsx(C,{children:"Details"}),rowActionMenuItems:()=>a.jsx(S,{children:"Test"})}),[]);return a.jsx(c,{availableLayouts:U,cardLayoutOptions:r,getData:o})}},Oa=n=>({title:n.name,variant:"compact",image:a.jsx("img",{alt:"Logo",src:"https://placehold.co/400"})}),N={render:function(){const[e,s]=t.useState(h),{getData:o}=p(e,s),r=t.useCallback(({row:u})=>u.age%2?a.jsx(C,{children:"Detail content"}):!1,[]),i=t.useCallback(()=>a.jsx(S,{children:"Test"}),[]),l=t.useMemo(()=>({itemProps:Oa,renderDetailPanel:r,rowActionMenuItems:i}),[r,i]);return a.jsx(c,{availableLayouts:U,cardLayoutOptions:l,getData:o})}},$={render:function(){const[e,s]=t.useState(h),{getData:o}=p(e,s),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:G,getData:o,tableLayoutOptions:r})}},W={render:function(){const[e,s]=t.useState(h),{getData:o}=p(e,s),r=t.useCallback(()=>a.jsx(d,{label:"Action",onClick:R,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:G,getData:o,tableLayoutOptions:i})}};var X,Z,ee;L.parameters={...L.parameters,docs:{...(X=L.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {}
+}`,...(ee=(Z=L.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var ae,te,ne;w.parameters={...w.parameters,docs:{...(ae=w.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: tableLayoutOnly
+  }
+}`,...(ne=(te=w.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var se,oe,re;P.parameters={...P.parameters,docs:{...(se=P.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: ["list", "grid"]
+  }
+}`,...(re=(oe=P.parameters)==null?void 0:oe.docs)==null?void 0:re.source}}};var ie,le,ue;O.parameters={...O.parameters,docs:{...(ie=O.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: listLayoutOnly
+  }
+}`,...(ue=(le=O.parameters)==null?void 0:le.docs)==null?void 0:ue.source}}};var ce,de,me;A.parameters={...A.parameters,docs:{...(ce=A.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: gridLayoutOnly
+  }
+}`,...(me=(de=A.parameters)==null?void 0:de.docs)==null?void 0:me.source}}};var he,pe,ge;M.parameters={...M.parameters,docs:{...(he=M.parameters)==null?void 0:he.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"
+  }
+}`,...(ge=(pe=M.parameters)==null?void 0:pe.docs)==null?void 0:ge.source}}};var ye,be,Ce;x.parameters={...x.parameters,docs:{...(ye=x.parameters)==null?void 0:ye.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} />;
+  }
+}`,...(Ce=(be=x.parameters)==null?void 0:be.docs)==null?void 0:Ce.source}}};var De,Re,Se;v.parameters={...v.parameters,docs:{...(De=v.parameters)==null?void 0:De.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} />;
+  }
+}`,...(Se=(Re=v.parameters)==null?void 0:Re.docs)==null?void 0:Se.source}}};var fe,Le,we;I.parameters={...I.parameters,docs:{...(fe=I.parameters)==null?void 0:fe.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} />;
+  }
+}`,...(we=(Le=I.parameters)==null?void 0:Le.docs)==null?void 0:we.source}}};var Pe,Oe,Ae;k.parameters={...k.parameters,docs:{...(Pe=k.parameters)==null?void 0:Pe.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, startLetterFilter], []);
+    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} />;
+  }
+}`,...(Ae=(Oe=k.parameters)==null?void 0:Oe.docs)==null?void 0:Ae.source}}};var Me,xe,ve;V.parameters={...V.parameters,docs:{...(Me=V.parameters)==null?void 0:Me.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 {
+      onReorderRows
+    } = useDataCallbacks(data, setData);
+    const filters = useMemo(() => [
+    // ensure that filter cleansing occurs in initial filter comparison
+    ...personColumns.map(column => ({
+      ...column,
+      enableColumnFilter: false
+    })), startLetterFilter], []);
+    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
+      columns: personColumns,
+      hasChangeableDensity: hasChangeableDensity,
+      hasColumnResizing: hasColumnResizing,
+      hasColumnVisibility: hasColumnVisibility,
+      hasSorting: hasSorting
+    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
+    const getData = useCallback(() => [], []);
+    return <DataView {...props} cardLayoutOptions={{
+      itemProps: itemProps
+    }} emptyPlaceholder={customEmptyPlaceholder} filters={filters} getData={getData} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
+  }
+}`,...(ve=(xe=V.parameters)==null?void 0:xe.docs)==null?void 0:ve.source}}};var Ie,ke,Ve;j.parameters={...j.parameters,docs:{...(Ie=j.parameters)==null?void 0:Ie.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} />;
+  }
+}`,...(Ve=(ke=j.parameters)==null?void 0:ke.docs)==null?void 0:Ve.source}}};var je,Te,ze;T.parameters={...T.parameters,docs:{...(je=T.parameters)==null?void 0:je.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} />;
+  }
+}`,...(ze=(Te=T.parameters)==null?void 0:Te.docs)==null?void 0:ze.source}}};var Fe,Be,Ee;z.parameters={...z.parameters,docs:{...(Fe=z.parameters)==null?void 0:Fe.docs,source:{originalSource:`{
+  args: {
+    hasAdditionalActionButton: true,
+    hasAdditionalActionMenuItems: true
+  }
+}`,...(Ee=(Be=z.parameters)==null?void 0:Be.docs)==null?void 0:Ee.source}}};var Ke,Ne,$e;F.parameters={...F.parameters,docs:{...(Ke=F.parameters)==null?void 0:Ke.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} />;
+  }
+}`,...($e=(Ne=F.parameters)==null?void 0:Ne.docs)==null?void 0:$e.source}}};var We,_e,Ge;B.parameters={...B.parameters,docs:{...(We=B.parameters)==null?void 0:We.docs,source:{originalSource:`{
+  args: {
+    availableLayouts: tableLayoutOnly,
+    hasPagination: true,
+    paginationType: "loadMore",
+    hasFilters: true
+  }
+}`,...(Ge=(_e=B.parameters)==null?void 0:_e.docs)==null?void 0:Ge.source}}};var Ye,He,qe;E.parameters={...E.parameters,docs:{...(Ye=E.parameters)==null?void 0:Ye.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} />;
+  }
+}`,...(qe=(He=E.parameters)==null?void 0:He.docs)==null?void 0:qe.source}}};var Ue,Je,Qe;K.parameters={...K.parameters,docs:{...(Ue=K.parameters)==null?void 0:Ue.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} />;
+  }
+}`,...(Qe=(Je=K.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source}}};var Xe,Ze,ea;N.parameters={...N.parameters,docs:{...(Xe=N.parameters)==null?void 0:Xe.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} />;
+  }
+}`,...(ea=(Ze=N.parameters)==null?void 0:Ze.docs)==null?void 0:ea.source}}};var aa,ta,na;$.parameters={...$.parameters,docs:{...(aa=$.parameters)==null?void 0:aa.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} />;
+  }
+}`,...(na=(ta=$.parameters)==null?void 0:ta.docs)==null?void 0:na.source}}};var sa,oa,ra;W.parameters={...W.parameters,docs:{...(sa=W.parameters)==null?void 0:sa.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} />;
+  }
+}`,...(ra=(oa=W.parameters)==null?void 0:oa.docs)==null?void 0:ra.source}}};const Aa=["Default","TableOnly","ListAndGrid","ListOnly","GridOnly","Everything","ExpandableRowsAndCards","Truncation","Empty","CustomFilters","CustomFilterWithEmptyData","FilterWithCustomRender","CustomFilterWithDefaultVariant","AdditionalActions","ColumnGrowDemo","LoadMore","PaginationHook","StackCards","CompactCards","GrowColumnWithoutActions","GrowColumnWithActions"],Ka=Object.freeze(Object.defineProperty({__proto__:null,AdditionalActions:z,ColumnGrowDemo:F,CompactCards:N,CustomFilterWithDefaultVariant:T,CustomFilterWithEmptyData:V,CustomFilters:k,Default:L,Empty:I,Everything:M,ExpandableRowsAndCards:x,FilterWithCustomRender:j,GridOnly:A,GrowColumnWithActions:W,GrowColumnWithoutActions:$,ListAndGrid:P,ListOnly:O,LoadMore:B,PaginationHook:E,StackCards:K,TableOnly:w,Truncation:v,__namedExportsOrder:Aa,default:Ca},Symbol.toStringTag,{value:"Module"}));export{Ka as D,L as a};