Merge remote-tracking branch 'origin/main' into benelan/ccr-vite-fix

* origin/main: fix(list): remove unnecessary z-index (#7678) fix(sheet): calciteSheetClose should emit on scrim click (#7685) fix(modal): calciteModalClose should emit on close button click (#7680) fix(list-item): Do not call preventDefault on enter key within slotted actions (#7684) chore(locale): add extra info to default numbering system export (#7683) fix(input-date-picker): apply default numbering system to avoid browser inferring from locale (#7682) chore: release next fix(time-picker): focus corresponding input when nudge buttons are clicked (#7650) build(deps): update dependency @types/sortablejs to v1.15.2 (#7674) feat(flow): split up custom flow item interfaces (#7666)
Esri · Sep 6, 2023 · 1e05ae3 · 1e05ae3
2 parents c094519 + 1f4cd97
commit 1e05ae3
Show file tree

Hide file tree

Showing 24 changed files with 501 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@types/react-dom": "^16.0.9",
     "@types/semver": "7.5.0",
     "@types/shell-quote": "1.7.1",
-    "@types/sortablejs": "1.15.1",
+    "@types/sortablejs": "1.15.2",
     "@types/yargs": "17.0.24",
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.48.2",

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.1-next.2...@esri/calcite-components-react@1.8.0-next.0) (2023-09-05)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.7.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.1-next.1...@esri/calcite-components-react@1.7.1-next.2) (2023-09-05)
 
 **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.1-next.2",
+  "version": "1.8.0-next.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -20,7 +20,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.7.1-next.2"
+    "@esri/calcite-components": "^1.8.0-next.0"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.8.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.1-next.2...@esri/calcite-components@1.8.0-next.0) (2023-09-05)
+
+### Features
+
+- **flow:** split up custom flow item interfaces ([#7666](https://github.com/Esri/calcite-design-system/issues/7666)) ([6c22e7c](https://github.com/Esri/calcite-design-system/commit/6c22e7c60525385550ecd76a19abfe58f729f5bf)), closes [#7608](https://github.com/Esri/calcite-design-system/issues/7608)
+
+### Bug Fixes
+
+- **time-picker:** focus corresponding input when nudge buttons are clicked ([#7650](https://github.com/Esri/calcite-design-system/issues/7650)) ([9c7d846](https://github.com/Esri/calcite-design-system/commit/9c7d846fc376cc50726dc6662b99afe466021a54)), closes [#7533](https://github.com/Esri/calcite-design-system/issues/7533)
+
 ## [1.7.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.1-next.1...@esri/calcite-components@1.7.1-next.2) (2023-09-05)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
@@ -419,15 +419,51 @@ For such cases, the following pattern will enable developers to create custom ch
 #### Parent component
 
 - Must provide a `customItemSelectors` property to allow querying for custom elements in addition to their expected children.
-- An interface for `HTML<ChildComponentItem>Element` must be created in the parent's `interfaces.d.ts` file, where the necessary child APIs must be extracted.
-  **`parent/interfaces.d.ts`**
-  ```ts
-  type ChildComponentLike = Pick<HTMLCalciteChildElement, "required" | "props" | "from" | "parent"> & HTMLElement;
-  ```
-  **`parent/parent.tsx`**
-  ```tsx
-    @Prop() selectedItem: HTMLChildComponentElement | ChildComponentLike;
-  ```
+- An interface for the class (used by custom item classes) and element (used by parent component APIs) must be created in the parent's `interfaces.d.ts` file, where the necessary child APIs must be extracted.
+
+**Example**
+
+**`parent/interfaces.d.ts`**
+
+```ts
+type ChildComponentLike = Pick<Components.CalciteChild, "required" | "props" | "from" | "parent">;
+type ChildComponentLikeElement = ChilcComponentLike & HTMLElement;
+```
+
+**`parent/parent.tsx`**
+
+```tsx
+  @Prop() selectedItem: HTMLChildComponentElement | ChildComponentLikeElement;
+```
+
+**`custom-item/custom-item.tsx`**
+
+```tsx
+export class CustomItem implements ChildComponentLike {
+  private childComponentEl: HTMLChildComponentLikeElement;
+
+  @Prop() required: boolean;
+  @Prop() props: string;
+  @Prop() from: number;
+
+  @Method() async parent(): Promise<string> {
+    await this.childComponentEl.parent();
+  }
+
+  render(): VNode {
+    return (
+      <Host>
+        <child-component
+          required={this.required}
+          props={this.props}
+          from={this.from}
+          ref={(el) => (this.childComponentEl = el)}
+        />
+      </Host>
+    );
+  }
+}
+```
 
 #### Custom child component
 

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.1-next.2",
+  "version": "1.8.0-next.0",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

diff --git a/packages/calcite-components/src/components/flow/interfaces.ts b/packages/calcite-components/src/components/flow/interfaces.ts
@@ -1,7 +1,5 @@
 export type FlowDirection = "advancing" | "retreating";
 
-export type FlowItemLikeElement = Pick<
-  HTMLCalciteFlowItemElement,
-  "beforeBack" | "menuOpen" | "setFocus" | "showBackButton"
-> &
-  HTMLElement;
+export type FlowItemLike = Pick<HTMLCalciteFlowItemElement, "beforeBack" | "menuOpen" | "setFocus" | "showBackButton">;
+
+export type FlowItemLikeElement = FlowItemLike & HTMLElement;
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -58,6 +58,7 @@ import {
 } from "../../utils/loadable";
 import {
   connectLocalized,
+  defaultNumberingSystem,
   disconnectLocalized,
   LocalizedComponent,
   NumberingSystem,
@@ -1002,10 +1003,17 @@ export class InputDatePicker
         )
       : null;
 
+    const formattingOptions = {
+      // we explicitly set numberingSystem to prevent the browser-inferred value
+      // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
+      numberingSystem: defaultNumberingSystem,
+    };
+
     const localizedDate =
-      date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale));
+      date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale, formattingOptions));
     const localizedEndDate =
