@turtleclub/ui 0.7.0-beta.3 → 0.7.0-beta.30

package/src/components/ui/multi-select.tsx

@@ -1,14 +1,10 @@
 import * as React from "react";
-import { CheckIcon, XIcon, ChevronDown, WandSparkles } from "lucide-react";
+import { CheckIcon, XIcon, ChevronDown, ChevronRight, WandSparkles } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Command,
   CommandEmpty,
@@ -48,10 +44,7 @@ interface MultiSelectGroup {
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-  extends Omit<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    "animationConfig"
-  > {
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "animationConfig"> {
   /**
    * An array of option objects or groups to be displayed in the multi-select component.
    */
@@ -263,13 +256,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       closeOnSelect = false,
       ...props
     },
-    ref,
+    ref
   ) => {
-    const [selectedValues, setSelectedValues] =
-      React.useState<string[]>(defaultValue);
+    const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
+    const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set());
 
     const [politeMessage, setPoliteMessage] = React.useState("");
     const [assertiveMessage, setAssertiveMessage] = React.useState("");
@@ -287,7 +280,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           setTimeout(() => setPoliteMessage(""), 100);
         }
       },
-      [],
+      []
     );
 
     const multiSelectId = React.useId();
@@ -298,23 +291,18 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const prevDefaultValueRef = React.useRef<string[]>(defaultValue);
 
     const isGroupedOptions = React.useCallback(
-      (
-        opts: MultiSelectOption[] | MultiSelectGroup[],
-      ): opts is MultiSelectGroup[] => {
+      (opts: MultiSelectOption[] | MultiSelectGroup[]): opts is MultiSelectGroup[] => {
         return opts.length > 0 && "heading" in opts[0];
       },
-      [],
+      []
     );
 
-    const arraysEqual = React.useCallback(
-      (a: string[], b: string[]): boolean => {
-        if (a.length !== b.length) return false;
-        const sortedA = [...a].sort();
-        const sortedB = [...b].sort();
-        return sortedA.every((val, index) => val === sortedB[index]);
-      },
-      [],
-    );
+    const arraysEqual = React.useCallback((a: string[], b: string[]): boolean => {
+      if (a.length !== b.length) return false;
+      const sortedA = [...a].sort();
+      const sortedB = [...b].sort();
+      return sortedA.every((val, index) => val === sortedB[index]);
+    }, []);
 
     const resetToDefault = React.useCallback(() => {
       setSelectedValues(defaultValue);
@@ -354,12 +342,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           }
         },
       }),
-      [resetToDefault, selectedValues, onValueChange],
+      [resetToDefault, selectedValues, onValueChange]
     );
 
