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

package/lib/components/Menu/Menu.module.css

@@ -9,7 +9,6 @@
 @value (
   colorBackgroundSecondary,
   colorFillSecondary,
-  colorFillPrimary,
   colorTextDisabled,
   colorTextPrimary,
   colorTextSecondary,
@@ -61,17 +60,6 @@
   z-index: elevationMenu;
 }
 
-/*
- * The options carry their own scroll container, so the card must not scroll as
- * well — otherwise both would show a scrollbar. `hidden` also keeps a pinned
- * header / footer inside the border radius.
- */
-.menuCardTopPaddingZero,
-.menuCardBottomPaddingZero,
-.menuCardNoScroll {
-  overflow: hidden;
-}
-
 .menuCardTopPaddingZero {
   padding-top: spaceNone;
 }
@@ -80,28 +68,7 @@
   padding-bottom: spaceNone;
 }
 
-/*
- * Scrolls the options only. A header / footer is a flex sibling of this element
- * rather than something sticky inside it, so the scrollbar spans just the option
- * list — it no longer runs the whole height of the card behind the bars — and no
- * option can be clipped under them. `min-height: 0` is what lets a flex item
- * actually shrink and scroll instead of growing to fit its content.
- */
-.optionsScroll {
-  display: flex;
-  flex-flow: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/*
- * Collapse a menu that renders nothing. `:empty` alone no longer suffices: the
- * card always holds the (possibly empty) role="listbox" element so the trigger's
- * aria-controls resolves, so Menu also sets `.menuCardEmpty` explicitly.
- */
-.menuCard:empty,
-.menuCard.menuCardEmpty {
+.menuCard:empty {
   padding: spaceNone;
   border: none;
 }
@@ -198,58 +165,25 @@
   color: colorTextTertiary;
 }
 
-/*
- * Background for the highlighted option (the "cursor"). There is only ever one —
- * the Menu keeps it in sync across pointer and keyboard. `.active` covers the
- * combobox active-descendant case (focus stays on the input); :hover covers a
- * plain mouse-over.
- */
 .option:hover,
-.option:active,
-.option.active {
-  outline: none;
-  color: colorTextPrimary;
+.option:active {
   background: colorBackgroundSecondary;
+  color: colorTextPrimary;
 }
 
-.option:hover .optionTextSecondaryLabel,
-.option:active .optionTextSecondaryLabel,
-.option.active .optionTextSecondaryLabel,
-.option:focus .optionTextSecondaryLabel {
+.option:hover .optionTextSecondaryLabel {
   color: colorTextSecondary;
 }
 
-/*
- * Selected value (committed), shown as a stronger fill than the active highlight.
- *
- * Deliberately no left accent bar: a 2px inset box-shadow gets tapered by the
- * option's 8px border-radius, so it renders as a small curved sliver at the edge
- * that reads as a stray focus artefact rather than an intentional indicator. The
- * checkbox / radio glyph carries the state in those variants, and forced-colors
- * mode below re-expresses it as a full outline, which the radius follows cleanly.
- */
-.option.selected {
-  background: colorFillSecondary;
+.option:active .optionTextSecondaryLabel {
+  color: colorTextSecondary;
+}
+
+.option:focus {
   outline: none;
   color: colorTextPrimary;
 }
 
-/*
- * Focus ring — KEYBOARD ONLY. A focus indicator has to mean "focus is here", so
- * it must not appear under the mouse pointer:
- *
- * - `.activeRing` is set by Menu for the combobox modes (Dropdown / Typeahead),
- *   where DOM focus stays on the input and the active option is virtual. Menu
- *   withholds it when the highlight came from the pointer.
- * - `:focus-visible` covers the roving menus, which move real DOM focus. It is
- *   exactly the right selector here: arrow-key navigation calls .focus() after a
- *   key press so the ring shows, while hover-driven .focus() follows a pointer
- *   interaction so it does not.
- *
- * Declared after `.selected`, which sets no box-shadow of its own, so a selected
- * option that also has focus shows the ring without anything to fight over.
- */
-.option.activeRing,
 .option:focus-visible {
   outline: none;
   color: colorTextPrimary;
@@ -257,34 +191,20 @@
     borderWidthTertiary colorFocusSecondary;
 }
 
-/*
- * Windows High Contrast / forced-colors mode drops box-shadow and flattens
- * background, so the bar + tint indicators above vanish. Re-express the active
- * highlight and selected state with system-color outlines (honored in HCM).
- */
-@media (forced-colors: active) {
-  .option:hover,
-  .option.active {
-    outline: borderWidthTertiary solid Highlight;
-    outline-offset: calc(-1 * borderWidthTertiary);
-  }
-
-  .option.selected {
-    outline: borderWidthTertiary solid SelectedItem;
-    outline-offset: calc(-1 * borderWidthTertiary);
-  }
-
-  /*
-   * Keyboard focus must stay distinguishable from BOTH the hover highlight and
-   * the selected state, and Highlight / SelectedItem commonly resolve to the same
-   * system color — so change the outline STYLE rather than add a third color.
-   * Declared last so a selected option that also has focus still shows it.
-   */
-  .option.activeRing,
-  .option:focus-visible {
-    outline: borderWidthTertiary dashed Highlight;
-    outline-offset: calc(-1 * borderWidthTertiary);
-  }
+.option:focus-within {
+  outline: none;
+  color: colorTextPrimary;
+  /* box-shadow: none; */
+}
+
+.option.selected {
+  background: colorFillSecondary;
+  outline: none;
+  color: colorTextPrimary;
+}
+
+.option:focus .optionTextSecondaryLabel {
+  color: colorTextSecondary;
 }
 
 .disabled {
@@ -324,41 +244,6 @@
   flex-flow: column;
 }
 
-/*
- * Wraps only the option list so the listbox role contains option children
- * exclusively (search/header/footer stay outside it). display:contents keeps
- * the existing flex layout of .menuCard unchanged.
- */
-.optionsListbox {
-  display: contents;
-}
-
-/*
- * The listbox as the element that actually scrolls. Under virtualization
- * react-window's own scroll box carries the role (see ListboxOuter); this is the
- * same arrangement for a plain option list, and it matters beyond tidiness: the
- * options are not focusable themselves whenever a combobox trigger drives the
- * menu, so a
- * scroll container that is NOT the combobox's popup reads as an unreachable
- * scroll area (axe `scrollable-region-focusable`). Making the listbox the
- * scroller means the region IS the popup, which that rule exempts.
- */
-.optionsListboxScroll {
-  display: flex;
-  flex-flow: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/*
- * role="group" wrapper around each titled option group. display:contents keeps
- * the existing flex layout (title + options) unchanged.
- */
-.optionGroup {
-  display: contents;
-}
-
 .groupTitleWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
   display: flex;
@@ -375,16 +260,11 @@
   margin-left: spaceSmall;
 }
 
-/*
- * Pinned by living OUTSIDE the options scroll container rather than by sticking
- * inside it, so it never has the option list's scrollbar running behind it and
- * never has an option tucked under it. `relative` positions the divider below.
- */
 .menuHeader {
-  position: relative;
-  flex: 0 0 auto;
+  position: sticky;
   background-color: colorBackgroundTertiary;
   padding: spaceXSmall spaceNone;
+  top: spaceNone;
   margin-bottom: spaceXSmall;
   z-index: calc(elevationCard/4);
   min-height: size50;
@@ -400,12 +280,11 @@
   border-bottom: borderWidthPrimary solid colorBorderPrimary;
 }
 
-/* As `.menuHeader`, pinned by sitting outside the options scroll container. */
 .menuFooter {
-  position: relative;
-  flex: 0 0 auto;
+  position: sticky;
   background-color: colorBackgroundTertiary;
   padding: spaceXSmall spaceNone;
+  bottom: spaceNone;
   margin-top: spaceXSmall;
   min-height: size50;
   max-height: size50;

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

@@ -1,31 +1,10 @@
 import * as React from 'react';
 import type { CSSProperties } from 'react';
 import type { BaseMenuProps, MenuOption } from '../../components/Menu/Menu';
-export interface MenuOptionProps extends Omit<BaseMenuProps, 'option' | 'style'> {
+export interface MenuOptionProps extends Omit<BaseMenuProps, 'option' | 'isLastItem' | 'style'> {
     option: MenuOption;
+    isLastItem?: boolean;
     style?: CSSProperties | undefined;
-    /** Total option count — set for virtualized lists so AT announces "N of total". */
-    setSize?: number;
-    /** 1-based position — set for virtualized lists (windowed DOM hides the rest). */
-    posInSet?: number;
-    /**
-     * Make this option the active highlight when the pointer moves over it, so
-     * mouse and keyboard share one cursor (and roving focus follows the pointer).
-     * `clientX`/`clientY` let Menu drop no-op moves (scroll under a still cursor).
-     */
-    onPointerActivate?: (key: string, el: HTMLElement, clientX: number, clientY: number) => void;
-    /**
-     * Key of the option the POINTER most recently highlighted. Used to keep the
-     * focus ring off a highlight the mouse created, while the background tint still
-     * follows the pointer.
-     */
-    pointerActiveKey?: string | null;
-    /**
-     * Withhold the highlight the menu opened with. Set when the menu was opened by
-     * mouse, so it does not appear to have a cursor the user never placed; cleared
-     * as soon as they move the active option themselves.
-     */
-    suppressInitialHighlight?: boolean;
     testId?: string;
 }
 export declare const MenuOptionButton: (props: MenuOptionProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"MenuOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuOptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AASzC,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,0BAA0B,CAAC;AASxE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/C,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;IACV;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,sBAkQtD,CAAC"}
+{"version":3,"file":"MenuOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuOptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AASzC,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAQxE,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;IAC9D,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,eAAe,sBA+MtD,CAAC"}

package/lib/components/Menu/MenuOptionButton.js

@@ -10,7 +10,6 @@ var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Checkbox = require("../Checkbox");
 var _Icon = require("../Icon");
-var _menuOptionId = require("./menuOptionId");
 var _RadioButton = require("../RadioButton");
 var _Truncate = require("../Truncate");
 var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
@@ -19,6 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const MenuOptionButton = props => {
+  const lastMenuItemRef = React.useRef(null);
   const {
     option,
     size = 'medium',
@@ -28,20 +28,13 @@ const MenuOptionButton = props => {
     classNames,
     optionsVariant = 'normal',
     selectedKeys,
+    isLastItem,
+    onTabOut,
     resolveLabel,
     resolveSecondaryLabel,
     style,
     showLabelTooltip,
     allowWrap = false,
-    allowSearch = false,
-    menuId,
-    activeOptionKey,
-    externalKeyboardNav = false,
-    setSize,
-    posInSet,
-    onPointerActivate,
-    pointerActiveKey,
-    suppressInitialHighlight = false,
     testId
   } = props;
   const {
@@ -69,45 +62,24 @@ const MenuOptionButton = props => {
     }
     return selectedKeys.includes(option.key);
   };
-  const isOptionSelected = isSelected() || key === selectedOption?.key;
-  const isOptionDisabled = Boolean(menuDisabled || disabled);
-  // Roving tabindex: Menu always passes activeOptionKey (string | null), so a
-  // single option owns the tab stop. The `undefined` fallback only matters if a
-  // MenuOptionButton is rendered outside Menu — there every option stays
-  // tabbable (default tabIndex), preserving the pre-roving behavior.
-  const isRoving = activeOptionKey !== undefined;
-  // `isActive` still drives the roving tab stop and aria-activedescendant — the
-  // menu always has an active option so the keyboard has somewhere to start.
-  // `showHighlight` is the visible half of it, withheld while the only reason an
-  // option is active is that the menu just opened under the mouse.
-  const isActive = isRoving && activeOptionKey === key;
-  const showHighlight = isActive && !suppressInitialHighlight;
-  // Focus ring. Only the combobox modes need a CLASS for it: there, DOM focus
-  // stays on the trigger input and this ring is the only cursor the user has, so
-  // it is drawn from `activeOptionKey` — minus any highlight the pointer created,
-  // since a focus indicator must not follow the mouse.
-  //
-  // Roving menus move real DOM focus, so they are left to `:focus-visible` in CSS,
-  // which the browser only matches for keyboard-driven focus. That is why merely
-  // opening a roving menu with the mouse no longer paints a ring.
-  const isVirtualFocusMode = allowSearch || externalKeyboardNav;
-  const showActiveRing = showHighlight && isVirtualFocusMode && pointerActiveKey !== key;
-  // The option is a real tab stop only under true roving focus. Under search or
-  // external combobox nav, focus stays on the input — every option is -1 and the
-  // active one is surfaced through the input's aria-activedescendant instead.
-  const optionTabIndex = externalKeyboardNav ? -1 : isRoving ? isActive && !allowSearch ? 0 : -1 : undefined;
-  const optionId = menuId ? (0, _menuOptionId.menuOptionId)(menuId, key) : undefined;
   React.useEffect(() => {
     setButtonSize(optionSize || size);
   }, [optionSize, size]);
+  React.useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        // Tab pressed without shift key, calling tab out callback
+        onTabOut?.();
+      }
+    };
+    lastMenuItemRef.current?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      lastMenuItemRef.current?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isLastItem]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
     className: (0, _classify.classify)(_MenuModule.default.option, {
       [_MenuModule.default.selected]: isSelected() || key === selectedOption?.key,
-      // Background highlight for the single active option, from either input
-      // source, so pointer and keyboard never show two cursors.
-      [_MenuModule.default.active]: showHighlight,
-      // Focus ring, keyboard-driven highlights only.
-      [_MenuModule.default.activeRing]: showActiveRing,
       [_MenuModule.default.optionSmall]: buttonSize === 'small',
       [_MenuModule.default.optionMedium]: buttonSize === 'medium',
       [_MenuModule.default.disabled]: menuDisabled || disabled,
@@ -115,57 +87,36 @@ const MenuOptionButton = props => {
       [_MenuModule.default.withIconRight]: !!iconRight
     }, classNames?.option, optionClassNames?.wrapper),
     style: style,
-    disabled: isOptionDisabled,
-    role: "option",
-    "aria-selected": isOptionSelected,
-    "aria-disabled": isOptionDisabled || undefined,
-    "aria-setsize": setSize,
-    "aria-posinset": posInSet,
-    tabIndex: optionTabIndex,
-    id: optionId,
-    "data-menu-option-key": key,
+    disabled: menuDisabled || disabled,
     onClick: e => onSelect && onSelect(option, e),
-    onMouseMove: e => {
-      // Pointer drives the same single active highlight as the keyboard.
-      // Guarded so it only fires when crossing into a different option. The
-      // cursor coordinates are forwarded so Menu can ignore moves with no real
-      // pointer delta (the list scrolling under a stationary cursor during
-      // keyboard nav), which would otherwise steal focus from the keyboard.
-      if (isOptionDisabled || isActive) {
-        return;
-      }
-      onPointerActivate?.(key, e.currentTarget, e.clientX, e.clientY);
-    },
+    autoFocus: selectedOption?.key === key,
     testId: (0, _qa.generateTestId)({
       base: optionTestId || testId,
       slot: 'option-button',
       index: key
     }),
-    children: [optionVariant === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      "aria-hidden": "true",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-        tabIndex: -1,
-        disabled: menuDisabled || disabled,
-        checked: isSelected(),
-        indeterminate: indeterminate,
-        testId: (0, _qa.generateTestId)({
-          base: optionTestId || testId,
-          slot: 'checkbox',
-          index: key
-        })
+    ...(isLastItem ? {
+      ref: lastMenuItemRef
+    } : {}),
+    children: [optionVariant === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+      tabIndex: -1,
+      disabled: menuDisabled || disabled,
+      checked: isSelected(),
+      indeterminate: indeterminate,
+      testId: (0, _qa.generateTestId)({
+        base: optionTestId || testId,
+        slot: 'checkbox',
+        index: key
       })
-    }), optionVariant === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      "aria-hidden": "true",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
-        disabled: menuDisabled || disabled,
-        value: option.key,
-        selectedValue: selectedKeys?.[0],
-        tabIndex: -1,
-        testId: (0, _qa.generateTestId)({
-          base: optionTestId || testId,
-          slot: 'radio-button',
-          index: key
-        })
+    }), optionVariant === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
+      disabled: menuDisabled || disabled,
+      value: option.key,
+      selectedValue: selectedKeys?.[0],
+      tabIndex: -1,
+      testId: (0, _qa.generateTestId)({
+        base: optionTestId || testId,
+        slot: 'radio-button',
+        index: key
       })
     }), !!iconLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: iconLeft,

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

@@ -1,5 +1,3 @@
 export * from '../../components/Menu/Menu';
 export * from '../../components/Menu/MenuOptionButton';
-export * from '../../components/Menu/useMenuTrigger';
-export * from '../../components/Menu/useMenuKeyboardNavigation';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AAKrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC"}

package/lib/components/Menu/index.js

@@ -24,26 +24,4 @@ Object.keys(_MenuOptionButton).forEach(function (key) {
       return _MenuOptionButton[key];
     }
   });
-});
-var _useMenuTrigger = require("./useMenuTrigger");
-Object.keys(_useMenuTrigger).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useMenuTrigger[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useMenuTrigger[key];
-    }
-  });
-});
-var _useMenuKeyboardNavigation = require("./useMenuKeyboardNavigation");
-Object.keys(_useMenuKeyboardNavigation).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useMenuKeyboardNavigation[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useMenuKeyboardNavigation[key];
-    }
-  });
 });

