@liveblocks/react-ui 2.8.3-tiptap1 → 2.9.0-rc1

package/dist/components/InboxNotificationList.js

@@ -3,8 +3,22 @@
 
 var React = require('react');
 var classNames = require('../utils/class-names.js');
+var useVisible = require('../utils/use-visible.js');
 
-const InboxNotificationList = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
+function ReachEndMarker({
+  enabled,
+  onReachEnd
+}) {
+  const markerRef = React.useRef(null);
+  useVisible.useVisibleCallback(markerRef, onReachEnd, {
+    enabled
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: markerRef,
+    style: { height: 0 }
+  });
+}
+const InboxNotificationList = React.forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React.createElement("ol", {
     className: classNames.classNames("lb-root lb-inbox-notification-list", className),
     ...props,
@@ -12,7 +26,10 @@ const InboxNotificationList = React.forwardRef(({ children, className, ...props
   }, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("li", {
     key: index,
     className: "lb-inbox-notification-list-item"
-  }, child)));
+  }, child)), onReachEnd && /* @__PURE__ */ React.createElement(ReachEndMarker, {
+    onReachEnd,
+    enabled: React.Children.count(children) > 0
+  }));
 });
 
 exports.InboxNotificationList = InboxNotificationList;

package/dist/components/InboxNotificationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type InboxNotificationListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;AAmBa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMlC;;"}
+{"version":3,"file":"InboxNotificationList.js","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef, useRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useVisibleCallback(markerRef, onReachEnd, {\n    enabled,\n  });\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAaA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAA0C;AACxC;AAGF;AAAQ;AAAS;AAA8B;AACjD;AAYa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMzB;AACC;AACoC;AAK9C;;"}

package/dist/components/InboxNotificationList.mjs

@@ -1,8 +1,22 @@
 'use client';
-import React__default, { forwardRef, Children } from 'react';
+import React__default, { forwardRef, Children, useRef } from 'react';
 import { classNames } from '../utils/class-names.mjs';
+import { useVisibleCallback } from '../utils/use-visible.mjs';
 
-const InboxNotificationList = forwardRef(({ children, className, ...props }, forwardedRef) => {
+function ReachEndMarker({
+  enabled,
+  onReachEnd
+}) {
+  const markerRef = useRef(null);
+  useVisibleCallback(markerRef, onReachEnd, {
+    enabled
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ref: markerRef,
+    style: { height: 0 }
+  });
+}
+const InboxNotificationList = forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React__default.createElement("ol", {
     className: classNames("lb-root lb-inbox-notification-list", className),
     ...props,
@@ -10,7 +24,10 @@ const InboxNotificationList = forwardRef(({ children, className, ...props }, for
   }, Children.map(children, (child, index) => /* @__PURE__ */ React__default.createElement("li", {
     key: index,
     className: "lb-inbox-notification-list-item"
-  }, child)));
+  }, child)), onReachEnd && /* @__PURE__ */ React__default.createElement(ReachEndMarker, {
+    onReachEnd,
+    enabled: Children.count(children) > 0
+  }));
 });
 
 export { InboxNotificationList };

package/dist/components/InboxNotificationList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationList.mjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type InboxNotificationListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;AAmBa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMlC;;"}
+{"version":3,"file":"InboxNotificationList.mjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport React, { Children, forwardRef, useRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useVisibleCallback(markerRef, onReachEnd, {\n    enabled,\n  });\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;AAaA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAA0C;AACxC;AAGF;AAAQ;AAAS;AAA8B;AACjD;AAYa;AAIX;AACG;AACsE;AACjE;AACC;AAGF;AAAQ;AAAiB;AAMzB;AACC;AACoC;AAK9C;;"}

package/dist/index.d.mts

@@ -479,7 +479,9 @@ declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificati
     Avatar: typeof InboxNotificationAvatar;
 };
 
-declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
+interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
+    onReachEnd?: () => void;
+}
 /**
  * Displays inbox notifications as a list.
  *
@@ -490,7 +492,7 @@ declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
  *   ))}
  * </InboxNotificationList>
  */
-declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const InboxNotificationList: React.ForwardRefExoticComponent<InboxNotificationListProps & React.RefAttributes<HTMLOListElement>>;
 
 interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
     /**

package/dist/index.d.ts

@@ -479,7 +479,9 @@ declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificati
     Avatar: typeof InboxNotificationAvatar;
 };
 
-declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
+interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
+    onReachEnd?: () => void;
+}
 /**
  * Displays inbox notifications as a list.
  *
@@ -490,7 +492,7 @@ declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
  *   ))}
  * </InboxNotificationList>
  */
-declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const InboxNotificationList: React.ForwardRefExoticComponent<InboxNotificationListProps & React.RefAttributes<HTMLOListElement>>;
 
 interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
     /**

package/dist/version.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.8.3-tiptap1";
+const PKG_VERSION = "2.9.0-rc1";
 const PKG_FORMAT = "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,GAAiD,gBAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}
+{"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,GAAiD,YAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}

package/dist/version.mjs

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.8.3-tiptap1";
+const PKG_VERSION = "2.9.0-rc1";
 const PKG_FORMAT = "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,GAAiD,gBAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}
+{"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,GAAiD,YAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.8.3-tiptap1",
+  "version": "2.9.0-rc1",
   "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.1",
-    "@liveblocks/client": "2.8.3-tiptap1",
-    "@liveblocks/core": "2.8.3-tiptap1",
-    "@liveblocks/react": "2.8.3-tiptap1",
+    "@liveblocks/client": "2.9.0-rc1",
+    "@liveblocks/core": "2.9.0-rc1",
+    "@liveblocks/react": "2.9.0-rc1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",