feat(list, block-group, sort-handle): add sortDisabled property to prevent reordering

packages/calcite-components/src/components/block-group/block-group.e2e.ts

@@ -44,6 +44,10 @@ describe("calcite-block-group", () => {
         propertyName: "loading",
         defaultValue: false,
       },
+      {
+        propertyName: "sortDisabled",
+        defaultValue: false,
+      },
     ]);
   });
 
@@ -65,6 +69,10 @@ describe("calcite-block-group", () => {
         propertyName: "loading",
         value: true,
       },
+      {
+        propertyName: "sortDisabled",
+        value: true,
+      },
     ]);
   });
 
@@ -109,9 +117,9 @@ describe("calcite-block-group", () => {
       expect(await items[i].getProperty("dragHandle")).toBe(true);
     }
 
-    const root = await page.find("#root");
+    const blockGroup = await page.find("#root");
 
-    root.setProperty("dragEnabled", false);
+    blockGroup.setProperty("dragEnabled", false);
     await page.waitForChanges();
     await page.waitForTimeout(DEBOUNCE.nextTick);
 
@@ -120,6 +128,36 @@ describe("calcite-block-group", () => {
     }
   });
 
+  it("should set the sortDisabled property on items", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-block-group id="root" drag-enabled sort-disabled group="my-block-group">
+        <calcite-block id="one" heading="one" label="One"></calcite-block>
+        <calcite-block id="two" heading="two" label="Two"></calcite-block>
+        <calcite-block id="three" heading="three" label="Three"></calcite-block>
+      </calcite-block-group>`,
+    );
+
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+
+    const items = await findAll(page, "calcite-block");
+
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].getProperty("sortDisabled")).toBe(true);
+    }
+
+    const blockGroup = await page.find("#root");
+
+    blockGroup.setProperty("sortDisabled", false);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].getProperty("sortDisabled")).toBe(false);
+    }
+  });
+
   describe("drag and drop", () => {
     async function createSimpleBlockGroup(): Promise<E2EPage> {
       const page = await newE2EPage();

packages/calcite-components/src/components/block-group/block-group.tsx

@@ -106,6 +106,9 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
   /** When `true`, a busy indicator is displayed. */
   @property({ reflect: true }) loading = false;
 
+  /** When `true`, and a `group` is defined, `calcite-block`s are no longer sortable. */
+  @property({ reflect: true }) sortDisabled = false;
+
   // #endregion
 
   // #region Public Methods
@@ -172,7 +175,8 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
   override willUpdate(changes: PropertyValues<this>): void {
     if (
       changes.has("group") ||
-      (changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false))
+      (changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) ||
+      (changes.has("sortDisabled") && (this.hasUpdated || this.sortDisabled !== false))
     ) {
       this.updateBlockItemsDebounced();
     }
@@ -193,7 +197,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
 
   private updateBlockItems(): void {
     this.updateGroupItems();
-    const { dragEnabled, el, moveToItems } = this;
+    const { dragEnabled, el, moveToItems, sortDisabled } = this;
 
     const items = Array.from(this.el.querySelectorAll(blockSelector));
 
@@ -203,6 +207,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
           (moveToItem) => moveToItem.element !== el && !item.contains(moveToItem.element),
         );
         item.dragHandle = dragEnabled;
+        item.sortDisabled = sortDisabled;
       }
     });
 

packages/calcite-components/src/components/block/block.e2e.ts

@@ -71,6 +71,10 @@ describe("calcite-block", () => {
         propertyName: "sortHandleOpen",
         defaultValue: false,
       },
+      {
+        propertyName: "sortDisabled",
+        defaultValue: false,
+      },
     ]);
   });
 

packages/calcite-components/src/components/block/block.tsx

@@ -147,6 +147,13 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
    */
   @property() moveToItems: MoveTo[] = [];
 
+  /**
+   * Prevents reordering the component.
+   *
+   * @private
+   */
+  @property() sortDisabled = false;
+
   /**
    * When `true`, expands the component and its contents.
    *
@@ -480,6 +487,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
       setPosition,
       setSize,
       dragDisabled,
+      sortDisabled,
     } = this;
 
     const toggleLabel = expanded ? messages.collapse : messages.expand;
@@ -513,6 +521,7 @@ export class Block extends LitElement implements InteractiveComponent, OpenClose
             ref={this.setSortHandleEl}
             setPosition={setPosition}
             setSize={setSize}
+            sortDisabled={sortDisabled}
           />
         ) : null}
         {collapsible ? (

packages/calcite-components/src/components/list-item/list-item.e2e.ts

@@ -89,6 +89,10 @@ describe("calcite-list-item", () => {
         propertyName: "sortHandleOpen",
         defaultValue: false,
       },
+      {
+        propertyName: "sortDisabled",
+        defaultValue: false,
+      },
     ]);
   });
 

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -114,6 +114,13 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
    */
   @property() bordered = false;
 
+  /**
+   * Prevents reordering the component.
+   *
+   * @private
+   */
+  @property() sortDisabled = false;
+
   /** When `true`, a close button is added to the component. */
   @property({ reflect: true }) closable = false;
 
@@ -753,7 +760,8 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
   }
 
   private renderDragHandle(): JsxNode {
-    const { label, dragHandle, dragDisabled, setPosition, setSize, moveToItems } = this;
+    const { label, dragHandle, dragDisabled, setPosition, setSize, moveToItems, sortDisabled } =
+      this;
 
     return dragHandle ? (
       <div
@@ -776,6 +784,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
           scale={this.scale}
           setPosition={setPosition}
           setSize={setSize}
+          sortDisabled={sortDisabled}
         />
       </div>
     ) : null;

packages/calcite-components/src/components/list/list.e2e.ts

@@ -104,6 +104,10 @@ describe("calcite-list", () => {
         propertyName: "displayMode",
         defaultValue: "flat",
       },
+      {
+        propertyName: "sortDisabled",
+        defaultValue: false,
+      },
     ]);
   });
 
@@ -113,6 +117,10 @@ describe("calcite-list", () => {
         propertyName: "displayMode",
         value: "nested",
       },
+      {
+        propertyName: "sortDisabled",
+        value: true,
+      },
     ]);
   });
 
@@ -320,6 +328,36 @@ describe("calcite-list", () => {
     }
   });
 
+  it("should set the sortDisabled property on items", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-list id="root" drag-enabled sort-disabled group="my-block-group">
+        <calcite-list-item id="one" heading="one" label="One"></calcite-list-item>
+        <calcite-list-item id="two" heading="two" label="Two"></calcite-list-item>
+        <calcite-list-item id="three" heading="three" label="Three"></calcite-list-item>
+      </calcite-list>`,
+    );
+
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+
+    const items = await findAll(page, "calcite-list-item");
+
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].getProperty("sortDisabled")).toBe(true);
+    }
+
+    const list = await page.find("#root");
+
+    list.setProperty("sortDisabled", false);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+
+    for (let i = 0; i < items.length; i++) {
+      expect(await items[i].getProperty("sortDisabled")).toBe(false);
+    }
+  });
+
   it("should set the dragHandle property on items which are not direct children", async () => {
     const page = await newE2EPage();
     await page.setContent(

packages/calcite-components/src/components/list/list.tsx

@@ -279,6 +279,9 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
     SelectionMode
   > = "none";
 
+  /** When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable. */
+  @property({ reflect: true }) sortDisabled = false;
+
   //#endregion
 
   //#region Public Methods
@@ -393,6 +396,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
     if (
       (changes.has("filterEnabled") && (this.hasUpdated || this.filterEnabled !== false)) ||
       changes.has("group") ||
+      (changes.has("sortDisabled") && (this.hasUpdated || this.sortDisabled !== false)) ||
       (changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) ||
       (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) ||
       (changes.has("selectionAppearance") &&
@@ -431,6 +435,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
       moveToItems,
       displayMode,
       scale,
+      sortDisabled,
     } = this;
 
     const items = Array.from(this.el.querySelectorAll(listItemSelector));
@@ -447,6 +452,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
 
         item.dragHandle = dragEnabled;
         item.displayMode = displayMode;
+        item.sortDisabled = sortDisabled;
       }
     });