@availity/mui-card 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.7](https://github.com/Availity/element/compare/@availity/mui-card@0.2.6...@availity/mui-card@0.2.7) (2023-12-14)
+
 ## [0.2.6](https://github.com/Availity/element/compare/@availity/mui-card@0.2.5...@availity/mui-card@0.2.6) (2023-12-04)
 
 ### Dependency Updates

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare const CardContent: ({ children, ...rest }: CardContentProps) => JSX.Elem
 interface CardHeaderProps extends Omit<CardHeaderProps$1, 'avatar'> {
     children?: React.ReactNode;
 }
-declare const CardHeader: ({ ...rest }: CardHeaderProps) => JSX.Element;
+declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, ...rest }: CardHeaderProps) => JSX.Element;
 
 interface CardMediaProps extends CardMediaProps$1 {
     children?: React.ReactNode;

package/dist/index.js

@@ -71,13 +71,24 @@ var CardContent = ({ children, ...rest }) => {
 };
 
 // src/lib/CardHeader.tsx
+var import_styles = require("@mui/material/styles");
 var import_material5 = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var CardHeader = ({ ...rest }) => {
+var CardHeader = ({
+  titleTypographyProps,
+  subheaderTypographyProps,
+  ...rest
+}) => {
+  var _a, _b, _c, _d;
+  const theme = (0, import_styles.useTheme)();
+  const titleVariant = (_d = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.MuiCardHeader) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.titleTypographyProps) == null ? void 0 : _d.variant;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material5.CardHeader, {
     ...rest,
-    titleTypographyProps: { variant: "h6" },
-    subheaderTypographyProps: { variant: "subtitle2" }
+    titleTypographyProps: {
+      variant: titleVariant,
+      ...titleTypographyProps
+    },
+    subheaderTypographyProps: { variant: "subtitle2", ...subheaderTypographyProps }
   });
 };
 

package/dist/index.mjs

@@ -40,13 +40,24 @@ var CardContent = ({ children, ...rest }) => {
 };
 
 // src/lib/CardHeader.tsx
+import { useTheme } from "@mui/material/styles";
 import { CardHeader as MuiCardHeader } from "@mui/material";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var CardHeader = ({ ...rest }) => {
+var CardHeader = ({
+  titleTypographyProps,
+  subheaderTypographyProps,
+  ...rest
+}) => {
+  var _a, _b, _c, _d;
+  const theme = useTheme();
+  const titleVariant = (_d = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.MuiCardHeader) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.titleTypographyProps) == null ? void 0 : _d.variant;
   return /* @__PURE__ */ jsx5(MuiCardHeader, {
     ...rest,
-    titleTypographyProps: { variant: "h6" },
-    subheaderTypographyProps: { variant: "subtitle2" }
+    titleTypographyProps: {
+      variant: titleVariant,
+      ...titleTypographyProps
+    },
+    subheaderTypographyProps: { variant: "subtitle2", ...subheaderTypographyProps }
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-card",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Availity MUI Card Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/CardHeader.tsx

@@ -1,15 +1,31 @@
+import { useTheme } from '@mui/material/styles';
 import { CardHeader as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material';
 
 export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'avatar'> {
   children?: React.ReactNode;
 }
 
-export const CardHeader = ({ ...rest }: CardHeaderProps): JSX.Element => {
+export const CardHeader = ({
+  titleTypographyProps,
+  subheaderTypographyProps,
+  ...rest
+}: CardHeaderProps): JSX.Element => {
+  const theme = useTheme();
+
+  /**
+   * This is ugly, but it allows us to define a default variant while retaining the rest of the
+   * titleTypographyProps that the user passed.
+   */
+  const titleVariant = theme.components?.MuiCardHeader?.defaultProps?.titleTypographyProps?.variant;
+
   return (
     <MuiCardHeader
       {...rest}
-      titleTypographyProps={{ variant: 'h6' }}
-      subheaderTypographyProps={{ variant: 'subtitle2' }}
+      titleTypographyProps={{
+        variant: titleVariant,
+        ...titleTypographyProps,
+      }}
+      subheaderTypographyProps={{ variant: 'subtitle2', ...subheaderTypographyProps }}
     />
   );
 };