@fibery/ui-kit 1.37.0 → 1.38.0

package/src/modal-menu/contexts/modal-submenu-context.tsx

@@ -0,0 +1,16 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+export type ModalSubmenuContext = {
+  id: string;
+  title: string;
+  depth: number;
+};
+
+// The default value below is only used to provide initial depth of 0
+const [ModalSubmenuContextPovider, useModalSubmenu] = createContext<ModalSubmenuContext>("ModalSubmenuContext", {
+  id: "root",
+  title: "Root",
+  depth: 0,
+});
+
+export {ModalSubmenuContextPovider, useModalSubmenu};

package/src/modal-menu/index.tsx

@@ -0,0 +1,14 @@
+/**
+ * This is designed to be drop-in compatible with dropdown-menu or context-menu
+ */
+
+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 {ModalMenuSeparator as Separator} from "./modal-menu-separator";
+export {ModalMenuLabel as Label} from "./modal-menu-label";
+export {ModalMenuGroup as Group} from "./modal-menu-group";
+export {ModalSubmenu as Sub} from "./modal-submenu";
+export {ModalSubmenuTrigger as SubTrigger} from "./modal-submenu-trigger";
+export {ModalSubmenuContent as SubContent} from "./modal-submenu-content";

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

@@ -0,0 +1,68 @@
+import {ReactNode} from "react";
+import {createPortal} from "react-dom";
+import {css} from "@linaria/core";
+import {MobilePopup} from "../popover";
+import {space, themeVars} from "../design-system";
+import {getPopupContainerElement} from "../utils-dom";
+import {CommandMenuList, CommandMenuRoot} from "../command-menu";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuContentProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuContent = ({children}: ModalMenuContentProps) => {
+  const {open, title, submenuStack, setContentContainer, onOpenChange, onNavigateBack, height} = useModalMenu();
+
+  if (!open) {
+    return null;
+  }
+
+  const content = (
+    <div
+      ref={setContentContainer}
+      className={css`
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        & ${CommandMenuRoot}:is(${CommandMenuRoot}) {
+          padding: 0 ${space.s4}px;
+          width: 100%;
+        }
+        & ${CommandMenuList}:is(${CommandMenuList}) {
+          max-height: unset;
+        }
+      `}
+    >
+      <div
+        className={css`
+          position: absolute;
+          background: ${themeVars.actionMenuBg};
+          inset: 0;
+          overflow-y: auto;
+        `}
+      >
+        {children}
+      </div>
+      {/* Here the submenus will render via portals */}
+    </div>
+  );
+
+  return createPortal(
+    <MobilePopup
+      height={height}
+      title={submenuStack.at(-1)?.title ?? title}
+      content={content}
+      onClose={() => onOpenChange(false)}
+      onNavigateBack={
+        submenuStack.length === 0
+          ? undefined
+          : () => {
+              onNavigateBack();
+            }
+      }
+    />,
+    getPopupContainerElement()
+  );
+};

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

@@ -0,0 +1,10 @@
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+
+interface ModalMenuGroupProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuGroup = ({children}: ModalMenuGroupProps) => {
+  return <div className={css``}>{children}</div>;
+};

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