package/lib/hooks/index.d.ts

@@ -4,7 +4,6 @@ export * from '../hooks/useDebounce';
 export * from '../hooks/useFileUpload';
 export * from '../hooks/useFilteredOptions';
 export * from '../hooks/useInfiniteScroll';
-export * from '../hooks/useInteractionModality';
 export * from '../hooks/useInputState';
 export * from '../hooks/useLockedBody';
 export * from '../hooks/useModal';

package/lib/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC"}

package/lib/hooks/index.js

@@ -69,17 +69,6 @@ Object.keys(_useInfiniteScroll).forEach(function (key) {
     }
   });
 });
-var _useInteractionModality = require("./useInteractionModality");
-Object.keys(_useInteractionModality).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useInteractionModality[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useInteractionModality[key];
-    }
-  });
-});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/click-away/click-away.d.ts

@@ -56,14 +56,11 @@ export declare class ClickAway<TTrigger extends HTMLElement = HTMLButtonElement,
     el: HTMLElement | null | undefined;
     boundaryRef: BoundaryRefType<TBoundary>;
     triggerRef: TriggerRefType<TTrigger>;
-    previouslyFocused: HTMLElement | null;
-    closedByOutsideClick: boolean;
     componentDidMount(): void;
     componentDidUpdate(_prevProps: Readonly<ClickAwayProps<TTrigger, TBoundary>>, prevState: Readonly<ClickAwayState>): void;
     componentWillUnmount(): void;
     render(): React.ReactNode;
     handleOpenClick: () => void;
