@fibery/ui-kit 1.26.5 → 1.26.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.26.5",
+  "version": "1.26.7",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -28,10 +28,16 @@
     "src/toast/**/*.ts*",
     "src/lists/**/*.ts*",
     "src/a11y-color.ts",
-    "src/integration-compact-info-button.tsx"
+    "src/integration-compact-info-button.tsx",
+    "src/dropdown-menu",
+    "src/shortcut-badge",
+    "src/tsfixme"
   ],
   "license": "UNLICENSED",
   "dependencies": {
+    "@fibery/emoji-data": "2.4.0",
+    "@fibery/helpers": "1.2.0",
+    "@fibery/react": "1.3.1",
     "@linaria/core": "5.0.1",
     "@linaria/react": "5.0.1",
     "@popperjs/core": "2.11.6",
@@ -68,10 +74,7 @@
     "react-select-country-list": "2.2.1",
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
-    "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.4.0",
-    "@fibery/helpers": "1.2.0",
-    "@fibery/react": "1.3.0"
+    "ua-parser-js": "0.7.24"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -80,6 +83,8 @@
   "devDependencies": {
     "@babel/core": "7.23.9",
     "@babel/runtime": "7.23.9",
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.5.1",
     "@linaria/babel-preset": "5.0.3",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -103,9 +108,7 @@
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
     "typescript": "5.1.6",
-    "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.5.1",
-    "@fibery/babel-preset": "7.4.0"
+    "unist-util-reduce": "0.2.2"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/dropdown-menu/index.tsx

@@ -0,0 +1,169 @@
+import {Wrap} from "@fibery/react/src/wrap";
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {forwardRef} from "react";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+
+export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps) => (
+  <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
+);
+
+export const Trigger = DropdownMenuPrimitive.Trigger;
+
+const rowItemStyles = {
+  ...textStyles.regular,
+  display: "flex",
+  alignItems: "center",
+  minHeight: layout.menuItemHeight,
+  outline: "none",
+  borderRadius: border.radius6,
+  padding: `0px ${space.s12}px`,
+  margin: `0px ${space.s4}px`,
+  cursor: "pointer",
+
+  "&:hover,&[data-highlighted]": {
+    marginLeft: 4,
+    marginRight: 4,
+    backgroundColor: themeVars.colorBgActionsMenuItemHover,
+    borderRadius: border.radius6,
+  },
+
+  "&[data-disabled]": {
+    cursor: "default",
+    opacity: 0.4,
+
+    "&:hover": {
+      backgroundColor: "unset",
+    },
+  },
+};
+
+const dropdownMenuContentStyles = css`
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* ant dropdown have z-index 1000 and sometimes we need to open dropdown from ant's one
+   * e.g. backlog actions on calendar
+   * TODO: use more reliable z-index strategy
+   */
+  z-index: 1001;
+
+  max-height: min(var(--radix-dropdown-menu-content-available-height), 692px);
+  padding-top: ${space.s4}px;
+  padding-bottom: ${space.s4}px;
+  min-width: 200px;
+  box-shadow: ${themeVars.actionMenuShadow};
+  border-radius: ${border.radius8}px;
+  backdrop-filter: ${themeVars.effectBgActionsMenu};
+  background-color: ${themeVars.colorBgActionsMenu};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    will-change: transform, opacity;
+    &[data-state="open"] {
+      &[data-side="top"] {
+        animation-name: slideUp;
+      }
+      &[data-side="bottom"] {
+        animation-name: slideDown;
+      }
+    }
+  }
+`;
+
+export type ContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & {
+  /* render content in portal. NOTE: Changing this prop will lead to re-mount */
+  portalled?: boolean;
+  collisionPadding?: number;
+};
+
+const onContentKeyDown = (e: React.KeyboardEvent) => {
+  // Escape is attached to document that's why we can't stop propagation of it
+  // For other cases we'd like to avoid accidental key handlers e.g. in Inbox
+  // (we can chage it in the future ref. https://fibery.slack.com/archives/C05CH6YTSKW/p1692271916224909 https://fibery.slack.com/archives/C05CH6YTSKW/p1692272716431819)
+  if (e.key !== "Escape") {
+    e.stopPropagation();
+  }
+};
+
+export const Content = forwardRef<HTMLDivElement, ContentProps>(function DropdownMenuContent(
+  {className, portalled = true, collisionPadding = space.s12, ...rest},
+  ref
+) {
+  return (
+    <Wrap if={portalled} with={DropdownMenuPrimitive.Portal}>
+      <DropdownMenuPrimitive.Content
+        onKeyDown={onContentKeyDown}
+        ref={ref}
+        className={cx(dropdownMenuContentStyles, className)}
+        side="bottom"
+        align="start"
+        collisionPadding={collisionPadding}
+        sideOffset={space.s4}
+        {...rest}
+      />
+    </Wrap>
+  );
+});
+
+export const Sub = DropdownMenuPrimitive.Sub;
+
+export const SubContent = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuSubContentProps>(
+  function DropdownMenuSubContent({className, ...rest}, ref) {
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+      </DropdownMenuPrimitive.Portal>
+    );
+  }
+);
+
+export const SubTrigger = styled(DropdownMenuPrimitive.SubTrigger)`
+  ${rowItemStyles}
+`;
+
+export const Item = styled(DropdownMenuPrimitive.Item)`
+  ${rowItemStyles}
+`;
+
+export const Separator = styled(DropdownMenuPrimitive.Separator)`
+  ${{
+    backgroundColor: themeVars.separatorColor,
+    height: 1,
+    margin: `${space.s4}px 0`,
+  }}
+`;
+
+export const Group = DropdownMenuPrimitive.Group;
+
+export const Label = styled(DropdownMenuPrimitive.Label)`
+  ${{
+    ...textStyles.small,
+    color: themeVars.accentTextColor,
+    padding: `${space.s6}px ${space.s12}px`,
+  }}
+`;

