@fibery/ui-kit 1.37.0 → 1.38.1

package/src/notification-dot.tsx

@@ -10,14 +10,23 @@ const activityIndicatorStyle = css`
   }}
 `;
 
-export const NotificationDot = ({big = true, color = themeVars.active}: {big: boolean; color: string}) => {
+type PropsType = {
+  big?: boolean;
+  color?: string;
+  style?: Record<string, string | number | null>;
+};
+
+export const NotificationDot = ({big = true, color = themeVars.active, style}: PropsType) => {
   const size = big ? space.s6 : space.s4;
   const marginTop = big ? -6 : -1;
   const marginRight = big ? -1 : 0;
-  return (
-    <div
-      className={activityIndicatorStyle}
-      style={{backgroundColor: color, width: size, height: size, marginTop, marginRight}}
-    />
-  );
+  const styleObject = {
+    backgroundColor: color,
+    width: size,
+    height: size,
+    marginTop,
+    marginRight,
+    ...style,
+  };
+  return <div className={activityIndicatorStyle} style={styleObject} />;
 };

package/src/online-users.tsx

@@ -3,7 +3,7 @@ import _ from "lodash";
 import {useEffect, useRef, useState} from "react";
 import {AvatarImage} from "./avatar";
 import {getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
-import {Popup} from "./popup";
+import {PopoverOld} from "./popover";
 import {Tooltip} from "./tooltip";
 
 const offset = [0, space.s6] as [number, number];
@@ -184,7 +184,7 @@ export function OnlineUsers({
         )}
       </div>
       {Boolean(triggerElement) && users.length > maxVisibleUsers && (
-        <Popup
+        <PopoverOld
           offset={offset}
           popupContainerClassName={popupContainerClassName}
           popupClassName={popupClassName}
@@ -231,7 +231,7 @@ export function OnlineUsers({
               </li>
             ))}
           </ul>
-        </Popup>
+        </PopoverOld>
       )}
     </>
   );

package/src/palette.ts

@@ -2,7 +2,7 @@ export const slate = {
   slateBase: "hsl(0, 0%, 100%)",
   slate1: "hsl(206, 0%, 99%)",
   slate2: "hsl(210, 0%, 97%)",
-  slate3: "hsl(209, 0%, 95%)",
+  slate3: "hsl(209, 0%, 96%)",
   slate4: "hsl(209, 0%, 93%)",
   slate5: "hsl(208, 0%, 91%)",
   slate6: "hsl(208, 0%, 89%)",

package/src/platform-symbols.ts

@@ -0,0 +1,9 @@
+import {isMac} from "./platform";
+
+export const ctrlSymbol = isMac ? "⌘" : "Ctrl";
+export const explicitCtrlSymbol = isMac ? "⌃" : "Ctrl";
+export const winSymbol = isMac ? "⌘" : "Win";
+export const shiftSymbol = isMac ? "⇧" : "⇧";
+export const altSymbol = isMac ? "⌥" : "Alt";
+export const deleteSymbol = isMac ? "⌫" : "Delete";
+export const enterSymbol = isMac ? "↵" : "↵";

package/src/platform.ts

@@ -1,4 +1,6 @@
 import {UAParser} from "ua-parser-js";
 
 export const isMac = navigator.platform.startsWith("Mac");
+export const isWindows = navigator.platform.startsWith("Win");
+export const isLinux = navigator.platform.startsWith("Linux");
 export const isMobile = new UAParser(navigator.userAgent).getDevice().type === "mobile";