@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/dist/primitives/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef, FormEvent, ReactNode, ComponentType } from 'react';
-import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent } from 'react';
+import { MentionData, CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
 
 type Direction = "ltr" | "rtl";
 type SlotProp = {
@@ -22,85 +22,12 @@ type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-interface AiChatComposerFormProps extends ComponentPropsWithSlot<"form"> {
-    /**
-     * The event handler called when a chat message is submitted.
-     */
-    onComposerSubmit?: (message: {
-        /**
-         * The submitted message text.
-         */
-        text: string;
-    }, event: FormEvent<HTMLFormElement>) => void;
-    /**
-     * Whether the composer is disabled.
-     */
-    disabled?: boolean;
-}
-interface AiChatComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
-    /**
-     * The editor's initial value.
-     */
-    defaultValue?: string;
-    /**
-     * The text to display when the editor is empty.
-     */
-    placeholder?: string;
-    /**
-     * Whether the editor is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether to focus the editor on mount.
-     */
-    autoFocus?: boolean;
-}
-
-/**
- * Surrounds the chat composer's content and handles submissions.
- *
- * @example
- * <AiChatComposer.Form onComposerSubmit={({ text }) => {}}>
- *	 <AiChatComposer.Editor />
- *   <AiChatComposer.Submit />
- * </AiChatComposer.Form>
- */
-declare const AiChatComposerForm: react.ForwardRefExoticComponent<AiChatComposerFormProps & react.RefAttributes<HTMLFormElement>>;
-/**
- * Displays the chat composer's editor.
- *
- * @example
- * <AiChatComposer.Editor placeholder="Write a message…" />
- */
-declare const AiChatComposerEditor: react.ForwardRefExoticComponent<AiChatComposerEditorProps & react.RefAttributes<HTMLDivElement>>;
-/**
- * A button to submit a chat message.
- *
- * @example
- * <AiChatComposer.Submit>Send</AiChatComposer.Submit>
- */
-declare const AiChatComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
-
-declare const index$2_AiChatComposerEditor: typeof AiChatComposerEditor;
-declare const index$2_AiChatComposerForm: typeof AiChatComposerForm;
-declare const index$2_AiChatComposerSubmit: typeof AiChatComposerSubmit;
-declare namespace index$2 {
-  export {
-    index$2_AiChatComposerEditor as AiChatComposerEditor,
-    index$2_AiChatComposerForm as AiChatComposerForm,
-    index$2_AiChatComposerSubmit as AiChatComposerSubmit,
-    AiChatComposerEditor as Editor,
-    AiChatComposerForm as Form,
-    AiChatComposerSubmit as Submit,
-  };
-}
-
 type CommentMentionProps = ComponentPropsWithSlot<"span">;
 type CommentBodyMentionProps = {
     /**
-     * The mention's user ID.
+     * The mention to display.
      */
-    userId: string;
+    mention: MentionData;
 };
 type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
@@ -127,7 +54,7 @@ interface CommentBodyComponents {
      */
     Link: ComponentType<CommentBodyLinkProps>;
 }
-interface CommentBodyProps extends Omit<ComponentPropsWithSlot<"div">, "children"> {
+interface CommentBodyProps extends ComponentPropsWithSlot<"div"> {
     /**
      * The comment body to display.
      * If not defined, the component will render `null`.
@@ -143,7 +70,7 @@ interface CommentBodyProps extends Omit<ComponentPropsWithSlot<"div">, "children
  * Displays mentions within `Comment.Body`.
  *
  * @example
- * <Comment.Mention>@{userId}</Comment.Mention>
+ * <Comment.Mention>@{mention.id}</Comment.Mention>
  */
 declare const CommentMention: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & react.RefAttributes<HTMLSpanElement>>;
 /**
@@ -175,9 +102,9 @@ interface ComposerEditorMentionProps {
      */
     isSelected: boolean;
     /**
-     * The mention's user ID.
+     * The mention to display.
      */
-    userId: string;
+    mention: MentionData;
 }
 interface ComposerEditorLinkProps {
     /**
@@ -195,13 +122,13 @@ interface ComposerEditorLinkProps {
 }
 type ComposerEditorMentionSuggestionsProps = {
     /**
-     * The list of suggested user IDs.
+     * The list of mention suggestions.
      */
-    userIds: string[];
+    mentions: MentionData[];
     /**
-     * The currently selected user ID.
+     * The currently selected mention's ID.
      */
-    selectedUserId?: string;
+    selectedMentionId?: string;
 };
 type ComposerEditorFloatingToolbarProps = Record<string, never>;
 type ComposerMentionProps = ComponentPropsWithSlot<"span">;
@@ -232,7 +159,7 @@ interface ComposerEditorComponents {
      */
     FloatingToolbar?: ComponentType<ComposerEditorFloatingToolbarProps>;
 }
-interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
+interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "children"> {
     /**
      * The reading direction of the editor and related elements.
      */
@@ -329,7 +256,7 @@ declare const ComposerFloatingToolbar: react.ForwardRefExoticComponent<Omit<reac
  * Displays mentions within `Composer.Editor`.
  *
  * @example
- * <Composer.Mention>@{userId}</Composer.Mention>
+ * <Composer.Mention>@{mention.id}</Composer.Mention>
  */
 declare const ComposerMention: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & react.RefAttributes<HTMLSpanElement>>;
 /**
@@ -348,9 +275,9 @@ declare const ComposerSuggestions: react.ForwardRefExoticComponent<Omit<react.De
  *
  * @example
  * <Composer.SuggestionsList>
- *   {userIds.map((userId) => (
- *     <Composer.SuggestionsListItem key={userId} value={userId}>
- *       @{userId}
+ *   {mentions.map((mention) => (
+ *     <Composer.SuggestionsListItem key={mention.id} value={mention.id}>
+ *       @{mention.id}
  *     </Composer.SuggestionsListItem>
  *   ))}
  * </Composer.SuggestionsList>
@@ -360,8 +287,8 @@ declare const ComposerSuggestionsList: react.ForwardRefExoticComponent<Omit<reac
  * Displays a suggestion within `Composer.SuggestionsList`.
  *
  * @example
- * <Composer.SuggestionsListItem key={userId} value={userId}>
- *   @{userId}
+ * <Composer.SuggestionsListItem key={mention.id} value={mention.id}>
+ *   @{mention.id}
  * </Composer.SuggestionsListItem>
  */
 declare const ComposerSuggestionsListItem: react.ForwardRefExoticComponent<ComposerSuggestionsListItemProps & react.RefAttributes<HTMLLIElement>>;
@@ -567,4 +494,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children"
  */
 declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
-export { index$2 as AiChatComposer, AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };
+export { AttachmentTooLargeError, index$1 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

package/dist/primitives/index.js

@@ -1,9 +1,7 @@
-import * as index from './AiChatComposer/index.js';
-export { index as AiChatComposer };
-import * as index$1 from './Comment/index.js';
-export { index$1 as Comment };
-import * as index$2 from './Composer/index.js';
-export { index$2 as Composer };
+import * as index from './Comment/index.js';
+export { index as Comment };
+import * as index$1 from './Composer/index.js';
+export { index$1 as Composer };
 export { useComposer } from './Composer/contexts.js';
 export { AttachmentTooLargeError } from './Composer/utils.js';
 export { FileSize } from './FileSize.js';

package/dist/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/utils/ErrorBoundary.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ErrorBoundaryContext = react.createContext(null);
+class ErrorBoundary extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+  reset() {
+    this.setState({ error: null });
+  }
+  render() {
+    if (this.state.error === null)
+      return this.props.children;
+    const error = this.state.error;
+    const reset = this.reset.bind(this);
+    const fallback = this.props.fallback;
+    const Fallback = typeof fallback === "function" ? fallback : () => fallback ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundaryContext.Provider, {
+      value: { error, reset },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Fallback, {
+        error: this.state.error
+      })
+    });
+  }
+}
+function useErrorBoundary() {
+  const context = react.useContext(ErrorBoundaryContext);
+  if (context === null) {
+    throw new Error(
+      "useErrorBoundary must be used within an ErrorBoundary component"
+    );
+  }
+  return context;
+}
+
+exports.ErrorBoundary = ErrorBoundary;
+exports.useErrorBoundary = useErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.cjs.map

package/dist/utils/ErrorBoundary.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.cjs","sources":["../../src/utils/ErrorBoundary.tsx"],"sourcesContent":["import type { ComponentType, ErrorInfo, ReactNode } from \"react\";\nimport { Component, createContext, useContext } from \"react\";\n\nconst ErrorBoundaryContext = createContext<{\n  error: Error;\n  reset: () => void;\n} | null>(null);\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ComponentType<{ error: Error }>;\n}\n\ninterface ErrorBoundaryState {\n  error: Error | null;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { error: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    console.error(error, errorInfo);\n  }\n\n  reset() {\n    this.setState({ error: null });\n  }\n\n  render(): React.ReactNode {\n    if (this.state.error === null) return this.props.children;\n\n    const error = this.state.error;\n    const reset = this.reset.bind(this);\n    const fallback = this.props.fallback;\n    const Fallback =\n      typeof fallback === \"function\" ? fallback : () => fallback ?? null;\n    return (\n      <ErrorBoundaryContext.Provider value={{ error, reset }}>\n        <Fallback error={this.state.error} />\n      </ErrorBoundaryContext.Provider>\n    );\n  }\n}\n\nexport function useErrorBoundary(): {\n  error: Error;\n  reset: () => void;\n} {\n  const context = useContext(ErrorBoundaryContext);\n\n  if (context === null) {\n    throw new Error(\n      \"useErrorBoundary must be used within an ErrorBoundary component\"\n    );\n  }\n\n  return context;\n}\n"],"names":["createContext","Component","jsx","useContext"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuBA,oBAGnB,IAAI,CAAA,CAAA;AAWP,MAAM,sBAAsBC,eAGjC,CAAA;AAAA,EACA,YAAY,KAA2B,EAAA;AACrC,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,IAAK,EAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAC5C,IAAA,OAAO,EAAE,KAAM,EAAA,CAAA;AAAA,GACjB;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAA4B,EAAA;AAC1D,IAAQ,OAAA,CAAA,KAAA,CAAM,OAAO,SAAS,CAAA,CAAA;AAAA,GAChC;AAAA,EAEA,KAAQ,GAAA;AACN,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC/B;AAAA,EAEA,MAA0B,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,MAAM,KAAU,KAAA,IAAA;AAAM,MAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAEjD,IAAM,MAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA,CAAA;AACzB,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,IAAM,MAAA,QAAA,GAAW,KAAK,KAAM,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,WACJ,OAAO,QAAA,KAAa,UAAa,GAAA,QAAA,GAAW,MAAM,QAAY,IAAA,IAAA,CAAA;AAChE,IACE,uBAAAC,cAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MAA8B,KAAA,EAAO,EAAE,KAAA,EAAO,KAAM,EAAA;AAAA,MACnD,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,QAAS,KAAA,EAAO,KAAK,KAAM,CAAA,KAAA;AAAA,OAAO,CAAA;AAAA,KACrC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,gBAGd,GAAA;AACA,EAAM,MAAA,OAAA,GAAUC,iBAAW,oBAAoB,CAAA,CAAA;AAE/C,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist/utils/ErrorBoundary.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, Component, useContext } from 'react';
+
+const ErrorBoundaryContext = createContext(null);
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+  reset() {
+    this.setState({ error: null });
+  }
+  render() {
+    if (this.state.error === null)
+      return this.props.children;
+    const error = this.state.error;
+    const reset = this.reset.bind(this);
+    const fallback = this.props.fallback;
+    const Fallback = typeof fallback === "function" ? fallback : () => fallback ?? null;
+    return /* @__PURE__ */ jsx(ErrorBoundaryContext.Provider, {
+      value: { error, reset },
+      children: /* @__PURE__ */ jsx(Fallback, {
+        error: this.state.error
+      })
+    });
+  }
+}
+function useErrorBoundary() {
+  const context = useContext(ErrorBoundaryContext);
+  if (context === null) {
+    throw new Error(
+      "useErrorBoundary must be used within an ErrorBoundary component"
+    );
+  }
+  return context;
+}
+
+export { ErrorBoundary, useErrorBoundary };
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/utils/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../src/utils/ErrorBoundary.tsx"],"sourcesContent":["import type { ComponentType, ErrorInfo, ReactNode } from \"react\";\nimport { Component, createContext, useContext } from \"react\";\n\nconst ErrorBoundaryContext = createContext<{\n  error: Error;\n  reset: () => void;\n} | null>(null);\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ComponentType<{ error: Error }>;\n}\n\ninterface ErrorBoundaryState {\n  error: Error | null;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { error: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {\n    console.error(error, errorInfo);\n  }\n\n  reset() {\n    this.setState({ error: null });\n  }\n\n  render(): React.ReactNode {\n    if (this.state.error === null) return this.props.children;\n\n    const error = this.state.error;\n    const reset = this.reset.bind(this);\n    const fallback = this.props.fallback;\n    const Fallback =\n      typeof fallback === \"function\" ? fallback : () => fallback ?? null;\n    return (\n      <ErrorBoundaryContext.Provider value={{ error, reset }}>\n        <Fallback error={this.state.error} />\n      </ErrorBoundaryContext.Provider>\n    );\n  }\n}\n\nexport function useErrorBoundary(): {\n  error: Error;\n  reset: () => void;\n} {\n  const context = useContext(ErrorBoundaryContext);\n\n  if (context === null) {\n    throw new Error(\n      \"useErrorBoundary must be used within an ErrorBoundary component\"\n    );\n  }\n\n  return context;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,cAGnB,IAAI,CAAA,CAAA;AAWP,MAAM,sBAAsB,SAGjC,CAAA;AAAA,EACA,YAAY,KAA2B,EAAA;AACrC,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,IAAK,EAAA,CAAA;AAAA,GAC7B;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAC5C,IAAA,OAAO,EAAE,KAAM,EAAA,CAAA;AAAA,GACjB;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAA4B,EAAA;AAC1D,IAAQ,OAAA,CAAA,KAAA,CAAM,OAAO,SAAS,CAAA,CAAA;AAAA,GAChC;AAAA,EAEA,KAAQ,GAAA;AACN,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC/B;AAAA,EAEA,MAA0B,GAAA;AACxB,IAAI,IAAA,IAAA,CAAK,MAAM,KAAU,KAAA,IAAA;AAAM,MAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAEjD,IAAM,MAAA,KAAA,GAAQ,KAAK,KAAM,CAAA,KAAA,CAAA;AACzB,IAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AAClC,IAAM,MAAA,QAAA,GAAW,KAAK,KAAM,CAAA,QAAA,CAAA;AAC5B,IAAA,MAAM,WACJ,OAAO,QAAA,KAAa,UAAa,GAAA,QAAA,GAAW,MAAM,QAAY,IAAA,IAAA,CAAA;AAChE,IACE,uBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MAA8B,KAAA,EAAO,EAAE,KAAA,EAAO,KAAM,EAAA;AAAA,MACnD,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,KAAA,EAAO,KAAK,KAAM,CAAA,KAAA;AAAA,OAAO,CAAA;AAAA,KACrC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,gBAGd,GAAA;AACA,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAE/C,EAAA,IAAI,YAAY,IAAM,EAAA;AACpB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,iEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist/utils/use-controllable-state.cjs

