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

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useRef, useState } from 'react';
+import React__default, { useState, useContext, useRef } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -21,6 +21,13 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const getInstanceId = setupGetInstanceId();
+const {
+  MenuBlur,
+  MenuKeyDownArrowDown,
+  MenuKeyDownArrowUp,
+  MenuKeyDownEscape,
+  ToggleButtonClick
+} = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
@@ -65,6 +72,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const [highlightedIndex, setHighlightedIndex] = useState();
   const {
     isFluid
   } = useContext(FormContext);
@@ -72,12 +80,32 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...downshiftProps,
     items,
     itemToString,
+    highlightedIndex,
     initialSelectedItem,
-    onSelectedItemChange
+    onSelectedItemChange,
+    onStateChange
   };
   const {
     current: dropdownInstanceId
   } = 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
@@ -90,7 +118,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     getLabelProps,
     getMenuProps,
     getItemProps,
-    highlightedIndex,
     selectedItem
   } = useSelect(selectProps);
   const inline = type === 'inline';
@@ -169,12 +196,10 @@ const Dropdown = /*#__PURE__*/React__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;
@@ -244,7 +269,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index || selectedItem === item,
+      isHighlighted: highlightedIndex === index,
       title: title,
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index]

package/es/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 };

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

@@ -0,0 +1,175 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Specify the type of the `<FileUploaderButton>`
+     */
+    buttonKind?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger--primary' | 'danger--ghost' | 'danger--tertiary' | 'tertiary';
+    /**
+     * Provide the label text to be read by screen readers when interacting with
+     * the `<FileUploaderButton>`
+     */
+    buttonLabel?: string;
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the status of the File Upload
+     */
+    filenameStatus: 'edit' | 'complete' | 'uploading';
+    /**
+     * Provide a description for the complete/close icon that can be read by screen readers
+     */
+    iconDescription: string;
+    /**
+     * Specify the description text of this `<FileUploader>`
+     */
+    labelDescription?: string;
+    /**
+     * Specify the title text of this `<FileUploader>`
+     */
+    labelTitle?: string;
+    /**
+     * Specify if the component should accept multiple files to upload
+     */
+    multiple?: boolean;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called each time the input is
+     * changed
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Provide an optional `onClick` hook that is called each time the
+     * FileUploader is clicked
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Provide an optional `onDelete` hook that is called when an uploaded item
+     * is removed
+     */
+    onDelete?: (event: any) => void;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
+}
+export default class FileUploader extends React.Component<FileUploaderProps, {
+    filenames: string[];
+}> {
+    static propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Specify the type of the `<FileUploaderButton>`
+         */
+        buttonKind: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * the `<FileUploaderButton>`
+         */
+        buttonLabel: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the status of the File Upload
+         */
+        filenameStatus: PropTypes.Validator<string>;
+        /**
+         * Provide a description for the complete/close icon that can be read by screen readers
+         */
+        iconDescription: PropTypes.Validator<string>;
+        /**
+         * Specify the description text of this `<FileUploader>`
+         */
+        labelDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the title text of this `<FileUploader>`
+         */
+        labelTitle: PropTypes.Requireable<string>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional `onChange` hook that is called each time the input is
+         * changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onClick` hook that is called each time the
+         * FileUploader is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onDelete` hook that is called when an uploaded item
+         * is removed
+         */
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        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[];
+    };
+    nodes: HTMLElement[];
+    uploaderButton: React.RefObject<HTMLLabelElement>;
+    static getDerivedStateFromProps({ filenameStatus }: {
+        filenameStatus: any;
+    }, state: any): {
+        filenameStatus: any;
+        prevFilenameStatus: any;
+    } | null;
+    handleChange: (evt: any) => void;
+    handleClick: (evt: any, { index, filenameStatus }: {
+        index: any;
+        filenameStatus: any;
+    }) => void;
+    clearFiles: () => void;
+    render(): JSX.Element;
+}

package/es/components/FileUploader/FileUploader.js

@@ -47,9 +47,9 @@ class FileUploader extends React__default.Component {
         });
         if (this.props.onDelete) {
           this.props.onDelete(evt);
-          this.uploaderButton.current.focus();
+          this.uploaderButton.current?.focus?.();
         }
