@flightlesslabs/dodo-ui 0.7.2 → 0.8.0

package/src/lib/stories/components/Form/Select/Select.stories.svelte

@@ -0,0 +1,121 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select, { type SelectOption } from './Select.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storySelectArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  export const selectOptions: SelectOption[] = [
+    {
+      value: 1,
+      label: 'One',
+    },
+    {
+      value: 2,
+      label: 'Two',
+    },
+    {
+      value: 3,
+      label: 'Three',
+    },
+    {
+      value: 4,
+      label: 'Four',
+    },
+    {
+      value: 5,
+      label: 'Five',
+    },
+    {
+      value: 6,
+      label: 'Six',
+      disabled: true,
+    },
+    {
+      value: 7,
+      label: 'Seven',
+    },
+    {
+      value: 8,
+      label: 'Eight',
+    },
+    {
+      value: 9,
+      label: 'Nine',
+    },
+  ];
+
+  const options = selectOptions;
+
+  let value = $state<SelectOption | undefined>(options[0]);
+</script>
+
+<!-- Select with default style -->
+<Story name="Default" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)} />
+</Story>
+
+<Story name="Searchable" asChild>
+  <Select
+    {options}
+    {value}
+    searchable
+    optionsPlaceholder="No results"
+    onselect={(val: SelectOption) => (value = val)}
+  />
+</Story>
+
+<Story name="Clearable" asChild>
+  <Select
+    {options}
+    {value}
+    clearable
+    onselect={(val: SelectOption) => (value = val)}
+    onclear={() => (value = undefined)}
+    placeholder="Select option"
+  />
+</Story>
+
+<Story name="PopupMaxHeight" asChild>
+  <Select
+    {options}
+    {value}
+    onselect={(val: SelectOption) => (value = val)}
+    popupMaxHeight="200px"
+  />
+</Story>
+
+<!-- Format look and feel of input content. [More Customizations](?path=/docs/components-form-select-customize--docs)  -->
+<Story name="CustomInputContent" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customInputContent(selectedOption)}
+      {selectedOption.label} 💯💯💯
+    {/snippet}
+  </Select>
+</Story>

package/src/lib/stories/components/Form/Select/Select.svelte

@@ -16,6 +16,8 @@
     disabled?: boolean;
   };
 
+  export type SelectDropdownArrowPosition = false | 'before' | 'after';
+
   export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -76,7 +78,11 @@
     /** custom Content Formatting for variant button */
     customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
     /** Custom Popup Content */
-    customPopupContent?: (options: SelectOption[], selectedOption: SelectOption) => Snippet;
+    customPopupContent?: (
+      options: SelectOption[],
+      selectedOption: SelectOption,
+      onselect: (val: SelectOption) => void,
+    ) => Snippet;
     /** custom Content Formatting for variant button */
     customPlaceholderMenuItemContent?: () => Snippet;
     /** PopperPopup Max height. Use css compatible value */
@@ -89,6 +95,18 @@
     menuProps?: Partial<MenuProps>;
     /** MenuItem: Menu component props */
     menuItemProps?: Partial<MenuItemProps>;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
   }
 </script>
 
@@ -98,14 +116,16 @@
   import Icon from '@iconify/svelte';
   import {
     DynamicInput,
-    Menu,
-    MenuItem,
+    DynamicMenu,
     Popper,
     type DynamicInputFocusEvent,
+    type DynamicMenuItemOption,
     type MenuItemProps,
     type MenuProps,
     type PaperProps,
     type PopperProps,
+    type PositionX,
+    type PositionY,
   } from '$lib/index.js';
   import type { TextInputInputEvent } from '../TextInput/TextInput.svelte';
   import type { ButtonClickEvent } from '../Button/Button.svelte';
@@ -141,37 +161,56 @@
     customMenuItemContent: customMenuItemContentInternal,
     customPopupContent: customPopupContentInternal,
     customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal,
+    customDropdownArrowIcon: customDropdownArrowIconInternal,
     popupMaxHeight = '300px',
     paperProps,
     popperProps,
     menuProps,
     menuItemProps,
     optionsPlaceholder = 'No Options',
+    dropdownArrowPosition = 'after',
+    popupPositionX,
+    popupPositionY,
+    lockPoistions,
+    popperHeightForVerticalPosition,
   }: SelectProps = $props();
 
+  function convertOptionsToDynamicMenuItemOptions(
+    options: SelectOption[],
+  ): DynamicMenuItemOption<SelectOption>[] {
+    const newOptions: DynamicMenuItemOption<SelectOption>[] = options.map((option) => ({
+      id: `opt-${option.value}`,
+      disabled: option.disabled,
+      label: option.label,
+      meta: option,
+      type: 'button',
+    }));
+
+    return newOptions;
+  }
+
   let open: boolean = $state(false);
   let onInputStart: boolean = $state(false);
   const selectedOption = $derived(value);
   let searchTerm = $state(value?.label.trim() || '');
-  let options = $state(optionsRaw);
+  let options = $state(convertOptionsToDynamicMenuItemOptions(optionsRaw));
   let menuRef = $state<HTMLUListElement | undefined>(undefined);
-  let menuItemIndex = $state(0);
 
   $effect(() => {
     if (!onInputStart) {
-      options = optionsRaw;
+      options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
       return;
     }
 
     const searchTermSimplified = searchTerm.trim().toLowerCase();
 
     if (!searchTermSimplified) {
-      options = optionsRaw;
+      options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
       return;
     }
 
-    options = optionsRaw.filter((item) =>
-      item.label.trim().toLowerCase().includes(searchTermSimplified),
+    options = convertOptionsToDynamicMenuItemOptions(optionsRaw).filter((item) =>
+      item?.meta?.label.trim().toLowerCase().includes(searchTermSimplified),
     );
   });
 
@@ -187,23 +226,17 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal as any;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customDropdownArrowIconTyped = customDropdownArrowIconInternal as any;
+
   function closeMenu() {
     open = false;
-    menuItemIndex = 0;
 
     ref?.blur();
   }
 
   function openMenu() {
     open = true;
-
-    const menuItemIndexNew = options.findIndex((item) => item.value === selectedOption?.value);
-
-    if (menuItemIndexNew < 0) {
-      menuItemIndex = 0;
-    } else {
-      menuItemIndex = menuItemIndexNew;
-    }
   }
 
   function onfocusMod(e: DynamicInputFocusEvent) {
@@ -259,7 +292,9 @@
     }
   }
 
-  function onKeyBoardEnter(selectedItemIndex: number) {
+  function onKeyBoardEnter(e: KeyboardEvent, selectedItemIndex: number) {
+    e.preventDefault();
+
     const targetOption = options[selectedItemIndex];
 
     if (!targetOption) {
@@ -270,106 +305,35 @@
       return;
     }
 
-    onselectMod(targetOption);
-  }
-
-  function onKeyboardNavigation(e: KeyboardEvent) {
-    let keyHit: string | undefined = undefined;
-
-    if (!menuRef) {
-      return;
-    }
-
-    if (!open) {
-      return;
-    }
-
-    switch (e.key) {
-      case 'ArrowDown':
-      case 'ArrowUp':
-      case 'Enter':
-        keyHit = e.key;
-        e.preventDefault();
-        break;
-      default:
-        break;
-    }
-
-    if (!keyHit) {
-      return;
-    }
-
-    const listItems = menuRef.querySelectorAll(':scope > li.dodo-ui-MenuItem');
-
-    if (!listItems.length) {
-      return;
-    }
-
-    for (let index = 0; index < listItems.length; index++) {
-      const element = listItems[index];
-
-      element.classList.remove('hover');
-    }
-
-    let newMenuItemIndex = menuItemIndex;
-
-    if (keyHit === 'ArrowDown') {
-      if (listItems[newMenuItemIndex + 1]) {
-        newMenuItemIndex = newMenuItemIndex + 1;
-      } else {
-        newMenuItemIndex = 0;
-      }
-    } else if (keyHit === 'ArrowUp') {
-      if (listItems[newMenuItemIndex - 1]) {
-        newMenuItemIndex = newMenuItemIndex - 1;
-      } else {
-        newMenuItemIndex = listItems.length - 1;
-      }
-    } else if (keyHit === 'Enter') {
-      onKeyBoardEnter(newMenuItemIndex);
-      return;
-    }
-
-    const targetItem = listItems[newMenuItemIndex] as HTMLLIElement;
-
-    targetItem.classList.add('hover');
-
-    targetItem.focus();
-    targetItem.scrollIntoView({ block: 'nearest' });
-
-    menuItemIndex = newMenuItemIndex;
+    onselectMod(targetOption.meta as SelectOption);
   }
-
-  $effect(() => {
-    if (!menuRef) {
-      return;
-    }
-
-    if (!open) {
-      return;
-    }
-
-    const targetItem = menuRef.querySelector(':scope > li.dodo-ui-MenuItem.selected') as
-      | HTMLLIElement
-      | undefined;
-
-    if (targetItem) {
-      targetItem.classList.add('hover');
-
-      targetItem.focus();
-      targetItem.scrollIntoView({ block: 'nearest' });
-    }
-
-    window.addEventListener('keydown', onKeyboardNavigation);
-
-    return () => {
-      window.removeEventListener('keydown', onKeyboardNavigation);
-    };
-  });
 </script>
 
+{#snippet selectDropdownArrowIcon()}
+  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
+    {#if customDropdownArrowIconTyped}
+      {@render customDropdownArrowIconTyped(open)}
+    {:else if open}
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="28" height="28" />
+    {:else}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="28" height="28" />
+    {/if}
+  </UtilityButton>
+{/snippet}
+
 <div class={['dodo-ui-Select', className].join(' ')}>
-  <Popper fullWidth {open} {onClickOutside} {...popperProps} {popupMaxHeight} {paperProps}>
+  <Popper
+    fullWidth
+    {open}
+    {onClickOutside}
+    {...popperProps}
+    {popupMaxHeight}
+    {popupPositionX}
+    {popupPositionY}
+    {paperProps}
+    {lockPoistions}
+    {popperHeightForVerticalPosition}
+  >
     <div
       class:outline
       class:disabled
@@ -392,6 +356,12 @@
         {before}
         {after}
       >
+        {#if dropdownArrowPosition === 'before'}
+          <div class:before class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
+
         <DynamicInput
           type="text"
           {name}
@@ -426,43 +396,50 @@
             </UtilityButton>
           </div>
         {/if}
+
+        {#if dropdownArrowPosition === 'after'}
+          <div class:after class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
       </InputEnclosure>
     </div>
 
     {#snippet popupChildren()}
       {#if customPopupContentTyped}
-        {@render customPopupContentTyped(options, selectedOption)}
+        {@render customPopupContentTyped(optionsRaw, selectedOption, onselectMod)}
       {:else}
-        <Menu bind:ref={menuRef} {...menuProps}>
-          {#if options.length}
-            {#each options as option (option.value)}
-              <MenuItem
-                onclick={() => onselectMod(option)}
-                type="button"
-                disabled={option.disabled}
-                selected={selectedOption?.value === option.value}
-                {...menuItemProps}
-              >
-                {#if customMenuItemContentTyped}
-                  {@render customMenuItemContentTyped(
-                    option,
-                    selectedOption?.value === option.value,
-                  )}
-                {:else}
-                  {option.label}
-                {/if}
-              </MenuItem>
-            {/each}
-          {:else}
-            <MenuItem type="text" disabled={true} {...menuItemProps}>
-              {#if customPlaceholderMenuItemContentTyped}
-                {@render customPlaceholderMenuItemContentTyped()}
-              {:else}
-                {optionsPlaceholder}
-              {/if}
-            </MenuItem>
-          {/if}
-        </Menu>
+        <DynamicMenu
+          bind:ref={menuRef}
+          {menuItemProps}
+          {options}
+          keyboardNavigation
+          onEnter={onKeyBoardEnter}
+          selectedOption={options.find((item) => item.meta?.value === selectedOption?.value)}
+          onclick={(_e, option: DynamicMenuItemOption) => onselectMod(option.meta as SelectOption)}
+          showOptionsPlaceholder
+          {...menuProps}
+        >
+          {#snippet customMenuItemContent(option, selectedOption)}
+            {#if customMenuItemContentTyped}
+              {@render customMenuItemContentTyped(
+                option?.meta as SelectOption,
+                (selectedOption?.meta as SelectOption).value ===
+                  (option?.meta as SelectOption).value,
+              )}
+            {:else}
+              {(option?.meta as SelectOption).label}
+            {/if}
+          {/snippet}
+
+          {#snippet customPlaceholderMenuItemContent()}
+            {#if customPlaceholderMenuItemContentTyped}
+              {@render customPlaceholderMenuItemContentTyped()}
+            {:else}
+              {optionsPlaceholder}
+            {/if}
+          {/snippet}
+        </DynamicMenu>
       {/if}
     {/snippet}
   </Popper>
@@ -478,6 +455,16 @@
               margin-right: calc(var(--dodo-ui-space-small) * 2);
             }
           }
+
+          .DropdownArrow {
+            &.after {
+              margin-right: calc(var(--dodo-ui-space-small) * 2);
+            }
+
+            &.before {
+              margin-right: calc(var(--dodo-ui-space-small) * 2);
+            }
+          }
         }
 
         &--small {
@@ -486,6 +473,16 @@
               margin-right: var(--dodo-ui-space);
             }
           }
+
+          .DropdownArrow {
+            &.after {
+              margin-right: var(--dodo-ui-space);
+            }
+
+            &.before {
+              margin-right: var(--dodo-ui-space);
+            }
+          }
         }
 
         &--large {
@@ -494,6 +491,16 @@
               margin-right: calc(var(--dodo-ui-space) * 2);
             }
           }
+
+          .DropdownArrow {
+            &.after {
+              margin-right: calc(var(--dodo-ui-space) * 2);
+            }
+
+            &.before {
+              margin-right: calc(var(--dodo-ui-space) * 2);
+            }
+          }
         }
       }
     }

package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select, { type SelectOption } from '../Select.svelte';
+  import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  const options = selectOptions;
+
+  let value = $state<SelectOption>(options[0]);
+</script>
+
+<Story name="Normal" args={{ options, value }} />
+<Story name="Small" args={{ options, value, size: 'small' }} />
+<Story name="Large" args={{ options, value, size: 'large' }} />

package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select, { type SelectOption } from '../Select.svelte';
+  import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  const options = selectOptions;
+
+  let value = $state<SelectOption>(options[0]);
+</script>
+
+<!-- Select icon in front. -->
+<Story name="Icon Before" asChild>
+  <Select {value} {options}>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Select icon in front. -->
+<Story name="Icon After" asChild>
+  <Select {value} {options}>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </Select>
+</Story>