@coveord/plasma-mantine 55.8.0 → 56.0.0

package/dist/esm/components/table/table-actions/TableActionsList.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreSize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, Box, Button, Menu, Tooltip, useProps } from '@mantine/core';
+import { Box, Menu, Tooltip, useProps } from '@mantine/core';
 import { useState } from 'react';
+import { ActionIcon } from '../../action-icon';
+import { Button } from '../../button';
 import { InlineConfirm } from '../../inline-confirm';
 import { useTableContext } from '../TableContext';
 import { TableActionProvider } from './TableActionContext';
@@ -72,12 +74,11 @@ export const TableActionsList = (props)=>{
                         keepMounted: true,
                         children: [
                             /*#__PURE__*/ _jsx(Menu.Target, {
-                                children: /*#__PURE__*/ _jsx(Button, {
+                                children: /*#__PURE__*/ _jsx(Button.Quaternary, {
                                     ...getStyles('actionsTarget', {
                                         styles,
                                         classNames
                                     }),
-                                    variant: "subtle",
                                     leftSection: icon,
                                     children: label
                                 })
@@ -119,13 +120,12 @@ export const TableActionsList = (props)=>{
                                     styles,
                                     classNames
                                 }),
-                                children: /*#__PURE__*/ _jsx(ActionIcon, {
+                                children: /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
                                     ...getStyles('actionsTarget', {
                                         styles,
                                         classNames
                                     }),
                                     onClick: onClick,
-                                    variant: "subtle",
                                     children: icon
                                 })
                             })

package/dist/esm/components/table/table-actions/TableActionsList.js.map

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

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowHeadDownSize16Px, ArrowHeadUpSize16Px } from '@coveord/plasma-react-icons';
+import { IconChevronDown, IconChevronUp } from '@coveord/plasma-react-icons';
 import { factory, useProps } from '@mantine/core';
 import { ActionIcon } from '../../action-icon';
 import { useTableContext } from '../TableContext';
@@ -39,11 +39,13 @@ const sharedProps = {
     }
 };
 const defaultProps = {
-    iconExpanded: /*#__PURE__*/ _jsx(ArrowHeadUpSize16Px, {
-        height: 16
+    iconExpanded: /*#__PURE__*/ _jsx(IconChevronUp, {
+        "aria-label": "Collapse",
+        size: 16
     }),
-    iconCollapsed: /*#__PURE__*/ _jsx(ArrowHeadDownSize16Px, {
-        height: 16
+    iconCollapsed: /*#__PURE__*/ _jsx(IconChevronDown, {
+        "aria-label": "Expand",
+        size: 16
     })
 };
 const CollapsibleIcon = factory((props, ref)=>{
@@ -55,10 +57,9 @@ const CollapsibleIcon = factory((props, ref)=>{
         onToggle?.(e);
         handler();
     };
-    return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
+    return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
         ref: ref,
         onClick: onClick,
-        variant: "subtle",
         color: "gray",
         radius: "sm",
         ...getStyles('collapsibleIcon', {

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Factory, factory, useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent, ReactNode} from 'react';\nimport {ActionIcon, ActionIconProps} from '../../action-icon';\nimport {useTableContext} from '../TableContext';\n\nexport type TableCollapsibleColumnStylesNames = 'collapsibleIcon';\n\nconst sharedProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    enableHiding: false,\n    meta: {\n        controlColumn: true,\n    },\n    header: '',\n    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\ninterface CollapsibleIconProps extends ActionIconProps {\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n    iconExpanded?: ReactNode;\n    iconCollapsed?: ReactNode;\n}\n\ntype TableCollapsibleColumnFactory = Factory<{\n    props: CollapsibleIconProps;\n    ref: HTMLButtonElement;\n    stylesNames: TableCollapsibleColumnStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<CollapsibleIconProps> = {\n    iconExpanded: <ArrowHeadUpSize16Px height={16} />,\n    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,\n};\n\nconst CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {\n    const {getStyles} = useTableContext();\n    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(\n        'PlasmaTableCollapsibleColumn',\n        defaultProps,\n        props,\n    );\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon\n            ref={ref}\n            onClick={onClick}\n            variant=\"subtle\"\n            color=\"gray\"\n            radius=\"sm\"\n            {...getStyles('collapsibleIcon', {className, classNames, styles, style})}\n            {...others}\n        >\n            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}\n        </ActionIcon>\n    ) : null;\n});\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","factory","useProps","ActionIcon","useTableContext","sharedProps","id","enableSorting","enableHiding","meta","controlColumn","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","defaultProps","iconExpanded","height","iconCollapsed","props","ref","getStyles","classNames","className","style","styles","others","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","color","radius"],"mappings":";AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAiBC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAGzD,SAAQC,UAAU,QAAwB,oBAAoB;AAC9D,SAAQC,eAAe,QAAO,kBAAkB;AAIhD,MAAMC,cAAkC;IACpCC,IAAI;IACJC,eAAe;IACfC,cAAc;IACdC,MAAM;QACFC,eAAe;IACnB;IACAC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAA6C;IACtD,GAAGR,WAAW;IACdS,MAAM,CAACC,qBAAS,KAACC;YAAgBD,MAAMA;;AAC3C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAME,uBAA2C;IACpD,GAAGZ,WAAW;IACdS,MAAM,CAACC;QACH,MAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;AACJ,EAAE;AAgBF,MAAMQ,eAA8C;IAChDC,4BAAc,KAACxB;QAAoByB,QAAQ;;IAC3CC,6BAAe,KAAC3B;QAAsB0B,QAAQ;;AAClD;AAEA,MAAMT,kBAAkBf,QAAuC,CAAC0B,OAAOC;IACnE,MAAM,EAACC,SAAS,EAAC,GAAGzB;IACpB,MAAM,EAACW,IAAI,EAAEG,QAAQ,EAAEM,YAAY,EAAEE,aAAa,EAAEI,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,QAAO,GAAGhC,SACnG,gCACAqB,cACAI;IAEJ,MAAMQ,UAAUpB,KAAKI,GAAG,CAACiB,wBAAwB;IACjD,MAAMC,UAAU,CAACC;QACbA,EAAEC,eAAe;QACjBrB,WAAWoB;QACXH;IACJ;IACA,OAAOpB,KAAKI,GAAG,CAACqB,YAAY,mBACxB,KAACrC;QACGyB,KAAKA;QACLS,SAASA;QACTI,SAAQ;QACRC,OAAM;QACNC,QAAO;QACN,GAAGd,UAAU,mBAAmB;YAACE;YAAWD;YAAYG;YAAQD;QAAK,EAAE;QACvE,GAAGE,MAAM;kBAETnB,KAAKI,GAAG,CAACC,aAAa,KAAKI,eAAeE;SAE/C;AACR"}
+{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';\nimport {Factory, factory, useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent, ReactNode} from 'react';\nimport {ActionIcon, ActionIconProps} from '../../action-icon';\nimport {useTableContext} from '../TableContext';\n\nexport type TableCollapsibleColumnStylesNames = 'collapsibleIcon';\n\nconst sharedProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    enableHiding: false,\n    meta: {\n        controlColumn: true,\n    },\n    header: '',\n    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\ninterface CollapsibleIconProps extends ActionIconProps {\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n    iconExpanded?: ReactNode;\n    iconCollapsed?: ReactNode;\n}\n\ntype TableCollapsibleColumnFactory = Factory<{\n    props: CollapsibleIconProps;\n    ref: HTMLButtonElement;\n    stylesNames: TableCollapsibleColumnStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<CollapsibleIconProps> = {\n    iconExpanded: <IconChevronUp aria-label=\"Collapse\" size={16} />,\n    iconCollapsed: <IconChevronDown aria-label=\"Expand\" size={16} />,\n};\n\nconst CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {\n    const {getStyles} = useTableContext();\n    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(\n        'PlasmaTableCollapsibleColumn',\n        defaultProps,\n        props,\n    );\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon.Quaternary\n            ref={ref}\n            onClick={onClick}\n            color=\"gray\"\n            radius=\"sm\"\n            {...getStyles('collapsibleIcon', {className, classNames, styles, style})}\n            {...others}\n        >\n            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}\n        </ActionIcon.Quaternary>\n    ) : null;\n});\n"],"names":["IconChevronDown","IconChevronUp","factory","useProps","ActionIcon","useTableContext","sharedProps","id","enableSorting","enableHiding","meta","controlColumn","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","defaultProps","iconExpanded","aria-label","iconCollapsed","props","ref","getStyles","classNames","className","style","styles","others","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","Quaternary","color","radius"],"mappings":";AAAA,SAAQA,eAAe,EAAEC,aAAa,QAAO,8BAA8B;AAC3E,SAAiBC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAGzD,SAAQC,UAAU,QAAwB,oBAAoB;AAC9D,SAAQC,eAAe,QAAO,kBAAkB;AAIhD,MAAMC,cAAkC;IACpCC,IAAI;IACJC,eAAe;IACfC,cAAc;IACdC,MAAM;QACFC,eAAe;IACnB;IACAC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAA6C;IACtD,GAAGR,WAAW;IACdS,MAAM,CAACC,qBAAS,KAACC;YAAgBD,MAAMA;;AAC3C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAME,uBAA2C;IACpD,GAAGZ,WAAW;IACdS,MAAM,CAACC;QACH,MAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;AACJ,EAAE;AAgBF,MAAMQ,eAA8C;IAChDC,4BAAc,KAACxB;QAAcyB,cAAW;QAAWb,MAAM;;IACzDc,6BAAe,KAAC3B;QAAgB0B,cAAW;QAASb,MAAM;;AAC9D;AAEA,MAAMI,kBAAkBf,QAAuC,CAAC0B,OAAOC;IACnE,MAAM,EAACC,SAAS,EAAC,GAAGzB;IACpB,MAAM,EAACW,IAAI,EAAEG,QAAQ,EAAEM,YAAY,EAAEE,aAAa,EAAEI,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,QAAO,GAAGhC,SACnG,gCACAqB,cACAI;IAEJ,MAAMQ,UAAUpB,KAAKI,GAAG,CAACiB,wBAAwB;IACjD,MAAMC,UAAU,CAACC;QACbA,EAAEC,eAAe;QACjBrB,WAAWoB;QACXH;IACJ;IACA,OAAOpB,KAAKI,GAAG,CAACqB,YAAY,mBACxB,KAACrC,WAAWsC,UAAU;QAClBb,KAAKA;QACLS,SAASA;QACTK,OAAM;QACNC,QAAO;QACN,GAAGd,UAAU,mBAAmB;YAACE;YAAWD;YAAYG;YAAQD;QAAK,EAAE;QACvE,GAAGE,MAAM;kBAETnB,KAAKI,GAAG,CAACC,aAAa,KAAKI,eAAeE;SAE/C;AACR"}

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAIrH,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EA+DhB,CAAC"}
+{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAA8C,MAAM,eAAe,CAAC;AAKrH,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EACxB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,+BAA+B,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,yBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,2BAA2B,CAAC,EACnD,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC;IAC9F;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC;IAC9C,KAAK,EAAE,yBAAyB,CAAC;IACjC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,oBAAoB;WAVtB,yBAAyB;SAC3B,cAAc;iBACN,+BAA+B;cAClC,IAAI;EAiEhB,CAAC"}

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CalendarSize16Px } from '@coveord/plasma-react-icons';
-import { Grid, InputBase, Popover, factory, useProps } from '@mantine/core';
+import { factory, Grid, InputBase, Popover, useProps } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import { DateRangePickerInlineCalendar } from '../../date-range-picker';
@@ -26,7 +26,7 @@ export const TableDateRangePicker = factory((props, ref)=>{
     };
     const formatDate = (date)=>dayjs(date).format('MMM DD, YYYY');
     const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
-    const dateRangeInitialized = store.state.dateRange.every((date)=>date instanceof Date);
+    const dateRangeInitialized = store.state.dateRange.every((date)=>typeof date === 'string' && date !== '');
     const stylesApiProps = {
         classNames,
         styles
@@ -42,7 +42,6 @@ export const TableDateRangePicker = factory((props, ref)=>{
         }),
         ...others,
         children: /*#__PURE__*/ _jsxs(Popover, {
-            withinPortal: true,
             opened: opened,
             onChange: setOpened,
             children: [

package/dist/esm/components/table/table-date-range-picker/TableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';\nimport dayjs from 'dayjs';\n\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n\n    const onApply = (dates: DateRangePickerValue) => {\n        store.setDateRange(dates);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\n        setOpened(false);\n    };\n\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;\n    const dateRangeInitialized = store.state.dateRange.every((date) => date instanceof Date);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover withinPortal opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={store.state.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["CalendarSize16Px","Grid","InputBase","Popover","factory","useProps","dayjs","useState","DateRangePickerInlineCalendar","TableComponentsOrder","useTableContext","defaultProps","presets","TableDateRangePicker","props","ref","store","getStyles","rangeCalendarProps","classNames","className","styles","style","vars","others","opened","setOpened","onApply","dates","setDateRange","setPagination","pageIndex","pageSize","state","pagination","onCancel","formatDate","date","format","formattedRange","dateRange","dateRangeInitialized","every","Date","stylesApiProps","Col","span","order","DateRangePicker","withinPortal","onChange","Target","component","leftSection","height","miw","onClick","Dropdown","p","initialRange"],"mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAmDC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AACrH,OAAOC,WAAW,QAAQ;AAE1B,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SACIC,6BAA6B,QAI1B,0BAA0B;AACjC,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AA6BhD,MAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEA,OAAO,MAAMC,uBAAuBT,QAAqC,CAACU,OAAOC;IAC7E,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,OAAO,EAAEM,kBAAkB,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzF,8BACAM,cACAG;IAEJ,MAAM,CAACW,QAAQC,UAAU,GAAGnB,SAAS;IAErC,MAAMoB,UAAU,CAACC;QACbZ,MAAMa,YAAY,CAACD;QACnBZ,MAAMc,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUhB,MAAMiB,KAAK,CAACC,UAAU,CAACF,QAAQ;QAAA;QAC5EN,UAAU;IACd;IAEA,MAAMS,WAAW;QACbT,UAAU;IACd;IAEA,MAAMU,aAAa,CAACC,OAAe/B,MAAM+B,MAAMC,MAAM,CAAC;IACtD,MAAMC,iBAAiB,GAAGH,WAAWpB,MAAMiB,KAAK,CAACO,SAAS,CAAC,EAAE,EAAE,GAAG,EAAEJ,WAAWpB,MAAMiB,KAAK,CAACO,SAAS,CAAC,EAAE,GAAG;IAC1G,MAAMC,uBAAuBzB,MAAMiB,KAAK,CAACO,SAAS,CAACE,KAAK,CAAC,CAACL,OAASA,gBAAgBM;IAEnF,MAAMC,iBAAiB;QAACzB;QAAYE;IAAM;IAE1C,qBACI,KAACpB,KAAK4C,GAAG;QACLC,MAAK;QACLC,OAAOtC,qBAAqBuC,eAAe;QAC3CjC,KAAKA;QACJ,GAAGE,UAAU,iBAAiB;YAACG;YAAWE;YAAO,GAAGsB,cAAc;QAAA,EAAE;QACpE,GAAGpB,MAAM;kBAEV,cAAA,MAACrB;YAAQ8C,YAAY;YAACxB,QAAQA;YAAQyB,UAAUxB;;8BAC5C,KAACvB,QAAQgD,MAAM;8BACX,cAAA,KAACjD;wBACGkD,WAAU;wBACVC,2BAAa,KAACrD;4BAAiBsD,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS,IAAM9B,UAAU;kCAExBe,uBAAuBF,iBAAiB;;;8BAGjD,KAACpC,QAAQsD,QAAQ;oBAACC,GAAG;8BACjB,cAAA,KAAClD;wBACGmD,cAAc3C,MAAMiB,KAAK,CAACO,SAAS;wBACnCb,SAASA;wBACTQ,UAAUA;wBACVvB,SAASA;wBACTM,oBAAoBA;;;;;;AAM5C,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-date-range-picker/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize16Px} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, InputBase, Popover, useProps} from '@mantine/core';\nimport dayjs from 'dayjs';\n\nimport {type DatesRangeValue, type DateStringValue} from '@mantine/dates';\nimport {useState} from 'react';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n} from '../../date-range-picker';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableDateRangePickerStylesNames = 'dateRangeRoot';\n\nexport interface TableDateRangePickerProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableDateRangePickerFactory>,\n        Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport type TableDateRangePickerFactory = Factory<{\n    props: TableDateRangePickerProps;\n    ref: HTMLDivElement;\n    stylesNames: TableDateRangePickerStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableDateRangePickerProps> = {\n    presets: {},\n};\n\nexport const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableDateRangePicker',\n        defaultProps,\n        props,\n    );\n    const [opened, setOpened] = useState(false);\n\n    const onApply = (dates: DatesRangeValue<DateStringValue | null>) => {\n        store.setDateRange(dates);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\n        setOpened(false);\n    };\n\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: DateStringValue) => dayjs(date).format('MMM DD, YYYY');\n    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;\n    const dateRangeInitialized = store.state.dateRange.every(\n        (date: DateStringValue) => typeof date === 'string' && date !== '',\n    );\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.DateRangePicker}\n            ref={ref}\n            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <InputBase\n                        component=\"button\"\n                        leftSection={<CalendarSize16Px height={16} />}\n                        miw={220}\n                        onClick={() => setOpened(true)}\n                    >\n                        {dateRangeInitialized ? formattedRange : 'Select date range'}\n                    </InputBase>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={store.state.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </Grid.Col>\n    );\n});\n"],"names":["CalendarSize16Px","factory","Grid","InputBase","Popover","useProps","dayjs","useState","DateRangePickerInlineCalendar","TableComponentsOrder","useTableContext","defaultProps","presets","TableDateRangePicker","props","ref","store","getStyles","rangeCalendarProps","classNames","className","styles","style","vars","others","opened","setOpened","onApply","dates","setDateRange","setPagination","pageIndex","pageSize","state","pagination","onCancel","formatDate","date","format","formattedRange","dateRange","dateRangeInitialized","every","stylesApiProps","Col","span","order","DateRangePicker","onChange","Target","component","leftSection","height","miw","onClick","Dropdown","p","initialRange"],"mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAmDC,OAAO,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AACrH,OAAOC,WAAW,QAAQ;AAG1B,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SACIC,6BAA6B,QAG1B,0BAA0B;AACjC,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AA6BhD,MAAMC,eAAmD;IACrDC,SAAS,CAAC;AACd;AAEA,OAAO,MAAMC,uBAAuBZ,QAAqC,CAACa,OAAOC;IAC7E,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,OAAO,EAAEM,kBAAkB,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzF,8BACAM,cACAG;IAEJ,MAAM,CAACW,QAAQC,UAAU,GAAGnB,SAAS;IAErC,MAAMoB,UAAU,CAACC;QACbZ,MAAMa,YAAY,CAACD;QACnBZ,MAAMc,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUhB,MAAMiB,KAAK,CAACC,UAAU,CAACF,QAAQ;QAAA;QAC5EN,UAAU;IACd;IAEA,MAAMS,WAAW;QACbT,UAAU;IACd;IAEA,MAAMU,aAAa,CAACC,OAA0B/B,MAAM+B,MAAMC,MAAM,CAAC;IACjE,MAAMC,iBAAiB,GAAGH,WAAWpB,MAAMiB,KAAK,CAACO,SAAS,CAAC,EAAE,EAAE,GAAG,EAAEJ,WAAWpB,MAAMiB,KAAK,CAACO,SAAS,CAAC,EAAE,GAAG;IAC1G,MAAMC,uBAAuBzB,MAAMiB,KAAK,CAACO,SAAS,CAACE,KAAK,CACpD,CAACL,OAA0B,OAAOA,SAAS,YAAYA,SAAS;IAGpE,MAAMM,iBAAiB;QAACxB;QAAYE;IAAM;IAE1C,qBACI,KAACnB,KAAK0C,GAAG;QACLC,MAAK;QACLC,OAAOrC,qBAAqBsC,eAAe;QAC3ChC,KAAKA;QACJ,GAAGE,UAAU,iBAAiB;YAACG;YAAWE;YAAO,GAAGqB,cAAc;QAAA,EAAE;QACpE,GAAGnB,MAAM;kBAEV,cAAA,MAACpB;YAAQqB,QAAQA;YAAQuB,UAAUtB;;8BAC/B,KAACtB,QAAQ6C,MAAM;8BACX,cAAA,KAAC9C;wBACG+C,WAAU;wBACVC,2BAAa,KAACnD;4BAAiBoD,QAAQ;;wBACvCC,KAAK;wBACLC,SAAS,IAAM5B,UAAU;kCAExBe,uBAAuBF,iBAAiB;;;8BAGjD,KAACnC,QAAQmD,QAAQ;oBAACC,GAAG;8BACjB,cAAA,KAAChD;wBACGiD,cAAczC,MAAMiB,KAAK,CAACO,SAAS;wBACnCb,SAASA;wBACTQ,UAAUA;wBACVvB,SAASA;wBACTM,oBAAoBA;;;;;;AAM5C,GAAG"}

package/dist/esm/components/table/table-filter/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAqC,MAAM,eAAe,CAAC;AAOxH,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,kBAAkB,CAAC;IAC1F;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,WAAW;WAVb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAiEhB,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAE,OAAO,EAAqC,MAAM,eAAe,CAAC;AAQ5G,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,eAAe,GAAG,aAAa,CAAC;AAEpF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,kBAAkB,CAAC;IAC1F;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,WAAW;WAVb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAiEhB,CAAC"}

package/dist/esm/components/table/table-filter/TableFilter.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CrossSize16Px, FilterSize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, Grid, TextInput, factory, useProps } from '@mantine/core';
+import { IconSearch, IconX } from '@coveord/plasma-react-icons';
+import { factory, Grid, TextInput, useProps } from '@mantine/core';
 import { useDebouncedValue, useDidUpdate } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
+import { ActionIcon } from '../../action-icon';
 import { TableComponentsOrder } from '../Table';
 import { useTableContext } from '../TableContext';
 const defaultProps = {
@@ -53,15 +54,14 @@ export const TableFilter = factory((props, ref)=>{
             ...getStyles('filterWrapper', stylesApiProps),
             placeholder: placeholder,
             autoComplete: "off",
-            rightSection: filter ? /*#__PURE__*/ _jsx(ActionIcon, {
+            rightSection: filter ? /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
                 onClick: handleClear,
-                color: "gray",
-                variant: "subtle",
-                children: /*#__PURE__*/ _jsx(CrossSize16Px, {
-                    height: 16
+                children: /*#__PURE__*/ _jsx(IconX, {
+                    "aria-label": "clear",
+                    size: 16
                 })
-            }) : /*#__PURE__*/ _jsx(FilterSize16Px, {
-                height: 16,
+            }) : /*#__PURE__*/ _jsx(IconSearch, {
+                size: 16,
                 ...getStyles('filterEmpty', stylesApiProps)
             }),
             value: filter,

package/dist/esm/components/table/table-filter/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';\n\nexport interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport type TableFilterFactory = Factory<{\n    props: TableFilterProps;\n    ref: HTMLDivElement;\n    stylesNames: TableFilterStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableFilterProps> = {\n    placeholder: 'Search by any field',\n};\n\nexport const TableFilter = factory<TableFilterFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const [filter, setFilter] = useState(store.state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        store.setGlobalFilter(debounced);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\n\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(store.state.globalFilter);\n    }, [store.state.globalFilter]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.Filter}\n            ref={ref}\n            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...getStyles('filterWrapper', stylesApiProps)}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear} color=\"gray\" variant=\"subtle\">\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n            />\n        </Grid.Col>\n    );\n});\n"],"names":["CrossSize16Px","FilterSize16Px","ActionIcon","Grid","TextInput","factory","useProps","useDebouncedValue","useDidUpdate","useEffect","useState","TableComponentsOrder","useTableContext","defaultProps","placeholder","TableFilter","props","ref","store","getStyles","classNames","className","styles","style","vars","others","filter","setFilter","state","globalFilter","debounced","cancel","setGlobalFilter","setPagination","pageIndex","pageSize","pagination","handleChange","event","value","currentTarget","handleClear","stylesApiProps","Col","span","order","Filter","autoComplete","rightSection","onClick","color","variant","height","onChange"],"mappings":";AAAA,SAAQA,aAAa,EAAEC,cAAc,QAAO,8BAA8B;AAC1E,SAAQC,UAAU,EAA6CC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AACxH,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAA+CC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEjF,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AAoBhD,MAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcV,QAA4B,CAACW,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,WAAW,EAAEM,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGnB,SACzE,qBACAO,cACAG;IAEJ,MAAM,CAACU,QAAQC,UAAU,GAAGjB,SAASQ,MAAMU,KAAK,CAACC,YAAY;IAC7D,MAAM,CAACC,WAAWC,OAAO,GAAGxB,kBAAkBmB,QAAQ;IAEtDlB,aAAa;QACTU,MAAMc,eAAe,CAACF;QACtBZ,MAAMe,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUjB,MAAMU,KAAK,CAACQ,UAAU,CAACD,QAAQ;QAAA;QAE5E,OAAOJ;IACX,GAAG;QAACD;KAAU;IAEd,MAAMO,eAAqD,CAACC;QACxD,MAAM,EAACC,KAAK,EAAC,GAAGD,MAAME,aAAa;QACnCb,UAAUY;IACd;IAEA,MAAME,cAAoD;QACtDd,UAAU;IACd;IAEAlB,UAAU;QACNkB,UAAUT,MAAMU,KAAK,CAACC,YAAY;IACtC,GAAG;QAACX,MAAMU,KAAK,CAACC,YAAY;KAAC;IAE7B,MAAMa,iBAAiB;QAACtB;QAAYE;IAAM;IAE1C,qBACI,KAACnB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOlC,qBAAqBmC,MAAM;QAClC7B,KAAKA;QACJ,GAAGE,UAAU,cAAc;YAACE;YAAWE;YAAO,GAAGmB,cAAc;QAAA,EAAE;QACjE,GAAGjB,MAAM;kBAEV,cAAA,KAACrB;YACI,GAAGe,UAAU,iBAAiBuB,eAAe;YAC9C5B,aAAaA;YACbiC,cAAa;YACbC,cACItB,uBACI,KAACxB;gBAAW+C,SAASR;gBAAaS,OAAM;gBAAOC,SAAQ;0BACnD,cAAA,KAACnD;oBAAcoD,QAAQ;;+BAG3B,KAACnD;gBAAemD,QAAQ;gBAAK,GAAGjC,UAAU,eAAeuB,eAAe;;YAGhFH,OAAOb;YACP2B,UAAUhB;;;AAI1B,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-filter/TableFilter.tsx"],"sourcesContent":["import {IconSearch, IconX} from '@coveord/plasma-react-icons';\nimport {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, useProps} from '@mantine/core';\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';\n\nimport {ActionIcon} from '../../action-icon';\nimport {TableComponentsOrder} from '../Table';\nimport {useTableContext} from '../TableContext';\n\nexport type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';\n\nexport interface TableFilterProps extends BoxProps, CompoundStylesApiProps<TableFilterFactory> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport type TableFilterFactory = Factory<{\n    props: TableFilterProps;\n    ref: HTMLDivElement;\n    stylesNames: TableFilterStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableFilterProps> = {\n    placeholder: 'Search by any field',\n};\n\nexport const TableFilter = factory<TableFilterFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableFilter',\n        defaultProps,\n        props,\n    );\n    const [filter, setFilter] = useState(store.state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        store.setGlobalFilter(debounced);\n        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});\n\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    useEffect(() => {\n        setFilter(store.state.globalFilter);\n    }, [store.state.globalFilter]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Grid.Col\n            span=\"content\"\n            order={TableComponentsOrder.Filter}\n            ref={ref}\n            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <TextInput\n                {...getStyles('filterWrapper', stylesApiProps)}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon.Quaternary onClick={handleClear}>\n                            <IconX aria-label=\"clear\" size={16} />\n                        </ActionIcon.Quaternary>\n                    ) : (\n                        <IconSearch size={16} {...getStyles('filterEmpty', stylesApiProps)} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n            />\n        </Grid.Col>\n    );\n});\n"],"names":["IconSearch","IconX","factory","Grid","TextInput","useProps","useDebouncedValue","useDidUpdate","useEffect","useState","ActionIcon","TableComponentsOrder","useTableContext","defaultProps","placeholder","TableFilter","props","ref","store","getStyles","classNames","className","styles","style","vars","others","filter","setFilter","state","globalFilter","debounced","cancel","setGlobalFilter","setPagination","pageIndex","pageSize","pagination","handleChange","event","value","currentTarget","handleClear","stylesApiProps","Col","span","order","Filter","autoComplete","rightSection","Quaternary","onClick","aria-label","size","onChange"],"mappings":";AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,8BAA8B;AAC9D,SAAmDC,OAAO,EAAEC,IAAI,EAAEC,SAAS,EAAEC,QAAQ,QAAO,gBAAgB;AAC5G,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,iBAAiB;AAC/D,SAA+CC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEjF,SAAQC,UAAU,QAAO,oBAAoB;AAC7C,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,eAAe,QAAO,kBAAkB;AAoBhD,MAAMC,eAA0C;IAC5CC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcb,QAA4B,CAACc,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,WAAW,EAAEM,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGpB,SACzE,qBACAQ,cACAG;IAEJ,MAAM,CAACU,QAAQC,UAAU,GAAGlB,SAASS,MAAMU,KAAK,CAACC,YAAY;IAC7D,MAAM,CAACC,WAAWC,OAAO,GAAGzB,kBAAkBoB,QAAQ;IAEtDnB,aAAa;QACTW,MAAMc,eAAe,CAACF;QACtBZ,MAAMe,aAAa,CAAC;YAACC,WAAW;YAAGC,UAAUjB,MAAMU,KAAK,CAACQ,UAAU,CAACD,QAAQ;QAAA;QAE5E,OAAOJ;IACX,GAAG;QAACD;KAAU;IAEd,MAAMO,eAAqD,CAACC;QACxD,MAAM,EAACC,KAAK,EAAC,GAAGD,MAAME,aAAa;QACnCb,UAAUY;IACd;IAEA,MAAME,cAAoD;QACtDd,UAAU;IACd;IAEAnB,UAAU;QACNmB,UAAUT,MAAMU,KAAK,CAACC,YAAY;IACtC,GAAG;QAACX,MAAMU,KAAK,CAACC,YAAY;KAAC;IAE7B,MAAMa,iBAAiB;QAACtB;QAAYE;IAAM;IAE1C,qBACI,KAACnB,KAAKwC,GAAG;QACLC,MAAK;QACLC,OAAOlC,qBAAqBmC,MAAM;QAClC7B,KAAKA;QACJ,GAAGE,UAAU,cAAc;YAACE;YAAWE;YAAO,GAAGmB,cAAc;QAAA,EAAE;QACjE,GAAGjB,MAAM;kBAEV,cAAA,KAACrB;YACI,GAAGe,UAAU,iBAAiBuB,eAAe;YAC9C5B,aAAaA;YACbiC,cAAa;YACbC,cACItB,uBACI,KAAChB,WAAWuC,UAAU;gBAACC,SAAST;0BAC5B,cAAA,KAACxC;oBAAMkD,cAAW;oBAAQC,MAAM;;+BAGpC,KAACpD;gBAAWoD,MAAM;gBAAK,GAAGjC,UAAU,eAAeuB,eAAe;;YAG1EH,OAAOb;YACP2B,UAAUhB;;;AAI1B,GAAG"}

package/dist/esm/components/table/table-header/TableHeader.d.ts

@@ -11,6 +11,12 @@ export interface TableHeaderProps extends Omit<BoxProps, 'classNames' | 'styles'
      * default true
      */
     showActions?: boolean;
+    /**
+     * Whether to show a border on top of the header
+     *
+     * default true
+     */
+    borderTop?: boolean;
 }
 export type TableHeaderFactory = Factory<{
     props: TableHeaderProps;

package/dist/esm/components/table/table-header/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACpD,sBAAsB,CAAC,kBAAkB,CAAC;IAE9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAQH,eAAO,MAAM,WAAW;WAZb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EA6DhB,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAA0B,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAQhC,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBACb,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC,EACpD,sBAAsB,CAAC,kBAAkB,CAAC;IAE9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AASH,eAAO,MAAM,WAAW;WAbb,gBAAgB;SAClB,cAAc;iBACN,sBAAsB;cACzB,IAAI;EAmEhB,CAAC"}

package/dist/esm/components/table/table-header/TableHeader.js

@@ -9,11 +9,12 @@ import { useTableContext } from '../TableContext';
 const defaultProps = {
     unselectAllLabel: 'Unselect all',
     selectedCountLabel: (count)=>`${count} selected`,
-    showActions: true
+    showActions: true,
+    borderTop: true
 };
 export const TableHeader = factory((props, ref)=>{
     const { store, getStyles } = useTableContext();
-    const { showActions, unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars: _vars, ...others } = useProps('PlasmaTableHeader', defaultProps, props);
+    const { showActions, unselectAllLabel, selectedCountLabel, borderTop, children, classNames, className, styles, style, vars: _vars, ...others } = useProps('PlasmaTableHeader', defaultProps, props);
     const selectedRows = store.getSelectedRows();
     const stylesApiProps = {
         classNames,
@@ -29,6 +30,9 @@ export const TableHeader = factory((props, ref)=>{
             ...stylesApiProps
         }),
         ...others,
+        mod: {
+            'with-border-top': borderTop
+        },
         children: /*#__PURE__*/ _jsxs(Grid, {
             justify: "flex-start",
             align: "center",
@@ -47,9 +51,8 @@ export const TableHeader = factory((props, ref)=>{
                     order: TableComponentsOrder.MultiSelectInfo,
                     children: /*#__PURE__*/ _jsx(Tooltip, {
                         label: unselectAllLabel,
-                        children: /*#__PURE__*/ _jsx(Button, {
+                        children: /*#__PURE__*/ _jsx(Button.Quaternary, {
                             onClick: store.clearRowSelection,
-                            variant: "subtle",
                             disabled: !store.rowSelectionEnabled,
                             leftSection: /*#__PURE__*/ _jsx(CrossSize16Px, {
                                 height: 16

package/dist/esm/components/table/table-header/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {TableHeaderActions} from '../table-actions';\nimport {useTableContext} from '../TableContext';\n\nexport type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';\n\nexport interface TableHeaderProps\n    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,\n        CompoundStylesApiProps<TableHeaderFactory> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n    unselectAllLabel?: string;\n    selectedCountLabel?: (count: number) => string;\n    /**\n     * Whether to show actions when rows are selected\n     *\n     * default true\n     */\n    showActions?: boolean;\n}\n\nexport type TableHeaderFactory = Factory<{\n    props: TableHeaderProps;\n    ref: HTMLDivElement;\n    stylesNames: TableHeaderStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableHeaderProps> = {\n    unselectAllLabel: 'Unselect all',\n    selectedCountLabel: (count) => `${count} selected`,\n    showActions: true,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {\n        showActions,\n        unselectAllLabel,\n        selectedCountLabel,\n        children,\n        classNames,\n        className,\n        styles,\n        style,\n        vars: _vars,\n        ...others\n    } = useProps('PlasmaTableHeader', defaultProps, props);\n    const selectedRows = store.getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box ref={ref} {...getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>\n            <Grid\n                justify=\"flex-start\"\n                align=\"center\"\n                classNames={{inner: innerStyles.className, root: gridStyles.className}}\n                styles={{inner: innerStyles.style, root: gridStyles.style}}\n            >\n                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button\n                                onClick={store.clearRowSelection}\n                                variant=\"subtle\"\n                                disabled={!store.rowSelectionEnabled}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                {showActions ? <TableHeaderActions /> : null}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["CrossSize16Px","Box","factory","Grid","Tooltip","useProps","Button","TableLayoutControl","TableComponentsOrder","TableHeaderActions","useTableContext","defaultProps","unselectAllLabel","selectedCountLabel","count","showActions","TableHeader","props","ref","store","getStyles","children","classNames","className","styles","style","vars","_vars","others","selectedRows","getSelectedRows","stylesApiProps","innerStyles","gridStyles","justify","align","inner","root","multiRowSelectionEnabled","length","Col","span","order","MultiSelectInfo","label","onClick","clearRowSelection","variant","disabled","rowSelectionEnabled","leftSection","height"],"mappings":";AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,GAAG,EAAoCC,OAAO,EAAWC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAG/G,SAAQC,MAAM,QAAO,eAAe;AACpC,SAAQC,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,kBAAkB,QAAO,mBAAmB;AACpD,SAAQC,eAAe,QAAO,kBAAkB;AA0BhD,MAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,CAACC,QAAU,GAAGA,MAAM,SAAS,CAAC;IAClDC,aAAa;AACjB;AAEA,OAAO,MAAMC,cAAcd,QAA4B,CAACe,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGV;IAC3B,MAAM,EACFK,WAAW,EACXH,gBAAgB,EAChBC,kBAAkB,EAClBQ,QAAQ,EACRC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAMC,KAAK,EACX,GAAGC,QACN,GAAGvB,SAAS,qBAAqBM,cAAcM;IAChD,MAAMY,eAAeV,MAAMW,eAAe;IAE1C,MAAMC,iBAAiB;QAACT;QAAYE;IAAM;IAC1C,MAAMQ,cAAcZ,UAAU,mBAAmBW;IACjD,MAAME,aAAab,UAAU,cAAcW;IAE3C,qBACI,KAAC9B;QAAIiB,KAAKA;QAAM,GAAGE,UAAU,cAAc;YAACG;YAAWE;YAAO,GAAGM,cAAc;QAAA,EAAE;QAAG,GAAGH,MAAM;kBACzF,cAAA,MAACzB;YACG+B,SAAQ;YACRC,OAAM;YACNb,YAAY;gBAACc,OAAOJ,YAAYT,SAAS;gBAAEc,MAAMJ,WAAWV,SAAS;YAAA;YACrEC,QAAQ;gBAACY,OAAOJ,YAAYP,KAAK;gBAAEY,MAAMJ,WAAWR,KAAK;YAAA;;gBAExDN,MAAMmB,wBAAwB,IAAIT,aAAaU,MAAM,GAAG,kBACrD,KAACpC,KAAKqC,GAAG;oBACLC,MAAK;oBACJ,GAAGrB,UAAU,aAAaW,eAAe;oBAC1CW,OAAOlC,qBAAqBmC,eAAe;8BAE3C,cAAA,KAACvC;wBAAQwC,OAAOhC;kCACZ,cAAA,KAACN;4BACGuC,SAAS1B,MAAM2B,iBAAiB;4BAChCC,SAAQ;4BACRC,UAAU,CAAC7B,MAAM8B,mBAAmB;4BACpCC,2BAAa,KAAClD;gCAAcmD,QAAQ;;sCAEnCtC,mBAAmBgB,aAAaU,MAAM;;;qBAInD;gBACHlB;gBACAN,4BAAc,KAACN,0BAAwB;8BACxC,KAACF;;;;AAIjB,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../../button';\nimport {TableLayoutControl} from '../layouts/TableLayoutControl';\nimport {TableComponentsOrder} from '../Table';\nimport {TableHeaderActions} from '../table-actions';\nimport {useTableContext} from '../TableContext';\n\nexport type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';\n\nexport interface TableHeaderProps\n    extends Omit<BoxProps, 'classNames' | 'styles' | 'vars'>,\n        CompoundStylesApiProps<TableHeaderFactory> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n    unselectAllLabel?: string;\n    selectedCountLabel?: (count: number) => string;\n    /**\n     * Whether to show actions when rows are selected\n     *\n     * default true\n     */\n    showActions?: boolean;\n    /**\n     * Whether to show a border on top of the header\n     *\n     * default true\n     */\n    borderTop?: boolean;\n}\n\nexport type TableHeaderFactory = Factory<{\n    props: TableHeaderProps;\n    ref: HTMLDivElement;\n    stylesNames: TableHeaderStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableHeaderProps> = {\n    unselectAllLabel: 'Unselect all',\n    selectedCountLabel: (count) => `${count} selected`,\n    showActions: true,\n    borderTop: true,\n};\n\nexport const TableHeader = factory<TableHeaderFactory>((props, ref) => {\n    const {store, getStyles} = useTableContext();\n    const {\n        showActions,\n        unselectAllLabel,\n        selectedCountLabel,\n        borderTop,\n        children,\n        classNames,\n        className,\n        styles,\n        style,\n        vars: _vars,\n        ...others\n    } = useProps('PlasmaTableHeader', defaultProps, props);\n    const selectedRows = store.getSelectedRows();\n\n    const stylesApiProps = {classNames, styles};\n    const innerStyles = getStyles('headerGridInner', stylesApiProps);\n    const gridStyles = getStyles('headerGrid', stylesApiProps);\n\n    return (\n        <Box\n            ref={ref}\n            {...getStyles('headerRoot', {className, style, ...stylesApiProps})}\n            {...others}\n            mod={{'with-border-top': borderTop}}\n        >\n            <Grid\n                justify=\"flex-start\"\n                align=\"center\"\n                classNames={{inner: innerStyles.className, root: gridStyles.className}}\n                styles={{inner: innerStyles.style, root: gridStyles.style}}\n            >\n                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (\n                    <Grid.Col\n                        span=\"auto\"\n                        {...getStyles('headerCol', stylesApiProps)}\n                        order={TableComponentsOrder.MultiSelectInfo}\n                    >\n                        <Tooltip label={unselectAllLabel}>\n                            <Button.Quaternary\n                                onClick={store.clearRowSelection}\n                                disabled={!store.rowSelectionEnabled}\n                                leftSection={<CrossSize16Px height={16} />}\n                            >\n                                {selectedCountLabel(selectedRows.length)}\n                            </Button.Quaternary>\n                        </Tooltip>\n                    </Grid.Col>\n                ) : null}\n                {children}\n                {showActions ? <TableHeaderActions /> : null}\n                <TableLayoutControl />\n            </Grid>\n        </Box>\n    );\n});\n"],"names":["CrossSize16Px","Box","factory","Grid","Tooltip","useProps","Button","TableLayoutControl","TableComponentsOrder","TableHeaderActions","useTableContext","defaultProps","unselectAllLabel","selectedCountLabel","count","showActions","borderTop","TableHeader","props","ref","store","getStyles","children","classNames","className","styles","style","vars","_vars","others","selectedRows","getSelectedRows","stylesApiProps","innerStyles","gridStyles","mod","justify","align","inner","root","multiRowSelectionEnabled","length","Col","span","order","MultiSelectInfo","label","Quaternary","onClick","clearRowSelection","disabled","rowSelectionEnabled","leftSection","height"],"mappings":";AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,GAAG,EAAoCC,OAAO,EAAWC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAG/G,SAAQC,MAAM,QAAO,eAAe;AACpC,SAAQC,kBAAkB,QAAO,gCAAgC;AACjE,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,kBAAkB,QAAO,mBAAmB;AACpD,SAAQC,eAAe,QAAO,kBAAkB;AAgChD,MAAMC,eAA0C;IAC5CC,kBAAkB;IAClBC,oBAAoB,CAACC,QAAU,GAAGA,MAAM,SAAS,CAAC;IAClDC,aAAa;IACbC,WAAW;AACf;AAEA,OAAO,MAAMC,cAAcf,QAA4B,CAACgB,OAAOC;IAC3D,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGX;IAC3B,MAAM,EACFK,WAAW,EACXH,gBAAgB,EAChBC,kBAAkB,EAClBG,SAAS,EACTM,QAAQ,EACRC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAMC,KAAK,EACX,GAAGC,QACN,GAAGxB,SAAS,qBAAqBM,cAAcO;IAChD,MAAMY,eAAeV,MAAMW,eAAe;IAE1C,MAAMC,iBAAiB;QAACT;QAAYE;IAAM;IAC1C,MAAMQ,cAAcZ,UAAU,mBAAmBW;IACjD,MAAME,aAAab,UAAU,cAAcW;IAE3C,qBACI,KAAC/B;QACGkB,KAAKA;QACJ,GAAGE,UAAU,cAAc;YAACG;YAAWE;YAAO,GAAGM,cAAc;QAAA,EAAE;QACjE,GAAGH,MAAM;QACVM,KAAK;YAAC,mBAAmBnB;QAAS;kBAElC,cAAA,MAACb;YACGiC,SAAQ;YACRC,OAAM;YACNd,YAAY;gBAACe,OAAOL,YAAYT,SAAS;gBAAEe,MAAML,WAAWV,SAAS;YAAA;YACrEC,QAAQ;gBAACa,OAAOL,YAAYP,KAAK;gBAAEa,MAAML,WAAWR,KAAK;YAAA;;gBAExDN,MAAMoB,wBAAwB,IAAIV,aAAaW,MAAM,GAAG,kBACrD,KAACtC,KAAKuC,GAAG;oBACLC,MAAK;oBACJ,GAAGtB,UAAU,aAAaW,eAAe;oBAC1CY,OAAOpC,qBAAqBqC,eAAe;8BAE3C,cAAA,KAACzC;wBAAQ0C,OAAOlC;kCACZ,cAAA,KAACN,OAAOyC,UAAU;4BACdC,SAAS5B,MAAM6B,iBAAiB;4BAChCC,UAAU,CAAC9B,MAAM+B,mBAAmB;4BACpCC,2BAAa,KAACpD;gCAAcqD,QAAQ;;sCAEnCxC,mBAAmBiB,aAAaW,MAAM;;;qBAInD;gBACHnB;gBACAP,4BAAc,KAACN,0BAAwB;8BACxC,KAACF;;;;AAIjB,GAAG"}

package/dist/esm/components/table/table-last-updated/TableLastUpdated.d.ts

@@ -1,12 +1,7 @@
 import { BoxProps, CompoundStylesApiProps, Factory } from '@mantine/core';
+import { LastUpdatedProps } from '../../last-updated/LastUpdated';
 export type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';
-export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory> {
-    /**
-     * Label to contextualize the date
-     *
-     * @default "Last update:"
-     */
-    label?: string;
+export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory>, Pick<LastUpdatedProps, 'label'> {
 }
 export type TableLastUpdatedFactory = Factory<{
     props: TableLastUpdatedProps;

package/dist/esm/components/table/table-last-updated/TableLastUpdated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLastUpdated.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAAwB,MAAM,eAAe,CAAC;AAMxG,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAEjF,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,EAAE,sBAAsB,CAAC,uBAAuB,CAAC;IACpG;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;IACzC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,gBAAgB;WAVlB,qBAAqB;SACvB,cAAc;iBACN,2BAA2B;cAC9B,IAAI;EAoChB,CAAC"}
+{"version":3,"file":"TableLastUpdated.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,sBAAsB,EAAW,OAAO,EAAC,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAc,gBAAgB,EAAC,MAAM,gCAAgC,CAAC;AAG7E,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAEjF,MAAM,WAAW,qBACb,SAAQ,QAAQ,EACZ,sBAAsB,CAAC,uBAAuB,CAAC,EAC/C,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;CAAG;AAE1C,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC;IAC1C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,2BAA2B,CAAC;IACzC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;WANlB,qBAAqB;SACvB,cAAc;iBACN,2BAA2B;cAC9B,IAAI;EAiChB,CAAC"}

package/dist/esm/components/table/table-last-updated/TableLastUpdated.js

@@ -1,50 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { factory, Group, Text, useProps } from '@mantine/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { factory } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
-import dayjs from 'dayjs';
 import { useState } from 'react';
+import { LastUpdated } from '../../last-updated/LastUpdated';
 import { useTableContext } from '../TableContext';
-const defaultProps = {
-    label: 'Last update:'
-};
 export const TableLastUpdated = factory((props, ref)=>{
     const { table, getStyles } = useTableContext();
-    const { label, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableLastUpdated', defaultProps, props);
+    const { classNames: _classNames, styles: _styles, vars: _vars, ...lastUpdatedProps } = props;
     const [time, setTime] = useState(new Date());
+    const { className: rootClassName, style: rootStyle } = getStyles('lastUpdatedRoot', {
+        classNames: _classNames,
+        styles: _styles
+    });
+    const { className: labelClassName, style: labelStyle } = getStyles('lastUpdatedLabel', {
+        classNames: _classNames,
+        styles: _styles
+    });
     useDidUpdate(()=>{
         setTime(new Date());
     }, [
         table.options.data
     ]);
-    const stylesApiProps = {
-        classNames,
-        styles
-    };
-    return /*#__PURE__*/ _jsx(Group, {
-        px: "xl",
-        justify: "right",
+    return /*#__PURE__*/ _jsx(LastUpdated, {
+        time: time,
         ref: ref,
-        ...getStyles('lastUpdatedRoot', {
-            className,
-            style,
-            ...stylesApiProps
-        }),
-        ...others,
-        children: /*#__PURE__*/ _jsxs(Text, {
-            size: "xs",
-            ...getStyles('lastUpdatedLabel', {
-                className,
-                style,
-                ...stylesApiProps
-            }),
-            children: [
-                label,
-                /*#__PURE__*/ _jsx("span", {
-                    role: "timer",
-                    children: dayjs(time).format('h:mm:ss A')
-                })
-            ]
-        })
+        justify: "right",
+        px: "lg",
+        classNames: {
+            root: rootClassName,
+            label: labelClassName
+        },
+        styles: {
+            root: rootStyle,
+            label: labelStyle
+        },
+        ...lastUpdatedProps
     });
 });
 

package/dist/esm/components/table/table-last-updated/TableLastUpdated.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"sourcesContent":["import {BoxProps, CompoundStylesApiProps, factory, Factory, Group, Text, useProps} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {useState} from 'react';\nimport {useTableContext} from '../TableContext';\n\nexport type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';\n\nexport interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory> {\n    /**\n     * Label to contextualize the date\n     *\n     * @default \"Last update:\"\n     */\n    label?: string;\n}\nexport type TableLastUpdatedFactory = Factory<{\n    props: TableLastUpdatedProps;\n    ref: HTMLDivElement;\n    stylesNames: TableLastUpdatedStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableLastUpdatedProps> = {\n    label: 'Last update:',\n};\n\nexport const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) => {\n    const {table, getStyles} = useTableContext();\n    const {label, classNames, className, styles, style, vars, ...others} = useProps(\n        'PlasmaTableLastUpdated',\n        defaultProps,\n        props,\n    );\n    const [time, setTime] = useState(new Date());\n\n    useDidUpdate(() => {\n        setTime(new Date());\n    }, [table.options.data]);\n\n    const stylesApiProps = {classNames, styles};\n\n    return (\n        <Group\n            px=\"xl\"\n            justify=\"right\"\n            ref={ref}\n            {...getStyles('lastUpdatedRoot', {className, style, ...stylesApiProps})}\n            {...others}\n        >\n            <Text size=\"xs\" {...getStyles('lastUpdatedLabel', {className, style, ...stylesApiProps})}>\n                {label}\n                <span role=\"timer\">{dayjs(time).format('h:mm:ss A')}</span>\n            </Text>\n        </Group>\n    );\n});\n"],"names":["factory","Group","Text","useProps","useDidUpdate","dayjs","useState","useTableContext","defaultProps","label","TableLastUpdated","props","ref","table","getStyles","classNames","className","styles","style","vars","others","time","setTime","Date","options","data","stylesApiProps","px","justify","size","span","role","format"],"mappings":";AAAA,SAA0CA,OAAO,EAAWC,KAAK,EAAEC,IAAI,EAAEC,QAAQ,QAAO,gBAAgB;AACxG,SAAQC,YAAY,QAAO,iBAAiB;AAC5C,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SAAQC,eAAe,QAAO,kBAAkB;AAmBhD,MAAMC,eAA+C;IACjDC,OAAO;AACX;AAEA,OAAO,MAAMC,mBAAmBV,QAAiC,CAACW,OAAOC;IACrE,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGP;IAC3B,MAAM,EAACE,KAAK,EAAEM,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGjB,SACnE,0BACAK,cACAG;IAEJ,MAAM,CAACU,MAAMC,QAAQ,GAAGhB,SAAS,IAAIiB;IAErCnB,aAAa;QACTkB,QAAQ,IAAIC;IAChB,GAAG;QAACV,MAAMW,OAAO,CAACC,IAAI;KAAC;IAEvB,MAAMC,iBAAiB;QAACX;QAAYE;IAAM;IAE1C,qBACI,KAAChB;QACG0B,IAAG;QACHC,SAAQ;QACRhB,KAAKA;QACJ,GAAGE,UAAU,mBAAmB;YAACE;YAAWE;YAAO,GAAGQ,cAAc;QAAA,EAAE;QACtE,GAAGN,MAAM;kBAEV,cAAA,MAAClB;YAAK2B,MAAK;YAAM,GAAGf,UAAU,oBAAoB;gBAACE;gBAAWE;gBAAO,GAAGQ,cAAc;YAAA,EAAE;;gBACnFjB;8BACD,KAACqB;oBAAKC,MAAK;8BAAS1B,MAAMgB,MAAMW,MAAM,CAAC;;;;;AAIvD,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/table-last-updated/TableLastUpdated.tsx"],"sourcesContent":["import {BoxProps, CompoundStylesApiProps, factory, Factory} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {useState} from 'react';\nimport {LastUpdated, LastUpdatedProps} from '../../last-updated/LastUpdated';\nimport {useTableContext} from '../TableContext';\n\nexport type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';\n\nexport interface TableLastUpdatedProps\n    extends BoxProps,\n        CompoundStylesApiProps<TableLastUpdatedFactory>,\n        Pick<LastUpdatedProps, 'label'> {}\n\nexport type TableLastUpdatedFactory = Factory<{\n    props: TableLastUpdatedProps;\n    ref: HTMLDivElement;\n    stylesNames: TableLastUpdatedStylesNames;\n    compound: true;\n}>;\n\nexport const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) => {\n    const {table, getStyles} = useTableContext();\n    const {classNames: _classNames, styles: _styles, vars: _vars, ...lastUpdatedProps} = props;\n    const [time, setTime] = useState(new Date());\n\n    const {className: rootClassName, style: rootStyle} = getStyles('lastUpdatedRoot', {\n        classNames: _classNames,\n        styles: _styles,\n    });\n\n    const {className: labelClassName, style: labelStyle} = getStyles('lastUpdatedLabel', {\n        classNames: _classNames,\n        styles: _styles,\n    });\n\n    useDidUpdate(() => {\n        setTime(new Date());\n    }, [table.options.data]);\n\n    return (\n        <LastUpdated\n            time={time}\n            ref={ref}\n            justify=\"right\"\n            px=\"lg\"\n            classNames={{root: rootClassName, label: labelClassName}}\n            styles={{root: rootStyle, label: labelStyle}}\n            {...lastUpdatedProps}\n        />\n    );\n});\n"],"names":["factory","useDidUpdate","useState","LastUpdated","useTableContext","TableLastUpdated","props","ref","table","getStyles","classNames","_classNames","styles","_styles","vars","_vars","lastUpdatedProps","time","setTime","Date","className","rootClassName","style","rootStyle","labelClassName","labelStyle","options","data","justify","px","root","label"],"mappings":";AAAA,SAA0CA,OAAO,QAAgB,gBAAgB;AACjF,SAAQC,YAAY,QAAO,iBAAiB;AAC5C,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SAAQC,WAAW,QAAyB,iCAAiC;AAC7E,SAAQC,eAAe,QAAO,kBAAkB;AAgBhD,OAAO,MAAMC,mBAAmBL,QAAiC,CAACM,OAAOC;IACrE,MAAM,EAACC,KAAK,EAAEC,SAAS,EAAC,GAAGL;IAC3B,MAAM,EAACM,YAAYC,WAAW,EAAEC,QAAQC,OAAO,EAAEC,MAAMC,KAAK,EAAE,GAAGC,kBAAiB,GAAGV;IACrF,MAAM,CAACW,MAAMC,QAAQ,GAAGhB,SAAS,IAAIiB;IAErC,MAAM,EAACC,WAAWC,aAAa,EAAEC,OAAOC,SAAS,EAAC,GAAGd,UAAU,mBAAmB;QAC9EC,YAAYC;QACZC,QAAQC;IACZ;IAEA,MAAM,EAACO,WAAWI,cAAc,EAAEF,OAAOG,UAAU,EAAC,GAAGhB,UAAU,oBAAoB;QACjFC,YAAYC;QACZC,QAAQC;IACZ;IAEAZ,aAAa;QACTiB,QAAQ,IAAIC;IAChB,GAAG;QAACX,MAAMkB,OAAO,CAACC,IAAI;KAAC;IAEvB,qBACI,KAACxB;QACGc,MAAMA;QACNV,KAAKA;QACLqB,SAAQ;QACRC,IAAG;QACHnB,YAAY;YAACoB,MAAMT;YAAeU,OAAOP;QAAc;QACvDZ,QAAQ;YAACkB,MAAMP;YAAWQ,OAAON;QAAU;QAC1C,GAAGT,gBAAgB;;AAGhC,GAAG"}

package/dist/esm/components/table/use-table.d.ts

@@ -1,6 +1,6 @@
+import type { DatesRangeValue, DateStringValue } from '@mantine/dates';
 import { type ExpandedState, type PaginationState, type SortingState } from '@tanstack/table-core';
 import { Dispatch, SetStateAction } from 'react';
-import { type DateRangePickerValue } from '../date-range-picker';
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
@@ -54,7 +54,7 @@ export interface TableState<TData = unknown> {
      *
      * @default [null, null]
      */
-    dateRange: DateRangePickerValue;
+    dateRange: DatesRangeValue<DateStringValue | null>;
     /**
      * Currently selected rows
      *

package/dist/esm/components/table/use-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/table/use-table.js

@@ -92,18 +92,18 @@ const DATE_RANGE_SERIALIZATION = serialization({
     serializer: ([from, to])=>[
             [
                 'from',
-                from?.toISOString() ?? '',
+                from ? new Date(from).toISOString() : '',
                 true
             ],
             [
                 'to',
-                to?.toISOString() ?? '',
+                to ? new Date(to).toISOString() : '',
                 true
             ]
         ],
     deserializer: (params, initial)=>[
-            params.get('from') ? new Date(params.get('from')) : initial[0],
-            params.get('to') ? new Date(params.get('to')) : initial[1]
+            params.get('from') ? params.get('from') : initial[0],
+            params.get('to') ? params.get('to') : initial[1]
         ]
 });
 const COLUMN_VISIBILITY_SERIALIZATION = serialization({