@spaced-out/ui-design-system 0.1.21 → 0.1.23

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.1.23](https://github.com/spaced-out/ui-design-system/compare/v0.1.22...v0.1.23) (2023-04-26)
+
+
+### Bug Fixes
+
+* tooltip truncation fixes ([5152c75](https://github.com/spaced-out/ui-design-system/commit/5152c75ba37b28c32329f6662a89d85edaf0103a))
+
+### [0.1.22](https://github.com/spaced-out/ui-design-system/compare/v0.1.21...v0.1.22) (2023-04-25)
+
+
+### Bug Fixes
+
+* add tooltip for option button ([#106](https://github.com/spaced-out/ui-design-system/issues/106)) ([aa9a91f](https://github.com/spaced-out/ui-design-system/commit/aa9a91f7fd9e65336d4f617790fe26077884b8d8))
+* hidden prop support in tooltip ([49b7c21](https://github.com/spaced-out/ui-design-system/commit/49b7c2123b367d1e2e50253380700688ab7d01cd))
+
 ### [0.1.21](https://github.com/spaced-out/ui-design-system/compare/v0.1.20...v0.1.21) (2023-04-24)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -11,7 +11,9 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _Button = require("../Button");
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
 var _ButtonDropdownModule = _interopRequireDefault(require("./ButtonDropdown.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -40,9 +42,11 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     iconRightName,
     iconRightType = 'solid',
     isFluid,
+    tooltip,
     ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef(null);
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
   const {
     x,
@@ -57,7 +61,13 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
   const onMenuToggle = isOpen => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    if (isOpen) {
+      onMenuOpen?.();
+      setIsMenuOpen(true);
+    } else {
+      onMenuClose?.();
+      setIsMenuOpen(false);
+    }
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
@@ -74,6 +84,11 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         [_ButtonDropdownModule.default.isFluid]: isFluid === true
       }, classNames?.dropdownContainer),
       ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+      condition: Boolean(tooltip),
+      wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
+        hidden: isMenuOpen ? true : tooltip?.hidden
+      }), children)
     }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
       iconRightName: children ? iconRightName || (isOpen ? 'caret-up' : 'caret-down') : iconRightName,
       iconRightType: iconRightType,
@@ -89,7 +104,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         wrapper: classNames?.buttonWrapper,
         icon: classNames?.buttonIcon
       }
-    }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {

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

@@ -20,8 +20,11 @@ import {classify} from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './ButtonDropdown.module.css';
 
@@ -50,6 +53,7 @@ export type ButtonDropdownProps = {
   onOptionSelect?: (option: MenuOption) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  tooltip?: BaseTooltipProps,
   ...
 };
 
@@ -71,11 +75,13 @@ export const ButtonDropdown: React$AbstractComponent<
       iconRightName,
       iconRightType = 'solid',
       isFluid,
+      tooltip,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
   ) => {
     const menuBtnRef = React.useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
     const {x, y, reference, floating, strategy} = useFloating({
       strategy: 'absolute',
@@ -85,7 +91,13 @@ export const ButtonDropdown: React$AbstractComponent<
     });
 
     const onMenuToggle = (isOpen: boolean) => {
-      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      if (isOpen) {
+        onMenuOpen?.();
+        setIsMenuOpen(true);
+      } else {
+        onMenuClose?.();
+        setIsMenuOpen(false);
+      }
     };
 
     return (
@@ -102,29 +114,41 @@ export const ButtonDropdown: React$AbstractComponent<
             )}
             ref={menuBtnRef}
           >
-            <Button
-              {...restButtonProps}
-              iconRightName={
-                children
-                  ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
-                  : iconRightName
-              }
-              iconRightType={iconRightType}
-              disabled={disabled}
-              size={size}
-              ref={reference}
-              onClick={(e) => {
-                e.stopPropagation();
-                onOpen();
-              }}
-              isFluid={isFluid}
-              classNames={{
-                wrapper: classNames?.buttonWrapper,
-                icon: classNames?.buttonIcon,
-              }}
+            <ConditionalWrapper
+              condition={Boolean(tooltip)}
+              wrapper={(children) => (
+                <Tooltip
+                  {...tooltip}
+                  hidden={isMenuOpen ? true : tooltip?.hidden}
+                >
+                  {children}
+                </Tooltip>
+              )}
             >
-              {children}
-            </Button>
+              <Button
+                {...restButtonProps}
+                iconRightName={
+                  children
+                    ? iconRightName || (isOpen ? 'caret-up' : 'caret-down')
+                    : iconRightName
+                }
+                iconRightType={iconRightType}
+                disabled={disabled}
+                size={size}
+                ref={reference}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onOpen();
+                }}
+                isFluid={isFluid}
+                classNames={{
+                  wrapper: classNames?.buttonWrapper,
+                  icon: classNames?.buttonIcon,
+                }}
+              >
+                {children}
+              </Button>
+            </ConditionalWrapper>
 
             {isOpen && menu && (
               <div

package/lib/components/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConditionalWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+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 ConditionalWrapper = _ref => {
+  let {
+    condition,
+    wrapper,
+    children
+  } = _ref;
+  return condition ? wrapper?.(children) : children;
+};
+exports.ConditionalWrapper = ConditionalWrapper;

package/lib/components/ConditionalWrapper/ConditionalWrapper.js.flow

@@ -0,0 +1,16 @@
+// @flow strict
+import * as React from 'react';
+
+
+export type ConditionalWrapperProps = {
+  condition?: boolean,
+  wrapper?: (children: React.Node) => React.Node,
+  children?: React.Node,
+};
+
+export const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children,
+}: ConditionalWrapperProps): React.Node =>
+  condition ? wrapper?.(children) : children;

package/lib/components/ConditionalWrapper/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConditionalWrapper", {
+  enumerable: true,
+  get: function () {
+    return _ConditionalWrapper.ConditionalWrapper;
+  }
+});
+var _ConditionalWrapper = require("./ConditionalWrapper");

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {ConditionalWrapper} from './ConditionalWrapper';

package/lib/components/InContextAlert/InContextAlert.js

@@ -109,7 +109,8 @@ const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     className: (0, _classify.classify)(classNames?.alertText)
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: 2
+    line: 2,
+    wordBreak: "initial"
   }, children)), !!(actionText || dismissable) && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
   }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -167,7 +167,9 @@ export const InContextAlert: React$AbstractComponent<
             />
             {React.Children.count(children) > 0 && (
               <SubTitleExtraSmall className={classify(classNames?.alertText)}>
-                <Truncate line={2}>{children}</Truncate>
+                <Truncate line={2} wordBreak="initial">
+                  {children}
+                </Truncate>
               </SubTitleExtraSmall>
             )}
             {!!(actionText || dismissable) && (

package/lib/components/OptionButton/OptionButton.js

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Tooltip = require("../Tooltip");
 var _OptionButtonModule = _interopRequireDefault(require("./OptionButton.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 OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -29,43 +32,58 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onMenuOpen,
     onMenuClose,
     ariaLabel,
-    actionType
+    actionType,
+    tooltip,
+    classNames
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonModule.default.container,
+    className: (0, _classify.default)(_OptionButtonModule.default.container, {
+      [_OptionButtonModule.default.isFluid]: isFluid
+    }, classNames?.wrapper),
     ref: ref
+  }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(tooltip?.baseButton),
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip?.baseButton, {
+      hidden: isMenuOpen ? true : tooltip?.optionsButton?.hidden
+    }), children)
   }, /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: iconLeftName,
     iconLeftType: iconLeftType,
     onClick: onButtonClick,
     size: size,
     type: type,
-    classNames: {
-      wrapper: _OptionButtonModule.default.leftButton
-    },
     disabled: disabled,
     isFluid: isFluid,
     ariaLabel: ariaLabel,
     actionType: actionType,
-    isLoading: isLoading
-  }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    isLoading: isLoading,
+    classNames: {
+      wrapper: (0, _classify.default)(_OptionButtonModule.default.leftButton, classNames?.baseButtonWrapper),
+      icon: classNames?.baseButtonIcon
+    }
+  }, children)), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
     anchorPosition: anchorPosition,
     ariaLabel: ariaLabel,
     iconLeftName: iconName,
+    tooltip: tooltip?.optionsButton,
     classNames: {
-      buttonWrapper: _OptionButtonModule.default.rightButton,
-      dropdownContainer: _OptionButtonModule.default.dropDownContainer
+      buttonWrapper: (0, _classify.default)(_OptionButtonModule.default.rightButton, classNames?.optionsButtonWrapper),
+      dropdownContainer: (0, _classify.default)(_OptionButtonModule.default.dropDownContainer, classNames?.dropdownContainer),
+      buttonIcon: classNames?.optionsButtonIcon
     },
     type: type,
     disabled: disabled,
     menu: menu,
     onMenuClose: () => {
       setIconName('chevron-down');
+      setIsMenuOpen(false);
       onMenuOpen && onMenuOpen();
     },
     onMenuOpen: () => {
       setIconName('chevron-up');
+      setIsMenuOpen(true);
       onMenuClose && onMenuClose();
     },
     onOptionSelect: onOptionSelect,

package/lib/components/OptionButton/OptionButton.js.flow

@@ -2,15 +2,33 @@
 
 import * as React from 'react';
 
+import classify from '../../utils/classify';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
 import {ButtonDropdown} from '../ButtonDropdown';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './OptionButton.module.css';
 
 
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  baseButtonWrapper?: string,
+  baseButtonIcon?: string,
+  optionsButtonWrapper?: string,
+  optionsButtonIcon?: string,
+  dropdownContainer?: string,
+}>;
+
+export type OptionButtonTooltipProps = {
+  baseButton?: BaseTooltipProps,
+  optionsButton?: BaseTooltipProps,
+};
+
 export type OptionButtonProps = {
   ...ButtonProps,
   menu?: MenuProps,
@@ -19,6 +37,8 @@ export type OptionButtonProps = {
   onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  tooltip?: OptionButtonTooltipProps,
+  classNames?: ClassNames,
   ...
 };
 
@@ -44,45 +64,80 @@ export const OptionButton: React$AbstractComponent<
       onMenuClose,
       ariaLabel,
       actionType,
+      tooltip,
+      classNames,
     }: OptionButtonProps,
     ref,
   ): React.Node => {
     const [iconName, setIconName] = React.useState('chevron-down');
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
     return (
-      <div className={css.container} ref={ref}>
-        <Button
-          iconLeftName={iconLeftName}
-          iconLeftType={iconLeftType}
-          onClick={onButtonClick}
-          size={size}
-          type={type}
-          classNames={{wrapper: css.leftButton}}
-          disabled={disabled}
-          isFluid={isFluid}
-          ariaLabel={ariaLabel}
-          actionType={actionType}
-          isLoading={isLoading}
+      <div
+        className={classify(
+          css.container,
+          {[css.isFluid]: isFluid},
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <ConditionalWrapper
+          condition={Boolean(tooltip?.baseButton)}
+          wrapper={(children) => (
+            <Tooltip
+              {...tooltip?.baseButton}
+              hidden={isMenuOpen ? true : tooltip?.optionsButton?.hidden}
+            >
+              {children}
+            </Tooltip>
+          )}
         >
-          {children}
-        </Button>
+          <Button
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            onClick={onButtonClick}
+            size={size}
+            type={type}
+            disabled={disabled}
+            isFluid={isFluid}
+            ariaLabel={ariaLabel}
+            actionType={actionType}
+            isLoading={isLoading}
+            classNames={{
+              wrapper: classify(css.leftButton, classNames?.baseButtonWrapper),
+              icon: classNames?.baseButtonIcon,
+            }}
+          >
+            {children}
+          </Button>
+        </ConditionalWrapper>
         <ButtonDropdown
           anchorPosition={anchorPosition}
           ariaLabel={ariaLabel}
           iconLeftName={iconName}
+          tooltip={tooltip?.optionsButton}
           classNames={{
-            buttonWrapper: css.rightButton,
-            dropdownContainer: css.dropDownContainer,
+            buttonWrapper: classify(
+              css.rightButton,
+              classNames?.optionsButtonWrapper,
+            ),
+            dropdownContainer: classify(
+              css.dropDownContainer,
+              classNames?.dropdownContainer,
+            ),
+            buttonIcon: classNames?.optionsButtonIcon,
           }}
           type={type}
           disabled={disabled}
           menu={menu}
           onMenuClose={() => {
             setIconName('chevron-down');
+            setIsMenuOpen(false);
             onMenuOpen && onMenuOpen();
           }}
           onMenuOpen={() => {
             setIconName('chevron-up');
+            setIsMenuOpen(true);
             onMenuClose && onMenuClose();
           }}
           onOptionSelect={onOptionSelect}

package/lib/components/OptionButton/OptionButton.module.css

@@ -4,11 +4,13 @@
 
 @value (spaceXXSmall) from '../../styles/variables/_space.css';
 
-@value ( sizeFluid, size60) from '../../styles/variables/_size.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
 
 .container {
   display: flex;
-  height: sizeFluid;
+}
+
+.isFluid {
   width: sizeFluid;
 }
 

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

@@ -1,3 +1,3 @@
 //@flow strict
-export type {OptionButtonProps} from './OptionButton';
+export type {OptionButtonProps, OptionButtonTooltipProps} from './OptionButton';
 export {OptionButton} from './OptionButton';

package/lib/components/Tooltip/Tooltip.js

@@ -38,7 +38,8 @@ const Tooltip = _ref => {
     bodyMaxLines = 2,
     titleMaxLines = 1,
     delayMotionDuration = 'none',
-    elevation = ELEVATION['elevationTooltip']
+    elevation = ELEVATION['elevationTooltip'],
+    hidden
   } = _ref;
   const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
@@ -75,7 +76,7 @@ const Tooltip = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, getReferenceProps({
     ref,
     ...children.props
-  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", _extends({
+  })), open && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(React.Fragment, null, !hidden && /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
     className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
@@ -85,15 +86,17 @@ const Tooltip = _ref => {
       '--tooltip-elevation': elevation
     }
   }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: titleMaxLines
+    line: titleMaxLines,
+    wordBreak: "initial"
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TooltipModule.default.title, classNames?.title)
   }, title)), !!body && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: bodyMaxLines
+    line: bodyMaxLines,
+    wordBreak: "initial"
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_TooltipModule.default.body, {
       [_TooltipModule.default.hasTitle]: !!title
     }, classNames?.body)
-  }, body))), bodyRef.current));
+  }, body)))), bodyRef.current));
 };
 exports.Tooltip = Tooltip;

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

@@ -62,7 +62,7 @@ export type PlacementType =
   | 'left'
   | 'right';
 
-export type TooltipProps = {
+export type BaseTooltipProps = {
   classNames?: ClassNames,
   title?: string | React.Node,
   body?: string | React.Node,
@@ -70,10 +70,15 @@ export type TooltipProps = {
   bodyMaxLines?: number,
   titleMaxLines?: number,
   delayMotionDuration?: DelayMotionDurationType,
+  hidden?: boolean,
+  elevation?: string,
+};
+
+export type TooltipProps = {
+  ...BaseTooltipProps,
   // TODO(Nishant): Decide on a type to use here
   // $FlowFixMe
   children: any,
-  elevation?: string,
 };
 
 export const Tooltip = ({
@@ -86,6 +91,7 @@ export const Tooltip = ({
   titleMaxLines = 1,
   delayMotionDuration = 'none',
   elevation = ELEVATION['elevationTooltip'],
+  hidden,
 }: TooltipProps): React.Node => {
   const bodyRef = React.useRef(document.querySelector('body'));
   const [open, setOpen] = React.useState(false);
@@ -133,41 +139,45 @@ export const Tooltip = ({
       )}
       {open &&
         createPortal(
-          <div
-            ref={floating}
-            className={classify(css.tooltip, classNames?.tooltip)}
-            style={{
-              position: strategy,
-              top: y ?? spaceNone,
-              left: x ?? spaceNone,
-              '--tooltip-elevation': elevation,
-            }}
-            {...getFloatingProps()}
-          >
-            {!!title && (
-              <Truncate line={titleMaxLines}>
-                <div className={classify(css.title, classNames?.title)}>
-                  {title}
-                </div>
-              </Truncate>
-            )}
+          <>
+            {!hidden && (
+              <div
+                ref={floating}
+                className={classify(css.tooltip, classNames?.tooltip)}
+                style={{
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  '--tooltip-elevation': elevation,
+                }}
+                {...getFloatingProps()}
+              >
+                {!!title && (
+                  <Truncate line={titleMaxLines} wordBreak="initial">
+                    <div className={classify(css.title, classNames?.title)}>
+                      {title}
+                    </div>
+                  </Truncate>
+                )}
 
-            {!!body && (
-              <Truncate line={bodyMaxLines}>
-                <div
-                  className={classify(
-                    css.body,
-                    {
-                      [css.hasTitle]: !!title,
-                    },
-                    classNames?.body,
-                  )}
-                >
-                  {body}
-                </div>
-              </Truncate>
+                {!!body && (
+                  <Truncate line={bodyMaxLines} wordBreak="initial">
+                    <div
+                      className={classify(
+                        css.body,
+                        {
+                          [css.hasTitle]: !!title,
+                        },
+                        classNames?.body,
+                      )}
+                    >
+                      {body}
+                    </div>
+                  </Truncate>
+                )}
+              </div>
             )}
-          </div>,
+          </>,
           bodyRef.current,
         )}
     </>

package/lib/components/index.js

@@ -146,6 +146,17 @@ Object.keys(_CollapsibleCard).forEach(function (key) {
     }
   });
 });
+var _ConditionalWrapper = require("./ConditionalWrapper");
+Object.keys(_ConditionalWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ConditionalWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ConditionalWrapper[key];
+    }
+  });
+});
 var _Dialog = require("./Dialog");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -13,6 +13,7 @@ export * from './Chip';
 export * from './CircularLoader';
 export * from './CodeBlock';
 export * from './CollapsibleCard';
+export * from './ConditionalWrapper';
 export * from './Dialog';
 export * from './Dropdown';
 export * from './EmptyState';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {