May 2023 Summary

Updates since 1.0.3

New components

Calcite has added new components to enhance and support your UI, which include:

• Navigation and Menu
• Text Area
• Chip Group

Navigation and Menu

Navigation and related components Navigation User and Navigation Logo provide a consistent structure and behavior for users to reliably and consistently navigation your application. Using Navigation with Navigation Logo, and where applicable, Navigation User, can ensure your experiences are consistent and understandable. Navigation can also be useful for containing a Menu and Menu Items.

The Menu and Menu Item components provide a consistent menu structure allowing your users to access and navigate pages, routes, or functionality within your application and experience. They are most often slotted into a Navigation component, but can also be placed in other layout components, such as Shell Panel, Panel, and Flow.

1
2
3
4
5
6
7
8
9
10
11
12
<calcite-navigation>
  <calcite-navigation-logo slot="logo" heading="Walt's Chips"></calcite-navigation-logo>
  <calcite-menu slot="content-start" layout="horizontal">
    <calcite-menu-item icon-end="information" text="About" active></calcite-menu-item>
    <calcite-menu-item icon-end="gallery" text="Gallery"></calcite-menu-item>
    <calcite-menu-item icon-end="map" text="Map"></calcite-menu-item>
  </calcite-menu>
  <calcite-menu slot="content-end" layout="horizontal">
    <calcite-menu-item icon-start="phone" text="Contact"></calcite-menu-item>
  </calcite-menu>
  <calcite-navigation-user slot="user" full-name="John Muir"></calcite-navigation-user>
</calcite-navigation>

Text Area

Text Area is a multiple line text input control, which allows users to enter a sizable amount of content in free form text. The component can collect user inputs, such as comments or reviews in forms.

Text Area also supports a specified maximum number of characters with the maxLength property, includes a default (unamed) slot and two footer slots, footer-start and footer-end.

1
2
3
<calcite-text-area name="feedback-calcite" max-length="50" placeholder="Provide your feedback">
  <calcite-button slot="footer-start">Spell check</calcite-button>
</calcite-text-area>

Chip Group

Chip Group provides consistent spacing, accessible keyboard navigation, and selection modes with the selectionMode property to multiple Chips. Use includes selection workflows, filtering patterns, and toggling of categorical data.

1
2
3
4
5
6
7
<calcite-chip-group label="Park regions" selection-mode="multiple">
  <calcite-chip value="national">National</calcite-chip>
  <calcite-chip value="state">State</calcite-chip>
  <calcite-chip value="regional">Regional</calcite-chip>
  <calcite-chip value="county">County</calcite-chip>
  <calcite-chip value="local">Local</calcite-chip>
</calcite-chip-group>

Theming

Calcite includes new workflows to support your UI and brand, which include:

• Focus color and offset variables
• Component sample themes

Focus color and offset variables

Support your workflow using two global CSS variables, also available on individual components, --calcite-ui-focus-color and --calcite-ui-focus-offset-invert. You can alter the focus color from the --calcite-ui-brand color and offset the focus outline inset to 1 (default is 0).

1
2
3
4
5
6
#transportation-chip-group {
  --calcite-ui-focus-offset-invert: 1;
}
#plane-chip {
  --calcite-ui-focus-color: #C66A4A;
}

Component sample themes

Sample themes are now available for light and dark modes in each sample's "Theming" section, such as List.

Component functionality

Enhancements to support component functionality are now available, which include:

• Color Picker transparency
• List single persist selection
• List change event
• List Items close button
• Tab Title close button
• Modal sticky slots
• Input files support

Color Picker transparency

Color Picker can be configured to include an alpha channel to handle transparency. The alpha channel can be enabled using the alphaChannel property.

1
<calcite-color-picker alpha-channel></calcite-color-picker>

List single persist selection

List includes a selectionMode of "single-persist", which allows one selected item and prevents de-selection.

1
2
3
4
5
6
7
8
<calcite-list selection-mode="single-persist">
    <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
    </calcite-list-item>
    <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
    </calcite-list-item>
    <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
    </calcite-list-item>
</calcite-list>

List change event

List has a calciteListChange event, which listens for selection changes to the component to access the selectedItems property.