-    const [screenSize, setScreenSize] = React.useState<
-      "mobile" | "tablet" | "desktop"
-    >("desktop");
+    const [screenSize, setScreenSize] = React.useState<"mobile" | "tablet" | "desktop">("desktop");
 
     React.useEffect(() => {
       if (typeof window === "undefined") return;
@@ -436,16 +422,14 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         }
       });
       if (process.env.NODE_ENV === "development" && duplicates.length > 0) {
-        const action = deduplicateOptions
-          ? "automatically removed"
-          : "detected";
+        const action = deduplicateOptions ? "automatically removed" : "detected";
         console.warn(
           `MultiSelect: Duplicate option values ${action}: ${duplicates.join(", ")}. ` +
             `${
               deduplicateOptions
                 ? "Duplicates have been removed automatically."
                 : "This may cause unexpected behavior. Consider setting 'deduplicateOptions={true}' or ensure all option values are unique."
-            }`,
+            }`
         );
       }
       return deduplicateOptions ? uniqueOptions : allOptions;
@@ -455,13 +439,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       (value: string): MultiSelectOption | undefined => {
         const option = getAllOptions().find((option) => option.value === value);
         if (!option && process.env.NODE_ENV === "development") {
-          console.warn(
-            `MultiSelect: Option with value "${value}" not found in options list`,
-          );
+          console.warn(`MultiSelect: Option with value "${value}" not found in options list`);
         }
         return option;
       },
-      [getAllOptions],
+      [getAllOptions]
     );
 
     const filteredOptions = React.useMemo(() => {
@@ -473,10 +455,8 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             ...group,
             options: group.options.filter(
               (option) =>
-                option.label
-                  .toLowerCase()
-                  .includes(searchValue.toLowerCase()) ||
-                option.value.toLowerCase().includes(searchValue.toLowerCase()),
+                option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
+                option.value.toLowerCase().includes(searchValue.toLowerCase())
             ),
           }))
           .filter((group) => group.options.length > 0);
@@ -484,13 +464,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       return options.filter(
         (option) =>
           option.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-          option.value.toLowerCase().includes(searchValue.toLowerCase()),
+          option.value.toLowerCase().includes(searchValue.toLowerCase())
       );
     }, [options, searchValue, searchable, isGroupedOptions]);
 
-    const handleInputKeyDown = (
-      event: React.KeyboardEvent<HTMLInputElement>,
-    ) => {
+    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
         setIsPopoverOpen(true);
       } else if (event.key === "Backspace" && !event.currentTarget.value) {
@@ -528,10 +506,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     const clearExtraOptions = () => {
       if (disabled) return;
-      const newSelectedValues = selectedValues.slice(
-        0,
-        responsiveSettings.maxCount,
-      );
+      const newSelectedValues = selectedValues.slice(0, responsiveSettings.maxCount);
       setSelectedValues(newSelectedValues);
       onValueChange(newSelectedValues);
     };
@@ -552,6 +527,42 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       }
     };
 
+    const toggleGroup = (groupHeading: string) => {
+      setCollapsedGroups((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(groupHeading)) {
+          newSet.delete(groupHeading);
+        } else {
+          newSet.add(groupHeading);
+        }
+        return newSet;
+      });
+    };
+
+    const toggleGroupSelectAll = (groupOptions: MultiSelectOption[]) => {
+      if (disabled) return;
+      const selectableOptions = groupOptions.filter((opt) => !opt.disabled);
+      const groupValues = selectableOptions.map((opt) => opt.value);
+      const allGroupSelected = groupValues.every((val) => selectedValues.includes(val));
+
+      let newSelectedValues: string[];
+      if (allGroupSelected) {
+        // Deselect all in this group
+        newSelectedValues = selectedValues.filter((val) => !groupValues.includes(val));
+      } else {
+        // Select all in this group
+        const valuesToAdd = groupValues.filter((val) => !selectedValues.includes(val));
+        newSelectedValues = [...selectedValues, ...valuesToAdd];
+      }
+
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+
+      if (closeOnSelect) {
+        setIsPopoverOpen(false);
+      }
+    };
+
     React.useEffect(() => {
       if (!resetOnDefaultValueChange) return;
       const prevDefaultValue = prevDefaultValueRef.current;
@@ -591,24 +602,20 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         if (diff > 0) {
           const addedItems = selectedValues.slice(-diff);
           const addedLabels = addedItems
-            .map(
-              (value) => allOptions.find((opt) => opt.value === value)?.label,
-            )
+            .map((value) => allOptions.find((opt) => opt.value === value)?.label)
             .filter(Boolean);
 
           if (addedLabels.length === 1) {
             announce(
-              `${addedLabels[0]} selected. ${selectedCount} of ${totalOptions} options selected.`,
+              `${addedLabels[0]} selected. ${selectedCount} of ${totalOptions} options selected.`
             );
           } else {
             announce(
-              `${addedLabels.length} options selected. ${selectedCount} of ${totalOptions} total selected.`,
+              `${addedLabels.length} options selected. ${selectedCount} of ${totalOptions} total selected.`
             );
           }
         } else if (diff < 0) {
-          announce(
-            `Option removed. ${selectedCount} of ${totalOptions} options selected.`,
-          );
+          announce(`Option removed. ${selectedCount} of ${totalOptions} options selected.`);
         }
         prevSelectedCount.current = selectedCount;
       }
@@ -616,7 +623,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       if (isPopoverOpen !== prevIsOpen.current) {
         if (isPopoverOpen) {
           announce(
-            `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`,
+            `Dropdown opened. ${totalOptions} options available. Use arrow keys to navigate.`
           );
         } else {
           announce("Dropdown closed.");
@@ -624,19 +631,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         prevIsOpen.current = isPopoverOpen;
       }
 
-      if (
-        searchValue !== prevSearchValue.current &&
-        searchValue !== undefined
-      ) {
+      if (searchValue !== prevSearchValue.current && searchValue !== undefined) {
         if (searchValue && isPopoverOpen) {
           const filteredCount = allOptions.filter(
             (opt) =>
               opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||
-              opt.value.toLowerCase().includes(searchValue.toLowerCase()),
+              opt.value.toLowerCase().includes(searchValue.toLowerCase())
           ).length;
 
           announce(
-            `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`,
+            `${filteredCount} option${filteredCount === 1 ? "" : "s"} found for "${searchValue}"`
           );
         }
         prevSearchValue.current = searchValue;
@@ -654,14 +658,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
           </div>
         </div>
 
-        <Popover
-          open={isPopoverOpen}
-          onOpenChange={setIsPopoverOpen}
-          modal={modalPopover}
-        >
+        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
           <div id={triggerDescriptionId} className="sr-only">
-            Multi-select dropdown. Use arrow keys to navigate, Enter to select,
-            and Escape to close.
+            Multi-select dropdown. Use arrow keys to navigate, Enter to select, and Escape to close.
           </div>
           <div id={selectedCountId} className="sr-only" aria-live="polite">
             {selectedValues.length === 0
@@ -674,184 +673,168 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   .join(", ")}`}
           </div>
 
