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

package/lib/components/Typeahead/Typeahead.js.flow

@@ -7,12 +7,16 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   useFloating,
 } from '@floating-ui/react';
 
-import {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -21,6 +25,8 @@ import type {InputProps} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {SearchInput} from '../SearchInput';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
 
 import css from './Typeahead.module.css';
 
@@ -40,6 +46,7 @@ type BaseTypeaheadProps = {
   isLoading?: boolean,
   menuOpenOffset?: number,
   clickAwayRef?: ClickAwayRefType,
+  elevation?: ElevationType,
   ...
 };
 
@@ -69,12 +76,14 @@ const BaseTypeahead: React$AbstractComponent<
       menuOpenOffset = 1,
       onFocus,
       clickAwayRef,
+      elevation = 'modal',
       ...inputProps
     }: BaseTypeaheadProps,
     ref,
   ): React.Node => {
     const menuOptions = menu?.options;
-    const {x, y, refs, strategy} = useFloating({
+
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
@@ -82,6 +91,8 @@ const BaseTypeahead: React$AbstractComponent<
       middleware: [flip(), offset(parseInt(spaceXXSmall))],
     });
 
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     };
@@ -92,7 +103,6 @@ const BaseTypeahead: React$AbstractComponent<
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
-            ref={boundaryRef}
           >
             <SearchInput
               {...inputProps}
@@ -129,33 +139,51 @@ const BaseTypeahead: React$AbstractComponent<
               menu &&
               menuOptions &&
               !!menuOptions.length && (
-              <div
-                ref={refs.setFloating}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                <Menu
-                  {...menu}
-                  options={menuOptions}
-                  onSelect={(option, e) => {
-                    onSelect && onSelect(option, e);
-                    if (
-                    // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                      !option.keepMenuOpenOnOptionSelect &&
-                        (!menu.optionsVariant ||
-                          menu.optionsVariant === 'normal')
-                    ) {
-                      clickAway();
-                    }
-                  }}
-                  size={menu.size || size}
-                  onTabOut={clickAway}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  returnFocus={false}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    className={css.menuWrapper}
+                    style={{
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+                      ...(menu.isFluid !== false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    <Menu
+                      {...menu}
+                      options={menuOptions}
+                      onSelect={(option, e) => {
+                        onSelect && onSelect(option, e);
+                        if (
+                        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                          !option.keepMenuOpenOnOptionSelect &&
+                            (!menu.optionsVariant ||
+                              menu.optionsVariant === 'normal')
+                        ) {
+                          clickAway();
+                        }
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

package/lib/components/Typeahead/Typeahead.module.css

@@ -9,3 +9,8 @@
   width: sizeFluid;
   height: fit-content;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/hooks/index.js

@@ -124,6 +124,17 @@ Object.keys(_usePagination).forEach(function (key) {
     }
   });
 });
+var _useReferenceElementWidth = require("./useReferenceElementWidth");
+Object.keys(_useReferenceElementWidth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useReferenceElementWidth[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useReferenceElementWidth[key];
+    }
+  });
+});
 var _useResizeObserver = require("./useResizeObserver");
 Object.keys(_useResizeObserver).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -11,6 +11,7 @@ export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useReferenceElementWidth';
 export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';

package/lib/hooks/useReferenceElementWidth/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useReferenceElementWidth = require("./useReferenceElementWidth");
+Object.keys(_useReferenceElementWidth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useReferenceElementWidth[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useReferenceElementWidth[key];
+    }
+  });
+});

package/lib/hooks/useReferenceElementWidth/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useReferenceElementWidth';

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferenceElementWidth = useReferenceElementWidth;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+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 MIN_FLUID_WIDTH = 160;
+function useReferenceElementWidth(ref) {
+  let minWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MIN_FLUID_WIDTH;
+  const [width, setWidth] = React.useState(_size.sizeFluid);
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+  return width;
+}

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js.flow

@@ -0,0 +1,23 @@
+// @flow strict
+import * as React from 'react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+
+
+const MIN_FLUID_WIDTH = 160;
+
+export function useReferenceElementWidth(
+  ref: ?HTMLElement,
+  minWidth: number = MIN_FLUID_WIDTH,
+): string {
+  const [width, setWidth] = React.useState(sizeFluid);
+
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+
+  return width;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.46",
+  "version": "0.3.47-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {