@fibery/ui-kit 1.26.4 → 1.26.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.26.4",
+  "version": "1.26.6",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -17,7 +17,8 @@
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
     "src/select",
-    "src/error-alert.tsx",
+    "src/error-alert",
+    "src/actions-menu",
     "src/pallete.ts",
     "src/tooltip.tsx",
     "src/tooltip-if-overflown.tsx",
@@ -27,7 +28,10 @@
     "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": {
@@ -68,9 +72,9 @@
     "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"
+    "@fibery/react": "1.3.0",
+    "@fibery/emoji-data": "2.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -103,8 +107,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.5.1"
+    "@fibery/eslint-config": "8.5.1",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

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

@@ -0,0 +1,201 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import CheckedIcon from "../icons/react/Checked";
+import {css, cx} from "@linaria/core";
+import {FunctionComponent, memo, ReactNode, useId} from "react";
+import {border, colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {IconBaseProps} from "../icons/types";
+import {Spinner} from "../loaders";
+import {ShortcutBadge} from "../shortcut-badge";
+import {useTheme} from "../theme-provider";
+import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const hiddenTextCss = css`
+  visibility: hidden;
+  overflow: hidden;
+  height: 0;
+`;
+const visibleTextCss = css`
+  visibility: visible;
+  height: unset;
+`;
+
+const descriptionCss = css`
+  ${textStyles.small};
+  line-height: ${lineHeight.nowrap};
+  color: ${themeVars.accentTextColor};
+  padding-top: ${space.s2}px;
+`;
+
+const rowCss = css`
+  display: flex;
+  align-items: center;
+  min-height: ${layout.menuItemHeight}px;
+  gap: ${space.s6}px;
+`;
+
+const dangerousItemCss = css`
+  &.${rowCss} {
+    &[data-highlighted] {
+      color: ${themeVars.danger};
+      background-color: ${themeVars.colorBgActionsMenuItemDangerHover};
+    }
+  }
+`;
+
+const dangerousConfirmationCss = css`
+  &.${rowCss} {
+    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    color: ${colors.inversedTextColor};
+    border-radius: ${border.radius6}px;
+
+    &:hover,
+    &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+      color: ${colors.inversedTextColor};
+      border-radius: ${border.radius6}px;
+    }
+  }
+`;
+
+const rowWithDescriptionCss = css`
+  &.${rowCss} {
+    min-height: ${layout.itemWithSubtitleHeight}px;
+  }
+`;
+
+const rowContentCss = css`
+  flex-grow: 1;
+`;
+
+const cornerCss = css`
+  display: flex;
+  align-items: center;
+  column-gap: ${space.s12}px;
+`;
+
+const firstLetterToLowerCase = (str: string) => {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+const RightCorner = ({shortcut, loading, checked}: {shortcut?: string; loading?: boolean; checked?: boolean}) => {
+  const theme = useTheme();
+
+  return loading || shortcut || checked ? (
+    <div className={cornerCss}>
+      {loading ? <Spinner color={theme.primary} size={16} containerSize={16} /> : null}
+      {shortcut ? <ShortcutBadge shortcut={shortcut} /> : null}
+      {checked ? <CheckedIcon iconSize={18} color={themeVars.textColor} /> : null}
+    </div>
+  ) : null;
+};
+
+const LeftCorner = ({Icon}: {Icon: FunctionComponent<IconBaseProps> | void}) => {
+  return Icon ? (
+    <div className={cornerCss}>
+      <Icon color={themeVars.iconColor} iconSize={18} />
+    </div>
+  ) : null;
+};
+
+export type ActionsMenuItemProps = {
+  title?: string;
+  /** Event handler called when the user selects an item (via mouse of keyboard).
+   * Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.
+   * */
+  onSelect?: (e: Event) => void;
+  testId?: string;
+  description?: string;
+  /** Icon's component */
+  Icon?: FunctionComponent<IconBaseProps>;
+  /** Hint for keyboard shortcut for this action */
+  shortcut?: string;
+  disabled?: boolean;
+  /** Whether the action requires confirmation */
+  dangerous?: boolean;
+  loading?: boolean;
+  checked?: boolean;
+  children: ReactNode;
+};
+
+const ActionsMenuItemComponent: React.FC<
+  ActionsMenuItemProps & {id?: string; showWarning?: boolean; onSelect: (e: Event) => void}
+> = memo(function ActionsMenuItemComponent({
+  id,
+  testId,
+  title,
+  onSelect,
+  description,
+  Icon,
+  shortcut,
+  disabled,
+  dangerous,
+  showWarning,
+  loading,
+  checked,
+  children,
+}) {
+  const {MenuPrimitive} = useActionsMenuContext();
+  const setActiveDangerousRow = useSetActiveDangerousRow();
+  const handleSelect = async (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
+      data-testid={testId}
+      onClick={stopPropagation}
+      onSelect={handleSelect}
+      title={title ? title : ""}
+      className={cx(
+        rowCss,
+        dangerous && dangerousItemCss,
+        showWarning && dangerousConfirmationCss,
+        description && rowWithDescriptionCss
+      )}
+      disabled={disabled}
+    >
+      <LeftCorner Icon={Icon} />
+      <div className={rowContentCss}>
+        {dangerous && (
+          <div className={cx(hiddenTextCss, showWarning && visibleTextCss)}>
+            Really {typeof children === "string" ? firstLetterToLowerCase(children) : children}?
+          </div>
+        )}
+
+        <div className={cx(showWarning && hiddenTextCss)}>{children}</div>
+
+        {description && <div className={descriptionCss}>{description}</div>}
+      </div>
+      <RightCorner shortcut={shortcut} loading={loading} checked={checked} />
+    </MenuPrimitive.Item>
+  );
+});
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = (props) => {
+  const id = useId();
+  const activeDangerousRow = useActiveDangerousRow();
+
+  const onSelect = useCallbackRef(props.onSelect || noop);
+
+  return <ActionsMenuItemComponent {...props} id={id} showWarning={activeDangerousRow === id} onSelect={onSelect} />;
+};

package/src/actions-menu/actions-menu-props.tsx

@@ -0,0 +1,26 @@
+import {ReactNode} from "react";
+import {ContentProps} from "../dropdown-menu";
+import {LinariaClassName} from "@linaria/core";
+import {DropdownMenuContentProps} from "@radix-ui/react-dropdown-menu";
+
+export type ActionsMenuProps = {
+  /** Clicking on this node will open actions menu. Make sure that trigger forwards ref AND props to html element */
+  trigger: ReactNode;
+  children: ReactNode;
+  align?: ContentProps["align"];
+  disabled?: boolean;
+  portalled?: boolean;
+  wide?: boolean;
+  /** The controlled open state of the ActionsMenu. Must be used in conjunction with onOpenChange. */
+  open?: boolean;
+  /** Event handler called when the open state of the ActionsMenu changes. */
+  onOpenChange?: (state: boolean) => unknown;
+  contentStyles?: LinariaClassName;
+  modal?: boolean;
+  alignOffset?: number;
+  side?: ContentProps["side"];
+  sideOffset?: number;
+  collisionPadding?: number;
+  autoFocusOnClose?: boolean;
+  sticky?: DropdownMenuContentProps["sticky"];
+};

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

@@ -0,0 +1,7 @@
+import {$TSFixMe} from "../tsfixme";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+export const ActionsMenuSeparator = (props: $TSFixMe) => {
+  const {MenuPrimitive} = useActionsMenuContext();
+  return <MenuPrimitive.Separator {...props} />;
+};

package/src/actions-menu/actions-menu-sub-command-menu.tsx

@@ -0,0 +1,189 @@
+import {css, cx} from "@linaria/core";
+import {CommandInput, CommandItem, CommandList, CommandRoot, CommandEmpty} from "cmdk";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+import Search from "../icons/react/Search";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+import {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
+import {styled} from "@linaria/react";
+import {useRef, useState} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+/**
+ *
+ * Probably commands menu deserves to be extracted to a separate primitive component not connected to ActionsMenu
+ * but for now we don't have other use cases for it so no idea how a primitive should look like
+ *
+ * Feel free to extract it to a separate one
+ *
+ */
+
+const inputContainerCss = css`
+  display: flex;
+  padding: ${space.s8}px ${space.s12}px;
+  align-items: center;
+  border-bottom: 1px solid ${themeVars.separatorColor};
+
+  & input {
+    min-width: 120px;
+    width: 100%;
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.transparent};
+    margin-left: ${space.s8}px;
+    font-size: 13px;
+    border: none;
+    outline: none;
+    resize: none;
+  }
+
+  & input::placeholder {
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+type ActionsMenuSubCommandMenuProps = React.PropsWithChildren<{
+  trigger?: React.ReactNode;
+  disabled?: boolean;
+  filter?: React.ComponentPropsWithoutRef<typeof CommandRoot>["filter"];
+}>;
+export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({
+  disabled,
+  trigger,
+  filter,
+  children,
+}) => {
+  const [open, onOpenChange] = useState(false);
+  const triggerRef = useRef(null);
+  const openRef = useRef(false);
+
+  return (
+    <ActionsMenuSubMenu
+      disabled={disabled}
+      open={open}
+      onOpenChange={(v) => {
+        openRef.current = v;
+        onOpenChange(v);
+      }}
+      trigger={trigger}
+      triggerRef={triggerRef}
+    >
+      <CommandRoot
+        filter={filter}
+        onClick={stopPropagation}
+        onBlur={(e) => {
+          /**
+           * Submenu Trigger tries to steal the focus from input on every onPointerMove
+           * to avoid this we lock focus on input and do not let it move to back to triger while menu is still open
+           *
+           * We use openRef here because react state will be updated only on next render
+           */
+          if (openRef.current && e.target.hasAttribute("cmdk-input") && e.relatedTarget === triggerRef.current) {
+            e.target.focus();
+          }
+        }}
+      >
+        {children}
+      </CommandRoot>
+    </ActionsMenuSubMenu>
+  );
+};
+
+type ActionsMenuSubCommandMenuInputProps = {
+  placeholder?: string;
+  autoFocus?: boolean;
+};
+export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuInputProps> = ({
+  placeholder,
+  autoFocus = true,
+}) => {
+  return (
+    <div className={inputContainerCss}>
+      <Search iconSize={16} aria-hidden />
+      <CommandInput
+        onKeyDown={(e) => {
+          // prevent submenu from closing if input is not empty
+          if ((e.target as HTMLInputElement).value.length > 0) {
+            e.stopPropagation();
+          }
+        }}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+      />
+    </div>
+  );
+};
+
+export const ActionsMenuSubCommandMenuList = styled(CommandList)`
+  overflow-y: scroll;
+  width: 250px;
+  height: var(--cmdk-list-height);
+  max-height: 600px;
+  transition: height 100ms ease;
+  margin-top: ${space.s4}px;
+`;
+
+const commandItemCss = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s6}px;
+  padding: 0 ${space.s12}px;
+  cursor: pointer;
+  min-height: ${layout.menuItemHeight}px;
+  margin: 0 ${space.s4}px;
+
+  &[data-selected] {
+    margin: 0 4px;
+    background-color: ${themeVars.colorBgActionsMenuItemHover};
+    border-radius: ${border.radius6}px;
+  }
+`;
+const commandItemTitleCss = css`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+type ActionsMenuSubCommandMenuItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> & {
+  icon?: React.ReactNode;
+};
+
+export const ActionsMenuSubCommandMenuItem: React.FC<ActionsMenuSubCommandMenuItemProps> = ({
+  onSelect,
+  icon,
+  children,
+  className,
+  ...props
+}) => {
+  const {close} = useActionsMenuContext();
+  const [showTitle, setShowTitle] = useState(false);
+
+  const onSelectItem = (value: string) => {
+    onSelect?.(value);
+    close();
+  };
+
+  return (
+    <CommandItem className={cx(commandItemCss, className)} onSelect={onSelectItem} {...props}>
+      {icon}
+      <span
+        title={showTitle ? (children as string) : ""}
+        onMouseEnter={(e) => {
+          const target = e.target as HTMLElement;
+          if (typeof children === "string" && target.offsetWidth < target.scrollWidth) {
+            setShowTitle(true);
+          }
+        }}
+        className={commandItemTitleCss}
+      >
+        {children}
+      </span>
+    </CommandItem>
+  );
+};
+
+export const ActionsMenuSubCommandMenuEmpty = styled(CommandEmpty)`
+  ${textStyles.small}
+  display: flex;
+  align-items: center;
+  padding: 0 ${space.s12}px;
+  min-height: ${layout.itemHeight}px;
+  color: ${themeVars.accentTextColor};
+`;

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -0,0 +1,57 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import {ReactNode} from "react";
+import {space, themeVars} from "../../src/design-system";
+import ArrowRight from "../icons/react/ArrowRight";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const subTriggerClass = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${space.s8}px;
+`;
+
+const arrowClass = css`
+  flex-grow: 0;
+`;
+
+type Props = React.PropsWithChildren<{
+  trigger: ReactNode;
+  triggerRef?: React.RefObject<HTMLDivElement>;
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  disabled?: boolean;
+}>;
+
+export const ActionsMenuSubMenu: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  trigger,
+  triggerRef,
+  children,
+  disabled = false,
+}) => {
+  const {MenuPrimitive} = useActionsMenuContext();
+
+  return (
+    <MenuPrimitive.Sub open={open} onOpenChange={onOpenChange}>
+      <MenuPrimitive.SubTrigger
+        ref={triggerRef}
+        className={subTriggerClass}
+        disabled={disabled}
+        onClick={stopPropagation}
+      >
+        {trigger}
+        <div className={arrowClass}>
+          <ArrowRight
+            color={disabled ? themeVars.disabledTextColor : themeVars.iconColor}
+            containerSize={10}
+            aria-hidden
+          />
+        </div>
+      </MenuPrimitive.SubTrigger>
+      <MenuPrimitive.SubContent>{children}</MenuPrimitive.SubContent>
+    </MenuPrimitive.Sub>
+  );
+};

package/src/actions-menu/actions-menu.tsx

@@ -0,0 +1,66 @@
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css, cx} from "@linaria/core";
+import * as DropdownMenu from "../dropdown-menu";
+import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
+import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
+import {ActionsMenuProps} from "./actions-menu-props";
+import {preventDefault} from "@fibery/react/src/prevent-default";
+
+export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+const wideCss = css`
+  min-width: 320px;
+`;
+
+export const ActionsMenu = ({
+  trigger,
+  wide,
+  align = "start",
+  alignOffset,
+  side,
+  sideOffset,
+  collisionPadding,
+  open,
+  onOpenChange,
+  children,
+  portalled,
+  disabled,
+  contentStyles,
+  modal,
+  autoFocusOnClose,
+  sticky,
+}: ActionsMenuProps): JSX.Element => {
+  const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+
+  return (
+    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={DropdownMenu}>
+      <DropdownMenu.Root open={isOpen} onOpenChange={setOpen} modal={modal || false}>
+        <DropdownMenu.Trigger
+          // backward compatibility for dropdown styles
+          className={isOpen ? "actions-visible" : "actions-hidden"}
+          onClick={preventDefaultAndStopPropagation}
+          disabled={disabled}
+          asChild
+        >
+          {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          align={align}
+          sticky={sticky}
+          alignOffset={alignOffset}
+          side={side}
+          sideOffset={sideOffset}
+          className={cx(wide && wideCss, contentStyles)}
+          portalled={portalled}
+          collisionPadding={collisionPadding}
+          onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
+        >
+          <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </ActionsMenuContextProvider>
+  );
+};

package/src/actions-menu/async-actions-menu-item.tsx

@@ -0,0 +1,33 @@
+import {useState} from "react";
+import {ActionsMenuItem, ActionsMenuItemProps} from "./actions-menu-item";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+type AsyncActionsMenuItemProps = ActionsMenuItemProps & {
+  inProgressTitle?: string;
+};
+
+export const AsyncActionsMenuItem = (props: AsyncActionsMenuItemProps) => {
+  const ctx = useActionsMenuContext();
+  const [inProgress, setInProgress] = useState(false);
+
+  const inProgressTitle = props.inProgressTitle || props.children;
+
+  return (
+    <ActionsMenuItem
+      {...props}
+      loading={inProgress}
+      onSelect={async (e) => {
+        try {
+          e.preventDefault();
+          setInProgress(true);
+          await props.onSelect?.(e);
+        } finally {
+          setInProgress(false);
+          ctx.close();
+        }
+      }}
+    >
+      {inProgress ? inProgressTitle : props.children}
+    </ActionsMenuItem>
+  );
+};

package/src/actions-menu/context-actions-menu.tsx

@@ -0,0 +1,33 @@
+import _ from "lodash";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
+import * as ContextMenu from "../context-menu";
+import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
+import {ActionsMenuProps} from "./actions-menu-props";
+import {preventDefault} from "@fibery/react/src/prevent-default";
+
+export const ContextActionsMenu = ({
+  open,
+  onOpenChange = _.noop,
+  trigger,
+  children,
+  disabled,
+  autoFocusOnClose = true,
+}: ActionsMenuProps): JSX.Element => {
+  const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+
+  return (
+    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={ContextMenu}>
+      <ContextMenu.Root onOpenChange={onOpenChange}>
+        <ContextMenu.Trigger disabled={disabled} asChild>
+          {trigger}
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}>
+            <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+    </ActionsMenuContextProvider>
+  );
+};

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

@@ -0,0 +1,38 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {useMemo} from "react";
+
+type MenuPrimitive = {
+  Item: React.ElementType;
+  Label: React.ElementType;
+  Group: React.ElementType;
+  Separator: React.ElementType;
+  Sub: React.ElementType;
+  SubContent: React.ElementType;
+  SubTrigger: React.ElementType;
+};
+
+type ActionsMenuContext = {
+  close: () => void;
+  MenuPrimitive: MenuPrimitive;
+};
+
+const [Provider, useContext] = createContext<ActionsMenuContext>("ActionsMenuContext");
+
+type Props = React.PropsWithChildren<{
+  setOpen: (value: boolean) => void;
+  MenuPrimitive: MenuPrimitive;
+}>;
+
+export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, MenuPrimitive, children}) => {
+  const context = useMemo<ActionsMenuContext>(
+    () => ({
+      close: () => setOpen(false),
+      MenuPrimitive,
+    }),
+    [setOpen, MenuPrimitive]
+  );
+
+  return <Provider value={context}>{children}</Provider>;
+};
+
+export const useActionsMenuContext = useContext;

