@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { ChevronLeft, ChevronRight, Close } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo, isValidElement } from 'react';
+import React, { useState, useRef, useCallback, useEffect, forwardRef, createContext, useMemo, isValidElement } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -42,7 +42,7 @@ const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
 
-const TabsContext = /*#__PURE__*/React__default.createContext({
+const TabsContext = /*#__PURE__*/React.createContext({
   baseId: '',
   activeIndex: 0,
   defaultSelectedIndex: 0,
@@ -54,7 +54,7 @@ const TabsContext = /*#__PURE__*/React__default.createContext({
 });
 
 // Used to keep track of position in a tablist
-const TabContext = /*#__PURE__*/React__default.createContext({
+const TabContext = /*#__PURE__*/React.createContext({
   index: 0,
   hasSecondaryLabel: false
 });
@@ -62,21 +62,20 @@ const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
 const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
 
 // Used to keep track of position in a list of tab panels
-const TabPanelContext = /*#__PURE__*/React__default.createContext(0);
+const TabPanelContext = /*#__PURE__*/React.createContext(0);
 
 /**
  * Tabs
  */
 
-function Tabs(_ref) {
-  let {
-    children,
-    defaultSelectedIndex = 0,
-    onChange,
-    selectedIndex: controlledSelectedIndex,
-    dismissable,
-    onTabCloseRequest
-  } = _ref;
+function Tabs({
+  children,
+  defaultSelectedIndex = 0,
+  onChange,
+  selectedIndex: controlledSelectedIndex,
+  dismissable,
+  onTabCloseRequest
+}) {
   const baseId = useId('ccs');
   if (dismissable && !onTabCloseRequest) {
     console.error('dismissable property specified without also providing an onTabCloseRequest property.');
@@ -101,7 +100,7 @@ function Tabs(_ref) {
     selectedIndex,
     setSelectedIndex
   };
-  return /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: value
   }, children);
 }
@@ -141,15 +140,14 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes.number
 };
-function TabsVertical(_ref2) {
-  let {
-    children,
-    height,
-    defaultSelectedIndex = 0,
-    onChange,
-    selectedIndex: controlledSelectedIndex,
-    ...rest
-  } = _ref2;
+function TabsVertical({
+  children,
+  height,
+  defaultSelectedIndex = 0,
+  onChange,
+  selectedIndex: controlledSelectedIndex,
+  ...rest
+}) {
   const [selectedIndex, setSelectedIndex] = useControllableState({
     value: controlledSelectedIndex,
     defaultValue: defaultSelectedIndex,
@@ -160,26 +158,23 @@ function TabsVertical(_ref2) {
   const props = {
     ...rest,
     selectedIndex,
-    onChange: _ref3 => {
-      let {
-        selectedIndex
-      } = _ref3;
-      return setSelectedIndex(selectedIndex);
-    }
+    onChange: ({
+      selectedIndex
+    }) => setSelectedIndex(selectedIndex)
   };
   const isSm = useMatchMedia(smMediaQuery);
   if (!isSm) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/forbid-component-props
-      React__default.createElement(GridAsGridComponent, {
+      React.createElement(GridAsGridComponent, {
         style: {
           height: height
         }
-      }, /*#__PURE__*/React__default.createElement(Tabs, props, children))
+      }, /*#__PURE__*/React.createElement(Tabs, props, children))
     );
   }
-  return /*#__PURE__*/React__default.createElement(Tabs, props, children);
+  return /*#__PURE__*/React.createElement(Tabs, props, children);
 }
 TabsVertical.propTypes = {
   /**
@@ -250,29 +245,28 @@ function getNextIndexVertical(event, total, index) {
  * TabList
  */
 
-function TabList(_ref4) {
-  let {
-    activation = 'automatic',
-    'aria-label': label,
-    children,
-    className: customClassName,
-    contained = false,
-    fullWidth = false,
-    iconSize,
-    leftOverflowButtonProps,
-    light,
-    rightOverflowButtonProps,
-    scrollDebounceWait = 200,
-    scrollIntoView,
-    ...rest
-  } = _ref4;
+function TabList({
+  activation = 'automatic',
+  'aria-label': label,
+  children,
+  className: customClassName,
+  contained = false,
+  fullWidth = false,
+  iconSize,
+  leftOverflowButtonProps,
+  light,
+  rightOverflowButtonProps,
+  scrollDebounceWait = 200,
+  scrollIntoView,
+  ...rest
+}) {
   const {
     activeIndex,
     selectedIndex,
     setSelectedIndex,
     setActiveIndex,
     dismissable
-  } = React__default.useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const prefix = usePrefix();
   const ref = useRef(null);
   const previousButton = useRef(null);
@@ -281,13 +275,13 @@ function TabList(_ref4) {
   const [scrollLeft, setScrollLeft] = useState(0);
   let hasSecondaryLabelTabs = false;
   if (contained) {
-    hasSecondaryLabelTabs = React__default.Children.toArray(children).some(child => {
+    hasSecondaryLabelTabs = React.Children.toArray(children).some(child => {
       const _child = child;
-      return /*#__PURE__*/React__default.isValidElement(child) && !!_child.props.secondaryLabel;
+      return /*#__PURE__*/React.isValidElement(child) && !!_child.props.secondaryLabel;
     });
   }
   const isLg = useMatchMedia(lgMediaQuery);
-  const distributeWidth = fullWidth && contained && isLg && React__default.Children.toArray(children).length < 9;
+  const distributeWidth = fullWidth && contained && isLg && React.Children.toArray(children).length < 9;
   const className = cx(`${prefix}--tabs`, {
     [`${prefix}--tabs--contained`]: contained,
     [`${prefix}--tabs--light`]: light,
@@ -341,10 +335,9 @@ function TabList(_ref4) {
       tabs.current[nextIndex]?.focus();
     }
   }
-  function handleBlur(_ref5) {
-    let {
-      relatedTarget: currentActiveNode
-    } = _ref5;
+  function handleBlur({
+    relatedTarget: currentActiveNode
+  }) {
     if (ref.current?.contains(currentActiveNode)) {
       return;
     }
@@ -455,10 +448,9 @@ function TabList(_ref4) {
     scrollTabIntoView(tab);
   }, [selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref6) {
-      let {
-        longPress
-      } = _ref6;
+    onPress({
+      longPress
+    }) {
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -468,10 +460,9 @@ function TabList(_ref4) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref7) {
-      let {
-        longPress
-      } = _ref7;
+    onPress({
+      longPress
+    }) {
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -480,16 +471,16 @@ function TabList(_ref4) {
       return createLongPressBehavior(ref, 'forward', setScrollLeft);
     }
   });
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, /*#__PURE__*/React__default.createElement("button", _extends({
+  }, /*#__PURE__*/React.createElement("button", _extends({
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-label": "Scroll left",
     ref: previousButton,
     className: previousButtonClasses,
     type: "button"
-  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React__default.createElement(ChevronLeft, null))), /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-label": label,
     ref: ref,
     role: "tablist",
@@ -497,26 +488,26 @@ function TabList(_ref4) {
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React__default.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
+  }), React.Children.map(children, (child, index) => {
+    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: hasSecondaryLabelTabs,
         contained
       }
-    }, /*#__PURE__*/React__default.cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: node => {
         tabs.current[index] = node;
       }
     }));
-  })), /*#__PURE__*/React__default.createElement("button", _extends({
+  })), /*#__PURE__*/React.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))));
+  }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React.createElement(ChevronRight, null))));
 }
 TabList.propTypes = {
   /**
@@ -581,21 +572,20 @@ TabList.propTypes = {
 
 // type TabElement = HTMLElement & { disabled?: boolean };
 
-function TabListVertical(_ref8) {
-  let {
-    activation = 'automatic',
-    'aria-label': label,
-    children,
-    className: customClassName,
-    scrollIntoView,
-    ...rest
-  } = _ref8;
+function TabListVertical({
+  activation = 'automatic',
+  'aria-label': label,
+  children,
+  className: customClassName,
+  scrollIntoView,
+  ...rest
+}) {
   const {
     activeIndex,
     selectedIndex,
     setSelectedIndex,
     setActiveIndex
-  } = React__default.useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const prefix = usePrefix();
   const ref = useRef(null);
   const [isOverflowingBottom, setIsOverflowingBottom] = useState(false);
@@ -618,10 +608,9 @@ function TabListVertical(_ref8) {
       tabs.current[nextIndex]?.focus();
     }
   }
-  function handleBlur(_ref9) {
-    let {
-      relatedTarget: currentActiveNode
-    } = _ref9;
+  function handleBlur({
+    relatedTarget: currentActiveNode
+  }) {
     if (ref.current?.contains(currentActiveNode)) {
       return;
     }
@@ -682,34 +671,34 @@ function TabListVertical(_ref8) {
     };
   });
   if (isSm) {
-    return /*#__PURE__*/React__default.createElement(TabList, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(TabList, _extends({}, rest, {
       "aria-label": label,
       contained: true
     }), children);
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, isOverflowingTop && /*#__PURE__*/React__default.createElement("div", {
+  }, isOverflowingTop && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tab--list-gradient_top`
-  }), /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-label": label,
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React__default.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabContext.Provider, {
+  }), React.Children.map(children, (child, index) => {
+    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: false
       }
-    }, /*#__PURE__*/React__default.cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: node => {
         tabs.current[index] = node;
       }
     }));
-  })), isOverflowingBottom && /*#__PURE__*/React__default.createElement("div", {
+  })), isOverflowingBottom && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tab--list-gradient_bottom`
   }));
 }
@@ -780,18 +769,17 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
-  let {
-    as = 'button',
-    children,
-    className: customClassName,
-    disabled,
-    onClick,
-    onKeyDown,
-    secondaryLabel,
-    renderIcon: Icon,
-    ...rest
-  } = _ref10;
+const Tab = /*#__PURE__*/forwardRef(function Tab({
+  as = 'button',
+  children,
+  className: customClassName,
+  disabled,
+  onClick,
+  onKeyDown,
+  secondaryLabel,
+  renderIcon: Icon,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -799,15 +787,15 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     baseId,
     dismissable,
     onTabCloseRequest
-  } = React__default.useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const {
     index,
     hasSecondaryLabel,
     contained
-  } = React__default.useContext(TabContext);
+  } = React.useContext(TabContext);
   const {
     badgeIndicator
-  } = React__default.useContext(IconTabContext) || {};
+  } = React.useContext(IconTabContext) || {};
   const dismissIconRef = useRef(null);
   const tabRef = useRef(null);
   const ref = useMergedRefs([forwardRef, tabRef]);
@@ -883,12 +871,12 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     }
     onKeyDown?.(event);
   };
-  const DismissIcon = /*#__PURE__*/React__default.createElement("div", {
+  const DismissIcon = /*#__PURE__*/React.createElement("div", {
     className: cx({
       [`${prefix}--tabs__nav-item--close`]: dismissable,
       [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
     })
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     tabIndex: selectedIndex === index && dismissable ? 0 : -1,
     "aria-disabled": disabled,
@@ -903,7 +891,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     onClick: handleClose,
     title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
-  }, /*#__PURE__*/React__default.createElement(Close, {
+  }, /*#__PURE__*/React.createElement(Close, {
     "aria-hidden": selectedIndex === index && dismissable ? 'false' : 'true',
     "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
   })));
@@ -911,14 +899,14 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
 
   // should only happen for vertical variation, so no dismissable icon is needed here
   if (isEllipsisApplied) {
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       label: children,
       align: "top",
       leaveDelayMs: 0,
       autoAlign: true,
       onMouseEnter: () => false,
       closeOnActivation: true
-    }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    }, /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
       "aria-controls": panelId,
       "aria-disabled": disabled,
       "aria-selected": selectedIndex === index,
@@ -938,17 +926,17 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
       onKeyDown: handleKeyDown,
       tabIndex: selectedIndex === index ? '0' : '-1',
       type: "button"
-    }), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tabs__nav-item-label-wrapper`
-    }, /*#__PURE__*/React__default.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       className: `${prefix}--tabs__nav-item-label`
-    }, children)), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.createElement(Text, {
+    }, children)), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React.createElement(Text, {
       as: "div",
       className: `${prefix}--tabs__nav-item-secondary-label`,
       title: secondaryLabel
     }, secondaryLabel)));
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index,
@@ -967,25 +955,25 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref10, forwardRef) {
     onKeyDown: handleKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
-  }, dismissable && Icon && /*#__PURE__*/React__default.createElement("div", {
+  }, dismissable && Icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tabs__nav-item--icon-left`
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     size: 16
-  })), /*#__PURE__*/React__default.createElement(Text, {
+  })), /*#__PURE__*/React.createElement(Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), !dismissable && Icon && /*#__PURE__*/React__default.createElement("div", {
+  }, children), !dismissable && Icon && /*#__PURE__*/React.createElement("div", {
     className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, !dismissable && Icon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React.createElement(Icon, {
     size: 16
-  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.createElement(Text, {
+  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React__default.createElement(BadgeIndicator, null)))), DismissIcon);
+  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React.createElement(BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
@@ -1034,17 +1022,16 @@ Tab.propTypes = {
  */
 
 const IconTabContext = /*#__PURE__*/createContext(false);
-const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11, ref) {
-  let {
-    badgeIndicator,
-    children,
-    className: customClassName,
-    defaultOpen = false,
-    enterDelayMs,
-    leaveDelayMs,
-    label,
-    ...rest
-  } = _ref11;
+const IconTab = /*#__PURE__*/React.forwardRef(function IconTab({
+  badgeIndicator,
+  children,
+  className: customClassName,
+  defaultOpen = false,
+  enterDelayMs,
+  leaveDelayMs,
+  label,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const value = useMemo(() => ({
     badgeIndicator
@@ -1053,16 +1040,16 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref11,
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
     [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
   });
-  return /*#__PURE__*/React__default.createElement(IconTabContext.Provider, {
+  return /*#__PURE__*/React.createElement(IconTabContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default.createElement(Tab, _extends({
+  }, /*#__PURE__*/React.createElement(Tab, _extends({
     className: classNames,
     ref: ref
   }, rest), children)));
@@ -1106,12 +1093,11 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12, forwardRef) {
-  let {
-    children,
-    className: customClassName,
-    ...rest
-  } = _ref12;
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel({
+  children,
+  className: customClassName,
+  ...rest
+}, forwardRef) {
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -1120,8 +1106,8 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12
   const {
     selectedIndex,
     baseId
-  } = React__default.useContext(TabsContext);
-  const index = React__default.useContext(TabPanelContext);
+  } = React.useContext(TabsContext);
+  const index = React.useContext(TabPanelContext);
   const id = `${baseId}-tabpanel-${index}`;
   const tabId = `${baseId}-tab-${index}`;
   const className = cx(`${prefix}--tab-content`, customClassName, {
@@ -1161,7 +1147,7 @@ const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref12
     });
     return () => observer.disconnect();
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
@@ -1186,10 +1172,9 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref13) {
-  let {
-    children
-  } = _ref13;
+function TabPanels({
+  children
+}) {
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);
@@ -1222,10 +1207,10 @@ function TabPanels(_ref13) {
       });
     }
   });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child, index) => {
-    return !isElement(child) ? null : /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, (child, index) => {
+    return !isElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
       value: index
-    }, /*#__PURE__*/React__default.cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: element => {
         refs.current[index] = element;
       }

package/es/components/Tabs/usePressable.js

@@ -20,14 +20,13 @@ import { useRef, useState, useEffect } from 'react';
  *   delayLongPressMs?: number,
  * }} options
  */
-function usePressable(ref) {
-  let {
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
-    delayLongPressMs = 500
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function usePressable(ref, {
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  delayLongPressMs = 500
+} = {}) {
   const savedOnPress = useRef(onPress);
   const savedOnPressIn = useRef(onPressIn);
   const savedOnPressOut = useRef(onPressOut);