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

package/dist/lib/node/index.cjs

@@ -87,7 +87,6 @@ __export(node_exports, {
   useDropdownMenuContext: () => useDropdownMenuContext,
   useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
   useElevationContext: () => useElevationContext,
-  useLandmarkMover: () => useLandmarkMover,
   useListContext: () => import_react_list.useListContext,
   useListItemContext: () => import_react_list.useListItemContext,
   useMainContext: () => useMainContext,
@@ -806,15 +805,12 @@ var Tooltip = {
   Arrow: TooltipArrow,
   Content: TooltipContent
 };
-var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
   const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react16.useState)(false);
-  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, {
-    ...zIndex && {
-      style: {
-        zIndex
-      }
-    },
-    side: tooltipSide
+  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, zIndex && {
+    style: {
+      zIndex
+    }
   }, props.label, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Arrow, null));
   return /* @__PURE__ */ import_react16.default.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
@@ -1753,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: "dx-checkbox--switch dx-focus-ring",
+    className: "ch-checkbox--switch ch-focus-ring",
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -2199,62 +2195,68 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
   resizing: false,
-  navigationSidebarState: "closed",
-  setNavigationSidebarState: (nextState) => {
+  navigationSidebarOpen: false,
+  setNavigationSidebarOpen: (nextOpen) => {
     import_log.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) => {
     import_log.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: (0, import_react37.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
-      navigationSidebarState,
-      setNavigationSidebarState
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    toggleNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
+      navigationSidebarOpen,
+      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
+    openNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(true), [
+      setNavigationSidebarOpen
     ]),
-    openComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("closed"), [])
+    closeNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarOpen(false), [
+      setNavigationSidebarOpen
+    ]),
+    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
+    ])
   };
 };
 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] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
-  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsNavigationSidebarState,
-    defaultProp: defaultNavigationSidebarState,
-    onChange: onNavigationSidebarStateChange
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsNavigationSidebarOpen,
+    defaultProp: defaultNavigationSidebarOpen,
+    onChange: onNavigationSidebarOpenChange
   });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsComplementarySidebarState,
-    defaultProp: defaultComplementarySidebarState,
-    onChange: onComplementarySidebarStateChange
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsComplementarySidebarOpen,
+    defaultProp: defaultComplementarySidebarOpen,
+    onChange: onComplementarySidebarOpenChange
   });
   const [resizing, setResizing] = (0, import_react37.useState)(false);
   const resizeInterval = (0, import_react37.useRef)(null);
@@ -2276,10 +2278,10 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   ]);
   return /* @__PURE__ */ import_react37.default.createElement(MainProvider, {
     ...props,
-    navigationSidebarState,
-    setNavigationSidebarState,
-    complementarySidebarState,
-    setComplementarySidebarState,
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
     resizing
   }, children);
 };
@@ -2287,7 +2289,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, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
@@ -2295,7 +2297,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: () => onStateChange?.("closed")
+    onDismiss: () => setOpen(false)
   });
   const handleKeyDown = (0, import_react37.useCallback)((event) => {
     if (event.key === "Escape") {
@@ -2307,7 +2309,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: state !== "closed",
+    open,
     modal: false
   }, /* @__PURE__ */ import_react37.default.createElement(Root5, {
     ...!isLg && {
@@ -2317,24 +2319,24 @@ var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
     },
     ...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__ */ (0, import_react37.forwardRef)((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__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    state: navigationSidebarState,
-    onStateChange: setNavigationSidebarState,
+    open: navigationSidebarOpen,
+    setOpen: setNavigationSidebarOpen,
     resizing,
     side: "inline-start",
     ref: forwardedRef
@@ -2342,13 +2344,13 @@ var MainNavigationSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((prop
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((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__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    state: complementarySidebarState,
-    onStateChange: setComplementarySidebarState,
+    open: complementarySidebarOpen,
+    setOpen: setComplementarySidebarOpen,
     resizing,
     side: "inline-end",
     ref: forwardedRef
@@ -2356,7 +2358,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 { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
+  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -2366,8 +2368,8 @@ var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, cla
       ...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
@@ -2380,20 +2382,20 @@ var MainOverlay = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames,
   const [isLg] = (0, import_react_hooks5.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__ */ import_react37.default.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
   });
@@ -2971,15 +2973,14 @@ var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, o
     ref: forwardedRef
   });
 });
-var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
+var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette, 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", "dx-tag", {
+    className: tx("tag.root", "tag", {
       palette
     }, classNames),
-    "data-hue": palette,
     ref: forwardedRef
   });
 });
@@ -3211,7 +3212,6 @@ var Toolbar = {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
-  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,