@okta/odyssey-react-mui 1.44.0 → 1.45.0

package/dist/assets/DataView _labs_-DZnmSNME.js

@@ -0,0 +1,332 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as r}from"./index-BeeV6X6A.js";import"./index-CtY5BB1N.js";import{M as a,T as s,S as l,D as d,C as c}from"./index-BpVuOoKb.js";import{D as i,a as p}from"./DataView _labs_.stories-CusuCHkc.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-BzLY45Eo.js";import"./iframe-C-RQ_TKY.js";import"./DocsRenderer-CFRXHY34-DEwq8OPY.js";import"./client-akVMpN0m.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index-B885ELRa.js";import"./v4-BOvFkHkt.js";import"./index-BJMTVygn.js";import"./personData-Ci-ru1S9.js";import"./Status-BYBMXN_H.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-BOK8DR8m.js";import"./createTheme-BmPXDA4p.js";import"./createSvgIcon-DiC7XVU3.js";import"./SvgIcon-BQAg6Jm7.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./chipClasses-BMWKl3Eu.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./buttonBaseClasses-CSPKg76d.js";import"./DataView-BQBP0FCs.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./useTheme-C05bJKih.js";import"./Callout-CaNoXhaj.js";import"./Link-ClKgpBXG.js";import"./Typography-D7-qxuiy.js";import"./typographyClasses-D8vr2n3l.js";import"./ExternalLink-DTdulgUc.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./Typography-CiNRLenM.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./AlertTitle-DlG4YQWR.js";import"./useSlot-F4Qz2Wzp.js";import"./resolveComponentProps-DMpKAZvD.js";import"./isHostComponent-DVu5iVWx.js";import"./Close-DA_Sph0R.js";import"./IconButton-CK9Do7vj.js";import"./Paper-DbAuDGNI.js";import"./alertTitleClasses-CSPeaunQ.js";import"./useScrollIndication-BJW9jXaC.js";import"./EmptyState-DQoihCwU.js";import"./DataFilters-DVey1xPT.js";import"./Autocomplete-UE4wqxn0.js";import"./useAutocomplete-C7VK9p4p.js";import"./Field-ilPS333M.js";import"./List-W5kRT_jR.js";import"./ListContext-C02XM7tn.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./formLabelClasses-xMgYguuN.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase--xDu7aWm.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./GlobalStyles-BxDN_5FT.js";import"./Autocomplete-MfScEzbR.js";import"./ArrowDropDown-bSngWMh1.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./Popper-CwLH-7YW.js";import"./Portal-Bvf2g5iG.js";import"./popper-CMBiYTiD.js";import"./useId-cMcvCE23.js";import"./useControlled-NQulfz4l.js";import"./ListSubheader-DXKE8lW0.js";import"./Checkbox-BTj1hXUa.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./Checkbox-luq82K1t.js";import"./SwitchBase-Bja5dn-O.js";import"./checkboxClasses-Dtdq1kQG.js";import"./CheckboxGroup-Cgc2chES.js";import"./FormGroup-BaCH3e06.js";import"./formGroupClasses-D9ChLj7o.js";import"./Radio-D85jg1Ri.js";import"./Radio-Bi1_KmSD.js";import"./radioClasses-f3ayyf7y.js";import"./createChainedFunction-BO_9K8Jh.js";import"./RadioGroup-BS6oYUQf.js";import"./SearchField-jc9ws93I.js";import"./OdysseyThemeProvider-aR5shtx6.js";import"./useContrastMode-BthoHtLy.js";import"./tooltipClasses-C74HjonW.js";import"./tableRowClasses-inqOIkjd.js";import"./menuItemClasses-DFm3-Sf1.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./buttonClasses-DtIJBSf4.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./WarningFilled-Y3Vw7n_w.js";import"./Check-BmyOKfcL.js";import"./Close-DA7fBExu.js";import"./ChevronDown-BnAWuc8V.js";import"./index-CpbQl8EB.js";import"./InputAdornment-CFgP75Dd.js";import"./Search-BvCmvJcV.js";import"./Tag-CjPSrGAL.js";import"./TagList-BQKiA1TW.js";import"./TextField-CZ0hstP2.js";import"./Button-BOzIr8Jh.js";import"./BaseButton-B5c4cgt8.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./Button-BqwcAVQ-.js";import"./Filter-BAXcmMyf.js";import"./Menu-CGJO1mMf.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./MenuList-BboivbXC.js";import"./MenuItem-DjSqFwdt.js";import"./Trans-DZ9nii1x.js";import"./ChevronRight-BB0bQIRj.js";import"./MenuButton-OjJFnmOD.js";import"./BaseMenuButton-DbGGXXbP.js";import"./MenuContext-DKMyPMNY.js";import"./More-axx2rGKU.js";import"./CircularProgress-Ur28_31H.js";import"./CircularProgress-DNk4kmx6.js";import"./Card-B5eIV1vH.js";import"./Skeleton-BJLiCr2o.js";import"./colorManipulator-O7SU8zMv.js";import"./CardActionArea-yvoWcAsF.js";import"./ChevronUp-B9JV-jmd.js";import"./MenuItem-CuP47MJ-.js";import"./List-0o0OI1E9.js";import"./i18next-DbMy2do-.js";import"./index.esm-D7MwfoQM.js";import"./DialogContent-C_FnZ5ZS.js";import"./DialogTitle-CLDQZ0bg.js";import"./useMobilePicker-CfUl5sFz.js";import"./Select-DVJCNQIV.js";import"./useThemeProps-BG38P4ul.js";import"./Collapse-P1H1b4lO.js";import"./Divider-CsWa3KCo.js";import"./DateTimePicker-CnXcHc5u.js";import"./Tabs-ChAj4m0g.js";import"./DatePicker-DIRg7n4d.js";import"./Show-qQzUH4Sq.js";import"./Pagination-CgxBDBwQ.js";import"./ArrowRight-DCIAiEpA.js";import"./constants-CyailK6t.js";import"./Refresh-CPgGX1hz.js";function o(t){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:i}),`
+`,e.jsx(s,{of:i}),`
+`,e.jsx(l,{of:i}),`
+`,e.jsx(d,{of:i}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"DataView"})," is a powerful and flexible way to display and interact with data in various formats. It includes the ability to display data as a table, card list, or card grid, and can be used to create complex data representations with features like filtering, sorting, pagination, and more."]}),`
+`,e.jsx(n.h2,{id:"overview",children:"Overview"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DataView"})," was originally just a table, built on top of Material-React-Table v2 (MRT) and modified to provide additional functionality and styling to match the Okta Odyssey design system. Now it provides two additional view modes, and is designed to be easy to set up while remaining highly customizable to meet diverse data display needs."]}),`
+`,e.jsx(n.h2,{id:"getting-started",children:"Getting Started"}),`
+`,e.jsxs(n.p,{children:["To use the ",e.jsx(n.code,{children:"DataView"}),", you'll need to provide at minimum a ",e.jsx(n.code,{children:"getData"})," function. Here's a basic example:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { DataView, DataViewProps } from "@okta/odyssey-react-mui/labs";
+import { columns, data } from "./yourDataFile";
+
+const YourComponent = () => {
+  const getData = useCallback(
+    ({ ...props }: DataGetDataType) => {
+      return filterData({ data, ...props });
+    },
+    [data],
+  );
+
+  return (
+    <DataView
+      getData={getData}
+      hasRowSelection
+      hasPagination
+      hasFilters
+      hasSearch
+    />
+  );
+};
+`})}),`
+`,e.jsx(n.p,{children:"This will create a fully functional data view with filtering, searching, and pagination capabilities."}),`
+`,e.jsx(n.h2,{id:"key-features",children:"Key Features"}),`
+`,e.jsx(n.h3,{id:"layouts",children:"Layouts"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DataView"})," supports multiple layouts:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Table: A traditional tabular layout"}),`
+`,e.jsx(n.li,{children:"List: A vertical stack of cards"}),`
+`,e.jsx(n.li,{children:"Grid: A grid of cards"}),`
+`]}),`
+`,e.jsxs(n.p,{children:["You can control available layouts using the ",e.jsx(n.code,{children:"availableLayouts"})," prop:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  availableLayouts={["table", "list", "grid"]}
+  // ... other props
+/>
+`})}),`
+`,e.jsxs(n.p,{children:["If you only include one layout in the array, the ",e.jsx(n.code,{children:"DataView"})," will be locked to that layout and won't present the UI for changing it."]}),`
+`,e.jsx(n.h3,{id:"filtering-and-searching",children:"Filtering and Searching"}),`
+`,e.jsxs(n.p,{children:["Enable filtering and searching with the ",e.jsx(n.code,{children:"hasFilters"})," and ",e.jsx(n.code,{children:"hasSearch"})," props:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasFilters
+  hasSearch
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"pagination",children:"Pagination"}),`
+`,e.jsxs(n.p,{children:["Control pagination with the ",e.jsx(n.code,{children:"hasPagination"}),", ",e.jsx(n.code,{children:"paginationType"}),", ",e.jsx(n.code,{children:"currentPage"}),", and ",e.jsx(n.code,{children:"resultsPerPage"})," props:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasPagination
+  paginationType="paged"
+  currentPage={1}
+  resultsPerPage={20}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"row-selection",children:"Row Selection"}),`
+`,e.jsxs(n.p,{children:["Enable row selection with the ",e.jsx(n.code,{children:"hasRowSelection"})," prop and handle selection changes with ",e.jsx(n.code,{children:"onChangeRowSelection"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasRowSelection
+  onChangeRowSelection={(rowSelection) => {
+    console.log(\`\${Object.keys(rowSelection).length} rows selected\`);
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"row-reordering",children:"Row Reordering"}),`
+`,e.jsxs(n.p,{children:["Enable row reordering with the ",e.jsx(n.code,{children:"hasRowReordering"})," prop and handle reordering with ",e.jsx(n.code,{children:"onReorderRows"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasRowReordering
+  onReorderRows={({ rowId, newRowIndex }) => {
+    // Handle row reordering logic
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"custom-empty-states",children:"Custom Empty States"}),`
+`,e.jsxs(n.p,{children:["Provide custom empty states for when there's no data or no search results. The ",e.jsx(n.code,{children:"DataView"})," component provides two distinct states for handling these scenarios:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"isEmpty"})}),": Represents a state where no data exists at all. This is often seen in onboarding scenarios, such as when a user creates a new organization and no resources are available yet. For example:"]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsx(n.p,{children:`"You don't have any widgets! Create one?"`}),`
+`]}),`
+`,e.jsx(n.p,{children:"Use this state to guide users toward actions that populate data."}),`
+`]}),`
+`,e.jsxs(n.li,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"isNoResults"})}),': Indicates that data exists but no matches were found for the current query or filters. For instance, if a user searches for "asdf" and no results are returned, the message might be:']}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsx(n.p,{children:'"No data found for that query."'}),`
+`]}),`
+`,e.jsx(n.p,{children:"This state helps users understand that their search or filter criteria need adjustment."}),`
+`]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["If ",e.jsx(n.code,{children:"emptyPlaceholder"})," is not defined, ",e.jsx(n.code,{children:"noResultsPlaceholder"})," will act as a fallback for the ",e.jsx(n.code,{children:"isEmpty"})," state instead."]}),`
+`,e.jsx(n.p,{children:"Here are examples demonstrating both cases:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  isEmpty={true | false}
+  emptyPlaceholder={<EmptyState heading="No data available" />}
+  isNoResults={true | false}
+  noResultsPlaceholder={
+    <EmptyState heading="No result found for that query." />
+  }
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"tableoptions",children:"TableOptions"}),`
+`,e.jsxs(n.p,{children:["You can pass a ",e.jsx(n.code,{children:"tableLayoutOptions"})," prop to customize the table-specific behavior and appearance. Here's a detailed look at the available options:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  tableLayoutOptions={{
+    columns: columnDefinitions,
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasSorting: true,
+    initialDensity: "comfortable",
+    renderDetailPanel: ({ row }) => <DetailPanel data={row.original} />,
+    rowActionButtons: (row) => (
+      <>
+        <Button
+          endIcon={<EditIcon />}
+          ariaLabel="Edit"
+          size="small"
+          variant="floating"
+          onClick={() => handleEdit(row.original)}
+        />
+        <Button
+          endIcon={<DeleteIcon />}
+          ariaLabel="Delete"
+          size="small"
+          variant="floating"
+          onClick={() => handleDelete(row.original)}
+        />
+      </>
+    ),
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleAction1(row.original)}>
+          Action 1
+        </MenuItem>
+        <MenuItem onClick={() => handleAction2(row.original)}>
+          Action 2
+        </MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"Let's break down these options:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"columns"}),": Array of column definitions (required)."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasChangeableDensity"}),": Allows users to change row density (compact, comfortable, spacious)."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasColumnResizing"}),": Enables column resizing."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasColumnVisibility"}),": Allows users to show/hide columns."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasSorting"}),": Enables column sorting."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"initialDensity"}),": Sets the initial row density."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"renderDetailPanel"}),": Function to render an expandable detail panel for each row."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionButtons"}),": Function to render action buttons for each row."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionMenuItems"}),": Function to render menu items for additional row actions."]}),`
+`]}),`
+`,e.jsx(n.h3,{id:"stackoptions",children:"StackOptions"}),`
+`,e.jsxs(n.p,{children:["When using ",e.jsx(n.code,{children:"DataView"})," with stack layouts, you can pass a ",e.jsx(n.code,{children:"cardLayoutOptions"})," prop to customize the card-based layout:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  cardLayoutOptions={{
+    itemProps: (row) => ({
+      overline: \`\${row.category}\`,
+      title: row.name,
+      description: row.description,
+      image: <img src={row.imageUrl} alt={row.name} />,
+      children: <Status label={row.status} severity="success" />,
+      detailPanel: <DetailPanel data={row} />,
+      button: (
+        <Button label="View Details" onClick={() => handleViewDetails(row)} />
+      ),
+      menuButtonChildren: (
+        <>
+          <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+          <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+        </>
+      ),
+    }),
+    maxGridColumns: 4,
+    renderDetailPanel: ({ row }) => <DetailPanel data={row} />,
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+        <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"Here's what these options do:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"itemProps"}),": Function that returns props for the ",e.jsx(n.code,{children:"DataCard"})," component for each data item."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"maxGridColumns"}),": Maximum number of columns to display in grid layout."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"renderDetailPanel"}),": Function to render an expandable detail panel for each card."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionMenuItems"}),": Function to render menu items for card actions."]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"data-handling-functions",children:"Data Handling Functions"}),`
+`,e.jsx(n.h3,{id:"getdata",children:"getData"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"getData"})," function is a crucial part of the DataView. It's responsible for fetching and filtering data based on the current state of the component. Here's the type definition:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type DataGetDataType = {
+  filters?: DataFilter[];
+  page?: number;
+  resultsPerPage?: number;
+  search?: string;
+  sort?: MRT_SortingState;
+};
+`})}),`
+`,e.jsxs(n.p,{children:["Your ",e.jsx(n.code,{children:"getData"})," function should handle these parameters and return the appropriate data. For example:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const getData = useCallback(
+  ({ filters, page, resultsPerPage, search, sort }: DataGetDataType) => {
+    let filteredData = data;
+
+    // Apply filters
+    if (filters) {
+      filteredData = filteredData.filter((row) =>
+        filters.every((filter) => {
+          // Implement filter logic here
+        }),
+      );
+    }
+
+    // Apply search
+    if (search) {
+      filteredData = filteredData.filter((row) =>
+        Object.values(row).some((value) =>
+          value.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+      );
+    }
+
+    // Apply sorting
+    if (sort && sort.length > 0) {
+      filteredData.sort((a, b) => {
+        // Implement sorting logic here
+      });
+    }
+
+    // Apply pagination
+    const startIndex = (page - 1) * resultsPerPage;
+    const endIndex = startIndex + resultsPerPage;
+    return filteredData.slice(startIndex, endIndex);
+  },
+  [data],
+);
+`})}),`
+`,e.jsx(n.h3,{id:"onchangerowselection",children:"onChangeRowSelection"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"onChangeRowSelection"})," function is called whenever the row selection state changes. It receives the current selection state as an argument:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const onChangeRowSelection = useCallback(
+  (rowSelection: DataRowSelectionState) => {
+    console.log(\`\${Object.keys(rowSelection).length} rows selected\`);
+    // Perform actions based on the selected rows
+  },
+  [],
+);
+`})}),`
+`,e.jsx(n.h3,{id:"onreorderrows",children:"onReorderRows"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"onReorderRows"})," function is called when a row is reordered. It receives an object with the ",e.jsx(n.code,{children:"rowId"})," of the moved row and its ",e.jsx(n.code,{children:"newRowIndex"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`type DataOnReorderRowsType = {
+  newRowIndex: number;
+  rowId: string;
+};
+
+const onReorderRows = useCallback(
+  ({ rowId, newRowIndex }: DataOnReorderRowsType) => {
+    // Update your data structure to reflect the new order
+    const updatedData = [...data];
+    const movedItem = updatedData.find((item) => item.id === rowId);
+    if (movedItem) {
+      updatedData.splice(updatedData.indexOf(movedItem), 1);
+      updatedData.splice(newRowIndex, 0, movedItem);
+      setData(updatedData);
+    }
+  },
+  [data, setData],
+);
+`})}),`
+`,e.jsx(n.h2,{id:"additional-features",children:"Additional Features"}),`
+`,e.jsx(n.h3,{id:"additional-action-buttons-and-menu-items",children:"Additional action buttons and menu items"}),`
+`,e.jsxs(n.p,{children:["Using ",e.jsx(n.code,{children:"additionalActionButton"})," and ",e.jsx(n.code,{children:"additionalActionMenuItems"}),", you can provide additional actions that sit at the top of the ",e.jsx(n.code,{children:"DataView"}),`. This is
+perfect for things like an "Add row" button or a menu of actions that affect the entire table or list.`]}),`
+`,e.jsx(n.h3,{id:"bulk-actions-menu",children:"Bulk Actions Menu"}),`
+`,e.jsx(n.p,{children:"When row selection is enabled, you can provide bulk actions that apply to all selected rows:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  bulkActionMenuItems={(selectedRows) => (
+    <>
+      <MenuItem onClick={() => handleBulkAction1(selectedRows)}>
+        Bulk Action 1
+      </MenuItem>
+      <MenuItem onClick={() => handleBulkAction2(selectedRows)}>
+        Bulk Action 2
+      </MenuItem>
+    </>
+  )}
+  hasRowSelection
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"This will display a menu with bulk actions when rows are selected."}),`
+`,e.jsx(n.h3,{id:"error-handling",children:"Error Handling"}),`
+`,e.jsx(n.p,{children:"You can display an error message when data fetching fails:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  errorMessage="An error occurred while fetching data."
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"This will display a callout with the error message above the data view."}),`
+`,e.jsx(n.h3,{id:"lazy-loading",children:"Lazy Loading"}),`
+`,e.jsx(n.p,{children:"You can also use lazy loading instead of traditional pagination:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  paginationType="loadMore"
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:'This will display a "Load More" button instead of page numbers, allowing users to incrementally load more data.'}),`
+`,e.jsx(n.h2,{id:"customization",children:"Customization"}),`
+`,e.jsxs(n.p,{children:["While the ",e.jsx(n.code,{children:"DataView"})," come with pre-styled elements matching the Okta Odyssey design system, you can further customize the appearance using the theming capabilities of Material-UI and Emotion styled components."]}),`
+`,e.jsx(c,{of:p}),`
+`,e.jsxs(n.p,{children:["Explore the stories in this Storybook to see more examples and configurations of the ",e.jsx(n.code,{children:"DataView"})," suite."]})]})}function bt(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{bt as default};