@esri/solutions-components 0.6.5 → 0.6.6

package/dist/collection/utils/test/downloadUtils.spec.tsx

@@ -130,4 +130,295 @@ describe("downloadUtils", () => {
 
   });
 
+  describe("_getExpressionsFromLabel", () => {
+    it("handles a label with ASCII expression names", () => {
+      const labelSpec = "{expression/expr0}\n{OWNERNM1}\n{PSTLADDRESS}\n{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const expectedExpressions = ["{expression/expr0}"];
+      const expressions = downloadUtils._getExpressionsFromLabel(labelSpec);
+      expect(expressions).toEqual(expectedExpressions);
+    });
+  });
+
+  describe("_getFieldsFromLabel", () => {
+    it("handles a label with ASCII field names", () => {
+      const labelSpec = "{expression/expr0}\n{OWNERNM1}\n{PSTLADDRESS}\n{PSTLCITY}, {PSTLSTATE} {PSTLZIP5}";
+      const expectedFields = ["{OWNERNM1}", "{PSTLADDRESS}", "{PSTLCITY}", "{PSTLSTATE}", "{PSTLZIP5}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Arabic (ar) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{بحث}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{بحث}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Bosnian (bs) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{računa}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{računa}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Bulgarian (bg) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Търсене}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Търсене}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Catalan (ca) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Descripció}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Descripció}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Simplified Chinese (zh-cn) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{帐户个人资料}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{帐户个人资料}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Traditional Chinese (Hong Kong) (zh-hk) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{帳號設定檔}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{帳號設定檔}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Traditional Chinese (Taiwan) (zh-tw) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{搜尋}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{搜尋}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Croatian (hr) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Pretraživanje}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Pretraživanje}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Czech (cs) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Přihlásit}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Přihlásit}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Danish (da) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Vælg}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Vælg}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Dutch (nl) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{geïmplementeerd}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{geïmplementeerd}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Estonian (et) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Valdkonnapõhised}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Valdkonnapõhised}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Finnish (fi) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Näytä}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Näytä}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with French (fr) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{accès}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{accès}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with German (de) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Öffentliche}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Öffentliche}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Greek (el) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Αναζήτηση}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Αναζήτηση}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Hebrew (he) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{עוֹמֶק}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{עוֹמֶק}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Hungarian (hu) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Nyelvváltás}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Nyelvváltás}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Indonesian (id) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Bahasa}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Bahasa}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Italian (it) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Elettricità}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Elettricità}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Japanese (ja) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{深さ}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{深さ}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Korean (ko) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{계정 프로필}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{계정 프로필}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Latvian (lv) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Meklēt}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Meklēt}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Lithuanian (lt) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{sričių}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{sričių}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Norwegian (nb) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{språk}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{språk}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Polish (pl) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Przełącz}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Przełącz}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Portuguese (Brazil) (pt-br) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Configurações}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Configurações}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Portuguese (Portugal) (pt-pt) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{sessão}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{sessão}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Romanian (ro) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Copiați}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Copiați}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Russian (ru) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Вход}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Вход}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Serbian (sr) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{pregledač}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{pregledač}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Slovak (sk) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Prihlásiť}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Prihlásiť}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Slovenian (sl) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{računa}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{računa}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Spanish (es) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{través}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{través}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Swedish (sv) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{språk}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{språk}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Thai (th) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{โปรไฟล์บัญ}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{โปรไฟล์บัญ}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Turkish (tr) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Değiştir}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Değiştir}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Ukrainian (uk) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Пошук}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Пошук}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+
+    it("handles a label with Vietnamese (vi) field name", () => {
+      const labelSpec = "{latitude}|{expression/expr0}\n{longitude}|{Chuyển}|{time}";
+      const expectedFields = ["{latitude}", "{longitude}", "{Chuyển}", "{time}"];
+      const fields = downloadUtils._getFieldsFromLabel(labelSpec);
+      expect(fields).toEqual(expectedFields);
+    });
+  });
+
 });

package/dist/components/ExpandToggle.js

@@ -10,8 +10,8 @@ import { S as SLOTS } from './action-menu.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
@@ -20,21 +20,21 @@ const geActionDimensions = (actions) => {
   const actionLen = actions?.length;
   return {
     actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
-    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
+    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0,
   };
 };
-const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount }) => {
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
   const maxContainerPx = layout === "horizontal" ? width : height;
   const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
   return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
 };
-const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }) => {
   return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
 };
 const queryActions = (el) => {
   return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
 };
-const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
+const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
   let needToSlotCount = overflowCount;
   actionGroups.reverse().forEach((group) => {
     let slottedWithinGroupCount = 0;
@@ -65,23 +65,23 @@ const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const ICONS = {
   chevronsLeft: "chevrons-left",
-  chevronsRight: "chevrons-right"
+  chevronsRight: "chevrons-right",
 };
 function getCalcitePosition(position, el) {
   return position || el.closest("calcite-shell-panel")?.position || "start";
 }
-function toggleChildActionText({ el, expanded }) {
+function toggleChildActionText({ el, expanded, }) {
   queryActions(el)
     .filter((el) => el.slot !== SLOTS$1.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
   el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
 }
-const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
   if (tooltip) {
     tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
   }
@@ -90,9 +90,9 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   }
   return referenceElement;
 };
-const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
+const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
   const rtl = getElementDir(el) === "rtl";
-  const expandText = expanded ? intlCollapse : intlExpand;
+  const text = expanded ? collapseText : expandText;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
     icons.reverse();
@@ -100,7 +100,7 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: expandText, textEnabled: expanded,
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: text, textEnabled: expanded, title: !expanded && !tooltip ? text : null,
     // eslint-disable-next-line react/jsx-sort-props
     ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }) }));
   return actionNode;

