@coveord/plasma-mantine 55.7.3 → 55.8.2

package/dist/esm/components/collection/Collection.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AddSize16Px } from '@coveord/plasma-react-icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPlus } from '@coveord/plasma-react-icons';
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Box, Group, Input, Stack, Tooltip, useProps, useStyles } from '@mantine/core';
+import { Box, Input, Stack, useProps, useStyles } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
 import { identity } from '../../utils';
 import { Button } from '../button';
@@ -16,7 +16,7 @@ const defaultProps = {
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
     readOnly: false,
-    gap: 'xs',
+    gap: 'md',
     required: false,
     getItemId: ({ id })=>id
 };
@@ -59,14 +59,16 @@ export const Collection = (props)=>{
         ...errorProps,
         children: error
     }) : null;
-    const _header = _label || _description ? /*#__PURE__*/ _jsxs(_Fragment, {
+    const _header = _label || _description ? /*#__PURE__*/ _jsxs(Stack, {
+        gap: "xxs",
+        pb: "xs",
         children: [
             _label,
             _description
         ]
     }) : null;
     const standardizedItems = value.map((item, index)=>({
-            id: getItemId?.(item) ?? String(index),
+            id: getItemId?.(item, index) ?? String(index),
             data: item
         }));
     const items = standardizedItems.map((item, index)=>/*#__PURE__*/ _jsx(CollectionItem, {
@@ -78,22 +80,14 @@ export const Collection = (props)=>{
             children: children(item.data, index)
         }, item.id));
     const addAllowed = allowAdd?.(value) ?? true;
-    const _addButton = canEdit ? /*#__PURE__*/ _jsx(Group, {
-        children: /*#__PURE__*/ _jsx(Tooltip, {
-            label: addDisabledTooltip,
-            disabled: addAllowed,
-            children: /*#__PURE__*/ _jsx(Box, {
-                children: /*#__PURE__*/ _jsx(Button, {
-                    variant: "subtle",
-                    leftSection: /*#__PURE__*/ _jsx(AddSize16Px, {
-                        height: 16
-                    }),
-                    onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
-                    disabled: !addAllowed,
-                    children: addLabel
-                })
-            })
-        })
+    const _addButton = canEdit ? /*#__PURE__*/ _jsx(Button.Quaternary, {
+        leftSection: /*#__PURE__*/ _jsx(IconPlus, {
+            size: 16
+        }),
+        onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
+        disabled: !addAllowed,
+        disabledTooltip: addDisabledTooltip,
+        children: addLabel
     }) : null;
     const getIndex = (id)=>standardizedItems.findIndex((item)=>item.id === id);
     const handleDragEnd = ({ over, active })=>{
@@ -130,6 +124,7 @@ export const Collection = (props)=>{
                         _header,
                         /*#__PURE__*/ _jsxs(Stack, {
                             gap: gap,
+                            ...getStyles('items'),
                             children: [
                                 items,
                                 _addButton,

package/dist/esm/components/collection/Collection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    Box,\n    BoxProps,\n    Factory,\n    Group,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    Tooltip,\n    __InputWrapperProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     */\n    getItemId?: (originalItem: T) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    readOnly: false,\n    gap: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <>\n                {_label}\n                {_description}\n            </>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = canEdit ? (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftSection={<AddSize16Px height={16} />}\n                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    ) : null;\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap}>\n                            {items}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["AddSize16Px","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","restrictToParentElement","restrictToVerticalAxis","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","Box","Group","Input","Stack","Tooltip","useProps","useStyles","useDidUpdate","identity","Button","classes","CollectionProvider","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","name","sensors","coordinateGetter","canEdit","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","onRemove","removable","addAllowed","_addButton","variant","leftSection","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","onDragEnd","modifiers","strategy","extend"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {IconPlus} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    __InputWrapperProps,\n    Box,\n    BoxProps,\n    Factory,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {Button} from '../button';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext';\nimport {CollectionItem} from './CollectionItem';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     * @param itemIndex The index of the original item\n     */\n    getItemId?: (originalItem: T, itemIndex: number) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: ReorderPayload) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    readOnly: false,\n    gap: 'md',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\" pb=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = canEdit ? (\n        <Button.Quaternary\n            leftSection={<IconPlus size={16} />}\n            onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n            disabled={!addAllowed}\n            disabledTooltip={addDisabledTooltip}\n        >\n            {addLabel}\n        </Button.Quaternary>\n    ) : null;\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap} {...getStyles('items')}>\n                            {items}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["IconPlus","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","restrictToParentElement","restrictToVerticalAxis","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","Box","Input","Stack","useProps","useStyles","useDidUpdate","identity","Button","classes","CollectionProvider","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","name","sensors","coordinateGetter","canEdit","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","pb","standardizedItems","map","item","index","String","data","items","onRemove","removable","addAllowed","_addButton","Quaternary","leftSection","size","onClick","disabledTooltip","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","onDragEnd","modifiers","strategy","extend"],"mappings":"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"}

package/dist/esm/components/collection/Collection.module.css

@@ -2,6 +2,13 @@
     position: relative;
 }
 
+.items {
+    background-color: var(--mantine-color-gray-light);
+    padding: var(--mantine-spacing-md);
+    border: 1px solid var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-default);
+}
+
 .item {
     align-items: baseline;
 

package/dist/esm/components/collection/CollectionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,UAAU,EAAC,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAmED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAW,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAK3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAoHD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

package/dist/esm/components/collection/CollectionItem.js

@@ -1,18 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DragAndDropSize24Px, RemoveSize16Px } from '@coveord/plasma-react-icons';
+import { DragAndDropSize24Px, IconTrash } from '@coveord/plasma-react-icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { ActionIcon, Group } from '@mantine/core';
+import { Group, useProps } from '@mantine/core';
+import { ActionIcon } from '../action-icon';
 import { useCollectionContext } from './CollectionContext';
-const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon, {
+const defaultProps = {
+    removable: true,
+    gap: 'sm'
+};
+const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
         style: {
             alignSelf: 'center'
         },
-        variant: "subtle",
         onClick: onClick,
-        color: "action",
-        children: /*#__PURE__*/ _jsx(RemoveSize16Px, {
-            height: 16
+        children: /*#__PURE__*/ _jsx(IconTrash, {
+            "aria-label": "Remove",
+            size: 16
         })
     });
 const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
@@ -20,28 +24,48 @@ const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
             width: 28
         }
     });
-const StaticCollectionItem = ({ onRemove, removable = true, children })=>{
+const StaticCollectionItem = (props)=>{
+    const { children, removable, onRemove, id, // Style props
+    style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
     const ctx = useCollectionContext();
     const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
         onClick: onRemove
     }) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
     return /*#__PURE__*/ _jsxs(Group, {
-        ...ctx.getStyles('item'),
+        "data-testid": `item-${id}`,
+        ...ctx.getStyles('item', {
+            style,
+            className,
+            classNames,
+            styles
+        }),
+        ...others,
         children: [
             children,
             removeButton
         ]
     });
 };
-const DisabledCollectionItem = ({ children })=>{
+const DisabledCollectionItem = (props)=>{
     const ctx = useCollectionContext();
+    const { children, id, // Style props
+    style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
     return /*#__PURE__*/ _jsx(Group, {
-        ...ctx.getStyles('item'),
+        "data-testid": `item-${id}`,
+        ...ctx.getStyles('item', {
+            style,
+            className,
+            classNames,
+            styles
+        }),
+        ...others,
         children: children
     });
 };
-const DraggableCollectionItem = ({ id, onRemove, removable = true, children })=>{
+const DraggableCollectionItem = (props)=>{
     const ctx = useCollectionContext();
+    const { children, removable, onRemove, id, // Style props
+    className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
     const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
         onClick: onRemove
     }) : null;
@@ -49,14 +73,19 @@ const DraggableCollectionItem = ({ id, onRemove, removable = true, children })=>
         id
     });
     return /*#__PURE__*/ _jsxs(Group, {
+        "data-testid": `item-${id}`,
         ref: setNodeRef,
         ...ctx.getStyles('item', {
             style: transform ? {
                 transform: CSS.Transform.toString(transform),
                 transition
-            } : undefined
+            } : undefined,
+            className,
+            classNames,
+            styles
         }),
         "data-isdragging": isDragging,
+        ...others,
         children: [
             /*#__PURE__*/ _jsx("div", {
                 ref: setActivatorNodeRef,

package/dist/esm/components/collection/CollectionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {ActionIcon, Group, GroupProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon style={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group {...ctx.getStyles('item')}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {\n    const ctx = useCollectionContext();\n    return <Group {...ctx.getStyles('item')}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    children,\n}) => {\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n            })}\n            data-isdragging={isDragging}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize24Px","RemoveSize16Px","useSortable","CSS","ActionIcon","Group","useCollectionContext","RemoveButton","onClick","style","alignSelf","variant","color","height","RemoveButtonPlaceholder","div","width","StaticCollectionItem","onRemove","removable","children","ctx","removeButton","getStyles","DisabledCollectionItem","DraggableCollectionItem","id","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,cAAc,QAAO,8BAA8B;AAChF,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,UAAU,EAAEC,KAAK,QAAmB,gBAAgB;AAG5D,SAAQC,oBAAoB,QAAO,sBAAsB;AAazD,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACJ;QAAWK,OAAO;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASH,SAASA;QAASI,OAAM;kBAC/E,cAAA,KAACX;YAAeY,QAAQ;;;AAIhC,MAAMC,0BAA0B,kBAAM,KAACC;QAAIN,OAAO;YAACO,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAAC,EAC3FC,QAAQ,EACRC,YAAY,IAAI,EAChBC,QAAQ,EACX;IACG,MAAMC,MAAMf;IACZ,MAAMgB,eAAeH,aAAaD,yBAAW,KAACX;QAAaC,SAASU;uBAAe,KAACJ;IAEpF,qBACI,MAACT;QAAO,GAAGgB,IAAIE,SAAS,CAAC,OAAO;;YAC3BH;YACAE;;;AAGb;AAEA,MAAME,yBAA0F,CAAC,EAACJ,QAAQ,EAAC;IACvG,MAAMC,MAAMf;IACZ,qBAAO,KAACD;QAAO,GAAGgB,IAAIE,SAAS,CAAC,OAAO;kBAAGH;;AAC9C;AAEA,MAAMK,0BAA2F,CAAC,EAC9FC,EAAE,EACFR,QAAQ,EACRC,YAAY,IAAI,EAChBC,QAAQ,EACX;IACG,MAAMC,MAAMf;IACZ,MAAMgB,eAAeH,aAAaD,yBAAW,KAACX;QAAaC,SAASU;SAAe;IACnF,MAAM,EAACS,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAG/B,YAAY;QAC5GwB;IACJ;IAEA,qBACI,MAACrB;QACG6B,KAAKL;QACJ,GAAGR,IAAIE,SAAS,CAAC,QAAQ;YACtBd,OAAOqB,YACD;gBACIA,WAAW3B,IAAIgC,SAAS,CAACC,QAAQ,CAACN;gBAClCC;YACJ,IACAM;QACV,EAAE;QACFC,mBAAiBN;;0BAEjB,KAACjB;gBAAImB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAG,GAAGN,IAAIE,SAAS,CAAC,aAAa;0BACzF,cAAA,KAACvB;oBAAoBa,QAAQ;;;YAEhCO;YACAE;;;AAGb;AAEA,OAAO,MAAMiB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAACjB;YAAwB,GAAGkB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAACf;YAAyB,GAAGiB,UAAU;;IAClD;IACA,qBAAO,KAACzB;QAAsB,GAAGyB,UAAU;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, IconTrash} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps, useProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {ActionIcon} from '../action-icon';\nimport {useCollectionContext} from './CollectionContext';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst defaultProps: Partial<CollectionItemSharedProps> = {\n    removable: true,\n    gap: 'sm',\n};\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>\n        <IconTrash aria-label=\"Remove\" size={16} />\n    </ActionIcon.Quaternary>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n                className,\n                classNames,\n                styles,\n            })}\n            data-isdragging={isDragging}\n            {...others}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["DragAndDropSize24Px","IconTrash","useSortable","CSS","Group","useProps","ActionIcon","useCollectionContext","defaultProps","removable","gap","RemoveButton","onClick","Quaternary","style","alignSelf","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","props","children","onRemove","id","className","classNames","styles","others","ctx","removeButton","data-testid","getStyles","DisabledCollectionItem","DraggableCollectionItem","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","height","CollectionItem","draggable","disabled","otherProps"],"mappings":"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"}

package/dist/esm/components/copyToClipboard/CopyToClipboard.d.ts

@@ -1,6 +1,6 @@
-import { MantineColor } from '@mantine/core';
-import { FunctionComponent } from 'react';
-export interface CopyToClipboardProps {
+import { ActionIconProps, MantineColor } from '@mantine/core';
+import { FunctionComponent, MouseEventHandler } from 'react';
+export interface CopyToClipboardProps extends ActionIconProps {
     /**
      * The value to be copied to the clipboard.
      */
@@ -14,13 +14,25 @@ export interface CopyToClipboardProps {
     /**
      * Called each time the value is copied to the clipboard
      */
-    onCopy?: () => void;
+    onCopy?: MouseEventHandler<HTMLButtonElement>;
     /**
      * The color of the icon when idle
      *
      * @default 'gray'
      */
     color?: MantineColor | (string & {});
+    /**
+     * The text displayed when hovering over the button
+     *
+     * @default 'Copy to clipboard'
+     */
+    tooltipLabelCopy?: string;
+    /**
+     * The text displayed when the value is copied to the clipboard
+     *
+     * @default 'Copied'
+     */
+    tooltipLabelCopied?: string;
 }
 export declare const CopyToClipboard: FunctionComponent<CopyToClipboardProps>;
 //# sourceMappingURL=CopyToClipboard.d.ts.map

package/dist/esm/components/copyToClipboard/CopyToClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,YAAY,EAAqB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACxC;AAqBD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAU/D,CAAC"}
+{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAc,YAAY,EAAqB,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,oBAAqB,SAAQ,eAAe;IACzD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA6BD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAU/D,CAAC"}

package/dist/esm/components/copyToClipboard/CopyToClipboard.js

@@ -1,22 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckSize16Px, CopySize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, CopyButton, TextInput, Tooltip } from '@mantine/core';
-const CopyToClipboardButton = ({ value, onCopy, color })=>/*#__PURE__*/ _jsx(CopyButton, {
+import { IconClipboardCheck, IconClipboardText } from '@coveord/plasma-react-icons';
+import { CopyButton, TextInput, Tooltip } from '@mantine/core';
+import { ActionIcon } from '../action-icon';
+const CopyToClipboardButton = ({ value, onCopy, color, tooltipLabelCopy = 'Copy to clipboard', tooltipLabelCopied = 'Copied', ...others })=>/*#__PURE__*/ _jsx(CopyButton, {
         value: value,
         timeout: 2000,
         children: ({ copied, copy })=>/*#__PURE__*/ _jsx(Tooltip, {
-                label: copied ? 'Copied' : 'Copy',
-                children: /*#__PURE__*/ _jsx(ActionIcon, {
-                    variant: "subtle",
+                label: copied ? tooltipLabelCopied : tooltipLabelCopy,
+                children: /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
+                    "aria-label": tooltipLabelCopy,
                     color: copied ? 'success' : color,
-                    onClick: ()=>{
+                    onClick: (clickEvent)=>{
                         copy();
-                        onCopy?.();
+                        onCopy?.(clickEvent);
                     },
-                    children: copied ? /*#__PURE__*/ _jsx(CheckSize16Px, {
-                        height: 16
-                    }) : /*#__PURE__*/ _jsx(CopySize16Px, {
-                        height: 16
+                    ...others,
+                    children: copied ? /*#__PURE__*/ _jsx(IconClipboardCheck, {
+                        size: 16
+                    }) : /*#__PURE__*/ _jsx(IconClipboardText, {
+                        size: 16
                     })
                 })
             })
@@ -26,7 +28,6 @@ export const CopyToClipboard = ({ withLabel, ...others })=>withLabel ? /*#__PURE
         readOnly: true,
         autoComplete: "off",
         rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton, {
-            color: "action",
             ...others
         })
     }) : /*#__PURE__*/ _jsx(CopyToClipboardButton, {

package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n    /**\n     * The color of the icon when idle\n     *\n     * @default 'gray'\n     */\n    color?: MantineColor | (string & {});\n}\n\nconst CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy, color}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    variant=\"subtle\"\n                    color={copied ? 'success' : color}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n    withLabel ? (\n        <TextInput\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton color=\"action\" {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","TextInput","Tooltip","CopyToClipboardButton","value","onCopy","color","timeout","copied","copy","label","variant","onClick","height","CopyToClipboard","withLabel","others","readOnly","autoComplete","rightSection"],"mappings":";AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAgBC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AA0BvF,MAAMC,wBAAoF,CAAC,EAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK,EAAC,iBAC7G,KAACN;QAAWI,OAAOA;QAAOG,SAAS;kBAC9B,CAAC,EAACC,MAAM,EAAEC,IAAI,EAAC,iBACZ,KAACP;gBAAQQ,OAAOF,SAAS,WAAW;0BAChC,cAAA,KAACT;oBACGY,SAAQ;oBACRL,OAAOE,SAAS,YAAYF;oBAC5BM,SAAS;wBACLH;wBACAJ;oBACJ;8BAECG,uBAAS,KAACX;wBAAcgB,QAAQ;uCAAS,KAACf;wBAAae,QAAQ;;;;;AAOpF,OAAO,MAAMC,kBAA2D,CAAC,EAACC,SAAS,EAAE,GAAGC,QAAO,GAC3FD,0BACI,KAACd;QACGG,OAAOY,OAAOZ,KAAK;QACnBa,QAAQ;QACRC,cAAa;QACbC,4BAAc,KAAChB;YAAsBG,OAAM;YAAU,GAAGU,MAAM;;uBAGlE,KAACb;QAAuB,GAAGa,MAAM;OACnC"}
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';\nimport {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';\nimport {FunctionComponent, MouseEventHandler} from 'react';\nimport {ActionIcon} from '../action-icon';\n\nexport interface CopyToClipboardProps extends ActionIconProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * The color of the icon when idle\n     *\n     * @default 'gray'\n     */\n    color?: MantineColor | (string & {});\n    /**\n     * The text displayed when hovering over the button\n     *\n     * @default 'Copy to clipboard'\n     */\n    tooltipLabelCopy?: string;\n    /**\n     * The text displayed when the value is copied to the clipboard\n     *\n     * @default 'Copied'\n     */\n    tooltipLabelCopied?: string;\n}\n\nconst CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({\n    value,\n    onCopy,\n    color,\n    tooltipLabelCopy = 'Copy to clipboard',\n    tooltipLabelCopied = 'Copied',\n    ...others\n}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>\n                <ActionIcon.Quaternary\n                    aria-label={tooltipLabelCopy}\n                    color={copied ? 'success' : color}\n                    onClick={(clickEvent) => {\n                        copy();\n                        onCopy?.(clickEvent);\n                    }}\n                    {...others}\n                >\n                    {copied ? <IconClipboardCheck size={16} /> : <IconClipboardText size={16} />}\n                </ActionIcon.Quaternary>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n    withLabel ? (\n        <TextInput\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n"],"names":["IconClipboardCheck","IconClipboardText","CopyButton","TextInput","Tooltip","ActionIcon","CopyToClipboardButton","value","onCopy","color","tooltipLabelCopy","tooltipLabelCopied","others","timeout","copied","copy","label","Quaternary","aria-label","onClick","clickEvent","size","CopyToClipboard","withLabel","readOnly","autoComplete","rightSection"],"mappings":";AAAA,SAAQA,kBAAkB,EAAEC,iBAAiB,QAAO,8BAA8B;AAClF,SAAyBC,UAAU,EAAgBC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAE5F,SAAQC,UAAU,QAAO,iBAAiB;AAqC1C,MAAMC,wBAAoF,CAAC,EACvFC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,mBAAmB,mBAAmB,EACtCC,qBAAqB,QAAQ,EAC7B,GAAGC,QACN,iBACG,KAACV;QAAWK,OAAOA;QAAOM,SAAS;kBAC9B,CAAC,EAACC,MAAM,EAAEC,IAAI,EAAC,iBACZ,KAACX;gBAAQY,OAAOF,SAASH,qBAAqBD;0BAC1C,cAAA,KAACL,WAAWY,UAAU;oBAClBC,cAAYR;oBACZD,OAAOK,SAAS,YAAYL;oBAC5BU,SAAS,CAACC;wBACNL;wBACAP,SAASY;oBACb;oBACC,GAAGR,MAAM;8BAETE,uBAAS,KAACd;wBAAmBqB,MAAM;uCAAS,KAACpB;wBAAkBoB,MAAM;;;;;AAO1F,OAAO,MAAMC,kBAA2D,CAAC,EAACC,SAAS,EAAE,GAAGX,QAAO,GAC3FW,0BACI,KAACpB;QACGI,OAAOK,OAAOL,KAAK;QACnBiB,QAAQ;QACRC,cAAa;QACbC,4BAAc,KAACpB;YAAuB,GAAGM,MAAM;;uBAGnD,KAACN;QAAuB,GAAGM,MAAM;OACnC"}

package/dist/esm/components/date-range-picker/DateRange.module.css

@@ -1,7 +1,7 @@
 .picker {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
+    border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
 .save {
-    border-top: 1px solid var(--mantine-color-gray-2);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.d.ts

@@ -1,18 +1,17 @@
-import { DatePickerBaseProps } from '@mantine/dates';
+import { DatePickerBaseProps, type DateStringValue, type DatesRangeValue } from '@mantine/dates';
 import { DateRangePickerPreset } from './DateRangePickerPresetSelect';
 import { EditableDateRangePickerProps } from './EditableDateRangePicker';
-export type DateRangePickerValue = [Date | null, Date | null];
 export interface DateRangePickerInlineCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /**
      * Initial selected range
      */
-    initialRange: DateRangePickerValue;
+    initialRange: DatesRangeValue<DateStringValue | null>;
     /**
      * Function called when the user applies the new date range
      *
      * @param range the newly selected dates
      */
-    onApply: (range: DateRangePickerValue) => void;
+    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;
     /**
      * Function called when the user click on the cancel button
      */

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAM/D,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAC9D,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,oBAAoB,CAAC;IACnC;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAOD,eAAO,MAAM,6BAA6B,GAAI,yFAQ3C,kCAAkC,4CAoEpC,CAAC"}
+{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAM3G,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAChG,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACtD;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAMD,eAAO,MAAM,6BAA6B,GAAI,yFAQ3C,kCAAkC,4CAmEpC,CAAC"}

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js

@@ -8,7 +8,7 @@ import DateRangeClasses from './DateRange.module.css';
 import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
 import { EditableDateRangePicker } from './EditableDateRangePicker';
 const isDateRangePickerValue = (value)=>Array.isArray(value) && value.length === 2;
-const endOfDay = (value)=>value ? dayjs(value).endOf('day').toDate() : value;
+const endOfDay = (value)=>value ? dayjs(value).endOf('day').toISOString() : value;
 export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel, presets, startProps, endProps, rangeCalendarProps })=>{
     const form = useForm({
         initialValues: {
@@ -17,8 +17,16 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
     });
     const calendarInputProps = form.getInputProps('dates');
     const onCalendarChange = (range)=>{
+        // If the current value is [null, null] and a date is selected, set [selectedValue, null]
+        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {
+            calendarInputProps.onChange([
+                dayjs(range[0]).toISOString(),
+                null
+            ]);
+            return;
+        }
         const normalized = isDateRangePickerValue(range) && range[1] ? [
-            range[0],
+            dayjs(range[0]).toISOString(),
             endOfDay(range[1])
         ] : range;
         calendarInputProps.onChange(normalized);
@@ -92,14 +100,11 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
                 py: "sm",
                 className: DateRangeClasses.save,
                 children: [
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "outline",
-                        size: "xs",
+                    /*#__PURE__*/ _jsx(Button.Tertiary, {
                         onClick: onCancel,
                         children: "Cancel"
                     }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        size: "xs",
+                    /*#__PURE__*/ _jsx(Button.Primary, {
                         onClick: onCalendarApply,
                         children: "Apply"
                     })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>\n    Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {\n        const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;\n        calendarInputProps.onChange(normalized);\n    };\n\n    const onCalendarApply = () => {\n        // In case the user only clicked the start date, but not the end date,\n        // assume a single day was meant to be selected.\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = endOfDay(form.values.dates[0]);\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                    onChange={onCalendarChange}\n                />\n            </Center>\n\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","dayjs","Button","DateRangeClasses","DateRangePickerPresetSelect","EditableDateRangePicker","isDateRangePickerValue","value","Array","isArray","length","endOfDay","endOf","toDate","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","normalized","onChange","onCalendarApply","values","align","gap","grow","px","py","className","picker","w","selectProps","comboboxProps","withinPortal","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","variant","size","onClick"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,UAAU,QAA4B,iBAAiB;AAC/D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,MAAM,QAAO,YAAY;AACjC,OAAOC,sBAAsB,yBAAyB;AACtD,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,MAAMC,yBAAyB,CAACC,QAC5BC,MAAMC,OAAO,CAACF,UAAUA,MAAMG,MAAM,KAAK;AAE7C,MAAMC,WAAW,CAACJ,QAAuBA,QAAQN,MAAMM,OAAOK,KAAK,CAAC,OAAOC,MAAM,KAAKN;AAEtF,OAAO,MAAMO,gCAAgC,CAAC,EAC1CC,YAAY,EACZC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACe;IACjC,MAAMC,OAAOtB,QAAQ;QACjBuB,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,MAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,MAAMC,mBAAmB,CAACC;QACtB,MAAMC,aAAavB,uBAAuBsB,UAAUA,KAAK,CAAC,EAAE,GAAG;YAACA,KAAK,CAAC,EAAE;YAAEjB,SAASiB,KAAK,CAAC,EAAE;SAAE,GAAGA;QAChGH,mBAAmBK,QAAQ,CAACD;IAChC;IAEA,MAAME,kBAAkB;QACpB,sEAAsE;QACtE,gDAAgD;QAChD,IAAI,CAACT,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE,GAAGb,SAASW,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE;QACxD;QACAR,QAAQM,KAAKU,MAAM,CAACR,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAAC3B;gBAAMoC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWnC,iBAAiBoC,MAAM;;kCAClF,KAAClC;wBACGE,OAAOkB,mBAAmBlB,KAAK;wBAC9B,GAAGkB,kBAAkB;wBACtBN,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,KAACpB;gCAAM0C,GAAE;;0CACT,KAACpC;gCACGG,OAAOkB,mBAAmBlB,KAAK;gCAC/BW,SAASA;gCACR,GAAGO,kBAAkB;gCACtBgB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,KAAC/C;gBAAOyC,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACrC;oBACG6C,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;oBACrB,GAAG9B,kBAAkB;oBACrB,GAAGI,kBAAkB;oBACtBK,UAAUH;;;0BAIlB,MAAC9B;gBAAMuD,SAAQ;gBAAQlB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWnC,iBAAiBkD,IAAI;;kCAC5E,KAACnD;wBAAOoD,SAAQ;wBAAUC,MAAK;wBAAKC,SAASvC;kCAAU;;kCAGvD,KAACf;wBAAOqD,MAAK;wBAAKC,SAASzB;kCAAiB;;;;;;AAM5D,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeValue} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DatesRangeValue<DateStringValue | null>;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DatesRangeValue => Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: DateStringValue): DateStringValue => (value ? dayjs(value).endOf('day').toISOString() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarChange = (range: DateStringValue | DatesRangeValue<DateStringValue | null>): void => {\n        // If the current value is [null, null] and a date is selected, set [selectedValue, null]\n        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {\n            calendarInputProps.onChange([dayjs(range[0]).toISOString(), null]);\n            return;\n        }\n        const normalized =\n            isDateRangePickerValue(range) && range[1] ? [dayjs(range[0]).toISOString(), endOfDay(range[1])] : range;\n        calendarInputProps.onChange(normalized);\n    };\n\n    const onCalendarApply = () => {\n        // In case the user only clicked the start date, but not the end date,\n        // assume a single day was meant to be selected.\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = endOfDay(form.values.dates[0]);\n        }\n        onApply(form.values.dates);\n    };\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                    onChange={onCalendarChange}\n                />\n            </Center>\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>\n                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","dayjs","Button","DateRangeClasses","DateRangePickerPresetSelect","EditableDateRangePicker","isDateRangePickerValue","value","Array","isArray","length","endOfDay","endOf","toISOString","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","onChange","normalized","onCalendarApply","values","align","gap","grow","px","py","className","picker","w","selectProps","comboboxProps","withinPortal","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Tertiary","onClick","Primary"],"mappings":"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"}

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.d.ts

@@ -1,14 +1,13 @@
-import { CalendarBaseProps } from '@mantine/dates';
-import { DateRangePickerValue } from './DateRangePickerInlineCalendar';
+import { CalendarBaseProps, type DateStringValue, type DatesRangeValue } from '@mantine/dates';
 import { DateRangePickerPreset } from './DateRangePickerPresetSelect';
 import { EditableDateRangePickerProps } from './EditableDateRangePicker';
 interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
-    defaultValue?: DateRangePickerValue;
+    defaultValue?: DatesRangeValue<DateStringValue | null>;
     /** Value for controlled input */
-    value?: DateRangePickerValue;
+    value?: DatesRangeValue<DateStringValue | null>;
     /** onChange value for controlled input */
-    onChange?(value: DateRangePickerValue): void;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     /**
      * The presets to display
      *

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerPopoverCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAa,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAC,oBAAoB,EAAC,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,UAAU,mCAAoC,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IAC/G,2CAA2C;IAC3C,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,iCAAiC;IACjC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC7C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAEhD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,iBAAiB,EACjB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAED,eAAO,MAAM,8BAA8B,GAAI,uFAQ5C,mCAAmC,4CAuDrC,CAAC"}
+{"version":3,"file":"DateRangePickerPopoverCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAc,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAKzG,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,UAAU,mCAAoC,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IAC/G,2CAA2C;IAC3C,YAAY,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACvD,iCAAiC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAChD,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,iBAAiB,EACjB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAED,eAAO,MAAM,8BAA8B,GAAI,uFAQ5C,mCAAmC,4CA6DrC,CAAC"}