@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/floating/menu/NeoMenuListItem.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
+  import type { NeoTooltipContext } from '../../index.js';
+
   import type { NeoTooltipPlacement } from '../common/neo-placement.model.js';
-  import type { NeoMenuContext, NeoMenuListItemProps } from './neo-menu-list-item.model.js';
+  import type { NeoMenuContext, NeoMenuItem, NeoMenuListItemProps } from './neo-menu-list-item.model.js';
   import type { SvelteEvent } from '../../utils/html-element.utils.js';
 
-  import { getFocusableElement } from '@dvcol/common-utils/common/element';
+  import { isSafari } from '@dvcol/common-utils/common/browser';
+  import { getFocusableElement, getLastFocusableElement } from '@dvcol/common-utils/common/element';
+  import { getUUID } from '@dvcol/common-utils/common/string';
   import { tick } from 'svelte';
 
+  import NeoDivider from '../../divider/NeoDivider.svelte';
+  import { reversePlacement } from '../common/neo-placement.model.js';
   import { getMenuContext, setMenuContext } from './neo-menu-context.svelte.js';
   import NeoMenuList from './NeoMenuList.svelte';
+  import NeoMenuListItem from './NeoMenuListItem.svelte';
   import NeoTooltip from '../tooltips/NeoTooltip.svelte';
+  import { showDivider } from '../../list/neo-list.model.js';
   import NeoListBaseItem from '../../list/NeoListBaseItem.svelte';
   import { getColorVariable } from '../../utils/colors.utils.js';
 
@@ -19,12 +27,15 @@
     // Item Props
     ref = $bindable(),
     tag = 'li',
+    menuTag = 'ul',
 
     item,
     parent,
+    array,
     index = 0,
-    length,
+    sectionIndex,
     level = 1,
+    divider,
 
     // Tooltip Props
     tooltipRef = $bindable(),
@@ -32,22 +43,30 @@
     keepOpenOnSelect,
 
     placement = 'right-start',
-    offset = (p: NeoTooltipPlacement) => ({ mainAxis: 6, crossAxis: p?.endsWith('start') ? -6 : 6 }),
+    offset: _offset,
 
     // Styles
     rounded,
+    reverse,
+    flip,
 
     // Events
     onMenu,
     onSelect,
 
     // Other Props
+    dividerProps,
     tooltipProps,
     baseProps,
     menuProps,
     ...rest
   }: NeoMenuListItemProps = $props();
 
+  const offset = $derived.by(() => {
+    if (_offset !== undefined) return _offset;
+    return (p?: NeoTooltipPlacement) => ({ mainAxis: rounded ? 12 : 9, crossAxis: p?.endsWith('start') ? -6 : 6 });
+  });
+
   const items = $derived(item?.items);
 
   const menuContext = getMenuContext();
@@ -62,7 +81,7 @@
       return open;
     },
     get ref() {
-      return ref;
+      return ref ?? menuContext?.ref;
     },
     async dismiss() {
       tooltipOpen = false;
@@ -75,18 +94,25 @@
     open = tooltipOpen || childContext.children;
   });
 
-  const nested = $derived(!!items?.length && !!ref);
+  const nested = $derived(!item.section && !!items?.length && !!ref);
 
   const onkeydown = async (e: KeyboardEvent) => {
     if (!['ArrowRight', 'ArrowLeft'].includes(e.key)) return;
-    if (!nested && !menuContext?.ref) return;
+    if (!nested && !parent) return;
     e.preventDefault();
     e.stopPropagation();
-    tooltipOpen = e.key === 'ArrowRight';
-    if (open && e.key === 'ArrowLeft') return;
+    const openNested = reverse ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
+    if (nested) tooltipOpen = openNested;
+    // If we are closing the nested menu we don't change focus
+    if (!openNested && open) return;
+    // If we are on the main menu and closing, do nothing
+    if (!openNested && !parent) return;
     await tick();
-    if (e.key === 'ArrowRight') getFocusableElement(tooltipRef)?.focus();
-    if (e.key === 'ArrowLeft') getFocusableElement(menuContext?.ref)?.focus();
+    // Focus the first focusable element in the opened tooltip
+    if (openNested && flip) return getLastFocusableElement(tooltipRef)?.focus();
+    if (openNested) return getFocusableElement(tooltipRef)?.focus();
+    // Focus the first focusable element in the parent menu:
+    return menuContext?.ref?.focus();
   };
 
   $effect(() => {
@@ -101,36 +127,102 @@
     }
     onSelect?.(item, e);
     baseProps?.onclick?.(e, checked);
-    if (keepOpenOnSelect) return;
+    if (keepOpenOnSelect || item.keepOpenOnSelect) return;
     menuContext?.dismiss();
   };
 
