eidos-ui 3.4.0 → 3.5.1

package/dist/chunk-P4XZH3OR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menu/Menu.component.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport type { MenuProps, MenuItemType, MenuItem, MenuWrapperProps } from './Menu.types';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport { Tooltip } from '../Tooltip/Tooltip.component';\nimport { Kbd } from '../Kbd/Kbd.component';\nimport { renderIcon, useDialogFocus } from '../../utils';\n\n/**\n * MenuPanel - the bare menu list, without any trigger or dropdown wrapper.\n * Exported for use in SplitButton, ContextMenu, and other consumers that need\n * to render the menu content inside their own Dropdown / portal.\n *\n * ## This element owns the menu semantics, not the overlay around it\n *\n * `role=\"menu\"` belongs on the element that directly contains the items, which\n * is this `<ul>`. It used to sit on `Dropdown`'s content `<div>` instead, one\n * level further out, so the menu's only child was a list and the items were\n * `listitem`s - `aria-required-children`, and a structure no screen reader\n * could present as a menu.\n *\n * ## The keyboard model is not optional\n *\n * The items were plain `<li onClick>`: no role, no `tabIndex`, no key handler.\n * Every menu in the library - `Menu`, `ContextMenu`, `SplitButton`, `Table` and\n * `DataGrid` row actions - was therefore **operable by mouse only**, which is\n * WCAG 2.1.1 (Level A). Axe reported none of it, because every menu story\n * renders closed and axe only sees what is on screen.\n *\n * A `menuitem` role is a promise that arrow keys work, so the two land\n * together: roving `tabIndex` (one tab stop for the whole menu), Up/Down to\n * move, Home/End to jump, Enter/Space to activate, ArrowRight to open a\n * submenu. Focus enters on open and returns to the trigger on close.\n */\nexport const MenuPanel: React.FC<MenuProps> = ({\n  items,\n  className = '',\n  onItemClick,\n  onRequestClose,\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLElement>());\n\n  const registerItem = useCallback((id: string, element: HTMLElement | null) => {\n    if (element) itemRefs.current.set(id, element);\n    else itemRefs.current.delete(id);\n  }, []);\n\n  // Moves focus into the menu when it opens and back to the trigger when it\n  // closes. `trapTab: false` - a menu is not a dialog, and confining Tab to it\n  // would strand the user; the hook's frame-retry loop is what matters here,\n  // because `Dropdown`'s content is `visibility: hidden` until it has been\n  // positioned and `.focus()` on a hidden element is a silent no-op.\n  //\n  // `active` is unconditionally true: this panel is only ever mounted by an\n  // open overlay (`Dropdown` and `ContextMenu` both render content\n  // conditionally), so mounting *is* opening.\n  useDialogFocus(true, listRef, { trapTab: false });\n\n  // Handle menu item click\n  const handleItemClick = useCallback(\n    (item: MenuItem) => {\n      if (item.disabled) return;\n\n      // Execute the item's onClick handler first\n      if (item.onClick) {\n        item.onClick();\n      }\n\n      // Then call the onItemClick callback (which will close the dropdown)\n      if (onItemClick) {\n        onItemClick(item);\n      }\n    },\n    [onItemClick],\n  );\n\n  // The items arrow keys move between, in visual order. Separators are not\n  // stops, `component` items own their own focusable content, and a disabled\n  // item is skipped rather than being a dead stop.\n  const navigableIds = useMemo(\n    () =>\n      items\n        .filter((item) => (item.type === 'item' || item.type === 'nested') && !item.disabled)\n        .map((item) => item.id),\n    [items],\n  );\n\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  // Which submenu is open, owned here rather than inside each nested overlay:\n  // the trigger has to advertise `aria-expanded`, and `ArrowLeft` in the child\n  // has to be able to close it. Both were impossible while the overlay kept\n  // that state to itself.\n  const [openSubmenuId, setOpenSubmenuId] = useState<string | null>(null);\n  // Validated rather than trusted: `items` can change while the menu is open\n  // (a filtered list, an action that disables its neighbour), which would\n  // otherwise leave the roving tabIndex on an id that no longer renders - and\n  // therefore no tab stop in the menu at all.\n  const activeId =\n    focusedId && navigableIds.includes(focusedId) ? focusedId : (navigableIds[0] ?? null);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      // A `component` item may hold a real control - a text field, a switch -\n      // whose own arrow keys must not be hijacked for menu navigation. Only\n      // keys pressed on a menuitem drive the menu.\n      if (!(event.target as HTMLElement).closest('[role=\"menuitem\"]')) return;\n      if (navigableIds.length === 0) return;\n\n      const focusAt = (index: number) => {\n        const id = navigableIds[(index + navigableIds.length) % navigableIds.length];\n        setFocusedId(id);\n        itemRefs.current.get(id)?.focus();\n      };\n      const current = Math.max(0, navigableIds.indexOf(activeId ?? ''));\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          focusAt(current + 1);\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          focusAt(current - 1);\n          break;\n        case 'Home':\n          event.preventDefault();\n          focusAt(0);\n          break;\n        case 'End':\n          event.preventDefault();\n          focusAt(navigableIds.length - 1);\n          break;\n        case 'ArrowLeft':\n          // Only meaningful in a submenu. `stopPropagation` keeps the parent\n          // panel - which is a React ancestor, portal notwithstanding - from\n          // treating the same keypress as its own.\n          if (onRequestClose) {\n            event.preventDefault();\n            event.stopPropagation();\n            onRequestClose();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [navigableIds, activeId, onRequestClose],\n  );\n\n  // Render individual menu item\n  const renderMenuItem = (item: MenuItemType): React.ReactNode => {\n    switch (item.type) {\n      case 'item':\n        return (\n          <li\n            key={item.id}\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            // Roving tabIndex: the menu is one tab stop and arrows move within\n            // it. Making every item a tab stop would bury whatever follows a\n            // ten-item menu ten presses deep.\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            // `aria-disabled`, not the `disabled` attribute, which an `li` does\n            // not have. The click handler already returns early.\n            aria-disabled={item.disabled || undefined}\n            className={[\n              'eidos-menu-item',\n              item.disabled ? 'eidos-menu-item--disabled' : '',\n              item.color ? `eidos-menu-item--${item.color}` : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => handleItemClick(item)}\n            onKeyDown={(event) => {\n              // An `li` is not a button, so Enter and Space produce no click of\n              // their own - activation has to be wired by hand. Space is\n              // prevented to stop the page scrolling underneath.\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleItemClick(item);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            {item.shortcut && (\n              <Kbd size=\"sm\" className=\"eidos-menu-shortcut\">\n                {item.shortcut}\n              </Kbd>\n            )}\n          </li>\n        );\n\n      case 'component':\n        // `role=\"none\"` because the `li` is a wrapper: whatever the consumer\n        // renders owns its own semantics, and calling it a `menuitem` would nest\n        // that control inside an interactive role.\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-component-item`}>\n            {item.component}\n          </li>\n        );\n\n      case 'separator':\n        return <li key={item.id} role=\"separator\" className={`eidos-menu-separator`} />;\n\n      case 'nested': {\n        const triggerElement = (\n          <div\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            aria-haspopup=\"menu\"\n            aria-expanded={openSubmenuId === item.id}\n            aria-disabled={item.disabled || undefined}\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            className={[\n              'eidos-menu-nested-trigger',\n              item.disabled ? 'eidos-menu-nested-trigger--disabled' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={(event) => {\n              if (item.disabled) return;\n              // ArrowRight is the menu idiom for \"open this submenu\"; Enter and\n              // Space do the same. This used to synthesise a click on itself so\n              // the event would reach the overlay's trigger wrapper; the state\n              // is now right here.\n              if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                setOpenSubmenuId(item.id);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            <ChevronRight className={`eidos-menu-nested-arrow`} />\n          </div>\n        );\n\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-nested-item`}>\n            <Dropdown\n              open={openSubmenuId === item.id}\n              onOpenChange={(next) => setOpenSubmenuId(next ? item.id : null)}\n              trigger={triggerElement}\n              content={\n                <MenuPanel\n                  items={item.items}\n                  onItemClick={onItemClick}\n                  // Lets `ArrowLeft` in the child close this level. Focus\n                  // returns to the trigger on its own - `useDialogFocus`\n                  // restores it when the panel unmounts.\n                  onRequestClose={() => setOpenSubmenuId(null)}\n                />\n              }\n              placement=\"right\"\n              isNested={true}\n              fullWidth\n              // `disabled` was accepted on a nested item and then ignored, so a\n              // disabled submenu opened like any other.\n              disabled={item.disabled}\n            />\n          </li>\n        );\n      }\n\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <ul ref={listRef} role=\"menu\" className={`eidos-menu ${className}`} onKeyDown={handleKeyDown}>\n      {items.map(renderMenuItem)}\n    </ul>\n  );\n};\n\nexport const Menu: React.FC<MenuWrapperProps> = ({\n  trigger,\n  items,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  autoWidth = true,\n  triggerRef,\n  closeOnItemClick = true,\n  tooltip,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleItemClick = useCallback(\n    (_item: MenuItem) => {\n      // `item.onClick` has already run, in `MenuPanel`. All that is left is\n      // closing.\n      //\n      // This used to dispatch a synthetic `mousedown` at `document` on a 10ms\n      // timer - a counterfeit \"click outside\" - because the overlay owned its\n      // open state privately and that was the only lever available. It worked by\n      // being indistinguishable from the click a mouse user had just made, and\n      // it broke the moment nobody had clicked: activating an item with the\n      // keyboard closed every other dropdown on the page that dismisses on\n      // outside clicks.\n      if (closeOnItemClick) setIsOpen(false);\n    },\n    [closeOnItemClick],\n  );\n\n  // The trigger opens a menu, and nothing said so: `Dropdown` adds no ARIA to\n  // its trigger (deliberately - it does not know what its content is), so a\n  // screen reader announced a plain button. `Menu` does know, and now that it\n  // owns the open state it can describe that too (SC 4.1.2), which was the\n  // missing half while the state was private.\n  const describedTrigger = React.isValidElement(trigger)\n    ? React.cloneElement(\n        trigger as React.ReactElement<{ 'aria-haspopup'?: string; 'aria-expanded'?: boolean }>,\n        { 'aria-haspopup': 'menu', 'aria-expanded': isOpen },\n      )\n    : trigger;\n\n  const dropdown = (\n    <Dropdown\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      trigger={describedTrigger}\n      content={<MenuPanel items={items} onItemClick={handleItemClick} />}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      autoWidth={autoWidth}\n      triggerRef={triggerRef}\n    />\n  );\n\n  return tooltip ? <Tooltip message={tooltip}>{dropdown}</Tooltip> : dropdown;\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-O46UJUZM.cjs → chunk-PMSENLOA.cjs}

@@ -1,21 +1,21 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkJKBBHAICcjs = require('./chunk-JKBBHAIC.cjs');
+var _chunk6JHVXWDVcjs = require('./chunk-6JHVXWDV.cjs');
 
 
-var _chunk6LCYO2HGcjs = require('./chunk-6LCYO2HG.cjs');
+var _chunkXZLSHEHEcjs = require('./chunk-XZLSHEHE.cjs');
 
 
-var _chunkNCZUQFKLcjs = require('./chunk-NCZUQFKL.cjs');
+var _chunk7VJCGKVPcjs = require('./chunk-7VJCGKVP.cjs');
 
 
-var _chunkP7J6WZTOcjs = require('./chunk-P7J6WZTO.cjs');
+var _chunkKIZVY57Hcjs = require('./chunk-KIZVY57H.cjs');
 
 
 var _chunk3ETWFS2Ncjs = require('./chunk-3ETWFS2N.cjs');
 
 
-var _chunkOWWPHXAFcjs = require('./chunk-OWWPHXAF.cjs');
+var _chunkDA375AI6cjs = require('./chunk-DA375AI6.cjs');
 
 // src/components/Table/TableFiltersDropdown.component.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -28,7 +28,7 @@ var TableFiltersDropdown = ({
   defaultFilters = {},
   className = ""
 }) => {
-  const [dropdownKey, setDropdownKey] = _react.useState.call(void 0, 0);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [pendingFilters, setPendingFilters] = _react.useState.call(void 0, () => {
     const initialFilters = Object.keys(filters).length > 0 ? filters : defaultFilters;
     if (Object.keys(initialFilters).length === 0) {
@@ -138,7 +138,7 @@ var TableFiltersDropdown = ({
       }
     });
     onFiltersChange(cleanedFilters);
-    setDropdownKey((prev) => prev + 1);
+    setIsOpen(false);
   };
   const resetFilters = () => {
     if (Object.keys(filters).length === 0) {
@@ -151,27 +151,30 @@ var TableFiltersDropdown = ({
     const emptyFilter = { [`__temp_${Date.now()}`]: "" };
     setPendingFilters(emptyFilter);
     onFiltersChange({});
-    setDropdownKey((prev) => prev + 1);
+    setIsOpen(false);
   };
   const renderFilterInput = (row, column) => {
     const filterType = column.filterType || "text";
     switch (filterType) {
       case "select":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk6LCYO2HGcjs.Select,
+          _chunkXZLSHEHEcjs.Select,
           {
             value: row.value || "",
             onChange: (value) => updateFilter(row.id, row.columnKey, value),
             options: column.filterOptions || [],
             placeholder: "Select value",
             clearable: true,
-            inputProps: { size: "sm" },
+            inputProps: {
+              size: "sm",
+              "aria-label": `Filter value${column.label ? ` for ${column.label}` : ""}`
+            },
             fullWidth: true
           }
         );
       case "boolean":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk6LCYO2HGcjs.Select,
+          _chunkXZLSHEHEcjs.Select,
           {
             value: row.value === void 0 ? "" : String(row.value),
             onChange: (value) => updateFilter(row.id, row.columnKey, value === "" ? void 0 : value === "true"),
@@ -182,7 +185,10 @@ var TableFiltersDropdown = ({
             ],
             placeholder: "Select value",
             clearable: false,
-            inputProps: { size: "sm" },
+            inputProps: {
+              size: "sm",
+              "aria-label": `Filter value${column.label ? ` for ${column.label}` : ""}`
+            },
             fullWidth: true
           }
         );
@@ -232,7 +238,7 @@ var TableFiltersDropdown = ({
           }
         };
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkJKBBHAICcjs.DatePicker,
+          _chunk6JHVXWDVcjs.DatePicker,
           {
             mode: dateMode,
             value: prepareValue(),
@@ -250,7 +256,7 @@ var TableFiltersDropdown = ({
       case "text":
       default:
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkNCZUQFKLcjs.Input,
+          _chunk7VJCGKVPcjs.Input,
           {
             value: row.value || "",
             onChange: (e) => updateFilter(row.id, row.columnKey, e.target.value),
@@ -264,12 +270,13 @@ var TableFiltersDropdown = ({
   };
   const canAddMore = filterRows.length < filterableColumns.length;
   const triggerButton = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3ETWFS2Ncjs.Badge, { content: activeFilterCount, max: 9, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkOWWPHXAFcjs.Button,
+    _chunkDA375AI6cjs.Button,
     {
       variant: "text",
       size: "sm",
       icon: _lucidereact.Funnel,
       "aria-label": hasActiveFilters ? `Filters (${activeFilterCount} active)` : "Filters",
+      "aria-expanded": isOpen,
       className: hasActiveFilters ? "eidos-table-active-filter-button" : ""
     }
   ) });
@@ -281,7 +288,7 @@ var TableFiltersDropdown = ({
       const isTemporaryFilter = row.columnKey.startsWith("__temp_");
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-filter-row", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-column-select", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk6LCYO2HGcjs.Select,
+          _chunkXZLSHEHEcjs.Select,
           {
             value: isTemporaryFilter ? "" : row.columnKey,
             onChange: (value) => {
@@ -293,12 +300,12 @@ var TableFiltersDropdown = ({
             options: allColumns,
             placeholder: "Select column",
             clearable: false,
-            inputProps: { size: "sm" },
+            inputProps: { size: "sm", "aria-label": "Filter column" },
             fullWidth: true
           }
         ) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-value-input", children: column && !isTemporaryFilter ? renderFilterInput(row, column) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkNCZUQFKLcjs.Input,
+          _chunk7VJCGKVPcjs.Input,
           {
             value: "",
             disabled: true,
@@ -309,7 +316,7 @@ var TableFiltersDropdown = ({
           }
         ) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkOWWPHXAFcjs.Button,
+          _chunkDA375AI6cjs.Button,
           {
             variant: "text",
             size: "sm",
@@ -324,7 +331,7 @@ var TableFiltersDropdown = ({
     }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-filters-footer", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-filters-actions", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkOWWPHXAFcjs.Button,
+        _chunkDA375AI6cjs.Button,
         {
           variant: "text",
           size: "sm",
@@ -334,10 +341,10 @@ var TableFiltersDropdown = ({
           children: "Add Filter"
         }
       ),
-      hasActiveFilters && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOWWPHXAFcjs.Button, { variant: "text", size: "sm", color: "secondary", onClick: clearAllFilters, children: "Clear All" }),
+      hasActiveFilters && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDA375AI6cjs.Button, { variant: "text", size: "sm", color: "secondary", onClick: clearAllFilters, children: "Clear All" }),
       hasChanges && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-filters-apply-actions", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkOWWPHXAFcjs.Button,
+          _chunkDA375AI6cjs.Button,
           {
             variant: "outlined",
             size: "sm",
@@ -348,7 +355,7 @@ var TableFiltersDropdown = ({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkOWWPHXAFcjs.Button,
+          _chunkDA375AI6cjs.Button,
           {
             variant: "filled",
             size: "sm",
@@ -362,8 +369,10 @@ var TableFiltersDropdown = ({
     ] }) })
   ] });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkP7J6WZTOcjs.Dropdown,
+    _chunkKIZVY57Hcjs.Dropdown,
     {
+      open: isOpen,
+      onOpenChange: setIsOpen,
       trigger: triggerButton,
       content: dropdownContent,
       placement: "bottom",
@@ -372,8 +381,7 @@ var TableFiltersDropdown = ({
       maxWidth: "auto",
       maxHeight: "auto",
       closeOnClickOutside: true
-    },
-    dropdownKey
+    }
   );
 };
 
@@ -4435,4 +4443,4 @@ function isAfter(a, b) {
 
 
 exports.CSS = CSS; exports.useSensor = useSensor; exports.useSensors = useSensors; exports.closestCenter = closestCenter; exports.KeyboardSensor = KeyboardSensor; exports.PointerSensor = PointerSensor; exports.DndContext = DndContext; exports.arrayMove = arrayMove; exports.horizontalListSortingStrategy = horizontalListSortingStrategy; exports.verticalListSortingStrategy = verticalListSortingStrategy; exports.SortableContext = SortableContext; exports.useSortable = useSortable; exports.sortableKeyboardCoordinates = sortableKeyboardCoordinates; exports.TableFiltersDropdown = TableFiltersDropdown;
-//# sourceMappingURL=chunk-O46UJUZM.cjs.map
+//# sourceMappingURL=chunk-PMSENLOA.cjs.map