@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","styled","TagListContext","MuiPropsContext","useOdysseyDesignTokens","CloseCircleFilledIcon","useContrastContext","jsx","_jsx","tagColorVariants","getChipColors","colorVariant","odysseyDesignTokens","contrastMode","colors","default","background","HueNeutral200","text","HueNeutral700","textDisabled","HueNeutral400","HueNeutral100","HueNeutral300","hover","active","border","deleteIcon","HueNeutral500","deleteIconHover","icon","iconDisabled","info","HueBlue200","HueBlue700","HueBlue400","HueBlue100","HueBlue300","HueBlue500","accentOne","HueAccentOne200","HueAccentOne700","HueAccentOne400","HueAccentOne100","HueAccentOne300","HueAccentOne500","accentTwo","HueAccentTwo200","HueAccentTwo800","HueAccentTwo400","HueAccentTwo100","HueAccentTwo700","HueAccentTwo300","HueAccentTwo500","accentThree","HueAccentThree200","HueAccentThree700","HueAccentThree400","HueAccentThree100","HueAccentThree300","HueAccentThree500","accentFour","HueAccentFour200","HueAccentFour700","HueAccentFour400","HueAccentFour100","HueAccentFour300","HueAccentFour500","StyledTag","_Chip","shouldForwardProp","prop","includes","clickable","backgroundColor","color","borderColor","Tag","isDisabled","label","onClick","onRemove","testId","translate","chipElementType","renderTag","muiProps","as","Boolean","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext, MuiPropsContextType } from \"./MuiPropsContext\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { CloseCircleFilledIcon } from \"./icons.generated\";\nimport { useContrastContext, ContrastMode } from \"./ContrastModeProvider\";\n\nexport const tagColorVariants = [\n  \"default\",\n  \"info\",\n  \"accentOne\",\n  \"accentTwo\",\n  \"accentThree\",\n  \"accentFour\",\n] as const;\n\ntype TagColorVariant = (typeof tagColorVariants)[number];\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n  /**\n   * Color variant of the Tag, affecting its appearance\n   */\n  colorVariant?: TagColorVariant;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst getChipColors = (\n  colorVariant: TagColorVariant,\n  odysseyDesignTokens: DesignTokens,\n  contrastMode: ContrastMode,\n) => {\n  const colors = {\n    default: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueNeutral200,\n        text: odysseyDesignTokens.HueNeutral700,\n        textDisabled: odysseyDesignTokens.HueNeutral400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueNeutral100,\n        text: odysseyDesignTokens.HueNeutral700,\n        textDisabled: odysseyDesignTokens.HueNeutral300,\n      }),\n      hover: odysseyDesignTokens.HueNeutral200,\n      active: odysseyDesignTokens.HueNeutral300,\n      border: odysseyDesignTokens.HueNeutral200,\n      deleteIcon: odysseyDesignTokens.HueNeutral500,\n      deleteIconHover: odysseyDesignTokens.HueNeutral700,\n      icon: odysseyDesignTokens.HueNeutral700,\n      iconDisabled: odysseyDesignTokens.HueNeutral300,\n    },\n    info: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueBlue200,\n        text: odysseyDesignTokens.HueBlue700,\n        textDisabled: odysseyDesignTokens.HueBlue400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueBlue100,\n        text: odysseyDesignTokens.HueBlue700,\n        textDisabled: odysseyDesignTokens.HueBlue300,\n      }),\n      hover: odysseyDesignTokens.HueBlue200,\n      active: odysseyDesignTokens.HueBlue300,\n      border: odysseyDesignTokens.HueBlue200,\n      deleteIcon: odysseyDesignTokens.HueBlue500,\n      deleteIconHover: odysseyDesignTokens.HueBlue700,\n      icon: odysseyDesignTokens.HueBlue700,\n      iconDisabled: odysseyDesignTokens.HueBlue300,\n    },\n    accentOne: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne200,\n        text: odysseyDesignTokens.HueAccentOne700,\n        textDisabled: odysseyDesignTokens.HueAccentOne400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne100,\n        text: odysseyDesignTokens.HueAccentOne700,\n        textDisabled: odysseyDesignTokens.HueAccentOne300,\n      }),\n      hover: odysseyDesignTokens.HueAccentOne200,\n      active: odysseyDesignTokens.HueAccentOne300,\n      border: odysseyDesignTokens.HueAccentOne200,\n      deleteIcon: odysseyDesignTokens.HueAccentOne500,\n      deleteIconHover: odysseyDesignTokens.HueAccentOne700,\n      icon: odysseyDesignTokens.HueAccentOne700,\n      iconDisabled: odysseyDesignTokens.HueAccentOne300,\n    },\n    accentTwo: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo200,\n        text: odysseyDesignTokens.HueAccentTwo800,\n        textDisabled: odysseyDesignTokens.HueAccentTwo400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo100,\n        text: odysseyDesignTokens.HueAccentTwo700,\n        textDisabled: odysseyDesignTokens.HueAccentTwo300,\n      }),\n      hover: odysseyDesignTokens.HueAccentTwo200,\n      active: odysseyDesignTokens.HueAccentTwo300,\n      border: odysseyDesignTokens.HueAccentTwo200,\n      deleteIcon: odysseyDesignTokens.HueAccentTwo500,\n      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,\n      icon: odysseyDesignTokens.HueAccentTwo700,\n      iconDisabled: odysseyDesignTokens.HueAccentTwo300,\n    },\n    accentThree: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree200,\n        text: odysseyDesignTokens.HueAccentThree700,\n        textDisabled: odysseyDesignTokens.HueAccentThree400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree100,\n        text: odysseyDesignTokens.HueAccentThree700,\n        textDisabled: odysseyDesignTokens.HueAccentThree300,\n      }),\n      hover: odysseyDesignTokens.HueAccentThree200,\n      active: odysseyDesignTokens.HueAccentThree300,\n      border: odysseyDesignTokens.HueAccentThree200,\n      deleteIcon: odysseyDesignTokens.HueAccentThree500,\n      deleteIconHover: odysseyDesignTokens.HueAccentThree700,\n      icon: odysseyDesignTokens.HueAccentThree700,\n      iconDisabled: odysseyDesignTokens.HueAccentThree300,\n    },\n    accentFour: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour200,\n        text: odysseyDesignTokens.HueAccentFour700,\n        textDisabled: odysseyDesignTokens.HueAccentFour400,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour100,\n        text: odysseyDesignTokens.HueAccentFour700,\n        textDisabled: odysseyDesignTokens.HueAccentFour300,\n      }),\n      hover: odysseyDesignTokens.HueAccentFour200,\n      active: odysseyDesignTokens.HueAccentFour300,\n      border: odysseyDesignTokens.HueAccentFour200,\n      deleteIcon: odysseyDesignTokens.HueAccentFour500,\n      deleteIconHover: odysseyDesignTokens.HueAccentFour700,\n      icon: odysseyDesignTokens.HueAccentFour700,\n      iconDisabled: odysseyDesignTokens.HueAccentFour300,\n    },\n  };\n\n  return colors[colorVariant] || colors.default;\n};\n\nconst StyledTag = styled(MuiChip, {\n  shouldForwardProp: (prop) =>\n    ![\"colorVariant\", \"contrastMode\", \"odysseyDesignTokens\"].includes(\n      prop as string,\n    ),\n})<{\n  colorVariant: TagColorVariant;\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n  as?: React.ElementType; // Allow the 'as' prop to be forwarded\n  clickable?: boolean;\n}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable }) => {\n  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);\n\n  return {\n    backgroundColor: colors.background,\n    color: colors.text,\n\n    ...(clickable === true && {\n      borderColor: colors.border,\n    }),\n\n    ...(clickable === false && {\n      borderColor: \"transparent\",\n    }),\n\n    \"&.MuiChip-clickable:hover\": {\n      backgroundColor: colors.hover,\n    },\n\n    \"&.MuiChip-clickable:active\": {\n      backgroundColor: colors.active,\n    },\n\n    \"&.Mui-disabled\": {\n      color: colors.textDisabled,\n      borderColor: colors.border,\n      \"& .MuiChip-icon, & .MuiChip-deleteIcon\": {\n        color: colors.iconDisabled,\n      },\n    },\n\n    \"& .MuiChip-icon\": {\n      color: colors.icon,\n    },\n    \"& .MuiChip-deleteIcon\": {\n      color: colors.deleteIcon,\n      \"&:hover\": {\n        color: colors.deleteIconHover,\n      },\n    },\n  };\n});\n\nconst Tag = ({\n  colorVariant = \"default\",\n  icon,\n  isDisabled,\n  label,\n  onClick,\n  onRemove,\n  testId,\n  translate,\n}: TagProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { chipElementType } = useContext(TagListContext);\n  const { contrastMode } = useContrastContext();\n\n  const renderTag = useCallback(\n    (muiProps: MuiPropsContextType) => (\n      <StyledTag\n        {...muiProps}\n        as={chipElementType}\n        aria-disabled={isDisabled}\n        clickable={Boolean(onClick)}\n        data-se={testId}\n        colorVariant={colorVariant}\n        odysseyDesignTokens={odysseyDesignTokens}\n        contrastMode=\"highContrast\"\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        onClick={onClick}\n        onDelete={onRemove}\n        deleteIcon={<CloseCircleFilledIcon />}\n        translate={translate}\n      />\n    ),\n    [\n      chipElementType,\n      icon,\n      isDisabled,\n      label,\n      onClick,\n      onRemove,\n      testId,\n      translate,\n      colorVariant,\n      odysseyDesignTokens,\n      contrastMode,\n    ],\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","styled","CloseCircleFilledIcon","MuiPropsContext","useOdysseyDesignTokens","TagListContext","useContrastModeContext","jsx","_jsx","tagSizeValues","tagColorVariants","getChipColors","colorVariant","contrastMode","odysseyDesignTokens","colors","default","background","HueNeutral200","text","HueNeutral700","textDisabled","HueNeutral400","HueNeutral100","HueNeutral300","hover","active","border","deleteIcon","HueNeutral500","deleteIconHover","icon","iconDisabled","info","HueBlue200","HueBlue700","HueBlue400","HueBlue100","HueBlue300","HueBlue500","accentOne","HueAccentOne200","HueAccentOne700","HueAccentOne400","HueAccentOne100","HueAccentOne300","HueAccentOne500","accentTwo","HueAccentTwo200","HueAccentTwo800","HueAccentTwo400","HueAccentTwo100","HueAccentTwo700","HueAccentTwo300","HueAccentTwo500","accentThree","HueAccentThree200","HueAccentThree700","HueAccentThree400","HueAccentThree100","HueAccentThree300","HueAccentThree500","accentFour","HueAccentFour200","HueAccentFour700","HueAccentFour400","HueAccentFour100","HueAccentFour300","HueAccentFour500","StyledTag","_Chip","shouldForwardProp","prop","includes","clickable","size","backgroundColor","color","borderColor","paddingBlock","Spacing1","Tag","isDisabled","label","onClick","onRemove","testId","translate","chipElementType","renderTag","muiProps","as","Boolean","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { CloseCircleFilledIcon } from \"./icons.generated\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport { MuiPropsContext, MuiPropsContextType } from \"./MuiPropsContext\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { TagListContext } from \"./TagListContext\";\nimport { ContrastMode, useContrastModeContext } from \"./useContrastMode\";\n\nconst tagSizeValues = [\"medium\", \"small\"] as const;\n\nexport const tagColorVariants = [\n  \"accentFour\",\n  \"accentOne\",\n  \"accentThree\",\n  \"accentTwo\",\n  \"default\",\n  \"info\",\n] as const;\n\ntype TagColorVariant = (typeof tagColorVariants)[number];\ntype TagSize = (typeof tagSizeValues)[number];\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n  /**\n   * Color variant of the Tag, affecting its appearance\n   */\n  colorVariant?: TagColorVariant;\n  /*\n   *  Size variant of the Tag\n   */\n  size?: TagSize;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst getChipColors = ({\n  colorVariant,\n  contrastMode,\n  odysseyDesignTokens,\n}: {\n  colorVariant: TagColorVariant;\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n}) => {\n  const colors = {\n    default: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueNeutral200,\n        text: odysseyDesignTokens.HueNeutral700,\n        textDisabled: odysseyDesignTokens.HueNeutral400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueNeutral100,\n        text: odysseyDesignTokens.HueNeutral700,\n        textDisabled: odysseyDesignTokens.HueNeutral300,\n      }),\n      hover: odysseyDesignTokens.HueNeutral200,\n      active: odysseyDesignTokens.HueNeutral300,\n      border: odysseyDesignTokens.HueNeutral200,\n      deleteIcon: odysseyDesignTokens.HueNeutral500,\n      deleteIconHover: odysseyDesignTokens.HueNeutral700,\n      icon: odysseyDesignTokens.HueNeutral700,\n      iconDisabled: odysseyDesignTokens.HueNeutral300,\n    },\n    info: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueBlue200,\n        text: odysseyDesignTokens.HueBlue700,\n        textDisabled: odysseyDesignTokens.HueBlue400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueBlue100,\n        text: odysseyDesignTokens.HueBlue700,\n        textDisabled: odysseyDesignTokens.HueBlue300,\n      }),\n      hover: odysseyDesignTokens.HueBlue200,\n      active: odysseyDesignTokens.HueBlue300,\n      border: odysseyDesignTokens.HueBlue200,\n      deleteIcon: odysseyDesignTokens.HueBlue500,\n      deleteIconHover: odysseyDesignTokens.HueBlue700,\n      icon: odysseyDesignTokens.HueBlue700,\n      iconDisabled: odysseyDesignTokens.HueBlue300,\n    },\n    accentOne: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne200,\n        text: odysseyDesignTokens.HueAccentOne700,\n        textDisabled: odysseyDesignTokens.HueAccentOne400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne100,\n        text: odysseyDesignTokens.HueAccentOne700,\n        textDisabled: odysseyDesignTokens.HueAccentOne300,\n      }),\n      hover: odysseyDesignTokens.HueAccentOne200,\n      active: odysseyDesignTokens.HueAccentOne300,\n      border: odysseyDesignTokens.HueAccentOne200,\n      deleteIcon: odysseyDesignTokens.HueAccentOne500,\n      deleteIconHover: odysseyDesignTokens.HueAccentOne700,\n      icon: odysseyDesignTokens.HueAccentOne700,\n      iconDisabled: odysseyDesignTokens.HueAccentOne300,\n    },\n    accentTwo: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo200,\n        text: odysseyDesignTokens.HueAccentTwo800,\n        textDisabled: odysseyDesignTokens.HueAccentTwo400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo100,\n        text: odysseyDesignTokens.HueAccentTwo700,\n        textDisabled: odysseyDesignTokens.HueAccentTwo300,\n      }),\n      hover: odysseyDesignTokens.HueAccentTwo200,\n      active: odysseyDesignTokens.HueAccentTwo300,\n      border: odysseyDesignTokens.HueAccentTwo200,\n      deleteIcon: odysseyDesignTokens.HueAccentTwo500,\n      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,\n      icon: odysseyDesignTokens.HueAccentTwo700,\n      iconDisabled: odysseyDesignTokens.HueAccentTwo300,\n    },\n    accentThree: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree200,\n        text: odysseyDesignTokens.HueAccentThree700,\n        textDisabled: odysseyDesignTokens.HueAccentThree400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree100,\n        text: odysseyDesignTokens.HueAccentThree700,\n        textDisabled: odysseyDesignTokens.HueAccentThree300,\n      }),\n      hover: odysseyDesignTokens.HueAccentThree200,\n      active: odysseyDesignTokens.HueAccentThree300,\n      border: odysseyDesignTokens.HueAccentThree200,\n      deleteIcon: odysseyDesignTokens.HueAccentThree500,\n      deleteIconHover: odysseyDesignTokens.HueAccentThree700,\n      icon: odysseyDesignTokens.HueAccentThree700,\n      iconDisabled: odysseyDesignTokens.HueAccentThree300,\n    },\n    accentFour: {\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour200,\n        text: odysseyDesignTokens.HueAccentFour700,\n        textDisabled: odysseyDesignTokens.HueAccentFour400,\n      }),\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour100,\n        text: odysseyDesignTokens.HueAccentFour700,\n        textDisabled: odysseyDesignTokens.HueAccentFour300,\n      }),\n      hover: odysseyDesignTokens.HueAccentFour200,\n      active: odysseyDesignTokens.HueAccentFour300,\n      border: odysseyDesignTokens.HueAccentFour200,\n      deleteIcon: odysseyDesignTokens.HueAccentFour500,\n      deleteIconHover: odysseyDesignTokens.HueAccentFour700,\n      icon: odysseyDesignTokens.HueAccentFour700,\n      iconDisabled: odysseyDesignTokens.HueAccentFour300,\n    },\n  };\n\n  return colors[colorVariant] || colors.default;\n};\n\nconst StyledTag = styled(MuiChip, {\n  shouldForwardProp: (prop) =>\n    ![\"colorVariant\", \"contrastMode\", \"odysseyDesignTokens\", \"size\"].includes(\n      prop as string,\n    ),\n})<{\n  as?: React.ElementType; // Allow the 'as' prop to be forwarded\n  clickable?: boolean;\n  colorVariant: TagColorVariant;\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n  size?: TagSize;\n}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable, size }) => {\n  const colors = getChipColors({\n    colorVariant,\n    odysseyDesignTokens,\n    contrastMode,\n  });\n\n  return {\n    backgroundColor: colors.background,\n    color: colors.text,\n\n    ...(clickable === true && {\n      borderColor: colors.border,\n    }),\n\n    ...(clickable === false && {\n      borderColor: \"transparent\",\n    }),\n\n    ...(size === \"small\" && {\n      paddingBlock: `calc(${odysseyDesignTokens.Spacing1})`,\n    }),\n\n    \"&.MuiChip-clickable:hover\": {\n      backgroundColor: colors.hover,\n    },\n\n    \"&.MuiChip-clickable:active\": {\n      backgroundColor: colors.active,\n    },\n\n    \"&.Mui-disabled\": {\n      color: colors.textDisabled,\n      borderColor: colors.border,\n      \"& .MuiChip-icon, & .MuiChip-deleteIcon\": {\n        color: colors.iconDisabled,\n      },\n    },\n\n    \"& .MuiChip-icon\": {\n      color: colors.icon,\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      color: colors.deleteIcon,\n      \"&:hover\": {\n        color: colors.deleteIconHover,\n      },\n    },\n  };\n});\n\nconst Tag = ({\n  colorVariant = \"default\",\n  icon,\n  isDisabled,\n  label,\n  onClick,\n  onRemove,\n  size = \"medium\",\n  testId,\n  translate,\n}: TagProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { chipElementType } = useContext(TagListContext);\n  const { contrastMode } = useContrastModeContext();\n\n  const renderTag = useCallback(\n    (muiProps: MuiPropsContextType) => (\n      <StyledTag\n        {...muiProps}\n        aria-disabled={isDisabled}\n        as={chipElementType}\n        clickable={Boolean(onClick)}\n        colorVariant={colorVariant}\n        contrastMode={contrastMode}\n        data-se={testId}\n        deleteIcon={<CloseCircleFilledIcon />}\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        odysseyDesignTokens={odysseyDesignTokens}\n        onClick={onClick}\n        onDelete={onRemove}\n        size={size}\n        translate={translate}\n      />\n    ),\n    [\n      chipElementType,\n      colorVariant,\n      contrastMode,\n      icon,\n      isDisabled,\n      label,\n      odysseyDesignTokens,\n      onClick,\n      onRemove,\n      size,\n      testId,\n      translate,\n    ],\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":"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"}

