@doist/reactist 13.0.0 → 14.1.1

package/dist/reactist.cjs.development.js

@@ -479,9 +479,13 @@ function Tooltip(_ref) {
   });
   const child = React__default.Children.only(children);
 
-  if (!content) {
+  if (!content || !child) {
     return child;
   }
+
+  if (typeof child.ref === 'string') {
+    throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
+  }
   /**
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
@@ -513,13 +517,15 @@ function Tooltip(_ref) {
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(tooltip.TooltipAnchor, _objectSpread2(_objectSpread2({
-    state: state
-  }, child.props), {}, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(tooltip.TooltipAnchor, {
+    state: state,
     ref: child.ref,
     onFocus: handleFocus
-  }), anchorProps => {
-    return /*#__PURE__*/React__default.cloneElement(child, anchorProps);
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
   }), state.visible ? /*#__PURE__*/React__default.createElement(tooltip.Tooltip, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     className: classNames('reactist_tooltip', className)
@@ -1552,7 +1558,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-var modules_40c67f5b = {"tab":"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
+var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 
 const _excluded$m = ["as", "children", "id", "exceptionallySetClassName"],
       _excluded2$1 = ["children", "space"],
@@ -1566,8 +1572,7 @@ function Tabs({
   children,
   selectedId,
   defaultSelectedId,
-  color = 'primary',
-  variant = 'normal',
+  variant = 'neutral',
   onSelectedIdChange
 }) {
   const tabState = tab.useTabState({
@@ -1587,10 +1592,9 @@ function Tabs({
   const memoizedTabState = React.useMemo(function memoizeTabState() {
     return {
       tabState,
-      color,
       variant
     };
-  }, [color, variant, tabState]);
+  }, [variant, tabState]);
   return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -1615,13 +1619,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   }
 
   const {
-    color,
     variant,
     tabState
   } = tabContextValue;
   return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + (variant != null ? variant : '')], modules_40c67f5b["tab-" + (color != null ? color : '')]),
+    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
     id: id,
     state: tabState,
     ref: ref
@@ -1634,7 +1637,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
 function TabList(_ref2) {
   let {
     children,
-    space = 'medium'
+    space = 'xsmall'
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2$1);
 
@@ -1645,13 +1648,24 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState
+    tabState,
+    variant
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
-    state: tabState
-  }, props), /*#__PURE__*/React.createElement(Inline, {
-    space: space
-  }, children));
+  return (
+    /*#__PURE__*/
+    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // which will render the track with the wrong height
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+      state: tabState,
+      as: Box,
+      position: "relative",
+      width: "maxContent"
+    }, props), /*#__PURE__*/React.createElement(Box, {
+      className: classNames(modules_40c67f5b.track, modules_40c67f5b["track-" + space], modules_40c67f5b["track-" + variant])
+    }), /*#__PURE__*/React.createElement(Inline, {
+      space: space
+    }, children)))
+  );
 }
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
@@ -1682,13 +1696,14 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   const {
     tabState
   } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
+  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
     tabId: id
   }, props), {}, {
     state: tabState,
     as: as,
     ref: ref
-  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+  }), children) : null;
 });
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
@@ -2146,7 +2161,8 @@ class Box$1 extends React__default.Component {
       style: {
         display: 'inline-block'
       },
-      className: className
+      className: className,
+      "data-testid": "reactist-dropdown-box"
     }, top && this._getBodyComponent(), this._getTriggerComponent(), !top && this._getBodyComponent());
   }
 
@@ -2204,7 +2220,8 @@ function Body({
     ref: setPosition,
     style: style,
     className: "body",
-    id: "reactist-dropdown-body"
+    id: "reactist-dropdown-body",
+    "data-testid": "reactist-dropdown-body"
   }, children);
 }
 
@@ -2271,6 +2288,7 @@ function ColorItem({
   tooltip
 }) {
   const item = /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "reactist-color-item",
     className: 'reactist color_item' + (isActive ? ' active' : ''),
     style: {
       backgroundColor: color