@okta/odyssey-react-mui 1.29.0 → 1.32.4

package/dist/cjs/labs/DataTablePagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.cjs","names":["_react","require","_Box","_index","_Typography","_index2","_jsxRuntime","paginationTypeValues","exports","DataTablePagination","currentPage","currentNumberOfResults","isNextButtonDisabled","isPreviousButtonDisabled","onClickNext","onClickPrevious","paginationType","jsx","Box","sx","display","gap","alignItems","children","jsxs","Fragment","Button","label","variant","onClick","isDisabled","Support","color","startIcon","ArrowLeftIcon","component","endIcon","ArrowRightIcon","MemoizedDataTablePagination","memo","displayName"],"sources":["../../../src/labs/DataTablePagination.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 { memo } from \"react\";\nimport { Box } from \"../Box.js\";\nimport { Button } from \"../Buttons/index.js\";\nimport { Support } from \"../Typography.js\";\nimport { ArrowLeftIcon, ArrowRightIcon } from \"../icons.generated/index.js\";\n\nexport const paginationTypeValues = [\"paged\", \"loadMore\"] as const;\n\nexport type DataTablePaginationProps = {\n  currentPage?: number;\n  currentNumberOfResults?: number;\n  isNextButtonDisabled?: boolean;\n  isPreviousButtonDisabled?: boolean;\n  onClickNext: () => void;\n  onClickPrevious?: () => void;\n  paginationType?: (typeof paginationTypeValues)[number];\n};\n\nconst DataTablePagination = ({\n  currentPage,\n  currentNumberOfResults,\n  isNextButtonDisabled,\n  isPreviousButtonDisabled,\n  onClickNext,\n  onClickPrevious,\n  paginationType,\n}: DataTablePaginationProps) => {\n  return (\n    <Box sx={{ display: \"flex\", gap: 4, alignItems: \"center\" }}>\n      {paginationType === \"loadMore\" ? (\n        <>\n          <Button\n            label=\"Show more\"\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n          {currentNumberOfResults && (\n            <Support color=\"textSecondary\">\n              {currentNumberOfResults} results\n            </Support>\n          )}\n        </>\n      ) : (\n        <>\n          <Button\n            label=\"Previous\"\n            startIcon={<ArrowLeftIcon />}\n            variant=\"secondary\"\n            onClick={onClickPrevious}\n            isDisabled={isPreviousButtonDisabled}\n          />\n          {currentPage && (\n            <Box>\n              <Support color=\"textSecondary\" component=\"span\">\n                Page {currentPage}\n              </Support>\n            </Box>\n          )}\n          <Button\n            label=\"Next\"\n            endIcon={<ArrowRightIcon />}\n            variant=\"secondary\"\n            onClick={onClickNext}\n            isDisabled={isNextButtonDisabled}\n          />\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedDataTablePagination = memo(DataTablePagination);\nMemoizedDataTablePagination.displayName = \"DataTablePagination\";\n\nexport { MemoizedDataTablePagination as DataTablePagination };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA4E,IAAAK,WAAA,GAAAL,OAAA;AAhB5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQO,MAAMM,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,CAAC,OAAO,EAAE,UAAU,CAAU;AAYlE,MAAME,mBAAmB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,sBAAsB;EACtBC,oBAAoB;EACpBC,wBAAwB;EACxBC,WAAW;EACXC,eAAe;EACfC;AACwB,CAAC,KAAK;EAC9B,OACE,IAAAV,WAAA,CAAAW,GAAA,EAACf,IAAA,CAAAgB,GAAG;IAACC,EAAE,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAAC,QAAA,EACxDP,cAAc,KAAK,UAAU,GAC5B,IAAAV,WAAA,CAAAkB,IAAA,EAAAlB,WAAA,CAAAmB,QAAA;MAAAF,QAAA,GACE,IAAAjB,WAAA,CAAAW,GAAA,EAACd,MAAA,CAAAuB,MAAM;QACLC,KAAK,EAAC,WAAW;QACjBC,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEf,WAAY;QACrBgB,UAAU,EAAElB;MAAqB,CAClC,CAAC,EACDD,sBAAsB,IACrB,IAAAL,WAAA,CAAAkB,IAAA,EAACpB,WAAA,CAAA2B,OAAO;QAACC,KAAK,EAAC,eAAe;QAAAT,QAAA,GAC3BZ,sBAAsB,EAAC,UAC1B;MAAA,CAAS,CACV;IAAA,CACD,CAAC,GAEH,IAAAL,WAAA,CAAAkB,IAAA,EAAAlB,WAAA,CAAAmB,QAAA;MAAAF,QAAA,GACE,IAAAjB,WAAA,CAAAW,GAAA,EAACd,MAAA,CAAAuB,MAAM;QACLC,KAAK,EAAC,UAAU;QAChBM,SAAS,EAAE,IAAA3B,WAAA,CAAAW,GAAA,EAACZ,OAAA,CAAA6B,aAAa,IAAE,CAAE;QAC7BN,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEd,eAAgB;QACzBe,UAAU,EAAEjB;MAAyB,CACtC,CAAC,EACDH,WAAW,IACV,IAAAJ,WAAA,CAAAW,GAAA,EAACf,IAAA,CAAAgB,GAAG;QAAAK,QAAA,EACF,IAAAjB,WAAA,CAAAkB,IAAA,EAACpB,WAAA,CAAA2B,OAAO;UAACC,KAAK,EAAC,eAAe;UAACG,SAAS,EAAC,MAAM;UAAAZ,QAAA,GAAC,OACzC,EAACb,WAAW;QAAA,CACV;MAAC,CACP,CACN,EACD,IAAAJ,WAAA,CAAAW,GAAA,EAACd,MAAA,CAAAuB,MAAM;QACLC,KAAK,EAAC,MAAM;QACZS,OAAO,EAAE,IAAA9B,WAAA,CAAAW,GAAA,EAACZ,OAAA,CAAAgC,cAAc,IAAE,CAAE;QAC5BT,OAAO,EAAC,WAAW;QACnBC,OAAO,EAAEf,WAAY;QACrBgB,UAAU,EAAElB;MAAqB,CAClC,CAAC;IAAA,CACF;EACH,CACE,CAAC;AAEV,CAAC;AAED,MAAM0B,2BAA2B,GAAA9B,OAAA,CAAAC,mBAAA,GAAG,IAAA8B,WAAI,EAAC9B,mBAAmB,CAAC;AAC7D6B,2BAA2B,CAACE,WAAW,GAAG,qBAAqB","ignoreList":[]}

