@okta/odyssey-react-mui 1.44.0 → 1.45.0

package/dist/cjs/Card.cjs

@@ -3,19 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tile = exports.Card = exports.CARD_IMAGE_HEIGHT = void 0;
-var _Card2 = _interopRequireDefault(require("@mui/material/Card"));
+exports.cardVariantValues = exports.Card = exports.CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE = void 0;
+var _CardActions2 = _interopRequireWildcard(require("@mui/material/CardActions"));
+var _Skeleton2 = _interopRequireWildcard(require("@mui/material/Skeleton"));
 var _CardActionArea2 = _interopRequireDefault(require("@mui/material/CardActionArea"));
-var _CardActions2 = _interopRequireDefault(require("@mui/material/CardActions"));
+var _Card2 = _interopRequireDefault(require("@mui/material/Card"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@mui/material/Typography");
 var _react = require("react");
-var _Box = require("./Box.cjs");
-var _index = require("./Buttons/index.cjs");
-var _index2 = require("./icons.generated/index.cjs");
+var _reactI18next = require("react-i18next");
+var _ButtonContext = require("./Buttons/ButtonContext.cjs");
+var _MenuButton = require("./Buttons/MenuButton.cjs");
+var _More = require("./icons.generated/More.cjs");
 var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
-var _Typography = require("./Typography.cjs");
+var _Typography2 = require("./Typography.cjs");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -28,82 +32,305 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-const CARD_IMAGE_HEIGHT = exports.CARD_IMAGE_HEIGHT = "64px";
+const cardVariantValues = exports.cardVariantValues = ["tile", "stack", "compact"];
+const CARD_IMAGE_SIZE = exports.CARD_IMAGE_SIZE = "64px";
+const CARD_IMAGE_SIZE_COMPACT = exports.CARD_IMAGE_SIZE_COMPACT = "48px";
+const StyledCard = (0, _styled.default)(_Card2.default, {
+  shouldForwardProp: prop => prop !== "cardVariant" && prop !== "isClickable" && prop !== "odysseyDesignTokens"
+})(({
+  cardVariant,
+  isClickable,
+  odysseyDesignTokens
+}) => ({
+  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderColorDisplay} ${odysseyDesignTokens.BorderStyleMain}`,
+  boxShadow: "none",
+  padding: 0,
+  display: "flex",
+  ...(cardVariant === "compact" && {
+    marginBlockEnd: odysseyDesignTokens.Spacing2
+  }),
+  ["&:hover"]: isClickable ? {
+    borderColor: odysseyDesignTokens.HueNeutralWhite,
+    boxShadow: odysseyDesignTokens.DepthMedium
+  } : {},
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    transform: "none"
+  },
+  [`& .${_CardActions2.cardActionsClasses.root} .${_Skeleton2.skeletonClasses.root}`]: {
+    height: odysseyDesignTokens.Spacing7
+  }
+}));
+const StyledCardActionArea = (0, _styled.default)(_CardActionArea2.default)(() => ({
+  margin: 0,
+  padding: 0
+}));
+const AccessoriesContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  display: "flex",
+  flexDirection: variant === "compact" ? "row" : "column",
+  alignItems: "center",
+  gap: odysseyDesignTokens.Spacing1,
+  marginBlockStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
+  marginInlineStart: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing4,
+  marginInlineEnd: `-${odysseyDesignTokens.Spacing2}`,
+  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5
+  }
+}));
+const InnerContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "hasDetailPanel" && prop !== "numberOfChildNodes" && prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  hasDetailPanel,
+  numberOfChildNodes = 0,
+  odysseyDesignTokens,
+  variant
+}) => ({
+  alignItems: variant === "compact" && !hasDetailPanel && numberOfChildNodes <= 2 ? "center" : "flex-start",
+  display: "flex",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  padding: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing5,
+  flexDirection: variant === "tile" ? "column" : "row",
+  gap: odysseyDesignTokens.Spacing4,
+  width: "100%"
+}));
 const ImageContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
 })(({
   odysseyDesignTokens,
-  hasMenuButtonChildren
+  variant,
+  hasMenuButton
+}) => ({
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  paddingInlineEnd: variant === "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
+  [`& > .${_Skeleton2.skeletonClasses.root}`]: {
+    height: "100%",
+    aspectRatio: 1
+  }
+}));
+const ContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
 }) => ({
   display: "flex",
-  alignItems: "flex-start",
-  maxHeight: CARD_IMAGE_HEIGHT,
-  height: CARD_IMAGE_HEIGHT,
-  marginBlockEnd: odysseyDesignTokens.Spacing5,
-  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing4,
+  width: "100%",
+  "& > *": {
+    marginBlock: 0
+  },
+  [`& .${_Skeleton2.skeletonClasses.root} + .${_Skeleton2.skeletonClasses.root}`]: {
+    marginBlockStart: odysseyDesignTokens.Spacing1
+  }
 }));
-const MenuButtonContainer = (0, _styled.default)("div", {
+const UpperContentContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant" && prop !== "hasMenuButton"
+})(({
+  odysseyDesignTokens,
+  variant,
+  hasMenuButton
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing4,
+  paddingInlineEnd: variant !== "tile" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,
+  [`& > .${_Typography.typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
+}));
+const OverlineTitleContainer = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
-  position: "absolute",
-  right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing1,
+  [`& > .${_Typography.typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
 }));
-const CardContentContainer = (0, _styled.default)("div")(() => ({
-  display: "flex"
+const Content = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite
 }));
-const buttonProviderValue = {
-  isFullWidth: true
-};
+const MenuButtonContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "variant"
+})(({
+  odysseyDesignTokens,
+  variant
+}) => ({
+  position: "absolute",
+  right: odysseyDesignTokens.Spacing2,
+  top: variant === "compact" ? odysseyDesignTokens.Spacing4 : odysseyDesignTokens.Spacing2,
+  height: variant === "compact" ? odysseyDesignTokens.Spacing8 : "auto",
+  display: "flex",
+  alignItems: "center",
+  [`& .${_Skeleton2.skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5,
+    margin: odysseyDesignTokens.Spacing1
+  }
+}));
+const getNumberOfDefinedReactNodes = props => _react.Children.toArray(props).length;
 const Card = ({
-  button,
+  children,
   description,
+  detailPanel,
   image,
+  isLoading,
+  overline,
+  title,
+  titleId,
+  variant,
+  accessory,
+  button,
   menuButtonChildren,
   onClick,
-  overline,
-  title
+  __role: role
 }) => {
   const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
-  const cardContent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsx)(CardContentContainer, {
-    children: (0, _jsxRuntime.jsxs)(_Box.Box, {
-      children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
-        hasMenuButtonChildren: Boolean(menuButtonChildren),
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const loadingContent = (0, _react.useMemo)(() => (0, _jsxRuntime.jsxs)(InnerContainer, {
+    numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+    odysseyDesignTokens: odysseyDesignTokens,
+    variant: variant,
+    children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
+      hasMenuButton: Boolean(menuButtonChildren),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      })
+    }), (0, _jsxRuntime.jsxs)(ContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
         odysseyDesignTokens: odysseyDesignTokens,
-        children: image
-      }), 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
+        variant: variant,
+        children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
+            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+              width: "50%"
+            })
+          }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
+            component: "div",
+            variant: variant === "tile" ? "h4" : "h5",
+            children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+              width: "33%"
+            })
+          })]
+        }), description && (0, _jsxRuntime.jsxs)(_Typography2.Paragraph, {
+          children: [(0, _jsxRuntime.jsx)(_Skeleton2.default, {
+            width: "100%"
+          }), (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+            width: "50%"
+          })]
+        })]
+      }), children && (0, _jsxRuntime.jsx)(Content, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+          width: "50%"
+        })
       }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
