@carbon/react 1.29.1 → 1.30.0

package/es/components/Tabs/Tabs.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
+import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
@@ -22,28 +22,33 @@ import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.j
 import { usePrefix } from '../../internal/usePrefix.js';
 import { usePressable } from './usePressable.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { useEvent } from '../../internal/useEvent.js';
 import { matches, match } from '../../internal/keyboard/match.js';
-import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.js';
+import { ArrowRight, ArrowLeft, Home, End, Delete } from '../../internal/keyboard/keys.js';
 
-var _ChevronLeft, _ChevronRight;
+var _ChevronLeft, _ChevronRight, _Close;
 
-const TabsContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a tablist
+// Used to manage the overall state of the Tabs
+const TabsContext = /*#__PURE__*/React__default.createContext();
 
-const TabContext = /*#__PURE__*/React__default.createContext(); // Used to keep track of position in a list of tab panels
+// Used to keep track of position in a tablist
+const TabContext = /*#__PURE__*/React__default.createContext();
 
+// Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default.createContext();
-
 function Tabs(_ref) {
   let {
     children,
     defaultSelectedIndex = 0,
     onChange,
-    selectedIndex: controlledSelectedIndex
+    selectedIndex: controlledSelectedIndex,
+    dismissable,
+    onTabCloseRequest
   } = _ref;
-  const baseId = useId('ccs'); // The active index is used to track the element which has focus in our tablist
-
-  const [activeIndex, setActiveIndex] = useState(defaultSelectedIndex); // The selected index is used for the tab/panel pairing which is "visible"
-
+  const baseId = useId('ccs');
+  // The active index is used to track the element which has focus in our tablist
+  const [activeIndex, setActiveIndex] = useState(defaultSelectedIndex);
+  // The selected index is used for the tab/panel pairing which is "visible"
   const [selectedIndex, setSelectedIndex] = useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
@@ -59,6 +64,8 @@ function Tabs(_ref) {
     baseId,
     activeIndex,
     defaultSelectedIndex,
+    dismissable,
+    onTabCloseRequest,
     setActiveIndex,
     selectedIndex,
     setSelectedIndex
@@ -67,32 +74,43 @@ function Tabs(_ref) {
     value: value
   }, children);
 }
-
 Tabs.propTypes = {
   /**
    * Provide child elements to be rendered inside of the `Tabs`.
    * These elements should render either `TabsList` or `TabsPanels`
    */
   children: PropTypes.node,
-
   /**
    * Specify which content tab should be initially selected when the component
    * is first rendered
    */
   defaultSelectedIndex: PropTypes.number,
-
+  /**
+   * Whether the render Tab children should be dismissable.
+   */
+  dismissable: PropTypes.bool,
   /**
    * Provide an optional function which is called whenever the state of the
    * `Tabs` changes
    */
   onChange: PropTypes.func,
-
+  /**
+   * If specifying the `onTabCloseRequest` prop, provide a callback function
+   * responsible for removing the tab when close button is pressed on one of the Tab elements
+   */
+  onTabCloseRequest: props => {
+    if (props.dismissable && !props.onTabCloseRequest) {
+      return new Error('dismissable property specified without also providing an onTabCloseRequest property.');
+    }
+    return undefined;
+  },
   /**
    * Control which content panel is currently selected. This puts the component
    * in a controlled mode and should be used along with `onChange`
    */
   selectedIndex: PropTypes.number
 };
+
 /**
  * Get the next index for a given keyboard event given a count of the total
  * items and the current index
@@ -101,7 +119,6 @@ Tabs.propTypes = {
  * @param {number} index
  * @returns {number}
  */
-
 function getNextIndex(event, total, index) {
   if (match(event, ArrowRight)) {
     return (index + 1) % total;
@@ -113,7 +130,6 @@ function getNextIndex(event, total, index) {
     return total - 1;
   }
 }
-
 function TabList(_ref2) {
   let {
     activation = 'automatic',
@@ -133,7 +149,8 @@ function TabList(_ref2) {
     activeIndex,
     selectedIndex,
     setSelectedIndex,
-    setActiveIndex
+    setActiveIndex,
+    dismissable
   } = React__default.useContext(TabsContext);
   const prefix = usePrefix();
   const ref = useRef(null);
@@ -141,25 +158,26 @@ function TabList(_ref2) {
   const nextButton = useRef(null);
   const [isScrollable, setIsScrollable] = useState(false);
   const [scrollLeft, setScrollLeft] = useState(null);
-  const hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(child => child.props.secondaryLabel).length;
-  const className = cx(`${prefix}--tabs`, customClassName, {
-    [`${prefix}--tabs--contained`]: contained,
-    [`${prefix}--tabs--light`]: light,
-    [`${prefix}--tabs__icon--default`]: iconSize === 'default',
-    [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
-    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
-  }); // Previous Button
+
+  // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT > 0
-
   const buttonWidth = 44;
-  const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false; // Next Button
+  // Next Button
   // VISIBLE IF:
   //   SCROLLABLE
   //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
-
-  const isNextButtonVisible = ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false;
+  const [isNextButtonVisible, setIsNextButtonVisible] = useState(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
+  const hasSecondaryLabelTabs = contained && !!React__default.Children.toArray(children).filter(child => child.props.secondaryLabel).length;
+  const className = cx(`${prefix}--tabs`, customClassName, {
+    [`${prefix}--tabs--contained`]: contained,
+    [`${prefix}--tabs--light`]: light,
+    [`${prefix}--tabs__icon--default`]: iconSize === 'default',
+    [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
+    [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs
+  });
+  const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
   const previousButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
     [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible
   });
@@ -172,7 +190,6 @@ function TabList(_ref2) {
       setScrollLeft(event.target.scrollLeft);
     }, scrollDebounceWait);
   }, [scrollDebounceWait]);
-
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
@@ -181,20 +198,16 @@ function TabList(_ref2) {
       });
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
-
       if (activation === 'automatic') {
         setSelectedIndex(nextIndex);
       } else if (activation === 'manual') {
         setActiveIndex(nextIndex);
       }
-
       tabs.current[nextIndex].focus();
     }
   }
-
   useEffectOnce(() => {
     const tab = tabs.current[selectedIndex];
-
     if (scrollIntoView && tab) {
       tab.scrollIntoView({
         block: 'nearest',
@@ -202,12 +215,19 @@ function TabList(_ref2) {
       });
     }
   });
+  useEffect(() => {
+    setIsNextButtonVisible(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
+    if (dismissable) {
+      if (ref.current) {
+        setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
+      }
+    }
+  }, [scrollLeft, children, dismissable]);
   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));
@@ -218,21 +238,20 @@ function TabList(_ref2) {
     if (ref.current) {
       setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
     }
-
     function handler() {
       if (ref.current) {
         setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth);
       }
     }
-
     const debouncedHandler = debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();
       window.removeEventListener('resize', debouncedHandler);
     };
-  }, []); // updates scroll location for all scroll behavior.
+  }, []);
 
+  // updates scroll location for all scroll behavior.
   useIsomorphicEffect(() => {
     if (scrollLeft !== null) {
       ref.current.scrollLeft = scrollLeft;
@@ -242,67 +261,63 @@ function TabList(_ref2) {
     if (!isScrollable) {
       return;
     }
-
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
-
     if (tab) {
       // The width of the "scroll buttons"
+
       // The start and end position of the selected tab
       const {
         width: tabWidth
       } = tab.getBoundingClientRect();
       const start = tab.offsetLeft;
-      const end = tab.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
+      const end = tab.offsetLeft + tabWidth;
 
+      // The start and end of the visible area for the tabs
       const visibleStart = ref.current.scrollLeft + buttonWidth;
-      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth; // The beginning of the tab is clipped and not visible
+      const visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth;
 
+      // The beginning of the tab is clipped and not visible
       if (start < visibleStart) {
         setScrollLeft(start - buttonWidth);
-      } // The end of teh tab is clipped and not visible
-
+      }
 
+      // The end of the tab is clipped and not visible
       if (end > visibleEnd) {
         setScrollLeft(end + buttonWidth - ref.current.clientWidth);
       }
     }
-  }, [activation, activeIndex, selectedIndex, isScrollable]);
+  }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
     onPress(_ref3) {
       let {
         longPress
       } = _ref3;
-
       if (!longPress) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
     },
-
     onLongPress() {
       return createLongPressBehavior(ref, 'backward', setScrollLeft);
     }
-
   });
   usePressable(nextButton, {
     onPress(_ref4) {
       let {
         longPress
       } = _ref4;
-
       if (!longPress) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
     },
-
     onLongPress() {
       return createLongPressBehavior(ref, 'forward', setScrollLeft);
     }
-
   });
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
+    tabIndex: "-1",
     "aria-label": "Scroll left",
     ref: previousButton,
     className: previousButtonClasses,
