@liveblocks/react-ui - npm Package Compare versions

Comparing version 2.16.0-toolbars5 to 2.17.0-channels1

dist/_private/index.d.ts

 import * as react from 'react';
-import { ComponentProps, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, RefCallback } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-export { TooltipProvider } from '@radix-ui/react-tooltip';
+import { ComponentProps, ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ComponentProps<"button"> {
-    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary";
+    variant?: "default" | "outline" | "toggle" | "primary";
     size?: "default" | "large";
     disableable?: boolean;
-    icon?: ReactNode;
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const SelectButton: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -32,12 +28,2 @@ type SlotProp = {
 
-interface TooltipProps extends Pick<TooltipPrimitive.TooltipTriggerProps, "children">, Omit<TooltipPrimitive.TooltipContentProps, "content"> {
-    content: ReactNode;
-    multiline?: boolean;
-}
-interface ShortcutTooltipProps extends TooltipProps {
-    shortcut?: string;
-}
-declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLButtonElement>>;
-declare const ShortcutTooltip: react.ForwardRefExoticComponent<ShortcutTooltipProps & react.RefAttributes<HTMLButtonElement>>;
-
 interface UserProps extends ComponentProps<"span"> {
@@ -61,20 +47,4 @@ /**
 
-declare function BlockquoteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function BoldIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function ChevronDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ChevronLeftIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ChevronRightIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ChevronUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CodeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CommentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -92,22 +62,4 @@
 
-declare function H1Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function H2Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function H3Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ItalicIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function LengthenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ListOrderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function ResolveIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
@@ -123,32 +75,6 @@
 
-declare function ShortenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function SparklesIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function SpinnerIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function StrikethroughIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function TextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function TranslateIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function UnderlineIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
 declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function capitalize(string: string): string;
-
-/**
- * "Freezes" a given value, so that it will return the same value/instance on
- * each subsequent render. This can be used to freeze "initial" values for
- * custom hooks, much like how `useState(initialState)` or
- * `useRef(initialValue)` works.
- */
-declare function useInitial<T>(value: T | (() => T)): T;
-
-declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
-
-export { ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BlockquoteIcon, BoldIcon, Button, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, CommentIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiAddIcon, EmojiIcon, H1Icon, H2Icon, H3Icon, ItalicIcon, LengthenIcon, List, ListOrderedIcon, ListUnorderedIcon, MentionIcon, QuestionMarkIcon, RedoIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SelectButton, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SpinnerIcon, StrikethroughIcon, TextIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useInitial, useRefs };
+export { ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Button, CheckIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiAddIcon, EmojiIcon, List, MentionIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SendIcon, SpinnerIcon, User, WarningIcon };

dist/_private/index.js

@@ -5,21 +5,8 @@ 'use strict';
 var List = require('../components/internal/List.js');
-var Tooltip = require('../components/internal/Tooltip.js');
 var User = require('../components/internal/User.js');
 require('../icons/index.js');
-var capitalize = require('../utils/capitalize.js');
-var useInitial = require('../utils/use-initial.js');
-var useRefs = require('../utils/use-refs.js');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ArrowDown = require('../icons/ArrowDown.js');
 var ArrowUp = require('../icons/ArrowUp.js');
 var Attachment = require('../icons/Attachment.js');
-var Blockquote = require('../icons/Blockquote.js');
-var Bold = require('../icons/Bold.js');
 var Check = require('../icons/Check.js');
-var ChevronDown = require('../icons/ChevronDown.js');
-var ChevronLeft = require('../icons/ChevronLeft.js');
-var ChevronRight = require('../icons/ChevronRight.js');
-var ChevronUp = require('../icons/ChevronUp.js');
-var Code = require('../icons/Code.js');
-var Comment = require('../icons/Comment.js');
 var Cross = require('../icons/Cross.js');
@@ -31,12 +18,3 @@ var Delete = require('../icons/Delete.js');
 var EmojiAdd = require('../icons/EmojiAdd.js');
-var H1 = require('../icons/H1.js');
-var H2 = require('../icons/H2.js');
-var H3 = require('../icons/H3.js');
-var Italic = require('../icons/Italic.js');
-var Lengthen = require('../icons/Lengthen.js');
-var ListOrdered = require('../icons/ListOrdered.js');
-var ListUnordered = require('../icons/ListUnordered.js');
 var Mention = require('../icons/Mention.js');
-var QuestionMark = require('../icons/QuestionMark.js');
-var Redo = require('../icons/Redo.js');
 var Resolve = require('../icons/Resolve.js');
@@ -47,10 +25,3 @@ var Resolved = require('../icons/Resolved.js');
 var Send = require('../icons/Send.js');
-var Shorten = require('../icons/Shorten.js');
-var Sparkles = require('../icons/Sparkles.js');
 var Spinner = require('../icons/Spinner.js');
-var Strikethrough = require('../icons/Strikethrough.js');
-var Text = require('../icons/Text.js');
-var Translate = require('../icons/Translate.js');
-var Underline = require('../icons/Underline.js');
-var Undo = require('../icons/Undo.js');
 var Warning = require('../icons/Warning.js');
@@ -61,26 +32,8 @@
 exports.Button = Button.Button;
-exports.SelectButton = Button.SelectButton;
 exports.List = List.List;
-exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
-exports.Tooltip = Tooltip.Tooltip;
 exports.User = User.User;
-exports.capitalize = capitalize.capitalize;
-exports.useInitial = useInitial.useInitial;
-exports.useRefs = useRefs.useRefs;
-Object.defineProperty(exports, 'TooltipProvider', {
-  enumerable: true,
-  get: function () { return TooltipPrimitive.TooltipProvider; }
-});
 exports.ArrowDownIcon = ArrowDown.ArrowDownIcon;
 exports.ArrowUpIcon = ArrowUp.ArrowUpIcon;
 exports.AttachmentIcon = Attachment.AttachmentIcon;
-exports.BlockquoteIcon = Blockquote.BlockquoteIcon;
-exports.BoldIcon = Bold.BoldIcon;
 exports.CheckIcon = Check.CheckIcon;
-exports.ChevronDownIcon = ChevronDown.ChevronDownIcon;
-exports.ChevronLeftIcon = ChevronLeft.ChevronLeftIcon;
-exports.ChevronRightIcon = ChevronRight.ChevronRightIcon;
-exports.ChevronUpIcon = ChevronUp.ChevronUpIcon;
-exports.CodeIcon = Code.CodeIcon;
-exports.CommentIcon = Comment.CommentIcon;
 exports.CrossIcon = Cross.CrossIcon;
@@ -92,12 +45,3 @@ exports.DeleteIcon = Delete.DeleteIcon;
 exports.EmojiAddIcon = EmojiAdd.EmojiAddIcon;
-exports.H1Icon = H1.H1Icon;
-exports.H2Icon = H2.H2Icon;
-exports.H3Icon = H3.H3Icon;
-exports.ItalicIcon = Italic.ItalicIcon;
-exports.LengthenIcon = Lengthen.LengthenIcon;
-exports.ListOrderedIcon = ListOrdered.ListOrderedIcon;
-exports.ListUnorderedIcon = ListUnordered.ListUnorderedIcon;
 exports.MentionIcon = Mention.MentionIcon;
-exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
-exports.RedoIcon = Redo.RedoIcon;
 exports.ResolveIcon = Resolve.ResolveIcon;
@@ -108,11 +52,4 @@ exports.ResolvedIcon = Resolved.ResolvedIcon;
 exports.SendIcon = Send.SendIcon;
-exports.ShortenIcon = Shorten.ShortenIcon;
-exports.SparklesIcon = Sparkles.SparklesIcon;
 exports.SpinnerIcon = Spinner.SpinnerIcon;
-exports.StrikethroughIcon = Strikethrough.StrikethroughIcon;
-exports.TextIcon = Text.TextIcon;
-exports.TranslateIcon = Translate.TranslateIcon;
-exports.UnderlineIcon = Underline.UnderlineIcon;
-exports.UndoIcon = Undo.UndoIcon;
 exports.WarningIcon = Warning.WarningIcon;
 //# sourceMappingURL=index.js.map

dist/components/Comment.js

@@ -105,3 +105,3 @@ "use client";
   const $ = overrides.useOverrides(overrides$1);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Button.CustomButton, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, {
     className: classNames.classNames("lb-comment-reaction", className),
@@ -509,3 +509,5 @@ variant: "outline",
                             "aria-label": $.COMMENT_ADD_REACTION,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {})
+                            children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                              className: "lb-button-icon"
+                            })
                           })
