@limetech/lime-elements 38.31.1 → 38.32.0

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

@@ -8,14 +8,6 @@ export class SimpleItemTemplate extends React.Component {
       const { item, index } = this.props;
       item.onDropIndexClick(index)(event);
     };
-    this.handleMoveUp = (event) => {
-      const { item, index } = this.props;
-      item.onReorderClick(index, index - 1)(event);
-    };
-    this.handleMoveDown = (event) => {
-      const { item, index } = this.props;
-      item.onReorderClick(index, index + 1)(event);
-    };
     this.setRemoveButton = (button) => {
       if (this.removeButton) {
         this.removeButton.removeEventListener('click', this.handleRemove);
@@ -25,39 +17,30 @@ export class SimpleItemTemplate extends React.Component {
         this.removeButton.addEventListener('click', this.handleRemove);
       }
     };
-    this.setMoveUpButton = (button) => {
-      if (this.moveUpButton) {
-        this.moveUpButton.removeEventListener('click', this.handleMoveUp);
-      }
-      this.moveUpButton = button || undefined;
-      if (this.moveUpButton) {
-        this.moveUpButton.addEventListener('click', this.handleMoveUp);
-      }
-    };
-    this.setMoveDownButton = (button) => {
-      if (this.moveDownButton) {
-        this.moveDownButton.removeEventListener('click', this.handleMoveDown);
-      }
-      this.moveDownButton = button || undefined;
-      if (this.moveDownButton) {
-        this.moveDownButton.addEventListener('click', this.handleMoveDown);
-      }
-    };
   }
   componentWillUnmount() {
     this.setRemoveButton(undefined);
-    this.setMoveUpButton(undefined);
-    this.setMoveDownButton(undefined);
   }
   render() {
-    const { item } = this.props;
+    const { item, allowItemReorder } = this.props;
     return React.createElement('div', {
-      className: 'limel-form-array-item--simple',
-    }, this.props.item.children, this.props.allowItemReorder
-      ? this.renderMoveDownButton(item)
-      : null, this.props.allowItemReorder ? this.renderMoveUpButton(item) : null, this.props.allowItemRemoval ? this.renderRemoveButton(item) : null);
+      className: 'array-item limel-form-array-item--simple',
+      'data-reorder-id': String(this.props.dataIndex),
+      'data-reorderable': allowItemReorder ? 'true' : 'false',
+    }, this.props.item.children, this.renderRemoveButton(item), this.renderDragHandle());
+  }
+  renderDragHandle() {
+    if (!this.props.allowItemReorder) {
+      return;
+    }
+    return React.createElement('limel-drag-handle', {
+      class: 'drag-handle',
+    });
   }
   renderRemoveButton(item) {
+    if (!this.props.allowItemRemoval) {
+      return;
+    }
     const props = {
       icon: 'trash',
       disabled: !item.hasRemove,
@@ -65,21 +48,5 @@ export class SimpleItemTemplate extends React.Component {
     };
     return React.createElement(LIMEL_ICON_BUTTON, props);
   }
-  renderMoveUpButton(item) {
-    const props = {
-      icon: 'up_arrow',
-      disabled: !item.hasMoveUp,
-      ref: this.setMoveUpButton,
-    };
-    return React.createElement(LIMEL_ICON_BUTTON, props);
-  }
-  renderMoveDownButton(item) {
-    const props = {
-      icon: 'down_arrow',
-      disabled: !item.hasMoveDown,
-      ref: this.setMoveDownButton,
-    };
-    return React.createElement(LIMEL_ICON_BUTTON, props);
-  }
 }
 //# sourceMappingURL=array-field-simple-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"array-field-simple-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-simple-item.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ArrayFieldItem } from './types';\n\ninterface SimpleItemProps {\n    item: ArrayFieldItem;\n    index: number;\n    allowItemRemoval: boolean;\n    allowItemReorder: boolean;\n}\n\nconst LIMEL_ICON_BUTTON = 'limel-icon-button';\n\nexport class SimpleItemTemplate extends React.Component<SimpleItemProps> {\n    constructor(public props: SimpleItemProps) {\n        super(props);\n    }\n\n    private removeButton?: HTMLLimelButtonElement;\n    private moveUpButton?: HTMLLimelButtonElement;\n    private moveDownButton?: HTMLLimelButtonElement;\n\n    public componentWillUnmount() {\n        this.setRemoveButton(undefined);\n        this.setMoveUpButton(undefined);\n        this.setMoveDownButton(undefined);\n    }\n\n    public render() {\n        const { item } = this.props;\n\n        return React.createElement(\n            'div',\n            {\n                className: 'limel-form-array-item--simple',\n            },\n            this.props.item.children,\n            this.props.allowItemReorder\n                ? this.renderMoveDownButton(item)\n                : null,\n            this.props.allowItemReorder ? this.renderMoveUpButton(item) : null,\n            this.props.allowItemRemoval ? this.renderRemoveButton(item) : null\n        );\n    }\n\n    private renderRemoveButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'trash',\n            disabled: !item.hasRemove,\n            ref: this.setRemoveButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private renderMoveUpButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'up_arrow',\n            disabled: !item.hasMoveUp,\n            ref: this.setMoveUpButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private renderMoveDownButton(item: ArrayFieldItem) {\n        const props: any = {\n            icon: 'down_arrow',\n            disabled: !item.hasMoveDown,\n            ref: this.setMoveDownButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private handleRemove = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onDropIndexClick(index)(event);\n    };\n\n    private handleMoveUp = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onReorderClick(index, index - 1)(event);\n    };\n\n    private handleMoveDown = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onReorderClick(index, index + 1)(event);\n    };\n\n    private setRemoveButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.removeButton) {\n            this.removeButton.removeEventListener('click', this.handleRemove);\n        }\n\n        this.removeButton = button || undefined;\n\n        if (this.removeButton) {\n            this.removeButton.addEventListener('click', this.handleRemove);\n        }\n    };\n\n    private setMoveUpButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.moveUpButton) {\n            this.moveUpButton.removeEventListener('click', this.handleMoveUp);\n        }\n\n        this.moveUpButton = button || undefined;\n\n        if (this.moveUpButton) {\n            this.moveUpButton.addEventListener('click', this.handleMoveUp);\n        }\n    };\n\n    private setMoveDownButton = (button?: HTMLLimelButtonElement | null) => {\n        if (this.moveDownButton) {\n            this.moveDownButton.removeEventListener(\n                'click',\n                this.handleMoveDown\n            );\n        }\n\n        this.moveDownButton = button || undefined;\n\n        if (this.moveDownButton) {\n            this.moveDownButton.addEventListener('click', this.handleMoveDown);\n        }\n    };\n}\n"]}
