@esri/calcite-components 1.5.0-next.32 → 1.5.0-next.34

package/dist/collection/components/list/list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
 import { h, } from "@stencil/core";
 import { debounce } from "lodash-es";
@@ -11,8 +11,10 @@ import { createObserver } from "../../utils/observers";
 import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
 import { CSS, debounceTimeout, SLOTS } from "./resources";
+import { connectSortableComponent, disconnectSortableComponent, } from "../../utils/sortableComponent";
 import { SLOTS as STACK_SLOTS } from "../stack/resources";
 const listItemSelector = "calcite-list-item";
+const listItemSelectorDirect = `:scope > calcite-list-item`;
 const parentSelector = "calcite-list-item-group, calcite-list-item";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 /**
@@ -24,16 +26,16 @@ import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from
  */
 export class List {
   constructor() {
-    this.listItems = [];
+    this.dragSelector = "calcite-list-item";
     this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
     this.mutationObserver = createObserver("mutation", () => this.updateListItems());
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event));
+      updateListItemChildren(getListItemChildren(event.target));
+      if (this.parentListEl) {
+        this.calciteInternalListDefaultSlotChange.emit();
+      }
     };
     this.handleFilterActionsStartSlotChange = (event) => {
       this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
@@ -86,11 +88,22 @@ export class List {
       }));
     };
     this.updateListItems = debounce((emit = false) => {
-      const { selectionAppearance, selectionMode } = this;
+      const { selectionAppearance, selectionMode, dragEnabled } = this;
+      if (!!this.parentListEl) {
+        const items = this.queryListItems(true);
+        items.forEach((item) => {
+          item.selectionAppearance = selectionAppearance;
+          item.selectionMode = selectionMode;
+          item.dragHandle = dragEnabled;
+        });
+        this.setUpSorting();
+        return;
+      }
       const items = this.queryListItems();
       items.forEach((item) => {
         item.selectionAppearance = selectionAppearance;
         item.selectionMode = selectionMode;
+        item.dragHandle = dragEnabled;
       });
       this.listItems = items;
       if (this.filterEnabled) {
@@ -103,9 +116,10 @@ export class List {
       this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
       this.setActiveListItem();
       this.updateSelectedItems(emit);
+      this.setUpSorting();
     }, debounceTimeout);
-    this.queryListItems = () => {
-      return Array.from(this.el.querySelectorAll(listItemSelector));
+    this.queryListItems = (direct = false) => {
+      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
     };
     this.focusRow = (focusEl) => {
       const { enabledListItems } = this;
@@ -123,7 +137,7 @@ export class List {
       return parentListItemEl.open && this.isNavigable(parentListItemEl);
     };
     this.handleListKeydown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || !!this.parentListEl) {
         return;
       }
       const { key } = event;
@@ -163,6 +177,10 @@ export class List {
       }
     };
     this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
     this.filterEnabled = false;
     this.filteredItems = [];
     this.filteredData = [];
@@ -174,20 +192,21 @@ export class List {
     this.selectedItems = [];
     this.selectionMode = "none";
     this.selectionAppearance = "icon";
+    this.assistiveText = undefined;
     this.dataForFilter = [];
-    this.hasFilterActionsStart = false;
     this.hasFilterActionsEnd = false;
-  }
-  handleFilterEnabledChange() {
-    this.updateListItems();
+    this.hasFilterActionsStart = false;
   }
   async handleFilterTextChange() {
     this.performFilter();
   }
-  handleSelectionAppearanceChange() {
+  handleListItemChange() {
     this.updateListItems();
   }
   handleCalciteInternalFocusPreviousItem(event) {
+    if (this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const { enabledListItems } = this;
     const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
@@ -197,6 +216,9 @@ export class List {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
@@ -205,9 +227,25 @@ export class List {
     });
   }
   handleCalciteListItemSelect() {
+    if (!!this.parentListEl) {
+      return;
+    }
     this.updateSelectedItems(true);
   }
+  handleCalciteInternalHandleChange(event) {
+    this.assistiveText = event.detail.message;
+    event.stopPropagation();
+  }
+  handleCalciteHandleNudge(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.handleNudgeEvent(event);
+  }
   handleCalciteInternalListItemSelect(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const target = event.target;
     const { listItems, selectionMode } = this;
@@ -217,21 +255,30 @@ export class List {
     this.updateSelectedItems();
   }
   handleCalciteInternalListItemChange(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     this.updateListItems(true);
   }
+  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    event.stopPropagation();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+    this.connectObserver();
     this.updateListItems();
+    this.setUpSorting();
     connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
     disconnectInteractive(this);
   }
   componentWillLoad() {
@@ -263,10 +310,43 @@ export class List {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: STACK_SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: STACK_SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: STACK_SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    this.mutationObserver?.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    connectSortableComponent(this);
+  }
+  onDragStart() {
+    this.disconnectObserver();
+  }
+  onDragEnd() {
+    this.connectObserver();
+  }
+  onDragSort(event) {
+    this.updateListItems();
+    const { from, item, to } = event;
+    this.calciteListOrderChange.emit({
+      dragEl: item,
+      fromEl: from,
+      toEl: to,
+    });
+  }
   filterElements({ el, filteredItems, visibleParents, }) {
     const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
     el.hidden = hidden;
@@ -302,6 +382,58 @@ export class List {
     await filterEl.filter(filterText);
     this.updateFilteredData();
   }
+  handleNudgeEvent(event) {
+    const { direction } = event.detail;
+    const composedPath = event.composedPath();
+    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
+    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
+    const parentEl = sortItem?.parentElement;
+    if (!parentEl) {
+      return;
+    }
+    const { enabledListItems } = this;
+    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+    const lastIndex = sameParentItems.length - 1;
+    const startingIndex = sameParentItems.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    if (direction === "up") {
+      if (startingIndex === 0) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex - 1;
+      }
+    }
+    else {
+      if (startingIndex === lastIndex) {
+        buddyIndex = 0;
+      }
+      else if (startingIndex === lastIndex - 1) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex + 2;
+      }
+    }
+    this.disconnectObserver();
+    if (appendInstead) {
+      parentEl.appendChild(sortItem);
+    }
+    else {
+      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+    }
+    this.updateListItems();
+    this.connectObserver();
+    this.calciteListOrderChange.emit({
+      dragEl: sortItem,
+      fromEl: null,
+      toEl: null,
+    });
+    handle.setFocus().then(() => {
+      handle.activated = true;
+    });
+  }
   static get is() { return "calcite-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -334,6 +466,81 @@ export class List {
         "reflect": true,
         "defaultValue": "false"
       },
+      "canPull": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(event: DragEvent) => boolean",
+          "resolved": "(event: DragEvent) => boolean",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When provided, the method will be called to determine whether the element can  move from the list."
+        }
+      },
+      "canPut": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(event: DragEvent) => boolean",
+          "resolved": "(event: DragEvent) => boolean",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When provided, the method will be called to determine whether the element can be added from another list."
+        }
+      },
+      "dragEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, `calcite-list-item`s are sortable via a draggable button."
+        },
+        "attribute": "drag-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "group": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        },
+        "attribute": "group",
+        "reflect": true
+      },
       "filterEnabled": {
         "type": "boolean",
         "mutable": false,
@@ -565,9 +772,10 @@ export class List {
   }
   static get states() {
     return {
+      "assistiveText": {},
       "dataForFilter": {},
-      "hasFilterActionsStart": {},
-      "hasFilterActionsEnd": {}
+      "hasFilterActionsEnd": {},
+      "hasFilterActionsStart": {}
     };
   }
   static get events() {
@@ -601,6 +809,46 @@ export class List {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteListOrderChange",
+        "name": "calciteListOrderChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the order of the list has changed."
+        },
+        "complexType": {
+          "original": "DragEvent",
+          "resolved": "DragEvent",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        }
+      }, {
+        "method": "calciteInternalListDefaultSlotChange",
+        "name": "calciteInternalListDefaultSlotChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the default slot has changes in order to notify parent lists."
+        },
+        "complexType": {
+          "original": "DragEvent",
+          "resolved": "DragEvent",
+          "references": {
+            "DragEvent": {
+              "location": "import",
+              "path": "../../utils/sortableComponent"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -626,17 +874,23 @@ export class List {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "filterEnabled",
-        "methodName": "handleFilterEnabledChange"
-      }, {
         "propName": "filterText",
         "methodName": "handleFilterTextChange"
+      }, {
+        "propName": "filterEnabled",
+        "methodName": "handleListItemChange"
+      }, {
+        "propName": "group",
+        "methodName": "handleListItemChange"
+      }, {
+        "propName": "dragEnabled",
+        "methodName": "handleListItemChange"
       }, {
         "propName": "selectionMode",
-        "methodName": "handleSelectionAppearanceChange"
+        "methodName": "handleListItemChange"
       }, {
         "propName": "selectionAppearance",
-        "methodName": "handleSelectionAppearanceChange"
+        "methodName": "handleListItemChange"
       }];
   }
   static get listeners() {
@@ -658,6 +912,18 @@ export class List {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteInternalHandleChange",
+        "method": "handleCalciteInternalHandleChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteHandleNudge",
+        "method": "handleCalciteHandleNudge",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "calciteInternalListItemSelect",
         "method": "handleCalciteInternalListItemSelect",
@@ -670,6 +936,12 @@ export class List {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteInternalListItemGroupDefaultSlotChange",
+        "method": "handleCalciteInternalListItemGroupDefaultSlotChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
 export const CSS = {
   container: "container",
@@ -10,6 +10,7 @@ export const CSS = {
   stack: "stack",
   tableContainer: "table-container",
   sticky: "sticky-pos",
+  assistiveText: "assistive-text",
 };
 export const debounceTimeout = 0;
 export const SLOTS = {

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

@@ -159,6 +159,7 @@ td:focus {
 .content-start,
 .content-end,
 .selection-container,
+.drag-container,
 .open-container {
   display: flex;
   align-items: center;

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
 import { h, Host, } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
@@ -43,17 +43,7 @@ export class ListItem {
       this.hasContentEnd = slotChangeHasAssignedElement(event);
     };
     this.handleDefaultSlotChange = (event) => {
-      const { parentListEl } = this;
-      const listItemChildren = getListItemChildren(event);
-      updateListItemChildren(listItemChildren);
-      const openable = !!listItemChildren.length;
-      if (openable && parentListEl && !parentListEl.openable) {
-        parentListEl.openable = true;
-      }
-      this.openable = openable;
-      if (!openable) {
-        this.open = false;
-      }
+      this.handleOpenableChange(event.target);
     };
     this.toggleOpen = () => {
       this.open = !this.open;
@@ -153,6 +143,7 @@ export class ListItem {
     this.closed = false;
     this.description = undefined;
     this.disabled = false;
+    this.dragHandle = false;
     this.label = undefined;
     this.metadata = undefined;
     this.open = false;
@@ -193,9 +184,18 @@ export class ListItem {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleCalciteInternalListDefaultSlotChanges(event) {
+    event.stopPropagation();
+    this.handleOpenableChange(this.defaultSlotEl);
+  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
   connectedCallback() {
     connectInteractive(this);
     connectLocalized(this);
@@ -259,6 +259,9 @@ export class ListItem {
           : ICONS.selectedSingle
         : ICONS.unselected, scale: "s" })));
   }
+  renderDragHandle() {
+    return this.dragHandle ? (h("td", { class: CSS.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+  }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
@@ -320,10 +323,10 @@ export class ListItem {
         [CSS.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS.nestedContainer]: true,
         [CSS.nestedContainerHidden]: openable && !open,
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
   }
   // --------------------------------------------------------------------------
   //
@@ -345,6 +348,22 @@ export class ListItem {
       this.selectionAppearance = parentListEl.selectionAppearance;
     }
   }
+  handleOpenableChange(slotEl) {
+    if (!slotEl) {
+      return;
+    }
+    const { parentListEl } = this;
+    const listItemChildren = getListItemChildren(slotEl);
+    updateListItemChildren(listItemChildren);
+    const openable = !!listItemChildren.length;
+    if (openable && parentListEl && !parentListEl.openable) {
+      parentListEl.openable = true;
+    }
+    this.openable = openable;
+    if (!openable) {
+      this.open = false;
+    }
+  }
   static get is() { return "calcite-list-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -452,6 +471,27 @@ export class ListItem {
         "reflect": true,
         "defaultValue": "false"
       },
+      "dragHandle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When `true`, the component displays a draggable button."
+        },
+        "attribute": "drag-handle",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -848,4 +888,19 @@ export class ListItem {
         "methodName": "effectiveLocaleChange"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalListItemGroupDefaultSlotChange",
+        "method": "handleCalciteInternalListDefaultSlotChanges",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalListDefaultSlotChange",
+        "method": "handleCalciteInternalListDefaultSlotChanges",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/list-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
 export const CSS = {
   container: "container",
@@ -22,6 +22,7 @@ export const CSS = {
   actionsEnd: "actions-end",
   selectionContainer: "selection-container",
   openContainer: "open-container",
+  dragContainer: "drag-container",
 };
 export const SLOTS = {
   actionsStart: "actions-start",
@@ -30,7 +31,8 @@ export const SLOTS = {
   contentEnd: "content-end",
   actionsEnd: "actions-end",
 };
-export const MAX_COLUMNS = 5;
+// Set to zero to extend until the end of the table section.
+export const MAX_COLUMNS = 0;
 export const ICONS = {
   selectedMultiple: "check-circle-f",
   selectedSingle: "circle-f",