npm - @nofinite/nui - Versions diffs - 1.1.2 → 2.0.0 - Mend

@nofinite/nui 1.1.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @nofinite/nui might be problematic. Click here for more details.

Files changed (739) hide show

package/dist/components/commandpalette/CommandPalette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPalette.js","sources":["../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["/*\r\n CommandPalette.tsx — FINAL VERSION\r\n * -----------------------------------\r\n * Full-featured Cmd+K command menu.\r\n * - Cmd+K / Ctrl+K global shortcut\r\n * - Search filter\r\n * - Keyboard navigation\r\n * - Portal + overlay\r\n * - Sections\r\n * - ARIA-compliant\r\n /\r\n\r\nimport {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './CommandPalette.css';\r\nimport { Portal, onClickOutside} from '../../utils/index';\r\n\r\nexport interface CommandItem {\r\n id: string;\r\n label: string;\r\n icon?: ReactNode;\r\n shortcut?: string;\r\n description?: string;\r\n onSelect?: () => void;\r\n}\r\n\r\nexport interface CommandSection {\r\n title?: string;\r\n items: CommandItem[];\r\n}\r\n\r\ninterface CommandPaletteProps {\r\n sections: CommandSection[];\r\n placeholder?: string;\r\n className?: string;\r\n}\r\n\r\nexport function CommandPalette({\r\n sections,\r\n placeholder = 'Search commands…',\r\n className = '',\r\n}: CommandPaletteProps) {\r\n const [open, setOpen] = useState(false);\r\n const [query, setQuery] = useState('');\r\n const [active, setActive] = useState<{ section: number; index: number }>({\r\n section: 0,\r\n index: 0,\r\n });\r\n\r\n const paletteRef = useRef<HTMLDivElement \| null>(null);\r\n const inputRef = useRef<HTMLInputElement \| null>(null);\r\n\r\n /* Global Cmd+K shortcut /\r\n useEffect(() => {\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n const isMac = navigator.platform.toLowerCase().includes('mac');\r\n const cmd = isMac ? e.metaKey : e.ctrlKey;\r\n\r\n if (cmd && e.key.toLowerCase() === 'k') {\r\n e.preventDefault();\r\n setOpen((o) => !o);\r\n }\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, []);\r\n\r\n /* Close on ESC /\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /* Click outside to close /\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(paletteRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n /* Autofocus search when opened /\r\n useEffect(() => {\r\n if (open) {\r\n setTimeout(() => inputRef.current?.focus(), 0);\r\n setQuery('');\r\n }\r\n }, [open]);\r\n\r\n /* Filtered list /\r\n const filteredSections = sections.map((sec) => ({\r\n ...sec,\r\n items: sec.items.filter((i) =>\r\n i.label.toLowerCase().includes(query.toLowerCase())\r\n ),\r\n }));\r\n\r\n /* Flatten for easier navigation /\r\n const flatList = filteredSections.flatMap((sec, sIdx) =>\r\n sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\r\n );\r\n\r\n /* Handle keyboard navigation /\r\n const move = (dir: 1 \| -1) => {\r\n if (flatList.length === 0) return;\r\n\r\n const currentIndex = flatList.findIndex(\r\n (x) => x.section === active.section && x.index === active.index\r\n );\r\n\r\n let next = currentIndex + dir;\r\n if (next < 0) next = flatList.length - 1;\r\n if (next >= flatList.length) next = 0;\r\n\r\n setActive(flatList[next]);\r\n };\r\n\r\n const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const key = e.key;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Enter') {\r\n e.preventDefault();\r\n\r\n const sec = filteredSections[active.section];\r\n const item = sec?.items[active.index];\r\n\r\n if (item && item.onSelect) {\r\n item.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <Portal>\r\n <div className=\"ui-cmd-overlay\" />\r\n\r\n <div\r\n ref={paletteRef}\r\n className={`ui-cmd ${className}`}\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n onKeyDown={handleKey}\r\n >\r\n {/ Search bar */}\r\n <input\r\n ref={inputRef}\r\n className=\"ui-cmd-input\"\r\n placeholder={placeholder}\r\n value={query}\r\n onChange={(e) => setQuery(e.target.value)}\r\n />\r\n\r\n <div className=\"ui-cmd-list\">\r\n {filteredSections.map((sec, sIdx) => (\r\n <div key={sIdx} className=\"ui-cmd-section\">\r\n {sec.title && (\r\n <div className=\"ui-cmd-section-title\">{sec.title}</div>\r\n )}\r\n\r\n {sec.items.length === 0 ? (\r\n <div className=\"ui-cmd-empty\">No results</div>\r\n ) : (\r\n sec.items.map((item, iIdx) => {\r\n const isActive =\r\n active.section === sIdx && active.index === iIdx;\r\n\r\n return (\r\n <div\r\n key={item.id}\r\n className={`ui-cmd-item ${isActive ? 'active' : ''}`}\r\n onMouseEnter={() =>\r\n setActive({ section: sIdx, index: iIdx })\r\n }\r\n onClick={() => {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-cmd-icon\">{item.icon}</span>\r\n )}\r\n\r\n <div className=\"ui-cmd-meta\">\r\n <div className=\"ui-cmd-label\">{item.label}</div>\r\n {item.description && (\r\n <div className=\"ui-cmd-description\">\r\n {item.description}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {item.shortcut && (\r\n <span className=\"ui-cmd-shortcut\">{item.shortcut}</span>\r\n )}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n </Portal>\r\n );\r\n}\r\n"],"names":["CommandPalette","sections","placeholder","className","open","setOpen","useState","query","setQuery","active","setActive","paletteRef","useRef","inputRef","useEffect","handler","e","o","onClickOutside","filteredSections","sec","i","flatList","sIdx","_","iIdx","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","isActive"],"mappings":"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"}
1	+ {"version":3,"file":"CommandPalette.js","sources":["../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n useEffect,\n useRef,\n useState,\n ReactNode,\n KeyboardEvent as ReactKeyboardEvent,\n useCallback,\n} from 'react';\nimport { Portal, onClickOutside, cn } from '../../utils';\nimport './CommandPalette.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface CommandItem {\n id: string;\n label: string;\n icon?: ReactNode;\n /* Displayed as a <kbd> hint, e.g., \"⌘ K\" /\n shortcut?: string;\n description?: string;\n onSelect?: () => void;\n}\n\nexport interface CommandSection {\n title?: string;\n items: CommandItem[];\n}\n\nexport interface CommandPaletteProps {\n sections: CommandSection[];\n placeholder?: string;\n className?: string;\n /* Forces the palette open/closed. If undefined, it operates purely via Cmd+K internally. /\n open?: boolean; \n onOpenChange?: (open: boolean) => void;\n}\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n CommandPalette Component\n * * A fast, composable, unstyled command menu for React.\n * Architecture Note: Manages a nested data structure (Sections > Items) but mathematically \n * flattens it for seamless O(1) keyboard navigation across section boundaries.\n /\nexport function CommandPalette({\n sections,\n placeholder = 'Search commands…',\n className,\n open: controlledOpen,\n onOpenChange,\n}: CommandPaletteProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n const handleOpenChange = useCallback((newOpen: boolean) => {\n if (controlledOpen === undefined) setInternalOpen(newOpen);\n onOpenChange?.(newOpen);\n }, [controlledOpen, onOpenChange]);\n\n const [query, setQuery] = useState('');\n const [active, setActive] = useState<{ section: number; index: number }>({\n section: 0,\n index: 0,\n });\n\n const paletteRef = useRef<HTMLDivElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const activeItemRef = useRef<HTMLDivElement \| null>(null);\n\n / ----------------------------------------------------\n Filtering & Flat Mapping\n ---------------------------------------------------- /\n // 1. Filter items based on query (checks both label and description)\n // 2. Filter out sections that end up completely empty\n const filteredSections = sections\n .map((sec) => ({\n ...sec,\n items: sec.items.filter(\n (i) =>\n i.label.toLowerCase().includes(query.toLowerCase()) \|\|\n i.description?.toLowerCase().includes(query.toLowerCase())\n ),\n }))\n .filter((sec) => sec.items.length > 0); \n\n // Navigation Engine: \n // Creates a flat list of coordinates [{section: 0, index: 0}, {section: 0, index: 1}, {section: 1, index: 0}]\n // This allows the ArrowUp/ArrowDown keys to easily increment/decrement a single integer \n // and look up the exact multidimensional coordinate.\n const flatList = filteredSections.flatMap((sec, sIdx) =>\n sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\n );\n\n /* ----------------------------------------------------\n Event Listeners & Effects\n ---------------------------------------------------- /\n // Global Cmd+K / Ctrl+K shortcut\n useEffect(() => {\n const handler = (e: KeyboardEvent) => {\n const isMac = navigator.platform.toLowerCase().includes('mac');\n const cmd = isMac ? e.metaKey : e.ctrlKey;\n\n if (cmd && e.key.toLowerCase() === 'k') {\n e.preventDefault();\n handleOpenChange(!isOpen);\n }\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [isOpen, handleOpenChange]);\n\n // Close on ESC\n useEffect(() => {\n if (!isOpen) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') handleOpenChange(false);\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [isOpen, handleOpenChange]);\n\n // Click outside to close\n useEffect(() => {\n if (!isOpen) return;\n return onClickOutside(paletteRef, () => handleOpenChange(false));\n }, [isOpen, handleOpenChange]);\n\n // Reset state and autofocus when opened\n useEffect(() => {\n if (isOpen) {\n setQuery('');\n setActive({ section: 0, index: 0 });\n // Small timeout ensures the React Portal has mounted the DOM node before focusing\n setTimeout(() => inputRef.current?.focus(), 10);\n }\n }, [isOpen]);\n\n // Auto-scroll active item into view\n useEffect(() => {\n if (isOpen && activeItemRef.current) {\n activeItemRef.current.scrollIntoView({ block: 'nearest' });\n }\n }, [active, isOpen, query]);\n\n // Reset active index when user types (so it jumps back to top)\n useEffect(() => {\n setActive({ section: 0, index: 0 });\n }, [query]);\n\n / ----------------------------------------------------\n Keyboard Navigation\n ---------------------------------------------------- /\n const move = (dir: 1 \| -1) => {\n if (flatList.length === 0) return;\n\n const currentIndex = flatList.findIndex(\n (x) => x.section === active.section && x.index === active.index\n );\n\n let next = currentIndex + dir;\n // Wrap around logic\n if (next < 0) next = flatList.length - 1;\n if (next >= flatList.length) next = 0;\n\n setActive(flatList[next]);\n };\n\n const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n const key = e.key;\n\n if (key === 'ArrowDown') {\n e.preventDefault();\n move(1);\n } else if (key === 'ArrowUp') {\n e.preventDefault();\n move(-1);\n } else if (key === 'Enter') {\n e.preventDefault();\n const sec = filteredSections[active.section];\n const item = sec?.items[active.index];\n\n if (item && item.onSelect) {\n item.onSelect();\n handleOpenChange(false);\n }\n }\n };\n\n / ----------------------------------------------------\n Render\n ---------------------------------------------------- /\n if (!isOpen) return null;\n\n return (\n <Portal>\n <div className=\"nui-cmd-overlay\" />\n\n <div\n ref={paletteRef}\n className={cn(\"nui-cmd\", className)}\n role=\"dialog\"\n aria-modal=\"true\"\n onKeyDown={handleKey}\n >\n {/ Search Header /}\n <div className=\"nui-cmd-header\">\n <svg className=\"nui-cmd-search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input\n ref={inputRef}\n className=\"nui-cmd-input\"\n placeholder={placeholder}\n value={query}\n onChange={(e) => setQuery(e.target.value)}\n />\n {query && (\n <button className=\"nui-cmd-clear\" onClick={() => setQuery('')}>\n ESC\n </button>\n )}\n </div>\n\n {/ Results List */}\n <div className=\"nui-cmd-list\" role=\"listbox\">\n {filteredSections.length === 0 ? (\n <div className=\"nui-cmd-empty\">\n <span className=\"nui-cmd-empty-text\">No results found for \"{query}\"</span>\n </div>\n ) : (\n filteredSections.map((sec, sIdx) => (\n <div key={sIdx} className=\"nui-cmd-section\">\n {sec.title && (\n <div className=\"nui-cmd-section-title\">{sec.title}</div>\n )}\n\n <div className=\"nui-cmd-section-items\">\n {sec.items.map((item, iIdx) => {\n const isActive = active.section === sIdx && active.index === iIdx;\n\n return (\n <div\n key={item.id}\n ref={isActive ? activeItemRef : null}\n role=\"option\"\n aria-selected={isActive}\n className={cn(\"nui-cmd-item\", isActive && \"active\")}\n onMouseEnter={() => setActive({ section: sIdx, index: iIdx })}\n onClick={() => {\n item.onSelect?.();\n handleOpenChange(false);\n }}\n >\n {item.icon && (\n <div className=\"nui-cmd-item-icon\">{item.icon}</div>\n )}\n\n <div className=\"nui-cmd-item-meta\">\n <div className=\"nui-cmd-item-label\">{item.label}</div>\n {item.description && (\n <div className=\"nui-cmd-item-description\">\n {item.description}\n </div>\n )}\n </div>\n\n {item.shortcut && (\n <div className=\"nui-cmd-item-shortcut\">\n {item.shortcut.split(' ').map((key, k) => (\n <kbd key={k}>{key}</kbd>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n </div>\n ))\n )}\n </div>\n </div>\n </Portal>\n );\n}"],"names":["CommandPalette","sections","placeholder","className","controlledOpen","onOpenChange","internalOpen","setInternalOpen","useState","isOpen","handleOpenChange","useCallback","newOpen","query","setQuery","active","setActive","paletteRef","useRef","inputRef","activeItemRef","filteredSections","sec","i","flatList","sIdx","_","iIdx","useEffect","handler","e","onClickOutside","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","cn","isActive","k"],"mappings":"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"}

package/dist/components/contextmenu/ContextMenu.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react");;/* empty css                  */const E=require("../../utils/onclickoutside/onClickOutside.cjs"),g=require("../../utils/portal/portal.cjs");function w({trigger:x,items:r,className:v=""}){const[l,a]=o.useState(!1),[c,b]=o.useState(null),d=o.useRef(null),[u,i]=o.useState(0),h=e=>{e.preventDefault(),b({top:e.clientY,left:e.clientX}),a(!0),i(f())},f=()=>r.findIndex(e=>e.type!=="separator"&&!e.disabled),y=()=>{for(let e=r.length-1;e>=0;e--){const n=r[e];if(n.type!=="separator"&&!n.disabled)return e}return 0},p=e=>{let n=u;for(;;){n=n+e,n<0&&(n=r.length-1),n>=r.length&&(n=0);const t=r[n];if(t.type!=="separator"&&!t.disabled){i(n);break}}},j=e=>{const{key:n}=e;if(n==="ArrowDown")e.preventDefault(),p(1);else if(n==="ArrowUp")e.preventDefault(),p(-1);else if(n==="Home")e.preventDefault(),i(f());else if(n==="End")e.preventDefault(),i(y());else if(n==="Enter"||n===" "){e.preventDefault();const t=r[u];t&&!t.disabled&&t.onSelect&&(t.onSelect(),a(!1))}};return o.useEffect(()=>{if(!l)return;const e=n=>{n.key==="Escape"&&a(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l]),o.useEffect(()=>{if(l)return E.onClickOutside(d,()=>a(!1))},[l]),s.jsxs("div",{className:"ui-contextmenu-wrapper",children:[s.jsx("div",{onContextMenu:h,children:x}),l&&c&&s.jsx(g.Portal,{children:s.jsx("div",{ref:d,className:`ui-contextmenu ${v}`,role:"menu",tabIndex:-1,style:{top:c.top,left:c.left,position:"fixed"},onKeyDown:j,children:r.map((e,n)=>{if(e.type==="separator")return s.jsx("div",{className:"ui-contextmenu-separator"},n);const t=n===u;return s.jsxs("div",{className:["ui-contextmenu-item",e.disabled?"disabled":"",e.danger?"danger":"",t?"active":""].filter(Boolean).join(" "),role:"menuitem",tabIndex:-1,"aria-disabled":e.disabled||void 0,onMouseEnter:()=>i(n),onClick:()=>{e.disabled||(e.onSelect?.(),a(!1))},children:[e.icon&&s.jsx("span",{className:"ui-contextmenu-icon",children:e.icon}),s.jsx("span",{children:e.label})]},n)})})})]})}exports.ContextMenu=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react");;/* empty css                  */const S=require("../../utils/onclickoutside/onClickOutside.cjs"),k=require("../../utils/portal/portal.cjs"),g=require("../../utils/cn/cn.cjs");function L({children:f,items:i,className:m,asChild:E=!1}){const[s,u]=o.useState(!1),[p,y]=o.useState({top:0,left:0}),[x,d]=o.useState(0),l=o.useRef(null),v=e=>{e.preventDefault(),y({top:e.clientY,left:e.clientX}),u(!0),d(w())};o.useLayoutEffect(()=>{if(!s||!l.current)return;const e=l.current.getBoundingClientRect(),n=window.innerWidth,t=window.innerHeight;let{top:c,left:a}=p;const b=8;a+e.width>n-b&&(a=a-e.width),c+e.height>t-b&&(c=c-e.height),l.current.style.top=`${c}px`,l.current.style.left=`${a}px`,l.current.focus()},[s,p]);const w=()=>i.findIndex(e=>e.type!=="separator"&&!e.disabled),j=()=>{for(let e=i.length-1;e>=0;e--){const n=i[e];if(n.type!=="separator"&&!n.disabled)return e}return 0},h=e=>{let n=x;const t=i.length;if(t!==0)for(let c=0;c<t;c++){n=(n+e+t)%t;const a=i[n];if(a.type!=="separator"&&!a.disabled){d(n);break}}},C=e=>{const{key:n}=e;if(n==="ArrowDown")e.preventDefault(),h(1);else if(n==="ArrowUp")e.preventDefault(),h(-1);else if(n==="Home")e.preventDefault(),d(w());else if(n==="End")e.preventDefault(),d(j());else if(n==="Enter"||n===" "){e.preventDefault();const t=i[x];t&&!t.disabled&&t.onSelect&&(t.onSelect(),u(!1))}};o.useEffect(()=>{if(!s)return;const e=n=>{n.key==="Escape"&&u(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[s]),o.useEffect(()=>{if(s)return S.onClickOutside(l,()=>u(!1))},[s]),o.useEffect(()=>{if(!s)return;const e=()=>u(!1);return window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[s]);const D=()=>E&&o.isValidElement(f)?o.cloneElement(f,{onContextMenu:e=>{v(e);const n=f.props;n.onContextMenu&&n.onContextMenu(e)}}):r.jsx("div",{onContextMenu:v,className:"nui-contextmenu-wrapper",children:f});return r.jsxs(r.Fragment,{children:[D(),s&&r.jsx(k.Portal,{children:r.jsx("div",{ref:l,className:g.cn("nui-contextmenu",m),role:"menu",tabIndex:-1,style:{position:"fixed",top:p.top,left:p.left},onKeyDown:C,children:i.map((e,n)=>{if(e.type==="separator")return r.jsx("div",{className:"nui-contextmenu-separator",role:"separator"},`sep-${n}`);const t=n===x;return r.jsxs("div",{className:g.cn("nui-contextmenu-item",e.disabled&&"disabled",e.danger&&"danger",t&&"active"),role:"menuitem",tabIndex:-1,"aria-disabled":e.disabled||void 0,onMouseEnter:()=>!e.disabled&&d(n),onClick:()=>{e.disabled||(e.onSelect?.(),u(!1))},children:[e.icon&&r.jsx("span",{className:"nui-contextmenu-icon",children:e.icon}),r.jsx("span",{className:"nui-contextmenu-label",children:e.label}),!e.icon&&r.jsx("span",{className:"nui-contextmenu-icon-placeholder"})]},`item-${n}`)})})})]})}exports.ContextMenu=L;
 //# sourceMappingURL=ContextMenu.cjs.map

package/dist/components/contextmenu/ContextMenu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/contextmenu/ContextMenu.tsx"],"sourcesContent":["/*\r\n ContextMenu.tsx — FINAL VERSION\r\n * --------------------------------\r\n * Features:\r\n * - Right-click (contextmenu)\r\n * - Arrow key navigation\r\n * - Roving tabIndex\r\n * - ESC + click outside to close\r\n * - Portal rendering\r\n * - Separators + icons + danger items\r\n /\r\n/\r\n ContextMenu.tsx — FINAL CLEAN VERSION\r\n * --------------------------------------\r\n * Features:\r\n * - Right-click context menu\r\n * - Keyboard navigation (ArrowUp/Down, Home, End, Enter)\r\n * - ESC + click outside to close\r\n * - Roving active index\r\n * - Portal rendering\r\n * - Separators + icons + danger/disabled\r\n * - 100% TypeScript safe\r\n /\r\n\r\nimport React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './ContextMenu.css';\r\nimport { Portal, onClickOutside } from '../../utils/index';\r\n\r\nexport interface MenuItem {\r\n label?: string;\r\n icon?: ReactNode;\r\n onSelect?: () => void;\r\n danger?: boolean;\r\n disabled?: boolean;\r\n type?: 'item' \| 'separator';\r\n}\r\n\r\ninterface ContextMenuProps {\r\n trigger: ReactNode;\r\n items: MenuItem[];\r\n className?: string;\r\n}\r\n\r\nexport function ContextMenu({\r\n trigger,\r\n items,\r\n className = '',\r\n}: ContextMenuProps) {\r\n const [open, setOpen] = useState(false);\r\n const [pos, setPos] = useState<{ top: number; left: number } \| null>(null);\r\n\r\n const menuRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n // active index for keyboard navigation\r\n const [activeIndex, setActiveIndex] = useState<number>(0);\r\n\r\n const handleContext = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n setPos({ top: e.clientY, left: e.clientX });\r\n setOpen(true);\r\n setActiveIndex(getFirstEnabledIndex());\r\n };\r\n\r\n /* Returns index of first enabled, non-separator item /\r\n const getFirstEnabledIndex = () => {\r\n return items.findIndex((i) => i.type !== 'separator' && !i.disabled);\r\n };\r\n\r\n /* Returns index of last enabled, non-separator item /\r\n const getLastEnabledIndex = () => {\r\n for (let i = items.length - 1; i >= 0; i--) {\r\n const it = items[i];\r\n if (it.type !== 'separator' && !it.disabled) return i;\r\n }\r\n return 0;\r\n };\r\n\r\n /* Move selection up/down /\r\n const move = (direction: 1 \| -1) => {\r\n let idx = activeIndex;\r\n\r\n while (true) {\r\n idx = idx + direction;\r\n\r\n if (idx < 0) idx = items.length - 1;\r\n if (idx >= items.length) idx = 0;\r\n\r\n const it = items[idx];\r\n if (it.type !== 'separator' && !it.disabled) {\r\n setActiveIndex(idx);\r\n break;\r\n }\r\n }\r\n };\r\n\r\n /* Keyboard events inside menu /\r\n const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const { key } = e;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Home') {\r\n e.preventDefault();\r\n setActiveIndex(getFirstEnabledIndex());\r\n } else if (key === 'End') {\r\n e.preventDefault();\r\n setActiveIndex(getLastEnabledIndex());\r\n } else if (key === 'Enter' \|\| key === ' ') {\r\n e.preventDefault();\r\n const it = items[activeIndex];\r\n if (it && !it.disabled && it.onSelect) {\r\n it.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n /* ESC close – FIXED TYPE (no TS errors) /\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /* Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(menuRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n return (\r\n <div className=\"ui-contextmenu-wrapper\">\r\n <div onContextMenu={handleContext}>{trigger}</div>\r\n\r\n {open && pos && (\r\n <Portal>\r\n <div\r\n ref={menuRef}\r\n className={`ui-contextmenu ${className}`}\r\n role=\"menu\"\r\n tabIndex={-1}\r\n style={{\r\n top: pos.top,\r\n left: pos.left,\r\n position: 'fixed',\r\n }}\r\n onKeyDown={handleKeyDown}\r\n >\r\n {items.map((item, idx) => {\r\n if (item.type === 'separator') {\r\n return <div key={idx} className=\"ui-contextmenu-separator\" />;\r\n }\r\n\r\n const isActive = idx === activeIndex;\r\n\r\n return (\r\n <div\r\n key={idx}\r\n className={[\r\n 'ui-contextmenu-item',\r\n item.disabled ? 'disabled' : '',\r\n item.danger ? 'danger' : '',\r\n isActive ? 'active' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n aria-disabled={item.disabled \|\| undefined}\r\n onMouseEnter={() => setActiveIndex(idx)}\r\n onClick={() => {\r\n if (!item.disabled) {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-contextmenu-icon\">{item.icon}</span>\r\n )}\r\n <span>{item.label}</span>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </Portal>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["ContextMenu","trigger","items","className","open","setOpen","useState","pos","setPos","menuRef","useRef","activeIndex","setActiveIndex","handleContext","getFirstEnabledIndex","i","getLastEnabledIndex","it","move","direction","idx","handleKeyDown","key","useEffect","handler","e","onClickOutside","jsxs","jsx","Portal","item","isActive"],"mappings":"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"}
1	+ {"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/contextmenu/ContextMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n ReactNode,\n KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { cn, Portal, onClickOutside } from '../../utils';\nimport './ContextMenu.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface ContextMenuItem {\n label?: string;\n icon?: ReactNode;\n onSelect?: () => void;\n danger?: boolean;\n disabled?: boolean;\n type?: 'item' \| 'separator';\n}\n\nexport interface ContextMenuProps {\n children: ReactNode;\n items: ContextMenuItem[];\n className?: string;\n /* * If true, the ContextMenu will not wrap children in a <div>.\n * Instead, it clones the child and directly attaches the onContextMenu event.\n * Child MUST be a valid single React Element. \n /\n asChild?: boolean; \n}\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n ContextMenu Component\n * * A custom right-click menu that replaces the browser's native context menu.\n /\nexport function ContextMenu({\n children,\n items,\n className,\n asChild = false,\n}: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [pos, setPos] = useState({ top: 0, left: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(0);\n\n const menuRef = useRef<HTMLDivElement \| null>(null);\n\n / ----------------------------------------------------\n Opening & Collision Detection\n ---------------------------------------------------- /\n const handleContext = (e: React.MouseEvent) => {\n e.preventDefault();\n \n // 1. Set initial position to exact mouse coordinates\n setPos({ top: e.clientY, left: e.clientX });\n setOpen(true);\n setActiveIndex(getFirstEnabledIndex());\n };\n\n // Architecture Note: We use useLayoutEffect instead of useEffect here.\n // This runs synchronously immediately after React updates the DOM but BEFORE the browser\n // paints it to the screen. This ensures the collision-detection coordinate shift \n // happens instantly without a visual \"jump\".\n useLayoutEffect(() => {\n if (!open \|\| !menuRef.current) return;\n\n // 2. Adjust position if it collides with viewport edges\n const menuRect = menuRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let { top, left } = pos;\n const padding = 8; // Keep it slightly away from the exact edge\n\n // Collision Right\n if (left + menuRect.width > viewportWidth - padding) {\n left = left - menuRect.width;\n }\n // Collision Bottom\n if (top + menuRect.height > viewportHeight - padding) {\n top = top - menuRect.height;\n }\n\n // Apply adjustments directly to the DOM to avoid triggering another React render cycle\n menuRef.current.style.top = `${top}px`;\n menuRef.current.style.left = `${left}px`;\n \n // 3. Force focus onto the menu so keyboard events (ArrowDown, etc) work immediately\n menuRef.current.focus();\n\n }, [open, pos]);\n\n /* ----------------------------------------------------\n Keyboard Navigation Helpers\n ---------------------------------------------------- /\n const getFirstEnabledIndex = () => {\n return items.findIndex((i) => i.type !== 'separator' && !i.disabled);\n };\n\n const getLastEnabledIndex = () => {\n for (let i = items.length - 1; i >= 0; i--) {\n const it = items[i];\n if (it.type !== 'separator' && !it.disabled) return i;\n }\n return 0;\n };\n\n const move = (direction: 1 \| -1) => {\n let idx = activeIndex;\n const len = items.length;\n\n if (len === 0) return;\n\n // Loop until we find a valid item, preventing infinite loops\n for (let i = 0; i < len; i++) {\n idx = (idx + direction + len) % len;\n const it = items[idx];\n if (it.type !== 'separator' && !it.disabled) {\n setActiveIndex(idx);\n break;\n }\n }\n };\n\n / ----------------------------------------------------\n Event Listeners\n ---------------------------------------------------- /\n const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n const { key } = e;\n\n if (key === 'ArrowDown') {\n e.preventDefault();\n move(1);\n } else if (key === 'ArrowUp') {\n e.preventDefault();\n move(-1);\n } else if (key === 'Home') {\n e.preventDefault();\n setActiveIndex(getFirstEnabledIndex());\n } else if (key === 'End') {\n e.preventDefault();\n setActiveIndex(getLastEnabledIndex());\n } else if (key === 'Enter' \|\| key === ' ') {\n e.preventDefault();\n const it = items[activeIndex];\n if (it && !it.disabled && it.onSelect) {\n it.onSelect();\n setOpen(false);\n }\n }\n };\n\n useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') setOpen(false);\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [open]);\n\n useEffect(() => {\n if (!open) return;\n return onClickOutside(menuRef, () => setOpen(false));\n }, [open]);\n\n // Hide context menu on scroll or window resize\n useEffect(() => {\n if (!open) return;\n const handleScrollOrResize = () => setOpen(false);\n window.addEventListener('resize', handleScrollOrResize);\n window.addEventListener('scroll', handleScrollOrResize, true);\n return () => {\n window.removeEventListener('resize', handleScrollOrResize);\n window.removeEventListener('scroll', handleScrollOrResize, true);\n };\n }, [open]);\n\n / ----------------------------------------------------\n Render\n ---------------------------------------------------- /\n \n const renderTrigger = () => {\n // Polymorphic Architecture:\n // When asChild is true, we clone the user's React element and attach the onContextMenu \n // event directly to it. This avoids creating unnecessary <div> wrappers in the DOM.\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(children, {\n onContextMenu: (e: React.MouseEvent<Element>) => {\n handleContext(e);\n \n const childProps = children.props as React.DOMAttributes<Element>;\n if (childProps.onContextMenu) {\n childProps.onContextMenu(e);\n }\n }\n } as React.DOMAttributes<Element>);\n }\n\n return (\n <div onContextMenu={handleContext} className=\"nui-contextmenu-wrapper\">\n {children}\n </div>\n );\n };\n\n return (\n <>\n {renderTrigger()}\n\n {open && (\n <Portal>\n <div\n ref={menuRef}\n className={cn(\"nui-contextmenu\", className)}\n role=\"menu\"\n tabIndex={-1} \n style={{ position: 'fixed', top: pos.top, left: pos.left }}\n onKeyDown={handleKeyDown}\n >\n {items.map((item, idx) => {\n if (item.type === 'separator') {\n return <div key={`sep-${idx}`} className=\"nui-contextmenu-separator\" role=\"separator\" />;\n }\n\n const isActive = idx === activeIndex;\n\n return (\n <div\n key={`item-${idx}`}\n className={cn(\n \"nui-contextmenu-item\",\n item.disabled && \"disabled\",\n item.danger && \"danger\",\n isActive && \"active\"\n )}\n role=\"menuitem\"\n tabIndex={-1}\n aria-disabled={item.disabled \|\| undefined}\n onMouseEnter={() => !item.disabled && setActiveIndex(idx)}\n onClick={() => {\n if (!item.disabled) {\n item.onSelect?.();\n setOpen(false);\n }\n }}\n >\n {item.icon && (\n <span className=\"nui-contextmenu-icon\">{item.icon}</span>\n )}\n <span className=\"nui-contextmenu-label\">{item.label}</span>\n \n {!item.icon && <span className=\"nui-contextmenu-icon-placeholder\" />}\n </div>\n );\n })}\n </div>\n </Portal>\n )}\n </>\n );\n}"],"names":["ContextMenu","children","items","className","asChild","open","setOpen","useState","pos","setPos","activeIndex","setActiveIndex","menuRef","useRef","handleContext","getFirstEnabledIndex","useLayoutEffect","menuRect","viewportWidth","viewportHeight","top","left","padding","i","getLastEnabledIndex","it","move","direction","idx","len","handleKeyDown","key","useEffect","handler","e","onClickOutside","handleScrollOrResize","renderTrigger","React","childProps","jsxs","Fragment","Portal","jsx","cn","item","isActive"],"mappings":"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"}

package/dist/components/contextmenu/ContextMenu.js CHANGED Viewed

@@ -1,97 +1,118 @@
-import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { useState as c, useRef as E, useEffect as x } from "react";
+import { jsxs as b, Fragment as N, jsx as a } from "react/jsx-runtime";
+import E, { useState as m, useRef as M, useLayoutEffect as R, useEffect as v } from "react";
 /* empty css                */
-import { onClickOutside as g } from "../../utils/onclickoutside/onClickOutside.js";
-import { Portal as k } from "../../utils/portal/portal.js";
-function j({
-  trigger: b,
+import { onClickOutside as S } from "../../utils/onclickoutside/onClickOutside.js";
+import { Portal as A } from "../../utils/portal/portal.js";
+import { cn as y } from "../../utils/cn/cn.js";
+function K({
+  children: u,
   items: o,
-  className: m = ""
+  className: C,
+  asChild: D = !1
 }) {
-  const [l, a] = c(!1), [i, h] = c(null), f = E(null), [d, s] = c(0), y = (e) => {
-    e.preventDefault(), h({ top: e.clientY, left: e.clientX }), a(!0), s(u());
-  }, u = () => o.findIndex((e) => e.type !== "separator" && !e.disabled), w = () => {
+  const [r, c] = m(!1), [f, L] = m({ top: 0, left: 0 }), [p, d] = m(0), s = M(null), w = (e) => {
+    e.preventDefault(), L({ top: e.clientY, left: e.clientX }), c(!0), d(x());
+  };
+  R(() => {
+    if (!r || !s.current) return;
+    const e = s.current.getBoundingClientRect(), n = window.innerWidth, t = window.innerHeight;
+    let { top: i, left: l } = f;
+    const g = 8;
+    l + e.width > n - g && (l = l - e.width), i + e.height > t - g && (i = i - e.height), s.current.style.top = `${i}px`, s.current.style.left = `${l}px`, s.current.focus();
+  }, [r, f]);
+  const x = () => o.findIndex((e) => e.type !== "separator" && !e.disabled), k = () => {
     for (let e = o.length - 1; e >= 0; e--) {
       const n = o[e];
       if (n.type !== "separator" && !n.disabled) return e;
     }
     return 0;
-  }, p = (e) => {
-    let n = d;
-    for (; ; ) {
-      n = n + e, n < 0 && (n = o.length - 1), n >= o.length && (n = 0);
-      const t = o[n];
-      if (t.type !== "separator" && !t.disabled) {
-        s(n);
-        break;
+  }, h = (e) => {
+    let n = p;
+    const t = o.length;
+    if (t !== 0)
+      for (let i = 0; i < t; i++) {
+        n = (n + e + t) % t;
+        const l = o[n];
+        if (l.type !== "separator" && !l.disabled) {
+          d(n);
+          break;
+        }
       }
-    }
-  }, D = (e) => {
+  }, I = (e) => {
     const { key: n } = e;
     if (n === "ArrowDown")
-      e.preventDefault(), p(1);
+      e.preventDefault(), h(1);
     else if (n === "ArrowUp")
-      e.preventDefault(), p(-1);
+      e.preventDefault(), h(-1);
     else if (n === "Home")
-      e.preventDefault(), s(u());
+      e.preventDefault(), d(x());
     else if (n === "End")
-      e.preventDefault(), s(w());
+      e.preventDefault(), d(k());
     else if (n === "Enter" || n === " ") {
       e.preventDefault();
-      const t = o[d];
-      t && !t.disabled && t.onSelect && (t.onSelect(), a(!1));
+      const t = o[p];
+      t && !t.disabled && t.onSelect && (t.onSelect(), c(!1));
     }
   };
-  return x(() => {
-    if (!l) return;
+  return v(() => {
+    if (!r) return;
     const e = (n) => {
-      n.key === "Escape" && a(!1);
+      n.key === "Escape" && c(!1);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [l]), x(() => {
-    if (l)
-      return g(f, () => a(!1));
-  }, [l]), /* @__PURE__ */ v("div", { className: "ui-contextmenu-wrapper", children: [
-    /* @__PURE__ */ r("div", { onContextMenu: y, children: b }),
-    l && i && /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
+  }, [r]), v(() => {
+    if (r)
+      return S(s, () => c(!1));
+  }, [r]), v(() => {
+    if (!r) return;
+    const e = () => c(!1);
+    return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [r]), /* @__PURE__ */ b(N, { children: [
+    D && E.isValidElement(u) ? E.cloneElement(u, {
+      onContextMenu: (e) => {
+        w(e);
+        const n = u.props;
+        n.onContextMenu && n.onContextMenu(e);
+      }
+    }) : /* @__PURE__ */ a("div", { onContextMenu: w, className: "nui-contextmenu-wrapper", children: u }),
+    r && /* @__PURE__ */ a(A, { children: /* @__PURE__ */ a(
       "div",
       {
-        ref: f,
-        className: `ui-contextmenu ${m}`,
+        ref: s,
+        className: y("nui-contextmenu", C),
         role: "menu",
         tabIndex: -1,
-        style: {
-          top: i.top,
-          left: i.left,
-          position: "fixed"
-        },
-        onKeyDown: D,
+        style: { position: "fixed", top: f.top, left: f.left },
+        onKeyDown: I,
         children: o.map((e, n) => {
           if (e.type === "separator")
-            return /* @__PURE__ */ r("div", { className: "ui-contextmenu-separator" }, n);
-          const t = n === d;
-          return /* @__PURE__ */ v(
+            return /* @__PURE__ */ a("div", { className: "nui-contextmenu-separator", role: "separator" }, `sep-${n}`);
+          const t = n === p;
+          return /* @__PURE__ */ b(
             "div",
             {
-              className: [
-                "ui-contextmenu-item",
-                e.disabled ? "disabled" : "",
-                e.danger ? "danger" : "",
-                t ? "active" : ""
-              ].filter(Boolean).join(" "),
+              className: y(
+                "nui-contextmenu-item",
+                e.disabled && "disabled",
+                e.danger && "danger",
+                t && "active"
+              ),
               role: "menuitem",
               tabIndex: -1,
               "aria-disabled": e.disabled || void 0,
-              onMouseEnter: () => s(n),
+              onMouseEnter: () => !e.disabled && d(n),
               onClick: () => {
-                e.disabled || (e.onSelect?.(), a(!1));
+                e.disabled || (e.onSelect?.(), c(!1));
               },
               children: [
-                e.icon && /* @__PURE__ */ r("span", { className: "ui-contextmenu-icon", children: e.icon }),
-                /* @__PURE__ */ r("span", { children: e.label })
+                e.icon && /* @__PURE__ */ a("span", { className: "nui-contextmenu-icon", children: e.icon }),
+                /* @__PURE__ */ a("span", { className: "nui-contextmenu-label", children: e.label }),
+                !e.icon && /* @__PURE__ */ a("span", { className: "nui-contextmenu-icon-placeholder" })
               ]
             },
-            n
+            `item-${n}`
           );
         })
       }
@@ -99,6 +120,6 @@ function j({
   ] });
 }
 export {
-  j as ContextMenu
+  K as ContextMenu
 };
 //# sourceMappingURL=ContextMenu.js.map

package/dist/components/contextmenu/ContextMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","sources":["../../../src/components/contextmenu/ContextMenu.tsx"],"sourcesContent":["/*\r\n ContextMenu.tsx — FINAL VERSION\r\n * --------------------------------\r\n * Features:\r\n * - Right-click (contextmenu)\r\n * - Arrow key navigation\r\n * - Roving tabIndex\r\n * - ESC + click outside to close\r\n * - Portal rendering\r\n * - Separators + icons + danger items\r\n /\r\n/\r\n ContextMenu.tsx — FINAL CLEAN VERSION\r\n * --------------------------------------\r\n * Features:\r\n * - Right-click context menu\r\n * - Keyboard navigation (ArrowUp/Down, Home, End, Enter)\r\n * - ESC + click outside to close\r\n * - Roving active index\r\n * - Portal rendering\r\n * - Separators + icons + danger/disabled\r\n * - 100% TypeScript safe\r\n /\r\n\r\nimport React, {\r\n useEffect,\r\n useRef,\r\n useState,\r\n ReactNode,\r\n KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './ContextMenu.css';\r\nimport { Portal, onClickOutside } from '../../utils/index';\r\n\r\nexport interface MenuItem {\r\n label?: string;\r\n icon?: ReactNode;\r\n onSelect?: () => void;\r\n danger?: boolean;\r\n disabled?: boolean;\r\n type?: 'item' \| 'separator';\r\n}\r\n\r\ninterface ContextMenuProps {\r\n trigger: ReactNode;\r\n items: MenuItem[];\r\n className?: string;\r\n}\r\n\r\nexport function ContextMenu({\r\n trigger,\r\n items,\r\n className = '',\r\n}: ContextMenuProps) {\r\n const [open, setOpen] = useState(false);\r\n const [pos, setPos] = useState<{ top: number; left: number } \| null>(null);\r\n\r\n const menuRef = useRef<HTMLDivElement \| null>(null);\r\n\r\n // active index for keyboard navigation\r\n const [activeIndex, setActiveIndex] = useState<number>(0);\r\n\r\n const handleContext = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n setPos({ top: e.clientY, left: e.clientX });\r\n setOpen(true);\r\n setActiveIndex(getFirstEnabledIndex());\r\n };\r\n\r\n /* Returns index of first enabled, non-separator item /\r\n const getFirstEnabledIndex = () => {\r\n return items.findIndex((i) => i.type !== 'separator' && !i.disabled);\r\n };\r\n\r\n /* Returns index of last enabled, non-separator item /\r\n const getLastEnabledIndex = () => {\r\n for (let i = items.length - 1; i >= 0; i--) {\r\n const it = items[i];\r\n if (it.type !== 'separator' && !it.disabled) return i;\r\n }\r\n return 0;\r\n };\r\n\r\n /* Move selection up/down /\r\n const move = (direction: 1 \| -1) => {\r\n let idx = activeIndex;\r\n\r\n while (true) {\r\n idx = idx + direction;\r\n\r\n if (idx < 0) idx = items.length - 1;\r\n if (idx >= items.length) idx = 0;\r\n\r\n const it = items[idx];\r\n if (it.type !== 'separator' && !it.disabled) {\r\n setActiveIndex(idx);\r\n break;\r\n }\r\n }\r\n };\r\n\r\n /* Keyboard events inside menu /\r\n const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n const { key } = e;\r\n\r\n if (key === 'ArrowDown') {\r\n e.preventDefault();\r\n move(1);\r\n } else if (key === 'ArrowUp') {\r\n e.preventDefault();\r\n move(-1);\r\n } else if (key === 'Home') {\r\n e.preventDefault();\r\n setActiveIndex(getFirstEnabledIndex());\r\n } else if (key === 'End') {\r\n e.preventDefault();\r\n setActiveIndex(getLastEnabledIndex());\r\n } else if (key === 'Enter' \|\| key === ' ') {\r\n e.preventDefault();\r\n const it = items[activeIndex];\r\n if (it && !it.disabled && it.onSelect) {\r\n it.onSelect();\r\n setOpen(false);\r\n }\r\n }\r\n };\r\n\r\n /* ESC close – FIXED TYPE (no TS errors) /\r\n useEffect(() => {\r\n if (!open) return;\r\n\r\n const handler = (e: globalThis.KeyboardEvent) => {\r\n if (e.key === 'Escape') setOpen(false);\r\n };\r\n\r\n document.addEventListener('keydown', handler as EventListener);\r\n return () =>\r\n document.removeEventListener('keydown', handler as EventListener);\r\n }, [open]);\r\n\r\n /* Click outside to close */\r\n useEffect(() => {\r\n if (!open) return;\r\n return onClickOutside(menuRef, () => setOpen(false));\r\n }, [open]);\r\n\r\n return (\r\n <div className=\"ui-contextmenu-wrapper\">\r\n <div onContextMenu={handleContext}>{trigger}</div>\r\n\r\n {open && pos && (\r\n <Portal>\r\n <div\r\n ref={menuRef}\r\n className={`ui-contextmenu ${className}`}\r\n role=\"menu\"\r\n tabIndex={-1}\r\n style={{\r\n top: pos.top,\r\n left: pos.left,\r\n position: 'fixed',\r\n }}\r\n onKeyDown={handleKeyDown}\r\n >\r\n {items.map((item, idx) => {\r\n if (item.type === 'separator') {\r\n return <div key={idx} className=\"ui-contextmenu-separator\" />;\r\n }\r\n\r\n const isActive = idx === activeIndex;\r\n\r\n return (\r\n <div\r\n key={idx}\r\n className={[\r\n 'ui-contextmenu-item',\r\n item.disabled ? 'disabled' : '',\r\n item.danger ? 'danger' : '',\r\n isActive ? 'active' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"menuitem\"\r\n tabIndex={-1}\r\n aria-disabled={item.disabled \|\| undefined}\r\n onMouseEnter={() => setActiveIndex(idx)}\r\n onClick={() => {\r\n if (!item.disabled) {\r\n item.onSelect?.();\r\n setOpen(false);\r\n }\r\n }}\r\n >\r\n {item.icon && (\r\n <span className=\"ui-contextmenu-icon\">{item.icon}</span>\r\n )}\r\n <span>{item.label}</span>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </Portal>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["ContextMenu","trigger","items","className","open","setOpen","useState","pos","setPos","menuRef","useRef","activeIndex","setActiveIndex","handleContext","getFirstEnabledIndex","i","getLastEnabledIndex","it","move","direction","idx","handleKeyDown","key","useEffect","handler","e","onClickOutside","jsxs","jsx","Portal","item","isActive"],"mappings":"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"}
1	+ {"version":3,"file":"ContextMenu.js","sources":["../../../src/components/contextmenu/ContextMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n ReactNode,\n KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { cn, Portal, onClickOutside } from '../../utils';\nimport './ContextMenu.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport interface ContextMenuItem {\n label?: string;\n icon?: ReactNode;\n onSelect?: () => void;\n danger?: boolean;\n disabled?: boolean;\n type?: 'item' \| 'separator';\n}\n\nexport interface ContextMenuProps {\n children: ReactNode;\n items: ContextMenuItem[];\n className?: string;\n /* * If true, the ContextMenu will not wrap children in a <div>.\n * Instead, it clones the child and directly attaches the onContextMenu event.\n * Child MUST be a valid single React Element. \n /\n asChild?: boolean; \n}\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n ContextMenu Component\n * * A custom right-click menu that replaces the browser's native context menu.\n /\nexport function ContextMenu({\n children,\n items,\n className,\n asChild = false,\n}: ContextMenuProps) {\n const [open, setOpen] = useState(false);\n const [pos, setPos] = useState({ top: 0, left: 0 });\n const [activeIndex, setActiveIndex] = useState<number>(0);\n\n const menuRef = useRef<HTMLDivElement \| null>(null);\n\n / ----------------------------------------------------\n Opening & Collision Detection\n ---------------------------------------------------- /\n const handleContext = (e: React.MouseEvent) => {\n e.preventDefault();\n \n // 1. Set initial position to exact mouse coordinates\n setPos({ top: e.clientY, left: e.clientX });\n setOpen(true);\n setActiveIndex(getFirstEnabledIndex());\n };\n\n // Architecture Note: We use useLayoutEffect instead of useEffect here.\n // This runs synchronously immediately after React updates the DOM but BEFORE the browser\n // paints it to the screen. This ensures the collision-detection coordinate shift \n // happens instantly without a visual \"jump\".\n useLayoutEffect(() => {\n if (!open \|\| !menuRef.current) return;\n\n // 2. Adjust position if it collides with viewport edges\n const menuRect = menuRef.current.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let { top, left } = pos;\n const padding = 8; // Keep it slightly away from the exact edge\n\n // Collision Right\n if (left + menuRect.width > viewportWidth - padding) {\n left = left - menuRect.width;\n }\n // Collision Bottom\n if (top + menuRect.height > viewportHeight - padding) {\n top = top - menuRect.height;\n }\n\n // Apply adjustments directly to the DOM to avoid triggering another React render cycle\n menuRef.current.style.top = `${top}px`;\n menuRef.current.style.left = `${left}px`;\n \n // 3. Force focus onto the menu so keyboard events (ArrowDown, etc) work immediately\n menuRef.current.focus();\n\n }, [open, pos]);\n\n /* ----------------------------------------------------\n Keyboard Navigation Helpers\n ---------------------------------------------------- /\n const getFirstEnabledIndex = () => {\n return items.findIndex((i) => i.type !== 'separator' && !i.disabled);\n };\n\n const getLastEnabledIndex = () => {\n for (let i = items.length - 1; i >= 0; i--) {\n const it = items[i];\n if (it.type !== 'separator' && !it.disabled) return i;\n }\n return 0;\n };\n\n const move = (direction: 1 \| -1) => {\n let idx = activeIndex;\n const len = items.length;\n\n if (len === 0) return;\n\n // Loop until we find a valid item, preventing infinite loops\n for (let i = 0; i < len; i++) {\n idx = (idx + direction + len) % len;\n const it = items[idx];\n if (it.type !== 'separator' && !it.disabled) {\n setActiveIndex(idx);\n break;\n }\n }\n };\n\n / ----------------------------------------------------\n Event Listeners\n ---------------------------------------------------- /\n const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n const { key } = e;\n\n if (key === 'ArrowDown') {\n e.preventDefault();\n move(1);\n } else if (key === 'ArrowUp') {\n e.preventDefault();\n move(-1);\n } else if (key === 'Home') {\n e.preventDefault();\n setActiveIndex(getFirstEnabledIndex());\n } else if (key === 'End') {\n e.preventDefault();\n setActiveIndex(getLastEnabledIndex());\n } else if (key === 'Enter' \|\| key === ' ') {\n e.preventDefault();\n const it = items[activeIndex];\n if (it && !it.disabled && it.onSelect) {\n it.onSelect();\n setOpen(false);\n }\n }\n };\n\n useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') setOpen(false);\n };\n document.addEventListener('keydown', handler);\n return () => document.removeEventListener('keydown', handler);\n }, [open]);\n\n useEffect(() => {\n if (!open) return;\n return onClickOutside(menuRef, () => setOpen(false));\n }, [open]);\n\n // Hide context menu on scroll or window resize\n useEffect(() => {\n if (!open) return;\n const handleScrollOrResize = () => setOpen(false);\n window.addEventListener('resize', handleScrollOrResize);\n window.addEventListener('scroll', handleScrollOrResize, true);\n return () => {\n window.removeEventListener('resize', handleScrollOrResize);\n window.removeEventListener('scroll', handleScrollOrResize, true);\n };\n }, [open]);\n\n / ----------------------------------------------------\n Render\n ---------------------------------------------------- /\n \n const renderTrigger = () => {\n // Polymorphic Architecture:\n // When asChild is true, we clone the user's React element and attach the onContextMenu \n // event directly to it. This avoids creating unnecessary <div> wrappers in the DOM.\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(children, {\n onContextMenu: (e: React.MouseEvent<Element>) => {\n handleContext(e);\n \n const childProps = children.props as React.DOMAttributes<Element>;\n if (childProps.onContextMenu) {\n childProps.onContextMenu(e);\n }\n }\n } as React.DOMAttributes<Element>);\n }\n\n return (\n <div onContextMenu={handleContext} className=\"nui-contextmenu-wrapper\">\n {children}\n </div>\n );\n };\n\n return (\n <>\n {renderTrigger()}\n\n {open && (\n <Portal>\n <div\n ref={menuRef}\n className={cn(\"nui-contextmenu\", className)}\n role=\"menu\"\n tabIndex={-1} \n style={{ position: 'fixed', top: pos.top, left: pos.left }}\n onKeyDown={handleKeyDown}\n >\n {items.map((item, idx) => {\n if (item.type === 'separator') {\n return <div key={`sep-${idx}`} className=\"nui-contextmenu-separator\" role=\"separator\" />;\n }\n\n const isActive = idx === activeIndex;\n\n return (\n <div\n key={`item-${idx}`}\n className={cn(\n \"nui-contextmenu-item\",\n item.disabled && \"disabled\",\n item.danger && \"danger\",\n isActive && \"active\"\n )}\n role=\"menuitem\"\n tabIndex={-1}\n aria-disabled={item.disabled \|\| undefined}\n onMouseEnter={() => !item.disabled && setActiveIndex(idx)}\n onClick={() => {\n if (!item.disabled) {\n item.onSelect?.();\n setOpen(false);\n }\n }}\n >\n {item.icon && (\n <span className=\"nui-contextmenu-icon\">{item.icon}</span>\n )}\n <span className=\"nui-contextmenu-label\">{item.label}</span>\n \n {!item.icon && <span className=\"nui-contextmenu-icon-placeholder\" />}\n </div>\n );\n })}\n </div>\n </Portal>\n )}\n </>\n );\n}"],"names":["ContextMenu","children","items","className","asChild","open","setOpen","useState","pos","setPos","activeIndex","setActiveIndex","menuRef","useRef","handleContext","getFirstEnabledIndex","useLayoutEffect","menuRect","viewportWidth","viewportHeight","top","left","padding","i","getLastEnabledIndex","it","move","direction","idx","len","handleKeyDown","key","useEffect","handler","e","onClickOutside","handleScrollOrResize","jsxs","Fragment","React","childProps","Portal","jsx","cn","item","isActive"],"mappings":"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"}

package/dist/components/datagrid/DataGrid.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react");;/* empty css               */function O({columns:D,rows:g,page:w,pageSize:m=10,onPageChange:I,selectable:v=!1,selectedRowIds:y,onSelectionChange:b,onRowClick:M,renderRowActions:C,className:E="",disablePagination:x=!1}){const[c,T]=u.useState({key:null,dir:null}),[q,A]=u.useState(1),d=w??q,[B,P]=u.useState(new Set),p=y??B,h=u.useMemo(()=>x?1:Math.max(1,Math.ceil(g.length/m)),[g.length,m,x]),N=u.useMemo(()=>{if(!c.key||!c.dir)return[...g];const e=c.key,t=c.dir==="asc"?1:-1;return[...g].sort((s,a)=>{const i=s[e],r=a[e];return i===void 0&&r!==void 0?-1*t:r===void 0&&i!==void 0?1*t:typeof i=="number"&&typeof r=="number"?(i-r)*t:i instanceof Date&&r instanceof Date?(i.getTime()-r.getTime())*t:String(i??"").localeCompare(String(r??""))*t})},[g,c]),l=u.useMemo(()=>{if(x)return N;const e=(d-1)*m;return N.slice(e,e+m)},[N,d,m,x]),[k,o]=u.useState(null),j=(e,t)=>e.id??`row-${t}-${Math.random().toString(36).slice(2,7)}`,F=e=>{T(t=>t.key!==e?{key:e,dir:"asc"}:t.dir==="asc"?{key:e,dir:"desc"}:{key:null,dir:null})},f=e=>{const t=Math.max(1,Math.min(h,e));w===void 0&&A(t),I?.(t)},S=e=>{const t=s=>{const a=new Set(s);return a.has(e)?a.delete(e):a.add(e),a};if(y){const s=t(p);b?.(s)}else P(s=>{const a=t(s);return b?.(a),a})},G=()=>{const e=l.map((a,i)=>a.id??j(a,i)),t=e.every(a=>p.has(a)),s=a=>{const i=new Set(a);return t?e.forEach(r=>i.delete(r)):e.forEach(r=>i.add(r)),i};if(y){const a=s(p);b?.(a)}else P(a=>{const i=s(a);return b?.(i),i})},K=e=>{if(l.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),o(t=>t===null?0:Math.min(l.length-1,t+1));break;case"ArrowUp":e.preventDefault(),o(t=>t===null?0:Math.max(0,t-1));break;case"PageDown":e.preventDefault(),f(d+1),o(0);break;case"PageUp":e.preventDefault(),f(d-1),o(0);break;case"Home":e.preventDefault(),o(0);break;case"End":e.preventDefault(),o(l.length-1);break;case"Enter":if(e.preventDefault(),k!==null){const t=l[k],s=t.id??j(t,k);v&&S(s),M?.(t)}break}},$=!!C;return n.jsx("div",{className:`ui-datagrid ${E}`,onKeyDown:K,tabIndex:0,role:"grid","aria-rowcount":g.length,children:n.jsxs("div",{className:"ui-datagrid-table",children:[n.jsxs("div",{className:"ui-datagrid-header",role:"row",children:[v&&n.jsx("div",{className:"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--select",children:n.jsx("input",{type:"checkbox","aria-label":"Select all on page",onChange:G,checked:l.length>0&&l.every((e,t)=>p.has(e.id??j(e,t)))})}),D.map(e=>{const t=c.key===e.key;return n.jsx("div",{className:`ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--${e.align??"left"}`,role:"columnheader",style:{width:e.width},"aria-sort":t?c.dir==="asc"?"ascending":"descending":"none",onClick:()=>e.sortable&&F(e.key),children:n.jsxs("div",{className:"ui-datagrid-header-content",children:[n.jsx("span",{children:e.title}),e.sortable&&n.jsx("span",{className:"ui-datagrid-sort-indicator",children:t?c.dir==="asc"?"▲":"▼":"⤓"})]})},e.key)}),$&&n.jsx("div",{className:"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--actions"})]}),n.jsx("div",{className:"ui-datagrid-body",role:"rowgroup",children:l.length===0?n.jsx("div",{className:"ui-datagrid-empty",children:"No data"}):l.map((e,t)=>{const s=e.id??j(e,t),a=p.has(s),i=k===t;return n.jsxs("div",{className:["ui-datagrid-row",a?"selected":"",i?"focused":""].filter(Boolean).join(" "),role:"row",tabIndex:i?0:-1,"aria-selected":a||void 0,onClick:()=>{v&&S(s),M?.(e),o(t)},onFocus:()=>o(t),children:[v&&n.jsx("div",{className:"ui-datagrid-cell ui-datagrid-cell--select",children:n.jsx("input",{type:"checkbox",checked:a,onClick:r=>r.stopPropagation(),onChange:()=>S(s),"aria-label":`Select row ${String(s)}`})}),D.map(r=>n.jsx("div",{role:"gridcell",className:`ui-datagrid-cell ui-datagrid-cell--${r.align??"left"}`,style:{width:r.width},children:r.render?r.render(e):String(e[r.key]??"")},r.key)),$&&n.jsx("div",{className:"ui-datagrid-cell ui-datagrid-cell--actions",children:C?.(e)})]},String(s))})}),!x&&h>1&&n.jsxs("div",{className:"ui-datagrid-footer",children:[n.jsx("button",{className:"ui-datagrid-page-btn",onClick:()=>f(1),disabled:d===1,children:"«"}),n.jsx("button",{className:"ui-datagrid-page-btn",onClick:()=>f(d-1),disabled:d===1,children:"‹"}),n.jsxs("div",{className:"ui-datagrid-page-info",children:["Page ",d," of ",h]}),n.jsx("button",{className:"ui-datagrid-page-btn",onClick:()=>f(d+1),disabled:d===h,children:"›"}),n.jsx("button",{className:"ui-datagrid-page-btn",onClick:()=>f(h),disabled:d===h,children:"»"})]})]})})}exports.DataGrid=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),h=require("react");;/* empty css               */const N=require("../../utils/cn/cn.cjs");function U({columns:g,rows:l,page:C,pageSize:x=10,onPageChange:F,selectable:f=!1,selectedRowIds:v,onSelectionChange:j,onRowClick:w,renderRowActions:L,className:I,disablePagination:p=!1}){const[d,q]=h.useState({key:null,dir:null}),[T,W]=h.useState(1),u=C??T,[E,A]=h.useState(new Set),k=v??E,m=h.useMemo(()=>p||l.length===0?1:Math.ceil(l.length/x),[l.length,x,p]),S=h.useMemo(()=>{if(!d.key||!d.dir)return[...l];const e=d.key,t=d.dir==="asc"?1:-1,i=g.find(r=>r.key===e);return[...l].sort((r,s)=>{if(i?.sortFn)return d.dir==="asc"?i.sortFn(r,s):i.sortFn(s,r);const a=r[e],c=s[e];return a===c?0:a==null?-1*t:c==null?1*t:typeof a=="number"&&typeof c=="number"?(a-c)*t:a instanceof Date&&c instanceof Date?(a.getTime()-c.getTime())*t:String(a).localeCompare(String(c))*t})},[l,d,g]),o=h.useMemo(()=>{if(p)return S;const e=(u-1)*x;return S.slice(e,e+x)},[S,u,x,p]),[y,D]=h.useState(null),b=(e,t)=>e.id??`row-${t}`,G=e=>{q(t=>t.key!==e?{key:e,dir:"asc"}:t.dir==="asc"?{key:e,dir:"desc"}:{key:null,dir:null})},B=e=>{const t=Math.max(1,Math.min(m,e));C===void 0&&W(t),F?.(t)},M=e=>{const t=i=>{const r=new Set(i);return r.has(e)?r.delete(e):r.add(e),r};v?j?.(t(k)):A(i=>{const r=t(i);return j?.(r),r})},K=()=>{const e=o.map((r,s)=>b(r,s)),t=e.every(r=>k.has(r)),i=r=>{const s=new Set(r);return t?e.forEach(a=>s.delete(a)):e.forEach(a=>s.add(a)),s};v?j?.(i(k)):A(r=>{const s=i(r);return j?.(s),s})},O=e=>{if(o.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),D(t=>t===null?0:Math.min(o.length-1,t+1));break;case"ArrowUp":e.preventDefault(),D(t=>t===null?0:Math.max(0,t-1));break;case"Enter":case" ":if(e.preventDefault(),y!==null){const t=o[y],i=b(t,y);f&&M(i),w?.(t)}break}},P=!!L,R=o.length>0&&o.every((e,t)=>k.has(b(e,t)));return n.jsxs("div",{className:N.cn("nui-datagrid-root",I),children:[n.jsx("div",{className:"nui-datagrid-table-wrapper",onKeyDown:O,tabIndex:0,children:n.jsxs("table",{className:"nui-datagrid-table",role:"grid","aria-rowcount":l.length,children:[n.jsx("thead",{className:"nui-datagrid-thead",children:n.jsxs("tr",{role:"row",children:[f&&n.jsx("th",{className:"nui-datagrid-th nui-datagrid-th--select",scope:"col",children:n.jsx("input",{type:"checkbox","aria-label":"Select all on page",onChange:K,checked:R,className:"nui-datagrid-checkbox"})}),g.map(e=>{const t=d.key===e.key;return n.jsx("th",{className:"nui-datagrid-th",style:{width:e.width,textAlign:e.align||"left"},scope:"col","aria-sort":t?d.dir==="asc"?"ascending":"descending":"none",children:n.jsxs("div",{className:N.cn("nui-datagrid-th-content",e.sortable&&"sortable",e.align==="right"&&"justify-end",e.align==="center"&&"justify-center"),onClick:()=>e.sortable&&G(e.key),children:[n.jsx("span",{className:"nui-datagrid-th-title",children:e.title}),e.sortable&&n.jsx("span",{className:N.cn("nui-datagrid-sort-icon",t&&"active"),children:t&&d.dir==="desc"?n.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:n.jsx("path",{d:"m6 9 6 6 6-6"})}):n.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:n.jsx("path",{d:"m18 15-6-6-6 6"})})})]})},e.key)}),P&&n.jsx("th",{className:"nui-datagrid-th nui-datagrid-th--actions",scope:"col"})]})}),n.jsx("tbody",{className:"nui-datagrid-tbody",role:"rowgroup",children:o.length===0?n.jsx("tr",{children:n.jsx("td",{colSpan:g.length+(f?1:0)+(P?1:0),className:"nui-datagrid-empty",children:"No data available"})}):o.map((e,t)=>{const i=b(e,t),r=k.has(i),s=y===t;return n.jsxs("tr",{role:"row",tabIndex:-1,"aria-selected":r,className:N.cn("nui-datagrid-tr",r&&"selected",s&&"focused",w&&"clickable"),onClick:()=>{f&&M(i),w?.(e),D(t)},children:[f&&n.jsx("td",{className:"nui-datagrid-td nui-datagrid-td--select",children:n.jsx("input",{type:"checkbox",checked:r,onClick:a=>a.stopPropagation(),onChange:()=>M(i),"aria-label":"Select row",className:"nui-datagrid-checkbox"})}),g.map(a=>n.jsx("td",{role:"gridcell",className:"nui-datagrid-td",style:{textAlign:a.align||"left"},children:a.render?a.render(e):String(e[a.key]??"")},a.key)),P&&n.jsx("td",{className:"nui-datagrid-td nui-datagrid-td--actions",onClick:a=>a.stopPropagation(),children:L?.(e)})]},String(i))})})]})}),!p&&m>1&&n.jsxs("div",{className:"nui-datagrid-pagination",children:[n.jsxs("span",{className:"nui-datagrid-page-info",children:["Page ",u," of ",m]}),n.jsxs("div",{className:"nui-datagrid-page-controls",children:[n.jsx("button",{className:"nui-datagrid-page-btn",onClick:()=>B(u-1),disabled:u===1,"aria-label":"Previous Page",children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:n.jsx("polyline",{points:"15 18 9 12 15 6"})})}),n.jsx("button",{className:"nui-datagrid-page-btn",onClick:()=>B(u+1),disabled:u===m,"aria-label":"Next Page",children:n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:n.jsx("polyline",{points:"9 18 15 12 9 6"})})})]})]})]})}exports.DataGrid=U;
 //# sourceMappingURL=DataGrid.cjs.map

package/dist/components/datagrid/DataGrid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/datagrid/DataGrid.tsx"],"sourcesContent":["/*\r\n DataGrid.tsx\r\n * -------------\r\n * Vercel-style DataGrid for NUI\r\n \r\n Features:\r\n * - Sortable columns\r\n * - Sticky header\r\n * - Optional row selection (checkbox)\r\n * - Row actions slot\r\n * - Pagination (client-side)\r\n * - Keyboard navigation & focus\r\n * - Accessible (aria-sort, aria-selected, table/grid roles)\r\n /\r\n\r\nimport React, { useMemo, useState } from 'react';\r\nimport './DataGrid.css';\r\n\r\nexport type DataRow = Record<string, unknown> & {\r\n id?: string \| number;\r\n};\r\n\r\nexport type DataGridColumn<T extends DataRow = DataRow> = {\r\n key: keyof T & string;\r\n title: React.ReactNode;\r\n sortable?: boolean;\r\n width?: number \| string;\r\n align?: 'left' \| 'center' \| 'right';\r\n render?: (row: T) => React.ReactNode;\r\n};\r\n\r\nexport interface DataGridProps<T extends DataRow = DataRow> {\r\n columns: DataGridColumn<T>[];\r\n rows: T[];\r\n\r\n page?: number;\r\n pageSize?: number;\r\n onPageChange?: (page: number) => void;\r\n\r\n selectable?: boolean;\r\n selectedRowIds?: Set<string \| number>;\r\n onSelectionChange?: (ids: Set<string \| number>) => void;\r\n\r\n onRowClick?: (row: T) => void;\r\n renderRowActions?: (row: T) => React.ReactNode;\r\n\r\n className?: string;\r\n disablePagination?: boolean;\r\n}\r\n\r\ntype SortState = { key: string \| null; dir: 'asc' \| 'desc' \| null };\r\n\r\nexport function DataGrid<T extends DataRow = DataRow>({\r\n columns,\r\n rows,\r\n page: controlledPage,\r\n pageSize = 10,\r\n onPageChange,\r\n\r\n selectable = false,\r\n selectedRowIds,\r\n onSelectionChange,\r\n\r\n onRowClick,\r\n renderRowActions,\r\n className = '',\r\n disablePagination = false,\r\n}: DataGridProps<T>) {\r\n const [sort, setSort] = useState<SortState>({ key: null, dir: null });\r\n const [internalPage, setInternalPage] = useState(1);\r\n const currentPage = controlledPage ?? internalPage;\r\n\r\n const [internalSelection, setInternalSelection] = useState<\r\n Set<string \| number>\r\n >(new Set());\r\n\r\n const selection = selectedRowIds ?? internalSelection;\r\n\r\n const totalPages = useMemo(() => {\r\n if (disablePagination) return 1;\r\n return Math.max(1, Math.ceil(rows.length / pageSize));\r\n }, [rows.length, pageSize, disablePagination]);\r\n\r\n const sortedRows = useMemo(() => {\r\n if (!sort.key \|\| !sort.dir) return [...rows];\r\n\r\n const key = sort.key as keyof T;\r\n const dir = sort.dir === 'asc' ? 1 : -1;\r\n\r\n return [...rows].sort((a, b) => {\r\n const va = a[key];\r\n const vb = b[key];\r\n\r\n if (va === undefined && vb !== undefined) return -1 dir;\r\n if (vb === undefined && va !== undefined) return 1 * dir;\r\n\r\n if (typeof va === 'number' && typeof vb === 'number') {\r\n return (va - vb) * dir;\r\n }\r\n\r\n if (va instanceof Date && vb instanceof Date) {\r\n return (va.getTime() - vb.getTime()) * dir;\r\n }\r\n\r\n return String(va ?? '').localeCompare(String(vb ?? '')) * dir;\r\n });\r\n }, [rows, sort]);\r\n\r\n const paginatedRows = useMemo(() => {\r\n if (disablePagination) return sortedRows;\r\n const start = (currentPage - 1) * pageSize;\r\n return sortedRows.slice(start, start + pageSize);\r\n }, [sortedRows, currentPage, pageSize, disablePagination]);\r\n\r\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\r\n\r\n const rowId = (r: T, idx: number) =>\r\n r.id ?? `row-${idx}-${Math.random().toString(36).slice(2, 7)}`;\r\n\r\n const toggleSort = (key: string) => {\r\n setSort((prev) => {\r\n if (prev.key !== key) return { key, dir: 'asc' };\r\n if (prev.dir === 'asc') return { key, dir: 'desc' };\r\n return { key: null, dir: null };\r\n });\r\n };\r\n\r\n const setPage = (page: number) => {\r\n const next = Math.max(1, Math.min(totalPages, page));\r\n if (controlledPage === undefined) setInternalPage(next);\r\n onPageChange?.(next);\r\n };\r\n\r\n const toggleSelectRow = (id: string \| number) => {\r\n const update = (set: Set<string \| number>) => {\r\n const next = new Set(set);\r\n if (next.has(id)) next.delete(id);\r\n else next.add(id);\r\n return next;\r\n };\r\n\r\n if (selectedRowIds) {\r\n const next = update(selection);\r\n onSelectionChange?.(next);\r\n } else {\r\n setInternalSelection((prev) => {\r\n const next = update(prev);\r\n onSelectionChange?.(next);\r\n return next;\r\n });\r\n }\r\n };\r\n\r\n const selectAllOnPage = () => {\r\n const ids = paginatedRows.map((r, i) => r.id ?? rowId(r, i));\r\n const allSelected = ids.every((id) => selection.has(id));\r\n\r\n const update = (set: Set<string \| number>) => {\r\n const next = new Set(set);\r\n if (allSelected) ids.forEach((id) => next.delete(id));\r\n else ids.forEach((id) => next.add(id));\r\n return next;\r\n };\r\n\r\n if (selectedRowIds) {\r\n const next = update(selection);\r\n onSelectionChange?.(next);\r\n } else {\r\n setInternalSelection((prev) => {\r\n const next = update(prev);\r\n onSelectionChange?.(next);\r\n return next;\r\n });\r\n }\r\n };\r\n\r\n const onKeyDownTable = (e: React.KeyboardEvent<HTMLDivElement>): void => {\r\n if (paginatedRows.length === 0) return;\r\n\r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n setFocusedIndex((prev) =>\r\n prev === null ? 0 : Math.min(paginatedRows.length - 1, prev + 1)\r\n );\r\n break;\r\n\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n setFocusedIndex((prev) => (prev === null ? 0 : Math.max(0, prev - 1)));\r\n break;\r\n\r\n case 'PageDown':\r\n e.preventDefault();\r\n setPage(currentPage + 1);\r\n setFocusedIndex(0);\r\n break;\r\n\r\n case 'PageUp':\r\n e.preventDefault();\r\n setPage(currentPage - 1);\r\n setFocusedIndex(0);\r\n break;\r\n\r\n case 'Home':\r\n e.preventDefault();\r\n setFocusedIndex(0);\r\n break;\r\n\r\n case 'End':\r\n e.preventDefault();\r\n setFocusedIndex(paginatedRows.length - 1);\r\n break;\r\n\r\n case 'Enter':\r\n e.preventDefault();\r\n if (focusedIndex !== null) {\r\n const row = paginatedRows[focusedIndex];\r\n const id = row.id ?? rowId(row, focusedIndex);\r\n if (selectable) toggleSelectRow(id);\r\n onRowClick?.(row);\r\n }\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const showActions = Boolean(renderRowActions);\r\n\r\n return (\r\n <div\r\n className={`ui-datagrid ${className}`}\r\n onKeyDown={onKeyDownTable}\r\n tabIndex={0}\r\n role=\"grid\"\r\n aria-rowcount={rows.length}\r\n >\r\n <div className=\"ui-datagrid-table\">\r\n {/* HEADER /}\r\n <div className=\"ui-datagrid-header\" role=\"row\">\r\n {selectable && (\r\n <div className=\"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--select\">\r\n <input\r\n type=\"checkbox\"\r\n aria-label=\"Select all on page\"\r\n onChange={selectAllOnPage}\r\n checked={\r\n paginatedRows.length > 0 &&\r\n paginatedRows.every((r, i) =>\r\n selection.has(r.id ?? rowId(r, i))\r\n )\r\n }\r\n />\r\n </div>\r\n )}\r\n\r\n {columns.map((col) => {\r\n const isSorted = sort.key === col.key;\r\n return (\r\n <div\r\n key={col.key}\r\n className={`ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--${\r\n col.align ?? 'left'\r\n }`}\r\n role=\"columnheader\"\r\n style={{ width: col.width }}\r\n aria-sort={\r\n isSorted\r\n ? sort.dir === 'asc'\r\n ? 'ascending'\r\n : 'descending'\r\n : 'none'\r\n }\r\n onClick={() => col.sortable && toggleSort(col.key)}\r\n >\r\n <div className=\"ui-datagrid-header-content\">\r\n <span>{col.title}</span>\r\n {col.sortable && (\r\n <span className=\"ui-datagrid-sort-indicator\">\r\n {isSorted ? (sort.dir === 'asc' ? '▲' : '▼') : '⤓'}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n {showActions && (\r\n <div className=\"ui-datagrid-cell ui-datagrid-cell--header ui-datagrid-cell--actions\" />\r\n )}\r\n </div>\r\n\r\n {/ BODY /}\r\n <div className=\"ui-datagrid-body\" role=\"rowgroup\">\r\n {paginatedRows.length === 0 ? (\r\n <div className=\"ui-datagrid-empty\">No data</div>\r\n ) : (\r\n paginatedRows.map((row, idx) => {\r\n const rid = row.id ?? rowId(row, idx);\r\n const isSelected = selection.has(rid);\r\n const focused = focusedIndex === idx;\r\n\r\n return (\r\n <div\r\n key={String(rid)}\r\n className={[\r\n 'ui-datagrid-row',\r\n isSelected ? 'selected' : '',\r\n focused ? 'focused' : '',\r\n ]\r\n .filter(Boolean)\r\n .join(' ')}\r\n role=\"row\"\r\n tabIndex={focused ? 0 : -1}\r\n aria-selected={isSelected \|\| undefined}\r\n onClick={() => {\r\n if (selectable) toggleSelectRow(rid);\r\n onRowClick?.(row);\r\n setFocusedIndex(idx);\r\n }}\r\n onFocus={() => setFocusedIndex(idx)}\r\n >\r\n {selectable && (\r\n <div className=\"ui-datagrid-cell ui-datagrid-cell--select\">\r\n <input\r\n type=\"checkbox\"\r\n checked={isSelected}\r\n onClick={(e) => e.stopPropagation()}\r\n onChange={() => toggleSelectRow(rid)}\r\n aria-label={`Select row ${String(rid)}`}\r\n />\r\n </div>\r\n )}\r\n\r\n {columns.map((col) => (\r\n <div\r\n key={col.key}\r\n role=\"gridcell\"\r\n className={`ui-datagrid-cell ui-datagrid-cell--${\r\n col.align ?? 'left'\r\n }`}\r\n style={{ width: col.width }}\r\n >\r\n {col.render\r\n ? col.render(row)\r\n : String(row[col.key] ?? '')}\r\n </div>\r\n ))}\r\n\r\n {showActions && (\r\n <div className=\"ui-datagrid-cell ui-datagrid-cell--actions\">\r\n {renderRowActions?.(row)}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n })\r\n )}\r\n </div>\r\n\r\n {/ PAGINATION */}\r\n {!disablePagination && totalPages > 1 && (\r\n <div className=\"ui-datagrid-footer\">\r\n <button\r\n className=\"ui-datagrid-page-btn\"\r\n onClick={() => setPage(1)}\r\n disabled={currentPage === 1}\r\n >\r\n «\r\n </button>\r\n\r\n <button\r\n className=\"ui-datagrid-page-btn\"\r\n onClick={() => setPage(currentPage - 1)}\r\n disabled={currentPage === 1}\r\n >\r\n ‹\r\n </button>\r\n\r\n <div className=\"ui-datagrid-page-info\">\r\n Page {currentPage} of {totalPages}\r\n </div>\r\n\r\n <button\r\n className=\"ui-datagrid-page-btn\"\r\n onClick={() => setPage(currentPage + 1)}\r\n disabled={currentPage === totalPages}\r\n >\r\n ›\r\n </button>\r\n\r\n <button\r\n className=\"ui-datagrid-page-btn\"\r\n onClick={() => setPage(totalPages)}\r\n disabled={currentPage === totalPages}\r\n >\r\n »\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"names":["DataGrid","columns","rows","controlledPage","pageSize","onPageChange","selectable","selectedRowIds","onSelectionChange","onRowClick","renderRowActions","className","disablePagination","sort","setSort","useState","internalPage","setInternalPage","currentPage","internalSelection","setInternalSelection","selection","totalPages","useMemo","sortedRows","key","dir","a","b","va","vb","paginatedRows","start","focusedIndex","setFocusedIndex","rowId","r","idx","toggleSort","prev","setPage","page","next","toggleSelectRow","id","update","set","selectAllOnPage","ids","allSelected","onKeyDownTable","row","showActions","jsx","jsxs","i","col","isSorted","rid","isSelected","focused","e"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/datagrid/DataGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from 'react';\nimport { cn } from '../../utils';\nimport './DataGrid.css';\n\n/* ============================================================\n * Types\n * ============================================================ /\n\nexport type DataRow = Record<string, unknown> & {\n /* Strongly recommended to provide an ID for reliable row selection /\n id?: string \| number;\n};\n\nexport type DataGridColumn<T> = {\n /* The key must exist on the generic type T /\n key: Extract<keyof T, string>;\n title: React.ReactNode;\n sortable?: boolean;\n width?: number \| string;\n align?: 'left' \| 'center' \| 'right';\n /* Custom render function for the cell content. Useful for formatting dates or rendering JSX. /\n render?: (row: T) => React.ReactNode;\n /* Custom sort function. If omitted, the grid falls back to a robust default string/number sort. /\n sortFn?: (a: T, b: T) => number; \n};\n\nexport interface DataGridProps<T> {\n columns: DataGridColumn<T>[];\n rows: T[];\n /* Controlled page number /\n page?: number;\n pageSize?: number;\n onPageChange?: (page: number) => void;\n selectable?: boolean;\n /* Controlled selection state /\n selectedRowIds?: Set<string \| number>;\n onSelectionChange?: (ids: Set<string \| number>) => void;\n onRowClick?: (row: T) => void;\n /* Renders a floating action column on the far right of the grid /\n renderRowActions?: (row: T) => React.ReactNode;\n className?: string;\n disablePagination?: boolean;\n}\n\ntype SortState = { key: string \| null; dir: 'asc' \| 'desc' \| null };\n\n/ ============================================================\n * Component\n * ============================================================ /\n\n/\n DataGrid Component\n * * A highly performant, accessible table for displaying structured data.\n /\nexport function DataGrid<T>({\n columns,\n rows,\n page: controlledPage,\n pageSize = 10,\n onPageChange,\n selectable = false,\n selectedRowIds,\n onSelectionChange,\n onRowClick,\n renderRowActions,\n className,\n disablePagination = false,\n}: DataGridProps<T>) {\n const [sort, setSort] = useState<SortState>({ key: null, dir: null });\n const [internalPage, setInternalPage] = useState(1);\n const currentPage = controlledPage ?? internalPage;\n\n const [internalSelection, setInternalSelection] = useState<Set<string \| number>>(new Set());\n const selection = selectedRowIds ?? internalSelection;\n\n / ----------------------------------------------------\n Data Processing Engine\n ---------------------------------------------------- /\n const totalPages = useMemo(() => {\n if (disablePagination \|\| rows.length === 0) return 1;\n return Math.ceil(rows.length / pageSize);\n }, [rows.length, pageSize, disablePagination]);\n\n const sortedRows = useMemo(() => {\n if (!sort.key \|\| !sort.dir) return [...rows];\n\n const key = sort.key as keyof T;\n const dir = sort.dir === 'asc' ? 1 : -1;\n const column = columns.find(c => c.key === key);\n\n return [...rows].sort((a, b) => {\n // 1. Custom Sort Function override\n if (column?.sortFn) {\n return sort.dir === 'asc' ? column.sortFn(a, b) : column.sortFn(b, a);\n }\n\n // 2. Default Universal Sort\n const va = a[key];\n const vb = b[key];\n\n if (va === vb) return 0;\n if (va === undefined \|\| va === null) return -1 dir;\n if (vb === undefined \|\| vb === null) return 1 * dir;\n\n if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;\n if (va instanceof Date && vb instanceof Date) return (va.getTime() - vb.getTime()) * dir;\n\n return String(va).localeCompare(String(vb)) * dir;\n });\n }, [rows, sort, columns]);\n\n const paginatedRows = useMemo(() => {\n if (disablePagination) return sortedRows;\n const start = (currentPage - 1) * pageSize;\n return sortedRows.slice(start, start + pageSize);\n }, [sortedRows, currentPage, pageSize, disablePagination]);\n\n /* ----------------------------------------------------\n Event Handlers\n ---------------------------------------------------- /\n const [focusedIndex, setFocusedIndex] = useState<number \| null>(null);\n\n const getRowId = (r: T, idx: number) => {\n // Safely cast to extract ID, fallback to index if missing\n const row = r as { id?: string \| number };\n return row.id ?? `row-${idx}`;\n };\n\n const toggleSort = (key: string) => {\n setSort((prev) => {\n // Cycle state: asc -> desc -> un-sorted\n if (prev.key !== key) return { key, dir: 'asc' };\n if (prev.dir === 'asc') return { key, dir: 'desc' };\n return { key: null, dir: null };\n });\n };\n\n const setPage = (page: number) => {\n const next = Math.max(1, Math.min(totalPages, page));\n if (controlledPage === undefined) setInternalPage(next);\n onPageChange?.(next);\n };\n\n const toggleSelectRow = (id: string \| number) => {\n const update = (set: Set<string \| number>) => {\n const next = new Set(set);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n return next;\n };\n\n if (selectedRowIds) {\n onSelectionChange?.(update(selection));\n } else {\n setInternalSelection((prev) => {\n const next = update(prev);\n onSelectionChange?.(next);\n return next;\n });\n }\n };\n\n const selectAllOnPage = () => {\n const ids = paginatedRows.map((r, i) => getRowId(r, i));\n const allSelected = ids.every((id) => selection.has(id));\n\n const update = (set: Set<string \| number>) => {\n const next = new Set(set);\n if (allSelected) ids.forEach((id) => next.delete(id));\n else ids.forEach((id) => next.add(id));\n return next;\n };\n\n if (selectedRowIds) {\n onSelectionChange?.(update(selection));\n } else {\n setInternalSelection((prev) => {\n const next = update(prev);\n onSelectionChange?.(next);\n return next;\n });\n }\n };\n\n const onKeyDownTable = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n if (paginatedRows.length === 0) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n setFocusedIndex((prev) => prev === null ? 0 : Math.min(paginatedRows.length - 1, prev + 1));\n break;\n case 'ArrowUp':\n e.preventDefault();\n setFocusedIndex((prev) => (prev === null ? 0 : Math.max(0, prev - 1)));\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (focusedIndex !== null) {\n const row = paginatedRows[focusedIndex];\n const id = getRowId(row, focusedIndex);\n if (selectable) toggleSelectRow(id);\n onRowClick?.(row);\n }\n break;\n default:\n break;\n }\n };\n\n const showActions = Boolean(renderRowActions);\n const isAllPageSelected = paginatedRows.length > 0 && paginatedRows.every((r, i) => selection.has(getRowId(r, i)));\n\n / ----------------------------------------------------\n Render\n ---------------------------------------------------- /\n return (\n <div className={cn(\"nui-datagrid-root\", className)}>\n <div \n className=\"nui-datagrid-table-wrapper\"\n onKeyDown={onKeyDownTable}\n tabIndex={0}\n >\n <table className=\"nui-datagrid-table\" role=\"grid\" aria-rowcount={rows.length}>\n \n {/ HEADER /}\n <thead className=\"nui-datagrid-thead\">\n <tr role=\"row\">\n {selectable && (\n <th className=\"nui-datagrid-th nui-datagrid-th--select\" scope=\"col\">\n <input\n type=\"checkbox\"\n aria-label=\"Select all on page\"\n onChange={selectAllOnPage}\n checked={isAllPageSelected}\n className=\"nui-datagrid-checkbox\"\n />\n </th>\n )}\n\n {columns.map((col) => {\n const isSorted = sort.key === col.key;\n return (\n <th\n key={col.key}\n className=\"nui-datagrid-th\"\n style={{ \n width: col.width,\n textAlign: col.align \|\| 'left'\n }}\n scope=\"col\"\n aria-sort={isSorted ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'}\n >\n <div \n className={cn(\n \"nui-datagrid-th-content\",\n col.sortable && \"sortable\",\n col.align === 'right' && \"justify-end\",\n col.align === 'center' && \"justify-center\"\n )}\n onClick={() => col.sortable && toggleSort(col.key)}\n >\n <span className=\"nui-datagrid-th-title\">{col.title}</span>\n {col.sortable && (\n <span className={cn(\"nui-datagrid-sort-icon\", isSorted && \"active\")}>\n {isSorted && sort.dir === 'desc' ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>\n ) : (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><path d=\"m18 15-6-6-6 6\"/></svg>\n )}\n </span>\n )}\n </div>\n </th>\n );\n })}\n\n {showActions && <th className=\"nui-datagrid-th nui-datagrid-th--actions\" scope=\"col\"></th>}\n </tr>\n </thead>\n\n {/ BODY /}\n <tbody className=\"nui-datagrid-tbody\" role=\"rowgroup\">\n {paginatedRows.length === 0 ? (\n <tr>\n <td colSpan={columns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)} className=\"nui-datagrid-empty\">\n No data available\n </td>\n </tr>\n ) : (\n paginatedRows.map((row, idx) => {\n const rid = getRowId(row, idx);\n const isSelected = selection.has(rid);\n const isFocused = focusedIndex === idx;\n\n return (\n <tr\n key={String(rid)}\n role=\"row\"\n tabIndex={-1}\n aria-selected={isSelected}\n className={cn(\n \"nui-datagrid-tr\",\n isSelected && \"selected\",\n isFocused && \"focused\",\n onRowClick && \"clickable\"\n )}\n onClick={() => {\n if (selectable) toggleSelectRow(rid);\n onRowClick?.(row);\n setFocusedIndex(idx);\n }}\n >\n {selectable && (\n <td className=\"nui-datagrid-td nui-datagrid-td--select\">\n <input\n type=\"checkbox\"\n checked={isSelected}\n onClick={(e) => e.stopPropagation()}\n onChange={() => toggleSelectRow(rid)}\n aria-label={`Select row`}\n className=\"nui-datagrid-checkbox\"\n />\n </td>\n )}\n\n {columns.map((col) => (\n <td\n key={col.key}\n role=\"gridcell\"\n className=\"nui-datagrid-td\"\n style={{ textAlign: col.align \|\| 'left' }}\n >\n {col.render ? col.render(row) : String(row[col.key] ?? '')}\n </td>\n ))}\n\n {showActions && (\n <td className=\"nui-datagrid-td nui-datagrid-td--actions\" onClick={(e) => e.stopPropagation()}>\n {renderRowActions?.(row)}\n </td>\n )}\n </tr>\n );\n })\n )}\n </tbody>\n </table>\n </div>\n\n {/ PAGINATION */}\n {!disablePagination && totalPages > 1 && (\n <div className=\"nui-datagrid-pagination\">\n <span className=\"nui-datagrid-page-info\">\n Page {currentPage} of {totalPages}\n </span>\n <div className=\"nui-datagrid-page-controls\">\n <button\n className=\"nui-datagrid-page-btn\"\n onClick={() => setPage(currentPage - 1)}\n disabled={currentPage === 1}\n aria-label=\"Previous Page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\n </button>\n <button\n className=\"nui-datagrid-page-btn\"\n onClick={() => setPage(currentPage + 1)}\n disabled={currentPage === totalPages}\n aria-label=\"Next Page\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\n </button>\n </div>\n </div>\n )}\n </div>\n );\n}"],"names":["DataGrid","columns","rows","controlledPage","pageSize","onPageChange","selectable","selectedRowIds","onSelectionChange","onRowClick","renderRowActions","className","disablePagination","sort","setSort","useState","internalPage","setInternalPage","currentPage","internalSelection","setInternalSelection","selection","totalPages","useMemo","sortedRows","key","dir","column","c","a","b","va","vb","paginatedRows","start","focusedIndex","setFocusedIndex","getRowId","r","idx","toggleSort","prev","setPage","page","next","toggleSelectRow","id","update","set","selectAllOnPage","ids","i","allSelected","onKeyDownTable","row","showActions","isAllPageSelected","cn","jsx","jsxs","col","isSorted","rid","isSelected","isFocused","e"],"mappings":"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"}