@fibery/ui-kit 1.36.2 → 1.38.0

package/src/mobile-styles.ts

@@ -0,0 +1,10 @@
+export const mobileRootClassName = "fibery-mobile";
+export const mobileRootSelector = `.${mobileRootClassName}`;
+export const mobileKeyboardOpenClassName = "fibery-mobile-keyboard-open";
+export const mobileKeyboardOpenSelector = `.${mobileKeyboardOpenClassName}`;
+export const keyboardHeightVar = "--fibery-on-screen-keyboard-height";
+export const safeAreaInsetLeftVar = "--safe-area-inset-left";
+export const safeAreaInsetRightVar = "--safe-area-inset-right";
+export const safeAreaInsetTopVar = "--safe-area-inset-top";
+export const safeAreaInsetBottomVar = "--safe-area-inset-bottom";
+export const keyboardInsetBottomVar = "--keyboard-inset-bottom";

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

@@ -0,0 +1,22 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+export type SubmenuItem = {
+  id: string;
+  title: string;
+};
+
+export type ModalMenuContext = {
+  open: boolean;
+  title: string;
+  submenuStack: SubmenuItem[];
+  contentContainer: HTMLDivElement | null;
+  setContentContainer: (el: HTMLDivElement | null) => void;
+  onOpenSubmenu: (item: SubmenuItem) => void;
+  onNavigateBack: () => void;
+  onOpenChange: (open: boolean) => void;
+  height?: string;
+};
+
+const [ModalMenuContextProvider, useModalMenu] = createContext<ModalMenuContext>("ModalMenuContext");
+
+export {ModalMenuContextProvider, useModalMenu};

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/new-badge.tsx

@@ -1,17 +1,14 @@
 import {css} from "@linaria/core";
-import {fontWeight, space, textStyles, themeVars} from "./design-system";
+import {space, textStyles, themeVars} from "./design-system";
 
 const newBadgeStyle = css`
-  ${textStyles.heading7}
-  text-transform: none;
-  font-weight: ${fontWeight.medium};
+  ${textStyles.heading8}
   display: inline-block;
-  padding: ${space.s2}px 4.5px ${space.s2}px 5px;
+  padding: ${space.s2}px 5px;
   color: ${themeVars.colorTextBadgeNeutral};
   background-color: ${themeVars.colorBgBadgeNeutral};
-  //border: 0.5px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
   vertical-align: text-top;
-  border-radius: 4px;
+  border-radius: ${space.s4}px;
 `;
 
 type Props = {children: React.ReactNode};

package/src/number-input/text-area-auto-sized.tsx

@@ -0,0 +1,47 @@
+import {useEffect, useMemo, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {hiddenCss, inputCss, textAreaCss} from "./styles";
+import {css, cx} from "@linaria/core";
+import {Stack} from "./stack";
+import {invalidInputClass} from "./edit-unit-styles";
+
+type Props = {
+  width?: number;
+  invalid?: boolean;
+  autoSelect?: boolean;
+} & React.ComponentProps<"textarea">;
+
+export const TextAreaAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const initialValue = useRef(value);
+
+  const hiddenValue = useMemo(() => {
+    return !value || !initialValue.current ? placeholder : value;
+  }, [placeholder, value]);
+
+  useEffect(() => {
+    if (autoSelect && ref.current) {
+      ref.current.select();
+    }
+  }, [autoSelect]);
+
+  return (
+    <Stack
+      className={css`
+        width: 100%;
+      `}
+      bottom={<div className={cx(inputCss, textAreaCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <textarea
+          ref={ref}
+          rows={1} // Allows textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
+          value={value}
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/text-input-auto-sized.tsx

@@ -0,0 +1,49 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {Stack} from "./stack";
+import {cx} from "@linaria/core";
+import {hiddenCss, inputCss, textInlineCss} from "./styles";
+import {invalidInputClass} from "./edit-unit-styles";
+import {useEffect, useMemo, useRef} from "react";
+
+type Props = {
+  value?: string;
+  width?: number;
+  invalid?: boolean;
+  autoSelect?: boolean;
+} & Omit<React.ComponentProps<"input">, "value">;
+
+export const TextInputAutoSized = ({value, placeholder, invalid, autoSelect, ...rest}: Props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const hiddenValue = useMemo(() => {
+    let hiddenValue = placeholder || "";
+    if (value && value.length > hiddenValue.length - 1) {
+      hiddenValue = value;
+    }
+    return hiddenValue;
+  }, [placeholder, value]);
+
+  useEffect(() => {
+    if (autoSelect && ref.current) {
+      ref.current.select();
+    }
+  }, [autoSelect]);
+
+  return (
+    <Stack
+      bottom={<div className={cx(inputCss, textInlineCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <input
+          ref={ref}
+          size={1} // Allows input to shrink (otherwise it has size 20 by default)
+          value={value || ""}
+          type="text"
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

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>
       )}
     </>
   );