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

package/lib/components/Textarea/Textarea.js

@@ -8,10 +8,9 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Text = require("../Text");
 var _TextareaModule = _interopRequireDefault(require("./Textarea.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 Textarea_ = (props, ref) => {
   const {
     value,
@@ -81,5 +80,4 @@ const Textarea_ = (props, ref) => {
     color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary'
   }, error && errorText ? errorText : helperText ?? '')));
 };
-const Textarea = /*#__PURE__*/React.forwardRef(Textarea_);
-exports.Textarea = Textarea;
+const Textarea = exports.Textarea = /*#__PURE__*/React.forwardRef(Textarea_);

package/lib/components/Timeline/Timeline.js

@@ -7,15 +7,12 @@ exports.Timeline = exports.ORIENTATION = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _TimelineModule = _interopRequireDefault(require("./Timeline.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 ORIENTATION = 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 ORIENTATION = exports.ORIENTATION = Object.freeze({
   left: 'left',
   right: 'right'
 });
-exports.ORIENTATION = ORIENTATION;
 const Timeline_ = (_ref, ref) => {
   let {
     classNames,
@@ -33,5 +30,4 @@ const Timeline_ = (_ref, ref) => {
     "data-testid": "Timeline"
   }, timelineItems);
 };
-const Timeline = /*#__PURE__*/React.forwardRef(Timeline_);
-exports.Timeline = Timeline;
+const Timeline = exports.Timeline = /*#__PURE__*/React.forwardRef(Timeline_);

package/lib/components/Timeline/TimelineItem/TimelineItem.js

@@ -12,10 +12,8 @@ var _ConditionalWrapper = require("../../ConditionalWrapper");
 var _Icon = require("../../Icon");
 var _Timeline = require("../Timeline");
 var _TimelineModule = _interopRequireDefault(require("../Timeline.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 TimelineItem_ = (_ref, ref) => {
   let {
     id,
@@ -75,5 +73,4 @@ const TimelineItem_ = (_ref, ref) => {
     }, children)
   }, children))));
 };
-const TimelineItem = /*#__PURE__*/React.forwardRef(TimelineItem_);
-exports.TimelineItem = TimelineItem;
+const TimelineItem = exports.TimelineItem = /*#__PURE__*/React.forwardRef(TimelineItem_);

package/lib/components/Toast/Toast.js

@@ -11,18 +11,16 @@ var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _ToastModule = _interopRequireDefault(require("./Toast.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 TOAST_SEMANTIC = 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 TOAST_SEMANTIC = exports.TOAST_SEMANTIC = Object.freeze({
   success: 'success',
   information: 'information',
   warning: 'warning',
   danger: 'danger',
   primary: 'primary'
 });
-exports.TOAST_SEMANTIC = TOAST_SEMANTIC;
 const ToastIcon = _ref => {
   let {
     semantic
@@ -65,7 +63,7 @@ const ToastIcon = _ref => {
       });
   }
 };
-const ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const ToastTitle = exports.ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     semantic = '',
@@ -78,9 +76,8 @@ const ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref
   }), children);
 });
-exports.ToastTitle = ToastTitle;
 ToastTitle.displayName = 'ToastTitle';
-const ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const ToastBody = exports.ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     className,
@@ -92,7 +89,6 @@ const ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ref: ref
   }), children);
 });
-exports.ToastBody = ToastBody;
 ToastBody.displayName = 'ToastBody';
 const ToastFooter = _ref4 => {
   let {
@@ -102,7 +98,7 @@ const ToastFooter = _ref4 => {
   const arrayChildren = React.Children.toArray(children);
   const footerActions = React.Children.map(children, (child, index) => {
     const isLast = index === arrayChildren.length - 1;
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const {
         onClick
       } = child.props;
@@ -157,7 +153,7 @@ const Toast = _ref5 => {
       const nodes = [];
       for (const child of childrenArray) {
         if (child?.type?.displayName === comp) {
-          nodes.push( /*#__PURE__*/React.cloneElement(child, {
+          nodes.push(/*#__PURE__*/React.cloneElement(child, {
             semantic
           }));
         }

package/lib/components/Toast/ToastContainer.js

@@ -10,12 +10,9 @@ var _hooks = require("../../hooks");
 var _classify = require("../../utils/classify");
 var _ = require("./");
 var _ToastContainerModule = _interopRequireDefault(require("./ToastContainer.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[untyped-import]
-
 const ADD = 'ADD';
 const REMOVE = 'REMOVE';
 const reducer = (state, action) => {
@@ -24,7 +21,7 @@ const reducer = (state, action) => {
     data
   } = action;
   if (type === ADD) {
-    if ( /* $FlowIgnore */
+    if (/* $FlowIgnore */
     state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
       return state;
     }

package/lib/components/Toast/ToastManager.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toastManager = exports.toastApi = exports.POSITIONS = exports.ACTIONS = void 0;
 var _helpers = require("../../utils/helpers");
-
 const DEFAULT_AUTOCLOSE_TIME = 8000; // default auto close time for with autoClose = true (be default true) but timeout not passed.
 
-const POSITIONS = {
+const POSITIONS = exports.POSITIONS = {
   TOP_CENTER: 'topCenter',
   TOP_LEFT: 'topLeft',
   TOP_RIGHT: 'topRight',
@@ -16,18 +15,16 @@ const POSITIONS = {
   BOTTOM_RIGHT: 'bottomRight',
   BOTTOM_CENTER: 'bottomCenter'
 };
-exports.POSITIONS = POSITIONS;
-const ACTIONS = {
+const ACTIONS = exports.ACTIONS = {
   ADD: 'ADD',
   REMOVE: 'REMOVE'
 };
-exports.ACTIONS = ACTIONS;
 const defaultOptions = {
   autoClose: true,
   timeout: DEFAULT_AUTOCLOSE_TIME,
   position: POSITIONS.BOTTOM_LEFT
 };
-const toastManager = (() => {
+const toastManager = exports.toastManager = (() => {
   let callbackFn;
   const manager = {
     subscribe(callback) {
@@ -54,9 +51,7 @@ const toastManager = (() => {
   };
   return manager;
 })();
-exports.toastManager = toastManager;
-const toastApi = {
+const toastApi = exports.toastApi = {
   show: (content, options) => toastManager.add(content, options),
   remove: id => toastManager.remove(id)
-};
-exports.toastApi = toastApi;
+};

package/lib/components/Toggle/Toggle.js

@@ -7,11 +7,17 @@ exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _ToggleModule = _interopRequireDefault(require("./Toggle.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 Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
+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:
+ * Do not wrap Toggle in a label. For simplicity's sake, Toggle uses an
+ * internal label tag to handle click delegation to the hidden input, and
+ * nesting labels is a bad idea.
+ */
+
+const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'toggle',
     value = '',
@@ -69,5 +75,4 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   })), labelPosition === 'right' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
-});
-exports.Toggle = Toggle;
+});

package/lib/components/TokenListInput/TokenListInput.js

@@ -8,7 +8,7 @@ exports.TokenListInput = TokenListInput;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _without = _interopRequireDefault(require("lodash/without"));
-var _size = require("../../styles/variables/_size");
+var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -20,14 +20,16 @@ var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _TokenValueChips = require("./TokenValueChips");
 var _TokenListInputModule = _interopRequireDefault(require("./TokenListInput.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 DEFAULT_LIMIT_VALUE = 100;
-exports.DEFAULT_LIMIT_VALUE = DEFAULT_LIMIT_VALUE;
+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 DEFAULT_LIMIT_VALUE = exports.DEFAULT_LIMIT_VALUE = 100;
+
+// TODO: use Generics with Constraints when we have typescript.
+
 function TokenListInput(props) {
   const {
     classNames,
@@ -54,14 +56,16 @@ function TokenListInput(props) {
     tabIndex,
     values,
     resolveTokenValue,
-    inputProps
+    inputProps,
+    elevation = 'modal'
   } = props;
   const menuRef = React.useRef(null);
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
@@ -70,6 +74,7 @@ function TokenListInput(props) {
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const inputRef = React.useRef();
+  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onOpenToggle = isOpen => {
     if (isOpen) {
       onMenuOpen?.();
@@ -88,7 +93,6 @@ function TokenListInput(props) {
     if (locked || !value || value.disabled) {
       return; // Prevent adding values when disabled or locked
     }
-
     onInputChange?.('');
     // $FlowFixMe[incompatible-use] - token has key property
     const existingToken = values.find(token => token.key === value.key);
@@ -152,8 +156,9 @@ function TokenListInput(props) {
       triggerRef
     } = _ref;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: menuRef,
       className: (0, _classify.default)(_TokenListInputModule.default.tokenListContainer, classNames?.wrapper),
-      ref: menuRef
+      "data-testid": "TokenListInput"
     }, /*#__PURE__*/React.createElement("div", {
       onClick: () => {
         if (disabled || locked || values.length >= limit) {
@@ -224,13 +229,27 @@ function TokenListInput(props) {
       color: _typography.TEXT_COLORS.danger
     }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
       color: _typography.TEXT_COLORS.secondary
-    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      returnFocus: false,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       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 => {
@@ -246,7 +265,7 @@ function TokenListInput(props) {
       size: menu.size || size,
       onTabOut: clickAway,
       ref: menuRef
-    })))));
+    })))))));
   });
 }
 TokenListInput.displayName = 'TokenListInput';

package/lib/components/TokenListInput/TokenListInput.js.flow

@@ -7,13 +7,17 @@ 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 without from 'lodash/without';
 
-import {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
@@ -31,6 +35,7 @@ import type {InputProps} from '../Input';
 import type {BaseMenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {BodySmall} from '../Text';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 
 import type {ResolveTokenValueProps} from './TokenValueChips';
 import {TokenValueChips} from './TokenValueChips';
@@ -91,6 +96,7 @@ export type Props<T> = {
   onMenuClose?: () => mixed,
   resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
   inputProps?: InputProps,
+  elevation?: ElevationType,
 };
 
 export function TokenListInput<T>(props: Props<T>): React.Node {
@@ -120,11 +126,11 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
     values,
     resolveTokenValue,
     inputProps,
+    elevation = 'modal',
   } = props;
-
   const menuRef = React.useRef<HTMLDivElement | null>(null);
 
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: STRATEGY_TYPE.absolute,
     placement: ANCHOR_POSITION_TYPE.bottomStart,
@@ -133,6 +139,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
   });
 
   const inputRef = React.useRef<?HTMLInputElement>();
+  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
 
   const onOpenToggle = (isOpen) => {
     if (isOpen) {
@@ -222,8 +229,9 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <>
           <div
-            className={classify(css.tokenListContainer, classNames?.wrapper)}
             ref={menuRef}
+            className={classify(css.tokenListContainer, classNames?.wrapper)}
+            data-testid="TokenListInput"
           >
             <div
               onClick={() => {
@@ -324,34 +332,52 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
               </div>
             )}
             {!locked && isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
-                {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
-                <Menu
-                  {...menu}
-                  onSelect={(option) => {
-                    if (values.length >= limit) {
-                      return;
-                    }
-                    // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
-                    // $FlowFixMe[prop-missing] MenuOption properties are missing in T
-                    addValue(option);
-                    clickAway();
-                    inputRef.current?.focus();
-                  }}
-                  size={menu.size || size}
-                  onTabOut={clickAway}
-                  ref={menuRef}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  returnFocus={false}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    className={css.menuWrapper}
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    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),
+                    }}
+                  >
+                    {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
+                    {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
+                    <Menu
+                      {...menu}
+                      onSelect={(option) => {
+                        if (values.length >= limit) {
+                          return;
+                        }
+                        // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
+                        // $FlowFixMe[prop-missing] MenuOption properties are missing in T
+                        addValue(option);
+                        clickAway();
+                        inputRef.current?.focus();
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                      ref={menuRef}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         </>

package/lib/components/TokenListInput/TokenListInput.module.css

@@ -150,3 +150,8 @@
   height: size26;
   margin-left: auto;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -8,9 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _elevation = require("../../styles/variables/_elevation");
 var _Chip = require("../Chip");
 var _Tooltip = require("../Tooltip");
-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 _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 defaultResolveTokenValue(_ref) {
   let {
     token,

package/lib/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
+exports.getElevationValue = exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
@@ -13,11 +13,12 @@ var _classify = require("../../utils/classify");
 var _string = require("../../utils/string");
 var _Truncate = require("../Truncate");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.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 DELAY_MOTION_DURATION_TYPES = 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); }
+/* eslint-disable flowtype/no-weak-types */
+
+const DELAY_MOTION_DURATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = Object.freeze({
   none: 'none',
   fast: 'fast',
   normal: 'normal',
@@ -25,8 +26,7 @@ const DELAY_MOTION_DURATION_TYPES = Object.freeze({
   slower: 'slower',
   slowest: 'slowest'
 });
-exports.DELAY_MOTION_DURATION_TYPES = DELAY_MOTION_DURATION_TYPES;
-const ELEVATION_TYPES = Object.freeze({
+const ELEVATION_TYPES = exports.ELEVATION_TYPES = Object.freeze({
   none: 'none',
   card: 'card',
   tooltip: 'tooltip',
@@ -35,11 +35,11 @@ const ELEVATION_TYPES = Object.freeze({
   modal: 'modal',
   toast: 'toast'
 });
-exports.ELEVATION_TYPES = ELEVATION_TYPES;
 const getElevationValue = elevation => {
   const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
   return ELEVATION[elevationKey] || elevation;
 };
+exports.getElevationValue = getElevationValue;
 const Tooltip = _ref => {
   let {
     classNames,

package/lib/components/Tooltip/Tooltip.js.flow

@@ -84,7 +84,7 @@ export type BaseTooltipProps = {
   titleMaxLines?: number,
   delayMotionDuration?: DelayMotionDurationType,
   hidden?: boolean,
-  elevation?: string,
+  elevation?: ElevationType,
 };
 
 export type TooltipProps = {
@@ -94,7 +94,7 @@ export type TooltipProps = {
   children: any,
 };
 
-const getElevationValue = (elevation: string): string => {
+export const getElevationValue = (elevation: string): string => {
   const elevationKey = 'elevation' + capitalize(elevation);
   return ELEVATION[elevationKey] || elevation;
 };