@spaced-out/ui-design-system 0.6.34 → 0.6.35-beta.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.35-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.6.35-beta.0...v0.6.35-beta.1) (2026-09-22)
+
+
+### Bug Fixes
+
+* **menu:** never cap the card below its furniture plus the first row ([#510](https://github.com/spaced-out/ui-design-system/issues/510)) ([b0597b0](https://github.com/spaced-out/ui-design-system/commit/b0597b0439a2e3e38671e7a44de854e53e4e6763))
+
+### [0.6.35-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.6.34...v0.6.35-beta.0) (2026-09-18)
+
+
+### Features
+
+* **menu:** add keyboard navigation and ARIA semantics to the shared Menu ([#504](https://github.com/spaced-out/ui-design-system/issues/504)) ([eac2db6](https://github.com/spaced-out/ui-design-system/commit/eac2db6bb600d7d0396b751f14dfb7451356b205)), closes [#500](https://github.com/spaced-out/ui-design-system/issues/500) [#500](https://github.com/spaced-out/ui-design-system/issues/500)
+
 ### [0.6.34](https://github.com/spaced-out/ui-design-system/compare/v0.6.33...v0.6.34) (2026-09-16)
 
 

package/lib/components/Menu/Menu.d.ts

@@ -21,6 +21,7 @@ export type Virtualization = Readonly<{
      * (e.g. taller custom title nodes).
      */
     groupTitleHeight?: number | ((groupTitle: React.ReactNode, groupIndex: number) => number);
+    /** Max height of the whole card in px, search/header/footer included; never below the first row. */
     menuHeight?: number;
 }>;
 export interface MenuOption {

package/lib/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/lib/components/Menu/Menu.js

@@ -22,14 +22,29 @@ const menuSizeMedium = 276,
   menuSizeSmall = 228;
 const buttonSizeMedium = 40,
   buttonSizeSmall = 32;
-
-// default group title row height when virtualizing groupTitleOptions
+const searchInputSizeMedium = 42,
+  searchInputSizeSmall = 34;
+const cardPadding = 8;
 const groupTitleSize = 32;
+const resultTextSize = 41;
+const headerFooterSize = 58;
+const getMenuChromeHeight = _ref => {
+  let {
+    size,
+    allowSearch,
+    showResultText,
+    hasHeader,
+    hasFooter
+  } = _ref;
+  return (hasHeader ? headerFooterSize : cardPadding) + (hasFooter ? headerFooterSize : cardPadding) + (allowSearch ? size === 'medium' ? searchInputSizeMedium : searchInputSizeSmall : 0) + (allowSearch && showResultText ? resultTextSize : 0);
+};
+const makeItemHeightResolver = (itemHeight, size) => (option, index) => typeof itemHeight === 'function' ? itemHeight(option, index) : itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall);
+const makeGroupTitleHeightResolver = groupTitleHeight => (groupTitle, groupIndex) => typeof groupTitleHeight === 'function' ? groupTitleHeight(groupTitle, groupIndex) : groupTitleHeight || groupTitleSize;
 // VariableSizeList caches row offsets, so the cache must be flushed whenever
 // the rows or their heights change. `heightSignature` encodes every row's
 // key and height; when it changes, resetAfterIndex invalidates the cache in
 // place without remounting the list (a remount would drop scroll position).
-const MenuVariableSizeList = _ref => {
+const MenuVariableSizeList = _ref2 => {
   let {
     heightSignature,
     height,
@@ -37,7 +52,7 @@ const MenuVariableSizeList = _ref => {
     itemSize,
     itemKey,
     children
-  } = _ref;
+  } = _ref2;
   const listRef = React.useRef(null);
   React.useEffect(() => {
     listRef.current?.resetAfterIndex(0, true);
@@ -52,7 +67,7 @@ const MenuVariableSizeList = _ref => {
     children: children
   });
 };
-const RenderOption = _ref2 => {
+const RenderOption = _ref3 => {
   let {
     options,
     composeOptions,
@@ -67,7 +82,7 @@ const RenderOption = _ref2 => {
       SEARCH_PLACEHOLDER: 'Search...'
     },
     ...restProps
-  } = _ref2;
+  } = _ref3;
   const {
     allowSearch,
     size,
@@ -82,16 +97,16 @@ const RenderOption = _ref2 => {
     enable: false
   };
   const listHeight = menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall);
-  const resolveItemHeight = (option, index) => typeof itemHeight === 'function' ? itemHeight(option, index) : itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall);
-  const resolveGroupTitleHeight = (groupTitle, groupIndex) => typeof groupTitleHeight === 'function' ? groupTitleHeight(groupTitle, groupIndex) : groupTitleHeight || groupTitleSize;
+  const resolveItemHeight = makeItemHeightResolver(itemHeight, size);
+  const resolveGroupTitleHeight = makeGroupTitleHeightResolver(groupTitleHeight);
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
     const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered, staticLabels);
-    const renderFlatRow = _ref3 => {
+    const renderFlatRow = _ref4 => {
       let {
         index: idx,
         style
-      } = _ref3;
+      } = _ref4;
       const buttonOption = optionsFiltered[idx];
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOptionButton.MenuOptionButton, {
         option: buttonOption,
@@ -228,11 +243,11 @@ const RenderOption = _ref2 => {
           itemSize: rowHeight,
           itemCount: rows.length,
           itemKey: rowKey,
-          children: _ref4 => {
+          children: _ref5 => {
             let {
               index: idx,
               style
-            } = _ref4;
+            } = _ref5;
             const row = rows[idx];
             if (row.kind === 'title') {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -300,10 +315,12 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     width,
     isFluid = true,
     allowSearch,
+    showResultText = true,
+    options,
+    composeOptions,
+    groupTitleOptions,
     virtualization = {
-      enable: false,
-      menuHeight: null,
-      itemHeight: null
+      enable: false
     },
     header,
     footer,
@@ -312,10 +329,22 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const [searchText, setSearchText] = React.useState('');
   const {
-    menuHeight
+    menuHeight,
+    itemHeight,
+    groupTitleHeight
   } = virtualization;
   const hasHeader = header ? true : false;
   const hasFooter = footer ? true : false;
+  const firstOption = options?.[0] ?? composeOptions?.[0]?.[0] ?? groupTitleOptions?.[0]?.options?.[0];
+  const firstRowHeight = (groupTitleOptions?.length ? makeGroupTitleHeightResolver(groupTitleHeight)(groupTitleOptions[0].groupTitle, 0) : 0) + (firstOption ? makeItemHeightResolver(itemHeight, size)(firstOption, 0) : 0);
+  const minCardHeight = getMenuChromeHeight({
+    size,
+    allowSearch: Boolean(allowSearch),
+    showResultText,
+    hasHeader,
+    hasFooter
+  }) + firstRowHeight;
+  const cardMaxHeight = menuHeight ? Math.max(menuHeight, minCardHeight) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
@@ -332,7 +361,7 @@ const Menu = exports.Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
     }, classNames?.wrapper),
     style: {
       width,
-      maxHeight: menuHeight ? menuHeight + 'px' : ''
+      maxHeight: cardMaxHeight ? cardMaxHeight + 'px' : ''
     },
     ref: ref,
     "data-testid": (0, _qa.generateTestId)({

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.34",
+  "version": "0.6.35-beta.1",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"