@carbon/react 1.61.0-rc.0 → 1.61.0

package/es/components/Dialog/index.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import 'wicg-inert';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface DialogProps extends ReactAttr<HTMLDialogElement> {
@@ -26,6 +25,6 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
      */
     open?: boolean;
 }
-declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export { Dialog };
-export default Dialog;
+declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+export { unstable__Dialog };
+export default unstable__Dialog;

package/es/components/Pagination/Pagination.js

@@ -93,7 +93,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
@@ -218,7 +218,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
+  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`

package/es/components/Search/Search.js

@@ -120,15 +120,15 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    "aria-label": "button",
+    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? uniqueId : undefined,
-    role: "button",
+    role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
     tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
-    "aria-expanded": onExpand && isExpanded ? true : false,
+    "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : undefined,
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon

package/es/components/Tabs/Tabs.d.ts

@@ -77,6 +77,63 @@ declare namespace Tabs {
         selectedIndex: PropTypes.Requireable<number>;
     };
 }
+export interface TabsVerticalProps {
+    /**
+     * Provide child elements to be rendered inside the `TabsVertical`.
+     * These elements should render either `TabsListVertical` or `TabsPanels`
+     */
+    children?: ReactNode;
+    /**
+     * Specify which content tab should be initially selected when the component
+     * is first rendered
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * Option to set a height style only if using vertical variation
+     */
+    height?: string;
+    /**
+     * Provide an optional function which is called
+     * whenever the state of the `Tabs` changes
+     */
+    onChange?(state: {
+        selectedIndex: number;
+    }): void;
+    /**
+     * Control which content panel is currently selected. This puts the component
+     * in a controlled mode and should be used along with `onChange`
+     */
+    selectedIndex?: number;
+}
+declare function TabsVertical({ children, height, defaultSelectedIndex, onChange, selectedIndex: controlledSelectedIndex, ...rest }: TabsVerticalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsVertical {
+    var propTypes: {
+        /**
+         * Provide child elements to be rendered inside the `TabsVertical`.
+         * These elements should render either `TabsListVertical` or `TabsPanels`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify which content tab should be initially selected when the component
+         * is first rendered
+         */
+        defaultSelectedIndex: PropTypes.Requireable<number>;
+        /**
+         * Option to set a height style only if using vertical variation
+         */
+        height: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function which is called whenever the state of the
+         * `Tabs` changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Control which content panel is currently selected. This puts the component
+         * in a controlled mode and should be used along with `onChange`
+         */
+        selectedIndex: PropTypes.Requireable<number>;
+    };
+}
 /**
  * TabList
  */
@@ -195,6 +252,59 @@ declare namespace TabList {
         scrollIntoView: PropTypes.Requireable<boolean>;
     };
 }
+/**
+ * TabListVertical
+ */
+export interface TabListVerticalProps extends DivAttributes {
+    /**
+     * Specify whether the content tab should be activated automatically or
+     * manually
+     */
+    activation?: 'automatic' | 'manual';
+    /**
+     * Provide an accessible label to be read when a user interacts with this
+     * component
+     */
+    'aria-label': string;
+    /**
+     * Provide child elements to be rendered inside `ContentTabs`.
+     * These elements should render a `ContentTab`
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be added to the container node
+     */
+    className?: string;
+    /**
+     * Choose whether to automatically scroll to newly selected tabs
+     * on component rerender
+     */
+    scrollIntoView?: boolean;
+}
+declare function TabListVertical({ activation, 'aria-label': label, children, className: customClassName, scrollIntoView, ...rest }: TabListVerticalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabListVertical {
+    var propTypes: {
+        /**
+         * Specify whether the content tab should be activated automatically or
+         * manually
+         */
+        activation: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessible label to be read when a user interacts with this
+         * component
+         */
+        'aria-label': PropTypes.Validator<string>;
+        /**
+         * Provide child elements to be rendered inside `ContentTabs`.
+         * These elements should render a `ContentTab`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to the container node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
 /**
  * Tab
  */
@@ -308,4 +418,4 @@ declare namespace TabPanels {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
 }
-export { Tabs, Tab, IconTab, TabPanel, TabPanels, TabList };
+export { Tabs, TabsVertical, Tab, IconTab, TabPanel, TabPanels, TabList, TabListVertical, };

package/es/components/Tabs/Tabs.js

@@ -11,7 +11,13 @@ import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef, useLayoutEffect } from 'react';
+import '../Grid/FlexGrid.js';
+import '../Grid/Grid.js';
+import '../Grid/Row.js';
+import '../Grid/Column.js';
+import '../Grid/ColumnHang.js';
+import '../Grid/GridContext.js';
 import { isElement } from 'react-is';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -52,6 +58,7 @@ const TabContext = /*#__PURE__*/React__default.createContext({
   hasSecondaryLabel: false
 });
 const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
+`(max-width: ${breakpoints.md.width})`;
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = /*#__PURE__*/React__default.createContext(0);
@@ -130,6 +137,32 @@ Tabs.propTypes = {
    */
   selectedIndex: PropTypes.number
 };
+({
+  /**
+   * Provide child elements to be rendered inside the `TabsVertical`.
+   * These elements should render either `TabsListVertical` or `TabsPanels`
+   */
+  children: PropTypes.node,
+  /**
+   * Specify which content tab should be initially selected when the component
+   * is first rendered
+   */
+  defaultSelectedIndex: PropTypes.number,
+  /**
+   * Option to set a height style only if using vertical variation
+   */
+  height: PropTypes.string,
+  /**
+   * Provide an optional function which is called whenever the state of the
+   * `Tabs` changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * 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
@@ -154,7 +187,7 @@ function getNextIndex(event, total, index) {
  * TabList
  */
 
-function TabList(_ref2) {
+function TabList(_ref4) {
   let {
     activation = 'automatic',
     'aria-label': label,
@@ -169,7 +202,7 @@ function TabList(_ref2) {
     scrollDebounceWait = 200,
     scrollIntoView,
     ...rest
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     selectedIndex,
@@ -326,10 +359,10 @@ function TabList(_ref2) {
     }
   }, [activation, activeIndex, selectedIndex, isScrollable, children]);
   usePressable(previousButton, {
-    onPress(_ref3) {
+    onPress(_ref5) {
       let {
         longPress
-      } = _ref3;
+      } = _ref5;
       if (!longPress && ref.current) {
         setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
@@ -339,10 +372,10 @@ function TabList(_ref2) {
     }
   });
   usePressable(nextButton, {
-    onPress(_ref4) {
+    onPress(_ref6) {
       let {
         longPress
-      } = _ref4;
+      } = _ref6;
       if (!longPress && ref.current) {
         setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
@@ -444,6 +477,27 @@ TabList.propTypes = {
    */
   scrollIntoView: PropTypes.bool
 };
+({
+  /**
+   * 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 `ContentTabs`.
+   * These elements should render a `ContentTab`
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to the container node
+   */
+  className: PropTypes.string
+});
 
 /**
  * Helper function to set up the behavior when a button is "long pressed".
@@ -490,7 +544,7 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
  * Tab
  */
 
-const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
+const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
   let {
     as = 'button',
     children,
@@ -501,7 +555,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     secondaryLabel,
     renderIcon: Icon,
     ...rest
-  } = _ref5;
+  } = _ref8;
   const prefix = usePrefix();
   const {
     selectedIndex,
@@ -521,6 +575,11 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   const [ignoreHover, setIgnoreHover] = useState(false);
   const id = `${baseId}-tab-${index}`;
   const panelId = `${baseId}-tabpanel-${index}`;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
+    return element.offsetHeight < element.scrollHeight;
+  };
   const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
     [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index,
     [`${prefix}--tabs__nav-item--disabled`]: disabled,
@@ -542,6 +601,18 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
   };
   useEvent(dismissIconRef, 'mouseover', onDismissIconMouseEnter);
   useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
+  useLayoutEffect(() => {
+    function handler() {
+      const elementTabId = document.getElementById(`${id}`);
+      const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
+      isEllipsisActive(newElement);
+    }
+    handler();
+    window.addEventListener('resize', handler);
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, [prefix, id]);
   const handleClose = evt => {
     evt.stopPropagation();
     onTabCloseRequest?.(index);
@@ -596,6 +667,46 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref5, forwardRef) {
     "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
   })));
   const hasIcon = Icon ?? dismissable;
+
+  // should only happen for vertical variation, so no dissimisamble icon is needed here
+  if (isEllipsisApplied) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      label: children,
+      align: "top",
+      leaveDelayMs: 0,
+      autoAlign: true,
+      onMouseEnter: () => false,
+      closeOnActivation: true
+    }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+      "aria-controls": panelId,
+      "aria-disabled": disabled,
+      "aria-selected": selectedIndex === index,
+      ref: ref,
+      id: id,
+      role: "tab",
+      className: className,
+      disabled: disabled,
+      title: children,
+      onClick: evt => {
+        if (disabled) {
+          return;
+        }
+        setSelectedIndex(index);
+        onClick?.(evt);
+      },
+      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(Text, {
+      className: `${prefix}--tabs__nav-item-label`
+    }, children)), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default.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, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
@@ -684,7 +795,7 @@ Tab.propTypes = {
  * IconTab
  */
 
-const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref) {
+const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref9, ref) {
   let {
     children,
     className: customClassName,
@@ -693,7 +804,7 @@ const IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, r
     leaveDelayMs,
     label,
     ...rest
-  } = _ref6;
+  } = _ref9;
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -742,12 +853,12 @@ IconTab.propTypes = {
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, forwardRef) {
+const TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref10, forwardRef) {
   let {
     children,
     className: customClassName,
     ...rest
-  } = _ref7;
+  } = _ref10;
   const prefix = usePrefix();
   const panel = useRef(null);
   const ref = useMergedRefs([forwardRef, panel]);
@@ -822,14 +933,50 @@ TabPanel.propTypes = {
  * TabPanels
  */
 
-function TabPanels(_ref8) {
+function TabPanels(_ref11) {
   let {
     children
-  } = _ref8;
+  } = _ref11;
+  const prefix = usePrefix();
+  const refs = useRef([]);
+  const hiddenStates = useRef([]);
+  useLayoutEffect(() => {
+    const tabContainer = refs.current[0]?.previousElementSibling;
+    const isVertical = tabContainer?.classList.contains(`${prefix}--tabs--vertical`);
+    const parentHasHeight = tabContainer?.parentElement?.style.height;
+
+    // Should only apply same height to vertical Tab Panels without a given height
+    if (isVertical && !parentHasHeight) {
+      hiddenStates.current = refs.current.map(ref => ref?.hidden || false);
+
+      // un-hide hidden Tab Panels to get heights
+      refs.current.forEach(ref => {
+        if (ref) {
+          ref.hidden = false;
+        }
+      });
+
+      // set max height to TabList
+      const heights = refs.current.map(ref => ref?.offsetHeight || 0);
+      const max = Math.max(...heights);
+      tabContainer.style.height = max + 'px';
+
+      // re-hide hidden Tab Panels
+      refs.current.forEach((ref, index) => {
+        if (ref) {
+          ref.hidden = hiddenStates.current[index];
+        }
+      });
+    }
+  });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
       value: index
-    }, child);
+    }, /*#__PURE__*/React__default.cloneElement(child, {
+      ref: element => {
+        refs.current[index] = element;
+      }
+    }));
   }));
 }
 TabPanels.propTypes = {

package/es/components/TextArea/TextArea.js

@@ -87,7 +87,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     onKeyDown: evt => {
       if (!disabled && enableCounter && counterMode === 'word') {
         const key = evt.which;
-        if (maxCount && textCount >= maxCount && key === 32) {
+        if (maxCount && textCount >= maxCount && key === 32 || maxCount && textCount >= maxCount && key === 13) {
           evt.preventDefault();
         }
       }
@@ -220,6 +220,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const ariaAnnouncement = useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
   const input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
+    "aria-readonly": other.readOnly ? true : false,
     className: textareaClasses,
     "aria-invalid": invalid,
     "aria-describedby": ariaDescribedBy,

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

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import 'wicg-inert';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface DialogProps extends ReactAttr<HTMLDialogElement> {
@@ -26,6 +25,6 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
      */
     open?: boolean;
 }
-declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export { Dialog };
-export default Dialog;
+declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+export { unstable__Dialog };
+export default unstable__Dialog;

package/lib/components/Pagination/Pagination.js

@@ -103,7 +103,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx__default["default"]({
     [`${prefix}--pagination__button`]: true,
@@ -228,7 +228,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`

package/lib/components/Search/Search.js

@@ -130,15 +130,15 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "aria-label": "button",
+    "aria-label": onExpand ? 'button' : undefined,
     "aria-labelledby": onExpand ? uniqueId : undefined,
-    role: "button",
+    role: onExpand ? 'button' : undefined,
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
     tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
-    "aria-expanded": onExpand && isExpanded ? true : false,
+    "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : undefined,
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default["default"].createElement(CustomSearchIcon, {
     icon: renderIcon