@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/labs/DataView/DataView.js

@@ -0,0 +1,373 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import isEqual from "lodash.isequal";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Box } from "../../Box.js";
+import { MenuButton } from "../../Buttons/MenuButton.js";
+import { Callout } from "../../Callout.js";
+import { createUniqueId } from "../../createUniqueId.js";
+import { useRowReordering } from "../../DataTable/useRowReordering.js";
+import { EmptyState } from "../../EmptyState.js";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { MoreIcon } from "../../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Pagination } from "../../Pagination/Pagination.js";
+import { usePagination } from "../../Pagination/usePagination.js";
+import { Typography } from "../../Typography.js";
+import { DataFilters } from "../DataFilters.js";
+import { BulkActionsMenu } from "./BulkActionsMenu.js";
+import { CardLayoutContent } from "./CardLayoutContent.js";
+import { availableLayouts as allAvailableLayouts, densityValues } from "./constants.js";
+import { fetchData } from "./fetchData.js";
+import { LayoutSwitcher } from "./LayoutSwitcher.js";
+import { TableLayoutContent } from "./TableLayoutContent.js";
+import { TableSettings } from "./TableSettings.js";
+import { useFilterConversion } from "./useFilterConversion.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledDataViewContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4
+}));
+const StyledBulkActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between"
+}));
+const StyledAdditionalActionsContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const StyledAdditionalActionsInner = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const StyledMetaTextContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginInlineEnd: odysseyDesignTokens.Spacing2
+}));
+const DataView = ({
+  additionalActionButton,
+  additionalActionMenuItems,
+  availableLayouts = allAvailableLayouts,
+  bulkActionMenuItems,
+  currentPage = 1,
+  emptyPlaceholder,
+  enableVirtualization: enableVirtualizationProp,
+  errorMessage: errorMessageProp,
+  filters: filtersProp,
+  getData,
+  getRowId: getRowIdProp,
+  hasFilters,
+  hasPagination,
+  hasPageInput,
+  hasRowCountInput,
+  hasRowCountLabel,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  hasRowSelection,
+  initialLayout,
+  isEmpty: isEmptyProp,
+  isLoading: isLoadingProp,
+  isNoResults: isNoResultsProp,
+  isPaginationMoreDisabled,
+  isRowReorderingDisabled,
+  metaText,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  onReorderRows,
+  onRowSelectionChange,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  searchDelayTime,
+  cardLayoutOptions,
+  tableLayoutOptions,
+  totalRows,
+  maxPages,
+  maxResultsPerPage,
+  onPaginationChange
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const [currentLayout, setCurrentLayout] = useState(initialLayout ?? availableLayouts[0]);
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState(isLoadingProp ?? true);
+  const [isEmpty, setIsEmpty] = useState(isEmptyProp ?? true);
+  const [isNoResults, setIsNoResults] = useState(isNoResultsProp ?? false);
+  const [errorMessage, setErrorMessage] = useState(errorMessageProp);
+  const [search, setSearch] = useState("");
+  const [initialFilters, setInitialFilters] = useState(filtersProp);
+  const [filters, setFilters] = useState(filtersProp);
+  const [draggingRow, setDraggingRow] = useState();
+  const [rowSelection, setRowSelection] = useState({});
+  useEffect(() => {
+    onChangeRowSelection?.(rowSelection);
+  }, [rowSelection, onChangeRowSelection]);
+  useEffect(() => {
+    onRowSelectionChange?.(rowSelection);
+  }, [rowSelection, onRowSelectionChange]);
+  const [pagination, setPagination] = useState({
+    pageIndex: currentPage,
+    pageSize: resultsPerPage
+  });
+  const [tableState, setTableState] = useState({
+    columnSorting: [],
+    columnVisibility: {},
+    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0]
+  });
+  const shouldShowFilters = hasSearch || hasFilters || additionalActionButton || additionalActionMenuItems;
+  const availableFilters = useFilterConversion({
+    filters: filters,
+    columns: tableLayoutOptions?.columns
+  });
+  const initialAvailableFilters = useFilterConversion({
+    filters: initialFilters,
+    columns: tableLayoutOptions?.columns
+  });
+  useEffect(() => {
+    if (!initialFilters && availableFilters) {
+      setInitialFilters(availableFilters);
+    }
+  }, [availableFilters, initialFilters]);
+  const dataQueryParams = useMemo(() => ({
+    page: pagination.pageIndex,
+    resultsPerPage: pagination.pageSize,
+    search,
+    filters: availableFilters,
+    sort: tableState?.columnSorting
+  }), [pagination.pageIndex, pagination.pageSize, search, availableFilters, tableState?.columnSorting]);
+  const getRowId = useCallback((row, index, parentRow) => {
+    if (getRowIdProp) {
+      return getRowIdProp(row, index, parentRow);
+    }
+    if (row.id) {
+      return row.id;
+    }
+    return createUniqueId();
+  }, [getRowIdProp]);
+  useEffect(() => {
+    setPagination({
+      pageIndex: currentPage,
+      pageSize: resultsPerPage
+    });
+  }, [currentPage, resultsPerPage]);
+  useEffect(() => {
+    setPagination(prev => ({
+      pageIndex: 1,
+      pageSize: paginationType == "loadMore" ? resultsPerPage : prev.pageSize
+    }));
+  }, [filters, paginationType, resultsPerPage, search]);
+  useEffect(() => {
+    onPaginationChange?.(pagination);
+  }, [onPaginationChange, pagination]);
+  useEffect(() => {
+    fetchData({
+      dataQueryParams,
+      errorMessageProp,
+      getData,
+      setData,
+      setErrorMessage,
+      setIsLoading: isLoadingProp ? undefined : setIsLoading
+    });
+  }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);
+  useEffect(() => {
+    const hasEmptyOrInitialFilters = !hasFilters || isEqual(filters, initialAvailableFilters);
+    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && hasEmptyOrInitialFilters && data.length === 0);
+  }, [currentPage, data, filters, hasFilters, initialAvailableFilters, pagination, resultsPerPage, search]);
+  useEffect(() => {
+    if (!isLoading) {
+      const hasNoResults = !isEmpty && data.length === 0;
+      setIsNoResults(isNoResultsProp ?? hasNoResults);
+    }
+  }, [data.length, isEmpty, isNoResultsProp, isLoading]);
+  useEffect(() => {
+    setIsLoading(prevValue => isLoadingProp ?? prevValue);
+  }, [isLoadingProp]);
+  useEffect(() => {
+    setIsEmpty(prevValue => isEmptyProp ?? prevValue);
+  }, [isEmptyProp]);
+  useEffect(() => {
+    setIsNoResults(prevValue => isNoResultsProp ?? prevValue);
+  }, [isNoResultsProp]);
+  const emptyState = useMemo(() => {
+    const noResultsInnerContent = noResultsPlaceholder || _jsx(EmptyState, {
+      description: t("table.noresults.text"),
+      heading: t("table.noresults.heading")
+    });
+    if (isEmpty) {
+      return emptyPlaceholder || noResultsInnerContent;
+    }
+    if (isNoResults) {
+      return noResultsInnerContent;
+    }
+    return;
+  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);
+  const additionalActions = useMemo(() => {
+    const hasTableSettings = currentLayout === "table" && tableLayoutOptions && (tableLayoutOptions.hasColumnVisibility || tableLayoutOptions.hasChangeableDensity);
+    return (metaText || hasTableSettings || availableLayouts.length > 1 || additionalActionButton || additionalActionMenuItems) && _jsxs(StyledAdditionalActionsInner, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [metaText && _jsx(StyledMetaTextContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(Typography, {
+          color: "textSecondary",
+          children: metaText
+        })
+      }), hasTableSettings && _jsx(TableSettings, {
+        setTableState: setTableState,
+        tableLayoutOptions: tableLayoutOptions,
+        tableState: tableState
+      }), availableLayouts.length > 1 && _jsx(LayoutSwitcher, {
+        availableLayouts: availableLayouts,
+        currentLayout: currentLayout,
+        setCurrentLayout: setCurrentLayout
+      }), additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "secondary",
+        endIcon: _jsx(MoreIcon, {}),
+        menuAlignment: "right",
+        children: additionalActionMenuItems
+      })]
+    });
+  }, [additionalActionButton, additionalActionMenuItems, availableLayouts, currentLayout, metaText, odysseyDesignTokens, tableLayoutOptions, tableState, t]);
+  const enableVirtualization = useMemo(() => enableVirtualizationProp ?? paginationType === "loadMore", [enableVirtualizationProp, paginationType]);
+  const {
+    lastRow: lastRowOnPage
+  } = usePagination({
+    currentRowsCount: data.length,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows
+  });
+  const rowReorderingUtilities = useRowReordering({
+    totalRows,
+    onReorderRows,
+    data,
+    setData,
+    draggingRow,
+    setDraggingRow,
+    resultsPerPage: pagination.pageSize,
+    page: pagination.pageIndex
+  });
+  return _jsxs(StyledDataViewContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [errorMessage && _jsx(Box, {
+      children: _jsx(Callout, {
+        severity: "error",
+        text: errorMessage
+      })
+    }), shouldShowFilters && _jsx(DataFilters, {
+      additionalActions: additionalActions,
+      filters: hasFilters ? availableFilters : undefined,
+      hasSearchSubmitButton: hasSearchSubmitButton,
+      isDisabled: isEmpty,
+      onChangeFilters: hasFilters ? setFilters : undefined,
+      onChangeSearch: hasSearch ? setSearch : undefined,
+      searchDelayTime: searchDelayTime
+    }), (bulkActionMenuItems || hasRowSelection) && _jsxs(StyledBulkActionsContainer, {
+      children: [_jsx(BulkActionsMenu, {
+        data: data,
+        menuItems: bulkActionMenuItems,
+        rowSelection: rowSelection,
+        setRowSelection: setRowSelection
+      }), !shouldShowFilters && additionalActions]
+    }), !shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && additionalActions && _jsx(StyledAdditionalActionsContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: additionalActions
+    }), currentLayout === "table" && tableLayoutOptions && _jsx(TableLayoutContent, {
+      columns: tableLayoutOptions.columns,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      enableVirtualization: enableVirtualization,
+      getRowId: getRowIdProp || getRowId,
+      hasRowReordering: hasRowReordering,
+      hasRowSelection: hasRowSelection,
+      isEmpty: isEmpty,
+      isLoading: isLoading,
+      isNoResults: isNoResults,
+      isRowReorderingDisabled: isRowReorderingDisabled,
+      onReorderRows: onReorderRows,
+      pagination: pagination,
+      rowReorderingUtilities: rowReorderingUtilities,
+      rowSelection: rowSelection,
+      setRowSelection: setRowSelection,
+      setTableState: setTableState,
+      tableLayoutOptions: tableLayoutOptions,
+      tableState: tableState,
+      totalRows: totalRows
+    }), (currentLayout === "list" || currentLayout === "grid") && cardLayoutOptions && _jsx(CardLayoutContent, {
+      cardLayoutOptions: cardLayoutOptions,
+      currentLayout: currentLayout,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      getRowId: getRowIdProp || getRowId,
+      hasRowReordering: hasRowReordering,
+      hasRowSelection: hasRowSelection,
+      isEmpty: isEmpty,
+      isLoading: isLoading,
+      isNoResults: isNoResults,
+      isRowReorderingDisabled: isRowReorderingDisabled,
+      onReorderRows: onReorderRows,
+      pagination: pagination,
+      rowReorderingUtilities: rowReorderingUtilities,
+      rowSelection: rowSelection,
+      setRowSelection: setRowSelection,
+      totalRows: totalRows
+    }), hasPagination && _jsx(Pagination, {
+      currentPageLabel: t("pagination.page"),
+      currentRowsCount: data.length,
+      hasPageInput: hasPageInput,
+      hasRowCountInput: hasRowCountInput,
+      hasRowCountLabel: hasRowCountLabel,
+      isDisabled: isEmpty,
+      isMoreDisabled: isPaginationMoreDisabled,
+      lastRow: lastRowOnPage,
+      loadMoreLabel: t("pagination.loadmore"),
+      maxPageIndex: maxPages,
+      maxPageSize: maxResultsPerPage,
+      nextLabel: t("pagination.next"),
+      onPaginationChange: setPagination,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      previousLabel: t("pagination.previous"),
+      rowsPerPageLabel: t("pagination.rowsperpage"),
+      totalRows: totalRows,
+      variant: paginationType
+    })]
+  });
+};
+const MemoizedDataView = memo(DataView);
+MemoizedDataView.displayName = "DataView";
+export { MemoizedDataView as DataView };
+//# sourceMappingURL=DataView.js.map

