@carbon/react 1.50.0 → 1.51.0

package/lib/components/MultiSelect/MultiSelect.js

@@ -82,6 +82,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     sortItems = sorting.defaultSortItems,
     compareItems = sorting.defaultCompareItems,
     clearSelectionText = 'To clear selection, press Delete or Backspace',
+    clearAnnouncement = 'all items have been cleared',
     clearSelectionDescription = 'Total items selected: ',
     light,
     invalid,
@@ -113,6 +114,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const [isOpen, setIsOpen] = React.useState(open || false);
   const [prevOpenProp, setPrevOpenProp] = React.useState(open);
   const [topItems, setTopItems] = React.useState([]);
+  const [itemsCleared, setItemsCleared] = React.useState(false);
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
@@ -159,7 +161,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           clearSelection();
           e.stopPropagation();
         }
+        if (!isOpen && match.match(e, keys.Delete) && selectedItems.length > 0) {
+          setItemsCleared(true);
+        }
         if ((match.match(e, keys.Space) || match.match(e, keys.ArrowDown) || match.match(e, keys.Enter)) && !isOpen) {
+          setItemsCleared(false);
           setIsOpenWrapper(true);
         }
       }
@@ -394,7 +400,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     }, itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
     }, item)) : itemText)));
-  }))), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), itemsCleared && /*#__PURE__*/React__default["default"].createElement("span", {
+    "aria-live": "assertive",
+    "aria-label": clearAnnouncement
+  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText));

package/lib/components/NumberInput/NumberInput.js

@@ -140,7 +140,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
       return;
     }
     const state = {
-      value: event.target.value,
+      value: Number(event.target.value),
       direction: value < event.target.value ? 'up' : 'down'
     };
     setValue(state.value);

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * 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 React from 'react';
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Additional CSS class names.
+     */
+    className?: 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?: boolean;
+    /**
+     * The number of items to be shown.
+     */
+    itemsShown?: number;
+    /**
+     * Whether user should be able to loop through the items when reaching first / last.
+     */
+    loop?: boolean;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (data: number) => void;
+    /**
+     * The index of current page.
+     */
+    page?: number;
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+    /**
+     * Specify a custom translation function that takes in a message identifier
+     * and returns the localized string for the message
+     */
+    translateWithId?: (id: string) => string;
+}
+declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
+export default PaginationNav;

package/lib/components/PaginationNav/PaginationNav.js

@@ -37,23 +37,23 @@ function translateWithId(messageId) {
 
 // https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
 function usePrevious(value) {
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   React.useEffect(() => {
     ref.current = value;
   });
   return ref.current;
 }
-function getCuts(page, totalItems, itemsThatFit) {
+function calculateCuts(page, totalItems, itemsDisplayedOnPage) {
   let splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-  if (itemsThatFit >= totalItems) {
+  if (itemsDisplayedOnPage >= totalItems) {
     return {
       front: 0,
       back: 0
     };
   }
-  const split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
+  const split = splitPoint || Math.ceil(itemsDisplayedOnPage / 2) - 1;
   let frontHidden = page + 1 - split;
-  let backHidden = totalItems - page - (itemsThatFit - split) + 1;
+  let backHidden = totalItems - page - (itemsDisplayedOnPage - split) + 1;
   if (frontHidden <= 1) {
     backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;
     frontHidden = 0;
@@ -103,15 +103,15 @@ function PaginationItem(_ref2) {
     }),
     onClick: onClick,
     "data-page": page,
-    "aria-current": isActive ? 'page' : null
+    "aria-current": isActive ? 'page' : undefined
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
 function PaginationOverflow(_ref3) {
   let {
-    fromIndex,
-    count,
+    fromIndex = NaN,
+    count = NaN,
     onSelect,
     // eslint-disable-next-line react/prop-types
     disableOverflow,
@@ -145,7 +145,7 @@ function PaginationOverflow(_ref3) {
       "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
       onChange: e => {
         const index = Number(e.target.value);
-        onSelect(index);
+        onSelect?.(index);
       }
     }, _option || (_option = /*#__PURE__*/React__default["default"].createElement("option", {
       value: "",
@@ -165,7 +165,7 @@ function PaginationOverflow(_ref3) {
       page: fromIndex + 1,
       translateWithId: t,
       onClick: () => {
-        onSelect(fromIndex);
+        onSelect?.(fromIndex);
       }
     });
   }
@@ -175,7 +175,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   let {
     className,
     onChange = () => {},
-    totalItems,
+    totalItems = NaN,
     disableOverflow,
     itemsShown = 10,
     page = 0,
@@ -184,8 +184,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     ...rest
   } = _ref4;
   const [currentPage, setCurrentPage] = React.useState(page);
-  const [itemsThatFit, setItemsThatFit] = React.useState(itemsShown >= 4 ? itemsShown : 4);
-  const [cuts, setCuts] = React.useState(getCuts(currentPage, totalItems, itemsThatFit));
+  const [itemsDisplayedOnPage, setItemsDisplayedOnPage] = React.useState(itemsShown >= 4 ? itemsShown : 4);
+  const [cuts, setCuts] = React.useState(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.usePrefix();
   const [isOverflowDisabled, setIsOverFlowDisabled] = React.useState(disableOverflow);
@@ -216,7 +216,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }
   function pageWouldBeHidden(page) {
-    const startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
+    const startOffset = itemsDisplayedOnPage <= 4 && page > 1 ? 0 : 1;
     const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
     const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
@@ -229,20 +229,20 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // re-calculate cuts if props.totalItems or props.itemsShown change
   React.useEffect(() => {
-    setItemsThatFit(itemsShown >= 4 ? itemsShown : 4);
-    setCuts(getCuts(currentPage, totalItems, itemsShown));
+    setItemsDisplayedOnPage(itemsShown >= 4 ? itemsShown : 4);
+    setCuts(calculateCuts(currentPage, totalItems, itemsShown));
   }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // update cuts if necessary whenever currentPage changes
   React.useEffect(() => {
     if (pageWouldBeHidden(currentPage)) {
-      const delta = currentPage - prevPage || 0;
+      const delta = currentPage - (prevPage || 0);
       if (delta > 0) {
-        const splitPoint = itemsThatFit - 3;
-        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
+        const splitPoint = itemsDisplayedOnPage - 3;
+        setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
       } else {
-        const splitPoint = itemsThatFit > 4 ? 2 : 1;
-        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
+        const splitPoint = itemsDisplayedOnPage > 4 ? 2 : 1;
+        setCuts(calculateCuts(currentPage, totalItems, itemsDisplayedOnPage, splitPoint));
       }
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -253,7 +253,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   const classNames = cx__default["default"](`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
-  const startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
+  const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
@@ -269,7 +269,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   }),
   // render first item if at least 5 items can be displayed or
   // 4 items can be displayed and the current page is either 0 or 1
-  (itemsThatFit >= 5 || itemsThatFit <= 4 && currentPage <= 1) && /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
+  (itemsDisplayedOnPage >= 5 || itemsDisplayedOnPage <= 4 && currentPage <= 1) && /*#__PURE__*/React__default["default"].createElement(PaginationItem, {
     page: 1,
     translateWithId: t,
     isActive: currentPage === 0,
@@ -411,6 +411,5 @@ PaginationNav.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-var PaginationNav$1 = PaginationNav;
 
-exports["default"] = PaginationNav$1;
+exports["default"] = PaginationNav;

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * 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 PaginationNav from './PaginationNav';
+export default PaginationNav;
+export { PaginationNav };

package/lib/components/Tabs/Tabs.js

@@ -239,7 +239,8 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
       event.preventDefault();
-      const activeTabs = tabs.current.filter(tab => !tab.disabled);
+      const filtredTabs = tabs.current.filter(tab => tab !== null);
+      const activeTabs = filtredTabs.filter(tab => !tab.disabled);
       const currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
       const nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
       if (activation === 'automatic') {

package/lib/components/Tile/Tile.d.ts

@@ -180,11 +180,11 @@ export interface TileAboveTheFoldContentProps {
      */
     children?: ReactNode;
 }
-export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TileAboveTheFoldContent: React.ForwardRefExoticComponent<TileAboveTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface TileBelowTheFoldContentProps {
     /**
      * The child nodes.
      */
     children?: ReactNode;
 }
-export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TileBelowTheFoldContent: React.ForwardRefExoticComponent<TileBelowTheFoldContentProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Tile/Tile.js

@@ -614,7 +614,7 @@ const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRe
     children
   } = _ref5;
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement("span", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
     className: `${prefix}--tile-content__above-the-fold`
   }, children);
@@ -631,7 +631,7 @@ const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRe
     children
   } = _ref6;
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement("span", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref,
     className: `${prefix}--tile-content__below-the-fold`
   }, children);

package/lib/index.js

@@ -76,6 +76,7 @@ var OrderedList = require('./components/OrderedList/OrderedList.js');
 var index$9 = require('./components/OverflowMenu/index.js');
 var OverflowMenuItem = require('./components/OverflowMenuItem/OverflowMenuItem.js');
 var Pagination_Skeleton = require('./components/Pagination/Pagination.Skeleton.js');
+var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
 var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
 var ProgressIndicator_Skeleton = require('./components/ProgressIndicator/ProgressIndicator.Skeleton.js');
 var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
@@ -222,7 +223,6 @@ var TableToolbarMenu = require('./components/DataTable/TableToolbarMenu.js');
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var Pagination$1 = require('./components/Pagination/Pagination.js');
-var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
 var ControlledPasswordInput = require('./components/TextInput/ControlledPasswordInput.js');
 var PasswordInput = require('./components/TextInput/PasswordInput.js');
 var RadioTile = require('./components/RadioTile/RadioTile.js');
@@ -310,6 +310,7 @@ exports.OrderedList = OrderedList["default"];
 exports.OverflowMenu = index$9["default"];
 exports.OverflowMenuItem = OverflowMenuItem["default"];
 exports.PaginationSkeleton = Pagination_Skeleton["default"];
+exports.PaginationNav = PaginationNav["default"];
 exports.PrimaryButton = PrimaryButton["default"];
 exports.ProgressIndicatorSkeleton = ProgressIndicator_Skeleton["default"];
 exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;
@@ -488,7 +489,6 @@ exports.TableToolbarMenu = TableToolbarMenu["default"];
 exports.FilterableMultiSelect = FilterableMultiSelect["default"];
 exports.MultiSelect = MultiSelect["default"];
 exports.Pagination = Pagination$1["default"];
-exports.PaginationNav = PaginationNav["default"];
 exports.ControlledPasswordInput = ControlledPasswordInput["default"];
 exports.PasswordInput = PasswordInput["default"];
 exports.RadioTile = RadioTile["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.50.0",
+  "version": "1.51.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,7 @@
     "@carbon/feature-flags": "^0.16.0",
     "@carbon/icons-react": "^11.36.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.50.0",
+    "@carbon/styles": "^1.51.0",
     "@ibm/telemetry-js": "^1.2.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.31.0",
+    "@carbon/themes": "^11.32.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "eb7d66891262363368b48211b9fd1caa78fa58f9"
+  "gitHead": "957667fa7f197b544f6cb336814daa7074daaaee"
 }

package/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';