package/dist/cjs/labs/DataView/BulkActionsMenu.cjs

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BulkActionsMenu = void 0;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactI18next = require("react-i18next");
+var _Box = require("../../Box.cjs");
+var _index = require("../../Buttons/index.cjs");
+var _index2 = require("../../icons.generated/index.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const BulkActionsContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const BulkActionsMenu = ({
+  data,
+  menuItems,
+  rowSelection,
+  setRowSelection
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;
+  const handleSelectAll = (0, _react.useCallback)(() => {
+    const rows = Object.fromEntries(data.map(row => [row.id, true]));
+    setRowSelection(rows);
+  }, [data, setRowSelection]);
+  const handleSelectNone = (0, _react.useCallback)(() => {
+    setRowSelection({});
+  }, [setRowSelection]);
+  return (0, _jsxRuntime.jsxs)(BulkActionsContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [selectedRowCount > 0 && (0, _jsxRuntime.jsx)(_index.MenuButton, {
+      ariaLabel: "More actions",
+      buttonLabel: t("table.actions.selectsome", {
+        selectedRowCount
+      }),
+      buttonVariant: "primary",
+      endIcon: (0, _jsxRuntime.jsx)(_index2.ChevronDownIcon, {}),
+      children: menuItems?.(rowSelection)
+    }), (0, _jsxRuntime.jsxs)(_Box.Box, {
+      children: [(0, _jsxRuntime.jsx)(_index.Button, {
+        isDisabled: selectedRowCount === data.length,
+        label: t("table.actions.selectall"),
+        onClick: handleSelectAll,
+        variant: "secondary"
+      }), (0, _jsxRuntime.jsx)(_index.Button, {
+        isDisabled: selectedRowCount === 0,
+        label: t("table.actions.selectnone"),
+        onClick: handleSelectNone,
+        variant: "secondary"
+      })]
+    })]
+  });
+};
+const MemoizedBulkActionsMenu = exports.BulkActionsMenu = (0, _react.memo)(BulkActionsMenu);
+MemoizedBulkActionsMenu.displayName = "BulkActionsMenu";
+//# sourceMappingURL=BulkActionsMenu.cjs.map

