@carbon/react 1.50.0-rc.0 → 1.51.0-rc.0

package/lib/components/DataTable/DataTable.js

@@ -113,6 +113,7 @@ class DataTable extends React__default["default"].Component {
         sortDirection,
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
+        slug: header.slug,
         onClick: event => {
           const nextSortState = sorting.getNextSortState(this.props, this.state, {
             key: header.key
@@ -349,6 +350,23 @@ class DataTable extends React__default["default"].Component {
         useStaticWidth
       };
     });
+    /**
+     * Get the props associated with the given table cell.
+     *
+     * @param {object} config
+     * @param {object} config.cell the cell we want the props for
+     * @returns {object}
+     */
+    _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", _ref4 => {
+      let {
+        cell,
+        ...rest
+      } = _ref4;
+      return {
+        ...rest,
+        hasSlugHeader: cell.hasSlugHeader
+      };
+    });
     /**
      * Helper utility to get all the currently selected rows
      * @returns {Array<string>} the array of rowIds that are currently selected
@@ -622,6 +640,7 @@ class DataTable extends React__default["default"].Component {
       getBatchActionProps: this.getBatchActionProps,
       getTableProps: this.getTableProps,
       getTableContainerProps: this.getTableContainerProps,
+      getCellProps: this.getCellProps,
       // Custom event handlers
       onInputChange: this.handleOnInputValueChange,
       // Expose internal state change actions

package/lib/components/DataTable/TableCell.d.ts

@@ -4,7 +4,32 @@
  * 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 { TdHTMLAttributes } from 'react';
-export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
-declare const TableCell: React.FC<TableCellProps>;
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
+    /**
+     * Pass in children that will be embedded in the table header label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The width of the expanded row's internal cell
+     */
+    colSpan?: number;
+    /**
+     * Specify if the table cell is in an AI column
+     */
+    hasSlugHeader?: boolean;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    headers?: string;
+}
+declare const TableCell: {
+    ({ children, className, hasSlugHeader, colSpan, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TableCell;

package/lib/components/DataTable/TableCell.js

@@ -9,11 +9,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrapComponent = require('../../tools/wrapComponent.js');
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
 
-const TableCell = wrapComponent["default"]({
-  name: 'TableCell',
-  type: 'td'
-});
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const TableCell = _ref => {
+  let {
+    children,
+    className,
+    hasSlugHeader,
+    colSpan,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tableCellClassNames = cx__default["default"](className, {
+    [`${prefix}--table-cell--column-slug`]: hasSlugHeader
+  });
+  return /*#__PURE__*/React__default["default"].createElement("td", _rollupPluginBabelHelpers["extends"]({
+    className: tableCellClassNames ? tableCellClassNames : undefined,
+    colSpan: colSpan
+  }, rest), children);
+};
+TableCell.displayName = 'TableCell';
 
 exports["default"] = TableCell;

package/lib/components/DataTable/TableExpandRow.js

@@ -58,7 +58,7 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef((_ref,
     [`${prefix}--parent-row`]: true,
     [`${prefix}--expandable-row`]: isExpanded,
     [`${prefix}--data-table--selected`]: isSelected,
-    [`${prefix}--parent-row--slug`]: rowHasSlug
+    [`${prefix}--data-table--slug-row`]: rowHasSlug
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/DataTable/TableHeader.js

@@ -134,13 +134,13 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     className: `${prefix}--table-sort__flex`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
+  }, children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
   }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }))));
