Merge branch 'main' into benelan/move-actions

Esri · Aug 30, 2023 · cc7af8f · cc7af8f
2 parents d98b0cb + b9e3247
commit cc7af8f
Show file tree

Hide file tree

Showing 12 changed files with 459 additions and 470 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.12...@esri/calcite-components-react@1.7.0-next.13) (2023-08-30)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.11...@esri/calcite-components-react@1.7.0-next.12) (2023-08-29)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.7.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.10...@esri/calcite-components-react@1.7.0-next.11) (2023-08-28)
 
 **Note:** Version bump only for package @esri/calcite-components-react

diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.7.0-next.11",
+  "version": "1.7.0-next.13",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -19,7 +19,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.7.0-next.11"
+    "@esri/calcite-components": "^1.7.0-next.13"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.13](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.12...@esri/calcite-components@1.7.0-next.13) (2023-08-30)
+
+### Features
+
+- **sheet:** Update default widths ([#7617](https://github.com/Esri/calcite-design-system/issues/7617)) ([47d2c0b](https://github.com/Esri/calcite-design-system/commit/47d2c0b88489ff8c1ea1296d5ace68aa0dc9a94e))
+
+## [1.7.0-next.12](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.11...@esri/calcite-components@1.7.0-next.12) (2023-08-29)
+
+### Bug Fixes
+
+- **tree:** improve keyboard navigation ([#7618](https://github.com/Esri/calcite-design-system/issues/7618)) ([826a5cb](https://github.com/Esri/calcite-design-system/commit/826a5cbb5c31a2b02e1a6676d740888d48567345)), closes [#6861](https://github.com/Esri/calcite-design-system/issues/6861)
+
 ## [1.7.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.10...@esri/calcite-components@1.7.0-next.11) (2023-08-28)
 
 ### Features

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.7.0-next.11",
+  "version": "1.7.0-next.13",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
@@ -93,7 +93,28 @@ describe("calcite-sheet properties", () => {
       },
       `.${CSS.content}`
     );
-    expect(style).toEqual("432px");
+    expect(style).toEqual("420px");
+  });
+
+  it("sets custom width and max correctly", async () => {
+    const page = await newE2EPage();
+    // set large page to ensure test sheet isn't becoming fullscreen
+    await page.setViewport({ width: 1440, height: 1440 });
+    await page.setContent(
+      `<calcite-sheet position="inline-start" style="--calcite-sheet-width:600px;--calcite-sheet-max-width:600px;"></calcite-sheet>`
+    );
+    const sheet = await page.find("calcite-sheet");
+    sheet.setProperty("open", true);
+    await page.waitForChanges();
+    const style = await page.$eval(
+      "calcite-sheet",
+      (elm, selector: string) => {
+        const s = elm.shadowRoot.querySelector(selector);
+        return window.getComputedStyle(s).getPropertyValue("width");
+      },
+      `.${CSS.content}`
+    );
+    expect(style).toEqual("600px");
   });
 
   it("sets custom height correctly", async () => {

diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/packages/calcite-components/src/components/sheet/sheet.scss
@@ -114,37 +114,37 @@
 }
 
 :host([position^="inline"][width-scale="s"]) {
-  --calcite-sheet-width-internal: var(--calcite-sheet-width, 20vw);
-  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 20vw);
-  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 20vw);
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px);
 }
 
 :host([position^="inline"][width-scale="m"]) {
-  --calcite-sheet-width-internal: var(--calcite-sheet-width, 30vw);
-  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 30vw);
-  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 30vw);
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px);
 }
 
 :host([position^="inline"][width-scale="l"]) {
-  --calcite-sheet-width-internal: var(--calcite-sheet-width, 40vw);
-  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 40vw);
-  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 40vw);
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
 }
 
 :host([position^="block"][height-scale="s"]) {
-  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
-  --calcite-sheet-height-internal: var(--calcite-sheet-height, 20vh);
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);
+  --calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
 }
 
 :host([position^="block"][height-scale="m"]) {
-  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
-  --calcite-sheet-height-internal: var(--calcite-sheet-height, 40vh);
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);
+  --calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
 }
 
 :host([position^="block"][height-scale="l"]) {
-  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);
   --calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
   --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);
 }

diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -285,8 +285,7 @@ describe("calcite-tree-item", () => {
 
       const item = await page.find("#newbie");
       expect(item).toEqualAttribute("aria-hidden", "false");
-      expect(item).not.toHaveAttribute("calcite-hydrated-hidden");
-      expect(item.tabIndex).toBe(0);
+      expect(item.tabIndex).toBe(-1); // items are programmatically focused
     });
   });
 