-      endDate && this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale));
+      endDate &&
+      this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale, formattingOptions));
 
     this.setInputValue(localizedDate ?? "", "start");
     this.setInputValue((this.range && localizedEndDate) ?? "", "end");

diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
+import { html } from "../../../support/formatting";
 
 describe("calcite-list-item", () => {
   describe("renders", () => {
@@ -133,6 +134,42 @@ describe("calcite-list-item", () => {
     expect(eventSpy).toHaveReceivedEventTimes(1);
   });
 
+  it("does not emit calciteListItemSelect on Enter within action slots", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-list-item selection-mode="single" label="hello" description="world" active
+      ><calcite-action
+        appearance="transparent"
+        icon="banana"
+        text="menu"
+        label="menu"
+        slot="filter-actions-start"
+      ></calcite-action>
+      <calcite-action
+        appearance="transparent"
+        icon="sort-ascending"
+        text="menu"
+        label="menu"
+        slot="filter-actions-end"
+      ></calcite-action
+    ></calcite-list-item>`);
+
+    await page.waitForChanges();
+
+    const eventSpy = await page.spyOnEvent("calciteListItemSelect");
+
+    const actionsStart = await page.find(`calcite-list-item >>> .${CSS.actionsStart}`);
+    await actionsStart.focus();
+    await page.keyboard.press("Enter");
+
+    expect(eventSpy).toHaveReceivedEventTimes(0);
+
+    const actionsEnd = await page.find(`calcite-list-item >>> .${CSS.actionsEnd}`);
+    await actionsEnd.focus();
+    await page.keyboard.press("Enter");
+
+    expect(eventSpy).toHaveReceivedEventTimes(0);
+  });
+
   it("emits calciteListItemSelect on click", async () => {
     const page = await newE2EPage({
       html: `<calcite-list-item selection-mode="single" label="hello" description="world"></calcite-list-item>`,

diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -55,7 +55,7 @@ td {
 
 tr:focus,
 td:focus {
-  @apply focus-inset z-sticky;
+  @apply focus-inset;
 }
 
 .content,

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -703,7 +703,11 @@ export class ListItem
     const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
 
-    if (key === "Enter") {
+    if (
+      key === "Enter" &&
+      !composedPath.includes(actionsStartEl) &&
+      !composedPath.includes(actionsEndEl)
+    ) {
       event.preventDefault();
       this.toggleSelected();
     } else if (key === "ArrowRight") {

diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
@@ -13,9 +13,7 @@
   flex
   w-full
   flex-col
-  bg-transparent
-  relative
-  z-default;
+  bg-transparent;
   * {
     @apply box-border;
   }

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -23,7 +23,7 @@ describe("calcite-modal properties", () => {
     const modal = await page.find("calcite-modal");
     modal.setProperty("closeButtonDisabled", true);
     await page.waitForChanges();
-    const closeButton = await page.find("calcite-modal >>> .close");
+    const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
     expect(closeButton).toBe(null);
   });
 
@@ -298,6 +298,55 @@ describe("opening and closing behavior", () => {
     ]);
   });
 
+  it("emits when closing on click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-modal></calcite-modal>`);
+    const modal = await page.find("calcite-modal");
+
+    const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
+    const openSpy = await modal.spyOnEvent("calciteModalOpen");
+    const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
+    const closeSpy = await modal.spyOnEvent("calciteModalClose");
+
+    expect(beforeOpenSpy).toHaveReceivedEventTimes(0);
+    expect(openSpy).toHaveReceivedEventTimes(0);
+    expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
+    expect(closeSpy).toHaveReceivedEventTimes(0);
+
+    expect(await modal.isVisible()).toBe(false);
+
+    const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
+    const modalOpen = page.waitForEvent("calciteModalOpen");
+    modal.setProperty("open", true);
+    await page.waitForChanges();
+
+    await modalBeforeOpen;
+    await modalOpen;
+
+    expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
+    expect(openSpy).toHaveReceivedEventTimes(1);
+    expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
+    expect(closeSpy).toHaveReceivedEventTimes(0);
+
+    expect(await modal.isVisible()).toBe(true);
+
+    const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
+    const modalClose = page.waitForEvent("calciteModalClose");
+    const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
+    await closeButton.click();
+    await page.waitForChanges();
+
+    await modalBeforeClose;
+    await modalClose;
+
+    expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
+    expect(openSpy).toHaveReceivedEventTimes(1);
+    expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
+    expect(closeSpy).toHaveReceivedEventTimes(1);
+
+    expect(await modal.isVisible()).toBe(false);
+  });
+
   it("emits when set to open on initial render", async () => {
     const page = await newProgrammaticE2EPage();
 
@@ -474,7 +523,7 @@ describe("calcite-modal accessibility checks", () => {
     const createModalHTML = (contentHTML?: string, attrs?: string) =>
       `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;
 
-    const closeButtonTargetSelector = ".close";
+    const closeButtonTargetSelector = `.${CSS.close}`;
     const focusableContentTargetClass = "test";
 
     const focusableContentHTML = html`<h3 slot="header">Title</h3>
@@ -543,7 +592,7 @@ describe("calcite-modal accessibility checks", () => {
     modal.setProperty("open", true);
     await page.waitForChanges();
     expect(await modal.isVisible()).toBe(true);
-    const closeButton = await page.find("calcite-modal >>> .close");
+    const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
     await closeButton.click();
     await page.waitForChanges();
     expect(await modal.isVisible()).toBe(false);