+{"version":3,"file":"array-field-simple-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-simple-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAE9C,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAA0B;EACpE,YAAmB,KAAsB;IACrC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAiB;IAkDjC,iBAAY,GAAG,CAAC,KAAmB,EAAQ,EAAE;MACjD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;MACnC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC;IAEe,oBAAe,GAAG,CAC/B,MAA0C,EAC5C,EAAE;MACA,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OACrE;MAED,IAAI,CAAC,YAAY,GAAG,MAAM,IAAI,SAAS,CAAC;MAExC,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OAClE;IACL,CAAC,CAAC;EAjEF,CAAC;EAIM,oBAAoB;IACvB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAE9C,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,0CAA0C;MACrD,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;MAC/C,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC1D,EACD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EACxB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAC7B,IAAI,CAAC,gBAAgB,EAAE,CAC1B,CAAC;EACN,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;MAC9B,OAAO;KACV;IAED,OAAO,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE;MAC5C,KAAK,EAAE,aAAa;KACvB,CAAC,CAAC;EACP,CAAC;EAEO,kBAAkB,CAAC,IAAoB;IAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;MAC9B,OAAO;KACV;IAED,MAAM,KAAK,GAAQ;MACf,IAAI,EAAE,OAAO;MACb,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;MACzB,GAAG,EAAE,IAAI,CAAC,eAAe;KAC5B,CAAC;IAEF,OAAO,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;EACzD,CAAC;CAoBJ","sourcesContent":["import React from 'react';\nimport { ArrayFieldItem } from './types';\n\ninterface SimpleItemProps {\n    item: ArrayFieldItem;\n    index: number;\n    allowItemRemoval: boolean;\n    allowItemReorder: boolean;\n    dataIndex: number;\n}\n\nconst LIMEL_ICON_BUTTON = 'limel-icon-button';\n\nexport class SimpleItemTemplate extends React.Component<SimpleItemProps> {\n    constructor(public props: SimpleItemProps) {\n        super(props);\n    }\n\n    private removeButton?: HTMLLimelIconButtonElement;\n\n    public componentWillUnmount() {\n        this.setRemoveButton(undefined);\n    }\n\n    public render() {\n        const { item, allowItemReorder } = this.props;\n\n        return React.createElement(\n            'div',\n            {\n                className: 'array-item limel-form-array-item--simple',\n                'data-reorder-id': String(this.props.dataIndex),\n                'data-reorderable': allowItemReorder ? 'true' : 'false',\n            },\n            this.props.item.children,\n            this.renderRemoveButton(item),\n            this.renderDragHandle()\n        );\n    }\n\n    private renderDragHandle() {\n        if (!this.props.allowItemReorder) {\n            return;\n        }\n\n        return React.createElement('limel-drag-handle', {\n            class: 'drag-handle',\n        });\n    }\n\n    private renderRemoveButton(item: ArrayFieldItem) {\n        if (!this.props.allowItemRemoval) {\n            return;\n        }\n\n        const props: any = {\n            icon: 'trash',\n            disabled: !item.hasRemove,\n            ref: this.setRemoveButton,\n        };\n\n        return React.createElement(LIMEL_ICON_BUTTON, props);\n    }\n\n    private handleRemove = (event: PointerEvent): void => {\n        const { item, index } = this.props;\n        item.onDropIndexClick(index)(event);\n    };\n\n    private readonly setRemoveButton = (\n        button?: HTMLLimelIconButtonElement | null\n    ) => {\n        if (this.removeButton) {\n            this.removeButton.removeEventListener('click', this.handleRemove);\n        }\n\n        this.removeButton = button || undefined;\n\n        if (this.removeButton) {\n            this.removeButton.addEventListener('click', this.handleRemove);\n        }\n    };\n}\n"]}

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/form/templates/common.js