package/dist/index.js

@@ -21,21 +21,19 @@ export * from "./Banner.js";
 export * from "./Box.js";
 export * from "./Breadcrumbs.js";
 export * from "./Button.js";
-export * from "./Card.js";
 export * from "./Callout.js";
+export * from "./Card.js";
 export * from "./Checkbox.js";
 export * from "./CheckboxGroup.js";
 export * from "./CircularProgress.js";
-export * from "./ContrastModeProvider.js";
-export * from "./CssBaseline.js";
-export * from "./createShadowDomElements.js";
 export * from "./createUniqueId.js";
+export * from "./CssBaseline.js";
 export * from "./DataTable/index.js";
 export * from "./Dialog.js";
 export * from "./Drawer.js";
 export * from "./EmptyState.js";
-export * from "./Fieldset.js";
 export * from "./FieldComponentProps.js";
+export * from "./Fieldset.js";
 export { FileUploader, fileUploadTypes, fileUploadVariants } from "./FileUploader/index.js";
 export * from "./Form.js";
 export * from "./HintLink.js";
@@ -49,6 +47,7 @@ export * from "./OdysseyCacheProvider.js";
 export * from "./OdysseyProvider.js";
 export * from "./OdysseyThemeProvider.js";
 export * from "./OdysseyTranslationProvider.js";
+export * from "./Pagination/index.js";
 export * from "./PasswordField.js";
 export * from "./Radio.js";
 export * from "./RadioGroup.js";
@@ -58,6 +57,7 @@ export * from "./Select.js";
 export * from "./Stack.js";
 export * from "./Status.js";
 export * from "./Surface.js";
+export * from "./Switch.js";
 export * from "./Tabs.js";
 export * from "./Tag.js";
 export * from "./TagList.js";
@@ -65,9 +65,8 @@ export * from "./TextField.js";
 export * from "./theme/index.js";
 export * from "./Toast.js";
 export * from "./ToastStack.js";
-export * from "./Switch.js";
 export * from "./Tooltip.js";
 export * from "./Typography.js";
 export * from "./useUniqueId.js";
-export * from "./Pagination/index.js";
+export * from "./web-component/index.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","odysseyTranslate","useOdysseyDesignTokens","badgeContentMaxValues","FileUploader","fileUploadTypes","fileUploadVariants"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  StackProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { odysseyTranslate } from \"./i18n\";\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport { badgeContentMaxValues } from \"./Badge\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Card\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./ContrastModeProvider\";\nexport * from \"./CssBaseline\";\nexport * from \"./createShadowDomElements\";\nexport * from \"./createUniqueId\";\nexport * from \"./DataTable\";\nexport * from \"./Dialog\";\nexport * from \"./Drawer\";\nexport * from \"./EmptyState\";\nexport * from \"./Fieldset\";\nexport * from \"./FieldComponentProps\";\nexport {\n  FileUploader,\n  fileUploadTypes,\n  fileUploadVariants,\n} from \"./FileUploader\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Stack\";\nexport * from \"./Status\";\nexport * from \"./Surface\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Switch\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\nexport * from \"./Pagination\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EAEjBC,aAAa,QACR,eAAe;AAAC,SAkBdC,gBAAgB;AAAA,SAEhBC,sBAAsB;AAAA;AAAA;AAAA,SAItBC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAqB5BC,YAAY,EACZC,eAAe,EACfC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","odysseyTranslate","useOdysseyDesignTokens","badgeContentMaxValues","FileUploader","fileUploadTypes","fileUploadVariants"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  StackProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { odysseyTranslate } from \"./i18n\";\nexport type { FocusHandle } from \"./inputUtils\";\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport { badgeContentMaxValues } from \"./Badge\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Card\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./createUniqueId\";\nexport * from \"./CssBaseline\";\nexport * from \"./DataTable\";\nexport * from \"./Dialog\";\nexport * from \"./Drawer\";\nexport * from \"./EmptyState\";\nexport * from \"./FieldComponentProps\";\nexport * from \"./Fieldset\";\nexport {\n  FileUploader,\n  fileUploadTypes,\n  fileUploadVariants,\n} from \"./FileUploader\";\nexport * from \"./Form\";\nexport * from \"./HintLink\";\nexport * from \"./IconWithTooltip\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./Pagination\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Stack\";\nexport * from \"./Status\";\nexport * from \"./Surface\";\nexport * from \"./Switch\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\nexport * from \"./web-component\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EAEjBC,aAAa,QACR,eAAe;AAAC,SAkBdC,gBAAgB;AAAA,SAEhBC,sBAAsB;AAAA;AAAA;AAAA,SAItBC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAmB5BC,YAAY,EACZC,eAAe,EACfC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/index.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 16 Oct 2024 21:06:46 GMT
+ * Generated on Mon, 04 Nov 2024 19:11:42 GMT
  */
 
 $border-color-control: #8d8d8d !default;