-        children: (0, _jsxRuntime.jsx)(_index.ButtonContext.Provider, {
-          value: buttonProviderValue,
-          children: button
+        children: (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+          variant: "rounded",
+          width: "100%"
         })
       })]
-    })
-  }), [button, description, image, menuButtonChildren, overline, title, odysseyDesignTokens]);
-  return (0, _jsxRuntime.jsxs)(_Card2.default, {
-    className: onClick ? "isClickable" : "",
-    children: [onClick ? (0, _jsxRuntime.jsx)(_CardActionArea2.default, {
+    })]
+  }), [button, children, description, image, menuButtonChildren, odysseyDesignTokens, overline, title, variant]);
+  const cardContent = (0, _react.useMemo)(() => {
+    const buttonProviderValue = {
+      isFullWidth: true
+    };
+    return (0, _jsxRuntime.jsxs)(InnerContainer, {
+      hasDetailPanel: Boolean(detailPanel),
+      numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [image && (0, _jsxRuntime.jsx)(ImageContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
+        odysseyDesignTokens: odysseyDesignTokens,
+        variant: variant,
+        children: image
+      }), (0, _jsxRuntime.jsxs)(ContentContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [(0, _jsxRuntime.jsxs)(UpperContentContainer, {
+          hasMenuButton: Boolean(menuButtonChildren),
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: [(0, _jsxRuntime.jsxs)(OverlineTitleContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: [overline && (0, _jsxRuntime.jsx)(_Typography2.Support, {
+              component: "div",
+              children: overline
+            }), title && (0, _jsxRuntime.jsx)(_Typography2.Typography, {
+              component: "div",
+              id: titleId,
+              variant: variant === "tile" ? "h4" : "h5",
+              children: title
+            })]
+          }), description && (0, _jsxRuntime.jsx)(_Typography2.Paragraph, {
+            color: "textSecondary",
+            children: description
+          })]
+        }), children && (0, _jsxRuntime.jsx)(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: children
+        }), button && (0, _jsxRuntime.jsx)(_CardActions2.default, {
+          children: (0, _jsxRuntime.jsx)(_ButtonContext.ButtonContext.Provider, {
+            value: buttonProviderValue,
+            children: button
+          })
+        }), detailPanel && (0, _jsxRuntime.jsx)(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: detailPanel
+        })]
+      })]
+    });
+  }, [button, children, description, detailPanel, image, menuButtonChildren, odysseyDesignTokens, overline, title, titleId, variant]);
+  return (0, _jsxRuntime.jsxs)(StyledCard, {
+    cardVariant: variant,
+    isClickable: Boolean(onClick),
+    odysseyDesignTokens: odysseyDesignTokens,
+    role: role,
+    children: [Boolean(accessory) && (0, _jsxRuntime.jsx)(AccessoriesContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      }) : accessory
+    }), isLoading ? loadingContent : onClick ? (0, _jsxRuntime.jsx)(StyledCardActionArea, {
       onClick: onClick,
       children: cardContent
     }) : cardContent, menuButtonChildren && (0, _jsxRuntime.jsx)(MenuButtonContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: (0, _jsxRuntime.jsx)(_index.MenuButton, {
-        ariaLabel: "Card menu",
+      variant: variant,
+      children: isLoading ? (0, _jsxRuntime.jsx)(_Skeleton2.default, {
+        variant: "circular"
+      }) : (0, _jsxRuntime.jsx)(_MenuButton.MenuButton, {
+        ariaLabel: t("table.moreactions.arialabel"),
         buttonVariant: "floating",
-        endIcon: (0, _jsxRuntime.jsx)(_index2.MoreIcon, {}),
+        endIcon: (0, _jsxRuntime.jsx)(_More.MoreIcon, {}),
         menuAlignment: "right",
         size: "small",
-        tooltipText: "Actions",
+        tooltipText: t("table.actions"),
         children: menuButtonChildren
       })
     })]
