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

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.86
+ * 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;

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

@@ -1,9 +1,9 @@
 /*!
  * 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.86
+ * v1.0.0-beta.87
  */
-import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -42,13 +42,13 @@ export class StepperItem {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.keyDownHandler = (e) => {
-      if (!this.disabled && e.target === this.el) {
-        switch (e.key) {
+    this.keyDownHandler = (event) => {
+      if (!this.disabled && event.target === this.el) {
+        switch (event.key) {
           case " ":
           case "Enter":
             this.emitUserRequestedItem();
-            e.preventDefault();
+            event.preventDefault();
             break;
           case "ArrowUp":
           case "ArrowDown":
@@ -56,8 +56,8 @@ export class StepperItem {
           case "ArrowRight":
           case "Home":
           case "End":
-            this.calciteInternalStepperItemKeyEvent.emit({ item: e });
-            e.preventDefault();
+            this.calciteInternalStepperItemKeyEvent.emit({ item: event });
+            event.preventDefault();
             break;
         }
       }
@@ -74,19 +74,13 @@ export class StepperItem {
     this.emitRequestedItem = () => {
       if (!this.disabled) {
         const position = this.itemPosition;
-        const content = this.itemContent;
         this.calciteInternalStepperItemSelect.emit({
-          position,
-          content
+          position
         });
       }
     };
-    this.setItemContent = (event) => {
+    this.setItemContent = () => {
       this.itemPosition = this.getItemPosition();
-      const itemContent = event.target.assignedNodes({ flatten: true });
-      if (itemContent.length) {
-        this.itemContent = itemContent;
-      }
       this.registerStepperItem();
       if (this.active) {
         this.emitRequestedItem();
@@ -120,7 +114,9 @@ export class StepperItem {
   render() {
     return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.emitUserRequestedItem, onKeyDown: this.keyDownHandler },
       h("div", { class: "container" },
-        h("div", { class: "stepper-item-header" },
+        h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
+          /* additional tab index logic needed because of display: contents */
+          this.layout === "horizontal" && !this.disabled ? 0 : null },
           this.icon ? this.renderIcon() : null,
           this.numbered ? (h("div", { class: "stepper-item-number" },
             this.getItemPosition() + 1,
@@ -142,7 +138,15 @@ export class StepperItem {
       this.activePosition = event.detail.position;
       this.determineActiveItem();
     }
-    event.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  async setFocus() {
+    var _a;
+    (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   renderIcon() {
     const path = this.active
@@ -159,8 +163,7 @@ export class StepperItem {
   }
   registerStepperItem() {
     this.calciteInternalStepperItemRegister.emit({
-      position: this.itemPosition,
-      content: this.itemContent
+      position: this.itemPosition
     });
   }
   getItemPosition() {
@@ -512,6 +515,24 @@ export class StepperItem {
         }
       }
     }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "disabled",