-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(dropdown): open dropdown on ArrowDown
& ArrowUp
keys
#10264
Conversation
ArrowDown
& ArrowUp
keys
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aside from a few comments, this LGTM!
packages/calcite-components/src/components/dropdown/dropdown.tsx
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/dropdown/dropdown.tsx
Outdated
Show resolved
Hide resolved
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sidebar: I think we could remove the explicit event listener add/remove by leveraging the OpenCloseComponent
hooks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
|
||
private focusDropdownItemElement(item: HTMLCalciteDropdownItemElement): void { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️
☂️
☂️
☂️
☂️
☂️
☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️☂️
event.preventDefault(); | ||
} else if (key === "ArrowDown" || key === "ArrowUp") { | ||
this.focusLastDropdownItem = key === "ArrowUp"; | ||
this.open = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should cancel the event here too since it's handled.
}; | ||
|
||
private openCalciteDropdown = () => { | ||
private clickHandler = (): void => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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/[email protected]...@esri/[email protected]) (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
ArrowDown
Open dropdown and focus last item on
ArrowUp
If any of the items is
selected
, bothArrowDown
&ArrowUp
keys focus the selected item.