@coveord/plasma-mantine 52.3.0 → 52.4.0

package/dist/{definitions → cjs}/components/collection/Collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAQ,MAAM,OAAO,CAAC;AAIvC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAyHtB,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,YAAY,EAGZ,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAG5C,UAAU,eAAe,CAAC,CAAC,CACvB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC;IACX;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,MAAM,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAYD,eAAO,MAAM,UAAU,+CAsItB,CAAC"}

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

@@ -14,10 +14,11 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
-var _core = require("@mantine/core");
+var _core = require("@dnd-kit/core");
+var _modifiers = require("@dnd-kit/modifiers");
+var _sortable = require("@dnd-kit/sortable");
+var _core1 = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
-var _react = require("react");
-var _reactbeautifuldnd = require("react-beautiful-dnd");
 var _button = require("../button");
 var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
 var _CollectionItem = require("./CollectionItem");
@@ -27,10 +28,14 @@ var defaultProps = {
     addDisabledTooltip: "There is already an empty item",
     disabled: false,
     spacing: "xs",
-    required: false
+    required: false,
+    getItemId: function(param) {
+        var id = param.id;
+        return id;
+    }
 };
 var Collection = function(props) {
-    var _useComponentDefaultProps = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
+    var _useComponentDefaultProps = (0, _core1.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
     classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties._(_useComponentDefaultProps, [
         "value",
         "onChange",
@@ -65,7 +70,9 @@ var Collection = function(props) {
         styles: styles,
         unstyled: unstyled
     }), classes = _useStyles.classes, cx = _useStyles.cx;
-    var collectionID = (0, _react.useId)();
+    var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+        coordinateGetter: _sortable.sortableKeyboardCoordinates
+    }));
     var hasOnlyOneItem = value.length === 1;
     /**
      * Enforcing onChange when the value is modified will make sure the errors are carried through.
@@ -75,15 +82,15 @@ var Collection = function(props) {
         JSON.stringify(value)
     ]);
     var isRequired = typeof withAsterisk === "boolean" ? withAsterisk : required;
-    var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Label, _object_spread_props._(_object_spread._({
+    var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Label, _object_spread_props._(_object_spread._({
         required: isRequired
     }, labelProps), {
         children: label
     })) : null;
-    var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
+    var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
         children: description
     })) : null;
-    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
+    var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
         children: error
     })) : null;
     var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
@@ -93,27 +100,33 @@ var Collection = function(props) {
         ]
     }) : null;
     var _getItemId;
-    var items = value.map(function(item, index) {
+    var standardizedItems = value.map(function(item, index) {
+        return {
+            id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
+            data: item
+        };
+    });
+    var items = standardizedItems.map(function(item, index) {
         /*#__PURE__*/ return (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
+            id: item.id,
             disabled: disabled,
             draggable: draggable,
-            index: index,
             onRemove: function() {
                 return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
             },
             styles: styles,
             removable: !(required && hasOnlyOneItem),
-            children: children(item, index)
-        }, (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : index);
+            children: children(item.data, index)
+        }, item.id);
     });
     var _allowAdd;
     var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
     var _value_length;