@@ -19,7 +19,9 @@ export function renderDescription(description) {
   if (!description) {
     return;
   }
-  return React.createElement('p', { className: 'mdc-typography mdc-typography--body1' }, description);
+  return React.createElement('limel-markdown', {
+    value: description,
+  });
 }
 /**
  * Find a suitable title for a nested structure.

package/dist/collection/components/form/templates/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/components/form/templates/common.ts"],"names":[],"mappings":"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","sourcesContent":["import { get, isEmpty } from 'lodash-es';\nimport React from 'react';\nimport { isArrayType, isObjectType } from '../schema';\nimport { FormSchema } from '../form.types';\nimport { JSONSchema7 } from 'json-schema';\n\n/**\n *\n * @param title\n */\nexport function renderTitle(title: string) {\n    if (!title) {\n        return;\n    }\n\n    return React.createElement(\n        'h1',\n        { className: 'mdc-typography mdc-typography--headline1' },\n        title\n    );\n}\n\n/**\n *\n * @param description\n */\nexport function renderDescription(description: string) {\n    if (!description) {\n        return;\n    }\n\n    return React.createElement(\n        'p',\n        { className: 'mdc-typography mdc-typography--body1' },\n        description\n    );\n}\n\n/**\n * Find a suitable title for a nested structure.\n *\n * If an object has the key 'title' it will have priority, followed by the key 'name'.\n * If 'title' nor 'name' is found, a required item will be considered.\n * Otherwise the first occurrence of a nonempty string is chosen.\n *\n * @param data - the data to find the title for\n * @param fieldSchema - schema for the item\n * @param formSchema - schema for the form\n * @returns describing title of the data\n */\nexport function findTitle(\n    data: any,\n    fieldSchema: JSONSchema7,\n    formSchema: JSONSchema7\n) {\n    if (!data) {\n        return null;\n    }\n\n    if (Array.isArray(data) && isObjectType(fieldSchema.items as FormSchema)) {\n        return findTitle(data[0], fieldSchema, formSchema);\n    }\n\n    if (Array.isArray(data) || typeof data !== 'object') {\n        return findSchemaTitle(data, fieldSchema);\n    }\n\n    const subSchema = findSubSchema(\n        fieldSchema as FormSchema,\n        formSchema as FormSchema\n    );\n\n    data = sortDataByProperties(data, subSchema.properties);\n\n    const firstEntry = findFirstEntry(data, subSchema);\n    if (!firstEntry) {\n        return null;\n    }\n\n    if (!subSchema.properties) {\n        return null;\n    }\n\n    const [key, value] = firstEntry;\n\n    return findTitle(value, subSchema.properties[key], formSchema);\n}\n\nfunction sortDataByProperties(data: any, properties: object) {\n    if (!properties || isEmpty(properties)) {\n        return data;\n    }\n\n    const newData = {};\n    for (const key of Object.keys(properties)) newData[key] = data[key];\n\n    return newData;\n}\n\nfunction findFirstEntry(data: any, subSchema: FormSchema) {\n    const entries = [\n        ['title', data.title],\n        ['name', data.name],\n        getRequiredEntry(data, subSchema),\n        ...Object.entries(data),\n    ];\n\n    return entries.find((entry) => {\n        const value = entry[1];\n\n        return !!value && typeof value !== 'boolean';\n    });\n}\n\nfunction getRequiredEntry(data: any, subSchema: FormSchema) {\n    if (!('required' in subSchema)) {\n        return [null, null];\n    }\n\n    const firstNonEmptyRequiredKey = Object.keys(data).find((key) =>\n        subSchema.required.includes(key)\n    );\n    if (!firstNonEmptyRequiredKey) {\n        return [null, null];\n    }\n\n    return [firstNonEmptyRequiredKey, data[firstNonEmptyRequiredKey]];\n}\n\nfunction findSubSchema(schema: FormSchema, formSchema: FormSchema) {\n    let subSchema = schema;\n    if (isArrayType(schema)) {\n        subSchema = schema.items as FormSchema;\n    }\n\n    if (subSchema.$ref) {\n        const path = subSchema.$ref.split('/').slice(1).join('.');\n        subSchema = get(formSchema, path);\n    }\n\n    return subSchema;\n}\n\nfunction findSchemaTitle(value: any, schema: JSONSchema7) {\n    if (\n        isArrayType(schema as FormSchema) &&\n        (schema.items as JSONSchema7).anyOf\n    ) {\n        const titles = ((schema.items as JSONSchema7).anyOf as JSONSchema7[])\n            .filter((item) => value.includes(item.const))\n            .map((item) => item.title);\n\n        return titles.join(', ');\n    }\n\n    if (schema.oneOf) {\n        return (\n            (schema.oneOf as JSONSchema7[]).find((item) => value === item.const)\n                ?.title || `${value} is an invalid option`\n        );\n    }\n\n    return value;\n}\n"]}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../src/components/form/templates/common.ts"],"names":[],"mappings":"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","sourcesContent":["import { get, isEmpty } from 'lodash-es';\nimport React from 'react';\nimport { isArrayType, isObjectType } from '../schema';\nimport { FormSchema } from '../form.types';\nimport { JSONSchema7 } from 'json-schema';\n\n/**\n *\n * @param title\n */\nexport function renderTitle(title: string) {\n    if (!title) {\n        return;\n    }\n\n    return React.createElement(\n        'h1',\n        { className: 'mdc-typography mdc-typography--headline1' },\n        title\n    );\n}\n\n/**\n *\n * @param description\n */\nexport function renderDescription(description: string) {\n    if (!description) {\n        return;\n    }\n\n    return React.createElement('limel-markdown', {\n        value: description,\n    });\n}\n\n/**\n * Find a suitable title for a nested structure.\n *\n * If an object has the key 'title' it will have priority, followed by the key 'name'.\n * If 'title' nor 'name' is found, a required item will be considered.\n * Otherwise the first occurrence of a nonempty string is chosen.\n *\n * @param data - the data to find the title for\n * @param fieldSchema - schema for the item\n * @param formSchema - schema for the form\n * @returns describing title of the data\n */\nexport function findTitle(\n    data: any,\n    fieldSchema: JSONSchema7,\n    formSchema: JSONSchema7\n) {\n    if (!data) {\n        return null;\n    }\n\n    if (Array.isArray(data) && isObjectType(fieldSchema.items as FormSchema)) {\n        return findTitle(data[0], fieldSchema, formSchema);\n    }\n\n    if (Array.isArray(data) || typeof data !== 'object') {\n        return findSchemaTitle(data, fieldSchema);\n    }\n\n    const subSchema = findSubSchema(\n        fieldSchema as FormSchema,\n        formSchema as FormSchema\n    );\n\n    data = sortDataByProperties(data, subSchema.properties);\n\n    const firstEntry = findFirstEntry(data, subSchema);\n    if (!firstEntry) {\n        return null;\n    }\n\n    if (!subSchema.properties) {\n        return null;\n    }\n\n    const [key, value] = firstEntry;\n\n    return findTitle(value, subSchema.properties[key], formSchema);\n}\n\nfunction sortDataByProperties(data: any, properties: object) {\n    if (!properties || isEmpty(properties)) {\n        return data;\n    }\n\n    const newData = {};\n    for (const key of Object.keys(properties)) newData[key] = data[key];\n\n    return newData;\n}\n\nfunction findFirstEntry(data: any, subSchema: FormSchema) {\n    const entries = [\n        ['title', data.title],\n        ['name', data.name],\n        getRequiredEntry(data, subSchema),\n        ...Object.entries(data),\n    ];\n\n    return entries.find((entry) => {\n        const value = entry[1];\n\n        return !!value && typeof value !== 'boolean';\n    });\n}\n\nfunction getRequiredEntry(data: any, subSchema: FormSchema) {\n    if (!('required' in subSchema)) {\n        return [null, null];\n    }\n\n    const firstNonEmptyRequiredKey = Object.keys(data).find((key) =>\n        subSchema.required.includes(key)\n    );\n    if (!firstNonEmptyRequiredKey) {\n        return [null, null];\n    }\n\n    return [firstNonEmptyRequiredKey, data[firstNonEmptyRequiredKey]];\n}\n\nfunction findSubSchema(schema: FormSchema, formSchema: FormSchema) {\n    let subSchema = schema;\n    if (isArrayType(schema)) {\n        subSchema = schema.items as FormSchema;\n    }\n\n    if (subSchema.$ref) {\n        const path = subSchema.$ref.split('/').slice(1).join('.');\n        subSchema = get(formSchema, path);\n    }\n\n    return subSchema;\n}\n\nfunction findSchemaTitle(value: any, schema: JSONSchema7) {\n    if (\n        isArrayType(schema as FormSchema) &&\n        (schema.items as JSONSchema7).anyOf\n    ) {\n        const titles = ((schema.items as JSONSchema7).anyOf as JSONSchema7[])\n            .filter((item) => value.includes(item.const))\n            .map((item) => item.title);\n\n        return titles.join(', ');\n    }\n\n    if (schema.oneOf) {\n        return (\n            (schema.oneOf as JSONSchema7[]).find((item) => value === item.const)\n                ?.title || `${value} is an invalid option`\n        );\n    }\n\n    return value;\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