@weavy/uikit-react 11.1.0 → 11.2.0

package/dist/esm/types/contexts/MessengerContext.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 export declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props) => JSX.Element;
 export default MessengerProvider;

package/dist/esm/types/types/Messenger.d.ts

@@ -1,3 +1,2 @@
 export interface Messenger {
-    options?: MessengerContextOptions;
 }

package/dist/esm/types/types/types.d.ts

@@ -17,19 +17,17 @@ declare type WeavyContextOptions = {
     zoomAuthenticationUrl?: string;
     teamsAuthenticationUrl?: string;
     enableCloudFiles?: boolean;
+    enableScrollbarDetection?: boolean;
     filebrowserUrl?: string;
+    reactions?: string[];
 };
 declare type MessengerContextProps = {
-    options?: MessengerContextOptions;
     selectedConversationId: null | number;
     setSelectedConversationId: Function;
 };
 declare type UserContextProps = {
     user: UserType;
 };
-declare type MessengerContextOptions = {
-    reactions?: string[];
-};
 declare type PreviewContextProps = {
     openPreview: Function;
     closePreview: Function;

package/dist/esm/types/utils/styles.d.ts

@@ -4,13 +4,13 @@
  */
 export declare function setPrefix(prefix: string): void;
 /**
- * Prefixes one or more classnames (with or without dot) using the themePrefix
+ * Prefixes one or more classnames (with or without dot or double dash) using the themePrefix
  * @param {...string} strs
  * @returns string[]
  */
 export declare function prefixes(...strs: string[]): string[];
 /**
- * Prefixes one classname (with or without dot) using the themePrefix
+ * Prefixes a classname string (containing one or multiple space-separated classnames, with or without dot or double dash) using the themePrefix
  * @param {string} str
  * @returns string
  */

package/dist/index.d.ts

@@ -31,9 +31,8 @@ declare const WeavyProvider: ({ children, client, options }: Props$2) => JSX.Ele
 declare const MessengerContext: React.Context<MessengerContextProps>;
 declare type Props$1 = {
     children: React.ReactNode;
-    options?: MessengerContextOptions;
 };
-declare const MessengerProvider: ({ children, options }: Props$1) => JSX.Element;
+declare const MessengerProvider: ({ children }: Props$1) => JSX.Element;
 
 declare const Messenger: FC<Messenger>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",

package/src/components/Chat.tsx

@@ -37,19 +37,16 @@ const Chat = ({ id }: ChatProps) => {
     }, [dataChat]);
 
     return (
-        <>
+        <div className={wy('messenger-conversation scroll-y')}>
             <header className={wy('appbars')}>
                 <nav className={wy('appbar')}>
-
+                    <div></div>
                     {selectedId && dataConversation &&
-
-                        <>
-                            <div>
-                                <Typing id={selectedId} context="conversation">
-                                    {dataConversation.display_name}
-                                </Typing>
-                            </div>
-                        </>
+                        <div className="wy-appbar-text">
+                            <Typing id={selectedId} context="conversation">
+                                {dataConversation.display_name}
+                            </Typing>
+                        </div>
                     }
                 </nav>
             </header>
@@ -61,7 +58,7 @@ const Chat = ({ id }: ChatProps) => {
             {selectedId && dataMembers &&
                 <Messages id={selectedId} members={dataMembers} />
             }
-        </>
+        </div>
     )
 }
 

package/src/components/Conversation.tsx

