@coveord/plasma-mantine 56.3.2 → 56.4.0

package/src/components/date-range-picker/EditableDateRangePicker.tsx

@@ -1,54 +0,0 @@
-import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';
-import dayjs from 'dayjs';
-
-export interface EditableDateRangePickerProps {
-    value: DatesRangeValue<DateStringValue | null>;
-    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
-    onFocus?: () => void;
-    /**
-     * Props for the start input
-     */
-    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
-    /**
-     * Props for the end input
-     */
-    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
-}
-
-export const EditableDateRangePicker = ({
-    value,
-    onChange,
-    onFocus,
-    startProps = {},
-    endProps = {},
-}: EditableDateRangePickerProps) => {
-    const onChangeStart = (date: DateStringValue | null) => {
-        onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);
-    };
-    const onChangeEnd = (date: DateStringValue | null) => {
-        onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);
-    };
-
-    return (
-        <>
-            <DateInput
-                clearable={false}
-                label="Start"
-                value={value?.[0]}
-                onChange={onChangeStart}
-                onFocus={onFocus}
-                popoverProps={{styles: {dropdown: {display: 'none'}}}}
-                styles={{...startProps.styles}}
-            />
-            <DateInput
-                clearable={false}
-                label="End"
-                value={value?.[1]}
-                onChange={onChangeEnd}
-                onFocus={onFocus}
-                popoverProps={{styles: {dropdown: {display: 'none'}}}}
-                styles={{...endProps.styles}}
-            />
-        </>
-    );
-};

package/src/components/date-time-range-picker/DateTimeRangePicker.tsx

