@ulu/frontend 0.1.0-beta.81 → 0.1.0-beta.82

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.1.0-beta.82
+
+- **js/utils/dialog.js**
+  - Remove native resize detection (resizeObserver, etc) since all resizing is done by resizer now
+    - Backed up this idea to reference/ideas/removed-idea-on-how-to-detect-native-resizing-has-no-event.js incase it's needed in the future
+  - Add flag internally to ensure that click outside is prevented if the pointer event originated from a resizer event
+
 ## 0.1.0-beta.81
 
 - **scss/components/css-icons.scss** 

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.82">0.1.0-beta.82</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.81">0.1.0-beta.81</a>
             		</li>
 
@@ -5487,6 +5490,19 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.82" tabindex="-1">0.1.0-beta.82</h2>
+<ul>
+<li><strong>js/utils/dialog.js</strong>
+<ul>
+<li>Remove native resize detection (resizeObserver, etc) since all resizing is done by resizer now
+<ul>
+<li>Backed up this idea to reference/ideas/removed-idea-on-how-to-detect-native-resizing-has-no-event.js incase it's needed in the future</li>
+</ul>
+</li>
+<li>Add flag internally to ensure that click outside is prevented if the pointer event originated from a resizer event</li>
+</ul>
+</li>
+</ul>
 <h2 id="0.1.0-beta.81" tabindex="-1">0.1.0-beta.81</h2>
 <ul>
 <li><strong>scss/components/css-icons.scss</strong>

package/docs-dev/demos/card/index.html

@@ -5214,60 +5214,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-1" name="title" checked="">
-<label for="live-demo-id-1">
+  <input type="checkbox" id="live-demo-id-89" name="title" checked="">
+<label for="live-demo-id-89">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-2" name="body" checked="">
-<label for="live-demo-id-2">
+  <input type="checkbox" id="live-demo-id-90" name="body" checked="">
+<label for="live-demo-id-90">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-3" name="content" checked="">
-<label for="live-demo-id-3">
+  <input type="checkbox" id="live-demo-id-91" name="content" checked="">
+<label for="live-demo-id-91">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-4" name="aside" checked="">
-<label for="live-demo-id-4">
+  <input type="checkbox" id="live-demo-id-92" name="aside" checked="">
+<label for="live-demo-id-92">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-5" name="footer" checked="">
-<label for="live-demo-id-5">
+  <input type="checkbox" id="live-demo-id-93" name="footer" checked="">
+<label for="live-demo-id-93">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-6">
+<label for="live-demo-id-94">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-6" name="action">
+  <select id="live-demo-id-94" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-7">
+<label for="live-demo-id-95">
   Media
 </label>  
-  <select id="live-demo-id-7" name="media">
+  <select id="live-demo-id-95" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-8">
+<label for="live-demo-id-96">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-8" name="layout">
+  <select id="live-demo-id-96" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

package/docs-dev/demos/data-table/index.html

@@ -5252,178 +5252,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-1">
+<table class="data-table data-table--striped" id="dt-45">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-1-type" rowspan="2">Type</th>
-      <th id="dt-1-group" colspan="2">Group</th>
-      <th id="dt-1-details" colspan="2">Details</th>
-      <th id="dt-1-id" rowspan="2">Id</th>
+      <th id="dt-45-type" rowspan="2">Type</th>
+      <th id="dt-45-group" colspan="2">Group</th>
+      <th id="dt-45-details" colspan="2">Details</th>
+      <th id="dt-45-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
-      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
-      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
-      <th headers="dt-1-details" id="dt-1-after">After Task</th>
+      <th headers="dt-45-group" id="dt-45-primary">Primary</th>
+      <th headers="dt-45-group" id="dt-45-secondary">Secondary</th>
+      <th headers="dt-45-details" id="dt-45-before">Before Task</th>
+      <th headers="dt-45-details" id="dt-45-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-45-type dt-45-r1" id="dt-45-r1">Default</th>
+      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-45-group dt-45-primary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-group dt-45-secondary dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-before dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-details dt-45-after dt-45-r1">Lorem Ipsum</td>
+      <td headers="dt-45-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-2">
+<table class="data-table data-table--large-first" id="dt-46">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-2-type" rowspan="2">Type</th>
-      <th id="dt-2-group" colspan="2">Group</th>
-      <th id="dt-2-details" colspan="2">Details</th>
-      <th id="dt-2-id" rowspan="2">Id</th>
+      <th id="dt-46-type" rowspan="2">Type</th>
+      <th id="dt-46-group" colspan="2">Group</th>
+      <th id="dt-46-details" colspan="2">Details</th>
+      <th id="dt-46-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
-      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
-      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
-      <th headers="dt-2-details" id="dt-2-after">After Task</th>
+      <th headers="dt-46-group" id="dt-46-primary">Primary</th>
+      <th headers="dt-46-group" id="dt-46-secondary">Secondary</th>
+      <th headers="dt-46-details" id="dt-46-before">Before Task</th>
+      <th headers="dt-46-details" id="dt-46-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-46-type dt-46-r1" id="dt-46-r1">Default</th>
+      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <td headers="dt-46-group dt-46-primary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-group dt-46-secondary dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-before dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-details dt-46-after dt-46-r1">Lorem Ipsum</td>
+      <td headers="dt-46-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-3">
+<table class="data-table data-table--large-header" id="dt-47">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-3-type" rowspan="2">Type</th>
-      <th id="dt-3-group" colspan="2">Group</th>
-      <th id="dt-3-details" colspan="2">Details</th>
-      <th id="dt-3-id" rowspan="2">Id</th>
+      <th id="dt-47-type" rowspan="2">Type</th>
+      <th id="dt-47-group" colspan="2">Group</th>
+      <th id="dt-47-details" colspan="2">Details</th>
+      <th id="dt-47-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
-      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
-      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
-      <th headers="dt-3-details" id="dt-3-after">After Task</th>
+      <th headers="dt-47-group" id="dt-47-primary">Primary</th>
+      <th headers="dt-47-group" id="dt-47-secondary">Secondary</th>
+      <th headers="dt-47-details" id="dt-47-before">Before Task</th>
+      <th headers="dt-47-details" id="dt-47-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-47-type dt-47-r1" id="dt-47-r1">Default</th>
+      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-47-group dt-47-primary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-group dt-47-secondary dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-before dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-details dt-47-after dt-47-r1">Lorem Ipsum</td>
+      <td headers="dt-47-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-4">
+<table class="data-table data-table--no-border" id="dt-48">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-4-type" rowspan="2">Type</th>
-      <th id="dt-4-group" colspan="2">Group</th>
-      <th id="dt-4-details" colspan="2">Details</th>
-      <th id="dt-4-id" rowspan="2">Id</th>
+      <th id="dt-48-type" rowspan="2">Type</th>
+      <th id="dt-48-group" colspan="2">Group</th>
+      <th id="dt-48-details" colspan="2">Details</th>
+      <th id="dt-48-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
-      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
-      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
-      <th headers="dt-4-details" id="dt-4-after">After Task</th>
+      <th headers="dt-48-group" id="dt-48-primary">Primary</th>
+      <th headers="dt-48-group" id="dt-48-secondary">Secondary</th>
+      <th headers="dt-48-details" id="dt-48-before">Before Task</th>
+      <th headers="dt-48-details" id="dt-48-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-48-type dt-48-r1" id="dt-48-r1">Default</th>
+      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <td headers="dt-48-group dt-48-primary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-group dt-48-secondary dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-before dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-details dt-48-after dt-48-r1">Lorem Ipsum</td>
+      <td headers="dt-48-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/js/ui/dialog.js