@@ -2,15 +2,16 @@
 
 var core = require('@liveblocks/core');
 var react = require('react');
+var useRerender = require('./use-rerender.cjs');
 
-function useControllableState(value, onChange, defaultValue) {
+function useControllableState(defaultValue, value, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
   const isControlled = value !== void 0;
   const wasControlled = react.useRef(isControlled);
   react.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && wasControlled.current !== isControlled) {
       core.console.warn(
-        `A component is changing from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`
+        `A component is changing from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`
       );
     }
     wasControlled.current = isControlled;
@@ -29,6 +30,28 @@ function useControllableState(value, onChange, defaultValue) {
   );
   return [currentValue, setValue];
 }
+function useSemiControllableState(value, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(value);
+  const lastChange = react.useRef("controlled");
+  const lastValue = react.useRef(value);
+  const [rerender] = useRerender.useRerender();
+  if (!Object.is(lastValue.current, value)) {
+    lastValue.current = value;
+    lastChange.current = "controlled";
+  }
+  const setValue = react.useCallback(
+    (value2) => {
+      lastChange.current = "uncontrolled";
+      setUncontrolledValue(value2);
+      rerender();
+      onChange?.(value2);
+    },
+    [onChange, rerender]
+  );
+  const currentValue = lastChange.current === "uncontrolled" ? uncontrolledValue : value;
+  return [currentValue, setValue];
+}
 
 exports.useControllableState = useControllableState;
+exports.useSemiControllableState = useSemiControllableState;
 //# sourceMappingURL=use-controllable-state.cjs.map

package/dist/utils/use-controllable-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable-state.cjs","sources":["../../src/utils/use-controllable-state.ts"],"sourcesContent":["import { console } from \"@liveblocks/core\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport function useControllableState<T>(\n  value?: T,\n  onChange?: (value: T) => void,\n  defaultValue?: T\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const wasControlled = useRef(isControlled);\n\n  useEffect(() => {\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      wasControlled.current !== isControlled\n    ) {\n      console.warn(\n        `A component is changing from ${\n          wasControlled ? \"controlled\" : \"uncontrolled\"\n        } to ${isControlled ? \"controlled\" : \"uncontrolled\"}.`\n      );\n    }\n\n    wasControlled.current = isControlled;\n  }, [isControlled]);\n\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const setValue = useCallback(\n    (value: T) => {\n      if (isControlled) {\n        return onChange?.(value);\n      } else {\n        setUncontrolledValue(value);\n\n        return onChange?.(value);\n      }\n    },\n    [isControlled, onChange]\n  );\n\n  return [currentValue, setValue] as const;\n}\n"],"names":["useState","useRef","useEffect","console","useCallback","value"],"mappings":";;;;;AAGgB,SAAA,oBAAA,CACd,KACA,EAAA,QAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,YAAY,CAAA,CAAA;AACvE,EAAA,MAAM,eAAe,KAAU,KAAA,KAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgBC,aAAO,YAAY,CAAA,CAAA;AAEzC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IACE,QAAQ,GAAI,CAAA,QAAA,KAAa,YACzB,IAAA,aAAA,CAAc,YAAY,YAC1B,EAAA;AACA,MAAQC,YAAA,CAAA,IAAA;AAAA,QACN,CACE,6BAAA,EAAA,aAAA,GAAgB,YAAe,GAAA,cAAA,CAAA,IAAA,EAC1B,eAAe,YAAe,GAAA,cAAA,CAAA,CAAA,CAAA;AAAA,OACvC,CAAA;AAAA,KACF;AAEA,IAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA,YAAA,GAAe,eAAe,KAAQ,GAAA,iBAAA,CAAA;AAE5C,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IACf,CAACC,MAAa,KAAA;AACZ,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OAClB,MAAA;AACL,QAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAE1B,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,CAAC,cAAc,QAAQ,CAAA;AAAA,GACzB,CAAA;AAEA,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC;;;;"}
+{"version":3,"file":"use-controllable-state.cjs","sources":["../../src/utils/use-controllable-state.ts"],"sourcesContent":["import { console } from \"@liveblocks/core\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useRerender } from \"./use-rerender\";\n\n/**\n * Hold a state in a \"controlled\" or \"uncontrolled\" way.\n */\nexport function useControllableState<T>(\n  /**\n   * The default uncontrolled value.\n   */\n  defaultValue: T,\n\n  /**\n   * The controlled value.\n   *\n   * If `undefined`, the returned value is uncontrolled.\n   * If set, this controlled value is used and returned as is.\n   */\n  value: T | undefined,\n\n  /**\n   * The event handler called when the value changes.\n   */\n  onChange: ((value: T) => void) | undefined\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const wasControlled = useRef(isControlled);\n\n  useEffect(() => {\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      wasControlled.current !== isControlled\n    ) {\n      console.warn(\n        `A component is changing from ${\n          wasControlled.current ? \"controlled\" : \"uncontrolled\"\n        } to ${isControlled ? \"controlled\" : \"uncontrolled\"}.`\n      );\n    }\n\n    wasControlled.current = isControlled;\n  }, [isControlled]);\n\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const setValue = useCallback(\n    (value: T) => {\n      if (isControlled) {\n        return onChange?.(value);\n      } else {\n        setUncontrolledValue(value);\n\n        return onChange?.(value);\n      }\n    },\n    [isControlled, onChange]\n  );\n\n  return [currentValue, setValue] as const;\n}\n\n/**\n * @experimental\n *\n * Hold a value in a \"semi-controlled\" way: a controlled value that can be\n * overridden by uncontrolled changes in a \"most recent wins\" way.\n *\n * @example\n *\n * A `Collapsible` component uses `useSemiControllableState` to control\n * its \"open\" state, it accepts two optional props: `open` and `onOpenChange`.\n *\n * Internally, it passes them to `useSemiControllableState`:\n *\n * ```tsx\n * const [isOpen, setIsOpen] = useSemiControllableState(\n *   open ?? true, // Defaults to `true` if `open` is not provided\n *   onOpenChange\n * );\n *\n * // ... `isOpen` and `setIsOpen` are used in the component's implementation ...\n * ```\n *\n * And finally here's how it could be used in a \"semi-controlled\" way:\n *\n * ```tsx\n * const status: `\"loading\" | \"success\" | \"error\"`;\n *\n * <Collapsible open={status === \"success\"} />\n * ```\n *\n * Like with a traditional controlled value, the collapsible will start closed\n * and will automatically open when `status` becomes `\"success\"`.\n *\n * But unlike with a traditional controlled value, the collapsible can still\n * open/close when it's clicked on by the user, overriding `open={status === \"success\"}`.\n *\n * It's possible to use it as a traditional uncontrolled value:\n *\n * ```tsx\n * const defaultOpen = false;\n *\n * <Collapsible open={defaultOpen} />\n * ```\n *\n * Or to sync the uncontrolled value like with a traditional uncontrolled value:\n *\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * // `isOpen` is synced with the uncontrolled value when the user clicks\n * <Collapsible open={isOpen} onOpenChange={setIsOpen} />\n * ```\n *\n * But with the caveat that it will still be possible to change the\n * uncontrolled value:\n *\n * ```tsx\n * const open = false;\n *\n * // Clicking on the collapsible will still open/close it, unlike with a\n * // traditional controlled value.\n * <Collapsible open={open} />\n * ```\n */\nexport function useSemiControllableState<T>(\n  /**\n   * The controlled value.\n   *\n   * When this value changes, it becomes the current value.\n   * But unlike a traditional controlled value, it can be overridden by\n   * uncontrolled changes.\n   */\n  value: T,\n\n  /**\n   * The event handler called when the uncontrolled value changes.\n   */\n  onChange: ((value: T) => void) | undefined\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(value);\n  const lastChange = useRef<\"uncontrolled\" | \"controlled\">(\"controlled\");\n  const lastValue = useRef(value);\n  const [rerender] = useRerender();\n\n  // Listen to `value` changes during the render phase to avoid\n  // having to always sync `uncontrolledValue` on every change.\n  if (!Object.is(lastValue.current, value)) {\n    lastValue.current = value;\n    lastChange.current = \"controlled\";\n  }\n\n  const setValue = useCallback(\n    (value: T) => {\n      lastChange.current = \"uncontrolled\";\n      setUncontrolledValue(value);\n\n      // If the new `uncontrolledValue` is the same as last time it was the \"last change\",\n      // `setUncontrolledValue` won't trigger a re-render, but the fact that it's becoming\n      // uncontrolled again is a change that needs a re-render.\n      rerender();\n\n      onChange?.(value);\n    },\n    [onChange, rerender]\n  );\n\n  const currentValue =\n    lastChange.current === \"uncontrolled\" ? uncontrolledValue : value;\n\n  return [currentValue, setValue] as const;\n}\n"],"names":["useState","useRef","useEffect","console","useCallback","value","useRerender"],"mappings":";;;;;;AAQgB,SAAA,oBAAA,CAId,YAQA,EAAA,KAAA,EAKA,QACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,YAAY,CAAA,CAAA;AACvE,EAAA,MAAM,eAAe,KAAU,KAAA,KAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgBC,aAAO,YAAY,CAAA,CAAA;AAEzC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IACE,QAAQ,GAAI,CAAA,QAAA,KAAa,YACzB,IAAA,aAAA,CAAc,YAAY,YAC1B,EAAA;AACA,MAAQC,YAAA,CAAA,IAAA;AAAA,QACN,gCACE,aAAc,CAAA,OAAA,GAAU,YAAe,GAAA,cAAA,CAAA,IAAA,EAClC,eAAe,YAAe,GAAA,cAAA,CAAA,CAAA,CAAA;AAAA,OACvC,CAAA;AAAA,KACF;AAEA,IAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA,YAAA,GAAe,eAAe,KAAQ,GAAA,iBAAA,CAAA;AAE5C,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IACf,CAACC,MAAa,KAAA;AACZ,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OAClB,MAAA;AACL,QAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAE1B,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,CAAC,cAAc,QAAQ,CAAA;AAAA,GACzB,CAAA;AAEA,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC,CAAA;AAkEgB,SAAA,wBAAA,CAQd,OAKA,QACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIL,eAAS,KAAK,CAAA,CAAA;AAChE,EAAM,MAAA,UAAA,GAAaC,aAAsC,YAAY,CAAA,CAAA;AACrE,EAAM,MAAA,SAAA,GAAYA,aAAO,KAAK,CAAA,CAAA;AAC9B,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAIK,uBAAY,EAAA,CAAA;AAI/B,EAAA,IAAI,CAAC,MAAO,CAAA,EAAA,CAAG,SAAU,CAAA,OAAA,EAAS,KAAK,CAAG,EAAA;AACxC,IAAA,SAAA,CAAU,OAAU,GAAA,KAAA,CAAA;AACpB,IAAA,UAAA,CAAW,OAAU,GAAA,YAAA,CAAA;AAAA,GACvB;AAEA,EAAA,MAAM,QAAW,GAAAF,iBAAA;AAAA,IACf,CAACC,MAAa,KAAA;AACZ,MAAA,UAAA,CAAW,OAAU,GAAA,cAAA,CAAA;AACrB,MAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAK1B,MAAS,QAAA,EAAA,CAAA;AAET,MAAA,QAAA,GAAWA,MAAK,CAAA,CAAA;AAAA,KAClB;AAAA,IACA,CAAC,UAAU,QAAQ,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,YACJ,GAAA,UAAA,CAAW,OAAY,KAAA,cAAA,GAAiB,iBAAoB,GAAA,KAAA,CAAA;AAE9D,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC;;;;;"}

package/dist/utils/use-controllable-state.js

@@ -1,14 +1,15 @@
 import { console } from '@liveblocks/core';
 import { useState, useRef, useEffect, useCallback } from 'react';
+import { useRerender } from './use-rerender.js';
 
-function useControllableState(value, onChange, defaultValue) {
+function useControllableState(defaultValue, value, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const isControlled = value !== void 0;
   const wasControlled = useRef(isControlled);
   useEffect(() => {
     if (process.env.NODE_ENV !== "production" && wasControlled.current !== isControlled) {
       console.warn(
-        `A component is changing from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`
+        `A component is changing from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`
       );
     }
     wasControlled.current = isControlled;
@@ -27,6 +28,27 @@ function useControllableState(value, onChange, defaultValue) {
   );
   return [currentValue, setValue];
 }
+function useSemiControllableState(value, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(value);
+  const lastChange = useRef("controlled");
+  const lastValue = useRef(value);
+  const [rerender] = useRerender();
+  if (!Object.is(lastValue.current, value)) {
+    lastValue.current = value;
+    lastChange.current = "controlled";
+  }
+  const setValue = useCallback(
+    (value2) => {
+      lastChange.current = "uncontrolled";
+      setUncontrolledValue(value2);
+      rerender();
+      onChange?.(value2);
+    },
+    [onChange, rerender]
+  );
+  const currentValue = lastChange.current === "uncontrolled" ? uncontrolledValue : value;
+  return [currentValue, setValue];
+}
 
-export { useControllableState };
+export { useControllableState, useSemiControllableState };
 //# sourceMappingURL=use-controllable-state.js.map

package/dist/utils/use-controllable-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable-state.js","sources":["../../src/utils/use-controllable-state.ts"],"sourcesContent":["import { console } from \"@liveblocks/core\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport function useControllableState<T>(\n  value?: T,\n  onChange?: (value: T) => void,\n  defaultValue?: T\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const wasControlled = useRef(isControlled);\n\n  useEffect(() => {\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      wasControlled.current !== isControlled\n    ) {\n      console.warn(\n        `A component is changing from ${\n          wasControlled ? \"controlled\" : \"uncontrolled\"\n        } to ${isControlled ? \"controlled\" : \"uncontrolled\"}.`\n      );\n    }\n\n    wasControlled.current = isControlled;\n  }, [isControlled]);\n\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const setValue = useCallback(\n    (value: T) => {\n      if (isControlled) {\n        return onChange?.(value);\n      } else {\n        setUncontrolledValue(value);\n\n        return onChange?.(value);\n      }\n    },\n    [isControlled, onChange]\n  );\n\n  return [currentValue, setValue] as const;\n}\n"],"names":["value"],"mappings":";;;AAGgB,SAAA,oBAAA,CACd,KACA,EAAA,QAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AACvE,EAAA,MAAM,eAAe,KAAU,KAAA,KAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgB,OAAO,YAAY,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IACE,QAAQ,GAAI,CAAA,QAAA,KAAa,YACzB,IAAA,aAAA,CAAc,YAAY,YAC1B,EAAA;AACA,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,CACE,6BAAA,EAAA,aAAA,GAAgB,YAAe,GAAA,cAAA,CAAA,IAAA,EAC1B,eAAe,YAAe,GAAA,cAAA,CAAA,CAAA,CAAA;AAAA,OACvC,CAAA;AAAA,KACF;AAEA,IAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA,YAAA,GAAe,eAAe,KAAQ,GAAA,iBAAA,CAAA;AAE5C,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAACA,MAAa,KAAA;AACZ,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OAClB,MAAA;AACL,QAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAE1B,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,CAAC,cAAc,QAAQ,CAAA;AAAA,GACzB,CAAA;AAEA,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC;;;;"}
+{"version":3,"file":"use-controllable-state.js","sources":["../../src/utils/use-controllable-state.ts"],"sourcesContent":["import { console } from \"@liveblocks/core\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useRerender } from \"./use-rerender\";\n\n/**\n * Hold a state in a \"controlled\" or \"uncontrolled\" way.\n */\nexport function useControllableState<T>(\n  /**\n   * The default uncontrolled value.\n   */\n  defaultValue: T,\n\n  /**\n   * The controlled value.\n   *\n   * If `undefined`, the returned value is uncontrolled.\n   * If set, this controlled value is used and returned as is.\n   */\n  value: T | undefined,\n\n  /**\n   * The event handler called when the value changes.\n   */\n  onChange: ((value: T) => void) | undefined\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const wasControlled = useRef(isControlled);\n\n  useEffect(() => {\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      wasControlled.current !== isControlled\n    ) {\n      console.warn(\n        `A component is changing from ${\n          wasControlled.current ? \"controlled\" : \"uncontrolled\"\n        } to ${isControlled ? \"controlled\" : \"uncontrolled\"}.`\n      );\n    }\n\n    wasControlled.current = isControlled;\n  }, [isControlled]);\n\n  const currentValue = isControlled ? value : uncontrolledValue;\n\n  const setValue = useCallback(\n    (value: T) => {\n      if (isControlled) {\n        return onChange?.(value);\n      } else {\n        setUncontrolledValue(value);\n\n        return onChange?.(value);\n      }\n    },\n    [isControlled, onChange]\n  );\n\n  return [currentValue, setValue] as const;\n}\n\n/**\n * @experimental\n *\n * Hold a value in a \"semi-controlled\" way: a controlled value that can be\n * overridden by uncontrolled changes in a \"most recent wins\" way.\n *\n * @example\n *\n * A `Collapsible` component uses `useSemiControllableState` to control\n * its \"open\" state, it accepts two optional props: `open` and `onOpenChange`.\n *\n * Internally, it passes them to `useSemiControllableState`:\n *\n * ```tsx\n * const [isOpen, setIsOpen] = useSemiControllableState(\n *   open ?? true, // Defaults to `true` if `open` is not provided\n *   onOpenChange\n * );\n *\n * // ... `isOpen` and `setIsOpen` are used in the component's implementation ...\n * ```\n *\n * And finally here's how it could be used in a \"semi-controlled\" way:\n *\n * ```tsx\n * const status: `\"loading\" | \"success\" | \"error\"`;\n *\n * <Collapsible open={status === \"success\"} />\n * ```\n *\n * Like with a traditional controlled value, the collapsible will start closed\n * and will automatically open when `status` becomes `\"success\"`.\n *\n * But unlike with a traditional controlled value, the collapsible can still\n * open/close when it's clicked on by the user, overriding `open={status === \"success\"}`.\n *\n * It's possible to use it as a traditional uncontrolled value:\n *\n * ```tsx\n * const defaultOpen = false;\n *\n * <Collapsible open={defaultOpen} />\n * ```\n *\n * Or to sync the uncontrolled value like with a traditional uncontrolled value:\n *\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * // `isOpen` is synced with the uncontrolled value when the user clicks\n * <Collapsible open={isOpen} onOpenChange={setIsOpen} />\n * ```\n *\n * But with the caveat that it will still be possible to change the\n * uncontrolled value:\n *\n * ```tsx\n * const open = false;\n *\n * // Clicking on the collapsible will still open/close it, unlike with a\n * // traditional controlled value.\n * <Collapsible open={open} />\n * ```\n */\nexport function useSemiControllableState<T>(\n  /**\n   * The controlled value.\n   *\n   * When this value changes, it becomes the current value.\n   * But unlike a traditional controlled value, it can be overridden by\n   * uncontrolled changes.\n   */\n  value: T,\n\n  /**\n   * The event handler called when the uncontrolled value changes.\n   */\n  onChange: ((value: T) => void) | undefined\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(value);\n  const lastChange = useRef<\"uncontrolled\" | \"controlled\">(\"controlled\");\n  const lastValue = useRef(value);\n  const [rerender] = useRerender();\n\n  // Listen to `value` changes during the render phase to avoid\n  // having to always sync `uncontrolledValue` on every change.\n  if (!Object.is(lastValue.current, value)) {\n    lastValue.current = value;\n    lastChange.current = \"controlled\";\n  }\n\n  const setValue = useCallback(\n    (value: T) => {\n      lastChange.current = \"uncontrolled\";\n      setUncontrolledValue(value);\n\n      // If the new `uncontrolledValue` is the same as last time it was the \"last change\",\n      // `setUncontrolledValue` won't trigger a re-render, but the fact that it's becoming\n      // uncontrolled again is a change that needs a re-render.\n      rerender();\n\n      onChange?.(value);\n    },\n    [onChange, rerender]\n  );\n\n  const currentValue =\n    lastChange.current === \"uncontrolled\" ? uncontrolledValue : value;\n\n  return [currentValue, setValue] as const;\n}\n"],"names":["value"],"mappings":";;;;AAQgB,SAAA,oBAAA,CAId,YAQA,EAAA,KAAA,EAKA,QACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AACvE,EAAA,MAAM,eAAe,KAAU,KAAA,KAAA,CAAA,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgB,OAAO,YAAY,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IACE,QAAQ,GAAI,CAAA,QAAA,KAAa,YACzB,IAAA,aAAA,CAAc,YAAY,YAC1B,EAAA;AACA,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,gCACE,aAAc,CAAA,OAAA,GAAU,YAAe,GAAA,cAAA,CAAA,IAAA,EAClC,eAAe,YAAe,GAAA,cAAA,CAAA,CAAA,CAAA;AAAA,OACvC,CAAA;AAAA,KACF;AAEA,IAAA,aAAA,CAAc,OAAU,GAAA,YAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA,YAAA,GAAe,eAAe,KAAQ,GAAA,iBAAA,CAAA;AAE5C,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAACA,MAAa,KAAA;AACZ,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OAClB,MAAA;AACL,QAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAE1B,QAAA,OAAO,WAAWA,MAAK,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,CAAC,cAAc,QAAQ,CAAA;AAAA,GACzB,CAAA;AAEA,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC,CAAA;AAkEgB,SAAA,wBAAA,CAQd,OAKA,QACA,EAAA;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChE,EAAM,MAAA,UAAA,GAAa,OAAsC,YAAY,CAAA,CAAA;AACrE,EAAM,MAAA,SAAA,GAAY,OAAO,KAAK,CAAA,CAAA;AAC9B,EAAM,MAAA,CAAC,QAAQ,CAAA,GAAI,WAAY,EAAA,CAAA;AAI/B,EAAA,IAAI,CAAC,MAAO,CAAA,EAAA,CAAG,SAAU,CAAA,OAAA,EAAS,KAAK,CAAG,EAAA;AACxC,IAAA,SAAA,CAAU,OAAU,GAAA,KAAA,CAAA;AACpB,IAAA,UAAA,CAAW,OAAU,GAAA,YAAA,CAAA;AAAA,GACvB;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAACA,MAAa,KAAA;AACZ,MAAA,UAAA,CAAW,OAAU,GAAA,cAAA,CAAA;AACrB,MAAA,oBAAA,CAAqBA,MAAK,CAAA,CAAA;AAK1B,MAAS,QAAA,EAAA,CAAA;AAET,MAAA,QAAA,GAAWA,MAAK,CAAA,CAAA;AAAA,KAClB;AAAA,IACA,CAAC,UAAU,QAAQ,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,YACJ,GAAA,UAAA,CAAW,OAAY,KAAA,cAAA,GAAiB,iBAAoB,GAAA,KAAA,CAAA;AAE9D,EAAO,OAAA,CAAC,cAAc,QAAQ,CAAA,CAAA;AAChC;;;;"}

package/dist/utils/use-visible.cjs

@@ -3,68 +3,88 @@
 var react = require('react');
 var useLatest = require('./use-latest.cjs');
 
-let intersectionObserver;
-const intersectionCallbacks = /* @__PURE__ */ new WeakMap();
-function observe(element, callback) {
-  if (!intersectionObserver) {
-    intersectionObserver = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        const callback2 = intersectionCallbacks.get(entry.target);
-        callback2?.(entry);
+let optionlessIntersectionObserver;
+const optionlessIntersectionCallbacks = /* @__PURE__ */ new WeakMap();
+const individualIntersectionObservers = /* @__PURE__ */ new WeakMap();
+function observe(element, callback, options) {
+  if (!options) {
+    if (!optionlessIntersectionObserver) {
+      optionlessIntersectionObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          const callback2 = optionlessIntersectionCallbacks.get(entry.target);
+          callback2?.(entry);
+        }
+      });
+    }
+    optionlessIntersectionCallbacks.set(element, callback);
+    optionlessIntersectionObserver.observe(element);
+  } else {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          callback?.(entry);
+        }
+      },
+      {
+        root: options.root?.current,
+        rootMargin: typeof options.rootMargin === "number" ? `${options.rootMargin}px` : options.rootMargin
       }
