@dxos/react-ui 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/dist/lib/browser/index.mjs

@@ -655,15 +655,12 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
   const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
-  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, {
-    ...zIndex && {
-      style: {
-        zIndex
-      }
-    },
-    side: tooltipSide
+  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, zIndex && {
+    style: {
+      zIndex
+    }
   }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
   return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
@@ -1669,7 +1666,7 @@ var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React22.createElement("input", {
     type: "checkbox",
-    className: "dx-checkbox--switch dx-focus-ring",
+    className: "ch-checkbox--switch ch-focus-ring",
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -2158,62 +2155,68 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   resizing: false,
-  navigationSidebarState: "closed",
-  setNavigationSidebarState: (nextState) => {
+  navigationSidebarOpen: false,
+  setNavigationSidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 81,
+      L: 79,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
-  complementarySidebarState: "closed",
-  setComplementarySidebarState: (nextState) => {
+  complementarySidebarOpen: false,
+  setComplementarySidebarOpen: (nextOpen) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 86,
+      L: 84,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
 var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
+  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
   return {
-    navigationSidebarState,
-    setNavigationSidebarState,
-    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
-      navigationSidebarState,
-      setNavigationSidebarState
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
+      navigationSidebarOpen,
+      setNavigationSidebarOpen
     ]),
-    openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
-    complementarySidebarState,
-    setComplementarySidebarState,
-    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
-      complementarySidebarState,
-      setComplementarySidebarState
+    openNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(true), [
+      setNavigationSidebarOpen
     ]),
-    openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
+    closeNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(false), [
+      setNavigationSidebarOpen
+    ]),
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
+    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
+      complementarySidebarOpen,
+      setComplementarySidebarOpen
+    ]),
+    openComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(true), [
+      setComplementarySidebarOpen
+    ]),
+    closeComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(false), [
+      setComplementarySidebarOpen
+    ])
   };
 };
 var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
-    prop: propsNavigationSidebarState,
-    defaultProp: defaultNavigationSidebarState,
-    onChange: onNavigationSidebarStateChange
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState4({
+    prop: propsNavigationSidebarOpen,
+    defaultProp: defaultNavigationSidebarOpen,
+    onChange: onNavigationSidebarOpenChange
   });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
-    prop: propsComplementarySidebarState,
-    defaultProp: defaultComplementarySidebarState,
-    onChange: onComplementarySidebarStateChange
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState4({
+    prop: propsComplementarySidebarOpen,
+    defaultProp: defaultComplementarySidebarOpen,
+    onChange: onComplementarySidebarOpenChange
   });
   const [resizing, setResizing] = useState8(false);
   const resizeInterval = useRef2(null);
@@ -2235,10 +2238,10 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   ]);
   return /* @__PURE__ */ React28.createElement(MainProvider, {
     ...props,
-    navigationSidebarState,
-    setNavigationSidebarState,
-    complementarySidebarState,
-    setComplementarySidebarState,
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
     resizing
   }, children);
 };
@@ -2246,7 +2249,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -2254,7 +2257,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   const ref = useForwardedRef(forwardedRef);
   const noopRef = useRef2(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => onStateChange?.("closed")
+    onDismiss: () => setOpen(false)
   });
   const handleKeyDown = useCallback7((event) => {
     if (event.key === "Escape") {
@@ -2266,7 +2269,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
   return /* @__PURE__ */ React28.createElement(DialogRoot2, {
-    open: state !== "closed",
+    open,
     modal: false
   }, /* @__PURE__ */ React28.createElement(Root5, {
     ...!isLg && {
@@ -2276,24 +2279,24 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": state,
+    "data-state": open ? "open" : "closed",
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDown: handleKeyDown,
-    ...state === "closed" && {
+    ...!open && {
       inert: "true"
     },
     ref
   }, children));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    state: navigationSidebarState,
-    onStateChange: setNavigationSidebarState,
+    open: navigationSidebarOpen,
+    setOpen: setNavigationSidebarOpen,
     resizing,
     side: "inline-start",
     ref: forwardedRef
@@ -2301,13 +2304,13 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) =
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    state: complementarySidebarState,
-    onStateChange: setComplementarySidebarState,
+    open: complementarySidebarOpen,
+    setOpen: setComplementarySidebarOpen,
     resizing,
     side: "inline-end",
     ref: forwardedRef
@@ -2315,7 +2318,7 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -2325,8 +2328,8 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
       ...mover
     },
     ...props,
-    "data-sidebar-inline-start-state": navigationSidebarState,
-    "data-sidebar-inline-end-state": complementarySidebarState,
+    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
     className: tx("main.content", "main", {
       bounce,
       handlesFocus
@@ -2339,20 +2342,20 @@ var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwar
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
+  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement("div", {
     onClick: () => {
-      setNavigationSidebarState("collapsed");
-      setComplementarySidebarState("collapsed");
+      setNavigationSidebarOpen(false);
+      setComplementarySidebarOpen(false);
     },
     ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
-      inlineStartSidebarOpen: navigationSidebarState,
-      inlineEndSidebarOpen: complementarySidebarState
+      inlineStartSidebarOpen: navigationSidebarOpen,
+      inlineEndSidebarOpen: complementarySidebarOpen
     }, classNames),
-    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
+    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
     "aria-hidden": "true",
     ref: forwardedRef
   });
@@ -2977,15 +2980,14 @@ var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "hori
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
 import React35, { forwardRef as forwardRef27 } from "react";
-var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
   return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
-    className: tx("tag.root", "dx-tag", {
+    className: tx("tag.root", "tag", {
       palette
     }, classNames),
-    "data-hue": palette,
     ref: forwardedRef
   });
 });
@@ -3226,7 +3228,6 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
-  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,