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

package/lib/components/FileUpload/FileUpload.js

@@ -11,10 +11,17 @@ var _Button = require("../Button");
 var _Truncate = require("../Truncate");
 var _FileBlock = require("./FileBlock");
 var _FileUploadModule = _interopRequireDefault(require("./FileUpload.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import] -- this should be fixed soon
+// This is a file error object that is passed to onRejectedFilesDrop callback in useFileUpload hook
+
+// This is a file rejection object that is passed to handleDropRejected function in useFileUpload hook
+
+// This is a ref object that is passed to FileUpload component for managing state of a single file
+
+// These props are shared between FileUpload component and useFileUpload hook
+
 const FileUploadBase = (props, ref) => {
   const {
     classNames,
@@ -103,5 +110,4 @@ const FileUploadBase = (props, ref) => {
     }
   })))));
 };
-const FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);
-exports.FileUpload = FileUpload;
+const FileUpload = exports.FileUpload = /*#__PURE__*/React.forwardRef(FileUploadBase);

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -13,11 +13,10 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
 var _FilterButtonOverlayModule = _interopRequireDefault(require("./FilterButtonOverlay.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const FilterButtonOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     anchorPosition = _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
@@ -86,5 +85,4 @@ const FilterButtonOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }, classNames?.overlayContainer)
     }, children)));
   });
-});
-exports.FilterButtonOverlay = FilterButtonOverlay;
+});

package/lib/components/FocusManager/FocusManager.js

@@ -8,10 +8,9 @@ var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _FocusManagerModule = _interopRequireDefault(require("./FocusManager.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const FocusManager = props => {
   const {
     refs,

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -8,12 +8,11 @@ var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _FocusManagerWithArrowKeyNavigationModule = _interopRequireDefault(require("./FocusManagerWithArrowKeyNavigation.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SKIP_ELEMENT_DISPLAY_NAME = 'SkipElementFromNavigation';
-const SkipElementFromNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const SkipElementFromNavigation = exports.SkipElementFromNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -25,7 +24,6 @@ const SkipElementFromNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref
   }), children);
 });
-exports.SkipElementFromNavigation = SkipElementFromNavigation;
 SkipElementFromNavigation.displayName = SKIP_ELEMENT_DISPLAY_NAME;
 const FocusManagerWithArrowKeyNavigation = props => {
   const {

package/lib/components/FormTitleWrapper/FormTitleWrapper.js

@@ -8,11 +8,9 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _FormTitleWrapperModule = _interopRequireDefault(require("./FormTitleWrapper.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const FormTitleWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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 FormTitleWrapper = exports.FormTitleWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     iconType,
@@ -38,5 +36,4 @@ const FormTitleWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, title)), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_FormTitleWrapperModule.default.rightSection, classNames?.rightSlot)
   }, rightSlot));
-});
-exports.FormTitleWrapper = FormTitleWrapper;
+});

package/lib/components/Grid/Grid.js

@@ -7,10 +7,8 @@ exports.Row = exports.Col = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _GridModule = _interopRequireDefault(require("./Grid.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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 GRID_SYSTEM_MAP = {
   small: 24,
   medium: 12,
@@ -30,7 +28,7 @@ const Row = _ref => {
   let columnSpanCount = 0;
   let lastChildColCount = 0;
   const childrenWithProps = React.Children.map(children, child => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const {
         span = 1,
         offset = 0

package/lib/components/Icon/ClickableIcon.js

@@ -10,11 +10,10 @@ var _Button = require("../Button");
 var _Text = require("../Text");
 var _ = require("./");
 var _ClickableIconModule = _interopRequireDefault(require("./ClickableIcon.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ClickableIcon = exports.ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     ariaLabel,
@@ -48,8 +47,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: classNames?.icon || className
   })));
 });
-exports.ClickableIcon = ClickableIcon;
-const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const CloseIcon = exports.CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     size = 'medium',
     type = 'regular',
@@ -64,5 +62,4 @@ const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, props, {
     ref: ref
   }));
-});
-exports.CloseIcon = CloseIcon;
+});

package/lib/components/Icon/Icon.docs.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.ICON_DOCS = void 0;
 var _typography = require("../../types/typography");
 var _Icon = require("./Icon");
-
 const colorOptions = [...Object.values(_typography.TEXT_COLORS)];
 const iconSize = [...Object.values(_Icon.ICON_SIZE)];
-const ICON_DOCS = {
+const ICON_DOCS = exports.ICON_DOCS = {
   argTypes: {
     type: {
       description: 'Type represents 5 unique icon styles :- Solid, Regular, Light, Thin, Duotone',
@@ -152,5 +151,4 @@ The name prop has be to consistent with one used in fontawesome.
       componentPath: '/src/components/Icon/Icon.js'
     }
   }
-};
-exports.ICON_DOCS = ICON_DOCS;
+};

package/lib/components/Icon/Icon.js

@@ -8,24 +8,20 @@ var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const ICON_TYPE = Object.freeze({
+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 ICON_TYPE = exports.ICON_TYPE = Object.freeze({
   regular: 'regular',
   solid: 'solid',
   duotone: 'duotone',
   brands: 'brands'
 });
-exports.ICON_TYPE = ICON_TYPE;
-const ICON_SIZE = Object.freeze({
+const ICON_SIZE = exports.ICON_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',
   large: 'large'
 });
-exports.ICON_SIZE = ICON_SIZE;
-const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
+const Icon = exports.Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     type = 'regular',
     name = '',
@@ -46,5 +42,4 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     }),
     style: style
   })));
-});
-exports.Icon = Icon;
+});

package/lib/components/Icon/SemanticIcon.js

@@ -9,10 +9,9 @@ var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("./Icon");
 var _SemanticIconModule = _interopRequireDefault(require("./SemanticIcon.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SemanticIcon = _ref => {
   let {
     semantic = 'neutral',

package/lib/components/InContextAlert/InContextAlert.js

@@ -13,10 +13,8 @@ var _Link = require("../Link");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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 AlertIcon = _ref => {
   let {
     semantic,
@@ -75,7 +73,7 @@ const AlertIcon = _ref => {
       });
   }
 };
-const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
+const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     semantic = _common.ALERT_SEMANTIC.neutral,
@@ -126,5 +124,4 @@ const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick: closeClickHandler,
     className: _InContextAlertModule.default.closeIcon
   }))));
-});
-exports.InContextAlert = InContextAlert;
+});

package/lib/components/InfinitePagination/InfinitePagination.js

@@ -11,14 +11,11 @@ var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _CircularLoader = require("../CircularLoader");
 var _InfinitePaginationModule = _interopRequireDefault(require("./InfinitePagination.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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); }
 // $FlowFixMe[nonstrict-import]
-
 const DEFAULT_THRESHOLD = 200;
-const InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+const InfinitePagination = exports.InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     items,
     width = _space.spaceFluid,
@@ -80,5 +77,4 @@ const InfinitePagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     onScroll: handleScroll,
     itemCount: totalItemsCount
   }, Row));
-});
-exports.InfinitePagination = InfinitePagination;
+});

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -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,13 +14,13 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     anchorPosition = 'bottom-start',
     size = 'medium',
@@ -31,15 +32,15 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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',
@@ -47,8 +48,9 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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,
@@ -64,7 +66,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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]),
@@ -82,13 +84,27 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       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) => {
@@ -101,7 +117,6 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       size: menu.size || 'medium',
       onTabOut: clickAway
-    }))));
+    }))))));
   });
-});
-exports.InlineDropdown = InlineDropdown;
+});

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

@@ -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>
         )}