@okta/odyssey-react-mui 1.42.0 → 1.44.0

package/dist/cjs/CircularProgress.cjs

@@ -25,10 +25,10 @@ const CircularProgress = ({
   testId,
   value
 }) => (0, _jsxRuntime.jsx)(_CircularProgress2.default, {
+  "aria-label": ariaLabel,
   "data-se": testId,
   value: value,
-  variant: value ? "determinate" : "indeterminate",
-  "aria-label": ariaLabel
+  variant: value ? "determinate" : "indeterminate"
 });
 const MemoizedCircularProgress = exports.CircularProgress = (0, _react.memo)(CircularProgress);
 MemoizedCircularProgress.displayName = "CircularProgress";

package/dist/cjs/CircularProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","CircularProgress","ariaLabel","testId","value","jsx","_CircularProgress2","variant","MemoizedCircularProgress","exports","memo","displayName"],"sources":["../../src/CircularProgress.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type CircularProgressProps = {\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\">;\n\nconst CircularProgress = ({\n  ariaLabel,\n  testId,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    data-se={testId}\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n    aria-label={ariaLabel}\n  />\n);\n\nconst MemoizedCircularProgress = memo(CircularProgress);\nMemoizedCircularProgress.displayName = \"CircularProgress\";\n\nexport { MemoizedCircularProgress as CircularProgress };\n"],"mappings":";;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAA6B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAZ7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAeA,MAAMG,gBAAgB,GAAGA,CAAC;EACxBC,SAAS;EACTC,MAAM;EACNC;AACqB,CAAC,KACtB,IAAAR,WAAA,CAAAS,GAAA,EAAAC,kBAAA,CAAAN,OAAA;EACE,WAASG,MAAO;EAChBC,KAAK,EAAEA,KAAM;EACbG,OAAO,EAAEH,KAAK,GAAG,aAAa,GAAG,eAAgB;EACjD,cAAYF;AAAU,CACvB,CACF;AAED,MAAMM,wBAAwB,GAAAC,OAAA,CAAAR,gBAAA,GAAG,IAAAS,WAAI,EAACT,gBAAgB,CAAC;AACvDO,wBAAwB,CAACG,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"file":"CircularProgress.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","CircularProgress","ariaLabel","testId","value","jsx","_CircularProgress2","variant","MemoizedCircularProgress","exports","memo","displayName"],"sources":["../../src/CircularProgress.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-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 { CircularProgress as MuiCircularProgress } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type CircularProgressProps = {\n  /**\n   * The percentage filled the spinner should be, as an integer.\n   * If undefined, the spinner will spin perpetually.\n   */\n  value?: number;\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\">;\n\nconst CircularProgress = ({\n  ariaLabel,\n  testId,\n  value,\n}: CircularProgressProps) => (\n  <MuiCircularProgress\n    aria-label={ariaLabel}\n    data-se={testId}\n    value={value}\n    variant={value ? \"determinate\" : \"indeterminate\"}\n  />\n);\n\nconst MemoizedCircularProgress = memo(CircularProgress);\nMemoizedCircularProgress.displayName = \"CircularProgress\";\n\nexport { MemoizedCircularProgress as CircularProgress };\n"],"mappings":";;;;;;;AAaA,IAAAA,MAAA,GAAAC,OAAA;AAA6B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAb7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAeA,MAAMG,gBAAgB,GAAGA,CAAC;EACxBC,SAAS;EACTC,MAAM;EACNC;AACqB,CAAC,KACtB,IAAAR,WAAA,CAAAS,GAAA,EAAAC,kBAAA,CAAAN,OAAA;EACE,cAAYE,SAAU;EACtB,WAASC,MAAO;EAChBC,KAAK,EAAEA,KAAM;EACbG,OAAO,EAAEH,KAAK,GAAG,aAAa,GAAG;AAAgB,CAClD,CACF;AAED,MAAMI,wBAAwB,GAAAC,OAAA,CAAAR,gBAAA,GAAG,IAAAS,WAAI,EAACT,gBAAgB,CAAC;AACvDO,wBAAwB,CAACG,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/dist/cjs/DataTable/DataTable.cjs