1
2
3
4
5
6
7
const listElem = document.querySelector("calcite-list");

listElem.addEventListener("calciteListChange", () => {
  listElem.selectedItems.forEach(selectedItem => {
    console.log(selectedItem.value);
  })
});

List Items close button

List Items support close buttons with the closable property, similar to the deprecated Pick List Item removable property.

1
2
3
4
5
6
7
8
9
10
<calcite-list filter-enabled>
  <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails" closable>
  </calcite-list-item>
  <calcite-list-item label="Waterfalls" description="Vertical drops from a river." closable value="waterfalls">
  </calcite-list-item>
  <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." closable value="rivers">
  </calcite-list-item>
  <calcite-list-item label="Estuaries" description="Where the river meets the sea." closable value="estuaries">
  </calcite-list-item>
</calcite-list>

Tab Title close button

Tab Title supports close buttons with the closable property, and individual items can be closed with the closed property.

A new event, calciteTabsClose, fires when a Tab is closed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<calcite-tabs>
  <calcite-tab-nav slot="title-group">
    <calcite-tab-title selected closable tab="watercraft">Watercraft</calcite-tab-title>
    <calcite-tab-title closable tab="automobiles">Automobiles</calcite-tab-title>
    <calcite-tab-title closable tab="aircrafts">Aircrafts</calcite-tab-title>
  </calcite-tab-nav>
  <calcite-tab selected>
    <calcite-notice icon="embark" open>
      <div slot="message">Recommended for coastal use</div>
    </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="car" open>
      <div slot="message">A good choice for inland adventure</div>
      </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="plane" open>
      <div slot="message">Cross continents quickly</div>
      </calcite-notice>
      </calcite-tab>
</calcite-tabs>

<script>
const tabNav = document.querySelector("calcite-tab-nav");
tabNav.addEventListener("calciteTabsClose", (evt) => {
  console.log(evt.target.tab);
});
</script>

Modal sticky slots

Modal includes two slots, content-top and content-bottom, which will retain, or stick, content to the component's header or footer when scrolling up and down.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<calcite-modal aria-labelledby="modal-title" id="example-modal">
    <div slot="header" id="modal-title">
      Read the terms
    </div>
    <div slot="content-top">Scroll to accept the terms</div>
    <calcite-label slot="content-bottom" layout="inline-space-between">
      <calcite-checkbox></calcite-checkbox>I agree to the terms
    </calcite-label>
    <div slot="content">
      <p>Add a large amount of content for scrolling here.</p>
    </div>
    <calcite-button slot="primary" width="full">
      I'm done
    </calcite-button>
</calcite-modal>

Input files support

When Input's type is "file", the files property specifies the component's selected files.

1
2
3
4
5
6
7
const fileInput = document.querySelector("calcite-input");
const submitBtn = document.querySelector(".submit-button");
submitBtn.addEventListener("click", () => {
  for (const file of fileInput.files) {
    console.log(`${file.name}`);
  }
});

Layout improvements

Layout improvements have been added to Panel, Shell, and Shell Panel to support your UI and apps, which include:

• Action Group layout inheritance
• Flow Item and Panel action bar
• Flow Item and Panel footer
• Shell slots
• Resize Shell Panel and CSS variables
• Shell Panel display mode

Action Group layout inheritance

Action Group inherits layout from its parent Action Bar or Action Pad. The inheritance change deprecates the Action Group's layout property.

1
2
3
4
5
6
7
8
9
10
11
<calcite-action-bar layout="horizontal">
  <calcite-action-group>
    <calcite-action text="Add" icon="plus"></calcite-action>
    <calcite-action text="Layers" icon="layers"></calcite-action>
  </calcite-action-group>
  <calcite-action-group>
    <calcite-action text="Undo" icon="undo"></calcite-action>
    <calcite-action text="Redo" icon="redo"></calcite-action>
    <calcite-action text="Save" icon="save"></calcite-action>
  </calcite-action-group>
</calcite-action-bar>

Flow Item and Panel action bar

Add an Action Bar to Panel with the action-bar slot.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Flow Item action-bar slot -->
  <calcite-shell>
    <calcite-shell-panel slot="panel-start" width-scale="l">
      <calcite-flow id="example-flow">
        <calcite-flow-item heading="Map Layers">
          <calcite-action-bar slot="action-bar" expand-disabled>
            <calcite-action-group>
              <calcite-action text="Save" icon="save"></calcite-action>
            </calcite-action-group>
            <calcite-action-group>
              <calcite-action text="Undo" icon="undo"></calcite-action>
              <calcite-action text="Redo" icon="redo"></calcite-action>
            </calcite-action-group>
          </calcite-action-bar>
        </calcite-flow-item>
      </calcite-flow>
    </calcite-shell-panel>
  </calcite-shell>

<!-- Panel action-bar slot -->
<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Map Options">
      <calcite-action-bar slot="action-bar" expand-disabled>
        <calcite-action-group>
          <calcite-action text="Save" icon="save"></calcite-action>
        </calcite-action-group>
        <calcite-action-group>
          <calcite-action text="Undo" icon="undo"></calcite-action>
          <calcite-action text="Redo" icon="redo"></calcite-action>
        </calcite-action-group>
      </calcite-action-bar>
    </calcite-panel>
  </calcite-shell-panel>
</calcite-shell>

Flow Item and Panel footer

A CSS variable is available to specify the padding of the Flow Item and Panel components with --calcite-flow-item-footer-padding and --calcite-panel-footer-padding. The update deprecates the footer-actions slot for both components; use the footer slot instead.

1
2
3
4
5
6
7
8
9
/* Flow Item footer padding */
calcite-flow-item {
  --calcite-flow-item-footer-padding: 0;
}

/* Panel footer padding */
calcite-panel {
  --calcite-panel-footer-padding: 0;
}

Shell slots

Shell supports alerts, modals, panel-top and panel-bottom slots. Deprecates the center-row slot, use panel-bottom instead.

Resize Shell Panel and CSS variables

Shell Panel's "top" and "bottom" slots now support resizing with the resizable property. There are also CSS variables to support your UI, including:

• --calcite-shell-panel-detached-max-height,
• --calcite-shell-panel-height,
• --calcite-shell-panel-max-height,
• --calcite-shell-panel-max-width,
• --calcite-shell-panel-min-height,
• --calcite-shell-panel-min-width,
• --calcite-shell-panel-width, and
• --calcite-shell-panel-z-index

Shell Panel display mode

Shell Panel now offers a displayMode property, which specifies the component's display in your UI, where:

• "dock" (default): Displays at full height, adjacent to center content.
• "float": Displays without full height and content is seperate and detached from the Action Bar. Content is positioned on top of center content.
• "overlay": Displays at full height, content is positioned on top of center content.

The new offering deprecates the detached and detachedHeightScale properties; use the respective displayMode and heightScale properties instead. Additionally, deprecates the --calcite-shell-panel-detached-max-height CSS variable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<calcite-shell>
  <calcite-shell-panel slot="panel-start" position="start" display-mode="overlay">
    <calcite-action-bar slot="action-bar">
      <calcite-action-group>
        <calcite-action active text="Add" icon="plus"></calcite-action>
        <calcite-action text="Undo" icon="undo"></calcite-action>
        <calcite-action text="Redo" icon="redo"></calcite-action>
        <calcite-action text="Save" disabled icon="save"></calcite-action>
      </calcite-action-group>
      <calcite-action-group slot="bottom-actions">
        <calcite-action text="Settings" indicator icon="gear"></calcite-action>
      </calcite-action-group>
    </calcite-action-bar>
    <calcite-panel heading="Layer effects">
    </calcite-panel>
  </calcite-shell-panel>
  <calcite-panel heading="Map">
    <div id="viewDiv"></div>
  </calcite-panel>
</calcite-shell>

Accessibility

Calcite continues to ensure the applications and experiences you create are usable by a wide range of audiences leveraging the W3C Accessibility Standards. Since January Calcite has added additional accessibility enhancements and resources to support you in developing web applications, which include:

• Conformance report
• Picker functionality and focus trap support
• Avatar assistive technology support

Conformance report