+  }), normalizedSlug)));
 });
 TableHeader.propTypes = {
   /**

package/lib/components/DataTable/TableRow.js

@@ -24,10 +24,21 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableRow = props => {
   const prefix = usePrefix.usePrefix();
+  let rowHasSlug;
+  if (props?.children) {
+    React__default["default"].Children.toArray(props.children).map(child => {
+      if (child.type?.displayName === 'TableSlugRow') {
+        if (child.props.slug) {
+          rowHasSlug = true;
+        }
+      }
+    });
+  }
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
   const className = cx__default["default"](props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected
+    [`${prefix}--data-table--selected`]: props.isSelected,
+    [`${prefix}--data-table--slug-row`]: rowHasSlug
   });
   const cleanProps = {
     ...omit__default["default"](props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),

package/lib/components/DataTable/TableToolbarSearch.d.ts

@@ -6,12 +6,12 @@
  */
 import PropTypes from 'prop-types';
 import { ChangeEvent, FocusEvent, ReactNode } from 'react';
-export interface TableToolbarSearchProps {
-    children?: ReactNode;
-    /**
-     * Provide an optional class name for the search container
-     */
-    className?: string;
+import { SearchProps } from '../Search';
+import { InternationalProps } from '../../types/common';
+export type TableToolbarTranslationKey = 'carbon.table.toolbar.search.label' | 'carbon.table.toolbar.search.placeholder';
+type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
+export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
+export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, InternationalProps<TableToolbarTranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
      */
@@ -20,70 +20,43 @@ export interface TableToolbarSearchProps {
      * Provide an optional default value for the Search component
      */
     defaultValue?: string;
-    /**
-     * Specifies if the search should be disabled
-     */
-    disabled?: boolean;
     /**
      * Specifies if the search should expand
      */
     expanded?: boolean;
-    /**
-     * Provide an optional id for the search container
-     */
-    id?: string;
     /**
      * Provide an optional label text for the Search component icon
      */
-    labelText?: string;
+    labelText?: ReactNode;
     /**
      * Provide an optional function to be called when the search input loses focus, this will be
      * passed the event as the first parameter and a function to handle the expanding of the search
      * input as the second
      */
-    onBlur?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    onBlur?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
     /**
      * Provide an optional hook that is called each time the input is updated
      */
     onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
-    /**
-     * Optional callback called when the search value is cleared.
-     */
-    onClear?: () => void;
     /**
      * Provide an optional hook that is called each time the input is expanded
      */
-    onExpand?: (event: FocusEvent<HTMLInputElement>, value: boolean) => void;
+    onExpand?(event: FocusEvent<HTMLInputElement>, newExpand: boolean): void;
     /**
      * Provide an optional function to be called when the search input gains focus, this will be
      * passed the event as the first parameter and a function to handle the expanding of the search
      * input as the second.
      */
-    onFocus?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    onFocus?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
     /**
-     * Whether the search should be allowed to expand
+     * Whether the search should be allowed to expand.
      */
     persistent?: boolean;
-    /**
-     * Provide an optional placeholder text for the Search component
-     */
-    placeholder?: string;
     /**
      * Provide an optional className for the overall container of the Search
      */
     searchContainerClass?: string;
-    /**
-     * Specify the size of the Search
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
-     */
     tabIndex?: number | string;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const TableToolbarSearch: {
     ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -58,7 +58,7 @@ const TableToolbarSearch = _ref => {
   const {
     current: controlled
   } = React.useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = React.useState(defaultExpanded || defaultValue);
+  const [expandedState, setExpandedState] = React.useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = React.useState(defaultValue || '');
   const uniqueId = React.useMemo(getInstanceId, []);

package/lib/components/DataTable/tools/normalize.js

@@ -52,7 +52,8 @@ const normalize = function (rows, headers) {
     }
     headers.forEach((_ref, i) => {
       let {
-        key
+        key,
+        slug
       } = _ref;
       const id = cells.getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
@@ -63,6 +64,7 @@ const normalize = function (rows, headers) {
         isEditing: false,
         isValid: true,
         errors: null,
+        hasSlugHeader: !!slug,
         info: {
           header: key
         }

package/lib/components/Modal/Modal.js

@@ -21,6 +21,8 @@ var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
+var debounce = require('lodash.debounce');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../IconButton/index.js');
@@ -35,6 +37,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
 const getInstanceId = setupGetInstanceId["default"]();
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
@@ -76,9 +79,11 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const prefix = usePrefix.usePrefix();
   const button = React.useRef(null);
   const secondaryButton = React.useRef();
+  const contentRef = React.useRef(null);
   const innerModal = React.useRef(null);
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
+  const [isScrollable, setIsScrollable] = React.useState(false);
   const modalInstanceId = `modal-${getInstanceId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
@@ -144,7 +149,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--modal-container--full-width`]: isFullWidth
   });
   const contentClasses = cx__default["default"](`${prefix}--modal-content`, {
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
   });
   const footerClasses = cx__default["default"](`${prefix}--modal-footer`, {
     [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
@@ -156,7 +161,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const modalHeadingStr = asStringOrUndefined(modalHeading);
   const ariaLabel = modalLabelStr || ariaLabelProp || modalAriaLabel || modalHeadingStr;
   const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
-  const hasScrollingContentProps = hasScrollingContent ? {
+  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
     tabIndex: 0,
     role: 'region',
     'aria-label': ariaLabel,
@@ -204,6 +209,22 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+  useIsomorphicEffect["default"](() => {
+    if (contentRef.current) {
+      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+    }
+    function handler() {
+      if (contentRef.current) {
+        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+      }
+    }
+    const debouncedHandler = debounce__default["default"](handler, 200);
+    window.addEventListener('resize', debouncedHandler);
+    return () => {
+      debouncedHandler.cancel();
+      window.removeEventListener('resize', debouncedHandler);
+    };
+  }, []);
 
   // Slug is always size `lg`
   let normalizedSlug;
@@ -247,11 +268,10 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    ref: contentRef,
     id: modalBodyId,
     className: contentClasses
-  }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--modal-content--overflow-indicator`
-  }), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
+  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
     className: footerClasses,
     "aria-busy": loadingActive
   }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -51,6 +51,10 @@ interface MultiSelectSortingProps<ItemType> {
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
     className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes that all items are deleted
+     */
+    clearAnnouncement?: string;
     /**
      * Specify the text that should be read for screen readers that describes total items selected
      */

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') {