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

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

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 (48) hide show

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

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Dropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _size = require("../../styles/variables/_size");
+var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Input = require("../Input");
 var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.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); }
@@ -29,15 +30,16 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     scrollMenuToBottom = false,
     dropdownInputText = '',
     clickAwayRef,
+    elevation = 'modal',
     ...inputProps
   } = _ref;
-  const dropdownRef = React.useRef();
   const menuRef = React.useRef();
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -45,6 +47,7 @@ const Dropdown = exports.Dropdown = /*#__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();
     if (scrollMenuToBottom && menuRef.current && isOpen) {
@@ -63,9 +66,8 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
-      ref: (0, _mergeRefs.mergeRefs)([dropdownRef, boundaryRef])
+      "data-testid": "Dropdown"
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       onKeyDown: e => {
         if (e.keyCode === 32) {
@@ -88,13 +90,26 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         onOpen();
       },
       ref: ref
-    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      className: _DropdownModule.default.menuWrapper,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid
+        /* 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)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -109,6 +124,6 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       size: menu.size || size,
       onTabOut: clickAway,
       ref: menuRef
-    }))));
+    }))))));
   });
 });

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

@@ -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,7 @@ import type {InputProps} from '../Input';
 import {Input} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 import css from './Dropdown.module.css';
@@ -40,6 +45,7 @@ export type DropdownProps = {
   scrollMenuToBottom?: boolean,
   dropdownInputText?: string,
   menu?: MenuProps,
+  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -60,19 +66,21 @@ export const Dropdown: React$AbstractComponent<
       scrollMenuToBottom = false,
       dropdownInputText = '',
       clickAwayRef,
+      elevation = 'modal',
       ...inputProps
     }: DropdownProps,
     ref,
   ): React.Node => {
-    const dropdownRef = React.useRef();
     const menuRef = React.useRef();
-    const {x, y, refs, strategy} = useFloating({
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
       whileElementsMounted: autoUpdate,
       middleware: [flip(), offset(parseInt(spaceXXSmall))],
     });
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -85,9 +93,8 @@ export const Dropdown: React$AbstractComponent<
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
-            data-testid="Dropdown"
             className={classify(css.dropdownContainer, classNames?.wrapper)}
-            ref={mergeRefs([dropdownRef, boundaryRef])}
+            data-testid="Dropdown"
           >
             <Input
               {...inputProps}
@@ -115,33 +122,51 @@ export const Dropdown: React$AbstractComponent<
             />
             {isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                <Menu
-                  {...menu}
-                  onSelect={(option, e) => {
-                    onChange && onChange(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();
-                      refs.reference.current.querySelector('input').focus();
-                    }
-                  }}
-                  size={menu.size || size}
-                  onTabOut={clickAway}
-                  ref={menuRef}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  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}
+                      onSelect={(option, e) => {
+                        onChange && onChange(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();
+                          refs.reference.current.querySelector('input').focus();
+                        }
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                      ref={menuRef}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

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

@@ -12,3 +12,8 @@
 .inputBox {
   cursor: pointer;
 }
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/Dropdown/SimpleDropdown.js CHANGED Viewed

@@ -22,6 +22,7 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -61,6 +62,7 @@ const SimpleDropdownBase = (props, ref) => {
   return /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, inputProps, {
     classNames: classNames,
     size: size,
+    elevation: elevation,
     placeholder: placeholder,
     onChange: handleOptionChange,
     onMenuOpen: onMenuOpen,

package/lib/components/Dropdown/SimpleDropdown.js.flow CHANGED Viewed

@@ -10,6 +10,7 @@ import {
 } from '../../utils/menu';
 import type {InputProps} from '../Input';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
 import {Dropdown} from './Dropdown';
@@ -27,6 +28,7 @@ export type SimpleDropdownProps = {
   // Input props
   ...InputProps,
+  elevation?: ElevationType,
   classNames?: ClassNames,
   clickAwayRef?: ClickAwayRefType,
@@ -67,6 +69,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -125,6 +128,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
       {...inputProps}
       classNames={classNames}
       size={size}
+      elevation={elevation}
       placeholder={placeholder}
       onChange={handleOptionChange}
       onMenuOpen={onMenuOpen}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
+var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
@@ -13,6 +14,7 @@ var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
 var _Truncate = require("../Truncate");
 var _InlineDropdownModule = _interopRequireDefault(require("./InlineDropdown.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,15 +32,15 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     onMenuClose,
     children,
     clickAwayRef,
+    elevation = 'modal',
     ...restButtonProps
   } = _ref;
-  const menuBtnRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => menuBtnRef.current);
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -46,8 +48,9 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (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();
+    isOpen ? onMenuOpen?.() : onMenuClose?.();
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle,
@@ -63,7 +66,7 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "InlineDropdown",
       className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
-      ref: menuBtnRef
+      ref: ref
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -81,13 +84,27 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)({
         [_InlineDropdownModule.default.disabled]: disabled
       })
-    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: triggerRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _InlineDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
-        left: x ?? _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)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -100,6 +117,6 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       },
       size: menu.size || 'medium',
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 });

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

@@ -7,6 +7,10 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -14,6 +18,7 @@ import {
   useFloating,
 } from '@floating-ui/react';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -24,6 +29,7 @@ import type {AnchorType} from '../ButtonDropdown';
 import {Icon} from '../Icon';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 import {Truncate} from '../Truncate';
 import css from './InlineDropdown.module.css';
@@ -43,6 +49,7 @@ export type InlineDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
+  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -63,13 +70,12 @@ export const InlineDropdown: React$AbstractComponent<
       onMenuClose,
       children,
       clickAwayRef,
+      elevation = 'modal',
       ...restButtonProps
     }: InlineDropdownProps,
     ref,
   ): React.Node => {
-    const menuBtnRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => menuBtnRef.current);
-    const {x, y, refs, strategy} = useFloating({
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: anchorPosition,
@@ -77,8 +83,10 @@ export const InlineDropdown: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
     const onMenuToggle = (isOpen: boolean) => {
-      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      isOpen ? onMenuOpen?.() : onMenuClose?.();
     };
     return (
@@ -90,7 +98,7 @@ export const InlineDropdown: React$AbstractComponent<
               css.inlineDropdownContainer,
               classNames?.dropdownContainer,
             )}
-            ref={menuBtnRef}
+            ref={ref}
           >
             <UnstyledButton
               {...restButtonProps}
@@ -120,31 +128,50 @@ export const InlineDropdown: React$AbstractComponent<
               />
             </UnstyledButton>
             {isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                }}
-              >
-                <Menu
-                  {...menu}
-                  onSelect={(option, e) => {
-                    onOptionSelect && onOptionSelect(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 || 'medium'}
-                  onTabOut={clickAway}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={triggerRef}
+                >
+                  <div
+                    className={css.menuWrapper}
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    style={{
+                      display: 'flex',
+                      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}
+                      onSelect={(option, e) => {
+                        onOptionSelect && onOptionSelect(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 || 'medium'}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

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

@@ -42,3 +42,8 @@
   color: colorTextDisabled;
   cursor: not-allowed;
 }
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/InlineDropdown/SimpleInlineDropdown.js CHANGED Viewed

@@ -32,6 +32,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    elevation = 'modal',
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -67,6 +68,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
     clickAwayRef: clickAwayRef,
+    elevation: elevation,
     menu: {
       isFluid,
       options,

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow CHANGED Viewed

@@ -11,6 +11,7 @@ import {
 import type {ButtonProps} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
 import {InlineDropdown} from './InlineDropdown';
@@ -28,6 +29,7 @@ export type SimpleInlineDropdownProps = {
   // Input props
   ...ButtonProps,
+  elevation?: ElevationType,
   classNames?: ClassNames,
   anchorPosition?: AnchorType,
@@ -79,6 +81,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    elevation = 'modal',
     ...buttonProps
   } = props;
@@ -133,6 +136,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
       clickAwayRef={clickAwayRef}
+      elevation={elevation}
       menu={{
         isFluid,
         options,

package/lib/components/Table/StaticTable.js CHANGED Viewed

@@ -74,7 +74,7 @@ function StaticTable(props) {
   }, [width]);
   /**
-   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
   const handleHeaderCheckboxClick = selectedKeys ? ({

package/lib/components/Table/StaticTable.js.flow CHANGED Viewed

@@ -89,7 +89,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
   }, [width]);
   /**
-   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
   const handleHeaderCheckboxClick = selectedKeys

package/lib/components/Table/Table.docs.js CHANGED Viewed

@@ -104,7 +104,7 @@ const TABLE_DOCS = exports.TABLE_DOCS = {
       }
     },
     selectedKeys: {
-      description: 'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array incase no row is selected.',
+      description: 'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.',
       control: {
         type: 'object'
       },

package/lib/components/Table/Table.docs.js.flow CHANGED Viewed

@@ -89,7 +89,7 @@ export const TABLE_DOCS = {
     },
     selectedKeys: {
       description:
-        'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array incase no row is selected.',
+        'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.',
       control: {
         type: 'object',
       },