package/dist/esm/labs/DataView/DataView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataView.js","names":["styled","isEqual","memo","useCallback","useEffect","useMemo","useState","Box","MenuButton","Callout","createUniqueId","useRowReordering","EmptyState","useTranslation","MoreIcon","useOdysseyDesignTokens","Pagination","usePagination","Typography","DataFilters","BulkActionsMenu","CardLayoutContent","availableLayouts","allAvailableLayouts","densityValues","fetchData","LayoutSwitcher","TableLayoutContent","TableSettings","useFilterConversion","jsx","_jsx","jsxs","_jsxs","StyledDataViewContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","gap","Spacing4","StyledBulkActionsContainer","justifyContent","StyledAdditionalActionsContainer","Spacing2","StyledAdditionalActionsInner","alignItems","StyledMetaTextContainer","marginInlineEnd","DataView","additionalActionButton","additionalActionMenuItems","bulkActionMenuItems","currentPage","emptyPlaceholder","enableVirtualization","enableVirtualizationProp","errorMessage","errorMessageProp","filters","filtersProp","getData","getRowId","getRowIdProp","hasFilters","hasPagination","hasPageInput","hasRowCountInput","hasRowCountLabel","hasSearch","hasSearchSubmitButton","hasRowReordering","hasRowSelection","initialLayout","isEmpty","isEmptyProp","isLoading","isLoadingProp","isNoResults","isNoResultsProp","isPaginationMoreDisabled","isRowReorderingDisabled","metaText","noResultsPlaceholder","onChangeRowSelection","onReorderRows","onRowSelectionChange","paginationType","resultsPerPage","searchDelayTime","cardLayoutOptions","tableLayoutOptions","totalRows","maxPages","maxResultsPerPage","onPaginationChange","t","currentLayout","setCurrentLayout","data","setData","setIsLoading","setIsEmpty","setIsNoResults","setErrorMessage","search","setSearch","initialFilters","setInitialFilters","setFilters","draggingRow","setDraggingRow","rowSelection","setRowSelection","pagination","setPagination","pageIndex","pageSize","tableState","setTableState","columnSorting","columnVisibility","rowDensity","initialDensity","shouldShowFilters","availableFilters","columns","initialAvailableFilters","dataQueryParams","page","sort","row","index","parentRow","id","prev","undefined","hasEmptyOrInitialFilters","length","hasNoResults","prevValue","emptyState","noResultsInnerContent","description","heading","additionalActions","hasTableSettings","hasColumnVisibility","hasChangeableDensity","children","color","ariaLabel","buttonVariant","endIcon","menuAlignment","lastRow","lastRowOnPage","currentRowsCount","rowReorderingUtilities","severity","text","isDisabled","onChangeFilters","onChangeSearch","menuItems","currentPageLabel","isMoreDisabled","loadMoreLabel","maxPageIndex","maxPageSize","nextLabel","previousLabel","rowsPerPageLabel","variant","MemoizedDataView","displayName"],"sources":["../../../../src/labs/DataView/DataView.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport isEqual from \"lodash.isequal\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n} from \"material-react-table\";\nimport { memo, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { Box } from \"../../Box.js\";\nimport { MenuButton } from \"../../Buttons/MenuButton.js\";\nimport { Callout } from \"../../Callout.js\";\nimport { createUniqueId } from \"../../createUniqueId.js\";\nimport { useRowReordering } from \"../../DataTable/useRowReordering.js\";\nimport { EmptyState } from \"../../EmptyState.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { MoreIcon } from \"../../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Pagination } from \"../../Pagination/Pagination.js\";\nimport { usePagination } from \"../../Pagination/usePagination.js\";\nimport { Typography } from \"../../Typography.js\";\nimport { DataFilters } from \"../DataFilters.js\";\nimport { BulkActionsMenu } from \"./BulkActionsMenu.js\";\nimport { CardLayoutContent } from \"./CardLayoutContent.js\";\nimport {\n  DataLayout,\n  TableState,\n  UniversalProps,\n  ViewProps,\n} from \"./componentTypes.js\";\nimport {\n  availableLayouts as allAvailableLayouts,\n  densityValues,\n} from \"./constants.js\";\nimport { fetchData } from \"./fetchData.js\";\nimport { LayoutSwitcher } from \"./LayoutSwitcher.js\";\nimport { TableLayoutContent } from \"./TableLayoutContent.js\";\nimport { TableSettings } from \"./TableSettings.js\";\nimport { useFilterConversion } from \"./useFilterConversion.js\";\n\nexport type DataViewProps<TData extends MRT_RowData> = UniversalProps<TData> &\n  ViewProps<TData, DataLayout>;\ntype DataViewComponent = (<TData extends MRT_RowData>(\n  props: DataViewProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst StyledDataViewContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst StyledBulkActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n}));\n\nconst StyledAdditionalActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst StyledAdditionalActionsInner = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst StyledMetaTextContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  marginInlineEnd: odysseyDesignTokens.Spacing2,\n}));\n\nconst DataView = <TData extends MRT_RowData>({\n  additionalActionButton,\n  additionalActionMenuItems,\n  availableLayouts = allAvailableLayouts,\n  bulkActionMenuItems,\n  currentPage = 1,\n  emptyPlaceholder,\n  enableVirtualization: enableVirtualizationProp,\n  errorMessage: errorMessageProp,\n  filters: filtersProp,\n  getData,\n  getRowId: getRowIdProp,\n  hasFilters,\n  hasPagination,\n  hasPageInput,\n  hasRowCountInput,\n  hasRowCountLabel,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasRowReordering,\n  hasRowSelection,\n  initialLayout,\n  isEmpty: isEmptyProp,\n  isLoading: isLoadingProp,\n  isNoResults: isNoResultsProp,\n  isPaginationMoreDisabled,\n  isRowReorderingDisabled,\n  metaText,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  onReorderRows,\n  onRowSelectionChange,\n  paginationType = \"paged\",\n  resultsPerPage = 20,\n  searchDelayTime,\n  cardLayoutOptions,\n  tableLayoutOptions,\n  totalRows,\n  maxPages,\n  maxResultsPerPage,\n  onPaginationChange,\n}: DataViewProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [currentLayout, setCurrentLayout] = useState<DataLayout>(\n    initialLayout ?? availableLayouts[0],\n  );\n\n  const [data, setData] = useState<TData[]>([]);\n  const [isLoading, setIsLoading] = useState<boolean>(isLoadingProp ?? true);\n  const [isEmpty, setIsEmpty] = useState<boolean>(isEmptyProp ?? true);\n  const [isNoResults, setIsNoResults] = useState<boolean>(\n    isNoResultsProp ?? false,\n  );\n  const [errorMessage, setErrorMessage] =\n    useState<UniversalProps<TData>[\"errorMessage\"]>(errorMessageProp);\n\n  const [search, setSearch] = useState<string>(\"\");\n\n  const [initialFilters, setInitialFilters] =\n    useState<UniversalProps<TData>[\"filters\"]>(filtersProp);\n  const [filters, setFilters] =\n    useState<UniversalProps<TData>[\"filters\"]>(filtersProp);\n\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>();\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onChangeRowSelection?.(rowSelection);\n  }, [rowSelection, onChangeRowSelection]);\n\n  useEffect(() => {\n    onRowSelectionChange?.(rowSelection);\n  }, [rowSelection, onRowSelectionChange]);\n\n  const [pagination, setPagination] = useState({\n    pageIndex: currentPage,\n    pageSize: resultsPerPage,\n  });\n\n  const [tableState, setTableState] = useState<TableState>({\n    columnSorting: [],\n    columnVisibility: {},\n    rowDensity: tableLayoutOptions?.initialDensity ?? densityValues[0],\n  });\n\n  const shouldShowFilters =\n    hasSearch ||\n    hasFilters ||\n    additionalActionButton ||\n    additionalActionMenuItems;\n\n  const availableFilters = useFilterConversion({\n    filters: filters,\n    columns: tableLayoutOptions?.columns,\n  });\n  // will format the initial filters to be used for comparison\n  const initialAvailableFilters = useFilterConversion({\n    filters: initialFilters,\n    columns: tableLayoutOptions?.columns,\n  });\n\n  useEffect(() => {\n    if (!initialFilters && availableFilters) {\n      setInitialFilters(availableFilters);\n    }\n  }, [availableFilters, initialFilters]);\n\n  const dataQueryParams = useMemo(\n    () => ({\n      page: pagination.pageIndex,\n      resultsPerPage: pagination.pageSize,\n      search,\n      filters: availableFilters,\n      sort: tableState?.columnSorting,\n    }),\n    [\n      pagination.pageIndex,\n      pagination.pageSize,\n      search,\n      availableFilters,\n      tableState?.columnSorting,\n    ],\n  );\n\n  const getRowId = useCallback<Required<UniversalProps<TData>>[\"getRowId\"]>(\n    (row, index, parentRow) => {\n      if (getRowIdProp) {\n        return getRowIdProp(row, index, parentRow);\n      }\n      if (row.id) {\n        return row.id as string;\n      }\n      return createUniqueId();\n    },\n    [getRowIdProp],\n  );\n\n  // Update pagination state if props change\n  useEffect(() => {\n    setPagination({\n      pageIndex: currentPage,\n      pageSize: resultsPerPage,\n    });\n  }, [currentPage, resultsPerPage]);\n\n  // Reset pagination if search or filters change\n  useEffect(() => {\n    setPagination((prev) => ({\n      pageIndex: 1,\n      pageSize: paginationType == \"loadMore\" ? resultsPerPage : prev.pageSize,\n    }));\n  }, [filters, paginationType, resultsPerPage, search]);\n\n  // Fire onPaginationChange if pagination changes\n  useEffect(() => {\n    onPaginationChange?.(pagination);\n  }, [onPaginationChange, pagination]);\n\n  // Retrieve the data\n  useEffect(() => {\n    fetchData({\n      dataQueryParams,\n      errorMessageProp,\n      getData,\n      setData,\n      setErrorMessage,\n      // Only include setIsLoading if that's not being controlled manually\n      setIsLoading: isLoadingProp ? undefined : setIsLoading,\n    });\n  }, [dataQueryParams, errorMessageProp, getData, isLoadingProp]);\n\n  // When data is updated\n  useEffect(() => {\n    const hasEmptyOrInitialFilters =\n      !hasFilters || isEqual(filters, initialAvailableFilters);\n    setIsEmpty(\n      pagination.pageIndex === currentPage &&\n        pagination.pageSize === resultsPerPage &&\n        search === \"\" &&\n        hasEmptyOrInitialFilters &&\n        data.length === 0,\n    );\n  }, [\n    currentPage,\n    data,\n    filters,\n    hasFilters,\n    initialAvailableFilters,\n    pagination,\n    resultsPerPage,\n    search,\n  ]);\n\n  useEffect(() => {\n    if (!isLoading) {\n      // DB isn't actually empty (!isEmpty) and we have zero rows\n      const hasNoResults = !isEmpty && data.length === 0;\n\n      setIsNoResults(isNoResultsProp ?? hasNoResults);\n    }\n  }, [data.length, isEmpty, isNoResultsProp, isLoading]);\n\n  // Change loading, empty and noResults state on prop change\n  useEffect(() => {\n    setIsLoading((prevValue) => isLoadingProp ?? prevValue);\n  }, [isLoadingProp]);\n\n  useEffect(() => {\n    setIsEmpty((prevValue) => isEmptyProp ?? prevValue);\n  }, [isEmptyProp]);\n\n  useEffect(() => {\n    setIsNoResults((prevValue) => isNoResultsProp ?? prevValue);\n  }, [isNoResultsProp]);\n\n  const emptyState = useMemo(() => {\n    const noResultsInnerContent = noResultsPlaceholder || (\n      <EmptyState\n        description={t(\"table.noresults.text\")}\n        heading={t(\"table.noresults.heading\")}\n      />\n    );\n\n    if (isEmpty) {\n      return emptyPlaceholder || noResultsInnerContent;\n    }\n\n    if (isNoResults) {\n      return noResultsInnerContent;\n    }\n\n    return;\n  }, [noResultsPlaceholder, t, isEmpty, isNoResults, emptyPlaceholder]);\n\n  const additionalActions = useMemo(() => {\n    const hasTableSettings =\n      currentLayout === \"table\" &&\n      tableLayoutOptions &&\n      (tableLayoutOptions.hasColumnVisibility ||\n        tableLayoutOptions.hasChangeableDensity);\n\n    return (\n      (metaText ||\n        hasTableSettings ||\n        availableLayouts.length > 1 ||\n        additionalActionButton ||\n        additionalActionMenuItems) && (\n        <StyledAdditionalActionsInner odysseyDesignTokens={odysseyDesignTokens}>\n          {metaText && (\n            <StyledMetaTextContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <Typography color=\"textSecondary\">{metaText}</Typography>\n            </StyledMetaTextContainer>\n          )}\n\n          {hasTableSettings && (\n            <TableSettings\n              setTableState={setTableState}\n              tableLayoutOptions={tableLayoutOptions}\n              tableState={tableState}\n            />\n          )}\n\n          {availableLayouts.length > 1 && (\n            <LayoutSwitcher\n              availableLayouts={availableLayouts}\n              currentLayout={currentLayout}\n              setCurrentLayout={setCurrentLayout}\n            />\n          )}\n\n          {additionalActionButton}\n\n          {additionalActionMenuItems && (\n            <MenuButton\n              ariaLabel={t(\"table.moreactions.arialabel\")}\n              buttonVariant=\"secondary\"\n              endIcon={<MoreIcon />}\n              menuAlignment=\"right\"\n            >\n              {additionalActionMenuItems}\n            </MenuButton>\n          )}\n        </StyledAdditionalActionsInner>\n      )\n    );\n  }, [\n    additionalActionButton,\n    additionalActionMenuItems,\n    availableLayouts,\n    currentLayout,\n    metaText,\n    odysseyDesignTokens,\n    tableLayoutOptions,\n    tableState,\n    t,\n  ]);\n\n  const enableVirtualization = useMemo(\n    () => enableVirtualizationProp ?? paginationType === \"loadMore\",\n    [enableVirtualizationProp, paginationType],\n  );\n\n  const { lastRow: lastRowOnPage } = usePagination({\n    currentRowsCount: data.length,\n    pageIndex: pagination.pageIndex,\n    pageSize: pagination.pageSize,\n    totalRows,\n  });\n\n  const rowReorderingUtilities = useRowReordering({\n    totalRows,\n    onReorderRows,\n    data,\n    setData,\n    draggingRow,\n    setDraggingRow,\n    resultsPerPage: pagination.pageSize,\n    page: pagination.pageIndex,\n  });\n\n  return (\n    <StyledDataViewContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {errorMessage && (\n        <Box>\n          <Callout severity=\"error\" text={errorMessage} />\n        </Box>\n      )}\n\n      {shouldShowFilters && (\n        <DataFilters\n          additionalActions={additionalActions}\n          filters={hasFilters ? availableFilters : undefined}\n          hasSearchSubmitButton={hasSearchSubmitButton}\n          isDisabled={isEmpty}\n          onChangeFilters={hasFilters ? setFilters : undefined}\n          onChangeSearch={hasSearch ? setSearch : undefined}\n          searchDelayTime={searchDelayTime}\n        />\n      )}\n\n      {(bulkActionMenuItems || hasRowSelection) && (\n        <StyledBulkActionsContainer>\n          <BulkActionsMenu\n            data={data}\n            menuItems={bulkActionMenuItems}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n          />\n          {!shouldShowFilters && additionalActions}\n        </StyledBulkActionsContainer>\n      )}\n\n      {!shouldShowFilters &&\n        !bulkActionMenuItems &&\n        !hasRowSelection &&\n        additionalActions && (\n          <StyledAdditionalActionsContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {additionalActions}\n          </StyledAdditionalActionsContainer>\n        )}\n\n      {currentLayout === \"table\" && tableLayoutOptions && (\n        <TableLayoutContent\n          columns={tableLayoutOptions.columns}\n          data={data}\n          draggingRow={draggingRow}\n          emptyState={emptyState}\n          enableVirtualization={enableVirtualization}\n          getRowId={getRowIdProp || getRowId}\n          hasRowReordering={hasRowReordering}\n          hasRowSelection={hasRowSelection}\n          isEmpty={isEmpty}\n          isLoading={isLoading}\n          isNoResults={isNoResults}\n          isRowReorderingDisabled={isRowReorderingDisabled}\n          onReorderRows={onReorderRows}\n          pagination={pagination}\n          rowReorderingUtilities={rowReorderingUtilities}\n          rowSelection={rowSelection}\n          setRowSelection={setRowSelection}\n          setTableState={setTableState}\n          tableLayoutOptions={tableLayoutOptions}\n          tableState={tableState}\n          totalRows={totalRows}\n        />\n      )}\n      {(currentLayout === \"list\" || currentLayout === \"grid\") &&\n        cardLayoutOptions && (\n          <CardLayoutContent\n            cardLayoutOptions={cardLayoutOptions}\n            currentLayout={currentLayout}\n            data={data}\n            draggingRow={draggingRow}\n            emptyState={emptyState}\n            getRowId={getRowIdProp || getRowId}\n            hasRowReordering={hasRowReordering}\n            hasRowSelection={hasRowSelection}\n            isEmpty={isEmpty}\n            isLoading={isLoading}\n            isNoResults={isNoResults}\n            isRowReorderingDisabled={isRowReorderingDisabled}\n            onReorderRows={onReorderRows}\n            pagination={pagination}\n            rowReorderingUtilities={rowReorderingUtilities}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n            totalRows={totalRows}\n          />\n        )}\n\n      {hasPagination && (\n        <Pagination\n          currentPageLabel={t(\"pagination.page\")}\n          currentRowsCount={data.length}\n          hasPageInput={hasPageInput}\n          hasRowCountInput={hasRowCountInput}\n          hasRowCountLabel={hasRowCountLabel}\n          isDisabled={isEmpty}\n          isMoreDisabled={isPaginationMoreDisabled}\n          lastRow={lastRowOnPage}\n          loadMoreLabel={t(\"pagination.loadmore\")}\n          maxPageIndex={maxPages}\n          maxPageSize={maxResultsPerPage}\n          nextLabel={t(\"pagination.next\")}\n          onPaginationChange={setPagination}\n          pageIndex={pagination.pageIndex}\n          pageSize={pagination.pageSize}\n          previousLabel={t(\"pagination.previous\")}\n          rowsPerPageLabel={t(\"pagination.rowsperpage\")}\n          totalRows={totalRows}\n          variant={paginationType}\n        />\n      )}\n    </StyledDataViewContainer>\n  );\n};\n\nconst MemoizedDataView = memo(DataView) as DataViewComponent;\nMemoizedDataView.displayName = \"DataView\";\n\nexport { MemoizedDataView as DataView };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,OAAO,MAAM,gBAAgB;AAMpC,SAASC,IAAI,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEvE,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,gBAAgB,QAAQ,qCAAqC;AACtE,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,QAAQ,QAAQ,gCAAgC;AACzD,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,UAAU,QAAQ,gCAAgC;AAC3D,SAASC,aAAa,QAAQ,mCAAmC;AACjE,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,iBAAiB,QAAQ,wBAAwB;AAO1D,SACEC,gBAAgB,IAAIC,mBAAmB,EACvCC,aAAa,QACR,gBAAgB;AACvB,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,mBAAmB,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU/D,MAAMC,uBAAuB,GAAGlC,MAAM,CAAC,KAAK,EAAE;EAC5CmC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,GAAG,EAAEH,mBAAmB,CAACI;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,0BAA0B,GAAG1C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO;EACtDsC,OAAO,EAAE,MAAM;EACfK,cAAc,EAAE;AAClB,CAAC,CAAC,CAAC;AAEH,MAAMC,gCAAgC,GAAG5C,MAAM,CAAC,KAAK,EAAE;EACrDmC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfK,cAAc,EAAE,UAAU;EAC1BH,GAAG,EAAEH,mBAAmB,CAACQ;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMC,4BAA4B,GAAG9C,MAAM,CAAC,KAAK,EAAE;EACjDmC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfS,UAAU,EAAE,QAAQ;EACpBP,GAAG,EAAEH,mBAAmB,CAACQ;AAC3B,CAAC,CAAC,CAAC;AAEH,MAAMG,uBAAuB,GAAGhD,MAAM,CAAC,KAAK,EAAE;EAC5CmC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEY,eAAe,EAAEZ,mBAAmB,CAACQ;AACvC,CAAC,CAAC,CAAC;AAEH,MAAMK,QAAQ,GAAGA,CAA4B;EAC3CC,sBAAsB;EACtBC,yBAAyB;EACzB9B,gBAAgB,GAAGC,mBAAmB;EACtC8B,mBAAmB;EACnBC,WAAW,GAAG,CAAC;EACfC,gBAAgB;EAChBC,oBAAoB,EAAEC,wBAAwB;EAC9CC,YAAY,EAAEC,gBAAgB;EAC9BC,OAAO,EAAEC,WAAW;EACpBC,OAAO;EACPC,QAAQ,EAAEC,YAAY;EACtBC,UAAU;EACVC,aAAa;EACbC,YAAY;EACZC,gBAAgB;EAChBC,gBAAgB;EAChBC,SAAS;EACTC,qBAAqB;EACrBC,gBAAgB;EAChBC,eAAe;EACfC,aAAa;EACbC,OAAO,EAAEC,WAAW;EACpBC,SAAS,EAAEC,aAAa;EACxBC,WAAW,EAAEC,eAAe;EAC5BC,wBAAwB;EACxBC,uBAAuB;EACvBC,QAAQ;EACRC,oBAAoB;EACpBC,oBAAoB;EACpBC,aAAa;EACbC,oBAAoB;EACpBC,cAAc,GAAG,OAAO;EACxBC,cAAc,GAAG,EAAE;EACnBC,eAAe;EACfC,iBAAiB;EACjBC,kBAAkB;EAClBC,SAAS;EACTC,QAAQ;EACRC,iBAAiB;EACjBC;AACoB,CAAC,KAAK;EAC1B,MAAM3D,mBAAmB,GAAGtB,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEkF;EAAE,CAAC,GAAGpF,cAAc,CAAC,CAAC;EAE9B,MAAM,CAACqF,aAAa,EAAEC,gBAAgB,CAAC,GAAG7F,QAAQ,CAChDoE,aAAa,IAAIpD,gBAAgB,CAAC,CAAC,CACrC,CAAC;EAED,MAAM,CAAC8E,IAAI,EAAEC,OAAO,CAAC,GAAG/F,QAAQ,CAAU,EAAE,CAAC;EAC7C,MAAM,CAACuE,SAAS,EAAEyB,YAAY,CAAC,GAAGhG,QAAQ,CAAUwE,aAAa,IAAI,IAAI,CAAC;EAC1E,MAAM,CAACH,OAAO,EAAE4B,UAAU,CAAC,GAAGjG,QAAQ,CAAUsE,WAAW,IAAI,IAAI,CAAC;EACpE,MAAM,CAACG,WAAW,EAAEyB,cAAc,CAAC,GAAGlG,QAAQ,CAC5C0E,eAAe,IAAI,KACrB,CAAC;EACD,MAAM,CAACtB,YAAY,EAAE+C,eAAe,CAAC,GACnCnG,QAAQ,CAAwCqD,gBAAgB,CAAC;EAEnE,MAAM,CAAC+C,MAAM,EAAEC,SAAS,CAAC,GAAGrG,QAAQ,CAAS,EAAE,CAAC;EAEhD,MAAM,CAACsG,cAAc,EAAEC,iBAAiB,CAAC,GACvCvG,QAAQ,CAAmCuD,WAAW,CAAC;EACzD,MAAM,CAACD,OAAO,EAAEkD,UAAU,CAAC,GACzBxG,QAAQ,CAAmCuD,WAAW,CAAC;EAEzD,MAAM,CAACkD,WAAW,EAAEC,cAAc,CAAC,GAAG1G,QAAQ,CAAwB,CAAC;EAEvE,MAAM,CAAC2G,YAAY,EAAEC,eAAe,CAAC,GAAG5G,QAAQ,CAAwB,CAAC,CAAC,CAAC;EAE3EF,SAAS,CAAC,MAAM;IACdiF,oBAAoB,GAAG4B,YAAY,CAAC;EACtC,CAAC,EAAE,CAACA,YAAY,EAAE5B,oBAAoB,CAAC,CAAC;EAExCjF,SAAS,CAAC,MAAM;IACdmF,oBAAoB,GAAG0B,YAAY,CAAC;EACtC,CAAC,EAAE,CAACA,YAAY,EAAE1B,oBAAoB,CAAC,CAAC;EAExC,MAAM,CAAC4B,UAAU,EAAEC,aAAa,CAAC,GAAG9G,QAAQ,CAAC;IAC3C+G,SAAS,EAAE/D,WAAW;IACtBgE,QAAQ,EAAE7B;EACZ,CAAC,CAAC;EAEF,MAAM,CAAC8B,UAAU,EAAEC,aAAa,CAAC,GAAGlH,QAAQ,CAAa;IACvDmH,aAAa,EAAE,EAAE;IACjBC,gBAAgB,EAAE,CAAC,CAAC;IACpBC,UAAU,EAAE/B,kBAAkB,EAAEgC,cAAc,IAAIpG,aAAa,CAAC,CAAC;EACnE,CAAC,CAAC;EAEF,MAAMqG,iBAAiB,GACrBvD,SAAS,IACTL,UAAU,IACVd,sBAAsB,IACtBC,yBAAyB;EAE3B,MAAM0E,gBAAgB,GAAGjG,mBAAmB,CAAC;IAC3C+B,OAAO,EAAEA,OAAO;IAChBmE,OAAO,EAAEnC,kBAAkB,EAAEmC;EAC/B,CAAC,CAAC;EAEF,MAAMC,uBAAuB,GAAGnG,mBAAmB,CAAC;IAClD+B,OAAO,EAAEgD,cAAc;IACvBmB,OAAO,EAAEnC,kBAAkB,EAAEmC;EAC/B,CAAC,CAAC;EAEF3H,SAAS,CAAC,MAAM;IACd,IAAI,CAACwG,cAAc,IAAIkB,gBAAgB,EAAE;MACvCjB,iBAAiB,CAACiB,gBAAgB,CAAC;IACrC;EACF,CAAC,EAAE,CAACA,gBAAgB,EAAElB,cAAc,CAAC,CAAC;EAEtC,MAAMqB,eAAe,GAAG5H,OAAO,CAC7B,OAAO;IACL6H,IAAI,EAAEf,UAAU,CAACE,SAAS;IAC1B5B,cAAc,EAAE0B,UAAU,CAACG,QAAQ;IACnCZ,MAAM;IACN9C,OAAO,EAAEkE,gBAAgB;IACzBK,IAAI,EAAEZ,UAAU,EAAEE;EACpB,CAAC,CAAC,EACF,CACEN,UAAU,CAACE,SAAS,EACpBF,UAAU,CAACG,QAAQ,EACnBZ,MAAM,EACNoB,gBAAgB,EAChBP,UAAU,EAAEE,aAAa,CAE7B,CAAC;EAED,MAAM1D,QAAQ,GAAG5D,WAAW,CAC1B,CAACiI,GAAG,EAAEC,KAAK,EAAEC,SAAS,KAAK;IACzB,IAAItE,YAAY,EAAE;MAChB,OAAOA,YAAY,CAACoE,GAAG,EAAEC,KAAK,EAAEC,SAAS,CAAC;IAC5C;IACA,IAAIF,GAAG,CAACG,EAAE,EAAE;MACV,OAAOH,GAAG,CAACG,EAAE;IACf;IACA,OAAO7H,cAAc,CAAC,CAAC;EACzB,CAAC,EACD,CAACsD,YAAY,CACf,CAAC;EAGD5D,SAAS,CAAC,MAAM;IACdgH,aAAa,CAAC;MACZC,SAAS,EAAE/D,WAAW;MACtBgE,QAAQ,EAAE7B;IACZ,CAAC,CAAC;EACJ,CAAC,EAAE,CAACnC,WAAW,EAAEmC,cAAc,CAAC,CAAC;EAGjCrF,SAAS,CAAC,MAAM;IACdgH,aAAa,CAAEoB,IAAI,KAAM;MACvBnB,SAAS,EAAE,CAAC;MACZC,QAAQ,EAAE9B,cAAc,IAAI,UAAU,GAAGC,cAAc,GAAG+C,IAAI,CAAClB;IACjE,CAAC,CAAC,CAAC;EACL,CAAC,EAAE,CAAC1D,OAAO,EAAE4B,cAAc,EAAEC,cAAc,EAAEiB,MAAM,CAAC,CAAC;EAGrDtG,SAAS,CAAC,MAAM;IACd4F,kBAAkB,GAAGmB,UAAU,CAAC;EAClC,CAAC,EAAE,CAACnB,kBAAkB,EAAEmB,UAAU,CAAC,CAAC;EAGpC/G,SAAS,CAAC,MAAM;IACdqB,SAAS,CAAC;MACRwG,eAAe;MACftE,gBAAgB;MAChBG,OAAO;MACPuC,OAAO;MACPI,eAAe;MAEfH,YAAY,EAAExB,aAAa,GAAG2D,SAAS,GAAGnC;IAC5C,CAAC,CAAC;EACJ,CAAC,EAAE,CAAC2B,eAAe,EAAEtE,gBAAgB,EAAEG,OAAO,EAAEgB,aAAa,CAAC,CAAC;EAG/D1E,SAAS,CAAC,MAAM;IACd,MAAMsI,wBAAwB,GAC5B,CAACzE,UAAU,IAAIhE,OAAO,CAAC2D,OAAO,EAAEoE,uBAAuB,CAAC;IAC1DzB,UAAU,CACRY,UAAU,CAACE,SAAS,KAAK/D,WAAW,IAClC6D,UAAU,CAACG,QAAQ,KAAK7B,cAAc,IACtCiB,MAAM,KAAK,EAAE,IACbgC,wBAAwB,IACxBtC,IAAI,CAACuC,MAAM,KAAK,CACpB,CAAC;EACH,CAAC,EAAE,CACDrF,WAAW,EACX8C,IAAI,EACJxC,OAAO,EACPK,UAAU,EACV+D,uBAAuB,EACvBb,UAAU,EACV1B,cAAc,EACdiB,MAAM,CACP,CAAC;EAEFtG,SAAS,CAAC,MAAM;IACd,IAAI,CAACyE,SAAS,EAAE;MAEd,MAAM+D,YAAY,GAAG,CAACjE,OAAO,IAAIyB,IAAI,CAACuC,MAAM,KAAK,CAAC;MAElDnC,cAAc,CAACxB,eAAe,IAAI4D,YAAY,CAAC;IACjD;EACF,CAAC,EAAE,CAACxC,IAAI,CAACuC,MAAM,EAAEhE,OAAO,EAAEK,eAAe,EAAEH,SAAS,CAAC,CAAC;EAGtDzE,SAAS,CAAC,MAAM;IACdkG,YAAY,CAAEuC,SAAS,IAAK/D,aAAa,IAAI+D,SAAS,CAAC;EACzD,CAAC,EAAE,CAAC/D,aAAa,CAAC,CAAC;EAEnB1E,SAAS,CAAC,MAAM;IACdmG,UAAU,CAAEsC,SAAS,IAAKjE,WAAW,IAAIiE,SAAS,CAAC;EACrD,CAAC,EAAE,CAACjE,WAAW,CAAC,CAAC;EAEjBxE,SAAS,CAAC,MAAM;IACdoG,cAAc,CAAEqC,SAAS,IAAK7D,eAAe,IAAI6D,SAAS,CAAC;EAC7D,CAAC,EAAE,CAAC7D,eAAe,CAAC,CAAC;EAErB,MAAM8D,UAAU,GAAGzI,OAAO,CAAC,MAAM;IAC/B,MAAM0I,qBAAqB,GAAG3D,oBAAoB,IAChDrD,IAAA,CAACnB,UAAU;MACToI,WAAW,EAAE/C,CAAC,CAAC,sBAAsB,CAAE;MACvCgD,OAAO,EAAEhD,CAAC,CAAC,yBAAyB;IAAE,CACvC,CACF;IAED,IAAItB,OAAO,EAAE;MACX,OAAOpB,gBAAgB,IAAIwF,qBAAqB;IAClD;IAEA,IAAIhE,WAAW,EAAE;MACf,OAAOgE,qBAAqB;IAC9B;IAEA;EACF,CAAC,EAAE,CAAC3D,oBAAoB,EAAEa,CAAC,EAAEtB,OAAO,EAAEI,WAAW,EAAExB,gBAAgB,CAAC,CAAC;EAErE,MAAM2F,iBAAiB,GAAG7I,OAAO,CAAC,MAAM;IACtC,MAAM8I,gBAAgB,GACpBjD,aAAa,KAAK,OAAO,IACzBN,kBAAkB,KACjBA,kBAAkB,CAACwD,mBAAmB,IACrCxD,kBAAkB,CAACyD,oBAAoB,CAAC;IAE5C,OACE,CAAClE,QAAQ,IACPgE,gBAAgB,IAChB7H,gBAAgB,CAACqH,MAAM,GAAG,CAAC,IAC3BxF,sBAAsB,IACtBC,yBAAyB,KACzBnB,KAAA,CAACa,4BAA4B;MAACT,mBAAmB,EAAEA,mBAAoB;MAAAiH,QAAA,GACpEnE,QAAQ,IACPpD,IAAA,CAACiB,uBAAuB;QAACX,mBAAmB,EAAEA,mBAAoB;QAAAiH,QAAA,EAChEvH,IAAA,CAACb,UAAU;UAACqI,KAAK,EAAC,eAAe;UAAAD,QAAA,EAAEnE;QAAQ,CAAa;MAAC,CAClC,CAC1B,EAEAgE,gBAAgB,IACfpH,IAAA,CAACH,aAAa;QACZ4F,aAAa,EAAEA,aAAc;QAC7B5B,kBAAkB,EAAEA,kBAAmB;QACvC2B,UAAU,EAAEA;MAAW,CACxB,CACF,EAEAjG,gBAAgB,CAACqH,MAAM,GAAG,CAAC,IAC1B5G,IAAA,CAACL,cAAc;QACbJ,gBAAgB,EAAEA,gBAAiB;QACnC4E,aAAa,EAAEA,aAAc;QAC7BC,gBAAgB,EAAEA;MAAiB,CACpC,CACF,EAEAhD,sBAAsB,EAEtBC,yBAAyB,IACxBrB,IAAA,CAACvB,UAAU;QACTgJ,SAAS,EAAEvD,CAAC,CAAC,6BAA6B,CAAE;QAC5CwD,aAAa,EAAC,WAAW;QACzBC,OAAO,EAAE3H,IAAA,CAACjB,QAAQ,IAAE,CAAE;QACtB6I,aAAa,EAAC,OAAO;QAAAL,QAAA,EAEpBlG;MAAyB,CAChB,CACb;IAAA,CAC2B,CAC/B;EAEL,CAAC,EAAE,CACDD,sBAAsB,EACtBC,yBAAyB,EACzB9B,gBAAgB,EAChB4E,aAAa,EACbf,QAAQ,EACR9C,mBAAmB,EACnBuD,kBAAkB,EAClB2B,UAAU,EACVtB,CAAC,CACF,CAAC;EAEF,MAAMzC,oBAAoB,GAAGnD,OAAO,CAClC,MAAMoD,wBAAwB,IAAI+B,cAAc,KAAK,UAAU,EAC/D,CAAC/B,wBAAwB,EAAE+B,cAAc,CAC3C,CAAC;EAED,MAAM;IAAEoE,OAAO,EAAEC;EAAc,CAAC,GAAG5I,aAAa,CAAC;IAC/C6I,gBAAgB,EAAE1D,IAAI,CAACuC,MAAM;IAC7BtB,SAAS,EAAEF,UAAU,CAACE,SAAS;IAC/BC,QAAQ,EAAEH,UAAU,CAACG,QAAQ;IAC7BzB;EACF,CAAC,CAAC;EAEF,MAAMkE,sBAAsB,GAAGpJ,gBAAgB,CAAC;IAC9CkF,SAAS;IACTP,aAAa;IACbc,IAAI;IACJC,OAAO;IACPU,WAAW;IACXC,cAAc;IACdvB,cAAc,EAAE0B,UAAU,CAACG,QAAQ;IACnCY,IAAI,EAAEf,UAAU,CAACE;EACnB,CAAC,CAAC;EAEF,OACEpF,KAAA,CAACC,uBAAuB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAiH,QAAA,GAC/D5F,YAAY,IACX3B,IAAA,CAACxB,GAAG;MAAA+I,QAAA,EACFvH,IAAA,CAACtB,OAAO;QAACuJ,QAAQ,EAAC,OAAO;QAACC,IAAI,EAAEvG;MAAa,CAAE;IAAC,CAC7C,CACN,EAEAmE,iBAAiB,IAChB9F,IAAA,CAACZ,WAAW;MACV+H,iBAAiB,EAAEA,iBAAkB;MACrCtF,OAAO,EAAEK,UAAU,GAAG6D,gBAAgB,GAAGW,SAAU;MACnDlE,qBAAqB,EAAEA,qBAAsB;MAC7C2F,UAAU,EAAEvF,OAAQ;MACpBwF,eAAe,EAAElG,UAAU,GAAG6C,UAAU,GAAG2B,SAAU;MACrD2B,cAAc,EAAE9F,SAAS,GAAGqC,SAAS,GAAG8B,SAAU;MAClD/C,eAAe,EAAEA;IAAgB,CAClC,CACF,EAEA,CAACrC,mBAAmB,IAAIoB,eAAe,KACtCxC,KAAA,CAACS,0BAA0B;MAAA4G,QAAA,GACzBvH,IAAA,CAACX,eAAe;QACdgF,IAAI,EAAEA,IAAK;QACXiE,SAAS,EAAEhH,mBAAoB;QAC/B4D,YAAY,EAAEA,YAAa;QAC3BC,eAAe,EAAEA;MAAgB,CAClC,CAAC,EACD,CAACW,iBAAiB,IAAIqB,iBAAiB;IAAA,CACd,CAC7B,EAEA,CAACrB,iBAAiB,IACjB,CAACxE,mBAAmB,IACpB,CAACoB,eAAe,IAChByE,iBAAiB,IACfnH,IAAA,CAACa,gCAAgC;MAC/BP,mBAAmB,EAAEA,mBAAoB;MAAAiH,QAAA,EAExCJ;IAAiB,CACc,CACnC,EAEFhD,aAAa,KAAK,OAAO,IAAIN,kBAAkB,IAC9C7D,IAAA,CAACJ,kBAAkB;MACjBoG,OAAO,EAAEnC,kBAAkB,CAACmC,OAAQ;MACpC3B,IAAI,EAAEA,IAAK;MACXW,WAAW,EAAEA,WAAY;MACzB+B,UAAU,EAAEA,UAAW;MACvBtF,oBAAoB,EAAEA,oBAAqB;MAC3CO,QAAQ,EAAEC,YAAY,IAAID,QAAS;MACnCS,gBAAgB,EAAEA,gBAAiB;MACnCC,eAAe,EAAEA,eAAgB;MACjCE,OAAO,EAAEA,OAAQ;MACjBE,SAAS,EAAEA,SAAU;MACrBE,WAAW,EAAEA,WAAY;MACzBG,uBAAuB,EAAEA,uBAAwB;MACjDI,aAAa,EAAEA,aAAc;MAC7B6B,UAAU,EAAEA,UAAW;MACvB4C,sBAAsB,EAAEA,sBAAuB;MAC/C9C,YAAY,EAAEA,YAAa;MAC3BC,eAAe,EAAEA,eAAgB;MACjCM,aAAa,EAAEA,aAAc;MAC7B5B,kBAAkB,EAAEA,kBAAmB;MACvC2B,UAAU,EAAEA,UAAW;MACvB1B,SAAS,EAAEA;IAAU,CACtB,CACF,EACA,CAACK,aAAa,KAAK,MAAM,IAAIA,aAAa,KAAK,MAAM,KACpDP,iBAAiB,IACf5D,IAAA,CAACV,iBAAiB;MAChBsE,iBAAiB,EAAEA,iBAAkB;MACrCO,aAAa,EAAEA,aAAc;MAC7BE,IAAI,EAAEA,IAAK;MACXW,WAAW,EAAEA,WAAY;MACzB+B,UAAU,EAAEA,UAAW;MACvB/E,QAAQ,EAAEC,YAAY,IAAID,QAAS;MACnCS,gBAAgB,EAAEA,gBAAiB;MACnCC,eAAe,EAAEA,eAAgB;MACjCE,OAAO,EAAEA,OAAQ;MACjBE,SAAS,EAAEA,SAAU;MACrBE,WAAW,EAAEA,WAAY;MACzBG,uBAAuB,EAAEA,uBAAwB;MACjDI,aAAa,EAAEA,aAAc;MAC7B6B,UAAU,EAAEA,UAAW;MACvB4C,sBAAsB,EAAEA,sBAAuB;MAC/C9C,YAAY,EAAEA,YAAa;MAC3BC,eAAe,EAAEA,eAAgB;MACjCrB,SAAS,EAAEA;IAAU,CACtB,CACF,EAEF3B,aAAa,IACZnC,IAAA,CAACf,UAAU;MACTsJ,gBAAgB,EAAErE,CAAC,CAAC,iBAAiB,CAAE;MACvC6D,gBAAgB,EAAE1D,IAAI,CAACuC,MAAO;MAC9BxE,YAAY,EAAEA,YAAa;MAC3BC,gBAAgB,EAAEA,gBAAiB;MACnCC,gBAAgB,EAAEA,gBAAiB;MACnC6F,UAAU,EAAEvF,OAAQ;MACpB4F,cAAc,EAAEtF,wBAAyB;MACzC2E,OAAO,EAAEC,aAAc;MACvBW,aAAa,EAAEvE,CAAC,CAAC,qBAAqB,CAAE;MACxCwE,YAAY,EAAE3E,QAAS;MACvB4E,WAAW,EAAE3E,iBAAkB;MAC/B4E,SAAS,EAAE1E,CAAC,CAAC,iBAAiB,CAAE;MAChCD,kBAAkB,EAAEoB,aAAc;MAClCC,SAAS,EAAEF,UAAU,CAACE,SAAU;MAChCC,QAAQ,EAAEH,UAAU,CAACG,QAAS;MAC9BsD,aAAa,EAAE3E,CAAC,CAAC,qBAAqB,CAAE;MACxC4E,gBAAgB,EAAE5E,CAAC,CAAC,wBAAwB,CAAE;MAC9CJ,SAAS,EAAEA,SAAU;MACrBiF,OAAO,EAAEtF;IAAe,CACzB,CACF;EAAA,CACsB,CAAC;AAE9B,CAAC;AAED,MAAMuF,gBAAgB,GAAG7K,IAAI,CAACgD,QAAQ,CAAsB;AAC5D6H,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI7H,QAAQ","ignoreList":[]}