@@ -318,7 +333,8 @@ function TabList(_ref2) {
     return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: {
         index,
-        hasSecondaryLabel: hasSecondaryLabelTabs
+        hasSecondaryLabel: hasSecondaryLabelTabs,
+        contained
       }
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: node => {
@@ -327,75 +343,66 @@ function TabList(_ref2) {
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
+    tabIndex: "-1",
     "aria-label": "Scroll right",
     ref: nextButton,
     className: nextButtonClasses,
     type: "button"
   }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default.createElement(ChevronRight, null))));
 }
-
 TabList.propTypes = {
   /**
    * Specify whether the content tab should be activated automatically or
    * manually
    */
   activation: PropTypes.oneOf(['automatic', 'manual']),
-
   /**
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
   'aria-label': PropTypes.string.isRequired,
-
   /**
    * Provide child elements to be rendered inside of `ContentTabs`.
    * These elements should render a `ContentTab`
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether component is contained type
    */
   contained: PropTypes.bool,
-
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
   iconSize: PropTypes.oneOf(['default', 'lg']),
-
   /**
    * Provide the props that describe the left overflow button
    */
   leftOverflowButtonProps: PropTypes.object,
-
   /**
    * Specify whether or not to use the light component variant
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * Provide the props that describe the right overflow button
    */
   rightOverflowButtonProps: PropTypes.object,
-
   /**
    * Optionally provide a delay (in milliseconds) passed to the lodash
    * debounce of the onScroll handler. This will impact the responsiveness
    * of scroll arrow buttons rendering when scrolling to the first or last tab.
    */
   scrollDebounceWait: PropTypes.number,
-
   /**
    * Choose whether or not to automatically scroll to newly selected tabs
    * on component rerender
    */
   scrollIntoView: PropTypes.bool
 };
+
 /**
  * Helper function to setup the behavior when a button is "long pressed". This
  * function will take a ref to the tablist, a direction, and a setter for
@@ -410,7 +417,6 @@ TabList.propTypes = {
  * @param {Function} setScrollLeft
  * @returns {Function}
  */
-
 function createLongPressBehavior(ref, direction, setScrollLeft) {
   // We manually override the scroll behavior to be "auto". If it is set as
   // smooth, this animation does not update correctly
@@ -418,27 +424,24 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
   ref.current.style['scroll-behavior'] = 'auto';
   const scrollDelta = direction === 'forward' ? 5 : -5;
   let frameId = null;
-
   function tick() {
     ref.current.scrollLeft = ref.current.scrollLeft + scrollDelta;
     frameId = requestAnimationFrame(tick);
   }
-
   frameId = requestAnimationFrame(tick);
   return () => {
     // Restore the previous scroll behavior
-    ref.current.style['scroll-behavior'] = defaultScrollBehavior; // Make sure that our `scrollLeft` value is in sync with the existing
-    // `ref` after our requestAnimationFrame loop above
+    ref.current.style['scroll-behavior'] = defaultScrollBehavior;
 
+    // Make sure that our `scrollLeft` value is in sync with the existing
+    // `ref` after our requestAnimationFrame loop above
     setScrollLeft(ref.current.scrollLeft);
-
     if (frameId) {
       cancelAnimationFrame(frameId);
     }
   };
 }
-
-const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
+const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, forwardRef) {
   let {
     as: BaseComponent = 'button',
     children,
@@ -454,18 +457,67 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
   const {
     selectedIndex,
     setSelectedIndex,
-    baseId
+    baseId,
+    dismissable,
+    onTabCloseRequest
   } = React__default.useContext(TabsContext);
   const {
     index,
-    hasSecondaryLabel
+    hasSecondaryLabel,
+    contained
   } = React__default.useContext(TabContext);
+  const dismissIconRef = useRef(null);
+  const tabRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, tabRef]);
+  const [ignoreHover, setIgnoreHover] = useState(false);
   const id = `${baseId}-tab-${index}`;
   const panelId = `${baseId}-tabpanel-${index}`;
   const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, customClassName, {
     [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
-    [`${prefix}--tabs__nav-item--disabled`]: disabled
+    [`${prefix}--tabs__nav-item--disabled`]: disabled,
+    [`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
   });
+  const onDismissIconMouseEnter = evt => {
+    if (contained) {
+      evt.stopPropagation();
+      setIgnoreHover(true);
+      tabRef.current.classList.add(`${prefix}--tabs__nav-item--hover-off`);
+    }
+  };
+  const onDismissIconMouseLeave = () => {
+    if (contained) {
+      tabRef.current.classList.remove(`${prefix}--tabs__nav-item--hover-off`);
+      setIgnoreHover(false);
+    }
+  };
+  useEvent(dismissIconRef, 'mouseover', onDismissIconMouseEnter);
+  useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
+  const handleClose = evt => {
+    evt.stopPropagation();
+    onTabCloseRequest?.(index);
+  };
+  const handleKeyDown = event => {
+    if (dismissable && match(event, Delete)) {
+      handleClose(event);
+    }
+    onKeyDown?.(event);
+  };
+  const DismissIcon =
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+  React__default.createElement("div", {
+    role: "button",
+    tabIndex: -1,
+    "aria-hidden": true,
+    className: cx(`${prefix}--tabs__nav-item--close-icon`, {
+      [`${prefix}--visually-hidden`]: !dismissable
+    }),
+    onClick: handleClose,
+    "aria-label": "Close tab",
+    title: "Close tab",
+    ref: dismissIconRef
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)));
+  const hasIcon = Icon || dismissable;
   return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
@@ -479,23 +531,23 @@ const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       if (disabled) {
         return;
       }
-
       setSelectedIndex(index);
-
       if (onClick) {
         onClick(evt);
       }
     },
-    onKeyDown: onKeyDown,
+    onKeyDown: handleKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), Icon && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tabs__nav-item--icon`
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, children), /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${prefix}--tabs__nav-item--icon`, {
+      [`${prefix}--visually-hidden`]: !hasIcon
+    })
+  }, DismissIcon, !dismissable && hasIcon && /*#__PURE__*/React__default.createElement(Icon, {
     size: 16
   }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tabs__nav-item-secondary-label`
@@ -506,45 +558,37 @@ Tab.propTypes = {
    * Provide a custom element to render instead of the default button
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Provide child elements to be rendered inside of `Tab`.
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to your Tab
    */
   className: PropTypes.string,
-
   /**
    * Whether your Tab is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes.func,
-
   /**
    * Provide a handler that is invoked on the key down event for the control
    */
   onKeyDown: PropTypes.func,
-
   /*
    * An optional parameter to allow overriding the anchor rendering.
    * Useful for using Tab along with react-router or other client
    * side router libraries.
    **/
   renderButton: PropTypes.func,
-
   /**
    * Optional prop to render an icon next to the label.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
@@ -580,22 +624,18 @@ IconTab.propTypes = {
    * Provide an icon to be rendered inside of `IconTab` as the visual label for Tab.
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to your Tab
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the tooltip for the icon should be open when it first renders
    */
   defaultOpen: PropTypes.bool,
-
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
    */
   enterDelayMs: PropTypes.number,
-
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -603,7 +643,6 @@ IconTab.propTypes = {
    * announced to the screen reader.
    */
   label: PropTypes.node.isRequired,
-
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
@@ -634,27 +673,23 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
     if (!panel.current) {
       return;
     }
-
     const content = getInteractiveContent(panel.current);
-
     if (content) {
       setInteractiveContent(true);
       setTabIndex('-1');
     }
-  }); // tabindex should only be 0 if no interactive content in children
+  });
 
+  // tabindex should only be 0 if no interactive content in children
   useEffect(() => {
     if (!panel.current) {
       return;
     }
-
     const {
       current: node
     } = panel;
-
     function callback() {
       const content = getInteractiveContent(node);
-
       if (content) {
         setInteractiveContent(true);
         setTabIndex('-1');
@@ -663,7 +698,6 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7,
         setTabIndex('0');
       }
     }
-
     const observer = new MutationObserver(callback);
     observer.observe(node, {
       childList: true,
@@ -688,13 +722,11 @@ TabPanel.propTypes = {
    * Provide child elements to be rendered inside of `TabPanel`.
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be added to TabPanel.
    */
   className: PropTypes.string
 };
-
 function TabPanels(_ref8) {
   let {
     children
@@ -705,7 +737,6 @@ function TabPanels(_ref8) {
     }, child);
   });
 }
-
 TabPanels.propTypes = {
   /**
    * Provide child elements to be rendered inside of `TabPanels`.