@okta/odyssey-react-mui 1.44.0 → 1.45.0

package/dist/esm/Card.js

@@ -1,6 +1,7 @@
-import _Card from "@mui/material/Card";
-import _CardActionArea from "@mui/material/CardActionArea";
 import _CardActions from "@mui/material/CardActions";
+import _Skeleton from "@mui/material/Skeleton";
+import _CardActionArea from "@mui/material/CardActionArea";
+import _Card from "@mui/material/Card";
 /*!
  * 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.")
@@ -14,89 +15,316 @@ import _CardActions from "@mui/material/CardActions";
  */
 
 import styled from "@emotion/styled";
-import { memo, useEffect, useMemo } from "react";
-import { Box } from "./Box.js";
-import { ButtonContext, MenuButton } from "./Buttons/index.js";
-import { MoreIcon } from "./icons.generated/index.js";
+import { cardActionsClasses } from "@mui/material/CardActions";
+import { skeletonClasses } from "@mui/material/Skeleton";
+import { typographyClasses } from "@mui/material/Typography";
+import { Children, memo, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonContext } from "./Buttons/ButtonContext.js";
+import { MenuButton } from "./Buttons/MenuButton.js";
+import { MoreIcon } from "./icons.generated/More.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
-import { Heading5, Paragraph, Support } from "./Typography.js";
+import { Paragraph, Support, Typography } from "./Typography.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CARD_IMAGE_HEIGHT = "64px";
+export const cardVariantValues = ["tile", "stack", "compact"];
+export const CARD_IMAGE_SIZE = "64px";
+export const CARD_IMAGE_SIZE_COMPACT = "48px";
+const StyledCard = styled(_Card, {
+  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
+  } : {},
+  [`& .${skeletonClasses.root}`]: {
+    transform: "none"
+  },
+  [`& .${cardActionsClasses.root} .${skeletonClasses.root}`]: {
+    height: odysseyDesignTokens.Spacing7
+  }
+}));
+const StyledCardActionArea = styled(_CardActionArea)(() => ({
+  margin: 0,
+  padding: 0
+}));
+const AccessoriesContainer = styled("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",
+  [`& .${skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5
+  }
+}));
+const InnerContainer = styled("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 = styled("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,
+  [`& > .${skeletonClasses.root}`]: {
+    height: "100%",
+    aspectRatio: 1
+  }
+}));
+const ContentContainer = styled("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
+  },
+  [`& .${skeletonClasses.root} + .${skeletonClasses.root}`]: {
+    marginBlockStart: odysseyDesignTokens.Spacing1
+  }
 }));
-const MenuButtonContainer = styled("div", {
+const UpperContentContainer = styled("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,
+  [`& > .${typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
+}));
+const OverlineTitleContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
   odysseyDesignTokens
 }) => ({
-  position: "absolute",
-  right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing1,
+  [`& > .${typographyClasses.root}`]: {
+    marginBlockEnd: 0
+  }
 }));
-const CardContentContainer = styled("div")(() => ({
-  display: "flex"
+const Content = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite
 }));
