@liveblocks/react-ui - npm Package Compare versions

Comparing version 2.15.2 to 2.16.0-toolbars1

dist/_private/index.d.ts

 import * as react from 'react';
-import { ComponentProps, ElementType, ComponentPropsWithoutRef, ReactNode } 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 * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ComponentProps<"button"> {
-    variant?: "default" | "outline" | "toggle" | "primary";
+    variant?: "default" | "toolbar" | "outline" | "primary" | "secondary";
     size?: "default" | "large";
     disableable?: boolean;
+    icon?: ReactNode;
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-declare type SlotProp = {
+type SlotProp = {
     /**
@@ -18,3 +21,3 @@ * Replace the rendered element by the one passed as a child.
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
 
@@ -29,2 +32,12 @@ interface ListProps extends ComponentPropsWithSlot<"span"> {
 
+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"> {
@@ -48,4 +61,18 @@ /**
 
+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;
@@ -63,4 +90,12 @@
 
+declare function ItalicIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
+declare function LengthenIcon(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;
@@ -76,6 +111,22 @@
 
+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 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;
 
-export { ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Button, CheckIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiAddIcon, EmojiIcon, List, MentionIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SendIcon, SpinnerIcon, User, WarningIcon };
+declare function capitalize(string: string): string;
+
+declare function useRefs<T>(...refs: Ref<T>[]): RefCallback<T>;
+
+export { ArrowDownIcon, ArrowUpIcon, AttachmentIcon, BoldIcon, Button, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CodeIcon, CommentIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiAddIcon, EmojiIcon, ItalicIcon, LengthenIcon, List, MentionIcon, QuestionMarkIcon, RedoIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SendIcon, ShortcutTooltip, ShortenIcon, SparklesIcon, SpinnerIcon, StrikethroughIcon, Tooltip, TranslateIcon, UnderlineIcon, UndoIcon, User, WarningIcon, capitalize, useRefs };

dist/_private/index.js

@@ -5,8 +5,19 @@ '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 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 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');
@@ -18,3 +29,7 @@ var Delete = require('../icons/Delete.js');
 var EmojiAdd = require('../icons/EmojiAdd.js');
+var Italic = require('../icons/Italic.js');
+var Lengthen = require('../icons/Lengthen.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');
@@ -25,3 +40,9 @@ 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 Translate = require('../icons/Translate.js');
+var Underline = require('../icons/Underline.js');
+var Undo = require('../icons/Undo.js');
 var Warning = require('../icons/Warning.js');
@@ -33,7 +54,22 @@
 exports.List = List.List;
+exports.ShortcutTooltip = Tooltip.ShortcutTooltip;
+exports.Tooltip = Tooltip.Tooltip;
 exports.User = User.User;
+exports.capitalize = capitalize.capitalize;
+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.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;
@@ -45,3 +81,7 @@ exports.DeleteIcon = Delete.DeleteIcon;
 exports.EmojiAddIcon = EmojiAdd.EmojiAddIcon;
+exports.ItalicIcon = Italic.ItalicIcon;
+exports.LengthenIcon = Lengthen.LengthenIcon;
 exports.MentionIcon = Mention.MentionIcon;
+exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
+exports.RedoIcon = Redo.RedoIcon;
 exports.ResolveIcon = Resolve.ResolveIcon;
@@ -52,4 +92,10 @@ 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.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.Button, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button.CustomButton, {
     className: classNames.classNames("lb-comment-reaction", className),
@@ -509,5 +509,3 @@ variant: "outline",
                             "aria-label": $.COMMENT_ADD_REACTION,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
-                              className: "lb-button-icon"
-                            })
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {})
                           })
@@ -523,21 +521,13 @@ })
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
                             onSelect: handleEdit,
                             onClick: stopPropagation,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {
-                                className: "lb-dropdown-item-icon"
-                              }),
-                              $.COMMENT_EDIT
-                            ]
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {}),
+                            children: $.COMMENT_EDIT
                           }),
-                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                          /* @__PURE__ */ jsxRuntime.jsx(Dropdown.DropdownItem, {
                             onSelect: handleDelete,
                             onClick: stopPropagation,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
-                                className: "lb-dropdown-item-icon"
-                              }),
-                              $.COMMENT_DELETE
-                            ]
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {}),
+                            children: $.COMMENT_DELETE
                           })
@@ -555,5 +545,3 @@ ]
                             "aria-label": $.COMMENT_MORE,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
-                              className: "lb-button-icon"
-                            })
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {})
                           })
@@ -586,5 +574,3 @@ })
                         onClick: handleEditCancel,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {
-                          className: "lb-button-icon"
-                        })
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
                       })
@@ -594,5 +580,3 @@ }),
                       content: $.COMMENT_EDIT_COMPOSER_SAVE,
-                      shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
-                        name: "enter"
-                      }),
+                      shortcut: "Enter",
                       children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Submit, {
@@ -605,5 +589,3 @@ asChild: true,
                           "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
-                            className: "lb-button-icon"
-                          })
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {})
                         })
@@ -673,5 +655,3 @@ })
                               "aria-label": $.COMMENT_ADD_REACTION,
-                              children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
-                                className: "lb-button-icon"
-                              })
+                              icon: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {})
                             })
@@ -678,0 +658,0 @@ })

dist/components/Composer.js

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

dist/components/InboxNotification.js

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

dist/components/internal/Button.js

@@ -9,3 +9,3 @@ "use client";
 
-const Button = react.forwardRef(
+const CustomButton = react.forwardRef(
   ({
@@ -16,2 +16,3 @@ variant = "default",
     className,
+    children,
     ...props
@@ -29,8 +30,28 @@ }, forwardedRef) => {
       ...props,
-      ref: forwardedRef
+      ref: forwardedRef,
+      children
     });
   }
 );
+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
+      ]
+    });
+  }
+);
 
 exports.Button = Button;
+exports.CustomButton = CustomButton;
 //# sourceMappingURL=Button.js.map

dist/components/internal/Dropdown.js

@@ -66,10 +66,21 @@ "use client";
 }
-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
-  });
-});
+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
+      ]
+    });
+  }
+);
 
@@ -76,0 +87,0 @@ Object.defineProperty(exports, 'DropdownTrigger', {

dist/components/internal/EmojiPicker.js

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

dist/components/internal/Tooltip.js

@@ -32,12 +32,39 @@ "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: () => ({ 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" };
-  }
+  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
 };
+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(
@@ -75,2 +102,5 @@ ({ 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, {
@@ -80,5 +110,5 @@ content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         content,
-        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
+        shortcutKbd && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
           className: "lb-tooltip-shortcut",
-          children: shortcut
+          children: shortcutKbd
         })
@@ -92,6 +122,3 @@ ]
 });
-function ShortcutTooltipKey({
-  name,
-  ...props
-}) {
+function ShortcutTooltipKey({ name, ...props }) {
   const { title, key } = react.useMemo(() => KEYS[name]?.(), [name]);
@@ -110,4 +137,3 @@ return /* @__PURE__ */ jsxRuntime.jsx("abbr", {
 exports.ShortcutTooltip = ShortcutTooltip;
-exports.ShortcutTooltipKey = ShortcutTooltipKey;
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

dist/components/Thread.js

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

dist/icons/index.js

@@ -6,3 +6,10 @@ 'use strict';
 var Attachment = require('./Attachment.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');
@@ -14,3 +21,7 @@ var Delete = require('./Delete.js');
 var EmojiAdd = require('./EmojiAdd.js');
+var Italic = require('./Italic.js');
+var Lengthen = require('./Lengthen.js');
 var Mention = require('./Mention.js');
+var QuestionMark = require('./QuestionMark.js');
+var Redo = require('./Redo.js');
 var Resolve = require('./Resolve.js');
@@ -21,3 +32,9 @@ 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 Translate = require('./Translate.js');
+var Underline = require('./Underline.js');
+var Undo = require('./Undo.js');
 var Warning = require('./Warning.js');
@@ -30,3 +47,10 @@
 exports.AttachmentIcon = Attachment.AttachmentIcon;
+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;
@@ -38,3 +62,7 @@ exports.DeleteIcon = Delete.DeleteIcon;
 exports.EmojiAddIcon = EmojiAdd.EmojiAddIcon;
+exports.ItalicIcon = Italic.ItalicIcon;
+exports.LengthenIcon = Lengthen.LengthenIcon;
 exports.MentionIcon = Mention.MentionIcon;
+exports.QuestionMarkIcon = QuestionMark.QuestionMarkIcon;
+exports.RedoIcon = Redo.RedoIcon;
 exports.ResolveIcon = Resolve.ResolveIcon;
@@ -45,4 +73,10 @@ 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.TranslateIcon = Translate.TranslateIcon;
+exports.UnderlineIcon = Underline.UnderlineIcon;
+exports.UndoIcon = Undo.UndoIcon;
 exports.WarningIcon = Warning.WarningIcon;
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -6,4 +6,4 @@ import * as react from 'react';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
@@ -14,4 +14,4 @@ * Replace the rendered element by the one passed as a child.
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
@@ -23,4 +23,4 @@ italic?: boolean;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
@@ -100,3 +100,3 @@ };
 }
-declare type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides;
+type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides;
 declare function useOverrides(overrides?: Partial<Overrides>): Overrides;
@@ -128,3 +128,3 @@
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
@@ -139,3 +139,3 @@ * The list of suggested user IDs.
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
 interface ComposerEditorComponents {
@@ -227,3 +227,3 @@ /**
 
-declare type ComposerCreateThreadProps<M extends BaseMetadata> = {
+type ComposerCreateThreadProps<M extends BaseMetadata> = {
     threadId?: never;
@@ -236,3 +236,3 @@ commentId?: never;
 };
-declare type ComposerCreateCommentProps = {
+type ComposerCreateCommentProps = {
     /**
@@ -245,3 +245,3 @@ * The ID of the thread to reply to.
 };
-declare type ComposerEditCommentProps = {
+type ComposerEditCommentProps = {
     /**
@@ -257,3 +257,3 @@ * The ID of the thread to edit a comment in.
 };
-declare type ComposerProps<M extends BaseMetadata = DM> = Omit<ComponentPropsWithoutRef<"form">, "defaultValue"> & (ComposerCreateThreadProps<M> | ComposerCreateCommentProps | ComposerEditCommentProps) & {
+type ComposerProps<M extends BaseMetadata = DM> = Omit<ComponentPropsWithoutRef<"form">, "defaultValue"> & (ComposerCreateThreadProps<M> | ComposerCreateCommentProps | ComposerEditCommentProps) & {
     /**
@@ -310,3 +310,3 @@ * The event handler called when the composer is submitted.
  */
-declare const Composer: <M extends BaseMetadata = BaseMetadata>(props: ComposerProps<M> & RefAttributes<HTMLFormElement>) => JSX.Element;
+declare const Composer: <M extends BaseMetadata = DM>(props: ComposerProps<M> & RefAttributes<HTMLFormElement>) => JSX.Element;
 
@@ -391,3 +391,3 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
 
-declare type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<"ol">;
+type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<"ol">;
 /**
@@ -408,3 +408,3 @@ * Displays versions summaries as a list.
 }
-declare type Components = GlobalComponents;
+type Components = GlobalComponents;
 
@@ -418,4 +418,4 @@ interface AvatarProps extends ComponentProps<"div"> {
 
-declare type ComponentTypeWithRef<T extends keyof JSX.IntrinsicElements, P> = ComponentType<P & Pick<ComponentProps<T>, "ref">>;
-declare type InboxNotificationKinds<KS extends KDAD = KDAD> = {
+type ComponentTypeWithRef<T extends keyof JSX.IntrinsicElements, P> = ComponentType<P & Pick<ComponentProps<T>, "ref">>;
+type InboxNotificationKinds<KS extends KDAD = KDAD> = {
     [K in KS]: ComponentTypeWithRef<"a", InboxNotificationCustomKindProps<K>>;
@@ -501,13 +501,13 @@ } & {
 }
-declare type InboxNotificationThreadKindProps = Omit<InboxNotificationProps, "kinds"> & {
+type InboxNotificationThreadKindProps = Omit<InboxNotificationProps, "kinds"> & {
     inboxNotification: InboxNotificationThreadData;
 };
-declare type InboxNotificationTextMentionKindProps = Omit<InboxNotificationProps, "kinds"> & {
+type InboxNotificationTextMentionKindProps = Omit<InboxNotificationProps, "kinds"> & {
     inboxNotification: InboxNotificationTextMentionData;
 };
-declare type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<InboxNotificationProps, "kinds"> & {
+type InboxNotificationCustomKindProps<K extends KDAD = KDAD> = Omit<InboxNotificationProps, "kinds"> & {
     inboxNotification: InboxNotificationCustomData<K>;
 };
-declare type InboxNotificationIconProps = ComponentProps<"div">;
-declare type InboxNotificationAvatarProps = AvatarProps;
+type InboxNotificationIconProps = ComponentProps<"div">;
+type InboxNotificationAvatarProps = AvatarProps;
 declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): react_jsx_runtime.JSX.Element;
@@ -644,5 +644,5 @@ declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): react_jsx_runtime.JSX.Element;
  */
-declare const Thread: <M extends BaseMetadata = BaseMetadata>(props: ThreadProps<M> & RefAttributes<HTMLDivElement>) => JSX.Element;
+declare const Thread: <M extends BaseMetadata = DM>(props: ThreadProps<M> & RefAttributes<HTMLDivElement>) => JSX.Element;
 
-declare type LiveblocksUIConfigProps = PropsWithChildren<{
+type LiveblocksUIConfigProps = PropsWithChildren<{
     /**
@@ -649,0 +649,0 @@ * Override the components' strings.

dist/primitives/Composer/index.js

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

dist/primitives/index.d.ts

@@ -6,4 +6,4 @@ import * as react from 'react';
 
-declare type Direction = "ltr" | "rtl";
-declare type SlotProp = {
+type Direction = "ltr" | "rtl";
+type SlotProp = {
     /**
@@ -14,4 +14,4 @@ * Replace the rendered element by the one passed as a child.
 };
-declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
-declare type ComposerBodyText = {
+type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+type ComposerBodyText = {
     bold?: boolean;
@@ -23,9 +23,9 @@ italic?: boolean;
 };
-declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
-declare type ComposerBodyMarks = {
+type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+type ComposerBodyMarks = {
     [K in ComposerBodyMark]: boolean;
 };
 
-declare type CommentMentionProps = ComponentPropsWithSlot<"span">;
-declare type CommentBodyMentionProps = {
+type CommentMentionProps = ComponentPropsWithSlot<"span">;
+type CommentBodyMentionProps = {
     /**
@@ -36,3 +36,3 @@ * The mention's user ID.
 };
-declare type CommentLinkProps = ComponentPropsWithSlot<"a">;
+type CommentLinkProps = ComponentPropsWithSlot<"a">;
 interface CommentBodyLinkProps {
@@ -128,3 +128,3 @@ /**
 }
-declare type ComposerEditorMentionSuggestionsProps = {
+type ComposerEditorMentionSuggestionsProps = {
     /**
@@ -139,7 +139,7 @@ * The list of suggested user IDs.
 };
-declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
-declare type ComposerMentionProps = ComponentPropsWithSlot<"span">;
-declare type ComposerLinkProps = ComponentPropsWithSlot<"a">;
-declare type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
-declare type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
+type ComposerEditorFloatingToolbarProps = Record<string, never>;
+type ComposerMentionProps = ComponentPropsWithSlot<"span">;
+type ComposerLinkProps = ComponentPropsWithSlot<"a">;
+type ComposerFloatingToolbarProps = ComponentPropsWithSlot<"div">;
+type ComposerSuggestionsListProps = ComponentPropsWithSlot<"ul">;
 interface ComposerSuggestionsListItemProps extends ComponentPropsWithSlot<"li"> {
@@ -226,4 +226,4 @@ /**
 }
-declare type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
-declare type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
+type ComposerSubmitProps = ComponentPropsWithSlot<"button">;
+type ComposerAttachFilesProps = ComponentPropsWithSlot<"button">;
 interface ComposerMarkToggleProps extends ComponentPropsWithSlot<"button"> {
@@ -370,3 +370,3 @@ /**
 
-declare type ComposerContext = {
+type ComposerContext = {
     /**
@@ -446,5 +446,5 @@ * Whether the composer is currently disabled.
 
-declare type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
-declare type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentLoadingProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentEmptyProps = ComponentPropsWithoutRef<"div">;
+type EmojiPickerContentGridProps = ComponentPropsWithoutRef<"div">;
 interface EmojiPickerContentErrorProps extends ComponentPropsWithoutRef<"div"> {
@@ -462,3 +462,3 @@ /**
 }
-declare type EmojiPickerContentEmojiRowAttributes = {
+type EmojiPickerContentEmojiRowAttributes = {
     /**
@@ -539,3 +539,3 @@ * The current row's index.
 }
-declare type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
+type EmojiPickerSearchProps = ComponentPropsWithSlot<"input">;
 
@@ -542,0 +542,0 @@ /**

dist/version.js

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

package.json

 {
   "name": "@liveblocks/react-ui",
-  "version": "2.15.2",
+  "version": "2.16.0-toolbars1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
@@ -78,5 +78,5 @@ "license": "Apache-2.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.15.2",
-    "@liveblocks/core": "2.15.2",
-    "@liveblocks/react": "2.15.2",
+    "@liveblocks/client": "2.16.0-toolbars1",
+    "@liveblocks/core": "2.16.0-toolbars1",
+    "@liveblocks/react": "2.16.0-toolbars1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -105,3 +105,3 @@ "@radix-ui/react-popover": "^1.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "msw": "^0.27.1",
+    "msw": "^1.3.5",
     "rollup": "3.28.0",
@@ -119,3 +119,3 @@ "stylelint": "^15.10.2",
     "type": "git",
-    "url": "https://github.com/liveblocks/liveblocks.git",
+    "url": "git+https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react-ui"
@@ -122,0 +122,0 @@ },

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1781276

increased by2.76%

Number of package files

515

increased by11.23%

Lines of code

20249

increased by2.94%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@liveblocks/client@2.16.0-toolbars1(transitive)

• + Added@liveblocks/core@2.16.0-toolbars1(transitive)

• + Added@liveblocks/react@2.16.0-toolbars1(transitive)

• - Removed@liveblocks/client@2.15.2(transitive)

• - Removed@liveblocks/core@2.15.2(transitive)

• - Removed@liveblocks/react@2.15.2(transitive)

• Updated@liveblocks/client@2.16.0-toolbars1

• Updated@liveblocks/core@2.16.0-toolbars1

• Updated@liveblocks/react@2.16.0-toolbars1