-    });
+    );
+    individualIntersectionObservers.set(element, observer);
+    observer.observe(element);
   }
-  intersectionCallbacks.set(element, callback);
-  intersectionObserver.observe(element);
 }
-function unobserve(element) {
-  intersectionCallbacks.delete(element);
-  intersectionObserver?.unobserve(element);
-}
-function useVisible(ref, options) {
-  const [isVisible, setVisible] = react.useState(false);
-  const enabled = options?.enabled ?? true;
-  react.useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (enabled) {
-      observe(element, (entry) => {
-        setVisible(entry.isIntersecting);
-      });
-    } else {
-      unobserve(element);
-    }
-    return () => {
-      unobserve(element);
-    };
-  }, [enabled]);
-  return isVisible;
+function unobserve(element, options) {
+  if (!options) {
+    optionlessIntersectionCallbacks.delete(element);
+    optionlessIntersectionObserver?.unobserve(element);
+  } else {
+    const observer = individualIntersectionObservers.get(element);
+    observer?.unobserve(element);
+    individualIntersectionObservers.delete(element);
+  }
 }
-function useVisibleCallback(ref, callback, options) {
+function useIntersectionCallback(ref, callback, options) {
   const enabled = options?.enabled ?? true;
   const latestCallback = useLatest.useLatest(callback);
+  const { root, rootMargin } = options ?? {};
   react.useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
     }
+    const observeOptions = {
+      root,
+      rootMargin
+    };
     if (enabled) {
-      observe(element, (entry) => {
-        if (entry.isIntersecting) {
-          latestCallback.current();
-        }
-      });
+      observe(
+        element,
+        (entry) => {
+          latestCallback.current(entry.isIntersecting, entry);
+        },
+        observeOptions
+      );
     } else {
-      unobserve(element);
+      unobserve(element, observeOptions);
     }
     return () => {
-      unobserve(element);
+      unobserve(element, observeOptions);
     };
-  }, [enabled]);
+  }, [ref, enabled, latestCallback, root, rootMargin]);
+}
+function useVisible(ref, options) {
+  const [isVisible, setVisible] = react.useState(
+    options?.initialValue !== void 0 ? options.initialValue : false
+  );
+  useIntersectionCallback(
+    ref,
+    (isIntersecting) => setVisible(isIntersecting),
+    options
+  );
+  return isVisible;
 }
 
