@floegence/floe-webapp-core 0.39.4 → 0.39.5

package/dist/components/ui/index.d.ts

@@ -4,7 +4,7 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
-export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuKeyboardNavigationOptions, } from './menuUtils';
+export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { SurfaceFloatingLayer, type SurfaceFloatingLayerPosition, type SurfaceFloatingLayerProps, type SurfaceFloatingLayerSize, } from './SurfaceFloatingLayer';

package/dist/components/ui/menuUtils.d.ts

@@ -10,8 +10,13 @@ export type MenuBoundaryRect = Readonly<{
 }>;
 export type MenuFocusMode = 'first' | 'last' | 'selected';
 export type MenuDismissReason = 'escape' | 'tab' | 'shift-tab';
-export type MenuKeyboardNavigationOptions = Readonly<{
+export type MenuItemNavigationOptions = Readonly<{
+    includeAriaDisabledItems?: boolean;
+}>;
+export type MenuKeyboardNavigationOptions = MenuItemNavigationOptions & Readonly<{
     onDismiss: (reason: MenuDismissReason) => void;
+    onActivate?: (item: HTMLElement) => void;
+    preventDefaultOnTab?: boolean;
 }>;
 export declare function resolveViewportMenuBoundaryRect(): MenuBoundaryRect;
 export declare function clampMenuPosition(anchor: Readonly<{
@@ -33,7 +38,7 @@ export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRec
     y: number;
 };
 export declare function getWrappedMenuItemIndex(length: number, currentIndex: number, delta: 1 | -1): number | null;
-export declare function getMenuItems(root: ParentNode | null | undefined): HTMLElement[];
-export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode): boolean;
-export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1): boolean;
+export declare function getMenuItems(root: ParentNode | null | undefined, options?: MenuItemNavigationOptions): HTMLElement[];
+export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode, options?: MenuItemNavigationOptions): boolean;
+export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1, options?: MenuItemNavigationOptions): boolean;
 export declare function handleMenuKeyboardNavigation(event: KeyboardEvent, options: MenuKeyboardNavigationOptions): boolean;

package/dist/components/ui/menuUtils.js