package/src/lists/actions-menu-row-surface.tsx

@@ -0,0 +1,144 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {css, cx} from "@linaria/core";
+import _ from "lodash";
+import {forwardRef, useId} from "react";
+import {useActionsMenuContext} from "../actions-menu";
+import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
+import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
+import {colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {
+  ListRowContent,
+  ListRowContentProps,
+  ListRowSurfaceProps,
+  NATUAL_FOCUS_CLASS,
+  NATUAL_HOVER_CLASS,
+  NATURAL_HOVER,
+  listRowSurfaceStylesBase,
+} from "./list-row-surface";
+
+interface ActionMenuItemSurfaceProps
+  extends Omit<ActionsMenuItemProps, "description">,
+    Omit<ListRowSurfaceProps, "children" | "darker" | "onSelect" | "id"> {}
+
+export const actionMenuItemSurface = css`
+  margin: 0 ${space.s4}px;
+  background-color: ${themeVars.colorBgListItemGeneral};
+  ${NATURAL_HOVER},
+  &[data-highlighted] {
+    background-color: ${themeVars.colorBgActionsMenuItemHover};
+  }
+  &.done,
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    ${NATURAL_HOVER}, &.hover > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+    background-color: ${themeVars.colorBgActionsMenuItemSelected};
+    ${NATURAL_HOVER},&.hover, &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemSelectedHover};
+    }
+  }
+  &.dangerous {
+    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    ${NATURAL_HOVER},
+    &.hover,
+      &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    }
+  }
+  &.warm {
+    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    color: ${colors.inversedTextColor};
+    ${NATURAL_HOVER}, &.hover,
+      &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+      color: ${colors.inversedTextColor};
+    }
+  }
+`;
+
+export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
+  ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
+    const id = useId();
+    const activeDangerousRow = useActiveDangerousRow();
+    const showWarning = activeDangerousRow === id;
+    const onSelect = useCallbackRef(props.onSelect || _.noop);
+    const {MenuPrimitive} = useActionsMenuContext();
+    const setActiveDangerousRow = useSetActiveDangerousRow();
+    const handleSelect = (e: Event) => {
+      e.stopPropagation();
+
+      if (loading || !id) {
+        e.preventDefault();
+        return;
+      }
+
+      if (dangerous && !showWarning) {
+        e.preventDefault();
+        setActiveDangerousRow(id);
+        return;
+      }
+
+      setActiveDangerousRow(null);
+
+      onSelect(e);
+    };
+    return (
+      <MenuPrimitive.Item
+        ref={ref}
+        data-testid={testId}
+        onClick={stopPropagation}
+        onSelect={handleSelect}
+        title={title ? title : ""}
+        className={cx(
+          listRowSurfaceStylesBase,
+          actionMenuItemSurface,
+          className,
+          hovered === undefined && NATUAL_HOVER_CLASS,
+          focused === undefined && NATUAL_FOCUS_CLASS,
+          focused && "focus",
+          disabled && "done",
+          selected && "selected",
+          dangerous && "dangerous",
+          showWarning && "warn"
+        )}
+        disabled={disabled}
+      >
+        {children}
+      </MenuPrimitive.Item>
+    );
+  }
+);
+
+interface ActionMenuItemContentProps extends ListRowContentProps {
+  description?: string;
+}
+const actionMenuItemDescriptionClass = css`
+  ${textStyles.small};
+  line-height: ${lineHeight.nowrap};
+  color: ${themeVars.accentTextColor};
+  padding: ${space.s2}px ${space.s8}px 0;
+`;
+const actionMenuItemContentClass = css`
+  line-height: ${layout.menuItemHeight}px;
+  padding: 0 ${space.s8}px;
+`;
+const actionMenuItemWithDescription = css`
+  min-height: ${layout.itemWithSubtitleHeight}px;
+`;
+export const ActionMenuItemContent = forwardRef<HTMLDivElement, ActionMenuItemContentProps>(
+  ({contentClassName, description, ...rest}, ref) => {
+    return (
+      <div className={cx(description && actionMenuItemWithDescription)}>
+        <ListRowContent contentClassName={cx(contentClassName, actionMenuItemContentClass)} ref={ref} {...rest} />
+        {description ? <div className={actionMenuItemDescriptionClass}>{description}</div> : null}
+      </div>
+    );
+  }
+);

