@czi-sds/components 22.3.1 → 22.3.2

package/dist/index.cjs.d.ts

@@ -33,7 +33,7 @@ import { LinkProps as LinkProps$1 } from "@mui/material";
 import { TabProps as RawTabProps } from "@mui/material";
 import { TabsProps as RawTabsProps } from "@mui/material";
 import React from "react";
-import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType, ElementType } from "react";
+import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, HTMLAttributeAnchorTarget, ComponentType, ElementType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
@@ -780,6 +780,7 @@ type ButtonSize = "small" | "medium" | "large";
 interface BaseButtonProps extends RawButtonProps {
     children?: React.ReactNode;
     isAllCaps?: boolean;
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SdsIconButtonProps extends BaseButtonProps {
     sdsStyle: "icon";
@@ -1140,7 +1141,7 @@ interface BaseContentCardProps extends CardProps {
     decorativeBorder?: boolean;
     children?: React.ReactNode;
     clickableCard?: boolean;
-    clickableCardProps?: ButtonProps$0;
+    clickableCardProps?: Partial<SdsMinimalButtonProps>;
     buttonsPosition?: "left" | "right";
     classes?: {
         cardPaper?: string;

package/dist/index.cjs.js

@@ -6939,7 +6939,7 @@ var StyledCardActionArea = styled__default.default(Button, {
         : visualElementType === "image"
             ? "column"
             : "row";
-    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      overflow: scroll;\n      text-align: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n      }\n    ");
+    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      overflow: auto;\n      text-align: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n      }\n    ");
 });
 var StyledIconMediaWrapper = styled__default.default("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6954,7 +6954,7 @@ var StyledCardContent = styled__default.default("div", {
 })(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
     var spaces = getSpaces(props);
-    return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "])), boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+    return react.css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "])), boundingBox && react.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 var StyledContentCardBody = styled__default.default(material.CardContent, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -7211,7 +7211,11 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
                         } }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
                             cardActions: cardActions,
                         }) })] })] }));
-    return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({ sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton }, clickableCardProps, { children: cardInnerContent }))) : (cardInnerContent) })));
+    return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({}, clickableCardProps, { 
+            // (masoudmanson): The following props are for internal use only and should not be user editable.
+            // To prevent users from overriding them, we use the spread operator to pass user provided props
+            // to the StyledCardActionArea component on top while hardcoding the rest after it.
+            sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
 });
 
 var DialogContext = React.createContext({ sdsSize: "m" });

package/dist/index.esm.d.ts

@@ -33,7 +33,7 @@ import { LinkProps as LinkProps$1 } from "@mui/material";
 import { TabProps as RawTabProps } from "@mui/material";
 import { TabsProps as RawTabsProps } from "@mui/material";
 import React from "react";
-import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType, ElementType } from "react";
+import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, HTMLAttributeAnchorTarget, ComponentType, ElementType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
@@ -780,6 +780,7 @@ type ButtonSize = "small" | "medium" | "large";
 interface BaseButtonProps extends RawButtonProps {
     children?: React.ReactNode;
     isAllCaps?: boolean;
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SdsIconButtonProps extends BaseButtonProps {
     sdsStyle: "icon";
@@ -1140,7 +1141,7 @@ interface BaseContentCardProps extends CardProps {
     decorativeBorder?: boolean;
     children?: React.ReactNode;
     clickableCard?: boolean;
-    clickableCardProps?: ButtonProps$0;
+    clickableCardProps?: Partial<SdsMinimalButtonProps>;
     buttonsPosition?: "left" | "right";
     classes?: {
         cardPaper?: string;

package/dist/index.esm.js

@@ -6916,7 +6916,7 @@ var StyledCardActionArea = styled$2(Button, {
         : visualElementType === "image"
             ? "column"
             : "row";
-    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      overflow: scroll;\n      text-align: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n      }\n    ");
+    return "\n      display: flex;\n      flex-direction: ".concat(flexDirection, ";\n      align-items: unset;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      overflow: auto;\n      text-align: unset;\n\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, ";\n\n      &:hover,\n      &:active {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n        box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, " !important;\n      }\n    ");
 });
 var StyledIconMediaWrapper = styled$2("div", {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -6931,7 +6931,7 @@ var StyledCardContent = styled$2("div", {
 })(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
     var spaces = getSpaces(props);
-    return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n\n      ", "\n    "])), boundingBox && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
+    return css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "], ["\n      display: flex;\n      flex-direction: column;\n      min-width: 100px;\n      width: 100%;\n      height: 100%;\n\n      ", "\n    "])), boundingBox && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n        padding: ", "px;\n      "], ["\n        padding: ", "px;\n      "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
 });
 var StyledContentCardBody = styled$2(CardContent, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
@@ -7188,7 +7188,11 @@ var ContentCard = React__default.forwardRef(function (props, ref) {
                         } }), jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
                             cardActions: cardActions,
                         }) })] })] }));
-    return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsx(StyledCardActionArea, __assign({ sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton }, clickableCardProps, { children: cardInnerContent }))) : (cardInnerContent) })));
+    return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsx(StyledCardActionArea, __assign({}, clickableCardProps, { 
+            // (masoudmanson): The following props are for internal use only and should not be user editable.
+            // To prevent users from overriding them, we use the spread operator to pass user provided props
+            // to the StyledCardActionArea component on top while hardcoding the rest after it.
+            sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
 });
 
 var DialogContext = createContext({ sdsSize: "m" });