@net-advantage/nabs-ui-dropdownmenu 0.43.0 → 0.45.0

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?.getBoundingClientRect(),n=C.current;if(!e||!t||!n)return;let r=Math.max(e.width,t.width),i=window.innerWidth-r-8,a=l===`end`?e.right-r:e.left,o=Math.max(8,Math.min(a,i)),s=Math.max(8,e.bottom+10);n.style.position=`fixed`,n.style.top=`${s}px`,n.style.left=`${o}px`,n.style.right=`auto`,n.style.minWidth=`${r}px`,n.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({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;

package/dist/nabs-ui-dropdownmenu.css

@@ -1,2 +1,2 @@
-.nabs-ui-dropdownmenu{align-items:flex-start;display:inline-flex;position:relative}.nabs-ui-dropdownmenu__trigger{cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-menu-trigger-gap,.6rem);padding:var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-x,.8rem) var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-left,1rem);transition:background-color .12s,border-color .12s,box-shadow .12s,transform .12s;display:inline-flex}.nabs-ui-dropdownmenu__trigger:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-dropdownmenu__triggerLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__triggerChevron{font-size:var(--nabs-ui-density-menu-chevron-font-size,.8rem);padding-right:var(--nabs-ui-density-menu-chevron-padding-right,.1rem);line-height:1}.nabs-ui-dropdownmenu__menu{gap:var(--nabs-ui-density-menu-gap,.25rem);min-width:var(--nabs-ui-density-menu-min-width,13rem);padding:var(--nabs-ui-density-menu-padding,.5rem);left:0;top:calc(100% + var(--nabs-ui-density-menu-offset,.6rem));z-index:2147483647;display:grid;position:absolute}.nabs-ui-dropdownmenu__item[aria-disabled=true]{pointer-events:none}.nabs-ui-dropdownmenu__item{cursor:pointer;align-items:flex-start;gap:var(--nabs-ui-density-menu-item-gap,.15rem);padding:var(--nabs-ui-density-menu-item-padding-y,.75rem) var(--nabs-ui-density-menu-item-padding-x,.9rem);text-align:left;border:0;justify-items:start;transition:background-color .12s,color .12s;display:grid}.nabs-ui-dropdownmenu__item--disabled{cursor:not-allowed}.nabs-ui-dropdownmenu__itemLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__itemDescription{font-size:var(--nabs-ui-density-description-font-size,.82rem);line-height:1.25}.nabs-ui-dropdownmenu__divider{margin:var(--nabs-ui-density-menu-divider-margin-y,.25rem) 0}
+.nabs-ui-dropdownmenu{align-items:flex-start;display:inline-flex;position:relative}.nabs-ui-dropdownmenu__trigger{cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-menu-trigger-gap,.6rem);padding:var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-x,.8rem) var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-left,1rem);transition:background-color .12s,border-color .12s,box-shadow .12s,transform .12s;display:inline-flex}.nabs-ui-dropdownmenu__trigger:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-dropdownmenu__triggerLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__triggerChevron{font-size:var(--nabs-ui-density-menu-chevron-font-size,.8rem);padding-right:var(--nabs-ui-density-menu-chevron-padding-right,.1rem);line-height:1}.nabs-ui-dropdownmenu__menu{font-family:var(--nabs-ui-font-family-base,inherit);gap:var(--nabs-ui-density-menu-gap,.25rem);min-width:var(--nabs-ui-density-menu-min-width,13rem);padding:var(--nabs-ui-density-menu-padding,.5rem);left:0;top:calc(100% + var(--nabs-ui-density-menu-offset,.6rem));z-index:2147483647;display:grid;position:absolute}.nabs-ui-dropdownmenu__item[aria-disabled=true]{pointer-events:none}.nabs-ui-dropdownmenu__item{cursor:pointer;align-items:flex-start;gap:var(--nabs-ui-density-menu-item-gap,.15rem);padding:var(--nabs-ui-density-menu-item-padding-y,.75rem) var(--nabs-ui-density-menu-item-padding-x,.9rem);text-align:left;border:0;justify-items:start;transition:background-color .12s,color .12s;display:grid}.nabs-ui-dropdownmenu__item--disabled{cursor:not-allowed}.nabs-ui-dropdownmenu__itemLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__itemDescription{font-size:var(--nabs-ui-density-description-font-size,.82rem);line-height:1.25}.nabs-ui-dropdownmenu__divider{margin:var(--nabs-ui-density-menu-divider-margin-y,.25rem) 0}
 /*$vite$:1*/

package/dist/nabs-ui-dropdownmenu.js

@@ -27,10 +27,10 @@ function f({ label: f = "Menu", triggerContent: p, triggerAriaLabel: m, menuAlig
 	}, []), n(() => {
 		if (!T || !O.current) return;
 		let e = () => {
-			let e = O.current?.getBoundingClientRect(), t = k.current?.getBoundingClientRect(), n = k.current;
-			if (!e || !t || !n) return;
-			let r = Math.max(e.width, t.width), i = window.innerWidth - r - 8, a = h === "end" ? e.right - r : e.left, o = Math.max(8, Math.min(a, i)), s = Math.max(8, e.bottom + 10);
-			n.style.position = "fixed", n.style.top = `${s}px`, n.style.left = `${o}px`, n.style.right = "auto", n.style.minWidth = `${r}px`, n.style.visibility = "visible";
+			let e = O.current?.getBoundingClientRect(), t = k.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";
 		};
 		return k.current && (k.current.style.visibility = "hidden"), e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net-advantage/nabs-ui-dropdownmenu",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "description": "Reusable dropdown menu control for the Nabs UI library.",
   "type": "module",
   "main": "./dist/nabs-ui-dropdownmenu.cjs",