@@ -521,13 +523,21 @@ })
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
                             onSelect: handleEdit,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {}),
-                            children: $.COMMENT_EDIT
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_EDIT
+                            ]
                           }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
                             onSelect: handleDelete,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {}),
-                            children: $.COMMENT_DELETE
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_DELETE
+                            ]
                           })
@@ -545,3 +555,5 @@ ]
                             "aria-label": $.COMMENT_MORE,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
                           })
@@ -574,3 +586,5 @@ })
                         onClick: handleEditCancel,
-                        icon: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {
+                          className: "lb-button-icon"
+                        })
                       })
@@ -580,3 +594,5 @@ }),
                       content: $.COMMENT_EDIT_COMPOSER_SAVE,
-                      shortcut: "Enter",
+                      shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                        name: "enter"
+                      }),
                       children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Submit, {
@@ -589,3 +605,5 @@ asChild: true,
                           "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {})
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                            className: "lb-button-icon"
+                          })
                         })
@@ -655,3 +673,5 @@ })
                               "aria-label": $.COMMENT_ADD_REACTION,
-                              icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {})
+                              children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                                className: "lb-button-icon"
+                              })
                             })
@@ -658,0 +678,0 @@ })

dist/components/Composer.js

@@ -64,4 +64,6 @@ "use client";
       "aria-label": label,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {}),
