@dxos/react-ui 0.7.5-main.499c70c → 0.7.5-main.937ce75

package/dist/lib/browser/index.mjs

@@ -572,7 +572,7 @@ var ButtonGroup = /* @__PURE__ */ forwardRef7(({ children, elevation: propsEleva
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-import React10, { forwardRef as forwardRef9 } from "react";
+import React10, { forwardRef as forwardRef9, useState as useState3 } from "react";
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
@@ -612,20 +612,31 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState3(false);
   const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, zIndex && {
     style: {
       zIndex
     }
   }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ React10.createElement(Tooltip.Root, null, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip?.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React10.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
   })), tooltipPortal ? /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React10.createElement(Button, {
     ...props,
@@ -637,7 +648,10 @@ var LabelledIconButton = /* @__PURE__ */ forwardRef9(({ icon, size, iconOnly, la
     classNames: iconClassNames
   }), /* @__PURE__ */ React10.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label));
+  }, label), caretDown && /* @__PURE__ */ React10.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
 });
 var IconButton = /* @__PURE__ */ forwardRef9((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ React10.createElement(IconOnlyButton, {
   ...props,
@@ -690,7 +704,7 @@ var ToggleGroupItem = /* @__PURE__ */ forwardRef11(({ variant, elevation, densit
 });
 
 // packages/ui/react-ui/src/components/Clipboard/ClipboardProvider.tsx
-import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState3 } from "react";
+import React13, { createContext as createContext4, useCallback, useContext as useContext6, useState as useState4 } from "react";
 var ClipboardContext = /* @__PURE__ */ createContext4({
   textValue: "",
   setTextValue: async (_) => {
@@ -698,7 +712,7 @@ var ClipboardContext = /* @__PURE__ */ createContext4({
 });
 var useClipboard = () => useContext6(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = useState3("");
+  const [textValue, setInternalTextValue] = useState4("");
   const setTextValue = useCallback(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
@@ -712,7 +726,7 @@ var ClipboardProvider = ({ children }) => {
 };
 
 // packages/ui/react-ui/src/components/Clipboard/CopyButton.tsx
-import React17, { useState as useState4 } from "react";
+import React17, { useState as useState5 } from "react";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
@@ -820,7 +834,7 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : t("copy label");
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(false);
   return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
     delayDuration: 1500,
     open,
@@ -1949,12 +1963,12 @@ import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/
 import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
-import React28, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
+import React28, { forwardRef as forwardRef20, useCallback as useCallback5, useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
 // packages/ui/react-ui/src/components/Main/useSwipeToDismiss.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
 var MotionState;
 (function(MotionState2) {
   MotionState2[MotionState2["IDLE"] = 0] = "IDLE";
@@ -1969,8 +1983,8 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = useState5(0);
-  const [gestureStartX, setGestureStartX] = useState5(0);
+  const [motionState, setMotionState] = useState6(0);
+  const [gestureStartX, setGestureStartX] = useState6(0);
   const setIdle = useCallback4(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
@@ -2151,7 +2165,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
   });
-  const [resizing, setResizing] = useState6(false);
+  const [resizing, setResizing] = useState7(false);
   const resizeInterval = useRef2(null);
   const handleResize = useCallback5(() => {
     setResizing(true);
@@ -2403,7 +2417,7 @@ import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
 import { Slot as Slot12 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
 import { hideOthers } from "aria-hidden";
-import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState7, useEffect as useEffect7 } from "react";
+import React30, { forwardRef as forwardRef22, useRef as useRef3, useCallback as useCallback6, useState as useState8, useEffect as useEffect7 } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = createContextScope3(POPOVER_NAME, [
@@ -2415,7 +2429,7 @@ var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
   const triggerRef = useRef3(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = useState7(false);
+  const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
   const [open = false, setOpen] = useControllableState5({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -3037,6 +3051,14 @@ var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
     ref: forwardedRef
   }));
 });
+var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
 var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
   return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Button, {
     asChild: true
@@ -3077,26 +3099,38 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, e
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React37.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
     asChild: true
-  }, /* @__PURE__ */ React37.createElement(Separator4, {
-    orientation: "vertical",
-    ...props
+  }, /* @__PURE__ */ React37.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    ref: forwardedRef
   }));
-};
-var ToolbarExpander = () => /* @__PURE__ */ React37.createElement("div", {
-  className: "grow"
 });
+var ToolbarSeparator = ({ variant = "line", ...props }) => {
+  return variant === "line" ? /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ React37.createElement(Separator4, props)) : /* @__PURE__ */ React37.createElement(ToolbarPrimitive.Separator, {
+    className: "grow"
+  });
+};
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup2,
   ToggleGroupItem: ToolbarToggleGroupItem,
-  Separator: ToolbarSeparator,
-  Expander: ToolbarExpander
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
 };
 export {
   AlertDialog,