-    var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
+    var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Group, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Tooltip, {
             label: addDisabledTooltip,
             disabled: addAllowed,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
                     variant: "subtle",
                     leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
@@ -128,36 +141,49 @@ var Collection = function(props) {
             })
         })
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.DragDropContext, {
-        onDragEnd: function(param) {
-            var destination = param.destination, source = param.source;
-            return onReorderItem({
-                from: source.index,
-                to: (destination === null || destination === void 0 ? void 0 : destination.index) || 0
-            });
-        },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Droppable, {
-            direction: "vertical",
-            droppableId: collectionID,
-            children: function(provided) {
-                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({}, provided.droppableProps), {
-                    ref: provided.innerRef,
-                    className: cx(classes.root, className)
-                }), others), {
-                    children: [
-                        _header,
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
-                            spacing: spacing,
-                            children: [
-                                items,
-                                provided.placeholder,
-                                _addButton,
-                                _error
-                            ]
-                        })
-                    ]
-                }));
+    var getIndex = function(id) {
+        return standardizedItems.findIndex(function(item) {
+            return item.id === id;
+        });
+    };
+    var handleDragEnd = function(param) {
+        var over = param.over, active = param.active;
+        if (over) {
+            var activeIndex = getIndex(String(active.id));
+            var overIndex = getIndex(String(over.id));
+            if (activeIndex !== overIndex) {
+                onReorderItem === null || onReorderItem === void 0 ? void 0 : onReorderItem({
+                    from: activeIndex,
+                    to: overIndex
+                });
             }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
+        onDragEnd: handleDragEnd,
+        sensors: sensors,
+        modifiers: [
+            _modifiers.restrictToVerticalAxis,
+            _modifiers.restrictToParentElement
+        ],
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
+            items: standardizedItems,
+            strategy: _sortable.verticalListSortingStrategy,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
+                className: cx(classes.root, className)
+            }, others), {
+                children: [
+                    _header,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
+                        spacing: spacing,
+                        children: [
+                            items,
+                            _addButton,
+                            _error
+                        ]
+                    })
+                ]
+            }))
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\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, useId} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\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};\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 collectionID = useId();\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 items = value.map((item, index) => (\n        <CollectionItem\n            key={(getItemId?.(item) ?? index) as string}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={() => onRemoveItem?.(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, 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    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => onReorderItem({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","getItemId","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","items","map","item","index","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"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    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":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","props","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","root","Stack"],"mappings":"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"}

package/dist/{definitions → cjs}/components/collection/Collection.styles.d.ts

@@ -5,6 +5,7 @@ declare const _default: (params: void, options?: import("@mantine/core").UseStyl
         root: string;
         item: string;
         itemDragging: string;
+        dragHandle: string;
     };
     cx: (...args: any) => string;
     theme: import("@mantine/core").MantineTheme;

package/dist/{definitions → cjs}/components/collection/Collection.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;;;;;AAE1C,wBASI"}
+{"version":3,"file":"Collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;;;;;;AAE1C,wBAeI"}

package/dist/cjs/components/collection/Collection.styles.js

@@ -11,13 +11,19 @@ Object.defineProperty(exports, "default", {
 var _core = require("@mantine/core");
 var _default = (0, _core.createStyles)(function(theme) {
     return {
-        root: {},
+        root: {
+            position: "relative"
+        },
         item: {
             backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
             alignItems: "baseline"
         },
         itemDragging: {
-            boxShadow: theme.shadows.sm
+            boxShadow: theme.shadows.md,
+            zIndex: 2
+        },
+        dragHandle: {
+            cursor: "move"
         }
     };
 });

package/dist/cjs/components/collection/Collection.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":";;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {\n        position: 'relative',\n    },\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.md,\n        zIndex: 2,\n    },\n    dragHandle: {\n        cursor: 'move',\n    },\n}));\n"],"names":["createStyles","theme","root","position","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","md","zIndex","dragHandle","cursor"],"mappings":";;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM;YACFC,UAAU;QACd;QACAC,MAAM;YACFC,iBAAiBJ,MAAMK,WAAW,KAAK,UAAUL,MAAMM,KAAK,GAAGN,MAAMO,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWV,MAAMW,OAAO,CAACC,EAAE;YAC3BC,QAAQ;QACZ;QACAC,YAAY;YACRC,QAAQ;QACZ;IACJ"}

package/dist/{definitions → cjs}/components/collection/CollectionItem.d.ts

@@ -6,7 +6,7 @@ interface CollectionItemProps extends CollectionItemSharedProps {
     disabled: boolean;
 }
 interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
-    index: number;
+    id: string;
     onRemove?: React.MouseEventHandler<HTMLButtonElement>;
     removable?: boolean;
 }

package/dist/{definitions → cjs}/components/collection/CollectionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/CollectionItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAS,SAAS,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG3D,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,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAkED,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,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"}

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

@@ -15,8 +15,9 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
 var _core = require("@mantine/core");
-var _reactbeautifuldnd = require("react-beautiful-dnd");
 var _Collectionstyles = /*#__PURE__*/ _interop_require_default._(require("./Collection.styles"));
 var RemoveButton = function(param) {
     var onClick = param.onClick;
@@ -68,7 +69,7 @@ var DisabledCollectionItem = function(param) {
     });
 };
 var DraggableCollectionItem = function(param) {
-    var index = param.index, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
+    var id = param.id, onRemove = param.onRemove, _param_removable = param.removable, removable = _param_removable === void 0 ? true : _param_removable, styles = param.styles, children = param.children;
     var _useStyles = (0, _Collectionstyles.default)(null, {
         name: "Collection",
         styles: styles
@@ -76,30 +77,29 @@ var DraggableCollectionItem = function(param) {
     var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
         onClick: onRemove
     }) : null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactbeautifuldnd.Draggable, {
-        index: index,
-        draggableId: index.toString(),
-        children: function(provided, param) {
-            var isDragging = param.isDragging;
-            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
-                ref: provided.innerRef
-            }, provided.draggableProps), {
-                className: cx(classes.item, _define_property._({}, classes.itemDragging, isDragging)),
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, provided.dragHandleProps), {
-                        style: {
-                            alignSelf: "center"
-                        },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize16Px, {
-                            height: 16
-                        })
-                    })),
-                    children,
-                    removeButton
-                ]
-            }));
-        }
-    }, index);
+    var _useSortable = (0, _sortable.useSortable)({
+        id: id
+    }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
+        ref: setNodeRef,
+        className: cx(classes.item, _define_property._({}, classes.itemDragging, isDragging)),
+        sx: transform ? {
+            transform: _utilities.CSS.Transform.toString(transform),
+            transition: transition
+        } : undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
+                ref: setActivatorNodeRef
+            }, listeners, attributes), {
+                className: classes.dragHandle,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize24Px, {
+                    height: 16
+                })
+            })),
+            children,
+            removeButton
+        ]
+    });
 };
 var CollectionItem = function(_param) {
     var draggable = _param.draggable, disabled = _param.disabled, otherProps = _object_without_properties._(_param, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\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    index: number;\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    index,\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\n    return (\n        <Draggable key={index} index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\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":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;yEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAAaD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC3D,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,uBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,mDAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;OAXGM;AAgBxB;AAEO,IAAM7B,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,6CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,8CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,2CAAyB6B;AACrC"}
+{"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":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","id","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","itemDragging","CSS","Transform","toString","undefined","dragHandle","DragAndDropSize24Px","draggable","disabled","otherProps"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;;;gCAzFqC;wBACxB;yBACR;oBACuC;yEAGnC;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,WAAAA,IACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IACvF,IAAoGe,eAAAA,IAAAA,qBAAW,EAAC;QAC5GD,IAAAA;IACJ,IAFOE,aAA6FD,aAA7FC,YAAYC,YAAiFF,aAAjFE,WAAWC,aAAsEH,aAAtEG,YAAYC,YAA0DJ,aAA1DI,WAAWC,aAA+CL,aAA/CK,YAAYC,aAAmCN,aAAnCM,YAAYC,sBAAuBP,aAAvBO;IAI7E,qBACI,sBAACb,WAAK;QACFc,KAAKL;QACLR,WAAWH,GAAGD,QAAQK,IAAI,EAAG,uBAACL,QAAQkB,YAAY,EAAGH;QACrDhC,IACI8B,YACM;YACIA,WAAWM,cAAG,CAACC,SAAS,CAACC,QAAQ,CAACR;YAClCC,YAAAA;QACJ,IACAQ,SAAS;;0BAGnB,qBAAChC;gBAAI2B,KAAKD;eAAyBL,WAAeD;gBAAYN,WAAWJ,QAAQuB,UAAU;0BACvF,cAAA,qBAACC,qCAAmB;oBAACpC,QAAQ;;;YAEhCS;YACAK;;;AAGb;AAEO,IAAMvB,iBAA4E,iBAInF;QAHF8C,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACpB,6CAA2BqB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAAClB,8CAA4BoB;IACxC,CAAC;IACD,qBAAO,qBAAClC,2CAAyBkC;AACrC"}

package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>

package/dist/{definitions → cjs}/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAwC,SAAS,EAAC,MAAM,eAAe,CAAC;AAsB/E,eAAO,MAAM,KAAK,EAAE,SAkMnB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAwC,SAAS,EAAC,MAAM,eAAe,CAAC;AAsB/E,eAAO,MAAM,KAAK,EAAE,SAsMnB,CAAC"}

package/dist/cjs/components/table/Table.js

@@ -234,8 +234,10 @@ var Table = function(param) {
                                     children: [
                                         !!header ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
+                                                // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`
                                                 style: {
-                                                    padding: 0
+                                                    padding: 0,
+                                                    fontWeight: "unset"
                                                 },
                                                 colSpan: table.getAllColumns().length,
                                                 children: header

package/dist/cjs/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {!!header ? (\n                                    <tr>\n                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n                                            {header}\n                                        </th>\n                                    </tr>\n                                ) : null}\n                                {table.getHeaderGroups().map((headerGroup) => (\n                                    <tr key={headerGroup.id} className={classes.headerColumns}>\n                                        {headerGroup.headers.map((columnHeader) => (\n                                            <Th key={columnHeader.id} header={columnHeader} />\n                                        ))}\n                                    </tr>\n                                ))}\n                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Table","LoadingSkeleton","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","Center","flexGrow","Loader","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","rowCollapsibleButtonCell","id","TableCollapsibleColumn","flexRender","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","th","getHeaderGroups","headerGroup","headerColumns","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {!!header ? (\n                                    <tr>\n                                        <th\n                                            // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`\n                                            style={{padding: 0, fontWeight: 'unset'}}\n                                            colSpan={table.getAllColumns().length}\n                                        >\n                                            {header}\n                                        </th>\n                                    </tr>\n                                ) : null}\n                                {table.getHeaderGroups().map((headerGroup) => (\n                                    <tr key={headerGroup.id} className={classes.headerColumns}>\n                                        {headerGroup.headers.map((columnHeader) => (\n                                            <Th key={columnHeader.id} header={columnHeader} />\n                                        ))}\n                                    </tr>\n                                ))}\n                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Table","LoadingSkeleton","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","Center","flexGrow","Loader","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","rowCollapsibleButtonCell","id","TableCollapsibleColumn","flexRender","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","th","fontWeight","getHeaderGroups","headerGroup","headerColumns","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer"],"mappings":"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"}

package/dist/cjs/components/table/TableDateRangePicker.js

@@ -48,6 +48,7 @@ var TableDateRangePicker = function(param) {
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
                     opened: opened,
                     onChange: setOpened,
+                    withinPortal: true,
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {

package/dist/cjs/components/table/TableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.DateRangePicker} py=\"sm\">\n            <Group spacing=\"xs\">\n                <Text span>{formatedRange}</Text>\n                <Popover opened={opened} onChange={setOpened}>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                            <CalendarSize24Px width={24} height={24} />\n                        </Button>\n                    </Popover.Target>\n                    <Popover.Dropdown p={0}>\n                        <DateRangePickerInlineCalendar\n                            initialRange={form.values.dateRange}\n                            onApply={onApply}\n                            onCancel={onCancel}\n                            presets={presets}\n                            rangeCalendarProps={rangeCalendarProps}\n                        />\n                    </Popover.Dropdown>\n                </Popover>\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","Group","spacing","Text","Popover","onChange","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;gCA/BkB;oBACU;8DACvB;qBACwB;sBAErB;+BAMd;2BAC4B;4BACZ;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,eAAe;QAAEC,IAAG;kBACrE,cAAA,sBAACC,WAAK;YAACC,SAAQ;;8BACX,qBAACC,UAAI;oBAACP,IAAI;8BAAEL;;8BACZ,sBAACa,aAAO;oBAACzB,QAAQA;oBAAQ0B,UAAUzB;;sCAC/B,qBAACwB,aAAO,CAACE,MAAM;sCACX,cAAA,qBAACC,cAAM;gCAACC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAM9B,UAAU,IAAI;;gCAAG+B,IAAG;0CACtE,cAAA,qBAACC,kCAAgB;oCAACC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACV,aAAO,CAACW,QAAQ;4BAACC,GAAG;sCACjB,cAAA,qBAACC,8CAA6B;gCAC1BC,cAAcrC,KAAKW,MAAM,CAACC,SAAS;gCACnCV,SAASA;gCACTG,UAAUA;gCACVV,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.DateRangePicker} py=\"sm\">\n            <Group spacing=\"xs\">\n                <Text span>{formatedRange}</Text>\n                <Popover opened={opened} onChange={setOpened} withinPortal>\n                    <Popover.Target>\n                        <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                            <CalendarSize24Px width={24} height={24} />\n                        </Button>\n                    </Popover.Target>\n                    <Popover.Dropdown p={0}>\n                        <DateRangePickerInlineCalendar\n                            initialRange={form.values.dateRange}\n                            onApply={onApply}\n                            onCancel={onCancel}\n                            presets={presets}\n                            rangeCalendarProps={rangeCalendarProps}\n                        />\n                    </Popover.Dropdown>\n                </Popover>\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","Group","spacing","Text","Popover","onChange","withinPortal","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;;;gCA/BkB;oBACU;8DACvB;qBACwB;sBAErB;+BAMd;2BAC4B;4BACZ;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,+BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,eAAe;QAAEC,IAAG;kBACrE,cAAA,sBAACC,WAAK;YAACC,SAAQ;;8BACX,qBAACC,UAAI;oBAACP,IAAI;8BAAEL;;8BACZ,sBAACa,aAAO;oBAACzB,QAAQA;oBAAQ0B,UAAUzB;oBAAW0B,YAAY;;sCACtD,qBAACF,aAAO,CAACG,MAAM;sCACX,cAAA,qBAACC,cAAM;gCAACC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAM/B,UAAU,IAAI;;gCAAGgC,IAAG;0CACtE,cAAA,qBAACC,kCAAgB;oCAACC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACX,aAAO,CAACY,QAAQ;4BAACC,GAAG;sCACjB,cAAA,qBAACC,8CAA6B;gCAC1BC,cAActC,KAAKW,MAAM,CAACC,SAAS;gCACnCV,SAASA;gCACTG,UAAUA;gCACVV,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}