@reshape-biotech/design-system 2.7.35 → 2.7.36

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import Plus from 'phosphor-svelte/lib/Plus';
   import List from 'phosphor-svelte/lib/List';
+  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
   import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { userEvent, within } from '@storybook/test';
@@ -10,6 +11,8 @@
   import Divider from '../divider/Divider.svelte';
   import Tag from '../tag/Tag.svelte';
   import Button from '../button/Button.svelte';
+  import Input from '../input/Input.svelte';
+  import Checkbox from '../checkbox/Checkbox.svelte';
 
   const { Story } = defineMeta({
     component: ComboboxRootForMeta,
@@ -60,11 +63,47 @@
   let searchValueSingle = $state('');
   let searchValueGrouped = $state('');
   let searchValueCustom = $state('');
+  let searchValueWithoutWidth = $state('');
+  let searchValueWithWidth = $state('');
 
   let selected = $state<string[]>([]);
   let selectedSingle = $state<string>('');
   let selectedGrouped = $state<string[]>([]);
   let selectedCustom = $state<string[]>([]);
+  let selectedWithoutWidth = $state<string>('');
+  let selectedWithWidth = $state<string>('');
+
+  // Organism pattern story state
+  let selectedOrganisms = $state<string[]>([]);
+  let organismSearchValue = $state('');
+  let organismAnchor = $state<HTMLElement>(null!);
+  
+  const organismItems = [
+    { value: 'e-coli', label: 'E. coli', level: 'species' },
+    { value: 's-aureus', label: 'S. aureus', level: 'species' },
+    { value: 'b-subtilis', label: 'B. subtilis', level: 'species' },
+    { value: 'p-aeruginosa', label: 'P. aeruginosa', level: 'species' },
+  ];
+  const recentItems = [
+    { value: 'e-coli', label: 'E. coli', level: 'species' },
+    { value: 's-aureus', label: 'S. aureus', level: 'species' },
+  ];
+  
+  const filteredOrganismItems = $derived(
+    organismSearchValue === ''
+      ? organismItems
+      : organismItems.filter((item) =>
+          item.label.toLowerCase().includes(organismSearchValue.toLowerCase())
+        )
+  );
+  const isSearchingOrganisms = $derived(organismSearchValue.trim() !== '');
+  const hasExactOrganismMatch = $derived(
+    isSearchingOrganisms &&
+      organismItems.some(
+        (o) => o.label.toLowerCase() === organismSearchValue.trim().toLowerCase()
+      )
+  );
+  const shouldShowCreateNewOrganism = $derived(isSearchingOrganisms && !hasExactOrganismMatch);
 
   const filteredFruits = $derived(
     searchValue === ''
@@ -96,6 +135,22 @@
         )
   );
 
+  const filteredFruitsWithoutWidth = $derived(
+    searchValueWithoutWidth === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueWithoutWidth.toLowerCase())
+        )
+  );
+
+  const filteredFruitsWithWidth = $derived(
+    searchValueWithWidth === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueWithWidth.toLowerCase())
+        )
+  );
+
   const exactMatch = $derived(
     filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
   );
@@ -111,6 +166,8 @@
   let customAnchorSingle = $state<HTMLElement>(null!);
   let customAnchorGrouped = $state<HTMLElement>(null!);
   let customAnchorCustom = $state<HTMLElement>(null!);
