@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/dist/labs/DataComponents/DataTable.js

@@ -0,0 +1,90 @@
+/*!
+ * 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, useMemo } from "react";
+import { DataView } from "./DataView.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DataTable = ({
+  bulkActionMenuItems,
+  columns,
+  currentPage,
+  emptyPlaceholder,
+  errorMessage,
+  filters,
+  getData,
+  hasChangeableDensity,
+  hasColumnResizing,
+  hasColumnVisibility,
+  initialDensity,
+  hasFilters,
+  hasPagination,
+  hasRowReordering,
+  hasRowSelection,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasSorting,
+  isLoading,
+  isEmpty,
+  isNoResults,
+  isRowReorderingDisabled,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  paginationType,
+  renderDetailPanel,
+  resultsPerPage,
+  rowActionButtons,
+  rowActionMenuItems,
+  searchDelayTime,
+  totalRows
+}) => {
+  const tableOptions = useMemo(() => ({
+    columns,
+    hasChangeableDensity,
+    hasColumnResizing,
+    hasColumnVisibility,
+    hasSorting,
+    initialDensity,
+    renderDetailPanel,
+    rowActionButtons,
+    rowActionMenuItems
+  }), [columns, hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting, initialDensity, renderDetailPanel, rowActionButtons, rowActionMenuItems]);
+  return _jsx(DataView, {
+    availableLayouts: ["table"],
+    bulkActionMenuItems: bulkActionMenuItems,
+    currentPage: currentPage,
+    emptyPlaceholder: emptyPlaceholder,
+    errorMessage: errorMessage,
+    filters: filters,
+    getData: getData,
+    hasFilters: hasFilters,
+    hasPagination: hasPagination,
+    hasRowReordering: hasRowReordering,
+    hasRowSelection: hasRowSelection,
+    hasSearch: hasSearch,
+    hasSearchSubmitButton: hasSearchSubmitButton,
+    isEmpty: isEmpty,
+    isLoading: isLoading,
+    isNoResults: isNoResults,
+    isRowReorderingDisabled: isRowReorderingDisabled,
+    noResultsPlaceholder: noResultsPlaceholder,
+    onChangeRowSelection: onChangeRowSelection,
+    paginationType: paginationType,
+    resultsPerPage: resultsPerPage,
+    searchDelayTime: searchDelayTime,
+    tableOptions: tableOptions,
+    totalRows: totalRows
+  });
+};
+const MemoizedDataTable = memo(DataTable);
+MemoizedDataTable.displayName = "DataTable";
+export { MemoizedDataTable as DataTable };
+//# sourceMappingURL=DataTable.js.map

package/dist/labs/DataComponents/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":["memo","useMemo","DataView","jsx","_jsx","DataTable","bulkActionMenuItems","columns","currentPage","emptyPlaceholder","errorMessage","filters","getData","hasChangeableDensity","hasColumnResizing","hasColumnVisibility","initialDensity","hasFilters","hasPagination","hasRowReordering","hasRowSelection","hasSearch","hasSearchSubmitButton","hasSorting","isLoading","isEmpty","isNoResults","isRowReorderingDisabled","noResultsPlaceholder","onChangeRowSelection","paginationType","renderDetailPanel","resultsPerPage","rowActionButtons","rowActionMenuItems","searchDelayTime","totalRows","tableOptions","availableLayouts","MemoizedDataTable","displayName"],"sources":["../../../src/labs/DataComponents/DataTable.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 { memo, useMemo } from \"react\";\n\nimport { DataView } from \"./DataView\";\nimport { TableProps, UniversalProps } from \"./componentTypes\";\n\nexport type DataTableProps = UniversalProps & TableProps;\n\nconst DataTable = ({\n  bulkActionMenuItems,\n  columns,\n  currentPage,\n  emptyPlaceholder,\n  errorMessage,\n  filters,\n  getData,\n  hasChangeableDensity,\n  hasColumnResizing,\n  hasColumnVisibility,\n  initialDensity,\n  hasFilters,\n  hasPagination,\n  hasRowReordering,\n  hasRowSelection,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasSorting,\n  isLoading,\n  isEmpty,\n  isNoResults,\n  isRowReorderingDisabled,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  paginationType,\n  renderDetailPanel,\n  resultsPerPage,\n  rowActionButtons,\n  rowActionMenuItems,\n  searchDelayTime,\n  totalRows,\n}: DataTableProps) => {\n  const tableOptions = useMemo(\n    () => ({\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    }),\n    [\n      columns,\n      hasChangeableDensity,\n      hasColumnResizing,\n      hasColumnVisibility,\n      hasSorting,\n      initialDensity,\n      renderDetailPanel,\n      rowActionButtons,\n      rowActionMenuItems,\n    ],\n  );\n\n  return (\n    <DataView\n      availableLayouts={[\"table\"]}\n      bulkActionMenuItems={bulkActionMenuItems}\n      currentPage={currentPage}\n      emptyPlaceholder={emptyPlaceholder}\n      errorMessage={errorMessage}\n      filters={filters}\n      getData={getData}\n      hasFilters={hasFilters}\n      hasPagination={hasPagination}\n      hasRowReordering={hasRowReordering}\n      hasRowSelection={hasRowSelection}\n      hasSearch={hasSearch}\n      hasSearchSubmitButton={hasSearchSubmitButton}\n      isEmpty={isEmpty}\n      isLoading={isLoading}\n      isNoResults={isNoResults}\n      isRowReorderingDisabled={isRowReorderingDisabled}\n      noResultsPlaceholder={noResultsPlaceholder}\n      onChangeRowSelection={onChangeRowSelection}\n      paginationType={paginationType}\n      resultsPerPage={resultsPerPage}\n      searchDelayTime={searchDelayTime}\n      tableOptions={tableOptions}\n      totalRows={totalRows}\n    />\n  );\n};\n\nconst MemoizedDataTable = memo(DataTable);\nMemoizedDataTable.displayName = \"DataTable\";\n\nexport { MemoizedDataTable as DataTable };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAE7BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAKjB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,mBAAmB;EACnBC,OAAO;EACPC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,OAAO;EACPC,OAAO;EACPC,oBAAoB;EACpBC,iBAAiB;EACjBC,mBAAmB;EACnBC,cAAc;EACdC,UAAU;EACVC,aAAa;EACbC,gBAAgB;EAChBC,eAAe;EACfC,SAAS;EACTC,qBAAqB;EACrBC,UAAU;EACVC,SAAS;EACTC,OAAO;EACPC,WAAW;EACXC,uBAAuB;EACvBC,oBAAoB;EACpBC,oBAAoB;EACpBC,cAAc;EACdC,iBAAiB;EACjBC,cAAc;EACdC,gBAAgB;EAChBC,kBAAkB;EAClBC,eAAe;EACfC;AACc,CAAC,KAAK;EACpB,MAAMC,YAAY,GAAGpC,OAAO,CAC1B,OAAO;IACLM,OAAO;IACPM,oBAAoB;IACpBC,iBAAiB;IACjBC,mBAAmB;IACnBQ,UAAU;IACVP,cAAc;IACde,iBAAiB;IACjBE,gBAAgB;IAChBC;EACF,CAAC,CAAC,EACF,CACE3B,OAAO,EACPM,oBAAoB,EACpBC,iBAAiB,EACjBC,mBAAmB,EACnBQ,UAAU,EACVP,cAAc,EACde,iBAAiB,EACjBE,gBAAgB,EAChBC,kBAAkB,CAEtB,CAAC;EAED,OACE9B,IAAA,CAACF,QAAQ;IACPoC,gBAAgB,EAAE,CAAC,OAAO,CAAE;IAC5BhC,mBAAmB,EAAEA,mBAAoB;IACzCE,WAAW,EAAEA,WAAY;IACzBC,gBAAgB,EAAEA,gBAAiB;IACnCC,YAAY,EAAEA,YAAa;IAC3BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBK,UAAU,EAAEA,UAAW;IACvBC,aAAa,EAAEA,aAAc;IAC7BC,gBAAgB,EAAEA,gBAAiB;IACnCC,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBC,qBAAqB,EAAEA,qBAAsB;IAC7CG,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrBE,WAAW,EAAEA,WAAY;IACzBC,uBAAuB,EAAEA,uBAAwB;IACjDC,oBAAoB,EAAEA,oBAAqB;IAC3CC,oBAAoB,EAAEA,oBAAqB;IAC3CC,cAAc,EAAEA,cAAe;IAC/BE,cAAc,EAAEA,cAAe;IAC/BG,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BD,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAMG,iBAAiB,GAAGvC,IAAI,CAACK,SAAS,CAAC;AACzCkC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIlC,SAAS"}

package/dist/labs/DataComponents/DataView.js

@@ -0,0 +1,278 @@
+/*!
+ * 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, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { availableLayouts as allAvailableLayouts, densityValues } from "./constants.js";
+import { Box } from "../../Box.js";
+import { BulkActionsMenu } from "./BulkActionsMenu.js";
+import { Callout } from "../../Callout.js";
+import { DataFilters } from "../DataFilters.js";
+import { EmptyState } from "../../EmptyState.js";
+import { fetchData } from "./fetchData.js";
+import { LayoutSwitcher } from "./LayoutSwitcher.js";
+import { TableSettings } from "./TableSettings.js";
+import { Pagination, usePagination } from "../../Pagination/index.js";
+import { TableContent } from "./TableContent.js";
+import { StackContent } from "./StackContent.js";
+import { useFilterConversion } from "./useFilterConversion.js";
+import { useRowReordering } from "../../DataTable/useRowReordering.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import styled from "@emotion/styled";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DataViewContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4
+}));
+const BulkActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "space-between"
+}));
+const AdditionalActionsContainer = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-end"
+}));
+const DataView = ({
+  availableLayouts = allAvailableLayouts,
+  bulkActionMenuItems,
+  currentPage = 1,
+  emptyPlaceholder,
+  errorMessage: errorMessageProp,
+  filters: filtersProp,
+  getData,
+  getRowId: getRowIdProp,
+  hasFilters,
+  hasPagination,
+  hasSearch,
+  hasSearchSubmitButton,
+  hasRowReordering,
+  hasRowSelection,
+  initialLayout,
+  isEmpty: isEmptyProp,
+  isLoading: isLoadingProp,
+  isNoResults: isNoResultsProp,
+  isRowReorderingDisabled,
+  noResultsPlaceholder,
+  onChangeRowSelection,
+  onReorderRows,
+  paginationType = "paged",
+  resultsPerPage = 20,
+  searchDelayTime,
+  stackOptions,
+  tableOptions,
+  totalRows
+}) => {
+  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]);
+  const [pagination, setPagination] = useState({
+    pageIndex: currentPage,
+    pageSize: resultsPerPage
+  });
+  const [tableState, setTableState] = useState({
+    columnSorting: [],
+    columnVisibility: {},
+    rowDensity: tableOptions?.initialDensity ?? densityValues[0]
+  });
+  const shouldShowFilters = hasSearch || hasFilters;
+  const availableFilters = useFilterConversion({
+    filters: filters,
+    columns: tableOptions?.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 = getRowIdProp ? getRowIdProp : row => row.id;
+  useEffect(() => {
+    setPagination({
+      pageIndex: currentPage,
+      pageSize: resultsPerPage
+    });
+  }, [currentPage, resultsPerPage]);
+  useEffect(() => {
+    fetchData({
+      dataQueryParams,
+      errorMessageProp,
+      getData,
+      setData,
+      setErrorMessage,
+      setIsLoading
+    });
+  }, [dataQueryParams, errorMessageProp, getData]);
+  useEffect(() => {
+    setIsEmpty(pagination.pageIndex === currentPage && pagination.pageSize === resultsPerPage && search === "" && filters === initialFilters && data.length === 0);
+  }, [currentPage, data, filters, initialFilters, pagination, resultsPerPage, search]);
+  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(() => _jsxs(_Fragment, {
+    children: [currentLayout === "table" && tableOptions && _jsx(TableSettings, {
+      setTableState: setTableState,
+      tableOptions: tableOptions,
+      tableState: tableState
+    }), availableLayouts.length > 1 && _jsx(LayoutSwitcher, {
+      availableLayouts: availableLayouts,
+      currentLayout: currentLayout,
+      setCurrentLayout: setCurrentLayout
+    })]
+  }), [currentLayout, tableOptions, tableState, availableLayouts]);
+  const {
+    lastRow: lastRowOnPage
+  } = usePagination({
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize,
+    totalRows
+  });
+  const rowReorderingUtilities = useRowReordering({
+    totalRows,
+    onReorderRows,
+    data,
+    setData,
+    draggingRow,
+    setDraggingRow,
+    resultsPerPage: pagination.pageSize,
+    page: pagination.pageIndex
+  });
+  return _jsxs(DataViewContainer, {
+    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(BulkActionsContainer, {
+      children: [_jsx(BulkActionsMenu, {
+        data: data,
+        menuItems: bulkActionMenuItems,
+        rowSelection: rowSelection,
+        setRowSelection: setRowSelection
+      }), !shouldShowFilters && additionalActions]
+    }), !shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && _jsx(AdditionalActionsContainer, {
+      children: additionalActions
+    }), currentLayout === "table" && tableOptions && _jsx(TableContent, {
+      columns: tableOptions.columns,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      getRowId: 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,
+      tableOptions: tableOptions,
+      tableState: tableState,
+      totalRows: totalRows
+    }), (currentLayout === "list" || currentLayout === "grid") && stackOptions && _jsx(StackContent, {
+      currentLayout: currentLayout,
+      data: data,
+      draggingRow: draggingRow,
+      emptyState: emptyState,
+      getRowId: getRowId,
+      hasRowReordering: hasRowReordering,
+      hasRowSelection: hasRowSelection,
+      isEmpty: isEmpty,
+      isLoading: isLoading,
+      isNoResults: isNoResults,
+      isRowReorderingDisabled: isRowReorderingDisabled,
+      onReorderRows: onReorderRows,
+      pagination: pagination,
+      rowReorderingUtilities: rowReorderingUtilities,
+      rowSelection: rowSelection,
+      setRowSelection: setRowSelection,
+      stackOptions: stackOptions,
+      totalRows: totalRows
+    }), hasPagination && _jsx(Pagination, {
+      currentPageLabel: t("pagination.page"),
+      isDisabled: isEmpty,
+      lastRow: lastRowOnPage,
+      loadMoreLabel: t("pagination.loadmore"),
+      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/labs/DataComponents/DataView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataView.js","names":["memo","useEffect","useMemo","useState","useTranslation","availableLayouts","allAvailableLayouts","densityValues","Box","BulkActionsMenu","Callout","DataFilters","EmptyState","fetchData","LayoutSwitcher","TableSettings","Pagination","usePagination","TableContent","StackContent","useFilterConversion","useRowReordering","useOdysseyDesignTokens","styled","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DataViewContainer","shouldForwardProp","prop","odysseyDesignTokens","display","flexDirection","gap","Spacing4","BulkActionsContainer","justifyContent","AdditionalActionsContainer","DataView","bulkActionMenuItems","currentPage","emptyPlaceholder","errorMessage","errorMessageProp","filters","filtersProp","getData","getRowId","getRowIdProp","hasFilters","hasPagination","hasSearch","hasSearchSubmitButton","hasRowReordering","hasRowSelection","initialLayout","isEmpty","isEmptyProp","isLoading","isLoadingProp","isNoResults","isNoResultsProp","isRowReorderingDisabled","noResultsPlaceholder","onChangeRowSelection","onReorderRows","paginationType","resultsPerPage","searchDelayTime","stackOptions","tableOptions","totalRows","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","dataQueryParams","page","sort","row","id","length","prevValue","emptyState","noResultsInnerContent","description","heading","additionalActions","children","lastRow","lastRowOnPage","rowReorderingUtilities","severity","text","undefined","isDisabled","onChangeFilters","onChangeSearch","menuItems","currentPageLabel","loadMoreLabel","nextLabel","onPaginationChange","previousLabel","rowsPerPageLabel","variant","MemoizedDataView","displayName"],"sources":["../../../src/labs/DataComponents/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 { memo, useEffect, useMemo, useState } from \"react\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n} from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  availableLayouts as allAvailableLayouts,\n  densityValues,\n} from \"./constants\";\nimport {\n  DataLayout,\n  UniversalProps,\n  ViewProps,\n  TableState,\n} from \"./componentTypes\";\nimport { Box } from \"../../Box\";\nimport { BulkActionsMenu } from \"./BulkActionsMenu\";\nimport { Callout } from \"../../Callout\";\nimport { DataFilters } from \"../DataFilters\";\nimport { EmptyState } from \"../../EmptyState\";\nimport { fetchData } from \"./fetchData\";\nimport { LayoutSwitcher } from \"./LayoutSwitcher\";\nimport { TableSettings } from \"./TableSettings\";\nimport { Pagination, usePagination } from \"../../Pagination\";\nimport { TableContent } from \"./TableContent\";\nimport { StackContent } from \"./StackContent\";\nimport { useFilterConversion } from \"./useFilterConversion\";\nimport { useRowReordering } from \"../../DataTable/useRowReordering\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport styled from \"@emotion/styled\";\n\nexport type DataViewProps = UniversalProps & ViewProps<DataLayout>;\n\nconst DataViewContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n}));\n\nconst BulkActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n}));\n\nconst AdditionalActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n  justifyContent: \"flex-end\",\n}));\n\nconst DataView = ({\n  availableLayouts = allAvailableLayouts,\n  bulkActionMenuItems,\n  currentPage = 1,\n  emptyPlaceholder,\n  errorMessage: errorMessageProp,\n  filters: filtersProp,\n  getData,\n  getRowId: getRowIdProp,\n  hasFilters,\n  hasPagination,\n  hasSearch,\n  hasSearchSubmitButton,\n  hasRowReordering,\n  hasRowSelection,\n  initialLayout,\n  isEmpty: isEmptyProp,\n  isLoading: isLoadingProp,\n  isNoResults: isNoResultsProp,\n  isRowReorderingDisabled,\n  noResultsPlaceholder,\n  onChangeRowSelection,\n  onReorderRows,\n  paginationType = \"paged\",\n  resultsPerPage = 20,\n  searchDelayTime,\n  stackOptions,\n  tableOptions,\n  totalRows,\n}: DataViewProps) => {\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<MRT_RowData[]>([]);\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[\"errorMessage\"]>(errorMessageProp);\n\n  const [search, setSearch] = useState<string>(\"\");\n\n  const [initialFilters, setInitialFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n  const [filters, setFilters] =\n    useState<UniversalProps[\"filters\"]>(filtersProp);\n\n  const [draggingRow, setDraggingRow] = useState<MRT_Row<MRT_RowData> | null>();\n\n  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});\n\n  useEffect(() => {\n    onChangeRowSelection?.(rowSelection);\n  }, [rowSelection, onChangeRowSelection]);\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: tableOptions?.initialDensity ?? densityValues[0],\n  });\n\n  const shouldShowFilters = hasSearch || hasFilters;\n\n  const availableFilters = useFilterConversion({\n    filters: filters,\n    columns: tableOptions?.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 = getRowIdProp ? getRowIdProp : (row: MRT_RowData) => row.id;\n\n  // Update pagination state if props change\n  useEffect(() => {\n    setPagination({\n      pageIndex: currentPage,\n      pageSize: resultsPerPage,\n    });\n  }, [currentPage, resultsPerPage]);\n\n  // Retrieve the data\n  useEffect(() => {\n    fetchData({\n      dataQueryParams,\n      errorMessageProp,\n      getData,\n      setData,\n      setErrorMessage,\n      setIsLoading,\n    });\n  }, [dataQueryParams, errorMessageProp, getData]);\n\n  // When data is updated\n  useEffect(() => {\n    setIsEmpty(\n      pagination.pageIndex === currentPage &&\n        pagination.pageSize === resultsPerPage &&\n        search === \"\" &&\n        filters === initialFilters &&\n        data.length === 0,\n    );\n  }, [\n    currentPage,\n    data,\n    filters,\n    initialFilters,\n    pagination,\n    resultsPerPage,\n    search,\n  ]);\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    () => (\n      <>\n        {currentLayout === \"table\" && tableOptions && (\n          <TableSettings\n            setTableState={setTableState}\n            tableOptions={tableOptions}\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    ),\n    [currentLayout, tableOptions, tableState, availableLayouts],\n  );\n\n  const { lastRow: lastRowOnPage } = usePagination({\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    <DataViewContainer 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        <BulkActionsContainer>\n          <BulkActionsMenu\n            data={data}\n            menuItems={bulkActionMenuItems}\n            rowSelection={rowSelection}\n            setRowSelection={setRowSelection}\n          />\n          {!shouldShowFilters && additionalActions}\n        </BulkActionsContainer>\n      )}\n\n      {!shouldShowFilters && !bulkActionMenuItems && !hasRowSelection && (\n        <AdditionalActionsContainer>\n          {additionalActions}\n        </AdditionalActionsContainer>\n      )}\n\n      {currentLayout === \"table\" && tableOptions && (\n        <TableContent\n          columns={tableOptions.columns}\n          data={data}\n          draggingRow={draggingRow}\n          emptyState={emptyState}\n          getRowId={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          tableOptions={tableOptions}\n          tableState={tableState}\n          totalRows={totalRows}\n        />\n      )}\n      {(currentLayout === \"list\" || currentLayout === \"grid\") &&\n        stackOptions && (\n          <StackContent\n            currentLayout={currentLayout}\n            data={data}\n            draggingRow={draggingRow}\n            emptyState={emptyState}\n            getRowId={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            stackOptions={stackOptions}\n            totalRows={totalRows}\n          />\n        )}\n\n      {hasPagination && (\n        <Pagination\n          currentPageLabel={t(\"pagination.page\")}\n          isDisabled={isEmpty}\n          lastRow={lastRowOnPage}\n          loadMoreLabel={t(\"pagination.loadmore\")}\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    </DataViewContainer>\n  );\n};\n\nconst MemoizedDataView = memo(DataView);\nMemoizedDataView.displayName = \"DataView\";\n\nexport { MemoizedDataView as DataView };\n"],"mappings":"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"}

package/dist/{src/DataTable/DataTableEmptyState.d.ts → labs/DataComponents/DetailPanel.js}

@@ -9,13 +9,18 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { ReactNode } from "react";
-export type DataTableEmptyStateProps = {
-    heading: string;
-    text: string;
-    primaryButton?: ReactNode;
-    secondaryButton?: ReactNode;
+
+import { memo } from "react";
+const DetailPanel = ({
+  row,
+  renderDetailPanel
+}) => {
+  if (!renderDetailPanel) return null;
+  return renderDetailPanel({
+    row
+  });
 };
-declare const MemoizedDataTableEmptyState: import("react").MemoExoticComponent<({ heading, text, primaryButton, secondaryButton, }: DataTableEmptyStateProps) => import("react/jsx-runtime").JSX.Element>;
-export { MemoizedDataTableEmptyState as DataTableEmptyState };
-//# sourceMappingURL=DataTableEmptyState.d.ts.map
+const MemoizedDetailPanel = memo(DetailPanel);
+MemoizedDetailPanel.displayName = "DetailPanel";
+export { MemoizedDetailPanel as DetailPanel };
+//# sourceMappingURL=DetailPanel.js.map

package/dist/labs/DataComponents/DetailPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanel.js","names":["memo","DetailPanel","row","renderDetailPanel","MemoizedDetailPanel","displayName"],"sources":["../../../src/labs/DataComponents/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 { memo } from \"react\";\nimport { StackProps } from \"./componentTypes\";\nimport { DataRow } from \"./dataTypes\";\n\nconst DetailPanel = ({\n  row,\n  renderDetailPanel,\n}: {\n  row: DataRow;\n  renderDetailPanel: StackProps[\"renderDetailPanel\"];\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;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAI5B,MAAMC,WAAW,GAAGA,CAAC;EACnBC,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"}

package/dist/labs/DataComponents/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 { useTranslation } from "react-i18next";
+import { MenuButton } from "../../MenuButton.js";
+import { MenuItem } from "../../MenuItem.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: "Layout",
+    buttonLabel: `${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`,
+    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/labs/DataComponents/LayoutSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSwitcher.js","names":["memo","useCallback","useMemo","useTranslation","MenuButton","MenuItem","jsx","_jsx","LayoutSwitcher","availableLayouts","currentLayout","setCurrentLayout","t","changeLayout","value","memoizedMenuItems","map","onClick","label","ariaLabel","buttonLabel","charAt","toUpperCase","slice","menuAlignment","shouldCloseOnSelect","children","isSelected","MemoizedLayoutSwitcher","displayName"],"sources":["../../../src/labs/DataComponents/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, useCallback, SetStateAction, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { AvailableLayouts, DataLayout } from \"./componentTypes\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { MenuItem } from \"../../MenuItem\";\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=\"Layout\"\n      buttonLabel={`${currentLayout.charAt(0).toUpperCase()}${currentLayout.slice(1)}`}\n      menuAlignment=\"right\"\n      shouldCloseOnSelect={false}\n    >\n      {memoizedMenuItems.map(({ value, onClick, label }) => (\n        <MenuItem\n          key={value}\n          isSelected={currentLayout === 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,EAAEC,WAAW,EAAkBC,OAAO,QAAQ,OAAO;AAC5E,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,UAAU;AAAA,SACVC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQjB,MAAMC,cAAc,GAAGA,CAAC;EACtBC,gBAAgB;EAChBC,aAAa;EACbC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAEC;EAAE,CAAC,GAAGT,cAAc,CAAC,CAAC;EAE9B,MAAMU,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,CAAE,mBAAkBE,KAAM,EAAC;EACrC,CAAC,CAAC,CAAC,EACL,CAACL,gBAAgB,EAAEI,YAAY,EAAED,CAAC,CACpC,CAAC;EAED,OACEL,IAAA,CAACH,UAAU;IACTe,SAAS,EAAC,QAAQ;IAClBC,WAAW,EAAG,GAAEV,aAAa,CAACW,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAE,GAAEZ,aAAa,CAACa,KAAK,CAAC,CAAC,CAAE,EAAE;IACjFC,aAAa,EAAC,OAAO;IACrBC,mBAAmB,EAAE,KAAM;IAAAC,QAAA,EAE1BX,iBAAiB,CAACC,GAAG,CAAC,CAAC;MAAEF,KAAK;MAAEG,OAAO;MAAEC;IAAM,CAAC,KAC/CX,IAAA,CAACF,QAAQ;MAEPsB,UAAU,EAAEjB,aAAa,KAAKI,KAAM;MACpCG,OAAO,EAAEA,OAAQ;MAAAS,QAAA,EAEhBR;IAAK,GAJDJ,KAKG,CACX;EAAC,CACQ,CAAC;AAEjB,CAAC;AAED,MAAMc,sBAAsB,GAAG5B,IAAI,CAACQ,cAAc,CAAC;AACnDoB,sBAAsB,CAACC,WAAW,GAAG,gBAAgB;AAErD,SAASD,sBAAsB,IAAIpB,cAAc"}

package/dist/labs/DataComponents/RowActions.js

@@ -0,0 +1,80 @@
+/*!
+ * 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 { useTranslation } from "react-i18next";
+import { ArrowBottomIcon, ArrowDownIcon, ArrowTopIcon, ArrowUpIcon } from "../../icons.generated/index.js";
+import { MenuItem } from "../../MenuItem.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const RowActions = ({
+  isRowReorderingDisabled,
+  row,
+  rowActionMenuItems,
+  rowIndex,
+  totalRows,
+  updateRowOrder
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleToFrontClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: 0
+    });
+  }, [row.id, updateRowOrder]);
+  const handleForwardClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: Math.max(0, rowIndex - 1)
+    });
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleBackwardClick = useCallback(() => {
+    updateRowOrder && updateRowOrder({
+      rowId: row.id,
+      newRowIndex: rowIndex + 1
+    });
+  }, [row.id, rowIndex, updateRowOrder]);
+  const handleToBackClick = useCallback(() => {
+    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/labs/DataComponents/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","names":["memo","useCallback","useTranslation","ArrowBottomIcon","ArrowDownIcon","ArrowTopIcon","ArrowUpIcon","MenuItem","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","RowActions","isRowReorderingDisabled","row","rowActionMenuItems","rowIndex","totalRows","updateRowOrder","t","handleToFrontClick","rowId","id","newRowIndex","handleForwardClick","Math","max","handleBackwardClick","handleToBackClick","children","isDisabled","onClick","MemoizedRowActions","displayName"],"sources":["../../../src/labs/DataComponents/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 { Fragment, ReactElement, memo, useCallback } from \"react\";\nimport { MRT_Row, MRT_RowData } from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  ArrowBottomIcon,\n  ArrowDownIcon,\n  ArrowTopIcon,\n  ArrowUpIcon,\n} from \"../../icons.generated\";\nimport { Button } from \"../../Button\";\nimport { MenuItem } from \"../../MenuItem\";\nimport { DataTableProps } from \"./DataTable\";\nimport { MenuButtonProps } from \"../../MenuButton\";\n\nexport type RowActionsProps = {\n  isRowReorderingDisabled?: boolean;\n  row: MRT_Row<MRT_RowData> | MRT_RowData;\n  rowActionButtons?: (\n    row: MRT_RowData,\n  ) => ReactElement<typeof Button> | ReactElement<typeof Fragment>;\n  rowActionMenuItems?: (row: MRT_RowData) => MenuButtonProps[\"children\"];\n  rowIndex: number;\n  totalRows?: DataTableProps[\"totalRows\"];\n  updateRowOrder?: ({\n    newRowIndex,\n    rowId,\n  }: {\n    newRowIndex: number;\n    rowId: string;\n  }) => void;\n};\n\nconst RowActions = ({\n  isRowReorderingDisabled,\n  row,\n  rowActionMenuItems,\n  rowIndex,\n  totalRows,\n  updateRowOrder,\n}: RowActionsProps) => {\n  const { t } = useTranslation();\n\n  const handleToFrontClick = useCallback(() => {\n    updateRowOrder && updateRowOrder({ rowId: row.id, newRowIndex: 0 });\n  }, [row.id, updateRowOrder]);\n\n  const handleForwardClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({ rowId: row.id, newRowIndex: Math.max(0, rowIndex - 1) });\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleBackwardClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({ rowId: row.id, newRowIndex: rowIndex + 1 });\n  }, [row.id, rowIndex, updateRowOrder]);\n\n  const handleToBackClick = useCallback(() => {\n    updateRowOrder &&\n      updateRowOrder({\n        rowId: row.id,\n        newRowIndex: totalRows ? totalRows - 1 : rowIndex,\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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"}