@carbon/react 1.32.0 → 1.33.0-rc.0

package/README.md

@@ -21,20 +21,35 @@ yarn add @carbon/react
 This package requires [Dart Sass](http://npmjs.com/package/sass) in order to
 compile styles.
 
-If you're new to Sass, or are wondering how to configure Sass for your project,
-we recommend checking out the following resources and links:
+If you're new to Sass, we recommend checking out the following resources and
+links:
 
 - [Sass Basics](https://sass-lang.com/guide)
-- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
+- [The Sass `@use` documentation for Sass modules](https://sass-lang.com/documentation/at-rules/use/)
+- [The Carbon Design System FAQ on Sass](https://carbondesignsystem.com/migrating/faq/#sass-and-package-management)
+
+For info on how to configure Sass for your project, here are some common
+framework's documentation worth reviewing:
+
 - [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
-- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
+- [Remix with Sass](https://remix.run/docs/en/1.18.0/guides/styling#css-preprocessors)
+- [Gatsby with Sass](https://www.gatsbyjs.com/docs/how-to/styling/sass/)
+
+Or if you're just using a bundler:
+
 - [Parcel with Sass](https://v2.parceljs.org/languages/sass/)
 - [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors)
+
+Or anything else not listed above:
+
+- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
+- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
 - [Snowpack with Sass](https://www.snowpack.dev/guides/sass/)
 
-Once you get Sass up and running in your project, configure Sass to include
-`node_modules` in its `includePaths` option. For more information, checkout the
-[configuration](../styles/docs/sass.md#configuration) section in our Sass docs.
+Once you get Sass up and running in your project, you may need to configure Sass
+to include `node_modules` in its `includePaths` option. For more information,
+checkout the [configuration](../styles/docs/sass.md#configuration) section in
+our Sass docs.
 
 ## Usage
 

package/es/components/ComboBox/ComboBox.js

@@ -26,6 +26,14 @@ import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
+const {
+  keyDownArrowDown,
+  keyDownArrowUp,
+  keyDownEscape,
+  clickButton,
+  blurButton,
+  changeInput
+} = Downshift.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -115,6 +123,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [prevSelectedItem, setPrevSelectedItem] = useState();
   const [doneInitialSelectedItem, setDoneInitialSelectedItem] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState();
   const savedOnInputChange = useRef(onInputChange);
   if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
     setDoneInitialSelectedItem(true);
@@ -154,19 +163,43 @@ const ComboBox = /*#__PURE__*/React__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 => {
@@ -228,7 +261,6 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       isOpen,
       inputValue,
       selectedItem,
-      highlightedIndex,
       clearSelection,
       toggleMenu
     } = _ref4;
@@ -326,6 +358,7 @@ const ComboBox = /*#__PURE__*/React__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,
@@ -357,7 +390,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
         key: itemProps.id,
         isActive: selectedItem === item,
-        isHighlighted: highlightedIndex === index || selectedItem?.id && selectedItem?.id === item.id || false,
+        isHighlighted: highlightedIndex === index,
         title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
       }, itemProps), itemToElement ?
       /*#__PURE__*/

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -20,6 +20,11 @@ import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
 class ContentSwitcher extends React__default.Component {
   constructor() {
     super(...arguments);
+    /**
+     * The DOM references of child `<Switch>`.
+     * @type {Array<Element>}
+     * @private
+     */
     _defineProperty(this, "_switchRefs", []);
     _defineProperty(this, "state", {
       selectedIndex: undefined
@@ -77,11 +82,6 @@ class ContentSwitcher extends React__default.Component {
       }
     });
   }
-  /**
-   * The DOM references of child `<Switch>`.
-   * @type {Array<Element>}
-   * @private
-   */
   static getDerivedStateFromProps(_ref, state) {
     let {
       selectedIndex

package/es/components/DataTable/DataTable.js

@@ -76,6 +76,16 @@ class DataTable extends React__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}
+     */
     _defineProperty(this, "getHeaderProps", _ref => {
       let {
         header,
@@ -106,6 +116,14 @@ class DataTable extends React__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}
+     */
     _defineProperty(this, "getExpandHeaderProps", function () {
       let {
         onClick,
@@ -133,12 +151,34 @@ class DataTable extends React__default.Component {
         }) : null])
       };
     });
+    /**
+     * Decorate consumer's `onClick` event handler with sort parameters
+     *
+     * @param {Function} onClick
+     * @param {object} sortParams
+     * @returns {Function}
+     */
     _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}
+     */
     _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}
+     */
     _defineProperty(this, "getRowProps", _ref2 => {
       let {
         row,
@@ -161,6 +201,16 @@ class DataTable extends React__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}
+     */
     _defineProperty(this, "getSelectionProps", function () {
       let {
         onClick,
@@ -227,6 +277,9 @@ class DataTable extends React__default.Component {
         onCancel: _this.handleOnCancel
       };
     });
+    /**
+     * Helper utility to get the Table Props.
+     */
     _defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
@@ -247,6 +300,9 @@ class DataTable extends React__default.Component {
         experimentalAutoAlign
       };
     });
+    /**
+     * Helper utility to get the TableContainer Props.
+     */
     _defineProperty(this, "getTableContainerProps", () => {
       const {
         stickyHeader,
@@ -257,10 +313,18 @@ class DataTable extends React__default.Component {
         useStaticWidth
       };
     });
+    /**
+     * Helper utility to get all the currently selected rows
+     * @returns {Array<string>} the array of rowIds that are currently selected
+     */
     _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
+     *  */
     _defineProperty(this, "getFilteredRowIds", () => {
       const filteredRowIds = typeof this.state.filterInputValue === 'string' ? this.props.filterRows({
         rowIds: this.state.rowIds,
@@ -274,7 +338,19 @@ class DataTable extends React__default.Component {
       }
       return filteredRowIds;
     });
+    /**
+     * Helper for getting the table prefix for elements that require an
+     * `id` attribute that is unique.
+     *
+     * @returns {string}
+     */
     _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)
+     */
     _defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
       const {
         rowIds
@@ -293,6 +369,10 @@ class DataTable extends React__default.Component {
         }, {})
       };
     });
+    /**
+     * Handler for the `onCancel` event to hide the batch action bar and
+     * deselect all selected rows
+     */
     _defineProperty(this, "handleOnCancel", () => {
       this.setState(state => {
         return {
@@ -301,6 +381,9 @@ class DataTable extends React__default.Component {
         };
       });
     });
+    /**
+     * Handler for toggling the selection state of all rows in the database
+     */
     _defineProperty(this, "handleSelectAll", () => {
       this.setState(state => {
         const filteredRowIds = this.getFilteredRowIds();
@@ -314,6 +397,12 @@ class DataTable extends React__default.Component {
         };
       });
     });
+    /**
+     * Handler for toggling the selection state of a given row.
+     *
+     * @param {string} rowId
+     * @returns {Function}
+     */
     _defineProperty(this, "handleOnSelectRow", rowId => () => {
       this.setState(state => {
         const row = state.rowsById[rowId];
@@ -355,6 +444,12 @@ class DataTable extends React__default.Component {
         };
       });
     });
+    /**
+     * Handler for toggling the expansion state of a given row.
+     *
+     * @param {string} rowId
+     * @returns {Function}
+     */
     _defineProperty(this, "handleOnExpandRow", rowId => () => {
       this.setState(state => {
         const row = state.rowsById[rowId];
@@ -373,6 +468,9 @@ class DataTable extends React__default.Component {
         };
       });
     });
+    /**
+     * Handler for changing the expansion state of all rows.
+     */
     _defineProperty(this, "handleOnExpandAll", () => {
       this.setState(state => {
         const {
@@ -391,11 +489,23 @@ class DataTable extends React__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}
+     */
     _defineProperty(this, "handleSortBy", headerKey => () => {
       this.setState(state => getNextSortState(this.props, state, {
         key: headerKey
       }));
     });
+    /**
+     * Event handler for transitioning input value state changes for the table
+     * filter component.
+     *
+     * @param {Event} event
+     */
     _defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
         this.setState({
@@ -438,136 +548,6 @@ class DataTable extends React__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/es/components/DataTable/Table.js

@@ -99,7 +99,7 @@ const Table = _ref => {
   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/es/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/es/components/DatePicker/DatePicker.js

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

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -42,7 +42,7 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedA
     /**
      * Specify the text to be rendered when the input is invalid
      */
-    invalidText: ReactNodeLike;
+    invalidText?: ReactNodeLike;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control
@@ -61,7 +61,7 @@ interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedA
      * Provide a regular expression that the input value must match
      * TODO:need to be rewritten
      */
-    pattern: (props: {
+    pattern?: (props: {
         [key: string]: any;
     }, propName: string, componentName: string) => null | any | Error;
     /**