-        this.props.onClick(evt);
+        this.props.onClick?.(evt);
       }
     });
     _defineProperty(this, "clearFiles", () => {
@@ -86,7 +86,7 @@ class FileUploader extends React__default.Component {
       name,
       size = 'md',
       onDelete,
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line
       ...other
     } = this.props;
     const prefix = this.context;

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

@@ -0,0 +1,140 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Specify the type of underlying button
+     */
+    buttonKind?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger--primary' | 'danger--ghost' | 'danger--tertiary' | 'tertiary';
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether you want to disable any updates to the FileUploaderButton
+     * label
+     */
+    disableLabelChanges?: boolean;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide a unique id for the underlying `<input>` node
+     */
+    id?: string;
+    /**
+     * Provide the label text to be read by screen readers when interacting with
+     * this control
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Specify if the component should accept multiple files to upload
+     */
+    multiple?: boolean;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called each time the `<input>`
+     * value changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide an optional `onClick` hook that is called each time the button is
+     * clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Provide an accessibility role for the `<FileUploaderButton>`
+     */
+    role?: string;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'small' | 'field' | 'md' | 'lg';
+    /**
+     * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+     */
+    tabIndex?: number | string;
+    innerRef?: React.RefObject<HTMLLabelElement>;
+}
+declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): JSX.Element;
+declare namespace FileUploaderButton {
+    var propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Specify the type of underlying button
+         */
+        buttonKind: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether you want to disable any updates to the FileUploaderButton
+         * label
+         */
+        disableLabelChanges: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a unique id for the underlying `<input>` node
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * this control
+         */
+        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional `onChange` hook that is called each time the `<input>`
+         * value changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onClick` hook that is called each time the button is
+         * clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an accessibility role for the `<FileUploaderButton>`
+         */
+        role: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom tabIndex value for the `<FileUploaderButton>`
+         */
+        tabIndex: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+}
+export default FileUploaderButton;

package/es/components/FileUploader/FileUploaderButton.js

@@ -57,18 +57,20 @@ function FileUploaderButton(_ref) {
   }
   function onClick(event) {
     event.target.value = null;
-    inputNode.current.value = '';
-    inputNode.current.click();
+    if (inputNode.current) {
+      inputNode.current.value = '';
+      inputNode.current.click();
+    }
   }
   function onKeyDown(event) {
-    if (matches(event, [Enter, Space])) {
+    if (matches(event, [Enter, Space]) && inputNode.current) {
       inputNode.current.value = '';
       inputNode.current.click();
     }
   }
   function handleOnChange(event) {
     const files = event.target.files;
-    const length = event.target.files.length;
+    const length = event.target.files?.length || 0;
     if (files && !disableLabelChanges) {
       if (length > 1) {
         setLabelText(`${length} files`);
@@ -84,7 +86,9 @@ function FileUploaderButton(_ref) {
     className: classes,
     onClick: onClick,
     onKeyDown: onKeyDown
-  }, other), labelText), /*#__PURE__*/React__default.createElement("label", {
+  }, other, {
+    tabIndex: other.tabIndex !== undefined ? parseInt(other.tabIndex) : undefined
+  }), labelText), /*#__PURE__*/React__default.createElement("label", {
     className: `${prefix}--visually-hidden`,
     ref: innerRef,
     htmlFor: inputId
@@ -94,9 +98,9 @@ function FileUploaderButton(_ref) {
     id: inputId,
     disabled: disabled,
     type: "file",
-    tabIndex: "-1",
+    tabIndex: -1,
     multiple: multiple,
-    accept: accept,
+    accept: accept?.toString(),
     name: name,
     onChange: handleOnChange
   }));

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

@@ -0,0 +1,139 @@
+/**
+ * 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 FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide a unique id for the underlying `<input>` node
+     */
+    id?: string;
+    /**
+     * Provide the label text to be read by screen readers when interacting with
+     * this control
+     */
+    labelText: string;
+    /**
+     * Specify if the component should accept multiple files to upload
+     */
+    multiple?: boolean;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+     */
+    onAddFiles?: () => void;
+    /**
+     * Provide an optional function to be called when the button element
+     * is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Provide a custom regex pattern for the acceptedTypes
+     */
+    pattern?: string;
+    /**
+     * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
+     */
+    role?: string;
+    /**
+     * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+     */
+    tabIndex?: number | string;
+}
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: {
+    [x: string]: any;
+    accept: any;
+    className: any;
+    id: any;
+    disabled: any;
+    labelText: any;
+    multiple: any;
+    name: any;
+    onAddFiles: any;
+    onClick: any;
+    pattern: any;
+    innerRef: any;
+}): JSX.Element;
+declare namespace FileUploaderDropContainer {
+    var propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a unique id for the underlying `<input>` node
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * this control
+         */
+        labelText: PropTypes.Validator<string>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Event handler that is called after files are added to the uploader
+         * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+         */
+        onAddFiles: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the button element
+         * is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a custom regex pattern for the acceptedTypes
+         */
+        pattern: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessibility role for the `<FileUploaderButton>`
+         */
+        role: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a custom tabIndex value for the `<FileUploaderButton>`
+         */
+        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

@@ -80,7 +80,7 @@ function FileUploaderDropContainer(_ref) {
   }
   const handleClick = () => {
     if (!disabled) {
-      inputRef.current.click();
+      inputRef.current?.click();
     }
   };
   return /*#__PURE__*/React__default.createElement("div", {
@@ -119,7 +119,7 @@ function FileUploaderDropContainer(_ref) {
     onKeyDown: evt => {
       if (matches(evt, [Enter, Space])) {
         evt.preventDefault();
-        inputRef.current.click();
+        inputRef.current?.click();
       }
     },
     onClick: composeEventHandlers([onClick, handleClick])
@@ -131,7 +131,7 @@ function FileUploaderDropContainer(_ref) {
     id: uid,
     className: `${prefix}--file-input`,
     ref: inputRef,
-    tabIndex: "-1",
+    tabIndex: -1,
     disabled: disabled,
     accept: accept,
     name: name,