@coveord/plasma-mantine 52.27.3 → 53.0.0

package/src/components/header/Header.tsx

@@ -1,27 +1,38 @@
 import {
-    DefaultProps,
     Divider,
+    Factory,
     Group,
     GroupProps,
-    Selectors,
     Stack,
+    StylesApiProps,
     Text,
     Title,
-    useComponentDefaultProps,
+    factory,
+    useProps,
+    useStyles,
 } from '@mantine/core';
 import {Children, ReactElement, ReactNode} from 'react';
+import {HeaderProvider} from './Header.context';
+import classes from './Header.module.css';
+import {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';
+import {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';
 
-import {HeaderStylesParams, useStyles} from './Header.styles';
-import {HeaderActions} from './HeaderActions/HeaderActions';
-import {HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-import {HeaderDocAnchor} from './HeaderDocAnchor/HeaderDocAnchor';
+export type {HeaderActionsProps} from './HeaderActions/HeaderActions';
+export type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';
 
-export type {HeaderDocAnchorProps, HeaderDocAnchorStylesNames} from './HeaderDocAnchor/HeaderDocAnchor';
-export type {HeaderBreadcrumbsProps, HeaderBreadcrumbsStylesNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-export type {HeaderActionsProps, HeaderActionsStylesNames} from './HeaderActions/HeaderActions';
-export type HeaderStylesNames = Selectors<typeof useStyles>;
+export type HeaderVariant = 'primary' | 'secondary';
+export type HeaderStyleNames =
+    | 'root'
+    | 'title'
+    | 'description'
+    | 'divider'
+    | HeaderDocAnchorStyleNames
+    | HeaderBreadcrumbsStyleNames
+    | HeaderActionsStyleNames;
 
-export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<HeaderStylesNames, HeaderStylesParams> {
+export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -31,34 +42,62 @@ export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<He
      */
     borderBottom?: boolean;
     /**
-     * Use the modal variant when displaying the header inside a modal
+     * Use the primary variant for page header and secondary variant elsewhere
      *
-     * @default 'page'
+     * @default 'primary'
      */
-    variant?: 'page' | 'modal';
+    variant?: 'primary' | 'secondary';
     /**
      * The title of the header.
      */
     children: ReactNode;
 }
 
-interface HeaderType {
-    (props: HeaderProps): ReactElement;
-    Breadcrumbs: typeof HeaderBreadcrumbs;
-    Actions: typeof HeaderActions;
-    DocAnchor: typeof HeaderDocAnchor;
-}
+export type HeaderFactory = Factory<{
+    props: HeaderProps;
+    ref: HTMLDivElement;
+    variant: HeaderVariant;
+    stylesNames: HeaderStyleNames;
+    staticComponents: {
+        Breadcrumbs: typeof HeaderBreadcrumbs;
+        Actions: typeof HeaderActions;
+        DocAnchor: typeof HeaderDocAnchor;
+    };
+}>;
 
 const defaultProps: Partial<HeaderProps> = {
-    variant: 'page',
-    position: 'apart',
-    noWrap: true,
+    variant: 'primary',
+    justify: 'space-between',
+    wrap: 'nowrap',
 };
 
-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});
+export const Header = factory<HeaderFactory>((_props, ref) => {
+    const props = useProps('PlasmaHeader', defaultProps, _props);
+    const {
+        className,
+        description,
+        borderBottom,
+        variant,
+        children,
+        style,
+        classNames,
+        unstyled,
+        vars,
+        styles,
+        ...others
+    } = props;
+    const getStyles = useStyles<HeaderFactory>({
+        name: 'PlasmaHeader',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+    });
+    const stylesApiProps = {classNames, styles};
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
@@ -68,24 +107,28 @@ export const Header: HeaderType = (props: HeaderProps) => {
         (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,
     );
     return (
-        <>
-            <Group className={cx(className, classes.root)} {...others}>
-                <Stack spacing={0}>
+        <HeaderProvider value={{getStyles}}>
+            <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>
+                <Stack gap={0}>
                     {breadcrumbs}
-                    <Title order={variant === 'page' ? 1 : 3} className={classes.title}>
+                    <Title
+                        variant={variant}
+                        order={variant === 'primary' ? 1 : 3}
+                        {...getStyles('title', stylesApiProps)}
+                    >
                         {otherChildren}
                         {docAnchor}
                     </Title>
-                    <Text className={classes.description} size={variant === 'page' ? 'md' : 'sm'}>
+                    <Text {...getStyles('description', stylesApiProps)} size={variant === 'primary' ? 'md' : 'sm'}>
                         {description}
                     </Text>
                 </Stack>
                 {actions}
             </Group>
-            {borderBottom ? <Divider className={classes.divider} size="xs" /> : null}
-        </>
+            {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size="xs" /> : null}
+        </HeaderProvider>
     );
-};
+});
 
 Header.Breadcrumbs = HeaderBreadcrumbs;
 Header.Actions = HeaderActions;

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

@@ -1,26 +1,39 @@
-import {DefaultProps, Group, GroupProps, Selectors, useComponentDefaultProps} from '@mantine/core';
-import {FunctionComponent} from 'react';
-import {HeaderActionsStylesParams, useStyles} from './HeaderActions.styles';
+import {CompoundStylesApiProps, Factory, Group, GroupProps, factory, useProps} from '@mantine/core';
+import {ReactNode} from 'react';
+import {useHeaderContext} from '../Header.context';
 
-export type HeaderActionsStylesNames = Selectors<typeof useStyles>;
+export type HeaderActionsStyleNames = 'actions';
 
-export type HeaderActionsProps = GroupProps & DefaultProps<HeaderActionsStylesNames, HeaderActionsStylesParams>;
+export interface HeaderActionsProps
+    extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'children'>,
+        CompoundStylesApiProps<HeaderActionsFactory> {
+    children: ReactNode;
+}
+
+export type HeaderActionsFactory = Factory<{
+    props: HeaderActionsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderActionsStyleNames;
+    compound: true;
+}>;
 
 const defaultProps: Partial<HeaderActionsProps> = {
-    spacing: 'sm',
+    gap: '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});
+export const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {
+    const props = useProps('HeaderActions', defaultProps, _props);
+    const {gap, className, classNames, styles, style, children, vars, ...others} = props;
+    const ctx = useHeaderContext();
 
     return (
-        <Group className={cx(className, classes.root)} {...others}>
+        <Group
+            ref={ref}
+            gap={gap}
+            {...ctx.getStyles('actions', {className, style, classNames, styles, props})}
+            {...others}
+        >
             {children}
         </Group>
     );
-};
+});

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

@@ -1,31 +1,32 @@
-import {Breadcrumbs, BreadcrumbsProps, DefaultProps, Selectors} from '@mantine/core';
-import {FunctionComponent} from 'react';
-import {HeaderBreadcrumbsStylesParams, useStyles} from './HeaderBreadcrumbs.styles';
+import {Breadcrumbs, BreadcrumbsProps, CompoundStylesApiProps, Factory, factory} from '@mantine/core';
+import {useHeaderContext} from '../Header.context';
 
-export type HeaderBreadcrumbsStylesNames = Selectors<typeof useStyles>;
+export type HeaderBreadcrumbsStyleNames = 'breadcrumbsRoot' | 'breadcrumbsSeparator';
+export interface HeaderBreadcrumbsProps
+    extends Omit<BreadcrumbsProps, 'classNames' | 'styles' | 'vars'>,
+        CompoundStylesApiProps<HeaderBreadcrumbsFactory> {}
 
-export type HeaderBreadcrumbsProps = BreadcrumbsProps &
-    DefaultProps<HeaderBreadcrumbsStylesNames, HeaderBreadcrumbsStylesParams>;
+export type HeaderBreadcrumbsFactory = Factory<{
+    props: BreadcrumbsProps;
+    ref: HTMLDivElement;
+    stylesNames: HeaderBreadcrumbsStyleNames;
+    compound: true;
+}>;
+
+export const HeaderBreadcrumbs = factory<HeaderBreadcrumbsFactory>((props, ref) => {
+    const {children, className, classNames, styles, style, ...others} = props;
+    const ctx = useHeaderContext();
 
-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}>
+        <Breadcrumbs
+            ref={ref}
+            classNames={{
+                breadcrumb: ctx.getStyles('breadcrumbsRoot', {className, classNames, styles, style, props}).className,
+                separator: ctx.getStyles('breadcrumbsSeparator', {classNames, styles, props}).className,
+            }}
+            {...others}
+        >
             {children}
         </Breadcrumbs>
     );
-};
+});

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

