@esri/solutions-components 0.10.9 → 0.10.11

package/dist/components/dropdown-group.js

@@ -45,9 +45,9 @@ const DropdownGroup = /*@__PURE__*/ proxyCustomElement(class DropdownGroup exten
     render() {
         const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
         const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-        return (h(Host, { key: '1c189e8ff87a118d296781b729c889307c2b4a5b', "aria-label": this.groupTitle, role: "group" }, h("div", { key: '2afc3aee9c68b26af882168ce24cb2937a17c9e8', class: {
+        return (h(Host, { key: '5e46ca1eb8f37e5af6f9ff4f417a9290c84f2f69', "aria-label": this.groupTitle, role: "group" }, h("div", { key: 'af52f0ab422c21b0c10620b61fc7b6445d277878', class: {
                 [CSS.container]: true,
-            } }, dropdownSeparator, groupTitle, h("slot", { key: '3fdcfab750b0541a4a24764f1a1875c867db06e8' }))));
+            } }, dropdownSeparator, groupTitle, h("slot", { key: 'e320a38a327d6ca9802c9664c93907df2705fbf3' }))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/dropdown-item.js

@@ -65,9 +65,9 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         const { href, selectionMode, label, iconFlipRtl } = this;
-        const iconStartEl = (h("calcite-icon", { key: '335624555fbf5f4e36fa0b58b7e84a722f64cdf2', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const contentNode = (h("span", { key: '54082db67b2cd412f5167950609387884b8ac878', class: CSS.itemContent }, h("slot", { key: 'b7c949c4dffae482fd398c21e062763fc1f06ba8' })));
-        const iconEndEl = (h("calcite-icon", { key: 'c9e8ce2e26943b228fd3912661486f5a7b58d8c2', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const iconStartEl = (h("calcite-icon", { key: '46fd6784a80e78a149e6796018f495f33c9fe172', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const contentNode = (h("span", { key: 'feee494a9e26fad963b71e5aacf3abf9084ec463', class: CSS.itemContent }, h("slot", { key: '33e49b095819a250f469d457279f6a340ff31fd4' })));
+        const iconEndEl = (h("calcite-icon", { key: 'ea58bc58292cf76bcda6826e3c402079b0d3ad69', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
         const slottedContent = this.iconStart && this.iconEnd
             ? [iconStartEl, contentNode, iconEndEl]
             : this.iconStart
@@ -85,7 +85,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
                     : "menuitem";
         const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
         const { disabled } = this;
-        return (h(Host, { key: '3ccaf1fea0138cbd2bbb93fb332746587e792f6e', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '0fc367e9272db04f7b620913774374e9a889cc55', disabled: disabled }, h("div", { key: 'd019973424b439f54f7b269cc48747d52ab7ede3', class: {
+        return (h(Host, { key: '269693a7a036a7e39f4f8d529695df44f34df22a', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '0c644e048c9e30b8062cd60f7574c3e8fb631b4c', disabled: disabled }, h("div", { key: 'd5c9098d6c3007d5f05b28770074f6833a43d53f', class: {
                 [CSS.container]: true,
                 [CSS.containerNone]: selectionMode === "none",
             } }, selectionMode !== "none" ? (h("calcite-icon", { class: CSS.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl))));

package/dist/components/dropdown.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { t as toAriaBoolean, y as focusElementInGroup, f as focusElement } from './dom.js';
+import { k as focusFirstTabbable, t as toAriaBoolean, y as focusElementInGroup, f as focusElement } from './dom.js';
 import { f as filterValidFlipPlacements, c as connectFloatingUI, b as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -16,13 +16,13 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const SLOTS = {
     dropdownTrigger: "trigger",
 };
 
-const dropdownCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host .calcite-dropdown-wrapper{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-trigger-container{position:relative;display:flex;block-size:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width-scale=s]){--calcite-dropdown-width:12rem}:host([width-scale=m]){--calcite-dropdown-width:14rem}:host([width-scale=l]){--calcite-dropdown-width:16rem}:host([hidden]){display:none}[hidden]{display:none}";
+const dropdownCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host .calcite-dropdown-wrapper{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block:0;left:0}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-trigger-container{position:relative;display:flex;block-size:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width-scale=s]){--calcite-dropdown-width:12rem}:host([width-scale=m]){--calcite-dropdown-width:14rem}:host([width-scale=l]){--calcite-dropdown-width:16rem}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteDropdownStyle0 = dropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
@@ -209,7 +209,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await componentFocusable(this);
-        this.el.focus();
+        focusFirstTabbable(this.referenceEl);
     }
     //--------------------------------------------------------------------------
     //
@@ -245,11 +245,11 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     }
     render() {
         const { open, guid } = this;
-        return (h(Host, { key: '50bf6651c3987190f8477b2eebc33d2832685a10' }, h(InteractiveContainer, { key: '68d2c96cae443f3d03b961d1c36ac3a32317c6d4', disabled: this.disabled }, h("div", { key: '4bbebf0841d4de7628f6d7940b40299db864c518', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '37e2ae56c41dcddf9be92f4d7b80b153c8a87fb8', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: 'f1faff59ee51a993e26c5bdfe59923538b818dfe', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: '6eb119e4452038a3d54d356d9818ea1cf8f0f62c', "aria-labelledby": `${guid}-menubutton`, class: {
+        return (h(Host, { key: '4b3349c1645b7d39263a20b688f7645d92148f23' }, h(InteractiveContainer, { key: 'db1d56073b9f9db2fbf6eaef824e3f12411dd174', disabled: this.disabled }, h("div", { key: '05de1bb5f3641147441f18eaeae104acb06e47c6', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '39b976c808c4f44983f2d6a056bb128537cf1aae', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: '57ba0f8d3632febcab69b706a73a910f54f09b62', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: 'ae7505fa472d323ad6aed6ea0dd2ab7fdf8e7e59', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
-            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: '9bbe78ed3e58e5fb986cedcb3e947c4a755e0c88', onSlotchange: this.updateGroups }))))));
+            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: 'ae94137311b106fbed88dfde346002d87e4efcbb', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/edit-card2.js

@@ -186,7 +186,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '5f81ea077d226b6bccf489c0628bf425df078d3a' }, h("div", { key: 'b66be8fe337bdedfe55d5897d044e5d2f6741c7e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '58c7c0ff41141280c69d6477b3699bc6960b7a0a', class: "position-absolute" }, h("div", { key: '6b853f84699c0dcbeb867c13b7cd84f6316d87a9', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '2a30bcd6e2fad7f65d16b167cf9d1cdc7549ca01', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'ae604b83ef7eb6a2117145b3e9f9c1c8dd1c8688' }, h("div", { key: 'a229ea8ae44ef10a2a75011d81d0c16a461b675f', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'c9461e247a3b3b6e0c7af17a3646282dbd410b89', class: "position-absolute" }, h("div", { key: '3e385f2d39277de3eeb665e6b95a1c426d3c66b4', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'a995cdebcbbd9d25d2f0784c5dca7dbfbd2757dd', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/feature-comments.js

@@ -51,7 +51,7 @@ const FeatureComments$1 = /*@__PURE__*/ proxyCustomElement(class FeatureComments
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '70ab7bb863463c41fa2291412f8da6d602e9a94d' }, h("slot", { key: '7266d385e0fc9341baf651a5dcab13b7ba361163' })));
+        return (h(Host, { key: '0d331b7c201854181dcf80f6192de2c00218b50c' }, h("slot", { key: '4b602b73d1b6d773eb49eace91df6613117e974d' })));
     }
     static get style() { return FeatureCommentsStyle0; }
 }, [1, "feature-comments"]);

package/dist/components/feature-details2.js

@@ -6,9 +6,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { f as getAllTables } from './mapViewUtils.js';
-import { d as defineCustomElement$q } from './action.js';
-import { d as defineCustomElement$p } from './action-menu.js';
-import { d as defineCustomElement$o } from './alert.js';
+import { d as defineCustomElement$r } from './action.js';
+import { d as defineCustomElement$q } from './action-menu.js';
+import { d as defineCustomElement$p } from './alert.js';
+import { d as defineCustomElement$o } from './avatar.js';
 import { d as defineCustomElement$n } from './button.js';
 import { d as defineCustomElement$m } from './chip.js';
 import { d as defineCustomElement$l } from './filter2.js';
@@ -47,6 +48,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         this.graphics = undefined;
         this.reportingOptions = undefined;
         this.layerItemsHash = undefined;
+        this.showUserImageInCommentsList = false;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
         this._disLikeCount = 0;
@@ -186,12 +188,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '7f1fa230117891c11ff6747b7d3c5d6c8771c998', "full-height": true }, h("info-card", { key: '2b9119b5a0533d2ed8136149dd322aa9211f503b', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '85974c4ff61890dc43c02b84b9c6622e83039cdd', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '8b905e1ee273103247f6cab2c598b03f1f733396', class: "comment-btn" }, h("span", { key: '05439cbc1e6080006479ce3694f4d1f81684a9d7' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '0e7062d1bc383c2f2fdd50ff003ea6a854e1a121', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '26a024436a8e0c4251c200f112e6cc687795c85a', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '67d1ebe6b0ba1893aac9f26e4cebfe30569115d5', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '7ed006e8be5f7280fdd260102111aad4656526f6', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'a2d31f643b1a361343eb502ede98a35ea954f244', "full-height": true }, h("info-card", { key: '4ba44decfa3f155034d3edfdf8ab3e7df5f1ea8a', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '0f7af99fd964da408f3131385cfd617138f40151', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '6ce7b090a07db23c542fc7aaacf9cc8a39987483', class: "comment-btn" }, h("span", { key: 'fcce9266efa253c679dcb69f308c07950f5e2693' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '25355a5c195824e473a390f196d28c909c1348eb', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '6dca1c0f2ca14f662de98362cbe7ef0993fad6b8', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '9d1c0a5938806645a24a757f06e31b13587912dc', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '73f81c666a054b2c9f02246fcc7ea4811494c106', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -233,8 +235,9 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             //Get comments table id from map
             const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
             const allTables = await getAllTables(this.mapView);
-            const relatedTable = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-            this.relatedTableId = relatedTable?.length > 0 ? relatedTable[0].id : '';
+            const allRelatedTables = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
+            const relatedTable = allRelatedTables?.length > 0 ? allRelatedTables[0] : null;
+            this.relatedTableId = relatedTable?.id ?? '';
             //**Get the related records for the current selected feature**
             if (this.relatedTableId) {
                 //current selected feature's objectId
@@ -251,7 +254,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
                 const relatedOIDs = [];
                 if (result[objectId]) {
                     result[objectId].features.forEach((feature) => {
-                        relatedOIDs.push(feature.attributes.OBJECTID);
+                        relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
                     });
                 }
                 // Store the objectid's of the related features, this will be used to show the comments and its count
@@ -458,6 +461,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         "graphics": [16],
         "reportingOptions": [16],
         "layerItemsHash": [16],
+        "showUserImageInCommentsList": [4, "show-user-image-in-comments-list"],
         "_likeFieldAvailable": [32],
         "_likeCount": [32],
         "_disLikeCount": [32],
@@ -478,7 +482,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["feature-details", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "delete-button", "edit-card", "feature-list", "info-card"];
+    const components = ["feature-details", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-avatar", "calcite-button", "calcite-chip", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "delete-button", "edit-card", "feature-list", "info-card"];
     components.forEach(tagName => { switch (tagName) {
         case "feature-details":
             if (!customElements.get(tagName)) {
@@ -487,15 +491,20 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "calcite-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "calcite-avatar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$o();
             }

package/dist/components/feature-form-flow-item.js

@@ -51,7 +51,7 @@ const FeatureFormFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeatureForm
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '32113dda304b2f7179d0275f04987e69ce386959' }, h("slot", { key: '358d5ea7a03cc7da16e98a92391cf74dfe9fa89b' })));
+        return (h(Host, { key: 'e4cd5ed27b476b7f5ed699ed13422b54b84be2e5' }, h("slot", { key: 'b73e8f8b52ac166b0e85f3114ed0fb0d57a7fec9' })));
     }
     static get style() { return FeatureFormFlowItemStyle0; }
 }, [1, "feature-form-flow-item"]);

package/dist/components/feature-list2.js

@@ -8,8 +8,9 @@ import { l as loadModules } from './loadModules.js';
 import { P as PopupUtils } from './popupUtils.js';
 import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$g } from './action.js';
-import { d as defineCustomElement$f } from './action-menu.js';
+import { d as defineCustomElement$h } from './action.js';
+import { d as defineCustomElement$g } from './action-menu.js';
+import { d as defineCustomElement$f } from './avatar.js';
 import { d as defineCustomElement$e } from './filter2.js';
 import { d as defineCustomElement$d } from './handle.js';
 import { d as defineCustomElement$c } from './icon.js';
@@ -25,7 +26,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;padding:10px 12px;white-space:pre-line}.feature-list-popup-title-small{font-size:small;padding:10px 12px;white-space:pre-line}";
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.feature-list-popup-title-padding{padding:10px 12px}.feature-list-popup-title-padding-reduced{padding:10px 0}.profile-img{margin:0 0.75rem;min-width:32px}";
 const FeatureListStyle0 = featureListCss;
 
 const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends HTMLElement {
@@ -44,6 +45,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         this.textSize = "large";
         this.showInitialLoading = true;
         this.showErrorWhenNoFeatures = true;
+        this.showUserImageInList = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -60,6 +62,11 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * The Color instance
      */
     Color;
+    /**
+     * "esri/config": https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html
+     * Esri config
+     */
+    esriConfig;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -149,9 +156,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '3d7b707a73bb6c4d566515e50cf2baa155e60816', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '50294111fb6c1e52e727b03e54ca83fc498ca3b9', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '8dd48fc33e2a9825a95b0d0d50424baf431fed55', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '6ff0dc700cdf40fe6929a9777bca8ebc6325f1ed', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '2412a7b41ab87bfee803460bdea0395ca609d55a', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '4216b02c264cf88472082f1c6f3cd466bd77d166', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '2bb39768d0fbd0d863b075b0e2e6b750c5f7c2a1', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: 'ace7bcabf497e9a61d261fd7ea29dc664ee0a526', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '675c7f5be7f8456954acdf353f357bac6145c390', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: 'b2e6537acdec801ef066a74c78a2c4a13dbbc44b', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '7697470234b396a904906b80e4fc8df3a0cc732b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'd2b40c9a5e1bf009cb78d640351a16b24711ff59', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '15b0dae0fb914faf053a4b0cbea6e35ef7abc038', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '04f8eb02535f8cff8de0c111ac2d4bfa883ac128', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -164,10 +171,12 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
    * @protected
    */
     async initModules() {
-        const [Color] = await loadModules([
-            "esri/Color"
+        const [Color, esriConfig] = await loadModules([
+            "esri/Color",
+            "esri/config",
         ]);
         this.Color = Color;
+        this.esriConfig = esriConfig;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
@@ -307,7 +316,16 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         const currentFeatures = featureSet?.features;
         const items = currentFeatures.map(async (feature) => {
             const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
-            return this.getFeatureItem(feature, popupTitle);
+            //fetch the feature creator user info to show the creator user image
+            let userInfo;
+            if (this.showUserImageInList) {
+                const creatorField = this._selectedLayer.editFieldsInfo?.creatorField.toLowerCase();
+                // if feature's creator field is present then only we can fetch the information of user
+                if (creatorField) {
+                    userInfo = await this.getUserInformation(feature, creatorField);
+                }
+            }
+            return this.getFeatureItem(feature, popupTitle, userInfo);
         });
         return Promise.all(items);
     }
@@ -318,13 +336,40 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * @returns individual feature item to be rendered
      * @protected
      */
-    getFeatureItem(selectedFeature, popupTitle) {
+    getFeatureItem(selectedFeature, popupTitle, userInfo) {
         //get the object id value of the feature
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle ?? oId;
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+        const popupTitlePaddingClass = this.showUserImageInList ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
+            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+    }
+    /**
+     *
+     * @param feature Each individual feature instance to be listed
+     * @param creatorField Feature's creator field from the layer
+     * @returns user information
+     * @protected
+     */
+    async getUserInformation(feature, creatorField) {
+        const userToken = this.mapView.map.portalItem.portal?.credential?.token;
+        //get the user information
+        let url = `${this.esriConfig.portalUrl}/sharing/rest/community/users/${feature.attributes[creatorField]}?f=json&returnUserLicensedItems=true`;
+        if (userToken) {
+            url += `&token=${userToken}`;
+        }
+        const data = await fetch(url);
+        const userInfo = await data.json();
+        //construct the url to get the user profile image
+        const userName = userInfo?.username ?? feature.attributes[creatorField];
+        let userProfileUrl = `${this.esriConfig.portalUrl}/sharing/rest/community/users/${userName}/info/blob.png`;
+        if (userInfo?.access && userToken) {
+            userProfileUrl += `?token=${userToken}`;
+        }
+        userInfo.userProfileUrl = userProfileUrl;
+        return userInfo;
     }
     /**
      * Fetches the component's translations
@@ -353,6 +398,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "textSize": [1, "text-size"],
         "showInitialLoading": [4, "show-initial-loading"],
         "showErrorWhenNoFeatures": [4, "show-error-when-no-features"],
+        "showUserImageInList": [4, "show-user-image-in-list"],
         "_featureItems": [32],
         "_featuresCount": [32],
         "_isLoading": [32],
@@ -367,7 +413,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["feature-list", "calcite-action", "calcite-action-menu", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack"];
+    const components = ["feature-list", "calcite-action", "calcite-action-menu", "calcite-avatar", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "feature-list":
             if (!customElements.get(tagName)) {
@@ -376,10 +422,15 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-avatar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }

package/dist/components/features-flow-item.js

@@ -51,7 +51,7 @@ const FeaturesFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeaturesFlowIt
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'eb455611b9248308ef11de0f2b03cb35bbc77e5b' }, h("slot", { key: 'f9829297423e86f028c1415e6c7d27c0967b9e8e' })));
+        return (h(Host, { key: '0070ec5f638adacbae77befed92f4aa61a675c8f' }, h("slot", { key: 'c13088ad63e931160712bdb385e431f63ca14862' })));
     }
     static get style() { return FeaturesFlowItemStyle0; }
 }, [1, "features-flow-item"]);

package/dist/components/filter.js

@@ -737,7 +737,7 @@ function forIn(object, iteratee) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const filter = (data, value, filterProps) => {
     const escapedValue = escapeRegExp(value);

package/dist/components/filter2.js

@@ -18,7 +18,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     container: "container",
@@ -145,7 +145,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     /** Sets focus on the component. */
     async setFocus() {
         await componentFocusable(this);
-        this.el?.focus();
+        return this.textInput?.setFocus();
     }
     updateFiltered(filtered, emit = false, callback) {
         this.filteredItems = filtered;
@@ -161,7 +161,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (h(InteractiveContainer, { key: '45e216d51b5b12ddc4295ade0be6dd451aeef851', disabled: disabled }, h("div", { key: '72a041cd4c1a9afcc3e20dc48719024fa0bd91d8', class: CSS.container }, h("label", { key: '94096613f5abe9d5334b47986556a7d8aaac4556' }, h("calcite-input", { key: 'cb61179b03fca1436146f80a96adc6177fb92a2e', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (h(InteractiveContainer, { key: 'da4ff667fdb02ae8b85c56cd717b416f3256145d', disabled: disabled }, h("div", { key: 'f4406a403101afa7c97da11f8408fa464aa8a08c', class: CSS.container }, h("label", { key: 'aace74138ebea71058044e05d4fe44cb7ee6beb2' }, h("calcite-input", { key: 'cc7dca3364cc73bf42a78d76155477af98d72552', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
                 this.textInput = el;
             }, scale: scale, type: "text", value: this.value })))));
     }

package/dist/components/floating-ui.js

@@ -583,10 +583,12 @@ const flip$1 = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -632,8 +634,17 @@ const flip$1 = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -1409,7 +1420,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
@@ -1423,7 +1434,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       x += left;
       y += top;
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
   return rectToClientRect({
@@ -2039,7 +2050,7 @@ function offsetParentPolyfill(element) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 (function setUpFloatingUiForShadowDomPositioning() {
     if (isBrowser()) {

package/dist/components/floor-filter2.js

@@ -117,7 +117,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '8c59ed98841f476670392c6ebd9dc764d72f4733' }, h("div", { key: 'b2400febc768a595dbcc6933af1565da173d97f5', ref: (el) => { this._floorFilterElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.

package/dist/components/flow-item.js

@@ -20,7 +20,7 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     backButton: "back-button",
@@ -62,16 +62,25 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.handlePanelScroll = (event) => {
+        this.handleInternalPanelScroll = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.calciteFlowItemScroll.emit();
         };
-        this.handlePanelClose = (event) => {
+        this.handleInternalPanelClose = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.closed = true;
             this.calciteFlowItemClose.emit();
         };
-        this.handlePanelToggle = (event) => {
+        this.handleInternalPanelToggle = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.collapsed = event.target.collapsed;
             this.calciteFlowItemToggle.emit();
@@ -187,7 +196,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
-        return (h(Host, { key: '10a182247900f88d506ad09184e6ece24f432286' }, h(InteractiveContainer, { key: '457baca75f34051cbeb62b40f770d81c6e2b6565', disabled: disabled }, h("calcite-panel", { key: 'f3ac8082ae34e8fb99c0384c75de1075a8630115', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), h("slot", { key: '86e59d53193c52fa13f3b15edd422f6dccebce08', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '016695b76033387057b952da658a19fa961e3038', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: '0a937c9ee0e192e24ef199c3d7f072628b6b687c', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: 'ce0b888b00b9c5ced046bb23fb4ea47230e24455', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '7af455d66b2fe6d3a55dd54543d1e96e584eb7ca', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'f101ed5cc74987b375f22f3f9313fe68b3adb39b', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '5a923bbbbeb67a69053145c36c0fd03dbb82c048', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'db2116031a390dfcb0c772a5b69b29caf11c61b2', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '77d01f9d1be7cc5fbcecc694fca82616eaec4251', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: 'ed461c9b6efb646147a54a56238e0d5259505e60', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: 'f00171d0b49f373bb5f705b1f51b08a783a2081a', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '0a62333c3642433517f42852c900b4e33d64df10', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '2bc94a266a195140c504e8de5eb60b2860bcd1e2', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: 'dc6f25a4107d0bc8e0fa1cb3a4103f44717aacdd' })))));
+        return (h(Host, { key: '166a2f53829cecc09019a7fa3fe670b5e4e42146' }, h(InteractiveContainer, { key: '53f00fb0e5ec53b8a19efde1592e1bff176302d1', disabled: disabled }, h("calcite-panel", { key: 'a24ff76af240b1403ebfa5810bc8fe0443901040', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), h("slot", { key: '9051287e5b89eaca28b440816cbcddc03cefed73', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '566fb396078d3eac17fbff69e0cd43fb5b8ca13e', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: '88ced257238e369cd99250c9d5a93fa03746fbd5', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: 'beab9f93af9deed383adc8250ec943b883e058b8', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '1f1c7579d1ac1085004b08d2f57ec8b9e0641e35', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '3696e4a7e80db48581f438336007a1b63a201040', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '370e0817cbc13d7cf4c8adaccff8fe9d7c91c859', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'd55cc859cb1c9c6cc80a63521aad955f6e23d31c', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '7cea1750cd59d1fdda66516c9b4c78884127dde5', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: 'd07ed2f97623023312cdb0a5a01b909286f34373', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: 'fdc209c1e77fd62cadaaad0ee576e71a1f0419d8', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '5348d32cc42b7fa3b07e4b5ef711863f6ce812bc', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: 'bad7644787a3ad19ef40931fb38cfe9c18962b27', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: '97675398537cc86f41a219126e17bcf24cf4682b' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/flow.js

@@ -10,7 +10,7 @@ import { c as componentFocusable, s as setUpLoadableComponent, a as setComponent
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     frame: "frame",
@@ -141,7 +141,7 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
             [CSS.frameAdvancing]: flowDirection === "advancing",
             [CSS.frameRetreating]: flowDirection === "retreating",
         };
-        return (h("div", { key: '3d91e0e8d0ffb94e3e8d563e3b34b47b23b3987b', class: frameDirectionClasses }, h("slot", { key: 'fb32070e340ba86196b5150d2bcc884ac2d94901' })));
+        return (h("div", { key: '93590e2eec869cef65a59c01aa2c6001b431da9a', class: frameDirectionClasses }, h("slot", { key: '5b97e4147abb053391f170f5e36bac4670934072' })));
     }
     get el() { return this; }
     static get style() { return CalciteFlowStyle0; }

package/dist/components/focusTrapComponent.js

@@ -944,7 +944,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Helper to set up the FocusTrap component.