@@ -111,14 +338,4 @@ const Card = ({
 };
 const MemoizedCard = exports.Card = (0, _react.memo)(Card);
 MemoizedCard.displayName = "Card";
-const Tile = props => {
-  (0, _react.useEffect)(() => {
-    console.warn("Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.");
-  }, []);
-  return (0, _jsxRuntime.jsx)(MemoizedCard, {
-    ...props
-  });
-};
-const MemoizedTile = exports.Tile = (0, _react.memo)(Tile);
-MemoizedTile.displayName = "Tile";
 //# sourceMappingURL=Card.cjs.map

package/dist/cjs/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["_styled","_interopRequireDefault","require","_react","_Box","_index","_index2","_OdysseyDesignTokensContext","_Typography","_jsxRuntime","e","__esModule","default","CARD_IMAGE_HEIGHT","exports","ImageContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","hasMenuButtonChildren","display","alignItems","maxHeight","height","marginBlockEnd","Spacing5","paddingRight","MenuButtonContainer","position","right","Spacing3","top","CardContentContainer","buttonProviderValue","isFullWidth","Card","button","description","image","menuButtonChildren","onClick","overline","title","useOdysseyDesignTokens","cardContent","useMemo","jsx","children","jsxs","Box","Boolean","Support","component","Heading5","Paragraph","color","_CardActions2","ButtonContext","Provider","value","_Card2","className","_CardActionArea2","MenuButton","ariaLabel","buttonVariant","endIcon","MoreIcon","menuAlignment","size","tooltipText","MemoizedCard","memo","displayName","Tile","props","useEffect","console","warn","MemoizedTile"],"sources":["../../src/Card.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  CardActions as MuiCardActions,\n} from \"@mui/material\";\nimport {\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { Box } from \"./Box.js\";\nimport {\n  Button,\n  ButtonContext,\n  MenuButton,\n  MenuButtonProps,\n} from \"./Buttons/index.js\";\nimport { MoreIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5, Paragraph, Support } from \"./Typography.js\";\n\nexport const CARD_IMAGE_HEIGHT = \"64px\";\n\nexport type CardProps = {\n  description?: string;\n  image?: ReactElement;\n  overline?: string;\n  title?: string;\n} & (\n  | {\n      button?: never;\n      menuButtonChildren?: never;\n      onClick: MouseEventHandler;\n    }\n  | {\n      button?: ReactElement<typeof Button>;\n      menuButtonChildren?: MenuButtonProps[\"children\"];\n      onClick?: never;\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasMenuButtonChildren\",\n})<{\n  hasMenuButtonChildren: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: CARD_IMAGE_HEIGHT,\n  height: CARD_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst CardContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst buttonProviderValue = { isFullWidth: true };\n\nconst Card = ({\n  button,\n  description,\n  image,\n  menuButtonChildren,\n  onClick,\n  overline,\n  title,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const cardContent = useMemo(\n    () => (\n      <CardContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              hasMenuButtonChildren={Boolean(menuButtonChildren)}\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {image}\n            </ImageContainer>\n          )}\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        </Box>\n      </CardContentContainer>\n    ),\n    [\n      button,\n      description,\n      image,\n      menuButtonChildren,\n      overline,\n      title,\n      odysseyDesignTokens,\n    ],\n  );\n\n  return (\n    <MuiCard className={onClick ? \"isClickable\" : \"\"}>\n      {onClick ? (\n        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <MenuButton\n            ariaLabel=\"Card menu\"\n            buttonVariant=\"floating\"\n            endIcon={<MoreIcon />}\n            menuAlignment=\"right\"\n            size=\"small\"\n            tooltipText=\"Actions\"\n          >\n            {menuButtonChildren}\n          </MenuButton>\n        </MenuButtonContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\n/**\n * @deprecated The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\n */\nconst Tile = (props: CardProps) => {\n  useEffect(() => {\n    console.warn(\n      \"Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.\",\n    );\n  }, []);\n\n  return <MemoizedCard {...props} />;\n};\n\nconst MemoizedTile = memo(Tile);\nMemoizedTile.displayName = \"Tile\";\n\nexport { MemoizedCard as Card, MemoizedTile as Tile };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.cjs","names":["_CardActions2","_interopRequireWildcard","require","_Skeleton2","_CardActionArea2","_interopRequireDefault","_Card2","_styled","_Typography","_react","_reactI18next","_ButtonContext","_MenuButton","_More","_OdysseyDesignTokensContext","_Typography2","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","cardVariantValues","exports","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","StyledCard","styled","shouldForwardProp","prop","cardVariant","isClickable","odysseyDesignTokens","border","BorderWidthMain","BorderColorDisplay","BorderStyleMain","boxShadow","padding","display","marginBlockEnd","Spacing2","borderColor","HueNeutralWhite","DepthMedium","skeletonClasses","root","transform","cardActionsClasses","height","Spacing7","StyledCardActionArea","margin","AccessoriesContainer","variant","flexDirection","alignItems","gap","Spacing1","marginBlockStart","Spacing4","Spacing5","marginInlineStart","marginInlineEnd","Spacing8","width","InnerContainer","hasDetailPanel","numberOfChildNodes","backgroundColor","ImageContainer","hasMenuButton","paddingInlineEnd","aspectRatio","ContentContainer","marginBlock","UpperContentContainer","typographyClasses","OverlineTitleContainer","Content","MenuButtonContainer","position","right","top","getNumberOfDefinedReactNodes","props","Children","toArray","length","Card","children","description","detailPanel","image","isLoading","overline","title","titleId","accessory","button","menuButtonChildren","onClick","__role","role","useOdysseyDesignTokens","useTranslation","loadingContent","useMemo","jsxs","jsx","Boolean","Support","Typography","component","Paragraph","cardContent","buttonProviderValue","isFullWidth","id","color","ButtonContext","Provider","value","MenuButton","ariaLabel","buttonVariant","endIcon","MoreIcon","menuAlignment","size","tooltipText","MemoizedCard","memo","displayName"],"sources":["../../src/Card.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  CardActions as MuiCardActions,\n  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport { cardActionsClasses } from \"@mui/material/CardActions\";\nimport { skeletonClasses } from \"@mui/material/Skeleton\";\nimport { typographyClasses } from \"@mui/material/Typography\";\nimport {\n  AriaRole,\n  Children,\n  memo,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"./Buttons/Button.js\";\nimport { ButtonContext } from \"./Buttons/ButtonContext.js\";\nimport { MenuButton, MenuButtonProps } from \"./Buttons/MenuButton.js\";\nimport { MoreIcon } from \"./icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Paragraph, Support, Typography } from \"./Typography.js\";\n\nexport const cardVariantValues = [\"tile\", \"stack\", \"compact\"] as const;\n\nexport const CARD_IMAGE_SIZE = \"64px\";\nexport const CARD_IMAGE_SIZE_COMPACT = \"48px\";\n\nexport type CardProps = {\n  /** @experimental: Temporary internal property, do not use. */\n  __role?: AriaRole;\n  children?: ReactNode;\n  description?: string;\n  detailPanel?: ReactNode;\n  image?: ReactElement;\n  isLoading?: boolean;\n  overline?: string;\n  title?: string;\n  titleId?: string;\n  variant?: (typeof cardVariantValues)[number];\n} & (\n  | {\n      accessory?: ReactNode;\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\nconst StyledCard = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== \"cardVariant\" &&\n    prop !== \"isClickable\" &&\n    prop !== \"odysseyDesignTokens\",\n})<{\n  cardVariant: CardProps[\"variant\"];\n  isClickable: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ cardVariant, isClickable, odysseyDesignTokens }) => ({\n  border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderColorDisplay} ${odysseyDesignTokens.BorderStyleMain}`,\n  boxShadow: \"none\",\n  padding: 0,\n  display: \"flex\",\n\n  ...(cardVariant === \"compact\" && {\n    marginBlockEnd: odysseyDesignTokens.Spacing2,\n  }),\n\n  [\"&:hover\"]: isClickable\n    ? {\n        borderColor: odysseyDesignTokens.HueNeutralWhite,\n        boxShadow: odysseyDesignTokens.DepthMedium,\n      }\n    : {},\n\n  [`& .${skeletonClasses.root}`]: {\n    transform: \"none\",\n  },\n\n  [`& .${cardActionsClasses.root} .${skeletonClasses.root}`]: {\n    height: odysseyDesignTokens.Spacing7,\n  },\n}));\n\nconst StyledCardActionArea = styled(MuiCardActionArea)(() => ({\n  margin: 0,\n  padding: 0,\n}));\n\nconst AccessoriesContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  display: \"flex\",\n  flexDirection: variant === \"compact\" ? \"row\" : \"column\",\n  alignItems: \"center\",\n  gap: odysseyDesignTokens.Spacing1,\n  marginBlockStart:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing5,\n  marginInlineStart:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing4,\n  marginInlineEnd: `-${odysseyDesignTokens.Spacing2}`,\n  height: variant === \"compact\" ? odysseyDesignTokens.Spacing8 : \"auto\",\n\n  [`& .${skeletonClasses.root}`]: {\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n  },\n}));\n\nconst InnerContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"hasDetailPanel\" &&\n    prop !== \"numberOfChildNodes\" &&\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\",\n})<{\n  hasDetailPanel?: boolean;\n  numberOfChildNodes?: number;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(\n  ({\n    hasDetailPanel,\n    numberOfChildNodes = 0,\n    odysseyDesignTokens,\n    variant,\n  }) => ({\n    alignItems:\n      variant === \"compact\" && !hasDetailPanel && numberOfChildNodes <= 2\n        ? \"center\"\n        : \"flex-start\",\n    display: \"flex\",\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    padding:\n      variant === \"compact\"\n        ? odysseyDesignTokens.Spacing4\n        : odysseyDesignTokens.Spacing5,\n    flexDirection: variant === \"tile\" ? \"column\" : \"row\",\n    gap: odysseyDesignTokens.Spacing4,\n    width: \"100%\",\n  }),\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\" &&\n    prop !== \"hasMenuButton\",\n})<{\n  hasMenuButton: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant, hasMenuButton }) => ({\n  height: variant === \"compact\" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,\n  paddingInlineEnd:\n    variant === \"tile\" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,\n  [`& > .${skeletonClasses.root}`]: {\n    height: \"100%\",\n    aspectRatio: 1,\n  },\n}));\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing4,\n  width: \"100%\",\n\n  \"& > *\": {\n    marginBlock: 0,\n  },\n\n  [`& .${skeletonClasses.root} + .${skeletonClasses.root}`]: {\n    marginBlockStart: odysseyDesignTokens.Spacing1,\n  },\n}));\n\nconst UpperContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"variant\" &&\n    prop !== \"hasMenuButton\",\n})<{\n  hasMenuButton: boolean;\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant, hasMenuButton }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing1\n      : odysseyDesignTokens.Spacing4,\n  paddingInlineEnd:\n    variant !== \"tile\" && hasMenuButton ? odysseyDesignTokens.Spacing4 : 0,\n\n  [`& > .${typographyClasses.root}`]: {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst OverlineTitleContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing1,\n\n  [`& > .${typographyClasses.root}`]: {\n    marginBlockEnd: 0,\n  },\n}));\n\nconst Content = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"flex-start\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n}));\n\nconst MenuButtonContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"variant\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  variant: CardProps[\"variant\"];\n}>(({ odysseyDesignTokens, variant }) => ({\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing2,\n  top:\n    variant === \"compact\"\n      ? odysseyDesignTokens.Spacing4\n      : odysseyDesignTokens.Spacing2,\n  height: variant === \"compact\" ? odysseyDesignTokens.Spacing8 : \"auto\",\n  display: \"flex\",\n  alignItems: \"center\",\n\n  [`& .${skeletonClasses.root}`]: {\n    width: odysseyDesignTokens.Spacing5,\n    height: odysseyDesignTokens.Spacing5,\n    margin: odysseyDesignTokens.Spacing1,\n  },\n}));\n\nconst getNumberOfDefinedReactNodes = (props: Array<ReactNode>) =>\n  Children.toArray(props).length;\n\nconst Card = ({\n  children,\n  description,\n  detailPanel,\n  image,\n  isLoading,\n  overline,\n  title,\n  titleId,\n  variant,\n  accessory,\n  button,\n  menuButtonChildren,\n  onClick,\n  __role: role,\n}: CardProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { t } = useTranslation();\n\n  const loadingContent = useMemo(\n    () => (\n      <InnerContainer\n        numberOfChildNodes={getNumberOfDefinedReactNodes([\n          button,\n          children,\n          description,\n          overline,\n          title,\n        ])}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <MuiSkeleton variant=\"circular\" />\n          </ImageContainer>\n        )}\n        <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <UpperContentContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <OverlineTitleContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {overline && (\n                <Support>\n                  <MuiSkeleton width=\"50%\" />\n                </Support>\n              )}\n              {title && (\n                <Typography\n                  component=\"div\"\n                  variant={variant === \"tile\" ? \"h4\" : \"h5\"}\n                >\n                  <MuiSkeleton width=\"33%\" />\n                </Typography>\n              )}\n            </OverlineTitleContainer>\n            {description && (\n              <Paragraph>\n                <MuiSkeleton width=\"100%\" />\n                <MuiSkeleton width=\"50%\" />\n              </Paragraph>\n            )}\n          </UpperContentContainer>\n\n          {children && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton width=\"50%\" />\n            </Content>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <MuiSkeleton variant=\"rounded\" width=\"100%\" />\n            </MuiCardActions>\n          )}\n        </ContentContainer>\n      </InnerContainer>\n    ),\n    [\n      button,\n      children,\n      description,\n      image,\n      menuButtonChildren,\n      odysseyDesignTokens,\n      overline,\n      title,\n      variant,\n    ],\n  );\n\n  const cardContent = useMemo(() => {\n    const buttonProviderValue = { isFullWidth: true };\n    return (\n      <InnerContainer\n        hasDetailPanel={Boolean(detailPanel)}\n        numberOfChildNodes={getNumberOfDefinedReactNodes([\n          button,\n          children,\n          description,\n          overline,\n          title,\n        ])}\n        odysseyDesignTokens={odysseyDesignTokens}\n        variant={variant}\n      >\n        {image && (\n          <ImageContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            {image}\n          </ImageContainer>\n        )}\n        <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n          <UpperContentContainer\n            hasMenuButton={Boolean(menuButtonChildren)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            variant={variant}\n          >\n            <OverlineTitleContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {overline && <Support component=\"div\">{overline}</Support>}\n              {title && (\n                <Typography\n                  component=\"div\"\n                  id={titleId}\n                  variant={variant === \"tile\" ? \"h4\" : \"h5\"}\n                >\n                  {title}\n                </Typography>\n              )}\n            </OverlineTitleContainer>\n            {description && (\n              <Paragraph color=\"textSecondary\">{description}</Paragraph>\n            )}\n          </UpperContentContainer>\n\n          {children && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              {children}\n            </Content>\n          )}\n\n          {button && (\n            <MuiCardActions>\n              <ButtonContext.Provider value={buttonProviderValue}>\n                {button}\n              </ButtonContext.Provider>\n            </MuiCardActions>\n          )}\n\n          {detailPanel && (\n            <Content odysseyDesignTokens={odysseyDesignTokens}>\n              {detailPanel}\n            </Content>\n          )}\n        </ContentContainer>\n      </InnerContainer>\n    );\n  }, [\n    button,\n    children,\n    description,\n    detailPanel,\n    image,\n    menuButtonChildren,\n    odysseyDesignTokens,\n    overline,\n    title,\n    titleId,\n    variant,\n  ]);\n\n  return (\n    <StyledCard\n      cardVariant={variant}\n      isClickable={Boolean(onClick)}\n      odysseyDesignTokens={odysseyDesignTokens}\n      role={role}\n    >\n      {Boolean(accessory) && (\n        <AccessoriesContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {isLoading ? <MuiSkeleton variant=\"circular\" /> : accessory}\n        </AccessoriesContainer>\n      )}\n      {isLoading ? (\n        loadingContent\n      ) : onClick ? (\n        <StyledCardActionArea onClick={onClick}>\n          {cardContent}\n        </StyledCardActionArea>\n      ) : (\n        cardContent\n      )}\n\n      {menuButtonChildren && (\n        <MenuButtonContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          variant={variant}\n        >\n          {isLoading ? (\n            <MuiSkeleton variant=\"circular\" />\n          ) : (\n            <MenuButton\n              ariaLabel={t(\"table.moreactions.arialabel\")}\n              buttonVariant=\"floating\"\n              endIcon={<MoreIcon />}\n              menuAlignment=\"right\"\n              size=\"small\"\n              tooltipText={t(\"table.actions\")}\n            >\n              {menuButtonChildren}\n            </MenuButton>\n          )}\n        </MenuButtonContainer>\n      )}\n    </StyledCard>\n  );\n};\n\nconst MemoizedCard = memo(Card);\nMemoizedCard.displayName = \"Card\";\n\nexport { MemoizedCard as Card };\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardLayoutContent = void 0;
-var _Checkbox2 = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("react");
 var _Box = require("../../Box.cjs");
