Update/[email protected]

package.json

@@ -45,12 +45,12 @@
     "docs:assets": "cp -r docs/assets/** docs/dist/assets"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^9.1.1",
+    "@shopify/polaris-icons": "9.3.0",
     "vite-svg-loader": "^5.1.0"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
-    "@shopify/polaris-tokens": "^9.1.0",
+    "@shopify/polaris-tokens": "9.4.0",
     "@shopify/postcss-plugin": "^5.0.2",
     "@types/node": "^20.10.4",
     "@vitejs/plugin-vue": "^5.0.5",

src/components/ColorPicker/ColorPicker.vue

@@ -25,14 +25,10 @@ div(
     :color="colorHsb",
     @change="handleAlphaChange",
   )
-  EventListener(
-    event="resize",
-    :handler="handleResize",
-  )
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
 import { debounce } from '@polaris/utilities/debounce';
 import { clamp } from '@polaris/utilities/clamp';
 import { classNames } from '@/utilities/css';
@@ -43,7 +39,6 @@ import {
   hexToRgb,
   rgbToHsb,
 } from '@/utilities/color-transformers';
-import { EventListener } from '@/components';
 import { AlphaPicker, HuePicker, Slidable } from './components';
 import styles from '@polaris/components/ColorPicker/ColorPicker.module.css';
 
@@ -88,6 +83,7 @@ const colorHsb = reactive<HSBAColor>({
 });
 
 const colorNode = ref<HTMLElement | null>(null);
+const observer = ref<ResizeObserver | null>(null);
 const huePickerRef = ref<HTMLElement | null>(null);
 
 const draggerX = computed(() => clamp(colorHsb.saturation * pickerSize.width, 0, pickerSize.width));
@@ -162,6 +158,9 @@ onMounted(() => {
     return;
   }
 
+  observer.value = new ResizeObserver(handleResize);
+  observer.value.observe(colorNode.value);
+
   pickerSize.width = colorNode.value.clientWidth;
   pickerSize.height = colorNode.value.clientHeight;
 });
@@ -175,6 +174,10 @@ const handleResize = debounce(() => {
   pickerSize.height = colorNode.value.clientHeight;
 }, RESIZE_DEBOUNCE_TIME_MS, { leading: true, trailing: true, maxWait: RESIZE_DEBOUNCE_TIME_MS });
 
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
+})
+
 const handleHueChange = (hue: number) => {
   colorHsb.hue = hue;
 

src/components/ColorPicker/components/AlphaPicker/AlphaPicker.vue

@@ -16,7 +16,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, onBeforeUnmount } from 'vue';
 import type { HSBColor } from '@polaris/utilities/color-types';
 import { hsbToRgb } from '@/utilities/color-transformers';
 import { Slidable } from '../Slidable';
@@ -39,6 +39,7 @@ const emits = defineEmits<AlphaPickerEvents>();
 const sliderHeight = ref(0);
 const draggerHeight = ref(0);
 const alphaPickerRef = ref<HTMLElement | null>(null);
