@esri/calcite-components 1.0.0-next.281 → 1.0.0-next.285

package/dist/collection/components/calcite-action/calcite-action.js

@@ -2,6 +2,7 @@ import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@
 import { CSS, TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { getElementDir } from "../../utils/dom";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
@@ -46,7 +47,7 @@ export class CalciteAction {
      * Indicates whether the text is displayed.
      */
     this.textEnabled = false;
-    this.observer = new MutationObserver(() => forceUpdate(this));
+    this.mutationObserver = createObserver("mutation", () => forceUpdate(this));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -64,16 +65,19 @@ export class CalciteAction {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.observer.observe(this.el, { childList: true, subtree: true });
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.buttonEl.focus();
   }
@@ -189,7 +193,7 @@ export class CalciteAction {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Indicates the alignment when text-enabled is false."
+        "text": "Optionally specify the horizontal alignment of button elements with text content."
       },
       "attribute": "alignment",
       "reflect": true
@@ -412,7 +416,7 @@ export class CalciteAction {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-bar/calcite-action-bar.js

@@ -2,7 +2,9 @@ import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stenci
 import { CalciteExpandToggle, toggleChildActionText } from "../functional/CalciteExpandToggle";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { getSlotted, focusElement } from "../../utils/dom";
-import { getOverflowCount, overflowActions, queryActions } from "./utils";
+import { getOverflowCount, overflowActions, queryActions, overflowActionsDebounceInMs } from "./utils";
+import { createObserver } from "../../utils/observers";
+import { debounce } from "lodash-es";
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar.
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
@@ -23,12 +25,16 @@ export class CalciteActionBar {
      * Indicates whether widget is expanded.
      */
     this.expanded = false;
-    this.mutationObserver = new MutationObserver(() => {
+    /**
+     * Disables automatically overflowing actions that won't fit into menus.
+     */
+    this.overflowActionsDisabled = false;
+    this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
       toggleChildActionText({ parent: el, expanded });
-      this.resize(el.clientHeight);
+      this.conditionallyOverflowActions();
     });
-    this.resizeObserver = new ResizeObserver((entries) => this.resizeHandlerEntries(entries));
+    this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -51,10 +57,10 @@ export class CalciteActionBar {
       const { height } = entry.contentRect;
       this.resize(height);
     };
-    this.resize = (height) => {
+    this.resize = debounce((height) => {
       var _a;
-      const { el, expanded, expandDisabled, lastActionCount, lastGroupCount, lastResizeHeight, overflowActionsDisabled } = this;
-      if (typeof height !== "number" || overflowActionsDisabled) {
+      const { el, expanded, expandDisabled } = this;
+      if (!height) {
         return;
       }
       const actions = queryActions(el);
@@ -63,14 +69,6 @@ export class CalciteActionBar {
       const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
-      if (lastResizeHeight === height &&
-        lastActionCount === actionCount &&
-        lastGroupCount === groupCount) {
-        return;
-      }
-      this.lastActionCount = actionCount;
-      this.lastGroupCount = groupCount;
-      this.lastResizeHeight = height;
       const overflowCount = getOverflowCount({
         actionCount,
         actionHeight: (_a = actions[0]) === null || _a === void 0 ? void 0 : _a.clientHeight,
@@ -82,6 +80,11 @@ export class CalciteActionBar {
         expanded,
         overflowCount
       });
+    }, overflowActionsDebounceInMs);
+    this.conditionallyOverflowActions = () => {
+      if (!this.overflowActionsDisabled) {
+        this.overflowActions();
+      }
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
@@ -94,7 +97,7 @@ export class CalciteActionBar {
     if (!expandDisabled) {
       toggleChildActionText({ parent: this.el, expanded: this.expanded });
     }
-    this.resize(this.el.clientHeight);
+    this.conditionallyOverflowActions();
   }
   expandedHandler(expanded) {
     if (!this.expandDisabled) {
@@ -112,28 +115,39 @@ export class CalciteActionBar {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
-  componentWillLoad() {
+  componentDidLoad() {
+    this.conditionallyOverflowActions();
+  }
+  connectedCallback() {
+    var _a, _b;
     const { el, expandDisabled, expanded } = this;
     if (!expandDisabled) {
       toggleChildActionText({ parent: el, expanded });
     }
-    this.mutationObserver.observe(el, { childList: true });
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
-      this.resizeObserver.observe(el);
+      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
     }
-  }
-  componentDidLoad() {
-    this.resize(this.el.clientHeight);
+    this.conditionallyOverflowActions();
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
-    this.resizeObserver.disconnect();
+    var _a, _b;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /**
+   * Overflows actions that won't fit into menus.
+   * @internal
+   */
+  async overflowActions() {
+    this.resize(this.el.clientHeight);
+  }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -147,12 +161,12 @@ export class CalciteActionBar {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand } = this;
+    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
     const expandLabel = intlExpand || TEXT.expand;
     const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (h(CalciteExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom },
+    const expandToggleNode = !expandDisabled ? (h(CalciteExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
+    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, scale: scale },
       h("slot", { name: SLOTS.bottomActions }),
       h("slot", { name: SLOTS.expandTooltip }),
       expandToggleNode)) : null;
@@ -250,13 +264,14 @@ export class CalciteActionBar {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Disables automatically overflowing actions that won't fit into menus."
       },
       "attribute": "overflow-actions-disabled",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
     "position": {
       "type": "string",
@@ -279,6 +294,28 @@ export class CalciteActionBar {
       },
       "attribute": "position",
       "reflect": true
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the expand action."
+      },
+      "attribute": "scale",
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -298,6 +335,25 @@ export class CalciteActionBar {
       }
     }]; }
   static get methods() { return {
+    "overflowActions": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Overflows actions that won't fit into menus.",
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }]
+      }
+    },
     "setFocus": {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
@@ -313,7 +369,7 @@ export class CalciteActionBar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-bar/utils.js

@@ -1,6 +1,7 @@
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
+export const overflowActionsDebounceInMs = 150;
 const groupBufferHeight = 2;
 const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
   return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);

package/dist/collection/components/calcite-action-group/calcite-action-group.js

@@ -50,10 +50,10 @@ export class CalciteActionGroup {
     return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: ACTION_MENU_SLOTS.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, intlMore, menuOpen } = this;
+    const { el, expanded, intlMore, menuOpen, scale } = this;
     const hasMenuItems = getSlotted(el, SLOTS.menuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start" },
-      h("calcite-action", { icon: ICONS.menu, slot: ACTION_MENU_SLOTS.trigger, text: intlMore || TEXT.more, textEnabled: expanded }),
+    return hasMenuItems ? (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start", scale: scale },
+      h("calcite-action", { icon: ICONS.menu, scale: scale, slot: ACTION_MENU_SLOTS.trigger, text: intlMore || TEXT.more, textEnabled: expanded }),
       h("slot", { name: SLOTS.menuActions }),
       this.renderTooltip())) : null;
   }
@@ -168,6 +168,28 @@ export class CalciteActionGroup {
       "attribute": "menu-open",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the action-menu."
+      },
+      "attribute": "scale",
+      "reflect": true
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/calcite-action-menu/calcite-action-menu.js

@@ -4,6 +4,7 @@ import { focusElement, getSlotted } from "../../utils/dom";
 import { Fragment } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
+import { createObserver } from "../../utils/observers";
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -34,7 +35,7 @@ export class CalciteActionMenu {
      */
     this.placement = "auto";
     this.actionElements = [];
-    this.mutationObserver = new MutationObserver(() => this.getActions());
+    this.mutationObserver = createObserver("mutation", () => this.getActions());
     this.guid = `calcite-action-menu-${guid()}`;
     this.menuId = `${this.guid}-menu`;
     this.menuButtonId = `${this.guid}-menu-button`;
@@ -245,13 +246,14 @@ export class CalciteActionMenu {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { el, label } = this;
+    const { el, label, scale } = this;
     const menuButtonSlot = (h("slot", { name: SLOTS.trigger },
-      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, text: label })));
+      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
     return getSlotted(el, SLOTS.tooltip) ? (h("calcite-tooltip-manager", null, menuButtonSlot)) : (menuButtonSlot);
   }
   renderMenuItems() {
@@ -406,6 +408,28 @@ export class CalciteActionMenu {
       "attribute": "placement",
       "reflect": true,
       "defaultValue": "\"auto\""
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the menu trigger action."
+      },
+      "attribute": "scale",
+      "reflect": true
     }
   }; }
   static get states() { return {
@@ -440,7 +464,7 @@ export class CalciteActionMenu {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-action-pad/calcite-action-pad.js

@@ -75,6 +75,7 @@ export class CalciteActionPad {
   //  Methods
   //
   // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
@@ -88,12 +89,12 @@ export class CalciteActionPad {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand } = this;
+    const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
     const tooltip = getSlotted(el, SLOTS.expandTooltip);
     const expandLabel = intlExpand || TEXT.expand;
     const collapseLabel = intlCollapse || TEXT.collapse;
-    const expandToggleNode = !expandDisabled ? (h(CalciteExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom },
+    const expandToggleNode = !expandDisabled ? (h(CalciteExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
+    return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, scale: scale },
       h("slot", { name: SLOTS.expandTooltip }),
       expandToggleNode)) : null;
   }
@@ -231,6 +232,28 @@ export class CalciteActionPad {
       },
       "attribute": "position",
       "reflect": true
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the expand action."
+      },
+      "attribute": "scale",
+      "reflect": true
     }
   }; }
   static get events() { return [{
@@ -265,7 +288,7 @@ export class CalciteActionPad {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-alert/calcite-alert.js

@@ -133,7 +133,7 @@ export class CalciteAlert {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** focus either the slotted link or the close button */
+  /** Sets focus on the component. */
   async setFocus() {
     if (!this.closeButton && !this.alertLinkEl) {
       return;
@@ -429,7 +429,7 @@ export class CalciteAlert {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "focus either the slotted link or the close button",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-block/calcite-block.css

@@ -134,38 +134,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .header {
@@ -257,6 +260,7 @@ calcite-handle {
   padding: 0;
   font-size: var(--calcite-font-size--2);
   color: var(--calcite-ui-text-3);
+  margin-top: 0.125rem;
   word-wrap: break-word;
   word-break: break-word;
 }

package/dist/collection/components/calcite-block/calcite-block.js

@@ -4,10 +4,10 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
+ * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot - A slot for adding content to the block.
  */
 export class CalciteBlock {
   constructor() {
@@ -176,7 +176,7 @@ export class CalciteBlock {
         "resolved": "string",
         "references": {}
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],

package/dist/collection/components/calcite-block-section/calcite-block-section.css

@@ -108,7 +108,7 @@
   border-width: 0;
   color: var(--calcite-ui-text-2);
   font-family: var(--calcite-sans-family);
-  font-weight: var(--calcite-font-weight-normal);
+  font-weight: var(--calcite-font-weight-medium);
   width: 100%;
 }
 
@@ -122,7 +122,7 @@
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
   padding-left: 0;
-  padding-right: 0.25rem;
+  padding-right: 0;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   -webkit-user-select: none;
@@ -160,12 +160,10 @@
 .toggle--switch calcite-switch {
   pointer-events: none;
   margin-left: 0.25rem;
-  margin-right: 0.25rem;
 }
 
 .toggle--switch .status-icon {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+  margin-left: 0.5rem;
 }
 
 .toggle--switch__content {
@@ -182,17 +180,12 @@
   color: var(--calcite-ui-danger);
 }
 
-.calcite--rtl .toggle--switch {
-  padding-right: 0;
-  padding-left: 0.5rem;
-}
-
 .calcite--rtl .toggle--switch calcite-switch {
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 
-.calcite--rtl .section-header {
-  padding-right: 0;
-  padding-left: 0.25rem;
+.calcite--rtl .toggle--switch .status-icon {
+  margin-left: 0;
+  margin-right: 0.5rem;
 }