@esri/calcite-components 5.1.1-next.1 → 5.1.1-next.3

package/dist/components/calcite-focus-trap/customElement.js

@@ -3,11 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent } from "@arcgis/lumina";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
+import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const styles = css`:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class FocusTrap extends LitElement {
   constructor() {
     super(...arguments);
     this._active = false;
+    this.focusSetter = useSetFocus()(this);
     this.focusTrapController = useFocusTrap({
       focusTrapOptions: {
         onActivate: () => {
@@ -36,6 +38,9 @@ class FocusTrap extends LitElement {
   async deactivate() {
     this.focusTrapController.deactivate();
   }
+  async setFocus(options) {
+    return this.focusSetter(() => this.el, options);
+  }
   async updateFocusTrapElements(extraContainers) {
     this.focusTrapController.setExtraContainers(extraContainers);
     this.focusTrapController.updateContainerElements();

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

@@ -456,7 +456,8 @@ class List extends LitElement {
     this.updateListItemsDebounced();
   }
   async filterAndUpdateData() {
-    await this.filterEl?.filter(this.filterText);
+    const filterValue = this.filterEl?.value ?? this.filterText;
+    await this.filterEl?.filter(filterValue);
     this.updateFilteredData();
   }
   performFilter() {

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) {