Merge branch 'main' into elijbet/6038-refactor-getElementProp-stepper…

…-item

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.8...@esri/calcite-components-react@1.7.0-next.9) (2023-08-26)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.7...@esri/calcite-components-react@1.7.0-next.8) (2023-08-25)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.6...@esri/calcite-components-react@1.7.0-next.7) (2023-08-25)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [1.7.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.5...@esri/calcite-components-react@1.7.0-next.6) (2023-08-25)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.7.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.4...@esri/calcite-components-react@1.7.0-next.5) (2023-08-24)
 
 **Note:** Version bump only for package @esri/calcite-components-react

packages/calcite-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.7.0-next.5",
+  "version": "1.7.0-next.9",
   "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.5"
+    "@esri/calcite-components": "^1.7.0-next.9"
   },
   "peerDependencies": {
     "react": ">=16.7",

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,31 @@
 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.9](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.8...@esri/calcite-components@1.7.0-next.9) (2023-08-26)
+
+### Bug Fixes
+
+- **rating:** adds focus outline on click ([#7341](https://github.com/Esri/calcite-design-system/issues/7341)) ([af30073](https://github.com/Esri/calcite-design-system/commit/af300739f0da5713345cad30ba85732599794250)), closes [#4633](https://github.com/Esri/calcite-design-system/issues/4633)
+
+## [1.7.0-next.8](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.7...@esri/calcite-components@1.7.0-next.8) (2023-08-25)
+
+### Bug Fixes
+
+- **tree-item:** updates state when selection changes programmatically for `selection-mode='ancestors'` ([#7572](https://github.com/Esri/calcite-design-system/issues/7572)) ([40758c5](https://github.com/Esri/calcite-design-system/commit/40758c5eb4fd6a911991e20266548575d4c306f7)), closes [#7291](https://github.com/Esri/calcite-design-system/issues/7291)
+
+## [1.7.0-next.7](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.6...@esri/calcite-components@1.7.0-next.7) (2023-08-25)
+
+### Features
+
+- **combobox:** add single-persist selection mode ([#7583](https://github.com/Esri/calcite-design-system/issues/7583)) ([dab06a3](https://github.com/Esri/calcite-design-system/commit/dab06a3596a54165e15d57591d0a463aac96f33a)), closes [#4738](https://github.com/Esri/calcite-design-system/issues/4738)
+
+## [1.7.0-next.6](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.5...@esri/calcite-components@1.7.0-next.6) (2023-08-25)
+
+### Bug Fixes
+
+- **flow:** catch error when beforeBack promise is rejected ([#7601](https://github.com/Esri/calcite-design-system/issues/7601)) ([cb70671](https://github.com/Esri/calcite-design-system/commit/cb706711684a91d7f93322ed185d0999387a71d8))
+- **modal:** catch error when beforeClose promise is rejected ([#7600](https://github.com/Esri/calcite-design-system/issues/7600)) ([70405d0](https://github.com/Esri/calcite-design-system/commit/70405d042f11b91abe6add27221986a469a220e8)), closes [#6381](https://github.com/Esri/calcite-design-system/issues/6381)
+
 ## [1.7.0-next.5](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.4...@esri/calcite-components@1.7.0-next.5) (2023-08-24)
 
 ### Bug Fixes

packages/calcite-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.7.0-next.5",
+  "version": "1.7.0-next.9",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

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

@@ -23,7 +23,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { ComboboxChildElement } from "../combobox/interfaces";
-import { getAncestors, getDepth } from "../combobox/utils";
+import { getAncestors, getDepth, isSingleLike } from "../combobox/utils";
 import { Scale, SelectionMode } from "../interfaces";
 import { CSS } from "./resources";
 
@@ -83,14 +83,15 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
 
   /**
    * Specifies the selection mode:
-   * - `multiple` allows any number of selected items (default),
-   * - `single` allows only one selection,
-   * - `ancestors` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - "multiple" allows any number of selected items (default),
+   * - "single" allows only one selection,
+   * - "single-persist" allow and require one open item,
+   * - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    *
    * @internal
    */
   @Prop({ reflect: true }) selectionMode: Extract<
-    "single" | "ancestors" | "multiple",
+    "single" | "single-persist" | "ancestors" | "multiple",
     SelectionMode
   > = "multiple";
 
@@ -149,7 +150,9 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   // --------------------------------------------------------------------------
 
   toggleSelected(): Promise<void> {
-    if (this.disabled) {
+    const isSinglePersistSelect = this.selectionMode === "single-persist";
+
+    if (this.disabled || (isSinglePersistSelect && this.selected)) {
       return;
     }
 
@@ -220,8 +223,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   }
 
   render(): VNode {
-    const isSingleSelect = this.selectionMode === "single";
-
+    const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;

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

@@ -406,6 +406,34 @@ describe("calcite-combobox", () => {
         expect(await combobox.getProperty("value")).toBe("");
       });
 
+      it("single-persist-selection mode does not allow toggling selection once the selected item is clicked", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          html`
+            <calcite-combobox selection-mode="single-persist">
+              <calcite-combobox-item value="one" text-label="one"></calcite-combobox-item>
+              <calcite-combobox-item value="two" text-label="two"></calcite-combobox-item>
+            </calcite-combobox>
+          `
+        );
+        const combobox = await page.find("calcite-combobox");
+        const firstOpenEvent = page.waitForEvent("calciteComboboxOpen");
+        await combobox.click();
+        await firstOpenEvent;
+
+        const item1 = await combobox.find("calcite-combobox-item[value=one]");
+
+        await item1.click();
+        expect(await combobox.getProperty("value")).toBe("one");
+
+        const secondOpenEvent = page.waitForEvent("calciteComboboxOpen");
+        await combobox.click();
+        await secondOpenEvent;
+
+        await item1.click();
+        expect(await combobox.getProperty("value")).toBe("one");
+      });
+
       it("multiple-selection mode allows toggling selection once the selected item is clicked", async () => {
         const page = await newE2EPage();
         await page.setContent(

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

@@ -64,7 +64,7 @@ import { Scale, SelectionMode } from "../interfaces";
 import { ComboboxMessages } from "./assets/combobox/t9n";
 import { ComboboxChildElement } from "./interfaces";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
-import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
+import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
 
 interface ItemData {
@@ -198,12 +198,13 @@ export class Combobox
 
   /**
    * Specifies the selection mode:
-   * - `multiple` allows any number of selected items (default),
-   * - `single` allows only one selection,
-   * - `ancestors` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - "multiple" allows any number of selected items (default),
+   * - "single" allows only one selection,
+   * - "single-persist" allow and require one open item,
+   * - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    */
   @Prop({ reflect: true }) selectionMode: Extract<
-    "single" | "ancestors" | "multiple",
+    "single" | "single-persist" | "ancestors" | "multiple",
     SelectionMode
   > = "multiple";
 
@@ -766,7 +767,7 @@ export class Combobox
       this.addCustomChip(this.text);
     }
 
-    if (this.selectionMode === "single") {
+    if (isSingleLike(this.selectionMode)) {
       if (this.textInput) {
         this.textInput.value = "";
       }
@@ -1003,7 +1004,7 @@ export class Combobox
   }
 
   getNeedsIcon(): boolean {
-    return this.selectionMode === "single" && this.items.some((item) => item.icon);
+    return isSingleLike(this.selectionMode) && this.items.some((item) => item.icon);
   }
 
   resetText(): void {
@@ -1134,7 +1135,7 @@ export class Combobox
   }
 
   isMulti(): boolean {
-    return this.selectionMode !== "single";
+    return this.selectionMode !== "single" && this.selectionMode !== "single-persist";
   }
 
   comboboxFocusHandler = (): void => {
@@ -1187,7 +1188,7 @@ export class Combobox
 
   renderInput(): VNode {
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
-    const single = selectionMode === "single";
+    const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
     const showLabel = !open && single && !!selectedItem;
 
@@ -1284,7 +1285,7 @@ export class Combobox
     const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
 
     const iconAtStart =
       !this.open && selectedItem
@@ -1316,7 +1317,7 @@ export class Combobox
 
   render(): VNode {
     const { guid, label, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && this.value?.length > 0;
 
     return (

packages/calcite-components/src/components/combobox/utils.ts

@@ -2,6 +2,7 @@ import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildElement } from "./interfaces";
 import { ComboboxChildSelector } from "./resources";
 import { Build } from "@stencil/core";
+import { Combobox } from "./combobox";
 
 export function getAncestors(element: HTMLElement): ComboboxChildElement[] {
   const parent: ComboboxChildElement = element.parentElement?.closest(ComboboxChildSelector);
@@ -39,3 +40,7 @@ export function getDepth(element: HTMLElement): number {
 
   return result.snapshotLength;
 }
+
+export function isSingleLike(selectionMode: Combobox["selectionMode"]): boolean {
+  return selectionMode.includes("single");
+}

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

@@ -102,6 +102,8 @@ describe("calcite-flow", () => {
 
       await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
 
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
+
       await page.$eval(
         "calcite-flow-item",
         (elm: HTMLCalciteFlowItemElement) =>
@@ -114,6 +116,50 @@ describe("calcite-flow", () => {
 
       expect(backValue).toBeDefined();
       expect(mockCallBack).toHaveBeenCalledTimes(1);
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(0);
+    });
+
+    it("should handle rejected 'beforeBack' promise'", async () => {
+      const page = await newE2EPage();
+
+      const mockCallBack = jest.fn().mockReturnValue(() => Promise.reject());
+      await page.exposeFunction("beforeBack", mockCallBack);
+
+      await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
+
+      await page.$eval(
+        "calcite-flow-item",
+        (elm: HTMLCalciteFlowItemElement) =>
+          (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
+      );
+
+      const flow = await page.find("calcite-flow");
+
+      await flow.callMethod("back");
+
+      expect(mockCallBack).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not remove flow-item on rejected 'beforeBack' promise'", async () => {
+      const page = await newE2EPage();
+
+      await page.exposeFunction("beforeBack", () => Promise.reject());
+
+      await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
+
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
+
+      await page.$eval(
+        "calcite-flow-item",
+        (elm: HTMLCalciteFlowItemElement) =>
+          (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
+      );
+
+      const flow = await page.find("calcite-flow");
+
+      await flow.callMethod("back");
+
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
     });
 
     it("frame advancing should add animation class", async () => {

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

@@ -41,7 +41,12 @@ export class Flow implements LoadableComponent {
       ? lastItem.beforeBack
       : (): Promise<void> => Promise.resolve();
 
-    await beforeBack.call(lastItem);
+    try {
+      await beforeBack.call(lastItem);
+    } catch (_error) {
+      // back prevented
+      return;
+    }
 
     lastItem.remove();