package/dist/cjs/labs/DataView/BulkActionsMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulkActionsMenu.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_Box","_index","_index2","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","BulkActionsContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","display","gap","Spacing2","BulkActionsMenu","data","menuItems","rowSelection","setRowSelection","useOdysseyDesignTokens","t","useTranslation","selectedRowCount","Object","values","filter","Boolean","length","handleSelectAll","useCallback","rows","fromEntries","map","row","id","handleSelectNone","jsxs","children","jsx","MenuButton","ariaLabel","buttonLabel","buttonVariant","endIcon","ChevronDownIcon","Box","Button","isDisabled","label","onClick","variant","MemoizedBulkActionsMenu","exports","memo","displayName"],"sources":["../../../../src/labs/DataView/BulkActionsMenu.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, useCallback, Dispatch, SetStateAction } from \"react\";\nimport { MRT_RowData, MRT_RowSelectionState } from \"material-react-table\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box.js\";\nimport { Button, MenuButton } from \"../../Buttons/index.js\";\nimport { ChevronDownIcon } from \"../../icons.generated/index.js\";\nimport { UniversalProps } from \"./componentTypes.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\nexport type BulkActionsMenuProps<TData extends MRT_RowData> = {\n  data: MRT_RowData[];\n  menuItems: UniversalProps<TData>[\"bulkActionMenuItems\"];\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n};\n\nconst BulkActionsContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst BulkActionsMenu = <TData extends MRT_RowData>({\n  data,\n  menuItems,\n  rowSelection,\n  setRowSelection,\n}: BulkActionsMenuProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length;\n\n  const handleSelectAll = useCallback(() => {\n    const rows = Object.fromEntries(\n      data.map((row) => [row.id as string, true]),\n    );\n    setRowSelection(rows);\n  }, [data, setRowSelection]);\n\n  const handleSelectNone = useCallback(() => {\n    setRowSelection({});\n  }, [setRowSelection]);\n\n  return (\n    <BulkActionsContainer odysseyDesignTokens={odysseyDesignTokens}>\n      {selectedRowCount > 0 && (\n        <MenuButton\n          ariaLabel=\"More actions\"\n          buttonLabel={t(\"table.actions.selectsome\", { selectedRowCount })}\n          buttonVariant=\"primary\"\n          endIcon={<ChevronDownIcon />}\n        >\n          {menuItems?.(rowSelection)}\n        </MenuButton>\n      )}\n      <Box>\n        <Button\n          isDisabled={selectedRowCount === data.length} // Disabled if all are selected\n          label={t(\"table.actions.selectall\")}\n          onClick={handleSelectAll}\n          variant=\"secondary\"\n        />\n        <Button\n          isDisabled={selectedRowCount === 0} // Disabled if none are selected\n          label={t(\"table.actions.selectnone\")}\n          onClick={handleSelectNone}\n          variant=\"secondary\"\n        />\n      </Box>\n    </BulkActionsContainer>\n  );\n};\n\nconst MemoizedBulkActionsMenu = memo(BulkActionsMenu);\nMemoizedBulkActionsMenu.displayName = \"BulkActionsMenu\";\n\nexport { MemoizedBulkActionsMenu as BulkActionsMenu };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/DataView/CardLayoutContent.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardLayoutContent = void 0;
+var _Checkbox2 = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = require("../../Box.cjs");
+var _CircularProgress = require("../../CircularProgress.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _RowActions = require("./RowActions.cjs");
+var _DataCard = require("./DataCard.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const StackContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "currentLayout" && prop !== "maxGridColumns"
+})(({
+  odysseyDesignTokens,
+  currentLayout,
+  maxGridColumns
+}) => ({
+  display: currentLayout === "list" ? "flex" : "grid",
+  flexDirection: "column",
+  columnGap: odysseyDesignTokens.Spacing5,
+  ...(currentLayout === "grid" && {
+    [`@media (max-width: 720px)`]: {
+      gridTemplateColumns: "repeat(1, 1fr)"
+    },
+    [`@media (min-width: 720px) and (max-width: 960px)`]: {
+      gridTemplateColumns: "repeat(2, 1fr)"
+    },
+    [`@media (min-width: 960px)`]: {
+      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`
+    }
+  })
+}));
+const LoadingContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  paddingBlock: odysseyDesignTokens.Spacing5
+}));
+const CheckboxContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
+}));
+const CardLayoutContent = ({
+  currentLayout,
+  data,
+  emptyState,
+  hasRowReordering,
+  hasRowSelection,
+  isEmpty,
+  isLoading,
+  isNoResults,
+  isRowReorderingDisabled,
+  onReorderRows,
+  pagination,
+  rowReorderingUtilities,
+  rowSelection,
+  setRowSelection,
+  cardLayoutOptions,
+  totalRows
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const handleRowSelectionChange = (0, _react.useCallback)(row => {
+    setRowSelection(rowSelection => Object.fromEntries(row.id in rowSelection ? Object.entries(rowSelection).filter(([key]) => key !== row.id) : Object.entries(rowSelection).concat([[row.id, true]])));
+  }, [setRowSelection]);
+  const {
+    updateRowOrder
+  } = rowReorderingUtilities;
+  return (0, _jsxRuntime.jsx)(_Box.Box, {
+    children: isLoading ? (0, _jsxRuntime.jsx)(LoadingContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)(_CircularProgress.CircularProgress, {})
+    }) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: !data || data.length === 0 || isEmpty || isNoResults ? (0, _jsxRuntime.jsx)(_Box.Box, {
+        children: emptyState
+      }) : (0, _jsxRuntime.jsx)(StackContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        currentLayout: currentLayout,
+        maxGridColumns: cardLayoutOptions.maxGridColumns ?? 3,
+        role: "list",
+        children: data.map((row, index) => {
+          const {
+            overline,
+            title,
+            description,
+            image,
+            children,
+            variant,
+            button
+          } = cardLayoutOptions.itemProps(row);
+          const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
+          return (0, _jsxRuntime.jsx)(_DataCard.DataCard, {
+            Accessory: hasRowSelection && (0, _jsxRuntime.jsx)(CheckboxContainer, {
+              odysseyDesignTokens: odysseyDesignTokens,
+              children: (0, _jsxRuntime.jsx)(_Checkbox2.default, {
+                checked: rowSelection[row.id] ?? false,
+                onChange: () => handleRowSelectionChange(row)
+              })
+            }),
+            button: button,
+            children: children,
+            description: description,
+            renderDetailPanel: cardLayoutOptions.renderDetailPanel,
+            row: row,
+            image: image,
+            menuButtonChildren: (cardLayoutOptions.rowActionMenuItems || hasRowReordering) && (0, _jsxRuntime.jsx)(_RowActions.RowActions, {
+              row: row,
+              rowIndex: currentIndex,
+              rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
+              isRowReorderingDisabled: isRowReorderingDisabled,
+              totalRows: totalRows,
+              updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
+            }),
+            overline: overline,
+            title: title,
+            variant: variant
+          }, row.id);
+        })
+      })
+    })
+  });
+};
+const MemoizedCardLayoutContent = exports.CardLayoutContent = (0, _react.memo)(CardLayoutContent);
+MemoizedCardLayoutContent.displayName = "CardLayoutContent";
+//# sourceMappingURL=CardLayoutContent.cjs.map

package/dist/cjs/labs/DataView/CardLayoutContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayoutContent.cjs","names":["_react","require","_styled","_interopRequireDefault","_Box","_CircularProgress","_OdysseyDesignTokensContext","_RowActions","_DataCard","_jsxRuntime","e","__esModule","default","StackContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","columnGap","Spacing5","gridTemplateColumns","LoadingContainer","alignItems","justifyContent","width","paddingBlock","CheckboxContainer","marginBlockStart","Spacing1","CardLayoutContent","data","emptyState","hasRowReordering","hasRowSelection","isEmpty","isLoading","isNoResults","isRowReorderingDisabled","onReorderRows","pagination","rowReorderingUtilities","rowSelection","setRowSelection","cardLayoutOptions","totalRows","useOdysseyDesignTokens","handleRowSelectionChange","useCallback","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","jsx","Box","children","CircularProgress","Fragment","length","role","map","index","overline","title","description","image","variant","button","itemProps","currentIndex","pageIndex","pageSize","DataCard","Accessory","_Checkbox2","checked","onChange","renderDetailPanel","menuButtonChildren","rowActionMenuItems","RowActions","rowIndex","undefined","MemoizedCardLayoutContent","exports","memo","displayName"],"sources":["../../../../src/labs/DataView/CardLayoutContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dispatch, ReactNode, SetStateAction, memo, useCallback } from \"react\";\nimport styled, { CSSObject } from \"@emotion/styled\";\nimport {\n  MRT_Row,\n  MRT_RowData,\n  MRT_RowSelectionState,\n  MRT_TableInstance,\n} from \"material-react-table\";\n\nimport { Box } from \"../../Box.js\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { RowActions } from \"./RowActions.js\";\nimport { DataCard } from \"./DataCard.js\";\nimport {\n  CardLayout,\n  CardLayoutProps,\n  UniversalProps,\n} from \"./componentTypes.js\";\n\nexport type CardLayoutContentProps<TData extends MRT_RowData> = {\n  currentLayout: CardLayout;\n  data: TData[];\n  draggingRow?: MRT_Row<TData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps<TData>[\"getRowId\"];\n  hasRowReordering: UniversalProps<TData>[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps<TData>[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps<TData>[\"onReorderRows\"];\n  pagination: { pageIndex: number; pageSize: number };\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<TData>;\n      row: MRT_Row<TData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (table: MRT_TableInstance<TData>) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<TData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<TData>) => 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  cardLayoutOptions: CardLayoutProps<TData>;\n  totalRows: UniversalProps<TData>[\"totalRows\"];\n};\ntype CardLayoutContentComponent = (<TData extends MRT_RowData>(\n  props: CardLayoutContentProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst StackContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"currentLayout\" &&\n    prop !== \"maxGridColumns\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  currentLayout: CardLayout;\n  maxGridColumns: number;\n}>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({\n  display: currentLayout === \"list\" ? \"flex\" : \"grid\",\n  flexDirection: \"column\",\n  columnGap: odysseyDesignTokens.Spacing5,\n\n  ...(currentLayout === \"grid\" && {\n    [`@media (max-width: 720px)`]: {\n      gridTemplateColumns: \"repeat(1, 1fr)\",\n    },\n    [`@media (min-width: 720px) and (max-width: 960px)`]: {\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n    },\n    [`@media (min-width: 960px)`]: {\n      gridTemplateColumns: `repeat(${maxGridColumns}, 1fr)`,\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  width: \"100%\",\n  paddingBlock: odysseyDesignTokens.Spacing5,\n}));\n\nconst CheckboxContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`,\n}));\n\nconst CardLayoutContent = <TData extends MRT_RowData>({\n  currentLayout,\n  data,\n  emptyState,\n  hasRowReordering,\n  hasRowSelection,\n  isEmpty,\n  isLoading,\n  isNoResults,\n  isRowReorderingDisabled,\n  onReorderRows,\n  pagination,\n  rowReorderingUtilities,\n  rowSelection,\n  setRowSelection,\n  cardLayoutOptions,\n  totalRows,\n}: CardLayoutContentProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const handleRowSelectionChange = useCallback(\n    (row: MRT_RowData) => {\n      setRowSelection((rowSelection) =>\n        Object.fromEntries(\n          row.id in rowSelection\n            ? Object.entries(rowSelection).filter(([key]) => key !== row.id)\n            : Object.entries(rowSelection).concat([[row.id, true]]),\n        ),\n      );\n    },\n    [setRowSelection],\n  );\n\n  const { updateRowOrder } = rowReorderingUtilities;\n\n  return (\n    <Box>\n      {isLoading ? (\n        <LoadingContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <CircularProgress />\n        </LoadingContainer>\n      ) : (\n        <>\n          {!data || data.length === 0 || isEmpty || isNoResults ? (\n            <Box>{emptyState}</Box>\n          ) : (\n            <StackContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              currentLayout={currentLayout}\n              maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n              role=\"list\"\n            >\n              {data.map((row, index) => {\n                const {\n                  overline,\n                  title,\n                  description,\n                  image,\n                  children,\n                  variant,\n                  button,\n                } = cardLayoutOptions.itemProps(row);\n                const currentIndex =\n                  index + (pagination.pageIndex - 1) * pagination.pageSize;\n\n                return (\n                  <DataCard\n                    Accessory={\n                      hasRowSelection && (\n                        // Negative margin to counteract the checkbox's inbuilt spacing\n                        <CheckboxContainer\n                          odysseyDesignTokens={odysseyDesignTokens}\n                        >\n                          <MuiCheckbox\n                            checked={rowSelection[row.id as string] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    button={button}\n                    children={children}\n                    description={description}\n                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}\n                    row={row}\n                    image={image}\n                    key={row.id as string}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row as unknown as MRT_Row<MRT_RowData>} // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            // TODO: FIX THIS! The types are wrong. `row` is incorrectly set in `RowActions` to not be TData.\n                            cardLayoutOptions.rowActionMenuItems as unknown as (\n                              row: MRT_Row<MRT_RowData>,\n                            ) => any // eslint-disable-line @typescript-eslint/no-explicit-any\n                          }\n                          isRowReorderingDisabled={isRowReorderingDisabled}\n                          totalRows={totalRows}\n                          updateRowOrder={\n                            hasRowReordering && onReorderRows\n                              ? updateRowOrder\n                              : undefined\n                          }\n                        />\n                      )\n                    }\n                    overline={overline}\n                    title={title}\n                    variant={variant}\n                  />\n                );\n              })}\n            </StackContainer>\n          )}\n        </>\n      )}\n    </Box>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(\n  CardLayoutContent,\n) as CardLayoutContentComponent;\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/labs/DataView/DataCard.cjs

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardVariantValues = exports.DataCard = exports.CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE = void 0;
+var _Card2 = _interopRequireDefault(require("@mui/material/Card"));
+var _CardActionArea2 = _interopRequireDefault(require("@mui/material/CardActionArea"));
+var _CardActions2 = _interopRequireDefault(require("@mui/material/CardActions"));
+var _Tooltip2 = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _IconButton2 = _interopRequireDefault(require("@mui/material/IconButton"));
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _reactI18next = require("react-i18next");
+var _Box = require("../../Box.cjs");
+var _index = require("../../Buttons/index.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _Typography = require("../../Typography.cjs");
+var _index2 = require("../../icons.generated/index.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const CARD_IMAGE_SIZE = exports.CARD_IMAGE_SIZE = "64px";
+const CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE_COMPACT = "48px";
+const cardVariantValues = exports.cardVariantValues = ["tile", "stack", "compact"];
+const AccessoryContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  display: "flex",
+  flexDirection: variant === "compact" ? "row" : "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing2,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto"
+}));
+const ImageContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  hasMenuButtonChildren,
+  variant
+}) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  maxHeight: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  marginBlockEnd: variant === "tile" ? odysseyDesignTokens.Spacing5 : 0,
+  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0
+}));
+const MenuButtonContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing3,
+  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing3,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
+  display: "flex",
+  alignItems: "center"
+}));
+const CardInnerContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3
+}));
+const CardImageAndContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "variant" && prop !== "centerContent"
+})(({
+  variant,
+  centerContent
+}) => ({
+  display: "flex",
+  flexDirection: variant === "tile" ? "column" : "row",
+  alignItems: centerContent ? "center" : "flex-start"
+}));
+const CardContent = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  "& > .MuiTypography-h5:not(:last-child)": {
+    marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`
+  },
+  "& > *:last-child": {
+    marginBlockEnd: 0
+  }
+}));
+const CardChildrenContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  ["&:not(:first-child)"]: {
+    marginBlockStart: odysseyDesignTokens.Spacing3
+  }
+}));
+const AccessoryPlaceholder = (0, _styled.default)(_IconButton2.default)({
+  visibility: "hidden"
+});
+const buttonProviderValue = {
+  isFullWidth: true
+};
+const DataCard = ({
+  Accessory: AccessoryProp,
+  button,
+  children,
+  description,
+  image,
+  menuButtonChildren,
+  onClick,
+  overline,
+  renderDetailPanel,
+  row,
+  title,
+  variant = "tile"
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [isDetailPanelOpen, setIsDetailPanelOpen] = (0, _react.useState)(false);
+  const ExpansionToggle = (0, _react.useMemo)(() => {
+    return renderDetailPanel?.({
+      row
+    }) ? (0, _jsxRuntime.jsx)(_Tooltip2.default, {
+      title: isDetailPanelOpen ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
+      children: (0, _jsxRuntime.jsx)(_IconButton2.default, {
+        children: isDetailPanelOpen ? (0, _jsxRuntime.jsx)(_index2.ChevronUpIcon, {}) : (0, _jsxRuntime.jsx)(_index2.ChevronDownIcon, {}),
+        onClick: () => setIsDetailPanelOpen(!isDetailPanelOpen),
+        "aria-label": isDetailPanelOpen ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand")
+      })
+    }) : (0, _jsxRuntime.jsx)(AccessoryPlaceholder, {
+      disabled: true,
+      children: (0, _jsxRuntime.jsx)(_index2.ChevronDownIcon, {})
+    });
+  }, [isDetailPanelOpen, renderDetailPanel, row, t]);
+  const Accessory = (0, _react.useMemo)(() => {
+    return (0, _jsxRuntime.jsxs)(AccessoryContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [AccessoryProp, renderDetailPanel && ExpansionToggle]
+    });
+  }, [AccessoryProp, ExpansionToggle, odysseyDesignTokens, renderDetailPanel, variant]);
+  const cardContent = (0, _react.useMemo)(() => {
+    const countDefinedProps = props => {
+      return props.filter(prop => prop !== undefined).length;
+    };
+    const shouldCenterContent = variant === "compact" && (!renderDetailPanel || !isDetailPanelOpen) && countDefinedProps([title, description, overline, button, children]) <= 2;
+    return (0, _jsxRuntime.jsxs)(CardInnerContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(AccessoryProp || renderDetailPanel) && (0, _jsxRuntime.jsx)(_Box.Box, {
+        children: Accessory
+      }), (0, _jsxRuntime.jsxs)(CardImageAndContentContainer, {
+        variant: variant,
+        centerContent: shouldCenterContent,
+        children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          hasMenuButtonChildren: Boolean(menuButtonChildren),
+          variant: variant,
+          children: image
+        }), (0, _jsxRuntime.jsxs)(CardContent, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: [overline && (0, _jsxRuntime.jsx)(_Typography.Support, {
+            component: "div",
+            children: overline
+          }), title && (0, _jsxRuntime.jsx)(_Typography.Heading5, {
+            component: "div",
+            children: title
+          }), description && (0, _jsxRuntime.jsx)(_Typography.Paragraph, {
+            color: "textSecondary",
+            children: description
+          }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
+            children: (0, _jsxRuntime.jsx)(_index.ButtonContext.Provider, {
+              value: buttonProviderValue,
+              children: button
+            })
+          }), children && (0, _jsxRuntime.jsx)(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: children
+          }), renderDetailPanel && isDetailPanelOpen && (0, _jsxRuntime.jsx)(CardChildrenContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: renderDetailPanel({
+              row
+            })
+          })]
+        })]
+      })]
+    });
+  }, [odysseyDesignTokens, AccessoryProp, renderDetailPanel, Accessory, variant, image, menuButtonChildren, overline, title, description, button, children, isDetailPanelOpen, row]);
+  return (0, _jsxRuntime.jsxs)(_Card2.default, {
+    className: `${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`,
+    role: "listitem",
+    children: [onClick ? (0, _jsxRuntime.jsx)(_CardActionArea2.default, {
+      onClick: onClick,
+      children: cardContent
+    }) : cardContent, menuButtonChildren && (0, _jsxRuntime.jsx)(MenuButtonContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: (0, _jsxRuntime.jsx)(_index.MenuButton, {
+        endIcon: (0, _jsxRuntime.jsx)(_index2.MoreIcon, {}),
+        ariaLabel: t("table.moreactions.arialabel"),
+        buttonVariant: "floating",
+        menuAlignment: "right",
+        size: "small",
+        tooltipText: t("table.actions"),
+        children: menuButtonChildren
+      })
+    })]
+  });
+};
+const MemoizedDataCard = exports.DataCard = (0, _react.memo)(DataCard);
+MemoizedDataCard.displayName = "DataCard";
+//# sourceMappingURL=DataCard.cjs.map

package/dist/cjs/labs/DataView/DataCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_Box","_index","_OdysseyDesignTokensContext","_Typography","_index2","_jsxRuntime","e","__esModule","default","CARD_IMAGE_SIZE","exports","CARD_IMAGE_SIZE_COMPACT","cardVariantValues","AccessoryContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","variant","display","flexDirection","alignItems","gap","Spacing2","height","ImageContainer","hasMenuButtonChildren","maxHeight","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","Spacing4","CardInnerContainer","CardImageAndContentContainer","centerContent","CardContent","Spacing1","CardChildrenContainer","marginBlockStart","AccessoryPlaceholder","_IconButton2","visibility","buttonProviderValue","isFullWidth","DataCard","Accessory","AccessoryProp","button","children","description","image","menuButtonChildren","onClick","overline","renderDetailPanel","row","title","useOdysseyDesignTokens","t","useTranslation","isDetailPanelOpen","setIsDetailPanelOpen","useState","ExpansionToggle","useMemo","jsx","_Tooltip2","ChevronUpIcon","ChevronDownIcon","disabled","jsxs","cardContent","countDefinedProps","props","filter","undefined","length","shouldCenterContent","Box","Boolean","Support","component","Heading5","Paragraph","color","_CardActions2","ButtonContext","Provider","value","_Card2","className","role","_CardActionArea2","MenuButton","endIcon","MoreIcon","ariaLabel","buttonVariant","menuAlignment","size","tooltipText","MemoizedDataCard","memo","displayName"],"sources":["../../../../src/labs/DataView/DataCard.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  MouseEventHandler,\n  ReactElement,\n  memo,\n  useMemo,\n  ReactNode,\n  useState,\n} from \"react\";\nimport {\n  IconButton as MuiIconButton,\n  Card as MuiCard,\n  CardActions as MuiCardActions,\n  CardActionArea as MuiCardActionArea,\n  Tooltip as MuiTooltip,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Box } from \"../../Box.js\";\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"../../Buttons/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Support } from \"../../Typography.js\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  MoreIcon,\n} from \"../../icons.generated/index.js\";\nimport { CardLayoutProps } from \"./componentTypes.js\";\nimport { MRT_RowData } from \"material-react-table\";\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport type DataCardProps<TData extends MRT_RowData> = {\n  children?: ReactNode;\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  renderDetailPanel?: CardLayoutProps<TData>[\"renderDetailPanel\"];\n  row: TData;\n  title?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      Accessory?: never;\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      Accessory?: ReactNode;\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\ntype DataCardComponent = (<TData extends MRT_RowData>(\n  props: DataCardProps<TData>,\n) => JSX.Element) & {\n  displayName?: string;\n};\n\nconst AccessoryContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n}));\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"hasMenuButtonChildren\" &&\n    prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasMenuButtonChildren: boolean;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, hasMenuButtonChildren, variant }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  maxHeight: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  marginBlockEnd: variant === \"tile\" ? odysseyDesignTokens.Spacing5 : 0,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing3,\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n}));\n\nconst CardInnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardImageAndContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"variant\" && prop !== \"centerContent\",\n})<{ variant: (typeof cardVariantValues)[number]; centerContent: boolean }>(\n  ({ variant, centerContent }) => ({\n    display: \"flex\",\n    flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n    alignItems: centerContent ? \"center\" : \"flex-start\",\n  }),\n);\n\nconst CardContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: (typeof cardVariantValues)[number];\n}>(({ odysseyDesignTokens, variant }) => ({\n  \"& > .MuiTypography-h5:not(:last-child)\": {\n    marginBlockEnd: `${variant === \"compact\" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,\n  },\n  \"& > *:last-child\": {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst CardChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AccessoryPlaceholder = styled(MuiIconButton)({\n  visibility: \"hidden\",\n});\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst DataCard: DataCardComponent = <TData extends MRT_RowData>({\n  Accessory: AccessoryProp,\n  button,\n  children,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  renderDetailPanel,\n  row,\n  title,\n  variant = \"tile\",\n}: DataCardProps<TData>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);\n\n  const ExpansionToggle = useMemo(() => {\n    return renderDetailPanel?.({ row }) ? (\n      <MuiTooltip\n        title={\n          isDetailPanelOpen\n            ? t(\"table.rowexpansion.collapse\")\n            : t(\"table.rowexpansion.expand\")\n        }\n      >\n        <MuiIconButton\n          children={isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}\n          aria-label={\n            isDetailPanelOpen\n              ? t(\"table.rowexpansion.collapse\")\n              : t(\"table.rowexpansion.expand\")\n          }\n        />\n      </MuiTooltip>\n    ) : (\n      <AccessoryPlaceholder disabled>\n        <ChevronDownIcon />\n      </AccessoryPlaceholder>\n    );\n  }, [isDetailPanelOpen, renderDetailPanel, row, t]);\n\n  const Accessory = useMemo(() => {\n    return (\n      <AccessoryContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {AccessoryProp}\n        {renderDetailPanel && ExpansionToggle}\n      </AccessoryContainer>\n    );\n  }, [\n    AccessoryProp,\n    ExpansionToggle,\n    odysseyDesignTokens,\n    renderDetailPanel,\n    variant,\n  ]);\n\n  const cardContent = useMemo(() => {\n    const countDefinedProps = (\n      props: Array<string | ReactNode | undefined>,\n    ) => {\n      return props.filter((prop) => prop !== undefined).length;\n    };\n\n    const shouldCenterContent =\n      variant === \"compact\" &&\n      (!renderDetailPanel || !isDetailPanelOpen) &&\n      countDefinedProps([title, description, overline, button, children]) <= 2;\n\n    return (\n      <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}\n        <CardImageAndContentContainer\n          variant={variant}\n          centerContent={shouldCenterContent}\n        >\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              variant={variant}\n            >\n              {image}\n            </ImageContainer>\n          )}\n\n          <CardContent\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {overline && <Support component=\"div\">{overline}</Support>}\n            {title && <Heading5 component=\"div\">{title}</Heading5>}\n            {description && (\n              <Paragraph color=\"textSecondary\">{description}</Paragraph>\n            )}\n\n            {button && (\n              <MuiCardActions>\n                <ButtonContext.Provider value={buttonProviderValue}>\n                  {button}\n                </ButtonContext.Provider>\n              </MuiCardActions>\n            )}\n\n            {children && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {children}\n              </CardChildrenContainer>\n            )}\n\n            {renderDetailPanel && isDetailPanelOpen && (\n              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n                {renderDetailPanel({ row })}\n              </CardChildrenContainer>\n            )}\n          </CardContent>\n        </CardImageAndContentContainer>\n      </CardInnerContainer>\n    );\n  }, [\n    odysseyDesignTokens,\n    AccessoryProp,\n    renderDetailPanel,\n    Accessory,\n    variant,\n    image,\n    menuButtonChildren,\n    overline,\n    title,\n    description,\n    button,\n    children,\n    isDetailPanelOpen,\n    row,\n  ]);\n\n  return (\n    <MuiCard\n      className={`${onClick ? \"isClickable\" : \"\"} ${Accessory ? \"hasAccessory\" : \"\"} ods-card-${variant}`}\n      role=\"listitem\"\n    >\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          <MenuButton\n            endIcon={<MoreIcon />}\n            ariaLabel={t(\"table.moreactions.arialabel\")}\n            buttonVariant=\"floating\"\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText={t(\"table.actions\")}\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedDataCard = memo(DataCard) as DataCardComponent;\nMemoizedDataCard.displayName = \"DataCard\";\n\nexport { MemoizedDataCard as DataCard };\n"],"mappings":"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","ignoreList":[]}