@net-advantage/nabs-ui-dropdownmenu 0.69.0 → 0.71.0

package/dist/dropdownmenu.model.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenuActionItem, DropdownMenuDividerItem, DropdownMenuItem } from './DropdownMenu.types';
+export declare function isDividerItem(item: DropdownMenuItem | undefined): item is DropdownMenuDividerItem;
+export declare function getItemLabel(item: DropdownMenuActionItem): string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined>;
+export declare function getItemKey(item: DropdownMenuActionItem, index: number): string;

package/dist/dropdownmenu.model.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dropdownmenu.utils.d.ts

@@ -1,4 +1 @@
-import { DropdownMenuActionItem, DropdownMenuDividerItem, DropdownMenuItem } from './DropdownMenu.types';
-export declare function isDividerItem(item: DropdownMenuItem | undefined): item is DropdownMenuDividerItem;
-export declare function getItemLabel(item: DropdownMenuActionItem): string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined>;
-export declare function getItemKey(item: DropdownMenuActionItem, index: number): string;
+export { isDividerItem, getItemLabel, getItemKey, } from './dropdownmenu.model';

package/dist/dropdownmenu.view-model.d.ts

@@ -0,0 +1,35 @@
+import { DropdownMenuProps } from './DropdownMenu.types';
+export interface DropdownMenuClassNameOptions {
+    className?: string;
+    triggerClassName?: string;
+    menuClassName?: string;
+    itemClassName?: string;
+    dividerClassName?: string;
+}
+export declare function buildDropdownMenuId(id: string | undefined, generatedId: string): string;
+export declare function buildDropdownMenuClassNames(options: DropdownMenuClassNameOptions): {
+    classes: string;
+    triggerClasses: string;
+    menuClasses: string;
+    itemClasses: string;
+    dividerClasses: string;
+};
+export declare function buildDropdownMenuItemClassName(baseClassName: string, state: {
+    disabled?: boolean;
+    danger?: boolean;
+}): string;
+export declare function computeDropdownMenuPosition({ menuAlign, triggerRect, viewportWidth, viewportPadding, verticalGap, }: {
+    menuAlign: DropdownMenuProps["menuAlign"];
+    triggerRect: Pick<DOMRect, "left" | "right" | "bottom" | "width">;
+    viewportWidth: number;
+    viewportPadding?: number;
+    verticalGap?: number;
+}): {
+    top: number;
+    left: number;
+    minWidth: number;
+};
+export declare function toDropdownMenuStateLabel({ open, itemCount, }: {
+    open: boolean;
+    itemCount: number;
+}): string;