-      ...props
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {
+        className: "lb-button-icon"
+      })
     })
@@ -96,4 +98,6 @@ });
           "aria-label": label,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {}),
-          ...props
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {
+            className: "lb-button-icon"
+          })
         })
@@ -125,4 +129,6 @@ })
         "aria-label": label,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
-        ...props
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {
+          className: "lb-button-icon"
+        })
       })
@@ -167,9 +173,3 @@ })
 }
-function MarkToggle({
-  mark,
-  icon,
-  shortcut,
-  children,
-  ...props
-}) {
+function MarkToggle({ mark, shortcut, children, ...props }) {
   const $ = overrides.useOverrides();
@@ -189,4 +189,3 @@ const label = react.useMemo(() => {
         "aria-label": label,
-        variant: "toolbar",
-        icon,
+        variant: "toggle",
         children
@@ -200,19 +199,58 @@ })
     mark: "bold",
-    shortcut: "Mod-B",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "B"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
   }),
   italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "italic",
-    shortcut: "Mod-I",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "I"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
   }),
   strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "strikethrough",
-    shortcut: "Mod-Shift-S",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "shift"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "S"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
   }),
   code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "code",
-    shortcut: "Mod-E",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "E"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
   })
@@ -363,3 +401,5 @@ };
                 content: $.COMPOSER_SEND,
-                shortcut: "Enter",
+                shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                  name: "enter"
+                }),
                 children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
@@ -373,3 +413,3 @@ asChild: true,
                     "aria-label": $.COMPOSER_SEND,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
                   })
@@ -376,0 +416,0 @@ })

dist/components/InboxNotification.js

@@ -148,13 +148,21 @@ "use client";
                         children: [
-                          unread ? /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          unread ? /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
                             onSelect: handleMarkAsRead,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {}),
-                            children: $.INBOX_NOTIFICATION_MARK_AS_READ
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_MARK_AS_READ
+                            ]
                           }) : null,
-                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
                             onSelect: handleDelete,
                             onClick: stopPropagation,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {}),
-                            children: $.INBOX_NOTIFICATION_DELETE
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_DELETE
+                            ]
                           })
@@ -173,3 +181,5 @@ ]
                             "aria-label": $.INBOX_NOTIFICATION_MORE,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
                           })
@@ -176,0 +186,0 @@ })

dist/components/internal/Button.js

@@ -6,7 +6,6 @@ "use client";
 var react = require('react');
-var ChevronDown = require('../../icons/ChevronDown.js');
 var classNames = require('../../utils/class-names.js');
 
 
-const CustomButton = react.forwardRef(
+const Button = react.forwardRef(
   ({
@@ -17,3 +16,2 @@ variant = "default",
     className,
-    children,
     ...props
@@ -31,53 +29,8 @@ }, forwardedRef) => {
       ...props,
-      ref: forwardedRef,
-      children
+      ref: forwardedRef
     });
   }
 );
-const Button = react.forwardRef(
-  ({ icon, children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(CustomButton, {
-      ...props,
-      ref: forwardedRef,
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-icon-container",
-          children: icon
-        }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-button-label",
-          children
-        }) : null
-      ]
-    });
-  }
-);
-const SelectButton = react.forwardRef(
-  ({ icon, children, className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(CustomButton, {
-      ...props,
-      type: "button",
-      className: classNames.classNames("lb-select-button", className),
-      ref: forwardedRef,
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-icon-container",
-          children: icon
-        }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-button-label",
-          children
-        }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-select-button-chevron",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown.ChevronDownIcon, {})
-        })
-      ]
-    });
-  }
-);
 
 exports.Button = Button;
