@carbon/react 1.68.0-rc.0 → 1.69.0-rc.0

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

@@ -4,8 +4,7 @@
  * 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 { ReactElement } from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -74,93 +73,10 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
      */
     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.Requireable<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>;
-    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(): import("react/jsx-runtime").JSX.Element;
-}
+declare const FileUploader: {
+    <ItemType>(props: FileUploaderProps): ReactElement;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+};
+export default FileUploader;

package/es/components/FileUploader/FileUploader.js

@@ -5,157 +5,137 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../../prop-types/types.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import { useId } from '../../internal/useId.js';
 import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-class FileUploader extends React__default.Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      filenames: []
-    });
-    _defineProperty(this, "nodes", []);
-    _defineProperty(this, "uploaderButton", /*#__PURE__*/React__default.createRef());
-    _defineProperty(this, "handleChange", evt => {
+const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    accept,
+    buttonKind,
+    buttonLabel,
+    className,
+    disabled,
+    filenameStatus,
+    iconDescription,
+    labelDescription,
+    labelTitle,
+    multiple,
+    name,
+    onChange,
+    onClick,
+    onDelete,
+    size,
+    ...other
+  } = _ref;
+  const fileUploaderInstanceId = useId('file-uploader');
+  const [state, updateState] = useState({
+    fileNames: []
+  });
+  const nodes = [];
+  const prefix = usePrefix();
+  const handleChange = evt => {
+    evt.stopPropagation();
+    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
+    updateState(prevState => ({
+      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
+    }));
+    if (onChange) {
+      onChange(evt);
+    }
+  };
+  const handleClick = (evt, _ref2) => {
+    let {
+      index,
+      filenameStatus
+    } = _ref2;
+    if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-      this.setState({
-        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
+      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
+      updateState({
+        fileNames: filteredArray
       });
-      if (this.props.onChange) {
-        this.props.onChange(evt);
+      if (onDelete) {
+        onDelete(evt);
+        uploaderButton.current?.focus?.();
       }
-    });
-    _defineProperty(this, "handleClick", (evt, _ref) => {
-      let {
-        index,
-        filenameStatus
-      } = _ref;
-      if (filenameStatus === 'edit') {
-        evt.stopPropagation();
-        const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
-        this.setState({
-          filenames: filteredArray
+      onClick?.(evt);
+    }
+  };
+  const uploaderButton = /*#__PURE__*/React__default.createRef();
+  const classes = cx({
+    [`${prefix}--form-item`]: true,
+    [className]: className
+  });
+  const getHelperLabelClasses = baseClass => cx(baseClass, {
+    [`${prefix}--label-description--disabled`]: disabled
+  });
+  const selectedFileClasses = cx(`${prefix}--file__selected-file`, {
+    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes
+  }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
+    as: "h3",
+    className: getHelperLabelClasses(`${prefix}--file--label`)
+  }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
+    className: getHelperLabelClasses(`${prefix}--label-description`),
+    id: fileUploaderInstanceId
+  }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
+    innerRef: uploaderButton,
+    disabled: disabled,
+    labelText: buttonLabel,
+    multiple: multiple,
+    buttonKind: buttonKind,
+    onChange: handleChange,
+    disableLabelChanges: true,
+    accept: accept,
+    name: name,
+    size: size,
+    "aria-describedby": fileUploaderInstanceId
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container`
+  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
+    key: index,
+    className: selectedFileClasses,
+    ref: node => nodes[index] = node // eslint-disable-line
+  }, other), /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--file__state-container`
+  }, /*#__PURE__*/React__default.createElement(Filename, {
+    name: name,
+    iconDescription: iconDescription,
+    status: filenameStatus,
+    onKeyDown: evt => {
+      if (matches(evt, [Enter, Space])) {
+        handleClick(evt, {
+          index,
+          filenameStatus
         });
-        if (this.props.onDelete) {
-          this.props.onDelete(evt);
-          this.uploaderButton.current?.focus?.();
-        }
-        this.props.onClick?.(evt);
       }
-    });
-    _defineProperty(this, "clearFiles", () => {
-      // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
-      this.setState({
-        filenames: []
-      });
-    });
-  }
-  static getDerivedStateFromProps(_ref2, state) {
-    let {
+    },
+    onClick: evt => handleClick(evt, {
+      index,
       filenameStatus
-    } = _ref2;
-    const {
-      prevFilenameStatus
-    } = state;
-    return prevFilenameStatus === filenameStatus ? null : {
-      filenameStatus,
-      prevFilenameStatus: filenameStatus
-    };
-  }
-  render() {
-    const {
-      iconDescription,
-      buttonLabel = '',
-      buttonKind = 'primary',
-      disabled = false,
-      filenameStatus = 'uploading',
-      labelDescription,
-      labelTitle,
-      className,
-      multiple = false,
-      accept = [],
-      name,
-      size = 'md',
-      onDelete,
-      // eslint-disable-line
-      ...other
-    } = this.props;
-    const prefix = this.context;
-    const classes = cx({
-      [`${prefix}--form-item`]: true,
-      [className]: className
-    });
-    const getHelperLabelClasses = baseClass => cx(baseClass, {
-      [`${prefix}--label-description--disabled`]: disabled
-    });
-    const selectedFileClasses = cx(`${prefix}--file__selected-file`, {
-      [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-      [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
-    });
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      className: classes
-    }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
-      as: "h3",
-      className: getHelperLabelClasses(`${prefix}--file--label`)
-    }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`),
-      id: "description"
-    }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
-      innerRef: this.uploaderButton,
-      disabled: disabled,
-      labelText: buttonLabel,
-      multiple: multiple,
-      buttonKind: buttonKind,
-      onChange: this.handleChange,
-      disableLabelChanges: true,
-      accept: accept,
-      name: name,
-      size: size,
-      "aria-describedby": "description"
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--file-container`
-    }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
-      key: index,
-      className: selectedFileClasses,
-      ref: node => this.nodes[index] = node // eslint-disable-line
-    }, other), /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
-      className: `${prefix}--file-filename`,
-      id: name
-    }, name), /*#__PURE__*/React__default.createElement("span", {
-      className: `${prefix}--file__state-container`
-    }, /*#__PURE__*/React__default.createElement(Filename, {
-      name: name,
-      iconDescription: iconDescription,
-      status: filenameStatus,
-      onKeyDown: evt => {
-        if (matches(evt, [Enter, Space])) {
-          this.handleClick(evt, {
-            index,
-            filenameStatus
-          });
-        }
-      },
-      onClick: evt => this.handleClick(evt, {
-        index,
-        filenameStatus
-      })
-    }))))));
-  }
-}
-_defineProperty(FileUploader, "propTypes", {
+    })
+  }))))));
+});
+FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
    */