package/dist/components/FloatingArrow.js

@@ -7,17 +7,17 @@ import { h } from '@stencil/core/internal/client';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
   arrow: "calcite-floating-ui-arrow",
-  arrowStroke: "calcite-floating-ui-arrow__stroke"
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 const DEFAULTS = {
   width: 12,
   height: 6,
-  strokeWidth: 1
+  strokeWidth: 1,
 };
 /**
  * Renders a SVG element to be used as a floating-ui arrow.
@@ -27,11 +27,11 @@ const DEFAULTS = {
  * @param floatingLayout.floatingLayout
  * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
  *
- * See [floating-ui](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts)
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
  * @param floatingLayout.key
  * @param floatingLayout.ref
  */
-const FloatingArrow = ({ floatingLayout, key, ref }) => {
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
   const { width, height, strokeWidth } = DEFAULTS;
   const svgX = width / 2;
   const isVertical = floatingLayout === "vertical";

package/dist/components/Heading.js

@@ -7,8 +7,8 @@ import { h } from '@stencil/core/internal/client';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/components/action-bar.js

@@ -5,9 +5,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { h as slotChangeGetAssignedElements, a as getSlotted } from './dom.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
-import { c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { e as slotChangeGetAssignedElements, h as focusFirstTabbable, a as getSlotted } from './dom.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { t as toggleChildActionText, E as ExpandToggle, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, b as getOverflowCount } from './ExpandToggle.js';
@@ -21,18 +21,19 @@ import { d as debounce } from './debounce.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  actionGroupBottom: "action-group--bottom"
+  actionGroupEnd: "action-group--end",
 };
 const SLOTS = {
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip"
+  actionsEnd: "actions-end",
+  bottomActions: "actions-end",
+  expandTooltip: "expand-tooltip",
 };
 
-const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--bottom{flex-grow:1;justify-content:flex-end}";
+const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLElement {
   constructor() {
@@ -40,6 +41,11 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     this.__registerHost();
     this.__attachShadow();
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
     this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ el, expanded });
@@ -79,7 +85,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
       const actionCount = expandDisabled ? actions.length : actions.length + 1;
       const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
       this.setGroupLayout(actionGroups);
-      const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+      const groupCount = getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
       const { actionHeight, actionWidth } = geActionDimensions(actions);
@@ -90,12 +96,12 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
         actionWidth,
         height,
         width,
-        groupCount
+        groupCount,
       });
       overflowActions({
         actionGroups,
         expanded,
-        overflowCount
+        overflowCount,
       });
     }, overflowActionsDebounceInMs);
     this.toggleExpand = () => {
@@ -195,9 +201,8 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    var _a;
-    await componentLoaded(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    await componentFocusable(this);
+    focusFirstTabbable(this.el);
   }
   updateGroups() {
     this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
@@ -213,15 +218,16 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { el: el, expanded: expanded, intlCollapse: messages.collapse, intlExpand: messages.expand, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
-    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+    return getSlotted(el, SLOTS.actionsEnd) ||
+      getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd }), h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
-  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
@@ -233,7 +239,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
   static get style() { return actionBarCss; }
-}, [17, "calcite-action-bar", {
+}, [1, "calcite-action-bar", {
     "expandDisabled": [516, "expand-disabled"],
     "expanded": [1540],
     "layout": [513],

package/dist/components/action-group.js

@@ -6,8 +6,8 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { a as getSlotted } from './dom.js';
-import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { S as SLOTS$1, d as defineCustomElement$4 } from './action-menu.js';
 import { d as defineCustomElement$5 } from './action.js';
@@ -17,18 +17,18 @@ import { d as defineCustomElement$1 } from './popover.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const SLOTS = {
   menuActions: "menu-actions",
-  menuTooltip: "menu-tooltip"
+  menuTooltip: "menu-tooltip",
 };
 const ICONS = {
-  menu: "ellipsis"
+  menu: "ellipsis",
 };
 
-const actionGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
+const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends HTMLElement {
   constructor() {
@@ -47,6 +47,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends H
     this.layout = "vertical";
     this.columns = undefined;
     this.menuOpen = false;
+    this.overlayPositioning = "absolute";
     this.scale = undefined;
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -69,7 +70,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends H
   //--------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   // --------------------------------------------------------------------------
@@ -105,9 +106,9 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends H
     return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, menuOpen, scale, layout, messages } = this;
+    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
     const hasMenuItems = getSlotted(el, SLOTS.menuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (h(Fragment, null, h("slot", null), this.renderMenu()));
@@ -126,6 +127,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends H
     "layout": [513],
     "columns": [514],
     "menuOpen": [1540, "menu-open"],
+    "overlayPositioning": [513, "overlay-positioning"],
     "scale": [513],
     "messages": [1040],
     "messageOverrides": [1040],