feat: add focus options support by jcfranco · Pull Request #12555 · Esri/calcite-design-system

jcfranco · 2025-07-22T06:31:22Z

Related Issue: #9992

Summary

This allows users to pass FocusOptions to setFocus across all focusable components.

Noteworthy changes

Updates simplePageSetup content setting for consistency and to fix timing issues in failing test
Adds boilerplate JSDoc to public API
Updates example snippet to avoid using outdated setFocus pattern
Updates describe group names to use "focusable" (per util JSDoc example)
Expands focusable test coverage across components
Adds spec tests for focusFirstTabbable

driskull

☝️ Good stuff 🎉 🥳

driskull · 2025-07-23T15:50:31Z

+  /**
+   * Sets focus on the component.
+   *
+   * @param options - Enables customization of focus behavior.


Maybe we should align this text with the mozilla definition?

An optional object for controlling aspects of the focusing process?

We do have doc on native-matching props with slightly different wording (example). I'm good with either approach, so I'll defer to @geospatialem, @DitwanP, and @isaacbraun.

Can defer to others on the language as well, but wondering if we need more context than the above and Mozilla?

What would folks think about something like:

When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.

geospatialem

Awesome @jcfranco!! ⭐🚀⭐

Working great across a few components tested 🥇

geospatialem · 2025-07-23T17:13:57Z

+  /**
+   * Sets focus on the component.
+   *
+   * @param options - Enables customization of focus behavior.


Can defer to others on the language as well, but wondering if we need more context than the above and Mozilla?

What would folks think about something like:

When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.

jcfranco · 2025-07-23T17:59:14Z

Updated the doc as suggested. LMK if additional changes are needed.

isaacbraun · 2025-07-23T20:42:22Z

   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
   * });
-   * @param options - allows specific coordinates to be defined.
+   * @param options


Was this description removed intentionally on autocomplete and dialog, but not on flow-item and panel?

Unintentional. 😅 Will fix. Thanks for the catch!

isaacbraun · 2025-07-23T20:45:29Z

+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.


Just some nitpicks/ideas. Maybe a comma after "specified", and I think we can communicate the scroll behavior a bit better (and more in line with MDN). Not needed if everyone else thinks the current wording is good. Something more like:

When specified, an optional object customizes the component's focusing process. When `preventScroll` is `true`, the browser will not scroll the component into view.

Good suggestion.

One downside worth mentioning is that as options are updated, we'll need to update our doc as well (e.g., upcoming focusVisible). cc @geospatialem

@jcfranco Would we support focusVisible in the future? That seems like it would go against our initiative to always display the focus?

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> ## [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) ### Features * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) ### Bug Fixes * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> ## [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) ### Bug Fixes * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> ## [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) ### Features * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) ### Bug Fixes * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> ## [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) ### Features * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) ### Bug Fixes * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Deprecations * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.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: Ben Elan <no-reply@benelan.dev>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.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: Ben Elan <no-reply@benelan.dev>

jcfranco added the skip visual snapshots Pull requests that do not need visual regression testing. label Jul 22, 2025

jcfranco mentioned this pull request Jul 22, 2025

refactor: add useSetFocus controller #11943

Merged

Base automatically changed from jcfranco/add-setFocus-controller to dev July 22, 2025 19:53

jcfranco added 6 commits July 22, 2025 13:02

feat: add focus options support

48cff1e

update focusable test helper

c806c8a

update useSetFocus test

74fc1df

update dom util tests

e7b7573

tidy up

7c04f98

tidy up focus types

6cbb194

jcfranco force-pushed the jcfranco/9992-add-focus-options-support branch from 95c67e1 to 9e42e1b Compare July 22, 2025 20:49

github-actions Bot assigned jcfranco Jul 22, 2025

github-actions Bot added the enhancement Issues tied to a new feature or request. label Jul 22, 2025

jcfranco added 2 commits July 22, 2025 20:52

improve focusable test coverage

af9a62c

update focusable to assert on test-scoped focus options

74f3aa3

jcfranco force-pushed the jcfranco/9992-add-focus-options-support branch from 9e42e1b to b43a205 Compare July 23, 2025 04:00

ensure tests are set up consistently

7b7f26c

jcfranco force-pushed the jcfranco/9992-add-focus-options-support branch from b43a205 to 8f70f90 Compare July 23, 2025 07:19

jcfranco added 3 commits July 23, 2025 00:34

add doc for options

d61e745

roll back a11y test group cleanup

8669b83

tidy up

f68c9de

jcfranco force-pushed the jcfranco/9992-add-focus-options-support branch from 8f70f90 to f68c9de Compare July 23, 2025 07:35

roll back unintentional doc update

34533a7

jcfranco marked this pull request as ready for review July 23, 2025 07:45

jcfranco requested review from DitwanP, driskull, eriklharper, geospatialem, isaacbraun and macandcheese July 23, 2025 07:45

driskull approved these changes Jul 23, 2025

View reviewed changes

geospatialem approved these changes Jul 23, 2025

View reviewed changes

update doc

49aa5a4

jcfranco merged commit 3111a34 into dev Jul 23, 2025
10 checks passed

jcfranco deleted the jcfranco/9992-add-focus-options-support branch July 23, 2025 20:37

github-actions Bot added this to the 2025-07-29 - Jul Milestone milestone Jul 23, 2025

isaacbraun reviewed Jul 23, 2025

View reviewed changes

jcfranco mentioned this pull request Jul 23, 2025

docs: restore unintentionally removed options param doc for scrollContentTo #12567

Merged

benelan pushed a commit that referenced this pull request Sep 16, 2025

feat: add focus options support (#12555)

58148cc

calcite-admin mentioned this pull request Sep 16, 2025

chore: release main #12887

Merged

benelan mentioned this pull request Sep 18, 2025

chore: release main (#12887) #12912

Merged

DintaMel mentioned this pull request Oct 27, 2025

[popover] test failure #13207

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add focus options support#12555

feat: add focus options support#12555
jcfranco merged 14 commits intodevfrom
jcfranco/9992-add-focus-options-support

jcfranco commented Jul 22, 2025 •

edited

Loading

Uh oh!

driskull left a comment

Uh oh!

driskull Jul 23, 2025

Uh oh!

jcfranco Jul 23, 2025

Uh oh!

geospatialem Jul 23, 2025

Uh oh!

geospatialem left a comment

Uh oh!

geospatialem Jul 23, 2025

Uh oh!

jcfranco commented Jul 23, 2025

Uh oh!

Uh oh!

isaacbraun Jul 23, 2025

Uh oh!

jcfranco Jul 23, 2025

Uh oh!

isaacbraun Jul 23, 2025 •

edited

Loading

Uh oh!

jcfranco Jul 23, 2025

Uh oh!

geospatialem Jul 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

jcfranco commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Noteworthy changes

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geospatialem left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco commented Jul 23, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

isaacbraun Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jcfranco commented Jul 22, 2025 •

edited

Loading

isaacbraun Jul 23, 2025 •

edited

Loading