@limetech/lime-elements 38.31.0 → 38.31.2

package/dist/collection/components/form/templates/array-field.js

@@ -3,15 +3,128 @@ import { isObjectType } from '../schema';
 import { CollapsibleItemTemplate } from './array-field-collapsible-item';
 import { SimpleItemTemplate } from './array-field-simple-item';
 import { renderDescription, renderTitle } from './common';
+import Sortable from 'sortablejs';
+const DRAG_HANDLE_SELECTOR = '[data-drag-handle]';
+const DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable="true"]';
+const DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';
+const DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';
+const DROP_ELEVATION_DURATION = 1000;
+const TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.
 export class ArrayFieldTemplate extends React.Component {
   constructor(props) {
     super(props);
-    this.props = props;
-    this.renderItem = this.renderItem.bind(this);
-    this.handleAddClick = this.handleAddClick.bind(this);
+    this.itemByIndex = new Map();
+    this.handleAddClick = (event) => {
+      event.stopPropagation();
+      this.props.onAddClick(event);
+    };
+    this.setContainer = (element) => {
+      if (this.container === element) {
+        return;
+      }
+      this.teardownDragController();
+      this.container = element !== null && element !== void 0 ? element : undefined;
+      this.setupDragController();
+    };
+    this.handleSortStart = (event) => {
+      if (!this.canReorderItems()) {
+        return;
+      }
+      this.dragSnapshot = [...this.state.order];
+      this.draggedItemIndex = this.getReorderId(event.item);
+      if (this.container) {
+        this.container.classList.add(DEFAULT_CONTAINER_CLASS);
+      }
+      if (event.item instanceof HTMLElement) {
+        this.applyDropElevation(event.item);
+      }
+    };
+    this.handleSortEnd = (event) => {
+      var _a;
+      if (!this.canReorderItems()) {
+        return;
+      }
+      if (this.container) {
+        this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
+      }
+      const snapshot = this.dragSnapshot;
+      const draggedItemIndex = this.draggedItemIndex;
+      this.dragSnapshot = undefined;
+      this.draggedItemIndex = undefined;
+      if (event.item instanceof HTMLElement) {
+        this.dropElevationTarget = event.item;
+      }
+      const finalOrder = this.readOrderFromDom();
+      if (!this.arraysEqual(this.state.order, finalOrder)) {
+        this.setState({ order: finalOrder });
+      }
+      if (snapshot === undefined ||
+        draggedItemIndex === undefined ||
+        !(event.item instanceof HTMLElement)) {
+        this.scheduleDropElevationRemoval();
+        return;
+      }
+      const fromPosition = snapshot.indexOf(draggedItemIndex);
+      const toPosition = finalOrder.indexOf(draggedItemIndex);
+      if (fromPosition === -1 ||
+        toPosition === -1 ||
+        fromPosition === toPosition) {
+        this.scheduleDropElevationRemoval();
+        return;
+      }
+      const targetItem = ((_a = this.props.items) !== null && _a !== void 0 ? _a : []).find((entry) => {
+        var _a;
+        return ((_a = entry.index) !== null && _a !== void 0 ? _a : -1) === draggedItemIndex;
+      });
+      if (!targetItem || typeof targetItem.onReorderClick !== 'function') {
+        this.scheduleDropElevationRemoval();
+        return;
+      }
+      requestAnimationFrame(() => {
+        const reorder = targetItem.onReorderClick(draggedItemIndex, toPosition);
+        if (typeof reorder === 'function') {
+          reorder();
+        }
+      });
+      this.scheduleDropElevationRemoval();
+    };
+    this.state = {
+      order: this.extractIndices(props.items),
+    };
+  }
+  componentWillUnmount() {
+    this.teardownDragController();
+  }
+  componentDidMount() {
+    this.setupDragController();
+  }
+  componentDidUpdate(previousProps) {
+    if (previousProps.items !== this.props.items) {
+      const nextOrder = this.extractIndices(this.props.items);
+      if (!this.arraysEqual(this.state.order, nextOrder)) {
+        this.setState({
+          order: nextOrder,
+        }, () => {
+          this.setupDragController();
+        });
+        return;
+      }
+    }
+    if (previousProps.items !== this.props.items ||
+      previousProps.schema !== this.props.schema ||
+      previousProps.disabled !== this.props.disabled ||
+      previousProps.readonly !== this.props.readonly) {
+      this.setupDragController();
+    }
   }
   render() {
-    return React.createElement('div', {}, renderTitle(this.props.title), renderDescription(this.props.schema.description), this.props.items.map(this.renderItem), this.renderAddButton());
+    const controls = this.getItemControls();
+    const { ordered: orderedItems, byIndex } = this.getOrderedItems();
+    this.itemByIndex = byIndex;
+    return React.createElement('div', {}, renderTitle(this.props.title), renderDescription(this.props.schema.description), React.createElement('div', {
+      className: 'array-items',
+      ref: this.setContainer,
+    }, orderedItems.map((item, index) => this.renderItem(item, index, controls))), this.renderAddButton());
   }
   renderAddButton() {
     if (!this.props.canAdd) {
@@ -24,40 +137,214 @@ export class ArrayFieldTemplate extends React.Component {
       class: 'button-add-new',
     });
   }
-  renderItem(item, index) {
+  getItemControls() {
+    return {
+      allowItemRemoval: this.canRemoveItems(),
+    };
+  }
+  renderItem(item, index, controls) {
+    var _a;
     const { schema, formData, formContext } = this.props;
-    const controls = this.getItemControls();
+    const itemIndex = (_a = item.index) !== null && _a !== void 0 ? _a : index;
+    const allowItemReorder = this.isItemReorderable(item);
     if (isObjectType(schema.items)) {
       return React.createElement(CollapsibleItemTemplate, {
         key: item.key,
         item: item,
-        data: formData[index],
+        data: Array.isArray(formData) ? formData[itemIndex] : undefined,
         schema: schema,
         formSchema: formContext.schema,
-        index: index,
+        index: itemIndex,
         allowItemRemoval: controls.allowItemRemoval,
-        allowItemReorder: controls.allowItemReorder,
+        allowItemReorder: allowItemReorder,
       });
     }
     return React.createElement(SimpleItemTemplate, {
       key: item.key,
       item: item,
-      index: index,
+      index: itemIndex,
+      dataIndex: itemIndex,
       allowItemRemoval: controls.allowItemRemoval,
-      allowItemReorder: controls.allowItemReorder,
+      allowItemReorder: allowItemReorder,
     });
   }
-  getItemControls() {
-    var _a;
-    const limeOptions = ((_a = this.props.schema) === null || _a === void 0 ? void 0 : _a.lime) || {};
+  getOrderedItems() {
+    var _a, _b;
+    const items = (_a = this.props.items) !== null && _a !== void 0 ? _a : [];
+    const byIndex = new Map();
+    let entryIndex = 0;
+    for (const entry of items) {
+      byIndex.set((_b = entry.index) !== null && _b !== void 0 ? _b : entryIndex, entry);
+      entryIndex += 1;
+    }
+    const ordered = [];
+    const used = new Set();
+    for (const index of this.state.order) {
+      const entry = byIndex.get(index);
+      if (!entry) {
+        continue;
+      }
+      ordered.push(entry);
+      used.add(index);
+    }
+    for (const [index, entry] of byIndex.entries()) {
+      if (!used.has(index)) {
+        ordered.push(entry);
+      }
+    }
     return {
-      allowItemRemoval: limeOptions.allowItemRemoval !== false,
-      allowItemReorder: limeOptions.allowItemReorder !== false,
+      ordered,
+      byIndex,
     };
   }
-  handleAddClick(event) {
-    event.stopPropagation();
-    this.props.onAddClick(event);
+  setupDragController() {
+    if (!this.container || !this.canReorderItems()) {
+      this.teardownDragController();
+      return;
+    }
+    const reorderableCount = this.getReorderableOrder().length;
+    if (reorderableCount < 2) {
+      this.teardownDragController();
+      return;
+    }
+    if (this.sortable) {
+      this.sortable.option('handle', DRAG_HANDLE_SELECTOR);
+      this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);
+      this.sortable.option('disabled', false);
+      this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);
+      this.sortable.option('delayOnTouchOnly', true);
+      return;
+    }
+    this.sortable = Sortable.create(this.container, {
+      animation: 150,
+      handle: DRAG_HANDLE_SELECTOR,
+      draggable: DRAGGABLE_ITEM_SELECTOR,
+      delay: TOUCH_DRAG_DELAY_MS,
+      delayOnTouchOnly: true,
+      onStart: this.handleSortStart,
+      onEnd: this.handleSortEnd,
+    });
+  }
+  teardownDragController() {
+    if (this.sortable) {
+      this.sortable.destroy();
+      this.sortable = undefined;
+    }
+    this.clearDropElevationTimer();
+    if (this.dropElevationTarget) {
+      this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
+      this.dropElevationTarget = undefined;
+    }
+    if (this.container) {
+      this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
+    }
+    this.dragSnapshot = undefined;
+    this.draggedItemIndex = undefined;
+  }
+  canReorderItems() {
+    if (this.props.disabled || this.props.readonly) {
+      return false;
+    }
+    const schema = this.props.schema;
+    const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
+    return limeOptions.allowItemReorder !== false;
+  }
+  canRemoveItems() {
+    const schema = this.props.schema;
+    const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
+    return limeOptions.allowItemRemoval !== false;
+  }
+  isItemReorderable(item) {
+    return (this.canReorderItems() &&
+      Boolean((item === null || item === void 0 ? void 0 : item.hasMoveDown) || (item === null || item === void 0 ? void 0 : item.hasMoveUp)));
+  }
+  isIndexReorderable(index) {
+    const item = this.itemByIndex.get(index);
+    if (!item) {
+      return false;
+    }
+    return this.isItemReorderable(item);
+  }
+  getReorderableOrder(order = this.state.order) {
+    const result = [];
+    for (const index of order) {
+      if (this.isIndexReorderable(index)) {
+        result.push(index);
+      }
+    }
+    return result;
+  }
+  readOrderFromDom() {
+    if (!this.container) {
+      return [];
+    }
+    const items = [...this.container.querySelectorAll('.array-item')];
+    const order = [];
+    for (const element of items) {
+      const index = this.getReorderId(element);
+      if (index !== undefined) {
+        order.push(index);
+      }
+    }
+    return order;
+  }
+  getReorderId(element) {
+    if (!element) {
+      return undefined;
+    }
+    if (!(element instanceof HTMLElement)) {
+      return undefined;
+    }
+    const value = element.dataset.reorderId;
+    if (value === undefined) {
+      return undefined;
+    }
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  applyDropElevation(item) {
+    if (this.dropElevationTarget && this.dropElevationTarget !== item) {
+      this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
+    }
+    this.clearDropElevationTimer();
+    item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);
+    this.dropElevationTarget = item;
+  }
+  scheduleDropElevationRemoval() {
+    if (!this.dropElevationTarget) {
+      return;
+    }
+    const target = this.dropElevationTarget;
+    this.clearDropElevationTimer();
+    this.dropElevationTimeout = globalThis.setTimeout(() => {
+      target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
+      if (this.dropElevationTarget === target) {
+        this.dropElevationTarget = undefined;
+      }
+      this.dropElevationTimeout = undefined;
+    }, DROP_ELEVATION_DURATION);
+  }
+  clearDropElevationTimer() {
+    if (this.dropElevationTimeout !== undefined) {
+      clearTimeout(this.dropElevationTimeout);
+      this.dropElevationTimeout = undefined;
+    }
+  }
+  arraysEqual(a, b) {
+    if (a.length !== b.length) {
+      return false;
+    }
+    let index = 0;
+    for (const value of a) {
+      if (value !== b[index]) {
+        return false;
+      }
+      index += 1;
+    }
+    return true;
+  }
+  extractIndices(items = []) {
+    return (items !== null && items !== void 0 ? items : []).map((item, index) => { var _a; return (_a = item.index) !== null && _a !== void 0 ? _a : index; });
   }
 }
 //# sourceMappingURL=array-field.js.map

package/dist/collection/components/form/templates/array-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"array-field.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { isObjectType } from '../schema';\nimport { CollapsibleItemTemplate } from './array-field-collapsible-item';\nimport { SimpleItemTemplate } from './array-field-simple-item';\nimport { renderDescription, renderTitle } from './common';\nimport { ArrayFieldItem, ArrayFieldTemplateProps } from './types';\nimport { FormSchema } from '../form.types';\n\ninterface ArrayItemControls {\n    allowItemRemoval: boolean;\n    allowItemReorder: boolean;\n}\n\nexport class ArrayFieldTemplate extends React.Component {\n    constructor(public props: ArrayFieldTemplateProps) {\n        super(props);\n        this.renderItem = this.renderItem.bind(this);\n        this.handleAddClick = this.handleAddClick.bind(this);\n    }\n\n    public render() {\n        return React.createElement(\n            'div',\n            {},\n            renderTitle(this.props.title),\n            renderDescription(this.props.schema.description),\n            this.props.items.map(this.renderItem),\n            this.renderAddButton()\n        );\n    }\n\n    private renderAddButton() {\n        if (!this.props.canAdd) {\n            return;\n        }\n\n        return React.createElement('limel-button', {\n            label: this.props.title || 'Add',\n            onClick: this.handleAddClick,\n            icon: 'plus_math',\n            class: 'button-add-new',\n        });\n    }\n\n    private renderItem(item: ArrayFieldItem, index: number) {\n        const { schema, formData, formContext } = this.props;\n        const controls = this.getItemControls();\n\n        if (isObjectType(schema.items as FormSchema)) {\n            return React.createElement(CollapsibleItemTemplate, {\n                key: item.key,\n                item: item,\n                data: formData[index],\n                schema: schema,\n                formSchema: formContext.schema,\n                index: index,\n                allowItemRemoval: controls.allowItemRemoval,\n                allowItemReorder: controls.allowItemReorder,\n            });\n        }\n\n        return React.createElement(SimpleItemTemplate, {\n            key: item.key,\n            item: item,\n            index: index,\n            allowItemRemoval: controls.allowItemRemoval,\n            allowItemReorder: controls.allowItemReorder,\n        });\n    }\n\n    private getItemControls(): ArrayItemControls {\n        const limeOptions = this.props.schema?.lime || {};\n\n        return {\n            allowItemRemoval: limeOptions.allowItemRemoval !== false,\n            allowItemReorder: limeOptions.allowItemReorder !== false,\n        };\n    }\n\n    private handleAddClick(event: MouseEvent) {\n        event.stopPropagation();\n        this.props.onAddClick(event);\n    }\n}\n"]}
+{"version":3,"file":"array-field.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { isObjectType } from '../schema';\nimport { CollapsibleItemTemplate } from './array-field-collapsible-item';\nimport { SimpleItemTemplate } from './array-field-simple-item';\nimport { renderDescription, renderTitle } from './common';\nimport { ArrayFieldItem, ArrayFieldTemplateProps } from './types';\nimport { FormSchema } from '../form.types';\nimport Sortable, { SortableEvent } from 'sortablejs';\n\ninterface ArrayItemControls {\n    allowItemRemoval: boolean;\n}\n\ninterface ArrayFieldTemplateState {\n    order: number[];\n}\n\nconst DRAG_HANDLE_SELECTOR = '[data-drag-handle]';\nconst DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable=\"true\"]';\nconst DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';\nconst DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';\nconst DROP_ELEVATION_DURATION = 1000;\nconst TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.\n\nexport class ArrayFieldTemplate extends React.Component<\n    ArrayFieldTemplateProps,\n    ArrayFieldTemplateState\n> {\n    private container?: HTMLDivElement;\n    private sortable?: Sortable;\n    private dragSnapshot?: number[];\n    private draggedItemIndex?: number;\n    private dropElevationTimeout?: ReturnType<typeof setTimeout>;\n    private dropElevationTarget?: HTMLElement;\n    private itemByIndex: Map<number, ArrayFieldItem> = new Map();\n\n    public constructor(props: ArrayFieldTemplateProps) {\n        super(props);\n\n        this.state = {\n            order: this.extractIndices(props.items),\n        };\n    }\n\n    public componentWillUnmount() {\n        this.teardownDragController();\n    }\n\n    public componentDidMount() {\n        this.setupDragController();\n    }\n\n    public componentDidUpdate(previousProps: ArrayFieldTemplateProps) {\n        if (previousProps.items !== this.props.items) {\n            const nextOrder = this.extractIndices(this.props.items);\n\n            if (!this.arraysEqual(this.state.order, nextOrder)) {\n                this.setState(\n                    {\n                        order: nextOrder,\n                    },\n                    () => {\n                        this.setupDragController();\n                    }\n                );\n                return;\n            }\n        }\n\n        if (\n            previousProps.items !== this.props.items ||\n            previousProps.schema !== this.props.schema ||\n            previousProps.disabled !== this.props.disabled ||\n            previousProps.readonly !== this.props.readonly\n        ) {\n            this.setupDragController();\n        }\n    }\n\n    public render() {\n        const controls = this.getItemControls();\n        const { ordered: orderedItems, byIndex } = this.getOrderedItems();\n        this.itemByIndex = byIndex;\n\n        return React.createElement(\n            'div',\n            {},\n            renderTitle(this.props.title),\n            renderDescription(this.props.schema.description),\n            React.createElement(\n                'div',\n                {\n                    className: 'array-items',\n                    ref: this.setContainer,\n                },\n                orderedItems.map((item, index) =>\n                    this.renderItem(item, index, controls)\n                )\n            ),\n            this.renderAddButton()\n        );\n    }\n\n    private renderAddButton() {\n        if (!this.props.canAdd) {\n            return;\n        }\n\n        return React.createElement('limel-button', {\n            label: this.props.title || 'Add',\n            onClick: this.handleAddClick,\n            icon: 'plus_math',\n            class: 'button-add-new',\n        });\n    }\n\n    private getItemControls(): ArrayItemControls {\n        return {\n            allowItemRemoval: this.canRemoveItems(),\n        };\n    }\n\n    private readonly handleAddClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.props.onAddClick(event);\n    };\n\n    private renderItem(\n        item: ArrayFieldItem,\n        index: number,\n        controls: ArrayItemControls\n    ) {\n        const { schema, formData, formContext } = this.props;\n        const itemIndex = item.index ?? index;\n        const allowItemReorder = this.isItemReorderable(item);\n\n        if (isObjectType(schema.items as FormSchema)) {\n            return React.createElement(CollapsibleItemTemplate, {\n                key: item.key,\n                item: item,\n                data: Array.isArray(formData) ? formData[itemIndex] : undefined,\n                schema: schema,\n                formSchema: formContext.schema,\n                index: itemIndex,\n                allowItemRemoval: controls.allowItemRemoval,\n                allowItemReorder: allowItemReorder,\n            });\n        }\n\n        return React.createElement(SimpleItemTemplate, {\n            key: item.key,\n            item: item,\n            index: itemIndex,\n            dataIndex: itemIndex,\n            allowItemRemoval: controls.allowItemRemoval,\n            allowItemReorder: allowItemReorder,\n        });\n    }\n\n    private readonly setContainer = (element: HTMLDivElement | null) => {\n        if (this.container === element) {\n            return;\n        }\n\n        this.teardownDragController();\n        this.container = element ?? undefined;\n        this.setupDragController();\n    };\n\n    private getOrderedItems(): {\n        ordered: ArrayFieldItem[];\n        byIndex: Map<number, ArrayFieldItem>;\n    } {\n        const items = this.props.items ?? [];\n        const byIndex = new Map<number, ArrayFieldItem>();\n\n        let entryIndex = 0;\n        for (const entry of items) {\n            byIndex.set(entry.index ?? entryIndex, entry);\n            entryIndex += 1;\n        }\n\n        const ordered: ArrayFieldItem[] = [];\n        const used = new Set<number>();\n\n        for (const index of this.state.order) {\n            const entry = byIndex.get(index);\n            if (!entry) {\n                continue;\n            }\n\n            ordered.push(entry);\n            used.add(index);\n        }\n\n        for (const [index, entry] of byIndex.entries()) {\n            if (!used.has(index)) {\n                ordered.push(entry);\n            }\n        }\n\n        return {\n            ordered,\n            byIndex,\n        };\n    }\n\n    private readonly handleSortStart = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        this.dragSnapshot = [...this.state.order];\n        this.draggedItemIndex = this.getReorderId(event.item);\n\n        if (this.container) {\n            this.container.classList.add(DEFAULT_CONTAINER_CLASS);\n        }\n\n        if (event.item instanceof HTMLElement) {\n            this.applyDropElevation(event.item);\n        }\n    };\n\n    private readonly handleSortEnd = (event: SortableEvent) => {\n        if (!this.canReorderItems()) {\n            return;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        const snapshot = this.dragSnapshot;\n        const draggedItemIndex = this.draggedItemIndex;\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n\n        if (event.item instanceof HTMLElement) {\n            this.dropElevationTarget = event.item;\n        }\n\n        const finalOrder = this.readOrderFromDom();\n\n        if (!this.arraysEqual(this.state.order, finalOrder)) {\n            this.setState({ order: finalOrder });\n        }\n\n        if (\n            snapshot === undefined ||\n            draggedItemIndex === undefined ||\n            !(event.item instanceof HTMLElement)\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const fromPosition = snapshot.indexOf(draggedItemIndex);\n        const toPosition = finalOrder.indexOf(draggedItemIndex);\n\n        if (\n            fromPosition === -1 ||\n            toPosition === -1 ||\n            fromPosition === toPosition\n        ) {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        const targetItem = (this.props.items ?? []).find((entry) => {\n            return (entry.index ?? -1) === draggedItemIndex;\n        });\n\n        if (!targetItem || typeof targetItem.onReorderClick !== 'function') {\n            this.scheduleDropElevationRemoval();\n            return;\n        }\n\n        requestAnimationFrame(() => {\n            const reorder = targetItem.onReorderClick(\n                draggedItemIndex,\n                toPosition\n            );\n\n            if (typeof reorder === 'function') {\n                reorder();\n            }\n        });\n\n        this.scheduleDropElevationRemoval();\n    };\n\n    private setupDragController() {\n        if (!this.container || !this.canReorderItems()) {\n            this.teardownDragController();\n            return;\n        }\n\n        const reorderableCount = this.getReorderableOrder().length;\n        if (reorderableCount < 2) {\n            this.teardownDragController();\n            return;\n        }\n\n        if (this.sortable) {\n            this.sortable.option('handle', DRAG_HANDLE_SELECTOR);\n            this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);\n            this.sortable.option('disabled', false);\n            this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);\n            this.sortable.option('delayOnTouchOnly', true);\n            return;\n        }\n\n        this.sortable = Sortable.create(this.container, {\n            animation: 150,\n            handle: DRAG_HANDLE_SELECTOR,\n            draggable: DRAGGABLE_ITEM_SELECTOR,\n            delay: TOUCH_DRAG_DELAY_MS,\n            delayOnTouchOnly: true,\n            onStart: this.handleSortStart,\n            onEnd: this.handleSortEnd,\n        });\n    }\n\n    private teardownDragController() {\n        if (this.sortable) {\n            this.sortable.destroy();\n            this.sortable = undefined;\n        }\n\n        this.clearDropElevationTimer();\n\n        if (this.dropElevationTarget) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n            this.dropElevationTarget = undefined;\n        }\n\n        if (this.container) {\n            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);\n        }\n\n        this.dragSnapshot = undefined;\n        this.draggedItemIndex = undefined;\n    }\n\n    private canReorderItems(): boolean {\n        if (this.props.disabled || this.props.readonly) {\n            return false;\n        }\n\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemReorder !== false;\n    }\n\n    private canRemoveItems(): boolean {\n        const schema = this.props.schema as FormSchema;\n        const limeOptions = schema?.lime || {};\n\n        return limeOptions.allowItemRemoval !== false;\n    }\n\n    private isItemReorderable(item: ArrayFieldItem): boolean {\n        return (\n            this.canReorderItems() &&\n            Boolean(item?.hasMoveDown || item?.hasMoveUp)\n        );\n    }\n\n    private isIndexReorderable(index: number): boolean {\n        const item = this.itemByIndex.get(index);\n\n        if (!item) {\n            return false;\n        }\n\n        return this.isItemReorderable(item);\n    }\n\n    private getReorderableOrder(order: number[] = this.state.order): number[] {\n        const result: number[] = [];\n\n        for (const index of order) {\n            if (this.isIndexReorderable(index)) {\n                result.push(index);\n            }\n        }\n\n        return result;\n    }\n\n    private readOrderFromDom(): number[] {\n        if (!this.container) {\n            return [];\n        }\n\n        const items = [...this.container.querySelectorAll('.array-item')];\n\n        const order: number[] = [];\n\n        for (const element of items) {\n            const index = this.getReorderId(element);\n            if (index !== undefined) {\n                order.push(index);\n            }\n        }\n\n        return order;\n    }\n\n    private getReorderId(element: Element | null): number | undefined {\n        if (!element) {\n            return undefined;\n        }\n\n        if (!(element instanceof HTMLElement)) {\n            return undefined;\n        }\n\n        const value = element.dataset.reorderId;\n        if (value === undefined) {\n            return undefined;\n        }\n\n        const parsed = Number.parseInt(value, 10);\n        return Number.isNaN(parsed) ? undefined : parsed;\n    }\n\n    private applyDropElevation(item: HTMLElement) {\n        if (this.dropElevationTarget && this.dropElevationTarget !== item) {\n            this.dropElevationTarget.classList.remove(\n                DEFAULT_DROP_ELEVATION_CLASS\n            );\n        }\n\n        this.clearDropElevationTimer();\n        item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);\n        this.dropElevationTarget = item;\n    }\n\n    private scheduleDropElevationRemoval() {\n        if (!this.dropElevationTarget) {\n            return;\n        }\n\n        const target = this.dropElevationTarget;\n        this.clearDropElevationTimer();\n        this.dropElevationTimeout = globalThis.setTimeout(() => {\n            target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);\n            if (this.dropElevationTarget === target) {\n                this.dropElevationTarget = undefined;\n            }\n            this.dropElevationTimeout = undefined;\n        }, DROP_ELEVATION_DURATION);\n    }\n\n    private clearDropElevationTimer() {\n        if (this.dropElevationTimeout !== undefined) {\n            clearTimeout(this.dropElevationTimeout);\n            this.dropElevationTimeout = undefined;\n        }\n    }\n\n    private arraysEqual(a: number[], b: number[]): boolean {\n        if (a.length !== b.length) {\n            return false;\n        }\n\n        let index = 0;\n        for (const value of a) {\n            if (value !== b[index]) {\n                return false;\n            }\n            index += 1;\n        }\n\n        return true;\n    }\n\n    private extractIndices(items: ArrayFieldItem[] = []): number[] {\n        return (items ?? []).map((item, index) => item.index ?? index);\n    }\n}\n"]}

package/dist/collection/components/header/header.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/help/help.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/help/limel-help-content.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/icon-button/icon-button.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/info-tile/info-tile.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/input-field/input-field.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/list/list.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -208,6 +211,9 @@ ul {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/list-item/list-item.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/markdown/markdown.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/menu-list/menu-list.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -208,6 +211,9 @@ ul {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/notched-outline/notched-outline.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/popover-surface/popover-surface.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/profile-picture/profile-picture.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/radio-button-group/radio-button.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/select/select.css

@@ -73,6 +73,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -1820,6 +1823,9 @@ select.limel-select__native-control {
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/shortcut/shortcut.css

@@ -67,6 +67,9 @@
 * of some components, to demonstrate how the component
 * behaves in a resizable container.
 */
+/**
+ * Drag to reorder mixins
+ */
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed