@carbon/react 1.45.0 → 1.46.0

package/README.md

@@ -113,3 +113,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect metrics data. By installing this
+package as a dependency you are agreeing to telemetry collection. To opt out,
+see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -1,4 +1,5 @@
 import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { ReactNodeLike } from 'prop-types';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
@@ -69,6 +70,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the CSS selectors that match the floating menus. */
     selectorsFloatingMenus?: Array<string | null | undefined>;
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
 export default ComposedModal;

package/es/components/ComposedModal/ComposedModal.js

@@ -81,6 +81,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     selectorsFloatingMenus,
     size,
     launcherButtonRef,
+    slug,
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -149,7 +150,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       setIsOpen(false);
     }
   }
-  const modalClass = cx(`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const modalClass = cx(`${prefix}--modal`, {
+    'is-visible': isOpen,
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
+  }, customClassName);
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
@@ -202,6 +207,14 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, isOpen]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     role: "presentation",
     ref: ref,
@@ -223,7 +236,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -293,7 +306,11 @@ ComposedModal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+   */
+  slug: PropTypes.node
 };
 
 export { ModalBody, ComposedModal as default };

package/es/components/Grid/Column.js

@@ -225,10 +225,10 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    // If our breakpoint is a string, the user has specified a percent
+    // If our breakpoint is a string, the user might have specified a percent
     // they'd like this column to span.
     if (typeof breakpoint === 'string') {
-      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace('%', '')}`);
       continue;
     }
 

package/es/components/Modal/Modal.d.ts

@@ -4,6 +4,7 @@
  * 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 { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
@@ -150,6 +151,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify the size variant.
      */
     size?: ModalSize;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/components/Modal/Modal.js

@@ -59,6 +59,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     loadingDescription,
     loadingIconDescription,
     onLoadingSuccess = noopFn,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -124,7 +125,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
   }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -191,6 +193,14 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   const modalButton = /*#__PURE__*/React__default.createElement("button", {
     className: modalCloseButtonClass,
     type: "button",
@@ -222,7 +232,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
     id: modalBodyId,
     className: contentClasses
   }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
@@ -432,7 +442,11 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(ModalSizes)
+  size: PropTypes.oneOf(ModalSizes),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+   */
+  slug: PropTypes.node
 };
 
 export { ModalSizes, Modal as default };

package/es/components/PaginationNav/PaginationNav.js

@@ -103,9 +103,28 @@ function PaginationOverflow(_ref3) {
     fromIndex,
     count,
     onSelect,
+    // eslint-disable-next-line react/prop-types
+    disableOverflow,
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: `${prefix}--pagination-nav__list-item`
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--pagination-nav__select`
+    }, /*#__PURE__*/React__default.createElement("select", {
+      className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
+      "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
+      disabled: true
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--pagination-nav__select-icon-wrapper`
+    }, /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
+      className: `${prefix}--pagination-nav__select-icon`
+    }))));
+  }
   if (count > 1) {
     return /*#__PURE__*/React__default.createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -147,6 +166,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -158,6 +178,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   const [cuts, setCuts] = useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
+  const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -216,6 +237,9 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
   const classNames = cx(`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
@@ -245,7 +269,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
     fromIndex: startOffset,
     count: cuts.front,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render items between overflows
   [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default.createElement(PaginationItem, {
@@ -259,7 +284,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   })), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render last item unless there is only one in total
   totalItems > 1 && /*#__PURE__*/React__default.createElement(PaginationItem, {
@@ -342,6 +368,13 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes.bool,
+  // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -1,4 +1,5 @@
 import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { ReactNodeLike } from 'prop-types';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
@@ -69,6 +70,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the CSS selectors that match the floating menus. */
     selectorsFloatingMenus?: Array<string | null | undefined>;
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
 export default ComposedModal;

package/lib/components/ComposedModal/ComposedModal.js

@@ -91,6 +91,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     selectorsFloatingMenus,
     size,
     launcherButtonRef,
+    slug,
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
@@ -159,7 +160,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       setIsOpen(false);
     }
   }
-  const modalClass = cx__default["default"](`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const modalClass = cx__default["default"](`${prefix}--modal`, {
+    'is-visible': isOpen,
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
+  }, customClassName);
   const containerClass = cx__default["default"](`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
@@ -212,6 +217,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, isOpen]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "presentation",
     ref: ref,
@@ -233,7 +246,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -303,7 +316,11 @@ ComposedModal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+   */
+  slug: PropTypes__default["default"].node
 };
 
 exports.ModalBody = ModalBody;

package/lib/components/Grid/Column.js

@@ -254,10 +254,10 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    // If our breakpoint is a string, the user has specified a percent
+    // If our breakpoint is a string, the user might have specified a percent
     // they'd like this column to span.
     if (typeof breakpoint === 'string') {
-      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace('%', '')}`);
       continue;
     }
 

package/lib/components/Modal/Modal.d.ts

@@ -4,6 +4,7 @@
  * 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 { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
@@ -150,6 +151,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify the size variant.
      */
     size?: ModalSize;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/lib/components/Modal/Modal.js

@@ -69,6 +69,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     loadingDescription,
     loadingIconDescription,
     onLoadingSuccess = noopFn.noopFn,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -134,7 +135,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const modalClasses = cx__default["default"](`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
   }, className);
   const containerClasses = cx__default["default"](`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -201,6 +203,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   const modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
     className: modalCloseButtonClass,
     type: "button",
@@ -232,7 +242,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     id: modalBodyId,
     className: contentClasses
   }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -442,7 +452,11 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(ModalSizes)
+  size: PropTypes__default["default"].oneOf(ModalSizes),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+   */
+  slug: PropTypes__default["default"].node
 };
 
 exports.ModalSizes = ModalSizes;

package/lib/components/PaginationNav/PaginationNav.js

@@ -113,9 +113,28 @@ function PaginationOverflow(_ref3) {
     fromIndex,
     count,
     onSelect,
+    // eslint-disable-next-line react/prop-types
+    disableOverflow,
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix.usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: `${prefix}--pagination-nav__list-item`
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--pagination-nav__select`
+    }, /*#__PURE__*/React__default["default"].createElement("select", {
+      className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
+      "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
+      disabled: true
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--pagination-nav__select-icon-wrapper`
+    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.OverflowMenuHorizontal, {
+      className: `${prefix}--pagination-nav__select-icon`
+    }))));
+  }
   if (count > 1) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -157,6 +176,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -168,6 +188,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   const [cuts, setCuts] = React.useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.usePrefix();
+  const [isOverflowDisabled, setIsOverFlowDisabled] = React.useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -226,6 +247,9 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  React.useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
   const classNames = cx__default["default"](`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
@@ -255,7 +279,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   }), /*#__PURE__*/React__default["default"].createElement(PaginationOverflow, {
     fromIndex: startOffset,
     count: cuts.front,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render items between overflows
   [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
@@ -269,7 +294,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   })), /*#__PURE__*/React__default["default"].createElement(PaginationOverflow, {
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render last item unless there is only one in total
   totalItems > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
@@ -352,6 +378,13 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes__default["default"].bool,
+  // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,8 @@
     "icons/index.esm.js",
     "icons/index.d.ts",
     "icons/package.json",
-    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json",
+    "telemetry.yml"
   ],
   "keywords": [
     "ibm",
@@ -36,7 +37,7 @@
   "scripts": {
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
     "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
-    "postinstall": "carbon-telemetry collect --install",
+    "postinstall": "npx -y @ibm/telemetry-js --config=telemetry.yml",
     "storybook": "storybook dev -p 3000",
     "storybook:build": "storybook build"
   },
@@ -48,10 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.32.0",
+    "@carbon/icons-react": "^11.33.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.45.0",
-    "@carbon/telemetry": "0.1.0",
+    "@carbon/styles": "^1.46.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "8.2.3",
@@ -137,5 +137,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "670dffcae241d9bf9b3a64ea06e100e7e5a08c37"
+  "gitHead": "5dfe589ff6ce498c8f8040a55f05a15624e84df5"
 }