@fibery/ui-kit 1.36.0 → 1.36.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fibery/ui-kit
 
+## 1.36.2
+
+### Patch Changes
+
+- 651e6f2: add noColor option to TypeBadge
+- Updated dependencies [7976d88]
+  - @fibery/helpers@1.3.3
+  - @fibery/react@1.4.4
+
+## 1.36.1
+
+### Patch Changes
+
+- Updated dependencies [ec46f77]
+  - @fibery/helpers@1.3.2
+  - @fibery/react@1.4.3
+
 ## 1.36.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.36.0",
+  "version": "1.36.2",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -44,8 +44,8 @@
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
     "@fibery/emoji-data": "2.6.1",
-    "@fibery/helpers": "1.3.1",
-    "@fibery/react": "1.4.2"
+    "@fibery/helpers": "1.3.3",
+    "@fibery/react": "1.4.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/scripts/generate-icons.mjs

@@ -82,7 +82,21 @@ for (const iconPath of iconPaths) {
           const {class: className, xmlns, ...rest} = node.properties ?? {};
           return {
             ...node,
-            properties: Object.fromEntries(Object.entries(rest).map(([key, value]) => [_.camelCase(key), value])),
+            properties: Object.fromEntries(
+              Object.entries(rest).map(([key, value]) => {
+                if (key === "style") {
+                  const style = {};
+                  value.split(";").forEach((styleItem) => {
+                    const [styleKey, styleValue] = styleItem.split(":").map((s) => s.trim());
+                    if (styleKey && styleValue) {
+                      style[_.camelCase(styleKey)] = styleValue;
+                    }
+                  });
+                  return [_.camelCase(key), style];
+                }
+                return [_.camelCase(key), value];
+              })
+            ),
           };
         }),
         name: _.kebabCase(name),

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

@@ -1,15 +1,15 @@
 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 CheckedIcon from "../icons/react/Checked";
 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";
+import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
 
 const hiddenTextCss = css`
   visibility: hidden;

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

@@ -10,6 +10,7 @@ import {
   CommandMenuItem,
   CommandMenuList,
   CommandMenuRoot,
+  CommandMenuSeparator,
 } from "../command-menu";
 import {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
@@ -159,3 +160,5 @@ export const ActionsMenuSubCommandMenuItem: React.FC<React.ComponentPropsWithout
 export const ActionsMenuSubCommandMenuEmpty = CommandMenuEmpty;
 
 export const ActionsMenuSubCommandMenuGroup = CommandMenuGroup;
+
+export const ActionsMenuSubCommandMenuSeparator = CommandMenuSeparator;

package/src/avatar.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import _ from "lodash";
-import {CSSProperties, FC, memo, useCallback, useState} from "react";
+import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
 import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
@@ -82,6 +82,7 @@ const EMOJI_BY_BADGE = {
   vacation: "🌴",
   dayon: "💻",
 };
+
 function getAvatarUrl(url: string, size: number) {
   if (!url) {
     return url;
@@ -92,7 +93,17 @@ function getAvatarUrl(url: string, size: number) {
   return urlObject.toString();
 }
 
-interface AvatarImageProps {
+/**
+ * This triggers a network request if the image is not cached.
+ * Avoid using in render or performance-critical code.
+ */
+const isImageCached = (src: string): boolean => {
+  const image = new Image();
+  image.src = src;
+  return image.complete && image.naturalWidth !== 0;
+};
+
+type AvatarImageProps = {
   size: number;
   containerSize?: number;
   title?: string;
@@ -102,11 +113,8 @@ interface AvatarImageProps {
   backgroundColor?: string;
   disableNativeTitle?: boolean;
   placeholder?: React.ReactNode;
-}
-/**
- *
- * @type {React.NamedExoticComponent<{readonly badges?: *, readonly backgroundColor?: *, readonly size?: *, readonly avatarUrl?: *, readonly disableNativeTitle?: *, readonly title?: *, readonly radius?: *, readonly containerSize?: *}>}
- */
+};
+
 export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   size,
   containerSize,
@@ -118,7 +126,13 @@ export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   disableNativeTitle = false,
   placeholder,
 }) {
-  const [fetchState, setFetchState] = useState(":fetch-state/start");
+  const initialFetchState = useMemo(() => {
+    if (avatarUrl && isImageCached(avatarUrl)) {
+      return ":fetch-state/success";
+    }
+    return ":fetch-state/start";
+  }, [avatarUrl]);
+  const [fetchState, setFetchState] = useState(initialFetchState);
   const onError = useCallback(() => {
     setFetchState(":fetch-state/error");
   }, []);
@@ -193,12 +207,12 @@ const getAvatarPlaceholderStyle = ({
   borderRadius: radius ?? "50%",
 });
 
-interface AvatarPlaceholderProps {
+type AvatarPlaceholderProps = {
   size: number;
   title?: string;
   radius?: number;
   backgroundColor?: string;
-}
+};
 
 export const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
   const features = useFeatures<{enableFibermojiAvatars: boolean}>();
@@ -237,10 +251,10 @@ const getNullUserAvatarStyle = ({size, containerSize}: {size: number; containerS
 
 const magicCoefficient = 4.5;
 
-interface NullUserAvatarProps {
+type NullUserAvatarProps = {
   size: number;
   containerSize: number;
-}
+};
 
 export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
   const dashSize = (Math.PI * size) / magicCoefficient / 12;

package/src/beta-badge.tsx

@@ -0,0 +1,17 @@
+import {css} from "@linaria/core";
+import {fontWeight, space, textStyles, themeVars} from "./design-system";
+
+const betaBadgeStyle = css`
+  ${textStyles.heading7}
+  text-transform: none;
+  font-weight: ${fontWeight.medium};
+  display: inline-block;
+  padding: ${space.s2}px 4.5px ${space.s2}px 5px;
+  color: ${themeVars.colorAI};
+  background-color: ${themeVars.colorBgAI};
+  vertical-align: text-top;
+  border-radius: 4px;
+`;
+
+type Props = {children: React.ReactNode};
+export const BetaBadge: React.FC<Props> = ({children}) => <span className={betaBadgeStyle}>{children}</span>;

package/src/button/base-button.tsx

@@ -21,7 +21,7 @@ export const baseButton = css`
   cursor: pointer;
   user-select: none;
 
-  transition-property: border, background-color, color, opacity;
+  transition-property: border, background-color, color, opacity, box-shadow;
   transition-duration: 0.15s;
 
   color: var(--fibery-button-text-color);
@@ -29,7 +29,7 @@ export const baseButton = css`
 
   background-color: var(--fibery-button-color);
 
-  box-shadow: inset 0 0 0 0.5px var(--fibery-button-border-color);
+  box-shadow: 0 0 0 0.5px var(--fibery-button-border-color);
 
   &:hover:not(:disabled) {
     background-color: var(--fibery-button-hover-color);
@@ -90,7 +90,7 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
 
   if (variantMod === "Outline") {
     borderColors = {
-      "--fibery-button-border-color": themeVars[`colorBorderButton${variantMod}${colorMod}Default` as const],
+      "--fibery-button-border-color": themeVars[`colorBorderButton${variantMod}${colorMod}Default`],
     };
   }
 

package/src/command-menu/index.tsx

@@ -1,12 +1,12 @@
-import {CommandInput, CommandItem, CommandList, CommandGroup, CommandRoot, CommandEmpty, CommandSeparator} from "cmdk";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
+import {CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator} from "cmdk";
 import {forwardRef, useRef, useState} from "react";
-import Search from "../icons/react/Search";
-import {css, cx} from "@linaria/core";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
 import ClearInputFilled from "../icons/react/ClearInputFilled";
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import Search from "../icons/react/Search";
 
 export const CommandMenuRoot = styled(CommandRoot)`
   display: flex;
