@meta-1/design 0.0.199 → 0.0.200

package/src/components/uix/combo-select/index.tsx

@@ -6,10 +6,10 @@ import get from "lodash/get";
 import remove from "lodash/remove";
 
 import { Button } from "@meta-1/design/components/ui/button";
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@meta-1/design/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@meta-1/design/components/ui/popover";
 import { Skeleton } from "@meta-1/design/components/ui/skeleton";
+import { Command, type CommandItemProps } from "@meta-1/design/components/uix/command";
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { Popover } from "@meta-1/design/components/uix/popover";
 import { Spin } from "@meta-1/design/components/uix/spin";
 import { useSize } from "@meta-1/design/hooks";
 import { cn } from "@meta-1/design/lib";
@@ -63,8 +63,8 @@ function SelectedLabels({
           // biome-ignore lint/suspicious/noExplicitAny: <options>
           const label = options.find((option: any) => String(option.value) === v)?.label || v;
           return label ? (
-            <div className="my-0.5 mr-1 rounded bg-secondary px-2 py-[3px] text-sm" key={v}>
-              {label}
+            <div className="my-0.5 mr-1 max-w-[200px] rounded bg-secondary px-2 py-[3px] text-sm" key={v}>
+              <span className="block truncate">{label}</span>
             </div>
           ) : null;
         })}
@@ -118,70 +118,6 @@ function handleSelect<Data>(
   }
 }
 
