@altimateai/ui-components 0.0.48 → 0.0.50

package/dist/storybook/Combobox.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { Combobox } from "../shadcn";
-import { Button } from "../button";
+import { Combobox, Button } from "../shadcn";
+import type { ComboboxOption } from "./Combobox";
 import { DatabaseIcon } from "@ac-assets/icons";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export default {
   title: "Shadcn/Components/Combobox",
@@ -165,7 +165,7 @@ const ComboboxColumnsExample = () => {
       placeholder="Columns"
       multiSelect={true}
       showApplyButton={true}
-      buttonProps={{ className: "al-w-[200px]" }}
+      buttonProps={{ className: "al-w-auto" }}
     />
   );
 };
@@ -437,81 +437,6 @@ export const ComboboxInfiniteScrollExample: StoryFn = () => {
   );
 };
 
-export const ComboboxSearchExample: StoryFn = () => {
-  const [options] = useState([
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue" },
-    { value: "angular", label: "Angular" },
-    { value: "svelte", label: "Svelte" },
-    { value: "nextjs", label: "Next.js" },
-  ]);
-
-  const [selectedValue, setSelectedValue] = useState("");
-  const [searchValue, setSearchValue] = useState("");
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-
-  const handleSearch = (searchTerm: string) => {
-    setSearchValue(searchTerm);
-    if (searchTerm.trim() && !searchHistory.includes(searchTerm.trim())) {
-      setSearchHistory(prev => [searchTerm.trim(), ...prev.slice(0, 4)]); // Keep last 5 searches
-    }
-  };
-
-  const clearHistory = () => {
-    setSearchHistory([]);
-    setSearchValue("");
-  };
-
-  return (
-    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
-      <div className="al-flex al-gap-4 al-items-center">
-        <h3 className="al-text-lg al-font-medium">Search Callback Example</h3>
-        <Button onClick={clearHistory} size="sm" variant="outline">
-          Clear History
-        </Button>
-      </div>
-
-      <div className="al-flex al-flex-col al-gap-4">
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Combobox with Search Callback</label>
-          <p className="al-text-xs al-text-muted-foreground">
-            Type in the search box to see the search values being emitted
-          </p>
-          <Combobox
-            options={options}
-            value={selectedValue}
-            onChange={value => setSelectedValue(value as string)}
-            placeholder="Search frameworks..."
-            searchPlaceholder="Type to search..."
-            onSearch={handleSearch}
-            buttonProps={{ className: "al-w-[250px]" }}
-          />
-        </div>
-
-        <div className="al-flex al-flex-col al-gap-2">
-          <label className="al-text-sm al-font-medium">Current Search Value:</label>
-          <code className="al-text-sm al-bg-muted al-p-2 al-rounded">
-            {searchValue || "No search performed yet"}
-          </code>
-        </div>
-
-        {searchHistory.length > 0 && (
-          <div className="al-flex al-flex-col al-gap-2">
-            <label className="al-text-sm al-font-medium">Search History:</label>
-            <ul className="al-text-sm al-bg-muted al-p-2 al-rounded al-space-y-1">
-              {searchHistory.map((search, index) => (
-                <li key={index} className="al-font-mono">
-                  {index + 1}. &quot;{search}&quot;
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
 export const ComboboxCallbacksExample: StoryFn = () => {
   const options = [
     { value: "react", label: "React" },
@@ -584,6 +509,259 @@ export const ComboboxCallbacksExample: StoryFn = () => {
   );
 };
 
+export const ComboboxCustomNodesExample: StoryFn = () => {
+  const [singleValue, setSingleValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>([]);
+
+  // Options with custom node rendering
+  const optionsWithNodes = [
+    {
+      value: "react",
+      label: "React",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-blue-500 al-rounded"></div>
+            <span>React</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Meta</span>
+        </div>
+      ),
+    },
+    {
+      value: "vue",
+      label: "Vue",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-green-500 al-rounded"></div>
+            <span>Vue.js</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Evan You</span>
+        </div>
+      ),
+    },
+    {
+      value: "angular",
+      label: "Angular",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-red-500 al-rounded"></div>
+            <span>Angular</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Google</span>
+        </div>
+      ),
+    },
+    {
+      value: "svelte",
+      label: "Svelte",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-orange-500 al-rounded"></div>
+            <span>Svelte</span>
+          </div>
+          <span className="al-text-xs al-text-muted-foreground">Rich Harris</span>
+        </div>
+      ),
+    },
+  ];
+
+  // Options with interactive elements
+  const optionsWithButtons = [
+    {
+      value: "typescript",
+      label: "TypeScript",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-blue-600 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">TypeScript</div>
+              <div className="al-text-xs al-text-muted-foreground">Strongly typed JavaScript</div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("TypeScript info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-blue-100 al-text-blue-700 al-rounded hover:al-bg-blue-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+    {
+      value: "javascript",
+      label: "JavaScript",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-yellow-500 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">JavaScript</div>
+              <div className="al-text-xs al-text-muted-foreground">Dynamic scripting language</div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("JavaScript info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-yellow-100 al-text-yellow-700 al-rounded hover:al-bg-yellow-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+    {
+      value: "python",
+      label: "Python",
+      labelNode: (
+        <div className="al-flex al-items-center al-justify-between al-w-full">
+          <div className="al-flex al-items-center al-gap-2">
+            <div className="al-w-4 al-h-4 al-bg-green-600 al-rounded"></div>
+            <div>
+              <div className="al-font-medium">Python</div>
+              <div className="al-text-xs al-text-muted-foreground">
+                High-level programming language
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={e => {
+              e.stopPropagation();
+              alert("Python info clicked!");
+            }}
+            className="al-text-xs al-px-2 al-py-1 al-bg-green-100 al-text-green-700 al-rounded hover:al-bg-green-200"
+          >
+            Info
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  // Mixed options - some with nodes, some without
+  const mixedOptions = [
+    { value: "standard1", label: "Standard Option 1" },
+    {
+      value: "custom1",
+      label: "Custom Option 1",
+      labelNode: (
+        <div className="al-flex al-items-center al-gap-2">
+          <div className="al-w-2 al-h-2 al-bg-purple-500 al-rounded-full"></div>
+          <span className="al-italic">Custom with node</span>
+        </div>
+      ),
+    },
+    { value: "standard2", label: "Standard Option 2" },
+    {
+      value: "custom2",
+      label: "Custom Option 2",
+      labelNode: (
+        <div className="al-flex al-items-center al-gap-2">
+          <div className="al-w-2 al-h-2 al-bg-pink-500 al-rounded-full"></div>
+          <span className="al-font-bold">Another custom node</span>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">Custom Node Rendering</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Use the optional <code>node</code> property to provide custom ReactNode rendering for
+          dropdown options while keeping <code>label</code> as a string for text operations.
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Framework Selector with Icons & Authors</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Custom nodes with colored indicators and author information
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Single Select</label>
+            <Combobox
+              options={optionsWithNodes}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select a framework..."
+              buttonProps={{ className: "al-w-[300px]" }}
+            />
+            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
+          </div>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Multi Select</label>
+            <Combobox
+              options={optionsWithNodes}
+              value={multiValue}
+              onChange={value => setMultiValue(value as string[])}
+              placeholder="Select frameworks..."
+              multiSelect={true}
+              buttonProps={{ className: "al-w-[300px]" }}
+            />
+            <div className="al-text-sm">
+              Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
+            </div>
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Interactive Elements in Options</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Options with interactive buttons that can be clicked without selecting the option
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">
+              Programming Languages with Info Buttons
+            </label>
+            <Combobox
+              options={optionsWithButtons}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select a language..."
+              buttonProps={{ className: "al-w-[350px]" }}
+              popoverContentProps={{ className: "al-w-[350px]" }}
+            />
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-4">
+          <h4 className="al-text-md al-font-medium">Mixed Standard and Custom Options</h4>
+          <p className="al-text-sm al-text-muted-foreground">
+            Demonstrating that you can mix standard string labels with custom node rendering
+          </p>
+
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Mixed Options</label>
+            <Combobox
+              options={mixedOptions}
+              value={singleValue}
+              onChange={value => setSingleValue(value as string)}
+              placeholder="Select an option..."
+              buttonProps={{ className: "al-w-[250px]" }}
+            />
+            <div className="al-text-sm">Selected: {singleValue || "None"}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const ComboboxPopoverCustomizationExample: StoryFn = () => {
   const options = [
     { value: "react", label: "React" },
@@ -648,3 +826,729 @@ export const ComboboxPopoverCustomizationExample: StoryFn = () => {
     </div>
   );
 };
+
+export const ComboboxValidationExample: StoryFn = () => {
+  const options = [
+    { value: "databases", label: "Databases" },
+    { value: "api", label: "API" },
+    { value: "frontend", label: "Frontend" },
+    { value: "backend", label: "Backend" },
+    { value: "devops", label: "DevOps" },
+    { value: "mobile", label: "Mobile" },
+  ];
+
+  const [selectedValue, setSelectedValue] = useState<string[]>(["databases"]);
+  const [selectedValueWithoutValidation, setSelectedValueWithoutValidation] = useState<string[]>(
+    []
+  );
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">Validation Examples</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Demonstrating the disableAllDeselect prop for preventing empty selections
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            With Validation (disableAllDeselect=true)
+          </label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Try to deselect all items and click Apply - you&apos;ll see a warning message
+          </p>
+          <Combobox
+            options={options}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string[])}
+            placeholder="Select at least one skill..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            disableAllDeselect={true}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {selectedValue.length > 0 ? selectedValue.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Without Validation (disableAllDeselect=false)
+          </label>
+          <p className="al-text-xs al-text-muted-foreground">
+            You can deselect all items and apply with an empty selection
+          </p>
+          <Combobox
+            options={options}
+            value={selectedValueWithoutValidation}
+            onChange={value => setSelectedValueWithoutValidation(value as string[])}
+            placeholder="Select skills (optional)..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            disableAllDeselect={false}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Selected:{" "}
+            {selectedValueWithoutValidation.length > 0
+              ? selectedValueWithoutValidation.join(", ")
+              : "None"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxDebouncedSearchExample: StoryFn = () => {
+  const allOptions = [
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "python", label: "Python" },
+    { value: "java", label: "Java" },
+    { value: "csharp", label: "C#" },
+    { value: "cpp", label: "C++" },
+    { value: "go", label: "Go" },
+    { value: "rust", label: "Rust" },
+    { value: "php", label: "PHP" },
+    { value: "ruby", label: "Ruby" },
+    { value: "swift", label: "Swift" },
+    { value: "kotlin", label: "Kotlin" },
+  ];
+
+  const [selectedValue, setSelectedValue] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(allOptions);
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+
+  const clearHistory = () => {
+    setSearchHistory([]);
+    setFilteredOptions(allOptions);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-gap-4 al-items-center">
+        <h3 className="al-text-lg al-font-medium">Debounced Search Example</h3>
+        <Button onClick={clearHistory} size="sm" variant="outline">
+          Clear History
+        </Button>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Search with Default Debounce (300ms)</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Type quickly to see how the search is debounced. The search function will only be called
+            300ms after you stop typing.
+          </p>
+          <Combobox
+            options={filteredOptions}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Search programming languages..."
+            searchPlaceholder="Type to search languages..."
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Showing {filteredOptions.length} of {allOptions.length} languages
+          </div>
+        </div>
+
+        {searchHistory.length > 0 && (
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Search History (Last 10 calls):</label>
+            <ul className="al-text-xs al-bg-muted al-p-2 al-rounded al-space-y-1 al-max-h-40 al-overflow-y-auto">
+              {searchHistory.map((entry, index) => (
+                <li key={index} className="al-font-mono">
+                  {entry}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxFilterDropdownCompatibilityExample: StoryFn = () => {
+  const tagOptions = [
+    { value: "urgent", label: "Urgent" },
+    { value: "bug", label: "Bug" },
+    { value: "feature", label: "Feature" },
+    { value: "enhancement", label: "Enhancement" },
+    { value: "documentation", label: "Documentation" },
+    { value: "question", label: "Question" },
+    { value: "duplicate", label: "Duplicate" },
+    { value: "wontfix", label: "Won't Fix" },
+  ];
+
+  const [selectedTags, setSelectedTags] = useState<string[]>(["urgent", "bug"]);
+  const [requiredTags, setRequiredTags] = useState<string[]>(["urgent"]);
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">FilterDropdown Compatibility</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Demonstrating all FilterDropdown features: debounced search, validation, apply button, and
+          clear functionality
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Full Feature Set</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Multi-select with apply button, clear button, debounced search, and validation
+          </p>
+          <Combobox
+            options={tagOptions}
+            value={selectedTags}
+            onChange={value => setSelectedTags(value as string[])}
+            placeholder="Select tags..."
+            searchPlaceholder="Search tags..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            disableAllDeselect={false}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Selected tags: {selectedTags.length > 0 ? selectedTags.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Required Tags (disableAllDeselect=true)
+          </label>
+          <p className="al-text-xs al-text-muted-foreground">
+            At least one tag must always be selected. Try to deselect all and apply.
+          </p>
+          <Combobox
+            options={tagOptions}
+            value={requiredTags}
+            onChange={value => setRequiredTags(value as string[])}
+            placeholder="Select required tags..."
+            searchPlaceholder="Find tags..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            disableAllDeselect={true}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Required tags: {requiredTags.length > 0 ? requiredTags.join(", ") : "None"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxHierarchicalExample: StoryFn = () => {
+  const [selectedDepartment, setSelectedDepartment] = useState("");
+  const [selectedMultiDepartment, setSelectedMultiDepartment] = useState<string[]>([]);
+  const [hierarchicalSelection, setHierarchicalSelection] = useState<{
+    value: string;
+    label: string;
+    parent?: { value: string; label: string };
+  } | null>(null);
+
+  // Helper function to handle hierarchical selection
+  const handleHierarchicalSelect = (value: string, parentValue: string, parentLabel: string) => {
+    // Update single select state
+    setSelectedDepartment(value);
+    setHierarchicalSelection({
+      value,
+      label:
+        departmentOptions.find(opt => opt.nestedLabels?.[value])?.nestedLabels?.[value] || value,
+      parent: { value: parentValue, label: parentLabel },
+    });
+
+    // Also update multi-select state (toggle the value) since no apply button
+    setSelectedMultiDepartment(prev => {
+      if (prev.includes(value)) {
+        return prev.filter(v => v !== value);
+      } else {
+        return [...prev, value];
+      }
+    });
+  };
+
+  // Helper function to get the selected value for a nested combobox
+  const getNestedValue = (parentValue: string): string => {
+    const parentOption = departmentOptions.find(opt => opt.value === parentValue);
+    if (parentOption?.nestedLabels && selectedDepartment in parentOption.nestedLabels) {
+      return selectedDepartment;
+    }
+    return "";
+  };
+
+  // Hierarchical options with subcomponents for single select
+  const departmentOptions: ComboboxOption[] = [
+    {
+      value: "engineering",
+      label: "Engineering",
+      nestedLabels: {
+        frontend: "Frontend",
+        backend: "Backend",
+        devops: "DevOps",
+        mobile: "Mobile",
+      },
+      children: (close: () => void) => (
+        <div className="al-flex al-flex-col al-gap-2">
+          <h4 className="al-font-medium al-text-sm">Engineering Teams</h4>
+          <div className="al-grid al-grid-cols-2 al-gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                handleHierarchicalSelect("frontend", "engineering", "Engineering");
+                close();
+              }}
+            >
+              Frontend
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                handleHierarchicalSelect("backend", "engineering", "Engineering");
+                close();
+              }}
+            >
+              Backend
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                handleHierarchicalSelect("devops", "engineering", "Engineering");
+                close();
+              }}
+            >
+              DevOps
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                handleHierarchicalSelect("mobile", "engineering", "Engineering");
+                close();
+              }}
+            >
+              Mobile
+            </Button>
+          </div>
+          <div className="al-text-xs al-text-muted-foreground al-mt-2">
+            Click a team to select and close
+          </div>
+        </div>
+      ),
+    },
+    {
+      value: "design",
+      label: "Design",
+      nestedLabels: {
+        "ux-design": "UX Designer",
+        "ui-design": "UI Designer",
+        "product-design": "Product Designer",
+      },
+      children: (close: () => void) => (
+        <div className="al-flex al-flex-col al-gap-2">
+          <h4 className="al-font-medium al-text-sm">Design Roles</h4>
+          <div className="al-space-y-1">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="al-w-full al-justify-start"
+              onClick={() => {
+                handleHierarchicalSelect("ux-design", "design", "Design");
+                close();
+              }}
+            >
+              UX Designer
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="al-w-full al-justify-start"
+              onClick={() => {
+                handleHierarchicalSelect("ui-design", "design", "Design");
+                close();
+              }}
+            >
+              UI Designer
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="al-w-full al-justify-start"
+              onClick={() => {
+                handleHierarchicalSelect("product-design", "design", "Design");
+                close();
+              }}
+            >
+              Product Designer
+            </Button>
+          </div>
+        </div>
+      ),
+    },
+    {
+      value: "marketing",
+      label: "Marketing",
+      nestedLabels: {
+        content: "Content Marketing",
+        social: "Social Media",
+        email: "Email Marketing",
+        seo: "SEO/SEM",
+      },
+      children: (close: () => void) => (
+        <div className="al-flex al-flex-col al-gap-2">
+          <h4 className="al-font-medium al-text-sm">Marketing Channels</h4>
+          <Combobox
+            options={[
+              { value: "content", label: "Content Marketing" },
+              { value: "social", label: "Social Media" },
+              { value: "email", label: "Email Marketing" },
+              { value: "seo", label: "SEO/SEM" },
+            ]}
+            value={getNestedValue("marketing")}
+            onChange={value => {
+              handleHierarchicalSelect(value as string, "marketing", "Marketing");
+              close();
+            }}
+            placeholder="Select marketing area..."
+            buttonProps={{ className: "al-w-full" }}
+          />
+          <div className="al-text-xs al-text-muted-foreground">
+            Nested combobox for marketing specializations
+          </div>
+        </div>
+      ),
+    },
+    {
+      value: "sales",
+      label: "Sales",
+      // No subComponent - regular option
+    },
+    {
+      value: "hr",
+      label: "Human Resources",
+      // No subComponent - regular option
+    },
+  ];
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">Hierarchical Options</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          NEW FEATURE: Options with subComponent show a chevron and display nested content on hover.
+          Mix hierarchical and regular options freely.
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Department Selection (Single)</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Hover over Engineering, Design, or Marketing to see subcomponents. Sales and HR are
+            regular options.
+          </p>
+          <Combobox
+            options={departmentOptions}
+            value={selectedDepartment}
+            onChange={value => setSelectedDepartment(value as string)}
+            placeholder="Select department..."
+            searchPlaceholder="Search departments..."
+            hoverDelayMs={200}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">Selected: {selectedDepartment || "None"}</div>
+          {hierarchicalSelection && (
+            <div className="al-text-sm al-bg-blue-50 al-p-2 al-rounded">
+              <strong>Hierarchical Selection:</strong>
+              <br />
+              Value: {hierarchicalSelection.value}
+              <br />
+              Label: {hierarchicalSelection.label}
+              <br />
+              {hierarchicalSelection.parent && (
+                <>
+                  Parent: {hierarchicalSelection.parent.label} ({hierarchicalSelection.parent.value}
+                  )
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Department Selection (Multi-Select)</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Multi-select mode also supports hierarchical options. Regular options (Sales/HR) can be
+            selected from dropdown, hierarchical options (Engineering/Design/Marketing) show nested
+            selections on hover.
+          </p>
+          <Combobox
+            options={departmentOptions}
+            value={selectedMultiDepartment}
+            onChange={value => setSelectedMultiDepartment(value as string[])}
+            placeholder="Select departments..."
+            searchPlaceholder="Search departments..."
+            multiSelect={true}
+            showApplyButton={false}
+            hoverDelayMs={300}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Selected:{" "}
+            {selectedMultiDepartment.length > 0 ? selectedMultiDepartment.join(", ") : "None"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxEnhancedAsyncExample: StoryFn = () => {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [multiSelectedValue, setMultiSelectedValue] = useState<string[]>([]);
+  const [displayedOptions, setDisplayedOptions] = useState<Array<{ value: string; label: string }>>(
+    []
+  );
+  const [hasMore, setHasMore] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentSearch, setCurrentSearch] = useState("");
+
+  // Simulate API data
+  const generateApiData = (search: string = "", page: number = 1) => {
+    const allItems = Array.from({ length: 100 }, (_, i) => ({
+      value: `item-${i + 1}`,
+      label: `${search ? "Filtered " : ""}API Item ${i + 1}`,
+    }));
+
+    const filteredItems = search
+      ? allItems.filter(item => item.label.toLowerCase().includes(search.toLowerCase()))
+      : allItems;
+
+    const startIndex = (page - 1) * 20;
+    const endIndex = startIndex + 20;
+    const pageItems = filteredItems.slice(startIndex, endIndex);
+
+    return {
+      items: pageItems,
+      hasMore: endIndex < filteredItems.length,
+      total: filteredItems.length,
+      page,
+    };
+  };
+
+  const handleLoadMore = useCallback(async (searchValue?: string, page?: number) => {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 800));
+
+    const isNewSearch = searchValue !== currentSearch;
+    const targetPage = page || (isNewSearch ? 1 : currentPage + 1);
+
+    const result = generateApiData(searchValue || "", targetPage);
+
+    if (isNewSearch || targetPage === 1) {
+      setDisplayedOptions(result.items);
+    } else {
+      setDisplayedOptions(prev => [...prev, ...result.items]);
+    }
+
+    setHasMore(result.hasMore);
+    setCurrentPage(targetPage);
+    setCurrentSearch(searchValue || "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handlePageReset = () => {
+    setDisplayedOptions([]);
+    setCurrentPage(1);
+    setHasMore(true);
+  };
+
+  const resetDemo = () => {
+    setSelectedValue("");
+    setMultiSelectedValue([]);
+    setDisplayedOptions([]);
+    setCurrentPage(1);
+    setCurrentSearch("");
+    setHasMore(true);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-gap-4 al-items-center">
+        <h3 className="al-text-lg al-font-medium">Enhanced Async Loading</h3>
+        <Button onClick={resetDemo} size="sm" variant="outline">
+          Reset Demo
+        </Button>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-2">
+        <p className="al-text-sm al-text-muted-foreground">
+          NEW FEATURES: Enhanced onLoadMore with search and page parameters, automatic page
+          management, debounced search with page reset, and improved loading states.
+        </p>
+        <div className="al-text-xs al-bg-blue-50 al-p-2 al-rounded">
+          <strong>Try this:</strong> Open dropdown → scroll to load more → search → see how
+          pagination resets → search again
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-6">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Single Select with Enhanced Async</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Page: {currentPage} | Showing: {displayedOptions.length} items | Search: &quot;
+            {currentSearch}&quot; | Has more: {hasMore ? "Yes" : "No"}
+          </p>
+          <Combobox
+            options={displayedOptions}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Select item..."
+            searchPlaceholder="Search items (debounced)..."
+            onLoadMore={handleLoadMore}
+            hasMore={hasMore}
+            onPageReset={handlePageReset}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">Selected: {selectedValue || "None"}</div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi-Select with Enhanced Async</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Multi-select mode with apply button and async loading
+          </p>
+          <Combobox
+            options={displayedOptions}
+            value={multiSelectedValue}
+            onChange={value => setMultiSelectedValue(value as string[])}
+            placeholder="Select multiple items..."
+            searchPlaceholder="Search and select..."
+            multiSelect={true}
+            showApplyButton={true}
+            onLoadMore={handleLoadMore}
+            hasMore={hasMore}
+            onPageReset={handlePageReset}
+            buttonProps={{ className: "al-w-[300px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiSelectedValue.length} items{" "}
+            {multiSelectedValue.length > 0 &&
+              `(${multiSelectedValue.slice(0, 3).join(", ")}${multiSelectedValue.length > 3 ? "..." : ""})`}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxSheetIntegrationExample: StoryFn = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState("");
+  const [multiSelectedValue, setSelectedMultiValue] = useState<string[]>([]);
+
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+    { value: "remix", label: "Remix" },
+    { value: "gatsby", label: "Gatsby" },
+    { value: "ember", label: "Ember.js" },
+    { value: "solid", label: "Solid.js" },
+    { value: "qwik", label: "Qwik" },
+    { value: "alpine", label: "Alpine.js" },
+    { value: "lit", label: "Lit" },
+  ];
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <h3 className="al-text-lg al-font-medium">Sheet Integration</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          BUG FIX: Fixed scrolling issues when Combobox is used inside Sheet components. Added
+          onWheel stopPropagation to prevent scroll conflicts.
+        </p>
+      </div>
+
+      <Button onClick={() => setIsSheetOpen(true)}>Open Sheet with Combobox</Button>
+
+      {/* Note: This is a simulated sheet for the story. In real usage, you'd use the actual Sheet component */}
+      {isSheetOpen && (
+        <div className="al-fixed al-inset-0 al-bg-black/50 al-z-50 al-flex al-items-center al-justify-center">
+          <div className="al-bg-white al-rounded-lg al-p-6 al-w-[500px] al-max-h-[80vh] al-overflow-y-auto">
+            <div className="al-flex al-justify-between al-items-center al-mb-4">
+              <h4 className="al-text-lg al-font-medium">Sheet with Combobox</h4>
+              <Button variant="ghost" size="sm" onClick={() => setIsSheetOpen(false)}>
+                ✕
+              </Button>
+            </div>
+
+            <div className="al-space-y-4">
+              <div className="al-text-sm al-text-muted-foreground">
+                Try scrolling in the combobox dropdown - it should work properly now!
+              </div>
+
+              <div className="al-flex al-flex-col al-gap-2">
+                <label className="al-text-sm al-font-medium">Single Select in Sheet</label>
+                <Combobox
+                  options={options}
+                  value={selectedValue}
+                  onChange={value => setSelectedValue(value as string)}
+                  placeholder="Select framework..."
+                  searchPlaceholder="Search frameworks..."
+                  buttonProps={{ className: "al-w-full" }}
+                />
+                <div className="al-text-xs">Selected: {selectedValue || "None"}</div>
+              </div>
+
+              <div className="al-flex al-flex-col al-gap-2">
+                <label className="al-text-sm al-font-medium">Multi-Select in Sheet</label>
+                <Combobox
+                  options={options}
+                  value={multiSelectedValue}
+                  onChange={value => setSelectedMultiValue(value as string[])}
+                  placeholder="Select frameworks..."
+                  searchPlaceholder="Search frameworks..."
+                  multiSelect={true}
+                  showApplyButton={true}
+                  buttonProps={{ className: "al-w-full" }}
+                />
+                <div className="al-text-xs">
+                  Selected: {multiSelectedValue.length > 0 ? multiSelectedValue.join(", ") : "None"}
+                </div>
+              </div>
+
+              <div className="al-text-xs al-text-muted-foreground al-bg-green-50 al-p-2 al-rounded">
+                ✅ Mouse wheel scrolling now works properly in both comboboxes!
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="al-text-sm">
+        Selected in sheet: {selectedValue || "None"} | Multi:{" "}
+        {multiSelectedValue.join(", ") || "None"}
+      </div>
+    </div>
+  );
+};