@@ -1,18 +1,23 @@
 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';
+import {
+    Anchor,
+    AnchorProps,
+    CompoundStylesApiProps,
+    Factory,
+    Tooltip,
+    TooltipProps,
+    factory,
+    useProps,
+} from '@mantine/core';
+import {ReactNode} from 'react';
+import {useHeaderContext} from '../Header.context';
 
-export type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;
-
-const defaultProps: Partial<HeaderDocAnchorProps> = {
-    position: 'right',
-    children: <QuestionSize16Px height={16} />,
-};
+export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 
 export interface HeaderDocAnchorProps
     extends Pick<TooltipProps, 'position'>,
-        DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {
+        CompoundStylesApiProps<HeaderDocAnchorFactory>,
+        Omit<AnchorProps, 'classNames' | 'styles' | 'variant' | 'vars'> {
     /**
      * 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
@@ -28,28 +33,40 @@ export interface HeaderDocAnchorProps
     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});
+export type HeaderDocAnchorFactory = Factory<{
+    props: HeaderDocAnchorProps;
+    ref: HTMLAnchorElement;
+    stylesNames: HeaderDocAnchorStyleNames;
+    compound: true;
+}>;
+
+const defaultProps: Partial<HeaderDocAnchorProps> = {
+    position: 'right',
+    children: <QuestionSize16Px height={16} />,
+};
+
+export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {
+    const props = useProps('PlasmaHeaderActions', defaultProps, _props);
+    const {className, classNames, styles, style, children, label, position, vars, ...others} = props;
+
+    const ctx = useHeaderContext();
+
     return (
         <Tooltip
-            className={cx(className, classes.tooltip)}
-            label={docLinkTooltipLabel}
-            disabled={!docLinkTooltipLabel}
-            {...others}
+            label={label}
+            disabled={!label}
+            position={position}
+            classNames={{tooltip: ctx.getStyles('docAnchorTooltip', {classNames, styles, props}).className}}
         >
-            <Anchor className={classes.anchor} inline href={docLink} target="_blank">
+            <Anchor
+                ref={ref}
+                inline
+                target="_blank"
+                {...ctx.getStyles('docAnchor', {classNames, styles, props, style, className})}
+                {...others}
+            >
                 {children}
             </Anchor>
         </Tooltip>
     );
-};
+});

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

@@ -10,7 +10,10 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
+            class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m-8a5d1357 mantine-Title-root"
+            data-order="1"
+            data-variant="primary"
+            style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
           >
             child
           </h1>

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

@@ -2,48 +2,75 @@
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
+  <style
+    data-mantine-styles="true"
+  >
+    :root{--mantine-webkit-font-smoothing: unset;--mantine-moz-font-smoothing: unset;--mantine-color-black: #282829;--mantine-line-height: 1.5;--mantine-font-family: canada-type-gibson, sans-serif;--mantine-font-family-headings: canada-type-gibson, sans-serif;--mantine-heading-font-weight: 500;--mantine-radius-default: calc(0.5rem * var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-action-filled);--mantine-primary-color-filled-hover: var(--mantine-color-action-filled-hover);--mantine-primary-color-light: var(--mantine-color-action-light);--mantine-primary-color-light-hover: var(--mantine-color-action-light-hover);--mantine-primary-color-light-color: var(--mantine-color-action-light-color);--mantine-spacing-xs: 8px;--mantine-spacing-sm: 16px;--mantine-spacing-md: 24px;--mantine-spacing-lg: 32px;--mantine-spacing-xl: 40px;--mantine-line-height-md: 1.5;--mantine-shadow-xs: 0px 1px 0px rgba(4, 8, 31, 0.08);--mantine-shadow-sm: 0px 2px 4px rgba(4, 8, 31, 0.12);--mantine-shadow-md: 0px 4px 8px rgba(4, 8, 31, 0.08);--mantine-shadow-lg: 0px 8px 16px rgba(7, 12, 41, 0.06);--mantine-shadow-xl: 0px 16px 24px rgba(4, 8, 31, 0.06);--mantine-primary-color-0: var(--mantine-color-action-0);--mantine-primary-color-1: var(--mantine-color-action-1);--mantine-primary-color-2: var(--mantine-color-action-2);--mantine-primary-color-3: var(--mantine-color-action-3);--mantine-primary-color-4: var(--mantine-color-action-4);--mantine-primary-color-5: var(--mantine-color-action-5);--mantine-primary-color-6: var(--mantine-color-action-6);--mantine-primary-color-7: var(--mantine-color-action-7);--mantine-primary-color-8: var(--mantine-color-action-8);--mantine-primary-color-9: var(--mantine-color-action-9);--mantine-color-gray-0: #fcfcfc;--mantine-color-gray-1: #f9f9f9;--mantine-color-gray-2: #f3f3f3;--mantine-color-gray-3: #e5e8e8;--mantine-color-gray-4: #d6dcdd;--mantine-color-gray-5: #b7bcc0;--mantine-color-gray-6: #6c727b;--mantine-color-gray-7: #565b66;--mantine-color-gray-8: #353a3f;--mantine-color-gray-9: #282829;--mantine-color-red-0: #fff8f8;--mantine-color-red-1: #ffd7d3;--mantine-color-red-2: #f3b4ae;--mantine-color-red-3: #ee8279;--mantine-color-red-4: #f05245;--mantine-color-red-5: #e03729;--mantine-color-red-6: #cd2113;--mantine-color-red-7: #a11409;--mantine-color-red-8: #80130a;--mantine-color-red-9: #600a03;--mantine-color-indigo-0: #f2f3ff;--mantine-color-indigo-1: #ced4f4;--mantine-color-indigo-2: #9dabf2;--mantine-color-indigo-3: #687cdf;--mantine-color-indigo-4: #4a61d4;--mantine-color-indigo-5: #2e45ba;--mantine-color-indigo-6: #24389e;--mantine-color-indigo-7: #192b8a;--mantine-color-indigo-8: #101f6b;--mantine-color-indigo-9: #071140;--mantine-color-blue-0: #e7f7ff;--mantine-color-blue-1: #c3ecff;--mantine-color-blue-2: #86d8ff;--mantine-color-blue-3: #46c4ff;--mantine-color-blue-4: #00adff;--mantine-color-blue-5: #029de7;--mantine-color-blue-6: #0387c6;--mantine-color-blue-7: #0173a9;--mantine-color-blue-8: #004c71;--mantine-color-blue-9: #003148;--mantine-color-teal-0: #edfffc;--mantine-color-teal-1: #c2fef5;--mantine-color-teal-2: #50fae3;--mantine-color-teal-3: #1cebcf;--mantine-color-teal-4: #16dcc1;--mantine-color-teal-5: #12c7ae;--mantine-color-teal-6: #0ba893;--mantine-color-teal-7: #078675;--mantine-color-teal-8: #055f53;--mantine-color-teal-9: #033932;--mantine-color-green-0: #dcf3ef;--mantine-color-green-1: #b2e3db;--mantine-color-green-2: #79d1c3;--mantine-color-green-3: #34ad95;--mantine-color-green-4: #1a8973;--mantine-color-green-5: #00634f;--mantine-color-green-6: #045242;--mantine-color-green-7: #043f33;--mantine-color-green-8: #023128;--mantine-color-green-9: #01211b;--mantine-color-lime-0: #f2fff9;--mantine-color-lime-1: #f2fff9;--mantine-color-lime-2: #f2fff9;--mantine-color-lime-3: #f2fff9;--mantine-color-lime-4: #12a344;--mantine-color-lime-5: #12a344;--mantine-color-lime-6: #12a344;--mantine-color-lime-7: #004a20;--mantine-color-lime-8: #004a20;--mantine-color-lime-9: #004a20;--mantine-color-yellow-0: #fffdea;--mantine-color-yellow-1: #fff7ba;--mantine-color-yellow-2: #ffef70;--mantine-color-yellow-3: #ffe300;--mantine-color-yellow-4: #f5d029;--mantine-color-yellow-5: #eac10b;--mantine-color-yellow-6: #e2b104;--mantine-color-yellow-7: #bd9403;--mantine-color-yellow-8: #8f7000;--mantine-color-yellow-9: #493b08;--mantine-color-action-0: #edf6ff;--mantine-color-action-1: #edf6ff;--mantine-color-action-2: #c7e4ff;--mantine-color-action-3: #8bc7ff;--mantine-color-action-4: #399ffe;--mantine-color-action-5: #1372ec;--mantine-color-action-6: #1372ec;--mantine-color-action-7: #1a50ad;--mantine-color-action-8: #1a50ad;--mantine-color-action-9: #062d70;--mantine-color-navy-0: #f5f6ff;--mantine-color-navy-1: #d6d7fd;--mantine-color-navy-2: #aeb0f1;--mantine-color-navy-3: #8787db;--mantine-color-navy-4: #6b6bbd;--mantine-color-navy-5: #525296;--mantine-color-navy-6: #3f3f71;--mantine-color-navy-7: #333357;--mantine-color-navy-8: #262646;--mantine-color-navy-9: #181d3a;--mantine-color-info-0: #f5f6ff;--mantine-color-info-1: #d6d7fd;--mantine-color-info-2: #aeb0f1;--mantine-color-info-3: #8787db;--mantine-color-info-4: #6b6bbd;--mantine-color-info-5: #525296;--mantine-color-info-6: #3f3f71;--mantine-color-info-7: #333357;--mantine-color-info-8: #262646;--mantine-color-info-9: #181d3a;--mantine-color-critical-0: #fff8f8;--mantine-color-critical-1: #ffd7d3;--mantine-color-critical-2: #f3b4ae;--mantine-color-critical-3: #ee8279;--mantine-color-critical-4: #f05245;--mantine-color-critical-5: #e03729;--mantine-color-critical-6: #cd2113;--mantine-color-critical-7: #a11409;--mantine-color-critical-8: #80130a;--mantine-color-critical-9: #600a03;--mantine-color-new-0: #edfffc;--mantine-color-new-1: #c2fef5;--mantine-color-new-2: #50fae3;--mantine-color-new-3: #1cebcf;--mantine-color-new-4: #16dcc1;--mantine-color-new-5: #12c7ae;--mantine-color-new-6: #0ba893;--mantine-color-new-7: #078675;--mantine-color-new-8: #055f53;--mantine-color-new-9: #033932;--mantine-color-warning-0: #fffdea;--mantine-color-warning-1: #fff7ba;--mantine-color-warning-2: #ffef70;--mantine-color-warning-3: #ffe300;--mantine-color-warning-4: #f5d029;--mantine-color-warning-5: #eac10b;--mantine-color-warning-6: #e2b104;--mantine-color-warning-7: #bd9403;--mantine-color-warning-8: #8f7000;--mantine-color-warning-9: #493b08;--mantine-color-success-0: #f2fff9;--mantine-color-success-1: #f2fff9;--mantine-color-success-2: #f2fff9;--mantine-color-success-3: #f2fff9;--mantine-color-success-4: #12a344;--mantine-color-success-5: #12a344;--mantine-color-success-6: #12a344;--mantine-color-success-7: #004a20;--mantine-color-success-8: #004a20;--mantine-color-success-9: #004a20;--mantine-color-purple-0: #f2ebf3;--mantine-color-purple-1: #dabfe9;--mantine-color-purple-2: #bb80dc;--mantine-color-purple-3: #9a52c1;--mantine-color-purple-4: #752e9c;--mantine-color-purple-5: #5d237d;--mantine-color-purple-6: #451c5c;--mantine-color-purple-7: #390c53;--mantine-color-purple-8: #2b073f;--mantine-color-purple-9: #180323;--mantine-h1-font-size: 48px;--mantine-h1-line-height: 1.5;--mantine-h1-font-weight: 300;--mantine-h2-font-size: 32px;--mantine-h2-line-height: 1.5;--mantine-h2-font-weight: 500;--mantine-h3-font-size: 24px;--mantine-h3-line-height: 1.5;--mantine-h3-font-weight: 500;--mantine-h4-font-size: 18px;--mantine-h4-line-height: 1.5;--mantine-h4-font-weight: 300;--mantine-h5-font-size: 14px;--mantine-h5-font-weight: 500;--mantine-h6-font-size: 12px;--mantine-h6-font-weight: 500;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-action-4);--mantine-color-gray-light: rgba(108, 114, 123, 0.15);--mantine-color-gray-light-hover: rgba(108, 114, 123, 0.2);--mantine-color-gray-outline-hover: rgba(214, 220, 221, 0.05);--mantine-color-red-light: rgba(205, 33, 19, 0.15);--mantine-color-red-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-red-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-indigo-light: rgba(36, 56, 158, 0.15);--mantine-color-indigo-light-hover: rgba(36, 56, 158, 0.2);--mantine-color-indigo-outline-hover: rgba(74, 97, 212, 0.05);--mantine-color-blue-light: rgba(3, 135, 198, 0.15);--mantine-color-blue-light-hover: rgba(3, 135, 198, 0.2);--mantine-color-blue-outline-hover: rgba(0, 173, 255, 0.05);--mantine-color-teal-light: rgba(11, 168, 147, 0.15);--mantine-color-teal-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-teal-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-green-light: rgba(4, 82, 66, 0.15);--mantine-color-green-light-hover: rgba(4, 82, 66, 0.2);--mantine-color-green-outline-hover: rgba(26, 137, 115, 0.05);--mantine-color-lime-light: rgba(18, 163, 68, 0.15);--mantine-color-lime-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: rgba(226, 177, 4, 0.15);--mantine-color-yellow-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-yellow-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-action-text: var(--mantine-color-action-4);--mantine-color-action-filled: var(--mantine-color-action-8);--mantine-color-action-filled-hover: var(--mantine-color-action-9);--mantine-color-action-light: rgba(19, 114, 236, 0.15);--mantine-color-action-light-hover: rgba(19, 114, 236, 0.2);--mantine-color-action-light-color: var(--mantine-color-action-3);--mantine-color-action-outline: var(--mantine-color-action-4);--mantine-color-action-outline-hover: rgba(57, 159, 254, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-4);--mantine-color-navy-filled: var(--mantine-color-navy-8);--mantine-color-navy-filled-hover: var(--mantine-color-navy-9);--mantine-color-navy-light: rgba(63, 63, 113, 0.15);--mantine-color-navy-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-navy-light-color: var(--mantine-color-navy-3);--mantine-color-navy-outline: var(--mantine-color-navy-4);--mantine-color-navy-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-info-text: var(--mantine-color-info-4);--mantine-color-info-filled: var(--mantine-color-info-8);--mantine-color-info-filled-hover: var(--mantine-color-info-9);--mantine-color-info-light: rgba(63, 63, 113, 0.15);--mantine-color-info-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-info-light-color: var(--mantine-color-info-3);--mantine-color-info-outline: var(--mantine-color-info-4);--mantine-color-info-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-4);--mantine-color-critical-filled: var(--mantine-color-critical-8);--mantine-color-critical-filled-hover: var(--mantine-color-critical-9);--mantine-color-critical-light: rgba(205, 33, 19, 0.15);--mantine-color-critical-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-critical-light-color: var(--mantine-color-critical-3);--mantine-color-critical-outline: var(--mantine-color-critical-4);--mantine-color-critical-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-new-text: var(--mantine-color-new-4);--mantine-color-new-filled: var(--mantine-color-new-8);--mantine-color-new-filled-hover: var(--mantine-color-new-9);--mantine-color-new-light: rgba(11, 168, 147, 0.15);--mantine-color-new-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-new-light-color: var(--mantine-color-new-3);--mantine-color-new-outline: var(--mantine-color-new-4);--mantine-color-new-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-4);--mantine-color-warning-filled: var(--mantine-color-warning-8);--mantine-color-warning-filled-hover: var(--mantine-color-warning-9);--mantine-color-warning-light: rgba(226, 177, 4, 0.15);--mantine-color-warning-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-warning-light-color: var(--mantine-color-warning-3);--mantine-color-warning-outline: var(--mantine-color-warning-4);--mantine-color-warning-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-success-text: var(--mantine-color-success-4);--mantine-color-success-filled: var(--mantine-color-success-8);--mantine-color-success-filled-hover: var(--mantine-color-success-9);--mantine-color-success-light: rgba(18, 163, 68, 0.15);--mantine-color-success-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-success-light-color: var(--mantine-color-success-3);--mantine-color-success-outline: var(--mantine-color-success-4);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-4);--mantine-color-purple-filled: var(--mantine-color-purple-8);--mantine-color-purple-filled-hover: var(--mantine-color-purple-9);--mantine-color-purple-light: rgba(69, 28, 92, 0.15);--mantine-color-purple-light-hover: rgba(69, 28, 92, 0.2);--mantine-color-purple-light-color: var(--mantine-color-purple-3);--mantine-color-purple-outline: var(--mantine-color-purple-4);--mantine-color-purple-outline-hover: rgba(117, 46, 156, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-text: #282829;--mantine-color-anchor: var(--mantine-color-action-6);--mantine-color-dark-light: #C9C9C9;--mantine-color-dark-light-hover: #b8b8b8;--mantine-color-gray-light: #f9f9f9;--mantine-color-gray-light-hover: #f3f3f3;--mantine-color-gray-outline-hover: rgba(108, 114, 123, 0.05);--mantine-color-red-light: #fff8f8;--mantine-color-red-light-hover: #ffd7d3;--mantine-color-red-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-pink-light: #fff0f6;--mantine-color-pink-light-hover: #ffdeeb;--mantine-color-grape-light: #f8f0fc;--mantine-color-grape-light-hover: #f3d9fa;--mantine-color-violet-light: #f3f0ff;--mantine-color-violet-light-hover: #e5dbff;--mantine-color-indigo-light: #f2f3ff;--mantine-color-indigo-light-hover: #ced4f4;--mantine-color-indigo-outline-hover: rgba(36, 56, 158, 0.05);--mantine-color-blue-light: #e7f7ff;--mantine-color-blue-light-hover: #c3ecff;--mantine-color-blue-outline-hover: rgba(3, 135, 198, 0.05);--mantine-color-cyan-light: #e3fafc;--mantine-color-cyan-light-hover: #c5f6fa;--mantine-color-teal-light: #edfffc;--mantine-color-teal-light-hover: #c2fef5;--mantine-color-teal-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-green-light: #dcf3ef;--mantine-color-green-light-hover: #b2e3db;--mantine-color-green-outline-hover: rgba(4, 82, 66, 0.05);--mantine-color-lime-light: #f2fff9;--mantine-color-lime-light-hover: #f2fff9;--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: #fffdea;--mantine-color-yellow-light-hover: #fff7ba;--mantine-color-yellow-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-orange-light: #fff4e6;--mantine-color-orange-light-hover: #ffe8cc;--mantine-color-action-text: var(--mantine-color-action-filled);--mantine-color-action-filled: var(--mantine-color-action-6);--mantine-color-action-filled-hover: var(--mantine-color-action-7);--mantine-color-action-light: #edf6ff;--mantine-color-action-light-hover: #edf6ff;--mantine-color-action-light-color: var(--mantine-color-action-6);--mantine-color-action-outline: var(--mantine-color-action-6);--mantine-color-action-outline-hover: rgba(19, 114, 236, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-filled);--mantine-color-navy-filled: var(--mantine-color-navy-6);--mantine-color-navy-filled-hover: var(--mantine-color-navy-7);--mantine-color-navy-light: #f5f6ff;--mantine-color-navy-light-hover: #d6d7fd;--mantine-color-navy-light-color: var(--mantine-color-navy-6);--mantine-color-navy-outline: var(--mantine-color-navy-6);--mantine-color-navy-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-info-text: var(--mantine-color-info-filled);--mantine-color-info-filled: var(--mantine-color-info-6);--mantine-color-info-filled-hover: var(--mantine-color-info-7);--mantine-color-info-light: #f5f6ff;--mantine-color-info-light-hover: #d6d7fd;--mantine-color-info-light-color: var(--mantine-color-info-6);--mantine-color-info-outline: var(--mantine-color-info-6);--mantine-color-info-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-filled);--mantine-color-critical-filled: var(--mantine-color-critical-6);--mantine-color-critical-filled-hover: var(--mantine-color-critical-7);--mantine-color-critical-light: #fff8f8;--mantine-color-critical-light-hover: #ffd7d3;--mantine-color-critical-light-color: var(--mantine-color-critical-6);--mantine-color-critical-outline: var(--mantine-color-critical-6);--mantine-color-critical-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-new-text: var(--mantine-color-new-filled);--mantine-color-new-filled: var(--mantine-color-new-6);--mantine-color-new-filled-hover: var(--mantine-color-new-7);--mantine-color-new-light: #edfffc;--mantine-color-new-light-hover: #c2fef5;--mantine-color-new-light-color: var(--mantine-color-new-6);--mantine-color-new-outline: var(--mantine-color-new-6);--mantine-color-new-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-filled);--mantine-color-warning-filled: var(--mantine-color-warning-6);--mantine-color-warning-filled-hover: var(--mantine-color-warning-7);--mantine-color-warning-light: #fffdea;--mantine-color-warning-light-hover: #fff7ba;--mantine-color-warning-light-color: var(--mantine-color-warning-6);--mantine-color-warning-outline: var(--mantine-color-warning-6);--mantine-color-warning-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-success-text: var(--mantine-color-success-filled);--mantine-color-success-filled: var(--mantine-color-success-6);--mantine-color-success-filled-hover: var(--mantine-color-success-7);--mantine-color-success-light: #f2fff9;--mantine-color-success-light-hover: #f2fff9;--mantine-color-success-light-color: var(--mantine-color-success-6);--mantine-color-success-outline: var(--mantine-color-success-6);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-filled);--mantine-color-purple-filled: var(--mantine-color-purple-6);--mantine-color-purple-filled-hover: var(--mantine-color-purple-7);--mantine-color-purple-light: #f2ebf3;--mantine-color-purple-light-hover: #dabfe9;--mantine-color-purple-light-color: var(--mantine-color-purple-6);--mantine-color-purple-outline: var(--mantine-color-purple-6);--mantine-color-purple-outline-hover: rgba(69, 28, 92, 0.05);}
+  </style>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
   <div
-    class="mantine-Group-root mantine-PlasmaHeader-root mantine-15aa8um"
+    class="_root_69e643 mantine-PlasmaHeader-root m-4081bf90 mantine-Group-root"
+    data-variant="primary"
+    style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: space-between; --group-wrap: nowrap;"
   >
     <div
-      class="mantine-Stack-root mantine-1178y6y"
+      class="m-6d731127 mantine-Stack-root"
+      style="--stack-gap: 0rem; --stack-align: stretch; --stack-justify: flex-start;"
     >
       <div
-        class="mantine-Breadcrumbs-root mantine-1ujbd2v"
+        class="m-8b3717df mantine-Breadcrumbs-root"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
+          class="_breadcrumbsSeparator_69e643 mantine-PlasmaHeader-breadcrumbsSeparator m-3b8f2208 mantine-Breadcrumbs-separator"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
+          class="mantine-focus-auto _root_a623ec m-849cf0da _breadcrumbsRoot_69e643 mantine-PlasmaHeader-breadcrumbsRoot m-f678d540 mantine-Breadcrumbs-breadcrumb m-b6d8b162 mantine-Text-root mantine-Anchor-root"
+          color="action.6"
+          data-underline="hover"
+          style="--text-color: var(--mantine-color-action-6); --text-fz: var(--mantine-font-size-sm);"
         >
           Three
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
+        class="_root_4eabcc _title_69e643 mantine-PlasmaHeader-title m-8a5d1357 mantine-Title-root"
+        data-order="1"
+        data-variant="primary"
+        style="--title-fw: var(--mantine-h1-font-weight); --title-lh: var(--mantine-h1-line-height); --title-fz: var(--mantine-h1-font-size);"
       >
         Title
       </h1>
-      <div
-        class="mantine-Text-root mantine-PlasmaHeader-description mantine-52dv7d"
+      <p
+        class="mantine-focus-auto _description_69e643 mantine-PlasmaHeader-description m-b6d8b162 mantine-Text-root"
+        data-size="md"
+        style="--text-fz: var(--mantine-font-size-md); --text-lh: var(--mantine-line-height-md);"
       />
     </div>
   </div>

package/src/components/index.ts

@@ -8,7 +8,6 @@ export * from './header';
 export * from './inline-confirm';
 export * from './table';
 export * from './prompt';
-export * from './modal-wizard';
 export * from './button';
 export * from './action-icon';
 export * from './menu';

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -1,17 +1,33 @@
-import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';
-
-import {InlineConfirmButton} from './InlineConfirmButton';
-import {InlineConfirmContext} from './InlineConfirmContext';
-import {InlineConfirmMenuItem} from './InlineConfirmMenuItem';
+import {factory, Factory, StylesApiProps, useProps} from '@mantine/core';
+import {Children, ReactElement, ReactNode, useState} from 'react';
+import {InlineConfirmProvider} from './InlineConfirmContext';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
-type InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {
-    Prompt: typeof InlineConfirmPrompt;
-    Button: typeof InlineConfirmButton;
-    MenuItem: typeof InlineConfirmMenuItem;
-};
+import {InlineConfirmTarget} from './InlineConfirmTarget';
+
+export type InlineConfirmStyleNames = 'root';
+
+export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {
+    /**
+     * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids
+     */
+    children: ReactNode;
+}
+
+export type InlineConfirmFactory = Factory<{
+    props: InlineConfirmProps;
+    ref: never;
+    stylesNames: InlineConfirmStyleNames;
+    staticComponents: {
+        Prompt: typeof InlineConfirmPrompt;
+        Target: typeof InlineConfirmTarget;
+    };
+}>;
+
+const defaultProps: Partial<InlineConfirmProps> = {};
 
-export const InlineConfirm: InlineConfirmType = ({children}) => {
+export const InlineConfirm = factory<InlineConfirmFactory>((_props) => {
+    const {children} = useProps('InlineConfirm', defaultProps, _props);
     const [confirmingId, setConfirmingId] = useState<string | null>(null);
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
@@ -21,12 +37,11 @@ export const InlineConfirm: InlineConfirmType = ({children}) => {
     const clearConfirm = () => setConfirmingId(null);
 
     return (
-        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>
+        <InlineConfirmProvider value={{confirmingId, setConfirmingId, clearConfirm}}>
             {prompt ?? children}
-        </InlineConfirmContext.Provider>
+        </InlineConfirmProvider>
     );
-};
+});
 
 InlineConfirm.Prompt = InlineConfirmPrompt;
-InlineConfirm.Button = InlineConfirmButton;
-InlineConfirm.MenuItem = InlineConfirmMenuItem;
+InlineConfirm.Target = InlineConfirmTarget;

package/src/components/inline-confirm/InlineConfirmContext.ts

@@ -1,4 +1,4 @@
-import {createContext} from 'react';
+import {createSafeContext} from '@mantine/core';
 
 type InlineConfirmContextType = {
     confirmingId: string;
@@ -6,4 +6,6 @@ type InlineConfirmContextType = {
     clearConfirm: () => void;
 };
 
-export const InlineConfirmContext = createContext<InlineConfirmContextType | null>(null);
+export const [InlineConfirmProvider, useInlineConfirm] = createSafeContext<InlineConfirmContextType>(
+    'InlineConfirm component was not found in tree',
+);