@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

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

@@ -7,6 +7,7 @@
     ClipboardEventHandler,
     FocusEventHandler,
     FormEventHandler,
+    KeyboardEventHandler,
     MouseEventHandler,
   } from 'svelte/elements';
 
@@ -16,6 +17,8 @@
     disabled?: boolean;
   };
 
+  export type SelectDropdownArrowPosition = false | 'before' | 'after';
+
   export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -71,12 +74,22 @@
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (val: SelectOption) => Snippet;
     /** 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 +102,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 +123,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';
@@ -126,6 +153,9 @@
     onpaste,
     oncopy,
     oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
     before,
     after,
     error = false,
@@ -141,37 +171,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 +236,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 +302,9 @@
     }
   }
 
-  function onKeyBoardEnter(selectedItemIndex: number) {
+  function onKeyBoardEnter(e: KeyboardEvent, selectedItemIndex: number) {
+    e.preventDefault();
+
     const targetOption = options[selectedItemIndex];
 
     if (!targetOption) {
@@ -270,106 +315,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 +366,12 @@
         {before}
         {after}
       >
+        {#if dropdownArrowPosition === 'before'}
+          <div class:before class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
+
         <DynamicInput
           type="text"
           {name}
@@ -405,6 +385,9 @@
           {onpaste}
           {oncopy}
           {oncut}
+          {onkeydown}
+          {onkeypress}
+          {onkeyup}
           {placeholder}
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}
@@ -426,43 +409,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 +468,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 +486,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 +504,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>

package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput, {
+    type TextInputClipboardEvent,
+    type TextInputFocusEvent,
+    type TextInputKeyboardEvent,
+  } from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: TextInput,
+    tags: ['autodocs'],
+    argTypes: storyTextInputArgTypes,
+  });
+</script>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+/>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+/>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+/>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+/>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: TextInput,
+    tags: ['autodocs'],
+    argTypes: storyTextInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />