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

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

@@ -17,6 +17,7 @@ import {
 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 type {MenuOption, MenuProps} from '../../Menu';
 import {Menu} from '../../Menu';
@@ -59,7 +60,7 @@ export const TabDropdown = ({
 
   return (
     <ClickAway>
-      {({isOpen, onOpen, cancelNext, clickAway}) => (
+      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
@@ -68,7 +69,7 @@ export const TabDropdown = ({
           <Tab
             {...props?.tab}
             size={size}
-            ref={refs.setReference}
+            ref={mergeRefs([refs.setReference, triggerRef])}
             onClick={(e) => {
               e.stopPropagation();
               onOpen();
@@ -80,8 +81,7 @@ export const TabDropdown = ({
           />
           {isOpen && props?.menu && (
             <div
-              onClickCapture={cancelNext}
-              ref={refs.setFloating}
+              ref={mergeRefs([refs.setFloating, boundaryRef])}
               style={{
                 display: 'flex',
                 position: strategy,

package/lib/components/Typeahead/Typeahead.js

@@ -68,13 +68,13 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       isOpen,
       onOpen,
-      cancelNext,
-      clickAway
+      clickAway,
+      boundaryRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
       className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      onClickCapture: cancelNext
+      ref: boundaryRef
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: refs.setReference,
@@ -106,7 +106,6 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         onClear?.();
       }
     })), isOpen && !isLoading && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
-      onClickCapture: cancelNext,
       ref: refs.setFloating,
       style: {
         position: strategy,

package/lib/components/Typeahead/Typeahead.js.flow

@@ -98,11 +98,11 @@ export const Typeahead: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, cancelNext, clickAway}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef}) => (
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
-            onClickCapture={cancelNext}
+            ref={boundaryRef}
           >
             <SearchInput
               {...inputProps}
@@ -140,7 +140,6 @@ export const Typeahead: React$AbstractComponent<
               filteredOptions &&
               !!filteredOptions.length && (
               <div
-                onClickCapture={cancelNext}
                 ref={refs.setFloating}
                 style={{
                   position: strategy,

package/lib/styles/index.css

@@ -160,6 +160,18 @@
 
 @value colorDataViz8: #F5EBB4;
 
+@value colorScoreBarLevel1: #e94970;
+
+@value colorScoreBarLevel2: #e5983d;
+
+@value colorScoreBarLevel3: #3987f3;
+
+@value colorScoreBarLevel4: #56b988;
+
+@value colorScoreBarLevel5: #026b37;
+
+@value colorScoreBarInactive: #D3D2E0;
+
 @value colorGrayLightest: #EBEBEB;
 
 @value colorNeutral: #706F9B;

package/lib/styles/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
-exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = void 0;
+exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -169,6 +169,18 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
+const colorScoreBarLevel1 = '#e94970';
+exports.colorScoreBarLevel1 = colorScoreBarLevel1;
+const colorScoreBarLevel2 = '#e5983d';
+exports.colorScoreBarLevel2 = colorScoreBarLevel2;
+const colorScoreBarLevel3 = '#3987f3';
+exports.colorScoreBarLevel3 = colorScoreBarLevel3;
+const colorScoreBarLevel4 = '#56b988';
+exports.colorScoreBarLevel4 = colorScoreBarLevel4;
+const colorScoreBarLevel5 = '#026b37';
+exports.colorScoreBarLevel5 = colorScoreBarLevel5;
+const colorScoreBarInactive = '#D3D2E0';
+exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';

package/lib/styles/index.js.flow

@@ -162,6 +162,18 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
+export const colorScoreBarLevel1 = '#e94970';
+
+export const colorScoreBarLevel2 = '#e5983d';
+
+export const colorScoreBarLevel3 = '#3987f3';
+
+export const colorScoreBarLevel4 = '#56b988';
+
+export const colorScoreBarLevel5 = '#026b37';
+
+export const colorScoreBarInactive = '#D3D2E0';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';

package/lib/styles/variables/_color.css

@@ -136,6 +136,18 @@
 
 @value colorDataViz8: #F5EBB4;
 
+@value colorScoreBarLevel1: #e94970;
+
+@value colorScoreBarLevel2: #e5983d;
+
+@value colorScoreBarLevel3: #3987f3;
+
+@value colorScoreBarLevel4: #56b988;
+
+@value colorScoreBarLevel5: #026b37;
+
+@value colorScoreBarInactive: #D3D2E0;
+
 @value colorGrayLightest: #EBEBEB;
 
 @value colorNeutral: #706F9B;

package/lib/styles/variables/_color.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
+exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -143,6 +144,18 @@ const colorDataViz7 = '#F5B8E1';
 exports.colorDataViz7 = colorDataViz7;
 const colorDataViz8 = '#F5EBB4';
 exports.colorDataViz8 = colorDataViz8;
+const colorScoreBarLevel1 = '#e94970';
+exports.colorScoreBarLevel1 = colorScoreBarLevel1;
+const colorScoreBarLevel2 = '#e5983d';
+exports.colorScoreBarLevel2 = colorScoreBarLevel2;
+const colorScoreBarLevel3 = '#3987f3';
+exports.colorScoreBarLevel3 = colorScoreBarLevel3;
+const colorScoreBarLevel4 = '#56b988';
+exports.colorScoreBarLevel4 = colorScoreBarLevel4;
+const colorScoreBarLevel5 = '#026b37';
+exports.colorScoreBarLevel5 = colorScoreBarLevel5;
+const colorScoreBarInactive = '#D3D2E0';
+exports.colorScoreBarInactive = colorScoreBarInactive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';

package/lib/styles/variables/_color.js.flow

@@ -138,6 +138,18 @@ export const colorDataViz7 = '#F5B8E1';
 
 export const colorDataViz8 = '#F5EBB4';
 
+export const colorScoreBarLevel1 = '#e94970';
+
+export const colorScoreBarLevel2 = '#e5983d';
+
+export const colorScoreBarLevel3 = '#3987f3';
+
+export const colorScoreBarLevel4 = '#56b988';
+
+export const colorScoreBarLevel5 = '#026b37';
+
+export const colorScoreBarInactive = '#D3D2E0';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';

package/lib/utils/click-away/click-away.js

@@ -22,7 +22,8 @@ class ClickAway extends React.Component {
       pageBottom: null
     });
     _defineProperty(this, "el", null);
-    _defineProperty(this, "cancelNext", false);
+    _defineProperty(this, "boundaryRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "handleOpenClick", () => {
       // NOTE (kyle): we recalculate the position on click because sibling and niece components
       // could have changed.
@@ -33,21 +34,20 @@ class ClickAway extends React.Component {
         pageBottom = this.pageBottom();
       }
       this.setState({
-        isOpen: true,
+        isOpen: !this.state.isOpen,
         pageBottom
       }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseClick", evt => {
-      if (this.props.shouldCancel(evt)) {
+      if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
         return;
       }
-      if (this.cancelNext === true) {
-        this.cancelNext = false;
-      } else {
-        this.setState({
-          isOpen: false
-        }, this.handleOnChange);
+      if (evt.target instanceof Node && this.triggerRef && (this.triggerRef === evt.target || this.triggerRef.current?.contains(evt.target))) {
+        return;
       }
+      this.setState({
+        isOpen: false
+      }, this.handleOnChange);
     });
     _defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
       if (evt?.key === 'Escape') {
@@ -59,9 +59,6 @@ class ClickAway extends React.Component {
         isOpen: false
       }, this.handleOnChange);
     });
-    _defineProperty(this, "cancelNextClickAway", () => {
-      this.cancelNext = true;
-    });
     _defineProperty(this, "handleOnChange", () => this.props.onChange && this.props.onChange(this.state.isOpen));
   }
   componentDidMount() {
@@ -78,18 +75,24 @@ class ClickAway extends React.Component {
     } = this.state;
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick);
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true
+        });
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true
+        });
         window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
       }
     }
   }
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true
+    });
     window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
   }
   render() {
@@ -112,9 +115,9 @@ class ClickAway extends React.Component {
       isOpen,
       height,
       pageBottom,
-      cancelNext: this.cancelNextClickAway,
       clickAway: this.forceClose,
-      anchorRef: el => this.el = el
+      boundaryRef: this.boundaryRef,
+      triggerRef: this.triggerRef
     });
   }
   pageBottom() {
@@ -125,6 +128,5 @@ class ClickAway extends React.Component {
 }
 exports.ClickAway = ClickAway;
 _defineProperty(ClickAway, "defaultProps", {
-  shouldCancel: () => false,
   closeOnEscapeKeypress: true
 });

package/lib/utils/click-away/click-away.js.flow

@@ -6,14 +6,22 @@ import invariant from 'invariant';
 import {pageHeight} from '../dom';
 
 
+type BoundaryRefType<T> = {
+  current: ?T,
+};
+
+type TriggerRefType<T> = {
+  current: ?T,
+};
+
 export type ChildProps = {
   onOpen: () => void,
   isOpen: boolean,
   height: ?number,
   pageBottom: ?number,
-  cancelNext: () => void,
   clickAway: () => void,
-  anchorRef: (?HTMLElement) => mixed,
+  boundaryRef: BoundaryRefType<?HTMLElement>,
+  triggerRef: TriggerRefType<?HTMLElement>,
 };
 
 export type ClickAwayRefType = ?{
@@ -26,7 +34,6 @@ export type ClickAwayRefType = ?{
 export type ClickAwayProps = {
   closeOnEscapeKeypress?: boolean,
   children: (props: ChildProps) => React.Node,
-  shouldCancel: (event: MouseEvent) => boolean,
   onChange?: (isOpen: boolean) => mixed,
   clickAwayRef?: ClickAwayRefType,
 };
@@ -41,10 +48,8 @@ type ClickAwayState = {
 
 export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   static defaultProps: {
-    shouldCancel: () => boolean,
     closeOnEscapeKeypress?: boolean,
   } = {
-      shouldCancel: () => false,
       closeOnEscapeKeypress: true,
     };
 
@@ -55,7 +60,8 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   el: ?HTMLElement = null;
-  cancelNext: boolean = false;
+  boundaryRef: BoundaryRefType<?HTMLElement> = React.createRef();
+  triggerRef: TriggerRefType<?HTMLElement> = React.createRef();
 
   componentDidMount() {
     if (this.el) {
@@ -70,7 +76,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     const {isOpen} = this.state;
     if (prevState.isOpen !== isOpen) {
       if (this.state.isOpen) {
-        window.document.addEventListener('click', this.handleCloseClick);
+        window.document.addEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
         if (this.props.closeOnEscapeKeypress) {
           window.document.addEventListener(
             'keyup',
@@ -78,7 +86,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
           );
         }
       } else {
-        window.document.removeEventListener('click', this.handleCloseClick);
+        window.document.removeEventListener('click', this.handleCloseClick, {
+          capture: true,
+        });
         window.document.removeEventListener(
           'keyup',
           this.handleCloseOnEscapeKeypress,
@@ -88,7 +98,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   }
 
   componentWillUnmount() {
-    window.document.removeEventListener('click', this.handleCloseClick);
+    window.document.removeEventListener('click', this.handleCloseClick, {
+      capture: true,
+    });
     window.document.removeEventListener(
       'keyup',
       this.handleCloseOnEscapeKeypress,
@@ -98,7 +110,6 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   render(): React.Node {
     const {height, isOpen, pageBottom} = this.state;
     const {clickAwayRef} = this.props;
-
     if (clickAwayRef) {
       clickAwayRef.current = {
         forceClose: this.forceClose,
@@ -110,9 +121,9 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
       isOpen,
       height,
       pageBottom,
-      cancelNext: this.cancelNextClickAway,
       clickAway: this.forceClose,
-      anchorRef: (el) => (this.el = el),
+      boundaryRef: this.boundaryRef,
+      triggerRef: this.triggerRef,
     });
   }
 
@@ -126,7 +137,7 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
 
     this.setState(
       {
-        isOpen: true,
+        isOpen: !this.state.isOpen,
         pageBottom,
       },
       this.handleOnChange,
@@ -134,20 +145,30 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
   };
 
   handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
-    if (this.props.shouldCancel(evt)) {
+    if (
+      evt.target instanceof Node &&
+      this.boundaryRef &&
+      (this.boundaryRef === evt.target ||
+        this.boundaryRef.current?.contains(evt.target))
+    ) {
       return;
     }
 
-    if (this.cancelNext === true) {
-      this.cancelNext = false;
-    } else {
-      this.setState(
-        {
-          isOpen: false,
-        },
-        this.handleOnChange,
-      );
+    if (
+      evt.target instanceof Node &&
+      this.triggerRef &&
+      (this.triggerRef === evt.target ||
+        this.triggerRef.current?.contains(evt.target))
+    ) {
+      return;
     }
+
+    this.setState(
+      {
+        isOpen: false,
+      },
+      this.handleOnChange,
+    );
   };
 
   handleCloseOnEscapeKeypress: (
@@ -162,10 +183,6 @@ export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
     this.setState({isOpen: false}, this.handleOnChange);
   };
 
-  cancelNextClickAway: () => void = () => {
-    this.cancelNext = true;
-  };
-
   handleOnChange: () => mixed = () =>
     this.props.onChange && this.props.onChange(this.state.isOpen);
 

package/lib/utils/index.js

@@ -124,6 +124,17 @@ Object.keys(_rating).forEach(function (key) {
     }
   });
 });
+var _scoreBar = require("./score-bar");
+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];
+    }
+  });
+});
 var _string = require("./string");
 Object.keys(_string).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/utils/index.js.flow

@@ -11,5 +11,6 @@ export * from './makeClassNameComponent';
 export * from './menu';
 export * from './merge-refs';
 export * from './rating';
+export * from './score-bar';
 export * from './string';
 export * from './tokens';

package/lib/utils/merge-refs/merge-refs.js.flow

@@ -1,7 +1,7 @@
 // @flow strict
 export function mergeRefs(
-  refs: Array<{current: ?HTMLElement, ...}>,
-): (value: empty) => void {
+  refs: Array<{current: ?HTMLElement}>,
+): (value: ?HTMLElement) => void {
   return (value) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {

package/lib/utils/score-bar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _scoreBar = require("./score-bar");
+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/utils/score-bar/index.js.flow

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

package/lib/utils/score-bar/score-bar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
+
+const getColorByPercentage = (totalBars, score, colorMap) => {
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const scorePercentage = 100 * score / totalBars;
+  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
+  return colorMap[range.toString()] || colorMap.inactive;
+};
+const getColorByScorePercentage = (totalBars, score, currentBarNumber, colorMap) => {
+  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  return currentBarNumber < score ? validColor : colorMap.inactive;
+};
+exports.getColorByScorePercentage = getColorByScorePercentage;
+const SCORE_BAR_ERRORS = Object.freeze({
+  INVALID_BAR_COUNT: {
+    type: 'INVALID_BAR_COUNT',
+    description: 'totalBars can not be less than 1'
+  }
+});
+exports.SCORE_BAR_ERRORS = SCORE_BAR_ERRORS;

package/lib/utils/score-bar/score-bar.js.flow

@@ -0,0 +1,33 @@
+// @flow strict
+import type {ScoreBarColorMap} from '../../components/ScoreBar';
+
+
+const getColorByPercentage = (
+  totalBars: number,
+  score: number,
+  colorMap: ScoreBarColorMap,
+): string => {
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const scorePercentage = (100 * score) / totalBars;
+  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
+  return colorMap[range.toString()] || colorMap.inactive;
+};
+
+export const getColorByScorePercentage = (
+  totalBars: number,
+  score: number,
+  currentBarNumber: number,
+  colorMap: ScoreBarColorMap,
+): string => {
+  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  return currentBarNumber < score ? validColor : colorMap.inactive;
+};
+
+export const SCORE_BAR_ERRORS = Object.freeze({
+  INVALID_BAR_COUNT: {
+    type: 'INVALID_BAR_COUNT',
+    description: 'totalBars can not be less than 1',
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.130-beta.0",
+  "version": "0.2.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -104,8 +104,8 @@
     "node-sass": "^7.0.0",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",