@okta/odyssey-react-mui 1.55.0 → 1.57.0

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

@@ -1,439 +0,0 @@
-import{r as t,j as a}from"./iframe-Cav9rlxr.js";import{O as ua}from"./OdysseyStorybookThemeDecorator-Bokwb0ot.js";import{p as ca,d as h,c as m,f as da,r as ma}from"./personData-BPEVF-Qf.js";import{M as C}from"./Box-B-6W36qW.js";import{M as H}from"./EmptyState-Cw97nR9g.js";import{M as d}from"./Button-BX9EXxBV.js";import{M as S}from"./MenuItem-C_SjZMbY.js";import{M as ha}from"./Status-BDUUaZsQ.js";import{d as pa,a as Q}from"./constants-CGUp4oSR.js";import{M as c}from"./DataView-CjTfaBGG.js";import{M as ga,a as ya}from"./Refresh-4GRZURAB.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};