@coveord/plasma-mantine 56.3.3 → 56.5.0

package/src/components/table/table-actions/TableActionItem.tsx

@@ -1,73 +0,0 @@
-import {CompoundStylesApiProps, PolymorphicFactory, polymorphicFactory, useProps} from '@mantine/core';
-import {ReactNode} from 'react';
-import {Button, type ButtonProps} from '../../button/Button.js';
-import {useTableContext} from '../TableContext.js';
-import {useTableActionContext} from './TableActionContext.js';
-import {Menu, type MenuItemProps} from '../../menu/Menu.js';
-
-export type TableActionItemStylesNames = 'actionItemRoot';
-
-export interface TableActionItemProps
-    extends Omit<ButtonProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'leftSection' | 'rightSection'>,
-        Omit<MenuItemProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'leftSection' | 'disabled'>,
-        CompoundStylesApiProps<TableActionItemFactory> {
-    /**
-     * Action label
-     */
-    children: ReactNode;
-    /**
-     * Content to put on the left of the label
-     */
-    leftSection?: ReactNode;
-}
-
-type TableActionItemFactory = PolymorphicFactory<{
-    props: TableActionItemProps;
-    defaultRef: HTMLButtonElement;
-    defaultComponent: 'button';
-    stylesNames: TableActionItemStylesNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<TableActionItemProps> = {};
-
-export const TableActionItem = polymorphicFactory<TableActionItemFactory>(
-    (props: TableActionItemProps & {component?: any}, ref) => {
-        const {getStyles} = useTableContext();
-        const {primary} = useTableActionContext();
-        const {
-            classNames,
-            className,
-            style,
-            styles,
-            vars: _vars,
-            children,
-            component,
-            ...others
-        } = useProps('PlasmaTableActionItem', defaultProps, props);
-
-        if (primary) {
-            return (
-                <Button.Quaternary
-                    component={component}
-                    ref={ref}
-                    {...others}
-                    {...getStyles('actionItemRoot', {className, style, classNames, styles})}
-                >
-                    {children}
-                </Button.Quaternary>
-            );
-        }
-
-        return (
-            <Menu.Item
-                component={component}
-                ref={ref}
-                {...others}
-                {...getStyles('actionItemRoot', {className, style, classNames, styles})}
-            >
-                {children}
-            </Menu.Item>
-        );
-    },
-);

package/src/components/table/table-actions/TableActionsList.tsx

@@ -1,207 +0,0 @@
-import {MoreSize16Px} from '@coveord/plasma-react-icons';
-import {
-    Box,
-    CompoundStylesApiProps,
-    CSSProperties,
-    ExtendComponent,
-    Factory,
-    Menu,
-    MenuProps,
-    Tooltip,
-    useProps,
-} from '@mantine/core';
-import {MouseEventHandler, ReactNode, useState} from 'react';
-import {ActionIcon} from '../../action-icon/ActionIcon.js';
-import {Button} from '../../button/Button.js';
-import {InlineConfirm} from '../../inline-confirm/InlineConfirm.js';
-import {TableAction} from '../Table.types.js';
-import {useTableContext} from '../TableContext.js';
-import {TableActionProvider} from './TableActionContext.js';
-
-export type TableActionsListStylesNames =
-    | 'actionsTarget'
-    | 'actionsDropdown'
-    | 'actionsTooltip'
-    | 'actionsGroup'
-    | 'actionsGroupLabel'
-    | 'actionsGroupDivider'
-    | 'actionsGroupItems';
-
-export interface TableActionsListProps
-    extends Omit<MenuProps, 'classNames' | 'styles' | 'vars' | 'variant'>,
-        CompoundStylesApiProps<TableActionsListFactory> {
-    actions: TableAction[];
-    /**
-     * Label for the more menu
-     * @default 'More' when variant is 'split', 'Actions' when variant is 'combined'
-     */
-    label?: string;
-    /**
-     * Label for the primary actions group when variant is 'combined'
-     * @default ''
-     */
-    primaryGroupLabel?: string;
-    icon?: ReactNode;
-}
-
-type TableActionsListFactory = Factory<{
-    props: TableActionsListProps;
-    ref: HTMLDivElement;
-    stylesNames: TableActionsListStylesNames;
-    compound: true;
-    variant: 'split' | 'combined';
-}>;
-
-const defaultProps: Partial<TableActionsListProps> = {
-    label: 'More',
-    primaryGroupLabel: '',
-    icon: <MoreSize16Px height={16} />,
-};
-
-interface ActionsDict {
-    $$primary: TableAction[];
-    $$confirmPrompt: TableAction[];
-    secondary: Record<string, Array<TableAction['component']>>;
-}
-
-interface ActionGroup {
-    name: string;
-    actions: ReactNode[];
-}
-
-export const TableActionsList = (props: TableActionsListProps) => {
-    const {getStyles} = useTableContext();
-    const {
-        actions,
-        icon,
-        label,
-        primaryGroupLabel,
-        classNames,
-        styles,
-        vars: _vars,
-        variant,
-        ...others
-    } = useProps('PlasmaTableActionsListColumn', defaultProps, props);
-    const [opened, setOpened] = useState(false);
-
-    const onClick: MouseEventHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setOpened((prevState) => !prevState);
-    };
-    const onChange = (newOpened: boolean) => {
-        if (!newOpened) {
-            setOpened(false);
-        }
-    };
-
-    const actionsGroups: ActionsDict = actions.reduce<ActionsDict>(
-        (acc, action) => {
-            if (action.group === '$$primary') {
-                acc.$$primary.push(action);
-            } else if (action.group === '$$confirmPrompt') {
-                acc.$$confirmPrompt.push(action);
-            } else {
-                if (acc.secondary[action.group]) {
-                    acc.secondary[action.group].push(action.component);
-                } else {
-                    acc.secondary[action.group] = [action.component];
-                }
-            }
-            return acc;
-        },
-        {$$primary: [], $$confirmPrompt: [], secondary: {}},
-    );
-
-    const primaryActions = actionsGroups.$$primary.map((action) => action.component);
-    const confirmPrompts = actionsGroups.$$confirmPrompt.map((confirmPromptAction) => confirmPromptAction.component);
-    const secondaryActionGroups = Object.entries(actionsGroups.secondary).map(
-        ([group, groupActions]): ActionGroup => ({
-            name: group,
-            actions: groupActions,
-        }),
-    );
-
-    if (variant === 'split') {
-        return (
-            <InlineConfirm>
-                {confirmPrompts}
-                <TableActionProvider value={{primary: true}}>{primaryActions}</TableActionProvider>
-                {secondaryActionGroups.length > 0 ? (
-                    <TableActionProvider value={{primary: false}}>
-                        <Menu withinPortal={false} {...others} keepMounted>
-                            <Menu.Target>
-                                <Button.Quaternary
-                                    {...getStyles('actionsTarget', {styles, classNames})}
-                                    leftSection={icon}
-                                >
-                                    {label}
-                                </Button.Quaternary>
-                            </Menu.Target>
-                            <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
-                                <ActionsGroupsMenuItems
-                                    classNames={classNames}
-                                    styles={styles}
-                                    actionGroups={secondaryActionGroups}
-                                />
-                            </Menu.Dropdown>
-                        </Menu>
-                    </TableActionProvider>
-                ) : null}
-            </InlineConfirm>
-        );
-    }
-    return (
-        <InlineConfirm>
-            {confirmPrompts}
-            <TableActionProvider value={{primary: false}}>
-                <Menu opened={opened} onChange={onChange} {...others} keepMounted>
-                    <Menu.Target>
-                        <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
-                            <ActionIcon.Quaternary
-                                {...getStyles('actionsTarget', {styles, classNames})}
-                                onClick={onClick}
-                            >
-                                {icon}
-                            </ActionIcon.Quaternary>
-                        </Tooltip>
-                    </Menu.Target>
-                    <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
-                        <ActionsGroupsMenuItems
-                            classNames={classNames}
-                            styles={styles}
-                            actionGroups={
-                                primaryActions.length > 0
-                                    ? [{name: primaryGroupLabel, actions: primaryActions}, ...secondaryActionGroups]
-                                    : secondaryActionGroups
-                            }
-                        />
-                    </Menu.Dropdown>
-                </Menu>
-            </TableActionProvider>
-        </InlineConfirm>
-    );
-};
-
-interface ActionsGroupsMenuItemsProps {
-    styles: Partial<Record<TableActionsListStylesNames, CSSProperties>>;
-    classNames: Partial<Record<TableActionsListStylesNames, string>>;
-    actionGroups: ActionGroup[];
-}
-
-const ActionsGroupsMenuItems = ({styles, classNames, actionGroups}: ActionsGroupsMenuItemsProps) => {
-    const {getStyles} = useTableContext();
-    return actionGroups.map(({name, actions}, index) => (
-        <Box key={name} {...getStyles('actionsGroup', {styles, classNames})}>
-            {actionGroups.length > 1 ? (
-                <Menu.Label {...getStyles('actionsGroupLabel', {styles, classNames})}>{name}</Menu.Label>
-            ) : null}
-            <Box {...getStyles('actionsGroupItems', {styles, classNames})}>{actions}</Box>
-            {index < actionGroups.length - 1 ? (
-                <Menu.Divider {...getStyles('actionsGroupDivider', {styles, classNames})} />
-            ) : null}
-        </Box>
-    ));
-};
-
-TableActionsList.extend = (input: ExtendComponent<TableActionsListFactory>) => input;

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -1,90 +0,0 @@
-import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';
-import {Factory, factory, useProps} from '@mantine/core';
-import {CellContext, ColumnDef} from '@tanstack/table-core';
-import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
-import {ActionIcon, type ActionIconProps} from '../../action-icon/ActionIcon.js';
-import {useTableContext} from '../TableContext.js';
-
-export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';
-
-const sharedProps: ColumnDef<unknown> = {
-    id: 'collapsible',
-    enableSorting: false,
-    enableHiding: false,
-    meta: {
-        controlColumn: true,
-    },
-    header: '',
-    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
-};
-
-/**
- * Generic column to use when your table needs collapsible rows
- */
-export const TableCollapsibleColumn: ColumnDef<unknown> = {
-    ...sharedProps,
-    cell: (info) => <CollapsibleIcon info={info} />,
-};
-
-/**
- * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
- */
-export const TableAccordionColumn: ColumnDef<unknown> = {
-    ...sharedProps,
-    cell: (info) => {
-        const onToggle = () => {
-            // close all other rows when the current row not is expanded
-            if (!info.row.getIsExpanded()) {
-                info.table.toggleAllRowsExpanded(false);
-            }
-        };
-
-        return <CollapsibleIcon onToggle={onToggle} info={info} />;
-    },
-};
-
-interface CollapsibleIconProps extends ActionIconProps {
-    info: CellContext<unknown, unknown>;
-    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
-    iconExpanded?: ReactNode;
-    iconCollapsed?: ReactNode;
-}
-
-type TableCollapsibleColumnFactory = Factory<{
-    props: CollapsibleIconProps;
-    ref: HTMLButtonElement;
-    stylesNames: TableCollapsibleColumnStylesNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<CollapsibleIconProps> = {
-    iconExpanded: <IconChevronUp aria-label="Collapse" size={16} />,
-    iconCollapsed: <IconChevronDown aria-label="Expand" size={16} />,
-};
-
-const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
-    const {getStyles} = useTableContext();
-    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(
-        'PlasmaTableCollapsibleColumn',
-        defaultProps,
-        props,
-    );
-    const handler = info.row.getToggleExpandedHandler();
-    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation();
-        onToggle?.(e);
-        handler();
-    };
-    return info.row.getCanExpand() ? (
-        <ActionIcon.Quaternary
-            ref={ref}
-            onClick={onClick}
-            color="gray"
-            radius="sm"
-            {...getStyles('collapsibleIcon', {className, classNames, styles, style})}
-            {...others}
-        >
-            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}
-        </ActionIcon.Quaternary>
-    ) : null;
-});

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -1,104 +0,0 @@
-import {CalendarSize16Px} from '@coveord/plasma-react-icons';
-import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, InputBase, Popover, useProps} from '@mantine/core';
-import dayjs from 'dayjs';
-
-import {type DatesRangeValue, type DateStringValue} from '@mantine/dates';
-import {useState} from 'react';
-import {
-    DateRangePickerInlineCalendar,
-    DateRangePickerInlineCalendarProps,
-} from '../../date-range-picker/DateRangePickerInlineCalendar.js';
-import {DateRangePickerPreset} from '../../date-range-picker/DateRangePickerPresetSelect.js';
-import {TableComponentsOrder} from '../Table.js';
-import {useTableContext} from '../TableContext.js';
-
-export type TableDateRangePickerStylesNames = 'dateRangeRoot';
-
-export interface TableDateRangePickerProps
-    extends BoxProps,
-        CompoundStylesApiProps<TableDateRangePickerFactory>,
-        Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
-    /**
-     * An object containing date presets.
-     * If empty the preset dropdown won't be shown
-     *
-     * @example
-     * {
-     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
-     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
-     * }
-     * @default {}
-     */
-    presets?: Record<string, DateRangePickerPreset>;
-}
-
-export type TableDateRangePickerFactory = Factory<{
-    props: TableDateRangePickerProps;
-    ref: HTMLDivElement;
-    stylesNames: TableDateRangePickerStylesNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<TableDateRangePickerProps> = {
-    presets: {},
-};
-
-export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {
-    const {store, getStyles} = useTableContext();
-    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(
-        'PlasmaTableDateRangePicker',
-        defaultProps,
-        props,
-    );
-    const [opened, setOpened] = useState(false);
-
-    const onApply = (dates: DatesRangeValue<DateStringValue | null>) => {
-        store.setDateRange(dates);
-        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});
-        setOpened(false);
-    };
-
-    const onCancel = () => {
-        setOpened(false);
-    };
-
-    const formatDate = (date: DateStringValue) => dayjs(date).format('MMM D, YYYY');
-    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
-    const dateRangeInitialized = store.state.dateRange.every(
-        (date: DateStringValue) => typeof date === 'string' && date !== '',
-    );
-
-    const stylesApiProps = {classNames, styles};
-
-    return (
-        <Grid.Col
-            span="content"
-            order={TableComponentsOrder.DateRangePicker}
-            ref={ref}
-            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}
-            {...others}
-        >
-            <Popover opened={opened} onChange={setOpened}>
-                <Popover.Target>
-                    <InputBase
-                        component="button"
-                        leftSection={<CalendarSize16Px height={16} />}
-                        miw={220}
-                        onClick={() => setOpened(true)}
-                    >
-                        {dateRangeInitialized ? formattedRange : 'Select date range'}
-                    </InputBase>
-                </Popover.Target>
-                <Popover.Dropdown p={0}>
-                    <DateRangePickerInlineCalendar
-                        initialRange={store.state.dateRange}
-                        onApply={onApply}
-                        onCancel={onCancel}
-                        presets={presets}
-                        rangeCalendarProps={rangeCalendarProps}
-                    />
-                </Popover.Dropdown>
-            </Popover>
-        </Grid.Col>
-    );
-});

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,90 +0,0 @@
-import {IconSearch, IconX} from '@coveord/plasma-react-icons';
-import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, useProps} from '@mantine/core';
-import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
-import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
-
-import {ActionIcon} from '../../action-icon/ActionIcon.js';
-import {TableComponentsOrder} from '../Table.js';
-import {useTableContext} from '../TableContext.js';
-
-export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
-
-export interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {
-    /**
-     * The placeholder for the filter input
-     *
-     * @default "Search by any field"
-     */
-    placeholder?: string;
-}
-
-export type TableFilterFactory = Factory<{
-    props: TableFilterProps;
-    ref: HTMLDivElement;
-    stylesNames: TableFilterStylesNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<TableFilterProps> = {
-    placeholder: 'Search by any field',
-};
-
-export const TableFilter = factory<TableFilterFactory>((props, ref) => {
-    const {store, getStyles} = useTableContext();
-    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(
-        'PlasmaTableFilter',
-        defaultProps,
-        props,
-    );
-    const [filter, setFilter] = useState(store.state.globalFilter);
-    const [debounced, cancel] = useDebouncedValue(filter, 300);
-
-    useDidUpdate(() => {
-        store.setGlobalFilter(debounced);
-        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});
-
-        return cancel;
-    }, [debounced]);
-
-    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-        const {value} = event.currentTarget;
-        setFilter(value);
-    };
-
-    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
-        setFilter('');
-    };
-
-    useEffect(() => {
-        setFilter(store.state.globalFilter);
-    }, [store.state.globalFilter]);
-
-    const stylesApiProps = {classNames, styles};
-
-    return (
-        <Grid.Col
-            span="content"
-            order={TableComponentsOrder.Filter}
-            ref={ref}
-            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}
-            {...others}
-        >
-            <TextInput
-                {...getStyles('filterWrapper', stylesApiProps)}
-                placeholder={placeholder}
-                autoComplete="off"
-                rightSection={
-                    filter ? (
-                        <ActionIcon.Quaternary onClick={handleClear}>
-                            <IconX aria-label="clear" size={16} />
-                        </ActionIcon.Quaternary>
-                    ) : (
-                        <IconSearch size={16} {...getStyles('filterEmpty', stylesApiProps)} />
-                    )
-                }
-                value={filter}
-                onChange={handleChange}
-            />
-        </Grid.Col>
-    );
-});