+  let customAnchorWithoutWidth = $state<HTMLElement>(null!);
+  let customAnchorWithWidth = $state<HTMLElement>(null!);
 
   // Generate a long list of countries for scrolling demo
   const countries = [
@@ -186,58 +243,58 @@
         </Tag>
       {/each}
     </div>
-    <Combobox.Trigger>
-      <div bind:this={customAnchor}>
-        <IconButton rounded={false}>
+    <div class="flex items-center justify-center">
+      <Combobox.Trigger>
+        <div bind:this={customAnchor}>
+          <IconButton rounded={false}>
           <Icon>
             {#snippet children(props)}
               <Plus {...props} />
             {/snippet}
           </Icon>
-        </IconButton>
-      </div>
-    </Combobox.Trigger>
+          </IconButton>
+        </div>
+      </Combobox.Trigger>
+    </div>
     <Combobox.Content {customAnchor} class="flex flex-col justify-between">
-      <div>
+      {#snippet header()}
         <Combobox.Input
           placeholder="Search a fruit"
           oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
           autofocus
         />
         <Divider />
-      </div>
-      <div class="flex flex-grow flex-col">
-        {#if filteredFruits.length > 0}
-          <Combobox.Group>
-            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-            {#each filteredFruits as fruit (fruit.value)}
-              <Combobox.Item value={fruit.value} label={fruit.label}>
-                {#snippet children({ selected })}
-                  {fruit.label}
-                  {#if selected}
-                    <Combobox.Indicator />
-                  {/if}
-                {/snippet}
-              </Combobox.Item>
-            {:else}
-              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-            {/each}
-          </Combobox.Group>
-        {/if}
-      </div>
-      {#if !exactMatch && searchValue !== ''}
-        <Divider />
-
-        <Combobox.Add
-          onclick={() => {
-            selected.push(searchValue);
-            fruits.push({ value: searchValue, label: searchValue });
-            searchValue = '';
-          }}
-        >
-          <p>Add new fruit</p>
-        </Combobox.Add>
+      {/snippet}
+      {#if filteredFruits.length > 0}
+        <Combobox.Group>
+          <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+          {#each filteredFruits as fruit (fruit.value)}
+            <Combobox.Item value={fruit.value} label={fruit.label}>
+              {#snippet children({ selected })}
+                {fruit.label}
+                {#if selected}
+                  <Combobox.Indicator />
+                {/if}
+              {/snippet}
+            </Combobox.Item>
+          {:else}
+            <span class="block px-5 py-2 text-sm text-secondary text-center"> No results found </span>
+          {/each}
+        </Combobox.Group>
       {/if}
+      {#snippet footer()}
+        {#if !exactMatch && searchValue !== ''}
+          <Combobox.Add
+            onclick={() => {
+              selected.push(searchValue);
+              fruits.push({ value: searchValue, label: searchValue });
+              searchValue = '';
+            }}
+          >
+            <p>Add new fruit</p>
+          </Combobox.Add>
+        {/if}
+      {/snippet}
     </Combobox.Content>
   </Combobox.Root>
 </Story>
@@ -252,13 +309,15 @@
     items={filteredFruitsSingle}
     bind:value={selectedSingle}
   >
-    <Combobox.Trigger>
-      <div bind:this={customAnchorSingle}>
-        <Button variant="secondary" size="sm">
+    <div class="flex items-center justify-center">
+      <Combobox.Trigger>
+        <div bind:this={customAnchorSingle}>
+          <Button variant="secondary" size="sm">
           {selectedSingle ? selectedSingle : 'Select a fruit'}
         </Button>
-      </div>
-    </Combobox.Trigger>
+        </div>
+      </Combobox.Trigger>
+    </div>
     <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
       <div class="flex flex-grow flex-col">
         {#if filteredFruitsSingle.length > 0}
@@ -274,7 +333,7 @@
                 {/snippet}
               </Combobox.Item>
             {:else}
-              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+              <span class="block px-5 py-2 text-sm text-secondary text-center"> No results found </span>
             {/each}
           </Combobox.Group>
         {/if}
@@ -300,9 +359,10 @@
         </Tag>
       {/each}
     </div>
-    <Combobox.Trigger>
-      <div bind:this={customAnchorGrouped}>
-        <Button variant="primary" size="sm">
+    <div class="flex items-center justify-center">
+      <Combobox.Trigger>
+        <div bind:this={customAnchorGrouped}>
+          <Button variant="primary" size="sm">
           <Icon>
             {#snippet children(props)}
               <List {...props} />
@@ -310,18 +370,18 @@
           </Icon>
           Select fruits by category
         </Button>
-      </div>
-    </Combobox.Trigger>
-    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
-      <div>
+        </div>
+      </Combobox.Trigger>
+    </div>
+    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped} matchTriggerWidth>
+      {#snippet header()}
         <Combobox.Input
           placeholder="Search across categories"
           oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
           autofocus
         />
         <Divider />
-      </div>
-      <div class="flex flex-grow flex-col">
+      {/snippet}
         {#if searchValueGrouped === ''}
           {#each categories as category}
             <Combobox.Group>
@@ -358,7 +418,6 @@
         {:else}
           <span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
         {/if}
-      </div>
     </Combobox.Content>
   </Combobox.Root>
 </Story>
@@ -380,9 +439,10 @@
         </Tag>
       {/each}
     </div>
-    <Combobox.Trigger>
-      <div bind:this={customAnchorCountries}>
-        <Button variant="primary" size="sm">
+    <div class="flex items-center justify-center">
+      <Combobox.Trigger>
+        <div bind:this={customAnchorCountries}>
+          <Button variant="primary" size="sm">
           <Icon>
             {#snippet children(props)}
               <List {...props} />
@@ -390,39 +450,38 @@
           </Icon>
           Select countries
         </Button>
-      </div>
-    </Combobox.Trigger>
+        </div>
+      </Combobox.Trigger>
+    </div>
     <Combobox.Content
       class="flex flex-col justify-between"
       customAnchor={customAnchorCountries}
     >
-      <div>
+      {#snippet header()}
         <Combobox.Input
           placeholder="Search for a country"
           oninput={(e: Event) => (searchValueCountries = (e.target as HTMLInputElement).value)}
           autofocus
         />
         <Divider />
-      </div>
-      <div class="flex flex-grow flex-col">
-        {#if filteredCountries.length > 0}
-          <Combobox.Group>
-            <Combobox.GroupHeading>Countries</Combobox.GroupHeading>
-            {#each filteredCountries as country (country.value)}
-              <Combobox.Item value={country.value} label={country.label}>
-                {#snippet children({ selected })}
-                  {country.label}
-                  {#if selected}
-                    <Combobox.Indicator />
-                  {/if}
-                {/snippet}
-              </Combobox.Item>
-            {/each}
-          </Combobox.Group>
-        {:else}
-          <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-        {/if}
-      </div>
+      {/snippet}
+      {#if filteredCountries.length > 0}
+        <Combobox.Group>
+          <Combobox.GroupHeading>Countries</Combobox.GroupHeading>
+          {#each filteredCountries as country (country.value)}
+            <Combobox.Item value={country.value} label={country.label}>
+              {#snippet children({ selected })}
+                {country.label}
+                {#if selected}
+                  <Combobox.Indicator />
+                {/if}
+              {/snippet}
+            </Combobox.Item>
+          {/each}
+        </Combobox.Group>
+      {:else}
+        <span class="block px-5 py-2 text-sm text-secondary text-center"> No results found </span>
+      {/if}
     </Combobox.Content>
     <div class="mt-4 rounded bg-blue-50 p-2 text-xs text-blue-700">
       This story demonstrates the 80vh max-height with overflow scrolling for long lists (40 countries).
@@ -509,23 +568,25 @@
           </Tag>
         {/each}
       </div>
-      <Combobox.Trigger data-testid="combobox-trigger">
-        <div bind:this={customAnchor}>
-          <IconButton rounded={false}>
+      <div class="flex items-center justify-center">
+        <Combobox.Trigger data-testid="combobox-trigger">
+          <div bind:this={customAnchor}>
+            <IconButton rounded={false}>
             <Icon>
               {#snippet children(props)}
                 <Plus {...props} />
               {/snippet}
             </Icon>
           </IconButton>
-        </div>
-      </Combobox.Trigger>
+          </div>
+        </Combobox.Trigger>
+      </div>
       <Combobox.Content
         {customAnchor}
         class="flex flex-col justify-between"
         data-testid="combobox-content"
       >
-        <div>
+        {#snippet header()}
           <Combobox.Input
             placeholder="Search a fruit"
             oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
@@ -533,17 +594,85 @@
             data-testid="combobox-input"
           />
           <Divider />
+        {/snippet}
+        {#if filteredFruits.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+            {#each filteredFruits as fruit (fruit.value)}
+              <Combobox.Item
+                value={fruit.value}
+                label={fruit.label}
+                data-testid={`fruit-option-${fruit.value}`}
+              >
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {:else}
+              <span class="block px-5 py-2 text-sm text-secondary text-center">
+                No results found
+              </span>
+            {/each}
+          </Combobox.Group>
+        {/if}
+        {#snippet footer()}
+          {#if !exactMatch && searchValue !== ''}
+            <Combobox.Add
+              data-testid="add-new-fruit"
+              onclick={() => {
+                selected.push(searchValue);
+                fruits.push({ value: searchValue, label: searchValue });
+                searchValue = '';
+              }}
+            >
+              <p>Add new fruit</p>
+            </Combobox.Add>
+          {/if}
+        {/snippet}
+      </Combobox.Content>
+    </Combobox.Root>
+  </div>
+</Story>
+
+<Story name="Width Comparison" asChild>
+  <div class="flex gap-8 p-8">
+    <div class="flex flex-1 flex-col gap-4">
+      <p class="font-medium text-center text-secondary">matchTriggerWidth: false</p>
+      <Combobox.Root
+        onOpenChange={(o) => {
+          if (!o) searchValueWithoutWidth = '';
+        }}
+        type="single"
+        name="withoutWidth"
+        items={filteredFruitsWithoutWidth}
+        bind:value={selectedWithoutWidth}
+      >
+        <div class="flex w-full items-center justify-center">
+          <Combobox.Trigger class="w-full">
+            <div bind:this={customAnchorWithoutWidth} class="w-full">
+              <Button variant="secondary" size="sm" class="w-full">
+                Select a fruit
+              </Button>
+            </div>
+          </Combobox.Trigger>
         </div>
-        <div class="flex flex-grow flex-col">
-          {#if filteredFruits.length > 0}
+        <Combobox.Content customAnchor={customAnchorWithoutWidth}>
+          {#snippet header()}
+            <Combobox.Input
+              placeholder="Search a fruit"
+              oninput={(e: Event) => (searchValueWithoutWidth = (e.target as HTMLInputElement).value)}
+              autofocus
+            />
+            <Divider />
+          {/snippet}
+          {#if filteredFruitsWithoutWidth.length > 0}
             <Combobox.Group>
               <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-              {#each filteredFruits as fruit (fruit.value)}
-                <Combobox.Item
-                  value={fruit.value}
-                  label={fruit.label}
-                  data-testid={`fruit-option-${fruit.value}`}
-                >
+              {#each filteredFruitsWithoutWidth as fruit (fruit.value)}
+                <Combobox.Item value={fruit.value} label={fruit.label}>
                   {#snippet children({ selected })}
                     {fruit.label}
                     {#if selected}
@@ -551,29 +680,171 @@
                     {/if}
                   {/snippet}
                 </Combobox.Item>
-              {:else}
-                <span class="block px-5 py-2 text-sm text-muted-foreground">
-                  No results found
-                </span>
               {/each}
             </Combobox.Group>
           {/if}
-        </div>
-        {#if !exactMatch && searchValue !== ''}
-          <Divider />
+        </Combobox.Content>
+      </Combobox.Root>
+    </div>
 
-          <Combobox.Add
-            data-testid="add-new-fruit"
-            onclick={() => {
-              selected.push(searchValue);
-              fruits.push({ value: searchValue, label: searchValue });
-              searchValue = '';
-            }}
-          >
-            <p>Add new fruit</p>
-          </Combobox.Add>
-        {/if}
-      </Combobox.Content>
-    </Combobox.Root>
+    <div class="flex flex-1 flex-col gap-4">
+      <p class="font-medium text-center text-secondary">matchTriggerWidth: true</p>
+      <Combobox.Root
+        onOpenChange={(o) => {
+          if (!o) searchValueWithWidth = '';
+        }}
+        type="single"
+        name="withWidth"
+        items={filteredFruitsWithWidth}
+        bind:value={selectedWithWidth}
+      >
+        <div class="flex w-full items-center justify-center">
+          <Combobox.Trigger class="w-full">
+            <div bind:this={customAnchorWithWidth} class="w-full">
+              <Button variant="secondary" size="sm" class="w-full">
+                Select a fruit
+              </Button>
+            </div>
+          </Combobox.Trigger>
+        </div>
+        <Combobox.Content matchTriggerWidth={true} customAnchor={customAnchorWithWidth}>
+          {#snippet header()}
+            <Combobox.Input
+              placeholder="Search a fruit"
+              oninput={(e: Event) => (searchValueWithWidth = (e.target as HTMLInputElement).value)}
+              autofocus
+            />
+            <Divider />
+          {/snippet}
+          {#if filteredFruitsWithWidth.length > 0}
+            <Combobox.Group>
+              <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+              {#each filteredFruitsWithWidth as fruit (fruit.value)}
+                <Combobox.Item value={fruit.value} label={fruit.label}>
+                  {#snippet children({ selected })}
+                    {fruit.label}
+                    {#if selected}
+                      <Combobox.Indicator />
+                    {/if}
+                  {/snippet}
+                </Combobox.Item>
+              {/each}
+            </Combobox.Group>
+          {/if}
+        </Combobox.Content>
+      </Combobox.Root>
+    </div>
   </div>
 </Story>
+
+<Story name="Organism Pattern (Simplified)" asChild>
+
+    <div class="flex items-center justify-center p-8">
+      <div class="w-full max-w-md">
+
+      <Combobox.Root
+        type="multiple"
+        value={selectedOrganisms}
+        name="organism"
+        onOpenChange={(open) => {
+          if (!open) {
+            organismSearchValue = '';
+          }
+        }}
+        onValueChange={(value) => {
+          selectedOrganisms = value;
+        }}
+        allowDeselect
+      >
+        <Combobox.Trigger
+          class="w-full rounded-lg border border-dashed border-input bg-transparent text-secondary hover:border-interactive hover:bg-neutral hover:text-primary"
+        >
+          <div bind:this={organismAnchor} class="flex w-full flex-row items-center justify-center gap-2 py-2">
+            <Icon icon={Plus} color="secondary" />
+            <span>Add organism</span>
+          </div>
+        </Combobox.Trigger>
+        <Combobox.Content
+          customAnchor={organismAnchor}
+          class="flex max-h-[400px] min-w-[var(--bits-combobox-anchor-width)] w-[var(--bits-combobox-anchor-width)] flex-col justify-between"
+          portalled={false}
+          align="start"
+          matchTriggerWidth={true}
+        >
+          {#snippet header()}
+            <Combobox.Input>
+              {#snippet child()}
+                <Input
+                  autofocus
+                  size="md"
+                  variant="borderless"
+                  clearable
+                  placeholder="Search for organism..."
+                  bind:value={organismSearchValue}
+                >
+                  {#snippet prefix()}
+                    <Icon icon={MagnifyingGlass} class="flex pl-2"/>
+                  {/snippet}
+                </Input>
+              {/snippet}
+            </Combobox.Input>
+            <Divider />
+          {/snippet}
+
+          {#if isSearchingOrganisms}
+            {#if filteredOrganismItems.length > 0}
+              <Combobox.Group>
+                {#each filteredOrganismItems as organism}
+                  <Combobox.Item value={organism.value} label={organism.label}>
+                    {#snippet children({ selected })}
+                      <div class="flex w-full flex-row items-center justify-between">
+                        <span class="flex flex-row items-center gap-3">
+                          <Checkbox checked={selected} />
+                          <span>{organism.label}</span>
+                        </span>
+                        <Tag size="xs" variant="default">{organism.level}</Tag>
+                      </div>
+                    {/snippet}
+                  </Combobox.Item>
+                {/each}
+              </Combobox.Group>
+            {/if}
+          {:else}
+            <Combobox.Group>
+              <Combobox.GroupHeading>Recently used</Combobox.GroupHeading>
+              {#each recentItems as organism}
+                <Combobox.Item value={organism.value} label={organism.label}>
+                  {#snippet children({ selected })}
+                    <div class="flex w-full flex-row items-center justify-between gap-2">
+                      <span class="flex flex-row items-center gap-3">
+                        <Checkbox checked={selected} />
+                        {organism.label}
+                      </span>
+                      <Tag size="xs">{organism.level}</Tag>
+                    </div>
+                  {/snippet}
+                </Combobox.Item>
+              {/each}
+            </Combobox.Group>
+          {/if}
+
+          {#snippet footer()}
+            {#if shouldShowCreateNewOrganism}
+              <Combobox.Add>
+                <p>Create new organism: <span class="font-medium">"{organismSearchValue}"</span></p>
+              </Combobox.Add>
+            {/if}
+          {/snippet}
+        </Combobox.Content>
+      </Combobox.Root>
+
+      {#if selectedOrganisms.length > 0}
+        <div class="mt-4 flex flex-wrap gap-2">
+          {#each selectedOrganisms as value}
+            <Tag>{organismItems.find((o) => o.value === value)?.label || value}</Tag>
+          {/each}
+        </div>
+      {/if}
+      </div>
+    </div>
+</Story>