-const buttonProviderValue = {
-  isFullWidth: true
-};
+const MenuButtonContainer = styled("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",
+  [`& .${skeletonClasses.root}`]: {
+    width: odysseyDesignTokens.Spacing5,
+    height: odysseyDesignTokens.Spacing5,
+    margin: odysseyDesignTokens.Spacing1
+  }
+}));
+const getNumberOfDefinedReactNodes = props => 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 = useOdysseyDesignTokens();
-  const cardContent = useMemo(() => _jsx(CardContentContainer, {
-    children: _jsxs(Box, {
-      children: [image && _jsx(ImageContainer, {
-        hasMenuButtonChildren: Boolean(menuButtonChildren),
+  const {
+    t
+  } = useTranslation();
+  const loadingContent = useMemo(() => _jsxs(InnerContainer, {
+    numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+    odysseyDesignTokens: odysseyDesignTokens,
+    variant: variant,
+    children: [image && _jsx(ImageContainer, {
+      hasMenuButton: Boolean(menuButtonChildren),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: _jsx(_Skeleton, {
+        variant: "circular"
+      })
+    }), _jsxs(ContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsxs(UpperContentContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
         odysseyDesignTokens: odysseyDesignTokens,
-        children: image
-      }), overline && _jsx(Support, {
-        component: "div",
-        children: overline
-      }), title && _jsx(Heading5, {
-        component: "div",
-        children: title
-      }), description && _jsx(Paragraph, {
-        color: "textSecondary",
-        children: description
+        variant: variant,
+        children: [_jsxs(OverlineTitleContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [overline && _jsx(Support, {
+            children: _jsx(_Skeleton, {
+              width: "50%"
+            })
+          }), title && _jsx(Typography, {
+            component: "div",
+            variant: variant === "tile" ? "h4" : "h5",
+            children: _jsx(_Skeleton, {
+              width: "33%"
+            })
+          })]
+        }), description && _jsxs(Paragraph, {
+          children: [_jsx(_Skeleton, {
+            width: "100%"
+          }), _jsx(_Skeleton, {
+            width: "50%"
+          })]
+        })]
+      }), children && _jsx(Content, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(_Skeleton, {
+          width: "50%"
+        })
       }), button && _jsx(_CardActions, {
-        children: _jsx(ButtonContext.Provider, {
-          value: buttonProviderValue,
-          children: button
+        children: _jsx(_Skeleton, {
+          variant: "rounded",
+          width: "100%"
         })
       })]
-    })
-  }), [button, description, image, menuButtonChildren, overline, title, odysseyDesignTokens]);
-  return _jsxs(_Card, {
-    className: onClick ? "isClickable" : "",
-    children: [onClick ? _jsx(_CardActionArea, {
+    })]
+  }), [button, children, description, image, menuButtonChildren, odysseyDesignTokens, overline, title, variant]);
+  const cardContent = useMemo(() => {
+    const buttonProviderValue = {
+      isFullWidth: true
+    };
+    return _jsxs(InnerContainer, {
+      hasDetailPanel: Boolean(detailPanel),
+      numberOfChildNodes: getNumberOfDefinedReactNodes([button, children, description, overline, title]),
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: [image && _jsx(ImageContainer, {
+        hasMenuButton: Boolean(menuButtonChildren),
+        odysseyDesignTokens: odysseyDesignTokens,
+        variant: variant,
+        children: image
+      }), _jsxs(ContentContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [_jsxs(UpperContentContainer, {
+          hasMenuButton: Boolean(menuButtonChildren),
+          odysseyDesignTokens: odysseyDesignTokens,
+          variant: variant,
+          children: [_jsxs(OverlineTitleContainer, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: [overline && _jsx(Support, {
+              component: "div",
+              children: overline
+            }), title && _jsx(Typography, {
+              component: "div",
+              id: titleId,
+              variant: variant === "tile" ? "h4" : "h5",
+              children: title
+            })]
+          }), description && _jsx(Paragraph, {
+            color: "textSecondary",
+            children: description
+          })]
+        }), children && _jsx(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: children
+        }), button && _jsx(_CardActions, {
+          children: _jsx(ButtonContext.Provider, {
+            value: buttonProviderValue,
+            children: button
+          })
+        }), detailPanel && _jsx(Content, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: detailPanel
+        })]
+      })]
+    });
+  }, [button, children, description, detailPanel, image, menuButtonChildren, odysseyDesignTokens, overline, title, titleId, variant]);
+  return _jsxs(StyledCard, {
+    cardVariant: variant,
+    isClickable: Boolean(onClick),
+    odysseyDesignTokens: odysseyDesignTokens,
+    role: role,
+    children: [Boolean(accessory) && _jsx(AccessoriesContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      variant: variant,
+      children: isLoading ? _jsx(_Skeleton, {
+        variant: "circular"
+      }) : accessory
+    }), isLoading ? loadingContent : onClick ? _jsx(StyledCardActionArea, {
       onClick: onClick,
       children: cardContent
     }) : cardContent, menuButtonChildren && _jsx(MenuButtonContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: _jsx(MenuButton, {
-        ariaLabel: "Card menu",
+      variant: variant,
+      children: isLoading ? _jsx(_Skeleton, {
+        variant: "circular"
+      }) : _jsx(MenuButton, {
+        ariaLabel: t("table.moreactions.arialabel"),
         buttonVariant: "floating",
         endIcon: _jsx(MoreIcon, {}),
         menuAlignment: "right",
         size: "small",
-        tooltipText: "Actions",
+        tooltipText: t("table.actions"),
         children: menuButtonChildren
       })
     })]
@@ -104,15 +332,5 @@ const Card = ({
 };
 const MemoizedCard = memo(Card);
 MemoizedCard.displayName = "Card";
-const Tile = props => {
-  useEffect(() => {
-    console.warn("Warning: The 'Tile' component is now called 'Card'. Please update your references as 'Tile' will be deprecated soon.");
-  }, []);
-  return _jsx(MemoizedCard, {
-    ...props
-  });
-};
-const MemoizedTile = memo(Tile);
-MemoizedTile.displayName = "Tile";
-export { MemoizedCard as Card, MemoizedTile as Tile };
+export { MemoizedCard as Card };
 //# sourceMappingURL=Card.js.map

package/dist/esm/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["styled","memo","useEffect","useMemo","Box","ButtonContext","MenuButton","MoreIcon","useOdysseyDesignTokens","Heading5","Paragraph","Support","jsx","_jsx","jsxs","_jsxs","CARD_IMAGE_HEIGHT","ImageContainer","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","cardContent","children","Boolean","component","color","_CardActions","Provider","value","_Card","className","_CardActionArea","ariaLabel","buttonVariant","endIcon","menuAlignment","size","tooltipText","MemoizedCard","displayName","Tile","props","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.js","names":["styled","cardActionsClasses","skeletonClasses","typographyClasses","Children","memo","useMemo","useTranslation","ButtonContext","MenuButton","MoreIcon","useOdysseyDesignTokens","Paragraph","Support","Typography","jsx","_jsx","jsxs","_jsxs","cardVariantValues","CARD_IMAGE_SIZE","CARD_IMAGE_SIZE_COMPACT","StyledCard","_Card","shouldForwardProp","prop","cardVariant","isClickable","odysseyDesignTokens","border","BorderWidthMain","BorderColorDisplay","BorderStyleMain","boxShadow","padding","display","marginBlockEnd","Spacing2","borderColor","HueNeutralWhite","DepthMedium","root","transform","height","Spacing7","StyledCardActionArea","_CardActionArea","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","OverlineTitleContainer","Content","MenuButtonContainer","position","right","top","getNumberOfDefinedReactNodes","props","toArray","length","Card","children","description","detailPanel","image","isLoading","overline","title","titleId","accessory","button","menuButtonChildren","onClick","__role","role","t","loadingContent","Boolean","_Skeleton","component","_CardActions","cardContent","buttonProviderValue","isFullWidth","id","color","Provider","value","ariaLabel","buttonVariant","endIcon","menuAlignment","size","tooltipText","MemoizedCard","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/esm/labs/DataView/CardLayoutContent.js

@@ -1,4 +1,3 @@
-import _Checkbox from "@mui/material/Checkbox";
 /*!
  * 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.")
@@ -12,7 +11,7 @@ import _Checkbox from "@mui/material/Checkbox";
  */
 
 import styled from "@emotion/styled";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Box } from "../../Box.js";
 import { CircularProgress } from "../../CircularProgress.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
@@ -52,13 +51,55 @@ const LoadingContainer = styled("div", {
   width: "100%",
   paddingBlock: odysseyDesignTokens.Spacing5
 }));
-const CheckboxContainer = styled("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 = useCallback(() => handleRowSelectionChange(row), [handleRowSelectionChange, row]);
+  const detailPanel = useMemo(() => cardLayoutOptions.renderDetailPanel?.({
+    row
+  }), [cardLayoutOptions, row]);
+  const menuButtonChildren = useMemo(() => cardLayoutOptions.rowActionMenuItems || hasRowReordering ? _jsx(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 _jsx(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 = memo(RowDataCard);
+MemoizedRowDataCard.displayName = "RowDataCard";
 const CardLayoutContent = ({
   currentLayout,
   data,
@@ -81,9 +122,6 @@ const CardLayoutContent = ({
   const handleRowSelectionChange = 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 _jsx(Box, {
     children: isLoading ? _jsx(LoadingContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
@@ -97,41 +135,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 _jsx(DataCard, {
-            Accessory: hasRowSelection && _jsx(CheckboxContainer, {
-              odysseyDesignTokens: odysseyDesignTokens,
-              children: _jsx(_Checkbox, {
-                checked: rowSelection[row.id] ?? false,
-                onChange: () => handleRowSelectionChange(row)
-              })
-            }),
-            button: button,
-            children: children,
-            description: description,
-            image: image,
-            menuButtonChildren: (cardLayoutOptions.rowActionMenuItems || hasRowReordering) && _jsx(RowActions, {
-              isRowReorderingDisabled: isRowReorderingDisabled,
-              row: row,
-              rowActionMenuItems: cardLayoutOptions.rowActionMenuItems,
-              rowIndex: currentIndex,
-              totalRows: totalRows,
-              updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
-            }),
-            overline: overline,
-            renderDetailPanel: cardLayoutOptions.renderDetailPanel,
+          return _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);
         })
       })