@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/Pagination/Pagination.js

@@ -19,18 +19,15 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { IconButton } from '../IconButton/index.js';
 
 var _CaretLeft, _CaretRight;
-
 function mapPageSizesToObject(sizes) {
   return typeof sizes[0] === 'object' && sizes[0] !== null ? sizes : sizes.map(size => ({
     text: size,
     value: size
   }));
 }
-
 function renderSelectItems(total) {
   let counter = 1;
   let itemArr = [];
-
   while (counter <= total) {
     itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
       key: counter,
@@ -39,24 +36,19 @@ function renderSelectItems(total) {
     }));
     counter++;
   }
-
   return itemArr;
 }
-
 function getPageSize(pageSizes, pageSize) {
   if (pageSize) {
     const hasSize = pageSizes.find(size => {
       return pageSize === size.value;
     });
-
     if (hasSize) {
       return pageSize;
     }
   }
-
   return pageSizes[0].value;
 }
-
 const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref, ref) {
   let {
     backwardText = 'Previous page',
@@ -114,33 +106,31 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     [`${prefix}--pagination__button--forward`]: true,
     [`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
   });
-  const selectItems = renderSelectItems(totalPages); // Sync state with props
+  const selectItems = renderSelectItems(totalPages);
 
+  // Sync state with props
   if (controlledPage !== prevControlledPage) {
     setPage(controlledPage);
     setPrevControlledPage(controlledPage);
   }
-
   if (controlledPageSize !== prevControlledPageSize) {
     setPageSize(getPageSize(pageSizes, controlledPageSize));
     setPrevControlledPageSize(controlledPageSize);
   }
-
   if (!equals(controlledPageSizes, prevPageSizes)) {
     const pageSizes = mapPageSizesToObject(controlledPageSizes);
     const hasPageSize = pageSizes.find(size => {
       return size.value === pageSize;
-    }); // Reset page to 1 if the current pageSize is not included in the new page
-    // sizes
+    });
 
+    // Reset page to 1 if the current pageSize is not included in the new page
+    // sizes
     if (!hasPageSize) {
       setPage(1);
     }
-
     setPageSizes(pageSizes);
     setPrevPageSizes(controlledPageSizes);
   }
-
   function handleSizeChange(event) {
     const pageSize = Number(event.target.value);
     const changes = {
@@ -149,18 +139,14 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     };
     setPage(changes.page);
     setPageSize(changes.pageSize);
-
     if (onChange) {
       onChange(changes);
     }
   }
-
   function handlePageInputChange(event) {
     const page = Number(event.target.value);
-
     if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
       setPage(page);
-
       if (onChange) {
         onChange({
           page,
@@ -169,18 +155,17 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
       }
     }
   }
-
   function incrementPage() {
     const nextPage = page + 1;
-    setPage(nextPage); // when the increment button reaches the last page,
+    setPage(nextPage);
+
+    // when the increment button reaches the last page,
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-
     if (nextPage === totalPages) {
       backBtnRef.current.focus();
     }
-
     if (onChange) {
       onChange({
         page: nextPage,
@@ -189,18 +174,17 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
       });
     }
   }
-
   function decrementPage() {
     const nextPage = page - 1;
-    setPage(nextPage); // when the decrement button reaches the first page,
+    setPage(nextPage);
+
+    // when the decrement button reaches the first page,
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-
     if (nextPage === 1) {
       forwardBtnRef.current.focus();
     }
-
     if (onChange) {
       onChange({
         page: nextPage,
@@ -209,7 +193,6 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
       });
     }
   }
-
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: className,
     ref: ref
@@ -275,80 +258,65 @@ Pagination.propTypes = {
    * The description for the backward icon.
    */
   backwardText: PropTypes.string,
-
   /**
    * The CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * `true` if the backward/forward buttons, as well as the page select elements,  should be disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * The description for the forward icon.
    */
   forwardText: PropTypes.string,
-
   /**
    * The unique ID of this component instance.
    */
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // TODO: remove when v9 is deprecated
-
   /**
    * `true` if the current page should be the last page.
    */
   isLastPage: PropTypes.bool,
-
   /**
    * The function returning a translatable text showing where the current page is,
    * in a manner of the range of items.
    */
   itemRangeText: PropTypes.func,
-
   /**
    * A variant of `itemRangeText`, used if the total number of items is unknown.
    */
   itemText: PropTypes.func,
-
   /**
    * The translatable text indicating the number of items per page.
    */
   itemsPerPageText: PropTypes.string,
-
   /**
    * The callback function called when the current page changes.
    */
   onChange: PropTypes.func,
-
   /**
    * The current page.
    */
   page: PropTypes.number,
-
   /**
    * `true` if the select box to change the page should be disabled.
    */
   pageInputDisabled: PropTypes.bool,
   pageNumberText: PropTypes.string,
-
   /**
    * A function returning PII showing where the current page is.
    */
   pageRangeText: PropTypes.func,
-
   /**
    * The number dictating how many items a page contains.
    */
   pageSize: PropTypes.number,
-
   /**
    * `true` if the select box to change the items per page should be disabled.
    */
   pageSizeInputDisabled: PropTypes.bool,
-
   /**
    * The choices for `pageSize`.
    */
@@ -356,22 +324,18 @@ Pagination.propTypes = {
     text: PropTypes.text,
     value: PropTypes.number
   }))]).isRequired,
-
   /**
    * The translatable text showing the current page.
    */
   pageText: PropTypes.func,
-
   /**
    * `true` if the total number of items is unknown.
    */
   pagesUnknown: PropTypes.bool,
-
   /**
    * Specify the size of the Pagination.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-
   /**
    * The total number of items.
    */

package/es/components/Pagination/experimental/PageSelector.js

@@ -16,7 +16,6 @@ import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 const getInstanceId = setupGetInstanceId();
-
 function PageSelector(_ref) {
   let {
     className,
@@ -29,10 +28,8 @@ function PageSelector(_ref) {
   const prefix = usePrefix();
   const namespace = `${prefix}--unstable-pagination__page-selector`;
   const instanceId = `${namespace}__select-${getInstanceId()}`;
-
   const renderPages = total => {
     const pages = [];
-
     for (let counter = 1; counter <= total; counter += 1) {
       pages.push( /*#__PURE__*/React__default.createElement(SelectItem, {
         key: counter,
@@ -40,10 +37,8 @@ function PageSelector(_ref) {
         text: String(counter)
       }));
     }
-
     return pages;
   };
-
   return /*#__PURE__*/React__default.createElement(Select, _extends({
     className: cx(namespace, className),
     hideLabel: true,
@@ -53,20 +48,15 @@ function PageSelector(_ref) {
     value: currentPage
   }, other), renderPages(totalPages));
 }
-
 PageSelector.propTypes = {
   /** Extra class names to add. */
   className: PropTypes.string,
-
   /** The current page. */
   currentPage: PropTypes.number.isRequired,
-
   /** The unique ID of this component instance. */
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** Translatable string to label the page selector element. */
   labelText: PropTypes.string,
-
   /**
    * Total number of pages.
    * This value is calculated using a valid `totalItems` prop passed to the parent `Unstable_Pagination`.

package/es/components/Pagination/experimental/Pagination.js

@@ -10,16 +10,13 @@ import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
-import Button from '../../Button/Button.js';
 import Select from '../../Select/Select.js';
 import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { IconButton } from '../../IconButton/index.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _CaretLeft, _CaretRight;
-
 function Pagination(_ref) {
   let {
     backwardText,
@@ -47,11 +44,9 @@ function Pagination(_ref) {
   const totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : undefined;
   const backButtonDisabled = disabled || currentPage === 1;
   const forwardButtonDisabled = disabled || currentPage === totalPages;
-
   function onSetPage(newPage) {
     setCurrentPage(Number(newPage));
   }
-
   function incrementPage() {
     const page = currentPage + 1;
     setCurrentPage(page);
@@ -60,7 +55,6 @@ function Pagination(_ref) {
       pageSize: currentPageSize
     });
   }
-
   function decrementPage() {
     const page = currentPage - 1;
     setCurrentPage(page);
@@ -69,7 +63,6 @@ function Pagination(_ref) {
       pageSize: currentPageSize
     });
   }
-
   const namespace = `${prefix}--unstable-pagination`;
   return /*#__PURE__*/React__default.createElement("section", _extends({
     className: cx(namespace, className)
@@ -107,7 +100,7 @@ function Pagination(_ref) {
     className: `${namespace}__text`
   }, pageText(currentPage)), !children && /*#__PURE__*/React__default.createElement("span", {
     className: `${namespace}__text`
-  }, !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)), FeatureFlags.enabled('enable-v11-release') ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top",
     disabled: backButtonDisabled,
     kind: "ghost",
@@ -125,112 +118,73 @@ function Pagination(_ref) {
     }),
     label: forwardText,
     onClick: () => incrementPage()
-  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    className: cx(`${namespace}__button`, `${namespace}__button--backward`, {
-      [`${namespace}__button--no-index`]: backButtonDisabled
-    }),
-    onClick: () => decrementPage(),
-    disabled: backButtonDisabled,
-    hasIconOnly: true,
-    renderIcon: CaretLeft,
-    tooltipAlignment: "center",
-    tooltipPosition: "top",
-    iconDescription: backwardText
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    className: cx(`${namespace}__button`, `${namespace}__button--forward`, {
-      [`${namespace}__button--no-index`]: forwardButtonDisabled
-    }),
-    onClick: () => incrementPage(),
-    disabled: forwardButtonDisabled,
-    hasIconOnly: true,
-    renderIcon: CaretRight,
-    tooltipAlignment: "center",
-    tooltipPosition: "top",
-    iconDescription: forwardText
-  }))));
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));
 }
-
 Pagination.propTypes = {
   /**
    * The description for the backward icon.
    */
   backwardText: PropTypes.string,
-
   /**
    * The children of the pagination component.
    */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
   /**
    * Extra classes to add.
    */
   className: PropTypes.string,
-
   /**
    * `true` if the backward/forward buttons should be disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * The description for the forward icon.
    */
   forwardText: PropTypes.string,
-
   /** The unique ID of this component instance. */
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /**
    * The initial active page when the component is first mounted.
    */
   initialPage: PropTypes.number,
-
   /**
    * The function returning a translatable text showing where the current page is,
    * in a manner of the range of items.
    */
   itemRangeText: PropTypes.func,
-
   /**
    * A variant of `itemRangeText`, used if the total number of items is unknown.
    */
   itemText: PropTypes.func,
-
   /**
    * The translatable text indicating the number of items per page.
    */
   itemsPerPageText: PropTypes.string,
-
   /**
    * The callback function called when the current page changes.
    */
   onChange: PropTypes.func,
-
   /**
    * The function returning a translatable text showing where the current page is,
    * in a manner of the total number of pages.
    */
   pageRangeText: PropTypes.func,
-
   /**
    * The number dictating how many items a page contains.
    */
   pageSize: PropTypes.number,
-
   /**
    * The choices for `pageSize`.
    */
   pageSizes: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * The translatable text showing the current page.
    */
   pageText: PropTypes.func,
-
   /**
    * `true` if total number of pages is unknown.
    */
   pagesUnknown: PropTypes.bool,
-
   /**
    * The total number of items.
    * You need to provide total items to calculate total page,