package/dist/esm/labs/DataView/DetailPanel.js

@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+const DetailPanel = ({
+  row,
+  renderDetailPanel
+}) => {
+  if (!renderDetailPanel) return null;
+  return renderDetailPanel({
+    row
+  });
+};
+const MemoizedDetailPanel = memo(DetailPanel);
+MemoizedDetailPanel.displayName = "DetailPanel";
+export { MemoizedDetailPanel as DetailPanel };
+//# sourceMappingURL=DetailPanel.js.map

package/dist/esm/labs/DataView/DetailPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanel.js","names":["memo","DetailPanel","row","renderDetailPanel","MemoizedDetailPanel","displayName"],"sources":["../../../../src/labs/DataView/DetailPanel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MRT_RowData } from \"material-react-table\";\nimport { memo } from \"react\";\n\nimport { CardLayoutProps } from \"./componentTypes.js\";\n\nconst DetailPanel = <TData extends MRT_RowData>({\n  row,\n  renderDetailPanel,\n}: {\n  renderDetailPanel: CardLayoutProps<TData>[\"renderDetailPanel\"];\n  row: TData;\n}) => {\n  if (!renderDetailPanel) return null;\n  return renderDetailPanel({ row });\n};\n\nconst MemoizedDetailPanel = memo(DetailPanel);\nMemoizedDetailPanel.displayName = \"DetailPanel\";\n\nexport { MemoizedDetailPanel as DetailPanel };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,MAAMC,WAAW,GAAGA,CAA4B;EAC9CC,GAAG;EACHC;AAIF,CAAC,KAAK;EACJ,IAAI,CAACA,iBAAiB,EAAE,OAAO,IAAI;EACnC,OAAOA,iBAAiB,CAAC;IAAED;EAAI,CAAC,CAAC;AACnC,CAAC;AAED,MAAME,mBAAmB,GAAGJ,IAAI,CAACC,WAAW,CAAC;AAC7CG,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIH,WAAW","ignoreList":[]}

