@floegence/floe-webapp-core 0.39.1 → 0.39.3

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

@@ -4,6 +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 { 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

@@ -9,6 +9,10 @@ export type MenuBoundaryRect = Readonly<{
     height: number;
 }>;
 export type MenuFocusMode = 'first' | 'last' | 'selected';
+export type MenuDismissReason = 'escape' | 'tab' | 'shift-tab';
+export type MenuKeyboardNavigationOptions = Readonly<{
+    onDismiss: (reason: MenuDismissReason) => void;
+}>;
 export declare function resolveViewportMenuBoundaryRect(): MenuBoundaryRect;
 export declare function clampMenuPosition(anchor: Readonly<{
     x: number;
@@ -32,3 +36,4 @@ export declare function getWrappedMenuItemIndex(length: number, currentIndex: nu
 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 handleMenuKeyboardNavigation(event: KeyboardEvent, options: MenuKeyboardNavigationOptions): boolean;

package/dist/components/ui/menuUtils.js

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