-  const context = $derived<NeoMenuContext>({ item, index, length, parent, open, keepOpenOnSelect, onMenu, onSelect });
+  const context = $derived<NeoMenuContext>({ item, parent, array, index, sectionIndex, open, keepOpenOnSelect, onMenu, onSelect });
+
+  const nestedPlacement = $derived(reverse ? reversePlacement(placement) : placement);
+
+  const renderDivider = (index: number, array: NeoMenuItem[] = [], position: 'top' | 'bottom') => {
+    if (position === 'top') return index && (showDivider(array[index]?.divider, 'top') ?? showDivider(divider, 'top'));
+    if (index >= array.length - 1) return false;
+    return showDivider(array[index].divider, 'bottom') && !showDivider(array[index + 1]?.divider, 'top');
+  };
 </script>
 
 <svelte:element
   this={item.tag ?? tag}
-  bind:this={ref}
   role="menuitem"
   data-index={index}
   data-level={level}
+  data-section={sectionIndex}
   aria-haspopup={nested ? 'menu' : undefined}
   aria-posinset={index + 1}
-  aria-setsize={length}
+  aria-setsize={array?.length}
   class:neo-menu-item={true}
+  class:neo-section={!!item.section}
   style:--neo-list-item-color={getColorVariable(item.color)}
   {...rest}
   {...item.itemProps}
 >