-exports.CustomButton = CustomButton;
-exports.SelectButton = SelectButton;
 //# sourceMappingURL=Button.js.map

dist/components/internal/Dropdown.js

@@ -66,21 +66,10 @@ "use client";
 }
-const DropdownItem = react.forwardRef(
-  ({ children, className, icon, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.DropdownMenuItem, {
-      className: classNames.classNames("lb-dropdown-item", className),
-      ...props,
-      ref: forwardedRef,
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-dropdown-item-icon lb-icon-container",
-          children: icon
-        }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: "lb-dropdown-item-label",
-          children
-        }) : null
-      ]
-    });
-  }
-);
+const DropdownItem = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.DropdownMenuItem, {
+    className: classNames.classNames("lb-dropdown-item", className),
+    ...props,
+    ref: forwardedRef,
+    children
+  });
+});
 
@@ -87,0 +76,0 @@ Object.defineProperty(exports, 'DropdownTrigger', {

dist/components/internal/EmojiPicker.js

@@ -178,3 +178,5 @@ 'use strict';
                       }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {})
+                      /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {
+                        className: "lb-emoji-picker-search-icon"
+                      })
                     ]
@@ -181,0 +183,0 @@ })

dist/components/internal/Tooltip.js

@@ -32,39 +32,12 @@ "use client";
 
-const ALT_KEY = { title: "Alt", key: "\u2325" };
-const COMMAND_KEY = { title: "Command", key: "\u2318" };
-const CONTROL_KEY = { title: "Ctrl", key: "\u2303" };
-const SHIFT_KEY = { title: "Shift", key: "\u21E7" };
-const ENTER_KEY = { title: "Enter", key: "\u23CE" };
-const SPACE_KEY = { title: "Space", key: "\u2423" };
-const ESCAPE_KEY = { title: "Escape", key: "\u238B" };
 const KEYS = {
-  alt: () => ALT_KEY,
-  mod: () => isApple.isApple() ? COMMAND_KEY : CONTROL_KEY,
-  control: () => CONTROL_KEY,
-  ctrl: () => CONTROL_KEY,
-  command: () => COMMAND_KEY,
-  cmd: () => COMMAND_KEY,
-  shift: () => SHIFT_KEY,
-  enter: () => ENTER_KEY,
-  " ": () => SPACE_KEY,
-  space: () => SPACE_KEY,
-  escape: () => ESCAPE_KEY,
-  esc: () => ESCAPE_KEY
+  alt: () => ({ title: "Alt", key: "\u2325" }),
+  mod: () => isApple.isApple() ? { title: "Command", key: "\u2318" } : { title: "Ctrl", key: "\u2303" },
+  shift: () => {
+    return { title: "Shift", key: "\u21E7" };
+  },
+  enter: () => {
+    return { title: "Enter", key: "\u23CE" };
+  }
 };
-function getShortcutKbdFromKeymap(keymap) {
-  const keys = keymap.split("-");
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: keys.map((key, index) => {
-      const lowerKey = key.toLowerCase();
-      if (lowerKey in KEYS) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ShortcutTooltipKey, {
-          name: lowerKey
-        }, index);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", {
-        children: key
-      }, index);
-    })
-  });
-}
 const Tooltip = react.forwardRef(
@@ -102,5 +75,2 @@ ({ children, content, multiline, className, ...props }, forwardedRef) => {
 const ShortcutTooltip = react.forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
-  const shortcutKbd = react.useMemo(() => {
-    return shortcut ? getShortcutKbdFromKeymap(shortcut) : null;
-  }, [shortcut]);
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
@@ -110,5 +80,5 @@ content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         content,
-        shortcutKbd && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
           className: "lb-tooltip-shortcut",
-          children: shortcutKbd
+          children: shortcut
         })
@@ -122,3 +92,6 @@ ]
 });
-function ShortcutTooltipKey({ name, ...props }) {
+function ShortcutTooltipKey({
+  name,
+  ...props
+}) {
   const { title, key } = react.useMemo(() => KEYS[name]?.(), [name]);
@@ -137,3 +110,4 @@ return /* @__PURE__ */ jsxRuntime.jsx("abbr", {
 exports.ShortcutTooltip = ShortcutTooltip;
+exports.ShortcutTooltipKey = ShortcutTooltipKey;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

dist/components/Thread.js

@@ -179,3 +179,7 @@ "use client";
                       "aria-label": thread.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE,
-                      icon: thread.resolved ? /* @__PURE__ */ jsxRuntime.jsx(Resolved.ResolvedIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Resolve.ResolveIcon, {})
+                      children: thread.resolved ? /* @__PURE__ */ jsxRuntime.jsx(Resolved.ResolvedIcon, {
+                        className: "lb-button-icon"
+                      }) : /* @__PURE__ */ jsxRuntime.jsx(Resolve.ResolveIcon, {
+                        className: "lb-button-icon"
+                      })
                     })
@@ -182,0 +186,0 @@ })

