@okta/odyssey-react-mui 1.21.2 → 1.22.0

package/dist/labs/{DataComponents/TableContent.js → DataView/TableLayoutContent.js}

@@ -33,7 +33,7 @@ const TextWrapper = styled("div")(() => ({
 const RowActionsContainer = styled("div")(() => ({
   display: "flex"
 }));
-const TableContent = ({
+const TableLayoutContent = ({
   columns,
   data,
   draggingRow,
@@ -51,7 +51,7 @@ const TableContent = ({
   rowSelection,
   setRowSelection,
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState,
   totalRows
 }) => {
@@ -103,7 +103,7 @@ const TableContent = ({
   }) => {
     const currentIndex = row.index + (pagination.pageIndex - 1) * pagination.pageSize;
     return _jsxs(RowActionsContainer, {
-      children: [tableOptions.rowActionButtons?.(row), (tableOptions.rowActionMenuItems || hasRowReordering) && _jsx(MenuButton, {
+      children: [tableLayoutOptions.rowActionButtons?.(row), (tableLayoutOptions.rowActionMenuItems || hasRowReordering) && _jsx(MenuButton, {
         ariaLabel: t("table.moreactions.arialabel"),
         buttonVariant: "floating",
         endIcon: _jsx(MoreIcon, {}),
@@ -112,14 +112,14 @@ const TableContent = ({
         children: _jsx(RowActions, {
           isRowReorderingDisabled: isRowReorderingDisabled,
           row: row,
-          rowActionMenuItems: tableOptions.rowActionMenuItems,
+          rowActionMenuItems: tableLayoutOptions.rowActionMenuItems,
           rowIndex: currentIndex,
           totalRows: totalRows,
           updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
         })
       })]
     });
-  }, [hasRowReordering, isRowReorderingDisabled, onReorderRows, pagination.pageIndex, pagination.pageSize, t, tableOptions, totalRows, updateRowOrder]);
+  }, [hasRowReordering, isRowReorderingDisabled, onReorderRows, pagination.pageIndex, pagination.pageSize, t, tableLayoutOptions, totalRows, updateRowOrder]);
   const innerWidthStyle = useMemo(() => ({
     width: tableInnerContainerWidth
   }), [tableInnerContainerWidth]);
@@ -127,7 +127,7 @@ const TableContent = ({
     sx: innerWidthStyle,
     children: emptyState
   }), [innerWidthStyle, emptyState]);
-  const shouldDisplayRowActions = useMemo(() => hasRowReordering === true && onReorderRows || tableOptions.rowActionButtons || tableOptions.rowActionMenuItems ? true : false, [hasRowReordering, onReorderRows, tableOptions.rowActionButtons, tableOptions.rowActionMenuItems]);
+  const shouldDisplayRowActions = useMemo(() => hasRowReordering === true && onReorderRows || tableLayoutOptions.rowActionButtons || tableLayoutOptions.rowActionMenuItems ? true : false, [hasRowReordering, onReorderRows, tableLayoutOptions.rowActionButtons, tableLayoutOptions.rowActionMenuItems]);
   const dataTable = useMaterialReactTable({
     data: !isEmpty && !isNoResults ? data : [],
     columns,
@@ -170,9 +170,9 @@ const TableContent = ({
               display: "flex",
               visibility: "hidden"
             },
-            children: [tableOptions.rowActionButtons && tableOptions.rowActionButtons({
+            children: [tableLayoutOptions.rowActionButtons && tableLayoutOptions.rowActionButtons({
               id: null
-            }), (hasRowReordering === true && onReorderRows || tableOptions.rowActionMenuItems) && _jsx(Box, {
+            }), (hasRowReordering === true && onReorderRows || tableLayoutOptions.rowActionMenuItems) && _jsx(Box, {
               children: _jsx(Button, {
                 endIcon: _jsx(MoreIcon, {}),
                 size: "small",
@@ -187,7 +187,7 @@ const TableContent = ({
     },
     muiTableProps: {
       ref: tableContentRef,
-      className: !shouldDisplayRowActions && tableOptions.hasColumnResizing ? "ods-hide-spacer-column" : ""
+      className: !shouldDisplayRowActions && tableLayoutOptions.hasColumnResizing ? "ods-hide-spacer-column" : ""
     },
     muiTableContainerProps: {
       ref: tableInnerContainerRef
@@ -195,11 +195,11 @@ const TableContent = ({
     muiTableBodyProps: () => ({
       className: rowDensityClassName
     }),
-    enableColumnResizing: tableOptions.hasColumnResizing,
+    enableColumnResizing: tableLayoutOptions.hasColumnResizing,
     defaultColumn: {
       Cell: defaultCell
     },
-    enableRowActions: shouldDisplayRowActions,
+    enableRowActions: hasRowReordering === true && onReorderRows || tableLayoutOptions.rowActionButtons || tableLayoutOptions.rowActionMenuItems ? true : false,
     renderRowActions: ({
       row
     }) => renderRowActions({
@@ -248,7 +248,7 @@ const TableContent = ({
       sx: dragHandleStyles,
       ...dragHandleText
     }),
-    renderDetailPanel: tableOptions.renderDetailPanel,
+    renderDetailPanel: tableLayoutOptions.renderDetailPanel,
     enableRowVirtualization: data.length >= 50,
     muiTableHeadCellProps: ({
       column: currentColumn
@@ -260,7 +260,7 @@ const TableContent = ({
     }) => ({
       className: column.getIsResizing() ? "isResizing" : ""
     }),
-    enableSorting: tableOptions.hasSorting === true,
+    enableSorting: tableLayoutOptions.hasSorting === true,
     onSortingChange: sortingUpdater => {
       const newSortVal = typeof sortingUpdater === "function" ? sortingUpdater(tableState.columnSorting) : tableState.columnSorting;
       setTableState(prevState => ({
@@ -288,7 +288,7 @@ const TableContent = ({
     })
   });
 };
-const MemoizedTableContent = memo(TableContent);
-MemoizedTableContent.displayName = "TableContent";
-export { MemoizedTableContent as TableContent };
-//# sourceMappingURL=TableContent.js.map
+const MemoizedTableLayoutContent = memo(TableLayoutContent);
+MemoizedTableLayoutContent.displayName = "TableLayoutContent";
+export { MemoizedTableLayoutContent as TableLayoutContent };
+//# sourceMappingURL=TableLayoutContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableLayoutContent.js","names":["memo","useCallback","useMemo","useRef","useState","styled","MRT_TableContainer","useMaterialReactTable","useTranslation","ArrowDownIcon","ArrowUnsortedIcon","ChevronDownIcon","DragIndicatorIcon","Box","Button","dataTableImmutableSettings","displayColumnDefOptions","ScrollableTableContainer","MenuButton","MoreIcon","RowActions","useOdysseyDesignTokens","useScrollIndication","jsx","_jsx","jsxs","_jsxs","TextWrapper","whiteSpace","textOverflow","overflow","RowActionsContainer","display","TableLayoutContent","columns","data","draggingRow","emptyState","getRowId","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","setTableState","tableLayoutOptions","tableState","totalRows","isTableContainerScrolledToStart","setIsTableContainerScrolledToStart","isTableContainerScrolledToEnd","setIsTableContainerScrolledToEnd","tableInnerContainerWidth","setTableInnerContainerWidth","tableOuterContainerRef","tableInnerContainerRef","tableContentRef","tableInnerContainer","current","tableOuterContainer","odysseyDesignTokens","t","columnIds","map","column","accessorKey","columnOrder","filter","id","rowDensityClassName","rowDensity","defaultCell","cell","value","getValue","hasTextWrapping","columnDef","enableWrapping","children","draggableTableBodyRowClassName","dragHandleStyles","dragHandleText","handleDragHandleKeyDown","handleDragHandleOnDragCapture","handleDragHandleOnDragEnd","resetDraggingAndHoveredRow","updateRowOrder","renderRowActions","row","currentIndex","index","pageIndex","pageSize","rowActionButtons","rowActionMenuItems","ariaLabel","buttonVariant","endIcon","menuAlignment","size","rowIndex","undefined","innerWidthStyle","width","emptyStateContainer","sx","shouldDisplayRowActions","dataTable","state","sorting","columnSorting","columnVisibility","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","ExpandMoreIcon","header","grow","muiTableBodyCellProps","align","className","muiTableHeadCellProps","visibility","variant","isDisabled","muiTableProps","ref","hasColumnResizing","muiTableContainerProps","muiTableBodyProps","enableColumnResizing","defaultColumn","Cell","enableRowActions","enableRowOrdering","Boolean","enableRowDragging","muiDetailPanelProps","paddingBlock","getIsExpanded","Spacing3","muiTableBodyRowProps","table","isDetailPanel","currentRowId","draggingRowId","hoveredRowId","getState","hoveredRow","border","backgroundColor","HueNeutralWhite","muiRowDragHandleProps","onKeyDown","event","onBlur","onDragEnd","onDragCapture","disabled","renderDetailPanel","enableRowVirtualization","length","currentColumn","find","sortedColumn","getIsResizing","enableSorting","hasSorting","onSortingChange","sortingUpdater","newSortVal","prevState","enableRowSelection","onRowSelectionChange","renderEmptyRowsFallback","localization","collapse","collapseAll","expand","expandAll","isScrollableEnd","isScrollableStart","MemoizedTableLayoutContent","displayName"],"sources":["../../../src/labs/DataView/TableLayoutContent.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 {\n  SetStateAction,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  ReactNode,\n  Dispatch,\n  ReactElement,\n} from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableContainer,\n  MRT_TableInstance,\n  MRT_TableOptions,\n  useMaterialReactTable,\n} from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  ArrowDownIcon,\n  ArrowUnsortedIcon,\n  ChevronDownIcon,\n  DragIndicatorIcon,\n} from \"../../icons.generated\";\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { TableLayoutProps, TableState, UniversalProps } from \"./componentTypes\";\nimport { DataTableCell } from \"./dataTypes\";\nimport {\n  dataTableImmutableSettings,\n  displayColumnDefOptions,\n  ScrollableTableContainer,\n} from \"./tableConstants\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { MoreIcon } from \"../../icons.generated\";\nimport { RowActions } from \"./RowActions\";\nimport { useOdysseyDesignTokens } from \"../../OdysseyDesignTokensContext\";\nimport { useScrollIndication } from \"../../DataTable/useScrollIndication\";\n\nconst TextWrapper = styled(\"div\")(() => ({\n  whiteSpace: \"nowrap\",\n  textOverflow: \"ellipsis\",\n  overflow: \"hidden\",\n}));\n\nconst RowActionsContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nexport type TableLayoutContentProps = {\n  columns: TableLayoutProps[\"columns\"];\n  data: MRT_RowData[];\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps[\"getRowId\"];\n  hasRowReordering: UniversalProps[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps[\"onReorderRows\"];\n  pagination: {\n    pageIndex: number;\n    pageSize: number;\n  };\n  rowReorderingUtilities: {\n    dragHandleStyles: CSSObject;\n    dragHandleText: {\n      title: string;\n      \"aria-label\": string;\n    };\n    draggableTableBodyRowClassName: ({\n      currentRowId,\n      draggingRowId,\n      hoveredRowId,\n    }: {\n      currentRowId: string;\n      draggingRowId?: string;\n      hoveredRowId?: string;\n    }) => string | undefined;\n    handleDragHandleKeyDown: ({\n      table,\n      row,\n      event,\n    }: {\n      table: MRT_TableInstance<MRT_RowData>;\n      row: MRT_Row<MRT_RowData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (\n      table: MRT_TableInstance<MRT_RowData>,\n    ) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  setTableState: Dispatch<SetStateAction<TableState>>;\n  tableLayoutOptions: TableLayoutProps;\n  tableState: TableState;\n  totalRows: UniversalProps[\"totalRows\"];\n};\n\nconst TableLayoutContent = ({\n  columns,\n  data,\n  draggingRow,\n  emptyState,\n  getRowId,\n  hasRowReordering,\n  hasRowSelection,\n  isEmpty,\n  isLoading,\n  isNoResults,\n  isRowReorderingDisabled,\n  onReorderRows,\n  pagination,\n  rowReorderingUtilities,\n  rowSelection,\n  setRowSelection,\n  setTableState,\n  tableLayoutOptions,\n  tableState,\n  totalRows,\n}: TableLayoutContentProps) => {\n  const [isTableContainerScrolledToStart, setIsTableContainerScrolledToStart] =\n    useState(true);\n  const [isTableContainerScrolledToEnd, setIsTableContainerScrolledToEnd] =\n    useState(true);\n  const [tableInnerContainerWidth, setTableInnerContainerWidth] =\n    useState<string>(\"100%\");\n  const tableOuterContainerRef = useRef<HTMLDivElement>(null);\n  const tableInnerContainerRef = useRef<HTMLDivElement>(null);\n  const tableContentRef = useRef<HTMLTableElement>(null);\n\n  useScrollIndication({\n    setIsTableContainerScrolledToEnd: setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart: setIsTableContainerScrolledToStart,\n    setTableInnerContainerWidth: setTableInnerContainerWidth,\n    tableInnerContainer: tableInnerContainerRef.current,\n    tableOuterContainer: tableOuterContainerRef.current,\n  });\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const columnIds = useMemo(() => {\n    return columns.map((column) => column.accessorKey) ?? [];\n  }, [columns]);\n\n  const columnOrder = useMemo(\n    () => [\n      \"mrt-row-drag\",\n      \"mrt-row-select\",\n      \"mrt-row-expand\",\n      ...(columnIds?.filter((id): id is string => typeof id === \"string\") ||\n        []),\n      \"mrt-row-actions\",\n    ],\n    [columnIds],\n  );\n\n  const rowDensityClassName = useMemo(() => {\n    return tableState.rowDensity === \"spacious\"\n      ? \"MuiTableBody-spacious\"\n      : tableState.rowDensity === \"compact\"\n        ? \"MuiTableBody-compact\"\n        : \"MuiTableBody-default\";\n  }, [tableState]);\n\n  const defaultCell = useCallback<\n    ({ cell }: { cell: DataTableCell<MRT_RowData> }) => ReactElement | string\n  >(({ cell }) => {\n    const value = cell.getValue<string>();\n    const hasTextWrapping =\n      cell.column.columnDef.hasTextWrapping ||\n      cell.column.columnDef.enableWrapping;\n    return hasTextWrapping ? value : <TextWrapper>{value}</TextWrapper>;\n  }, []);\n\n  const {\n    draggableTableBodyRowClassName,\n    dragHandleStyles,\n    dragHandleText,\n    handleDragHandleKeyDown,\n    handleDragHandleOnDragCapture,\n    handleDragHandleOnDragEnd,\n    resetDraggingAndHoveredRow,\n    updateRowOrder,\n  } = rowReorderingUtilities;\n\n  const renderRowActions = useCallback(\n    ({ row }: { row: MRT_Row<MRT_RowData> }) => {\n      const currentIndex =\n        row.index + (pagination.pageIndex - 1) * pagination.pageSize;\n      return (\n        <RowActionsContainer>\n          {tableLayoutOptions.rowActionButtons?.(row)}\n          {(tableLayoutOptions.rowActionMenuItems || hasRowReordering) && (\n            <MenuButton\n              ariaLabel={t(\"table.moreactions.arialabel\")}\n              buttonVariant=\"floating\"\n              endIcon={<MoreIcon />}\n              menuAlignment=\"right\"\n              size=\"small\"\n            >\n              <RowActions\n                isRowReorderingDisabled={isRowReorderingDisabled}\n                row={row}\n                rowActionMenuItems={tableLayoutOptions.rowActionMenuItems}\n                rowIndex={currentIndex}\n                totalRows={totalRows}\n                updateRowOrder={\n                  hasRowReordering && onReorderRows ? updateRowOrder : undefined\n                }\n              />\n            </MenuButton>\n          )}\n        </RowActionsContainer>\n      );\n    },\n    [\n      hasRowReordering,\n      isRowReorderingDisabled,\n      onReorderRows,\n      pagination.pageIndex,\n      pagination.pageSize,\n      t,\n      tableLayoutOptions,\n      totalRows,\n      updateRowOrder,\n    ],\n  );\n\n  const innerWidthStyle = useMemo(\n    () => ({ width: tableInnerContainerWidth }),\n    [tableInnerContainerWidth],\n  );\n\n  const emptyStateContainer = useCallback(\n    () => <Box sx={innerWidthStyle}>{emptyState}</Box>,\n    [innerWidthStyle, emptyState],\n  );\n\n  const shouldDisplayRowActions = useMemo(\n    () =>\n      (hasRowReordering === true && onReorderRows) ||\n      tableLayoutOptions.rowActionButtons ||\n      tableLayoutOptions.rowActionMenuItems\n        ? true\n        : false,\n    [\n      hasRowReordering,\n      onReorderRows,\n      tableLayoutOptions.rowActionButtons,\n      tableLayoutOptions.rowActionMenuItems,\n    ],\n  );\n\n  const dataTable = useMaterialReactTable({\n    data: !isEmpty && !isNoResults ? data : [],\n    columns,\n    getRowId,\n    state: {\n      sorting: tableState.columnSorting,\n      columnVisibility: tableState.columnVisibility,\n      isLoading: isLoading,\n      rowSelection: rowSelection,\n      columnOrder: columnOrder,\n    },\n    icons: {\n      ArrowDownwardIcon: ArrowDownIcon,\n      DragHandleIcon: DragIndicatorIcon,\n      SyncAltIcon: ArrowUnsortedIcon,\n      ExpandMoreIcon: ChevronDownIcon,\n    },\n    ...dataTableImmutableSettings,\n    displayColumnDefOptions: {\n      ...(displayColumnDefOptions satisfies Partial<\n        MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"]\n      >),\n      \"mrt-row-actions\": {\n        header: \"\",\n        grow: true,\n        muiTableBodyCellProps: {\n          align: \"right\" as const,\n          sx: {\n            overflow: \"visible\",\n            width: \"unset\",\n          },\n          className: \"ods-actions-cell\",\n        },\n        muiTableHeadCellProps: {\n          align: \"right\" as const,\n          sx: {\n            width: \"unset\",\n          },\n          className: \"ods-actions-cell\",\n          children: (\n            <Box sx={{ display: \"flex\", visibility: \"hidden\" }}>\n              {tableLayoutOptions.rowActionButtons &&\n                tableLayoutOptions.rowActionButtons({ id: null })}\n              {((hasRowReordering === true && onReorderRows) ||\n                tableLayoutOptions.rowActionMenuItems) && (\n                <Box>\n                  <Button\n                    endIcon={<MoreIcon />}\n                    size=\"small\"\n                    variant=\"floating\"\n                    ariaLabel={t(\"table.moreactions.arialabel\")}\n                    isDisabled\n                  />\n                </Box>\n              )}\n            </Box>\n          ),\n        },\n      },\n    },\n    muiTableProps: {\n      ref: tableContentRef,\n      className:\n        !shouldDisplayRowActions && tableLayoutOptions.hasColumnResizing\n          ? \"ods-hide-spacer-column\"\n          : \"\",\n    },\n    muiTableContainerProps: {\n      ref: tableInnerContainerRef,\n    },\n    muiTableBodyProps: () => ({\n      className: rowDensityClassName,\n    }),\n    enableColumnResizing: tableLayoutOptions.hasColumnResizing,\n    defaultColumn: {\n      Cell: defaultCell,\n    },\n    enableRowActions:\n      (hasRowReordering === true && onReorderRows) ||\n      tableLayoutOptions.rowActionButtons ||\n      tableLayoutOptions.rowActionMenuItems\n        ? true\n        : false,\n    renderRowActions: ({ row }) => renderRowActions({ row }),\n    enableRowOrdering: hasRowReordering && Boolean(onReorderRows),\n    enableRowDragging: hasRowReordering && Boolean(onReorderRows),\n    muiDetailPanelProps: ({ row }) => ({\n      sx: {\n        paddingBlock: row.getIsExpanded()\n          ? `${odysseyDesignTokens.Spacing3} !important`\n          : undefined,\n      },\n    }),\n    muiTableBodyRowProps: ({ table, row, isDetailPanel }) => ({\n      className: draggableTableBodyRowClassName({\n        currentRowId: row.id,\n        draggingRowId: draggingRow?.id,\n        hoveredRowId: table.getState().hoveredRow?.id,\n      }),\n      sx: isDetailPanel\n        ? {\n            paddingBlock: \"0 !important\",\n            border: 0,\n            [\"&:hover\"]: {\n              backgroundColor: `${odysseyDesignTokens.HueNeutralWhite} !important`,\n            },\n          }\n        : {},\n    }),\n    muiRowDragHandleProps: ({ table, row }) => ({\n      onKeyDown: (event) => handleDragHandleKeyDown({ table, row, event }),\n      onBlur: () => resetDraggingAndHoveredRow(table),\n      onDragEnd: () => handleDragHandleOnDragEnd(table),\n      onDragCapture: () => handleDragHandleOnDragCapture(table),\n      disabled: isRowReorderingDisabled,\n      sx: dragHandleStyles,\n      ...dragHandleText,\n    }),\n    renderDetailPanel: tableLayoutOptions.renderDetailPanel,\n    enableRowVirtualization: data.length >= 50,\n    muiTableHeadCellProps: ({ column: currentColumn }) => ({\n      className: tableState.columnSorting.find(\n        (sortedColumn) => sortedColumn.id === currentColumn.id,\n      )\n        ? \"isSorted\"\n        : \"isUnsorted\",\n    }),\n    muiTableBodyCellProps: ({ column }) => ({\n      className: column.getIsResizing() ? \"isResizing\" : \"\",\n    }),\n    enableSorting: tableLayoutOptions.hasSorting === true, // I don't know why this needs to be true, but it still works if undefined otherwise\n    onSortingChange: (sortingUpdater) => {\n      const newSortVal =\n        typeof sortingUpdater === \"function\"\n          ? sortingUpdater(tableState.columnSorting)\n          : tableState.columnSorting;\n      setTableState((prevState) => ({\n        ...prevState,\n        columnSorting: newSortVal,\n      }));\n    },\n    enableRowSelection: hasRowSelection,\n    onRowSelectionChange: setRowSelection,\n    renderEmptyRowsFallback: emptyStateContainer,\n    localization: {\n      collapse: t(\"table.rowexpansion.collapse\"),\n      collapseAll: t(\"table.rowexpansion.collapseall\"),\n      expand: t(\"table.rowexpansion.expand\"),\n      expandAll: t(\"table.rowexpansion.expandall\"),\n    },\n  });\n\n  return (\n    <ScrollableTableContainer\n      isScrollableEnd={!isTableContainerScrolledToEnd}\n      isScrollableStart={!isTableContainerScrolledToStart}\n      odysseyDesignTokens={odysseyDesignTokens}\n      ref={tableOuterContainerRef}\n    >\n      <MRT_TableContainer table={dataTable} />\n    </ScrollableTableContainer>\n  );\n};\n\nconst MemoizedTableLayoutContent = memo(TableLayoutContent);\nMemoizedTableLayoutContent.displayName = \"TableLayoutContent\";\n\nexport { MemoizedTableLayoutContent as TableLayoutContent };\n"],"mappings":"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"}

package/dist/labs/{DataComponents → DataView}/TableSettings.js

@@ -22,7 +22,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const TableSettings = ({
   setTableState,
-  tableOptions,
+  tableLayoutOptions,
   tableState
 }) => {
   const {
@@ -32,7 +32,7 @@ const TableSettings = ({
     hasChangeableDensity,
     hasColumnVisibility,
     columns
-  } = tableOptions;
+  } = tableLayoutOptions;
   const {
     rowDensity,
     columnVisibility

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettings.js","names":["memo","useCallback","useMemo","useTranslation","densityValues","ListIcon","ShowIcon","MenuButton","MenuItem","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TableSettings","setTableState","tableLayoutOptions","tableState","t","hasChangeableDensity","hasColumnVisibility","columns","rowDensity","columnVisibility","changeRowDensity","value","prevState","changeColumnVisibility","columnId","visibleColumns","Set","filter","column","accessorKey","map","memoizedDensityMenu","ariaLabel","endIcon","menuAlignment","shouldCloseOnSelect","children","isSelected","onClick","charAt","toUpperCase","slice","memoizedColumnVisibilityMenu","Boolean","enableHiding","id","_Checkbox","checked","has","header","MemoizedTableSettings","displayName"],"sources":["../../../src/labs/DataView/TableSettings.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 { Dispatch, SetStateAction, memo, useCallback, useMemo } from \"react\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { MRT_DensityState } from \"material-react-table\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { densityValues } from \"./constants\";\nimport { ListIcon, ShowIcon } from \"../../icons.generated\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { MenuItem } from \"../../MenuItem\";\nimport { TableLayoutProps, TableState } from \"./componentTypes\";\n\nexport type TableSettingsProps = {\n  setTableState: Dispatch<SetStateAction<TableState>>;\n  tableLayoutOptions: TableLayoutProps;\n  tableState: TableState;\n};\n\nconst TableSettings = ({\n  setTableState,\n  tableLayoutOptions,\n  tableState,\n}: TableSettingsProps) => {\n  const { t } = useTranslation();\n\n  const { hasChangeableDensity, hasColumnVisibility, columns } =\n    tableLayoutOptions;\n  const { rowDensity, columnVisibility } = tableState;\n\n  const changeRowDensity = useCallback<(value: MRT_DensityState) => void>(\n    (value) => {\n      setTableState((prevState) => ({\n        ...prevState,\n        rowDensity: value,\n      }));\n    },\n    [setTableState],\n  );\n\n  const changeColumnVisibility = useCallback<(columnId: string) => void>(\n    (columnId) => {\n      setTableState((prevState) => ({\n        ...prevState,\n        columnVisibility: {\n          ...prevState.columnVisibility,\n          [columnId]: prevState.columnVisibility\n            ? prevState.columnVisibility[columnId] === false\n            : false,\n        },\n      }));\n    },\n    [setTableState],\n  );\n\n  const visibleColumns = useMemo(\n    () =>\n      new Set(\n        columns\n          .filter((column) =>\n            columnVisibility\n              ? columnVisibility[column.accessorKey!] !== false\n              : true,\n          )\n          .map((column) => column.accessorKey!),\n      ),\n    [columns, columnVisibility],\n  );\n\n  const memoizedDensityMenu = useMemo(\n    () =>\n      hasChangeableDensity && (\n        <MenuButton\n          ariaLabel={t(\"table.density.arialabel\")}\n          endIcon={<ListIcon />}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          {densityValues.map((value) => (\n            <MenuItem\n              key={value}\n              isSelected={rowDensity === value}\n              onClick={() => changeRowDensity(value)}\n            >\n              {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}\n            </MenuItem>\n          ))}\n        </MenuButton>\n      ),\n    [hasChangeableDensity, t, rowDensity, changeRowDensity],\n  );\n\n  const memoizedColumnVisibilityMenu = useMemo(\n    () =>\n      hasColumnVisibility && (\n        <MenuButton\n          ariaLabel={t(\"table.columnvisibility.arialabel\")}\n          endIcon={<ShowIcon />}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          {columns\n            .filter((column) => Boolean(column.enableHiding !== false))\n            .map((column) => (\n              <MenuItem\n                key={column.accessorKey}\n                onClick={() => changeColumnVisibility(column.id!)}\n              >\n                <MuiCheckbox checked={visibleColumns.has(column.id!)} />\n                {column.header}\n              </MenuItem>\n            ))}\n        </MenuButton>\n      ),\n    [hasColumnVisibility, t, columns, changeColumnVisibility, visibleColumns],\n  );\n\n  return (\n    <>\n      {memoizedDensityMenu}\n      {memoizedColumnVisibilityMenu}\n    </>\n  );\n};\n\nconst MemoizedTableSettings = memo(TableSettings);\nMemoizedTableSettings.displayName = \"TableSettings\";\n\nexport { MemoizedTableSettings as TableSettings };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAmCA,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAG5E,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,aAAa;AAAA,SACbC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,UAAU;AAAA,SACVC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AASjB,MAAMC,aAAa,GAAGA,CAAC;EACrBC,aAAa;EACbC,kBAAkB;EAClBC;AACkB,CAAC,KAAK;EACxB,MAAM;IAAEC;EAAE,CAAC,GAAGhB,cAAc,CAAC,CAAC;EAE9B,MAAM;IAAEiB,oBAAoB;IAAEC,mBAAmB;IAAEC;EAAQ,CAAC,GAC1DL,kBAAkB;EACpB,MAAM;IAAEM,UAAU;IAAEC;EAAiB,CAAC,GAAGN,UAAU;EAEnD,MAAMO,gBAAgB,GAAGxB,WAAW,CACjCyB,KAAK,IAAK;IACTV,aAAa,CAAEW,SAAS,KAAM;MAC5B,GAAGA,SAAS;MACZJ,UAAU,EAAEG;IACd,CAAC,CAAC,CAAC;EACL,CAAC,EACD,CAACV,aAAa,CAChB,CAAC;EAED,MAAMY,sBAAsB,GAAG3B,WAAW,CACvC4B,QAAQ,IAAK;IACZb,aAAa,CAAEW,SAAS,KAAM;MAC5B,GAAGA,SAAS;MACZH,gBAAgB,EAAE;QAChB,GAAGG,SAAS,CAACH,gBAAgB;QAC7B,CAACK,QAAQ,GAAGF,SAAS,CAACH,gBAAgB,GAClCG,SAAS,CAACH,gBAAgB,CAACK,QAAQ,CAAC,KAAK,KAAK,GAC9C;MACN;IACF,CAAC,CAAC,CAAC;EACL,CAAC,EACD,CAACb,aAAa,CAChB,CAAC;EAED,MAAMc,cAAc,GAAG5B,OAAO,CAC5B,MACE,IAAI6B,GAAG,CACLT,OAAO,CACJU,MAAM,CAAEC,MAAM,IACbT,gBAAgB,GACZA,gBAAgB,CAACS,MAAM,CAACC,WAAW,CAAE,KAAK,KAAK,GAC/C,IACN,CAAC,CACAC,GAAG,CAAEF,MAAM,IAAKA,MAAM,CAACC,WAAY,CACxC,CAAC,EACH,CAACZ,OAAO,EAAEE,gBAAgB,CAC5B,CAAC;EAED,MAAMY,mBAAmB,GAAGlC,OAAO,CACjC,MACEkB,oBAAoB,IAClBV,IAAA,CAACH,UAAU;IACT8B,SAAS,EAAElB,CAAC,CAAC,yBAAyB,CAAE;IACxCmB,OAAO,EAAE5B,IAAA,CAACL,QAAQ,IAAE,CAAE;IACtBkC,aAAa,EAAC,OAAO;IACrBC,mBAAmB,EAAE,KAAM;IAAAC,QAAA,EAE1BrC,aAAa,CAAC+B,GAAG,CAAET,KAAK,IACvBhB,IAAA,CAACF,QAAQ;MAEPkC,UAAU,EAAEnB,UAAU,KAAKG,KAAM;MACjCiB,OAAO,EAAEA,CAAA,KAAMlB,gBAAgB,CAACC,KAAK,CAAE;MAAAe,QAAA,EAErC,GAAEf,KAAK,CAACkB,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAE,GAAEnB,KAAK,CAACoB,KAAK,CAAC,CAAC,CAAE;IAAC,GAJ/CpB,KAKG,CACX;EAAC,CACQ,CACb,EACH,CAACN,oBAAoB,EAAED,CAAC,EAAEI,UAAU,EAAEE,gBAAgB,CACxD,CAAC;EAED,MAAMsB,4BAA4B,GAAG7C,OAAO,CAC1C,MACEmB,mBAAmB,IACjBX,IAAA,CAACH,UAAU;IACT8B,SAAS,EAAElB,CAAC,CAAC,kCAAkC,CAAE;IACjDmB,OAAO,EAAE5B,IAAA,CAACJ,QAAQ,IAAE,CAAE;IACtBiC,aAAa,EAAC,OAAO;IACrBC,mBAAmB,EAAE,KAAM;IAAAC,QAAA,EAE1BnB,OAAO,CACLU,MAAM,CAAEC,MAAM,IAAKe,OAAO,CAACf,MAAM,CAACgB,YAAY,KAAK,KAAK,CAAC,CAAC,CAC1Dd,GAAG,CAAEF,MAAM,IACVrB,KAAA,CAACJ,QAAQ;MAEPmC,OAAO,EAAEA,CAAA,KAAMf,sBAAsB,CAACK,MAAM,CAACiB,EAAG,CAAE;MAAAT,QAAA,GAElD/B,IAAA,CAAAyC,SAAA;QAAaC,OAAO,EAAEtB,cAAc,CAACuB,GAAG,CAACpB,MAAM,CAACiB,EAAG;MAAE,CAAE,CAAC,EACvDjB,MAAM,CAACqB,MAAM;IAAA,GAJTrB,MAAM,CAACC,WAKJ,CACX;EAAC,CACM,CACb,EACH,CAACb,mBAAmB,EAAEF,CAAC,EAAEG,OAAO,EAAEM,sBAAsB,EAAEE,cAAc,CAC1E,CAAC;EAED,OACElB,KAAA,CAAAE,SAAA;IAAA2B,QAAA,GACGL,mBAAmB,EACnBW,4BAA4B;EAAA,CAC7B,CAAC;AAEP,CAAC;AAED,MAAMQ,qBAAqB,GAAGvD,IAAI,CAACe,aAAa,CAAC;AACjDwC,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIxC,aAAa"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentTypes.js","names":[],"sources":["../../../src/labs/DataView/componentTypes.ts"],"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 {\n  MRT_DensityState,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_SortingState,\n  MRT_TableOptions,\n  MRT_VisibilityState,\n} from \"material-react-table\";\n\nimport { availableLayouts, availableCardLayouts } from \"./constants\";\nimport { DataFilter } from \"../DataFilters\";\nimport {\n  DataGetDataType,\n  DataOnReorderRowsType,\n  DataRowSelectionState,\n  DataTableColumn,\n} from \"./dataTypes\";\nimport { DataTableRowActionsProps } from \"../../DataTable/DataTableRowActions\";\nimport { MenuButtonProps } from \"../..\";\nimport { paginationTypeValues } from \"../DataTablePagination\";\nimport { ReactNode } from \"react\";\nimport { DataCardProps } from \"./DataCard\";\n\nexport type DataLayout = (typeof availableLayouts)[number];\nexport type CardLayout = (typeof availableCardLayouts)[number];\n\nexport type AvailableLayouts = DataLayout[];\nexport type AvailableCardLayouts = CardLayout[];\n\nexport type UniversalProps = {\n  additionalActionButton?: ReactNode;\n  additionalActionMenuItems?: ReactNode;\n  bulkActionMenuItems?: (\n    selectedRows: MRT_RowSelectionState,\n  ) => MenuButtonProps[\"children\"];\n  currentPage?: number;\n  emptyPlaceholder?: ReactNode;\n  errorMessage?: string;\n  filters?: Array<DataFilter | DataTableColumn<MRT_RowData> | string>;\n  getData: ({\n    page,\n    resultsPerPage,\n    search,\n    filters,\n    sort,\n  }: DataGetDataType) => MRT_RowData[] | Promise<MRT_RowData[]>;\n  getRowId?: MRT_TableOptions<MRT_RowData>[\"getRowId\"];\n  hasFilters?: boolean;\n  hasPagination?: boolean;\n  hasRowReordering?: boolean;\n  hasRowSelection?: boolean;\n  hasSearch?: boolean;\n  hasSearchSubmitButton?: boolean;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  isNoResults?: boolean;\n  isPaginationMoreDisabled?: boolean;\n  isRowReorderingDisabled?: boolean;\n  maxPages?: number;\n  maxResultsPerPage?: number;\n  noResultsPlaceholder?: ReactNode;\n  onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void;\n  onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void;\n  paginationType?: (typeof paginationTypeValues)[number];\n  resultsPerPage?: number;\n  searchDelayTime?: number;\n  totalRows?: number;\n};\n\nexport type TableLayoutProps = {\n  columns: DataTableColumn<MRT_RowData>[];\n  hasChangeableDensity?: boolean;\n  hasColumnResizing?: boolean;\n  hasColumnVisibility?: boolean;\n  hasSorting?: boolean;\n  initialDensity?: MRT_DensityState;\n  renderDetailPanel?: MRT_TableOptions<MRT_RowData>[\"renderDetailPanel\"];\n  rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n  rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n};\n\nexport type CardLayoutProps = {\n  itemProps: (row: MRT_RowData) => DataCardProps;\n  maxGridColumns?: number;\n  renderDetailPanel?: (props: { row: MRT_RowData }) => ReactNode;\n  rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n};\n\nexport type ViewProps<L extends DataLayout> = {\n  availableLayouts?: L[];\n  initialLayout?: L;\n  cardLayoutOptions?: CardLayoutProps;\n  tableLayoutOptions?: TableLayoutProps;\n};\n\nexport type TableState = {\n  columnSorting: MRT_SortingState;\n  columnVisibility: MRT_VisibilityState;\n  rowDensity?: MRT_DensityState;\n};\n"],"mappings":""}

package/dist/labs/{DataComponents → DataView}/constants.js

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const availableStackLayouts = ["list", "grid"];
+export const availableCardLayouts = ["list", "grid"];
 export const availableTableLayouts = ["table"];
-export const availableLayouts = [...availableTableLayouts, ...availableStackLayouts];
+export const availableLayouts = [...availableTableLayouts, ...availableCardLayouts];
 export const densityValues = ["comfortable", "spacious", "compact"];
 //# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["availableCardLayouts","availableTableLayouts","availableLayouts","densityValues"],"sources":["../../../src/labs/DataView/constants.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_DensityState } from \"material-react-table\";\n\nexport type DataViewLayout = \"list\" | \"grid\" | \"table\";\n\nexport const availableCardLayouts: DataViewLayout[] = [\"list\", \"grid\"];\nexport const availableTableLayouts: DataViewLayout[] = [\"table\"];\nexport const availableLayouts: DataViewLayout[] = [\n  ...availableTableLayouts,\n  ...availableCardLayouts,\n];\n\nexport const densityValues: MRT_DensityState[] = [\n  \"comfortable\",\n  \"spacious\",\n  \"compact\",\n];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAMA,OAAO,MAAMA,oBAAsC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;AACtE,OAAO,MAAMC,qBAAuC,GAAG,CAAC,OAAO,CAAC;AAChE,OAAO,MAAMC,gBAAkC,GAAG,CAChD,GAAGD,qBAAqB,EACxB,GAAGD,oBAAoB,CACxB;AAED,OAAO,MAAMG,aAAiC,GAAG,CAC/C,aAAa,EACb,UAAU,EACV,SAAS,CACV"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTypes.js","names":[],"sources":["../../../src/labs/DataView/dataTypes.ts"],"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 {\n  MRT_Cell,\n  MRT_Column,\n  MRT_ColumnDef,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_SortingState,\n} from \"material-react-table\";\n\nimport { DataFilter } from \"../DataFilters\";\n\nexport type DataQueryParamsType = {\n  filters?: DataFilter[];\n  page?: number;\n  resultsPerPage?: number;\n  search?: string;\n  sort?: MRT_SortingState;\n};\n\nexport type DataTableColumn<T extends MRT_RowData> = MRT_ColumnDef<T> & {\n  /**\n   * @deprecated use hasTextWrapping instead of enableWrapping\n   */\n  enableWrapping?: boolean;\n  hasTextWrapping?: boolean;\n};\n\nexport type DataTableColumnInstance<T extends MRT_RowData> = Omit<\n  MRT_Column<T, unknown>,\n  \"columnDef\"\n> & {\n  columnDef: DataTableColumn<T>;\n};\n\nexport type DataTableCell<T extends MRT_RowData> = Omit<\n  MRT_Cell<T>,\n  \"column\"\n> & {\n  column: DataTableColumnInstance<T>;\n};\n\nexport type DataColumns = DataTableColumn<MRT_RowData>[];\n\nexport type DataRow = MRT_RowData;\n\nexport type DataGetDataType = {\n  filters?: DataFilter[];\n  page?: number;\n  resultsPerPage?: number;\n  search?: string;\n  sort?: MRT_SortingState;\n};\n\nexport type DataOnReorderRowsType = {\n  newRowIndex: number;\n  rowId: string;\n};\n\nexport type DataRowSelectionState = MRT_RowSelectionState;\n\n// Provided for backwards compatibilty with old DataTable types\nexport type DataTableGetDataType = DataGetDataType;\nexport type DataTableOnReorderRowsType = DataOnReorderRowsType;\nexport type DataTableRowSelectionState = DataRowSelectionState;\nexport type DataTableRow = DataRow;\n"],"mappings":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchData.js","names":["t","fetchData","dataQueryParams","errorMessageProp","getData","setData","setErrorMessage","setIsLoading","incomingData","error"],"sources":["../../../src/labs/DataView/fetchData.ts"],"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, SetStateAction } from \"react\";\nimport { MRT_RowData } from \"material-react-table\";\nimport { t } from \"i18next\";\n\nimport { DataQueryParamsType } from \"./dataTypes\";\nimport { UniversalProps } from \"./componentTypes\";\n\ntype DataRequestType = {\n  dataQueryParams: DataQueryParamsType;\n  errorMessageProp: UniversalProps[\"errorMessage\"];\n  getData: UniversalProps[\"getData\"];\n  setData: Dispatch<SetStateAction<MRT_RowData[]>>;\n  setErrorMessage: Dispatch<SetStateAction<UniversalProps[\"errorMessage\"]>>;\n  setIsLoading?: Dispatch<SetStateAction<boolean>>;\n};\n\nexport const fetchData = async ({\n  dataQueryParams,\n  errorMessageProp,\n  getData,\n  setData,\n  setErrorMessage,\n  setIsLoading,\n}: DataRequestType) => {\n  setIsLoading?.(true);\n  setErrorMessage(errorMessageProp);\n  try {\n    const incomingData = await getData?.(dataQueryParams);\n    setData(incomingData);\n  } catch (error) {\n    setErrorMessage(typeof error === \"string\" ? error : t(\"table.error\"));\n  } finally {\n    setIsLoading?.(false);\n  }\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,CAAC,QAAQ,SAAS;AAc3B,OAAO,MAAMC,SAAS,GAAG,MAAAA,CAAO;EAC9BC,eAAe;EACfC,gBAAgB;EAChBC,OAAO;EACPC,OAAO;EACPC,eAAe;EACfC;AACe,CAAC,KAAK;EACrBA,YAAY,GAAG,IAAI,CAAC;EACpBD,eAAe,CAACH,gBAAgB,CAAC;EACjC,IAAI;IACF,MAAMK,YAAY,GAAG,MAAMJ,OAAO,GAAGF,eAAe,CAAC;IACrDG,OAAO,CAACG,YAAY,CAAC;EACvB,CAAC,CAAC,OAAOC,KAAK,EAAE;IACdH,eAAe,CAAC,OAAOG,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGT,CAAC,CAAC,aAAa,CAAC,CAAC;EACvE,CAAC,SAAS;IACRO,YAAY,GAAG,KAAK,CAAC;EACvB;AACF,CAAC"}

package/dist/labs/{DataComponents → DataView}/index.js

@@ -9,7 +9,6 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export { DataStack } from "./DataStack.js";
 export { DataTable } from "./DataTable.js";
 export { DataView } from "./DataView.js";
 export * from "./componentTypes.js";

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DataTable","DataView"],"sources":["../../../src/labs/DataView/index.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\nexport { DataTable, type DataTableProps } from \"./DataTable\";\nexport { DataView, type DataViewProps } from \"./DataView\";\n\nexport * from \"./componentTypes\";\nexport * from \"./constants\";\nexport * from \"./dataTypes\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,SAAS;AAAA,SACTC,QAAQ;AAAA;AAAA;AAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"tableConstants.js","names":["styled","Box","DragIndicatorIcon","jsx","_jsx","dataTableImmutableSettings","enableColumnActions","enableDensityToggle","enableExpandAll","enableFilters","enableFullScreenToggle","enableGlobalFilter","enableHiding","enablePagination","layoutMode","manualFiltering","manualSorting","muiTablePaperProps","elevation","sx","overflow","positionActionsColumn","rowVirtualizerOptions","overscan","selectAllMode","displayColumnDefOptions","header","muiTableBodyCellProps","minWidth","width","className","muiTableHeadCellProps","children","marginInline","opacity","padding","ScrollableTableContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrollableStart","isScrollableEnd","marginBlockEnd","Spacing4","position","borderInlineStartColor","HueNeutral200","borderInlineStartStyle","borderInlineStartWidth","BorderWidthMain","background","content","pointerEvents","top","left","bottom","Spacing6","zIndex","transition","TransitionDurationMain","TransitionTimingMain","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","right"],"sources":["../../../src/labs/DataView/tableConstants.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 { MRT_RowData, MRT_TableOptions } from \"material-react-table\";\n\nimport { Box } from \"../../Box\";\nimport { DesignTokens } from \"../../OdysseyDesignTokensContext\";\nimport { DragIndicatorIcon } from \"../../icons.generated\";\n\nexport const dataTableImmutableSettings = {\n  enableColumnActions: false,\n  enableDensityToggle: false,\n  enableExpandAll: false,\n  enableFilters: false,\n  enableFullScreenToggle: false,\n  enableGlobalFilter: false,\n  enableHiding: false,\n  enablePagination: false,\n  layoutMode: \"grid-no-grow\" as MRT_TableOptions<MRT_RowData>[\"layoutMode\"],\n  manualFiltering: true,\n  manualSorting: true,\n  muiTablePaperProps: {\n    elevation: 0,\n    sx: {\n      overflow: \"visible\",\n    },\n  },\n  positionActionsColumn:\n    \"last\" as MRT_TableOptions<MRT_RowData>[\"positionActionsColumn\"],\n  rowVirtualizerOptions: {\n    overscan: 4,\n  },\n  selectAllMode: \"all\" as MRT_TableOptions<MRT_RowData>[\"selectAllMode\"],\n};\n\nexport const displayColumnDefOptions = {\n  \"mrt-row-drag\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      className: \"ods-drag-handle\",\n    },\n    muiTableHeadCellProps: {\n      sx: {\n        minWidth: 0,\n        width: \"auto\",\n      },\n      children: (\n        // Add a spacer to simulate the width of the drag handle in the column.\n        // Without this, the head cells are offset from their body cell counterparts\n        <Box sx={{ marginInline: \"-0.1rem\" }}>\n          <DragIndicatorIcon sx={{ marginInline: 1, opacity: 0 }} />\n        </Box>\n      ),\n    },\n  },\n  \"mrt-row-select\": {\n    muiTableHeadCellProps: {\n      padding: \"checkbox\" as const,\n    },\n    muiTableBodyCellProps: {\n      padding: \"checkbox\" as const,\n    },\n  },\n  \"mrt-row-expand\": {\n    header: \"\",\n    muiTableBodyCellProps: {\n      sx: {\n        overflow: \"visible\",\n      },\n    },\n  },\n};\n\nexport const ScrollableTableContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isScrollableStart\" &&\n    prop !== \"isScrollableEnd\",\n})(\n  ({\n    odysseyDesignTokens,\n    isScrollableStart,\n    isScrollableEnd,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isScrollableStart: boolean;\n    isScrollableEnd: boolean;\n  }) => ({\n    marginBlockEnd: odysseyDesignTokens.Spacing4,\n    position: \"relative\",\n    borderInlineStartColor: isScrollableStart\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineStartStyle: \"solid\",\n    borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::before\": {\n      background:\n        \"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableStart ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      zIndex: 100,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n    borderInlineEndColor: isScrollableEnd\n      ? odysseyDesignTokens.HueNeutral200\n      : \"transparent\",\n    borderInlineEndStyle: \"solid\",\n    borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,\n    \"::after\": {\n      background:\n        \"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)\",\n      content: '\"\"',\n      opacity: isScrollableEnd ? \"0.075\" : \"0\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: 0,\n      right: 0,\n      bottom: 0,\n      width: odysseyDesignTokens.Spacing6,\n      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n    },\n  }),\n);\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterConversion.js","names":["useCallback","useMemo","useFilterConversion","columns","filters","convertFilterSelectOptions","options","map","option","label","value","convertColumnToFilter","column","enableColumnFilter","accessorKey","id","header","variant","filterVariant","filterSelectOptions","dataTableFilters","providedFilters","reduce","accumulator","item","foundColumn","find","filter","concat"],"sources":["../../../src/labs/DataView/useFilterConversion.ts"],"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 { useCallback, useMemo } from \"react\";\nimport { MRT_RowData } from \"material-react-table\";\n\nimport { DataFilter } from \"../DataFilters\";\nimport { DataTableColumn } from \"../../DataTable\";\nimport { UniversalProps, TableLayoutProps } from \"./componentTypes\";\n\ntype FilterConversionType = {\n  columns?: TableLayoutProps[\"columns\"];\n  filters?: UniversalProps[\"filters\"];\n};\n\nexport const useFilterConversion = ({\n  columns,\n  filters,\n}: FilterConversionType) => {\n  const convertFilterSelectOptions = useCallback(\n    (options: DataTableColumn<MRT_RowData>[\"filterSelectOptions\"]) =>\n      options?.map((option) =>\n        typeof option === \"string\"\n          ? {\n              label: option,\n              value: option,\n            }\n          : {\n              // If the option isn't a string, it must have value and/or option defined\n              // If either is undefined, use the other\n              label: option.label ?? option.value,\n              value: option.value ?? option.label,\n            },\n      ),\n    [],\n  );\n\n  const convertColumnToFilter = useCallback(\n    (column: DataTableColumn<MRT_RowData>) =>\n      column.enableColumnFilter !== false && column.accessorKey\n        ? ({\n            id: column.accessorKey,\n            label: column.header,\n            variant: column.filterVariant,\n            options: convertFilterSelectOptions(column.filterSelectOptions),\n          } satisfies DataFilter as DataFilter)\n        : null,\n    [convertFilterSelectOptions],\n  );\n\n  const dataTableFilters = useMemo(() => {\n    // Filters may be manually set via the `filters` variable;\n    // If not, they may be inferred from `columns`\n    const providedFilters = filters || columns || [];\n\n    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {\n      if (typeof item === \"string\") {\n        const foundColumn = columns?.find(\n          (column) => column.accessorKey === item,\n        );\n        const filter = foundColumn && convertColumnToFilter(foundColumn);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"accessorKey\" in item) {\n        const filter = convertColumnToFilter(item);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"label\" in item) {\n        return accumulator.concat(item);\n      }\n\n      return accumulator;\n    }, []);\n  }, [columns, filters]);\n\n  return dataTableFilters;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAY5C,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,OAAO;EACPC;AACoB,CAAC,KAAK;EAC1B,MAAMC,0BAA0B,GAAGL,WAAW,CAC3CM,OAA4D,IAC3DA,OAAO,EAAEC,GAAG,CAAEC,MAAM,IAClB,OAAOA,MAAM,KAAK,QAAQ,GACtB;IACEC,KAAK,EAAED,MAAM;IACbE,KAAK,EAAEF;EACT,CAAC,GACD;IAGEC,KAAK,EAAED,MAAM,CAACC,KAAK,IAAID,MAAM,CAACE,KAAK;IACnCA,KAAK,EAAEF,MAAM,CAACE,KAAK,IAAIF,MAAM,CAACC;EAChC,CACN,CAAC,EACH,EACF,CAAC;EAED,MAAME,qBAAqB,GAAGX,WAAW,CACtCY,MAAoC,IACnCA,MAAM,CAACC,kBAAkB,KAAK,KAAK,IAAID,MAAM,CAACE,WAAW,GACpD;IACCC,EAAE,EAAEH,MAAM,CAACE,WAAW;IACtBL,KAAK,EAAEG,MAAM,CAACI,MAAM;IACpBC,OAAO,EAAEL,MAAM,CAACM,aAAa;IAC7BZ,OAAO,EAAED,0BAA0B,CAACO,MAAM,CAACO,mBAAmB;EAChE,CAAC,GACD,IAAI,EACV,CAACd,0BAA0B,CAC7B,CAAC;EAED,MAAMe,gBAAgB,GAAGnB,OAAO,CAAC,MAAM;IAGrC,MAAMoB,eAAe,GAAGjB,OAAO,IAAID,OAAO,IAAI,EAAE;IAEhD,OAAOkB,eAAe,CAACC,MAAM,CAAe,CAACC,WAAW,EAAEC,IAAI,KAAK;MACjE,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMC,WAAW,GAAGtB,OAAO,EAAEuB,IAAI,CAC9Bd,MAAM,IAAKA,MAAM,CAACE,WAAW,KAAKU,IACrC,CAAC;QACD,MAAMG,MAAM,GAAGF,WAAW,IAAId,qBAAqB,CAACc,WAAW,CAAC;QAChE,OAAOE,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,aAAa,IAAIC,IAAI,EAAE;QACzB,MAAMG,MAAM,GAAGhB,qBAAqB,CAACa,IAAI,CAAC;QAC1C,OAAOG,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,OAAO,IAAIC,IAAI,EAAE;QACnB,OAAOD,WAAW,CAACK,MAAM,CAACJ,IAAI,CAAC;MACjC;MAEA,OAAOD,WAAW;IACpB,CAAC,EAAE,EAAE,CAAC;EACR,CAAC,EAAE,CAACpB,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,OAAOgB,gBAAgB;AACzB,CAAC"}

package/dist/labs/SideNav/CollapseIcon.js

@@ -0,0 +1,44 @@
+/*!
+ * 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 { CollapseLeftIcon } from "../../icons.generated/index.js";
+import { Box } from "../../Box.js";
+import { Button } from "../../Button.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CollapseIcon = ({
+  onClick
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const collapseButtonStyles = useMemo(() => ({
+    "& > button": {
+      height: odysseyDesignTokens.Spacing6,
+      width: odysseyDesignTokens.Spacing6,
+      color: odysseyDesignTokens.HueNeutral400
+    }
+  }), [odysseyDesignTokens]);
+  return _jsx(Box, {
+    sx: collapseButtonStyles,
+    children: _jsx(Button, {
+      tabIndex: 0,
+      variant: "secondary",
+      onClick: onClick,
+      startIcon: _jsx(CollapseLeftIcon, {}),
+      ariaLabel: "collapse side navigation"
+    })
+  });
+};
+const MemoizedCollapseIcon = memo(CollapseIcon);
+MemoizedCollapseIcon.displayName = "CollapseIcon";
+export { MemoizedCollapseIcon as CollapseIcon };
+//# sourceMappingURL=CollapseIcon.js.map

package/dist/labs/SideNav/CollapseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseIcon.js","names":["memo","useMemo","CollapseLeftIcon","Box","Button","useOdysseyDesignTokens","jsx","_jsx","CollapseIcon","onClick","odysseyDesignTokens","collapseButtonStyles","height","Spacing6","width","color","HueNeutral400","sx","children","tabIndex","variant","startIcon","ariaLabel","MemoizedCollapseIcon","displayName"],"sources":["../../../src/labs/SideNav/CollapseIcon.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, ReactElement } from \"react\";\nimport { CollapseLeftIcon } from \"../../icons.generated\";\nimport { Box } from \"../../Box\";\nimport { Button } from \"../../Button\";\nimport { useOdysseyDesignTokens } from \"../../OdysseyDesignTokensContext\";\n\nconst CollapseIcon = ({ onClick }: { onClick?(): void }): ReactElement => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const collapseButtonStyles = useMemo(\n    () => ({\n      \"& > button\": {\n        height: odysseyDesignTokens.Spacing6,\n        width: odysseyDesignTokens.Spacing6,\n        color: odysseyDesignTokens.HueNeutral400,\n      },\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box sx={collapseButtonStyles}>\n      <Button\n        tabIndex={0}\n        variant=\"secondary\"\n        onClick={onClick}\n        startIcon={<CollapseLeftIcon />}\n        ariaLabel=\"collapse side navigation\"\n      />\n    </Box>\n  );\n};\nconst MemoizedCollapseIcon = memo(CollapseIcon);\nMemoizedCollapseIcon.displayName = \"CollapseIcon\";\n\nexport { MemoizedCollapseIcon as CollapseIcon };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAsB,OAAO;AAAC,SAC3CC,gBAAgB;AAAA,SAChBC,GAAG;AAAA,SACHC,MAAM;AAAA,SACNC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/B,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAmB;EACxE,MAAMC,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EAEpD,MAAMM,oBAAoB,GAAGV,OAAO,CAClC,OAAO;IACL,YAAY,EAAE;MACZW,MAAM,EAAEF,mBAAmB,CAACG,QAAQ;MACpCC,KAAK,EAAEJ,mBAAmB,CAACG,QAAQ;MACnCE,KAAK,EAAEL,mBAAmB,CAACM;IAC7B;EACF,CAAC,CAAC,EACF,CAACN,mBAAmB,CACtB,CAAC;EAED,OACEH,IAAA,CAACJ,GAAG;IAACc,EAAE,EAAEN,oBAAqB;IAAAO,QAAA,EAC5BX,IAAA,CAACH,MAAM;MACLe,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAC,WAAW;MACnBX,OAAO,EAAEA,OAAQ;MACjBY,SAAS,EAAEd,IAAA,CAACL,gBAAgB,IAAE,CAAE;MAChCoB,SAAS,EAAC;IAA0B,CACrC;EAAC,CACC,CAAC;AAEV,CAAC;AACD,MAAMC,oBAAoB,GAAGvB,IAAI,CAACQ,YAAY,CAAC;AAC/Ce,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAIf,YAAY"}

package/dist/labs/SideNav/SideNav.js

@@ -0,0 +1,246 @@
+/*!
+ * Copyright (c) 2022-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 { memo, useMemo, useState, useCallback, useRef, useEffect } from "react";
+import { Box } from "../../Box.js";
+import { ExpandLeftIcon } from "../../icons.generated/index.js";
+import { NavAccordion } from "../NavAccordion.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { SideNavHeader } from "./SideNavHeader.js";
+import { SideNavItemContent, SideNavListItemContainer } from "./SideNavItemContent.js";
+import { SideNavFooterContent } from "./SideNavFooterContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavCollapsedContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  odysseyDesignTokens,
+  isSideNavCollapsed
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutral300,
+  paddingTop: odysseyDesignTokens.Spacing5,
+  cursor: "pointer",
+  width: isSideNavCollapsed ? "auto" : 0,
+  opacity: isSideNavCollapsed ? 1 : 0,
+  visibility: isSideNavCollapsed ? "visible" : "hidden",
+  transitionProperty: "opacity",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
+}));
+const SideNavExpandContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  odysseyDesignTokens,
+  isSideNavCollapsed
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  flexDirection: "column",
+  display: "flex",
+  opacity: isSideNavCollapsed ? 0 : 1,
+  visibility: isSideNavCollapsed ? "hidden" : "visible",
+  width: isSideNavCollapsed ? "0" : "100%",
+  transitionProperty: "opacity, width",
+  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain
+}));
+const SideNavListContainer = styled.ul({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none"
+});
+const SectionHeader = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  fontSize: odysseyDesignTokens.TypographySizeOverline,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
+  color: odysseyDesignTokens.HueNeutral600,
+  paddingTop: odysseyDesignTokens.Spacing3,
+  paddingBottom: odysseyDesignTokens.Spacing3,
+  paddingLeft: odysseyDesignTokens.Spacing4,
+  textTransform: "uppercase"
+}));
+const SideNavFooterContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  paddingTop: odysseyDesignTokens.Spacing2,
+  paddingBottom: odysseyDesignTokens.Spacing2,
+  display: "flex",
+  justifyContent: "center",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographySizeOverline,
+  "& a": {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`
+  },
+  "& a:hover": {
+    textDecoration: "none"
+  },
+  "& a:visited": {
+    color: odysseyDesignTokens.TypographyColorHeading
+  }
+}));
+const SideNav = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse,
+  onExpand,
+  sideNavItems,
+  footerItems
+}) => {
+  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const scrollIntoViewRef = useRef(null);
+  const firstSideNavItemIdWithIsSelected = useMemo(() => {
+    const flattenedItems = sideNavItems.flatMap(sideNavItem => sideNavItem.children ? [sideNavItem, ...sideNavItem.children] : sideNavItem);
+    const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
+    return firstItemWithIsSelected?.id;
+  }, [sideNavItems]);
+  useEffect(() => {
+    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {
+      scrollIntoViewRef.current.scrollIntoView();
+    }
+  }, [firstSideNavItemIdWithIsSelected, scrollIntoViewRef]);
+  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
+  const processedSideNavItems = useMemo(() => sideNavItems.map(item => ({
+    ...item,
+    children: item.children?.map(childProps => _jsx(SideNavItemContent, {
+      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
+      ...childProps
+    }, childProps.id))
+  })), [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems]);
+  const sideNavCollapseHandler = useCallback(() => {
+    setSideNavCollapsed(!isSideNavCollapsed);
+    onCollapse?.();
+  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+  const sideNavExpandClickHandler = useCallback(() => {
+    setSideNavCollapsed(!isSideNavCollapsed);
+    onExpand?.();
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  const sideNavExpandKeyHandler = useCallback(event => {
+    if (event?.key === "Enter" || event?.code === "Space") {
+      event.preventDefault();
+      setSideNavCollapsed(!isSideNavCollapsed);
+      onExpand?.();
+    }
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+  const sideNavStyles = useMemo(() => ({
+    display: "flex",
+    height: "100vh"
+  }), []);
+  const sideNavHeaderContainerStyles = useMemo(() => ({
+    position: "sticky",
+    top: 0
+  }), []);
+  const sideNavListContainerStyles = useMemo(() => ({
+    flex: 1,
+    overflowY: "auto"
+  }), []);
+  const sideNavFooterContainerStyles = useMemo(() => ({
+    position: "sticky",
+    bottom: 0,
+    paddingTop: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  const expandLeftIconStyles = useMemo(() => ({
+    fontSize: "1em",
+    margin: `0 ${odysseyDesignTokens.Spacing1}`
+  }), [odysseyDesignTokens]);
+  return _jsxs(Box, {
+    sx: sideNavStyles,
+    children: [_jsx(SideNavCollapsedContainer, {
+      tabIndex: 0,
+      role: "button",
+      odysseyDesignTokens: odysseyDesignTokens,
+      isSideNavCollapsed: isSideNavCollapsed,
+      onClick: sideNavExpandClickHandler,
+      onKeyDown: sideNavExpandKeyHandler,
+      "data-se": "collapsed-region",
+      "data-aria-label": "expand side navigation",
+      children: _jsx(ExpandLeftIcon, {
+        sx: expandLeftIconStyles
+      })
+    }), _jsxs(SideNavExpandContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isSideNavCollapsed: isSideNavCollapsed,
+      "data-se": "expanded-region",
+      children: [_jsx(Box, {
+        sx: sideNavHeaderContainerStyles,
+        children: _jsx(SideNavHeader, {
+          navHeaderText: navHeaderText,
+          isCollapsible: isCollapsible,
+          onCollapse: sideNavCollapseHandler
+        })
+      }), _jsx(Box, {
+        sx: sideNavListContainerStyles,
+        testId: "scrollable-region",
+        children: _jsx(SideNavListContainer, {
+          children: processedSideNavItems?.map(item => {
+            const {
+              id,
+              label,
+              isSectionHeader,
+              startIcon,
+              children,
+              isDefaultExpanded,
+              isDisabled,
+              isExpanded
+            } = item;
+            if (isSectionHeader) {
+              return _jsx(SectionHeader, {
+                id: id,
+                odysseyDesignTokens: odysseyDesignTokens,
+                children: label
+              }, id);
+            } else if (children) {
+              return _jsx(SideNavListItemContainer, {
+                id: id,
+                odysseyDesignTokens: odysseyDesignTokens,
+                children: _jsx(NavAccordion, {
+                  label: label,
+                  isDefaultExpanded: isDefaultExpanded,
+                  isExpanded: isExpanded,
+                  startIcon: startIcon,
+                  isDisabled: isDisabled,
+                  children: _jsx(SideNavListContainer, {
+                    id: `${id}-list`,
+                    children: children
+                  })
+                })
+              }, id);
+            } else {
+              return _jsx(SideNavItemContent, {
+                scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
+                ...item
+              }, item.id);
+            }
+          })
+        })
+      }), footerItems && _jsx(Box, {
+        sx: sideNavFooterContainerStyles,
+        children: _jsx(SideNavFooterContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: _jsx(SideNavFooterContent, {
+            footerItems: footerItems
+          })
+        })
+      })]
+    })]
+  });
+};
+const MemoizedSideNav = memo(SideNav);
+MemoizedSideNav.displayName = "SideNav";
+export { MemoizedSideNav as SideNav };
+//# sourceMappingURL=SideNav.js.map