@esri/calcite-components 1.0.0-beta.84 → 1.0.0-beta.87

package/dist/collection/components/split-button/split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";
@@ -36,8 +36,8 @@ export class SplitButton {
     this.scale = "m";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    this.calciteSplitButtonPrimaryClickHandler = (e) => this.calciteSplitButtonPrimaryClick.emit(e);
-    this.calciteSplitButtonSecondaryClickHandler = (e) => this.calciteSplitButtonSecondaryClick.emit(e);
+    this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
+    this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -69,7 +69,7 @@ export class SplitButton {
       h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText),
       h("div", { class: CSS.dividerContainer },
         h("div", { class: CSS.divider })),
-      h("calcite-dropdown", { active: this.active, disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-trailing", scale: this.scale, width: this.scale },
+      h("calcite-dropdown", { active: this.active, disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, width: this.scale },
         h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary", type: "button" }),
         h("slot", null))));
   }
@@ -243,7 +243,7 @@ export class SplitButton {
         "references": {
           "OverlayPositioning": {
             "location": "import",
-            "path": "../../utils/popper"
+            "path": "../../utils/floating-ui"
           }
         }
       },
@@ -402,12 +402,17 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the primary button is clicked"
+        "text": "fired when the primary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }, {
       "method": "calciteSplitButtonSecondaryClick",
@@ -417,12 +422,17 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the secondary button is clicked"
+        "text": "fired when the secondary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get elementRef() { return "el"; }

package/dist/collection/components/stepper/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/stepper/stepper.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -81,8 +81,8 @@
 :host {
   position: relative;
   display: flex;
-  width: 100%;
-  min-width: 100%;
+  inline-size: 100%;
+  min-inline-size: 100%;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
@@ -94,10 +94,7 @@
   flex-direction: column;
 }
 
-:host ::slotted(.calcite-stepper-content) {
-  display: flex;
-  width: 100%;
-  min-width: 100%;
-  flex-direction: column;
-  flex-wrap: wrap;
+:host([layout=horizontal]) {
+  display: grid;
+  grid-template-areas: "items" "content";
 }

package/dist/collection/components/stepper/stepper.js

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.84
+ * v1.0.0-beta.87
  */
-import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Listen, Method, Prop } from "@stencil/core";
+import { focusElement } from "../../utils/dom";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -33,15 +34,6 @@ export class Stepper {
     /** list of enabled Stepper items */
     this.enabledItems = [];
   }
-  // watch for removal of disabled to register step
-  contentWatcher() {
-    if (this.layout === "horizontal") {
-      if (!this.stepperContentContainer && this.requestedContent) {
-        this.addHorizontalContentContainer();
-      }
-      this.updateContent(this.requestedContent);
-    }
-  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -55,22 +47,24 @@ export class Stepper {
       });
     }
   }