dist/icons/index.js

@@ -6,11 +6,3 @@ 'use strict';
 var Attachment = require('./Attachment.js');
-var Blockquote = require('./Blockquote.js');
-var Bold = require('./Bold.js');
 var Check = require('./Check.js');
-var ChevronDown = require('./ChevronDown.js');
-var ChevronLeft = require('./ChevronLeft.js');
-var ChevronRight = require('./ChevronRight.js');
-var ChevronUp = require('./ChevronUp.js');
-var Code = require('./Code.js');
-var Comment = require('./Comment.js');
 var Cross = require('./Cross.js');
@@ -22,12 +14,3 @@ var Delete = require('./Delete.js');
 var EmojiAdd = require('./EmojiAdd.js');
-var H1 = require('./H1.js');
-var H2 = require('./H2.js');
-var H3 = require('./H3.js');
-var Italic = require('./Italic.js');
-var Lengthen = require('./Lengthen.js');
-var ListOrdered = require('./ListOrdered.js');
-var ListUnordered = require('./ListUnordered.js');
 var Mention = require('./Mention.js');
-var QuestionMark = require('./QuestionMark.js');
-var Redo = require('./Redo.js');
 var Resolve = require('./Resolve.js');
@@ -38,10 +21,3 @@ var Resolved = require('./Resolved.js');
 var Send = require('./Send.js');
-var Shorten = require('./Shorten.js');
-var Sparkles = require('./Sparkles.js');
 var Spinner = require('./Spinner.js');
-var Strikethrough = require('./Strikethrough.js');
-var Text = require('./Text.js');
-var Translate = require('./Translate.js');
-var Underline = require('./Underline.js');
-var Undo = require('./Undo.js');
 var Warning = require('./Warning.js');
@@ -54,11 +30,3 @@
 exports.AttachmentIcon = Attachment.AttachmentIcon;
-exports.BlockquoteIcon = Blockquote.BlockquoteIcon;
-exports.BoldIcon = Bold.BoldIcon;
 exports.CheckIcon = Check.CheckIcon;
-exports.ChevronDownIcon = ChevronDown.ChevronDownIcon;
-exports.ChevronLeftIcon = ChevronLeft.ChevronLeftIcon;
-exports.ChevronRightIcon = ChevronRight.ChevronRightIcon;
-exports.ChevronUpIcon = ChevronUp.ChevronUpIcon;
-exports.CodeIcon = Code.CodeIcon;
-exports.CommentIcon = Comment.CommentIcon;
 exports.CrossIcon = Cross.CrossIcon;
@@ -70,12 +38,3 @@ exports.DeleteIcon = Delete.DeleteIcon;
 exports.EmojiAddIcon = EmojiAdd.EmojiAddIcon;
-exports.H1Icon = H1.H1Icon;
-exports.H2Icon = H2.H2Icon;
-exports.H3Icon = H3.H3Icon;
-exports.ItalicIcon = Italic.ItalicIcon;
-exports.LengthenIcon = Lengthen.LengthenIcon;
-exports.ListOrderedIcon = ListOrdered.ListOrderedIcon;
-exports.ListUnorderedIcon = ListUnordered.ListUnorderedIcon;
 exports.MentionIcon = Mention.MentionIcon;
-exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
-exports.RedoIcon = Redo.RedoIcon;
 exports.ResolveIcon = Resolve.ResolveIcon;
@@ -86,11 +45,4 @@ exports.ResolvedIcon = Resolved.ResolvedIcon;
 exports.SendIcon = Send.SendIcon;
-exports.ShortenIcon = Shorten.ShortenIcon;
-exports.SparklesIcon = Sparkles.SparklesIcon;
 exports.SpinnerIcon = Spinner.SpinnerIcon;