Calcite's conformance report is now available and includes support on the US Access Board (Section 508), Web Content Accessibility Guidelines (WCAG), and current format of the Voluntary Product Accessibility Template (VPAT®).

Picker functionality and focus trap support

Input Date Picker and Input Time Picker support focus trapping and allow toggling the Date Picker and Time Picker component respectivelly when clicking the input or selecting the "Arrow down" key to open, or "Esc" key to close the component dialog.

Avatar assistive technology support

Avatar specifies context to assistive technologies (AT) where the component will be provided additional context to AT with the label property. For non-images, the fullName value will provide context to AT, unless a label value is specified.

1
<calcite-avatar label="A bear" full-name="A bear" thumbnail="https://placebear.com/40/40"></calcite-avatar>

setFocus method

The setFocus() method, which sets focus on the component's first focusable element, is now supported in the Action Group, Date Picker, Dropdown, Pagination, and Split Button components.

1
customElements.whenDefined("calcite-split-button").then(() => document.querySelector("calcite-split-button").setFocus());

Localization

Calcite continues to support localization, meaning the UI content can be adapted to a specific language and culuture. Since January Calcite's localization support includes:

• German - Austria language
• Block handle

German - Austria language

German - Austria (de-AT) is a new Calcite supported language, which includes locale support to the Date Picker component. For instance, January displays as "Jänner" when specifying the locale.

1
<calcite-date-picker lang="de-at"></calcite-date-picker>

Block handle

Block's movable handle now includes string translations for Calcite's supported languages.

Changes since January 2023

A full list of changes since January, include:

• Features
• Bug fixes

Features

