@okta/odyssey-react-mui 1.15.8 → 1.20.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableContent.js","names":["memo","useCallback","useMemo","useRef","useState","styled","MRT_TableContainer","useMaterialReactTable","useTranslation","ArrowDownIcon","ArrowUnsortedIcon","ChevronDownIcon","DragIndicatorIcon","Box","dataTableImmutableSettings","displayColumnDefOptions","ScrollableTableContainer","MenuButton","MoreIcon","RowActions","useOdysseyDesignTokens","useScrollIndication","jsx","_jsx","jsxs","_jsxs","TextWrapper","whiteSpace","textOverflow","overflow","RowActionsContainer","display","TableContent","columns","data","draggingRow","emptyState","getRowId","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","setTableState","tableOptions","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","dataTable","state","sorting","columnSorting","columnVisibility","icons","ArrowDownwardIcon","DragHandleIcon","SyncAltIcon","ExpandMoreIcon","muiTableProps","ref","muiTableContainerProps","muiTableBodyProps","className","enableColumnResizing","hasColumnResizing","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","muiTableHeadCellProps","currentColumn","find","sortedColumn","enableSorting","hasSorting","onSortingChange","sortingUpdater","newSortVal","prevState","enableRowSelection","onRowSelectionChange","renderEmptyRowsFallback","localization","collapse","collapseAll","expand","expandAll","isScrollableEnd","isScrollableStart","MemoizedTableContent","displayName"],"sources":["../../../src/labs/DataComponents/TableContent.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 { TableProps, 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 TableContentProps = {\n  columns: TableProps[\"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  tableOptions: TableProps;\n  tableState: TableState;\n  totalRows: UniversalProps[\"totalRows\"];\n};\n\nconst TableContent = ({\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  tableOptions,\n  tableState,\n  totalRows,\n}: TableContentProps) => {\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          {tableOptions.rowActionButtons?.(row)}\n          {(tableOptions.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={tableOptions.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      tableOptions,\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 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: displayColumnDefOptions satisfies Partial<\n      MRT_TableOptions<MRT_RowData>[\"displayColumnDefOptions\"]\n    >,\n    muiTableProps: {\n      ref: tableContentRef,\n    },\n    muiTableContainerProps: {\n      ref: tableInnerContainerRef,\n    },\n    muiTableBodyProps: () => ({\n      className: rowDensityClassName,\n    }),\n    enableColumnResizing: tableOptions.hasColumnResizing,\n    defaultColumn: {\n      Cell: defaultCell,\n    },\n    enableRowActions:\n      (hasRowReordering === true && onReorderRows) ||\n      tableOptions.rowActionButtons ||\n      tableOptions.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: tableOptions.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    enableSorting: tableOptions.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 MemoizedTableContent = memo(TableContent);\nMemoizedTableContent.displayName = \"TableContent\";\n\nexport { MemoizedTableContent as TableContent };\n"],"mappings":"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"}

package/dist/labs/DataComponents/TableSettings.js

@@ -0,0 +1,96 @@
+import _Checkbox from "@mui/material/Checkbox";
+/*!
+ * 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, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { densityValues } from "./constants.js";
+import { ListIcon, ShowIcon } from "../../icons.generated/index.js";
+import { MenuButton } from "../../MenuButton.js";
+import { MenuItem } from "../../MenuItem.js";
+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 TableSettings = ({
+  setTableState,
+  tableOptions,
+  tableState
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    hasChangeableDensity,
+    hasColumnVisibility,
+    columns
+  } = tableOptions;
+  const {
+    rowDensity,
+    columnVisibility
+  } = tableState;
+  const changeRowDensity = useCallback(value => _event => {
+    if (process.env.NODE_ENV === "development") console.debug(_event);
+    setTableState(prevState => ({
+      ...prevState,
+      rowDensity: value
+    }));
+  }, [setTableState]);
+  const changeColumnVisibility = useCallback(columnId => _event => {
+    if (process.env.NODE_ENV === "development") console.debug(_event);
+    setTableState(prevState => ({
+      ...prevState,
+      columnVisibility: {
+        ...prevState.columnVisibility,
+        [columnId]: prevState.columnVisibility ? prevState.columnVisibility[columnId] === false : false
+      }
+    }));
+  }, [setTableState]);
+  const isColumnVisibilityChecked = useMemo(() => {
+    return columns.reduce((acc, column) => {
+      const isChecked = columnVisibility ? columnVisibility[column.accessorKey] !== false : true;
+      acc[column.accessorKey] = isChecked;
+      return acc;
+    }, {});
+  }, [columns, columnVisibility]);
+  return _jsxs(_Fragment, {
+    children: [hasChangeableDensity && _jsx(MenuButton, {
+      ariaLabel: t("table.density.arialabel"),
+      endIcon: _jsx(ListIcon, {}),
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: densityValues.map(value => _jsx(MenuItem, {
+          isSelected: rowDensity === value,
+          onClick: changeRowDensity(value),
+          children: `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+        }, value))
+      })
+    }), hasColumnVisibility && _jsx(MenuButton, {
+      ariaLabel: t("table.columnvisibility.arialabel"),
+      endIcon: _jsx(ShowIcon, {}),
+      menuAlignment: "right",
+      shouldCloseOnSelect: false,
+      children: _jsx(_Fragment, {
+        children: columns.filter(column => column.enableHiding !== false).map(column => _jsxs(MenuItem, {
+          onClick: changeColumnVisibility(column.id),
+          children: [_jsx(_Checkbox, {
+            checked: isColumnVisibilityChecked[column.accessorKey]
+          }), column.header]
+        }, column.accessorKey))
+      })
+    })]
+  });
+};
+const MemoizedTableSettings = memo(TableSettings);
+MemoizedTableSettings.displayName = "TableSettings";
+export { MemoizedTableSettings as TableSettings };
+//# sourceMappingURL=TableSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettings.js","names":["memo","useCallback","useMemo","useTranslation","densityValues","ListIcon","ShowIcon","MenuButton","MenuItem","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TableSettings","setTableState","tableOptions","tableState","t","hasChangeableDensity","hasColumnVisibility","columns","rowDensity","columnVisibility","changeRowDensity","value","_event","process","env","NODE_ENV","console","debug","prevState","changeColumnVisibility","columnId","isColumnVisibilityChecked","reduce","acc","column","isChecked","accessorKey","children","ariaLabel","endIcon","menuAlignment","shouldCloseOnSelect","map","isSelected","onClick","charAt","toUpperCase","slice","filter","enableHiding","id","_Checkbox","checked","header","MemoizedTableSettings","displayName"],"sources":["../../../src/labs/DataComponents/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 { useTranslation } from \"react-i18next\";\n\nimport { densityValues } from \"./constants\";\nimport { ListIcon, ShowIcon } from \"../../icons.generated\";\nimport { MenuButton } from \"../../MenuButton\";\nimport { MenuItem } from \"../../MenuItem\";\nimport { TableProps, TableState } from \"./componentTypes\";\n\nexport type TableSettingsProps = {\n  setTableState: Dispatch<SetStateAction<TableState>>;\n  tableOptions: TableProps;\n  tableState: TableState;\n};\n\nconst TableSettings = ({\n  setTableState,\n  tableOptions,\n  tableState,\n}: TableSettingsProps) => {\n  const { t } = useTranslation();\n\n  const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;\n  const { rowDensity, columnVisibility } = tableState;\n\n  const changeRowDensity = useCallback(\n    (value: (typeof densityValues)[number]) =>\n      (_event: React.MouseEvent<HTMLLIElement>) => {\n        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type\n        if (process.env.NODE_ENV === \"development\") console.debug(_event);\n\n        setTableState((prevState) => ({\n          ...prevState,\n          rowDensity: value,\n        }));\n      },\n    [setTableState],\n  );\n\n  const changeColumnVisibility = useCallback(\n    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {\n      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type\n      if (process.env.NODE_ENV === \"development\") console.debug(_event);\n\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 isColumnVisibilityChecked = useMemo(() => {\n    return columns.reduce(\n      (acc, column) => {\n        const isChecked = columnVisibility\n          ? columnVisibility[column.accessorKey!] !== false\n          : true;\n        acc[column.accessorKey!] = isChecked;\n        return acc;\n      },\n      {} as Record<string, boolean>,\n    );\n  }, [columns, columnVisibility]);\n\n  return (\n    <>\n      {hasChangeableDensity && (\n        <MenuButton\n          ariaLabel={t(\"table.density.arialabel\")}\n          endIcon={<ListIcon />}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {densityValues.map((value: (typeof densityValues)[number]) => (\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          </>\n        </MenuButton>\n      )}\n\n      {hasColumnVisibility && (\n        <MenuButton\n          ariaLabel={t(\"table.columnvisibility.arialabel\")}\n          endIcon={<ShowIcon />}\n          menuAlignment=\"right\"\n          shouldCloseOnSelect={false}\n        >\n          <>\n            {columns\n              .filter((column) => column.enableHiding !== false)\n              .map((column) => (\n                <MenuItem\n                  key={column.accessorKey}\n                  onClick={changeColumnVisibility(column.id as string)}\n                >\n                  <MuiCheckbox\n                    checked={isColumnVisibilityChecked[column.accessorKey!]}\n                  />\n                  {column.header}\n                </MenuItem>\n              ))}\n          </>\n        </MenuButton>\n      )}\n    </>\n  );\n};\n\nconst MemoizedTableSettings = memo(TableSettings);\nMemoizedTableSettings.displayName = \"TableSettings\";\n\nexport { MemoizedTableSettings as TableSettings };\n"],"mappings":"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"}

package/dist/labs/DataComponents/componentTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=componentTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentTypes.js","names":[],"sources":["../../../src/labs/DataComponents/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 {\n  availableLayouts,\n  availableStackLayouts,\n  densityValues,\n} 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 { StackCardProps } from \"./StackCard\";\n\nexport type DataLayout = (typeof availableLayouts)[number];\nexport type StackLayout = (typeof availableStackLayouts)[number];\n\nexport type AvailableLayouts = DataLayout[];\nexport type AvailableStackLayouts = StackLayout[];\n\nexport type UniversalProps = {\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  isRowReorderingDisabled?: boolean;\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 TableProps = {\n  columns: DataTableColumn<MRT_RowData>[];\n  hasChangeableDensity?: boolean;\n  hasColumnResizing?: boolean;\n  hasColumnVisibility?: boolean;\n  hasSorting?: boolean;\n  initialDensity?: (typeof densityValues)[number];\n  renderDetailPanel?: MRT_TableOptions<MRT_RowData>[\"renderDetailPanel\"];\n  rowActionButtons?: DataTableRowActionsProps[\"rowActionButtons\"];\n  rowActionMenuItems?: DataTableRowActionsProps[\"rowActionMenuItems\"];\n};\n\nexport type StackProps = {\n  cardProps: (row: MRT_RowData) => StackCardProps;\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  stackOptions?: StackProps;\n  tableOptions?: TableProps;\n};\n\nexport type TableState = {\n  columnSorting: MRT_SortingState;\n  columnVisibility: MRT_VisibilityState;\n  rowDensity?: MRT_DensityState;\n};\n"],"mappings":""}

package/dist/labs/DataComponents/constants.js

@@ -0,0 +1,17 @@
+/*!
+ * 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.
+ */
+
+export const availableStackLayouts = ["list", "grid"];
+export const availableTableLayouts = ["table"];
+export const availableLayouts = [...availableTableLayouts, ...availableStackLayouts];
+export const densityValues = ["comfortable", "spacious", "compact"];
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["availableStackLayouts","availableTableLayouts","availableLayouts","densityValues"],"sources":["../../../src/labs/DataComponents/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\nexport const availableStackLayouts = [\"list\", \"grid\"];\nexport const availableTableLayouts = [\"table\"];\nexport const availableLayouts = [\n  ...availableTableLayouts,\n  ...availableStackLayouts,\n];\n\nexport const densityValues = [\"comfortable\", \"spacious\", \"compact\"] as const;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,qBAAqB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;AACrD,OAAO,MAAMC,qBAAqB,GAAG,CAAC,OAAO,CAAC;AAC9C,OAAO,MAAMC,gBAAgB,GAAG,CAC9B,GAAGD,qBAAqB,EACxB,GAAGD,qBAAqB,CACzB;AAED,OAAO,MAAMG,aAAa,GAAG,CAAC,aAAa,EAAE,UAAU,EAAE,SAAS,CAAU"}

package/dist/labs/DataComponents/dataTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dataTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTypes.js","names":[],"sources":["../../../src/labs/DataComponents/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/DataComponents/fetchData.js

@@ -0,0 +1,33 @@
+/*!
+ * 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 { t } from "i18next";
+export const fetchData = async ({
+  dataQueryParams,
+  errorMessageProp,
+  getData,
+  setData,
+  setErrorMessage,
+  setIsLoading
+}) => {
+  setIsLoading(true);
+  setErrorMessage(errorMessageProp);
+  try {
+    const incomingData = await getData?.(dataQueryParams);
+    setData(incomingData);
+  } catch (error) {
+    setErrorMessage(typeof error === "string" ? error : t("table.error"));
+  } finally {
+    setIsLoading(false);
+  }
+};
+//# sourceMappingURL=fetchData.js.map

package/dist/labs/DataComponents/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/DataComponents/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,CAAC,IAAI,CAAC;EAClBD,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,CAAC,KAAK,CAAC;EACrB;AACF,CAAC"}

package/dist/labs/DataComponents/index.js

@@ -0,0 +1,18 @@
+/*!
+ * 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.
+ */
+export { DataStack } from "./DataStack.js";
+export { DataTable } from "./DataTable.js";
+export { DataView } from "./DataView.js";
+export * from "./componentTypes.js";
+export * from "./constants.js";
+export * from "./dataTypes.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DataStack","DataTable","DataView"],"sources":["../../../src/labs/DataComponents/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 { DataStack, type DataStackProps } from \"./DataStack\";\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,SAAS;AAAA,SACTC,QAAQ;AAAA;AAAA;AAAA"}

