@coveord/plasma-mantine 52.27.4 → 53.0.1

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

@@ -3,26 +3,32 @@ import { AddSize16Px } 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, useComponentDefaultProps } from '@mantine/core';
+import { Box, Group, Input, Stack, Tooltip, useProps, useStyles } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
+import { identity } from '../../utils';
 import { Button } from '../button';
-import useStyles from './Collection.styles';
+import classes from './Collection.module.css';
+import { CollectionProvider } from './CollectionContext';
 import { CollectionItem } from './CollectionItem';
 const defaultProps = {
     draggable: false,
     addLabel: 'Add item',
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
-    spacing: 'xs',
+    gap: 'xs',
     required: false,
     getItemId: ({ id })=>id
 };
 export const Collection = (props)=>{
-    const { value, onChange, onRemoveItem, onReorderItem, onInsertItem, disabled, draggable, children, spacing, required, newItem, addLabel, addDisabledTooltip, allowAdd, label, labelProps, withAsterisk, description, descriptionProps, error, errorProps, getItemId, // Style props
-    classNames, className, styles, unstyled, ...others } = useComponentDefaultProps('Collection', defaultProps, props);
-    const { classes, cx } = useStyles(null, {
-        classNames,
+    const { value, onChange, onRemoveItem, onReorderItem, onInsertItem, disabled, draggable, children, gap, required, newItem, addLabel, addDisabledTooltip, allowAdd, label, labelProps, withAsterisk, description, descriptionProps, error, errorProps, getItemId, ref, // Style props
+    style, className, classNames, styles, unstyled, ...others } = useProps('Collection', defaultProps, props);
+    const getStyles = useStyles({
         name: 'Collection',
+        classes,
+        props,
+        className,
+        style,
+        classNames,
         styles,
         unstyled
     });
@@ -66,7 +72,6 @@ export const Collection = (props)=>{
             disabled: disabled,
             draggable: draggable,
             onRemove: ()=>onRemoveItem?.(index),
-            styles: styles,
             removable: !(required && hasOnlyOneItem),
             children: children(item.data, index)
         }, item.id));
@@ -78,7 +83,7 @@ export const Collection = (props)=>{
             children: /*#__PURE__*/ _jsx(Box, {
                 children: /*#__PURE__*/ _jsx(Button, {
                     variant: "subtle",
-                    leftIcon: /*#__PURE__*/ _jsx(AddSize16Px, {
+                    leftSection: /*#__PURE__*/ _jsx(AddSize16Px, {
                         height: 16
                     }),
                     onClick: ()=>onInsertItem(newItem, value?.length ?? 0),
@@ -101,33 +106,40 @@ export const Collection = (props)=>{
             }
         }
     };
-    return /*#__PURE__*/ _jsx(DndContext, {
-        onDragEnd: handleDragEnd,
-        sensors: sensors,
-        modifiers: [
-            restrictToVerticalAxis,
-            restrictToParentElement
-        ],
-        children: /*#__PURE__*/ _jsx(SortableContext, {
-            items: standardizedItems,
-            strategy: verticalListSortingStrategy,
-            children: /*#__PURE__*/ _jsxs(Box, {
-                className: cx(classes.root, className),
-                ...others,
-                children: [
-                    _header,
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        spacing: spacing,
-                        children: [
-                            items,
-                            _addButton,
-                            _error
-                        ]
-                    })
-                ]
+    return /*#__PURE__*/ _jsx(CollectionProvider, {
+        value: {
+            getStyles
+        },
+        children: /*#__PURE__*/ _jsx(DndContext, {
+            onDragEnd: handleDragEnd,
+            sensors: sensors,
+            modifiers: [
+                restrictToVerticalAxis,
+                restrictToParentElement
+            ],
+            children: /*#__PURE__*/ _jsx(SortableContext, {
+                items: standardizedItems,
+                strategy: verticalListSortingStrategy,
+                children: /*#__PURE__*/ _jsxs(Box, {
+                    ref: ref,
+                    ...others,
+                    ...getStyles('root'),
+                    children: [
+                        _header,
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            gap: gap,
+                            children: [
+                                items,
+                                _addButton,
+                                _error
+                            ]
+                        })
+                    ]
+                })
             })
         })
     });
 };
+Collection.extend = identity;
 
 //# sourceMappingURL=Collection.js.map

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    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\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 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     * 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 spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\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\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\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\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\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={disabled}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(value) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<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    );\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        <DndContext\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n        >\n            <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                <Box className={cx(classes.root, className)} {...others}>\n                    {_header}\n                    <Stack spacing={spacing}>\n                        {items}\n                        {_addButton}\n                        {_error}\n                    </Stack>\n                </Box>\n            </SortableContext>\n        </DndContext>\n    );\n};\n"],"names":["AddSize16Px","DndContext","KeyboardSensor","PointerSensor","useSensor","useSensors","restrictToParentElement","restrictToVerticalAxis","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","Box","Group","Input","Stack","Tooltip","useComponentDefaultProps","useDidUpdate","Button","useStyles","CollectionItem","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","Collection","props","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","classes","cx","name","sensors","coordinateGetter","hasOnlyOneItem","length","JSON","stringify","isRequired","_label","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","onRemove","removable","addAllowed","_addButton","variant","leftIcon","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","onDragEnd","modifiers","strategy","root"],"mappings":"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"}
+{"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     * 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    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        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 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={disabled}\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 = disabled ? null : (\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    );\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","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","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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"}

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

@@ -0,0 +1,14 @@
+.root {
+    position: relative;
+}
+.item {
+    align-items: baseline;
+    &[data-isdragging='true'] {
+        box-shadow: var(--mantine-shadow-md);
+        z-index: 2;
+    }
+}
+
+.dragHandle {
+    cursor: move;
+}

package/dist/esm/components/collection/CollectionContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type GetStylesApi } from '@mantine/core';
+import type { CollectionFactory } from './Collection';
+interface CollectionContextType {
+    getStyles: GetStylesApi<CollectionFactory>;
+}
+export declare const CollectionProvider: ({ children, value }: {
+    value: CollectionContextType;
+    children: import("react").ReactNode;
+}) => import("react").JSX.Element, useCollectionContext: () => CollectionContextType;
+export {};
+//# sourceMappingURL=CollectionContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAoB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAEpD,UAAU,qBAAqB;IAC3B,SAAS,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;CAC9C;AAED,eAAO,MAAO,kBAAkB;;;mCAAE,oBAAoB,6BAErD,CAAC"}

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

@@ -0,0 +1,4 @@
+import { createSafeContext } from '@mantine/core';
+export const [CollectionProvider, useCollectionContext] = createSafeContext('Collection component was not found in tree');
+
+//# sourceMappingURL=CollectionContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection';\n\ninterface CollectionContextType {\n    getStyles: GetStylesApi<CollectionFactory>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n    'Collection component was not found in tree',\n);\n"],"names":["createSafeContext","CollectionProvider","useCollectionContext"],"mappings":"AAAA,SAAQA,iBAAiB,QAA0B,gBAAgB;AAOnE,OAAO,MAAM,CAACC,oBAAoBC,qBAAqB,GAAGF,kBACtD,8CACF"}

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

@@ -1,11 +1,10 @@
-import { DefaultProps, Selectors } from '@mantine/core';
+import { GroupProps } from '@mantine/core';
 import { FunctionComponent, PropsWithChildren } from 'react';
-import useStyles from './Collection.styles';
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;
     disabled: boolean;
 }
-interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
+interface CollectionItemSharedProps extends GroupProps {
     id: string;
     onRemove?: React.MouseEventHandler<HTMLButtonElement>;
     removable?: boolean;

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,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAE3D,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE5C,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAwED,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,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"}

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

@@ -3,9 +3,9 @@ import { DragAndDropSize24Px, RemoveSize16Px } from '@coveord/plasma-react-icons
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { ActionIcon, Group } from '@mantine/core';
-import useStyles from './Collection.styles';
+import { useCollectionContext } from './CollectionContext';
 const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon, {
-        sx: {
+        style: {
             alignSelf: 'center'
         },
         variant: "subtle",
@@ -20,37 +20,28 @@ const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
             width: 28
         }
     });
-const StaticCollectionItem = ({ onRemove, removable = true, styles, children })=>{
-    const { classes, cx } = useStyles(null, {
-        name: 'Collection',
-        styles
-    });
+const StaticCollectionItem = ({ onRemove, removable = true, children })=>{
+    const ctx = useCollectionContext();
     const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
         onClick: onRemove
     }) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
     return /*#__PURE__*/ _jsxs(Group, {
-        className: cx(classes.item),
+        ...ctx.getStyles('item'),
         children: [
             children,
             removeButton
         ]
     });
 };
-const DisabledCollectionItem = ({ children, styles })=>{
-    const { classes, cx } = useStyles(null, {
-        name: 'Collection',
-        styles
-    });
+const DisabledCollectionItem = ({ children })=>{
+    const ctx = useCollectionContext();
     return /*#__PURE__*/ _jsx(Group, {
-        className: cx(classes.item),
+        ...ctx.getStyles('item'),
         children: children
     });
 };
-const DraggableCollectionItem = ({ id, onRemove, removable = true, styles, children })=>{
-    const { classes, cx } = useStyles(null, {
-        name: 'Collection',
-        styles
-    });
+const DraggableCollectionItem = ({ id, onRemove, removable = true, children })=>{
+    const ctx = useCollectionContext();
     const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
         onClick: onRemove
     }) : null;
@@ -59,19 +50,19 @@ const DraggableCollectionItem = ({ id, onRemove, removable = true, styles, child
     });
     return /*#__PURE__*/ _jsxs(Group, {
         ref: setNodeRef,
-        className: cx(classes.item, {
-            [classes.itemDragging]: isDragging
+        ...ctx.getStyles('item', {
+            style: transform ? {
+                transform: CSS.Transform.toString(transform),
+                transition
+            } : undefined
         }),
-        sx: transform ? {
-            transform: CSS.Transform.toString(transform),
-            transition
-        } : undefined,
+        "data-isdragging": isDragging,
         children: [
             /*#__PURE__*/ _jsx("div", {
                 ref: setActivatorNodeRef,
                 ...listeners,
                 ...attributes,
-                className: classes.dragHandle,
+                ...ctx.getStyles('dragHandle'),
                 children: /*#__PURE__*/ _jsx(DragAndDropSize24Px, {
                     height: 16
                 })

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, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\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 sx={{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    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    id,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\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            className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n            sx={\n                transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined\n            }\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} className={classes.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","useStyles","RemoveButton","onClick","sx","alignSelf","variant","color","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","classes","cx","name","removeButton","className","item","DisabledCollectionItem","DraggableCollectionItem","id","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","itemDragging","Transform","toString","undefined","dragHandle","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,EAAgBC,KAAK,QAAkB,gBAAgB;AAGzE,OAAOC,eAAe,sBAAsB;AAa5C,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACJ;QAAWK,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASH,SAASA;QAASI,OAAM;kBAC5E,cAAA,KAACX;YAAeY,QAAQ;;;AAIhC,MAAMC,0BAA0B,kBAAM,KAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAAC,EAC3FC,QAAQ,EACRC,YAAY,IAAI,EAChBC,MAAM,EACNC,QAAQ,EACX;IACG,MAAM,EAACC,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,MAAMK,eAAeN,aAAaD,yBAAW,KAACZ;QAAaC,SAASW;uBAAe,KAACL;IAEpF,qBACI,MAACT;QAAMsB,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BN;YACAI;;;AAGb;AAEA,MAAMG,yBAA0F,CAAC,EAC7FP,QAAQ,EACRD,MAAM,EACT;IACG,MAAM,EAACE,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,qBAAO,KAAChB;QAAMsB,WAAWH,GAAGD,QAAQK,IAAI;kBAAIN;;AAChD;AAEA,MAAMQ,0BAA2F,CAAC,EAC9FC,EAAE,EACFZ,QAAQ,EACRC,YAAY,IAAI,EAChBC,MAAM,EACNC,QAAQ,EACX;IACG,MAAM,EAACC,OAAO,EAAEC,EAAE,EAAC,GAAGlB,UAAU,MAAM;QAACmB,MAAM;QAAcJ;IAAM;IACjE,MAAMK,eAAeN,aAAaD,yBAAW,KAACZ;QAAaC,SAASW;SAAe;IACnF,MAAM,EAACa,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAGpC,YAAY;QAC5G6B;IACJ;IAEA,qBACI,MAAC1B;QACGkC,KAAKL;QACLP,WAAWH,GAAGD,QAAQK,IAAI,EAAE;YAAC,CAACL,QAAQiB,YAAY,CAAC,EAAEH;QAAU;QAC/D5B,IACI0B,YACM;YACIA,WAAWhC,IAAIsC,SAAS,CAACC,QAAQ,CAACP;YAClCC;QACJ,IACAO;;0BAGV,KAAC5B;gBAAIwB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAEL,WAAWJ,QAAQqB,UAAU;0BACvF,cAAA,KAAC5C;oBAAoBa,QAAQ;;;YAEhCS;YACAI;;;AAGb;AAEA,OAAO,MAAMmB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAAClB;YAAwB,GAAGmB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAAChB;YAAyB,GAAGkB,UAAU;;IAClD;IACA,qBAAO,KAAC9B;QAAsB,GAAG8B,UAAU;;AAC/C,EAAE"}
+{"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"}

package/dist/esm/components/collection/enhanceWithCollectionProps.d.ts

@@ -0,0 +1,9 @@
+import { UseFormInput } from '@mantine/form';
+import { CollectionProps } from './Collection';
+export declare const enhanceWithCollectionProps: <FormValues>(payload: {
+    inputProps: import("@mantine/form/lib/types").GetInputPropsReturnType;
+    field: import("@mantine/form/lib/types").LooseKeys<FormValues>;
+    options: import("@mantine/form/lib/types").GetInputPropsOptions;
+    form: import("@mantine/form").UseFormReturnType<FormValues, (values: FormValues) => FormValues>;
+}, field: import("@mantine/form/lib/types").LooseKeys<FormValues>) => Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'>;
+//# sourceMappingURL=enhanceWithCollectionProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enhanceWithCollectionProps.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/enhanceWithCollectionProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;;sEAGpC,KAAK,gBAAgB,OAAO,CAAC,EAAE,eAAe,GAAG,cAAc,GAAG,cAAc,CAYlF,CAAC"}

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

@@ -0,0 +1,12 @@
+export const enhanceWithCollectionProps = (payload, field)=>{
+    if (payload.field === field) {
+        return {
+            onReorderItem: (reorderPayload)=>payload.form.reorderListItem(field, reorderPayload),
+            onRemoveItem: (index)=>payload.form.removeListItem(field, index),
+            onInsertItem: (valueToInsert, index)=>payload.form.insertListItem(field, valueToInsert, index)
+        };
+    }
+    return {};
+};
+
+//# sourceMappingURL=enhanceWithCollectionProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/collection/enhanceWithCollectionProps.ts"],"sourcesContent":["import {UseFormInput} from '@mantine/form';\nimport {CollectionProps} from './Collection';\n\nexport const enhanceWithCollectionProps = <FormValues>(\n    payload: Parameters<UseFormInput<FormValues>['enhanceGetInputProps']>[0],\n    field: (typeof payload)['field'],\n): Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'> => {\n    if (payload.field === field) {\n        return {\n            onReorderItem: (reorderPayload: Record<'from' | 'to', number>) =>\n                payload.form.reorderListItem(field, reorderPayload),\n            onRemoveItem: (index: number) => payload.form.removeListItem(field, index),\n            onInsertItem: (valueToInsert: unknown, index: number) =>\n                payload.form.insertListItem(field, valueToInsert, index),\n        };\n    }\n\n    return {};\n};\n"],"names":["enhanceWithCollectionProps","payload","field","onReorderItem","reorderPayload","form","reorderListItem","onRemoveItem","index","removeListItem","onInsertItem","valueToInsert","insertListItem"],"mappings":"AAGA,OAAO,MAAMA,6BAA6B,CACtCC,SACAC;IAEA,IAAID,QAAQC,KAAK,KAAKA,OAAO;QACzB,OAAO;YACHC,eAAe,CAACC,iBACZH,QAAQI,IAAI,CAACC,eAAe,CAACJ,OAAOE;YACxCG,cAAc,CAACC,QAAkBP,QAAQI,IAAI,CAACI,cAAc,CAACP,OAAOM;YACpEE,cAAc,CAACC,eAAwBH,QACnCP,QAAQI,IAAI,CAACO,cAAc,CAACV,OAAOS,eAAeH;QAC1D;IACJ;IAEA,OAAO,CAAC;AACZ,EAAE"}

package/dist/esm/components/collection/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Collection';
+export { enhanceWithCollectionProps } from './enhanceWithCollectionProps';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from './Collection';
+export { enhanceWithCollectionProps } from './enhanceWithCollectionProps';
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe"}
+{"version":3,"sources":["../../../../src/components/collection/index.ts"],"sourcesContent":["export * from './Collection';\nexport {enhanceWithCollectionProps} from './enhanceWithCollectionProps';\n"],"names":["enhanceWithCollectionProps"],"mappings":"AAAA,cAAc,eAAe;AAC7B,SAAQA,0BAA0B,QAAO,+BAA+B"}

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":";AAGA,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;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAgBzE,CAAC"}
+{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,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;CACvB;AAqBD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAWrE,CAAC"}

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

@@ -1,17 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckSize16Px, CopySize16Px } from '@coveord/plasma-react-icons';
-import { ActionIcon, CopyButton, createStyles, TextInput, Tooltip } from '@mantine/core';
-const useStyles = createStyles((theme)=>({
-        input: {
-            color: theme.colors.gray[7]
-        }
-    }));
+import { ActionIcon, CopyButton, TextInput, Tooltip } from '@mantine/core';
 const CopyToClipboardButton = ({ value, onCopy })=>/*#__PURE__*/ _jsx(CopyButton, {
         value: value,
         timeout: 2000,
         children: ({ copied, copy })=>/*#__PURE__*/ _jsx(Tooltip, {
                 label: copied ? 'Copied' : 'Copy',
                 children: /*#__PURE__*/ _jsx(ActionIcon, {
+                    variant: "subtle",
                     color: copied ? 'success' : 'gray',
                     onClick: ()=>{
                         copy();
@@ -25,11 +21,9 @@ const CopyToClipboardButton = ({ value, onCopy })=>/*#__PURE__*/ _jsx(CopyButton
                 })
             })
     });
-export const CopyToClipboard = ({ withLabel, ...others })=>{
-    const { classes } = useStyles();
-    return withLabel ? /*#__PURE__*/ _jsx(TextInput, {
+export const CopyToClipboard = ({ withLabel, ...others })=>withLabel ? /*#__PURE__*/ _jsx(TextInput, {
         classNames: {
-            input: classes.input
+            input: 'var(--mantine-color-gray-7)'
         },
         value: others.value,
         readOnly: true,
@@ -40,6 +34,5 @@ export const CopyToClipboard = ({ withLabel, ...others })=>{
     }) : /*#__PURE__*/ _jsx(CopyToClipboardButton, {
         ...others
     });
-};
 
 //# sourceMappingURL=CopyToClipboard.js.map

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, createStyles, TextInput, Tooltip} from '@mantine/core';\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\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\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: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","createStyles","TextInput","Tooltip","useStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","timeout","copied","copy","label","onClick","height","CopyToClipboard","withLabel","others","classes","classNames","readOnly","autoComplete","rightSection"],"mappings":";AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAmBvF,MAAMC,YAAYH,aAAa,CAACI,QAAW,CAAA;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ,CAAA;AAEA,MAAMC,wBAA0F,CAAC,EAACC,KAAK,EAAEC,MAAM,EAAC,iBAC5G,KAACZ;QAAWW,OAAOA;QAAOE,SAAS;kBAC9B,CAAC,EAACC,MAAM,EAAEC,IAAI,EAAC,iBACZ,KAACZ;gBAAQa,OAAOF,SAAS,WAAW;0BAChC,cAAA,KAACf;oBACGQ,OAAOO,SAAS,YAAY;oBAC5BG,SAAS;wBACLF;wBACAH;oBACJ;8BAECE,uBAAS,KAACjB;wBAAcqB,QAAQ;uCAAS,KAACpB;wBAAaoB,QAAQ;;;;;AAOpF,OAAO,MAAMC,kBAAiE,CAAC,EAACC,SAAS,EAAE,GAAGC,QAAO;IACjG,MAAM,EAACC,OAAO,EAAC,GAAGlB;IAElB,OAAOgB,0BACH,KAAClB;QACGqB,YAAY;YACRjB,OAAOgB,QAAQhB,KAAK;QACxB;QACAK,OAAOU,OAAOV,KAAK;QACnBa,QAAQ;QACRC,cAAa;QACbC,4BAAc,KAAChB;YAAuB,GAAGW,MAAM;;uBAGnD,KAACX;QAAuB,GAAGW,MAAM;;AAEzC,EAAE"}
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, TextInput, Tooltip} from '@mantine/core';\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\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    variant=\"subtle\"\n                    color={copied ? 'success' : 'gray'}\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: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>\n    withLabel ? (\n        <TextInput\n            classNames={{input: 'var(--mantine-color-gray-7)'}}\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","TextInput","Tooltip","CopyToClipboardButton","value","onCopy","timeout","copied","copy","label","variant","color","onClick","height","CopyToClipboard","withLabel","others","classNames","input","readOnly","autoComplete","rightSection"],"mappings":";AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAmBzE,MAAMC,wBAA0F,CAAC,EAACC,KAAK,EAAEC,MAAM,EAAC,iBAC5G,KAACL;QAAWI,OAAOA;QAAOE,SAAS;kBAC9B,CAAC,EAACC,MAAM,EAAEC,IAAI,EAAC,iBACZ,KAACN;gBAAQO,OAAOF,SAAS,WAAW;0BAChC,cAAA,KAACR;oBACGW,SAAQ;oBACRC,OAAOJ,SAAS,YAAY;oBAC5BK,SAAS;wBACLJ;wBACAH;oBACJ;8BAECE,uBAAS,KAACV;wBAAcgB,QAAQ;uCAAS,KAACf;wBAAae,QAAQ;;;;;AAOpF,OAAO,MAAMC,kBAAiE,CAAC,EAACC,SAAS,EAAE,GAAGC,QAAO,GACjGD,0BACI,KAACd;QACGgB,YAAY;YAACC,OAAO;QAA6B;QACjDd,OAAOY,OAAOZ,KAAK;QACnBe,QAAQ;QACRC,cAAa;QACbC,4BAAc,KAAClB;YAAuB,GAAGa,MAAM;;uBAGnD,KAACb;QAAuB,GAAGa,MAAM;OACnC"}

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

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

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;AAI/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;AAED,eAAO,MAAM,6BAA6B,4FAQvC,kCAAkC,4CAkEpC,CAAC"}
+{"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;AAK/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;AAED,eAAO,MAAM,6BAA6B,4FAQvC,kCAAkC,4CA2DpC,CAAC"}

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

@@ -3,6 +3,7 @@ import { Center, Group, Space } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { Button } from '../button';
+import DateRangeClasses from './DateRange.module.css';
 import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
 import { EditableDateRangePicker } from './EditableDateRangePicker';
 export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel, presets, startProps, endProps, rangeCalendarProps })=>{
@@ -22,15 +23,14 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
         children: [
             /*#__PURE__*/ _jsxs(Group, {
                 align: "center",
-                spacing: "xs",
+                gap: "xs",
                 grow: true,
                 px: "md",
                 py: "sm",
-                sx: (theme)=>({
-                        borderBottom: `1px solid ${theme.colors.gray[2]}`
-                    }),
+                className: DateRangeClasses.picker,
                 children: [
                     /*#__PURE__*/ _jsx(EditableDateRangePicker, {
+                        value: calendarInputProps.value,
                         ...calendarInputProps,
                         startProps: startProps,
                         endProps: endProps
@@ -41,8 +41,14 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
                                 w: "sm"
                             }),
                             /*#__PURE__*/ _jsx(DateRangePickerPresetSelect, {
+                                value: calendarInputProps.value,
                                 presets: presets,
-                                ...calendarInputProps
+                                ...calendarInputProps,
+                                selectProps: {
+                                    comboboxProps: {
+                                        withinPortal: false
+                                    }
+                                }
                             })
                         ]
                     }) : null
@@ -55,10 +61,8 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
                     numberOfColumns: 2,
                     type: "range",
                     styles: {
-                        calendar: {
-                            cell: {
-                                textAlign: 'center'
-                            }
+                        day: {
+                            textAlign: 'center'
                         }
                     },
                     firstDayOfWeek: 0,
@@ -68,13 +72,11 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
                 })
             }),
             /*#__PURE__*/ _jsxs(Group, {
-                position: "right",
-                spacing: "xs",
+                justify: "right",
+                gap: "xs",
                 px: "md",
                 py: "sm",
-                sx: (theme)=>({
-                        borderTop: `1px solid ${theme.colors.gray[2]}`
-                    }),
+                className: DateRangeClasses.save,
                 children: [
                     /*#__PURE__*/ _jsx(Button, {
                         variant: "outline",