@jobber/components 6.89.0 → 6.90.0

package/dist/Card/CardClickable.d.ts

@@ -4,10 +4,12 @@ interface ClickableCardProps {
     onClick(event: React.MouseEvent<HTMLElement>): void;
     readonly className: string;
     readonly children: ReactNode | ReactNode[];
+    readonly UNSAFE_className?: string;
+    readonly UNSAFE_style?: React.CSSProperties;
 }
 /**
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-export declare function CardClickable({ className, onClick, children, }: ClickableCardProps): React.JSX.Element;
+export declare function CardClickable({ className, onClick, children, UNSAFE_style, }: ClickableCardProps): React.JSX.Element;
 export {};

package/dist/Card/CardHeader.d.ts

@@ -4,4 +4,4 @@ import type { CardProps } from "./types";
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-export declare function CardHeader({ title, header, }: Pick<CardProps, "title" | "header">): React.JSX.Element;
+export declare function CardHeader({ title, header, UNSAFE_className, UNSAFE_style, }: Pick<CardProps, "title" | "header" | "UNSAFE_className" | "UNSAFE_style">): React.JSX.Element;

package/dist/Card/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type colors from "./cardcolors.module.css";
 import { type ButtonProps } from "../Button";
 import { type MenuProps } from "../Menu";
@@ -31,6 +31,24 @@ export interface CardProps {
      */
     readonly header?: string | HeaderActionProps | ReactElement;
     readonly elevation?: elevationProp;
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        header?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        header?: CSSProperties;
+    };
 }
 export interface CardHeaderProps {
     readonly children: ReactNode;

package/dist/Card-cjs.js

@@ -18,9 +18,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = React.useRef();
-    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -43,7 +43,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React.isValidElement(heading))
         return React.createElement(React.Fragment, null, heading);
@@ -51,7 +51,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React.createElement("div", { className: styles.header },
+        return (React.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React.createElement(Heading.Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -107,30 +107,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(CardHeader, { title: title, header: header }),
+        React.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React.createElement("div", { className: className }, content);
+    return (React.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/dist/Card-es.js

@@ -16,9 +16,9 @@ const SPACEBAR_KEY = " ";
  * This is only intended to be used in the Card component.
  * Please use `<Card onClick={onClick} />` component instead.
  */
-function CardClickable({ className, onClick, children, }) {
+function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
     const cardRef = useRef();
-    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
+    return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;
     }
@@ -41,7 +41,7 @@ function CardClickable({ className, onClick, children, }) {
  * Intended to be used in the Card component.
  * Use `<Card header={header} />` component instead.
  */
-function CardHeader({ title, header, }) {
+function CardHeader({ title, header, UNSAFE_className = {}, UNSAFE_style = {}, }) {
     const heading = title || header;
     if (React__default.isValidElement(heading))
         return React__default.createElement(React__default.Fragment, null, heading);
@@ -49,7 +49,7 @@ function CardHeader({ title, header, }) {
         const titleString = typeof heading === "string"
             ? heading
             : heading.title;
-        return (React__default.createElement("div", { className: styles.header },
+        return (React__default.createElement("div", { className: classnames(styles.header, UNSAFE_className.header), style: UNSAFE_style.header },
             titleString && React__default.createElement(Heading, { level: 2 }, titleString),
             typeof heading === "object" &&
                 renderHeaderAction(heading === null || heading === void 0 ? void 0 : heading.action)));
@@ -105,30 +105,31 @@ function CardHeaderCompoundComponent({ children }) {
 function CardBodyCompoundComponent({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);
 }
-function renderCardContent(children, title, header) {
+function renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style) {
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CardHeader, { title: title, header: header }),
+        React__default.createElement(CardHeader, { title: title, header: header, UNSAFE_className: { header: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header }, UNSAFE_style: { header: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header } }),
         children));
 }
-function renderCardWrapper(className, content, onClick, url, external) {
+function renderCardWrapper(className, content, onClick, url, external, UNSAFE_className, UNSAFE_style) {
+    const combinedClassName = classnames(className, UNSAFE_className);
     if (onClick) {
-        return (React__default.createElement(CardClickable, { className: className, onClick: onClick }, content));
+        return (React__default.createElement(CardClickable, { className: combinedClassName, onClick: onClick, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }, content));
     }
     if (url) {
-        return (React__default.createElement("a", Object.assign({ className: className, href: url }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
+        return (React__default.createElement("a", Object.assign({ className: combinedClassName, href: url, style: UNSAFE_style }, (external && { target: "_blank", rel: "noopener noreferrer" })), content));
     }
-    return React__default.createElement("div", { className: className }, content);
+    return (React__default.createElement("div", { className: combinedClassName, style: UNSAFE_style }, content));
 }
 function Card(props) {
-    const { accent, header, children, title, elevation = "none", onClick, url, external, } = props;
+    const { accent, header, children, title, elevation = "none", onClick, url, external, UNSAFE_className = {}, UNSAFE_style = {}, } = props;
     const className = classnames(styles.card, accent && styles.accent, (url || onClick) && styles.clickable, accent && colors[accent], elevation !== "none" && elevations[`${elevation}Elevation`]);
     const isUsingCompoundPattern = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) &&
         (child.type === CardHeaderCompoundComponent ||
             child.type === CardBodyCompoundComponent));
     const content = isUsingCompoundPattern
         ? children
-        : renderCardContent(children, title, header);
-    return renderCardWrapper(className, content, onClick, url, external);
+        : renderCardContent(children, title, header, UNSAFE_className, UNSAFE_style);
+    return renderCardWrapper(className, content, onClick, url, external, UNSAFE_className.container, UNSAFE_style.container);
 }
 Card.Header = CardHeaderCompoundComponent;
 Card.Body = CardBodyCompoundComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.89.0",
+  "version": "6.90.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -543,5 +543,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "78ab585f85c917e6a1fff619fabda94bba781125"
+  "gitHead": "829339495fcb97802380dc109df4c67106963812"
 }