package/dist/esm/labs/DataView/LayoutSwitcher.js

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { MenuButton } from "../../Buttons/MenuButton.js";
+import { MenuItem } from "../../Buttons/MenuItem.js";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LayoutSwitcher = ({
+  availableLayouts,
+  currentLayout,
+  setCurrentLayout
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const changeLayout = useCallback(value => {
+    setCurrentLayout(value);
+  }, [setCurrentLayout]);
+  const memoizedMenuItems = useMemo(() => availableLayouts.map(value => ({
+    value,
+    onClick: () => changeLayout(value),
+    label: t(`dataview.layout.${value}`)
+  })), [availableLayouts, changeLayout, t]);
+  return _jsx(MenuButton, {
+    ariaLabel: t("dataview.layout.arialabel"),
+    buttonLabel: t(`dataview.layout.${currentLayout}`),
+    menuAlignment: "right",
+    shouldCloseOnSelect: false,
+    children: memoizedMenuItems.map(({
+      value,
+      onClick,
+      label
+    }) => _jsx(MenuItem, {
+      isSelected: currentLayout === value,
+      onClick: onClick,
+      children: label
+    }, value))
+  });
+};
+const MemoizedLayoutSwitcher = memo(LayoutSwitcher);
+MemoizedLayoutSwitcher.displayName = "LayoutSwitcher";
+export { MemoizedLayoutSwitcher as LayoutSwitcher };
+//# sourceMappingURL=LayoutSwitcher.js.map

package/dist/esm/labs/DataView/LayoutSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSwitcher.js","names":["memo","useCallback","useMemo","MenuButton","MenuItem","useTranslation","jsx","_jsx","LayoutSwitcher","availableLayouts","currentLayout","setCurrentLayout","t","changeLayout","value","memoizedMenuItems","map","onClick","label","ariaLabel","buttonLabel","menuAlignment","shouldCloseOnSelect","children","isSelected","MemoizedLayoutSwitcher","displayName"],"sources":["../../../../src/labs/DataView/LayoutSwitcher.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dispatch, memo, SetStateAction, useCallback, useMemo } from \"react\";\n\nimport { MenuButton } from \"../../Buttons/MenuButton.js\";\nimport { MenuItem } from \"../../Buttons/MenuItem.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport { AvailableLayouts, DataLayout } from \"./componentTypes.js\";\n\nexport type LayoutSwitcherProps = {\n  availableLayouts: AvailableLayouts;\n  currentLayout: DataLayout;\n  setCurrentLayout: Dispatch<SetStateAction<DataLayout>>;\n};\n\nconst LayoutSwitcher = ({\n  availableLayouts,\n  currentLayout,\n  setCurrentLayout,\n}: LayoutSwitcherProps) => {\n  const { t } = useTranslation();\n\n  const changeLayout = useCallback(\n    (value: DataLayout) => {\n      setCurrentLayout(value);\n    },\n    [setCurrentLayout],\n  );\n\n  const memoizedMenuItems = useMemo(\n    () =>\n      availableLayouts.map((value: DataLayout) => ({\n        value,\n        onClick: () => changeLayout(value),\n        label: t(`dataview.layout.${value}`),\n      })),\n    [availableLayouts, changeLayout, t],\n  );\n\n  return (\n    <MenuButton\n      ariaLabel={t(\"dataview.layout.arialabel\")}\n      buttonLabel={t(`dataview.layout.${currentLayout}`)}\n      menuAlignment=\"right\"\n      shouldCloseOnSelect={false}\n    >\n      {memoizedMenuItems.map(({ value, onClick, label }) => (\n        <MenuItem\n          isSelected={currentLayout === value}\n          key={value}\n          onClick={onClick}\n        >\n          {label}\n        </MenuItem>\n      ))}\n    </MenuButton>\n  );\n};\n\nconst MemoizedLayoutSwitcher = memo(LayoutSwitcher);\nMemoizedLayoutSwitcher.displayName = \"LayoutSwitcher\";\n\nexport { MemoizedLayoutSwitcher as LayoutSwitcher };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmBA,IAAI,EAAkBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAE5E,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,cAAc,QAAQ,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS9D,MAAMC,cAAc,GAAGA,CAAC;EACtBC,gBAAgB;EAChBC,aAAa;EACbC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAEC;EAAE,CAAC,GAAGP,cAAc,CAAC,CAAC;EAE9B,MAAMQ,YAAY,GAAGZ,WAAW,CAC7Ba,KAAiB,IAAK;IACrBH,gBAAgB,CAACG,KAAK,CAAC;EACzB,CAAC,EACD,CAACH,gBAAgB,CACnB,CAAC;EAED,MAAMI,iBAAiB,GAAGb,OAAO,CAC/B,MACEO,gBAAgB,CAACO,GAAG,CAAEF,KAAiB,KAAM;IAC3CA,KAAK;IACLG,OAAO,EAAEA,CAAA,KAAMJ,YAAY,CAACC,KAAK,CAAC;IAClCI,KAAK,EAAEN,CAAC,CAAC,mBAAmBE,KAAK,EAAE;EACrC,CAAC,CAAC,CAAC,EACL,CAACL,gBAAgB,EAAEI,YAAY,EAAED,CAAC,CACpC,CAAC;EAED,OACEL,IAAA,CAACJ,UAAU;IACTgB,SAAS,EAAEP,CAAC,CAAC,2BAA2B,CAAE;IAC1CQ,WAAW,EAAER,CAAC,CAAC,mBAAmBF,aAAa,EAAE,CAAE;IACnDW,aAAa,EAAC,OAAO;IACrBC,mBAAmB,EAAE,KAAM;IAAAC,QAAA,EAE1BR,iBAAiB,CAACC,GAAG,CAAC,CAAC;MAAEF,KAAK;MAAEG,OAAO;MAAEC;IAAM,CAAC,KAC/CX,IAAA,CAACH,QAAQ;MACPoB,UAAU,EAAEd,aAAa,KAAKI,KAAM;MAEpCG,OAAO,EAAEA,OAAQ;MAAAM,QAAA,EAEhBL;IAAK,GAHDJ,KAIG,CACX;EAAC,CACQ,CAAC;AAEjB,CAAC;AAED,MAAMW,sBAAsB,GAAGzB,IAAI,CAACQ,cAAc,CAAC;AACnDiB,sBAAsB,CAACC,WAAW,GAAG,gBAAgB;AAErD,SAASD,sBAAsB,IAAIjB,cAAc","ignoreList":[]}