+const observer = ref<ResizeObserver | null>(null);
 
 const draggerY = computed(() => {
   return calculateDraggerY(props.alpha, sliderHeight.value, draggerHeight.value);
@@ -49,9 +50,19 @@ const background = computed(() => {
 });
 
 onMounted(() => {
+  if (!alphaPickerRef.value) { return; }
+
+  observer.value = new ResizeObserver(() => { setSliderHeight(); });
+
+  observer.value.observe(alphaPickerRef.value);
+
   setSliderHeight();
 });
 
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
+});
+
 const setSliderHeight = () => {
   if (alphaPickerRef.value) {
     sliderHeight.value = alphaPickerRef.value.clientHeight;

src/components/ColorPicker/components/HuePicker/HuePicker.vue

@@ -12,7 +12,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
 import { calculateDraggerY, hueForDraggerY } from '@polaris/components/ColorPicker/components/HuePicker/utilities';
 import styles from '@polaris/components/ColorPicker/ColorPicker.module.css';
 import { Slidable } from '../Slidable';
@@ -31,15 +31,30 @@ const emits = defineEmits<HuePickerEvents>();
 const sliderHeight = ref(0);
 const draggerHeight = ref(0);
 const huePickerRef = ref<HTMLElement | null>(null);
+const observer = ref<ResizeObserver | null>(null);
 
 const draggerY = computed(() => {
   return calculateDraggerY(props.hue, sliderHeight.value, draggerHeight.value);
 });
 
 onMounted(() => {
+  if (!huePickerRef.value) {
+    return;
+  }
+
+  observer.value = new ResizeObserver(() => {
+    setSliderHeight();
+  });
+
+  observer.value.observe(huePickerRef.value);
+
   setSliderHeight();
 });
 
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
+});
+
 const setSliderHeight = () => {
   if (!huePickerRef.value) {
     return;

src/components/ColorPicker/components/Slidable/Slidable.vue

@@ -41,7 +41,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, onBeforeUnmount } from 'vue';
 import { isServer } from '@polaris/utilities/target';
 import { EventListener } from '@/components';
 
@@ -77,6 +77,7 @@ if (!isServer) {
 
 const nodeRef = ref<HTMLElement | null>(null);
 const draggerNode = ref<HTMLElement | null>(null);
+const observer = ref<ResizeObserver | null>(null);
 
 const draggerPositioning = computed(() => ({
   transform: `translate3d(${props.draggerX}px, ${props.draggerY}px, 0)`,
@@ -87,7 +88,26 @@ onMounted(() => {
     return;
   }
 
-  emits('dragger-height', draggerNode.value.clientWidth);
+  observer.value = new ResizeObserver(() => {
+    /**
+     * This is a workaround to enable event listeners to be
+     * re-attached when moving from one document to another
+     * when using a React portal across iframes.
+     * Using a resize observer works because when the clientWidth
+     * will go from 0 to the real width after the node
+     * gets rendered in its new place.
+     */
+    // if (window !== draggerNode.value?.ownerDocument.defaultView) {
+    //   (window as Window) = draggerNode.value?.ownerDocument.defaultView as Window;
+    // }
+    handleResize();
+  });
+
+  observer.value.observe(draggerNode.value);
+});
+
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
 });
 
 const startDrag = (event: MouseEvent | TouchEvent) => {
@@ -98,6 +118,14 @@ const startDrag = (event: MouseEvent | TouchEvent) => {
   isDragging.value = true;
 };
 
+const handleResize = () => {
+  if (!draggerNode.value) {
+    return;
+  }
+
+  emits('dragger-height', draggerNode.value.clientWidth);
+}
+
 const handleDragEnd = () => {
   isDragging.value = false;
 };

src/components/DropZone/DropZone.vue

@@ -194,13 +194,16 @@ const currentInstance = getCurrentInstance();
 const dropNodeRef = ref<HTMLDivElement | null>(null);
 const inputRef = ref<HTMLInputElement | null>(null);
 const dragTargets = ref<HTMLElement[]>([]);
+const observer = ref<ResizeObserver | null>(null);
 
 const dragging = ref(false);
 const internalError = ref(false);
 const { value: focused, setTrue: handleFocus, setFalse: handleBlur } = useToggle(false);
 const size = ref('large');
 const measuring = ref(true);
 
+const customDocument = dropNodeRef.value?.ownerDocument || document;
+
 const id = computed(() => props.id || uniqId);
 const typeSuffix = computed(() => capitalize(props.type));
 const allowMultipleKey = computed(() => createAllowMultipleKey(props.allowMultiple));
@@ -337,7 +340,7 @@ const handleDragLeave = (event: Event) => {
   if (props.disabled) return;
 
   dragTargets.value = dragTargets.value.filter((el) => {
-    const compareNode = props.dropOnPage ? document : dropNodeRef.value;
+    const compareNode = props.dropOnPage ? customDocument : dropNodeRef.value;
 
     return el !== event.target && compareNode && compareNode.contains(el);
   });
@@ -382,10 +385,20 @@ watch(
   },
 );
 
+watch(
+  () => adjustSize,
+  () => {
+    if (!dropNodeRef.value) return;
+
+    observer.value = new ResizeObserver(adjustSize);
+    observer.value.observe(dropNodeRef.value);
+  },
+)
+
 onMounted(() => {
   adjustSize();
 
-  const dropNode = props.dropOnPage ? document : dropNodeRef.value;
+  const dropNode = props.dropOnPage ? customDocument : dropNodeRef.value;
 
   if (!dropNode) return;
 
@@ -397,7 +410,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  const dropNode = props.dropOnPage ? document : dropNodeRef.value;
+  const dropNode = props.dropOnPage ? customDocument : dropNodeRef.value;
 
   if (!dropNode) return;
 
@@ -406,6 +419,8 @@ onBeforeUnmount(() => {
   dropNode.removeEventListener('dragenter', handleDragEnter);
   dropNode.removeEventListener('dragleave', handleDragLeave);
   window.removeEventListener('resize', adjustSize);
+
+  observer.value?.disconnect();
 });
 
 const context = reactive<DropZoneContextType>({

src/components/EventListener/EventListener.vue

@@ -15,6 +15,7 @@ type EventListenerProps = {
   capture?: boolean;
   handler(event: Event): void;
   passive?: boolean;
+  customWindow?: Window | null;
 }
 
 const props = defineProps<EventListenerProps>();
@@ -38,13 +39,17 @@ watch(
 );
 
 function attachListener() {
+  const window = props.customWindow || globalThis.window;
+
   window.addEventListener(props.event, props.handler, {
     capture: props.capture,
     passive: props.passive,
   });
 }
 
 function detachListener() {
+  const window = props.customWindow || globalThis.window;
+
   window.removeEventListener(props.event, props.handler, {
     capture: props.capture,
   });

src/components/Popover/Popover.vue

@@ -5,7 +5,7 @@ component(
 )
   slot(name="activator")
   Portal(
-    v-if="activatorNode",
+    v-if="activatorNode && isDisplayed",
     id-prefix="popover",
   )
     PopoverOverlay(
@@ -25,6 +25,7 @@ component(
 <script setup lang="ts">
 import {
   onMounted,
+  onBeforeUnmount,
   ref,
   watch,
 } from 'vue';
@@ -56,6 +57,8 @@ const slots = defineSlots<{
 
 const id = useId();
 
+const observer = ref<ResizeObserver | null>(null);
+const isDisplayed = ref<boolean>(false);
 const activatorNode = ref<HTMLElement | null>(null);
 const activatorContainer = ref<HTMLElement | null>(null);
 const overlayRef = ref<InstanceType<typeof PopoverOverlay> | HTMLElement | null>(null);
@@ -135,9 +138,25 @@ onMounted(() => {
     activatorNode.value = activatorContainer.value.firstElementChild as HTMLElement;
   }
 
+  if (!activatorNode.value) {
+    return;
+  }
+
+  observer.value = new ResizeObserver(() => {
+    setDisplayState();
+  });
+
+  observer.value.observe(activatorNode.value);
+
+  setDisplayState();
+
   setAccessibilityAttributes();
 });
 
+onBeforeUnmount(() => {
+  observer.value?.disconnect();
+});
+
 function isInPortal(element: Element) {
   let { parentElement } = element;
 
@@ -149,7 +168,32 @@ function isInPortal(element: Element) {
   return true;
 };
 
+function setDisplayState() {
+  /**
+   * This is a workaround to prevent rendering the Popover when the content is moved into
+   * a React portal that hasn't been rendered. We don't want to render the Popover in this
+   * case because the auto-focus logic will break. We wait until the activatorContainer is
+   * displayed, which is when it has an offsetParent, or if the activatorContainer is the
+   * body, if it has a clientWidth bigger than 0.
+   * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+   */
+  isDisplayed.value = Boolean(
+    activatorContainer.value
+    && (activatorContainer.value.offsetParent !== null
+      || (activatorContainer.value === activatorContainer.value.ownerDocument.body
+        && activatorContainer.value.clientWidth > 0)),
+  );
+}
+
 defineExpose({
   forceUpdatePosition,
+  close: (target = 'activator') => {
+    const source =
+      target === 'activator'
+        ? PopoverCloseSource.EscapeKeypress
+        : PopoverCloseSource.FocusOut;
+
+    handleClose(source);
+  },
 });
 </script>