package/dist/labs/DataComponents/tableConstants.js

@@ -0,0 +1,146 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { Box } from "../../Box.js";
+import { DragIndicatorIcon } from "../../icons.generated/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const dataTableImmutableSettings = {
+  enableColumnActions: false,
+  enableDensityToggle: false,
+  enableExpandAll: false,
+  enableFilters: false,
+  enableFullScreenToggle: false,
+  enableGlobalFilter: false,
+  enableHiding: false,
+  enablePagination: false,
+  layoutMode: "grid-no-grow",
+  manualFiltering: true,
+  manualSorting: true,
+  muiTablePaperProps: {
+    elevation: 0,
+    sx: {
+      overflow: "visible"
+    }
+  },
+  positionActionsColumn: "last",
+  rowVirtualizerOptions: {
+    overscan: 4
+  },
+  selectAllMode: "all"
+};
+export const displayColumnDefOptions = {
+  "mrt-row-actions": {
+    header: "",
+    grow: true,
+    muiTableBodyCellProps: {
+      align: "right",
+      sx: {
+        overflow: "visible",
+        width: "unset"
+      },
+      className: "ods-actions-cell"
+    },
+    muiTableHeadCellProps: {
+      align: "right",
+      sx: {
+        width: "unset"
+      },
+      className: "ods-actions-cell"
+    }
+  },
+  "mrt-row-drag": {
+    header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto"
+      },
+      className: "ods-drag-handle"
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        minWidth: 0,
+        width: "auto"
+      },
+      children: _jsx(Box, {
+        sx: {
+          marginInline: "-0.1rem"
+        },
+        children: _jsx(DragIndicatorIcon, {
+          sx: {
+            marginInline: 1,
+            opacity: 0
+          }
+        })
+      })
+    }
+  },
+  "mrt-row-select": {
+    muiTableHeadCellProps: {
+      padding: "checkbox"
+    },
+    muiTableBodyCellProps: {
+      padding: "checkbox"
+    }
+  },
+  "mrt-row-expand": {
+    header: "",
+    muiTableBodyCellProps: {
+      sx: {
+        overflow: "visible"
+      }
+    }
+  }
+};
+export const ScrollableTableContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isScrollableStart" && prop !== "isScrollableEnd"
+})(({
+  odysseyDesignTokens,
+  isScrollableStart,
+  isScrollableEnd
+}) => ({
+  marginBlockEnd: odysseyDesignTokens.Spacing4,
+  position: "relative",
+  borderInlineStartColor: isScrollableStart ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineStartStyle: "solid",
+  borderInlineStartWidth: odysseyDesignTokens.BorderWidthMain,
+  "::before": {
+    background: "linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableStart ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    zIndex: 100,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  },
+  borderInlineEndColor: isScrollableEnd ? odysseyDesignTokens.HueNeutral200 : "transparent",
+  borderInlineEndStyle: "solid",
+  borderInlineEndWidth: odysseyDesignTokens.BorderWidthMain,
+  "::after": {
+    background: "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",
+    content: '""',
+    opacity: isScrollableEnd ? "0.075" : "0",
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: odysseyDesignTokens.Spacing6,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`
+  }
+}));
+//# sourceMappingURL=tableConstants.js.map

package/dist/labs/DataComponents/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","grow","muiTableBodyCellProps","align","width","className","muiTableHeadCellProps","minWidth","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/DataComponents/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-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    },\n  },\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/DataComponents/useFilterConversion.js

@@ -0,0 +1,58 @@
+/*!
+ * 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 { useCallback, useMemo } from "react";
+export const useFilterConversion = ({
+  columns,
+  filters
+}) => {
+  const convertFilterSelectOptions = useCallback(options => options?.map(option => typeof option === "string" ? {
+    label: option,
+    value: option
+  } : {
+    label: option.label ?? option.value,
+    value: option.value ?? option.label
+  }), []);
+  const convertColumnToFilter = useCallback(column => column.enableColumnFilter !== false && column.accessorKey ? {
+    id: column.accessorKey,
+    label: column.header,
+    variant: column.filterVariant,
+    options: convertFilterSelectOptions(column.filterSelectOptions)
+  } : null, [convertFilterSelectOptions]);
+  const dataTableFilters = useMemo(() => {
+    const providedFilters = filters || columns;
+    if (!providedFilters) {
+      return [];
+    }
+    return providedFilters.reduce((accumulator, item) => {
+      if (typeof item === "string") {
+        const foundColumn = columns?.find(column => column.accessorKey === item);
+        if (foundColumn) {
+          const filter = convertColumnToFilter(foundColumn);
+          if (filter) {
+            return accumulator.concat(filter);
+          }
+        }
+      } else if ("accessorKey" in item) {
+        const filter = convertColumnToFilter(item);
+        if (filter) {
+          return accumulator.concat(filter);
+        }
+      } else if ("label" in item) {
+        return accumulator.concat(item);
+      }
+      return accumulator;
+    }, []);
+  }, [columns, filters]);
+  return dataTableFilters;
+};
+//# sourceMappingURL=useFilterConversion.js.map

package/dist/labs/DataComponents/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/DataComponents/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, TableProps } from \"./componentTypes\";\n\ntype FilterConversionType = {\n  columns?: TableProps[\"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    const providedFilters = filters || columns;\n    if (!providedFilters) {\n      return [];\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        if (foundColumn) {\n          const filter = convertColumnToFilter(foundColumn);\n          if (filter) {\n            return accumulator.concat(filter);\n          }\n        }\n      } else if (\"accessorKey\" in item) {\n        // Checks if it's a column\n        const filter = convertColumnToFilter(item);\n        if (filter) {\n          return accumulator.concat(filter);\n        }\n      } else if (\"label\" in item) {\n        // Checks if it's a DataFilter\n        return accumulator.concat(item);\n      }\n      // If none of the conditions match, item is ignored (not mapping to undefined)\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;IACrC,MAAMoB,eAAe,GAAGjB,OAAO,IAAID,OAAO;IAC1C,IAAI,CAACkB,eAAe,EAAE;MACpB,OAAO,EAAE;IACX;IACA,OAAOA,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,IAAIC,WAAW,EAAE;UACf,MAAME,MAAM,GAAGhB,qBAAqB,CAACc,WAAW,CAAC;UACjD,IAAIE,MAAM,EAAE;YACV,OAAOJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC;UACnC;QACF;MACF,CAAC,MAAM,IAAI,aAAa,IAAIH,IAAI,EAAE;QAEhC,MAAMG,MAAM,GAAGhB,qBAAqB,CAACa,IAAI,CAAC;QAC1C,IAAIG,MAAM,EAAE;UACV,OAAOJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC;QACnC;MACF,CAAC,MAAM,IAAI,OAAO,IAAIH,IAAI,EAAE;QAE1B,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"}