package/dist/labs/AppTile.js

@@ -1,5 +1,6 @@
-import _Card from "@mui/material/Card";
 import _CardActionArea from "@mui/material/CardActionArea";
+import _Card from "@mui/material/Card";
+import _Skeleton from "@mui/material/Skeleton";
 /*!
  * 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.")
@@ -21,17 +22,20 @@ import { Box } from ".././Box.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const APP_TILE_IMAGE_HEIGHT = "64px";
+export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "64px";
 const ImageContainer = styled("div", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasAction"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
 })(({
-  odysseyDesignTokens,
-  hasAction
+  odysseyDesignTokens
 }) => ({
   display: "flex",
   alignItems: "flex-start",
   maxHeight: APP_TILE_IMAGE_HEIGHT,
   marginBlockEnd: odysseyDesignTokens.Spacing5,
-  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0
+  ["img"]: {
+    height: APP_TILE_IMAGE_HEIGHT,
+    maxWidth: "100%"
+  }
 }));
 const ActionContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -41,13 +45,23 @@ const ActionContainer = styled("div", {
   alignItems: "center",
   display: "flex",
   minHeight: odysseyDesignTokens.Spacing6,
-  gap: odysseyDesignTokens.Spacing1,
   position: "absolute",
-  right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3
+  right: odysseyDesignTokens.Spacing2,
+  top: odysseyDesignTokens.Spacing2,
+  gap: odysseyDesignTokens.Spacing1,
+  zIndex: 1,
+  ["& > .MuiTypography-root:last-child"]: {
+    marginInlineEnd: odysseyDesignTokens.Spacing2
+  }
 }));
-const ContentContainer = styled("div")(() => ({
-  display: "flex"
+const ContentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasTopSection"
+})(({
+  odysseyDesignTokens,
+  hasTopSection
+}) => ({
+  alignItems: "flex-start",
+  paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0
 }));
 const ChildrenContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -58,6 +72,83 @@ const ChildrenContainer = styled("div", {
     marginBlockStart: odysseyDesignTokens.Spacing3
   }
 }));
+const LoadingTile = ({
+  image,
+  overline,
+  title,
+  description,
+  children,
+  hasTopSection
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsx(_Card, {
+    className: "isClickable",
+    children: _jsxs(ContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      hasTopSection: hasTopSection,
+      children: [hasTopSection && _jsx(ActionContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: _jsx(Subordinate, {
+          children: _jsx(_Skeleton, {
+            width: 50
+          })
+        })
+      }), _jsxs(Box, {
+        sx: {
+          width: "100%"
+        },
+        children: [image && _jsx(ImageContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: _jsx(_Skeleton, {
+            height: APP_TILE_IMAGE_HEIGHT,
+            width: APP_TILE_PLACEHOLDER_IMAGE_WIDTH,
+            variant: "rectangular"
+          })
+        }), overline && _jsx(Support, {
+          children: _jsx(_Skeleton, {})
+        }), title && _jsx(Heading5, {
+          children: _jsx(_Skeleton, {})
+        }), description && _jsx(Paragraph, {
+          children: _jsx(_Skeleton, {})
+        }), children && _jsx(ChildrenContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: _jsx(_Skeleton, {
+            variant: "rounded",
+            width: "100%",
+            height: odysseyDesignTokens.Spacing6
+          })
+        })]
+      })]
+    })
+  });
+};
+const StyledMuiCard = styled(_Card, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  position: "relative",
+  boxShadow: "none",
+  overflow: "unset",
+  "&::after": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    boxShadow: odysseyDesignTokens.DepthMedium,
+    borderRadius: odysseyDesignTokens.BorderRadiusOuter,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+    zIndex: "-1",
+    content: '""'
+  },
+  "&:hover": {
+    "&::after": {
+      opacity: 1
+    }
+  }
+}));
 const AppTile = ({
   actionAriaControls,
   actionAriaHasPopup,
@@ -68,43 +159,47 @@ const AppTile = ({
   children,
   description,
   image,
+  isLoading,
   onActionClick,
   onClick,
   overline,
   title
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
-  const tileContent = useMemo(() => _jsx(ContentContainer, {
-    children: _jsxs(Box, {
-      children: [image && _jsx(ImageContainer, {
-        odysseyDesignTokens: odysseyDesignTokens,
-        hasAction: Boolean(onActionClick),
-        children: image
-      }), overline && _jsx(Support, {
-        component: "div",
-        children: overline
-      }), title && _jsx(Heading5, {
-        component: "div",
-        children: title
-      }), description && _jsx(Paragraph, {
-        color: "textSecondary",
-        children: description
-      }), children && _jsx(ChildrenContainer, {
-        odysseyDesignTokens: odysseyDesignTokens,
-        children: children
-      })]
-    })
-  }), [image, odysseyDesignTokens, onActionClick, overline, title, description, children]);
-  return _jsxs(_Card, {
-    className: "isClickable",
-    children: [_jsx(_CardActionArea, {
-      onClick: onClick,
-      children: tileContent
-    }), (onActionClick || auxiliaryText) && _jsxs(ActionContainer, {
+  const tileContent = useMemo(() => _jsxs(ContentContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    hasTopSection: typeof onActionClick === "function" || !!auxiliaryText,
+    children: [image && _jsx(ImageContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
-      children: [auxiliaryText && _jsx(Subordinate, {
+      children: image
+    }), overline && _jsx(Support, {
+      component: "div",
+      children: overline
+    }), title && _jsx(Heading5, {
+      component: "div",
+      children: title
+    }), description && _jsx(Paragraph, {
+      color: "textSecondary",
+      children: description
+    }), children && _jsx(ChildrenContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: children
+    })]
+  }), [image, auxiliaryText, onActionClick, odysseyDesignTokens, overline, title, description, children]);
+  return isLoading ? _jsx(LoadingTile, {
+    image: Boolean(image),
+    overline: Boolean(overline),
+    title: Boolean(title),
+    description: Boolean(description),
+    children: Boolean(children),
+    hasTopSection: typeof onActionClick === "function" || !!auxiliaryText
+  }) : _jsxs(StyledMuiCard, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [(onActionClick || auxiliaryText) && _jsxs(ActionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [auxiliaryText && !isLoading && _jsx(Subordinate, {
         children: auxiliaryText
-      }), onActionClick && _jsx(Button, {
+      }), onActionClick && !isLoading && _jsx(Button, {
         endIcon: actionIcon,
         ariaLabel: actionLabel,
         variant: "floating",
@@ -115,6 +210,9 @@ const AppTile = ({
         ariaHasPopup: actionAriaHasPopup,
         onClick: onActionClick
       })]
+    }), _jsx(_CardActionArea, {
+      onClick: onClick,
+      children: tileContent
     })]
   });
 };

package/dist/labs/AppTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppTile.js","names":["memo","useMemo","styled","Button","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Support","Box","jsx","_jsx","jsxs","_jsxs","APP_TILE_IMAGE_HEIGHT","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","hasAction","display","alignItems","maxHeight","marginBlockEnd","Spacing5","paddingRight","ActionContainer","minHeight","Spacing6","gap","Spacing1","position","right","Spacing3","top","ContentContainer","ChildrenContainer","marginBlockStart","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","children","description","image","onActionClick","onClick","overline","title","tileContent","Boolean","component","color","_Card","className","_CardActionArea","endIcon","ariaLabel","variant","size","tooltipText","ariaControls","ariaExpanded","ariaHasPopup","MemoizedAppTile","displayName"],"sources":["../../src/labs/AppTile.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  HTMLAttributes,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \".././Button\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Subordinate, Support } from \".././Typography\";\nimport { Box } from \".././Box\";\n\nexport const APP_TILE_IMAGE_HEIGHT = \"64px\";\n\nexport type AppTileProps = {\n  // Text that appears in the upper right corner of the tile\n  auxiliaryText?: string;\n  // Arbitrary content to render underneath any other tile content\n  children?: ReactNode;\n  // A string description\n  description?: string;\n  // An image or icon at the top of the tile\n  image?: ReactElement;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // An 'eyebrow' of text above the title\n  overline?: string;\n  // A string for the tile title\n  title?: string;\n} & (\n  | {\n      // Event that fires when the user clicks the action button in the upper-right corner\n      // If this isn't set, the other action props can't be set either\n      onActionClick: MouseEventHandler;\n      // The ID of the element which the button controls (for instance, a drawer or dialog), if any.\n      actionAriaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n      // Should be filled if the button controls a popup element such as a Drawer or Dialog\n      actionAriaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n      // Should be true if the button controls a popup element that is currently expanded. Should be synced to\n      // the state of the popup element\n      actionAriaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n      // The label for the button, used as the aria-label and tooltip\n      actionLabel: string;\n      // An icon for the action button\n      actionIcon: ReactElement;\n    }\n  | {\n      onActionClick?: never;\n      actionAriaControls?: never;\n      actionAriaHasPopup?: never;\n      actionAriaExpanded?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n    }\n);\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasAction\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  hasAction: boolean;\n}>(({ odysseyDesignTokens, hasAction }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0,\n}));\n\nconst ActionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  minHeight: odysseyDesignTokens.Spacing6,\n  gap: odysseyDesignTokens.Spacing1,\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing3,\n  top: odysseyDesignTokens.Spacing3,\n}));\n\nconst ContentContainer = styled(\"div\")(() => ({\n  display: \"flex\",\n}));\n\nconst ChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  onActionClick,\n  onClick,\n  overline,\n  title,\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainer>\n        <Box>\n          {image && (\n            <ImageContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n              hasAction={Boolean(onActionClick)}\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          {children && (\n            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n              {children}\n            </ChildrenContainer>\n          )}\n        </Box>\n      </ContentContainer>\n    ),\n    [\n      image,\n      odysseyDesignTokens,\n      onActionClick,\n      overline,\n      title,\n      description,\n      children,\n    ],\n  );\n\n  return (\n    <MuiCard className=\"isClickable\">\n      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>\n\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {auxiliaryText && <Subordinate>{auxiliaryText}</Subordinate>}\n          {onActionClick && (\n            <Button\n              endIcon={actionIcon}\n              ariaLabel={actionLabel}\n              variant=\"floating\"\n              size=\"small\"\n              tooltipText={actionLabel}\n              ariaControls={actionAriaControls}\n              ariaExpanded={actionAriaExpanded}\n              ariaHasPopup={actionAriaHasPopup}\n              onClick={onActionClick}\n            />\n          )}\n        </ActionContainer>\n      )}\n    </MuiCard>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":"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"}
+{"version":3,"file":"AppTile.js","names":["memo","useMemo","styled","Button","useOdysseyDesignTokens","Heading5","Paragraph","Subordinate","Support","Box","jsx","_jsx","jsxs","_jsxs","APP_TILE_IMAGE_HEIGHT","APP_TILE_PLACEHOLDER_IMAGE_WIDTH","ImageContainer","shouldForwardProp","prop","odysseyDesignTokens","display","alignItems","maxHeight","marginBlockEnd","Spacing5","height","maxWidth","ActionContainer","minHeight","Spacing6","position","right","Spacing2","top","gap","Spacing1","zIndex","marginInlineEnd","ContentContainer","hasTopSection","paddingBlockStart","Spacing4","ChildrenContainer","marginBlockStart","Spacing3","LoadingTile","image","overline","title","description","children","_Card","className","_Skeleton","width","sx","variant","StyledMuiCard","boxShadow","overflow","left","opacity","DepthMedium","borderRadius","BorderRadiusOuter","transition","TransitionDurationMain","content","AppTile","actionAriaControls","actionAriaHasPopup","actionAriaExpanded","actionLabel","actionIcon","auxiliaryText","isLoading","onActionClick","onClick","tileContent","component","color","Boolean","endIcon","ariaLabel","size","tooltipText","ariaControls","ariaExpanded","ariaHasPopup","_CardActionArea","MemoizedAppTile","displayName"],"sources":["../../src/labs/AppTile.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  HTMLAttributes,\n} from \"react\";\nimport {\n  Card as MuiCard,\n  CardActionArea as MuiCardActionArea,\n  Skeleton as MuiSkeleton,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \".././Button\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \".././OdysseyDesignTokensContext\";\nimport { Heading5, Paragraph, Subordinate, Support } from \".././Typography\";\nimport { Box } from \".././Box\";\n\nexport const APP_TILE_IMAGE_HEIGHT = \"64px\";\nexport const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = \"64px\";\n\nexport type AppTileProps = {\n  // Text that appears in the upper right corner of the tile\n  auxiliaryText?: string;\n  // Arbitrary content to render underneath any other tile content\n  children?: ReactNode;\n  // A string description\n  description?: string;\n  // An image or icon at the top of the tile\n  image?: ReactElement;\n  // If true, the AppTile is loading\n  isLoading?: boolean;\n  // Event handler for when the user clicks the tile\n  onClick: MouseEventHandler;\n  // An 'eyebrow' of text above the title\n  overline?: string;\n  // A string for the tile title\n  title?: string;\n} & (\n  | {\n      // Event that fires when the user clicks the action button in the upper-right corner\n      // If this isn't set, the other action props can't be set either\n      onActionClick: MouseEventHandler;\n      // The ID of the element which the button controls (for instance, a drawer or dialog), if any.\n      actionAriaControls?: HTMLAttributes<HTMLElement>[\"aria-controls\"];\n      // Should be filled if the button controls a popup element such as a Drawer or Dialog\n      actionAriaHasPopup?: HTMLAttributes<HTMLElement>[\"aria-haspopup\"];\n      // Should be true if the button controls a popup element that is currently expanded. Should be synced to\n      // the state of the popup element\n      actionAriaExpanded?: HTMLAttributes<HTMLElement>[\"aria-expanded\"];\n      // The label for the button, used as the aria-label and tooltip\n      actionLabel: string;\n      // An icon for the action button\n      actionIcon: ReactElement;\n    }\n  | {\n      onActionClick?: never;\n      actionAriaControls?: never;\n      actionAriaHasPopup?: never;\n      actionAriaExpanded?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n    }\n);\n\ntype LoadingTileProps = {\n  children: boolean;\n  description: boolean;\n  hasTopSection: boolean;\n  image: boolean;\n  overline: boolean;\n  title: boolean;\n};\n\nconst ImageContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  maxHeight: APP_TILE_IMAGE_HEIGHT,\n  marginBlockEnd: odysseyDesignTokens.Spacing5,\n\n  [\"img\"]: {\n    height: APP_TILE_IMAGE_HEIGHT,\n    maxWidth: \"100%\",\n  },\n}));\n\nconst ActionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  minHeight: odysseyDesignTokens.Spacing6,\n  position: \"absolute\",\n  right: odysseyDesignTokens.Spacing2,\n  top: odysseyDesignTokens.Spacing2,\n  gap: odysseyDesignTokens.Spacing1,\n  zIndex: 1,\n\n  [\"& > .MuiTypography-root:last-child\"]: {\n    marginInlineEnd: odysseyDesignTokens.Spacing2,\n  },\n}));\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasTopSection\",\n})<{ odysseyDesignTokens: DesignTokens; hasTopSection: boolean }>(\n  ({ odysseyDesignTokens, hasTopSection }) => ({\n    alignItems: \"flex-start\",\n    paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,\n  }),\n);\n\nconst ChildrenContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  [\"&:not(:first-child)\"]: {\n    marginBlockStart: odysseyDesignTokens.Spacing3,\n  },\n}));\n\nconst LoadingTile = ({\n  image,\n  overline,\n  title,\n  description,\n  children,\n  hasTopSection,\n}: LoadingTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <MuiCard className=\"isClickable\">\n      <ContentContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        hasTopSection={hasTopSection}\n      >\n        {hasTopSection && (\n          <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n            <Subordinate>\n              <MuiSkeleton width={50} />\n            </Subordinate>\n          </ActionContainer>\n        )}\n        <Box sx={{ width: \"100%\" }}>\n          {image && (\n            <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton\n                height={APP_TILE_IMAGE_HEIGHT}\n                width={APP_TILE_PLACEHOLDER_IMAGE_WIDTH}\n                variant=\"rectangular\"\n              />\n            </ImageContainer>\n          )}\n\n          {overline && (\n            <Support>\n              <MuiSkeleton />\n            </Support>\n          )}\n          {title && (\n            <Heading5>\n              <MuiSkeleton />\n            </Heading5>\n          )}\n          {description && (\n            <Paragraph>\n              <MuiSkeleton />\n            </Paragraph>\n          )}\n          {children && (\n            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <MuiSkeleton\n                variant=\"rounded\"\n                width=\"100%\"\n                height={odysseyDesignTokens.Spacing6}\n              />\n            </ChildrenContainer>\n          )}\n        </Box>\n      </ContentContainer>\n    </MuiCard>\n  );\n};\n\nconst StyledMuiCard = styled(MuiCard, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  position: \"relative\",\n  boxShadow: \"none\",\n  overflow: \"unset\",\n\n  \"&::after\": {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    width: \"100%\",\n    height: \"100%\",\n    opacity: 0,\n    boxShadow: odysseyDesignTokens.DepthMedium,\n    borderRadius: odysseyDesignTokens.BorderRadiusOuter,\n    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,\n    zIndex: \"-1\",\n    content: '\"\"',\n  },\n\n  \"&:hover\": {\n    \"&::after\": {\n      opacity: 1,\n    },\n  },\n}));\n\nconst AppTile = ({\n  actionAriaControls,\n  actionAriaHasPopup,\n  actionAriaExpanded,\n  actionLabel,\n  actionIcon,\n  auxiliaryText,\n  children,\n  description,\n  image,\n  isLoading,\n  onActionClick,\n  onClick,\n  overline,\n  title,\n}: AppTileProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const tileContent = useMemo(\n    () => (\n      <ContentContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        hasTopSection={typeof onActionClick === \"function\" || !!auxiliaryText}\n      >\n        {image && (\n          <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>\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        {children && (\n          <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>\n            {children}\n          </ChildrenContainer>\n        )}\n      </ContentContainer>\n    ),\n    [\n      image,\n      auxiliaryText,\n      onActionClick,\n      odysseyDesignTokens,\n      overline,\n      title,\n      description,\n      children,\n    ],\n  );\n\n  return isLoading ? (\n    <LoadingTile\n      image={Boolean(image)}\n      overline={Boolean(overline)}\n      title={Boolean(title)}\n      description={Boolean(description)}\n      children={Boolean(children)}\n      hasTopSection={typeof onActionClick === \"function\" || !!auxiliaryText}\n    />\n  ) : (\n    <StyledMuiCard odysseyDesignTokens={odysseyDesignTokens}>\n      {(onActionClick || auxiliaryText) && (\n        <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n          {auxiliaryText && !isLoading && (\n            <Subordinate>{auxiliaryText}</Subordinate>\n          )}\n          {onActionClick && !isLoading && (\n            <Button\n              endIcon={actionIcon}\n              ariaLabel={actionLabel}\n              variant=\"floating\"\n              size=\"small\"\n              tooltipText={actionLabel}\n              ariaControls={actionAriaControls}\n              ariaExpanded={actionAriaExpanded}\n              ariaHasPopup={actionAriaHasPopup}\n              onClick={onActionClick}\n            />\n          )}\n        </ActionContainer>\n      )}\n\n      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>\n    </StyledMuiCard>\n  );\n};\n\nconst MemoizedAppTile = memo(AppTile);\nMemoizedAppTile.displayName = \"AppTile\";\n\nexport { MemoizedAppTile as AppTile };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAGEA,IAAI,EACJC,OAAO,QAGF,OAAO;AAMd,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAE5BC,MAAM;AAAA,SAGbC,sBAAsB;AAAA,SAEfC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO;AAAA,SACzCC,GAAG;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEZ,OAAO,MAAMC,qBAAqB,GAAG,MAAM;AAC3C,OAAO,MAAMC,gCAAgC,GAAG,MAAM;AAuDtD,MAAMC,cAAc,GAAGd,MAAM,CAAC,KAAK,EAAE;EACnCe,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAER,qBAAqB;EAChCS,cAAc,EAAEJ,mBAAmB,CAACK,QAAQ;EAE5C,CAAC,KAAK,GAAG;IACPC,MAAM,EAAEX,qBAAqB;IAC7BY,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGzB,MAAM,CAAC,KAAK,EAAE;EACpCe,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEE,UAAU,EAAE,QAAQ;EACpBD,OAAO,EAAE,MAAM;EACfQ,SAAS,EAAET,mBAAmB,CAACU,QAAQ;EACvCC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAEZ,mBAAmB,CAACa,QAAQ;EACnCC,GAAG,EAAEd,mBAAmB,CAACa,QAAQ;EACjCE,GAAG,EAAEf,mBAAmB,CAACgB,QAAQ;EACjCC,MAAM,EAAE,CAAC;EAET,CAAC,oCAAoC,GAAG;IACtCC,eAAe,EAAElB,mBAAmB,CAACa;EACvC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMM,gBAAgB,GAAGpC,MAAM,CAAC,KAAK,EAAE;EACrCe,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EAAEC,mBAAmB;EAAEoB;AAAc,CAAC,MAAM;EAC3ClB,UAAU,EAAE,YAAY;EACxBmB,iBAAiB,EAAED,aAAa,GAAGpB,mBAAmB,CAACsB,QAAQ,GAAG;AACpE,CAAC,CACH,CAAC;AAED,MAAMC,iBAAiB,GAAGxC,MAAM,CAAC,KAAK,EAAE;EACtCe,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtE,CAAC,qBAAqB,GAAG;IACvBwB,gBAAgB,EAAExB,mBAAmB,CAACyB;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,WAAW,GAAGA,CAAC;EACnBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRX;AACgB,CAAC,KAAK;EACtB,MAAMpB,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EAEpD,OACEO,IAAA,CAAAwC,KAAA;IAASC,SAAS,EAAC,aAAa;IAAAF,QAAA,EAC9BrC,KAAA,CAACyB,gBAAgB;MACfnB,mBAAmB,EAAEA,mBAAoB;MACzCoB,aAAa,EAAEA,aAAc;MAAAW,QAAA,GAE5BX,aAAa,IACZ5B,IAAA,CAACgB,eAAe;QAACR,mBAAmB,EAAEA,mBAAoB;QAAA+B,QAAA,EACxDvC,IAAA,CAACJ,WAAW;UAAA2C,QAAA,EACVvC,IAAA,CAAA0C,SAAA;YAAaC,KAAK,EAAE;UAAG,CAAE;QAAC,CACf;MAAC,CACC,CAClB,EACDzC,KAAA,CAACJ,GAAG;QAAC8C,EAAE,EAAE;UAAED,KAAK,EAAE;QAAO,CAAE;QAAAJ,QAAA,GACxBJ,KAAK,IACJnC,IAAA,CAACK,cAAc;UAACG,mBAAmB,EAAEA,mBAAoB;UAAA+B,QAAA,EACvDvC,IAAA,CAAA0C,SAAA;YACE5B,MAAM,EAAEX,qBAAsB;YAC9BwC,KAAK,EAAEvC,gCAAiC;YACxCyC,OAAO,EAAC;UAAa,CACtB;QAAC,CACY,CACjB,EAEAT,QAAQ,IACPpC,IAAA,CAACH,OAAO;UAAA0C,QAAA,EACNvC,IAAA,CAAA0C,SAAA,IAAc;QAAC,CACR,CACV,EACAL,KAAK,IACJrC,IAAA,CAACN,QAAQ;UAAA6C,QAAA,EACPvC,IAAA,CAAA0C,SAAA,IAAc;QAAC,CACP,CACX,EACAJ,WAAW,IACVtC,IAAA,CAACL,SAAS;UAAA4C,QAAA,EACRvC,IAAA,CAAA0C,SAAA,IAAc;QAAC,CACN,CACZ,EACAH,QAAQ,IACPvC,IAAA,CAAC+B,iBAAiB;UAACvB,mBAAmB,EAAEA,mBAAoB;UAAA+B,QAAA,EAC1DvC,IAAA,CAAA0C,SAAA;YACEG,OAAO,EAAC,SAAS;YACjBF,KAAK,EAAC,MAAM;YACZ7B,MAAM,EAAEN,mBAAmB,CAACU;UAAS,CACtC;QAAC,CACe,CACpB;MAAA,CACE,CAAC;IAAA,CACU;EAAC,CACZ,CAAC;AAEd,CAAC;AAED,MAAM4B,aAAa,GAAGvD,MAAM,CAAAiD,KAAA,EAAU;EACpClC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtEW,QAAQ,EAAE,UAAU;EACpB4B,SAAS,EAAE,MAAM;EACjBC,QAAQ,EAAE,OAAO;EAEjB,UAAU,EAAE;IACV7B,QAAQ,EAAE,UAAU;IACpBG,GAAG,EAAE,CAAC;IACN2B,IAAI,EAAE,CAAC;IACPN,KAAK,EAAE,MAAM;IACb7B,MAAM,EAAE,MAAM;IACdoC,OAAO,EAAE,CAAC;IACVH,SAAS,EAAEvC,mBAAmB,CAAC2C,WAAW;IAC1CC,YAAY,EAAE5C,mBAAmB,CAAC6C,iBAAiB;IACnDC,UAAU,EAAG,WAAU9C,mBAAmB,CAAC+C,sBAAuB,EAAC;IACnE9B,MAAM,EAAE,IAAI;IACZ+B,OAAO,EAAE;EACX,CAAC;EAED,SAAS,EAAE;IACT,UAAU,EAAE;MACVN,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC,CAAC;AAEH,MAAMO,OAAO,GAAGA,CAAC;EACfC,kBAAkB;EAClBC,kBAAkB;EAClBC,kBAAkB;EAClBC,WAAW;EACXC,UAAU;EACVC,aAAa;EACbxB,QAAQ;EACRD,WAAW;EACXH,KAAK;EACL6B,SAAS;EACTC,aAAa;EACbC,OAAO;EACP9B,QAAQ;EACRC;AACY,CAAC,KAAK;EAClB,MAAM7B,mBAAmB,GAAGf,sBAAsB,CAAC,CAAC;EAEpD,MAAM0E,WAAW,GAAG7E,OAAO,CACzB,MACEY,KAAA,CAACyB,gBAAgB;IACfnB,mBAAmB,EAAEA,mBAAoB;IACzCoB,aAAa,EAAE,OAAOqC,aAAa,KAAK,UAAU,IAAI,CAAC,CAACF,aAAc;IAAAxB,QAAA,GAErEJ,KAAK,IACJnC,IAAA,CAACK,cAAc;MAACG,mBAAmB,EAAEA,mBAAoB;MAAA+B,QAAA,EACtDJ;IAAK,CACQ,CACjB,EAEAC,QAAQ,IAAIpC,IAAA,CAACH,OAAO;MAACuE,SAAS,EAAC,KAAK;MAAA7B,QAAA,EAAEH;IAAQ,CAAU,CAAC,EACzDC,KAAK,IAAIrC,IAAA,CAACN,QAAQ;MAAC0E,SAAS,EAAC,KAAK;MAAA7B,QAAA,EAAEF;IAAK,CAAW,CAAC,EACrDC,WAAW,IACVtC,IAAA,CAACL,SAAS;MAAC0E,KAAK,EAAC,eAAe;MAAA9B,QAAA,EAAED;IAAW,CAAY,CAC1D,EACAC,QAAQ,IACPvC,IAAA,CAAC+B,iBAAiB;MAACvB,mBAAmB,EAAEA,mBAAoB;MAAA+B,QAAA,EACzDA;IAAQ,CACQ,CACpB;EAAA,CACe,CACnB,EACD,CACEJ,KAAK,EACL4B,aAAa,EACbE,aAAa,EACbzD,mBAAmB,EACnB4B,QAAQ,EACRC,KAAK,EACLC,WAAW,EACXC,QAAQ,CAEZ,CAAC;EAED,OAAOyB,SAAS,GACdhE,IAAA,CAACkC,WAAW;IACVC,KAAK,EAAEmC,OAAO,CAACnC,KAAK,CAAE;IACtBC,QAAQ,EAAEkC,OAAO,CAAClC,QAAQ,CAAE;IAC5BC,KAAK,EAAEiC,OAAO,CAACjC,KAAK,CAAE;IACtBC,WAAW,EAAEgC,OAAO,CAAChC,WAAW,CAAE;IAClCC,QAAQ,EAAE+B,OAAO,CAAC/B,QAAQ,CAAE;IAC5BX,aAAa,EAAE,OAAOqC,aAAa,KAAK,UAAU,IAAI,CAAC,CAACF;EAAc,CACvE,CAAC,GAEF7D,KAAA,CAAC4C,aAAa;IAACtC,mBAAmB,EAAEA,mBAAoB;IAAA+B,QAAA,GACrD,CAAC0B,aAAa,IAAIF,aAAa,KAC9B7D,KAAA,CAACc,eAAe;MAACR,mBAAmB,EAAEA,mBAAoB;MAAA+B,QAAA,GACvDwB,aAAa,IAAI,CAACC,SAAS,IAC1BhE,IAAA,CAACJ,WAAW;QAAA2C,QAAA,EAAEwB;MAAa,CAAc,CAC1C,EACAE,aAAa,IAAI,CAACD,SAAS,IAC1BhE,IAAA,CAACR,MAAM;QACL+E,OAAO,EAAET,UAAW;QACpBU,SAAS,EAAEX,WAAY;QACvBhB,OAAO,EAAC,UAAU;QAClB4B,IAAI,EAAC,OAAO;QACZC,WAAW,EAAEb,WAAY;QACzBc,YAAY,EAAEjB,kBAAmB;QACjCkB,YAAY,EAAEhB,kBAAmB;QACjCiB,YAAY,EAAElB,kBAAmB;QACjCO,OAAO,EAAED;MAAc,CACxB,CACF;IAAA,CACc,CAClB,EAEDjE,IAAA,CAAA8E,eAAA;MAAmBZ,OAAO,EAAEA,OAAQ;MAAA3B,QAAA,EAAE4B;IAAW,CAAoB,CAAC;EAAA,CACzD,CAChB;AACH,CAAC;AAED,MAAMY,eAAe,GAAG1F,IAAI,CAACoE,OAAO,CAAC;AACrCsB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAItB,OAAO"}

package/dist/labs/DataView/CardLayoutContent.js

@@ -18,7 +18,6 @@ import { CircularProgress } from "../../CircularProgress.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { RowActions } from "./RowActions.js";
 import { DataCard } from "./DataCard.js";
-import { DetailPanel } from "./DetailPanel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const StackContainer = styled("div", {
@@ -30,7 +29,7 @@ const StackContainer = styled("div", {
 }) => ({
   display: currentLayout === "list" ? "flex" : "grid",
   flexDirection: "column",
-  gap: odysseyDesignTokens.Spacing5,
+  columnGap: odysseyDesignTokens.Spacing5,
   ...(currentLayout === "grid" && {
     [`@media (max-width: 720px)`]: {
       gridTemplateColumns: "repeat(1, 1fr)"
@@ -103,7 +102,8 @@ const CardLayoutContent = ({
             title,
             description,
             image,
-            children
+            children,
+            variant
           } = cardLayoutOptions.itemProps(row);
           const currentIndex = index + (pagination.pageIndex - 1) * pagination.pageSize;
           return _jsx(DataCard, {
@@ -116,10 +116,8 @@ const CardLayoutContent = ({
             }),
             children: children,
             description: description,
-            detailPanel: cardLayoutOptions.renderDetailPanel ? _jsx(DetailPanel, {
-              row: row,
-              renderDetailPanel: cardLayoutOptions.renderDetailPanel
-            }) : undefined,
+            renderDetailPanel: cardLayoutOptions.renderDetailPanel,
+            row: row,
             image: image,
             menuButtonChildren: (cardLayoutOptions.rowActionMenuItems || hasRowReordering) && _jsx(RowActions, {
               row: row,
@@ -130,7 +128,8 @@ const CardLayoutContent = ({
               updateRowOrder: hasRowReordering && onReorderRows ? updateRowOrder : undefined
             }),
             overline: overline,
-            title: title
+            title: title,
+            variant: variant
           }, row.id);
         })
       })

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

@@ -1 +1 @@
-{"version":3,"file":"CardLayoutContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","DataCard","DetailPanel","jsx","_jsx","Fragment","_Fragment","StackContainer","shouldForwardProp","prop","odysseyDesignTokens","currentLayout","maxGridColumns","display","flexDirection","gap","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","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","map","index","overline","title","description","image","itemProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","detailPanel","renderDetailPanel","undefined","menuButtonChildren","rowActionMenuItems","rowIndex","MemoizedCardLayoutContent","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\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { RowActions } from \"./RowActions\";\nimport { DataCard } from \"./DataCard\";\nimport { CardLayout, CardLayoutProps, UniversalProps } from \"./componentTypes\";\nimport { DetailPanel } from \"./DetailPanel\";\n\nexport type CardLayoutContentProps = {\n  currentLayout: CardLayout;\n  data: MRT_RowData[];\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps[\"getRowId\"];\n  hasRowReordering: UniversalProps[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps[\"onReorderRows\"];\n  pagination: { 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<MRT_RowData>;\n      row: MRT_Row<MRT_RowData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (\n      table: MRT_TableInstance<MRT_RowData>,\n    ) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  cardLayoutOptions: CardLayoutProps;\n  totalRows: UniversalProps[\"totalRows\"];\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  gap: 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 = ({\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) => {\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    <StackContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      currentLayout={currentLayout}\n      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n    >\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            <>\n              {data.map((row: MRT_RowData, index: number) => {\n                const { overline, title, description, image, children } =\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] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    children={children}\n                    description={description}\n                    detailPanel={\n                      cardLayoutOptions.renderDetailPanel ? (\n                        <DetailPanel\n                          row={row}\n                          renderDetailPanel={\n                            cardLayoutOptions.renderDetailPanel\n                          }\n                        />\n                      ) : undefined\n                    }\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            cardLayoutOptions.rowActionMenuItems\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                  />\n                );\n              })}\n            </>\n          )}\n        </>\n      )}\n    </StackContainer>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(CardLayoutContent);\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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"}
+{"version":3,"file":"CardLayoutContent.js","names":["memo","useCallback","styled","Box","CircularProgress","useOdysseyDesignTokens","RowActions","DataCard","jsx","_jsx","Fragment","_Fragment","StackContainer","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","handleRowSelectionChange","row","Object","fromEntries","id","entries","filter","key","concat","updateRowOrder","children","length","map","index","overline","title","description","image","variant","itemProps","currentIndex","pageIndex","pageSize","Accessory","_Checkbox","checked","onChange","renderDetailPanel","menuButtonChildren","rowActionMenuItems","rowIndex","undefined","MemoizedCardLayoutContent","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\";\nimport { Checkbox as MuiCheckbox } from \"@mui/material\";\nimport { CircularProgress } from \"../../CircularProgress\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { RowActions } from \"./RowActions\";\nimport { DataCard } from \"./DataCard\";\nimport { CardLayout, CardLayoutProps, UniversalProps } from \"./componentTypes\";\n\nexport type CardLayoutContentProps = {\n  currentLayout: CardLayout;\n  data: MRT_RowData[];\n  draggingRow?: MRT_Row<MRT_RowData> | null;\n  emptyState: ReactNode;\n  getRowId: UniversalProps[\"getRowId\"];\n  hasRowReordering: UniversalProps[\"hasRowReordering\"];\n  hasRowSelection: UniversalProps[\"hasRowSelection\"];\n  isEmpty?: boolean;\n  isLoading: boolean;\n  isNoResults?: boolean;\n  isRowReorderingDisabled?: boolean;\n  onReorderRows: UniversalProps[\"onReorderRows\"];\n  pagination: { 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<MRT_RowData>;\n      row: MRT_Row<MRT_RowData>;\n      event: React.KeyboardEvent<HTMLButtonElement>;\n    }) => void;\n    handleDragHandleOnDragCapture: (\n      table: MRT_TableInstance<MRT_RowData>,\n    ) => void;\n    handleDragHandleOnDragEnd: (table: MRT_TableInstance<MRT_RowData>) => void;\n    resetDraggingAndHoveredRow: (table: MRT_TableInstance<MRT_RowData>) => void;\n    updateRowOrder: ({\n      rowId,\n      newRowIndex,\n    }: {\n      rowId: string;\n      newRowIndex: number;\n    }) => void;\n  };\n  rowSelection: MRT_RowSelectionState;\n  setRowSelection: Dispatch<SetStateAction<MRT_RowSelectionState>>;\n  cardLayoutOptions: CardLayoutProps;\n  totalRows: UniversalProps[\"totalRows\"];\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 = ({\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) => {\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    <StackContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      currentLayout={currentLayout}\n      maxGridColumns={cardLayoutOptions.maxGridColumns ?? 3}\n    >\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            <>\n              {data.map((row: MRT_RowData, index: number) => {\n                const {\n                  overline,\n                  title,\n                  description,\n                  image,\n                  children,\n                  variant,\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] ?? false}\n                            onChange={() => handleRowSelectionChange(row)}\n                          />\n                        </CheckboxContainer>\n                      )\n                    }\n                    children={children}\n                    description={description}\n                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}\n                    row={row}\n                    image={image}\n                    key={row.id}\n                    menuButtonChildren={\n                      (cardLayoutOptions.rowActionMenuItems ||\n                        hasRowReordering) && (\n                        <RowActions\n                          row={row}\n                          rowIndex={currentIndex}\n                          rowActionMenuItems={\n                            cardLayoutOptions.rowActionMenuItems\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            </>\n          )}\n        </>\n      )}\n    </StackContainer>\n  );\n};\n\nconst MemoizedCardLayoutContent = memo(CardLayoutContent);\nMemoizedCardLayoutContent.displayName = \"CardLayoutContent\";\n\nexport { MemoizedCardLayoutContent as CardLayoutContent };\n"],"mappings":"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"}