@@ -221,7 +201,6 @@ _defineProperty(FileUploader, "propTypes", {
    * sizes.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
-});
-_defineProperty(FileUploader, "contextType", PrefixContext);
+};
 
 export { FileUploader as default };

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -143,7 +143,7 @@ function FileUploaderDropContainer(_ref) {
     multiple: multiple,
     onChange: handleChange,
     onClick: evt => {
-      evt.target.value = null;
+      evt.target.value = '';
     }
   }));
 }

package/es/components/FluidComboBox/FluidComboBox.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 React from 'react';
+export interface FluidComboBoxSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps>;
+export default FluidComboBoxSkeleton;

package/es/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -34,6 +34,5 @@ FluidComboBoxSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
 
-export { FluidComboBoxSkeleton$1 as default };
+export { FluidComboBoxSkeleton as default };

package/es/components/FluidComboBox/FluidComboBox.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 React, { ComponentType } from 'react';
+import { ComboBoxProps } from '../ComboBox/ComboBox';
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null | undefined;
+    inputValue?: string | null;
+}
+export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the direction of the dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+     * from their collection that are pre-selected
+     */
+    initialSelectedItem?: ItemType;
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidComboBox` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: ComponentType<ItemType> | null;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString?: ItemToStringHandler<ItemType>;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: React.ReactNode;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange: (data: OnChangeData<ItemType>) => void;
+    /**
+     * An optional callback to render the currently selected item as a react element instead of only
+     * as a string.
+     */
+    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
+    /**
+     * In the case you want to control the dropdown selection entirely.
+     * */
+    selectedItem?: ItemType | null;
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidComboBox: React.ForwardRefExoticComponent<FluidComboBoxProps<unknown> & React.RefAttributes<HTMLInputElement>>;
+export default FluidComboBox;

package/es/components/FluidComboBox/FluidComboBox.js

@@ -91,7 +91,7 @@ FluidComboBox.propTypes = {
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.
@@ -119,6 +119,5 @@ FluidComboBox.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidComboBox$1 = FluidComboBox;
 
-export { FluidComboBox$1 as default };
+export { FluidComboBox as default };

package/es/components/FluidComboBox/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 FluidComboBox from './FluidComboBox';
+import type { FluidComboBoxProps } from './FluidComboBox';
+import type { FluidComboBoxSkeletonProps } from './FluidComboBox.Skeleton';
+export type { FluidComboBoxProps, FluidComboBoxSkeletonProps };
+export default FluidComboBox;
+export { FluidComboBox };
+export { default as FluidComboBoxSkeleton } from './FluidComboBox.Skeleton';

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 React from 'react';
+export interface FluidDatePickerSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify which variant of the DatePicker the skeleton should mimic
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+}
+declare const FluidDatePickerSkeleton: React.FC<FluidDatePickerSkeletonProps>;
+export default FluidDatePickerSkeleton;

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { Calendar } from '@carbon/icons-react';
 
-function FluidDatePickerSkeleton(_ref) {
+const FluidDatePickerSkeleton = _ref => {
   let {
     className,
     datePickerType = 'single',
@@ -50,7 +50,7 @@ function FluidDatePickerSkeleton(_ref) {
     role: "img",
     "aria-hidden": "true"
   }))));
-}
+};
 FluidDatePickerSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/es/components/FluidDatePicker/FluidDatePicker.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 React from 'react';
+export interface FluidDatePickerProps {
+    /**
+     * The child node(s)
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify whether or not the control is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in error state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidDatePicker: React.FC<FluidDatePickerProps>;
+export default FluidDatePicker;

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -7,12 +7,12 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
 import cx from 'classnames';
 import DatePicker from '../DatePicker/DatePicker.js';
 import '../DatePicker/DatePicker.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import React__default from 'react';
 
 const FluidDatePicker = /*#__PURE__*/React__default.forwardRef(function FluidDatePicker(_ref, ref) {
   let {
@@ -76,6 +76,5 @@ FluidDatePicker.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidDatePicker$1 = FluidDatePicker;
 
-export { FluidDatePicker$1 as default };
+export { FluidDatePicker as default };

package/es/components/FluidDatePicker/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 FluidDatePicker from './FluidDatePicker';
+import type { FluidDatePickerProps } from './FluidDatePicker';
+import { FluidDatePickerSkeletonProps } from './FluidDatePicker.Skeleton';
+export type { FluidDatePickerProps, FluidDatePickerSkeletonProps };
+export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton';
+export default FluidDatePicker;
+export { FluidDatePicker };