package/src/components/table/table-header/TableHeader.tsx

@@ -1,105 +0,0 @@
-import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
-import {ReactNode} from 'react';
-
-import {Button} from '../../button/Button.js';
-import {TableLayoutControl} from '../layouts/TableLayoutControl.js';
-import {TableComponentsOrder} from '../Table.js';
-import {TableHeaderActions} from '../table-actions/TableHeaderActions.js';
-import {useTableContext} from '../TableContext.js';
-
-export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';
-
-export interface TableHeaderProps
-    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,
-        CompoundStylesApiProps<TableHeaderFactory> {
-    /* Children of header (ie: actions, datepicker, etc.) */
-    children?: ReactNode;
-    unselectAllLabel?: string;
-    selectedCountLabel?: (count: number) => string;
-    /**
-     * Whether to show actions when rows are selected
-     *
-     * default true
-     */
-    showActions?: boolean;
-    /**
-     * Whether to show a border on top of the header
-     *
-     * default true
-     */
-    borderTop?: boolean;
-}
-
-export type TableHeaderFactory = Factory<{
-    props: TableHeaderProps;
-    ref: HTMLDivElement;
-    stylesNames: TableHeaderStylesNames;
-    compound: true;
-}>;
-
-const defaultProps: Partial<TableHeaderProps> = {
-    unselectAllLabel: 'Unselect all',
-    selectedCountLabel: (count) => `${count} selected`,
-    showActions: true,
-    borderTop: true,
-};
-
-export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
-    const {store, getStyles} = useTableContext();
-    const {
-        showActions,
-        unselectAllLabel,
-        selectedCountLabel,
-        borderTop,
-        children,
-        classNames,
-        className,
-        styles,
-        style,
-        vars: _vars,
-        ...others
-    } = useProps('PlasmaTableHeader', defaultProps, props);
-    const selectedRows = store.getSelectedRows();
-
-    const stylesApiProps = {classNames, styles};
-    const innerStyles = getStyles('headerGridInner', stylesApiProps);
-    const gridStyles = getStyles('headerGrid', stylesApiProps);
-
-    return (
-        <Box
-            ref={ref}
-            {...getStyles('headerRoot', {className, style, ...stylesApiProps})}
-            {...others}
-            mod={{'with-border-top': borderTop}}
-        >
-            <Grid
-                justify="flex-start"
-                align="center"
-                classNames={{inner: innerStyles.className, root: gridStyles.className}}
-                styles={{inner: innerStyles.style, root: gridStyles.style}}
-            >
-                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (
-                    <Grid.Col
-                        span="auto"
-                        {...getStyles('headerCol', stylesApiProps)}
-                        order={TableComponentsOrder.MultiSelectInfo}
-                    >
-                        <Tooltip label={unselectAllLabel}>
-                            <Button.Quaternary
-                                onClick={store.clearRowSelection}
-                                disabled={!store.rowSelectionEnabled}
-                                leftSection={<CrossSize16Px height={16} />}
-                            >
-                                {selectedCountLabel(selectedRows.length)}
-                            </Button.Quaternary>
-                        </Tooltip>
-                    </Grid.Col>
-                ) : null}
-                {children}
-                {showActions ? <TableHeaderActions /> : null}
-                <TableLayoutControl />
-            </Grid>
-        </Box>
-    );
-});