@@ -1,61 +0,0 @@
-import {Group} from '@mantine/core';
-import {useUncontrolled} from '@mantine/hooks';
-
-import {DatesRangeValue, DateStringValue} from '@mantine/dates';
-import {DateRangePickerPreset, DateRangePickerPresetSelect} from '../date-range-picker/DateRangePickerPresetSelect.js';
-import {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker.js';
-
-interface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {
-    /** Default value for uncontrolled input */
-    defaultValue?: DatesRangeValue<DateStringValue | null>;
-    /** Value for controlled input */
-    value?: DatesRangeValue<DateStringValue | null>;
-    /** onChange value for controlled input */
-    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
-    /**
-     * The presets to display
-     *
-     * @default {}
-     * @example
-     * {
-     *     january: {label: 'January', range: [new Date(2022, 0, 1, 0, 0, 0), new Date(2022, 0, 31, 23, 59, 59)]},
-     *     february: {label: 'February', range: [new Date(2022, 1, 1, 0, 0, 0), new Date(2022, 1, 28, 23, 59, 59)]}
-     * }
-     */
-    presets?: Record<string, DateRangePickerPreset>;
-}
-
-export const DateTimeRangePicker = ({
-    presets,
-    value,
-    defaultValue,
-    onChange,
-    startProps,
-    endProps,
-}: DateTimeRangePickerProps) => {
-    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue | null>>({
-        value,
-        defaultValue,
-        onChange,
-        finalValue: [null, null],
-    });
-
-    return (
-        <Group align="center">
-            <EditableDateTimeRangePicker
-                value={_value}
-                onChange={handleChange}
-                startProps={startProps}
-                endProps={endProps}
-            />
-            {presets && (
-                <DateRangePickerPresetSelect
-                    presets={presets}
-                    value={_value}
-                    onChange={handleChange}
-                    selectProps={{ml: 'sm'}}
-                />
-            )}
-        </Group>
-    );
-};

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

@@ -1,72 +0,0 @@
-import {
-    Anchor,
-    AnchorProps,
-    CompoundStylesApiProps,
-    Factory,
-    Tooltip,
-    TooltipProps,
-    factory,
-    useProps,
-} from '@mantine/core';
-import {ReactNode} from 'react';
-import {useHeaderContext} from '../Header.context.js';
-import {InfoToken} from '../../info-token/InfoToken.js';
-
-export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
-
-export interface HeaderDocAnchorProps
-    extends Pick<TooltipProps, 'position'>,
-        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
-     */
-    href: string;
-    /**
-     * The tooltip text shown when hovering over the doc link icon
-     */
-    label?: ReactNode;
-    /**
-     * React component to add the tooltip and anchor on
-     */
-    children?: ReactNode;
-}
-
-export type HeaderDocAnchorFactory = Factory<{
-    props: HeaderDocAnchorProps;
-    ref: HTMLAnchorElement;
-    stylesNames: HeaderDocAnchorStyleNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<HeaderDocAnchorProps> = {
-    position: 'right',
-    children: <InfoToken variant="question" />,
-};
-
-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
-            label={label}
-            disabled={!label}
-            position={position}
-            classNames={{tooltip: ctx.getStyles('docAnchorTooltip', {classNames, styles, props}).className}}
-        >
-            <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

@@ -1,115 +0,0 @@
-import {render, screen, within} from '@test-utils';
-
-import {Header} from '../Header.js';
-
-describe('Header', () => {
-    it('renders a heading of level 1 with the specified children within', () => {
-        render(
-            <Header>
-                <div data-testid="child" />
-            </Header>,
-        );
-
-        const header = screen.getByRole('heading', {level: 1});
-        expect(header.tagName).toBe('H1');
-        expect(within(header).getByTestId('child')).toBeVisible();
-    });
-
-    it('renders a heading of level 3 when the variant is secondary', () => {
-        render(
-            <Header variant="secondary">
-                <div data-testid="child" />
-            </Header>,
-        );
-
-        const header = screen.getByRole('heading', {level: 3});
-        expect(header.tagName).toBe('H3');
-        expect(within(header).getByTestId('child')).toBeVisible();
-    });
-
-    it('renders the specified breadcrumbs above the title', async () => {
-        const {rerender} = render(
-            <Header>
-                <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
-                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
-                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
-                </Header.Breadcrumbs>
-                <div data-testid="title">Title</div>
-            </Header>,
-        );
-
-        // title follows breadcrumbs even if declared after
-        expect(screen.getByTestId('breadcrumbs-after').compareDocumentPosition(screen.getByTestId('title'))).toBe(
-            Node.DOCUMENT_POSITION_FOLLOWING,
-        );
-
-        rerender(
-            <Header>
-                <div data-testid="title">Title</div>
-                <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
-                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
-                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
-                </Header.Breadcrumbs>
-            </Header>,
-        );
-        // title still follows breadcrumbs
-        expect(screen.getByTestId('breadcrumbs-after').compareDocumentPosition(screen.getByTestId('title'))).toBe(
-            Node.DOCUMENT_POSITION_FOLLOWING,
-        );
-    });
-
-    it('adds an icon if the single prop is specified on the breadcrumb anchor', async () => {
-        render(
-            <Header>
-                <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Header.BreadcrumbAnchor href="#" single>
-                        One
-                    </Header.BreadcrumbAnchor>
-                </Header.Breadcrumbs>
-                Title
-            </Header>,
-        );
-
-        expect(screen.getByRole('link', {name: 'arrow pointing back One'})).toBeVisible();
-    });
-
-    it('renders a doc link icon if a doc anchor is provided', async () => {
-        render(
-            <Header>
-                title
-                <Header.DocAnchor href="/some/path" />
-            </Header>,
-        );
-
-        const docLink = await screen.findByRole('link', {name: /question/i});
-        expect(docLink).toHaveAttribute('href', '/some/path');
-    });
-
-    it('adds a separator underneath the header if borderBottom is true', () => {
-        render(<Header borderBottom>title</Header>);
-        expect(screen.getByRole('separator')).toBeInTheDocument();
-    });
-
-    it('renders provided description in the header', () => {
-        render(<Header description="description">title</Header>);
-
-        expect(screen.getByText('description')).toBeInTheDocument();
-    });
-
-    it('renders provided components in Header.Right', () => {
-        render(
-            <Header>
-                title
-                <Header.Right>
-                    <span>action 1</span>
-                    <span>action 2</span>
-                </Header.Right>
-            </Header>,
-        );
-
-        expect(screen.getByText('action 1')).toBeInTheDocument();
-        expect(screen.getByText('action 2')).toBeInTheDocument();
-    });
-});

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

@@ -1,95 +0,0 @@
-import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';
-import {cloneElement, ReactElement, ReactNode, useEffect} from 'react';
-import {Button} from '../button/Button.js';
-import {InlineConfirmComponentsProps} from './InlineConfirm.js';
-
-import {useInlineConfirm} from './InlineConfirmContext.js';
-
-interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineConfirmComponentsProps {
-    /**
-     * Label element
-     *
-     * @default Are you sure?
-     */
-    label?: ReactNode;
-    /**
-     * Confirm button element
-     *
-     * @default <Button.DestructivePrimary>Delete</Button.DestructivePrimary>
-     */
-    confirm?: ReactElement;
-    /**
-     * Cancel button element
-     *
-     * @default <Button.Tertiary>Cancel</Button.Tertiary>
-     */
-    cancel?: ReactElement;
-    /**
-     * Function called when the confirm button is clicked
-     */
-    onConfirm?(): void;
-
-    /**
-     * Function called when the cancel button is clicked
-     */
-    onCancel?(): void;
-}
-
-export type InlineConfirmPromptFactory = Factory<{
-    props: InlineConfirmPromptProps;
-    ref: HTMLDivElement;
-}>;
-
-const defaultProps: Partial<InlineConfirmPromptProps> = {
-    label: 'Are you sure?',
-    confirm: <Button.DestructivePrimary>Delete</Button.DestructivePrimary>,
-    cancel: <Button.Tertiary>Cancel</Button.Tertiary>,
-    gap: 'xs',
-    wrap: 'nowrap',
-};
-
-export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {
-    const {inlineConfirmId, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
-        'InlineConfirmPrompt',
-        defaultProps,
-        props,
-    );
-    const {confirmingId, clearConfirm} = useInlineConfirm();
-
-    if (!isElement(cancel) || !isElement(confirm)) {
-        throw new Error(
-            'InlineConfirm.Prompt component cancel & confirm props should be elements or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported',
-        );
-    }
-    const cancelEl = cloneElement(cancel, {
-        onClick: () => {
-            cancel.props.onClick?.();
-            onCancel?.();
-            clearConfirm();
-        },
-    });
-    const confirmEl = cloneElement(confirm, {
-        onClick: () => {
-            confirm.props.onClick?.();
-            onConfirm?.();
-            clearConfirm();
-        },
-    });
-
-    useEffect(() => {
-        if (confirmingId !== inlineConfirmId) {
-            clearConfirm();
-        }
-    }, []);
-
-    if (confirmingId === inlineConfirmId) {
-        return (
-            <Group ref={ref} {...others}>
-                {label}
-                {confirmEl}
-                {cancelEl}
-            </Group>
-        );
-    }
-    return null;
-});

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