-function ComboSelectCommandList<Data>({
-  loading,
-  options,
-  selectedValues,
-  multiple,
-  limit,
-  setSelectedValues,
-  setValueState,
-  onChange,
-  value,
-  setOpen,
-}: {
-  loading: boolean;
-  options: ComboSelectOptionProps<Data>[];
-  selectedValues: string[];
-  multiple: boolean;
-  limit: number;
-  setSelectedValues: (v: string[]) => void;
-  setValueState: (v: string) => void;
-  onChange?: (v: ComboSelectValueType | ComboSelectValueType[]) => void;
-  onSearch?: (v: string) => void;
-  value: string | string[];
-  setOpen: (v: boolean) => void;
-}) {
-  return (
-    <CommandList>
-      {loading
-        ? null
-        : options.map((option) => {
-            const optionValueStr = String(option.value);
-            const isSelected = selectedValues.includes(optionValueStr);
-            return (
-              <CommandItem
-                key={option.value}
-                onSelect={() =>
-                  handleSelect(
-                    optionValueStr,
-                    multiple,
-                    isSelected,
-                    selectedValues,
-                    limit,
-                    setSelectedValues,
-                    setValueState,
-                    onChange!,
-                    setOpen,
-                    options,
-                  )
-                }
-                value={optionValueStr}
-              >
-                {multiple ? <Checkbox checked={isSelected} /> : null}
-                {option.label}
-                {multiple ? null : (
-                  <CheckIcon
-                    className={cn("ml-auto h-4 w-4", value === optionValueStr ? "opacity-100" : "opacity-0")}
-                  />
-                )}
-              </CommandItem>
-            );
-          })}
-    </CommandList>
-  );
-}
-
 type ComboSelectButtonProps<Data> = {
   multiple: boolean;
   selectedValues: string[];
@@ -223,9 +159,9 @@ const ComboSelectButton = forwardRef(
     return (
       <Button
         className={cn(
-          "group h-9 min-w-[150px] items-center justify-between px-2 py-1 align-middle hover:bg-secondary/40",
+          "group h-select min-w-[150px] items-center justify-between rounded-select px-select align-middle transition-none hover:bg-secondary/40",
           multiple ? "border-dashed" : null,
-          multiple && selectedValues && selectedValues.length ? "h-auto" : null,
+          multiple && selectedValues && selectedValues.length ? "h-auto p-0.5" : null,
           className,
         )}
         disabled={disabled}
@@ -234,13 +170,18 @@ const ComboSelectButton = forwardRef(
         type="button"
         variant="outline"
       >
-        <div className={cn("flex min-h-7.5 flex-1 flex-wrap items-center justify-start", multiple ? "-my-0.5" : null)}>
+        <div
+          className={cn(
+            "flex min-h-7.5 flex-1 flex-wrap items-center justify-start overflow-hidden",
+            multiple ? "-my-0.5" : null,
+          )}
+        >
           {initLoading ? (
             <Skeleton className="h-6 w-full min-w-20" />
           ) : multiple ? (
             <SelectedLabels options={options} placeholderDom={placeholderDom} selectedValues={selectedValues} />
           ) : (
-            <span>
+            <span className="truncate">
               {valueState
                 ? options.find((option) => String(option.value) === valueState)?.label || valueState
                 : placeholderDom}
@@ -329,64 +270,93 @@ export function ComboSelect<Data = unknown>(props: ComboSelectProps<Data>) {
 
   const placeholderDom = <span className="font-normal text-muted-foreground">{placeholder}</span>;
 
+  const commandItems = useMemo<CommandItemProps[]>(() => {
+    if (loading) {
+      return [];
+    }
+    return options.map((option) => {
+      const optionValueStr = String(option.value);
+      const isSelected = selectedValues.includes(optionValueStr);
+      const currentValue = valueState || selectedValues;
+      const isCurrentValue = Array.isArray(currentValue)
+        ? currentValue.includes(optionValueStr)
+        : currentValue === optionValueStr;
+
+      return {
+        value: optionValueStr,
+        label: (
+          <>
+            {multiple ? <Checkbox checked={isSelected} /> : null}
+            {option.label}
+            {multiple ? null : (
+              <CheckIcon className={cn("ml-auto h-4 w-4", isCurrentValue ? "opacity-100" : "opacity-0")} />
+            )}
+          </>
+        ),
+        onSelect: () => {
+          handleSelect(
+            optionValueStr,
+            multiple,
+            isSelected,
+            selectedValues,
+            limit,
+            setSelectedValues,
+            setValueState,
+            onChange!,
+            setOpen,
+            options,
+          );
+        },
+      };
+    });
+  }, [loading, options, selectedValues, multiple, valueState, limit, onChange, setOpen]);
+
+  const content = (
+    <Command
+      className="border-none"
+      empty={empty}
+      filter={(value, search) =>
+        filter(
+          value,
+          search,
+          options.find((option) => String(option.value) === value),
+        )
+          ? 1
+          : 0
+      }
+      items={commandItems}
+      loading={loading}
+      loadingContent={
+        <div className="px-2">
+          <Skeleton className="my-2 h-6 w-full" />
+          <Skeleton className="my-2 h-6 w-full" />
+          <Skeleton className="my-2 h-6 w-full" />
+        </div>
+      }
+      searchInputProps={search ? { className: "h-9", onValueChange: onSearch } : undefined}
+      searchPlaceholder={searchPlaceholder}
+      showSearch={search}
+    />
+  );
   return (
-    <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger asChild disabled={disabled}>
-        <ComboSelectButton
-          className={className}
-          disabled={disabled}
-          initLoading={initLoading}
-          loading={loading}
-          multiple={multiple}
-          onChange={onChange}
-          onSearch={onSearch}
-          options={options}
-          placeholderDom={placeholderDom}
-          ref={containerRef}
-          selectedValues={selectedValues}
-          setSelectedValues={setSelectedValues}
-          setValueState={setValueState}
-          showClear={showClear}
-          valueState={valueState}
-        />
-      </PopoverTrigger>
-      <PopoverContent className="p-0" style={{ width: size.width }}>
-        <Command
-          filter={(value, search) =>
-            filter(
-              value,
-              search,
-              options.find((option) => String(option.value) === value),
-            )
-              ? 1
-              : 0
-          }
-        >
-          {search ? <CommandInput className="h-9" onValueChange={onSearch} placeholder={searchPlaceholder} /> : null}
-          {loading ? (
-            <div className="px-2">
-              <Skeleton className="my-2 h-6 w-full" />
-              <Skeleton className="my-2 h-6 w-full" />
-              <Skeleton className="my-2 h-6 w-full" />
-            </div>
-          ) : (
-            <CommandEmpty>{empty}</CommandEmpty>
-          )}
-          <ComboSelectCommandList
-            limit={limit}
-            loading={loading}
-            multiple={multiple}
-            onChange={onChange}
-            onSearch={onSearch}
-            options={options}
-            selectedValues={selectedValues}
-            setOpen={setOpen}
-            setSelectedValues={setSelectedValues}
-            setValueState={setValueState}
-            value={valueState || selectedValues}
-          />
-        </Command>
-      </PopoverContent>
+    <Popover asChild className="p-0" content={content} onOpenChange={setOpen} open={open} style={{ width: size.width }}>
+      <ComboSelectButton
+        className={className}
+        disabled={disabled}
+        initLoading={initLoading}
+        loading={loading}
+        multiple={multiple}
+        onChange={onChange}
+        onSearch={onSearch}
+        options={options}
+        placeholderDom={placeholderDom}
+        ref={containerRef}
+        selectedValues={selectedValues}
+        setSelectedValues={setSelectedValues}
+        setValueState={setValueState}
+        showClear={showClear}
+        valueState={valueState}
+      />
     </Popover>
   );
 }

package/src/components/uix/command/index.tsx

@@ -0,0 +1,126 @@
+import type { ComponentProps } from "react";
+import { FC, useContext, useMemo } from "react";
+import get from "lodash/get";
+
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  Command as UICommand,
+} from "@meta-1/design/components/ui/command";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+import { cn } from "@meta-1/design/lib/utils";
+
+export type CommandItemProps = {
+  label?: React.ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  group?: string;
+  value?: string;
+  onSelect?: (value: string) => void;
+};
+
+export type CommandProps = {
+  className?: string;
+  children?: React.ReactNode;
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  empty?: React.ReactNode;
+  items?: CommandItemProps[];
+  filter?: ComponentProps<typeof UICommand>["filter"];
+  loading?: boolean;
+  loadingContent?: React.ReactNode;
+  searchInputProps?: ComponentProps<typeof CommandInput>;
+};
+
+export const Command: FC<CommandProps> = ({
+  className,
+  children,
+  showSearch = true,
+  searchPlaceholder,
+  empty,
+  items = [],
+  filter,
+  loading = false,
+  loadingContent,
+  searchInputProps,
+}) => {
+  const config = useContext(UIXContext);
+  const defaultEmpty = empty || get(config.locale, "Command.empty");
+  const defaultSearchPlaceholder = searchPlaceholder || get(config.locale, "Command.searchPlaceholder");
+  const groupedItems = useMemo(() => {
+    const grouped: Record<string, CommandItemProps[]> = {};
+    const ungrouped: CommandItemProps[] = [];
+
+    items.forEach((item) => {
+      if (item.group) {
+        if (!grouped[item.group]) {
+          grouped[item.group] = [];
+        }
+        grouped[item.group].push(item);
+      } else {
+        ungrouped.push(item);
+      }
+    });
+
+    return { grouped, ungrouped };
+  }, [items]);
+
+  const groupKeys = Object.keys(groupedItems.grouped);
+  const ungroupedItems = groupedItems.ungrouped;
+
+  return (
+    <UICommand className={cn("rounded-command border", className)} filter={filter}>
+      {showSearch && <CommandInput placeholder={defaultSearchPlaceholder} {...searchInputProps} />}
+      <CommandList>
+        {loading ? (
+          loadingContent || <CommandEmpty>{defaultEmpty}</CommandEmpty>
+        ) : (
+          <>
+            <CommandEmpty>{defaultEmpty}</CommandEmpty>
+            {children}
+            {ungroupedItems.length > 0 &&
+              ungroupedItems.map((item, index) => (
+                <CommandItem
+                  className="rounded-command p-command"
+                  disabled={item.disabled}
+                  key={item.value || index}
+                  onSelect={() => item.onSelect?.(item.value || String(index))}
+                  value={item.value}
+                >
+                  {item.label}
+                  {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                </CommandItem>
+              ))}
+            {groupKeys.map((groupKey, groupIndex) => {
+              const groupItems = groupedItems.grouped[groupKey];
+              const shouldShowSeparator = groupIndex > 0 || (groupIndex === 0 && ungroupedItems.length > 0);
+              return (
+                <div key={groupKey}>
+                  {shouldShowSeparator && <CommandSeparator />}
+                  <CommandGroup heading={groupKey}>
+                    {groupItems.map((item, itemIndex) => (
+                      <CommandItem
+                        disabled={item.disabled}
+                        key={item.value || `${groupKey}-${itemIndex}`}
+                        onSelect={() => item.onSelect?.(item.value || `${groupKey}-${itemIndex}`)}
+                        value={item.value}
+                      >
+                        {item.label}
+                        {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </div>
+              );
+            })}
+          </>
+        )}
+      </CommandList>
+    </UICommand>
+  );
+};