@fibery/ui-kit 2.0.0 → 2.1.0

package/src/logo.tsx

@@ -4,34 +4,35 @@ import {layout} from "./design-system";
 
 interface LogoProps {
   size?: number;
+  isDevMode?: boolean;
 }
 
-export const Logo: FC<LogoProps> = ({size = 40}) => {
+export const Logo: FC<LogoProps> = ({size = 40, isDevMode}) => {
   return (
     <svg width={size} height={size} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M3.5181 14.7077C2.61266 14.1545 2.35441 12.906 2.93813 12.0346L9.86469 1.75412C10.4517 0.956677 11.5947 0.758115 12.4123 1.3202C13.2317 1.88362 13.468 3.02927 12.9497 3.87537L6.02318 14.156C5.48027 14.9614 4.35607 15.2196 3.5181 14.7077Z"
-        fill="#4FC5B3"
+        d="M8.95771 13.1812L7.79751 13.7491L6.12671 14.5519L6.40768 15.7762C6.51305 16.2428 6.74385 16.6592 7.05995 16.9904C7.54162 17.4972 8.21897 17.8082 8.95653 17.8082C9.6941 17.8082 10.3714 17.4972 10.8531 16.9904C11.1642 16.6592 11.395 16.2478 11.5054 15.7812L11.7898 14.5453L8.95771 13.1812Z"
+        fill={isDevMode ? "#49385F" : "#2B4A51"}
       />
       <path
-        d="M12.9561 5.1453L14.9917 4.99099C15.7033 4.93713 16.4005 5.30922 16.7552 5.93053C17.2619 6.8181 16.9569 7.99294 16.0715 8.50971L7.20312 13.6839L12.9561 5.1453Z"
-        fill="#4FC5B3"
+        d="M8.95152 2.17895L8.1688 1.19554C7.86775 0.819232 7.48141 0.548291 7.05995 0.387734C6.40768 0.136863 5.66009 0.151915 4.99779 0.47303C4.33549 0.794145 3.85883 1.36613 3.64308 2.03345C3.50761 2.46495 3.47751 2.93157 3.58288 3.39819C3.58288 3.39819 3.58288 3.4032 3.58288 3.40822L3.86385 4.63247H5.71528H6.99974L8.95653 2.18397L8.95152 2.17895Z"
+        fill={isDevMode ? "#49385F" : "#2B4A51"}
       />
       <path
-        d="M7.78663 15.671L7.39941 14.4001L9.43178 13.2144L11.1651 13.9031L11.3653 14.5581C11.6625 15.5343 11.1102 16.6129 10.1313 16.9189C9.14845 17.2223 8.08489 16.6471 7.78663 15.671Z"
-        fill="#4FC5B3"
+        d="M16.6282 12.3844C16.5629 11.9328 16.3873 11.4963 16.0863 11.12L15.3036 10.1366L13.6328 10.9394L8.95653 13.1922L11.7813 14.5519L12.9153 15.0988C13.3468 15.3096 13.8134 15.3848 14.27 15.3447C14.9674 15.2845 15.6297 14.9483 16.0913 14.3713C16.5529 13.7943 16.7285 13.0718 16.6332 12.3794L16.6282 12.3844Z"
+        fill={isDevMode ? "#614A7F" : "#2D6D7D"}
       />
       <path
-        d="M14.3627 10.3369L10.2197 12.7541L13.6316 14.1098C14.7147 14.5312 15.9366 13.8227 16.1475 12.6966C16.3113 11.8216 15.8264 10.9185 14.9964 10.5884L14.3627 10.3369Z"
-        fill="#4FC5B3"
+        d="M6.99975 4.62744H3.86386H2.6095C2.12783 4.62744 1.67626 4.75789 1.2849 4.99371C0.682812 5.34995 0.231244 5.94201 0.0656694 6.6595C-0.0999055 7.37699 0.0556346 8.10953 0.441976 8.69155C0.692847 9.06786 1.04407 9.38396 1.48058 9.59469L2.6095 10.1416L3.76351 8.69155L6.99975 4.63246V4.62744Z"
+        fill={isDevMode ? "#795D9E" : "#3E8897"}
       />
       <path
-        d="M6.38255 5.64331L3.69375 9.63411C3.41895 9.65492 3.14154 9.69117 2.86569 9.69117C1.86572 9.69255 1.03376 8.8668 0.997336 7.87321C0.960913 6.87944 1.73006 5.99385 2.72749 5.92037L6.38255 5.64331Z"
-        fill="#4FC5B3"
+        d="M17.8474 6.6595C17.6818 5.94201 17.2303 5.34995 16.6282 4.99371C16.2368 4.76291 15.7802 4.62744 15.3036 4.62744H14.0442H12.1928L8.95653 8.68654L3.64308 15.3447C4.09465 15.3848 4.56127 15.3045 4.99779 15.0988L15.3036 10.1366L16.4375 9.58967C16.869 9.37894 17.2202 9.06284 17.4761 8.68654C17.8625 8.10451 18.018 7.37699 17.8524 6.6595H17.8474Z"
+        fill={isDevMode ? "#795D9E" : "#309FB6"}
       />
       <path
-        d="M7.31897 1.94643L8.21539 2.92332L6.84973 4.95028L5.10078 5.08672L4.57821 4.51563C3.88603 3.76067 3.93057 2.54616 4.67816 1.84536C5.42435 1.14589 6.62812 1.19291 7.31897 1.94643Z"
-        fill="#4FC5B3"
+        d="M14.265 2.03345C14.0542 1.36613 13.5776 0.794145 12.9103 0.47303C12.248 0.151915 11.5004 0.136863 10.8481 0.387734C10.4216 0.548291 10.0353 0.82425 9.73926 1.19554L8.95654 2.17895L1.82176 11.12C1.52072 11.4963 1.34511 11.9328 1.27988 12.3844C1.18455 13.0768 1.36016 13.7993 1.82176 14.3763C2.28337 14.9533 2.94567 15.2895 3.64309 15.3497L12.1928 4.62746H14.0442L14.3252 3.4032C14.4305 2.93658 14.4055 2.46495 14.265 2.02843V2.03345Z"
+        fill={isDevMode ? "#916FBE" : "#25AFCB"}
       />
     </svg>
   );

package/src/mobile-keyboard-aware-popup.tsx

@@ -72,7 +72,7 @@ export function MobileKeyboardAwarePopup({children, className}: {children: React
           z-index: ${mobileKeyboardAwarePopupZIndex};
           transform: translateY(0px);
           border-radius: ${border.radius16}px;
-          border: 1px solid ${themeVars.separatorColor};
+          border: ${themeVars.borderSolidSeparator};
           margin: 0 ${space.s8}px;
           .fibery-manual-keyboard-mode & {
             margin-bottom: 8px;

package/src/modal-menu/index.tsx

@@ -6,6 +6,7 @@ export {ModalMenuRoot as Root} from "./modal-menu-root";
 export {ModalMenuTrigger as Trigger} from "./modal-menu-trigger";
 export {ModalMenuContent as Content} from "./modal-menu-content";
 export {ModalMenuItem as Item} from "./modal-menu-item";
+export {ModalMenuCheckboxItem as CheckboxItem} from "./modal-menu-checkbox-item";
 export {ModalMenuSeparator as Separator} from "./modal-menu-separator";
 export {ModalMenuLabel as Label} from "./modal-menu-label";
 export {ModalMenuGroup as Group} from "./modal-menu-group";

package/src/modal-menu/modal-menu-checkbox-item.tsx

@@ -0,0 +1,50 @@
+import {css, cx} from "@linaria/core";
+import {ComponentProps, ReactNode} from "react";
+import {space, textStyles} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuCheckboxItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export const ModalMenuCheckboxItem = ({
+  children,
+  checked,
+  onCheckedChange,
+  disabled,
+  ...otherProps
+}: ModalMenuCheckboxItemProps) => {
+  const {onOpenChange} = useModalMenu();
+
+  return (
+    <div
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      {...otherProps}
+      className={cx(
+        otherProps.className,
+        css`
+          ${textStyles.big}
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        `,
+        disabled &&
+          css`
+            opacity: 0.4;
+          `
+      )}
+      onClick={(event) => {
+        otherProps.onClick?.(event);
+        if (disabled) {
+          return;
+        }
+        onCheckedChange?.(!checked);
+        onOpenChange(false);
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/modal-menu/modal-menu-content.tsx

@@ -2,7 +2,7 @@ import {ReactNode} from "react";
 import {createPortal} from "react-dom";
 import {css} from "@linaria/core";
 import {space, themeVars} from "../design-system";
-import {getPopupContainerElement} from "../utils-dom";
+import {getPopupContainerElement} from "../dom-utils";
 import {CommandMenuList, CommandMenuRoot} from "../command-menu";
 import {useModalMenu} from "./contexts/modal-menu-context";
 import {MobilePopover} from "../popover/mobile-popover";

package/src/modal-menu/modal-menu-separator.tsx

@@ -6,7 +6,7 @@ export const ModalMenuSeparator = () => {
     <hr
       className={css`
         border: none;
-        border-bottom: 1px solid ${themeVars.separatorColor};
+        border-bottom: ${themeVars.borderSolidSeparator};
         margin: ${space.s4}px 0;
       `}
     />

package/src/modal-menu/modal-submenu-content.tsx

@@ -27,7 +27,9 @@ export const ModalSubmenuContent = ({children}: ModalSubmenuContentProps) => {
         inset: 0;
         overflow-y: auto;
 
-        transition: transform ${transition}, opacity ${transition};
+        transition:
+          transform ${transition},
+          opacity ${transition};
         transform: translateX(0);
         opacity: 1;
 

package/src/new-badge.tsx

@@ -5,8 +5,8 @@ const newBadgeStyle = css`
   ${textStyles.heading8}
   display: inline-block;
   padding: ${space.s2}px 5px;
-  color: ${themeVars.colorTextBadgeNeutral};
-  background-color: ${themeVars.colorBgBadgeNeutral};
+  color: ${themeVars.colorTextBadgeAccent};
+  background-color: ${themeVars.colorBgBadgeAccent};
   vertical-align: text-top;
   border-radius: ${space.s4}px;
 `;

package/src/number-input/edit-unit-styles.ts

@@ -2,14 +2,14 @@ import {css} from "@linaria/core";
 import {themeVars} from "../design-system";
 
 export const invalidInputStyle = {
-  boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  boxShadow: `${themeVars.inputBorderWarningColor} inset`,
 
   "&:hover": {
-    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+    boxShadow: `${themeVars.inputBorderWarningColor} inset`,
   },
 
   "&:focus": {
-    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+    boxShadow: `${themeVars.inputBorderWarningColor} inset`,
   },
 };
 

package/src/online-users.tsx

@@ -2,14 +2,15 @@ import {css, cx} from "@linaria/core";
 import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
 import {AvatarImage} from "./avatar";
-import {getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
-import {PopoverOld} from "./popover";
+import {border, getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
+import {useTheme} from "./theme-provider";
+import {Popover} from "./popover";
 import {Tooltip} from "./tooltip";
 
 const offset = [0, space.s6] as [number, number];
 
 export const avatarClassName = css`
-  border-radius: 100%;
+  border-radius: ${border.radiusFull};
   background-color: ${themeVars.actionMenuBg};
   position: relative;
   border-color: transparent;
@@ -53,9 +54,9 @@ const moreParticipantsClassName = css`
   height: 24px;
   color: ${themeVars.textColor};
   background-color: ${themeVars.badgeBgColor};
-  border: 1px solid ${themeVars.commentBubbleBg};
+  border: ${themeVars.borderSolidCommentBubble};
   margin-left: -${space.s6}px;
-  border-radius: 50%;
+  border-radius: ${border.radiusFull};
   position: relative;
 `;
 
@@ -74,6 +75,7 @@ export function OnlineUsers({
     callBack?: () => void | null;
   }>;
 }) {
+  const theme = useTheme();
   const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);
   const [hover, setHover] = useState(false);
   const timeoutId = useRef<number>();
@@ -152,7 +154,7 @@ export function OnlineUsers({
           ({avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
             const tooltipDescription = callBack ? "Click to follow" : "";
             const tooltipTitle = hasAccess ? name : "Private User";
-            const userBorderColor = getObjectColorMemoized(name);
+            const userBorderColor = theme.fns.deneutralize(getObjectColorMemoized(name));
             return (
               <div key={index} className={cx(userClassName, userClassNameHover)}>
                 <Tooltip
@@ -164,9 +166,7 @@ export function OnlineUsers({
                   <div
                     className={avatarClassName}
                     style={{
-                      border: isFollowed
-                        ? `1px solid ${themeVars.commentBubbleBg}`
-                        : `1px solid ${themeVars.commentBubbleBg}`,
+                      border: themeVars.borderSolidCommentBubble,
                       outline: isFollowed ? `2px solid ${userBorderColor}` : `0px solid ${themeVars.commentBubbleBg}`,
                     }}
                     onClick={() => {
@@ -184,54 +184,53 @@ export function OnlineUsers({
         )}
       </div>
       {Boolean(triggerElement) && users.length > maxVisibleUsers && (
-        <PopoverOld
-          offset={offset}
-          popupContainerClassName={popupContainerClassName}
-          popupClassName={popupClassName}
-          placement="bottom"
-          renderInPortal
-          open={visible}
-          onOpen={() => onShow()}
-          onClose={() => onHide()}
-          trigger={<></>}
-          triggerDomElement={triggerElement}
-        >
-          <ul
-            className={css`
-              all: unset;
-              color: ${themeVars.textColor};
-            `}
-          >
-            {users.map(({avatarUrl, name, callBack}, index) => (
-              <li
+        <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
+          <Popover.Trigger reference={triggerElement}></Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              offset={offset}
+              popupContainerClassName={popupContainerClassName}
+              popupClassName={popupClassName}
+              placement="bottom"
+            >
+              <ul
                 className={css`
-                  display: flex;
-                  gap: ${space.s6}px;
-                  align-items: center;
-                  padding-bottom: ${space.s6}px;
-                  &:last-of-type {
-                    padding-bottom: 0;
-                  }
+                  all: unset;
+                  color: ${themeVars.textColor};
                 `}
-                key={index}
               >
-                <div
-                  onClick={() => {
-                    if (callBack) {
-                      callBack();
-                    }
-                  }}
-                  className={css`
-                    user-select: none;
-                  `}
-                >
-                  <AvatarImage size={20} disableNativeTitle title={name} avatarUrl={avatarUrl} />
-                </div>
-                <div>{name}</div>
-              </li>
-            ))}
-          </ul>
-        </PopoverOld>
+                {users.map(({avatarUrl, name, callBack}, index) => (
+                  <li
+                    className={css`
+                      display: flex;
+                      gap: ${space.s6}px;
+                      align-items: center;
+                      padding-bottom: ${space.s6}px;
+                      &:last-of-type {
+                        padding-bottom: 0;
+                      }
+                    `}
+                    key={index}
+                  >
+                    <div
+                      onClick={() => {
+                        if (callBack) {
+                          callBack();
+                        }
+                      }}
+                      className={css`
+                        user-select: none;
+                      `}
+                    >
+                      <AvatarImage size={20} disableNativeTitle title={name} avatarUrl={avatarUrl} />
+                    </div>
+                    <div>{name}</div>
+                  </li>
+                ))}
+              </ul>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       )}
     </>
   );

package/src/open-popover-tracker.tsx

@@ -0,0 +1,73 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
+
+type ContextValue = {
+  openPopovers: Set<string>;
+  setOpenPopovers: (value: Set<string> | ((prev: Set<string>) => Set<string>)) => void;
+};
+
+const [Provider, useContext] = createContext<ContextValue>("OpenPopoverTrackerContext", {
+  openPopovers: new Set(),
+  setOpenPopovers: () => {},
+});
+
+export const OpenPopoverTrackerProvider = ({children}: {children: ReactNode}) => {
+  const [openPopovers, setOpenPopovers] = useState<Set<string>>(new Set());
+
+  const value = useMemo(() => {
+    return {
+      openPopovers,
+      setOpenPopovers,
+    };
+  }, [openPopovers, setOpenPopovers]);
+
+  return <Provider value={value}>{children}</Provider>;
+};
+
+export const useOpenPopoverTracker = () => {
+  const {openPopovers, setOpenPopovers} = useContext();
+
+  const popoverId = useId();
+
+  const cleanup = useCallback(() => {
+    setOpenPopovers((prev) => {
+      if (!prev.has(popoverId)) {
+        return prev;
+      }
+      const next = new Set<string>(prev);
+      next.delete(popoverId);
+      return next;
+    });
+  }, [popoverId, setOpenPopovers]);
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpenPopovers((prev) => {
+        if (open) {
+          const next = new Set<string>(prev);
+          next.add(popoverId);
+          return next;
+        } else if (prev.has(popoverId)) {
+          const next = new Set<string>(prev);
+          next.delete(popoverId);
+          return next;
+        } else {
+          return prev;
+        }
+      });
+    },
+    [popoverId, setOpenPopovers]
+  );
+
+  return {
+    hasOpenPopover: openPopovers.size > 0,
+    onOpenChange,
+  };
+};