@k2b/ui 0.26.0 → 0.28.0

package/dist/browser/actions/Dropdown.js

@@ -24,18 +24,21 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-dropdown__copy><span></spa
   _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
   _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button tabindex=-1><!$><!/><!$><!/><!$><!/><span class=k2b-dropdown__copy><span></span><!$><!/></span><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<button>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<button>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
 import { createContext, createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { Tooltip, useLabelTooltip } from "../feedback/Tooltip";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
+import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { Button, iconTitle } from "./Button";
+import { focusRowSegment } from "./menu-rows";
+import { openMenuSheet, prefersMenuSheet } from "./menu-sheet";
 
 // Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.
 const selectAction = item => item.action;
@@ -50,21 +53,6 @@ const focusMenuItem = (menu, index) => {
   if (items.length === 0) return;
   items[(index + items.length) % items.length]?.focus();
 };
-
-/**
- * Left and Right cycle through the segments of a row section; Up and Down leave it like any item. Returns whether
- * the key moved focus.
- */
-export const focusRowSegment = (items, key) => {
-  if (key !== "ArrowLeft" && key !== "ArrowRight") return false;
-  const active = document.activeElement;
-  const row = active?.closest(".k2b-dropdown__row");
-  if (!active || !row) return false;
-  const segments = items.filter(item => row.contains(item));
-  const next = segments.indexOf(active) + (key === "ArrowRight" ? 1 : -1);
-  segments[(next + segments.length) % segments.length]?.focus();
-  return true;
-};
 export const dropdownPosition = (trigger, menu, position, viewport, gap = 4) => {
   let left = trigger.left;
   let top = trigger.bottom + gap;
@@ -202,34 +190,66 @@ export function DropdownItem(props) {
 function DropdownChoiceItem(props) {
   const menu = useContext(MenuContext);
   const checked = () => typeof props.checked === "function" ? props.checked() : props.checked;
-  return (// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the runtime role is always menuitemcheckbox or menuitemradio, both of which support aria-checked.
-    (() => {
-      var _el$0 = _$getNextElement(_tmpl$0),
-        _el$16 = _el$0.firstChild,
-        [_el$17, _co$3] = _$getNextMarker(_el$16.nextSibling),
-        _el$18 = _el$17.nextSibling,
-        [_el$19, _co$4] = _$getNextMarker(_el$18.nextSibling),
-        _el$20 = _el$19.nextSibling,
-        [_el$21, _co$5] = _$getNextMarker(_el$20.nextSibling),
-        _el$11 = _el$21.nextSibling,
-        _el$12 = _el$11.firstChild,
-        _el$13 = _el$12.nextSibling,
-        [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
-        _el$22 = _el$11.nextSibling,
-        [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling);
-      _el$0.$$click = event => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (props.closeOnSelect !== false) menu?.close();
-        props.action();
-      };
-      _$insert(_el$0, _$createComponent(Show, {
+  let element;
+  return _$createComponent(Dynamic, {
+    ref: node => {
+      element = node;
+    },
+    get component() {
+      return !props.disabled && props.href ? "a" : "button";
+    },
+    get href() {
+      return _$memo(() => !!!props.disabled)() ? props.href : undefined;
+    },
+    get type() {
+      return !props.disabled && props.href ? undefined : "button";
+    },
+    get role() {
+      return props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio";
+    },
+    get ["aria-label"]() {
+      return props.ariaLabel;
+    },
+    get ["aria-checked"]() {
+      return checked();
+    },
+    get ["aria-disabled"]() {
+      return props.disabled ? "true" : undefined;
+    },
+    tabIndex: -1,
+    get ["class"]() {
+      return `k2b-dropdown__item ${props.class ?? ""}`;
+    },
+    get ["data-selected"]() {
+      return checked() ? "true" : undefined;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    onClick: event => {
+      if (props.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+        menu?.close(false);
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (props.closeOnSelect !== false) menu?.close();
+      props.action();
+    },
+    onKeyDown: event => {
+      // A link answers only Enter; as a menu choice it also answers Space, like the button form.
+      if (event.key !== " " || props.disabled || !props.href) return;
+      event.preventDefault();
+      element?.click();
+    },
+    get children() {
+      return [_$createComponent(Show, {
         get when() {
           return props.choice === "checkbox";
         },
         get children() {
-          var _el$1 = _$getNextElement(_tmpl$8);
-          _$insert(_el$1, _$createComponent(Show, {
+          var _el$0 = _$getNextElement(_tmpl$8);
+          _$insert(_el$0, _$createComponent(Show, {
             get when() {
               return checked();
             },
@@ -237,10 +257,9 @@ function DropdownChoiceItem(props) {
               return _$getNextElement(_tmpl$7);
             }
           }));
-          return _el$1;
+          return _el$0;
         }
-      }), _el$17, _co$3);
-      _$insert(_el$0, _$createComponent(Show, {
+      }), _$createComponent(Show, {
         get when() {
           return props.image;
         },
@@ -250,78 +269,55 @@ function DropdownChoiceItem(props) {
               return props.icon;
             },
             children: icon => (() => {
-              var _el$24 = _$getNextElement(_tmpl$2);
-              _$effect(() => _$className(_el$24, icon()));
-              return _el$24;
+              var _el$15 = _$getNextElement(_tmpl$2);
+              _$effect(() => _$className(_el$15, icon()));
+              return _el$15;
             })()
           });
         },
         children: image => (() => {
-          var _el$25 = _$getNextElement(_tmpl$3);
-          _$effect(() => _$setAttribute(_el$25, "src", image()));
-          return _el$25;
+          var _el$16 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$setAttribute(_el$16, "src", image()));
+          return _el$16;
         })()
-      }), _el$19, _co$4);
-      _$insert(_el$0, _$createComponent(Show, {
+      }), _$createComponent(Show, {
         get when() {
           return props.color;
         },
         children: color => (() => {
-          var _el$26 = _$getNextElement(_tmpl$1);
-          _$effect(_$p => _$setStyleProperty(_el$26, "--k2b-dropdown-color", color()));
-          return _el$26;
+          var _el$17 = _$getNextElement(_tmpl$0);
+          _$effect(_$p => _$setStyleProperty(_el$17, "--k2b-dropdown-color", color()));
+          return _el$17;
         })()
-      }), _el$21, _co$5);
-      _$insert(_el$12, () => props.label);
-      _$insert(_el$11, _$createComponent(Show, {
-        get when() {
-          return props.description;
-        },
-        children: description => (() => {
-          var _el$27 = _$getNextElement(_tmpl$4);
-          _$insert(_el$27, description);
-          return _el$27;
-        })()
-      }), _el$14, _co$2);
-      _$insert(_el$0, _$createComponent(Show, {
+      }), (() => {
+        var _el$10 = _$getNextElement(_tmpl$),
+          _el$11 = _el$10.firstChild,
+          _el$12 = _el$11.nextSibling,
+          [_el$13, _co$2] = _$getNextMarker(_el$12.nextSibling);
+        _$insert(_el$11, () => props.label);
+        _$insert(_el$10, _$createComponent(Show, {
+          get when() {
+            return props.description;
+          },
+          children: description => (() => {
+            var _el$18 = _$getNextElement(_tmpl$4);
+            _$insert(_el$18, description);
+            return _el$18;
+          })()
+        }), _el$13, _co$2);
+        return _el$10;
+      })(), _$createComponent(Show, {
         get when() {
           return props.choice === "radio";
         },
         get children() {
-          var _el$15 = _$getNextElement(_tmpl$9);
-          _$effect(() => _$setAttribute(_el$15, "data-hidden", checked() ? undefined : "true"));
-          return _el$15;
+          var _el$14 = _$getNextElement(_tmpl$9);
+          _$effect(() => _$setAttribute(_el$14, "data-hidden", checked() ? undefined : "true"));
+          return _el$14;
         }
-      }), _el$23, _co$6);
-      _$effect(_p$ => {
-        var _v$10 = props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio",
-          _v$11 = props.ariaLabel,
-          _v$12 = checked(),
-          _v$13 = props.disabled ? "true" : undefined,
-          _v$14 = `k2b-dropdown__item ${props.class ?? ""}`,
-          _v$15 = checked() ? "true" : undefined,
-          _v$16 = props.disabled;
-        _v$10 !== _p$.e && _$setAttribute(_el$0, "role", _p$.e = _v$10);
-        _v$11 !== _p$.t && _$setAttribute(_el$0, "aria-label", _p$.t = _v$11);
-        _v$12 !== _p$.a && _$setAttribute(_el$0, "aria-checked", _p$.a = _v$12);
-        _v$13 !== _p$.o && _$setAttribute(_el$0, "aria-disabled", _p$.o = _v$13);
-        _v$14 !== _p$.i && _$className(_el$0, _p$.i = _v$14);
-        _v$15 !== _p$.n && _$setAttribute(_el$0, "data-selected", _p$.n = _v$15);
-        _v$16 !== _p$.s && _$setProperty(_el$0, "disabled", _p$.s = _v$16);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined,
-        n: undefined,
-        s: undefined
-      });
-      _$runHydrationEvents();
-      return _el$0;
-    })()
-  );
+      })];
+    }
+  });
 }
 export function DropdownItems(props) {
   const messages = useUiMessages();
@@ -382,22 +378,22 @@ export function DropdownItems(props) {
             return renderItem(item);
           },
           get children() {
-            var _el$28 = _$getNextElement(_tmpl$11),
-              _el$30 = _el$28.firstChild,
-              [_el$31, _co$7] = _$getNextMarker(_el$30.nextSibling),
-              _el$32 = _el$31.nextSibling,
-              [_el$33, _co$8] = _$getNextMarker(_el$32.nextSibling);
-            _$insert(_el$28, _$createComponent(Show, {
+            var _el$19 = _$getNextElement(_tmpl$10),
+              _el$21 = _el$19.firstChild,
+              [_el$22, _co$3] = _$getNextMarker(_el$21.nextSibling),
+              _el$23 = _el$22.nextSibling,
+              [_el$24, _co$4] = _$getNextMarker(_el$23.nextSibling);
+            _$insert(_el$19, _$createComponent(Show, {
               get when() {
                 return item.sectionLabel;
               },
               children: label => (() => {
-                var _el$34 = _$getNextElement(_tmpl$12);
-                _$insert(_el$34, label);
-                return _el$34;
+                var _el$25 = _$getNextElement(_tmpl$11);
+                _$insert(_el$25, label);
+                return _el$25;
               })()
-            }), _el$31, _co$7);
-            _$insert(_el$28, _$createComponent(Show, {
+            }), _el$22, _co$3);
+            _$insert(_el$19, _$createComponent(Show, {
               get when() {
                 return item.layout === "row";
               },
@@ -410,27 +406,27 @@ export function DropdownItems(props) {
                 });
               },
               get children() {
-                var _el$29 = _$getNextElement(_tmpl$10);
-                _$insert(_el$29, _$createComponent(For, {
+                var _el$20 = _$getNextElement(_tmpl$1);
+                _$insert(_el$20, _$createComponent(For, {
                   get each() {
                     return item.items;
                   },
                   children: renderItem
                 }));
-                return _el$29;
+                return _el$20;
               }
-            }), _el$33, _co$8);
+            }), _el$24, _co$4);
             _$effect(_p$ => {
-              var _v$17 = index() > 0 ? "true" : undefined,
-                _v$18 = item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions);
-              _v$17 !== _p$.e && _$setAttribute(_el$28, "data-divided", _p$.e = _v$17);
-              _v$18 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$18);
+              var _v$10 = index() > 0 ? "true" : undefined,
+                _v$11 = item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions);
+              _v$10 !== _p$.e && _$setAttribute(_el$19, "data-divided", _p$.e = _v$10);
+              _v$11 !== _p$.t && _$setAttribute(_el$19, "aria-label", _p$.t = _v$11);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$28;
+            return _el$19;
           }
         })
       });
@@ -507,9 +503,9 @@ function DropdownTrigger(props) {
     }));
   }
   return [(() => {
-    var _el$35 = _$getNextElement(_tmpl$13);
-    _$use(register, _el$35);
-    _$spread(_el$35, _$mergeProps(rest, {
+    var _el$26 = _$getNextElement(_tmpl$12);
+    _$use(register, _el$26);
+    _$spread(_el$26, _$mergeProps(rest, {
       get ["aria-controls"]() {
         return context.menuId;
       },
@@ -540,9 +536,9 @@ function DropdownTrigger(props) {
         return iconTitle(local.title, tooltip());
       }
     }), false, true);
-    _$insert(_el$35, () => local.children);
+    _$insert(_el$26, () => local.children);
     _$runHydrationEvents();
-    return _el$35;
+    return _el$26;
   })(), _$createComponent(Show, {
     get when() {
       return _$memo(() => tooltip() !== false)() && tooltip() !== undefined;
@@ -570,6 +566,9 @@ function DropdownTrigger(props) {
 /** Accessible top-layer menu with explicit trigger ownership. */
 function DropdownRoot(props) {
   const messages = useUiMessages();
+  const locale = useLocale();
+  /** The open phone sheet's cancel switch: it closes when the menu goes or is disabled, as the popover does. */
+  let sheet;
   const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
   const menuId = `k2b-dropdown-${id}`;
   const [internalOpen, setInternalOpen] = createSignal(false);
@@ -617,6 +616,9 @@ function DropdownRoot(props) {
     // Before hiding, so the popover does not return focus on its own.
     if (restoreFocus) returnFocus(triggerRef, triggerRing);
     if (menuRef?.matches(":popover-open")) menuRef.hidePopover();
+    // Like `open`, expose the closed state now: the toggle event can arrive after the next key press, and a trigger
+    // that still reads as open would ignore Enter (Escape, then Enter at once, must reopen).
+    setInternalOpen(false);
     detachViewportListeners();
   };
   const open = (focus = "first") => {
@@ -637,6 +639,27 @@ function DropdownRoot(props) {
       props.onOpenChange?.(next);
       return;
     }
+    if (next && props.phone === "sheet" && prefersMenuSheet()) {
+      if (sheet) return;
+      const current = new AbortController();
+      sheet = current;
+      // The sheet is this menu's open state: the trigger reports it and the owner hears both ends.
+      setInternalOpen(true);
+      props.onOpenChange?.(true);
+      void openMenuSheet({
+        Items: DropdownItems,
+        items: props.items,
+        label: props.label ?? messages().dropdownMenu,
+        locale: locale(),
+        signal: current.signal
+      }).finally(() => {
+        sheet = undefined;
+        setInternalOpen(false);
+        props.onOpenChange?.(false);
+        props.onClose?.();
+      });
+      return;
+    }
     if (next) open(focus);else close(false);
   };
   const handleMenuKeyDown = event => {
@@ -686,57 +709,60 @@ function DropdownRoot(props) {
     if (!controlled && menuRef.matches(":popover-open")) close(false);
   });
   createEffect(() => {
-    if (mounted && props.disabled) close(false);
+    if (!props.disabled) return;
+    sheet?.abort();
+    if (mounted) close(false);
   });
   onMount(() => {
     mounted = true;
     if (props.open) open(false);
     onCleanup(detachViewportListeners);
   });
+  onCleanup(() => sheet?.abort());
   return _$createComponent(DropdownContext.Provider, {
     value: context,
     get children() {
-      var _el$36 = _$getNextElement(_tmpl$14),
-        _el$38 = _el$36.firstChild,
-        [_el$39, _co$9] = _$getNextMarker(_el$38.nextSibling),
-        _el$37 = _el$39.nextSibling;
-      _$insert(_el$36, () => props.children, _el$39, _co$9);
-      _el$37.addEventListener("toggle", event => {
+      var _el$27 = _$getNextElement(_tmpl$13),
+        _el$29 = _el$27.firstChild,
+        [_el$30, _co$5] = _$getNextMarker(_el$29.nextSibling),
+        _el$28 = _el$30.nextSibling;
+      _$insert(_el$27, () => props.children, _el$30, _co$5);
+      _el$28.addEventListener("toggle", event => {
         const nextOpen = event.newState === "open";
-        const wasOpen = internalOpen();
+        const wasOpen = event.oldState === "open";
         setInternalOpen(nextOpen);
         if (nextOpen) attachViewportListeners();else detachViewportListeners();
         if (props.open === undefined || props.open !== nextOpen) props.onOpenChange?.(nextOpen);
         if (wasOpen && !nextOpen) props.onClose?.();
         if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));
       });
-      _el$37.$$keydown = handleMenuKeyDown;
+      _el$28.$$keydown = handleMenuKeyDown;
       var _ref$ = menuRef;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$37) : menuRef = _el$37;
-      _$setAttribute(_el$37, "id", menuId);
-      _$insert(_el$37, _$createComponent(DropdownItems, {
+      typeof _ref$ === "function" ? _$use(_ref$, _el$28) : menuRef = _el$28;
+      _$setAttribute(_el$28, "id", menuId);
+      _$insert(_el$28, _$createComponent(DropdownItems, {
         get items() {
           return props.items;
         },
         close: close
       }));
       _$effect(_p$ => {
-        var _v$19 = `k2b-dropdown ${props.class ?? ""}`,
-          _v$20 = props.label ?? messages().dropdownMenu,
-          _v$21 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
-          _v$22 = props.width ? {
+        var _v$12 = `k2b-dropdown ${props.class ?? ""}`,
+          _v$13 = props.label ?? messages().dropdownMenu,
+          _v$14 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
+          _v$15 = props.width ? {
             "--k2b-dropdown-width": props.width
           } : undefined,
-          _v$23 = props.width ? "fixed" : undefined,
-          _v$24 = props.variant ?? "default",
-          _v$25 = position();
-        _v$19 !== _p$.e && _$className(_el$36, _p$.e = _v$19);
-        _v$20 !== _p$.t && _$setAttribute(_el$37, "aria-label", _p$.t = _v$20);
-        _v$21 !== _p$.a && _$className(_el$37, _p$.a = _v$21);
-        _p$.o = _$style(_el$37, _v$22, _p$.o);
-        _v$23 !== _p$.i && _$setAttribute(_el$37, "data-width", _p$.i = _v$23);
-        _v$24 !== _p$.n && _$setAttribute(_el$37, "data-variant", _p$.n = _v$24);
-        _v$25 !== _p$.s && _$setAttribute(_el$37, "data-position", _p$.s = _v$25);
+          _v$16 = props.width ? "fixed" : undefined,
+          _v$17 = props.variant ?? "default",
+          _v$18 = position();
+        _v$12 !== _p$.e && _$className(_el$27, _p$.e = _v$12);
+        _v$13 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$13);
+        _v$14 !== _p$.a && _$className(_el$28, _p$.a = _v$14);
+        _p$.o = _$style(_el$28, _v$15, _p$.o);
+        _v$16 !== _p$.i && _$setAttribute(_el$28, "data-width", _p$.i = _v$16);
+        _v$17 !== _p$.n && _$setAttribute(_el$28, "data-variant", _p$.n = _v$17);
+        _v$18 !== _p$.s && _$setAttribute(_el$28, "data-position", _p$.s = _v$18);
         return _p$;
       }, {
         e: undefined,
@@ -748,7 +774,7 @@ function DropdownRoot(props) {
         s: undefined
       });
       _$runHydrationEvents();
-      return _el$36;
+      return _el$27;
     }
   });
 }