@@ -4,23 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataTable = void 0;
-var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _materialReactTable = require("material-react-table");
+var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _index = require("../icons.generated/index.cjs");
-var _constants = require("./constants.cjs");
-var _index2 = require("../Pagination/index.cjs");
+var _Box = require("../Box.cjs");
+var _index = require("../Buttons/index.cjs");
+var _Callout = require("../Callout.cjs");
+var _EmptyState = require("../EmptyState.cjs");
+var _index2 = require("../icons.generated/index.cjs");
 var _DataFilters = require("../labs/DataFilters.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _index3 = require("../Pagination/index.cjs");
+var _constants = require("./constants.cjs");
 var _DataTableRowActions = require("./DataTableRowActions.cjs");
-var _useRowReordering = require("./useRowReordering.cjs");
 var _DataTableSettings = require("./DataTableSettings.cjs");
-var _Box = require("../Box.cjs");
-var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _useRowReordering = require("./useRowReordering.cjs");
 var _useScrollIndication = require("./useScrollIndication.cjs");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _EmptyState = require("../EmptyState.cjs");
-var _index3 = require("../Buttons/index.cjs");
-var _Callout = require("../Callout.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*!
@@ -33,9 +33,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */
-
-const ScrollableTableContainer = (0, _styled.default)("div", {
+ */const ScrollableTableContainer = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
 })(({
   odysseyDesignTokens,
@@ -177,9 +175,9 @@ const DataTable = ({
     const currentIndex = row.index + (pagination.pageIndex - 1) * pagination.pageSize;
     return (0, _jsxRuntime.jsx)(_DataTableRowActions.DataTableRowActions, {
       row: row,
-      rowIndex: currentIndex,
       rowActionButtons: rowActionButtons,
       rowActionMenuItems: rowActionMenuItems,
+      rowIndex: currentIndex,
       totalRows: totalRows,
       updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
     });
@@ -235,8 +233,8 @@ const DataTable = ({
   }, []);
   const emptyState = (0, _react.useCallback)(() => {
     const noResultsInnerContent = noResultsPlaceholder || (0, _jsxRuntime.jsx)(_EmptyState.EmptyState, {
-      heading: t("table.noresults.heading"),
-      description: t("table.noresults.text")
+      description: t("table.noresults.text"),
+      heading: t("table.noresults.heading")
     });
     const emptyStateInnerContent = emptyPlaceholder && isEmpty ? emptyPlaceholder : noResultsInnerContent;
     return (0, _jsxRuntime.jsx)(_Box.Box, {
@@ -251,6 +249,65 @@ const DataTable = ({
   }, [columns]);
   const columnOrder = (0, _react.useMemo)(() => ["mrt-row-drag", "mrt-row-select", "mrt-row-expand", ...columnIds, "mrt-row-actions"], [columnIds]);
   const shouldDisplayRowActions = (0, _react.useMemo)(() => hasRowReordering === true && onReorderRows || rowActionButtons || rowActionMenuItems ? true : false, [hasRowReordering, onReorderRows, rowActionButtons, rowActionMenuItems]);
+  const muiTableBodyProps = (0, _react.useCallback)(() => ({
+    className: rowDensityClassName
+  }), [rowDensityClassName]);
+  const muiTableBodyCellProps = (0, _react.useCallback)(({
+    column
+  }) => ({
+    className: column.getIsResizing() ? "isResizing" : "",
+    sx: {
+      overflowWrap: "anywhere"
+    }
+  }), []);
+  const muiDetailPanelProps = (0, _react.useCallback)(({
+    row
+  }) => ({
+    sx: {
+      paddingBlock: row.getIsExpanded() ? `${odysseyDesignTokens.Spacing3} !important` : undefined
+    }
+  }), [odysseyDesignTokens.Spacing3]);
+  const muiTableBodyRowProps = (0, _react.useCallback)(({
+    table,
+    row,
+    isDetailPanel
+  }) => ({
+    className: draggableTableBodyRowClassName({
+      currentRowId: row.id,
+      draggingRowId: draggingRow?.id,
+      hoveredRowId: table.getState().hoveredRow?.id
+    }),
+    sx: {
+      ...(isDetailPanel && {
+        paddingBlock: "0 !important",
+        border: 0,
+        ["&:hover"]: {
+          backgroundColor: `transparent !important`
+        }
+      })
+    }
+  }), [draggableTableBodyRowClassName, draggingRow?.id]);
+  const muiRowDragHandleProps = (0, _react.useCallback)(({
+    table,
+    row
+  }) => ({
+    onKeyDown: event => handleDragHandleKeyDown({
+      table,
+      row,
+      event
+    }),
+    onBlur: () => resetDraggingAndHoveredRow(table),
+    onDragEnd: () => handleDragHandleOnDragEnd(table),
+    onDragCapture: () => handleDragHandleOnDragCapture(table),
+    sx: dragHandleStyles,
+    ...dragHandleText
+  }), [dragHandleStyles, dragHandleText, handleDragHandleKeyDown, resetDraggingAndHoveredRow, handleDragHandleOnDragEnd, handleDragHandleOnDragCapture]);
+  const muiTableHeadCellProps = (0, _react.useCallback)(({
+    column: currentColumn
+  }) => ({
+    className: columnSorting.find(sortedColumn => sortedColumn.id === currentColumn.id) ? "isSorted" : "isUnsorted"
+  }), [columnSorting]);
+  const hasColumnWithGrow = (0, _react.useMemo)(() => columns.some(column => column.grow === true), [columns]);
   const dataTable = (0, _materialReactTable.useMaterialReactTable)({
     columns: columns,
     data: data,
@@ -264,10 +321,10 @@ const DataTable = ({
       columnOrder
     },
     icons: {
-      ArrowDownwardIcon: _index.ArrowDownIcon,
-      DragHandleIcon: _index.DragIndicatorIcon,
-      SyncAltIcon: _index.ArrowUnsortedIcon,
-      ExpandMoreIcon: _index.ChevronDownIcon
+      ArrowDownwardIcon: _index2.ArrowDownIcon,
+      DragHandleIcon: _index2.DragIndicatorIcon,
+      SyncAltIcon: _index2.ArrowUnsortedIcon,
+      ExpandMoreIcon: _index2.ChevronDownIcon
     },
     enableColumnActions: false,
     enableColumnResizing: hasColumnResizing,
@@ -313,12 +370,12 @@ const DataTable = ({
             children: [rowActionButtons && rowActionButtons({
               id: null
             }), (hasRowReordering && onReorderRows || rowActionMenuItems) && (0, _jsxRuntime.jsx)(_Box.Box, {
-              children: (0, _jsxRuntime.jsx)(_index3.Button, {
-                endIcon: (0, _jsxRuntime.jsx)(_index.MoreIcon, {}),
-                size: "small",
-                variant: "floating",
+              children: (0, _jsxRuntime.jsx)(_index.Button, {
                 ariaLabel: t("table.moreactions.arialabel"),
-                isDisabled: true
+                endIcon: (0, _jsxRuntime.jsx)(_index2.MoreIcon, {}),
+                isDisabled: true,
+                size: "small",
+                variant: "floating"
               })
             })]
           })
@@ -342,7 +399,7 @@ const DataTable = ({
             sx: {
               marginInline: "-0.1rem"
             },
-            children: (0, _jsxRuntime.jsx)(_index.DragIndicatorIcon, {
+            children: (0, _jsxRuntime.jsx)(_index2.DragIndicatorIcon, {
               sx: {
                 marginInline: 1,
                 opacity: 0
@@ -363,44 +420,16 @@ const DataTable = ({
         header: ""
       }
     },
-    muiTableBodyProps: () => ({
-      className: rowDensityClassName
-    }),
+    muiTableBodyProps,
     defaultColumn: {
       Cell: defaultCell
     },
-    muiTableBodyCellProps: ({
-      column
-    }) => ({
-      className: column.getIsResizing() ? "isResizing" : ""
-    }),
+    muiTableBodyCellProps,
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),
-    muiTableBodyRowProps: ({
-      table,
-      row
-    }) => ({
-      className: draggableTableBodyRowClassName({
-        currentRowId: row.id,
-        draggingRowId: draggingRow?.id,
-        hoveredRowId: table.getState().hoveredRow?.id
-      })
-    }),
-    muiRowDragHandleProps: ({
-      table,
-      row
-    }) => ({
-      onKeyDown: event => handleDragHandleKeyDown({
-        table,
-        row,
-        event
-      }),
-      onBlur: () => resetDraggingAndHoveredRow(table),
-      onDragEnd: () => handleDragHandleOnDragEnd(table),
-      onDragCapture: () => handleDragHandleOnDragCapture(table),
-      sx: dragHandleStyles,
-      ...dragHandleText
-    }),
+    muiDetailPanelProps,
+    muiTableBodyRowProps,
+    muiRowDragHandleProps,
     enableRowActions: shouldDisplayRowActions,
     positionActionsColumn: "last",
     renderRowActions: ({
@@ -412,11 +441,7 @@ const DataTable = ({
     onRowSelectionChange: setRowSelection,
     enableSorting: hasSorting,
     onSortingChange: setColumnSorting,
-    muiTableHeadCellProps: ({
-      column: currentColumn
-    }) => ({
-      className: columnSorting.find(sortedColumn => sortedColumn.id === currentColumn.id) ? "isSorted" : "isUnsorted"
-    }),
+    muiTableHeadCellProps,
     enableRowVirtualization: paginationType !== "loadMore" && pagination.pageSize > 50,
     rowVirtualizerInstanceRef: (0, _react.useRef)(null),
     rowVirtualizerOptions: {
@@ -425,7 +450,7 @@ const DataTable = ({
     renderEmptyRowsFallback: emptyState,
     muiTableProps: {
       ref: tableContentRef,
-      className: !shouldDisplayRowActions && hasColumnResizing ? "ods-hide-spacer-column" : ""
+      className: !shouldDisplayRowActions && hasColumnResizing ? hasColumnWithGrow ? "ods-hide-spacer-column" : "ods-hide-spacer-column ods-column-grow" : ""
     },
     muiTableContainerProps: {
       ref: tableInnerContainerRef
@@ -434,11 +459,11 @@ const DataTable = ({
     renderDetailPanel: renderDetailPanel
   });
   const bulkActionMenuButton = (0, _react.useMemo)(() => (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(_index3.MenuButton, {
+    children: (0, _jsxRuntime.jsx)(_index.MenuButton, {
+      ariaLabel: "More actions",
       buttonVariant: "secondary",
-      endIcon: (0, _jsxRuntime.jsx)(_index.MoreIcon, {}),
+      endIcon: (0, _jsxRuntime.jsx)(_index2.MoreIcon, {}),
       isDisabled: Object.keys(rowSelection).length === 0,
-      ariaLabel: "More actions",
       children: bulkActionMenuItems?.(rowSelection)
     })
   }), [bulkActionMenuItems, rowSelection]);
@@ -479,7 +504,7 @@ const DataTable = ({
   }, [rowSelection, onChangeRowSelection]);
   const {
     lastRow
-  } = (0, _index2.usePagination)({
+  } = (0, _index3.usePagination)({
     currentRowsCount: data.length,
     pageIndex: pagination.pageIndex,
     pageSize: pagination.pageSize,
@@ -491,30 +516,30 @@ const DataTable = ({
         marginBottom: 5
       },
       children: (0, _jsxRuntime.jsx)(_DataFilters.DataFilters, {
-        onChangeSearch: hasSearch ? setSearch : undefined,
-        onChangeFilters: hasFilters ? setFilters : undefined,
-        hasSearchSubmitButton: hasSearchSubmitButton,
-        searchDelayTime: searchDelayTime,
-        filters: hasFilters ? dataTableFilters : undefined,
-        defaultSearchTerm: initialSearchValue,
-        isDisabled: isEmpty,
         additionalActions: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [(0, _jsxRuntime.jsx)(_DataTableSettings.DataTableSettings, {
-            hasChangeableDensity: hasChangeableDensity,
-            rowDensity: rowDensity,
-            setRowDensity: setRowDensity,
-            hasColumnVisibility: hasColumnVisibility,
             columns: columns,
             columnVisibility: columnVisibility,
-            setColumnVisibility: setColumnVisibility
-          }), bulkActionMenuItems && bulkActionMenuButton, additionalActionButton, additionalActionMenuItems && (0, _jsxRuntime.jsx)(_index3.MenuButton, {
-            endIcon: (0, _jsxRuntime.jsx)(_index.MoreIcon, {}),
+            hasChangeableDensity: hasChangeableDensity,
+            hasColumnVisibility: hasColumnVisibility,
+            rowDensity: rowDensity,
+            setColumnVisibility: setColumnVisibility,
+            setRowDensity: setRowDensity
+          }), bulkActionMenuItems && bulkActionMenuButton, additionalActionButton, additionalActionMenuItems && (0, _jsxRuntime.jsx)(_index.MenuButton, {
             ariaLabel: t("table.moreactions.arialabel"),
             buttonVariant: "secondary",
+            endIcon: (0, _jsxRuntime.jsx)(_index2.MoreIcon, {}),
             menuAlignment: "right",
             children: additionalActionMenuItems
           })]
-        })
+        }),
+        defaultSearchTerm: initialSearchValue,
+        filters: hasFilters ? dataTableFilters : undefined,
+        hasSearchSubmitButton: hasSearchSubmitButton,
+        isDisabled: isEmpty,
+        onChangeFilters: hasFilters ? setFilters : undefined,
+        onChangeSearch: hasSearch ? setSearch : undefined,
+        searchDelayTime: searchDelayTime
       })
     }), errorMessage && (0, _jsxRuntime.jsx)(_Box.Box, {
       sx: {
@@ -525,30 +550,30 @@ const DataTable = ({
         text: errorMessage
       })
     }), (0, _jsxRuntime.jsx)(ScrollableTableContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      isScrollableStart: !isTableContainerScrolledToStart,
       isScrollableEnd: !isTableContainerScrolledToEnd,
+      isScrollableStart: !isTableContainerScrolledToStart,
+      odysseyDesignTokens: odysseyDesignTokens,
       ref: tableOuterContainerRef,
       children: (0, _jsxRuntime.jsx)(_materialReactTable.MRT_TableContainer, {
         table: dataTable
       })
-    }), hasPagination && (0, _jsxRuntime.jsx)(_index2.Pagination, {
-      pageIndex: pagination.pageIndex,
-      pageSize: pagination.pageSize,
-      maxPageIndex: maxPages,
-      maxPageSize: maxResultsPerPage,
-      onPaginationChange: setPagination,
-      lastRow: lastRow,
-      totalRows: totalRows,
+    }), hasPagination && (0, _jsxRuntime.jsx)(_index3.Pagination, {
+      currentPageLabel: t("pagination.page"),
       currentRowsCount: data.length,
       isDisabled: isEmpty,
       isMoreDisabled: isPaginationMoreDisabled,
-      variant: paginationType,
-      rowsPerPageLabel: t("pagination.rowsperpage"),
-      currentPageLabel: t("pagination.page"),
-      previousLabel: t("pagination.previous"),
+      lastRow: lastRow,
+      loadMoreLabel: t("pagination.loadmore"),
+      maxPageIndex: maxPages,
+      maxPageSize: maxResultsPerPage,
       nextLabel: t("pagination.next"),
-      loadMoreLabel: t("pagination.loadmore")
+      onPaginationChange: setPagination,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      previousLabel: t("pagination.previous"),
+      rowsPerPageLabel: t("pagination.rowsperpage"),
+      totalRows: totalRows,
+      variant: paginationType
     })]
   });
 };