package/dist/esm/labs/DataView/RowActions.js

@@ -0,0 +1,87 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useCallback } from "react";
+import { MenuItem } from "../../Buttons/MenuItem.js";
+import { useTranslation } from "../../i18n.generated/i18n.js";
+import { ArrowBottomIcon, ArrowDownIcon, ArrowTopIcon, ArrowUpIcon } from "../../icons.generated/index.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const RowActions = ({
+  isRowReorderingDisabled,
+  row: incomingRow,
+  rowActionMenuItems,
+  rowIndex,
+  totalRows,
+  updateRowOrder
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const row = incomingRow.original ? incomingRow.original : incomingRow;
+  const handleToFrontClick = useCallback(() => {
+    if (updateRowOrder) {
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: 0
+      });
+    }
+  }, [row.id, updateRowOrder]);
+  const handleForwardClick = useCallback(() => {
+    if (updateRowOrder) {
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: Math.max(0, rowIndex - 1)
+      });
+    }
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleBackwardClick = useCallback(() => {
+    if (updateRowOrder) {
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: rowIndex + 1
+      });
+    }
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleToBackClick = useCallback(() => {
+    if (updateRowOrder) {
+      updateRowOrder({
+        rowId: row.id,
+        newRowIndex: totalRows ? totalRows - 1 : rowIndex
+      });
+    }
+  }, [row.id, rowIndex, totalRows, updateRowOrder]);
+  return _jsxs(_Fragment, {
+    children: [rowActionMenuItems && rowActionMenuItems(row), rowActionMenuItems && updateRowOrder && _jsx("hr", {}), updateRowOrder && _jsxs(_Fragment, {
+      children: [_jsxs(MenuItem, {
+        isDisabled: rowIndex <= 0 || isRowReorderingDisabled,
+        onClick: handleToFrontClick,
+        children: [_jsx(ArrowTopIcon, {}), " ", t("table.reorder.tofront")]
+      }), _jsxs(MenuItem, {
+        isDisabled: rowIndex <= 0 || isRowReorderingDisabled,
+        onClick: handleForwardClick,
+        children: [_jsx(ArrowUpIcon, {}), " ", t("table.reorder.forward")]
+      }), _jsxs(MenuItem, {
+        isDisabled: (totalRows ? rowIndex >= totalRows - 1 : false) || isRowReorderingDisabled,
+        onClick: handleBackwardClick,
+        children: [_jsx(ArrowDownIcon, {}), " ", t("table.reorder.backward")]
+      }), totalRows && _jsxs(MenuItem, {
+        isDisabled: rowIndex >= totalRows - 1 || isRowReorderingDisabled,
+        onClick: handleToBackClick,
+        children: [_jsx(ArrowBottomIcon, {}), " ", t("table.reorder.toback")]
+      })]
+    })]
+  });
+};
+const MemoizedRowActions = memo(RowActions);
+MemoizedRowActions.displayName = "RowActions";
+export { MemoizedRowActions as RowActions };
+//# sourceMappingURL=RowActions.js.map

