@carbon/react 1.32.0 → 1.33.0

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useLayoutEffect, useEffect, useState } from 'react';
+import { useLayoutEffect, useEffect, useState, useId as useId$1 } from 'react';
 import setupGetInstanceId from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
@@ -39,6 +39,15 @@ function useId() {
       serverHandoffCompleted = true;
     }
   }, []);
+  if (useId$1) {
+    const id = nativeReactUseId(_prefix, prefix);
+    return id;
+  }
+  return id;
+}
+function nativeReactUseId(_prefix, prefix) {
+  const getId = useId$1();
+  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
   return id;
 }
 

package/lib/components/ComboBox/ComboBox.js

@@ -37,6 +37,14 @@ var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const {
+  keyDownArrowDown,
+  keyDownArrowUp,
+  keyDownEscape,
+  clickButton,
+  blurButton,
+  changeInput
+} = Downshift__default["default"].stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -126,6 +134,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
   const [isFocused, setIsFocused] = React.useState(false);
   const [prevSelectedItem, setPrevSelectedItem] = React.useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const savedOnInputChange = React.useRef(onInputChange);
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
@@ -165,19 +174,43 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       textInput.current.focus();
     }
   };
-  const handleOnStateChange = (newState, _ref3) => {
-    let {
-      setHighlightedIndex
-    } = _ref3;
-    if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
+  const getHighlightedIndex = changes => {
+    if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
       const {
         inputValue
-      } = newState;
+      } = changes;
       const filteredItems = filterItems(items, itemToString, inputValue);
-      setHighlightedIndex(findHighlightedIndex({
+      const indexToHighlight = findHighlightedIndex({
         ...props,
         items: filteredItems
-      }, inputValue));
+      }, inputValue);
+      setHighlightedIndex(indexToHighlight);
+      return indexToHighlight;
+    }
+    return highlightedIndex;
+  };
+  const handleOnStateChange = (changes, _ref3) => {
+    let {
+      setHighlightedIndex: updateHighlightedIndex
+    } = _ref3;
+    const {
+      type
+    } = changes;
+    switch (type) {
+      case keyDownArrowDown:
+      case keyDownArrowUp:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case blurButton:
+      case keyDownEscape:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case clickButton:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case changeInput:
+        updateHighlightedIndex(getHighlightedIndex(changes));
+        break;
     }
   };
   const handleToggleClick = isOpen => event => {
@@ -239,7 +272,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       isOpen,
       inputValue,
       selectedItem,
-      highlightedIndex,
       clearSelection,
       toggleMenu
     } = _ref4;
@@ -337,6 +369,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
       "aria-controls": inputProps['aria-controls'],
+      "aria-owns": getMenuProps().id,
       title: textInput?.current?.value
     }, inputProps, rest, readOnlyEventHandlers, {
       readOnly: readOnly,
@@ -368,7 +401,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index$1 || selectedItem?.id && selectedItem?.id === item.id || false,
+        isHighlighted: highlightedIndex === index$1,
         title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
       }, itemProps), itemToElement ?
       /*#__PURE__*/

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -30,6 +30,11 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 class ContentSwitcher extends React__default["default"].Component {
   constructor() {
     super(...arguments);
+    /**
+     * The DOM references of child `<Switch>`.
+     * @type {Array<Element>}
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       selectedIndex: undefined
@@ -87,11 +92,6 @@ class ContentSwitcher extends React__default["default"].Component {
       }
     });
   }
-  /**
-   * The DOM references of child `<Switch>`.
-   * @type {Array<Element>}
-   * @private
-   */
   static getDerivedStateFromProps(_ref, state) {
     let {
       selectedIndex

package/lib/components/DataTable/DataTable.js

@@ -86,6 +86,16 @@ class DataTable extends React__default["default"].Component {
     var _this;
     super(_props);
     _this = this;
+    /**
+     * Get the props associated with the given header. Mostly used for adding in
+     * sorting behavior.
+     *
+     * @param {object} config
+     * @param {string} config.header the header we want the props for
+     * @param {Function} config.onClick a custom click handler for the header
+     * @param {boolean} config.isSortable
+     * @returns {object}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", _ref => {
       let {
         header,
@@ -116,6 +126,14 @@ class DataTable extends React__default["default"].Component {
         }
       };
     });
+    /**
+     * Get the props associated with the given expand header.
+     *
+     * @param {object} config
+     * @param {Function} config.onClick a custom click handler for the expand header
+     * @param {Function} config.onExpand a custom click handler called when header is expanded
+     * @returns {object}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getExpandHeaderProps", function () {
       let {
         onClick,
@@ -143,12 +161,34 @@ class DataTable extends React__default["default"].Component {
         }) : null])
       };
     });
+    /**
+     * Decorate consumer's `onClick` event handler with sort parameters
+     *
+     * @param {Function} onClick
+     * @param {object} sortParams
+     * @returns {Function}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnHeaderClick", (onClick, sortParams) => {
       return e => onClick(e, sortParams);
     });
+    /**
+     * Decorate consumer's `onClick` event handler with sort parameters
+     *
+     * @param {Function} onClick
+     * @param {object} expandParams
+     * @returns {Function}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnExpandHeaderClick", (onClick, expandParams) => {
       return e => onClick(e, expandParams);
     });
+    /**
+     * Get the props associated with the given row. Mostly used for expansion.
+     *
+     * @param {object} config
+     * @param {object} config.row the row we want the props for
+     * @param {Function} config.onClick a custom click handler for the header
+     * @returns {object}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", _ref2 => {
       let {
         row,
@@ -171,6 +211,16 @@ class DataTable extends React__default["default"].Component {
         disabled: row.disabled
       };
     });
+    /**
+     * Gets the props associated with selection for a header or a row, where
+     * applicable. Most often used to indicate selection status of the table or
+     * for a specific row.
+     *
+     * @param {object} [row] an optional row that we want to access the props for
+     * @param {Function} row.onClick
+     * @param {object} row.row
+     * @returns {object}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getSelectionProps", function () {
       let {
         onClick,
@@ -237,6 +287,9 @@ class DataTable extends React__default["default"].Component {
         onCancel: _this.handleOnCancel
       };
     });
+    /**
+     * Helper utility to get the Table Props.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
@@ -257,6 +310,9 @@ class DataTable extends React__default["default"].Component {
         experimentalAutoAlign
       };
     });
+    /**
+     * Helper utility to get the TableContainer Props.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getTableContainerProps", () => {
       const {
         stickyHeader,
@@ -267,10 +323,18 @@ class DataTable extends React__default["default"].Component {
         useStaticWidth
       };
     });
+    /**
+     * Helper utility to get all the currently selected rows
+     * @returns {Array<string>} the array of rowIds that are currently selected
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
       const row = this.state.rowsById[id];
       return row.isSelected && !row.disabled;
     }));
+    /**
+     * Helper utility to get all of the available rows after applying the filter
+     * @returns {Array<string>} the array of rowIds that are currently included through the filter
+     *  */
     _rollupPluginBabelHelpers.defineProperty(this, "getFilteredRowIds", () => {
       const filteredRowIds = typeof this.state.filterInputValue === 'string' ? this.props.filterRows({
         rowIds: this.state.rowIds,
@@ -284,7 +348,19 @@ class DataTable extends React__default["default"].Component {
       }
       return filteredRowIds;
     });
+    /**
+     * Helper for getting the table prefix for elements that require an
+     * `id` attribute that is unique.
+     *
+     * @returns {string}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getTablePrefix", () => `data-table-${this.instanceId}`);
+    /**
+     * Helper for toggling all selected items in a state. Does not call
+     * setState, so use it when setting state.
+     * @param {object} initialState
+     * @returns {object} object to put into this.setState (use spread operator)
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
       const {
         rowIds
@@ -303,6 +379,10 @@ class DataTable extends React__default["default"].Component {
         }, {})
       };
     });
+    /**
+     * Handler for the `onCancel` event to hide the batch action bar and
+     * deselect all selected rows
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnCancel", () => {
       this.setState(state => {
         return {
@@ -311,6 +391,9 @@ class DataTable extends React__default["default"].Component {
         };
       });
     });
+    /**
+     * Handler for toggling the selection state of all rows in the database
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleSelectAll", () => {
       this.setState(state => {
         const filteredRowIds = this.getFilteredRowIds();
@@ -324,6 +407,12 @@ class DataTable extends React__default["default"].Component {
         };
       });
     });
+    /**
+     * Handler for toggling the selection state of a given row.
+     *
+     * @param {string} rowId
+     * @returns {Function}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnSelectRow", rowId => () => {
       this.setState(state => {
         const row = state.rowsById[rowId];
@@ -365,6 +454,12 @@ class DataTable extends React__default["default"].Component {
         };
       });
     });
+    /**
+     * Handler for toggling the expansion state of a given row.
+     *
+     * @param {string} rowId
+     * @returns {Function}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnExpandRow", rowId => () => {
       this.setState(state => {
         const row = state.rowsById[rowId];
@@ -383,6 +478,9 @@ class DataTable extends React__default["default"].Component {
         };
       });
     });
+    /**
+     * Handler for changing the expansion state of all rows.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnExpandAll", () => {
       this.setState(state => {
         const {
@@ -401,11 +499,23 @@ class DataTable extends React__default["default"].Component {
         };
       });
     });
+    /**
+     * Handler for transitioning to the next sort state of the table
+     *
+     * @param {string} headerKey the field for the header that we are sorting by
+     * @returns {Function}
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleSortBy", headerKey => () => {
       this.setState(state => sorting.getNextSortState(this.props, state, {
         key: headerKey
       }));
     });
+    /**
+     * Event handler for transitioning input value state changes for the table
+     * filter component.
+     *
+     * @param {Event} event
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
         this.setState({
@@ -448,136 +558,6 @@ class DataTable extends React__default["default"].Component {
     }
     return true;
   }
-
-  /**
-   * Get the props associated with the given header. Mostly used for adding in
-   * sorting behavior.
-   *
-   * @param {object} config
-   * @param {string} config.header the header we want the props for
-   * @param {Function} config.onClick a custom click handler for the header
-   * @param {boolean} config.isSortable
-   * @returns {object}
-   */
-
-  /**
-   * Get the props associated with the given expand header.
-   *
-   * @param {object} config
-   * @param {Function} config.onClick a custom click handler for the expand header
-   * @param {Function} config.onExpand a custom click handler called when header is expanded
-   * @returns {object}
-   */
-
-  /**
-   * Decorate consumer's `onClick` event handler with sort parameters
-   *
-   * @param {Function} onClick
-   * @param {object} sortParams
-   * @returns {Function}
-   */
-
-  /**
-   * Decorate consumer's `onClick` event handler with sort parameters
-   *
-   * @param {Function} onClick
-   * @param {object} expandParams
-   * @returns {Function}
-   */
-
-  /**
-   * Get the props associated with the given row. Mostly used for expansion.
-   *
-   * @param {object} config
-   * @param {object} config.row the row we want the props for
-   * @param {Function} config.onClick a custom click handler for the header
-   * @returns {object}
-   */
-
-  /**
-   * Gets the props associated with selection for a header or a row, where
-   * applicable. Most often used to indicate selection status of the table or
-   * for a specific row.
-   *
-   * @param {object} [row] an optional row that we want to access the props for
-   * @param {Function} row.onClick
-   * @param {object} row.row
-   * @returns {object}
-   */
-
-  /**
-   * Helper utility to get the Table Props.
-   */
-
-  /**
-   * Helper utility to get the TableContainer Props.
-   */
-
-  /**
-   * Helper utility to get all the currently selected rows
-   * @returns {Array<string>} the array of rowIds that are currently selected
-   */
-
-  /**
-   * Helper utility to get all of the available rows after applying the filter
-   * @returns {Array<string>} the array of rowIds that are currently included through the filter
-   *  */
-
-  /**
-   * Helper for getting the table prefix for elements that require an
-   * `id` attribute that is unique.
-   *
-   * @returns {string}
-   */
-
-  /**
-   * Helper for toggling all selected items in a state. Does not call
-   * setState, so use it when setting state.
-   * @param {object} initialState
-   * @returns {object} object to put into this.setState (use spread operator)
-   */
-
-  /**
-   * Handler for the `onCancel` event to hide the batch action bar and
-   * deselect all selected rows
-   */
-
-  /**
-   * Handler for toggling the selection state of all rows in the database
-   */
-
-  /**
-   * Handler for toggling the selection state of a given row.
-   *
-   * @param {string} rowId
-   * @returns {Function}
-   */
-
-  /**
-   * Handler for toggling the expansion state of a given row.
-   *
-   * @param {string} rowId
-   * @returns {Function}
-   */
-
-  /**
-   * Handler for changing the expansion state of all rows.
-   */
-
-  /**
-   * Handler for transitioning to the next sort state of the table
-   *
-   * @param {string} headerKey the field for the header that we are sorting by
-   * @returns {Function}
-   */
-
-  /**
-   * Event handler for transitioning input value state changes for the table
-   * filter component.
-   *
-   * @param {Event} event
-   */
-
   render() {
     // eslint-disable-next-line react/prop-types
     const {

package/lib/components/DataTable/Table.js

@@ -110,7 +110,7 @@ const Table = _ref => {
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
   // recalculate table alignment once fonts have loaded
-  if (document?.fonts?.status && document.fonts.status !== 'loaded') {
+  if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
       setTableAlignment();
     });

package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -5,46 +5,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-export interface DataTableSkeletonProps {
+import { TableHTMLAttributes } from 'react';
+export interface DataTableSkeletonHeader {
     /**
-     * Specify an optional className to add.
+     * Optionally specify header label
      */
-    className?: string;
+    header?: string;
+    /**
+     * Optionally specify header key
+     */
+    key?: string;
+}
+export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableElement> {
     /**
      * Specify the number of columns that you want to render in the skeleton state
      */
-    columnCount: number;
+    columnCount?: number;
     /**
      * Optionally specify whether you want the Skeleton to be rendered as a
      * compact DataTable
      */
-    compact: boolean;
+    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
-    headers?: [{
-        header: string;
-        key: string;
-    }] | {
-        header: string;
-        key: string;
-    };
+    headers?: DataTableSkeletonHeader[];
     /**
      * Specify the number of rows that you want to render in the skeleton state
      */
-    rowCount: number;
+    rowCount?: number;
     /**
      * Specify if the table header should be rendered as part of the skeleton.
      */
-    showHeader: boolean;
+    showHeader?: boolean;
     /**
      * Specify if the table toolbar should be rendered as part of the skeleton.
      */
-    showToolbar: boolean;
+    showToolbar?: boolean;
     /**
      * Optionally specify whether you want the DataTable to be zebra striped
      */
-    zebra: boolean;
+    zebra?: boolean;
 }
 declare const DataTableSkeleton: {
     ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {

package/lib/components/DatePicker/DatePicker.d.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ReactNodeLike } from 'prop-types';
-import React, { ChangeEventHandler } from 'react';
+import React from 'react';
+import flatpickr from 'flatpickr';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
@@ -26,11 +27,11 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
      * flatpickr prop passthrough. Allows the user to enter a date directly
      * into the input field
      */
-    allowInput: boolean | undefined;
+    allowInput?: boolean;
     /**
      * The DOM element the flatpickr should be inserted into `<body>` by default.
      */
-    appendTo: object | undefined;
+    appendTo?: object;
     /**
      * The child nodes.
      */
@@ -38,11 +39,11 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * The CSS class names.
      */
-    className: string | undefined;
+    className?: string;
     /**
      * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
      */
-    closeOnSelect: boolean | undefined;
+    closeOnSelect?: boolean;
     /**
      * The date format.
      */
@@ -66,19 +67,19 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * The flatpickr `inline` option.
      */
-    inline: boolean | undefined;
+    inline?: boolean;
     /**
      * Specify whether or not the control is invalid (Fluid only)
      */
-    invalid: boolean | undefined;
+    invalid?: boolean;
     /**
      * Provide the text that is displayed when the control is in error state (Fluid Only)
      */
-    invalidText: ReactNodeLike;
+    invalidText?: ReactNodeLike;
     /**
      * `true` to use the light version.
      */
-    light: boolean;
+    light?: boolean;
     /**
      *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
      */
@@ -94,15 +95,15 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * The `change` event handler.
      */
-    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    onChange?: flatpickr.Options.Hook;
     /**
      * The `close` event handler.
      */
-    onClose?: any;
+    onClose?: flatpickr.Options.Hook;
     /**
      * The `open` event handler.
      */
-    onOpen?: ChangeEventHandler<HTMLSelectElement>;
+    onOpen?: flatpickr.Options.Hook;
     /**
      * whether the DatePicker is to be readOnly
      * if boolean applies to all inputs
@@ -125,7 +126,7 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
-    warnText: ReactNodeLike;
+    warnText?: ReactNodeLike;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/lib/components/DatePicker/DatePicker.js

@@ -688,14 +688,17 @@ DatePicker.propTypes = {
   minDate: PropTypes__default["default"].string,
   /**
    * The `change` event handler.
+   * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
    */
   onChange: PropTypes__default["default"].func,
   /**
    * The `close` event handler.
+   * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
    */
   onClose: PropTypes__default["default"].func,
   /**
    * The `open` event handler.
+   * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
    */
   onOpen: PropTypes__default["default"].func,
   /**