@@ -0,0 +1,37 @@
+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 ModalMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  onSelect?: (event: Event) => void;
+  children?: ReactNode;
+}
+
+export const ModalMenuItem = ({children, onSelect, ...otherProps}: ModalMenuItemProps) => {
+  const {onOpenChange} = useModalMenu();
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={cx(
+        otherProps.className,
+        css`
+          ${textStyles.big}
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        `
+      )}
+      onClick={(event) => {
+        otherProps.onClick?.(event);
+        const selectionEvent = new CustomEvent("modal-menu-select", {bubbles: true, cancelable: true});
+        onSelect?.(selectionEvent);
+        if (!selectionEvent.defaultPrevented) {
+          onOpenChange(false);
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+import {layoutVars, space, textStyles, themeVars} from "../design-system";
+
+interface ModalMenuLabelProps {
+  children?: ReactNode;
+}
+
+export const ModalMenuLabel = ({children}: ModalMenuLabelProps) => {
+  return (
+    <div
+      className={css`
+        ${textStyles.big}
+        display: flex;
+        align-items: center;
+        padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        min-height: ${layoutVars.sidebarMenuItemHeight};
+        color: ${themeVars.accentTextColor} !important;
+      `}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+import {ReactNode, RefObject, useCallback, useMemo, useState} from "react";
+import {ModalMenuContextProvider, SubmenuItem} from "./contexts/modal-menu-context";
+
+interface ModalMenuRootProps {
+  open?: boolean;
+  title?: string;
+  height?: string;
+  contentRef?: RefObject<HTMLDivElement>;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+export const ModalMenuRoot = ({
+  open,
+  title = "Actions",
+  children,
+  onOpenChange: _onOpenChange,
+  height,
+}: ModalMenuRootProps) => {
+  const [submenuStack, setSubmenuStack] = useState<SubmenuItem[]>([]);
+  const [contentContainer, setContentContainer] = useState<HTMLDivElement | null>(null);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      _onOpenChange?.(open);
+      if (!open) {
+        setSubmenuStack([]);
+      }
+    },
+    [_onOpenChange]
+  );
+
+  const onOpenSubmenu = useCallback((item: SubmenuItem) => {
+    setSubmenuStack((stack) => [...stack, item]);
+  }, []);
+
+  const onNavigateBack = useCallback(() => {
+    setSubmenuStack((stack) => stack.slice(0, -1));
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      title,
+      open: open ?? false,
+      submenuStack,
+      contentContainer,
+      setContentContainer,
+      onOpenChange,
+      onOpenSubmenu,
+      onNavigateBack,
+      height,
+    }),
+    [open, title, submenuStack, contentContainer, onOpenChange, onOpenSubmenu, onNavigateBack, height]
+  );
+
+  return <ModalMenuContextProvider value={contextValue}>{children}</ModalMenuContextProvider>;
+};

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

@@ -0,0 +1,14 @@
+import {css} from "@linaria/core";
+import {space, themeVars} from "../design-system";
+
+export const ModalMenuSeparator = () => {
+  return (
+    <hr
+      className={css`
+        border: none;
+        border-bottom: 1px solid ${themeVars.separatorColor};
+        margin: ${space.s4}px 0;
+      `}
+    />
+  );
+};

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

@@ -0,0 +1,37 @@
+import {cx} from "@linaria/core";
+import {cloneElement, ComponentProps, ReactHTMLElement, ReactNode} from "react";
+import {useModalMenu} from "./contexts/modal-menu-context";
+
+interface ModalMenuTriggerProps extends ComponentProps<"div"> {
+  asChild?: boolean;
+  children: ReactHTMLElement<HTMLDivElement> | ReactNode;
+}
+
+export const ModalMenuTrigger = ({asChild, children, onClick, ...otherProps}: ModalMenuTriggerProps) => {
+  const {open, onOpenChange} = useModalMenu();
+  if (asChild) {
+    const className = (children as ReactHTMLElement<HTMLDivElement>)?.props?.className;
+    return cloneElement(children as ReactHTMLElement<HTMLDivElement>, {
+      ...otherProps,
+      className: cx(className, otherProps.className),
+      onClick: (event) => {
+        onClick?.(event);
+        onOpenChange(!open);
+      },
+    });
+  }
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={otherProps.className}
+      onClick={(event) => {
+        onClick?.(event);
+        onOpenChange(!open);
+      }}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,49 @@
+import {ReactNode} from "react";
+import {createPortal} from "react-dom";
+import {css} from "@linaria/core";
+import {themeVars, transition} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+import {useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuContentProps {
+  children?: ReactNode;
+}
+
+export const ModalSubmenuContent = ({children}: ModalSubmenuContentProps) => {
+  const {contentContainer, submenuStack} = useModalMenu();
+  const {id, depth} = useModalSubmenu();
+
+  const open = submenuStack.some((item) => item.id === id);
+
+  if (!contentContainer || !open) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={css`
+        position: absolute;
+        background: ${themeVars.actionMenuBg};
+        inset: 0;
+        overflow-y: auto;
+
+        transition: transform ${transition}, opacity ${transition};
+        transform: translateX(0);
+        opacity: 1;
+
+        @media (prefers-reduced-motion: no-preference) {
+          @starting-style {
+            transform: translateX(20%);
+            opacity: 0;
+          }
+        }
+      `}
+      style={{
+        zIndex: depth,
+      }}
+    >
+      {children}
+    </div>,
+    contentContainer
+  );
+};

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

@@ -0,0 +1,34 @@
+import {css, cx} from "@linaria/core";
+import {ComponentProps, ReactHTMLElement} from "react";
+import {space, textStyles} from "../design-system";
+import {useModalMenu} from "./contexts/modal-menu-context";
+import {useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuTriggerProps extends ComponentProps<"div"> {
+  children: ReactHTMLElement<HTMLButtonElement>;
+}
+
+export const ModalSubmenuTrigger = ({children, ...otherProps}: ModalSubmenuTriggerProps) => {
+  const {onOpenSubmenu} = useModalMenu();
+  const {id, title} = useModalSubmenu();
+
+  return (
+    <div
+      role="button"
+      {...otherProps}
+      className={cx(
+        otherProps.className,
+        css`
+          ${textStyles.big}
+          padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
+        `
+      )}
+      onClick={(event) => {
+        otherProps.onClick?.(event);
+        onOpenSubmenu({id, title});
+      }}
+    >
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import {ReactNode, useId, useMemo} from "react";
+import {ModalSubmenuContextPovider, useModalSubmenu} from "./contexts/modal-submenu-context";
+
+interface ModalSubmenuProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  children?: ReactNode;
+}
+
+export const ModalSubmenu = ({title = "Submenu", children}: ModalSubmenuProps) => {
+  const id = useId();
+  const {depth} = useModalSubmenu();
+  const contextValue = useMemo(() => ({id, title, depth: depth + 1}), [id, title, depth]);
+
+  return <ModalSubmenuContextPovider value={contextValue}>{children}</ModalSubmenuContextPovider>;
+};

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%)",