@esri/calcite-components 5.1.1-next.0 → 5.1.1-next.2

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

@@ -138,14 +138,16 @@ class Sheet extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.setupInteractions();
+    if (this.hasUpdated) {
+      this.refreshResize();
+    }
   }
   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.setupInteractions();
+      this.refreshResize();
     }
     if (this.contentRef.value) {
       this.contentId = ensureId(this.contentRef.value);
@@ -155,7 +157,7 @@ class Sheet extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.embedded = false;
-    this.cleanupInteractions();
+    this.cleanUpInteractions();
   }
   async setOpenState(value) {
     if (this.beforeClose && !value) {
@@ -230,31 +232,34 @@ class Sheet extends LitElement {
     }
     this.sizeOverride.resize(size);
   }
-  cleanupInteractions() {
+  cleanUpInteractions() {
     this.interaction?.unset();
   }
-  async setupInteractions() {
-    this.cleanupInteractions();
-    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
-    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
+  updateResizeValues() {
+    const { contentRef } = this;
+    if (!contentRef.value) {
       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 = {
+      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
     };
-    this.resizeValues = values;
+  }
+  refreshResize() {
+    this.updateResizeValues();
+    this.setUpResizeInteractions();
+  }
+  setUpResizeInteractions() {
+    this.cleanUpInteractions();
+    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
+    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
+      return;
+    }
     const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
@@ -266,12 +271,12 @@ class Sheet extends LitElement {
       modifiers: [
         interact.modifiers.restrictSize({
           min: {
-            width: values.minInlineSize,
-            height: values.minBlockSize
+            width: this.resizeValues.minInlineSize,
+            height: this.resizeValues.minBlockSize
           },
           max: {
-            width: values.maxInlineSize,
-            height: values.maxBlockSize
+            width: this.resizeValues.maxInlineSize,
+            height: this.resizeValues.maxBlockSize
           }
         })
       ],
@@ -304,7 +309,7 @@ class Sheet extends LitElement {
   }
   setResizeHandleEl(el) {
     this.resizeHandleEl = el;
-    this.setupInteractions();
+    this.refreshResize();
   }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {