@fibery/ui-kit 1.29.1 → 1.29.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.29.1",
+  "version": "1.29.4",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -54,7 +54,7 @@
     "chroma-js": "2.1.2",
     "chrono-node": "^2.7.5",
     "classnames": "2.3.1",
-    "cmdk": "0.2.0",
+    "cmdk": "1.0.0",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",
@@ -110,8 +110,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.0",
-    "@fibery/babel-preset": "7.4.0"
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.6.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

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

@@ -0,0 +1,70 @@
+import {css} from "@linaria/core";
+import {AntModal} from "../antd/ant-modal";
+import {border, space, themeVars} from "../design-system";
+import {ActionsPanel} from "../actions-panel";
+import {Button} from "../button";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const modalClass = css`
+  & .ant-modal-content {
+    box-shadow: ${themeVars.shadowModal};
+    margin-left: ${space.s6}px;
+    margin-right: ${space.s6}px;
+    background-color: ${themeVars.modalContentBg};
+    border-radius: ${border.radius6}px;
+  }
+`;
+
+export type ActionsMenuConfirmationProps = {
+  message: string;
+  onCancel?: () => void;
+  onConfirm: () => void;
+};
+
+export const ActionsMenuConfirmation: React.FC<ActionsMenuConfirmationProps> = ({message, onCancel, onConfirm}) => {
+  const {showConfirmation} = useActionsMenuContext();
+
+  // TODO: use radix dialog
+  return (
+    <AntModal
+      zIndex={1001} // ant vs radix -- round 1
+      open={true}
+      closable={false}
+      footer={null}
+      maskStyle={{backgroundColor: themeVars.modalBg}}
+      className={modalClass}
+      maskClosable
+      onCancel={() => showConfirmation(null)}
+    >
+      {message}
+
+      <div
+        className={css`
+          margin-top: ${space.s24}px;
+          display: flex;
+          gap: ${space.s6}px;
+        `}
+      >
+        <ActionsPanel inline>
+          <Button
+            primary
+            onClick={() => {
+              onConfirm();
+              showConfirmation(null);
+            }}
+          >
+            Proceed
+          </Button>
+          <Button
+            onClick={() => {
+              showConfirmation(null);
+              onCancel?.();
+            }}
+          >
+            Cancel
+          </Button>
+        </ActionsPanel>
+      </div>
+    </AntModal>
+  );
+};

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

@@ -40,6 +40,8 @@ const dangerousItemCss = css`
     &[data-highlighted] {
       color: ${themeVars.danger};
       background-color: ${themeVars.colorBgActionsMenuItemDangerHover};
+
+      --actions-menu-item-icon-color: ${themeVars.danger};
     }
   }
 `;
@@ -94,7 +96,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string; loading?:
 const LeftCorner = ({Icon}: {Icon: FunctionComponent<IconBaseProps> | void}) => {
   return Icon ? (
     <div className={cornerCss}>
-      <Icon color={themeVars.iconColor} iconSize={18} />
+      <Icon color={`var(--actions-menu-item-icon-color, ${themeVars.iconColor})`} iconSize={18} />
     </div>
   ) : null;
 };

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

@@ -1,59 +1,41 @@
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+import {createContext} from "@fibery/react/src/create-context";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
 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 React, {RefObject, useEffect, useMemo, useRef, useState} from "react";
+import {
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuRoot,
+} from "../command-menu";
 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;
-  }
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
 