@@ -1,31 +0,0 @@
-import {createPolymorphicComponent} from '@mantine/core';
-import {forwardRef, MouseEventHandler} from 'react';
-import {Button, type ButtonProps} from '../button/Button.js';
-import {InlineConfirmComponentsProps} from './InlineConfirm.js';
-import {useInlineConfirm} from './InlineConfirmContext.js';
-
-export interface InlineConfirmTargetProps extends ButtonProps, InlineConfirmComponentsProps {
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const InlineConfirmTarget = createPolymorphicComponent<typeof Button, InlineConfirmTargetProps>(
-    forwardRef(
-        (
-            {
-                onClick,
-                inlineConfirmId,
-                component: Component = Button,
-                ...others
-            }: InlineConfirmTargetProps & {component?: any},
-            ref,
-        ) => {
-            const {setConfirmingId} = useInlineConfirm();
-            const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-                setConfirmingId(inlineConfirmId);
-                onClick?.(e);
-            };
-
-            return <Component ref={ref} onClick={handleOnClick} {...others} />;
-        },
-    ),
-);

package/src/components/menu/Menu.tsx

@@ -1,33 +0,0 @@
-import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';
-import {forwardRef} from 'react';
-
-import {createPolymorphicComponent} from '../../utils/createPolymorphicComponent.js';
-import {overrideComponent} from '../../utils/overrideComponent.js';
-import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from '../button/ButtonWithDisabledTooltip.js';
-
-export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
-
-const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
-    ({disabledTooltip, disabled, disabledTooltipProps, ...others}, ref) => (
-        <ButtonWithDisabledTooltip
-            disabled={disabled}
-            disabledTooltip={disabledTooltip}
-            disabledTooltipProps={disabledTooltipProps}
-        >
-            <MantineMenu.Item
-                ref={ref}
-                disabled={disabled}
-                data-disabled={disabled}
-                {...others}
-                {...(disabled && (others as any).href ? {href: undefined} : {})}
-            />
-        </ButtonWithDisabledTooltip>
-    ),
-);
-
-const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(_MenuItem);
-
-export const Menu = overrideComponent(MantineMenu, {
-    displayName: '@coveord/plasma-mantine/Menu',
-    Item: MenuItem,
-});