@@ -131,7 +131,7 @@ const Conversation = ({ id, showBackButton }: ConversationProps) => {
                     {selectedConversationId && dataConversation &&
 
                         <>
-                            <div>
+                            <div className='wy-appbar-text'>
                                 <Typing id={selectedConversationId} context="conversation">
                                     {dataConversation.display_name}
                                 </Typing>

package/src/components/FileBrowser.tsx

@@ -61,7 +61,7 @@ const FileBrowser = ({ onFileAdded }: Props) => {
             $filebrowserFrame.name = "weavy-filebrowser";
             $filebrowserFrame.src = filebrowserSrc;
             $filebrowserFrame.className = wy('filebrowser-frame');
-            $filebrowserFrame.style.cssText = "position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
+            $filebrowserFrame.style.cssText = "position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(1,1,1,.4); z-index: 10000; display:none"
 
             window.top?.document.body.appendChild($filebrowserFrame);
 

package/src/components/Messenger.tsx

@@ -6,7 +6,7 @@ import { Messenger } from '../types/Messenger';
 import { WeavyContext } from '../contexts/WeavyContext';
 import { prefix as wy } from "../utils/styles";
 
-const Messenger: FC<Messenger> = ({ options }) => {
+const Messenger: FC<Messenger> = () => {
 
     const { client } = useContext(WeavyContext);
 
@@ -15,14 +15,14 @@ const Messenger: FC<Messenger> = ({ options }) => {
     }
     
     return (
-        <MessengerProvider options={options}>
+        <MessengerProvider>
             <div className={wy('messenger-provider')}>
 
-                <div className={wy('messenger-sidebar')}>
+                <div className={wy('messenger-sidebar scroll-y')}>
                     <ConversationList />
                 </div>
 
-                <div  className={wy('messenger-conversation')}>
+                <div className={wy('messenger-conversation scroll-y')}>
                     <Conversation id={null} />
                 </div>
             </div>

package/src/components/Reactions.tsx

@@ -8,6 +8,7 @@ import classNames from "classnames";
 import { prefix as wy } from "../utils/styles";
 import useReactions from "../hooks/useReactions";
 import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
+import { WeavyContext } from "../contexts/WeavyContext";
 
 type ReactionMenuProps = {
     id: number,
@@ -25,7 +26,7 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     const reactionMutation = useMutateReaction();
     const reactionDeleteMutation = useMutateDeleteReaction();
     const [visible, setVisible] = useState<boolean>(false);
-    const { options } = useContext(MessengerContext);
+    const { options } = useContext(WeavyContext);
     const [reactedEmoji, setReactedEmoji] = useState<string>('');
 
     const emojis = options?.reactions;

package/src/contexts/MessengerContext.tsx

@@ -3,22 +3,14 @@ import usePresence from "../hooks/usePresence";
 
 export const MessengerContext = createContext<MessengerContextProps>({
     selectedConversationId: null,
-    setSelectedConversationId: (id: any) => { },
-    options: {}
+    setSelectedConversationId: (id: any) => { }    
 });
 
 type Props = {
-    children: React.ReactNode,
-    options?: MessengerContextOptions
+    children: React.ReactNode    
 }
 
-const MessengerProvider = ({ children, options }: Props) => {
-
-    let defaultOptions: MessengerContextOptions = {
-        reactions: ['😍', '😎', '😉', '😜', '👍']
-    };
-
-    let opts = { ...defaultOptions, ...options };
+const MessengerProvider = ({ children }: Props) => {
 
     const [selectedConversationId, setSelectedConversation] = useState(null);
 
@@ -31,7 +23,7 @@ const MessengerProvider = ({ children, options }: Props) => {
 
     return (
         <>
-            <MessengerContext.Provider value={{ options: opts, selectedConversationId, setSelectedConversationId }}>
+            <MessengerContext.Provider value={{ selectedConversationId, setSelectedConversationId }}>
                 {children}
             </MessengerContext.Provider>
         </>

package/src/contexts/WeavyContext.tsx

@@ -8,6 +8,7 @@ import timezone from 'dayjs/plugin/timezone';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import PreviewProvider from "./PreviewContext";
 import WeavyClient from "../client/WeavyClient";
+import detectScrollbars from '../utils/scrollbarDetection';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -40,11 +41,17 @@ const WeavyProvider = ({ children, client, options }: Props) => {
     zoomAuthenticationUrl: undefined,
     teamsAuthenticationUrl: undefined,
     enableCloudFiles: true,
-    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html"
+    enableScrollbarDetection: true,
+    filebrowserUrl: "https://filebrowser.weavycloud.com/index10.html",
+    reactions: ['😍', '😎', '😉', '😜', '👍']
   };
 
   let opts = { ...defaultOptions, ...options }
 
+  if (opts.enableScrollbarDetection) {
+    detectScrollbars();
+  }
+
   return (
     <>
       {client &&

package/src/index.ts

@@ -1,8 +1,8 @@
 import WeavyClient from './client/WeavyClient';
 import WeavyProvider from './contexts/WeavyContext';
-import  { WeavyContext } from './contexts/WeavyContext';
+import { WeavyContext } from './contexts/WeavyContext';
 import MessengerProvider from './contexts/MessengerContext';
-import  { MessengerContext } from './contexts/MessengerContext';
+import { MessengerContext } from './contexts/MessengerContext';
 import Messenger from './components/Messenger';
 import ConversationBadge from './components/ConversationBadge';
 import ConversationList from './components/ConversationList';

package/src/types/Messenger.ts

@@ -1,3 +1,3 @@
 export interface Messenger {
-    options?: MessengerContextOptions
+    
 }

package/src/types/types.ts

@@ -19,11 +19,12 @@ type WeavyContextOptions = {
     zoomAuthenticationUrl?: string,
     teamsAuthenticationUrl?: string,
     enableCloudFiles?: boolean,
-    filebrowserUrl?: string
+    enableScrollbarDetection?: boolean,
+    filebrowserUrl?: string,
+    reactions?: string[]
 }
 
 type MessengerContextProps = {    
-    options?: MessengerContextOptions,    
     selectedConversationId: null | number,
     setSelectedConversationId: Function    
 };
@@ -32,11 +33,6 @@ type UserContextProps = {
     user: UserType    
 };
 
-
-type MessengerContextOptions = {
-    reactions?: string[]
-}
-
 type PreviewContextProps = {
     openPreview: Function,
     closePreview: Function

package/src/utils/scrollbarDetection.js

@@ -0,0 +1,50 @@
+import { prefix } from "./styles";
+
+// SCROLLBAR DETECTION
+
+/**
+ * The target which the scrollbar classname will be applied to.
+ * @type Element
+ */
+export var scrollbarClassnameTarget = document.documentElement;
+
+/**
+ * The callback function for the scrollbar observer.
+ * @param {ResizeObserverTarget[]} entries 
+ */
+export function checkScrollbar(entries) {
+  var element, overflowWidth;
+  for (var entry in entries) {
+    element = entries[entry].target;
+    try {
+      overflowWidth = element === document.documentElement ? window.innerWidth : element.clientWidth;
+      if (overflowWidth !== element.offsetWidth) {
+        // we have visible scrollbars, add .scrollbar to html element
+        scrollbarClassnameTarget.classList.add(prefix("scrollbars"));
+      } else {
+        scrollbarClassnameTarget.classList.remove(prefix("scrollbars"));
+      }
+    } catch (e) {
+      console.warn("scrollbar detection failed", e);
+    }
+  }
+}
+
+/**
+ * Creates a scrollbar detection element and starts observing it.
+ */
+export default function observeScrollbars() {
+  // insert scrollbar detection element
+  var scrollCheck = document.getElementById(prefix("scrollbar-detection"));
+
+  if (!scrollCheck) {
+    scrollCheck = document.createElement("aside");
+    scrollCheck.id = prefix("scrollbar-detection");
+    scrollCheck.className = prefix("scrollbar-detection");
+    document.documentElement.insertBefore(scrollCheck, document.body);
+  }
+
+  var scrollObserver = new ResizeObserver(checkScrollbar);
+  scrollObserver.observe(scrollCheck);
+}
+

package/src/utils/styles.ts

@@ -13,7 +13,7 @@ var themePrefix = "wy";
   
   
   /**
-   * Prefixes one or more classnames (with or without dot) using the themePrefix
+   * Prefixes one or more classnames (with or without dot or double dash) using the themePrefix
    * @param {...string} strs 
    * @returns string[]
    */
@@ -22,18 +22,33 @@ var themePrefix = "wy";
     if (_prefix) {
       strs = strs.map((str) => {
         str ??= '';
-        if (str[0] === '.') {
-          return `.${_prefix}-${str.substring(1)}`;
-        } else {
-          return `${_prefix}-${str}`;
+        if (str[0] === '.') { // .example-class
+          // Skip if already set
+          if (str.substring(1).indexOf(_prefix + "-") !== 0) {
+            return `.${_prefix}-${str.substring(1)}`;
+          }
+        } else if (str.indexOf("--") === 0) { // --example-var
+          // Skip if already set
+          if (str.substring(2).indexOf(_prefix + "-") !== 0) {
+            return `--${_prefix}-${str.substring(2)}`;
+          }
+        } else { // example-class
+          // Skip if already set
+          if (str.indexOf(_prefix + "-") !== 0) {
+            return `${_prefix}-${str}`;
+          }
         }
+
+        // return untouched str
+        return str;
+        
       })
     }
     return strs;
   }
 
   /**
-   * Prefixes one classname (with or without dot) using the themePrefix
+   * Prefixes a classname string (containing one or multiple space-separated classnames, with or without dot or double dash) using the themePrefix
    * @param {string} str 
    * @returns string
    */