@@ -59,13 +58,55 @@ const LoadingContainer = (0, _styled.default)("div", {
   width: "100%",
   paddingBlock: odysseyDesignTokens.Spacing5
 }));
-const CheckboxContainer = (0, _styled.default)("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-})(({
-  odysseyDesignTokens
-}) => ({
-  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
-}));
+const RowDataCard = ({
+  cardLayoutOptions,
+  currentIndex,
+  handleRowSelectionChange,
+  hasRowReordering,
+  hasRowSelection,
+  isRowReorderingDisabled,
+  onReorderRows,
+  row,
+  rowReorderingUtilities,
+  rowSelection,
+  totalRows
+}) => {
+  const {
+    overline,
+    title,
+    description,
+    image,
+    children,
+    variant
+  } = cardLayoutOptions.itemProps(row);
+  const onSelectionChange = (0, _react.useCallback)(() => handleRowSelectionChange(row), [handleRowSelectionChange, row]);
+  const detailPanel = (0, _react.useMemo)(() => cardLayoutOptions.renderDetailPanel?.({
+    row
+  }), [cardLayoutOptions, row]);
+  const menuButtonChildren = (0, _react.useMemo)(() => cardLayoutOptions.rowActionMenuItems || hasRowReordering ? (0, _jsxRuntime.jsx)(_RowActions.RowActions, {
+    isRowReorderingDisabled: isRowReorderingDisabled,
+    row: row,
+    rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
+    rowIndex: currentIndex,
+    totalRows: totalRows,
+    updateRowOrder: hasRowReordering && onReorderRows ? rowReorderingUtilities.updateRowOrder : undefined
+  }) : null, [cardLayoutOptions.rowActionMenuItems, currentIndex, hasRowReordering, isRowReorderingDisabled, onReorderRows, row, rowReorderingUtilities, totalRows]);
+  return (0, _jsxRuntime.jsx)(_DataCard.DataCard, {
+    children: children,
+    description: description,
+    detailPanel: detailPanel,
+    hasSelection: hasRowSelection,
+    image: image,
+    isSelected: rowSelection[row.id] ?? false,
+    menuButtonChildren: menuButtonChildren,
+    onSelectionChange: onSelectionChange,
+    overline: overline,
+    title: title,
+    variant: variant
+  }, row.id);
+};
+const MemoizedRowDataCard = (0, _react.memo)(RowDataCard);
+MemoizedRowDataCard.displayName = "RowDataCard";
 const CardLayoutContent = ({
   currentLayout,
   data,
@@ -88,9 +129,6 @@ const CardLayoutContent = ({
   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,
@@ -104,41 +142,19 @@ const CardLayoutContent = ({
         odysseyDesignTokens: odysseyDesignTokens,
         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,
-            image: image,
-            menuButtonChildren: (cardLayoutOptions.rowActionMenuItems || hasRowReordering) && (0, _jsxRuntime.jsx)(_RowActions.RowActions, {
-              isRowReorderingDisabled: isRowReorderingDisabled,
-              row: row,
-              rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
-              rowIndex: currentIndex,
-              totalRows: totalRows,
-              updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
-            }),
-            overline: overline,
-            renderDetailPanel: cardLayoutOptions.renderDetailPanel,
+          return (0, _jsxRuntime.jsx)(MemoizedRowDataCard, {
+            cardLayoutOptions: cardLayoutOptions,
+            currentIndex: currentIndex,
+            handleRowSelectionChange: handleRowSelectionChange,
+            hasRowReordering: hasRowReordering,
+            hasRowSelection: hasRowSelection,
+            isRowReorderingDisabled: isRowReorderingDisabled,
+            onReorderRows: onReorderRows,
             row: row,
-            title: title,
-            variant: variant
+            rowReorderingUtilities: rowReorderingUtilities,
+            rowSelection: rowSelection,
+            totalRows: totalRows
           }, row.id);
         })
       })