package/dist/esm/labs/DataView/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","names":["memo","useCallback","MenuItem","useTranslation","ArrowBottomIcon","ArrowDownIcon","ArrowTopIcon","ArrowUpIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","RowActions","isRowReorderingDisabled","row","incomingRow","rowActionMenuItems","rowIndex","totalRows","updateRowOrder","t","original","handleToFrontClick","rowId","id","newRowIndex","handleForwardClick","Math","max","handleBackwardClick","handleToBackClick","children","isDisabled","onClick","MemoizedRowActions","displayName"],"sources":["../../../../src/labs/DataView/RowActions.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MRT_Row, MRT_RowData } from \"material-react-table\";\nimport { Fragment, memo, ReactElement, useCallback } from \"react\";\n\nimport { Button } from \"../../Buttons/Button.js\";\nimport { type MenuButtonProps } from \"../../Buttons/MenuButton.js\";\nimport { MenuItem } from \"../../Buttons/MenuItem.js\";\nimport { useTranslation } from \"../../i18n.generated/i18n.js\";\nimport {\n  ArrowBottomIcon,\n  ArrowDownIcon,\n  ArrowTopIcon,\n  ArrowUpIcon,\n} from \"../../icons.generated/index.js\";\nimport { DataTableProps } from \"./DataTable.js\";\n\n// Rows coming from TableLayoutContent will be in the MRT-expected row format,\n// while rows coming from CardLayoutContent will be pure data\ntype RowOrTableRow<TData extends MRT_RowData> = MRT_Row<TData> | TData;\n\nexport type RowActionsProps<TData extends MRT_RowData> = {\n  isRowReorderingDisabled?: boolean;\n  row: RowOrTableRow<TData>;\n  rowActionButtons?: (\n    row?: TData,\n  ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;\n  rowActionMenuItems?: (row: TData) => MenuButtonProps[\"children\"];\n  rowIndex: number;\n  totalRows?: DataTableProps<TData>[\"totalRows\"];\n  updateRowOrder?: ({\n    newRowIndex,\n    rowId,\n  }: {\n    newRowIndex: number;\n    rowId: string;\n  }) => void;\n};\n\nconst RowActions = <TData extends MRT_RowData>({\n  isRowReorderingDisabled,\n  row: incomingRow,\n  rowActionMenuItems,\n  rowIndex,\n  totalRows,\n  updateRowOrder,\n}: RowActionsProps<TData>) => {\n  const { t } = useTranslation();\n\n  const row = (\n    incomingRow.original ? incomingRow.original : incomingRow\n  ) as TData & { id: string };\n\n  const handleToFrontClick = useCallback(() => {\n    if (updateRowOrder) {\n      updateRowOrder({ rowId: row.id, newRowIndex: 0 });\n    }\n  }, [row.id, updateRowOrder]);\n\n  const handleForwardClick = useCallback(() => {\n    if (updateRowOrder) {\n      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });\n    }\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleBackwardClick = useCallback(() => {\n    if (updateRowOrder) {\n      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });\n    }\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleToBackClick = useCallback(() => {\n    if (updateRowOrder) {\n      updateRowOrder({\n        rowId: row.id,\n        newRowIndex: totalRows ? totalRows - 1 : rowIndex,\n      });\n    }\n  }, [row.id, rowIndex, totalRows, updateRowOrder]);\n\n  return (\n    <>\n      {rowActionMenuItems && rowActionMenuItems(row)}\n      {rowActionMenuItems && updateRowOrder && <hr />}\n      {updateRowOrder && (\n        <>\n          <MenuItem\n            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}\n            onClick={handleToFrontClick}\n          >\n            <ArrowTopIcon /> {t(\"table.reorder.tofront\")}\n          </MenuItem>\n          <MenuItem\n            isDisabled={rowIndex <= 0 || isRowReorderingDisabled}\n            onClick={handleForwardClick}\n          >\n            <ArrowUpIcon /> {t(\"table.reorder.forward\")}\n          </MenuItem>\n          <MenuItem\n            isDisabled={\n              (totalRows ? rowIndex >= totalRows - 1 : false) ||\n              isRowReorderingDisabled\n            }\n            onClick={handleBackwardClick}\n          >\n            <ArrowDownIcon /> {t(\"table.reorder.backward\")}\n          </MenuItem>\n          {totalRows && (\n            <MenuItem\n              isDisabled={rowIndex >= totalRows - 1 || isRowReorderingDisabled}\n              onClick={handleToBackClick}\n            >\n              <ArrowBottomIcon /> {t(\"table.reorder.toback\")}\n            </MenuItem>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nconst MemoizedRowActions = memo(RowActions);\nMemoizedRowActions.displayName = \"RowActions\";\n\nexport { MemoizedRowActions as RowActions };\n"],"mappings":"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","ignoreList":[]}