+  {#if renderDivider(index, array, flip && !isSafari() ? 'bottom' : 'top')}
+    <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-menu-item-divider', item.dividerProps?.class]} />
+  {/if}
+
   {#if children}
     {@render children?.(context)}
+  {:else if item.section}
+    {@const labelId = item.label ? `neo-menu-item-section-label-${getUUID()}` : undefined}
+
+    {#if labelId}
+      <span id={labelId} class="neo-menu-item-section-label" class:neo-sticky={item.sticky} class:neo-reverse={reverse || item.reverse}>
+        {item.label}
+      </span>
+    {/if}
+    {#if items}
+      <svelte:element this={menuTag} role="menu" class:neo-menu-item-section={true} class:neo-flip={flip}>
+        {#each items as child, childIndex (child.id ?? childIndex)}
+          <NeoMenuListItem
+            {children}
+            {tag}
+            {menuTag}
+
+            item={child}
+            parent={item}
+            array={items}
+            index={childIndex}
+            sectionIndex={index}
+
+            {level}
+            {divider}
+            {keepOpenOnSelect}
+            {placement}
+            {offset}
+
+            {rounded}
+            {reverse}
+            {flip}
+
+            {dividerProps}
+            {tooltipProps}
+            {baseProps}
+            {...rest}
+
+            menuProps={{ tag: menuTag, rounded, reverse, flip, divider, dividerProps, tooltipProps, baseProps, ...child.menuProps }}
+            onMenu={(i, e) => {
+              child.menuProps?.onMenu?.(i, e);
+              onMenu?.(i, e);
+            }}
+            onSelect={(i, e) => {
+              child.menuProps?.onSelect?.(i, e);
+              onSelect?.(i, e);
+            }}
+          />
+        {/each}
+      </svelte:element>
+    {/if}
   {:else}
     <NeoListBaseItem
+      bind:buttonRef={ref}
       {item}
       {index}
       {context}
       {rounded}
-      toggle
+      {reverse}
+      {flip}
+      toggle={nested}
       arrow={nested}
       checked={open}
       selector=".neo-menu-item"
@@ -139,10 +231,16 @@
       {onclick}
     />
   {/if}
+
+  {#if renderDivider(index, array, flip && !isSafari() ? 'top' : 'bottom')}
+    <NeoDivider aria-hidden="true" {...dividerProps} {...item.dividerProps} class={['neo-menu-item-divider', item.dividerProps?.class]} />
+  {/if}
 </svelte:element>
 
-{#snippet tooltip()}
+{#snippet tooltip({ placement }: NeoTooltipContext)}
   <NeoMenuList
+    flip={flip ?? placement.includes('top')}
+    tag={menuTag}
     {...menuProps}
     itemProps={{ ...rest, ...menuProps?.itemProps }}
     {keepOpenOnSelect}
@@ -165,7 +263,7 @@
     {rounded}
     {...tooltipProps}
     {...item.tooltipProps}
-    {placement}
+    placement={nestedPlacement}
     {offset}
     {tooltip}
     openOnFocus={false}
@@ -173,19 +271,54 @@
 {/if}
 
 <style>.neo-menu-item {
-  padding: 0 var(--neo-menu-padding, var(--neo-gap-tiny, 0.25rem));
+  --neo-btn-bg-color-hover: var(--neo-menu-bg-color-hover, transparent);
+  padding: 0 var(--neo-menu-padding, var(--neo-gap-4xs, 0.25rem));
   color: var(--neo-list-item-color, inherit);
+  list-style-type: none;
 }
 .neo-menu-item :global(> .neo-list-item-button) {
   width: 100%;
   --neo-btn-text-color-active: currentcolor;
 }
 .neo-menu-item :global(> .neo-list-item-button.neo-rounded) {
-  border-radius: var(--neo-btn-border-radius-rounded, var(--neo-border-radius-md));
+  border-radius: var(--neo-btn-border-radius, var(--neo-border-radius-lg));
 }
-.neo-menu-item:hover :global(> .neo-list-item-button .neo-list-item-content),
-.neo-menu-item:hover :global(> .neo-list-item-button .neo-list-item-description), .neo-menu-item:focus :global(> .neo-list-item-button .neo-list-item-content),
-.neo-menu-item:focus :global(> .neo-list-item-button .neo-list-item-description), .neo-menu-item:focus-within :global(> .neo-list-item-button .neo-list-item-content),
-.neo-menu-item:focus-within :global(> .neo-list-item-button .neo-list-item-description) {
+.neo-menu-item:hover :global(> .neo-list-item-button .neo-list-item-content), .neo-menu-item:focus :global(> .neo-list-item-button .neo-list-item-content), .neo-menu-item:focus-within :global(> .neo-list-item-button .neo-list-item-content) {
   color: var(--neo-text-color-highlight);
+}
+.neo-menu-item:hover :global(> .neo-list-item-button .neo-list-item-description),
+.neo-menu-item:hover :global(> .neo-list-item-button .neo-list-item-tags), .neo-menu-item:focus :global(> .neo-list-item-button .neo-list-item-description),
+.neo-menu-item:focus :global(> .neo-list-item-button .neo-list-item-tags), .neo-menu-item:focus-within :global(> .neo-list-item-button .neo-list-item-description),
+.neo-menu-item:focus-within :global(> .neo-list-item-button .neo-list-item-tags) {
+  color: var(--neo-text-color-secondary-highlight);
+}
+.neo-menu-item.neo-section {
+  padding: 0;
+}
+.neo-menu-item-section {
+  display: flex;
+  flex-direction: column;
+}
+.neo-menu-item-section-label {
+  display: inline-flex;
+  width: 100%;
+  padding: 0.25rem 0.6125rem;
+  transition: color 0.3s ease;
+  margin-block-end: 0.125rem;
+}
+.neo-menu-item-section-label.neo-sticky {
+  position: sticky;
+  top: -0.5rem;
+  z-index: var(--neo-z-index-in-front, 1);
+  background: var(--neo-list-section-bg-color, linear-gradient(to top, transparent 5%, oklch(from var(--neo-background-color) l c h/50%) 20%, var(--neo-background-color)));
+}
+.neo-menu-item-section-label.neo-reverse {
+  justify-content: flex-end;
+  text-align: end;
+}
+@supports not ((hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)) {
+  .neo-menu-item-section.neo-flip {
+    flex-direction: column-reverse;
+    justify-content: end;
+  }
 }</style>

package/dist/floating/menu/NeoMenuListItem.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { NeoMenuListItemProps } from './neo-menu-list-item.model.js';
+import NeoMenuListItem from './NeoMenuListItem.svelte';
 declare const NeoMenuListItem: import("svelte").Component<NeoMenuListItemProps, {}, "ref" | "open" | "tooltipRef">;
 type NeoMenuListItem = ReturnType<typeof NeoMenuListItem>;
 export default NeoMenuListItem;

package/dist/floating/menu/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NeoMenu } from './NeoMenu.svelte';
+export type { NeoMenuContext, NeoMenuItem } from './neo-menu-list-item.model.js';
 export type * from './neo-menu.model.js';

package/dist/floating/menu/neo-menu-list-item.model.d.ts

@@ -1,21 +1,27 @@
 import type { Snippet } from 'svelte';
 import type { NeoButtonProps } from '../../buttons/neo-button.model.js';
+import type { NeoDividerProps } from '../../divider/neo-divider.model.js';
 import type { NeoMenuListProps } from './neo-menu-list.model.js';
 import type { NeoTooltipProps } from '../tooltips/neo-tooltip.model.js';
 import type { NeoListBaseItemProps } from '../../list/neo-list-base-item.model.js';
 import type { NeoBaseListItem } from '../../list/neo-list.model.js';
+import type { BorderRadiusInput } from '../../utils/border.utils.js';
 import type { HTMLNeoBaseElement, SvelteEvent } from '../../utils/html-element.utils.js';
-export type NeoMenuItem<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li'> = Omit<NeoBaseListItem<Value, Tag, NeoMenuContext<Value, Tag>>, 'containerProps'> & {
+export interface NeoMenuItem<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li'> extends Omit<NeoBaseListItem<Value, Tag, NeoMenuContext<Value, Tag>>, 'containerProps'>, Pick<NeoMenuListItemProps, 'tooltipProps' | 'baseProps'> {
     /**
      * If true, children items will be rendered as list items instead of a nested dropdown menu.
      *
      * @default false
      */
-    section?: string;
+    section?: boolean;
     /**
      * If true, the menu section label will be sticky on scroll.
      */
     sticky?: boolean;
+    /**
+     * If true, the menu will stay open when the item is selected.
+     */
+    keepOpenOnSelect?: boolean;
     /**
      * The nested menu items.
      */
@@ -28,30 +34,34 @@ export type NeoMenuItem<Value = unknown, Tag extends keyof HTMLElementTagNameMap
      * Optional props to pass to the base list item.
      */
     itemProps?: Pick<NeoBaseListItem<Value, Tag, NeoMenuContext<Value, Tag>>, 'containerProps'>;
-} & Pick<NeoMenuListItemProps, 'tooltipProps' | 'baseProps'>;
+}
 export interface NeoMenuContext<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'li'> {
     /**
      * The item itself.
      */
     item: NeoMenuItem<Value, Tag>;
+    /**
+     * The parent item (if any).
+     */
+    parent?: NeoMenuItem<Value, Tag>;
+    /**
+     * The array of items this item belongs to.
+     */
+    array?: NeoMenuItem<Value, Tag>[];
     /**
      * The index of the item in the menu.
      */
     index: number;
     /**
-     * The length of the parent menu list.
+     * The index of the parent section in the menu (if any).
      */
-    length: number;
+    sectionIndex?: number;
     /**
      * The nested level of the menu.
      *
      * @default 1
      */
     level?: number;
-    /**
-     * The parent item (if any).
-     */
-    parent?: NeoMenuItem<Value, Tag>;
     /**
      * Whether the item nested menu is open (if any).
      */
@@ -89,6 +99,12 @@ export type NeoMenuListItemProps<Value = unknown, Tag extends keyof HTMLElementT
      * @default 'li'
      */
     tag?: Tag;
+    /**
+     * The tag name of the menu element.
+     *
+     * @default 'ul'
+     */
+    menuTag?: keyof HTMLElementTagNameMap;
     /**
      * The reference to the tooltip element.
      */
@@ -106,7 +122,28 @@ export type NeoMenuListItemProps<Value = unknown, Tag extends keyof HTMLElementT
     /**
      * If true, the menu & items will be rounded.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
+    /**
+     * Reverse the direction of the item.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Whether to display a divider above items in the list.
+     * If an item divider option is set, it will take precedence over the list divider.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Reverse the next/previous focusable sibling selection direction using arrow keys.
+     */
+    flip?: boolean;
+    /**
+     * Optional props to pass to the divider (if any.
+     */
+    dividerProps?: Partial<NeoDividerProps>;
     /**
      * Optional props to pass to the tooltip (if any).
      */
@@ -123,4 +160,4 @@ export type NeoMenuListItemProps<Value = unknown, Tag extends keyof HTMLElementT
      * Optional props to pass to the button.
      */
     buttonProps?: NeoButtonProps;
-} & Pick<NeoMenuContext<Value, Tag>, 'item' | 'index' | 'length' | 'level' | 'parent' | 'open' | 'keepOpenOnSelect' | 'onMenu' | 'onSelect'> & Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'>;
+} & Pick<NeoMenuContext<Value, Tag>, 'item' | 'parent' | 'array' | 'index' | 'sectionIndex' | 'level' | 'parent' | 'open' | 'keepOpenOnSelect' | 'onMenu' | 'onSelect'> & Omit<HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>, 'children'>;

package/dist/floating/menu/neo-menu-list.model.d.ts

@@ -1,5 +1,6 @@
 import type { NeoDividerProps } from '../../divider/neo-divider.model.js';
 import type { NeoMenuItem, NeoMenuListItemProps } from './neo-menu-list-item.model.js';
+import type { BorderRadiusInput } from '../../utils/border.utils.js';
 import type { HTMLNeoBaseElement } from '../../utils/html-element.utils.js';
 export type NeoMenuListProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'ul'> = {
     /**
@@ -11,7 +12,7 @@ export type NeoMenuListProps<Value = unknown, Tag extends keyof HTMLElementTagNa
      *
      * @default 'ul'
      */
-    tag?: Tag;
+    tag?: Tag | keyof HTMLElementTagNameMap;
     /**
      * The parent item (if any).
      */
@@ -43,19 +44,38 @@ export type NeoMenuListProps<Value = unknown, Tag extends keyof HTMLElementTagNa
     /**
      * If true, the menu will be rounded.
      */
-    rounded?: boolean;
+    rounded?: BorderRadiusInput;
+    /**
+     * Reverse the direction of the item.
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Whether to display a divider above items in the list.
+     * If an item divider option is set, it will take precedence over the list divider.
+     *
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Inverts the flow of the list (flex-direction: column-reverse).
+     *
+     * @default false
+     */
+    flip?: boolean;
     /**
      * Event handler for when a menu item with a nested menu is clicked.
      * @param item - The menu item that was clicked.
      * @param e - The pointer event.
      */
-    onMenu: NeoMenuListItemProps<Value>['onMenu'];
+    onMenu?: NeoMenuListItemProps<Value>['onMenu'];
     /**
      * Event handler for when a menu item without a nested menu is clicked.
      * @param item - The menu item that was clicked.
      * @param e - The pointer event.
      */
-    onSelect: NeoMenuListItemProps<Value>['onSelect'];
+    onSelect?: NeoMenuListItemProps<Value>['onSelect'];
     /**
      * Optional props to pass to the tooltip (if any).
      */

package/dist/floating/menu/neo-menu.model.d.ts

@@ -8,13 +8,13 @@ export type NeoMenuProps<Value = unknown> = Omit<NeoTooltipProps, 'tooltip'> & {
      * @param item - The menu item that was clicked.
      * @param e - The pointer event.
      */
-    onMenu: NeoMenuListProps<Value>['onMenu'];
+    onMenu?: NeoMenuListProps<Value>['onMenu'];
     /**
      * Event handler for when a menu item without a nested menu is clicked.
      * @param item - The menu item that was clicked.
      * @param e - The pointer event.
      */
-    onSelect: NeoMenuListProps<Value>['onSelect'];
+    onSelect?: NeoMenuListProps<Value>['onSelect'];
     /**
      * If true, the menu will stay open when the item is selected.
      */
@@ -39,4 +39,4 @@ export type NeoMenuProps<Value = unknown> = Omit<NeoTooltipProps, 'tooltip'> & {
      * Optional props to pass to the divider.
      */
     dividerProps?: NeoMenuListProps<Value>['dividerProps'];
-} & Pick<NeoMenuListProps<Value>, 'shadow' | 'scrollbar' | 'rounded'>;
+} & Pick<NeoMenuListProps<Value>, 'shadow' | 'scrollbar' | 'rounded' | 'reverse' | 'flip'>;