-          <PopoverTrigger asChild>
-            <Button
-              ref={buttonRef}
-              {...props}
-              onClick={handleTogglePopover}
-              disabled={disabled}
-              role="combobox"
-              aria-expanded={isPopoverOpen}
-              aria-haspopup="listbox"
-              aria-controls={isPopoverOpen ? listboxId : undefined}
-              aria-describedby={`${triggerDescriptionId} ${selectedCountId}`}
-              aria-label={`Multi-select: ${selectedValues.length} of ${
-                getAllOptions().length
-              } options selected. ${placeholder}`}
-              border="plain"
-              className={cn(
-                "flex h-10 items-center justify-between p-1 [&_svg]:pointer-events-auto",
-                "!bg-neutral-alpha-2 text-base !font-normal shadow md:text-sm",
-                autoSize ? "w-auto" : "w-full",
-                responsiveSettings.compactMode && "h-8 text-sm",
-                screenSize === "mobile" && "h-12 text-base",
-                disabled && "cursor-not-allowed opacity-50",
-                className,
-              )}
-              style={{
-                ...widthConstraints,
-                maxWidth: `min(${widthConstraints.maxWidth}, 100%)`,
-              }}
-            >
-              {selectedValues.length > 0 ? (
-                <div className="flex w-full items-center justify-between">
-                  <div
-                    className={cn(
-                      "flex items-center gap-1",
-                      singleLine
-                        ? "multiselect-singleline-scroll overflow-x-auto"
-                        : "flex-wrap",
-                      responsiveSettings.compactMode && "gap-0.5",
-                    )}
-                    style={
-                      singleLine
-                        ? {
-                            paddingBottom: "4px",
-                          }
-                        : {}
-                    }
-                  >
-                    {selectedValues
-                      .slice(0, responsiveSettings.maxCount)
-                      .map((value) => {
-                        const option = getOptionByValue(value);
-                        const IconComponent = option?.icon;
-                        if (!option) {
-                          return null;
+          <PopoverTrigger
+            ref={buttonRef}
+            {...props}
+            onClick={handleTogglePopover}
+            disabled={disabled}
+            role="combobox"
+            aria-expanded={isPopoverOpen}
+            aria-haspopup="listbox"
+            aria-controls={isPopoverOpen ? listboxId : undefined}
+            aria-describedby={`${triggerDescriptionId} ${selectedCountId}`}
+            aria-label={`Multi-select: ${selectedValues.length} of ${
+              getAllOptions().length
+            } options selected. ${placeholder}`}
+            className={cn(
+              buttonVariants({
+                variant: "default",
+                size: "default",
+                border: "plain",
+              }),
+              "flex h-10 items-center justify-between [&_svg]:pointer-events-auto",
+              "!bg-neutral-alpha-2 text-base !font-normal shadow md:text-sm",
+              autoSize ? "w-auto" : "w-full",
+              responsiveSettings.compactMode && "h-8 text-sm",
+              screenSize === "mobile" && "h-12 text-base",
+              disabled && "cursor-not-allowed opacity-50",
+              className
+            )}
+            style={{
+              ...widthConstraints,
+              maxWidth: `min(${widthConstraints.maxWidth}, 100%)`,
+            }}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex w-full items-center justify-between">
+                <div
+                  className={cn(
+                    "flex items-center gap-1",
+                    singleLine ? "multiselect-singleline-scroll overflow-x-auto" : "flex-wrap",
+                    responsiveSettings.compactMode && "gap-0.5"
+                  )}
+                  style={
+                    singleLine
+                      ? {
+                          paddingBottom: "4px",
                         }
-                        const badgeStyle: React.CSSProperties = {
-                          animationDuration: `${animation}s`,
-                        };
-                        return (
-                          <Badge
-                            key={value}
-                            className={cn(
-                              "!pr-1.5 pl-3.5",
-                              responsiveSettings.compactMode &&
-                                "px-1.5 py-0.5 text-xs",
-                              screenSize === "mobile" &&
-                                "max-w-[120px] truncate",
-                              singleLine && "flex-shrink-0 whitespace-nowrap",
-                              "[&>svg]:pointer-events-auto",
-                            )}
-                            style={badgeStyle}
-                          >
-                            {IconComponent && !responsiveSettings.hideIcons && (
-                              <IconComponent
-                                className={cn(
-                                  "mr-2 size-3.5",
-                                  responsiveSettings.compactMode &&
-                                    "mr-1 h-3 w-3",
-                                )}
-                              />
-                            )}
-                            <span
+                      : {}
+                  }
+                >
+                  {selectedValues
+                    .slice(0, responsiveSettings.maxCount)
+                    .map((value) => {
+                      const option = getOptionByValue(value);
+                      const IconComponent = option?.icon;
+                      if (!option) {
+                        return null;
+                      }
+                      const badgeStyle: React.CSSProperties = {
+                        animationDuration: `${animation}s`,
+                      };
+                      return (
+                        <Badge
+                          key={value}
+                          className={cn(
+                            "!pr-1.5 pl-3.5",
+                            responsiveSettings.compactMode && "px-1.5 py-0.5 text-xs",
+                            screenSize === "mobile" && "max-w-[120px] truncate",
+                            singleLine && "flex-shrink-0 whitespace-nowrap",
+                            "[&>svg]:pointer-events-auto"
+                          )}
+                          style={badgeStyle}
+                        >
+                          {IconComponent && !responsiveSettings.hideIcons && (
+                            <IconComponent
                               className={cn(
-                                screenSize === "mobile" && "truncate",
+                                "mr-2 size-3.5",
+                                responsiveSettings.compactMode && "mr-1 h-3 w-3"
                               )}
-                            >
-                              {option.label}
-                            </span>
-                            <div
-                              role="button"
-                              tabIndex={0}
-                              onClick={(event) => {
+                            />
+                          )}
+                          <span className={cn(screenSize === "mobile" && "truncate")}>
+                            {option.label}
+                          </span>
+                          <div
+                            role="button"
+                            tabIndex={0}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              toggleOption(value);
+                            }}
+                            onKeyDown={(event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
                                 event.stopPropagation();
                                 toggleOption(value);
-                              }}
-                              onKeyDown={(event) => {
-                                if (
-                                  event.key === "Enter" ||
-                                  event.key === " "
-                                ) {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  toggleOption(value);
-                                }
-                              }}
-                              aria-label={`Remove ${option.label} from selection`}
-                              className="text-muted-foreground hover:text-foreground size-4 cursor-pointer rounded-sm p-0.5 hover:bg-white/20 focus:ring-1 focus:ring-white/50 focus:outline-none"
-                            >
-                              <XIcon className="size-3" />
-                            </div>
-                          </Badge>
-                        );
-                      })
-                      .filter(Boolean)}
-                    {selectedValues.length > responsiveSettings.maxCount && (
-                      <Badge
-                        className={cn(
-                          "!pr-1.5 pl-3.5",
-                          responsiveSettings.compactMode &&
-                            "px-1.5 py-0.5 text-xs",
-                          singleLine && "flex-shrink-0 whitespace-nowrap",
-                          "[&>svg]:pointer-events-auto",
-                        )}
+                              }
+                            }}
+                            aria-label={`Remove ${option.label} from selection`}
+                            className="text-muted-foreground hover:text-foreground size-4 cursor-pointer rounded-sm p-0.5 hover:bg-white/20 focus:ring-1 focus:ring-white/50 focus:outline-none"
+                          >
+                            <XIcon className="size-3" />
+                          </div>
+                        </Badge>
+                      );
+                    })
+                    .filter(Boolean)}
+                  {selectedValues.length > responsiveSettings.maxCount && (
+                    <Badge
+                      className={cn(
+                        "!pr-1.5 pl-3.5",
+                        responsiveSettings.compactMode && "px-1.5 py-0.5 text-xs",
+                        singleLine && "flex-shrink-0 whitespace-nowrap",
+                        "[&>svg]:pointer-events-auto"
+                      )}
+                    >
+                      {`+ ${selectedValues.length - responsiveSettings.maxCount} more`}
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          clearExtraOptions();
+                        }}
+                        className="text-muted-foreground hover:text-foreground size-4 cursor-pointer rounded-sm p-0.5 hover:bg-white/20 focus:ring-1 focus:ring-white/50 focus:outline-none"
                       >
-                        {`+ ${selectedValues.length - responsiveSettings.maxCount} more`}
-                        <div
-                          role="button"
-                          tabIndex={0}
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            clearExtraOptions();
-                          }}
-                          className="text-muted-foreground hover:text-foreground size-4 cursor-pointer rounded-sm p-0.5 hover:bg-white/20 focus:ring-1 focus:ring-white/50 focus:outline-none"
-                        >
-                          <XIcon className="size-3" />
-                        </div>
-                      </Badge>
-                    )}
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={(event) => {
+                        <XIcon className="size-3" />
+                      </div>
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
                         event.stopPropagation();
                         handleClear();
-                      }}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter" || event.key === " ") {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          handleClear();
-                        }
-                      }}
-                      aria-label={`Clear all ${selectedValues.length} selected options`}
-                      className="text-muted-foreground hover:text-foreground focus:ring-ring mx-2 flex size-3.5 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none"
-                    >
-                      <XIcon className="size-3.5" />
-                    </div>
-                    <Separator
-                      orientation="vertical"
-                      className="flex h-full min-h-6"
-                    />
-                    <ChevronDown
-                      className="text-muted-foreground mx-2 h-4 cursor-pointer"
-                      aria-hidden="true"
-                    />
+                      }
+                    }}
+                    aria-label={`Clear all ${selectedValues.length} selected options`}
+                    className="text-muted-foreground hover:text-foreground focus:ring-ring mx-2 flex size-3.5 cursor-pointer items-center justify-center rounded-sm focus:ring-2 focus:ring-offset-1 focus:outline-none"
+                  >
+                    <XIcon className="size-3.5" />
                   </div>
+                  <Separator orientation="vertical" className="flex h-full min-h-6" />
+                  <ChevronDown
+                    className="text-muted-foreground mx-2 h-4 cursor-pointer"
+                    aria-hidden="true"
+                  />
                 </div>
-              ) : (
-                <div className="mx-auto flex w-full items-center justify-between">
-                  <span className="text-muted-foreground text-sm">
-                    {placeholder}
-                  </span>
-                  <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
-                </div>
-              )}
-            </Button>
+              </div>
+            ) : (
+              <div className="mx-auto flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">{placeholder}</span>
+                <ChevronDown className="text-muted-foreground mx-2 h-4 cursor-pointer" />
+              </div>
+            )}
           </PopoverTrigger>
           <PopoverContent
             id={listboxId}
@@ -863,7 +846,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               screenSize === "mobile" && "w-[85vw] max-w-[280px]",
               screenSize === "tablet" && "w-[70vw] max-w-md",
               screenSize === "desktop" && "min-w-[300px]",
-              popoverClassName,
+              popoverClassName
             )}
             style={{
               maxWidth: `min(${widthConstraints.maxWidth}, 85vw)`,
@@ -893,12 +876,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 className={cn(
                   "multiselect-scrollbar max-h-[40vh] overflow-y-auto",
                   screenSize === "mobile" && "max-h-[50vh]",
-                  "overscroll-behavior-y-contain",
+                  "overscroll-behavior-y-contain"
                 )}
               >
-                <CommandEmpty>
-                  {emptyIndicator || "No results found."}
-                </CommandEmpty>{" "}
+                <CommandEmpty>{emptyIndicator || "No results found."}</CommandEmpty>{" "}
                 {!hideSelectAll && !searchValue && (
                   <CommandGroup>
                     <CommandItem
@@ -916,10 +897,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         className={cn(
                           "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
                           selectedValues.length ===
-                            getAllOptions().filter((opt) => !opt.disabled)
-                              .length
+                            getAllOptions().filter((opt) => !opt.disabled).length
                             ? "bg-primary"
-                            : "opacity-50 [&_svg]:invisible",
+                            : "opacity-50 [&_svg]:invisible"
                         )}
                         aria-hidden="true"
                       >
@@ -927,61 +907,104 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       </div>
                       <span>
                         (Select All
-                        {getAllOptions().length > 20
-                          ? ` - ${getAllOptions().length} options`
-                          : ""}
-                        )
+                        {getAllOptions().length > 20 ? ` - ${getAllOptions().length} options` : ""})
                       </span>
                     </CommandItem>
                   </CommandGroup>
                 )}
                 {isGroupedOptions(filteredOptions) ? (
-                  filteredOptions.map((group) => (
-                    <CommandGroup key={group.heading} heading={group.heading}>
-                      {group.options.map((option) => {
-                        const isSelected = selectedValues.includes(
-                          option.value,
-                        );
-                        return (
-                          <CommandItem
-                            key={option.value}
-                            onSelect={() => toggleOption(option.value)}
-                            role="option"
-                            aria-selected={isSelected}
-                            aria-disabled={option.disabled}
-                            aria-label={`${option.label}${
-                              isSelected ? ", selected" : ", not selected"
-                            }${option.disabled ? ", disabled" : ""}`}
-                            className={cn(
-                              "cursor-pointer",
-                              option.disabled &&
-                                "cursor-not-allowed opacity-50",
-                            )}
-                            disabled={option.disabled}
-                          >
-                            <div
-                              className={cn(
-                                "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
-                                isSelected
-                                  ? "bg-primary"
-                                  : "opacity-50 [&_svg]:invisible",
-                              )}
-                              aria-hidden="true"
+                  filteredOptions.map((group) => {
+                    const isCollapsed = collapsedGroups.has(group.heading);
+                    const selectableGroupOptions = group.options.filter((opt) => !opt.disabled);
+                    const groupValues = selectableGroupOptions.map((opt) => opt.value);
+                    const allGroupSelected =
+                      groupValues.length > 0 &&
+                      groupValues.every((val) => selectedValues.includes(val));
+                    const someGroupSelected =
+                      groupValues.some((val) => selectedValues.includes(val)) && !allGroupSelected;
+
+                    return (
+                      <CommandGroup key={group.heading}>
+                        <div className="px-2 py-1.5">
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() => toggleGroup(group.heading)}
+                              className="text-muted-foreground hover:text-foreground flex flex-1 items-center gap-1 text-xs font-medium transition-colors"
                             >
-                              <CheckIcon className="text-primary-foreground size-3.5" />
-                            </div>
-                            {option.icon && (
-                              <option.icon
-                                className="text-muted-foreground mr-2 size-3.5"
-                                aria-hidden="true"
+                              <ChevronRight
+                                className={cn(
+                                  "h-3.5 w-3.5 transition-transform",
+                                  !isCollapsed && "rotate-90"
+                                )}
                               />
+                              {group.heading}
+                            </button>
+                            {!hideSelectAll && (
+                              <button
+                                type="button"
+                                onClick={() => toggleGroupSelectAll(group.options)}
+                                className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-xs transition-colors"
+                                disabled={disabled || selectableGroupOptions.length === 0}
+                              >
+                                <div
+                                  className={cn(
+                                    "border-border flex size-3.5 items-center justify-center rounded-xs border",
+                                    allGroupSelected && "bg-primary",
+                                    someGroupSelected && "bg-primary/50",
+                                    !allGroupSelected &&
+                                      !someGroupSelected &&
+                                      "opacity-50 [&_svg]:invisible"
+                                  )}
+                                >
+                                  <CheckIcon className="text-primary-foreground size-3.5" />
+                                </div>
+                                <span className="text-[10px]">All</span>
+                              </button>
                             )}
-                            <span>{option.label}</span>
-                          </CommandItem>
-                        );
-                      })}
-                    </CommandGroup>
-                  ))
+                          </div>
+                        </div>
+                        {!isCollapsed &&
+                          group.options.map((option) => {
+                            const isSelected = selectedValues.includes(option.value);
+                            return (
+                              <CommandItem
+                                key={option.value}
+                                onSelect={() => toggleOption(option.value)}
+                                role="option"
+                                aria-selected={isSelected}
+                                aria-disabled={option.disabled}
+                                aria-label={`${option.label}${
+                                  isSelected ? ", selected" : ", not selected"
+                                }${option.disabled ? ", disabled" : ""}`}
+                                className={cn(
+                                  "cursor-pointer",
+                                  option.disabled && "cursor-not-allowed opacity-50"
+                                )}
+                                disabled={option.disabled}
+                              >
+                                <div
+                                  className={cn(
+                                    "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
+                                    isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
+                                  )}
+                                  aria-hidden="true"
+                                >
+                                  <CheckIcon className="text-primary-foreground size-3.5" />
+                                </div>
+                                {option.icon && (
+                                  <option.icon
+                                    className="text-muted-foreground mr-2 size-3.5"
+                                    aria-hidden="true"
+                                  />
+                                )}
+                                <span>{option.label}</span>
+                              </CommandItem>
+                            );
+                          })}
+                      </CommandGroup>
+                    );
+                  })
                 ) : (
                   <CommandGroup>
                     {filteredOptions.map((option) => {
@@ -998,16 +1021,14 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                           }${option.disabled ? ", disabled" : ""}`}
                           className={cn(
                             "cursor-pointer",
-                            option.disabled && "cursor-not-allowed opacity-50",
+                            option.disabled && "cursor-not-allowed opacity-50"
                           )}
                           disabled={option.disabled}
                         >
                           <div
                             className={cn(
                               "border-border mr-2 flex size-3.5 items-center justify-center rounded-xs border",
-                              isSelected
-                                ? "bg-primary"
-                                : "opacity-50 [&_svg]:invisible",
+                              isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
                             )}
                             aria-hidden="true"
                           >
@@ -1036,10 +1057,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         >
                           Clear
                         </CommandItem>
-                        <Separator
-                          orientation="vertical"
-                          className="mx-1 flex h-full min-h-6"
-                        />
+                        <Separator orientation="vertical" className="mx-1 flex h-full min-h-6" />
                       </>
                     )}
                     <CommandItem
@@ -1057,7 +1075,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             <WandSparkles
               className={cn(
                 "text-foreground bg-background my-2 h-3 w-3 cursor-pointer",
-                isAnimating ? "" : "text-muted-foreground",
+                isAnimating ? "" : "text-muted-foreground"
               )}
               onClick={() => setIsAnimating(!isAnimating)}
             />
@@ -1065,7 +1083,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         </Popover>
       </>
     );
-  },
+  }
 );
 
 MultiSelect.displayName = "MultiSelect";