@coveord/plasma-mantine 52.14.1 → 52.16.0

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js

@@ -0,0 +1,45 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuestionSize16Px } from "@coveord/plasma-react-icons";
+import { Anchor, Tooltip, useComponentDefaultProps } from "@mantine/core";
+import { useStyles } from "./HeaderDocAnchor.styles";
+var defaultProps = {
+    position: "right",
+    children: /*#__PURE__*/ _jsx(QuestionSize16Px, {
+        height: 16
+    })
+};
+export var HeaderDocAnchor = function(props) {
+    var _useComponentDefaultProps = useComponentDefaultProps("PlasmaHeaderActions", defaultProps, props), classNames = _useComponentDefaultProps.classNames, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, className = _useComponentDefaultProps.className, children = _useComponentDefaultProps.children, docLink = _useComponentDefaultProps.href, docLinkTooltipLabel = _useComponentDefaultProps.label, others = _object_without_properties(_useComponentDefaultProps, [
+        "classNames",
+        "styles",
+        "unstyled",
+        "className",
+        "children",
+        "href",
+        "label"
+    ]);
+    var _useStyles = useStyles({}, {
+        name: "PlasmaHeaderActions",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
+    return /*#__PURE__*/ _jsx(Tooltip, _object_spread_props(_object_spread({
+        className: cx(className, classes.tooltip),
+        label: docLinkTooltipLabel,
+        disabled: !docLinkTooltipLabel
+    }, others), {
+        children: /*#__PURE__*/ _jsx(Anchor, {
+            className: classes.anchor,
+            inline: true,
+            href: docLink,
+            target: "_blank",
+            children: children
+        })
+    }));
+};
+
+//# sourceMappingURL=HeaderDocAnchor.js.map

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\nimport {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';\n\ntype HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n    position: 'right',\n    children: <QuestionSize16Px height={16} />,\n};\n\nexport interface HeaderDocAnchorProps\n    extends Pick<TooltipProps, 'position'>,\n        DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n    /**\n     * React component to add the tooltip and anchor on\n     */\n    children?: ReactNode;\n}\n\nexport const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {\n    const {\n        classNames,\n        styles,\n        unstyled,\n        className,\n        children,\n        href: docLink,\n        label: docLinkTooltipLabel,\n        ...others\n    } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);\n    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});\n    return (\n        <Tooltip\n            className={cx(className, classes.tooltip)}\n            label={docLinkTooltipLabel}\n            disabled={!docLinkTooltipLabel}\n            {...others}\n        >\n            <Anchor className={classes.anchor} inline href={docLink} target=\"_blank\">\n                {children}\n            </Anchor>\n        </Tooltip>\n    );\n};\n"],"names":["QuestionSize16Px","Anchor","Tooltip","useComponentDefaultProps","useStyles","defaultProps","position","children","height","HeaderDocAnchor","props","classNames","styles","unstyled","className","href","docLink","label","docLinkTooltipLabel","others","name","classes","cx","tooltip","disabled","anchor","inline","target"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAA2BC,OAAO,EAAgBC,wBAAwB,QAAO,gBAAgB;AAE/G,SAAqCC,SAAS,QAAO,2BAA2B;AAIhF,IAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,KAACP;QAAiBQ,QAAQ;;AACxC;AAoBA,OAAO,IAAMC,kBAA2D,SAACC;IACrE,IASIP,4BAAAA,yBAAyB,uBAAuBE,cAAcK,QAR9DC,aAQAR,0BARAQ,YACAC,SAOAT,0BAPAS,QACAC,WAMAV,0BANAU,UACAC,YAKAX,0BALAW,WACAP,WAIAJ,0BAJAI,UACAQ,AAAMC,UAGNb,0BAHAY,MACAE,AAAOC,sBAEPf,0BAFAc,OACGE,oCACHhB;QARAQ;QACAC;QACAC;QACAC;QACAP;QACAQ;QACAE;;IAGJ,IAAsBb,aAAAA,UAAU,CAAC,GAAG;QAACgB,MAAM;QAAuBT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAvFQ,UAAejB,WAAfiB,SAASC,KAAMlB,WAANkB;IAChB,qBACI,KAACpB;QACGY,WAAWQ,GAAGR,WAAWO,QAAQE,OAAO;QACxCN,OAAOC;QACPM,UAAU,CAACN;OACPC;kBAEJ,cAAA,KAAClB;YAAOa,WAAWO,QAAQI,MAAM;YAAEC,MAAM;YAACX,MAAMC;YAASW,QAAO;sBAC3DpB;;;AAIjB,EAAE"}

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.d.ts

@@ -0,0 +1,11 @@
+export interface HeaderDocAnchorStylesParams {
+}
+export declare const useStyles: (params: HeaderDocAnchorStylesParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        tooltip: string;
+        anchor: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+//# sourceMappingURL=HeaderDocAnchor.styles.d.ts.map

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderDocAnchor.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,2BAA2B;CAAG;AAE/C,eAAO,MAAM,SAAS;;;;;;;CAMnB,CAAC"}

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js

@@ -0,0 +1,14 @@
+import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
+import { createStyles } from "@mantine/core";
+export var useStyles = createStyles(function(theme, param) {
+    var ref = _object_destructuring_empty(param);
+    return {
+        tooltip: {},
+        anchor: {
+            marginLeft: theme.spacing.xs,
+            verticalAlign: "middle"
+        }
+    };
+});
+
+//# sourceMappingURL=HeaderDocAnchor.styles.js.map

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface HeaderDocAnchorStylesParams {}\n\nexport const useStyles = createStyles((theme, {}: HeaderDocAnchorStylesParams) => ({\n    tooltip: {},\n    anchor: {\n        marginLeft: theme.spacing.xs,\n        verticalAlign: 'middle',\n    },\n}));\n"],"names":["createStyles","useStyles","theme","tooltip","anchor","marginLeft","spacing","xs","verticalAlign"],"mappings":";AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,OAAO,IAAMC,YAAYD,aAAa,SAACE;QAAO;WAAqC;QAC/EC,SAAS,CAAC;QACVC,QAAQ;YACJC,YAAYH,MAAMI,OAAO,CAACC,EAAE;YAC5BC,eAAe;QACnB;IACJ;GAAI"}

package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1arn2xu"
+    class="mantine-Group-root mantine-PlasmaHeader-root mantine-15aa8um"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"
@@ -12,38 +12,38 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Three
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-m67b81"
+        class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
       >
         Title
       </h1>
       <div
-        class="mantine-Text-root mantine-1w25z6f"
+        class="mantine-Text-root mantine-PlasmaHeader-description mantine-52dv7d"
       />
     </div>
   </div>

package/dist/esm/components/prompt/Prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAW,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AA8B5C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC;CACvB;AACD,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,MAAM,EAAE,OAAO,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,UAqBpB,CAAC"}
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAW,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AA+B5C,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC;CACvB;AACD,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,MAAM,EAAE,OAAO,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,UAqBpB,CAAC"}

package/dist/esm/components/prompt/Prompt.js

@@ -23,7 +23,8 @@ var useStyles = createStyles(function(theme) {
             width: "100%",
             borderBottom: "1px solid ".concat(theme.colors.gray[3]),
             fontSize: theme.headings.sizes.h3.fontSize,
-            lineHeight: theme.headings.sizes.h3.lineHeight
+            lineHeight: theme.headings.sizes.h3.lineHeight,
+            overflowWrap: "anywhere"
         },
         success: {
             backgroundColor: theme.colors.lime[6],

package/dist/esm/components/prompt/Prompt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => ({\n    body: {\n        padding: 0,\n    },\n    modalType: {overflow: 'hidden', width: 550},\n    innerBody: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl} ${theme.spacing.lg}`,\n    },\n    header: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl}`,\n        width: '100%',\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n        fontSize: theme.headings.sizes.h3.fontSize,\n        lineHeight: theme.headings.sizes.h3.lineHeight,\n    },\n    success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},\n    warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},\n    critical: {\n        backgroundColor: theme.colors.red[6],\n        color: color.primary.pureWhite,\n    },\n    info: {backgroundColor: theme.colors.navy[5], color: color.primary.pureWhite},\n    whiteClose: {color: color.primary.pureWhite, '&:hover': {backgroundColor: 'transparent'}},\n    title: {\n        color: color.primary.pureWhite,\n    },\n}));\n\nexport interface PromptProps extends ModalProps {\n    /**\n     * Controls prompt appearance\n     *\n     * @default \"info\"\n     */\n    variant?: 'success' | 'warning' | 'critical' | 'info';\n    children: ReactNode;\n}\ninterface PromptType {\n    (props: PromptProps): ReactElement;\n    Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {\n    const {classes, cx} = useStyles();\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n\n    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n    const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n    const classNames = {\n        header: cx(classes.header, classes[variant]),\n        close: classes.whiteClose,\n        body: classes.body,\n        modal: classes.modalType,\n        title: classes.title,\n    };\n\n    return (\n        <Modal variant=\"prompt\" padding={0} classNames={classNames} size={'sm'} {...otherProps}>\n            <div className={classes.innerBody}>{otherChildren}</div>\n            {footer}\n        </Modal>\n    );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["color","createStyles","Modal","Children","PromptFooter","useStyles","theme","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h3","lineHeight","success","backgroundColor","lime","primary","pureWhite","warning","yellow","critical","red","info","navy","whiteClose","title","Prompt","children","variant","otherProps","classes","cx","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","classNames","close","modal","size","div","className","Footer"],"mappings":";;;;AAAA,SAAQA,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,YAAY,EAAEC,KAAK,QAAmB,gBAAgB;AAC9D,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,IAAMC,YAAYJ,aAAa,SAACK;WAAW;QACvCC,MAAM;YACFC,SAAS;QACb;QACAC,WAAW;YAACC,UAAU;YAAUC,OAAO;QAAG;QAC1CC,WAAW;YACPJ,SAAS,AAAC,GAAsBF,OAApBA,MAAMO,OAAO,CAACC,EAAE,EAAC,KAAuBR,OAApBA,MAAMO,OAAO,CAACE,EAAE,EAAC,KAAoB,OAAjBT,MAAMO,OAAO,CAACG,EAAE;QACxE;QACAC,QAAQ;YACJT,SAAS,AAAC,GAAsBF,OAApBA,MAAMO,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBR,MAAMO,OAAO,CAACE,EAAE;YAChDJ,OAAO;YACPO,cAAc,AAAC,aAAiC,OAArBZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/CC,UAAUf,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACH,QAAQ;YAC1CI,YAAYnB,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACC,UAAU;QAClD;QACAC,SAAS;YAACC,iBAAiBrB,MAAMa,MAAM,CAACS,IAAI,CAAC,EAAE;YAAE5B,OAAOA,MAAM6B,OAAO,CAACC,SAAS;QAAA;QAC/EC,SAAS;YAACJ,iBAAiBrB,MAAMa,MAAM,CAACa,MAAM,CAAC,EAAE;YAAEhC,OAAOA,MAAM6B,OAAO,CAACC,SAAS;QAAA;QACjFG,UAAU;YACNN,iBAAiBrB,MAAMa,MAAM,CAACe,GAAG,CAAC,EAAE;YACpClC,OAAOA,MAAM6B,OAAO,CAACC,SAAS;QAClC;QACAK,MAAM;YAACR,iBAAiBrB,MAAMa,MAAM,CAACiB,IAAI,CAAC,EAAE;YAAEpC,OAAOA,MAAM6B,OAAO,CAACC,SAAS;QAAA;QAC5EO,YAAY;YAACrC,OAAOA,MAAM6B,OAAO,CAACC,SAAS;YAAE,WAAW;gBAACH,iBAAiB;YAAa;QAAC;QACxFW,OAAO;YACHtC,OAAOA,MAAM6B,OAAO,CAACC,SAAS;QAClC;IACJ;;AAgBA,OAAO,IAAMS,SAAqB;QAAEC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA/BF;QAAUC;;IAC1C,IAAsBpC,aAAAA,aAAfsC,UAAetC,WAAfsC,SAASC,KAAMvC,WAANuC;IAChB,IAAMC,oBAAoB1C,SAAS2C,OAAO,CAACN;IAE3C,IAAMO,gBAAgBF,kBAAkBG,MAAM,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAK9C;;IACzE,IAAM+C,SAASN,kBAAkBO,IAAI,CAAC,SAACH;eAAUA,MAAMC,IAAI,KAAK9C;;IAEhE,IAAMiD,aAAa;QACfpC,QAAQ2B,GAAGD,QAAQ1B,MAAM,EAAE0B,OAAO,CAACF,QAAQ;QAC3Ca,OAAOX,QAAQN,UAAU;QACzB9B,MAAMoC,QAAQpC,IAAI;QAClBgD,OAAOZ,QAAQlC,SAAS;QACxB6B,OAAOK,QAAQL,KAAK;IACxB;IAEA,qBACI,MAACpC;QAAMuC,SAAQ;QAASjC,SAAS;QAAG6C,YAAYA;QAAYG,MAAM;OAAUd;;0BACxE,KAACe;gBAAIC,WAAWf,QAAQ/B,SAAS;0BAAGmC;;YACnCI;;;AAGb,EAAE;AAEFZ,OAAOoB,MAAM,GAAGvD"}
+{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {color} from '@coveord/plasma-tokens';\nimport {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => ({\n    body: {\n        padding: 0,\n    },\n    modalType: {overflow: 'hidden', width: 550},\n    innerBody: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl} ${theme.spacing.lg}`,\n    },\n    header: {\n        padding: `${theme.spacing.md} ${theme.spacing.xl}`,\n        width: '100%',\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n        fontSize: theme.headings.sizes.h3.fontSize,\n        lineHeight: theme.headings.sizes.h3.lineHeight,\n        overflowWrap: 'anywhere',\n    },\n    success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},\n    warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},\n    critical: {\n        backgroundColor: theme.colors.red[6],\n        color: color.primary.pureWhite,\n    },\n    info: {backgroundColor: theme.colors.navy[5], color: color.primary.pureWhite},\n    whiteClose: {color: color.primary.pureWhite, '&:hover': {backgroundColor: 'transparent'}},\n    title: {\n        color: color.primary.pureWhite,\n    },\n}));\n\nexport interface PromptProps extends ModalProps {\n    /**\n     * Controls prompt appearance\n     *\n     * @default \"info\"\n     */\n    variant?: 'success' | 'warning' | 'critical' | 'info';\n    children: ReactNode;\n}\ninterface PromptType {\n    (props: PromptProps): ReactElement;\n    Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {\n    const {classes, cx} = useStyles();\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n\n    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n    const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n    const classNames = {\n        header: cx(classes.header, classes[variant]),\n        close: classes.whiteClose,\n        body: classes.body,\n        modal: classes.modalType,\n        title: classes.title,\n    };\n\n    return (\n        <Modal variant=\"prompt\" padding={0} classNames={classNames} size={'sm'} {...otherProps}>\n            <div className={classes.innerBody}>{otherChildren}</div>\n            {footer}\n        </Modal>\n    );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["color","createStyles","Modal","Children","PromptFooter","useStyles","theme","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h3","lineHeight","overflowWrap","success","backgroundColor","lime","primary","pureWhite","warning","yellow","critical","red","info","navy","whiteClose","title","Prompt","children","variant","otherProps","classes","cx","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","classNames","close","modal","size","div","className","Footer"],"mappings":";;;;AAAA,SAAQA,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,YAAY,EAAEC,KAAK,QAAmB,gBAAgB;AAC9D,SAAQC,QAAQ,QAAgC,QAAQ;AACxD,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,IAAMC,YAAYJ,aAAa,SAACK;WAAW;QACvCC,MAAM;YACFC,SAAS;QACb;QACAC,WAAW;YAACC,UAAU;YAAUC,OAAO;QAAG;QAC1CC,WAAW;YACPJ,SAAS,AAAC,GAAsBF,OAApBA,MAAMO,OAAO,CAACC,EAAE,EAAC,KAAuBR,OAApBA,MAAMO,OAAO,CAACE,EAAE,EAAC,KAAoB,OAAjBT,MAAMO,OAAO,CAACG,EAAE;QACxE;QACAC,QAAQ;YACJT,SAAS,AAAC,GAAsBF,OAApBA,MAAMO,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBR,MAAMO,OAAO,CAACE,EAAE;YAChDJ,OAAO;YACPO,cAAc,AAAC,aAAiC,OAArBZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/CC,UAAUf,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACH,QAAQ;YAC1CI,YAAYnB,MAAMgB,QAAQ,CAACC,KAAK,CAACC,EAAE,CAACC,UAAU;YAC9CC,cAAc;QAClB;QACAC,SAAS;YAACC,iBAAiBtB,MAAMa,MAAM,CAACU,IAAI,CAAC,EAAE;YAAE7B,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QAC/EC,SAAS;YAACJ,iBAAiBtB,MAAMa,MAAM,CAACc,MAAM,CAAC,EAAE;YAAEjC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QACjFG,UAAU;YACNN,iBAAiBtB,MAAMa,MAAM,CAACgB,GAAG,CAAC,EAAE;YACpCnC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAClC;QACAK,MAAM;YAACR,iBAAiBtB,MAAMa,MAAM,CAACkB,IAAI,CAAC,EAAE;YAAErC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAAA;QAC5EO,YAAY;YAACtC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;YAAE,WAAW;gBAACH,iBAAiB;YAAa;QAAC;QACxFW,OAAO;YACHvC,OAAOA,MAAM8B,OAAO,CAACC,SAAS;QAClC;IACJ;;AAgBA,OAAO,IAAMS,SAAqB;QAAEC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA/BF;QAAUC;;IAC1C,IAAsBrC,aAAAA,aAAfuC,UAAevC,WAAfuC,SAASC,KAAMxC,WAANwC;IAChB,IAAMC,oBAAoB3C,SAAS4C,OAAO,CAACN;IAE3C,IAAMO,gBAAgBF,kBAAkBG,MAAM,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAK/C;;IACzE,IAAMgD,SAASN,kBAAkBO,IAAI,CAAC,SAACH;eAAUA,MAAMC,IAAI,KAAK/C;;IAEhE,IAAMkD,aAAa;QACfrC,QAAQ4B,GAAGD,QAAQ3B,MAAM,EAAE2B,OAAO,CAACF,QAAQ;QAC3Ca,OAAOX,QAAQN,UAAU;QACzB/B,MAAMqC,QAAQrC,IAAI;QAClBiD,OAAOZ,QAAQnC,SAAS;QACxB8B,OAAOK,QAAQL,KAAK;IACxB;IAEA,qBACI,MAACrC;QAAMwC,SAAQ;QAASlC,SAAS;QAAG8C,YAAYA;QAAYG,MAAM;OAAUd;;0BACxE,KAACe;gBAAIC,WAAWf,QAAQhC,SAAS;0BAAGoC;;YACnCI;;;AAGb,EAAE;AAEFZ,OAAOoB,MAAM,GAAGxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.14.1",
+  "version": "52.16.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,8 +41,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-react-icons": "52.14.1",
-    "@coveord/plasma-tokens": "52.14.1"
+    "@coveord/plasma-react-icons": "52.16.0",
+    "@coveord/plasma-tokens": "52.16.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
@@ -54,9 +54,9 @@
     "@mantine/modals": "6.0.19",
     "@mantine/notifications": "6.0.19",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.76",
+    "@swc/core": "1.3.78",
     "@swc/jest": "0.2.29",
-    "@testing-library/jest-dom": "6.0.0",
+    "@testing-library/jest-dom": "6.0.1",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.5.3",
@@ -67,22 +67,22 @@
     "@types/testing-library__jest-dom": "5.14.9",
     "csstype": "3.1.2",
     "embla-carousel-react": "7.1.0",
-    "eslint-plugin-testing-library": "5.11.1",
+    "eslint-plugin-testing-library": "6.0.0",
     "eslint-plugin-vitest": "0.2.8",
     "eslint-plugin-vitest-globals": "1.4.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.6.2",
-    "jest-environment-jsdom": "29.6.2",
+    "jest": "29.6.3",
+    "jest-environment-jsdom": "29.6.3",
     "jest-junit": "16.0.0",
     "npm-run-all": "4.1.5",
-    "publint": "0.2.0",
+    "publint": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.1",
-    "tslib": "2.6.1",
+    "tslib": "2.6.2",
     "typescript": "5.1.6",
-    "vitest": "0.34.1",
-    "eslint-config-plasma": "52.14.1"
+    "vitest": "0.34.2",
+    "eslint-config-plasma": "52.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",

package/src/components/button/__tests__/Button.spec.tsx

@@ -20,11 +20,12 @@ describe('Button', () => {
             );
             expect(within(screen.getByRole('button', {name: /I am loading/i})).getByRole('presentation')).toBeVisible();
             expect(
-                within(screen.queryByRole('button', {name: /I am not loading/i})).queryByRole('presentation'),
+                within(screen.getByRole('button', {name: /I am not loading/i})).queryByRole('presentation'),
             ).not.toBeInTheDocument();
         });
 
         it('shows a loader while the promise is waiting to be resolved', async () => {
+            const user = userEvent.setup();
             let resolve: () => void;
             let isResolved = false;
 
@@ -37,7 +38,7 @@ describe('Button', () => {
 
             render(<Button onClick={promise}>promise handler</Button>);
 
-            userEvent.click(screen.getByRole('button', {name: /promise handler/i}));
+            await user.click(screen.getByRole('button', {name: /promise handler/i}));
 
             expect(
                 await within(screen.getByRole('button', {name: /promise handler/i})).findByRole('presentation'),
@@ -50,11 +51,12 @@ describe('Button', () => {
             });
 
             expect(
-                within(screen.queryByRole('button', {name: /promise handler/i})).queryByRole('presentation'),
+                within(screen.getByRole('button', {name: /promise handler/i})).queryByRole('presentation'),
             ).not.toBeInTheDocument();
         });
 
         it('removes the loading if a promise is rejected', async () => {
+            const user = userEvent.setup();
             let reject: () => void;
             let isRejected = false;
 
@@ -67,7 +69,7 @@ describe('Button', () => {
 
             render(<Button onClick={promise}>promise handler</Button>);
 
-            userEvent.click(screen.getByRole('button', {name: /promise handler/i}));
+            await user.click(screen.getByRole('button', {name: /promise handler/i}));
 
             expect(
                 await within(screen.getByRole('button', {name: /promise handler/i})).findByRole('presentation'),
@@ -80,7 +82,7 @@ describe('Button', () => {
             });
 
             expect(
-                within(screen.queryByRole('button', {name: /promise handler/i})).queryByRole('presentation'),
+                within(screen.getByRole('button', {name: /promise handler/i})).queryByRole('presentation'),
             ).not.toBeInTheDocument();
         });
     });

package/src/components/header/Header.styles.ts

@@ -0,0 +1,20 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderStylesParams {
+    variant?: 'page' | 'modal';
+}
+
+export const useStyles = createStyles((theme, {variant}: HeaderStylesParams) => ({
+    root: {
+        padding: variant === 'page' ? theme.spacing.xl : undefined,
+        paddingBottom: variant === 'page' ? theme.spacing.lg : undefined,
+    },
+    title: {
+        wordBreak: 'break-word',
+        color: variant === 'page' ? theme.colors.gray[5] : undefined,
+    },
+    description: {
+        color: theme.colors.gray[6],
+    },
+    divider: {},
+}));

package/src/components/header/Header.tsx

@@ -1,8 +1,24 @@
-import {QuestionSize16Px} from '@coveord/plasma-react-icons';
-import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
-import {Children, FunctionComponent, ReactElement, ReactNode} from 'react';
+import {
+    DefaultProps,
+    Divider,
+    Group,
+    GroupProps,
+    Selectors,
+    Stack,
+    Text,
+    Title,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {Children, ReactElement, ReactNode} from 'react';
 
-export interface HeaderProps extends DefaultProps {
+import {HeaderStylesParams, useStyles} from './Header.styles';
+import {HeaderActions} from './HeaderActions/HeaderActions';
+import {HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import {HeaderDocAnchor} from './HeaderDocAnchor/HeaderDocAnchor';
+
+type HeaderStylesNames = Selectors<typeof useStyles>;
+
+export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<HeaderStylesNames, HeaderStylesParams> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -30,7 +46,17 @@ interface HeaderType {
     DocAnchor: typeof HeaderDocAnchor;
 }
 
-export const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {
+const defaultProps: Partial<HeaderProps> = {
+    variant: 'page',
+    position: 'apart',
+    noWrap: true,
+};
+
+export const Header: HeaderType = (props: HeaderProps) => {
+    const {classNames, styles, unstyled, className, description, borderBottom, variant, children, ...others} =
+        useComponentDefaultProps('PlasmaHeader', defaultProps, props);
+    const {classes, cx} = useStyles({variant}, {name: 'PlasmaHeader', classNames, styles, unstyled});
+
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
     const actions = convertedChildren.find((child) => child.type === HeaderActions);
@@ -40,67 +66,24 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
     );
     return (
         <>
-            <Group
-                position="apart"
-                p={variant === 'page' ? 'xl' : undefined}
-                pb={variant === 'page' ? 'lg' : undefined}
-                noWrap
-                {...others}
-            >
+            <Group className={cx(className, classes.root)} {...others}>
                 <Stack spacing={0}>
                     {breadcrumbs}
-                    <Title
-                        order={variant === 'page' ? 1 : 3}
-                        color={variant === 'page' ? 'gray.5' : undefined}
-                        sx={{wordBreak: 'break-word'}}
-                    >
+                    <Title order={variant === 'page' ? 1 : 3} className={classes.title}>
                         {otherChildren}
                         {docAnchor}
                     </Title>
-                    <Text size={variant === 'page' ? 'md' : 'sm'} color="gray.6">
+                    <Text className={classes.description} size={variant === 'page' ? 'md' : 'sm'}>
                         {description}
                     </Text>
                 </Stack>
                 {actions}
             </Group>
-            {borderBottom ? <Divider size="xs" /> : null}
+            {borderBottom ? <Divider className={classes.divider} size="xs" /> : null}
         </>
     );
 };
 
-const HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (
-    <Breadcrumbs
-        styles={(theme) => ({
-            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
-            separator: {color: theme.colors.gray[5]},
-        })}
-    >
-        {children}
-    </Breadcrumbs>
-);
-
-const HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing="sm">{children}</Group>;
-
-export interface HeaderDocAnchorProps {
-    /**
-     * A href pointing to documentation related to the current panel.
-     * When provided, an info icon is rendered next to the title as link to this documentation
-     */
-    href: string;
-    /**
-     * The tooltip text shown when hovering over the doc link icon
-     */
-    label?: string;
-}
-
-const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (
-    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position="right">
-        <Anchor inline href={docLink} target="_blank" ml="xs" style={{verticalAlign: 'middle'}}>
-            <QuestionSize16Px height={16} />
-        </Anchor>
-    </Tooltip>
-);
-
 Header.Breadcrumbs = HeaderBreadcrumbs;
 Header.Actions = HeaderActions;
 Header.DocAnchor = HeaderDocAnchor;

package/src/components/header/HeaderActions/HeaderActions.styles.ts

@@ -0,0 +1,7 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderActionsStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderActionsStylesParams) => ({
+    root: {},
+}));

package/src/components/header/HeaderActions/HeaderActions.tsx

@@ -0,0 +1,26 @@
+import {DefaultProps, Group, GroupProps, Selectors, useComponentDefaultProps} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {HeaderActionsStylesParams, useStyles} from './HeaderActions.styles';
+
+type HeaderActionsStylesNames = Selectors<typeof useStyles>;
+
+export type HeaderActionsProps = GroupProps & DefaultProps<HeaderActionsStylesNames, HeaderActionsStylesParams>;
+
+const defaultProps: Partial<HeaderActionsProps> = {
+    spacing: 'sm',
+};
+
+export const HeaderActions: FunctionComponent<HeaderActionsProps> = (props: HeaderActionsProps) => {
+    const {classNames, styles, unstyled, className, children, ...others} = useComponentDefaultProps(
+        'PlasmaHeaderActions',
+        defaultProps,
+        props,
+    );
+    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});
+
+    return (
+        <Group className={cx(className, classes.root)} {...others}>
+            {children}
+        </Group>
+    );
+};

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderBreadcrumbsStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderBreadcrumbsStylesParams) => ({
+    breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
+    separator: {color: theme.colors.gray[5]},
+}));

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx

@@ -0,0 +1,31 @@
+import {Breadcrumbs, BreadcrumbsProps, DefaultProps, Selectors} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {HeaderBreadcrumbsStylesParams, useStyles} from './HeaderBreadcrumbs.styles';
+
+type HeaderBreadcrumbsStylesNames = Selectors<typeof useStyles>;
+
+export type HeaderBreadcrumbsProps = BreadcrumbsProps &
+    DefaultProps<HeaderBreadcrumbsStylesNames, HeaderBreadcrumbsStylesParams>;
+
+export const HeaderBreadcrumbs: FunctionComponent<HeaderBreadcrumbsProps> = ({
+    classNames,
+    styles,
+    unstyled,
+    children,
+    ...others
+}) => {
+    const {classes} = useStyles(
+        {},
+        {
+            name: 'PlasmaHeaderBreadcrumbs',
+            classNames,
+            styles,
+            unstyled,
+        },
+    );
+    return (
+        <Breadcrumbs classNames={{breadcrumb: classes.breadcrumb, separator: classes.separator}} {...others}>
+            {children}
+        </Breadcrumbs>
+    );
+};

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts

@@ -0,0 +1,11 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderDocAnchorStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderDocAnchorStylesParams) => ({
+    tooltip: {},
+    anchor: {
+        marginLeft: theme.spacing.xs,
+        verticalAlign: 'middle',
+    },
+}));

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -0,0 +1,55 @@
+import {QuestionSize16Px} from '@coveord/plasma-react-icons';
+import {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';
+import {FunctionComponent, ReactNode} from 'react';
+import {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';
+
+type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;
+
+const defaultProps: Partial<HeaderDocAnchorProps> = {
+    position: 'right',
+    children: <QuestionSize16Px height={16} />,
+};
+
+export interface HeaderDocAnchorProps
+    extends Pick<TooltipProps, 'position'>,
+        DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {
+    /**
+     * A href pointing to documentation related to the current panel.
+     * When provided, an info icon is rendered next to the title as link to this documentation
+     */
+    href: string;
+    /**
+     * The tooltip text shown when hovering over the doc link icon
+     */
+    label?: string;
+    /**
+     * React component to add the tooltip and anchor on
+     */
+    children?: ReactNode;
+}
+
+export const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {
+    const {
+        classNames,
+        styles,
+        unstyled,
+        className,
+        children,
+        href: docLink,
+        label: docLinkTooltipLabel,
+        ...others
+    } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);
+    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});
+    return (
+        <Tooltip
+            className={cx(className, classes.tooltip)}
+            label={docLinkTooltipLabel}
+            disabled={!docLinkTooltipLabel}
+            {...others}
+        >
+            <Anchor className={classes.anchor} inline href={docLink} target="_blank">
+                {children}
+            </Anchor>
+        </Tooltip>
+    );
+};

package/src/components/header/__tests__/Header.spec.tsx

@@ -10,7 +10,7 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-m67b81"
+            class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
           >
             child
           </h1>