-  & input::placeholder {
-    color: ${themeVars.accentTextColor};
-  }
-`;
+const [ActionsMenuSubCommandMenuProvider, useActionsMenuSubCommandMenuCtx] = createContext<{
+  subMenuOpenRef: RefObject<boolean>;
+  subMenuTriggerRef: RefObject<HTMLDivElement>;
+}>("ActionsMenuSubCommandMenu");
 
 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,
-}) => {
+export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({disabled, trigger, children}) => {
   const [open, onOpenChange] = useState(false);
   const triggerRef = useRef(null);
   const openRef = useRef(false);
 
+  const ctx = useMemo(
+    () => ({
+      subMenuOpenRef: openRef,
+      subMenuTriggerRef: triggerRef,
+    }),
+    []
+  );
+
   return (
     <ActionsMenuSubMenu
       disabled={disabled}
@@ -64,126 +46,107 @@ export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps>
       }}
       trigger={trigger}
       triggerRef={triggerRef}
+      contentClassName={css`
+        &:is(&) {
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          max-height: 400px; // we use fixed height instead of --radix-dropdown-menu-content-available-height because it doesn't restore well after filtering if submenu was opened near the bottom of viewport. https://the.fibery.io/SoftDev/bug/It's-impossible-to-place-cursor-in-search-input-in-Existing-views-and-Convert-to-popup-10357/comment=14877
+        }
+      `}
     >
-      <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>
+      <ActionsMenuSubCommandMenuProvider value={ctx}>{children}</ActionsMenuSubCommandMenuProvider>
     </ActionsMenuSubMenu>
   );
 };
 
-type ActionsMenuSubCommandMenuInputProps = {
-  placeholder?: string;
-  autoFocus?: boolean;
-};
-export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuInputProps> = ({
-  placeholder,
-  autoFocus = true,
+export const ActionsMenuSubCommandMenuRoot: React.FC<React.ComponentPropsWithoutRef<typeof CommandMenuRoot>> = ({
+  className,
+  onClick,
+  onBlur,
+  ...props
 }) => {
+  const {subMenuOpenRef, subMenuTriggerRef} = useActionsMenuSubCommandMenuCtx();
+
   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();
+    <CommandMenuRoot
+      className={cx(
+        css`
+          &:is(&) {
+            width: 250px;
           }