@@ -362,61 +361,6 @@ describe("calcite-tree-item", () => {
     expect(isVisible).toBe(true);
   });
 
-  it("right arrow key expands subtree and left arrow collapses it", async () => {
-    const page = await newE2EPage({
-      html: `
-        <calcite-tree>
-          <calcite-tree-item id="cables">
-            Cables
-            <calcite-tree slot="children">
-              <calcite-tree-item id="xlr">XLR Cable</calcite-tree-item>
-              <calcite-tree-item id="instrument">Instrument Cable</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-        </calcite-tree>
-    `,
-    });
-
-    await page.keyboard.press("Tab");
-
-    expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-    expect(await page.evaluate(() => (document.activeElement as HTMLCalciteTreeItemElement).expanded)).toBe(false);
-
-    await page.keyboard.press("ArrowRight");
-
-    expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-    expect(await page.evaluate(() => (document.activeElement as HTMLCalciteTreeItemElement).expanded)).toBe(true);
-
-    await page.keyboard.press("ArrowLeft");
-
-    expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-    expect(await page.evaluate(() => (document.activeElement as HTMLCalciteTreeItemElement).expanded)).toBe(false);
-  });
-
-  it("right arrow key focuses first item in expanded subtree", async () => {
-    const page = await newE2EPage({
-      html: `
-        <calcite-tree>
-          <calcite-tree-item id="cables" expanded>
-            Cables
-            <calcite-tree slot="children">
-              <calcite-tree-item id="xlr">XLR Cable</calcite-tree-item>
-              <calcite-tree-item id="instrument">Instrument Cable</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-        </calcite-tree>
-    `,
-    });
-
-    await page.keyboard.press("Tab");
-
-    expect(await page.evaluate(() => document.activeElement.id)).toBe("cables");
-
-    await page.keyboard.press("ArrowRight");
-
-    expect(await page.evaluate(() => document.activeElement.id)).toBe("xlr");
-  });
-
   it("displaying an expanded item is visible", async () => {
     const page = await newE2EPage();
     await page.setContent(

diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -12,11 +12,10 @@ import {
   Watch,
 } from "@stencil/core";
 import {
-  slotChangeHasAssignedElement,
   filterDirectChildren,
   getElementDir,
   getSlotted,
-  nodeListToArray,
+  slotChangeHasAssignedElement,
   toAriaBoolean,
 } from "../../utils/dom";
 import {
@@ -186,7 +185,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   }
 
   componentDidRender(): void {
-    updateHostInteraction(this, () => this.parentExpanded || this.depth === 1);
+    updateHostInteraction(
+      this,
+      () => false // programmatically focusable
+    );
   }
 
   //--------------------------------------------------------------------------
@@ -358,8 +360,6 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
   @Listen("keydown")
   keyDownHandler(event: KeyboardEvent): void {
-    let root;
-
     if (this.isActionEndEvent(event)) {
       return;
     }
@@ -382,7 +382,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
           return;
         }
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
-        const link = nodeListToArray(this.el.children).find((el) =>
+        const link = Array.from(this.el.children).find((el) =>
           el.matches("a")
         ) as HTMLAnchorElement;
 
@@ -398,33 +398,8 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
             updateItem: true,
           });
         }
-
         event.preventDefault();
-        break;
-      case "Home":
-        root = this.el.closest("calcite-tree:not([child])") as HTMLCalciteTreeElement;
-
-        const firstNode = root.querySelector("calcite-tree-item");
-
-        firstNode?.focus();
-
-        break;
-      case "End":
-        root = this.el.closest("calcite-tree:not([child])");
-
-        let currentNode = root.children[root.children.length - 1]; // last child
-        let currentTree = nodeListToArray(currentNode.children).find((el) =>
-          el.matches("calcite-tree")
-        );
-        while (currentTree) {
-          currentNode = currentTree.children[root.children.length - 1];
-          currentTree = nodeListToArray(currentNode.children).find((el) =>
-            el.matches("calcite-tree")
-          );
-        }
-        currentNode?.focus();
-        break;
-    }
+      }
   }
 
   //--------------------------------------------------------------------------
@@ -533,3 +508,4 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
     this.hasEndActions = slotChangeHasAssignedElement(event);
   };
 }
+