@@ -2,9 +2,9 @@
  * @module ui/dialog
  */
 
+import { getName } from "../events/index.js";
 import { ComponentInitializer } from "../utils/system.js";
 import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
-import { debounce } from "@ulu/utils/performance.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
 /**
@@ -132,37 +132,15 @@ export function setupDialog(dialog, userOptions) {
   const options = Object.assign({}, currentDefaults, userOptions);
   const body = document.body;
   const { preventScrollShift: preventShift } = options;
-  let isPointerDown = false;
-  let isResizing = false;
 
-  
-  // This was added to provide a simple flag for "isPointerDown" so that 
-  // we can disable click outside if it was a click that originated inside the dialog, probable from 
-  // native resize handle. If this causes issues in the future we can explore tracking the pointer
-  // with setPointerCapture but I'm worried about it affecting inner elements with their own pointer events
-  // This seems like it will be ok we just don't allow outside closing if there was pointerdown from within the modal
-  dialog.addEventListener("pointerdown", handlePointerdown);
+  // Stores active pointerId for resizer until after the whole pointer event series 
+  // is finished which is after the click is complete
+  let activeResizePointer;
 
+  dialog.addEventListener(getName("resizer:start"), handleResizeStart);
+  dialog.addEventListener(getName("resizer:end"), handleResizeEnd);
   dialog.addEventListener("click", handleClicks);
 
-  // Watching for resizes to avoid closing outside during resizes
-  // - There is no resize event for css resize (so this uses pointerdown and resize observer)
-  const handleResizeEnd = debounce(() => {
-    if (isResizing && !isPointerDown) {
-      isResizing = false;
-    }
-  }, 500);
-
-  const resizeObserver = new ResizeObserver(() => {
-    if (isPointerDown) {
-      if (!isResizing) {
-        isResizing = true;
-      }
-      handleResizeEnd();
-    }
-  });
-  resizeObserver.observe(dialog);
-
   if (options.documentEnd) {
     body.appendChild(dialog);
   }
@@ -187,26 +165,11 @@ export function setupDialog(dialog, userOptions) {
     });
   }
 
-  function handlePointerdown() {
-    if (isPointerDown) return;
-    isPointerDown = true;
-
-    const done = () => {
-      // After event queue (click) - so after click handler for outside is called
-      setTimeout(() => {
-        isPointerDown = false;
-        isResizing = false;
-      }, 0);
-    };
-    document.addEventListener("pointerup", done, { once: true });
-    document.addEventListener("pointercancel", done, { once: true });
-  }
-
   function handleClicks(event) {
     const { target } = event;
     const targetIsDialog = target === dialog;
     const closeFromButton = target.closest(initializer.attributeSelector("close"));
-    const allowCloseOutside = !isResizing && options.clickOutsideCloses;
+    const allowCloseOutside = !activeResizePointer && options.clickOutsideCloses;
     const closeFromOutside = allowCloseOutside && targetIsDialog && wasClickOutside(dialog, event);
     if (closeFromOutside || closeFromButton) {
       if (options.pauseVideos) {
@@ -215,6 +178,15 @@ export function setupDialog(dialog, userOptions) {
       dialog.close();
     }
   }
+  function handleResizeStart(event) {
+    activeResizePointer = event.pointerId;
+  }
+  function handleResizeEnd(event) {
+    if (activeResizePointer === event.pointerId) {
+      // next event cycle (after click/pointer events finish in current)
+      setTimeout(() => { activeResizePointer = null;}, 0);
+    }
+  }
 } 
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.81",
+  "version": "0.1.0-beta.82",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",