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

package/.all-contributorsrc

@@ -154,6 +154,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "keshavsensehq",
+      "name": "keshavsensehq",
+      "avatar_url": "https://avatars.githubusercontent.com/u/209447021?v=4",
+      "profile": "https://github.com/keshavsensehq",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 5

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.47-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.46...v0.3.47-beta.0) (2025-06-20)
+
+
+### Features
+
+* **GDS-524:** render dropdown menus via portal for improved positioning ([#353](https://github.com/spaced-out/ui-design-system/issues/353)) ([3421218](https://github.com/spaced-out/ui-design-system/commit/342121840775dfa142307858f4d8ced40c311bfd))
+
+### [0.3.46](https://github.com/spaced-out/ui-design-system/compare/v0.3.45...v0.3.46) (2025-06-17)
+
+
+### Features
+
+* upgraded sb and copy fix ([e6bac57](https://github.com/spaced-out/ui-design-system/commit/e6bac5703faa0bafded622d5a80be51f36661c64))
+
+
+### Bug Fixes
+
+* temorarily pause generate dts step ([98cf826](https://github.com/spaced-out/ui-design-system/commit/98cf8267b4190c07ce7a19d604c38e8bcfd2896d))
+
 ### [0.3.45](https://github.com/spaced-out/ui-design-system/compare/v0.3.44...v0.3.45) (2025-06-16)
 
 ### [0.3.44](https://github.com/spaced-out/ui-design-system/compare/v0.3.43...v0.3.44) (2025-06-16)

package/README.md

@@ -293,6 +293,7 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
     </tr>
     <tr>
       <td align="center" valign="top" width="20%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/><br /><sub><b>Diwaker Singh</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/keshavsensehq"><img src="https://avatars.githubusercontent.com/u/209447021?v=4?s=100" width="100px;" alt="keshavsensehq"/><br /><sub><b>keshavsensehq</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=keshavsensehq" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/gulpfile.js

@@ -63,6 +63,9 @@ function generateDts(done) {
 }
 
 const coreBuild = gulp.parallel(buildCjs, copyFlow, copyOther);
-const fullBuild = gulp.series(coreBuild, generateDts);
 
-module.exports.build = fullBuild;
+// Note(Nishant): To unblock flow to ts migration
+// const fullBuild = gulp.series(coreBuild, generateDts);
+
+module.exports.build = coreBuild;
+// module.exports.build = fullBuild;

package/lib/components/Avatar/Avatar.js

@@ -6,33 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Text = require("../../components/Text");
-var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
+var _color = _interopRequireWildcard(require("../../styles/variables/_color"));
+var COLORS = _color;
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _StatusIndicator = require("../StatusIndicator");
 var _AvatarModule = _interopRequireDefault(require("./Avatar.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 AVATAR_SIZE = 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 AVATAR_SIZE = exports.AVATAR_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',
   large: 'large',
   extraLarge: 'extraLarge'
 });
-exports.AVATAR_SIZE = AVATAR_SIZE;
-const avatarSizeOptions = [...Object.keys(AVATAR_SIZE)];
-exports.avatarSizeOptions = avatarSizeOptions;
-const AVATAR_COLOR = Object.freeze({
-  red: COLORS.colorDangerLightest,
-  orange: COLORS.colorWarningLightest,
-  green: COLORS.colorSuccessLightest,
-  blue: COLORS.colorInformationLightest,
-  gray: COLORS.colorGrayLightest,
-  indigo: COLORS.colorNeutralLightest
+const avatarSizeOptions = exports.avatarSizeOptions = [...Object.keys(AVATAR_SIZE)];
+const AVATAR_COLOR = exports.AVATAR_COLOR = Object.freeze({
+  red: _color.colorDangerLightest,
+  orange: _color.colorWarningLightest,
+  green: _color.colorSuccessLightest,
+  blue: _color.colorInformationLightest,
+  gray: _color.colorGrayLightest,
+  indigo: _color.colorNeutralLightest
 });
-exports.AVATAR_COLOR = AVATAR_COLOR;
 const getAvatarText = function () {
   let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [firstWord, secondWord] = text.split(' ');
@@ -113,7 +109,7 @@ const AvatarConditionalContent = _ref2 => {
     className: classNames?.text
   }) : null);
 };
-const Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     classNames,
     size = AVATAR_SIZE.medium,
@@ -162,7 +158,6 @@ const Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     classNames: classNames
   }));
 });
-exports.Avatar = Avatar;
 const BaseAvatar = _ref4 => {
   let {
     classNames,

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -11,12 +11,10 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Avatar = require("../Avatar");
 var _Tooltip = require("../Tooltip");
 var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.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 COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
-const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     size = 'medium',
@@ -127,5 +125,4 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }),
     ref: ref
   }, childrenWithProps);
