@dxos/react-ui 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/dist/lib/node/index.cjs

@@ -87,6 +87,7 @@ __export(node_exports, {
   useDropdownMenuContext: () => useDropdownMenuContext,
   useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
   useElevationContext: () => useElevationContext,
+  useLandmarkMover: () => useLandmarkMover,
   useListContext: () => import_react_list.useListContext,
   useListItemContext: () => import_react_list.useListItemContext,
   useMainContext: () => useMainContext,
@@ -440,16 +441,12 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react9.forwardRef)(({ classNames, c
     y: ringGap + ringWidth,
     rx
   }))), variant === "circle" ? /* @__PURE__ */ import_react9.default.createElement("circle", {
-    className: hue ? tx("hue.fill", "avatar__frame__circle", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
     cx: "50%",
     cy: "50%",
-    r
+    r,
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)"
   }) : /* @__PURE__ */ import_react9.default.createElement("rect", {
-    className: hue ? tx("hue.fill", "avatar__frame__rect", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)",
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     width: 2 * r,
@@ -805,12 +802,15 @@ var Tooltip = {
   Arrow: TooltipArrow,
   Content: TooltipContent
 };
-var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
   const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react16.useState)(false);
-  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, zIndex && {
-    style: {
-      zIndex
-    }
+  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, {
+    ...zIndex && {
+      style: {
+        zIndex
+      }
+    },
+    side: tooltipSide
   }, props.label, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Arrow, null));
   return /* @__PURE__ */ import_react16.default.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
@@ -1003,7 +1003,7 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t("copy success label") : t("copy label");
+  const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
   const [open, setOpen] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ import_react22.default.createElement(Tooltip.Root, {
     delayDuration: 1500,
@@ -1078,13 +1078,13 @@ var DialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogContent, {
     ...props,
     className: tx("dialog.content", "dialog", {
-      inOverlayLayout
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
   }, children);
@@ -1749,7 +1749,7 @@ var Switch = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __inputScope, che
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
   return /* @__PURE__ */ import_react30.default.createElement("input", {
     type: "checkbox",
-    className: "ch-checkbox--switch ch-focus-ring",
+    className: "dx-checkbox--switch dx-focus-ring",
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -1783,8 +1783,8 @@ var edgeToOrientationMap = {
   right: "vertical"
 };
 var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
+  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
+  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
 };
 var edgeStyles = {
   top: "top-[--line-offset] before:top-[--offset-terminal]",
@@ -1795,17 +1795,17 @@ var edgeStyles = {
 var strokeSize = 2;
 var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var ListDropIndicator = ({ edge, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ import_react33.default.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
       "--terminal-size": `${terminalSize}px`,
       "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
+      "--terminal-inset": `${terminalInset}px`,
       "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
     },
     className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
@@ -2195,68 +2195,62 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
   resizing: false,
-  navigationSidebarOpen: false,
-  setNavigationSidebarOpen: (nextOpen) => {
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
     import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 79,
+      L: 81,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
-  complementarySidebarOpen: false,
-  setComplementarySidebarOpen: (nextOpen) => {
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
     import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 84,
+      L: 86,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
 var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
   return {
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    toggleNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
-      navigationSidebarOpen,
-      setNavigationSidebarOpen
-    ]),
-    openNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(true), [
-      setNavigationSidebarOpen
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
     ]),
-    closeNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(false), [
-      setNavigationSidebarOpen
+    openNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
     ]),
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
-    toggleComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
-      complementarySidebarOpen,
-      setComplementarySidebarOpen
-    ]),
-    openComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarOpen(true), [
-      setComplementarySidebarOpen
-    ]),
-    closeComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarOpen(false), [
-      setComplementarySidebarOpen
-    ])
+    openComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
   const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsNavigationSidebarOpen,
-    defaultProp: defaultNavigationSidebarOpen,
-    onChange: onNavigationSidebarOpenChange
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsComplementarySidebarOpen,
-    defaultProp: defaultComplementarySidebarOpen,
-    onChange: onComplementarySidebarOpenChange
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
   });
   const [resizing, setResizing] = (0, import_react37.useState)(false);
   const resizeInterval = (0, import_react37.useRef)(null);
@@ -2278,10 +2272,10 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   ]);
   return /* @__PURE__ */ import_react37.default.createElement(MainProvider, {
     ...props,
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
     resizing
   }, children);
 };
@@ -2289,7 +2283,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
   const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
@@ -2297,7 +2291,7 @@ var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
   const ref = (0, import_react_hooks5.useForwardedRef)(forwardedRef);
   const noopRef = (0, import_react37.useRef)(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => setOpen(false)
+    onDismiss: () => onStateChange?.("closed")
   });
   const handleKeyDown = (0, import_react37.useCallback)((event) => {
     if (event.key === "Escape") {
@@ -2309,7 +2303,7 @@ var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
   ]);
   const Root5 = isLg ? import_react_primitive9.Primitive.div : import_react_dialog2.DialogContent;
   return /* @__PURE__ */ import_react37.default.createElement(import_react_dialog2.Root, {
-    open,
+    open: state !== "closed",
     modal: false
   }, /* @__PURE__ */ import_react37.default.createElement(Root5, {
     ...!isLg && {
@@ -2319,24 +2313,24 @@ var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
     },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": open ? "open" : "closed",
+    "data-state": state,
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDown: handleKeyDown,
-    ...!open && {
+    ...state === "closed" && {
       inert: "true"
     },
     ref
   }, children));
 });
 var MainNavigationSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: navigationSidebarOpen,
-    setOpen: setNavigationSidebarOpen,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
     resizing,
     side: "inline-start",
     ref: forwardedRef
@@ -2344,13 +2338,13 @@ var MainNavigationSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((prop
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: complementarySidebarOpen,
-    setOpen: setComplementarySidebarOpen,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
     resizing,
     side: "inline-end",
     ref: forwardedRef
@@ -2358,7 +2352,7 @@ var MainComplementarySidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((p
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -2368,8 +2362,8 @@ var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, cla
       ...mover
     },
     ...props,
-    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
-    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
     className: tx("main.content", "main", {
       bounce,
       handlesFocus
@@ -2382,20 +2376,20 @@ var MainOverlay = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
   const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
-  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return /* @__PURE__ */ import_react37.default.createElement("div", {
     onClick: () => {
-      setNavigationSidebarOpen(false);
-      setComplementarySidebarOpen(false);
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
     },
     ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
-      inlineStartSidebarOpen: navigationSidebarOpen,
-      inlineEndSidebarOpen: complementarySidebarOpen
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
     }, classNames),
-    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
     "aria-hidden": "true",
     ref: forwardedRef
   });
@@ -2973,14 +2967,15 @@ var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, o
     ref: forwardedRef
   });
 });
-var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.span;
   return /* @__PURE__ */ import_react46.default.createElement(Root5, {
     ...props,
-    className: tx("tag.root", "tag", {
+    className: tx("tag.root", "dx-tag", {
       palette
     }, classNames),
+    "data-hue": palette,
     ref: forwardedRef
   });
 });
@@ -3212,6 +3207,7 @@ var Toolbar = {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,