-        }}
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-      />
-    </div>
+        `,
+        className
+      )}
+      onClick={composeEventHandlers(onClick, stopPropagation)}
+      onBlur={composeEventHandlers(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
+         *
+         * setTimeout is needed for firefox https://the.fibery.io/SoftDev/bug/Automatically-place-the-cursor-in-the-search-input-in-the-list-of-spaces-in-'Move-to'-option-10524
+         *
+         * We use subMenuOpenRef here because react state will be updated only on next render. Alternatively we can try to use flushSync
+         */
+        if (
+          subMenuOpenRef.current &&
+          e.target.hasAttribute("cmdk-input") &&
+          e.relatedTarget === subMenuTriggerRef.current
+        ) {
+          setTimeout(() => e.target.focus(), 0);
+        }
+      })}
+      {...props}
+    />
   );
 };
 
-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;
+type ActionsMenuSubCommandMenuInputProps = React.ComponentPropsWithoutRef<typeof CommandMenuInput>;
+export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuInputProps> = ({
+  autoFocus = true,
+  onKeyDown,
+  ...otherProps
+}) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
-  &[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;
-`;
+  useEffect(() => {
+    // html autofocus doesn't work reliably in Context Menu
+    if (autoFocus) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [autoFocus]);
 
-type ActionsMenuSubCommandMenuItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> & {
-  icon?: React.ReactNode;
+  return (
+    <CommandMenuInput
+      ref={inputRef}
+      onKeyDown={(e) => {
+        // prevent submenu from closing if input is not empty
+        if ((e.target as HTMLInputElement).value.length > 0 && e.key === "ArrowLeft") {
+          e.stopPropagation();
+        }
+        onKeyDown?.(e);
+      }}
+      autoFocus={autoFocus}
+      {...otherProps}
+    />
+  );
 };
 
-export const ActionsMenuSubCommandMenuItem: React.FC<ActionsMenuSubCommandMenuItemProps> = ({
+export const ActionsMenuSubCommandMenuList = CommandMenuList;
+
+export const ActionsMenuSubCommandMenuItem: React.FC<React.ComponentPropsWithoutRef<typeof CommandMenuItem>> = ({
   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>
-  );
+  return <CommandMenuItem onSelect={onSelectItem} {...props}></CommandMenuItem>;
 };
 
-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};
-`;
+export const ActionsMenuSubCommandMenuEmpty = CommandMenuEmpty;
+
+export const ActionsMenuSubCommandMenuGroup = CommandMenuGroup;

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

@@ -22,6 +22,7 @@ type Props = React.PropsWithChildren<{
   open?: boolean;
   onOpenChange?: (v: boolean) => void;
   disabled?: boolean;
+  contentClassName?: string;
 }>;
 
 export const ActionsMenuSubMenu: React.FC<Props> = ({
@@ -31,6 +32,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   triggerRef,
   children,
   disabled = false,
+  contentClassName,
 }) => {
   const {MenuPrimitive} = useActionsMenuContext();
 
@@ -51,7 +53,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
           />
         </div>
       </MenuPrimitive.SubTrigger>
-      <MenuPrimitive.SubContent>{children}</MenuPrimitive.SubContent>
+      <MenuPrimitive.SubContent className={contentClassName}>{children}</MenuPrimitive.SubContent>
     </MenuPrimitive.Sub>
   );
 };

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

@@ -5,6 +5,8 @@ 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";
+import {useState} from "react";
+import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
 
 export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
   event.preventDefault();
@@ -35,9 +37,10 @@ export const ActionsMenu = ({
   sticky,
 }: ActionsMenuProps): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+  const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (
-    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={DropdownMenu}>
+    <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={DropdownMenu}>
       <DropdownMenu.Root open={isOpen} onOpenChange={setOpen} modal={modal || false}>
         <DropdownMenu.Trigger
           // backward compatibility for dropdown styles
@@ -63,6 +66,8 @@ export const ActionsMenu = ({
           <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
+
+      {confirmation ? <ActionsMenuConfirmation {...confirmation} /> : null}
     </ActionsMenuContextProvider>
   );
 };

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

@@ -5,6 +5,8 @@ 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";
+import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
+import {useState} from "react";
 
 export const ContextActionsMenu = ({
   open,
@@ -15,9 +17,10 @@ export const ContextActionsMenu = ({
   autoFocusOnClose = true,
 }: ActionsMenuProps): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+  const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (
-    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={ContextMenu}>
+    <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={ContextMenu}>
       <ContextMenu.Root onOpenChange={onOpenChange}>
         <ContextMenu.Trigger disabled={disabled} asChild>
           {trigger}
@@ -28,6 +31,7 @@ export const ContextActionsMenu = ({
           </ContextMenu.Content>
         </ContextMenu.Portal>
       </ContextMenu.Root>
+      {confirmation ? <ActionsMenuConfirmation {...confirmation} /> : null}
     </ActionsMenuContextProvider>
   );
 };

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

@@ -1,5 +1,6 @@
 import {createContext} from "@fibery/react/src/create-context";
 import {useMemo} from "react";
+import {ActionsMenuConfirmationProps} from "../actions-menu-confirmation";
 
 type MenuPrimitive = {
   Item: React.ElementType;
@@ -13,6 +14,7 @@ type MenuPrimitive = {
 
 type ActionsMenuContext = {
   close: () => void;
+  showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
 };
 
@@ -20,16 +22,18 @@ const [Provider, useContext] = createContext<ActionsMenuContext>("ActionsMenuCon
 
 type Props = React.PropsWithChildren<{
   setOpen: (value: boolean) => void;
+  showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
 }>;
 
-export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, MenuPrimitive, children}) => {
+export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, showConfirmation, MenuPrimitive, children}) => {
   const context = useMemo<ActionsMenuContext>(
     () => ({
       close: () => setOpen(false),
       MenuPrimitive,
+      showConfirmation,
     }),
-    [setOpen, MenuPrimitive]
+    [MenuPrimitive, showConfirmation, setOpen]
   );
 
   return <Provider value={context}>{children}</Provider>;

package/src/button/button-base.tsx

@@ -105,7 +105,7 @@ type StyledProps = {
   borderWidth: number;
 };
 
-const StyledButtonBase = styled.button<StyledProps>`
+export const StyledButtonBase = styled.button<StyledProps>`
   display: block;
   box-sizing: border-box;
   font-weight: ${fontWeight.medium};

package/src/button/button.tsx

@@ -31,7 +31,7 @@ const FontSizes = {
 } as const;
 
 const HorizontalPaddings = {
-  ":button-size/super-small": 4,
+  ":button-size/super-small": 6,
   ":button-size/smaller": 8,
   ":button-size/small": 8,
   ":button-size/normal": 12,