From e8f6b8e92125ce6e33f4aa27c2b5070c5757ec5f Mon Sep 17 00:00:00 2001 From: Ditwan Price Date: Thu, 30 Nov 2023 11:24:40 -0800 Subject: [PATCH 1/3] docs(shell-panel): remove incorrect information from heightScale prop (#8302) **Related Issue:** #8286 ## Summary Updated the description of the `heightScale` property for `Shell Panel` to correctly reflect the actual behavior. --- .../src/components/shell-panel/shell-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index eb7bf702911..78ea62833f0 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -87,7 +87,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } /** - * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. + * When `layout` is `horizontal`, specifies the maximum height of the component. */ @Prop({ reflect: true }) heightScale: Scale; From 79538be47f87bf3e35d602a492bcb35bd8462df3 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 30 Nov 2023 11:58:45 -0800 Subject: [PATCH 2/3] feat(list): support multiple selection using the shift key (#8301) **Related Issue:** #7966 ## Summary - support multiple selection using the shift key - updates `calciteListItemSelect` event detail to specify if multiple selection should occur by adding a `selectMultiple` property that is true when the shiftKey is pressed. - stores the last clicked element to reference for selecting items in-between the next potential shift click. - disables text selection on list content - add e2e test --- .../src/components/list-item/list-item.scss | 2 + .../src/components/list-item/list-item.tsx | 20 ++++-- .../src/components/list/list.e2e.ts | 72 +++++++++++++++++++ .../src/components/list/list.tsx | 31 ++++++++ 4 files changed, 121 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss index 58093cc0436..ea5a8172f48 100755 --- a/packages/calcite-components/src/components/list-item/list-item.scss +++ b/packages/calcite-components/src/components/list-item/list-item.scss @@ -18,6 +18,7 @@ var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier) ); } + .container:hover { @apply bg-foreground-2 cursor-pointer; } @@ -44,6 +45,7 @@ .content-container { @apply text-color-2 + select-none flex flex-auto font-sans diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 70bc650f05c..173a51f9697 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -238,6 +238,15 @@ export class ListItem */ @Event({ cancelable: false }) calciteInternalListItemSelect: EventEmitter; + /** + * + * @internal + */ + @Event({ cancelable: false }) + calciteInternalListItemSelectMultiple: EventEmitter<{ + selectMultiple: boolean; + }>; + /** * * @internal @@ -724,16 +733,16 @@ export class ListItem this.open = !this.open; }; - itemClicked = (event: Event): void => { + itemClicked = (event: PointerEvent): void => { if (event.defaultPrevented) { return; } - this.toggleSelected(); + this.toggleSelected(event.shiftKey); this.calciteInternalListItemActive.emit(); }; - toggleSelected = (): void => { + toggleSelected = (shiftKey: boolean): void => { const { selectionMode, selected } = this; if (this.disabled) { @@ -746,6 +755,9 @@ export class ListItem this.selected = true; } + this.calciteInternalListItemSelectMultiple.emit({ + selectMultiple: shiftKey && selectionMode === "multiple", + }); this.calciteListItemSelect.emit(); }; @@ -767,7 +779,7 @@ export class ListItem !composedPath.includes(actionsEndEl) ) { event.preventDefault(); - this.toggleSelected(); + this.toggleSelected(event.shiftKey); } else if (key === "ArrowRight") { event.preventDefault(); const nextIndex = currentIndex + 1; diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 2a581e52dfc..27c6c6e9512 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -252,6 +252,78 @@ describe("calcite-list", () => { expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]); }); + it("should support shift click to select multiple items", async () => { + const clickItemContent = (item: HTMLCalciteListItemElement, selector: string) => { + item.shadowRoot.querySelector(selector).dispatchEvent(new MouseEvent("click", { bubbles: true, shiftKey: true })); + }; + + const page = await newE2EPage(); + await page.setContent(html` + + + + + `); + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + + const list = await page.find("calcite-list"); + const items = await page.findAll("calcite-list-item"); + + expect(await items[0].getProperty("selected")).toBe(false); + expect(await items[1].getProperty("selected")).toBe(false); + expect(await items[2].getProperty("selected")).toBe(false); + expect(await items[3].getProperty("selected")).toBe(false); + + const eventSpy = await list.spyOnEvent("calciteListChange"); + + await items[0].click(); + + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(eventSpy).toHaveReceivedEventTimes(1); + expect(await list.getProperty("selectedItems")).toHaveLength(1); + + expect(await items[0].getProperty("selected")).toBe(true); + expect(await items[1].getProperty("selected")).toBe(false); + expect(await items[2].getProperty("selected")).toBe(false); + expect(await items[3].getProperty("selected")).toBe(false); + + await page.$eval("#item-4", clickItemContent, `.${CSS.contentContainer}`); + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(eventSpy).toHaveReceivedEventTimes(2); + expect(await list.getProperty("selectedItems")).toHaveLength(4); + + expect(await items[0].getProperty("selected")).toBe(true); + expect(await items[1].getProperty("selected")).toBe(true); + expect(await items[2].getProperty("selected")).toBe(true); + expect(await items[3].getProperty("selected")).toBe(true); + + await items[3].click(); + + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(eventSpy).toHaveReceivedEventTimes(3); + expect(await list.getProperty("selectedItems")).toHaveLength(3); + + expect(await items[0].getProperty("selected")).toBe(true); + expect(await items[1].getProperty("selected")).toBe(true); + expect(await items[2].getProperty("selected")).toBe(true); + expect(await items[3].getProperty("selected")).toBe(false); + + await page.$eval("#item-1", clickItemContent, `.${CSS.contentContainer}`); + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(eventSpy).toHaveReceivedEventTimes(4); + expect(await list.getProperty("selectedItems")).toHaveLength(0); + + expect(await items[0].getProperty("selected")).toBe(false); + expect(await items[1].getProperty("selected")).toBe(false); + expect(await items[2].getProperty("selected")).toBe(false); + expect(await items[3].getProperty("selected")).toBe(false); + }); + it("should update active item on init and click", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 84d6770a392..bf77ab22f67 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -309,6 +309,35 @@ export class List this.updateSelectedItems(); } + @Listen("calciteInternalListItemSelectMultiple") + handleCalciteInternalListItemSelectMultiple( + event: CustomEvent<{ + selectMultiple: boolean; + }> + ): void { + if (!!this.parentListEl) { + return; + } + + event.stopPropagation(); + const { target, detail } = event; + const { enabledListItems, lastSelectedInfo } = this; + const selectedItem = target as HTMLCalciteListItemElement; + + if (detail.selectMultiple && !!lastSelectedInfo) { + const currentIndex = enabledListItems.indexOf(selectedItem); + const lastSelectedIndex = enabledListItems.indexOf(lastSelectedInfo.selectedItem); + const startIndex = Math.min(lastSelectedIndex, currentIndex); + const endIndex = Math.max(lastSelectedIndex, currentIndex); + + enabledListItems + .slice(startIndex, endIndex + 1) + .forEach((item) => (item.selected = lastSelectedInfo.selected)); + } else { + this.lastSelectedInfo = { selectedItem, selected: selectedItem.selected }; + } + } + @Listen("calciteInternalListItemChange") handleCalciteInternalListItemChange(event: CustomEvent): void { if (!!this.parentListEl) { @@ -410,6 +439,8 @@ export class List private ancestorOfFirstFilteredItem: HTMLCalciteListItemElement; + private lastSelectedInfo: { selectedItem: HTMLCalciteListItemElement; selected: boolean }; + // -------------------------------------------------------------------------- // // Public Methods From aacca51966fb33c288fc178d3b7b12a02cbf8d76 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 30 Nov 2023 20:17:54 +0000 Subject: [PATCH 3/3] chore: release next --- package-lock.json | 14 +++++++------- .../projects/component-library/CHANGELOG.md | 4 ++++ .../projects/component-library/package.json | 4 ++-- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 6 ++++++ packages/calcite-components/package.json | 2 +- 7 files changed, 26 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 864811e84f4..4a96245bebf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45525,7 +45525,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.12.0-next.3", + "version": "1.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.5.3", @@ -49404,10 +49404,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "1.12.0-next.3", + "version": "1.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.12.0-next.3", + "@esri/calcite-components": "^1.12.0-next.4", "tslib": "2.3.0" }, "peerDependencies": { @@ -49417,10 +49417,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.12.0-next.3", + "version": "1.12.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.12.0-next.3" + "@esri/calcite-components": "^1.12.0-next.4" }, "peerDependencies": { "react": ">=16.7", @@ -52294,14 +52294,14 @@ "@esri/calcite-components-angular": { "version": "file:packages/calcite-components-angular/projects/component-library", "requires": { - "@esri/calcite-components": "^1.12.0-next.3", + "@esri/calcite-components": "^1.12.0-next.4", "tslib": "2.3.0" } }, "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.12.0-next.3" + "@esri/calcite-components": "^1.12.0-next.4" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 833de91a674..7fb302ffeec 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/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.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.12.0-next.3...@esri/calcite-components-angular@1.12.0-next.4) (2023-11-30) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [1.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.12.0-next.2...@esri/calcite-components-angular@1.12.0-next.3) (2023-11-30) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index d74ca36390a..2b412e1a5ba 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "1.12.0-next.3", + "version": "1.12.0-next.4", "sideEffects": false, "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of Angular components that wrap Esri's Calcite Components.", @@ -20,7 +20,7 @@ "@angular/core": ">=16.0.0" }, "dependencies": { - "@esri/calcite-components": "^1.12.0-next.3", + "@esri/calcite-components": "^1.12.0-next.4", "tslib": "2.3.0" }, "lerna": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index fa9c956919a..78a1ee2c3b5 100644 --- 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.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.12.0-next.3...@esri/calcite-components-react@1.12.0-next.4) (2023-11-30) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.12.0-next.2...@esri/calcite-components-react@1.12.0-next.3) (2023-11-30) **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 index ccfb7ab4032..aed3e31ab23 100644 --- 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.12.0-next.3", + "version": "1.12.0-next.4", "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.12.0-next.3" + "@esri/calcite-components": "^1.12.0-next.4" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index ef5690e0a52..fef48a5063d 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.12.0-next.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.12.0-next.3...@esri/calcite-components@1.12.0-next.4) (2023-11-30) + +### Features + +- **list:** support multiple selection using the shift key ([#8301](https://github.com/Esri/calcite-design-system/issues/8301)) ([79538be](https://github.com/Esri/calcite-design-system/commit/79538be47f87bf3e35d602a492bcb35bd8462df3)), closes [#7966](https://github.com/Esri/calcite-design-system/issues/7966) + ## [1.12.0-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.12.0-next.2...@esri/calcite-components@1.12.0-next.3) (2023-11-30) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index cee7c355829..3f8c3c07fa7 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.12.0-next.3", + "version": "1.12.0-next.4", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js",