package/src/components/modal/Modal.tsx

@@ -1,57 +0,0 @@
-import {
-    factory,
-    Modal as MantineModal,
-    ModalFactory as MantineModalFactory,
-    ModalProps as MantineModalProps,
-} from '@mantine/core';
-import {Header, type HeaderDocAnchorProps, type HeaderProps} from '../header/Header.js';
-import {ModalFooter as PlasmaModalFooter} from './ModalFooter.js';
-
-interface PlasmaModalProps extends MantineModalProps {
-    /**
-     * Description of the modal, displayed below the title.
-     */
-    description?: HeaderProps['description'];
-    /**
-     * Help link for the modal, displayed in the header.
-     * Usually provides a link to external documentation or help resources.
-     */
-    help?: HeaderDocAnchorProps;
-}
-
-// Need to redeclare the factory to override and add footer to the props type
-type PlasmaModalFactory = Omit<MantineModalFactory, 'staticComponents'> & {
-    props: PlasmaModalProps;
-    staticComponents: MantineModalFactory['staticComponents'] & {
-        Footer: typeof PlasmaModalFooter;
-    };
-};
-
-const PlasmaModal = factory<PlasmaModalFactory>(({title, description, help, ...otherProps}, ref) => {
-    const header =
-        typeof title === 'string' ? (
-            <Header titleComponent="div" variant="secondary" description={description}>
-                {title}
-                {help && <Header.DocAnchor {...help} />}
-            </Header>
-        ) : (
-            title
-        );
-    return <MantineModal ref={ref} title={header} {...otherProps} />;
-});
-
-PlasmaModal.displayName = '@coveord/plasma-mantine/Modal';
-PlasmaModal.Root = MantineModal.Root;
-PlasmaModal.Body = MantineModal.Body;
-PlasmaModal.Overlay = MantineModal.Overlay;
-PlasmaModal.Content = MantineModal.Content;
-PlasmaModal.Header = MantineModal.Header;
-PlasmaModal.Title = MantineModal.Title;
-PlasmaModal.CloseButton = MantineModal.CloseButton;
-PlasmaModal.Stack = MantineModal.Stack;
-PlasmaModal.Footer = PlasmaModalFooter;
-
-export const Modal = PlasmaModal;
-export type ModalProps = PlasmaModalProps;
-
-export type ModalFactory = PlasmaModalFactory;

package/src/components/modal/ModalFooter.tsx

@@ -1,35 +0,0 @@
-import {useRef, useEffect} from 'react';
-import {Factory, factory} from '@mantine/core';
-import {StickyFooter, type StickyFooterProps, type StickyFooterStylesNames} from '../sticky-footer/StickyFooter.js';
-import classes from './ModalFooter.module.css';
-
-export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {}
-
-export type ModalFooterStylesNames = StickyFooterStylesNames;
-
-export type ModalFooterFactory = Factory<{
-    props: ModalFooterProps;
-    ref: HTMLDivElement;
-    stylesNames: ModalFooterStylesNames;
-}>;
-
-const ensuresFooterHasEvenHeight = (footer: HTMLElement) => {
-    const remainder = footer.offsetHeight % 2;
-    footer.style.height = `${footer.offsetHeight - remainder + 2}px`;
-};
-
-export const ModalFooter = factory<ModalFooterFactory>((props, ref) => {
-    const _ref = useRef<HTMLDivElement>();
-
-    const footerRef = ref || _ref;
-
-    useEffect(() => {
-        if (typeof footerRef !== 'function' && footerRef.current) {
-            ensuresFooterHasEvenHeight(footerRef.current);
-        }
-
-        // if ref === 'function', this is a callback ref. Haven't found any solution for adjusting the height in this case
-    }, [ref, props.h]);
-
-    return <StickyFooter className={classes.root} ref={footerRef} {...props} />;
-});