-    restoreFocus: () => void;
     handleCloseClick: (evt: MouseEvent) => void;
     handleCloseOnEscapeKeypress: (evt?: KeyboardEvent) => void;
     forceClose: () => void;

package/lib/utils/click-away/click-away.d.ts.map

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

package/lib/utils/click-away/click-away.js

@@ -24,17 +24,6 @@ class ClickAway extends React.Component {
   el = null;
   boundaryRef = /*#__PURE__*/React.createRef();
   triggerRef = /*#__PURE__*/React.createRef();
-  // Element that had focus right before the popup opened. Restored on close so
-  // keyboard focus returns to the trigger (Escape, a selection, Tab past the
-  // popup's edge) — the job FloatingFocusManager's returnFocus does for the
-  // dropdown family until they move onto this.
-  previouslyFocused = null;
-  // Set by handleCloseClick for the close that follows. A click on the page is
-  // the user moving on: focus belongs wherever they clicked (or on <body>), and
-  // pulling it back onto the trigger would re-run the trigger's own focus
-  // handling — a Typeahead opens its menu on focus, so it would reopen the very
-  // popup the click dismissed.
-  closedByOutsideClick = false;
   componentDidMount() {
     if (this.el) {
       this.setState({
@@ -60,12 +49,6 @@ class ClickAway extends React.Component {
           capture: true
         });
         window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
-        if (this.closedByOutsideClick) {
-          this.previouslyFocused = null;
-        } else {
-          this.restoreFocus();
-        }
-        this.closedByOutsideClick = false;
       }
     }
   }
@@ -109,42 +92,11 @@ class ClickAway extends React.Component {
     if (this.el) {
       pageBottom = this.pageBottom();
     }
-
-    // Capture the focused element before opening (still the trigger at this
-    // point, before the popup mounts and moves focus into itself) so it can be
-    // restored on close.
-    if (!this.state.isOpen && typeof window.document !== 'undefined') {
-      this.previouslyFocused = window.document.activeElement;
-    }
     this.setState({
       isOpen: !this.state.isOpen,
       pageBottom
     }, this.handleOnChange);
   };
-
-  // Return focus to the trigger when the popup closes — but only if focus was
-  // lost to the document body (the focused popup element was unmounted). If the
-  // user moved focus elsewhere (e.g. clicked another control), leave it there.
-  restoreFocus = () => {
-    const previous = this.previouslyFocused;
-    this.previouslyFocused = null;
-    if (typeof window.document === 'undefined') {
-      return;
-    }
-    const active = window.document.activeElement;
-    const focusLost = !active || active === window.document.body;
-    if (!focusLost) {
-      return;
-    }
-    // `previouslyFocused` is <body> whenever the opening click did not land on a
-    // natively focusable element — notably Safari and Firefox on macOS, which do
-    // not focus a <button> on click. Restoring it would be a no-op that strands
-    // focus at the top of the document, so fall back to the trigger itself.
-    const target = previous && previous !== window.document.body ? previous : this.triggerRef.current;
-    if (target && window.document.contains(target)) {
-      target.focus();
-    }
-  };
   handleCloseClick = evt => {
     if (evt.target instanceof Node && this.props.containsNestedFloatingPortals && this.boundaryRef.current?.parentElement && (this.boundaryRef.current.parentElement === evt.target || this.boundaryRef.current.parentElement.contains(evt.target))) {
       return;
@@ -155,7 +107,6 @@ class ClickAway extends React.Component {
     if (evt.target instanceof Node && this.triggerRef && (this.triggerRef.current === evt.target || this.triggerRef.current?.contains(evt.target))) {
       return;
     }
-    this.closedByOutsideClick = true;
     this.setState({
       isOpen: false
     }, this.handleOnChange);

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "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.35-beta.0",
+  "version": "0.6.35",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"