@carbon/react 1.32.0-rc.0 → 1.33.0-rc.0

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/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,
   /**

package/lib/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;
     /**

package/lib/components/Dropdown/Dropdown.js

@@ -31,6 +31,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId["default"]();
+const {
+  MenuBlur,
+  MenuKeyDownArrowDown,
+  MenuKeyDownArrowUp,
+  MenuKeyDownEscape,
+  ToggleButtonClick
+} = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -75,6 +82,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
@@ -82,12 +90,32 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...downshiftProps,
     items,
     itemToString,
+    highlightedIndex,
     initialSelectedItem,
-    onSelectedItemChange
+    onSelectedItemChange,
+    onStateChange
   };
   const {
     current: dropdownInstanceId
   } = React.useRef(getInstanceId());
+  function onStateChange(changes) {
+    const {
+      type
+    } = changes;
+    switch (type) {
+      case MenuKeyDownArrowDown:
+      case MenuKeyDownArrowUp:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case MenuBlur:
+      case MenuKeyDownEscape:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+      case ToggleButtonClick:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+    }
+  }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
@@ -100,7 +128,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     getLabelProps,
     getMenuProps,
     getItemProps,
-    highlightedIndex,
     selectedItem
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
@@ -179,12 +206,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
   } : {
     onKeyDown: evt => {
-      console.log('typing should be false', isTyping);
       if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
         setIsTyping(true);
       }
       if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        console.log(evt.key);
         if (evt.code === 'Space') {
           evt.preventDefault();
           return;
@@ -254,7 +279,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index$1 || selectedItem === item,
+      isHighlighted: highlightedIndex === index$1,
       title: title,
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index$1]

package/lib/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare function FileUploaderSkeleton({ className, ...rest }: {
+    [x: string]: any;
+    className: any;
+}): JSX.Element;
+declare namespace FileUploaderSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FileUploaderSkeleton;
+export { FileUploaderSkeleton };