@hypericon/mico 0.3.24 → 0.4.0

package/dist/esm/components/pagination/Pagination.js

@@ -0,0 +1,66 @@
+import m from "mithril";
+import { PAGINATION_DEFAULT_SETTINGS as SETTINGS } from "./pagination-settings";
+import { Icon } from "../icon";
+export const Pagination = {
+    view({ attrs }) {
+        var _a, _b;
+        const layout = (attrs.layout || SETTINGS.layout);
+        return m(".mico-pagination", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""}`,
+            style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} display: flex; align-items: center;`,
+        }, [
+            (layout === "middle" || layout === "right") ? m("", { style: "flex: 1;" }) : [],
+            (attrs.size) ? [
+                m("span", `Page size:`),
+                m("select.mico-pagination-select", {
+                    value: attrs.size.size,
+                    oninput: (e) => attrs.size.onselect(Number(e.target.value)),
+                }, (attrs.size.sizes || SETTINGS.pageSizes).map(s => m("option", s))),
+            ] : [],
+            (attrs.xToYOfZ !== undefined) ? [
+                (attrs.xToYOfZ === false) ? [] :
+                    (typeof attrs.xToYOfZ === "string") ? m("span.mico-pagination-xtoyofz", attrs.xToYOfZ) :
+                        attrs.xToYOfZ,
+            ] : [
+                m("span.mico-pagination-xtoyofz", `${attrs.from}-${attrs.to} of ${attrs.of}`),
+            ],
+            (attrs.first !== undefined) ? m("button.mico-pagination-button", {
+                disabled: attrs.isAtStart,
+                title: "First page",
+                onclick: (ev) => { var _a; return (_a = attrs.first) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                SETTINGS.iconComponents.first
+                    ? m(SETTINGS.iconComponents.first)
+                    : m(Icon, { fas: "angles-left" }),
+            ]) : [],
+            (attrs.prev !== undefined) ? m("button.mico-pagination-button", {
+                disabled: attrs.isAtStart,
+                title: "Previous page",
+                onclick: (ev) => { var _a; return (_a = attrs.prev) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                SETTINGS.iconComponents.prev
+                    ? m(SETTINGS.iconComponents.prev)
+                    : m(Icon, { fas: "angle-left" }),
+            ]) : [],
+            (attrs.next !== undefined) ? m("button.mico-pagination-button", {
+                disabled: attrs.isAtEnd,
+                title: "Next page",
+                onclick: (ev) => { var _a; return (_a = attrs.next) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                SETTINGS.iconComponents.next
+                    ? m(SETTINGS.iconComponents.next)
+                    : m(Icon, { fas: "angle-right" }),
+            ]) : [],
+            (attrs.last !== undefined) ? m("button.mico-pagination-button", {
+                disabled: attrs.isAtEnd,
+                title: "Last page",
+                onclick: (ev) => { var _a; return (_a = attrs.last) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                SETTINGS.iconComponents.last
+                    ? m(SETTINGS.iconComponents.last)
+                    : m(Icon, { fas: "angles-right" }),
+            ]) : [],
+            (layout === "middle" || layout === "left") ? m("", { style: "flex: 1;" }) : [],
+        ]);
+    },
+};

package/dist/esm/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export * from "./pagination-settings";

package/dist/esm/components/pagination/index.js

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export * from "./pagination-settings";

package/dist/esm/components/pagination/pagination-settings.d.ts

@@ -0,0 +1,17 @@
+import m from "mithril";
+/**
+ * Default common settings for pagination components
+ */
+export declare const PAGINATION_DEFAULT_SETTINGS: {
+    /** "left" | "middle" | "right" */
+    layout: string;
+    pageSize: number;
+    pageSizes: number[];
+    /** Optionally override the default icon components displayed in the pagination buttons */
+    iconComponents: {
+        first: m.Component<any, any> | undefined;
+        prev: m.Component<any, any> | undefined;
+        next: m.Component<any, any> | undefined;
+        last: m.Component<any, any> | undefined;
+    };
+};

package/dist/esm/components/pagination/pagination-settings.js

@@ -0,0 +1,16 @@
+/**
+ * Default common settings for pagination components
+ */
+export const PAGINATION_DEFAULT_SETTINGS = {
+    /** "left" | "middle" | "right" */
+    layout: "right",
+    pageSize: 25,
+    pageSizes: [25, 50, 100],
+    /** Optionally override the default icon components displayed in the pagination buttons */
+    iconComponents: {
+        first: undefined,
+        prev: undefined,
+        next: undefined,
+        last: undefined,
+    },
+};

package/dist/esm/components/panel-tree/PanelTree.d.ts

@@ -0,0 +1,26 @@
+import m from "mithril";
+export declare const PanelTreePanel: m.Component<{
+    /** The data subtree associated with this panel */
+    data: object;
+    /** The type of parent container (if any) to inform how the dragging target is highlighted (or not) */
+    parentType: "row" | "column" | undefined;
+    /** Remove the data associated with this panel from the canonical tree to be inserted elsewhere */
+    remove: () => void;
+    /** Insert the given subtree either before or after the current node as a sibling in the tree */
+    insert: (subtree: object, before: boolean) => void;
+    debugLabel?: string;
+    class?: string;
+    style?: string;
+}, {
+    /** Whether the current drag is over the "start" or "end" of the panel, according to the parent direction */
+    isOverStart: boolean;
+    el: HTMLElement;
+}>;
+export declare const PanelTreeHandle: m.Component<{
+    /** The data subtree associated with this panel */
+    data: object;
+    /** Remove the data associated with this panel from the canonical tree to be inserted elsewhere */
+    remove: () => void;
+}, {
+    el: HTMLElement;
+}>;

package/dist/esm/components/panel-tree/PanelTree.js

@@ -0,0 +1,174 @@
+import m from "mithril";
+import { PANEL_TREE_DEBUG, PANEL_TREE_PANEL_CLASS } from "./panel-tree-constants";
+import { PanelTreeStore } from "./panel-tree-store";
+import { PanelTreeUtils as PTUtils } from "./panel-tree-utils";
+/** Data about the state of the ongoing drag operation */
+const PTStore = new PanelTreeStore();
+export const PanelTreePanel = {
+    oninit() {
+        // this.isDragOver = false;
+    },
+    oncreate({ dom }) {
+        this.el = dom;
+    },
+    onupdate({ dom }) {
+        this.el = dom;
+    },
+    view({ attrs, children }) {
+        var _a, _b, _c;
+        const { parentType, data } = attrs;
+        const isOver = PTStore.isDragging && PTStore.overEl === this.el;
+        const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+        const isValidTarget = (parentType !== undefined) && (PTStore.draggedData !== data) && !isRecursive;
+        let dragBorder = "border border-grey-300 dark:border-grey-700";
+        if (isOver && isValidTarget) {
+            if (parentType === "row" && this.isOverStart) {
+                dragBorder = "border-primary border-l-4";
+            }
+            else if (parentType === "row" && !this.isOverStart) {
+                dragBorder = "border-primary border-r-4";
+            }
+            else if (parentType === "column" && this.isOverStart) {
+                dragBorder = "border-primary border-t-4";
+            }
+            else if (parentType === "column" && !this.isOverStart) {
+                dragBorder = "border-primary border-b-4";
+            }
+        }
+        if (isOver && !isValidTarget) {
+            dragBorder = "border-grey-500 border";
+        }
+        const onOver = (ev) => {
+            var _a;
+            if (!PTStore.isDragging)
+                return;
+            ev.stopImmediatePropagation();
+            ev.preventDefault();
+            // PANEL_TREE_DEBUG ?? console.debug("is dragging over panel with parent " + parentType);
+            const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
+            PTStore.overEl = this.el;
+            const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+            const isValidTarget = parentType !== undefined && PTStore.draggedData !== data && !isRecursive;
+            if (isValidTarget) {
+                // this.isDragOver = true;
+                PTStore.dropEffect = (parentType === undefined) ? "none" : "move";
+                if (dragEv === null || dragEv === void 0 ? void 0 : dragEv.dataTransfer) {
+                    dragEv.dataTransfer.dropEffect = PTStore.dropEffect;
+                }
+                // Determine if the drag is over the "starting end" of the panel
+                const overDiv = ev.currentTarget;
+                const targetRect = overDiv.getBoundingClientRect();
+                if (parentType === "row") {
+                    const leftToMouse = PTUtils.eventXPos(ev) - targetRect.left;
+                    const isLeft = leftToMouse < (targetRect.width - leftToMouse);
+                    this.isOverStart = isLeft;
+                }
+                else {
+                    const topToMouse = PTUtils.eventYPos(ev) - targetRect.top;
+                    const isAbove = topToMouse < (targetRect.height - topToMouse);
+                    this.isOverStart = isAbove;
+                }
+                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`dragging over valid target, ${this.isOverStart ? "over start" : "over end"}`);
+            }
+            else {
+                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`dragging over invalid target`);
+            }
+        };
+        const onDrop = (ev) => {
+            var _a;
+            if (!PTStore.isDragging)
+                return;
+            ev.stopImmediatePropagation();
+            // this.isDragOver = false;
+            PTStore.dropTargetData = data;
+            PTStore.dropTargetPanel = this.el;
+            const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+            const movedData = PTStore.draggedData;
+            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`drag dropped, dataTransfer data: ${JSON.stringify(movedData)}`);
+            if (movedData && movedData !== data && !isRecursive) {
+                setTimeout(() => {
+                    PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Instruct tree to insert subtree: ${JSON.stringify(movedData)}`);
+                    attrs.insert(movedData, this.isOverStart);
+                    m.redraw();
+                }, 1);
+            }
+            PTStore.isDragging = false;
+        };
+        const onEnd = (ev) => {
+            // ev.stopImmediatePropagation();
+            // this.isDragOver = false;
+            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug("drag ended");
+            // No op?
+            PTStore.isDragging = false;
+        };
+        return m(`.${PANEL_TREE_PANEL_CLASS}.flex-1.rounded.shadow-md`, {
+            // TODO
+            // class: `${attrs.class ?? ""} ${mobileMode.isMob ? "p-1" : "p-2"} ${dragBorder}`,
+            class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""} p-1 ${dragBorder}`,
+            style: (_c = attrs.style) !== null && _c !== void 0 ? _c : "",
+            ondragover: (ev) => {
+                return onOver(ev);
+            },
+            ondragleave: (ev) => {
+                // ev.stopImmediatePropagation();
+                // if (ev.currentTarget === this.el) {
+                //   PANEL_TREE_DEBUG ?? console.debug("drag leave target", ev.target);
+                //   PANEL_TREE_DEBUG ?? console.debug("drag leave current target", ev.currentTarget);
+                //   // PANEL_TREE_DEBUG ?? console.debug(`Leaving panel ${attrs.debugLabel}`);
+                //   // this.isDragOver = false;
+                // }
+            },
+            ondrop: (ev) => {
+                return onDrop(ev);
+            },
+            ondragend: (ev) => {
+                return onEnd(ev);
+            },
+            // Event redispatched from the drag handle
+            ontouchmove: (ev) => {
+                return onOver(ev);
+            },
+            // Event redispatched from the drag handle
+            ontouchend: (ev) => {
+                return onDrop(ev);
+            },
+        }, children);
+    },
+};
+export const PanelTreeHandle = {
+    oninit() { },
+    oncreate({ dom }) {
+        this.el = dom;
+    },
+    view({ attrs }) {
+        const { data } = attrs;
+        return m(".px-2.py-1.flex.items-center.cursor-move", {
+            // TODO
+            // ...tooltipSpread("Reposition this element", { delay: 1_000 }),
+            draggable: true,
+            ondragstart: (ev) => PTStore.onStartDraggingHandle(ev, data),
+            ondragend: (ev) => PTStore.onEndDraggingHandle(ev, data, () => { var _a; return (_a = attrs.remove) === null || _a === void 0 ? void 0 : _a.call(attrs); }),
+            ontouchstart: (ev) => PTStore.onStartDraggingHandle(ev, data),
+            // Redispatch the event to the panel that the touch is currently over
+            ontouchmove: (ev) => {
+                if (PTStore.isDragging) {
+                    // Disable scrolling if there is an ongoing drag
+                    ev.stopImmediatePropagation();
+                    ev.preventDefault();
+                    PTUtils.dispatchTouchEventToHoveredPanel(ev);
+                }
+            },
+            ontouchend: (ev) => {
+                // Re-dispatch the event first to set the drop target data
+                PTUtils.dispatchTouchEventToLastHoveredPanel(ev);
+                // Next, handle the end of the drag and possibly call the function to remove the panel
+                PTStore.onEndDraggingHandle(ev, data, () => { var _a; return (_a = attrs.remove) === null || _a === void 0 ? void 0 : _a.call(attrs); });
+            },
+            ontouchcancel: (ev) => {
+                PTStore.isDragging = false;
+            },
+        }, [
+            m("i.fas.fa-grip-vertical.text-icon"),
+        ]);
+    },
+};

package/dist/esm/components/panel-tree/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/panel-tree/panel-tree-constants.d.ts

@@ -0,0 +1,3 @@
+/** The CSS class applied all panel tree panels */
+export declare const PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
+export declare const PANEL_TREE_DEBUG = false;

package/dist/esm/components/panel-tree/panel-tree-constants.js

@@ -0,0 +1,3 @@
+/** The CSS class applied all panel tree panels */
+export const PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
+export const PANEL_TREE_DEBUG = false;

package/dist/esm/components/panel-tree/panel-tree-store.d.ts

@@ -0,0 +1,23 @@
+export declare class PanelTreeStore {
+    /** If there is an ongoing drag operation */
+    isDragging: boolean;
+    /** The panel in the tree being moved by an ongoing drag operation */
+    draggedPanel: HTMLElement | undefined;
+    /** The panel in the tree that has just had a drag event dropped onto it */
+    dropTargetPanel: HTMLElement | undefined;
+    /** The panel over which the ongoing drag was last dragged */
+    overEl: HTMLElement | undefined;
+    /** The data being "moved" by the drag operation */
+    draggedData: object | undefined;
+    /** The data associated with the target for the drop action */
+    dropTargetData: object | undefined;
+    /** Mirrored from `dragEvent.dataTransfer.dropEffect` to support touch drags */
+    dropEffect: "none" | "copy" | "link" | "move" | undefined;
+    /** Whether the current drop operation is recursive */
+    get isRecursive(): boolean;
+    constructor();
+    /** The user has started dragging a handle of a panel */
+    onStartDraggingHandle(ev: DragEvent | TouchEvent, data: object): void;
+    /** The user has stopped dragging a handle of a panel */
+    onEndDraggingHandle(ev: DragEvent | TouchEvent, data: object, remove: () => void): void;
+}

package/dist/esm/components/panel-tree/panel-tree-store.js

@@ -0,0 +1,59 @@
+import { PANEL_TREE_DEBUG } from "./panel-tree-constants";
+import { PanelTreeUtils as PTUtils } from "./panel-tree-utils";
+export class PanelTreeStore {
+    /** Whether the current drop operation is recursive */
+    get isRecursive() {
+        return (this.draggedPanel !== undefined) &&
+            (this.dropTargetPanel !== undefined) &&
+            (this.draggedPanel.contains(this.dropTargetPanel));
+    }
+    constructor() {
+        /** If there is an ongoing drag operation */
+        this.isDragging = false;
+        /** The panel in the tree being moved by an ongoing drag operation */
+        this.draggedPanel = undefined;
+        /** The panel in the tree that has just had a drag event dropped onto it */
+        this.dropTargetPanel = undefined;
+        /** The panel over which the ongoing drag was last dragged */
+        this.overEl = undefined;
+        /** The data being "moved" by the drag operation */
+        this.draggedData = undefined;
+        /** The data associated with the target for the drop action */
+        this.dropTargetData = undefined;
+        /** Mirrored from `dragEvent.dataTransfer.dropEffect` to support touch drags */
+        this.dropEffect = undefined;
+    }
+    /** The user has started dragging a handle of a panel */
+    onStartDraggingHandle(ev, data) {
+        var _a;
+        ev.stopImmediatePropagation();
+        // ev.preventDefault();
+        const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
+        const parentPanel = PTUtils.findParentPanel(ev.currentTarget);
+        // logger.debug(``)
+        if (parentPanel) {
+            this.isDragging = true;
+            this.draggedData = data;
+            this.draggedPanel = parentPanel;
+            PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Begin dragging, handle data: ${JSON.stringify(data)}`);
+            const parentRect = parentPanel.getBoundingClientRect();
+            if (dragEv) {
+                (_a = dragEv.dataTransfer) === null || _a === void 0 ? void 0 : _a.setDragImage(parentPanel, dragEv.clientX - parentRect.left, dragEv.clientY - parentRect.top);
+            }
+        }
+    }
+    /** The user has stopped dragging a handle of a panel */
+    onEndDraggingHandle(ev, data, remove) {
+        ev.stopImmediatePropagation();
+        const { dragEv, touchEv } = PTUtils.dragOrTouch(ev);
+        const isRecursive = this.isRecursive; // STORE.dropTargetPanel && STORE.draggedPanel?.contains(STORE.dropTargetPanel);
+        PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`End dragging, dropEffect: ${this.dropEffect}, handle data: ${JSON.stringify(data)}`);
+        if (this.dropEffect === "move") {
+            if (this.dropTargetData !== data && !isRecursive) {
+                PANEL_TREE_DEBUG !== null && PANEL_TREE_DEBUG !== void 0 ? PANEL_TREE_DEBUG : console.debug(`Instruct tree to remove subtree: ${JSON.stringify(data)}`);
+                remove === null || remove === void 0 ? void 0 : remove();
+            }
+        }
+        this.isDragging = false;
+    }
+}

package/dist/esm/components/panel-tree/panel-tree-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Stateless utility functions used by the PanelTree component
+ */
+export declare class PanelTreeUtils {
+    /** The last panel that was targetted when re-dispatching a touch event */
+    static lastTouchHoverPanel: HTMLElement | undefined;
+    /** Find the first parent element of the given element that contains the CSS class for panel tree panels */
+    static findParentPanel(handleEl: HTMLElement): HTMLElement | undefined;
+    static dragOrTouch(ev: DragEvent | TouchEvent): {
+        dragEv: DragEvent | undefined;
+        touchEv: TouchEvent | undefined;
+    };
+    static eventXPos(ev: DragEvent | TouchEvent): number;
+    static eventYPos(ev: DragEvent | TouchEvent): number;
+    static dispatchTouchEventToHoveredPanel(ev: TouchEvent): void;
+    static dispatchTouchEventToLastHoveredPanel(ev: TouchEvent): void;
+}

package/dist/esm/components/panel-tree/panel-tree-utils.js

@@ -0,0 +1,55 @@
+import { PANEL_TREE_PANEL_CLASS } from "./panel-tree-constants";
+/**
+ * Stateless utility functions used by the PanelTree component
+ */
+export class PanelTreeUtils {
+    /** Find the first parent element of the given element that contains the CSS class for panel tree panels */
+    static findParentPanel(handleEl) {
+        const parent = handleEl.parentElement;
+        if (!parent)
+            return;
+        if (parent.classList.contains(PANEL_TREE_PANEL_CLASS))
+            return parent;
+        return this.findParentPanel(parent);
+    }
+    static dragOrTouch(ev) {
+        const dragEv = ev.type.includes("drag") ? ev : undefined;
+        const touchEv = (ev.type.includes("touch")) ? ev : undefined;
+        return {
+            dragEv,
+            touchEv,
+        };
+    }
+    static eventXPos(ev) {
+        if (ev.type.includes("touch")) {
+            return ev.touches[0].clientX;
+        }
+        else {
+            return ev.clientX;
+        }
+    }
+    static eventYPos(ev) {
+        if (ev.type.includes("touch")) {
+            return ev.touches[0].clientY;
+        }
+        else {
+            return ev.clientY;
+        }
+    }
+    static dispatchTouchEventToHoveredPanel(ev) {
+        // Find element dragged over
+        const overEl = document.elementFromPoint(ev.touches[0].clientX, ev.touches[0].clientY);
+        const panel = overEl ? this.findParentPanel(overEl) : undefined;
+        if (panel) {
+            this.lastTouchHoverPanel = panel;
+            const evCopy = new TouchEvent(ev.type, ev);
+            panel.dispatchEvent(evCopy);
+        }
+    }
+    static dispatchTouchEventToLastHoveredPanel(ev) {
+        if (this.lastTouchHoverPanel) {
+            const evCopy = new TouchEvent(ev.type, ev);
+            this.lastTouchHoverPanel.dispatchEvent(evCopy);
+        }
+    }
+}

package/dist/esm/components/popover/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/reorderable-list/RedorderableList.d.ts

@@ -0,0 +1,55 @@
+import m from "mithril";
+/**
+ * A reorderable list of items. Expects a list of reorderable list items in children.
+ *
+ * ! The divs containing the content of the items must be passed as a 1-D list to
+ * the reorderable list's children. E.g.:
+ *
+ * ```ts
+ * m(ReorderableList, {...}, ["one", "two"]),
+ * ```
+ *
+ * Or (note the list spread):
+ *
+ * ```ts
+ * m(ReorderableList, {...}, [
+ *  ...someList.map(item => m("", {...}, [...])),
+ * ]),
+ * ```
+ *
+ * The divs defining the content of the items are displayed in a flex row, and are encouraged
+ * to flex themselves to fill the row.
+ *
+ * Example of applying a reordering:
+ *
+ * ```ts
+ * const dragged = this.items.splice(fromIndex, 1)[0];
+ * this.items.splice(toIndex, 0, dragged);
+ * ```
+ */
+export declare const ReorderableList: m.Component<{
+    /** A reorder instruction from the user */
+    reorder: (fromIndex: number, toIndex: number) => any;
+    /** Function called when a reordering drag begins */
+    reorderStart?: (ev: MouseEvent | TouchEvent) => any;
+    /** Function called after a reordering drag has finished */
+    reorderEnd?: (ev: MouseEvent | TouchEvent) => any;
+    /** Message to display when there are no items in the list */
+    emptyMessage?: string | m.Vnode<any, any>;
+    /** Disable reordering and the UI prompts */
+    disableReordering?: boolean;
+    /** Optionally hide the row numbers and narrow the reorder grip area */
+    hideNumbers?: boolean;
+    /** Optional space-separated CSS classes to apply to the container div */
+    class?: string;
+    /** Optional space-separated CSS classes to apply to each reorderable item row div */
+    itemClass?: string;
+    /** Optional CSS styles to apply to the container div */
+    style?: string;
+    /** Optional HTML ID for the div containing the list rows */
+    id?: string;
+}, {
+    draggingIndex: number | undefined;
+    draggedOverIndex: number | undefined;
+    draggedOverTop: boolean | undefined;
+}>;