@carbon/react 1.40.0 → 1.41.0-rc.0

package/es/components/DataTable/TableBody.d.ts

@@ -22,8 +22,5 @@ declare const TableBody: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        'aria-live': string;
-    };
 };
 export default TableBody;

package/es/components/DataTable/TableBody.js

@@ -16,6 +16,7 @@ const TableBody = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/React__default.createElement("tbody", _extends({
+    "aria-live": 'polite' ,
     className: className
   }, rest), children);
 };
@@ -27,8 +28,5 @@ TableBody.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string
 };
-TableBody.defaultProps = {
-  'aria-live': 'polite'
-};
 
 export { TableBody as default };

package/es/components/DataTable/TableHeader.js

@@ -46,12 +46,12 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     className: headerClassName,
     children,
     colSpan,
-    isSortable,
+    isSortable = false,
     isSortHeader,
     onClick,
     scope = defaultScope,
     sortDirection,
-    translateWithId: t,
+    translateWithId: t = translateWithId,
     id,
     ...rest
   } = _ref;
@@ -144,7 +144,7 @@ TableHeader.propTypes = {
    * attribute at the following URL:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
    */
-  scope: PropTypes.string.isRequired,
+  scope: PropTypes.string,
   /**
    * Specify which direction we are currently sorting by, should be one of DESC,
    * NONE, or ASC.
@@ -157,11 +157,6 @@ TableHeader.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-TableHeader.defaultProps = {
-  isSortable: false,
-  scope: defaultScope,
-  translateWithId
-};
 TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';
 

package/es/components/DataTable/TableSelectAll.d.ts

@@ -76,8 +76,5 @@ declare const TableSelectAll: {
          */
         onSelect: PropTypes.Validator<(...args: any[]) => any>;
     };
-    defaultProps: {
-        ariaLabel: string;
-    };
 };
 export default TableSelectAll;

package/es/components/DataTable/TableSelectAll.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 const TableSelectAll = _ref => {
   let {
-    ariaLabel,
+    ariaLabel = 'Select all rows in the table',
     checked,
     id,
     indeterminate,
@@ -71,8 +71,5 @@ TableSelectAll.propTypes = {
    */
   onSelect: PropTypes.func.isRequired
 };
-TableSelectAll.defaultProps = {
-  ariaLabel: 'Select all rows in the table'
-};
 
 export { TableSelectAll as default };

package/es/components/DataTable/TableToolbar.d.ts

@@ -6,6 +6,16 @@
  */
 import React from 'react';
 export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     * 'aria-label' of the TableToolbar component.
+     */
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * 'aria-label' of the TableToolbar component.
+     */
+    ariaLabel?: string;
     /**
      * Pass in the children that will be rendered inside the TableToolbar
      */

package/es/components/DataTable/TableToolbar.js

@@ -10,10 +10,12 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import deprecate from '../../prop-types/deprecate.js';
 
 const TableToolbar = _ref => {
   let {
+    ['aria-label']: ariaLabel = 'data table toolbar',
+    ariaLabel: deprecatedAriaLabel,
     children,
     size,
     ...rest
@@ -23,15 +25,24 @@ const TableToolbar = _ref => {
     [`${prefix}--table-toolbar`]: true,
     [`${prefix}--table-toolbar--${size}`]: size
   });
-  return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement("section", _extends({
+    "aria-label": deprecatedAriaLabel || ariaLabel
+  }, rest, {
     className: className
   }), children);
 };
 TableToolbar.propTypes = {
   /**
-   * Required props for the accessibility label of the TableToolbar
+   * 'aria-label' of the TableToolbar component.
+   * Specify a label to be read by screen readers on the container node
    */
-  ...AriaLabelPropType,
+  ['aria-label']: PropTypes.string,
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container node.
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * Pass in the children that will be rendered inside the TableToolbar
    */
@@ -41,8 +52,5 @@ TableToolbar.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'lg'])
 };
-TableToolbar.defaultProps = {
-  'aria-label': 'data table toolbar'
-};
 
 export { TableToolbar as default };

package/es/components/DataTable/TableToolbarMenu.js

@@ -17,7 +17,7 @@ const defaultIconDescription = 'Settings';
 const TableToolbarMenu = _ref => {
   let {
     className,
-    renderIcon,
+    renderIcon = Settings,
     iconDescription = defaultIconDescription,
     children,
     ...rest
@@ -33,10 +33,6 @@ const TableToolbarMenu = _ref => {
     flipped: true
   }, rest), children);
 };
-TableToolbarMenu.defaultProps = {
-  renderIcon: Settings,
-  iconDescription: defaultIconDescription
-};
 TableToolbarMenu.propTypes = {
   children: PropTypes.node.isRequired,
   /**
@@ -46,7 +42,7 @@ TableToolbarMenu.propTypes = {
   /**
    * The description of the menu icon.
    */
-  iconDescription: PropTypes.string.isRequired,
+  iconDescription: PropTypes.string,
   /**
    * Optional prop to allow overriding the default menu icon
    */

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

@@ -83,7 +83,7 @@ export interface TableToolbarSearchProps {
     /**
      * Provide custom text for the component for each translation id
      */
-    translateWithId: (id: string) => string;
+    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): JSX.Element;
@@ -164,13 +164,7 @@ declare const TableToolbarSearch: {
         /**
          * Provide custom text for the component for each translation id
          */
-        translateWithId: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    defaultProps: {
-        tabIndex: string;
-        translateWithId: (id: string) => string;
-        persistent: boolean;
-        onClear: () => void;
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export default TableToolbarSearch;

package/es/components/DataTable/TableToolbarSearch.js

@@ -13,6 +13,7 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import setupGetInstanceId from './tools/instanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 const getInstanceId = setupGetInstanceId();
 const translationKeys = {
@@ -27,8 +28,8 @@ const TableToolbarSearch = _ref => {
     className,
     searchContainerClass,
     onChange: onChangeProp,
-    onClear,
-    translateWithId: t,
+    onClear = noopFn,
+    translateWithId: t = translateWithId,
     placeholder,
     labelText,
     expanded: expandedProp,
@@ -36,12 +37,12 @@ const TableToolbarSearch = _ref => {
     defaultValue,
     disabled,
     onExpand,
-    persistent,
+    persistent = false,
     id,
     onBlur,
     onFocus,
     size = 'lg',
-    tabIndex,
+    tabIndex = '0',
     ...rest
   } = _ref;
   const {
@@ -188,13 +189,7 @@ TableToolbarSearch.propTypes = {
   /**
    * Provide custom text for the component for each translation id
    */
-  translateWithId: PropTypes.func.isRequired
-};
-TableToolbarSearch.defaultProps = {
-  tabIndex: '0',
-  translateWithId,
-  persistent: false,
-  onClear: () => {}
+  translateWithId: PropTypes.func
 };
 
 export { TableToolbarSearch as default };

package/es/components/DataTable/tools/sorting.js

@@ -86,8 +86,8 @@ const sortRows = _ref => {
     cellsById,
     sortDirection,
     key,
-    locale,
-    sortRow
+    locale = 'en',
+    sortRow = defaultSortRow
   } = _ref;
   return rowIds.slice().sort((a, b) => {
     const cellA = cellsById[getCellId(a, key)];

package/es/components/DatePicker/DatePicker.d.ts

@@ -24,8 +24,8 @@ export type CalRef = {
 };
 interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
-     * flatpickr prop passthrough. Allows the user to enter a date directly
-     * into the input field
+     * Flatpickr prop passthrough enables direct date input, and when set to false,
+     * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
      */
     allowInput?: boolean;
     /**
@@ -87,11 +87,11 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * The maximum date that a user can pick to.
      */
-    maxDate?: string;
+    maxDate?: string | number;
     /**
      * The minimum date that a user can start picking from.
      */
-    minDate?: string;
+    minDate?: string | number;
     /**
      * The `change` event handler.
      */

package/es/components/DatePicker/DatePicker.js

@@ -423,6 +423,11 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
+  useEffect(() => {
+    if (calendarRef?.current?.set) {
+      calendarRef.current.set('allowInput', allowInput);
+    }
+  }, [allowInput]);
   useEffect(() => {
     if (calendarRef?.current?.set) {
       calendarRef.current.set('maxDate', maxDate);
@@ -485,8 +490,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
 });
 DatePicker.propTypes = {
   /**
-   * flatpickr prop passthrough. Allows the user to enter a date directly
-   * into the input field
+   * Flatpickr prop passthrough enables direct date input, and when set to false,
+   * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
    */
   allowInput: PropTypes.bool,
   /**
@@ -670,11 +675,11 @@ DatePicker.propTypes = {
   /**
    * The maximum date that a user can pick to.
    */
-  maxDate: PropTypes.string,
+  maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * The minimum date that a user can start picking from.
    */
-  minDate: PropTypes.string,
+  minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * The `change` event handler.
    * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -39,6 +39,12 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       } else if (match(event, ArrowDown)) {
         event.preventDefault();
         fp.open();
+      } else if (!fp.config.allowInput) {
+        // We override the default behaviour of Flatpickr, ideally when allowInput is set to false,
+        // the Delete/Backspace button clears all of the date, which we don't want, hence
+        // we stop event bubbling and the default Flatpickr's onChange behaviour here itself
+        event.stopPropagation();
+        event.preventDefault();
       }
     }
   };

package/es/components/DatePickerInput/DatePickerInput.js

@@ -13,6 +13,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 const getInstanceId = setupGetInstanceId();
 const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
@@ -93,26 +95,30 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
   const input = /*#__PURE__*/React__default.createElement("input", inputProps);
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClasses
-  }, labelText && /*#__PURE__*/React__default.createElement("label", {
+  }, labelText && /*#__PURE__*/React__default.createElement(Text, {
+    as: "label",
     htmlFor: id,
     className: labelClasses
   }, labelText), /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
-  }, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
+  }, /*#__PURE__*/React__default.createElement("span", null, input, isFluid && /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType
   }), /*#__PURE__*/React__default.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
     invalid: invalid,
     warn: warn
-  })), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }))), invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--form-requirement`
   }, invalidText)), warn && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--form-requirement`
-  }, warnText)), helperText && /*#__PURE__*/React__default.createElement("div", {
+  }, warnText)), helperText && !invalid && /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     id: datePickerInputHelperId,
     className: helperTextClasses
   }, helperText));

package/es/components/Dropdown/Dropdown.js

@@ -43,22 +43,22 @@ const defaultItemToString = item => {
 const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
-    disabled,
-    direction,
+    disabled = false,
+    direction = 'bottom',
     items,
     label,
     ['aria-label']: ariaLabel,
     ariaLabel: deprecatedAriaLabel,
     itemToString = defaultItemToString,
-    itemToElement,
+    itemToElement = null,
     renderSelectedItem,
-    type,
+    type = 'default',
     size,
     onChange,
     id,
-    titleText,
+    titleText = '',
     hideLabel,
-    helperText,
+    helperText = '',
     translateWithId,
     light,
     invalid,
@@ -404,14 +404,5 @@ Dropdown.propTypes = {
    */
   warnText: PropTypes.node
 };
-Dropdown.defaultProps = {
-  disabled: false,
-  type: 'default',
-  itemToString: defaultItemToString,
-  itemToElement: null,
-  titleText: '',
-  helperText: '',
-  direction: 'bottom'
-};
 
 export { Dropdown as default };

package/es/components/FileUploader/FileUploader.d.ts

@@ -36,7 +36,7 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
     /**
      * Provide a description for the complete/close icon that can be read by screen readers
      */
-    iconDescription: string;
+    iconDescription?: string;
     /**
      * Specify the description text of this `<FileUploader>`
      */
@@ -106,7 +106,7 @@ export default class FileUploader extends React.Component<FileUploaderProps, {
         /**
          * Provide a description for the complete/close icon that can be read by screen readers
          */
-        iconDescription: PropTypes.Validator<string>;
+        iconDescription: PropTypes.Requireable<string>;
         /**
          * Specify the description text of this `<FileUploader>`
          */
@@ -145,15 +145,6 @@ export default class FileUploader extends React.Component<FileUploaderProps, {
         size: PropTypes.Requireable<string>;
     };
     static contextType: React.Context<string>;
-    static defaultProps: {
-        disabled: boolean;
-        filenameStatus: string;
-        buttonLabel: string;
-        buttonKind: string;
-        multiple: boolean;
-        onClick: () => void;
-        accept: never[];
-    };
     state: {
         filenames: string[];
     };

package/es/components/FileUploader/FileUploader.js

@@ -13,6 +13,8 @@ import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -74,15 +76,15 @@ class FileUploader extends React__default.Component {
   render() {
     const {
       iconDescription,
-      buttonLabel,
-      buttonKind,
-      disabled,
-      filenameStatus,
+      buttonLabel = '',
+      buttonKind = 'primary',
+      disabled = false,
+      filenameStatus = 'uploading',
       labelDescription,
       labelTitle,
       className,
-      multiple,
-      accept,
+      multiple = false,
+      accept = [],
       name,
       size = 'md',
       onDelete,
@@ -103,9 +105,11 @@ class FileUploader extends React__default.Component {
     });
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: classes
-    }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement("p", {
+    }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
+      as: "p",
       className: getHelperLabelClasses(`${prefix}--file--label`)
-    }, labelTitle), /*#__PURE__*/React__default.createElement("p", {
+    }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
+      as: "p",
       className: getHelperLabelClasses(`${prefix}--label-description`)
     }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
       innerRef: this.uploaderButton,
@@ -124,7 +128,8 @@ class FileUploader extends React__default.Component {
       key: index,
       className: selectedFileClasses,
       ref: node => this.nodes[index] = node // eslint-disable-line
-    }, other), /*#__PURE__*/React__default.createElement("p", {
+    }, other), /*#__PURE__*/React__default.createElement(Text, {
+      as: "p",
       className: `${prefix}--file-filename`,
       id: name
     }, name), /*#__PURE__*/React__default.createElement("span", {
@@ -177,7 +182,7 @@ _defineProperty(FileUploader, "propTypes", {
   /**
    * Provide a description for the complete/close icon that can be read by screen readers
    */
-  iconDescription: PropTypes.string.isRequired,
+  iconDescription: PropTypes.string,
   /**
    * Specify the description text of this `<FileUploader>`
    */
@@ -216,14 +221,5 @@ _defineProperty(FileUploader, "propTypes", {
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 });
 _defineProperty(FileUploader, "contextType", PrefixContext);
-_defineProperty(FileUploader, "defaultProps", {
-  disabled: false,
-  filenameStatus: 'uploading',
-  buttonLabel: '',
-  buttonKind: 'primary',
-  multiple: false,
-  onClick: () => {},
-  accept: []
-});
 
 export { FileUploader as default };

package/es/components/FileUploader/FileUploaderButton.js

@@ -13,10 +13,10 @@ import { ButtonKinds } from '../../prop-types/types.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { noopFn } from '../../internal/noopFn.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-function noop() {}
 function FileUploaderButton(_ref) {
   let {
     accept,
@@ -27,7 +27,7 @@ function FileUploaderButton(_ref) {
     id,
     labelText: ownerLabelText = 'Add file',
     multiple = false,
-    onChange = noop,
+    onChange = noopFn,
     name,
     size = 'md',
     // eslint-disable-next-line react/prop-types

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -120,12 +120,5 @@ declare namespace FileUploaderDropContainer {
          */
         tabIndex: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
     };
-    var defaultProps: {
-        labelText: string;
-        multiple: boolean;
-        onAddFiles: () => void;
-        accept: never[];
-        pattern: string;
-    };
 }
 export default FileUploaderDropContainer;

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -13,6 +13,7 @@ import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { noopFn } from '../../internal/noopFn.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -25,7 +26,7 @@ function FileUploaderDropContainer(_ref) {
     labelText = 'Add file',
     multiple = false,
     name,
-    onAddFiles = () => {},
+    onAddFiles = noopFn,
     onClick,
     pattern = '.[0-9a-z]+$',
     // eslint-disable-next-line react/prop-types
@@ -199,12 +200,5 @@ FileUploaderDropContainer.propTypes = {
    */
   tabIndex: deprecate(PropTypes.number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
 };
-FileUploaderDropContainer.defaultProps = {
-  labelText: 'Add file',
-  multiple: false,
-  onAddFiles: () => {},
-  accept: [],
-  pattern: '.[0-9a-z]+$'
-};
 
 export { FileUploaderDropContainer as default };

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -95,9 +95,5 @@ declare namespace FileUploaderItem {
          */
         uuid: PropTypes.Requireable<string>;
     };
-    var defaultProps: {
-        status: string;
-        onDelete: () => void;
-    };
 }
 export default FileUploaderItem;