-  componentWillLoad() {
-    if (this.layout === "horizontal" && !this.stepperContentContainer) {
-      this.addHorizontalContentContainer();
-    }
-  }
   render() {
-    return h("slot", null);
+    return (h("slot", { onSlotchange: (event) => {
+        const items = event.currentTarget
+          .assignedElements()
+          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
+        const spacing = Array(items.length).fill("1fr").join(" ");
+        this.el.style.gridTemplateAreas = spacing;
+        this.el.style.gridTemplateColumns = spacing;
+      } }));
   }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteInternalStepperItemKeyEvent(e) {
-    const item = e.detail.item;
-    const itemToFocus = e.target;
+  calciteInternalStepperItemKeyEvent(event) {
+    const item = event.detail.item;
+    const itemToFocus = event.target;
     const isFirstItem = this.itemIndex(itemToFocus) === 0;
     const isLastItem = this.itemIndex(itemToFocus) === this.enabledItems.length - 1;
     switch (item.key) {
@@ -99,38 +93,30 @@ export class Stepper {
         this.focusLastItem();
         break;
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
   registerItem(event) {
     const item = event.target;
     const { content, position } = event.detail;
-    if (content && item.active) {
-      this.requestedContent = content;
-    }
     this.itemMap.set(item, { position, content });
     this.items = this.sortItems();
     this.enabledItems = this.filterItems();
     event.stopPropagation();
   }
   updateItem(event) {
-    const { content, position } = event.detail;
-    if (content) {
-      this.requestedContent = content;
-    }
+    const { position } = event.detail;
     if (typeof position === "number") {
       this.currentPosition = position;
     }
     this.calciteInternalStepperItemChange.emit({
       position
     });
-    event.stopPropagation();
   }
   handleUserRequestedStepperItemSelect(event) {
     const { position } = event.detail;
     this.calciteStepperItemChange.emit({
       position
     });
-    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -196,46 +182,32 @@ export class Stepper {
       ? newIndex
       : null;
   }
-  addHorizontalContentContainer() {
-    this.stepperContentContainer = document.createElement("div");
-    this.stepperContentContainer.classList.add("calcite-stepper-content");
-    this.el.insertAdjacentElement("beforeend", this.stepperContentContainer);
-  }
   updateStep(position) {
-    var _a;
-    const { itemMap, items } = this;
     this.currentPosition = position;
-    const content = (_a = itemMap.get(items[position])) === null || _a === void 0 ? void 0 : _a.content;
-    if (content) {
-      this.requestedContent = content;
-    }
     this.calciteInternalStepperItemChange.emit({
       position
     });
   }
   focusFirstItem() {
     const firstItem = this.enabledItems[0];
-    this.focusElement(firstItem);
+    focusElement(firstItem);
   }
   focusLastItem() {
     const lastItem = this.enabledItems[this.enabledItems.length - 1];
-    this.focusElement(lastItem);
+    focusElement(lastItem);
   }
-  focusNextItem(e) {
-    const index = this.itemIndex(e);
+  focusNextItem(el) {
+    const index = this.itemIndex(el);
     const nextItem = this.enabledItems[index + 1] || this.enabledItems[0];
-    this.focusElement(nextItem);
+    focusElement(nextItem);
   }
-  focusPrevItem(e) {
-    const index = this.itemIndex(e);
+  focusPrevItem(el) {
+    const index = this.itemIndex(el);
     const prevItem = this.enabledItems[index - 1] || this.enabledItems[this.enabledItems.length - 1];
-    this.focusElement(prevItem);
+    focusElement(prevItem);
   }
-  itemIndex(e) {
-    return this.enabledItems.indexOf(e);
-  }
-  focusElement(item) {
-    item === null || item === void 0 ? void 0 : item.focus();
+  itemIndex(el) {
+    return this.enabledItems.indexOf(el);
   }
   sortItems() {
     const { itemMap } = this;
@@ -244,10 +216,6 @@ export class Stepper {
   filterItems() {
     return this.items.filter((item) => !item.disabled);
   }
-  updateContent(content) {
-    this.stepperContentContainer.innerHTML = "";
-    this.stepperContentContainer.append(...content);
-  }
   static get is() { return "calcite-stepper"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -341,28 +309,6 @@ export class Stepper {
       "attribute": "scale",
       "reflect": true,
       "defaultValue": "\"m\""
-    },
-    "requestedContent": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Node[]",
-        "resolved": "Node[]",
-        "references": {
-          "Node": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      }
     }
   }; }
   static get events() { return [{
@@ -501,10 +447,6 @@ export class Stepper {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "requestedContent",
-      "methodName": "contentWatcher"
-    }]; }
   static get listeners() { return [{
       "name": "calciteInternalStepperItemKeyEvent",
       "method": "calciteInternalStepperItemKeyEvent",

package/dist/collection/components/stepper-item/stepper-item.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([layout=horizontal][disabled]) .stepper-item-header,  :host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host([scale=s]) {
   --calcite-stepper-item-spacing-unit-s: 0.25rem;
   --calcite-stepper-item-spacing-unit-m: 0.75rem;
@@ -123,7 +131,7 @@
   flex-grow: 1;
   flex-direction: column;
   align-self: flex-start;
-  margin-bottom: var(--calcite-stepper-item-spacing-unit-s);
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
 }
 
 :host .container {
@@ -133,7 +141,7 @@
   cursor: pointer;
   flex-direction: column;
   border-width: 0px;
-  border-top-width: 2px;
+  border-block-start-width: 2px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
   color: var(--calcite-ui-text-3);
@@ -178,7 +186,7 @@
 
 :host .stepper-item-content {
   display: none;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
@@ -186,9 +194,9 @@
 
 :host .stepper-item-icon {
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
-  margin-top: 1px;
+  margin-block-start: 1px;
   display: inline-flex;
-  height: 0.75rem;
+  block-size: 0.75rem;
   flex-shrink: 0;
   align-self: flex-start;
   color: var(--calcite-ui-text-3);
@@ -206,11 +214,11 @@
 :host .stepper-item-heading, 
 :host .stepper-item-description {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 }
 
 :host .stepper-item-heading {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-2);
 }
@@ -227,13 +235,6 @@
   margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -248,7 +249,7 @@
 }
 
 :host([error]) .container {
-  border-top-color: var(--calcite-ui-danger);
+  border-block-start-color: var(--calcite-ui-danger);
 }
 :host([error]) .container .stepper-item-number {
   color: var(--calcite-ui-danger);
@@ -260,7 +261,7 @@
 
 :host(:hover:not([disabled]):not([active])) .container, 
 :host(:focus:not([disabled]):not([active])) .container {
-  border-top-color: var(--calcite-ui-brand);
+  border-block-start-color: var(--calcite-ui-brand);
 }
 :host(:hover:not([disabled]):not([active])) .container .stepper-item-heading, 
 :host(:focus:not([disabled]):not([active])) .container .stepper-item-heading {
@@ -273,11 +274,11 @@
 
 :host([error]:hover:not([disabled]):not([active])) .container, 
 :host([error]:focus:not([disabled]):not([active])) .container {
-  border-top-color: var(--calcite-ui-danger-hover);
+  border-block-start-color: var(--calcite-ui-danger-hover);
 }
 
 :host([active]) .container {
-  border-top-color: var(--calcite-ui-brand);
+  border-block-start-color: var(--calcite-ui-brand);
 }
 :host([active]) .container .stepper-item-heading {
   color: var(--calcite-ui-text-1);
@@ -293,23 +294,24 @@
   opacity: 1;
 }
 
+:host([active]) .container .stepper-item-content {
+  display: flex;
+}
+
 :host([layout=vertical]) .container {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0px;
+  margin-inline: 0px;
+  margin-block-start: 0px;
   flex: 1 1 auto;
-  border-top-width: 0px;
+  border-block-start-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-block: 0px;
   border-inline-start-width: 2px;
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);
 }
 :host([layout=vertical]) .container .stepper-item-icon {
   order: 3;
-  margin-top: 1px;
-  margin-bottom: 0px;
+  margin-block: 1px 0px;
   padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);
   margin-inline-start: auto;
 }
@@ -320,13 +322,6 @@
   padding: 0px;
 }
 
-:host([layout=vertical][active]) .container .stepper-item-content {
-  display: flex;
-}
-:host([layout=vertical][active]) .container .stepper-item-content ::slotted(:last-child) {
-  margin-bottom: var(--calcite-stepper-item-spacing-unit-l);
-}
-
 :host([layout=vertical][complete]) .container {
   border-color: rgba(0, 122, 194, 0.5);
 }
@@ -343,6 +338,9 @@
 :host([layout=vertical][active]) .container {
   border-color: var(--calcite-ui-brand);
 }
+:host([layout=vertical][active]) .container .stepper-item-content ::slotted(:last-child) {
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-l);
+}
 
 :host([layout=vertical]:hover:not([disabled]):not([active])) .container,
 :host([layout=vertical]:focus:not([disabled]):not([active])) .container {
@@ -354,6 +352,76 @@
   border-color: var(--calcite-ui-danger-hover);
 }
 
+:host([layout=horizontal]) {
+  display: contents;
+}
+:host([layout=horizontal]) .container {
+  display: contents;
+}
+:host([layout=horizontal]) .stepper-item-header {
+  border-width: 0px;
+  border-block-start-width: 2px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+  outline-color: transparent;
+  grid-row: items;
+  margin-inline-end: 0.5rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+:host([layout=horizontal]) .stepper-item-header:focus {
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
+}
+:host([layout=horizontal]) .stepper-item-content {
+  cursor: auto;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  padding-block: 0;
+  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);
+  text-align: start;
+}
+
+:host([layout=horizontal][active]) .stepper-item-content {
+  grid-area: 2/1/2/-1;
+}
+
+:host([layout=horizontal][scale=s]) .stepper-item-header {
+  margin-inline-end: 0.25rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+
+:host([layout=horizontal][scale=l]) .stepper-item-header {
+  margin-inline-end: 0.75rem;
+  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
+}
+
+:host([layout=horizontal][complete]) .stepper-item-header {
+  border-color: rgba(0, 122, 194, 0.5);
+}
+
+:host([layout=horizontal][complete]:hover:not([disabled]):not([active])) .stepper-item-header, 
+:host([layout=horizontal][complete]:focus:not([disabled]):not([active])) .stepper-item-header {
+  border-color: var(--calcite-ui-brand);
+}
+
+:host([layout=horizontal][error]) .stepper-item-header {
+  border-color: var(--calcite-ui-danger);
+}
+
+:host([layout=horizontal][active]) .stepper-item-header {
+  border-color: var(--calcite-ui-brand);
+}
+
+:host([layout=horizontal]:hover:not([disabled]):not([active])) .stepper-item-header,
+:host([layout=horizontal]:focus:not([disabled]):not([active])) .stepper-item-header {
+  border-color: rgba(0, 122, 194, 0.5);
+}
+
+:host([layout=horizontal][error]:hover:not([disabled]):not([active])) .stepper-item-header, 
+:host([layout=horizontal][error]:focus:not([disabled]):not([active])) .stepper-item-header {
+  border-color: var(--calcite-ui-danger-hover);
+}
+
 @media (forced-colors: active) {
   :host .container {
     outline-width: 0;
@@ -366,7 +434,7 @@
   }
 
   :host([active]) .container {
-    border-top-color: highlight;
+    border-block-start-color: highlight;
   }
   :host([active]) .container .stepper-item-number {
     color: highlight;