@fibery/ui-kit 1.26.3 → 1.26.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.26.3",
+  "version": "1.26.5",
   "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",
@@ -103,8 +104,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/design-system.ts

@@ -377,7 +377,9 @@ export const themeColors = {
   // :hover
   colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
   // :focus, :focus:hover
-  colorBgObjectEditorSeparator: [slate.slate4, slateDark.slate4],
+  colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
+  colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
+  colorBgObjectEditorSeparatorButton: [slate.slate4, slateDark.slate4],
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],

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/select/select-in-popover.tsx

@@ -28,8 +28,10 @@ import {
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 
 const offset = [0, space.s4] as [number, number];
-const popupClassName = css`
+const popupContainerClassName = css`
   z-index: 1050;
+`;
+const popupClassName = css`
   max-width: 360px;
   padding-top: ${space.s8}px;
   padding-bottom: ${space.s4}px;
@@ -277,6 +279,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       {Boolean(triggerElement) && (
         <Popup
           offset={offset}
+          popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
           placement="bottom-start"
           renderInPortal={renderInPortal}