@coveord/plasma-mantine 56.18.0 → 56.20.0

package/dist/cjs/components/Collection/layouts/shared/DragHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/DragHandle.tsx"],"sourcesContent":["import {DragAndDropSize16Px} from '@coveord/plasma-react-icons';\nimport type {FunctionComponent} from 'react';\nimport {useCollectionContext} from '../../CollectionContext.js';\n\nexport interface DragHandleProps {\n    setActivatorNodeRef: (element: HTMLElement | null) => void;\n    listeners: any;\n    attributes: any;\n}\n\n/**\n * Shared drag handle component used by both horizontal and vertical layouts.\n * Renders the drag icon with proper event handlers for drag and drop functionality.\n */\nexport const DragHandle: FunctionComponent<DragHandleProps> = ({setActivatorNodeRef, listeners, attributes}) => {\n    const {getStyles} = useCollectionContext();\n    return (\n        <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...getStyles('dragHandle')}>\n            <DragAndDropSize16Px height={16} />\n        </div>\n    );\n};\n"],"names":["DragHandle","setActivatorNodeRef","listeners","attributes","getStyles","useCollectionContext","div","ref","DragAndDropSize16Px","height"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;gCAdqB;iCAEC;AAY5B,IAAMA,aAAiD;QAAEC,4BAAAA,qBAAqBC,kBAAAA,WAAWC,mBAAAA;IAC5F,IAAM,AAACC,YAAaC,IAAAA,uCAAoB,IAAjCD;IACP,qBACI,qBAACE;QAAIC,KAAKN;OAAyBC,WAAeC,YAAgBC,UAAU;kBACxE,cAAA,qBAACI,qCAAmB;YAACC,QAAQ;;;AAGzC"}

package/dist/cjs/components/Collection/layouts/shared/RemoveButton.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent, type MouseEventHandler } from 'react';
+export interface RemoveButtonProps {
+    removable?: boolean;
+    onRemove?: MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * Shared remove button component used by both horizontal and vertical layouts.
+ * Renders a trash icon button when removable, or a spacer div otherwise.
+ */
+export declare const RemoveButton: FunctionComponent<RemoveButtonProps>;
+//# sourceMappingURL=RemoveButton.d.ts.map

package/dist/cjs/components/Collection/layouts/shared/RemoveButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/RemoveButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,iBAAiB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAc7D,CAAC"}

package/dist/cjs/components/Collection/layouts/shared/RemoveButton.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RemoveButton", {
+    enumerable: true,
+    get: function() {
+        return RemoveButton;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _jsxruntime = require("react/jsx-runtime");
+var _plasmareacticons = require("@coveord/plasma-react-icons");
+var _core = require("@mantine/core");
+var _ActionIcon = require("../../../ActionIcon/ActionIcon.js");
+var _CollectionContext = require("../../CollectionContext.js");
+var RemoveButton = function(param) {
+    var removable = param.removable, onRemove = param.onRemove;
+    var getStyles = (0, _CollectionContext.useCollectionContext)().getStyles;
+    if (!removable || !onRemove) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            style: {
+                width: 28
+            }
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({}, getStyles('removeButton')), {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Quaternary, {
+            onClick: onRemove,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconTrash, {
+                "aria-label": "Remove",
+                size: 16
+            })
+        })
+    }));
+};
+
+//# sourceMappingURL=RemoveButton.js.map

package/dist/cjs/components/Collection/layouts/shared/RemoveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/RemoveButton.tsx"],"sourcesContent":["import {IconTrash} from '@coveord/plasma-react-icons';\nimport {Box} from '@mantine/core';\nimport {FunctionComponent, type MouseEventHandler} from 'react';\nimport {ActionIcon} from '../../../ActionIcon/ActionIcon.js';\nimport {useCollectionContext} from '../../CollectionContext.js';\n\nexport interface RemoveButtonProps {\n    removable?: boolean;\n    onRemove?: MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * Shared remove button component used by both horizontal and vertical layouts.\n * Renders a trash icon button when removable, or a spacer div otherwise.\n */\nexport const RemoveButton: FunctionComponent<RemoveButtonProps> = ({removable, onRemove}) => {\n    const {getStyles} = useCollectionContext();\n\n    if (!removable || !onRemove) {\n        return <div style={{width: 28}} />;\n    }\n\n    return (\n        <Box {...getStyles('removeButton')}>\n            <ActionIcon.Quaternary onClick={onRemove}>\n                <IconTrash aria-label=\"Remove\" size={16} />\n            </ActionIcon.Quaternary>\n        </Box>\n    );\n};\n"],"names":["RemoveButton","removable","onRemove","getStyles","useCollectionContext","div","style","width","Box","ActionIcon","Quaternary","onClick","IconTrash","aria-label","size"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;gCAfW;oBACN;0BAEO;iCACU;AAW5B,IAAMA,eAAqD;QAAEC,kBAAAA,WAAWC,iBAAAA;IAC3E,IAAM,AAACC,YAAaC,IAAAA,uCAAoB,IAAjCD;IAEP,IAAI,CAACF,aAAa,CAACC,UAAU;QACzB,qBAAO,qBAACG;YAAIC,OAAO;gBAACC,OAAO;YAAE;;IACjC;IAEA,qBACI,qBAACC,SAAG,8CAAKL,UAAU;kBACf,cAAA,qBAACM,sBAAU,CAACC,UAAU;YAACC,SAAST;sBAC5B,cAAA,qBAACU,2BAAS;gBAACC,cAAW;gBAASC,MAAM;;;;AAIrD"}

package/dist/cjs/components/Collection/layouts/shared/columnUtils.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+import { CollectionColumnDef } from '../../CollectionColumn.types.js';
+/**
+ * Converts column size configuration to CSS styles.
+ * Handles both numeric (px) and string (%, fr, etc.) size values.
+ */
+export declare const getColumnSizeStyles: (column: CollectionColumnDef<any>) => CSSProperties;
+//# sourceMappingURL=columnUtils.d.ts.map

package/dist/cjs/components/Collection/layouts/shared/columnUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/columnUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,EAAC,mBAAmB,EAAC,MAAM,iCAAiC,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,mBAAmB,CAAC,GAAG,CAAC,KAAG,aAYtE,CAAC"}

package/dist/cjs/components/Collection/layouts/shared/columnUtils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getColumnSizeStyles", {
+    enumerable: true,
+    get: function() {
+        return getColumnSizeStyles;
+    }
+});
+var getColumnSizeStyles = function(column) {
+    var sizeToStyle = function(size) {
+        if (size === undefined) {
+            return undefined;
+        }
+        return typeof size === 'number' ? "".concat(size, "px") : size;
+    };
+    return {
+        minWidth: sizeToStyle(column.minSize),
+        maxWidth: sizeToStyle(column.maxSize)
+    };
+};
+
+//# sourceMappingURL=columnUtils.js.map

package/dist/cjs/components/Collection/layouts/shared/columnUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/columnUtils.ts"],"sourcesContent":["import {CSSProperties} from 'react';\nimport {CollectionColumnDef} from '../../CollectionColumn.types.js';\n\n/**\n * Converts column size configuration to CSS styles.\n * Handles both numeric (px) and string (%, fr, etc.) size values.\n */\nexport const getColumnSizeStyles = (column: CollectionColumnDef<any>): CSSProperties => {\n    const sizeToStyle = (size: number | string | undefined): string | undefined => {\n        if (size === undefined) {\n            return undefined;\n        }\n        return typeof size === 'number' ? `${size}px` : size;\n    };\n\n    return {\n        minWidth: sizeToStyle(column.minSize),\n        maxWidth: sizeToStyle(column.maxSize),\n    };\n};\n"],"names":["getColumnSizeStyles","column","sizeToStyle","size","undefined","minWidth","minSize","maxWidth","maxSize"],"mappings":";;;;+BAOaA;;;eAAAA;;;AAAN,IAAMA,sBAAsB,SAACC;IAChC,IAAMC,cAAc,SAACC;QACjB,IAAIA,SAASC,WAAW;YACpB,OAAOA;QACX;QACA,OAAO,OAAOD,SAAS,WAAW,AAAC,GAAO,OAALA,MAAK,QAAMA;IACpD;IAEA,OAAO;QACHE,UAAUH,YAAYD,OAAOK,OAAO;QACpCC,UAAUL,YAAYD,OAAOO,OAAO;IACxC;AACJ"}

package/dist/cjs/components/Collection/layouts/shared/headerUtils.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { CollectionColumnDef } from '../../CollectionColumn.types.js';
+/**
+ * Renders a column header by invoking the header function with context if needed.
+ * Handles both static headers (strings/nodes) and dynamic header functions.
+ */
+export declare const renderColumnHeader: (header: CollectionColumnDef<unknown>["header"], index: number) => ReactNode;
+//# sourceMappingURL=headerUtils.d.ts.map

package/dist/cjs/components/Collection/layouts/shared/headerUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headerUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/headerUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAC,mBAAmB,EAA0B,MAAM,iCAAiC,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,mBAAmB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,MAAM,KAAG,SAMlG,CAAC"}

package/dist/cjs/components/Collection/layouts/shared/headerUtils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderColumnHeader", {
+    enumerable: true,
+    get: function() {
+        return renderColumnHeader;
+    }
+});
+var renderColumnHeader = function(header, index) {
+    if (typeof header === 'function') {
+        var context = {
+            index: index
+        };
+        return header(context);
+    }
+    return header;
+};
+
+//# sourceMappingURL=headerUtils.js.map

