@doist/reactist 13.0.0 → 14.0.0

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":"_76bbcdaa","track":"_531eb92b","tab-neutral":"_13321d47","tab-themed":"_58c4d63d","track-neutral":"_11ef0184","track-themed":"ce590259","track-xsmall":"d8366aff","track-small":"e28fbcf0","track-medium":"_1e1d7d0e","track-large":"_611e18a3","track-xlarge":"_7e083426","track-xxlarge":"_37c54913"};
 
 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