@spaced-out/ui-design-system 0.1.130-beta.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.2.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.130...v0.2.0) (2024-09-27)
+
+
+### Features
+
+* upgrade genesis to react 17 and click away changes ([#270](https://github.com/spaced-out/ui-design-system/issues/270)) ([6ab5f93](https://github.com/spaced-out/ui-design-system/commit/6ab5f930813feb1dffaeb030983d13dbd8ebd3bf))
+
+### [0.1.130](https://github.com/spaced-out/ui-design-system/compare/v0.1.130-beta.0...v0.1.130) (2024-09-12)
+
+
+### Features
+
+* score bar component ([#265](https://github.com/spaced-out/ui-design-system/issues/265)) ([d3adc39](https://github.com/spaced-out/ui-design-system/commit/d3adc3906bf88c8d110d5a65cc6bbbe5cc6c3c23))
+
 ### [0.1.130-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.129...v0.1.130-beta.0) (2024-09-11)
 
 

package/design-tokens/color/app-color.json

@@ -255,6 +255,28 @@
         "value": "{baseColor.yellow.100.value}"
       }
     },
+    "score-bar": {
+      "level": {
+        "1": {
+          "value": "{baseColor.red.400.value}"
+        },
+        "2": {
+          "value": "{baseColor.orange.400.value}"
+        },
+        "3": {
+          "value": "{baseColor.blue.400.value}"
+        },
+        "4": {
+          "value": "{baseColor.green.300.value}"
+        },
+        "5": {
+          "value": "{baseColor.green.700.value}"
+        }
+      },
+      "inactive": {
+        "value": "{baseColor.indigo.200.value}"
+      }
+    },
     "gray.lightest": {
       "value": "{baseColor.gray.75.value}"
     },

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -10,6 +10,7 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Menu = require("../Menu");
@@ -84,8 +85,9 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonDropdown",
@@ -103,7 +105,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       iconRightType: iconRightType,
       disabled: disabled,
       size: size,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         onClick?.(e);
         e.stopPropagation();
@@ -115,8 +117,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         icon: classNames?.buttonIcon
       }
     }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -18,6 +18,7 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
@@ -115,7 +116,7 @@ export const ButtonDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="ButtonDropdown"
             className={classify(
@@ -148,7 +149,7 @@ export const ButtonDropdown: React$AbstractComponent<
                 iconRightType={iconRightType}
                 disabled={disabled}
                 size={size}
-                ref={refs.setReference}
+                ref={mergeRefs([refs.setReference, triggerRef])}
                 onClick={(e) => {
                   onClick?.(e);
                   e.stopPropagation();
@@ -166,8 +167,7 @@ export const ButtonDropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -10,6 +10,7 @@ var _lodash = require("lodash");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _ButtonTab = require("./ButtonTab");
 var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
@@ -75,23 +76,23 @@ const ButtonTabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
       ref: menuBtnRef,
       className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       selectedButtonTabId: moreTabSelectedId,
       onButtonTabSelect: (id, e) => {
         e?.stopPropagation();
         onOpen();
       }
     }), title), isOpen && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

package/lib/components/ButtonTabs/ButtonTabDropdown.js.flow

@@ -18,6 +18,7 @@ import {includes} from 'lodash';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {AnchorType} from '../ButtonDropdown';
 import {Menu} from '../Menu';
 
@@ -87,7 +88,7 @@ export const ButtonTabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div
           data-testid="ButtonTabDropdown"
           ref={menuBtnRef}
@@ -95,7 +96,7 @@ export const ButtonTabDropdown = ({
         >
           <ButtonTab
             {...buttonTabProps}
-            ref={refs.setReference}
+            ref={mergeRefs([refs.setReference, triggerRef])}
             selectedButtonTabId={moreTabSelectedId}
             onButtonTabSelect={(id, e) => {
               e?.stopPropagation();
@@ -106,8 +107,7 @@ export const ButtonTabDropdown = ({
           </ButtonTab>
           {isOpen && (
             <div
-              onClickCapture={cancelNext}
-              ref={refs.setFloating}
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
               style={{
                 display: 'flex',
                 position: strategy,

package/lib/components/Dropdown/Dropdown.js

@@ -10,6 +10,7 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Input = require("../Input");
 var _Menu = require("../Menu");
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.css"));
@@ -58,13 +59,14 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
-      ref: dropdownRef
+      ref: (0, _mergeRefs.mergeRefs)([dropdownRef, boundaryRef])
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       onKeyDown: e => {
         if (e.keyCode === 32) {
@@ -72,7 +74,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           isOpen ? clickAway() : onOpen();
         }
       },
-      boxRef: refs.setReference,
+      boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       size: size,
       placeholder: placeholder,
       value: dropdownInputText,
@@ -87,8 +89,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       ref: ref
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,

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

@@ -16,6 +16,7 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import {Input} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
@@ -78,11 +79,11 @@ export const Dropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="Dropdown"
             className={classify(css.dropdownContainer, classNames?.wrapper)}
-            ref={dropdownRef}
+            ref={mergeRefs([dropdownRef, boundaryRef])}
           >
             <Input
               {...inputProps}
@@ -92,7 +93,7 @@ export const Dropdown: React$AbstractComponent<
                   isOpen ? clickAway() : onOpen();
                 }
               }}
-              boxRef={refs.setReference}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
@@ -108,8 +109,7 @@ export const Dropdown: React$AbstractComponent<
 
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   position: strategy,
                   top: y ?? spaceNone,

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -9,6 +9,7 @@ var _react2 = require("@floating-ui/react");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
@@ -56,8 +57,9 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "InlineDropdown",
@@ -65,7 +67,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -81,8 +83,7 @@ const InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         [_InlineDropdownModule.default.disabled]: disabled
       })
     })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,

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

@@ -17,6 +17,7 @@ import {
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {UnstyledButtonProps} from '../Button';
 import {UnstyledButton} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
@@ -82,7 +83,7 @@ export const InlineDropdown: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="InlineDropdown"
             className={classify(
@@ -94,7 +95,7 @@ export const InlineDropdown: React$AbstractComponent<
             <UnstyledButton
               {...restButtonProps}
               disabled={disabled}
-              ref={refs.setReference}
+              ref={mergeRefs([refs.setReference, triggerRef])}
               onClick={(e) => {
                 e.stopPropagation();
                 onOpen();
@@ -120,8 +121,7 @@ export const InlineDropdown: React$AbstractComponent<
             </UnstyledButton>
             {isOpen && menu && (
               <div
-                onClickCapture={cancelNext}
-                ref={refs.setFloating}
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
                 style={{
                   display: 'flex',
                   position: strategy,

package/lib/components/ScoreBar/ScoreBar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScoreBar = exports.Direction = exports.DEFAULT_COLOR_MAP = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _clamp = _interopRequireDefault(require("lodash/clamp"));
+var _color = require("../../styles/variables/_color.js");
+var _size = require("../../styles/variables/_size");
+var _classify = require("../../utils/classify");
+var _scoreBar = require("../../utils/score-bar");
+var _ScoreBarModule = _interopRequireDefault(require("./ScoreBar.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 Direction = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+exports.Direction = Direction;
+const DEFAULT_BARS_COUNT = 5;
+const DEFAULT_COLOR_MAP = {
+  inactive: _color.colorScoreBarInactive,
+  '100': _color.colorScoreBarLevel5,
+  '80': _color.colorScoreBarLevel4,
+  '60': _color.colorScoreBarLevel3,
+  '40': _color.colorScoreBarLevel2,
+  '20': _color.colorScoreBarLevel1
+};
+exports.DEFAULT_COLOR_MAP = DEFAULT_COLOR_MAP;
+const ScoreBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    score = 0,
+    colorMap = DEFAULT_COLOR_MAP,
+    totalBars = DEFAULT_BARS_COUNT,
+    direction = 'vertical',
+    classNames
+  } = _ref;
+  (0, _invariant.default)(totalBars > 0, JSON.stringify(_scoreBar.SCORE_BAR_ERRORS.INVALID_BAR_COUNT));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "ScoreBar",
+    className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_ScoreBarModule.default.scoreBarContainer, classNames?.container),
+    style: {
+      '--direction': direction === Direction.horizontal ? 'row-reverse' : 'column',
+      '--height': direction === Direction.horizontal ? _size.size18 : 'unset',
+      '--width': direction === Direction.vertical ? _size.size18 : 'unset'
+    }
+  }, [...Array(totalBars).keys()].reverse().map(count => /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_ScoreBarModule.default.bar, classNames?.bar),
+    style: {
+      '--background-color': (0, _scoreBar.getColorByScorePercentage)(totalBars, (0, _clamp.default)(score, 0, totalBars), count, colorMap),
+      '--height': direction === Direction.horizontal ? _size.size18 : _size.size2,
+      '--width': direction === Direction.vertical ? _size.size18 : _size.size2
+    },
+    key: count
+  }))));
+});
+exports.ScoreBar = ScoreBar;

package/lib/components/ScoreBar/ScoreBar.js.flow

@@ -0,0 +1,117 @@
+// @flow strict
+
+import * as React from 'react';
+import invariant from 'invariant';
+import clamp from 'lodash/clamp';
+
+import {
+  colorScoreBarInactive,
+  colorScoreBarLevel1,
+  colorScoreBarLevel2,
+  colorScoreBarLevel3,
+  colorScoreBarLevel4,
+  colorScoreBarLevel5,
+} from '../../styles/variables/_color.js';
+import {size2, size18} from '../../styles/variables/_size';
+import {classify} from '../../utils/classify';
+import {
+  getColorByScorePercentage,
+  SCORE_BAR_ERRORS,
+} from '../../utils/score-bar';
+
+import css from './ScoreBar.module.css';
+
+
+export const Direction = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+});
+
+export type ClassNames = $ReadOnly<{
+  container?: string,
+  wrapper?: string,
+  bar?: string,
+}>;
+
+export type ScoreBarDirection = $Values<typeof Direction>;
+export type ScoreBarColorMap = $ReadOnly<{
+  inactive: string, // percentage > score
+  '100': string, // score > 80%
+  '80': string, // score > 60% and score <= %80
+  '60': string, // score > 40% and score <= %60
+  '40': string, // score > 20% and score <= 40%
+  '20': string, // score > 0% and score <= 20%
+}>;
+
+export type ScoreBarProps = {
+  classNames?: ClassNames,
+  direction?: ScoreBarDirection,
+  colorMap?: ScoreBarColorMap,
+  totalBars?: number,
+  score?: number,
+};
+
+const DEFAULT_BARS_COUNT = 5;
+export const DEFAULT_COLOR_MAP: ScoreBarColorMap = {
+  inactive: colorScoreBarInactive,
+  '100': colorScoreBarLevel5,
+  '80': colorScoreBarLevel4,
+  '60': colorScoreBarLevel3,
+  '40': colorScoreBarLevel2,
+  '20': colorScoreBarLevel1,
+};
+
+export const ScoreBar: React$AbstractComponent<ScoreBarProps, HTMLDivElement> =
+  React.forwardRef<ScoreBarProps, HTMLDivElement>(
+    (
+      {
+        score = 0,
+        colorMap = DEFAULT_COLOR_MAP,
+        totalBars = DEFAULT_BARS_COUNT,
+        direction = 'vertical',
+        classNames,
+      }: ScoreBarProps,
+      ref,
+    ): React.Node => {
+      invariant(
+        totalBars > 0,
+        JSON.stringify(SCORE_BAR_ERRORS.INVALID_BAR_COUNT),
+      );
+
+      return (
+        <div
+          ref={ref}
+          data-testid="ScoreBar"
+          className={classify(css.scoreBarWrapper, classNames?.wrapper)}
+        >
+          <div
+            className={classify(css.scoreBarContainer, classNames?.container)}
+            style={{
+              '--direction':
+                direction === Direction.horizontal ? 'row-reverse' : 'column',
+              '--height': direction === Direction.horizontal ? size18 : 'unset',
+              '--width': direction === Direction.vertical ? size18 : 'unset',
+            }}
+          >
+            {[...Array(totalBars).keys()].reverse().map((count) => (
+              <div
+                className={classify(css.bar, classNames?.bar)}
+                style={{
+                  '--background-color': getColorByScorePercentage(
+                    totalBars,
+                    clamp(score, 0, totalBars),
+                    count,
+                    colorMap,
+                  ),
+                  '--height':
+                    direction === Direction.horizontal ? size18 : size2,
+                  '--width': direction === Direction.vertical ? size18 : size2,
+                }}
+                key={count}
+              />
+            ))}
+          </div>
+        </div>
+      );
+    },
+  );

package/lib/components/ScoreBar/ScoreBar.module.css

@@ -0,0 +1,36 @@
+@value (
+    borderRadiusXSmall
+) from '../../styles/variables/_border.css';
+@value (
+    size34,
+    size18,
+    size2
+) from '../../styles/variables/_size.css';
+@value (
+    spaceXXSmall,
+    spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.scoreBarWrapper {
+  display: flex;
+  padding: spaceXSmall;
+  align-items: center;
+  justify-content: center;
+}
+
+.scoreBarContainer {
+  width: var(--width);
+  height: var(--height);
+  gap: calc(spaceXXSmall / 2);
+  display: flex;
+  flex-direction: var(--direction);
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bar {
+  width: var(--width);
+  height: var(--height);
+  border-radius: borderRadiusXSmall;
+  background-color: var(--background-color);
+}

package/lib/components/ScoreBar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ScoreBar = require("./ScoreBar");
+Object.keys(_ScoreBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScoreBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScoreBar[key];
+    }
+  });
+});

package/lib/components/ScoreBar/index.js.flow

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

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -9,6 +9,7 @@ var _react2 = require("@floating-ui/react");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
 var _clickAway = require("../../../utils/click-away");
+var _mergeRefs = require("../../../utils/merge-refs");
 var _Menu = require("../../Menu");
 var _Tab = require("../Tab");
 var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.module.css"));
@@ -41,8 +42,9 @@ const TabDropdown = _ref => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "TabDropdown",
@@ -50,7 +52,7 @@ const TabDropdown = _ref => {
       ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
-      ref: refs.setReference,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       onClick: e => {
         e.stopPropagation();
         onOpen();
@@ -60,8 +62,7 @@ const TabDropdown = _ref => {
         iconTextWrap: _TabDropdownModule.default.dotTextWrap
       }
     })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
-      ref: refs.setFloating,
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,