@carbon/react 1.32.0 → 1.33.0-rc.0

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

@@ -0,0 +1,110 @@
+/**
+ * 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 FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
+    /**
+     * Error message body for an invalid file upload
+     */
+    errorBody?: string;
+    /**
+     * Error message subject for an invalid file upload
+     */
+    errorSubject?: string;
+    /**
+     * Description of status icon (displayed in native tooltip)
+     */
+    iconDescription?: string;
+    /**
+     * Specify if the currently uploaded file is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Name of the uploaded file
+     */
+    name?: string;
+    /**
+     * Event handler that is called after removing a file from the file uploader
+     * The event handler signature looks like `onDelete(evt, { uuid })`
+     */
+    onDelete?: (event: any, opts: {
+        uuid: string;
+    }) => void;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Status of the file upload
+     */
+    status?: 'uploading' | 'edit' | 'complete';
+    /**
+     * Unique identifier for the file object
+     */
+    uuid?: string;
+}
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: {
+    [x: string]: any;
+    uuid: any;
+    name: any;
+    status: any;
+    iconDescription: any;
+    onDelete: any;
+    invalid: any;
+    errorSubject: any;
+    errorBody: any;
+    size: any;
+}): JSX.Element;
+declare namespace FileUploaderItem {
+    var propTypes: {
+        /**
+         * Error message body for an invalid file upload
+         */
+        errorBody: PropTypes.Requireable<string>;
+        /**
+         * Error message subject for an invalid file upload
+         */
+        errorSubject: PropTypes.Requireable<string>;
+        /**
+         * Description of status icon (displayed in native tooltip)
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify if the currently uploaded file is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Name of the uploaded file
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Event handler that is called after removing a file from the file uploader
+         * The event handler signature looks like `onDelete(evt, { uuid })`
+         */
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Status of the file upload
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Unique identifier for the file object
+         */
+        uuid: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        status: string;
+        onDelete: () => void;
+    };
+}
+export default FileUploaderItem;

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

@@ -0,0 +1,71 @@
+/**
+ * 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 type FilenameStatus = 'edit' | 'complete' | 'uploading';
+export interface FilenameProps extends Omit<ReactAttr<HTMLElement>, 'tabIndex'> {
+    /**
+     * Specify an id that describes the error to be read by screen readers when the filename is invalid
+     */
+    ['aria-describedby']?: string;
+    /**
+     * Provide a description of the SVG icon to denote file upload status
+     */
+    iconDescription?: string;
+    /**
+     * Specify if the file is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Name of the uploaded file
+     */
+    name?: string;
+    /**
+     * Status of the file upload
+     */
+    status?: FilenameStatus;
+    /**
+     * Provide a custom tabIndex value for the `<Filename>`
+     */
+    tabIndex?: number | string;
+}
+declare function Filename({ iconDescription, status, invalid, name, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): JSX.Element | null;
+declare namespace Filename {
+    var propTypes: {
+        /**
+         * Specify an id that describes the error to be read by screen readers when the filename is invalid
+         */
+        "aria-describedby": PropTypes.Requireable<string>;
+        /**
+         * Provide a description of the SVG icon to denote file upload status
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify if the file is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Name of the uploaded file
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Status of the file upload
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom tabIndex value for the `<Filename>`
+         */
+        tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+    var defaultProps: {
+        iconDescription: string;
+        status: string;
+        tabIndex: string;
+    };
+}
+export default Filename;

package/es/components/FileUploader/Filename.js

@@ -19,7 +19,7 @@ function Filename(_ref) {
     status,
     invalid,
     name,
-    ['aria-describedBy']: ariaDescribedBy,
+    ['aria-describedby']: ariaDescribedBy,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -35,10 +35,12 @@ function Filename(_ref) {
         className: `${prefix}--file-invalid`
       }), /*#__PURE__*/React__default.createElement("button", _extends({
         "aria-label": `${iconDescription} - ${name}`,
-        "aria-describedby": invalid ? ariaDescribedBy : null,
         className: `${prefix}--file-close`,
         type: "button"
-      }, rest), _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
+      }, rest, {
+        tabIndex: rest.tabIndex !== undefined ? parseInt(rest.tabIndex, 10) : undefined,
+        "aria-describedby": invalid ? ariaDescribedBy : undefined
+      }), _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
     case 'complete':
       return /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
         "aria-label": iconDescription,
@@ -74,7 +76,7 @@ Filename.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<Filename>`
    */
-  tabIndex: PropTypes.string
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 Filename.defaultProps = {
   iconDescription: 'Uploading file',

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -47,7 +47,9 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
     inputProps.checked = false;
   }
   useEffect(() => {
-    inputRef.current.indeterminate = indeterminate;
+    if (inputRef?.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
   }, [indeterminate]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox--inline`

package/es/components/Loading/Loading.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 LoadingProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify whether you want the loading indicator to be spinning or not
+     */
+    active?: boolean;
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify a description that would be used to best describe the loading state
+     */
+    description?: string;
+    /**
+     * @deprecated The prop `id` is no longer needed
+     */
+    id?: string;
+    /**
+     * Specify whether you would like the small variant of <Loading>
+     */
+    small?: boolean;
+    /**
+     * Specify whether you want the loader to be applied with an overlay
+     */
+    withOverlay: boolean;
+}
+declare function Loading({ active, className: customClassName, withOverlay, small, description, ...rest }: LoadingProps): JSX.Element;
+declare namespace Loading {
+    var propTypes: {
+        /**
+         * Specify whether you want the loading indicator to be spinning or not
+         */
+        active: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional className to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify a description that would be used to best describe the loading state
+         */
+        description: PropTypes.Requireable<string>;
+        /**
+         * Provide an `id` to uniquely identify the label
+         */
+        id: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify whether you would like the small variant of <Loading>
+         */
+        small: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether you want the loader to be applied with an overlay
+         */
+        withOverlay: PropTypes.Requireable<boolean>;
+    };
+}
+export default Loading;

package/es/components/Notification/Notification.d.ts

@@ -379,7 +379,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
     /**
      * Pass in the action button label that will be rendered within the ActionableNotification.
      */
-    actionButtonLabel: string;
+    actionButtonLabel?: string;
     /**
      * Provide a description for "close" icon button that can be read by screen readers
      */
@@ -438,7 +438,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
     /**
      * Specify the subtitle
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Specify the title
      */
@@ -450,7 +450,7 @@ export declare namespace ActionableNotification {
         /**
          * Pass in the action button label that will be rendered within the ActionableNotification.
          */
-        actionButtonLabel: PropTypes.Validator<string>;
+        actionButtonLabel: PropTypes.Requireable<string>;
         /**
          * Provide a description for "close" icon button that can be read by screen readers
          */
@@ -513,7 +513,7 @@ export declare namespace ActionableNotification {
         /**
          * Specify the subtitle
          */
-        subtitle: PropTypes.Requireable<string>;
+        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Specify the title
          */

package/es/components/Notification/Notification.js

@@ -556,7 +556,7 @@ function ActionableNotification(_ref6) {
     id: id
   }, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--actionable-notification__subtitle`
-  }, subtitle), children))), /*#__PURE__*/React__default.createElement(NotificationActionButton, {
+  }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default.createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline
   }, actionButtonLabel), !hideCloseButton && /*#__PURE__*/React__default.createElement(NotificationButton, {
@@ -569,7 +569,7 @@ ActionableNotification.propTypes = {
   /**
    * Pass in the action button label that will be rendered within the ActionableNotification.
    */
-  actionButtonLabel: PropTypes.string.isRequired,
+  actionButtonLabel: PropTypes.string,
   /**
    * Provide a description for "close" icon button that can be read by screen readers
    */
@@ -635,7 +635,7 @@ ActionableNotification.propTypes = {
   /**
    * Specify the subtitle
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.node,
   /**
    * Specify the title
    */

package/es/components/OverflowMenu/OverflowMenu.js

@@ -97,8 +97,21 @@ class OverflowMenu extends Component {
     super(...arguments);
     _defineProperty(this, "state", {});
     _defineProperty(this, "instanceId", getInstanceId());
+    /**
+     * The handle of `onfocusin` or `focus` event handler.
+     * @private
+     */
     _defineProperty(this, "_hFocusIn", null);
+    /**
+     * The timeout handle for handling `blur` event.
+     * @private
+     */
     _defineProperty(this, "_hBlurTimeout", void 0);
+    /**
+     * The element ref of the tooltip's trigger button.
+     * @type {React.RefObject<Element>}
+     * @private
+     */
     _defineProperty(this, "_triggerRef", /*#__PURE__*/React__default.createRef());
     _defineProperty(this, "handleClick", evt => {
       evt.stopPropagation();
@@ -154,6 +167,15 @@ class OverflowMenu extends Component {
         triggerEl.focus();
       }
     });
+    /**
+     * Focuses the next enabled overflow menu item given the currently focused
+     * item index and direction to move
+     * @param {object} params
+     * @param {number} params.currentIndex - the index of the currently focused
+     * overflow menu item in the list of overflow menu items
+     * @param {number} params.direction - number denoting the direction to move
+     * focus (1 for forwards, -1 for backwards)
+     */
     _defineProperty(this, "handleOverflowMenuItemFocus", _ref => {
       let {
         currentIndex,
@@ -179,6 +201,12 @@ class OverflowMenu extends Component {
       const overflowMenuItem = this[`overflowMenuItem${enabledIndices[nextValidIndex]}`];
       overflowMenuItem?.focus();
     });
+    /**
+     * Handles the floating menu being unmounted or non-floating menu being
+     * mounted or unmounted.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
     _defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
@@ -187,6 +215,11 @@ class OverflowMenu extends Component {
         this._hFocusIn = this._hFocusIn.release();
       }
     });
+    /**
+     * Handles the floating menu being placed.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
     _defineProperty(this, "_handlePlace", menuBody => {
       if (menuBody) {
         this._menuBody = menuBody;
@@ -206,6 +239,9 @@ class OverflowMenu extends Component {
         this.props.onOpen();
       }
     });
+    /**
+     * @returns {Element} The DOM element where the floating menu is placed in.
+     */
     _defineProperty(this, "_getTarget", () => {
       const {
         current: triggerEl
@@ -213,19 +249,6 @@ class OverflowMenu extends Component {
       return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
-  /**
-   * The handle of `onfocusin` or `focus` event handler.
-   * @private
-   */
-  /**
-   * The timeout handle for handling `blur` event.
-   * @private
-   */
-  /**
-   * The element ref of the tooltip's trigger button.
-   * @type {React.RefObject<Element>}
-   * @private
-   */
   componentDidUpdate(_, prevState) {
     const {
       onClose
@@ -261,34 +284,6 @@ class OverflowMenu extends Component {
       this._hBlurTimeout = undefined;
     }
   }
-
-  /**
-   * Focuses the next enabled overflow menu item given the currently focused
-   * item index and direction to move
-   * @param {object} params
-   * @param {number} params.currentIndex - the index of the currently focused
-   * overflow menu item in the list of overflow menu items
-   * @param {number} params.direction - number denoting the direction to move
-   * focus (1 for forwards, -1 for backwards)
-   */
-
-  /**
-   * Handles the floating menu being unmounted or non-floating menu being
-   * mounted or unmounted.
-   * @param {Element} menuBody The DOM element of the menu body.
-   * @private
-   */
-
-  /**
-   * Handles the floating menu being placed.
-   * @param {Element} menuBody The DOM element of the menu body.
-   * @private
-   */
-
-  /**
-   * @returns {Element} The DOM element where the floating menu is placed in.
-   */
-
   render() {
     const prefix = this.context;
     const {

package/es/components/Slider/Slider.js

@@ -49,6 +49,13 @@ class Slider extends PureComponent {
     _defineProperty(this, "element", null);
     _defineProperty(this, "inputId", '');
     _defineProperty(this, "track", void 0);
+    /**
+     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
+     * started on somewhere other than the thumb without a corresponding "move"
+     * event.
+     *
+     * @param {Event} evt The event.
+     */
     _defineProperty(this, "onDragStart", evt => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
@@ -69,6 +76,10 @@ class Slider extends PureComponent {
       // middle of the thumb
       this.onDrag(evt);
     });
+    /**
+     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * indicating that the `onRelease` callback should be called.
+     */
     _defineProperty(this, "onDragStop", () => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
@@ -91,6 +102,12 @@ class Slider extends PureComponent {
         isValid: true
       });
     });
+    /**
+     * Handles a "drag" event by recalculating the value/thumb and setting state
+     * accordingly.
+     *
+     * @param {Event} evt The event.
+     */
     _defineProperty(this, "_onDrag", evt => {
       // Do nothing if component is disabled or we have no event
       if (this.props.disabled || this.props.readOnly || !evt) {
@@ -117,10 +134,20 @@ class Slider extends PureComponent {
         isValid: true
       });
     });
+    /**
+     * Throttles calls to `this._onDrag` by limiting events to being processed at
+     * most once every `EVENT_THROTTLE` milliseconds.
+     */
     _defineProperty(this, "onDrag", throttle(this._onDrag, EVENT_THROTTLE, {
       leading: true,
       trailing: false
     }));
+    /**
+     * Handles a `keydown` event by recalculating the value/thumb and setting
+     * state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
     _defineProperty(this, "onKeyDown", evt => {
       // Do nothing if component is disabled or we don't have a valid event
       if (this.props.disabled || this.props.readOnly || !('which' in evt)) {
@@ -156,6 +183,13 @@ class Slider extends PureComponent {
         isValid: true
       });
     });
+    /**
+     * Provides the two-way binding for the input field of the Slider. It also
+     * Handles a change to the input field by recalculating the value/thumb and
+     * setting state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
     _defineProperty(this, "onChange", evt => {
       // Do nothing if component is disabled
       if (this.props.disabled || this.props.readOnly) {
@@ -187,6 +221,12 @@ class Slider extends PureComponent {
         });
       }
     });
+    /**
+     * Checks for validity of input value after clicking out of the input. It also
+     * Handles state change to isValid state.
+     *
+     * @param {Event} evt The event.
+     */
     _defineProperty(this, "onBlur", evt => {
       // Do nothing if we have no valid event, target, or value
       if (!evt || !('target' in evt) || typeof evt.target.value !== 'string') {
@@ -205,6 +245,25 @@ class Slider extends PureComponent {
         value
       });
     });
+    /**
+     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
+     * `value`, or neither of those.
+     * - If `clientX` is specified, it will be used in
+     *   conjunction with the Slider's bounding rectangle to calculate the new
+     *   values.
+     * - If `clientX` is not specified and `value` is, it will be used to
+     *   calculate new values as though it were the current value of the Slider.
+     * - If neither `clientX` nor `value` are specified, `this.props.value` will
+     *   be used to calculate the new values as though it were the current value
+     *   of the Slider.
+     *
+     * @param {object} params
+     * @param {number} [params.clientX] Optional clientX value expected to be from
+     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
+     * @param {number} [params.value] Optional value use during calculations if
+     *   clientX is not provided.
+     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     */
     _defineProperty(this, "calcValue", _ref => {
       let {
         clientX,
@@ -329,74 +388,6 @@ class Slider extends PureComponent {
   clamp(val, min, max) {
     return Math.max(min, Math.min(val, max));
   }
-
-  /**
-   * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
-   * started on somewhere other than the thumb without a corresponding "move"
-   * event.
-   *
-   * @param {Event} evt The event.
-   */
-
-  /**
-   * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
-   * indicating that the `onRelease` callback should be called.
-   */
-
-  /**
-   * Handles a "drag" event by recalculating the value/thumb and setting state
-   * accordingly.
-   *
-   * @param {Event} evt The event.
-   */
-
-  /**
-   * Throttles calls to `this._onDrag` by limiting events to being processed at
-   * most once every `EVENT_THROTTLE` milliseconds.
-   */
-
-  /**
-   * Handles a `keydown` event by recalculating the value/thumb and setting
-   * state accordingly.
-   *
-   * @param {Event} evt The event.
-   */
-
-  /**
-   * Provides the two-way binding for the input field of the Slider. It also
-   * Handles a change to the input field by recalculating the value/thumb and
-   * setting state accordingly.
-   *
-   * @param {Event} evt The event.
-   */
-
-  /**
-   * Checks for validity of input value after clicking out of the input. It also
-   * Handles state change to isValid state.
-   *
-   * @param {Event} evt The event.
-   */
-
-  /**
-   * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
-   * `value`, or neither of those.
-   * - If `clientX` is specified, it will be used in
-   *   conjunction with the Slider's bounding rectangle to calculate the new
-   *   values.
-   * - If `clientX` is not specified and `value` is, it will be used to
-   *   calculate new values as though it were the current value of the Slider.
-   * - If neither `clientX` nor `value` are specified, `this.props.value` will
-   *   be used to calculate the new values as though it were the current value
-   *   of the Slider.
-   *
-   * @param {object} params
-   * @param {number} [params.clientX] Optional clientX value expected to be from
-   *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
-   * @param {number} [params.value] Optional value use during calculations if
-   *   clientX is not provided.
-   * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
-   */
-
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {