@coveord/plasma-mantine 56.18.0 → 56.20.0

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayout.module.css

@@ -0,0 +1,37 @@
+.headerRow {
+    display: flex;
+    gap: var(--mantine-spacing-sm);
+    padding-bottom: var(--mantine-spacing-xs);
+    align-items: center;
+}
+
+.headerCell {
+    flex: 1;
+    font-weight: var(--coveo-fw-bold);
+    text-align: left;
+}
+
+.dragHandleHeader {
+    width: var(--mantine-spacing-sm);
+    flex-shrink: 0;
+}
+
+.removeButtonHeader {
+    width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-sm));
+    flex-shrink: 0;
+}
+
+.row {
+    display: flex;
+    gap: var(--mantine-spacing-sm);
+    align-items: center;
+    background: var(--mantine-color-body);
+}
+
+.row[data-isdragging='true'] {
+    z-index: 1;
+}
+
+.cell {
+    flex: 1;
+}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.d.ts

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

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalLayoutBody.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAU,MAAM,OAAO,CAAC;AAI5C,OAAO,EAA4B,eAAe,EAAC,MAAM,8BAA8B,CAAC;AA8BxF,eAAO,MAAM,oBAAoB,GAAI,CAAC,EAAG,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAC,4CAgCxG,CAAC"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Stack, useProps } from '@mantine/core';
+import { useMemo } from 'react';
+import { useCollectionContext } from '../../CollectionContext.js';
+import { getColumnSizeStyles } from '../shared/columnUtils.js';
+import { createItemRenderers, mapItemsToComponents } from '../shared/itemRenderer.js';
+import { LAYOUT_BODY_DEFAULT_PROPS } from '../shared/layoutConstants.js';
+import classes from './HorizontalLayout.module.css';
+const defaultProps = LAYOUT_BODY_DEFAULT_PROPS;
+/**
+ * Horizontal layout specific content renderer - renders cells in a row
+ */ const renderHorizontalContent = (item, index, columns, cellContext, layoutClasses)=>/*#__PURE__*/ _jsx(_Fragment, {
+        children: columns.map((column, colIndex)=>{
+            const columnId = column.id ?? `column-${colIndex}`;
+            return /*#__PURE__*/ _jsx(Box, {
+                className: layoutClasses.cell,
+                style: getColumnSizeStyles(column),
+                children: column.cell(item, index, cellContext)
+            }, columnId);
+        })
+    });
+// Create renderers once - they are stable component references
+const horizontalRenderers = createItemRenderers();
+export const HorizontalLayoutBody = (props)=>{
+    const collectionCtx = useCollectionContext();
+    const { items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others } = useProps('HorizontalLayoutBody', defaultProps, props);
+    const config = useMemo(()=>({
+            renderContent: renderHorizontalContent,
+            containerSelector: 'row',
+            inlineControls: true
+        }), []);
+    const rows = mapItemsToComponents(items, horizontalRenderers, config, classes, {
+        getItemId,
+        onRemove,
+        removable,
+        draggable,
+        disabled,
+        readOnly,
+        columns: collectionCtx.columns
+    });
+    return /*#__PURE__*/ _jsx(Stack, {
+        ref: ref,
+        gap: gap,
+        ...others,
+        children: rows
+    });
+};
+
+//# sourceMappingURL=HorizontalLayoutBody.js.map

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.tsx"],"sourcesContent":["import {Box, Stack, useProps} from '@mantine/core';\nimport {ForwardedRef, useMemo} from 'react';\nimport {useCollectionContext} from '../../CollectionContext.js';\nimport {getColumnSizeStyles} from '../shared/columnUtils.js';\nimport {createItemRenderers, ItemContentRenderer, LayoutClasses, mapItemsToComponents} from '../shared/itemRenderer.js';\nimport {LAYOUT_BODY_DEFAULT_PROPS, LayoutBodyProps} from '../shared/layoutConstants.js';\nimport classes from './HorizontalLayout.module.css';\n\nconst defaultProps: Partial<LayoutBodyProps> = LAYOUT_BODY_DEFAULT_PROPS;\n\n/**\n * Horizontal layout specific content renderer - renders cells in a row\n */\nconst renderHorizontalContent: ItemContentRenderer<unknown> = (\n    item,\n    index,\n    columns,\n    cellContext,\n    layoutClasses: LayoutClasses,\n) => (\n    <>\n        {columns.map((column, colIndex) => {\n            const columnId = column.id ?? `column-${colIndex}`;\n            return (\n                <Box key={columnId} className={layoutClasses.cell} style={getColumnSizeStyles(column)}>\n                    {column.cell(item, index, cellContext)}\n                </Box>\n            );\n        })}\n    </>\n);\n\n// Create renderers once - they are stable component references\nconst horizontalRenderers = createItemRenderers<unknown>();\n\nexport const HorizontalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const collectionCtx = useCollectionContext();\n    const {items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others} = useProps(\n        'HorizontalLayoutBody',\n        defaultProps as LayoutBodyProps<T>,\n        props,\n    );\n\n    const config = useMemo(\n        () => ({\n            renderContent: renderHorizontalContent,\n            containerSelector: 'row',\n            inlineControls: true,\n        }),\n        [],\n    );\n\n    const rows = mapItemsToComponents(items, horizontalRenderers, config, classes as LayoutClasses, {\n        getItemId,\n        onRemove,\n        removable,\n        draggable,\n        disabled,\n        readOnly,\n        columns: collectionCtx.columns,\n    });\n\n    return (\n        <Stack ref={ref} gap={gap} {...others}>\n            {rows}\n        </Stack>\n    );\n};\n"],"names":["Box","Stack","useProps","useMemo","useCollectionContext","getColumnSizeStyles","createItemRenderers","mapItemsToComponents","LAYOUT_BODY_DEFAULT_PROPS","classes","defaultProps","renderHorizontalContent","item","index","columns","cellContext","layoutClasses","map","column","colIndex","columnId","id","className","cell","style","horizontalRenderers","HorizontalLayoutBody","props","collectionCtx","items","onRemove","removable","draggable","disabled","readOnly","getItemId","gap","ref","others","config","renderContent","containerSelector","inlineControls","rows"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAO,gBAAgB;AACnD,SAAsBC,OAAO,QAAO,QAAQ;AAC5C,SAAQC,oBAAoB,QAAO,6BAA6B;AAChE,SAAQC,mBAAmB,QAAO,2BAA2B;AAC7D,SAAQC,mBAAmB,EAAsCC,oBAAoB,QAAO,4BAA4B;AACxH,SAAQC,yBAAyB,QAAwB,+BAA+B;AACxF,OAAOC,aAAa,gCAAgC;AAEpD,MAAMC,eAAyCF;AAE/C;;CAEC,GACD,MAAMG,0BAAwD,CAC1DC,MACAC,OACAC,SACAC,aACAC,8BAEA;kBACKF,QAAQG,GAAG,CAAC,CAACC,QAAQC;YAClB,MAAMC,WAAWF,OAAOG,EAAE,IAAI,CAAC,OAAO,EAAEF,UAAU;YAClD,qBACI,KAACnB;gBAAmBsB,WAAWN,cAAcO,IAAI;gBAAEC,OAAOnB,oBAAoBa;0BACzEA,OAAOK,IAAI,CAACX,MAAMC,OAAOE;eADpBK;QAIlB;;AAIR,+DAA+D;AAC/D,MAAMK,sBAAsBnB;AAE5B,OAAO,MAAMoB,uBAAuB,CAAKC;IACrC,MAAMC,gBAAgBxB;IACtB,MAAM,EAACyB,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,GAAG,EAAE,GAAGC,QAAO,GAAGpC,SAChG,wBACAQ,cACAiB;IAGJ,MAAMY,SAASpC,QACX,IAAO,CAAA;YACHqC,eAAe7B;YACf8B,mBAAmB;YACnBC,gBAAgB;QACpB,CAAA,GACA,EAAE;IAGN,MAAMC,OAAOpC,qBAAqBsB,OAAOJ,qBAAqBc,QAAQ9B,SAA0B;QAC5F0B;QACAL;QACAC;QACAC;QACAC;QACAC;QACApB,SAASc,cAAcd,OAAO;IAClC;IAEA,qBACI,KAACb;QAAMoC,KAAKA;QAAKD,KAAKA;QAAM,GAAGE,MAAM;kBAChCK;;AAGb,EAAE"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.d.ts

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

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalLayoutHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAInC,OAAO,EAA8B,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAK5F,eAAO,MAAM,sBAAsB,GAAI,OAAO,iBAAiB,GAAG;IAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAC,4CAsBrG,CAAC"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useProps } from '@mantine/core';
+import { useCollectionContext } from '../../CollectionContext.js';
+import { getColumnSizeStyles } from '../shared/columnUtils.js';
+import { renderColumnHeader } from '../shared/headerUtils.js';
+import { LAYOUT_HEADER_DEFAULT_PROPS } from '../shared/layoutConstants.js';
+import classes from './HorizontalLayout.module.css';
+const defaultProps = LAYOUT_HEADER_DEFAULT_PROPS;
+export const HorizontalLayoutHeader = (props)=>{
+    const collectionCtx = useCollectionContext();
+    const { draggable, removable, style, ref, ...others } = useProps('HorizontalLayoutHeader', defaultProps, props);
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: ref,
+        className: classes.headerRow,
+        style: style,
+        ...others,
+        children: [
+            draggable && /*#__PURE__*/ _jsx("div", {
+                className: classes.dragHandleHeader
+            }),
+            collectionCtx.columns.map((column, index)=>{
+                const columnId = column.id ?? `column-${index}`;
+                return /*#__PURE__*/ _jsx(Box, {
+                    className: classes.headerCell,
+                    style: getColumnSizeStyles(column),
+                    children: renderColumnHeader(column.header, index)
+                }, columnId);
+            }),
+            removable && /*#__PURE__*/ _jsx("div", {
+                className: classes.removeButtonHeader
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=HorizontalLayoutHeader.js.map

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.tsx"],"sourcesContent":["import {Box, useProps} from '@mantine/core';\nimport {ForwardedRef} from 'react';\nimport {useCollectionContext} from '../../CollectionContext.js';\nimport {getColumnSizeStyles} from '../shared/columnUtils.js';\nimport {renderColumnHeader} from '../shared/headerUtils.js';\nimport {LAYOUT_HEADER_DEFAULT_PROPS, LayoutHeaderProps} from '../shared/layoutConstants.js';\nimport classes from './HorizontalLayout.module.css';\n\nconst defaultProps: Partial<LayoutHeaderProps> = LAYOUT_HEADER_DEFAULT_PROPS;\n\nexport const HorizontalLayoutHeader = (props: LayoutHeaderProps & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const collectionCtx = useCollectionContext();\n    const {draggable, removable, style, ref, ...others} = useProps(\n        'HorizontalLayoutHeader',\n        defaultProps as LayoutHeaderProps,\n        props,\n    );\n\n    return (\n        <Box ref={ref} className={classes.headerRow} style={style} {...others}>\n            {draggable && <div className={classes.dragHandleHeader} />}\n            {collectionCtx.columns.map((column, index) => {\n                const columnId = column.id ?? `column-${index}`;\n                return (\n                    <Box key={columnId} className={classes.headerCell} style={getColumnSizeStyles(column)}>\n                        {renderColumnHeader(column.header, index)}\n                    </Box>\n                );\n            })}\n            {removable && <div className={classes.removeButtonHeader} />}\n        </Box>\n    );\n};\n"],"names":["Box","useProps","useCollectionContext","getColumnSizeStyles","renderColumnHeader","LAYOUT_HEADER_DEFAULT_PROPS","classes","defaultProps","HorizontalLayoutHeader","props","collectionCtx","draggable","removable","style","ref","others","className","headerRow","div","dragHandleHeader","columns","map","column","index","columnId","id","headerCell","header","removeButtonHeader"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,QAAQ,QAAO,gBAAgB;AAE5C,SAAQC,oBAAoB,QAAO,6BAA6B;AAChE,SAAQC,mBAAmB,QAAO,2BAA2B;AAC7D,SAAQC,kBAAkB,QAAO,2BAA2B;AAC5D,SAAQC,2BAA2B,QAA0B,+BAA+B;AAC5F,OAAOC,aAAa,gCAAgC;AAEpD,MAAMC,eAA2CF;AAEjD,OAAO,MAAMG,yBAAyB,CAACC;IACnC,MAAMC,gBAAgBR;IACtB,MAAM,EAACS,SAAS,EAAEC,SAAS,EAAEC,KAAK,EAAEC,GAAG,EAAE,GAAGC,QAAO,GAAGd,SAClD,0BACAM,cACAE;IAGJ,qBACI,MAACT;QAAIc,KAAKA;QAAKE,WAAWV,QAAQW,SAAS;QAAEJ,OAAOA;QAAQ,GAAGE,MAAM;;YAChEJ,2BAAa,KAACO;gBAAIF,WAAWV,QAAQa,gBAAgB;;YACrDT,cAAcU,OAAO,CAACC,GAAG,CAAC,CAACC,QAAQC;gBAChC,MAAMC,WAAWF,OAAOG,EAAE,IAAI,CAAC,OAAO,EAAEF,OAAO;gBAC/C,qBACI,KAACvB;oBAAmBgB,WAAWV,QAAQoB,UAAU;oBAAEb,OAAOV,oBAAoBmB;8BACzElB,mBAAmBkB,OAAOK,MAAM,EAAEJ;mBAD7BC;YAIlB;YACCZ,2BAAa,KAACM;gBAAIF,WAAWV,QAAQsB,kBAAkB;;;;AAGpE,EAAE"}

package/dist/esm/components/Collection/layouts/shared/DragHandle.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent } from 'react';
+export interface DragHandleProps {
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    listeners: any;
+    attributes: any;
+}
+/**
+ * Shared drag handle component used by both horizontal and vertical layouts.
+ * Renders the drag icon with proper event handlers for drag and drop functionality.
+ */
+export declare const DragHandle: FunctionComponent<DragHandleProps>;
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/esm/components/Collection/layouts/shared/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/DragHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC5B,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,SAAS,EAAE,GAAG,CAAC;IACf,UAAU,EAAE,GAAG,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAOzD,CAAC"}

package/dist/esm/components/Collection/layouts/shared/DragHandle.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragAndDropSize16Px } from '@coveord/plasma-react-icons';
+import { useCollectionContext } from '../../CollectionContext.js';
+/**
+ * Shared drag handle component used by both horizontal and vertical layouts.
+ * Renders the drag icon with proper event handlers for drag and drop functionality.
+ */ export const DragHandle = ({ setActivatorNodeRef, listeners, attributes })=>{
+    const { getStyles } = useCollectionContext();
+    return /*#__PURE__*/ _jsx("div", {
+        ref: setActivatorNodeRef,
+        ...listeners,
+        ...attributes,
+        ...getStyles('dragHandle'),
+        children: /*#__PURE__*/ _jsx(DragAndDropSize16Px, {
+            height: 16
+        })
+    });
+};
+
+//# sourceMappingURL=DragHandle.js.map

package/dist/esm/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":["DragAndDropSize16Px","useCollectionContext","DragHandle","setActivatorNodeRef","listeners","attributes","getStyles","div","ref","height"],"mappings":";AAAA,SAAQA,mBAAmB,QAAO,8BAA8B;AAEhE,SAAQC,oBAAoB,QAAO,6BAA6B;AAQhE;;;CAGC,GACD,OAAO,MAAMC,aAAiD,CAAC,EAACC,mBAAmB,EAAEC,SAAS,EAAEC,UAAU,EAAC;IACvG,MAAM,EAACC,SAAS,EAAC,GAAGL;IACpB,qBACI,KAACM;QAAIC,KAAKL;QAAsB,GAAGC,SAAS;QAAG,GAAGC,UAAU;QAAG,GAAGC,UAAU,aAAa;kBACrF,cAAA,KAACN;YAAoBS,QAAQ;;;AAGzC,EAAE"}

package/dist/esm/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/esm/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/esm/components/Collection/layouts/shared/RemoveButton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconTrash } from '@coveord/plasma-react-icons';
+import { Box } from '@mantine/core';
+import { ActionIcon } from '../../../ActionIcon/ActionIcon.js';
+import { useCollectionContext } from '../../CollectionContext.js';
+/**
+ * Shared remove button component used by both horizontal and vertical layouts.
+ * Renders a trash icon button when removable, or a spacer div otherwise.
+ */ export const RemoveButton = ({ removable, onRemove })=>{
+    const { getStyles } = useCollectionContext();
+    if (!removable || !onRemove) {
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                width: 28
+            }
+        });
+    }
+    return /*#__PURE__*/ _jsx(Box, {
+        ...getStyles('removeButton'),
+        children: /*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
+            onClick: onRemove,
+            children: /*#__PURE__*/ _jsx(IconTrash, {
+                "aria-label": "Remove",
+                size: 16
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=RemoveButton.js.map

package/dist/esm/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":["IconTrash","Box","ActionIcon","useCollectionContext","RemoveButton","removable","onRemove","getStyles","div","style","width","Quaternary","onClick","aria-label","size"],"mappings":";AAAA,SAAQA,SAAS,QAAO,8BAA8B;AACtD,SAAQC,GAAG,QAAO,gBAAgB;AAElC,SAAQC,UAAU,QAAO,oCAAoC;AAC7D,SAAQC,oBAAoB,QAAO,6BAA6B;AAOhE;;;CAGC,GACD,OAAO,MAAMC,eAAqD,CAAC,EAACC,SAAS,EAAEC,QAAQ,EAAC;IACpF,MAAM,EAACC,SAAS,EAAC,GAAGJ;IAEpB,IAAI,CAACE,aAAa,CAACC,UAAU;QACzB,qBAAO,KAACE;YAAIC,OAAO;gBAACC,OAAO;YAAE;;IACjC;IAEA,qBACI,KAACT;QAAK,GAAGM,UAAU,eAAe;kBAC9B,cAAA,KAACL,WAAWS,UAAU;YAACC,SAASN;sBAC5B,cAAA,KAACN;gBAAUa,cAAW;gBAASC,MAAM;;;;AAIrD,EAAE"}

package/dist/esm/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/esm/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/esm/components/Collection/layouts/shared/columnUtils.js

@@ -0,0 +1,17 @@
+/**
+ * Converts column size configuration to CSS styles.
+ * Handles both numeric (px) and string (%, fr, etc.) size values.
+ */ export const getColumnSizeStyles = (column)=>{
+    const sizeToStyle = (size)=>{
+        if (size === undefined) {
+            return undefined;
+        }
+        return typeof size === 'number' ? `${size}px` : size;
+    };
+    return {
+        minWidth: sizeToStyle(column.minSize),
+        maxWidth: sizeToStyle(column.maxSize)
+    };
+};
+
+//# sourceMappingURL=columnUtils.js.map

package/dist/esm/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":"AAGA;;;CAGC,GACD,OAAO,MAAMA,sBAAsB,CAACC;IAChC,MAAMC,cAAc,CAACC;QACjB,IAAIA,SAASC,WAAW;YACpB,OAAOA;QACX;QACA,OAAO,OAAOD,SAAS,WAAW,GAAGA,KAAK,EAAE,CAAC,GAAGA;IACpD;IAEA,OAAO;QACHE,UAAUH,YAAYD,OAAOK,OAAO;QACpCC,UAAUL,YAAYD,OAAOO,OAAO;IACxC;AACJ,EAAE"}

package/dist/esm/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/esm/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/esm/components/Collection/layouts/shared/headerUtils.js

@@ -0,0 +1,14 @@
+/**
+ * Renders a column header by invoking the header function with context if needed.
+ * Handles both static headers (strings/nodes) and dynamic header functions.
+ */ export const renderColumnHeader = (header, index)=>{
+    if (typeof header === 'function') {
+        const context = {
+            index
+        };
+        return header(context);
+    }
+    return header;
+};
+
+//# sourceMappingURL=headerUtils.js.map

package/dist/esm/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":"AAGA;;;CAGC,GACD,OAAO,MAAMA,qBAAqB,CAACC,QAAgDC;IAC/E,IAAI,OAAOD,WAAW,YAAY;QAC9B,MAAME,UAAmC;YAACD;QAAK;QAC/C,OAAOD,OAAOE;IAClB;IACA,OAAOF;AACX,EAAE"}

package/dist/esm/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").JSX.Element;
+    StaticItem: (props: ItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+    DisabledItem: (props: ItemProps<T>) => import("react/jsx-runtime").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/esm/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/esm/components/Collection/layouts/shared/itemRenderer.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Box } from '@mantine/core';
+import { DragHandle } from './DragHandle.js';
+import { RemoveButton } from './RemoveButton.js';
+/**
+ * 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 const createItemRenderers = ()=>{
+    /**
+     * Draggable item/row renderer with drag and drop functionality
+     */ const DraggableItem = (props)=>{
+        const { item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config } = props;
+        const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
+            id
+        });
+        const cellContext = {
+            removable,
+            draggable: true,
+            disabled,
+            readOnly,
+            onRemove
+        };
+        const dragHandleProps = {
+            setActivatorNodeRef,
+            listeners,
+            attributes
+        };
+        // Use renderDraggableContent if provided (integrates drag handle into content)
+        if (config.renderDraggableContent) {
+            return /*#__PURE__*/ _jsx(Box, {
+                ref: setNodeRef,
+                "data-testid": `item-${id}`,
+                className: classes[config.containerSelector],
+                style: transform ? {
+                    transform: CSS.Transform.toString(transform),
+                    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__*/ _jsxs(Box, {
+            ref: setNodeRef,
+            "data-testid": `item-${id}`,
+            className: classes[config.containerSelector],
+            style: transform ? {
+                transform: CSS.Transform.toString(transform),
+                transition
+            } : undefined,
+            "data-isdragging": isDragging,
+            children: [
+                /*#__PURE__*/ _jsx(DragHandle, {
+                    setActivatorNodeRef: setActivatorNodeRef,
+                    listeners: listeners,
+                    attributes: attributes
+                }),
+                config.renderContent(item, index, columns, cellContext, classes),
+                config.inlineControls && /*#__PURE__*/ _jsx(RemoveButton, {
+                    removable: removable,
+                    onRemove: onRemove
+                })
+            ]
+        });
+    };
+    /**
+     * Static (non-draggable) item/row renderer
+     */ const StaticItem = (props)=>{
+        const { item, index, id, columns, onRemove, removable, disabled, readOnly, classes, config } = props;
+        const cellContext = {
+            removable,
+            draggable: false,
+            disabled,
+            readOnly,
+            onRemove
+        };
+        return /*#__PURE__*/ _jsxs(Box, {
+            "data-testid": `item-${id}`,
+            className: classes[config.containerSelector],
+            children: [
+                config.renderContent(item, index, columns, cellContext, classes),
+                config.inlineControls && /*#__PURE__*/ _jsx(RemoveButton, {
+                    removable: removable,
+                    onRemove: onRemove
+                })
+            ]
+        });
+    };
+    /**
+     * Disabled item/row renderer (no drag, no remove)
+     */ const DisabledItem = (props)=>{
+        const { item, index, id, columns, disabled, readOnly, classes, config } = props;
+        const cellContext = {
+            removable: false,
+            draggable: false,
+            disabled,
+            readOnly
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            "data-testid": `item-${id}`,
+            className: classes[config.containerSelector],
+            children: config.renderContent(item, index, columns, cellContext, classes)
+        });
+    };
+    return {
+        DraggableItem,
+        StaticItem,
+        DisabledItem
+    };
+};
+/**
+ * Maps items to their appropriate renderer components based on state.
+ */ export const mapItemsToComponents = (items, renderers, config, classes, options)=>{
+    const { getItemId, onRemove, removable, draggable, disabled, readOnly, columns } = options;
+    const { DraggableItem, StaticItem, DisabledItem } = renderers;
+    return items.map((item, index)=>{
+        const id = getItemId?.(item, index) ?? String(index);
+        const itemProps = {
+            item,
+            index,
+            id,
+            columns,
+            onRemove: onRemove ? ()=>onRemove(index) : undefined,
+            removable,
+            draggable,
+            disabled,
+            readOnly,
+            classes,
+            config
+        };
+        if (disabled) {
+            return /*#__PURE__*/ _jsx(DisabledItem, {
+                ...itemProps
+            }, id);
+        }
+        if (draggable) {
+            return /*#__PURE__*/ _jsx(DraggableItem, {
+                ...itemProps
+            }, id);
+        }
+        return /*#__PURE__*/ _jsx(StaticItem, {
+            ...itemProps
+        }, id);
+    });
+};
+
+//# sourceMappingURL=itemRenderer.js.map

package/dist/esm/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":["useSortable","CSS","Box","DragHandle","RemoveButton","createItemRenderers","DraggableItem","props","item","index","id","columns","onRemove","removable","disabled","readOnly","classes","config","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","cellContext","draggable","dragHandleProps","renderDraggableContent","ref","data-testid","className","containerSelector","style","Transform","toString","undefined","data-isdragging","renderContent","inlineControls","StaticItem","DisabledItem","mapItemsToComponents","items","renderers","options","getItemId","map","String","itemProps"],"mappings":"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"}