npm - @spaced-out/ui-design-system - Versions diffs - 0.3.47-beta.0 → 0.3.48 - Mend

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

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.

Files changed (55) hide show

package/lib/components/Typeahead/Typeahead.js CHANGED Viewed

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.Typeahead = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _hooks = require("../../hooks");
+var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
-var _Tooltip = require("../Tooltip");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.css"));
 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); }
@@ -34,7 +33,6 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     menuOpenOffset = 1,
     onFocus,
     clickAwayRef,
-    elevation = 'modal',
     ...inputProps
   } = _ref;
   const menuOptions = menu?.options;
@@ -42,8 +40,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -51,7 +48,6 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -68,7 +64,8 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
-      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper)
+      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
+      ref: boundaryRef
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -99,27 +96,13 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClear: _e => {
         onClear?.();
       }
-    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      returnFocus: false,
-      initialFocus: refs.reference
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
-      className: _TypeaheadModule.default.menuWrapper,
+    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement("div", {
+      ref: refs.setFloating,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.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': (0, _Tooltip.getElevationValue)(elevation)
+        width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: menuOptions,
@@ -133,7 +116,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))))));
+    }))));
   });
 });
 const StatefulTypeahead = /*#__PURE__*/React.forwardRef((_ref3, ref) => {

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

@@ -7,16 +7,12 @@ 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 {useReferenceElementWidth} from '../../hooks';
+import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -25,8 +21,6 @@ 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';
@@ -46,7 +40,6 @@ type BaseTypeaheadProps = {
   isLoading?: boolean,
   menuOpenOffset?: number,
   clickAwayRef?: ClickAwayRefType,
-  elevation?: ElevationType,
   ...
 };
@@ -76,14 +69,12 @@ const BaseTypeahead: React$AbstractComponent<
       menuOpenOffset = 1,
       onFocus,
       clickAwayRef,
-      elevation = 'modal',
       ...inputProps
     }: BaseTypeaheadProps,
     ref,
   ): React.Node => {
     const menuOptions = menu?.options;
-    const {x, y, refs, strategy, context} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
@@ -91,8 +82,6 @@ const BaseTypeahead: React$AbstractComponent<
       middleware: [flip(), offset(parseInt(spaceXXSmall))],
     });
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     };
@@ -103,6 +92,7 @@ const BaseTypeahead: React$AbstractComponent<
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
+            ref={boundaryRef}
           >
             <SearchInput
               {...inputProps}
@@ -139,51 +129,33 @@ const BaseTypeahead: React$AbstractComponent<
               menu &&
               menuOptions &&
               !!menuOptions.length && (
-              <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
+                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>
             )}
           </div>
         )}

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

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

package/lib/hooks/index.js CHANGED Viewed

@@ -124,17 +124,6 @@ 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 CHANGED Viewed

@@ -11,7 +11,6 @@ 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/package.json CHANGED Viewed

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

package/lib/hooks/useReferenceElementWidth/index.js DELETED Viewed

@@ -1,16 +0,0 @@
-"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 DELETED Viewed

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

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js DELETED Viewed

@@ -1,21 +0,0 @@
-"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 DELETED Viewed

@@ -1,23 +0,0 @@
-// @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;
-}