package/dist/dropdownmenu.view-model.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/nabs-ui-dropdownmenu.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react-dom"),n=require("react/jsx-runtime");function r(e){return!!(e&&`type`in e&&e.type===`divider`)}function i(e){return e.label??e.children??`Menu item`}function a(e,t){return e.value??e.label??`item-${t}`}function o({label:o=`Menu`,triggerContent:s,triggerAriaLabel:c,menuAlign:l=`start`,items:u=[],className:d=``,triggerClassName:f=``,menuClassName:p=``,itemClassName:m=``,dividerClassName:h=``,id:g,onItemSelect:_,...v}){let[y,b]=(0,e.useState)(!1),x=(0,e.useRef)(null),S=(0,e.useRef)(null),C=(0,e.useRef)(null),w=(0,e.useId)(),T=g??`nabs-ui-dropdownmenu-${w.replace(/:/g,``)}`,E=[`nabs-ui-dropdownmenu`,d].filter(Boolean).join(` `),D=[`nabs-ui-dropdownmenu__trigger`,f].filter(Boolean).join(` `),O=[`nabs-ui-dropdownmenu__menu`,p].filter(Boolean).join(` `),k=[`nabs-ui-dropdownmenu__item`,m].filter(Boolean).join(` `),A=[`nabs-ui-dropdownmenu__divider`,h].filter(Boolean).join(` `);(0,e.useEffect)(()=>{let e=e=>{e.target instanceof Node&&x.current&&!x.current.contains(e.target)&&C.current&&!C.current.contains(e.target)&&b(!1)},t=e=>{e.key===`Escape`&&b(!1)};return document.addEventListener(`pointerdown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`pointerdown`,e),document.removeEventListener(`keydown`,t)}},[]),(0,e.useLayoutEffect)(()=>{if(!y||!S.current)return;let e=()=>{let e=S.current?.getBoundingClientRect(),t=C.current;if(!e||!t)return;let n=e.width,r=window.innerWidth-n-8,i=l===`end`?e.right-n:e.left,a=Math.max(8,Math.min(i,r)),o=Math.max(8,e.bottom+10);t.style.position=`fixed`,t.style.top=`${o}px`,t.style.left=`${a}px`,t.style.right=`auto`,t.style.minWidth=`${n}px`,t.style.visibility=`visible`};return C.current&&(C.current.style.visibility=`hidden`),e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[l,y]);let j=(e,t)=>{if(b(!1),e.disabled){t.preventDefault();return}_?.(e,t),e.onSelect?.(e,t)};return(0,n.jsxs)(`div`,{ref:x,className:E,...v,children:[(0,n.jsx)(`button`,{ref:S,type:`button`,className:D,"aria-haspopup":`menu`,"aria-controls":T,"aria-label":c??o,onClick:()=>b(e=>!e),children:s??(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__triggerLabel`,children:o}),(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__triggerChevron`,"aria-hidden":`true`,children:`▾`})]})}),y&&typeof document<`u`?(0,t.createPortal)((0,n.jsx)(`div`,{ref:C,id:T,className:O,"aria-label":o,children:u.map((e,t)=>{if(r(e))return(0,n.jsx)(`div`,{className:A,role:`separator`,"aria-hidden":`true`},`divider-${t}`);let o=i(e),s=[k,e.disabled?`nabs-ui-dropdownmenu__item--disabled`:``,e.danger?`nabs-ui-dropdownmenu__item--danger`:``].filter(Boolean).join(` `),c={className:s,"aria-disabled":e.disabled||void 0};return e.href?(0,n.jsxs)(`a`,{...c,href:e.disabled?void 0:e.href,onClick:t=>j(e,t),children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemLabel`,children:o}),e.description?(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemDescription`,children:e.description}):null]},a(e,t)):(0,n.jsxs)(`button`,{type:`button`,className:s,disabled:e.disabled,onClick:t=>j(e,t),children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemLabel`,children:o}),e.description?(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemDescription`,children:e.description}):null]},a(e,t))})}),document.body):null]})}exports.DropdownMenu=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react-dom"),n=require("react/jsx-runtime");function r(e){return!!(e&&`type`in e&&e.type===`divider`)}function i(e){return e.label??e.children??`Menu item`}function a(e,t){return e.value??e.label??`item-${t}`}function o(e,t){return e||`nabs-ui-dropdownmenu-${t.replace(/:/g,``)}`}function s(e){return{classes:[`nabs-ui-dropdownmenu`,e.className??``].filter(Boolean).join(` `),triggerClasses:[`nabs-ui-dropdownmenu__trigger`,e.triggerClassName??``].filter(Boolean).join(` `),menuClasses:[`nabs-ui-dropdownmenu__menu`,e.menuClassName??``].filter(Boolean).join(` `),itemClasses:[`nabs-ui-dropdownmenu__item`,e.itemClassName??``].filter(Boolean).join(` `),dividerClasses:[`nabs-ui-dropdownmenu__divider`,e.dividerClassName??``].filter(Boolean).join(` `)}}function c(e,t){return[e,t.disabled?`nabs-ui-dropdownmenu__item--disabled`:``,t.danger?`nabs-ui-dropdownmenu__item--danger`:``].filter(Boolean).join(` `)}function l({menuAlign:e,triggerRect:t,viewportWidth:n,viewportPadding:r=8,verticalGap:i=10}){let a=t.width,o=n-a-r,s=e===`end`?t.right-a:t.left,c=Math.max(r,Math.min(s,o));return{top:Math.max(r,t.bottom+i),left:c,minWidth:a}}function u({label:u=`Menu`,triggerContent:d,triggerAriaLabel:f,menuAlign:p=`start`,items:m=[],className:h=``,triggerClassName:g=``,menuClassName:_=``,itemClassName:v=``,dividerClassName:y=``,id:b,onItemSelect:x,...S}){let[C,w]=(0,e.useState)(!1),T=(0,e.useRef)(null),E=(0,e.useRef)(null),D=(0,e.useRef)(null),O=o(b,(0,e.useId)()),{classes:k,triggerClasses:A,menuClasses:j,itemClasses:M,dividerClasses:N}=s({className:h,triggerClassName:g,menuClassName:_,itemClassName:v,dividerClassName:y});(0,e.useEffect)(()=>{let e=e=>{e.target instanceof Node&&T.current&&!T.current.contains(e.target)&&D.current&&!D.current.contains(e.target)&&w(!1)},t=e=>{e.key===`Escape`&&w(!1)};return document.addEventListener(`pointerdown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`pointerdown`,e),document.removeEventListener(`keydown`,t)}},[]),(0,e.useLayoutEffect)(()=>{if(!C||!E.current)return;let e=()=>{let e=E.current?.getBoundingClientRect(),t=D.current;if(!e||!t)return;let n=l({menuAlign:p,triggerRect:e,viewportWidth:window.innerWidth});t.style.position=`fixed`,t.style.top=`${n.top}px`,t.style.left=`${n.left}px`,t.style.right=`auto`,t.style.minWidth=`${n.minWidth}px`,t.style.visibility=`visible`};return D.current&&(D.current.style.visibility=`hidden`),e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,!0)}},[p,C]);let P=(e,t)=>{if(w(!1),e.disabled){t.preventDefault();return}x?.(e,t),e.onSelect?.(e,t)};return(0,n.jsxs)(`div`,{ref:T,className:k,...S,children:[(0,n.jsx)(`button`,{ref:E,type:`button`,className:A,"aria-haspopup":`menu`,"aria-controls":O,"aria-label":f??u,onClick:()=>w(e=>!e),children:d??(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__triggerLabel`,children:u}),(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__triggerChevron`,"aria-hidden":`true`,children:`▾`})]})}),C&&typeof document<`u`?(0,t.createPortal)((0,n.jsx)(`div`,{ref:D,id:O,className:j,"aria-label":u,children:m.map((e,t)=>{if(r(e))return(0,n.jsx)(`div`,{className:N,role:`separator`,"aria-hidden":`true`},`divider-${t}`);let o=i(e),s=c(M,{disabled:e.disabled,danger:e.danger}),l={className:s,"aria-disabled":e.disabled||void 0};return e.href?(0,n.jsxs)(`a`,{...l,href:e.disabled?void 0:e.href,onClick:t=>P(e,t),children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemLabel`,children:o}),e.description?(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemDescription`,children:e.description}):null]},a(e,t)):(0,n.jsxs)(`button`,{type:`button`,className:s,disabled:e.disabled,onClick:t=>P(e,t),children:[(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemLabel`,children:o}),e.description?(0,n.jsx)(`span`,{className:`nabs-ui-dropdownmenu__itemDescription`,children:e.description}):null]},a(e,t))})}),document.body):null]})}exports.DropdownMenu=u;

