fix(dropdown): open dropdown on ArrowDown & ArrowUp keys#10264
fix(dropdown): open dropdown on ArrowDown & ArrowUp keys#10264anveshmekala merged 10 commits intodevfrom
ArrowDown & ArrowUp keys#10264Conversation
ArrowDown & ArrowUp keys
jcfranco
left a comment
There was a problem hiding this comment.
Aside from a few comments, this LGTM!
| private focusOnFirstActiveOrDefaultItem = (focusLastItem: boolean): void => { | ||
| const selectedItem = this.getTraversableItems().find((item) => item.selected); | ||
| if (selectedItem) { | ||
| this.focusDropdownItemElement(selectedItem); |
There was a problem hiding this comment.
Can you DRY up this statement? Something like:
const target = selectedItem || focusLastItem
? this.items[this.items.length - 1]
: this.items[0];
this.focusDropdownItemElement(target);| this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd); | ||
| private toggleOpenEnd = (focusLastItem: boolean): void => { | ||
| this.focusOnFirstActiveOrDefaultItem(focusLastItem); | ||
| this.el.removeEventListener("calciteDropdownOpen", () => this.toggleOpenEnd(focusLastItem)); |
There was a problem hiding this comment.
Sidebar: I think we could remove the explicit event listener add/remove by leveraging the OpenCloseComponent hooks.
There was a problem hiding this comment.
I think we may have to depend on explicit event listener to avoid focusing items when open attribute is changed programmatically.
onOpen(): void {
this.calciteDropdownOpen.emit();
this.focusOnFirstActiveOrDefaultItem();
}
As per above 👆 , when open is toggled without user interaction (programmatically) , onOpen( ) method is triggered and focus shift happens. Is this expected?
There was a problem hiding this comment.
Took a closer look after our conversation yesterday and yes, this is expected. Our open/close events emit for both programmatic and user interaction (https://github.com/Esri/calcite-design-system/pull/7613/files has a draft for guidelines on this).
Does this impact any dropdown workflows? If not, let's proceed. Otherwise, we can restore the explicit event listeners and refactor to use the open/close events in the next release.
|
Commit type-wise, should this be a |
While it seems like new functionality is being added, this is the expected functionality of the component, so would lean towards |
|
|
||
| this.focusLastDropdownItem = false; | ||
|
|
||
| private focusDropdownItemElement(item: HTMLCalciteDropdownItemElement): void { |
There was a problem hiding this comment.
took the liberty and refactored. @jcfranco can i get one more review?
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
jcfranco
left a comment
There was a problem hiding this comment.
☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️
☂️
☂️
☂️
☂️
☂️
☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️
| event.preventDefault(); | ||
| } else if (key === "ArrowDown" || key === "ArrowUp") { | ||
| this.focusLastDropdownItem = key === "ArrowUp"; | ||
| this.open = true; |
There was a problem hiding this comment.
We should cancel the event here too since it's handled.
| }; | ||
|
|
||
| private openCalciteDropdown = () => { | ||
| private clickHandler = (): void => { |
There was a problem hiding this comment.
Can we keep this dedicated click handler and restore the previous openCalciteDropdown (name could be simplified to openDropdown)? That way, other event handlers can call this dedicated open method instead of invoking an event handler for a different event.
There was a problem hiding this comment.
i think clickHandler( ) isn't required and we can use toggleDropdown (instead of openDropdown) method to handle click.
| this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd); | ||
| private toggleOpenEnd = (focusLastItem: boolean): void => { | ||
| this.focusOnFirstActiveOrDefaultItem(focusLastItem); | ||
| this.el.removeEventListener("calciteDropdownOpen", () => this.toggleOpenEnd(focusLastItem)); |
There was a problem hiding this comment.
Took a closer look after our conversation yesterday and yes, this is expected. Our open/close events emit for both programmatic and user interaction (https://github.com/Esri/calcite-design-system/pull/7613/files has a draft for guidelines on this).
Does this impact any dropdown workflows? If not, let's proceed. Otherwise, we can restore the explicit event listeners and refactor to use the open/close events in the next release.
It does add focus to the first or last item in the dropdown group when user programmatically toggles the open. Screenshot test s reported this issue in Will revert back to using |
This seems fine to me, but I could be missing something. In any case, let's revisit this separately. |
…tracking * origin/dev: (40 commits) feat: add parcel parameter (#10384) feat(alert): apply --calcite-alert-corner-radius to internal close button (#10388) feat(dialog, panel): Add css properties for background-color (#10387) fix: remove aria-disabled from components where necessary (#10374) feat(action-group, block, panel): add `menuPlacement` and `menuFlipPlacements` properties (#10249) fix(list, filter): fix sync between list items and filtered data (#10342) feat(popover): apply component tokens to arrow (#10386) feat(list-item): add `unavailable` property (#10377) fix(segmented-control): honor appearance, layout and scale when items are added after initialization (#10368) fix(action-pad): fix horizontal action group alignment (#10359) fix(combobox): selection-mode="single-persist" correctly selects an item when items have same values (#10366) fix(input-time-zone): fix region mode labeling and value mapping (#10345) fix(dropdown): open dropdown on `ArrowDown` & `ArrowUp` keys (#10264) refactor(components): reduce post-migration TypeScript errors (#10356) refactor: do not use Host in functional components (#10352) refactor(tests): reduce TypeScript errors (#10344) feat(alert): add component tokens (#10218) fix(card): properly handle slotted elements (#10378) refactor(panel): remove duplicate tailwind class (#10379) feat(popover, action): add component tokens (#10253) ...
…estone-estimates * origin/dev: (29 commits) fix(input-time-zone): fix region mode labeling and value mapping (#10345) fix(dropdown): open dropdown on `ArrowDown` & `ArrowUp` keys (#10264) refactor(components): reduce post-migration TypeScript errors (#10356) refactor: do not use Host in functional components (#10352) refactor(tests): reduce TypeScript errors (#10344) feat(alert): add component tokens (#10218) fix(card): properly handle slotted elements (#10378) refactor(panel): remove duplicate tailwind class (#10379) feat(popover, action): add component tokens (#10253) chore(t9n): add translations (#10339) feat: add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter (#10373) build: update browserslist db (#10370) ci: resolve husky pre-push and pre-commit errors (#10365) docs: update component READMEs (#10371) feat(text-area): add component tokens (#10343) fix(action): prefer `disabled` in favor of `aria-disabled` (#10367) docs(a11y): add reference to a11y guidance to issue template (#10372) chore(action): add new string for accessible indicator label (#10360) feat(chip): add component tokens (#10179) feat(avatar): add component tokens (#10280) ...
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.32.0</summary> ## [3.32.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@3.31.0...@esri/calcite-ui-icons@3.32.0) (2024-09-30) ### Features * Add 3d building, 3d building parameter, divide, parcel, spaces, spaces parameter, square brackets x, n variable, zoning parameter ([#10373](#10373)) ([3ed86ce](3ed86ce)) * Add content inline right ([#10338](#10338)) ([b4530ab](b4530ab)) * Add dashboard-graph ([#10417](#10417)) ([737085a](737085a)) * Add justify ([#10272](#10272)) ([3d6c013](3d6c013)) * Add model-history, raster-function-history, raster function-template-history, raster-tool-history, tool-history ([#10305](#10305)) ([1e31d43](1e31d43)) * Add parcel parameter ([#10384](#10384)) ([c99be67](c99be67)) * Add trace path and trace path complete ([#10196](#10196)) ([c37ced5](c37ced5)) * Add validate ([#10354](#10354)) ([4160af1](4160af1)) * Add web adaptor ([#10286](#10286)) ([791fd78](791fd78)) * Added connection end left, connection end right, connection middle, connection to connection ([#10198](#10198)) ([3d0f703](3d0f703)) ### Bug Fixes * Correct non-standard filled icon names ([#10309](#10309)) ([7d67334](7d67334)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.1</summary> ## [1.2.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1) (2024-09-30) ### Deprecations * Deprecate `enforce-ref-last-prop` rule ([#10421](#10421)) ([5fde52d](5fde52d)) </details> <details><summary>@esri/calcite-components: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.12.2...@esri/calcite-components@2.13.0) (2024-09-30) ### Features * **accordion-item:** Update component tokens ([ca932b5](ca932b5)) * **action-group, block, panel:** Add `menuPlacement` and `menuFlipPlacements` properties ([#10249](#10249)) ([5ba3112](5ba3112)) * **alert:** Add component tokens ([#10218](#10218)) ([550427b](550427b)) * **alert:** Apply --calcite-alert-corner-radius to internal close button ([#10388](#10388)) ([f50c170](f50c170)) * **avatar:** Add component tokens ([#10280](#10280)) ([f8f881b](f8f881b)) * **carousel:** Improve support for high item counts ([#10315](#10315)) ([6ad2612](6ad2612)) * **checkbox:** Add component tokens ([#10221](#10221)) ([1d87dcf](1d87dcf)) * **chip:** Add component tokens ([#10179](#10179)) ([ff82570](ff82570)) * **dialog, panel:** Add css properties for background-color ([#10387](#10387)) ([d725293](d725293)) * **handle:** Add component tokens ([#10262](#10262)) ([5e73b44](5e73b44)) * **input, input-number, input-text:** Add prefix and suffix width css tokens ([#10206](#10206)) ([7a6ee82](7a6ee82)) * **list-item:** Add `unavailable` property ([#10377](#10377)) ([9332733](9332733)) * **panel:** Improve panel header layout ([#10446](#10446)) ([12f1476](12f1476)) * **popover, action:** Add component tokens ([#10253](#10253)) ([80e8112](80e8112)) * **popover:** Apply component tokens to arrow ([#10386](#10386)) ([2d19268](2d19268)) * **progress:** Add component tokens ([#10267](#10267)) ([8c1259f](8c1259f)) * **text-area:** Add component tokens ([#10343](#10343)) ([d2504b7](d2504b7)) ### Bug Fixes * **action-pad:** Fix horizontal action group alignment ([#10359](#10359)) ([7b03745](7b03745)) * **action-pad:** Update layout on action-group elements slotted after initialization ([#10355](#10355)) ([cf139fa](cf139fa)) * **action:** Prefer `disabled` in favor of `aria-disabled` ([#10367](#10367)) ([1895c07](1895c07)) * **card:** Properly handle slotted elements ([#10378](#10378)) ([99a7148](99a7148)) * **combobox:** Correctly select an item with `selection-mode=‘single-persist’` when items have the same values ([5401ea6](5401ea6)) * **dialog:** Only prevent default on escape key when escapeDisabled is true ([#10336](#10336)) ([0083630](0083630)) * **dropdown:** Open dropdown on `ArrowDown` & `ArrowUp` keys ([#10264](#10264)) ([98548e4](98548e4)) * **input-time-zone:** Fix region mode labeling and value mapping ([#10345](#10345)) ([cf36299](cf36299)) * **input-time-zone:** Fix region mode quirks after update ([#10413](#10413)) ([c137d1f](c137d1f)) * **list, filter:** Fix sync between list items and filtered data ([#10342](#10342)) ([9a66601](9a66601)) * **panel:** Initially closed panel should be hidden ([#10308](#10308)) ([46de96b](46de96b)) * **popover:** Update focus trap elements on mutation observer ([#10357](#10357)) ([725254a](725254a)) * Properly set aria attributes on components ([#10404](#10404)) ([864f3e3](864f3e3)) * Remove aria-disabled from components where necessary ([#10374](#10374)) ([4f8c16c](4f8c16c)) * **segmented-control:** Honor appearance, layout and scale when items are added after initialization ([#10368](#10368)) ([98177f0](98177f0)) * **shell:** Fix z-index of slotted popover elements ([#10325](#10325)) ([7fe1601](7fe1601)) * **text-area:** Ensure border-color token doesn't override invalid styles ([#10390](#10390)) ([699e166](699e166)) * **tooltip:** Closed tooltips should not reappear ([#10420](#10420)) ([a2f3925](a2f3925)) ### Deprecations * **checkbox, radio-button:** Deprecate 'guid' properties ([#10445](#10445)) ([9729ccf](9729ccf)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 3.32.0-next.5 to 3.32.0 * devDependencies * @esri/eslint-plugin-calcite-components bumped from 1.2.1-next.4 to 1.2.1 </details> <details><summary>@esri/calcite-components-angular: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.12.2...@esri/calcite-components-angular@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> <details><summary>@esri/calcite-components-react: 2.13.0</summary> ## [2.13.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.12.2...@esri/calcite-components-react@2.13.0) (2024-09-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 2.13.0-next.15 to 2.13.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Related Issue: #8205
Summary
Open dropdown and focus first item on
ArrowDownOpen dropdown and focus last item on
ArrowUpIf any of the items is
selected, bothArrowDown&ArrowUpkeys focus the selected item.