@esri/calcite-components 5.1.0-next.55 → 5.1.0-next.57

package/dist/components/calcite-shell-panel/customElement.js

@@ -37,6 +37,7 @@ class ShellPanel extends LitElement {
   constructor() {
     super(...arguments);
     this.direction = useDirection();
+    this.resizeHandleRef = createRef();
     this.actionBars = [];
     this.contentRef = createRef();
     this.messages = useT9n();
@@ -79,13 +80,30 @@ class ShellPanel extends LitElement {
   async updateSize(size) {
     this.updateSizeInternal(size);
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this.refreshResize();
+    }
+  }
   willUpdate(changes) {
+    let shouldRefreshResize = false;
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.setActionBarsLayout(this.actionBars);
-      this.setupInteractions();
+      this.updateSizeInternal({ inline: null, block: null });
+      shouldRefreshResize = true;
     }
     if (changes.has("direction") && this.hasUpdated || changes.has("position") && (this.hasUpdated || this.position !== "start")) {
-      this.setupInteractions();
+      shouldRefreshResize = true;
+    }
+    if (changes.has("collapsed") && (this.hasUpdated || this.collapsed !== false) || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
+      shouldRefreshResize = this.resizable && !this.collapsed;
+      if (!shouldRefreshResize) {
+        this.cleanUpInteractions();
+      }
+    }
+    if (shouldRefreshResize) {
+      this.refreshResize();
     }
     if (changes.has("collapsed") && this.hasUpdated) {
       if (this.collapsed) {
@@ -97,7 +115,7 @@ class ShellPanel extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.cleanupInteractions();
+    this.cleanUpInteractions();
   }
   getContentElDOMRect() {
     return this.contentRef.value.getBoundingClientRect();
@@ -154,43 +172,54 @@ class ShellPanel extends LitElement {
         break;
     }
   }
-  cleanupInteractions() {
+  cleanUpInteractions() {
     this.interaction?.unset();
   }
-  async setupInteractions() {
-    this.cleanupInteractions();
-    const { el, contentRef, resizable, position, collapsed, resizeHandleEl, layout } = this;
-    if (!contentRef.value || collapsed || !resizable || !resizeHandleEl) {
+  updateResizeValues() {
+    const { contentRef } = this;
+    if (!contentRef.value) {
       return;
     }
-    await this.el.componentOnReady();
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentRef.value);
-    const values = {
-      inlineSize: getStylePixelValue(inlineSize),
-      blockSize: getStylePixelValue(blockSize),
-      minInlineSize: getStylePixelValue(minInlineSize),
-      minBlockSize: getStylePixelValue(minBlockSize),
-      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
-      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
+    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
     };
-    this.resizeValues = values;
+  }
+  async refreshResize() {
+    await this.componentOnReady();
+    await this.updateComplete;
+    this.updateResizeValues();
+    this.setUpResizeInteractions();
+  }
+  setUpResizeInteractions() {
+    this.cleanUpInteractions();
+    const { el, contentRef, resizable, position, collapsed, resizeHandleRef, layout } = this;
+    const resizeHandle = resizeHandleRef.value;
+    if (!contentRef.value || collapsed || !resizable || !resizeHandle) {
+      return;
+    }
     const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
-        top: position === "end" && layout === "horizontal" ? resizeHandleEl : false,
-        right: position === (rtl ? "end" : "start") && layout === "vertical" ? resizeHandleEl : false,
-        bottom: position === "start" && layout === "horizontal" ? resizeHandleEl : false,
-        left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandleEl : false
+        top: position === "end" && layout === "horizontal" ? resizeHandle : false,
+        right: position === (rtl ? "end" : "start") && layout === "vertical" ? resizeHandle : false,
+        bottom: position === "start" && layout === "horizontal" ? resizeHandle : false,
+        left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandle : false
       },
       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
           }
         })
       ],
@@ -208,10 +237,6 @@ class ShellPanel extends LitElement {
       }
     });
   }
-  setResizeHandleEl(el) {
-    this.resizeHandleEl = el;
-    this.setupInteractions();
-  }
   setActionBarsLayout(actionBars) {
     actionBars.forEach((actionBar) => actionBar.layout = this.layout);
   }
@@ -234,7 +259,7 @@ class ShellPanel extends LitElement {
     const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
     const dir = this.direction;
     const isBlockPosition = layout === "horizontal";
-    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
+    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.resizeHandleRef)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
         return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp;