@talkjs/react-components 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talkjs/react-components",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "bugs": {
     "url": "https://talkjs.com/?chat"
   },
@@ -24,9 +24,10 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
     "@legendapp/state": "3.0.0-alpha.9",
-    "@reach/menu-button": "^0.18.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@talkjs/core": "~1.4.2",
     "autolinker": "^4.0.0",
+    "emoji-picker-element": "1.8.2",
     "htm": "^3.1.1",
     "lodash.merge": "^4.6.2",
     "onecolor": "^4.1.0",

package/theming.d.ts

@@ -145,8 +145,6 @@ export declare interface Chatbox {
         custom?: Record<string, string>;
     }): Promise<void>;
     setReferencedMessage(messageId: string | null): void;
-    openMessageActionMenu(messageId: string): void;
-    closeMessageActionMenu(): void;
     getMessageFieldText: () => string;
     setMessageFieldText: (text: string) => void;
 }
@@ -162,6 +160,7 @@ export declare interface ChatHeaderProps {
         [userId: string]: boolean;
     };
     permissions: UserPermissions;
+    device: DeviceFeatures;
 }
 
 export declare interface ContentBlockProps {
@@ -184,12 +183,24 @@ export declare interface DeleteMessageEvent {
     conversation: ConversationSnapshot;
 }
 
+export declare interface DeviceFeatures {
+    /**
+     * True if the browser supports IndexedDB, which the emoji picker depends on.
+     */
+    supportsEmojiPicker: boolean;
+    /**
+     * True if the user agents reports this device as mobile (incl tablets).
+     */
+    isMobile: boolean;
+}
+
 export declare function Editor({ placeholder, disabled, className, characterLimit, spellcheck, }: EditorProps): JSX.Element;
 
 export declare interface EditorController extends EditorState {
     send(): void;
     shareLocation(): void;
     attachFile(): void;
+    toggleEmojiPicker(): void;
 }
 
 export declare interface EditorProps {
@@ -205,6 +216,13 @@ declare interface EditorState {
     atTextLimit: boolean;
     isEmpty: boolean;
     characterCount: number;
+    showEmojiPicker: boolean;
+}
+
+export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;
+
+declare interface EmojiPickerProps {
+    colorScheme: "light" | "dark";
 }
 
 export { FileBlock }
@@ -255,15 +273,43 @@ export declare interface LocationBlockProps extends ContentBlockProps {
     block: LocationBlock;
 }
 
-export declare interface MessageActionMenuProps {
-    currentUser: UserSnapshot;
-    permissions: MessagePermissions;
-    conversation: ConversationSnapshot;
-    message: MessageSnapshot;
-    chatbox: Chatbox;
-    t: Translation;
-    themeCustom?: any;
-}
+/**
+ * MenuButton component that renders a dropdown menu triggered by a button.
+ *
+ * Usage:
+ * <MenuButton
+ *   menuComponent={YourMenuComponent}
+ *   menuProps={{ prop1: value1, prop2: value2 }}
+ *   aria-label="Message actions"
+ * >
+ *   <Icon type="horizontalDots" />
+ * </MenuButton>
+ *
+ * All props except for menuComponent and menuProps are passed to the button element.
+ *
+ * The menuComponent should be a component that renders the dropdown content.
+ * The menuProps are passed to the menuComponent.
+ *
+ * The menu component shouod render the MenuItem component for each menu item it wants to include.
+ *
+ * This is meant as a reuseable and accessible dropdown menu. We're using Radix for this, because they fulli implement
+ * the ARIA Menu Button pattern, but without adding any styles, so we can completely customise the look and feel.
+ */
+export declare function MenuButton<T extends object>(props: MenuButtonProps<T>): JSX.Element;
+
+export declare type MenuButtonProps<T extends object> = {
+    menuComponent: React.ComponentType<T>;
+    menuProps: T;
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLButtonElement>;
+
+export declare function MenuItem(props: MenuItemProps): JSX.Element;
+
+export declare type MenuItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    onSelect?: () => void;
+    disabled?: boolean;
+    textValue?: string;
+};
 
 export declare function MessageContent(props: MessageContentProps): JSX.Element;
 
@@ -297,6 +343,7 @@ export declare interface MessageFieldProps {
     chatbox: Chatbox;
     editor?: EditorController;
     themeCustom?: any;
+    device: DeviceFeatures;
 }
 
 export declare interface MessageListFooterProps {
@@ -324,8 +371,8 @@ export declare interface MessageProps {
     permissions: MessagePermissions;
     t: Translation;
     chatbox: Chatbox;
-    messageActionMenuAnchorRef: React_2.RefObject<HTMLElement | undefined>;
     themeCustom?: any;
+    device: DeviceFeatures;
 }
 
 export { MessageSnapshot }
@@ -391,7 +438,6 @@ export declare interface Theme {
     ChatHeader: React_2.ComponentType<ChatHeaderProps>;
     Message: React_2.ComponentType<MessageProps>;
     MessageField: React_2.ComponentType<MessageFieldProps>;
-    MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
     Icon: React_2.ComponentType<IconProps>;
     MessageDivider: React_2.ComponentType<MessageDividerProps>;
     MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
@@ -533,6 +579,22 @@ export declare interface VoiceBlockProps extends ContentBlockProps {
 export { }
 
 
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "emoji-picker": {
+                class?: string;
+                ref: React.Ref<HTMLElement>;
+            };
+        }
+    }
+    interface HTMLElementEventMap {
+        "emoji-click": EmojiClickEvent;
+        "skin-tone-change": SkinToneChangeEvent;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         "t-chatbox": ChatboxHTMLElement;