@liveblocks/react-ui 2.15.1 → 2.16.0-toolbars1

package/dist/primitives/index.d.mts

@@ -3,34 +3,34 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEv
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
      * Replace the rendered element by the one passed as a child.
      */
     asChild?: boolean;
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
     italic?: boolean;
     strikethrough?: boolean;
     code?: boolean;
     text: string;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
-declare type CommentBodyMentionProps = {
+type CommentMentionProps = ComponentPropsWithSlot<"span">;
+type CommentBodyMentionProps = {
     /**
      * The mention's user ID.
      */
     userId: string;
 };
-declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
     /**
      * The link's absolute URL.
@@ -121,7 +121,7 @@ interface ComposerEditorLinkProps {
      */
     children: ReactNode;
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
      * The list of suggested user IDs.
      */
@@ -131,11 +131,11 @@ declare type ComposerEditorMentionSuggestionsProps = {
      */
     selectedUserId?: string;
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
-declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
-declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
-declare type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
-declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
+type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
 interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
     /**
      * The suggestion's value.
@@ -217,8 +217,8 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     preventUnsavedChanges?: boolean;
 }
-declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
-declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
+type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
 interface ComposerMarkToggleProps extends ComponentPropsWithSlot<"button"> {
     /**
      * The text mark to toggle.
@@ -360,7 +360,7 @@ declare namespace index$1 {
   };
 }
 
-declare type ComposerContext = {
+type ComposerContext = {
     /**
      * Whether the composer is currently disabled.
      */
@@ -435,9 +435,9 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
-declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
 interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The error.
@@ -450,7 +450,7 @@ interface EmojiPickerContentCategoryHeaderProps extends ComponentPropsWithoutRef
      */
     category: string;
 }
-declare type EmojiPickerContentEmojiRowAttributes = {
+type EmojiPickerContentEmojiRowAttributes = {
     /**
      * The current row's index.
      */
@@ -526,7 +526,7 @@ interface EmojiPickerContentProps extends ComponentPropsWithSlot<"div"> {
      */
     components?: Partial<EmojiPickerContentComponents>;
 }
-declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
 
 /**
  * @private

package/dist/primitives/index.d.ts

@@ -3,34 +3,34 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEv
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
      * Replace the rendered element by the one passed as a child.
      */
     asChild?: boolean;
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
     italic?: boolean;
     strikethrough?: boolean;
     code?: boolean;
     text: string;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
-declare type CommentBodyMentionProps = {
+type CommentMentionProps = ComponentPropsWithSlot<"span">;
+type CommentBodyMentionProps = {
     /**
      * The mention's user ID.
      */
     userId: string;
 };
-declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
     /**
      * The link's absolute URL.
@@ -121,7 +121,7 @@ interface ComposerEditorLinkProps {
      */
     children: ReactNode;
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
      * The list of suggested user IDs.
      */
@@ -131,11 +131,11 @@ declare type ComposerEditorMentionSuggestionsProps = {
      */
     selectedUserId?: string;
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
-declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
-declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
-declare type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
-declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
+type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
 interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
     /**
      * The suggestion's value.
@@ -217,8 +217,8 @@ interface ComposerFormProps extends ComponentPropsWithSlot<"form"> {
      */
     preventUnsavedChanges?: boolean;
 }
-declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
-declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
+type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
 interface ComposerMarkToggleProps extends ComponentPropsWithSlot<"button"> {
     /**
      * The text mark to toggle.
@@ -360,7 +360,7 @@ declare namespace index$1 {
   };
 }
 
-declare type ComposerContext = {
+type ComposerContext = {
     /**
      * Whether the composer is currently disabled.
      */
@@ -435,9 +435,9 @@ declare class AttachmentTooLargeError extends Error {
     constructor(message: string, origin?: "client" | "server");
 }
 
-declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
 interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The error.
@@ -450,7 +450,7 @@ interface EmojiPickerContentCategoryHeaderProps extends ComponentPropsWithoutRef
      */
     category: string;
 }
-declare type EmojiPickerContentEmojiRowAttributes = {
+type EmojiPickerContentEmojiRowAttributes = {
     /**
      * The current row's index.
      */
@@ -526,7 +526,7 @@ interface EmojiPickerContentProps extends ComponentPropsWithSlot<"div"> {
      */
     components?: Partial<EmojiPickerContentComponents>;
 }
-declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
 
 /**
  * @private

package/dist/utils/Persist.js

@@ -3,8 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
+var _private = require('@liveblocks/react/_private');
 var react = require('react');
-var flushSync = require('./flush-sync.js');
+var reactDom = require('react-dom');
 
 
 const PERSIST_NAME = "Persist";
@@ -21,7 +22,7 @@ function useAnimationPersist(ref) {
   const [isPresent, unmount] = usePersist();
   const previousAnimationName = react.useRef(null);
   const unmountAnimationName = react.useRef(null);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -39,7 +40,7 @@ function useAnimationPersist(ref) {
       element.removeEventListener("animationend", handleAnimationEnd);
     };
   }, [ref, unmount]);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     const element = ref.current;
     let animationFrameId;
     if (!element) {
@@ -64,9 +65,9 @@ function Persist({ children }) {
   const lastPresentChild = react.useRef(null);
   const child = getChild(children);
   const unmount = react.useCallback(() => {
-    flushSync.flushSync(() => setPersisting(false));
+    reactDom.flushSync(() => setPersisting(false));
   }, []);
-  react.useLayoutEffect(() => {
+  _private.useLayoutEffect(() => {
     if (child) {
       setPersisting(true);
       lastPresentChild.current = child;

package/dist/utils/Persist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;AAAA;AAoBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;;;"}
+{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA;AAmBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;;;"}

package/dist/utils/Persist.mjs

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { nn } from '@liveblocks/core';
-import { createContext, useContext, Children, isValidElement, useRef, useLayoutEffect, useState, useCallback } from 'react';
-import { flushSync } from './flush-sync.mjs';
+import { useLayoutEffect } from '@liveblocks/react/_private';
+import { createContext, useContext, Children, isValidElement, useRef, useState, useCallback } from 'react';
+import { flushSync } from 'react-dom';
 
 
 const PERSIST_NAME = "Persist";

package/dist/utils/Persist.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.mjs","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;AAAA;AAoBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;"}
+{"version":3,"file":"Persist.mjs","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;;;AAAA;AAmBA;AAQA;AAEO;AACL;AAEA;AACF;AAEA;AACE;AAIA;AACF;AAEO;AACL;AACA;AACA;AAEA;AACE;AAEA;AACE;AAAA;AAWF;AACE;AACE;AAAQ;AAGV;AAAsC;AAGxC;AACA;AAEA;AACE;AACA;AAA8D;AAChE;AAGF;AACE;AACA;AAEA;AACE;AAAA;AAGF;AAGE;AACE;AACA;AAEA;AAKE;AAAQ;AACV;AACD;AAGH;AACE;AAAqC;AACvC;AAEJ;AAMgB;AACd;AACA;AACA;AAEA;AACE;AAAoC;AAGtC;AACE;AACE;AACA;AAA2B;AAC7B;AAGF;AACG;AAAuD;AACD;AAG3D;AAEA;AACE;AACF;;"}

package/dist/utils/Portal.js

@@ -4,14 +4,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 
 
 const PORTAL_NAME = "Portal";
 const Portal = react.forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "div";
-    return container ? ReactDOM.createPortal(
+    return container ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(Component, {
         "data-liveblocks-portal": "",
         ...props,

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.15.1" === "string" && "2.15.1";
+const PKG_VERSION = typeof "2.16.0-toolbars1" === "string" && "2.16.0-toolbars1";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,kBAAA,KAAgB,QAAY,IAAA,mBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.15.1" === "string" && "2.15.1";
+const PKG_VERSION = typeof "2.16.0-toolbars1" === "string" && "2.16.0-toolbars1";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,kBAAA,KAAgB,QAAY,IAAA,mBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.15.1",
+  "version": "2.16.0-toolbars1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.15.1",
-    "@liveblocks/core": "2.15.1",
-    "@liveblocks/react": "2.15.1",
+    "@liveblocks/client": "2.16.0-toolbars1",
+    "@liveblocks/core": "2.16.0-toolbars1",
+    "@liveblocks/react": "2.16.0-toolbars1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
@@ -101,7 +101,7 @@
     "emojibase": "^15.3.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "msw": "^0.27.1",
+    "msw": "^1.3.5",
     "rollup": "3.28.0",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
@@ -114,7 +114,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/liveblocks/liveblocks.git",
+    "url": "git+https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react-ui"
   },
   "homepage": "https://liveblocks.io",