-});
-exports.AvatarGroup = AvatarGroup;
+});

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -11,7 +11,7 @@ import {
 import classify from '../../utils/classify';
 import type {AvatarSize} from '../Avatar';
 import {BaseAvatar} from '../Avatar';
-import type {PlacementType} from '../Tooltip';
+import type {ElevationType, PlacementType} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
 import css from './AvatarGroup.module.css';
@@ -26,7 +26,7 @@ export type AvatarGroupProps = {
   maxTooltipLines?: number,
   placement?: PlacementType,
   maxAvatars?: number,
-  tooltipElevation?: string,
+  tooltipElevation?: ElevationType,
 };
 
 export const AvatarGroup: React$AbstractComponent<

package/lib/components/Badge/Badge.js

@@ -10,11 +10,9 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _BadgeModule = _interopRequireDefault(require("./Badge.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 BADGE_COLOR = 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 BADGE_COLOR = exports.BADGE_COLOR = Object.freeze({
   gray: _color.colorGrayLightest,
   red: _color.colorDangerLightest,
   redDark: _color.colorDanger,
@@ -27,8 +25,7 @@ const BADGE_COLOR = Object.freeze({
   indigo: _color.colorNeutralLightest,
   indigoDark: _color.colorNeutral
 });
-exports.BADGE_COLOR = BADGE_COLOR;
-const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Badge = exports.Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     text,
@@ -51,8 +48,7 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.text)
   }, text));
 });
-exports.Badge = Badge;
-const IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const IconBadge = exports.IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     fill = 'gray',
@@ -81,5 +77,4 @@ const IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [_BadgeModule.default.light]: !isDark
     }, classNames?.icon)
   }));
-});
-exports.IconBadge = IconBadge;
+});

package/lib/components/BadgedIcon/BadgedIcon.js

@@ -10,10 +10,8 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _BadgedIconModule = _interopRequireDefault(require("./BadgedIcon.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 BadgedIcon = _ref => {
   let {
     name,

package/lib/components/Banner/Banner.js

@@ -9,11 +9,10 @@ var _common = require("../../types/common");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _InContextAlert = require("../InContextAlert");
 var _BannerModule = _interopRequireDefault(require("./Banner.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 Banner = /*#__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 Banner = exports.Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic,
@@ -40,5 +39,4 @@ const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       actionContainer: (0, _classify.default)(_BannerModule.default.alertContainer, classNames?.actionContainer)
     }
   })));
-});
-exports.Banner = Banner;
+});

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.js

@@ -8,11 +8,10 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _Link = require("../../Link");
 var _BreadcrumbLinkModule = _interopRequireDefault(require("./BreadcrumbLink.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 BreadcrumbLink = /*#__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 BreadcrumbLink = exports.BreadcrumbLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     id,
     className,
@@ -39,5 +38,4 @@ const BreadcrumbLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }));
 });
-exports.BreadcrumbLink = BreadcrumbLink;
 BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -8,17 +8,15 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _BreadcrumbsModule = _interopRequireDefault(require("./Breadcrumbs.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 BreadcrumbSeparator = () => /*#__PURE__*/React.createElement(_Icon.Icon, {
   className: _BreadcrumbsModule.default.separator,
   name: "chevron-right",
   size: "small",
   color: "secondary"
 });
-const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -39,5 +37,4 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }) : child, idx < total - 1 && /*#__PURE__*/React.createElement(BreadcrumbSeparator, {
     "aria-hidden": true
   }))));
-});
-exports.Breadcrumbs = Breadcrumbs;
+});

package/lib/components/Button/Button.js

@@ -10,10 +10,9 @@ var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Truncate = require("../Truncate");
 var _ButtonModule = _interopRequireDefault(require("./Button.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); }
 /**
  * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
  * This only supports pre-defined gradient that moves from left to right.
@@ -23,7 +22,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * as it would add an additional overhead on the component to figure out exact color values from string tokens
  * and since this is rarely used type anyway, it should be avoided.
  */
-const BUTTON_TYPES = Object.freeze({
+const BUTTON_TYPES = exports.BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
@@ -31,18 +30,15 @@ const BUTTON_TYPES = Object.freeze({
   danger: 'danger',
   gradient: 'gradient'
 });
-exports.BUTTON_TYPES = BUTTON_TYPES;
-const BUTTON_ACTION_TYPE = Object.freeze({
+const BUTTON_ACTION_TYPE = exports.BUTTON_ACTION_TYPE = Object.freeze({
   button: 'button',
   submit: 'submit',
   reset: 'reset'
 });
-exports.BUTTON_ACTION_TYPE = BUTTON_ACTION_TYPE;
-const BUTTON_SIZE = Object.freeze({
+const BUTTON_SIZE = exports.BUTTON_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium'
 });
-exports.BUTTON_SIZE = BUTTON_SIZE;
 const ButtonTypeToIconColorMap = {
   primary: 'inversePrimary',
   secondary: 'clickable',
@@ -59,7 +55,7 @@ const ButtonTypeToLoaderColorMap = {
   danger: 'colorTextInversePrimary',
   gradient: 'colorTextInversePrimary'
 };
-const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const UnstyledButton = exports.UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     disabled,
     onClick,
@@ -89,8 +85,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }));
 });
-exports.UnstyledButton = UnstyledButton;
-const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const Button = exports.Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     children,
@@ -186,5 +181,4 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }, classNames?.icon)
   }))));
 });
-exports.Button = Button;
 Button.name = Button.displayName = 'Button';

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.STRATEGY_TYPE = exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = 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");
@@ -16,11 +16,10 @@ var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Menu = require("../Menu");
 var _Tooltip = require("../Tooltip");
 var _ButtonDropdownModule = _interopRequireDefault(require("./ButtonDropdown.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 ANCHOR_POSITION_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); }
+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 ANCHOR_POSITION_TYPE = exports.ANCHOR_POSITION_TYPE = Object.freeze({
   top: 'top',
   topStart: 'top-start',
   topEnd: 'top-end',
@@ -28,13 +27,11 @@ const ANCHOR_POSITION_TYPE = Object.freeze({
   bottomStart: 'bottom-start',
   bottomEnd: 'bottom-end'
 });
-exports.ANCHOR_POSITION_TYPE = ANCHOR_POSITION_TYPE;
-const STRATEGY_TYPE = Object.freeze({
+const STRATEGY_TYPE = exports.STRATEGY_TYPE = Object.freeze({
   absolute: 'absolute',
   fixed: 'fixed'
 });
-exports.STRATEGY_TYPE = STRATEGY_TYPE;
-const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
+const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     anchorPosition = 'bottom-start',
     positionStrategy = STRATEGY_TYPE.absolute,
@@ -51,17 +48,17 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     isFluid,
     tooltip,
     onClick,
+    elevation = 'modal',
     clickAwayRef,
     ...restButtonProps
   } = _ref;
-  const menuBtnRef = React.useRef(null);
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: positionStrategy,
@@ -69,6 +66,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, 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 => {
     if (isOpen) {
       onMenuOpen?.();
@@ -94,7 +92,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, {
         [_ButtonDropdownModule.default.isFluid]: isFluid === true
       }, classNames?.dropdownContainer),
-      ref: menuBtnRef
+      ref: forwardRef
     }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
       condition: Boolean(tooltip),
       wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
@@ -116,16 +114,27 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         wrapper: classNames?.buttonWrapper,
         icon: classNames?.buttonIcon
       }
-    }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }), children)), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _ButtonDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        ...(isFluid && {
-          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) => {
@@ -138,7 +147,6 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))));
+    }))))));
   });
-});
-exports.ButtonDropdown = ButtonDropdown;
+});