-exports.StrikethroughIcon = Strikethrough.StrikethroughIcon;
-exports.TextIcon = Text.TextIcon;
-exports.TranslateIcon = Translate.TranslateIcon;
-exports.UnderlineIcon = Underline.UnderlineIcon;
-exports.UndoIcon = Undo.UndoIcon;
 exports.WarningIcon = Warning.WarningIcon;
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -667,91 +667,2 @@ import * as react from 'react';
 
-declare function AttachmentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function BlockquoteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function BoldIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CodeIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CommentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function EllipsisIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function EmojiIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function H1Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function H2Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function H3Icon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ItalicIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function LengthenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ListOrderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ListUnorderedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function QuestionMarkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function RedoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function SendIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function ShortenIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function SparklesIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function StrikethroughIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function TextIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function TranslateIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function UnderlineIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function UndoIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-
-declare namespace icon {
-  export {
-    AttachmentIcon as Attachment,
-    BlockquoteIcon as Blockquote,
-    BoldIcon as Bold,
-    CheckIcon as Check,
-    CodeIcon as Code,
-    CommentIcon as Comment,
-    CrossIcon as Cross,
-    EllipsisIcon as Ellipsis,
-    EmojiIcon as Emoji,
-    H1Icon as H1,
-    H2Icon as H2,
-    H3Icon as H3,
-    ItalicIcon as Italic,
-    LengthenIcon as Lengthen,
-    ListOrderedIcon as ListOrdered,
-    ListUnorderedIcon as ListUnordered,
-    MentionIcon as Mention,
-    QuestionMarkIcon as QuestionMark,
-    RedoIcon as Redo,
-    SendIcon as Send,
-    ShortenIcon as Shorten,
-    SparklesIcon as Sparkles,
-    StrikethroughIcon as Strikethrough,
-    TextIcon as Text,
-    TranslateIcon as Translate,
-    UnderlineIcon as Underline,
-    UndoIcon as Undo,
-    WarningIcon as Warning,
-  };
-}
-
-export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };
+export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };

dist/index.js

@@ -13,3 +13,2 @@ 'use strict';
 var config = require('./config.js');
-var icon = require('./icon.js');
 var overrides = require('./overrides.js');
@@ -27,4 +26,3 @@
 exports.LiveblocksUIConfig = config.LiveblocksUIConfig;
-exports.Icon = icon;
 exports.useOverrides = overrides.useOverrides;
 //# sourceMappingURL=index.js.map

dist/primitives/Composer/index.js

@@ -684,2 +684,3 @@ "use client";
           if (isKey.isKey(event, "Escape")) {
+            event.preventDefault();
             blur();
@@ -686,0 +687,0 @@ }

dist/utils/memoize.js

@@ -9,4 +9,5 @@ 'use strict';
     const key = JSON.stringify(args.map((arg) => core.stringify(arg)));
-    if (cache.has(key)) {
-      return cache.get(key);
+    const cached = cache.get(key);
+    if (cached !== void 0) {
+      return cached;
     }
@@ -13,0 +14,0 @@ const result = fn(...args);

dist/version.js

 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "2.16.0-toolbars5" === "string" && "2.16.0-toolbars5";
+const PKG_VERSION = typeof "2.17.0-channels1" === "string" && "2.17.0-channels1";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
@@ -6,0 +6,0 @@

package.json

 {
   "name": "@liveblocks/react-ui",
-  "version": "2.16.0-toolbars5",
+  "version": "2.17.0-channels1",
   "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.",
@@ -78,5 +78,5 @@ "license": "Apache-2.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.16.0-toolbars5",
-    "@liveblocks/core": "2.16.0-toolbars5",
-    "@liveblocks/react": "2.16.0-toolbars5",
+    "@liveblocks/client": "2.17.0-channels1",
+    "@liveblocks/core": "2.17.0-channels1",
+    "@liveblocks/react": "2.17.0-channels1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -83,0 +83,0 @@ "@radix-ui/react-popover": "^1.1.2",

No alert changes

Worsened metrics

Total package byte prevSize

1732620

decreased by-4.73%

Number of package files

463

decreased by-15.36%

Lines of code

19673

decreased by-5.19%

Dependency changes

• + Added@liveblocks/client@2.17.0-channels1(transitive)

• + Added@liveblocks/core@2.17.0-channels1(transitive)

• + Added@liveblocks/react@2.17.0-channels1(transitive)

• - Removed@liveblocks/client@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/core@2.16.0-toolbars5(transitive)

• - Removed@liveblocks/react@2.16.0-toolbars5(transitive)

• Updated@liveblocks/client@2.17.0-channels1

• Updated@liveblocks/core@2.17.0-channels1

• Updated@liveblocks/react@2.17.0-channels1