• tailwind to use calcite-design-tokens instead of calcite-colors (#6884) (28d6e92)

• add global CSS props for focus offset and color (#6782) (fbe7b20), closes #3392

• allow disabled elements to emit pointer events without triggering activation (#6732) (c151025), closes #5318

• make getAssetPath available in output targets (#6755) (f915aa1), closes #6696

• support setting form ID on form components (#6682) (1a4041d), closes #5164

• styles: Add additional animation classes (#6928) (7b2b62e)

• action-bar, action-pad: Set layout property on child action-group elements. (#6739) (8eefa12), closes #6390

• action-group, date-picker, dropdown, pagination, split-button: add setFocus method (#6438) (a93a85f), closes #5147

• list, list-item: Adds the ability to close a list-item (#6775) (66171ab), closes #6555

• menu, menu-item: Adds menu & menu-item components. (#6901) (0990bf6), closes #6531

• navigation, navigation-logo, navigation-user: Add navigation, navigation-logo & navigation-user components. (#6873) (167f9f8), closes #6531

• panel, flow-item: Add CSS custom property to define footer padding and deprecate "footer-actions" slot. (#6906) (cfa5689), closes #6892

• action-bar: Improve border display in horizontal layout (#6888) (62e4665), closes #6758

• avatar: add label prop for alternative text & aria-label (#6910) (e8d78e7), closes #5564

• block: add built-in localization (#6503) (5e5a7ab), closes #6248

• chip-group: Add Chip Group component (#6075) (77dec87), closes #1933

• color-picker: add support for alpha channel (deprecates hideChannels, hideHex, hideSaved) (#2841) (83c5808), closes #749

• date-picker: add support for de-AT locale (#6788) (be3a8b2), closes #6737

• flow-item: Add action bar slot (#6887) (aa8b46c), closes #6886

• input: add files property (#6277) (4aff028), closes #5890

• input-date-picker:

  • add focus trap support (#6816) (0d9ddc9), closes #6668

  • allow toggling date picker by clicking the input or entering the down/escape key (#6805) (233c22b), closes #6773

• input-time-picker:

  • add focus trap support (#6834) (8c748f3)

  • allow toggling time picker by clicking the input or entering the down/escape key (#6832) (4639d89), closes #6830

• list:

  • adds calciteListChange event to get selectedItems. (#6894) (37959ce), closes #6362

  • Add single-persist selection mode (#6882) (dc332cb), closes #6382

• modal: adds content-top and content-bottom slots (#6490) (4a511ba), closes #4800

• panel: Add slot for an action-bar component. (#6738) (b57733b), closes #6448

• shell: Add panel-top slot (#6730) (62fb8a2), closes #6389 #6449

• shell-panel:

  • Place Action Bar in correct location when used in top / bottom Shell slots (#6761) (6791f67), closes #6447

  • Add displayMode and heightScale properties and deprecate detached and detachedHeightScale (#6919) (c34d2b8), closes #6388

• stack: Adds new Stack component to arrange content and actions (#6903) (bbced3a), closes #6743 #5664

• tab-nav: adds optional closable functionality to individual tab-titles (#6740) (d30792d), closes #2620

• text-area: adds new calcite-text-area component (#5644) (1a1528b), closes #863

Bug fixes

• apply offsetParent polyfill for Chrome 109+ (#6520) (ba8c068), closes #6300

• fix inheritance of default focus-color value (#6859) (22b4c7a), closes #6857

• deps: move composed-offset-position to dependencies (#6895) (747e471), closes #6875

• restore form control validation in Safari (#6623) (b293077), closes #6626

• vite: getting the dist build to work correctly with vite again (#6452) (cc44984), closes #6419

• accordion, accordion-item: now wraps long words in header (title & description) (#6608) (46575ff), closes #5683

• alert, combobox, dropdown, input-date-picker, popover, tooltip: prefers-reduced-motion no longer prevents open/close components from emitting before + open/close events (#6605) (dfcaa22), closes #6582

• combobox, dropdown, input-date-picker, popover, tooltip: fix misplaced floating-ui elements when associated-components are closed (#6709) (e220686), closes #6404

• combobox, select, slider: display label in screen reader instructions. (#6500) (3a7f112), closes #5627

• filter, list: filter properly on initialization (#6551) (b7782aa), closes #6523

• inline-editable, input-message, input-number, input-text, input: prevent components from unintentionally picking up a different scale/status value from an ancestor (#6506) (e27f4b3), closes #6494

• input, input-number: increment/decrement unsafe numbers without loss of precision (#6580) (40c0f0f), closes #5920

• input, input-number, input-text: emit change value when clearing programmatically-set value (#6431) (1802dc3), closes #4232

• input-time-picker, time-picker: render when input-time-picker or time-picker's step property changes (#6731) (2118349), closes #6039

• modal, popover: fix focus-trap from preventing first click (#6769) (be4a63a), closes #6581

• tooltip, popover: Support transparent backgrounds #6803 (#6847) (7eec6fb), closes #6798 floating-ui/floating-ui#2195

• value-list, sortable-list: fix nested sorting components (#6983) (b4bbdf3), closes #6024

• accordion: supports selection mode updates (#6356) (8278d3e), closes #5143

• action: ensure consistent width to accommodate indicator when displaying text (#6562) (2b0d704), closes #5375

• action-bar: Set background color on action-bar (#6917) (0062cbf), closes #6865

• alert: ensure border-radius is consistent for prescribed slots (#6368) (cfe5699), closes #6348

• avatar: passes color contrast after adjusting text color (#6592) (e7a4971), closes #6203

• block:

  • Ensure description has correct line-height (#6723) (a7deec2), closes #6443

  • Corrects alignment of slotted icon (#6883) (8fec45e), closes #6627

• button: truncate long button text (#6664) (5857e76), closes #5660

• card: provide more meaningful screen reader label for selectable cards (deprecates deselect message override) (#6657) (8ee37d2), closes #5585

• combobox: Visually nest group items properly (#6749) (8d0d0e5), closes #6384

• chip:

  • Ensure Chip displays without Chip Group label in Custom Element (#6858) (8bf16b9), closes #6856

  • Uses correct aria role in a selection-mode:none Chip Group (#6862) (ab89ceb)

• combobox: ensure most recent selected item is active when combobox is opened (#6973) (8476595)

• date-picker:

  • days previous to the currently hovered day when no range value exists display correctly with no hover styles (#6369) (ebdcc25)

  • fix range highlight style regression (#6836) (9c519fb)

  • improve date-picker a11y (#6715) (74b3b96), closes #5570

• dropdown: trigger should break words when overflowing container. (#6747) (496ce7e), closes #5903

• flow-item: Close back button tooltip on click (#6978) (224b695)

• input-date-picker:

  • correctly position open component when scrolling (#6815) (d22f4f5), closes #6463

  • implement dialog behavior to improve a11y (#6669) (a013819), closes #5582 #6668

  • input renders numbers in the specified numbering system (#6360) (b74c37f)

  • update input-date-picker to properly handle Buddhist calendar changes (#6970) (1d8ad68), closes #6636

• input-time-picker:

  • support keyboard interactions to improve a11y (#6837) (96319ae), closes #6835

  • allow entering localized time formats (#6936) (ad1f71a), closes #6398

• modal:

  • no longer loses focus trap after clicking inside the component. (#6434) (df144dc), closes #6281

  • ensure component transitions are in sync (#6564) (bc9239b), closes #5067

  • prevent error when calling setFocus on a recently rendered and opened modal (dist-custom-elements) (#6666) (aa1f3d1), closes #6188

• pagination: add current page information for screen readers (#6637) (335f947), closes #5590

• panel:

  • ensure close button is placed in the corner of the panel header. (#6746) (1401523), closes #6742

  • Remove min-block-size from footer (#6907) (c2681e7), closes #6733

• popover: fix heading padding for m and l scales (#6341) (6153db9), closes #5803

• segmented-control: handle segmented-control-items with duplicate values (#6963) (3a5ad87), closes #6283

• shell-center-row: Correctly do not set Action Bar layout (#6891) (7e96dd0), closes #6890

• shell-panel: Side panels should appear over center panels (#6787) (5e0b393), closes #5927

• slider:

  • slider handle aligns with track when font size changes (#5372) (780df6c), closes #4721

  • range slider thumb on all touch-enabled devices now follows touch gesture (#6553) (70cade7), closes #4290

• split-button: no longer displays divider for transparent with inverse kind (#6350) (11bc2e8), closes #6332

• stepper: rerender stepper items when parent numbering system changes (#6563) (e817b03), closes #5979

• stepper-item: no longer refer numberingSystem from neighbor stepper component (#6380) (c647fe3), closes #6331

• tab-nav: ensure selected title is set when tab change event is emitted (#6986) (1fd5b9b), closes #6299

• tabs: fix error when tabs is resized before initial render (#6342) (a2ba64e), closes #6310

• tile: adds styling where link is present for additional distinction (#6628) (093ae47), closes #5608

• tile-select: fix click not firing in custom-elements build (#6665) (71aa826), closes #6185

• time-picker: prevent time part steppers from being focusable (#6982) (41701a5), closes #6851

• tip-manager: Set padding for tips and tip-groups consistently (#6959) (fbd2f3f), closes #6464

• tooltip:

  • prevent closing of Esc-key-closing parent components when dismissing a tooltip with Esc (#6343) (b4cbf54), closes #6292

  • fix focusing tooltip when a referenceElement is within a shadowDOM (#6915) (453d527), closes #6893

  • close tooltip when pointer is moving (#6922) (dd2c98c), closes #6785

  • Open hovered tooltip while pointer is moving (#6868) (76b02f6), closes #6278 #6615 #6785

• tree:

  • prevent lines from expanded item from bleeding out of container (#6372) (d2fa8a6), closes #6367

  • prevent tree-item content from being clipped (#6519) (8501b23), closes #6514

  • restore wrapping in tree-item text content (#6518) (7b95194), closes #6512

  • allow selection of parent category w/out selecting children (#6926) (601ec67), closes #6912 #6444 #6509 #6444 #6912 #6509

• tree-item:

  • ensure tree-item properly reflect ancestor-mode selection on initialization (#6795) (5591ab4), closes #5867

  • preserves consistent height with or w/t actions-end (#6403) (728f42b), closes #6361 #3127

• value-list:

  • add back instructions for screen reader when drag handle is activated (#6402) (b822f25), closes #6401 #5739

  • add missing event emitter (#6797) (c96d33e), closes #5167

Compatibility

The 4.27 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 1.4.2. If you are using version 4.26 it is recommended to use Calcite's 1.0.7 release.