package/dist/nabs-ui-dropdownmenu.js

@@ -1,7 +1,7 @@
 import { useEffect as e, useId as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 import { createPortal as a } from "react-dom";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/dropdownmenu.utils.ts
+//#region src/dropdownmenu.model.ts
 function l(e) {
 	return !!(e && "type" in e && e.type === "divider");
 }
@@ -12,80 +12,118 @@ function d(e, t) {
 	return e.value ?? e.label ?? `item-${t}`;
 }
 //#endregion
+//#region src/dropdownmenu.view-model.ts
+function f(e, t) {
+	return e || `nabs-ui-dropdownmenu-${t.replace(/:/g, "")}`;
+}
+function p(e) {
+	return {
+		classes: ["nabs-ui-dropdownmenu", e.className ?? ""].filter(Boolean).join(" "),
+		triggerClasses: ["nabs-ui-dropdownmenu__trigger", e.triggerClassName ?? ""].filter(Boolean).join(" "),
+		menuClasses: ["nabs-ui-dropdownmenu__menu", e.menuClassName ?? ""].filter(Boolean).join(" "),
+		itemClasses: ["nabs-ui-dropdownmenu__item", e.itemClassName ?? ""].filter(Boolean).join(" "),
+		dividerClasses: ["nabs-ui-dropdownmenu__divider", e.dividerClassName ?? ""].filter(Boolean).join(" ")
+	};
+}
+function m(e, t) {
+	return [
+		e,
+		t.disabled ? "nabs-ui-dropdownmenu__item--disabled" : "",
+		t.danger ? "nabs-ui-dropdownmenu__item--danger" : ""
+	].filter(Boolean).join(" ");
+}
+function h({ menuAlign: e, triggerRect: t, viewportWidth: n, viewportPadding: r = 8, verticalGap: i = 10 }) {
+	let a = t.width, o = n - a - r, s = e === "end" ? t.right - a : t.left, c = Math.max(r, Math.min(s, o));
+	return {
+		top: Math.max(r, t.bottom + i),
+		left: c,
+		minWidth: a
+	};
+}
+//#endregion
 //#region src/DropdownMenu.tsx
-function f({ label: f = "Menu", triggerContent: p, triggerAriaLabel: m, menuAlign: h = "start", items: g = [], className: _ = "", triggerClassName: v = "", menuClassName: y = "", itemClassName: b = "", dividerClassName: x = "", id: S, onItemSelect: C, ...w }) {
-	let [T, E] = i(!1), D = r(null), O = r(null), k = r(null), A = t(), j = S ?? `nabs-ui-dropdownmenu-${A.replace(/:/g, "")}`, M = ["nabs-ui-dropdownmenu", _].filter(Boolean).join(" "), N = ["nabs-ui-dropdownmenu__trigger", v].filter(Boolean).join(" "), P = ["nabs-ui-dropdownmenu__menu", y].filter(Boolean).join(" "), F = ["nabs-ui-dropdownmenu__item", b].filter(Boolean).join(" "), I = ["nabs-ui-dropdownmenu__divider", x].filter(Boolean).join(" ");
+function g({ label: g = "Menu", triggerContent: _, triggerAriaLabel: v, menuAlign: y = "start", items: b = [], className: x = "", triggerClassName: S = "", menuClassName: C = "", itemClassName: w = "", dividerClassName: T = "", id: E, onItemSelect: D, ...O }) {
+	let [k, A] = i(!1), j = r(null), M = r(null), N = r(null), P = f(E, t()), { classes: F, triggerClasses: I, menuClasses: L, itemClasses: R, dividerClasses: z } = p({
+		className: x,
+		triggerClassName: S,
+		menuClassName: C,
+		itemClassName: w,
+		dividerClassName: T
+	});
 	e(() => {
 		let e = (e) => {
-			e.target instanceof Node && D.current && !D.current.contains(e.target) && k.current && !k.current.contains(e.target) && E(!1);
+			e.target instanceof Node && j.current && !j.current.contains(e.target) && N.current && !N.current.contains(e.target) && A(!1);
 		}, t = (e) => {
-			e.key === "Escape" && E(!1);
+			e.key === "Escape" && A(!1);
 		};
 		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		};
 	}, []), n(() => {
-		if (!T || !O.current) return;
+		if (!k || !M.current) return;
 		let e = () => {
-			let e = O.current?.getBoundingClientRect(), t = k.current;
+			let e = M.current?.getBoundingClientRect(), t = N.current;
 			if (!e || !t) return;
-			let n = e.width, r = window.innerWidth - n - 8, i = h === "end" ? e.right - n : e.left, a = Math.max(8, Math.min(i, r)), o = Math.max(8, e.bottom + 10);
-			t.style.position = "fixed", t.style.top = `${o}px`, t.style.left = `${a}px`, t.style.right = "auto", t.style.minWidth = `${n}px`, t.style.visibility = "visible";
+			let n = h({
+				menuAlign: y,
+				triggerRect: e,
+				viewportWidth: window.innerWidth
+			});
+			t.style.position = "fixed", t.style.top = `${n.top}px`, t.style.left = `${n.left}px`, t.style.right = "auto", t.style.minWidth = `${n.minWidth}px`, t.style.visibility = "visible";
 		};
-		return k.current && (k.current.style.visibility = "hidden"), e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+		return N.current && (N.current.style.visibility = "hidden"), e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
-	}, [h, T]);
-	let L = (e, t) => {
-		if (E(!1), e.disabled) {
+	}, [y, k]);
+	let B = (e, t) => {
+		if (A(!1), e.disabled) {
 			t.preventDefault();
 			return;
 		}
-		C?.(e, t), e.onSelect?.(e, t);
+		D?.(e, t), e.onSelect?.(e, t);
 	};
 	return /* @__PURE__ */ c("div", {
-		ref: D,
-		className: M,
-		...w,
+		ref: j,
+		className: F,
+		...O,
 		children: [/* @__PURE__ */ s("button", {
-			ref: O,
+			ref: M,
 			type: "button",
-			className: N,
+			className: I,
 			"aria-haspopup": "menu",
-			"aria-controls": j,
-			"aria-label": m ?? f,
-			onClick: () => E((e) => !e),
-			children: p ?? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+			"aria-controls": P,
+			"aria-label": v ?? g,
+			onClick: () => A((e) => !e),
+			children: _ ?? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
 				className: "nabs-ui-dropdownmenu__triggerLabel",
-				children: f
+				children: g
 			}), /* @__PURE__ */ s("span", {
 				className: "nabs-ui-dropdownmenu__triggerChevron",
 				"aria-hidden": "true",
 				children: "▾"
 			})] })
-		}), T && typeof document < "u" ? a(/* @__PURE__ */ s("div", {
-			ref: k,
-			id: j,
-			className: P,
-			"aria-label": f,
-			children: g.map((e, t) => {
+		}), k && typeof document < "u" ? a(/* @__PURE__ */ s("div", {
+			ref: N,
+			id: P,
+			className: L,
+			"aria-label": g,
+			children: b.map((e, t) => {
 				if (l(e)) return /* @__PURE__ */ s("div", {
-					className: I,
+					className: z,
 					role: "separator",
 					"aria-hidden": "true"
 				}, `divider-${t}`);
-				let n = u(e), r = [
-					F,
-					e.disabled ? "nabs-ui-dropdownmenu__item--disabled" : "",
-					e.danger ? "nabs-ui-dropdownmenu__item--danger" : ""
-				].filter(Boolean).join(" "), i = {
+				let n = u(e), r = m(R, {
+					disabled: e.disabled,
+					danger: e.danger
+				}), i = {
 					className: r,
 					"aria-disabled": e.disabled || void 0
 				};
 				return e.href ? /* @__PURE__ */ c("a", {
 					...i,
 					href: e.disabled ? void 0 : e.href,
-					onClick: (t) => L(e, t),
+					onClick: (t) => B(e, t),
 					children: [/* @__PURE__ */ s("span", {
 						className: "nabs-ui-dropdownmenu__itemLabel",
 						children: n
@@ -97,7 +135,7 @@ function f({ label: f = "Menu", triggerContent: p, triggerAriaLabel: m, menuAlig
 					type: "button",
 					className: r,
 					disabled: e.disabled,
-					onClick: (t) => L(e, t),
+					onClick: (t) => B(e, t),
 					children: [/* @__PURE__ */ s("span", {
 						className: "nabs-ui-dropdownmenu__itemLabel",
 						children: n
@@ -111,4 +149,4 @@ function f({ label: f = "Menu", triggerContent: p, triggerAriaLabel: m, menuAlig
 	});
 }
 //#endregion
-export { f as DropdownMenu };
+export { g as DropdownMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net-advantage/nabs-ui-dropdownmenu",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "Reusable dropdown menu control for the Nabs UI library.",
   "type": "module",
   "main": "./dist/nabs-ui-dropdownmenu.cjs",
@@ -25,11 +25,16 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "react-dom": "^19.2.6",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "vite build",
-    "dev": "vite"
+    "dev": "vite",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage --coverage.reporter=html --coverage.reporter=json-summary --coverage.reporter=text-summary"
   }
 }