@@ -1,5 +1,5 @@
-const E = 8, h = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
-function M() {
+const E = 8, I = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function c() {
   return typeof window > "u" ? {
     left: 0,
     top: 0,
@@ -16,97 +16,102 @@ function M() {
     height: window.innerHeight
   };
 }
-function f(t) {
-  return t ?? M();
+function l(t) {
+  return t ?? c();
 }
-function w(t, e, r) {
-  const n = f(r);
-  let o = t.x, i = t.y;
-  return o + e.width > n.right - 8 && (o = n.right - e.width - 8), i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), {
-    x: Math.max(n.left + 8, o),
-    y: Math.max(n.top + 8, i)
+function A(t, e, a) {
+  const n = l(a);
+  let i = t.x, r = t.y;
+  return i + e.width > n.right - 8 && (i = n.right - e.width - 8), r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), {
+    x: Math.max(n.left + 8, i),
+    y: Math.max(n.top + 8, r)
   };
 }
-function T(t, e, r, n) {
-  const o = f(n);
-  let i;
-  switch (r) {
+function T(t, e, a, n) {
+  const i = l(n);
+  let r;
+  switch (a) {
     case "center":
-      i = t.left + t.width / 2 - e.width / 2;
+      r = t.left + t.width / 2 - e.width / 2;
       break;
     case "end":
-      i = t.right - e.width;
+      r = t.right - e.width;
       break;
     default:
-      i = t.left;
+      r = t.left;
   }
-  let a = t.bottom + 4;
-  if (i + e.width > o.right - 8 && (i = o.right - e.width - 8), i = Math.max(o.left + 8, i), a + e.height > o.bottom - 8) {
-    const s = t.top - o.top - 8, d = o.bottom - t.bottom - 8;
-    s > d && s >= e.height ? a = t.top - e.height - 4 : a = o.bottom - e.height - 8;
+  let o = t.bottom + 4;
+  if (r + e.width > i.right - 8 && (r = i.right - e.width - 8), r = Math.max(i.left + 8, r), o + e.height > i.bottom - 8) {
+    const f = t.top - i.top - 8, d = i.bottom - t.bottom - 8;
+    f > d && f >= e.height ? o = t.top - e.height - 4 : o = i.bottom - e.height - 8;
   }
-  return a = Math.max(o.top + 8, a), { x: i, y: a };
+  return o = Math.max(i.top + 8, o), { x: r, y: o };
 }
-function A(t, e, r) {
-  const n = f(r);
-  let o = t.right, i = t.top;
-  if (o + e.width > n.right - 8) {
-    const a = t.left - e.width;
-    a >= n.left + 8 ? o = a : o = n.right - e.width - 8;
+function m(t, e, a) {
+  const n = l(a);
+  let i = t.right, r = t.top;
+  if (i + e.width > n.right - 8) {
+    const o = t.left - e.width;
+    o >= n.left + 8 ? i = o : i = n.right - e.width - 8;
   }
-  return i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), o = Math.max(n.left + 8, o), i = Math.max(n.top + 8, i), { x: o, y: i };
+  return r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), i = Math.max(n.left + 8, i), r = Math.max(n.top + 8, r), { x: i, y: r };
 }
-function c(t, e, r) {
-  return t <= 0 ? null : e < 0 ? r > 0 ? 0 : t - 1 : (e + r + t) % t;
+function M(t, e, a) {
+  return t <= 0 ? null : e < 0 ? a > 0 ? 0 : t - 1 : (e + a + t) % t;
 }
-function I(t) {
-  return !t || typeof HTMLElement > "u" ? [] : Array.from(t.querySelectorAll(h)).filter(
-    (e) => e instanceof HTMLElement
+function u(t, e = {}) {
+  if (!t || typeof HTMLElement > "u") return [];
+  const a = e.includeAriaDisabledItems ? '[role="menuitem"]:not([disabled])' : I;
+  return Array.from(t.querySelectorAll(a)).filter(
+    (n) => n instanceof HTMLElement
   );
 }
-function l(t, e = "first") {
-  const r = I(t);
-  if (!r.length) return !1;
-  let n = r[0];
-  return e === "last" ? n = r[r.length - 1] : e === "selected" && (n = r.find((o) => o.getAttribute("data-floe-selected") === "true") ?? r[0]), n.focus(), !0;
-}
-function u(t, e, r) {
-  const n = I(t);
+function s(t, e = "first", a = {}) {
+  const n = u(t, a);
   if (!n.length) return !1;
-  const o = e ? n.indexOf(e) : -1, i = c(n.length, o, r);
-  return i === null ? !1 : (n[i]?.focus(), !0);
+  let i = n[0];
+  return e === "last" ? i = n[n.length - 1] : e === "selected" && (i = n.find((r) => r.getAttribute("data-floe-selected") === "true") ?? n[0]), i.focus(), !0;
+}
+function h(t, e, a, n = {}) {
+  const i = u(t, n);
+  if (!i.length) return !1;
+  const r = e ? i.indexOf(e) : -1, o = M(i.length, r, a);
+  return o === null ? !1 : (i[o]?.focus(), !0);
 }
-function P(t, e) {
-  const r = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = r?.closest('[role="menu"]');
+function w(t, e) {
+  const a = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = a?.closest('[role="menu"]');
   if (!n) return !1;
-  const o = r?.closest(h);
+  const i = u(n, e), r = a?.closest('[role="menuitem"]'), o = r && i.includes(r) ? r : null;
   switch (t.key) {
     case "ArrowDown":
-      return t.preventDefault(), u(n, o, 1), !0;
+      return t.preventDefault(), h(n, o, 1, e), !0;
     case "ArrowUp":
-      return t.preventDefault(), u(n, o, -1), !0;
+      return t.preventDefault(), h(n, o, -1, e), !0;
     case "Home":
-      return t.preventDefault(), l(n, "first"), !0;
+      return t.preventDefault(), s(n, "first", e), !0;
     case "End":
-      return t.preventDefault(), l(n, "last"), !0;
+      return t.preventDefault(), s(n, "last", e), !0;
+    case "Enter":
+    case " ":
+      return o ? o.getAttribute("aria-disabled") === "true" ? (t.preventDefault(), !0) : e.onActivate ? (t.preventDefault(), e.onActivate(o), !0) : !1 : !1;
     case "Escape":
       return t.preventDefault(), t.stopPropagation(), e.onDismiss("escape"), !0;
     case "Tab":
-      return e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
+      return e.preventDefaultOnTab && t.preventDefault(), e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
     default:
       return !1;
   }
 }
 export {
-  h as MENU_ITEM_SELECTOR,
+  I as MENU_ITEM_SELECTOR,
   E as VIEWPORT_MARGIN,
   T as calculateMenuPosition,
-  A as calculateSubmenuPosition,
-  w as clampMenuPosition,
-  l as focusMenuItem,
-  I as getMenuItems,
-  c as getWrappedMenuItemIndex,
-  P as handleMenuKeyboardNavigation,
-  u as moveMenuFocus,
-  M as resolveViewportMenuBoundaryRect
+  m as calculateSubmenuPosition,
+  A as clampMenuPosition,
+  s as focusMenuItem,
+  u as getMenuItems,
+  M as getWrappedMenuItemIndex,
+  w as handleMenuKeyboardNavigation,
+  h as moveMenuFocus,
+  c as resolveViewportMenuBoundaryRect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.39.4",
+  "version": "0.39.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",