package/dist/cjs/components/Collection/layouts/shared/headerUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/headerUtils.ts"],"sourcesContent":["import {ReactNode} from 'react';\nimport {CollectionColumnDef, CollectionHeaderContext} from '../../CollectionColumn.types.js';\n\n/**\n * Renders a column header by invoking the header function with context if needed.\n * Handles both static headers (strings/nodes) and dynamic header functions.\n */\nexport const renderColumnHeader = (header: CollectionColumnDef<unknown>['header'], index: number): ReactNode => {\n    if (typeof header === 'function') {\n        const context: CollectionHeaderContext = {index};\n        return header(context);\n    }\n    return header;\n};\n"],"names":["renderColumnHeader","header","index","context"],"mappings":";;;;+BAOaA;;;eAAAA;;;AAAN,IAAMA,qBAAqB,SAACC,QAAgDC;IAC/E,IAAI,OAAOD,WAAW,YAAY;QAC9B,IAAME,UAAmC;YAACD,OAAAA;QAAK;QAC/C,OAAOD,OAAOE;IAClB;IACA,OAAOF;AACX"}

package/dist/cjs/components/Collection/layouts/shared/itemRenderer.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { CollectionCellContext, CollectionColumnDef } from '../../CollectionColumn.types.js';
+/**
+ * CSS classes object for layout styling.
+ */
+export interface LayoutClasses {
+    [key: string]: string;
+}
+/**
+ * Common props for rendering an item/row in either layout.
+ */
+export interface ItemProps<T> {
+    item: T;
+    index: number;
+    id: string;
+    columns: Array<CollectionColumnDef<T>>;
+    onRemove?: () => void;
+    removable?: boolean;
+    draggable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    classes: LayoutClasses;
+    config: ItemRendererConfig<T>;
+}
+/**
+ * Function type that renders the content specific to each layout.
+ * Horizontal layout renders cells in a row, vertical layout renders stacked fields.
+ */
+export type ItemContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses) => ReactNode;
+/**
+ * Function type that renders content with inline drag handle for draggable items.
+ * Used by layouts that want the drag handle integrated into the content (e.g., vertical layout).
+ */
+export type DraggableContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses, dragHandleProps: {
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    listeners: any;
+    attributes: any;
+}) => ReactNode;
+/**
+ * Configuration for creating layout-specific item renderers.
+ */
+export interface ItemRendererConfig<T> {
+    /** The content rendering function specific to the layout */
+    renderContent: ItemContentRenderer<T>;
+    /** The container style selector ('row' for horizontal, 'item' for vertical) */
+    containerSelector: string;
+    /** Optional: whether to render drag handle and remove button inline with content (used by horizontal layout) */
+    inlineControls?: boolean;
+    /**
+     * Optional: custom content renderer for draggable items that integrates the drag handle.
+     * If provided, this is used instead of the default drag handle + renderContent pattern.
+     * Used by vertical layout to place drag handle alongside the field stack.
+     */
+    renderDraggableContent?: DraggableContentRenderer<T>;
+}
+/**
+ * Creates a set of item renderers (draggable, static, disabled) for a layout.
+ * This eliminates the duplication of three nearly identical component variants.
+ * The renderers are stable function references that don't capture variables in closures.
+ */
+export declare const createItemRenderers: <T>() => {
+    DraggableItem: (props: ItemProps<T>) => import("react/jsx-runtime.js").JSX.Element;
+    StaticItem: (props: ItemProps<T>) => import("react/jsx-runtime.js").JSX.Element;
+    DisabledItem: (props: ItemProps<T>) => import("react/jsx-runtime.js").JSX.Element;
+};
+/**
+ * Maps items to their appropriate renderer components based on state.
+ */
+export declare const mapItemsToComponents: <T>(items: T[], renderers: ReturnType<typeof createItemRenderers<T>>, config: ItemRendererConfig<T>, classes: LayoutClasses, options: {
+    getItemId?: (item: T, index: number) => string;
+    onRemove?: (index: number) => void;
+    removable?: boolean;
+    draggable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    columns: Array<CollectionColumnDef<T>>;
+}) => ReactNode[];
+//# sourceMappingURL=itemRenderer.d.ts.map

package/dist/cjs/components/Collection/layouts/shared/itemRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"itemRenderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/itemRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Collection/layouts/shared/itemRenderer.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get createItemRenderers () {
+        return createItemRenderers;
+    },
+    get mapItemsToComponents () {
+        return mapItemsToComponents;
+    }
+});
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _jsxruntime = require("react/jsx-runtime");
+var _sortable = require("@dnd-kit/sortable");
+var _utilities = require("@dnd-kit/utilities");
+var _core = require("@mantine/core");
+var _DragHandle = require("./DragHandle.js");
+var _RemoveButton = require("./RemoveButton.js");
+var createItemRenderers = function() {
+    /**
+     * Draggable item/row renderer with drag and drop functionality
+     */ var DraggableItem = function(props) {
+        var item = props.item, index = props.index, id = props.id, columns = props.columns, onRemove = props.onRemove, removable = props.removable, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
+        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;
+        var cellContext = {
+            removable: removable,
+            draggable: true,
+            disabled: disabled,
+            readOnly: readOnly,
+            onRemove: onRemove
+        };
+        var dragHandleProps = {
+            setActivatorNodeRef: setActivatorNodeRef,
+            listeners: listeners,
+            attributes: attributes
+        };
+        // Use renderDraggableContent if provided (integrates drag handle into content)
+        if (config.renderDraggableContent) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+                ref: setNodeRef,
+                "data-testid": "item-".concat(id),
+                className: classes[config.containerSelector],
+                style: transform ? {
+                    transform: _utilities.CSS.Transform.toString(transform),
+                    transition: transition
+                } : undefined,
+                "data-isdragging": isDragging,
+                children: config.renderDraggableContent(item, index, columns, cellContext, classes, dragHandleProps)
+            });
+        }
+        // Default behavior: inline drag handle + content + remove button (used by horizontal layout)
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
+            ref: setNodeRef,
+            "data-testid": "item-".concat(id),
+            className: classes[config.containerSelector],
+            style: transform ? {
+                transform: _utilities.CSS.Transform.toString(transform),
+                transition: transition
+            } : undefined,
+            "data-isdragging": isDragging,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragHandle.DragHandle, {
+                    setActivatorNodeRef: setActivatorNodeRef,
+                    listeners: listeners,
+                    attributes: attributes
+                }),
+                config.renderContent(item, index, columns, cellContext, classes),
+                config.inlineControls && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
+                    removable: removable,
+                    onRemove: onRemove
+                })
+            ]
+        });
+    };
+    /**
+     * Static (non-draggable) item/row renderer
+     */ var StaticItem = function(props) {
+        var item = props.item, index = props.index, id = props.id, columns = props.columns, onRemove = props.onRemove, removable = props.removable, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
+        var cellContext = {
+            removable: removable,
+            draggable: false,
+            disabled: disabled,
+            readOnly: readOnly,
+            onRemove: onRemove
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
+            "data-testid": "item-".concat(id),
+            className: classes[config.containerSelector],
+            children: [
+                config.renderContent(item, index, columns, cellContext, classes),
+                config.inlineControls && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
+                    removable: removable,
+                    onRemove: onRemove
+                })
+            ]
+        });
+    };
+    /**
+     * Disabled item/row renderer (no drag, no remove)
+     */ var DisabledItem = function(props) {
+        var item = props.item, index = props.index, id = props.id, columns = props.columns, disabled = props.disabled, readOnly = props.readOnly, classes = props.classes, config = props.config;
+        var cellContext = {
+            removable: false,
+            draggable: false,
+            disabled: disabled,
+            readOnly: readOnly
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+            "data-testid": "item-".concat(id),
+            className: classes[config.containerSelector],
+            children: config.renderContent(item, index, columns, cellContext, classes)
+        });
+    };
+    return {
+        DraggableItem: DraggableItem,
+        StaticItem: StaticItem,
+        DisabledItem: DisabledItem
+    };
+};
+var mapItemsToComponents = function(items, renderers, config, classes, options) {
+    var getItemId = options.getItemId, onRemove = options.onRemove, removable = options.removable, draggable = options.draggable, disabled = options.disabled, readOnly = options.readOnly, columns = options.columns;
+    var DraggableItem = renderers.DraggableItem, StaticItem = renderers.StaticItem, DisabledItem = renderers.DisabledItem;
+    return items.map(function(item, index) {
+        var _getItemId;
+        var id = (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item, index)) !== null && _getItemId !== void 0 ? _getItemId : String(index);
+        var itemProps = {
+            item: item,
+            index: index,
+            id: id,
+            columns: columns,
+            onRemove: onRemove ? function() {
+                return onRemove(index);
+            } : undefined,
+            removable: removable,
+            draggable: draggable,
+            disabled: disabled,
+            readOnly: readOnly,
+            classes: classes,
+            config: config
+        };
+        if (disabled) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(DisabledItem, _object_spread._({}, itemProps), id);
+        }
+        if (draggable) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(DraggableItem, _object_spread._({}, itemProps), id);
+        }
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticItem, _object_spread._({}, itemProps), id);
+    });
+};
+
+//# sourceMappingURL=itemRenderer.js.map

package/dist/cjs/components/Collection/layouts/shared/itemRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/itemRenderer.tsx"],"sourcesContent":["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Box} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport {CollectionCellContext, CollectionColumnDef} from '../../CollectionColumn.types.js';\nimport {DragHandle} from './DragHandle.js';\nimport {RemoveButton} from './RemoveButton.js';\n\n/**\n * CSS classes object for layout styling.\n */\nexport interface LayoutClasses {\n    [key: string]: string;\n}\n\n/**\n * Common props for rendering an item/row in either layout.\n */\nexport interface ItemProps<T> {\n    item: T;\n    index: number;\n    id: string;\n    columns: Array<CollectionColumnDef<T>>;\n    onRemove?: () => void;\n    removable?: boolean;\n    draggable?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    classes: LayoutClasses;\n    config: ItemRendererConfig<T>;\n}\n\n/**\n * Function type that renders the content specific to each layout.\n * Horizontal layout renders cells in a row, vertical layout renders stacked fields.\n */\nexport type ItemContentRenderer<T> = (\n    item: T,\n    index: number,\n    columns: Array<CollectionColumnDef<T>>,\n    cellContext: CollectionCellContext<T>,\n    classes: LayoutClasses,\n) => ReactNode;\n\n/**\n * Function type that renders content with inline drag handle for draggable items.\n * Used by layouts that want the drag handle integrated into the content (e.g., vertical layout).\n */\nexport type DraggableContentRenderer<T> = (\n    item: T,\n    index: number,\n    columns: Array<CollectionColumnDef<T>>,\n    cellContext: CollectionCellContext<T>,\n    classes: LayoutClasses,\n    dragHandleProps: {\n        setActivatorNodeRef: (element: HTMLElement | null) => void;\n        listeners: any;\n        attributes: any;\n    },\n) => ReactNode;\n\n/**\n * Configuration for creating layout-specific item renderers.\n */\nexport interface ItemRendererConfig<T> {\n    /** The content rendering function specific to the layout */\n    renderContent: ItemContentRenderer<T>;\n    /** The container style selector ('row' for horizontal, 'item' for vertical) */\n    containerSelector: string;\n    /** Optional: whether to render drag handle and remove button inline with content (used by horizontal layout) */\n    inlineControls?: boolean;\n    /**\n     * Optional: custom content renderer for draggable items that integrates the drag handle.\n     * If provided, this is used instead of the default drag handle + renderContent pattern.\n     * Used by vertical layout to place drag handle alongside the field stack.\n     */\n    renderDraggableContent?: DraggableContentRenderer<T>;\n}\n\n/**\n * Creates a set of item renderers (draggable, static, disabled) for a layout.\n * This eliminates the duplication of three nearly identical component variants.\n * The renderers are stable function references that don't capture variables in closures.\n */\nexport const createItemRenderers = <T,>() => {\n    /**\n     * Draggable item/row renderer with drag and drop functionality\n     */\n    const DraggableItem = (props: ItemProps<T>) => {\n        const {item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config} = props;\n        const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable(\n            {id},\n        );\n\n        const cellContext: CollectionCellContext<T> = {\n            removable,\n            draggable: true,\n            disabled,\n            readOnly,\n            onRemove,\n        };\n\n        const dragHandleProps = {setActivatorNodeRef, listeners, attributes};\n\n        // Use renderDraggableContent if provided (integrates drag handle into content)\n        if (config.renderDraggableContent) {\n            return (\n                <Box\n                    ref={setNodeRef}\n                    data-testid={`item-${id}`}\n                    className={classes[config.containerSelector]}\n                    style={\n                        transform\n                            ? {\n                                  transform: CSS.Transform.toString(transform),\n                                  transition,\n                              }\n                            : undefined\n                    }\n                    data-isdragging={isDragging}\n                >\n                    {config.renderDraggableContent(item, index, columns, cellContext, classes, dragHandleProps)}\n                </Box>\n            );\n        }\n\n        // Default behavior: inline drag handle + content + remove button (used by horizontal layout)\n        return (\n            <Box\n                ref={setNodeRef}\n                data-testid={`item-${id}`}\n                className={classes[config.containerSelector]}\n                style={\n                    transform\n                        ? {\n                              transform: CSS.Transform.toString(transform),\n                              transition,\n                          }\n                        : undefined\n                }\n                data-isdragging={isDragging}\n            >\n                <DragHandle setActivatorNodeRef={setActivatorNodeRef} listeners={listeners} attributes={attributes} />\n                {config.renderContent(item, index, columns, cellContext, classes)}\n                {config.inlineControls && <RemoveButton removable={removable} onRemove={onRemove} />}\n            </Box>\n        );\n    };\n\n    /**\n     * Static (non-draggable) item/row renderer\n     */\n    const StaticItem = (props: ItemProps<T>) => {\n        const {item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config} = props;\n\n        const cellContext: CollectionCellContext<T> = {\n            removable,\n            draggable: false,\n            disabled,\n            readOnly,\n            onRemove,\n        };\n\n        return (\n            <Box data-testid={`item-${id}`} className={classes[config.containerSelector]}>\n                {config.renderContent(item, index, columns, cellContext, classes)}\n                {config.inlineControls && <RemoveButton removable={removable} onRemove={onRemove} />}\n            </Box>\n        );\n    };\n\n    /**\n     * Disabled item/row renderer (no drag, no remove)\n     */\n    const DisabledItem = (props: ItemProps<T>) => {\n        const {item, index, id, columns, disabled, readOnly, classes, config} = props;\n\n        const cellContext: CollectionCellContext<T> = {\n            removable: false,\n            draggable: false,\n            disabled,\n            readOnly,\n        };\n\n        return (\n            <Box data-testid={`item-${id}`} className={classes[config.containerSelector]}>\n                {config.renderContent(item, index, columns, cellContext, classes)}\n            </Box>\n        );\n    };\n\n    return {DraggableItem, StaticItem, DisabledItem};\n};\n\n/**\n * Maps items to their appropriate renderer components based on state.\n */\nexport const mapItemsToComponents = <T,>(\n    items: T[],\n    renderers: ReturnType<typeof createItemRenderers<T>>,\n    config: ItemRendererConfig<T>,\n    classes: LayoutClasses,\n    options: {\n        getItemId?: (item: T, index: number) => string;\n        onRemove?: (index: number) => void;\n        removable?: boolean;\n        draggable?: boolean;\n        disabled?: boolean;\n        readOnly?: boolean;\n        columns: Array<CollectionColumnDef<T>>;\n    },\n): ReactNode[] => {\n    const {getItemId, onRemove, removable, draggable, disabled, readOnly, columns} = options;\n    const {DraggableItem, StaticItem, DisabledItem} = renderers;\n\n    return items.map((item, index) => {\n        const id = getItemId?.(item, index) ?? String(index);\n        const itemProps: ItemProps<T> = {\n            item,\n            index,\n            id,\n            columns,\n            onRemove: onRemove ? () => onRemove(index) : undefined,\n            removable,\n            draggable,\n            disabled,\n            readOnly,\n            classes,\n            config,\n        };\n\n        if (disabled) {\n            return <DisabledItem key={id} {...itemProps} />;\n        }\n\n        if (draggable) {\n            return <DraggableItem key={id} {...itemProps} />;\n        }\n\n        return <StaticItem key={id} {...itemProps} />;\n    });\n};\n"],"names":["createItemRenderers","mapItemsToComponents","DraggableItem","props","item","index","id","columns","onRemove","removable","disabled","readOnly","classes","config","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","cellContext","draggable","dragHandleProps","renderDraggableContent","Box","ref","data-testid","className","containerSelector","style","CSS","Transform","toString","undefined","data-isdragging","DragHandle","renderContent","inlineControls","RemoveButton","StaticItem","DisabledItem","items","renderers","options","getItemId","map","String","itemProps"],"mappings":"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"}

package/dist/cjs/components/Collection/layouts/shared/layoutConstants.d.ts

@@ -0,0 +1,38 @@
+import { BoxProps, MantineSpacing } from '@mantine/core';
+import { ReactNode } from 'react';
+/**
+ * Common props shared across all layout wrapper components.
+ */
+export interface LayoutProps {
+    children: ReactNode;
+}
+/**
+ * Common props shared across all layout header components.
+ */
+export interface LayoutHeaderProps extends BoxProps {
+    draggable?: boolean;
+    removable?: boolean;
+}
+/**
+ * Common default props shared across all layout header components.
+ */
+export declare const LAYOUT_HEADER_DEFAULT_PROPS: Partial<LayoutHeaderProps>;
+/**
+ * Common props shared across all layout body components.
+ */
+export interface LayoutBodyProps<T = unknown> extends BoxProps {
+    items: T[];
+    onRemove?: (index: number) => void;
+    removable?: boolean;
+    draggable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    getItemId?: (item: T, index: number) => string;
+    gap?: MantineSpacing;
+}
+/**
+ * Common default props shared across all layout body components.
+ * This ensures consistent defaults and reduces duplication.
+ */
+export declare const LAYOUT_BODY_DEFAULT_PROPS: Partial<LayoutBodyProps>;
+//# sourceMappingURL=layoutConstants.d.ts.map

package/dist/cjs/components/Collection/layouts/shared/layoutConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutConstants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/layoutConstants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhC;;GAEG;AACH,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,iBAAiB,CAGlE,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,QAAQ;IAC1D,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,eAAe,CAMrD,CAAC"}

package/dist/cjs/components/Collection/layouts/shared/layoutConstants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get LAYOUT_BODY_DEFAULT_PROPS () {
+        return LAYOUT_BODY_DEFAULT_PROPS;
+    },
+    get LAYOUT_HEADER_DEFAULT_PROPS () {
+        return LAYOUT_HEADER_DEFAULT_PROPS;
+    }
+});
+var LAYOUT_HEADER_DEFAULT_PROPS = {
+    draggable: false,
+    removable: true
+};
+var LAYOUT_BODY_DEFAULT_PROPS = {
+    removable: true,
+    draggable: false,
+    disabled: false,
+    readOnly: false,
+    gap: 'md'
+};
+
+//# sourceMappingURL=layoutConstants.js.map

package/dist/cjs/components/Collection/layouts/shared/layoutConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/shared/layoutConstants.ts"],"sourcesContent":["import {BoxProps, MantineSpacing} from '@mantine/core';\nimport {ReactNode} from 'react';\n\n/**\n * Common props shared across all layout wrapper components.\n */\nexport interface LayoutProps {\n    children: ReactNode;\n}\n\n/**\n * Common props shared across all layout header components.\n */\nexport interface LayoutHeaderProps extends BoxProps {\n    draggable?: boolean;\n    removable?: boolean;\n}\n\n/**\n * Common default props shared across all layout header components.\n */\nexport const LAYOUT_HEADER_DEFAULT_PROPS: Partial<LayoutHeaderProps> = {\n    draggable: false,\n    removable: true,\n};\n\n/**\n * Common props shared across all layout body components.\n */\nexport interface LayoutBodyProps<T = unknown> extends BoxProps {\n    items: T[];\n    onRemove?: (index: number) => void;\n    removable?: boolean;\n    draggable?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    getItemId?: (item: T, index: number) => string;\n    gap?: MantineSpacing;\n}\n\n/**\n * Common default props shared across all layout body components.\n * This ensures consistent defaults and reduces duplication.\n */\nexport const LAYOUT_BODY_DEFAULT_PROPS: Partial<LayoutBodyProps> = {\n    removable: true,\n    draggable: false,\n    disabled: false,\n    readOnly: false,\n    gap: 'md' as MantineSpacing,\n} as const;\n"],"names":["LAYOUT_BODY_DEFAULT_PROPS","LAYOUT_HEADER_DEFAULT_PROPS","draggable","removable","disabled","readOnly","gap"],"mappings":";;;;;;;;;;;QA4CaA;eAAAA;;QAvBAC;eAAAA;;;AAAN,IAAMA,8BAA0D;IACnEC,WAAW;IACXC,WAAW;AACf;AAoBO,IAAMH,4BAAsD;IAC/DG,WAAW;IACXD,WAAW;IACXE,UAAU;IACVC,UAAU;IACVC,KAAK;AACT"}

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayout.d.ts

@@ -0,0 +1,12 @@
+import { LayoutProps } from '../shared/layoutConstants.js';
+export declare const VerticalLayout: {
+    ({ children }: LayoutProps): import("react/jsx-runtime.js").JSX.Element;
+    Body: <T>(props: import("../shared/layoutConstants.js").LayoutBodyProps<T> & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    Header: (_props: import("../shared/layoutConstants.js").LayoutHeaderProps & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => null;
+    displayName: string;
+};
+//# sourceMappingURL=VerticalLayout.d.ts.map

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/vertical-layout/VerticalLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAIzD,eAAO,MAAM,cAAc;mBAAgB,WAAW;;WAK25F,CAAC;;;WAFv7F,CAAC;;;CAH8C,CAAC"}

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VerticalLayout", {
+    enumerable: true,
+    get: function() {
+        return VerticalLayout;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _VerticalLayoutBody = require("./VerticalLayoutBody.js");
+var _VerticalLayoutHeader = require("./VerticalLayoutHeader.js");
+var VerticalLayout = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: children
+    });
+};
+VerticalLayout.Body = _VerticalLayoutBody.VerticalLayoutBody;
+VerticalLayout.Header = _VerticalLayoutHeader.VerticalLayoutHeader;
+VerticalLayout.displayName = 'Vertical';
+
+//# sourceMappingURL=VerticalLayout.js.map

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/vertical-layout/VerticalLayout.tsx"],"sourcesContent":["import {LayoutProps} from '../shared/layoutConstants.js';\nimport {VerticalLayoutBody} from './VerticalLayoutBody.js';\nimport {VerticalLayoutHeader} from './VerticalLayoutHeader.js';\n\nexport const VerticalLayout = ({children}: LayoutProps) => <>{children}</>;\n\nVerticalLayout.Body = VerticalLayoutBody;\nVerticalLayout.Header = VerticalLayoutHeader;\nVerticalLayout.displayName = 'Vertical';\n"],"names":["VerticalLayout","children","Body","VerticalLayoutBody","Header","VerticalLayoutHeader","displayName"],"mappings":";;;;+BAIaA;;;eAAAA;;;;kCAHoB;oCACE;AAE5B,IAAMA,iBAAiB;QAAEC,iBAAAA;yBAA2B;kBAAGA;;;AAE9DD,eAAeE,IAAI,GAAGC,sCAAkB;AACxCH,eAAeI,MAAM,GAAGC,0CAAoB;AAC5CL,eAAeM,WAAW,GAAG"}

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayout.module.css

@@ -0,0 +1,35 @@
+.item {
+    border: 1px solid var(--mantine-color-gray-3);
+    border-radius: var(--mantine-radius-default);
+    padding: var(--mantine-spacing-md);
+    position: relative;
+    background: var(--mantine-color-body);
+}
+
+.item[data-isdragging='true'] {
+    z-index: 1;
+}
+
+.itemContent {
+    width: 100%;
+}
+
+.fieldGroup {
+    flex: 1;
+    min-width: 0;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-xs);
+}
+
+.fieldLabel {
+    font-weight: var(--coveo-fw-bold);
+    font-size: var(--mantine-font-size-sm);
+}
+
+.fieldContent {
+    width: 100%;
+}

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayoutBody.d.ts

@@ -0,0 +1,6 @@
+import { ForwardedRef } from 'react';
+import { LayoutBodyProps } from '../shared/layoutConstants.js';
+export declare const VerticalLayoutBody: <T>(props: LayoutBodyProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=VerticalLayoutBody.d.ts.map

package/dist/cjs/components/Collection/layouts/vertical-layout/VerticalLayoutBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalLayoutBody.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/vertical-layout/VerticalLayoutBody.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAU,MAAM,OAAO,CAAC;AAY5C,OAAO,EAA4B,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAyExF,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAG,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAC,+CAiCtG,CAAC"}