+exports.useIntersectionCallback = useIntersectionCallback;
 exports.useVisible = useVisible;
-exports.useVisibleCallback = useVisibleCallback;
 //# sourceMappingURL=use-visible.cjs.map

package/dist/utils/use-visible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-visible.cjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback","useState","useEffect","useLatest"],"mappings":";;;;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAKgB,SAAA,UAAA,CAAW,KAAyB,OAAmB,EAAA;AACrE,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AAEpC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,UAAA,CAAW,MAAM,cAAc,CAAA,CAAA;AAAA,OAChC,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAO,OAAA,SAAA,CAAA;AACT,CAAA;AAEgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiBC,oBAAU,QAAQ,CAAA,CAAA;AAEzC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;;"}
+{"version":3,"file":"use-visible.cjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ninterface ObserveOptions {\n  rootMargin?: string | number;\n  root?: RefObject<Element>;\n}\n\ninterface Options extends ObserveOptions {\n  enabled?: boolean;\n}\n\ninterface VisibleOptions<T = boolean> extends Options {\n  initialValue?: T;\n}\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet optionlessIntersectionObserver: IntersectionObserver | undefined;\nconst optionlessIntersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nconst individualIntersectionObservers = new WeakMap<\n  Element,\n  IntersectionObserver\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback,\n  options?: ObserveOptions\n) {\n  // Observers without options share a common IntersectionObserver instance, ones with options have their own\n  if (!options) {\n    if (!optionlessIntersectionObserver) {\n      optionlessIntersectionObserver = new IntersectionObserver((entries) => {\n        for (const entry of entries) {\n          const callback = optionlessIntersectionCallbacks.get(entry.target);\n\n          callback?.(entry);\n        }\n      });\n    }\n\n    optionlessIntersectionCallbacks.set(element, callback);\n    optionlessIntersectionObserver.observe(element);\n  } else {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          callback?.(entry);\n        }\n      },\n      {\n        root: options.root?.current,\n        rootMargin:\n          typeof options.rootMargin === \"number\"\n            ? `${options.rootMargin}px`\n            : options.rootMargin,\n      }\n    );\n\n    individualIntersectionObservers.set(element, observer);\n    observer.observe(element);\n  }\n}\n\nfunction unobserve(element: Element, options?: ObserveOptions) {\n  if (!options) {\n    optionlessIntersectionCallbacks.delete(element);\n    optionlessIntersectionObserver?.unobserve(element);\n  } else {\n    const observer = individualIntersectionObservers.get(element);\n\n    observer?.unobserve(element);\n    individualIntersectionObservers.delete(element);\n  }\n}\n\n/**\n * Observe when an element enters or exits the viewport.\n *\n * If you only need to get a stateful visibility value, use the higher level hook `useVisible` instead.\n */\nexport function useIntersectionCallback(\n  ref: RefObject<Element>,\n  callback: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n  const { root, rootMargin } = options ?? {};\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    const observeOptions: ObserveOptions = {\n      root,\n      rootMargin,\n    };\n\n    if (enabled) {\n      observe(\n        element,\n        (entry) => {\n          // The intersection observer entry might be useful in some cases but the main information\n          // is whether the element is intersecting or not so we pass that as the first argument.\n          latestCallback.current(entry.isIntersecting, entry);\n        },\n        observeOptions\n      );\n    } else {\n      unobserve(element, observeOptions);\n    }\n\n    return () => {\n      unobserve(element, observeOptions);\n    };\n  }, [ref, enabled, latestCallback, root, rootMargin]);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible<T extends boolean | null = boolean>(\n  ref: RefObject<Element>,\n  options?: VisibleOptions<T>\n) {\n  const [isVisible, setVisible] = useState(\n    options?.initialValue !== undefined ? options.initialValue : false\n  );\n\n  useIntersectionCallback(\n    ref,\n    (isIntersecting) => setVisible(isIntersecting),\n    options\n  );\n\n  return isVisible;\n}\n"],"names":["callback","useLatest","useEffect","useState"],"mappings":"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"}