@oods/components-react 0.4.0 → 0.4.1

package/README.md

@@ -32,4 +32,4 @@ Use matching versions of the OODS packages. These packages are separate from the
 
 ## License
 
-Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.0/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.0/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
+Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.1/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/components-react@0.4.1/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/{chunk-OFTMKX3W.js → chunk-NLWXBLPA.js}

@@ -636,6 +636,31 @@ var noSubscription = () => () => void 0;
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? React3.useEffect : React3.useLayoutEffect;
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
 var hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
 var Dialog = React3.forwardRef(
   ({
     id,
@@ -650,12 +675,16 @@ var Dialog = React3.forwardRef(
     className,
     onClose,
     onKeyDown,
+    onMouseDown,
+    onClick,
     ...rest
   }, ref) => {
     const generatedId = React3.useId().replace(/[^\w-]/g, "");
     const dialogId = id ?? `oods-dialog-${generatedId}`;
     const element = React3.useRef(null);
     const openRef = React3.useRef(open);
+    const scrollLock = React3.useRef(null);
+    const pressedBackdrop = React3.useRef(false);
     const serverMarkup = React3.useSyncExternalStore(noSubscription, () => false, () => true);
     const managed = modal && !serverMarkup && canShowModal();
     const setRef = React3.useCallback((node) => {
@@ -663,13 +692,19 @@ var Dialog = React3.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     }, [ref]);
+    const releaseScroll = React3.useCallback(() => {
+      scrollLock.current?.();
+      scrollLock.current = null;
+    }, []);
     useIsomorphicLayoutEffect(() => {
       openRef.current = open;
       const dialog = element.current;
       if (!dialog || !managed) return;
       if (open && !dialog.open) dialog.showModal();
       else if (!open && dialog.open) dialog.close();
+      if (open && dialog.open) scrollLock.current ??= lockPageScroll();
     }, [open, managed]);
+    React3.useEffect(() => releaseScroll, [releaseScroll]);
     const requestClose = (event) => {
       event.preventDefault();
       onClose?.();
@@ -691,7 +726,19 @@ var Dialog = React3.forwardRef(
         },
         onCancel: requestClose,
         onClose: () => {
-          if (openRef.current && !element.current?.open) onClose?.();
+          if (element.current?.open) return;
+          releaseScroll();
+          if (openRef.current) onClose?.();
+        },
+        onMouseDown: (event) => {
+          onMouseDown?.(event);
+          pressedBackdrop.current = managed && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        onClick: (event) => {
+          onClick?.(event);
+          const backdrop = pressedBackdrop.current && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop.current = false;
+          if (backdrop && !event.defaultPrevented) onClose?.();
         },
         ...rest,
         children: [
@@ -1353,4 +1400,4 @@ var RelativeTimestamp = React3.forwardRef(
 );
 RelativeTimestamp.displayName = "OODS.RelativeTimestamp";
 
-export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Dialog, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusTimeline, Switch, Text, Textarea };
+export { AuditTimeline, Badge, Banner, Button, CancellationSummary, Card, Checkbox, DatePicker, Dialog, Input, PaginationBar, PriceBadge, RelativeTimestamp, SearchInput, Select, StatusBadge, StatusIcon, StatusTimeline, Switch, Text, Textarea };