@dxos/react-ui 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/dist/lib/browser/{chunk-KX5JDELJ.mjs → chunk-YG7RAH7A.mjs}

@@ -275,7 +275,7 @@ import React6, { forwardRef as forwardRef5 } from "react";
 // src/components/Icon/Icon.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4, { forwardRef as forwardRef3, memo } from "react";
-var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames, size, ...props }, forwardedRef) => {
+var Icon = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
   var _effect = _useSignals4();
   try {
     const { tx } = useThemeContext();
@@ -1105,7 +1105,21 @@ var Tooltip = {
 };
 
 // src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
+  var _effect = _useSignals9();
+  try {
+    return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
+      ...props,
+      ref: forwardedRef
+    }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
+      ...props,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
   var _effect = _useSignals9();
   try {
     if (noTooltip) {
@@ -1126,7 +1140,7 @@ var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = t
     _effect.f();
   }
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size = 5, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
   var _effect = _useSignals9();
   try {
     const { tx } = useThemeContext();
@@ -1150,20 +1164,6 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, la
     _effect.f();
   }
 });
-var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
-      ...props,
-      ref: forwardedRef
-    }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
-      ...props,
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
 
 // src/components/Buttons/Toggle.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
@@ -1284,23 +1284,14 @@ import React15, { createContext as createContext7, useEffect as useEffect4, useM
 
 // src/util/domino.ts
 import { mx as mx2 } from "@dxos/react-ui-theme";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var Domino = class _Domino {
   static of(tag) {
     return new _Domino(tag);
   }
+  _el;
+  constructor(tag) {
+    this._el = document.createElement(tag);
+  }
   classNames(...classNames) {
     this._el.className = mx2(classNames);
     return this;
@@ -1332,10 +1323,6 @@ var Domino = class _Domino {
   build() {
     return this._el;
   }
-  constructor(tag) {
-    _define_property(this, "_el", void 0);
-    this._el = document.createElement(tag);
-  }
 };
 
 // src/util/hasIosKeyboard.ts
@@ -2483,10 +2470,10 @@ var useSwipeToDismiss = (ref, {
 
 // src/components/Main/Main.tsx
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
+var MAIN_NAME = "Main";
 var MAIN_ROOT_NAME = "MainRoot";
 var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
 var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
-var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
@@ -2915,7 +2902,7 @@ import { createMenuScope } from "@radix-ui/react-menu";
 import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
-import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect7, useRef as useRef3 } from "react";
+import React27, { forwardRef as forwardRef19, useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef3 } from "react";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(DROPDOWN_MENU_NAME, [
   createMenuScope
@@ -3067,18 +3054,35 @@ var CONTENT_NAME2 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
   var _effect = _useSignals27();
   try {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef3(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    const computedCollisionBoundary = useMemo5(() => {
+      const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+      return closestBoundary ? Array.isArray(collisionBoundary) ? [
+        closestBoundary,
+        ...collisionBoundary
+      ] : collisionBoundary ? [
+        closestBoundary,
+        collisionBoundary
+      ] : [
+        closestBoundary
+      ] : collisionBoundary;
+    }, [
+      context.open,
+      collisionBoundary,
+      context.triggerRef.current
+    ]);
     return /* @__PURE__ */ React27.createElement(MenuPrimitive.Content, {
       id: context.contentId,
       "aria-labelledby": context.triggerId,
       ...menuScope,
       ...contentProps,
+      collisionBoundary: computedCollisionBoundary,
       collisionPadding: safeCollisionPadding,
       ref: forwardedRef,
       onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
@@ -3467,7 +3471,7 @@ import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React29, { forwardRef as forwardRef21, useCallback as useCallback11, useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
+import React29, { forwardRef as forwardRef21, useCallback as useCallback11, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef4, useState as useState9 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
@@ -3717,13 +3721,29 @@ var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef)
 var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
   var _effect = _useSignals29();
   try {
-    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
+    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, collisionBoundary, classNames, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
     const popperScope = usePopperScope2(__scopePopover);
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     useFocusGuards();
+    const computedCollisionBoundary = useMemo6(() => {
+      const closestBoundary = context.triggerRef.current?.closest("[data-popover-collision-boundary]");
+      return closestBoundary ? Array.isArray(collisionBoundary) ? [
+        closestBoundary,
+        ...collisionBoundary
+      ] : collisionBoundary ? [
+        closestBoundary,
+        collisionBoundary
+      ] : [
+        closestBoundary
+      ] : collisionBoundary;
+    }, [
+      context.open,
+      collisionBoundary,
+      context.triggerRef.current
+    ]);
     return /* @__PURE__ */ React29.createElement(FocusScope, {
       asChild: true,
       loop: true,
@@ -3745,6 +3765,7 @@ var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
       ...popperScope,
       ...contentProps,
       collisionPadding: safeCollisionPadding,
+      collisionBoundary: computedCollisionBoundary,
       className: tx("popover.content", "popover", {
         elevation
       }, classNames),
@@ -4021,7 +4042,7 @@ var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, childr
     _effect.f();
   }
 });
-var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   var _effect = _useSignals32();
   try {
     const { tx } = useThemeContext();
@@ -4280,12 +4301,12 @@ var Toast = {
 import { useSignals as _useSignals36 } from "@preact-signals/safe-react/tracking";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import React36, { Fragment, forwardRef as forwardRef28 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutManaged, textBlockWidth: wrapContents, ...props }, forwardedRef) => {
+var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutManaged, textBlockWidth: textBlockWidthParam, disabled, ...props }, forwardedRef) => {
   var _effect = _useSignals36();
   try {
     const { tx } = useThemeContext();
-    const InnerRoot = wrapContents ? "div" : Fragment;
-    const innerRootProps = wrapContents ? {
+    const InnerRoot = textBlockWidthParam ? "div" : Fragment;
+    const innerRootProps = textBlockWidthParam ? {
       role: "none",
       className: tx("toolbar.inner", "toolbar", {
         layoutManaged
@@ -4295,7 +4316,8 @@ var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutMa
       ...props,
       "data-arrow-keys": props.orientation === "vertical" ? "up down" : "left right",
       className: tx("toolbar.root", "toolbar", {
-        layoutManaged
+        layoutManaged,
+        disabled
       }, classNames),
       ref: forwardedRef
     }, /* @__PURE__ */ React36.createElement(InnerRoot, innerRootProps, children));
@@ -4518,4 +4540,4 @@ export {
   Toast,
   Toolbar
 };
-//# sourceMappingURL=chunk-KX5JDELJ.mjs.map
+//# sourceMappingURL=chunk-YG7RAH7A.mjs.map