@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte

@@ -1,262 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { MenuItemProps, MenuItemType } from '../MenuItem/MenuItem.svelte';
-
-  export type DynamicMenuItemOption<TMeta = unknown> = {
-    id: string;
-    /** label  */
-    label?: string;
-    /** Custom Metadata  */
-    meta?: TMeta;
-    /** Menu Item type */
-    type?: MenuItemType;
-    /** Menu Separator */
-    separator?: boolean;
-    /** How large should the Menu Items be? */
-    size?: ComponentSize;
-    /** The onclick event handler */
-    onclick?: MouseEventHandler<HTMLButtonElement>;
-    /**  disabled state */
-    disabled?: boolean;
-    /** link href */
-    href?: string;
-    /** Link button: download  */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    download?: any;
-    /** Link button: hreflang  */
-    hreflang?: string | undefined | null;
-    /** Link button: media  */
-    media?: string | undefined | null;
-    /** Link button: ping  */
-    ping?: string | undefined | null;
-    /** Link button: rel  */
-    rel?: string | undefined | null;
-    /** Link button: target  */
-    target?: ButtonLinkTarget;
-    /** Link button: Type  */
-    anchorMediaType?: string | undefined | null;
-    /** Link button: referrerpolicy  */
-    referrerpolicy?: ButtonLinkReferrerpolicy;
-  };
-
-  export interface DynamicMenuProps {
-    /** Menu ref */
-    ref?: HTMLUListElement;
-    /** Custom css class */
-    class?: string;
-    /** Menu Width */
-    width?: string;
-    /** Menu Height */
-    height?: string;
-    /** How large should the Menu Items be? */
-    size?: ComponentSize;
-    /** Menu Separator */
-    separator?: boolean;
-    /** Id */
-    id?: string;
-    /** Options */
-    options?: DynamicMenuItemOption[];
-    /** Selected Option */
-    selectedOption?: DynamicMenuItemOption;
-    /** Custom Menu Item Content */
-    customMenuItemContent?: (
-      option: DynamicMenuItemOption,
-      selectedOption?: DynamicMenuItemOption,
-    ) => Snippet;
-    /** Show Placeholder if no options */
-    showOptionsPlaceholder?: boolean;
-    /** placeholder Text if no options */
-    optionsPlaceholder?: string;
-    /** Custom Menu Item Placeholder Content */
-    customPlaceholderMenuItemContent?: () => Snippet;
-    /** MenuItem: Menu component props */
-    menuItemProps?: Partial<MenuItemProps>;
-    /** Enable Keyboard Navigation */
-    keyboardNavigation?: boolean;
-    /** Keyboard Navigation onEnter */
-    onEnter?: (e: KeyboardEvent, menuItemIndex: number) => void;
-    /** Keyboard Navigation onEsc */
-    onEsc?: (e: KeyboardEvent, menuItemIndex: number) => void;
-    /** On menu item click */
-    onclick?: (e: MouseEvent, option: DynamicMenuItemOption) => void;
-  }
-</script>
-
-<script lang="ts">
-  import Menu from '../Menu.svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-  import type {
-    ButtonLinkReferrerpolicy,
-    ButtonLinkTarget,
-  } from '$lib/stories/components/Form/Button/Button.svelte';
-  import { MenuItem } from '$lib/index.js';
-  import type { Snippet } from 'svelte';
-
-  let {
-    id,
-    class: className = '',
-    ref = $bindable<HTMLUListElement>(),
-    size,
-    separator,
-    width,
-    height,
-    options,
-    selectedOption,
-    customMenuItemContent,
-    customPlaceholderMenuItemContent,
-    menuItemProps,
-    keyboardNavigation = false,
-    onEnter,
-    onEsc,
-    onclick,
-    showOptionsPlaceholder = false,
-    optionsPlaceholder = 'No options found',
-  }: DynamicMenuProps = $props();
-
-  let menuItemIndex = $state(0);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customMenuItemContentTyped = customMenuItemContent as any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContent as any;
-
-  function onKeyboardNavigation(e: KeyboardEvent) {
-    let keyHit: string | undefined = undefined;
-
-    if (!ref) {
-      return;
-    }
-
-    switch (e.key) {
-      case 'ArrowDown':
-      case 'ArrowUp':
-        keyHit = e.key;
-        e.preventDefault();
-        break;
-      case 'Enter':
-      case 'Esc':
-        keyHit = e.key;
-        break;
-      default:
-        break;
-    }
-
-    if (!keyHit) {
-      return;
-    }
-
-    if (keyHit === 'Enter') {
-      if (onEnter) {
-        onEnter(e, menuItemIndex);
-      }
-
-      return;
-    } else if (keyHit === 'Escape') {
-      if (onEsc) {
-        onEsc(e, menuItemIndex);
-      }
-
-      return;
-    }
-
-    const listItems = ref.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;
-      }
-    }
-
-    const targetItem = listItems[newMenuItemIndex] as HTMLLIElement;
-
-    targetItem.classList.add('hover');
-
-    targetItem.focus();
-    targetItem.scrollIntoView({ block: 'nearest' });
-
-    menuItemIndex = newMenuItemIndex;
-  }
-
-  $effect(() => {
-    if (!keyboardNavigation) {
-      return;
-    }
-
-    const targetItem = ref.querySelector(':scope > li.dodo-ui-MenuItem.selected') as
-      | HTMLLIElement
-      | undefined;
-
-    if (targetItem) {
-      const selectedIndex = options?.findIndex((option) => option.id === selectedOption?.id);
-
-      if (selectedIndex !== undefined && selectedIndex >= 0) {
-        menuItemIndex = selectedIndex;
-      }
-
-      targetItem.focus();
-      targetItem.scrollIntoView({ block: 'nearest' });
-    }
-
-    window.addEventListener('keydown', onKeyboardNavigation);
-
-    return () => {
-      window.removeEventListener('keydown', onKeyboardNavigation);
-    };
-  });
-</script>
-
-<Menu
-  class={['dodo-ui-DynamicMenu', className].join(' ')}
-  {id}
-  {size}
-  {width}
-  {height}
-  {separator}
-  bind:ref
->
-  {#if options?.length}
-    {#each options as option (option.id)}
-      <MenuItem
-        {...option}
-        selected={selectedOption?.id === option.id}
-        onclick={(e) => (onclick ? onclick(e, option) : undefined)}
-        {...menuItemProps}
-      >
-        {#if customMenuItemContentTyped}
-          {@render customMenuItemContentTyped(option, selectedOption)}
-        {:else}
-          {option.label || ''}
-        {/if}
-      </MenuItem>
-    {/each}
-  {:else if showOptionsPlaceholder}
-    <MenuItem type="text" disabled={true} {...menuItemProps}>
-      {#if customPlaceholderMenuItemContentTyped}
-        {@render customPlaceholderMenuItemContentTyped()}
-      {:else}
-        {optionsPlaceholder}
-      {/if}
-    </MenuItem>
-  {/if}
-</Menu>

package/src/lib/stories/components/Layout/Menu/Menu.svelte

@@ -1,65 +0,0 @@
-<script lang="ts" module>
-  import { type Snippet } from 'svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-
-  export interface MenuProps {
-    /** Menu contents goes here */
-    children?: Snippet;
-    /** Menu ref */
-    ref?: HTMLUListElement;
-    /** Custom css class */
-    class?: string;
-    /** Menu Width */
-    width?: string;
-    /** Menu Height */
-    height?: string;
-    /** How large should the Menu Items be? */
-    size?: ComponentSize;
-    /** Menu Separator */
-    separator?: boolean;
-    /** Id */
-    id?: string;
-  }
-</script>
-
-<script lang="ts">
-  import { setContext } from 'svelte';
-
-  let {
-    children,
-    id,
-    class: className = '',
-    width,
-    height,
-    ref = $bindable<HTMLUListElement>(),
-    size,
-    separator,
-  }: MenuProps = $props();
-
-  setContext('MenuItemSize', () => size);
-  setContext('MenuItemSeparator', () => separator);
-</script>
-
-<ul
-  class={['dodo-ui-Menu', className].join(' ')}
-  {id}
-  bind:this={ref}
-  style={`${width ? `width:${width};` : ''}
-  ${height ? `height:${height};` : ''}
-  `}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</ul>
-
-<style lang="scss">
-  .dodo-ui-Menu {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: inherit;
-    outline: 0;
-  }
-</style>

package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte

@@ -1,268 +0,0 @@
-<script lang="ts" module>
-  import type {
-    ButtonLinkReferrerpolicy,
-    ButtonLinkTarget,
-  } from '$lib/stories/components/Form/Button/Button.svelte';
-  import { type Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-
-  export type MenuItemType = 'text' | 'button' | 'link';
-
-  export const menuItemTypeArray: MenuItemType[] = ['text', 'button', 'link'];
-
-  export interface MenuItemProps {
-    /** MenuItem contents goes here */
-    children?: Snippet;
-    /** MenuItem ref */
-    ref?: HTMLLIElement;
-    /** Custom css class */
-    class?: string;
-    /** Id */
-    id?: string;
-    /** Menu Item type */
-    type?: MenuItemType;
-    /** selected */
-    selected?: boolean;
-    /** Separator */
-    separator?: boolean;
-    /** How large should the Menu Items be? */
-    size?: ComponentSize;
-    /** The onclick event handler */
-    onclick?: MouseEventHandler<HTMLButtonElement>;
-    /**  disabled state */
-    disabled?: boolean;
-    /** link href */
-    href?: string;
-    /** Link button: download  */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    download?: any;
-    /** Link button: hreflang  */
-    hreflang?: string | undefined | null;
-    /** Link button: media  */
-    media?: string | undefined | null;
-    /** Link button: ping  */
-    ping?: string | undefined | null;
-    /** Link button: rel  */
-    rel?: string | undefined | null;
-    /** Link button: target  */
-    target?: ButtonLinkTarget;
-    /** Link button: Type  */
-    anchorMediaType?: string | undefined | null;
-    /** Link button: referrerpolicy  */
-    referrerpolicy?: ButtonLinkReferrerpolicy;
-  }
-</script>
-
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-
-  let {
-    children,
-    id,
-    class: className = '',
-    type = 'text',
-    href,
-    download,
-    hreflang,
-    media,
-    ping,
-    rel,
-    target,
-    anchorMediaType,
-    referrerpolicy,
-    disabled = false,
-    selected = false,
-    separator: separatorInternal,
-    onclick,
-    size: sizeInternal,
-    ref = $bindable<HTMLLIElement>(),
-  }: MenuItemProps = $props();
-
-  const hover = false;
-
-  const sizeMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (getContext<any>('MenuItemSize') ? getContext<any>('MenuItemSize')() : undefined) as
-      | ComponentSize
-      | undefined;
-  const size = sizeMenu || sizeInternal || 'normal';
-
-  const separatorMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (getContext<any>('MenuItemSeparator') ? getContext<any>('MenuItemSeparator')() : undefined) as
-      | boolean
-      | undefined;
-  const separator = separatorMenu !== undefined ? separatorMenu : separatorInternal || false;
-</script>
-
-{#snippet menuItemContent()}
-  {#if children}
-    {@render children()}
-  {/if}
-{/snippet}
-
-<li
-  class:disabled
-  class:separator
-  class:selected
-  class:hover
-  class={['dodo-ui-MenuItem', `size--${size}`, className].join(' ')}
-  {id}
-  bind:this={ref}
->
-  {#if type === 'link'}
-    <a
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-      {href}
-      {download}
-      {hreflang}
-      {media}
-      {ping}
-      {rel}
-      {target}
-      type={anchorMediaType}
-      {referrerpolicy}
-    >
-      {@render menuItemContent()}
-    </a>
-  {:else if type === 'button'}
-    <button
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-      {onclick}
-      {disabled}
-    >
-      {@render menuItemContent()}
-    </button>
-  {:else}
-    <div
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-    >
-      {@render menuItemContent()}
-    </div>
-  {/if}
-</li>
-
-<style lang="scss">
-  :global(:root) {
-    --dodo-ui-MenuItem-selected-bg: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-800) 4%,
-      transparent
-    );
-    --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
-    --dodo-ui-MenuItem-active-bg: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-800) 11%,
-      transparent
-    );
-
-    --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
-
-    --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-400);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-MenuItem-selected-bg: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-800) 4%,
-      transparent
-    );
-    --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
-    --dodo-ui-MenuItem-active-bg: color-mix(
-      in oklab,
-      var(--dodo-color-neutral-800) 15%,
-      transparent
-    );
-
-    --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
-
-    --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-500);
-  }
-
-  .dodo-ui-MenuItem {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    user-select: none;
-
-    &.separator {
-      border-bottom: 1px solid var(--dodo-ui-MenuItem-separator-color);
-    }
-
-    .MenuItem-type {
-      cursor: pointer;
-      transition: all 70ms;
-      text-decoration: none;
-      margin: 0;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      border: 0;
-      outline: 0;
-      background-color: transparent;
-      color: inherit;
-      font-family: inherit;
-      width: 100%;
-
-      &.selected {
-        background-color: var(--dodo-ui-MenuItem-selected-bg);
-      }
-
-      &:hover {
-        background-color: var(--dodo-ui-MenuItem-hover-bg);
-      }
-
-      &:active {
-        background-color: var(--dodo-ui-MenuItem-active-bg);
-      }
-
-      &.size {
-        &--normal {
-          min-height: var(--dodo-ui-element-height-normal);
-          font-size: 1rem;
-          padding: 0 calc(var(--dodo-ui-space-small) * 2);
-        }
-
-        &--small {
-          min-height: var(--dodo-ui-element-height-small);
-          padding: 0 var(--dodo-ui-space);
-          font-size: 0.9rem;
-        }
-
-        &--large {
-          min-height: var(--dodo-ui-element-height-large);
-          font-size: 1.1rem;
-          padding: 0 calc(var(--dodo-ui-space) * 2);
-        }
-      }
-
-      &.disabled {
-        cursor: initial;
-
-        background-color: transparent;
-        color: var(--dodo-ui-MenuItem-disabled-color);
-
-        &:hover {
-          background-color: transparent;
-          color: var(--dodo-ui-MenuItem-disabled-color);
-        }
-
-        &:active {
-          background-color: transparent;
-          color: var(--dodo-ui-MenuItem-disabled-color);
-        }
-      }
-    }
-
-    &.hover {
-      .MenuItem-type {
-        background-color: var(--dodo-ui-MenuItem-hover-bg);
-      }
-    }
-  }
-</style>