package/src/actions-menu/contexts/actions-menu-dangerous-rows.tsx

@@ -0,0 +1,31 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode, useEffect, useState} from "react";
+
+type RowKey = string | null;
+type SetRowKey = (state: RowKey) => unknown;
+
+const [ActiveDangerousRowProvider, useActiveDangerousRow] = createContext<RowKey>("ActiveDangerousRow");
+const [SetActiveDangerousRowProvider, useSetActiveDangerousRow] = createContext<SetRowKey>("SetActiveDangerousRow");
+
+type Props = {
+  open: boolean;
+  children: ReactNode;
+};
+
+export const ActionsMenuDangerousRowsProvider = ({open, children}: Props): JSX.Element => {
+  const [activeDangerousRow, setActiveDangerousRow] = useState<RowKey>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setActiveDangerousRow(null);
+    }
+  }, [open]);
+
+  return (
+    <SetActiveDangerousRowProvider value={setActiveDangerousRow}>
+      <ActiveDangerousRowProvider value={activeDangerousRow}>{children}</ActiveDangerousRowProvider>
+    </SetActiveDangerousRowProvider>
+  );
+};
+
+export {useActiveDangerousRow, useSetActiveDangerousRow};

package/src/actions-menu/index.tsx

@@ -0,0 +1,19 @@
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+import {$TSFixMe} from "../tsfixme";
+
+export {ActionsMenu} from "./actions-menu";
+export {ActionsMenuItem} from "./actions-menu-item";
+export {AsyncActionsMenuItem} from "./async-actions-menu-item";
+export {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
+export {useActionsMenuContext} from "./contexts/actions-menu-context";
+export {ActionsMenuSeparator} from "./actions-menu-separator";
+export {insertSeparators} from "./utils/insert-separators";
+
+export const ActionsMenuGroup = (props: $TSFixMe) => {
+  const {MenuPrimitive} = useActionsMenuContext();
+  return <MenuPrimitive.Group {...props} />;
+};
+export const ActionsMenuLabel = (props: $TSFixMe) => {
+  const {MenuPrimitive} = useActionsMenuContext();
+  return <MenuPrimitive.Label {...props} />;
+};

package/src/actions-menu/utils/insert-separators.tsx

@@ -0,0 +1,28 @@
+import {ActionsMenuSeparator} from "../actions-menu-separator";
+
+/**
+ * Inserts ActionMenuSeparator between sections with items
+ *
+ * If section is single ReactNode instead of array
+ * then separator won't be inserted before the node, it's now node's responsibility
+ * (e.g. it's used mostly for ButtonActions where you can't decide whether you need a separator before actual render and fetch)
+ */
+export const insertSeparators = (sections: (React.ReactNode[] | React.ReactNode)[]) => {
+  const nodes: React.ReactNode[] = [];
+
+  sections.forEach((section, idx) => {
+    if (Array.isArray(section)) {
+      const filtered = section.filter(Boolean);
+      if (nodes.length > 0 && filtered.length > 0) {
+        // it's ok to use key here as index. Separators don't have any state and sections are usually statically defined
+        nodes.push(<ActionsMenuSeparator key={`separator-${idx}`} />);
+      }
+
+      nodes.push(...filtered);
+    } else {
+      nodes.push(section);
+    }
+  });
+
+  return nodes;
+};

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/error-alert/error-alert-action.tsx

@@ -0,0 +1,9 @@
+import {Button, ButtonProps} from "../button/button";
+import {useTheme} from "../theme-provider";
+
+export const ErrorAlertAction: React.FC<ButtonProps> = (props) => {
+  const theme = useTheme();
+
+  return <Button size=":button-size/small" color={theme.textColor} {...props} />;
+};
+export type ErrorAlertActionElement = React.ReactElement<typeof ErrorAlertAction>;

package/src/error-alert/error-alert.tsx

@@ -0,0 +1,59 @@
+import {css} from "@linaria/core";
+import {IconButton} from "../button/icon-button";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+import CloseIcon from "../icons/react/Close";
+import WarningIcon from "../icons/react/WarningTriangle";
+import {useTheme} from "../theme-provider";
+import {ErrorAlertActionElement} from "./error-alert-action";
+
+const errorAlert = css`
+  background-color: ${themeVars.errorBgColor};
+  padding: ${space.s8}px ${space.s8}px ${space.s8}px ${space.s12}px;
+  min-height: ${layout.itemHeight}px;
+  border-radius: ${border.radius6}px;
+  display: flex;
+  gap: ${space.s8}px;
+  align-items: center;
+`;
+
+const infoStyle = css`
+  color: ${themeVars.textColor};
+  flex-grow: 1;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const messageStyle = css`
+  ${textStyles.regular};
+`;
+
+const descriptionStyle = css`
+  ${textStyles.small};
+`;
+
+export type ErrorAlertProps = {
+  message: string;
+  description?: React.ReactNode;
+  onClose?: () => void;
+  action?: ErrorAlertActionElement;
+};
+export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, action, onClose}: ErrorAlertProps) => {
+  const theme = useTheme();
+
+  return (
+    <div className={errorAlert}>
+      <WarningIcon color={theme.errorButtonColor} iconSize={16} containerSize={16} />
+      <div className={infoStyle}>
+        <span className={messageStyle}>{message}</span>
+        {description ? <span className={descriptionStyle}>{description}</span> : null}
+      </div>
+      {action}
+      {onClose ? (
+        <IconButton onClick={onClose} aria-label="Hide error">
+          <CloseIcon iconSize={16} />
+        </IconButton>
+      ) : null}
+    </div>
+  );
+};

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 (