@esri/calcite-components 5.1.1-next.5 → 5.1.1

package/dist/components/calcite-rating/customElement.js

@@ -90,16 +90,12 @@ class Rating extends LitElement {
   willUpdate() {
     this.starsMap = Array.from({ length: this.max }, (_, i) => {
       const value = i + 1;
-      const hoverValue = this.hoverValue ?? 0;
-      const hasHoverValue = hoverValue > 0;
-      const hasAverage = this.average != null;
-      const averageValue = this.average ?? 0;
-      const average = !hasHoverValue && hasAverage && !this.value && value <= averageValue;
+      const average = !this.hoverValue && this.average && !this.value && value <= this.average;
       const checked = value === this.value;
-      const fraction = hasAverage ? averageValue + 1 - value : 0;
-      const hovered = hasHoverValue && value <= hoverValue;
+      const fraction = this.average && this.average + 1 - value;
+      const hovered = value <= this.hoverValue;
       const id = `${this.guid}-${value}`;
-      const partial = !hasHoverValue && !this.value && hasAverage && !hovered && fraction > 0 && fraction < 1;
+      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
       const selected = this.value >= value;
       const tabIndex = this.getTabIndex(value);
       return {
@@ -137,7 +133,7 @@ class Rating extends LitElement {
   }
   handleRatingPointerOut() {
     this.isKeyboardInteraction = true;
-    this.hoverValue = void 0;
+    this.hoverValue = null;
   }
   handleHostKeyDown() {
     this.isKeyboardInteraction = true;
@@ -145,7 +141,7 @@ class Rating extends LitElement {
   handleLabelKeyDown(event) {
     const inputValue = this.getValueFromLabelEvent(event);
     const key = event.key;
-    const numberKey = key == " " ? NaN : Number(key);
+    const numberKey = key == " " ? void 0 : Number(key);
     this.emit = true;
     if (isNaN(numberKey)) {
       switch (key) {
@@ -164,7 +160,7 @@ class Rating extends LitElement {
           event.preventDefault();
           break;
         case "Tab":
-          this.hoverValue = void 0;
+          this.hoverValue = null;
           break;
       }
     } else {
@@ -178,7 +174,7 @@ class Rating extends LitElement {
   }
   handleInputChange(event) {
     if (this.isKeyboardInteraction === true) {
-      const inputVal = Number(event.target.value);
+      const inputVal = Number(event.target["value"]);
       this.hoverValue = inputVal;
       this.value = inputVal;
     }
@@ -203,7 +199,7 @@ class Rating extends LitElement {
   }
   updateFocus() {
     this.hoverValue = this.value;
-    this.labelElements[this.value - 1]?.focus();
+    this.labelElements[this.value - 1].focus();
   }
   getTabIndex(value) {
     if (this.readOnly || this.value !== value && (this.value || value !== 1)) {

package/dist/components/calcite-sheet/customElement.js

@@ -138,16 +138,14 @@ class Sheet extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    if (this.hasUpdated) {
-      this.refreshResize();
-    }
+    this.setupInteractions();
   }
   willUpdate(changes) {
     if (changes.has("opened") && (this.hasUpdated || this.opened !== false) && this.transitionRef.value) {
       toggleOpenClose(this);
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("direction")) {
-      this.refreshResize();
+      this.setupInteractions();
     }
     if (this.contentRef.value) {
       this.contentId = ensureId(this.contentRef.value);
@@ -157,7 +155,7 @@ class Sheet extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.embedded = false;
-    this.cleanUpInteractions();
+    this.cleanupInteractions();
   }
   async setOpenState(value) {
     if (this.beforeClose && !value) {
@@ -232,34 +230,31 @@ class Sheet extends LitElement {
     }
     this.sizeOverride.resize(size);
   }
-  cleanUpInteractions() {
+  cleanupInteractions() {
     this.interaction?.unset();
   }
-  updateResizeValues() {
-    const { contentRef } = this;
-    if (!contentRef.value) {
-      return;
-    }
-    const computedStyle = window.getComputedStyle(contentRef.value);
-    this.resizeValues = {
-      inlineSize: getStylePixelValue(computedStyle.inlineSize),
-      blockSize: getStylePixelValue(computedStyle.blockSize),
-      minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
-      minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
-      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
-      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
-    };
-  }
-  refreshResize() {
-    this.updateResizeValues();
-    this.setUpResizeInteractions();
-  }
-  setUpResizeInteractions() {
-    this.cleanUpInteractions();
+  async setupInteractions() {
+    this.cleanupInteractions();
     const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
     if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
       return;
     }
+    await this.el.componentOnReady();
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    this.resizeValues.minInlineSize = parseInt(computedStyle.minInlineSize) || 0;
+    this.resizeValues.maxInlineSize = parseInt(computedStyle.maxInlineSize) || window.innerWidth;
+    this.resizeValues.minBlockSize = parseInt(computedStyle.minBlockSize) || 0;
+    this.resizeValues.maxBlockSize = parseInt(computedStyle.maxBlockSize) || window.innerHeight;
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = computedStyle;
+    const values = {
+      inlineSize: getStylePixelValue(inlineSize),
+      blockSize: getStylePixelValue(blockSize),
+      minInlineSize: getStylePixelValue(minInlineSize),
+      minBlockSize: getStylePixelValue(minBlockSize),
+      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
+      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
+    };
+    this.resizeValues = values;
     const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
@@ -271,12 +266,12 @@ class Sheet extends LitElement {
       modifiers: [
         interact.modifiers.restrictSize({
           min: {
-            width: this.resizeValues.minInlineSize,
-            height: this.resizeValues.minBlockSize
+            width: values.minInlineSize,
+            height: values.minBlockSize
           },
           max: {
-            width: this.resizeValues.maxInlineSize,
-            height: this.resizeValues.maxBlockSize
+            width: values.maxInlineSize,
+            height: values.maxBlockSize
           }
         })
       ],
@@ -309,7 +304,7 @@ class Sheet extends LitElement {
   }
   setResizeHandleEl(el) {
     this.resizeHandleEl = el;
-    this.refreshResize();
+    this.setupInteractions();
   }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {

package/dist/components/calcite-stack/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { S as SLOTS, C as CSS } from "../../chunks/resources8.js";
+import { S as SLOTS, C as CSS } from "../../chunks/resources9.js";
 const styles = css`:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);padding-inline:var(--calcite-stack-padding-inline, .75rem);padding-block:var(--calcite-stack-padding-block, .5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}`;
 class Stack extends LitElement {
   constructor() {

package/dist/controllers/useSortable.d.ts

@@ -2,6 +2,6 @@ export interface DragDetail<To extends HTMLElement = HTMLElement, From extends H
   toEl: To;
   fromEl: From;
   dragEl: Drag;
-  newIndex?: number;
-  oldIndex?: number;
+  newIndex: number;
+  oldIndex: number;
 }