@@ -101,7 +101,7 @@ export const CommandMenuGroup = styled(CommandGroup)`
     ${textStyles.small}
     display: flex;
     align-items: center;
-    padding: 0 ${space.s8}px;
+    padding: 0 ${space.s12}px;
     min-height: ${layout.groupTitleHeight}px;
     color: ${themeVars.accentTextColor};
   }
@@ -113,11 +113,11 @@ export const CommandMenuSeparator = styled(CommandSeparator)`
   margin: ${space.s4}px 0;
 `;
 
-const commandItemCss = css`
+export const commandItemCss = css`
   display: flex;
   align-items: center;
   gap: ${space.s6}px;
-  padding: 0 ${space.s12}px;
+  padding: 0 ${space.s8}px;
   cursor: pointer;
   min-height: ${layout.menuItemHeight}px;
   margin: 0 ${space.s4}px;
@@ -128,6 +128,11 @@ const commandItemCss = css`
     background-color: ${themeVars.colorBgActionsMenuItemHover};
   }
 `;
+
+const disabledItemCss = css`
+  cursor: not-allowed;
+`;
+
 const commandItemTitleCss = css`
   flex: 1 1 0;
   white-space: nowrap;
@@ -135,17 +140,6 @@ const commandItemTitleCss = css`
   overflow: hidden;
 `;
 
-export const CommandExpressionSelectItem = forwardRef<
-  React.ElementRef<typeof CommandItem>,
-  React.ComponentPropsWithoutRef<typeof CommandItem>
->(function CommandMenuItem({className, children, ...props}, ref) {
-  return (
-    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
-      {children}
-    </CommandItem>
-  );
-});
-
 export const CommandMenuItem = forwardRef<
   React.ElementRef<typeof CommandItem>,
   React.ComponentPropsWithoutRef<typeof CommandItem> & {
@@ -156,7 +150,7 @@ export const CommandMenuItem = forwardRef<
   const [showTitle, setShowTitle] = useState(false);
 
   return (
-    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+    <CommandItem ref={ref} className={cx(commandItemCss, className, props.disabled && disabledItemCss)} {...props}>
       {icon}
       <span
         title={showTitle ? (children as string) : ""}

package/src/command-menu/nested-command-menu.tsx

@@ -0,0 +1,356 @@
+import {CommandItem} from "cmdk";
+import React, {forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "../design-system";
+import Back from "../icons/react/Back";
+import {
+  commandItemCss,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuRoot,
+  CommandMenuSeparator,
+} from "./index";
+import cn from "classnames";
+import {Tooltip} from "../tooltip";
+import {IconButton} from "../button/icon-button";
+import ArrowRight from "../icons/react/ArrowRight";
+
+const selectedItemClassName = css`
+  background-color: ${themeVars.colorBgListItemGeneralSelected};
+
+  &[data-selected="true"] {
+    background-color: ${themeVars.colorBgListItemGeneralSelectedHover};
+  }
+`;
+
+const arrowWrapperClassName = css`
+  flex-grow: 0;
+`;
+
+export type NestedMenuItem<T> = {
+  key: string;
+  title?: string;
+  icon?: ReactNode;
+  value: T;
+  groupItems?: Array<NestedMenuItem<T>>;
+  filterPlaceholder?: string;
+  emptyMessage?: string;
+  calculateNestedItems?: () => Array<NestedMenuItem<T>>;
+  kind?: "separator" | "group";
+  showNestedItemsOnClick?: boolean;
+};
+
+export type NestedMenuStack<T> = Array<{
+  item: NestedMenuItem<T>;
+  nestedItems: NestedMenuItem<T>[];
+}>;
+
+type Props<T> = {
+  defaultStack?: NestedMenuStack<T>;
+  defaultValue?: string;
+  rootItems: Array<NestedMenuItem<T>>;
+  onChange: (item: NestedMenuItem<T>) => void;
+  filterPlaceholder: string;
+  emptyMessage: string;
+  getArrowTooltipMessage: (item: NestedMenuItem<T>) => string;
+  maxDepthLevel?: number;
+};
+
+const NestedCommandMenuItem = forwardRef<
+  React.ElementRef<typeof CommandItem>,
+  React.ComponentPropsWithoutRef<typeof CommandItem>
+>(function CommandMenuItem({className, children, ...props}, ref) {
+  return (
+    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+      {children}
+    </CommandItem>
+  );
+});
+
+function isItemMatchFilter<T>(item: NestedMenuItem<T>, lowerCaseFilterValue: string) {
+  return item.title?.toLowerCase()?.includes(lowerCaseFilterValue);
+}
+
+export function NestedCommandMenu<T>({
+  defaultStack,
+  defaultValue,
+  rootItems,
+  onChange,
+  filterPlaceholder,
+  emptyMessage,
+  getArrowTooltipMessage,
+  maxDepthLevel = Number.MAX_VALUE,
+}: Props<T>) {
+  const [stack, setStack] = React.useState<NestedMenuStack<T>>(defaultStack || []);
+  const currentStackItem = stack[stack.length - 1];
+
+  const currentItems = currentStackItem?.nestedItems || rootItems;
+
+  const onGoToRelation = useCallback(
+    (key: string) => {
+      const item = currentItems.find((item) => item.key === key)!;
+      setStack((items) => [...items, {item, nestedItems: item.calculateNestedItems?.() || []}]);
+      setFilter("");
+    },
+    [currentItems]
+  );
+
+  const onCmdkItemSelect = useCallback(
+    (item: NestedMenuItem<T>) => {
+      onChange(item);
+    },
+    [onChange]
+  );
+
+  const [filter, setFilter] = useState("");
+
+  const filteredOptions = useMemo(() => {
+    const lowerCaseFilterValue = filter.toLowerCase();
+    if (!filter) {
+      return currentItems;
+    }
+
+    return currentItems
+      .map((item) => {
+        if (item.kind === "group") {
+          const groupItems = (item.groupItems || []).filter((groupItem) =>
+            isItemMatchFilter(groupItem, lowerCaseFilterValue)
+          );
+
+          return groupItems.length > 0 ? {...item, groupItems} : null;
+        }
+
+        return isItemMatchFilter(item, lowerCaseFilterValue) ? item : null;
+      })
+      .filter(Boolean) as Array<NestedMenuItem<T>>;
+  }, [filter, currentItems]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [stack]);
+
+  const menuListRef = useRef<HTMLDivElement>(null);
+  const scrollToTop = useCallback(() => {
+    menuListRef.current?.scrollTo({top: 0, behavior: "instant"});
+  }, []);
+  useEffect(() => {
+    scrollToTop();
+  }, [stack, scrollToTop]);
+
+  const [value, setValue] = React.useState(defaultValue);
+
+  return (
+    <>
+      {stack.length > 0 && (
+        <>
+          <div
+            className={css`
+              cursor: pointer;
+
+              &:hover {
+                background-color: ${themeVars.colorBgActionsMenuItemHover};
+              }
+
+              display: flex;
+              padding: ${space.s6}px ${space.s8}px;
+              border-radius: ${border.radius6}px;
+              margin: 0 ${space.s4}px;
+              align-items: center;
+              gap: ${space.s8}px;
+            `}
+            onClick={() => {
+              setStack((relations) => relations.slice(0, -1));
+              setFilter("");
+            }}
+          >
+            <div>
+              <Back iconSize={16} aria-hidden />
+            </div>
+            <div>
+              Back
+              {stack.length > 1 ? ` to ${stack[stack.length - 2].item.title}` : ""}
+            </div>
+          </div>
+          <div
+            className={css`
+              background-color: ${themeVars.separatorColor};
+              height: 1px;
+              margin-top: ${space.s4}px;
+            `}
+          />
+        </>
+      )}
+
+      <CommandMenuRoot
+        shouldFilter={false}
+        value={value}
+        onValueChange={setValue}
+        onKeyDown={(e) => {
+          if (e.key === "Escape" || (e.key === "Backspace" && !filter && stack.length > 0)) {
+            e.preventDefault();
+            setStack((relations) => relations.slice(0, -1));
+          } else if (e.key === "ArrowRight") {
+            const currentItem = currentItems.find((item) => item.key === value);
+            if (currentItem && currentItem.calculateNestedItems) {
+              e.preventDefault();
+              onGoToRelation(currentItem.key);
+            }
+          } else if (e.key === "ArrowLeft" && stack.length > 0) {
+            e.preventDefault();
+            setStack((relations) => relations.slice(0, -1));
+          }
+        }}
+      >
+        <CommandMenuInput
+          ref={inputRef}
+          value={filter}
+          onValueChange={setFilter}
+          placeholder={currentStackItem?.item?.filterPlaceholder || filterPlaceholder}
+        />
+        <CommandMenuList
+          ref={menuListRef}
+          className={css`
+            && {
+              transition: none;
+              max-height: 300px;
+            }
+          `}
+        >
+          <CommandMenuEmpty>{currentStackItem?.item?.emptyMessage || emptyMessage}</CommandMenuEmpty>
+          {renderLevel({
+            options: filteredOptions,
+            stack,
+            maxDepthLevel,
+            onCmdkItemSelect,
+            onGoToRelation,
+            getArrowTooltipMessage,
+            defaultValue,
+          })}
+        </CommandMenuList>
+      </CommandMenuRoot>
+    </>
+  );
+}
+
+function renderLevel<T>({
+  options,
+  defaultValue,
+  stack,
+  maxDepthLevel,
+  onCmdkItemSelect,
+  onGoToRelation,
+  getArrowTooltipMessage,
+}: {
+  options: Array<NestedMenuItem<T>>;
+  defaultValue?: string;
+  stack: NestedMenuStack<T>;
+  maxDepthLevel: number;
+  onCmdkItemSelect: (item: NestedMenuItem<T>) => void;
+  onGoToRelation: (key: string) => void;
+  getArrowTooltipMessage: (item: NestedMenuItem<T>) => string;
+}) {
+  return options.map((item) => {
+    if (item.kind === "separator") {
+      return <CommandMenuSeparator key={item.key} />;
+    }
+
+    if (item.kind === "group") {
+      const nestedItems = item.groupItems || [];
+      if (nestedItems.length > 0) {
+        return (
+          <CommandMenuGroup heading={item.title} key={item.key}>
+            {renderLevel({
+              options: nestedItems,
+              defaultValue,
+              stack,
+              maxDepthLevel,
+              onCmdkItemSelect,
+              onGoToRelation,
+              getArrowTooltipMessage,
+            })}
+          </CommandMenuGroup>
+        );
+      }
+
+      return null;
+    }
+
+    const isSelected = item.key === defaultValue;
+    if (item.calculateNestedItems && stack.length < maxDepthLevel) {
+      return (
+        <NestedCommandMenuItem
+          key={item.key}
+          value={item.key}
+          onSelect={() => {
+            if (item.showNestedItemsOnClick) {
+              onGoToRelation(item.key);
+            } else {
+              onCmdkItemSelect(item);
+            }
+          }}
+          asChild
+          className={cn(
+            css`
+              padding-right: 0;
+            `,
+            isSelected ? selectedItemClassName : undefined
+          )}
+        >
+          <div
+            className={css`
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: ${space.s6}px;
+
+              &[data-selected="true"]:has(.${arrowWrapperClassName}:hover) {
+                background-color: transparent;
+              }
+            `}
+          >
+            {item.icon}
+            <div
+              className={css`
+                flex: 1;
+              `}
+            >
+              {item.title}
+            </div>
+            <div className={arrowWrapperClassName}>
+              <Tooltip title={getArrowTooltipMessage(item)}>
+                <IconButton
+                  size={"medium"}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onGoToRelation(item.key);
+                  }}
+                >
+                  <ArrowRight color={themeVars.iconColor} containerSize={10} aria-hidden />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </NestedCommandMenuItem>
+      );
+    } else {
+      return (
+        <CommandMenuItem
+          key={item.key}
+          value={item.key}
+          onSelect={() => onCmdkItemSelect(item)}
+          icon={item.icon}
+          className={isSelected ? selectedItemClassName : undefined}
+        >
+          {item.title}
+        </CommandMenuItem>
+      );
+    }
+  });
+}

package/src/context-menu/index.tsx

@@ -18,7 +18,7 @@ export const rowItemStyles = {
   minHeight: layout.menuItemHeight,
   outline: "none",
   borderRadius: border.radius0,
-  padding: `0px ${space.s12}px`,
+  padding: `0px ${space.s8}px`,
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
@@ -101,8 +101,8 @@ export const Item = styled(ContextMenuPrimitive.Item)`
 
 export const Separator = styled(ContextMenuPrimitive.Separator)`
   ${{
-    backgroundColor: themeVars.separatorColor,
-    height: 1,
+    backgroundColor: themeVars.actionMenuSeparatorColor,
+    height: 0.5,
     margin: `${space.s4}px 0`,
   }}
 `;