package/src/lists/list-row-surface.tsx

@@ -1,12 +1,6 @@
-import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode, useId} from "react";
-import {border, colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
 import {css, cx} from "@linaria/core";
-import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
-import {useActionsMenuContext} from "../actions-menu";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
-import _ from "lodash";
-import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -18,9 +12,7 @@ export interface ListRowSurfaceProps extends ListRowSurfaceBase {
   focused?: boolean;
   hovered?: boolean;
 }
-interface ActionMenuItemSurfaceProps
-  extends Omit<ActionsMenuItemProps, "description">,
-    Omit<ListRowSurfaceProps, "children" | "darker" | "onSelect" | "id"> {}
+
 export const NATUAL_HOVER_CLASS = "natural-hover";
 export const NATUAL_FOCUS_CLASS = "natural-focus";
 export const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
@@ -152,48 +144,6 @@ export const listRowSurfaceStatesDark = css`
   }
 `;
 
-export const actionMenuItemSurface = css`
-  margin: 0 ${space.s4}px;
-  background-color: ${themeVars.colorBgListItemGeneral};
-  ${NATURAL_HOVER},
-  &[data-highlighted] {
-    background-color: ${themeVars.colorBgActionsMenuItemHover};
-  }
-  &.done,
-  &[data-disabled] {
-    cursor: not-allowed;
-    color: ${themeVars.colorTextListItemGeneralDisabled};
-    background-color: ${themeVars.colorBgListItemGeneralDisabled};
-    ${NATURAL_HOVER}, &.hover > * {
-      opacity: ${themeVars.opacityListItemGeneralDisabled};
-    }
-  }
-  &.selected {
-    cursor: default;
-    background-color: ${themeVars.colorBgActionsMenuItemSelected};
-    ${NATURAL_HOVER},&.hover, &[data-highlighted] {
-      background-color: ${themeVars.colorBgActionsMenuItemSelectedHover};
-    }
-  }
-  &.dangerous {
-    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    ${NATURAL_HOVER},
-    &.hover,
-    &[data-highlighted] {
-      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    }
-  }
-  &.warm {
-    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    color: ${colors.inversedTextColor};
-    ${NATURAL_HOVER}, &.hover,
-    &[data-highlighted] {
-      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-      color: ${colors.inversedTextColor};
-    }
-  }
-`;
-
 /**
  * This should be responsible for all flat list items existing in UI in Fibery. Options, action menus and etc.
  * You can enforce it's state with props focused, hovered, selected, done (use it for disabled too)
@@ -222,58 +172,6 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
     );
   }
 );
-export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
-  ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
-    const id = useId();
-    const activeDangerousRow = useActiveDangerousRow();
-    const showWarning = activeDangerousRow === id;
-    const onSelect = useCallbackRef(props.onSelect || _.noop);
-    const {MenuPrimitive} = useActionsMenuContext();
-    const setActiveDangerousRow = useSetActiveDangerousRow();
-    const handleSelect = (e: Event) => {
-      e.stopPropagation();
-
-      if (loading || !id) {
-        e.preventDefault();
-        return;
-      }
-
-      if (dangerous && !showWarning) {
-        e.preventDefault();
-        setActiveDangerousRow(id);
-        return;
-      }
-
-      setActiveDangerousRow(null);
-
-      onSelect(e);
-    };
-    return (
-      <MenuPrimitive.Item
-        ref={ref}
-        data-testid={testId}
-        onClick={stopPropagation}
-        onSelect={handleSelect}
-        title={title ? title : ""}
-        className={cx(
-          listRowSurfaceStylesBase,
-          actionMenuItemSurface,
-          className,
-          hovered === undefined && NATUAL_HOVER_CLASS,
-          focused === undefined && NATUAL_FOCUS_CLASS,
-          focused && "focus",
-          disabled && "done",
-          selected && "selected",
-          dangerous && "dangerous",
-          showWarning && "warn"
-        )}
-        disabled={disabled}
-      >
-        {children}
-      </MenuPrimitive.Item>
-    );
-  }
-);
 
 export interface ListRowContentProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>, "className">> {
   rootClassName?: string;
@@ -322,30 +220,3 @@ export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
     );
   }
 );
-
-interface ActionMenuItemContentProps extends ListRowContentProps {
-  description?: string;
-}
-const actionMenuItemDescriptionClass = css`
-  ${textStyles.small};
-  line-height: ${lineHeight.nowrap};
-  color: ${themeVars.accentTextColor};
-  padding: ${space.s2}px ${space.s8}px 0;
-`;
-const actionMenuItemContentClass = css`
-  line-height: ${layout.menuItemHeight}px;
-  padding: 0 ${space.s8}px;
-`;
-const actionMenuItemWithDescription = css`
-  min-height: ${layout.itemWithSubtitleHeight}px;
-`;
-export const ActionMenuItemContent = forwardRef<HTMLDivElement, ActionMenuItemContentProps>(
-  ({contentClassName, description, ...rest}, ref) => {
-    return (
-      <div className={cx(description && actionMenuItemWithDescription)}>
-        <ListRowContent contentClassName={cx(contentClassName, actionMenuItemContentClass)} ref={ref} {...rest} />
-        {description ? <div className={actionMenuItemDescriptionClass}>{description}</div> : null}
-      </div>
-    );
-  }
-);

package/src/select/custom-select-partials/menu-list-virtualized.tsx

@@ -131,7 +131,7 @@ export function MenuListVirtualized<
   const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight, maxHeight);
   //scrolling to focused option
   useEffect(() => {
-    let to: ReturnType<typeof setTimeout> | undefined;
+    let to: number | undefined;
     if (initialFocusedOption && focusedOption && virtuoso.current) {
       const index = flattenChildren.findIndex((child) => {
         if (isObject(child) && "props" in child) {
@@ -144,7 +144,7 @@ export function MenuListVirtualized<
       if (index >= 0) {
         const focusedOptionPosition = index * OPTION_HEIGHT;
         virtuoso.current.getState((state) => {
-          to = setTimeout(() => {
+          to = window.setTimeout(() => {
             if (!virtuoso.current) {
               return;
             }
@@ -168,7 +168,7 @@ export function MenuListVirtualized<
       }
     }
     return () => {
-      clearTimeout(to);
+      window.clearTimeout(to);
     };
   }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
   return (