@fibery/ui-kit 1.35.0 → 1.36.1

package/src/command-menu/index.tsx

@@ -0,0 +1,165 @@
+import {CommandInput, CommandItem, CommandList, CommandGroup, CommandRoot, CommandEmpty, CommandSeparator} from "cmdk";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {styled} from "@linaria/react";
+import {forwardRef, useRef, useState} from "react";
+import Search from "../icons/react/Search";
+import {css, cx} from "@linaria/core";
+import ClearInputFilled from "../icons/react/ClearInputFilled";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+
+export const CommandMenuRoot = styled(CommandRoot)`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: ${border.radius8}px;
+  background-color: ${themeVars.colorBgActionsMenu};
+`;
+
+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};
+  }
+`;
+
+export const CommandMenuInput = forwardRef<
+  React.ElementRef<typeof CommandInput>,
+  React.ComponentPropsWithoutRef<typeof CommandInput>
+>(function CommandMenuInput(props, ref) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  const [value, onValueChange] = useControllableState({
+    value: props.value,
+    defaultValue: "",
+    onChange: props.onValueChange,
+  });
+  const clearValue = () => {
+    onValueChange("");
+
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  return (
+    <div className={inputContainerCss}>
+      <Search iconSize={16} aria-hidden />
+      <CommandInput ref={composedRef} {...props} value={value} onValueChange={onValueChange} />
+      {value ? (
+        <div
+          className={css`
+            margin-left: ${space.s6}px;
+            cursor: pointer;
+          `}
+          onClick={clearValue}
+        >
+          <ClearInputFilled iconSize={16} containerSize={18} />
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export const CommandMenuList = styled(CommandList)`
+  overflow-y: scroll;
+  height: var(--cmdk-list-height);
+  max-height: 450px;
+  transition: height 100ms ease;
+  margin-top: ${space.s4}px;
+`;
+
+export const CommandMenuEmpty = styled(CommandEmpty)`
+  ${textStyles.small}
+  display: flex;
+  align-items: center;
+  padding: 0 ${space.s12}px;
+  min-height: ${layout.itemHeight}px;
+  color: ${themeVars.accentTextColor};
+`;
+
+export const CommandMenuGroup = styled(CommandGroup)`
+  [cmdk-group-heading] {
+    ${textStyles.small}
+    display: flex;
+    align-items: center;
+    padding: 0 ${space.s8}px;
+    min-height: ${layout.groupTitleHeight}px;
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+export const CommandMenuSeparator = styled(CommandSeparator)`
+  background-color: ${themeVars.actionMenuSeparatorColor};
+  height: 0.5px;
+  margin: ${space.s4}px 0;
+`;
+
+export 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;
+  border-radius: ${border.radius6}px;
+
+  &[data-selected="true"] {
+    margin: 0 4px;
+    background-color: ${themeVars.colorBgActionsMenuItemHover};
+  }
+`;
+const commandItemTitleCss = css`
+  flex: 1 1 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const CommandMenuItem = forwardRef<
+  React.ElementRef<typeof CommandItem>,
+  React.ComponentPropsWithoutRef<typeof CommandItem> & {
+    icon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+  }
+>(function CommandMenuItem({className, children, icon, rightIcon, ...props}, ref) {
+  const [showTitle, setShowTitle] = useState(false);
+
+  return (
+    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...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>
+      {rightIcon}
+    </CommandItem>
+  );
+});

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

@@ -0,0 +1,349 @@
+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";
+};
+
+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={() => 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>
+      );
+    }
+  });
+}