@carbon/react 1.61.0 → 1.62.0

package/lib/components/Tabs/Tabs.js

@@ -17,7 +17,7 @@ var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
 var React = require('react');
 require('../Grid/FlexGrid.js');
-require('../Grid/Grid.js');
+var Grid = require('../Grid/Grid.js');
 require('../Grid/Row.js');
 require('../Grid/Column.js');
 require('../Grid/ColumnHang.js');
@@ -49,6 +49,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronLeft, _ChevronRight;
+const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
 
@@ -69,7 +70,7 @@ const TabContext = /*#__PURE__*/React__default["default"].createContext({
   hasSecondaryLabel: false
 });
 const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
-`(max-width: ${layout.breakpoints.md.width})`;
+const smMediaQuery = `(max-width: ${layout.breakpoints.md.width})`;
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default["default"].createContext(0);
@@ -148,7 +149,47 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes__default["default"].number
 };
-({
+function TabsVertical(_ref2) {
+  let {
+    children,
+    height,
+    defaultSelectedIndex = 0,
+    onChange,
+    selectedIndex: controlledSelectedIndex,
+    ...rest
+  } = _ref2;
+  const [selectedIndex, setSelectedIndex] = useControllableState.useControllableState({
+    value: controlledSelectedIndex,
+    defaultValue: defaultSelectedIndex,
+    onChange: value => onChange?.({
+      selectedIndex: value
+    })
+  });
+  const props = {
+    ...rest,
+    selectedIndex,
+    onChange: _ref3 => {
+      let {
+        selectedIndex
+      } = _ref3;
+      return setSelectedIndex(selectedIndex);
+    }
+  };
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
+  if (!isSm) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/forbid-component-props
+      React__default["default"].createElement(Grid.Grid, {
+        style: {
+          height: height
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Tabs, props, children))
+    );
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Tabs, props, children);
+}
+TabsVertical.propTypes = {
   /**
    * Provide child elements to be rendered inside the `TabsVertical`.
    * These elements should render either `TabsListVertical` or `TabsPanels`
@@ -173,7 +214,7 @@ Tabs.propTypes = {
    * in a controlled mode and should be used along with `onChange`
    */
   selectedIndex: PropTypes__default["default"].number
-});
+};
 
 /**
  * Get the next index for a given keyboard event
@@ -194,6 +235,25 @@ function getNextIndex(event, total, index) {
   }
 }
 
+/**
+ * Get the next index for a given keyboard event
+ * given a count of the total items and the current index
+ */
+function getNextIndexVertical(event, total, index) {
+  switch (true) {
+    case match.match(event, keys.ArrowDown):
+      return (index + 1) % total;
+    case match.match(event, keys.ArrowUp):
+      return (total + index - 1) % total;
+    case match.match(event, keys.Home):
+      return 0;
+    case match.match(event, keys.End):
+      return total - 1;
+    default:
+      return index;
+  }
+}
+
 /**
  * TabList
  */
@@ -488,7 +548,133 @@ TabList.propTypes = {
    */
   scrollIntoView: PropTypes__default["default"].bool
 };
-({
+
+/**
+ * TabListVertical
+ */
+
+// type TabElement = HTMLElement & { disabled?: boolean };
+
+function TabListVertical(_ref7) {
+  let {
+    activation = 'automatic',
+    'aria-label': label,
+    children,
+    className: customClassName,
+    scrollIntoView,
+    ...rest
+  } = _ref7;
+  const {
+    activeIndex,
+    selectedIndex,
+    setSelectedIndex,
+    setActiveIndex
+  } = React__default["default"].useContext(TabsContext);
+  const prefix = usePrefix.usePrefix();
+  const ref = React.useRef(null);
+  const [isOverflowingBottom, setIsOverflowingBottom] = React.useState(false);
+  const [isOverflowingTop, setIsOverflowingTop] = React.useState(false);
+  const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
+  const className = cx__default["default"](`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
+  const tabs = React.useRef([]);
+  function onKeyDown(event) {
+    if (match.matches(event, [keys.ArrowDown, keys.ArrowUp, keys.Home, keys.End])) {
+      event.preventDefault();
+      const filtredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
+      const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      const nextIndex = tabs.current.indexOf(activeTabs[getNextIndexVertical(event, activeTabs.length, currentIndex)]);
+      if (activation === 'automatic') {
+        setSelectedIndex(nextIndex);
+      } else if (activation === 'manual') {
+        setActiveIndex(nextIndex);
+      }
+      tabs.current[nextIndex]?.focus();
+    }
+  }
+  useEffectOnce.useEffectOnce(() => {
+    if (tabs.current[selectedIndex]?.disabled) {
+      const activeTabs = tabs.current.filter(tab => {
+        return !tab.disabled;
+      });
+      if (activeTabs.length > 0) {
+        const tab = activeTabs[0];
+        setSelectedIndex(tabs.current.indexOf(tab));
+      }
+    }
+  });
+  React.useEffect(() => {
+    function handler() {
+      const containerHeight = ref.current?.offsetHeight;
+      const containerTop = ref.current?.getBoundingClientRect().top;
+      const selectedPositionTop = tabs.current[selectedIndex]?.getBoundingClientRect().top;
+      const halfTabHeight = verticalTabHeight / 2;
+      if (containerTop && containerHeight) {
+        // scrolls so selected tab is in view
+        if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
+          ref.current.scrollTo({
+            top: (selectedIndex - 1) * verticalTabHeight,
+            behavior: 'smooth'
+          });
+        }
+      }
+    }
+    window.addEventListener('resize', handler);
+    handler();
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, [selectedIndex, scrollIntoView]);
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const handler = () => {
+      const halfTabHeight = verticalTabHeight / 2;
+      setIsOverflowingBottom(element.scrollTop + element.clientHeight + halfTabHeight <= element.scrollHeight);
+      setIsOverflowingTop(element.scrollTop > halfTabHeight);
+    };
+    const resizeObserver = new ResizeObserver(() => handler());
+    resizeObserver.observe(element);
+    element.addEventListener('scroll', handler);
+    return () => {
+      resizeObserver.disconnect();
+      element.removeEventListener('scroll', handler);
+    };
+  });
+  if (isSm) {
+    return /*#__PURE__*/React__default["default"].createElement(TabList, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      "aria-label": label,
+      contained: true
+    }), children);
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, isOverflowingTop && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tab--list-gradient_top`
+  }), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": label,
+    ref: ref,
+    role: "tablist",
+    className: `${prefix}--tab--list`,
+    onKeyDown: onKeyDown
+  }), React__default["default"].Children.map(children, (child, index) => {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+      value: {
+        index,
+        hasSecondaryLabel: false
+      }
+    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+      ref: node => {
+        tabs.current[index] = node;
+      }
+    }));
+  })), isOverflowingBottom && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--tab--list-gradient_bottom`
+  }));
+}
+TabListVertical.propTypes = {
   /**
    * Specify whether the content tab should be activated automatically or
    * manually
@@ -508,7 +694,7 @@ TabList.propTypes = {
    * Specify an optional className to be added to the container node
    */
   className: PropTypes__default["default"].string
-});
+};
 
 /**
  * Helper function to set up the behavior when a button is "long pressed".
@@ -614,7 +800,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
   useEvent.useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
   React.useLayoutEffect(() => {
     function handler() {
-      const elementTabId = document.getElementById(`${id}`);
+      const elementTabId = document.getElementById(`${id}`) || tabRef.current;
       const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
       isEllipsisActive(newElement);
     }
@@ -1000,6 +1186,8 @@ TabPanels.propTypes = {
 exports.IconTab = IconTab;
 exports.Tab = Tab;
 exports.TabList = TabList;
+exports.TabListVertical = TabListVertical;
 exports.TabPanel = TabPanel;
 exports.TabPanels = TabPanels;
 exports.Tabs = Tabs;
+exports.TabsVertical = TabsVertical;

package/lib/components/Tabs/index.d.ts

@@ -7,4 +7,4 @@
 import { Tabs } from './Tabs';
 export default Tabs;
 export { default as TabsSkeleton } from './Tabs.Skeleton';
-export { TabPanels, type TabPanelsProps, TabPanel, type TabPanelProps, TabList, type TabListProps, IconTab, type IconTabProps, Tabs, type TabsProps, } from './Tabs';
+export { TabPanels, type TabPanelsProps, TabPanel, type TabPanelProps, TabList, type TabListProps, TabListVertical, type TabListVerticalProps, IconTab, type IconTabProps, Tabs, type TabsProps, TabsVertical, type TabsVerticalProps, } from './Tabs';

package/lib/components/Tile/Tile.js

@@ -400,6 +400,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
   const [interactive, setInteractive] = React.useState(true);
   const aboveTheFold = React.useRef(null);
   const belowTheFold = React.useRef(null);
+  const chevronInteractiveRef = React.useRef(null);
   const tileContent = React.useRef(null);
   const tile = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
@@ -431,7 +432,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     setMaxHeight();
   }
   function handleKeyUp(evt) {
-    if (evt.target !== tile.current) {
+    if (evt.target !== tile.current && evt.target !== chevronInteractiveRef.current) {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         evt.preventDefault();
       }
@@ -525,6 +526,7 @@ const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(functio
     onKeyUp: events.composeEventHandlers([onKeyUp, handleKeyUp]),
     onClick: events.composeEventHandlers([onClick, handleClick]),
     "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+    ref: chevronInteractiveRef,
     className: chevronInteractiveClassNames
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: belowTheFold,

package/lib/index.js

@@ -361,9 +361,11 @@ exports.IconSwitch = IconSwitch["default"];
 exports.IconTab = Tabs.IconTab;
 exports.Tab = Tabs.Tab;
 exports.TabList = Tabs.TabList;
+exports.TabListVertical = Tabs.TabListVertical;
 exports.TabPanel = Tabs.TabPanel;
 exports.TabPanels = Tabs.TabPanels;
 exports.Tabs = Tabs.Tabs;
+exports.TabsVertical = Tabs.TabsVertical;
 exports.TabContent = TabContent["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.Tag = Tag["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
     "@carbon/themes": "^11.37.0",
-    "@figma/code-connect": "^1.0.1",
+    "@figma/code-connect": "^1.0.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "4e8fc6f3f11f2946d6a4b7f3462be833a63115dc"
+  "gitHead": "cc284f3cb6f7c289c95cf56dd602e67e6044a796"
 }