@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -16,16 +16,15 @@ import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 
-const ExpandableSearch = /*#__PURE__*/React.forwardRef(function ExpandableSearch(_ref, forwardedRef) {
-  let {
-    onBlur,
-    onChange,
-    onExpand,
-    onKeyDown,
-    defaultValue,
-    isExpanded,
-    ...props
-  } = _ref;
+const ExpandableSearch = /*#__PURE__*/React.forwardRef(function ExpandableSearch({
+  onBlur,
+  onChange,
+  onExpand,
+  onKeyDown,
+  defaultValue,
+  isExpanded,
+  ...props
+}, forwardedRef) {
   const [expanded, setExpanded] = useState(isExpanded || false);
   const [hasContent, setHasContent] = useState(defaultValue ? true : false);
   const searchRef = useRef(null);

package/es/components/FeatureFlags/index.js

@@ -21,18 +21,17 @@ const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-function FeatureFlags(_ref) {
-  let {
-    children,
-    flags = {},
-    enableV12TileDefaultIcons = false,
-    enableV12TileRadioIcons = false,
-    enableV12Overflowmenu = false,
-    enableTreeviewControllable = false,
-    enableExperimentalFocusWrapWithoutSentinels = false,
-    enableDialogElement = false,
-    enableV12DynamicFloatingStyles = false
-  } = _ref;
+function FeatureFlags({
+  children,
+  flags = {},
+  enableV12TileDefaultIcons = false,
+  enableV12TileRadioIcons = false,
+  enableV12Overflowmenu = false,
+  enableTreeviewControllable = false,
+  enableExperimentalFocusWrapWithoutSentinels = false,
+  enableDialogElement = false,
+  enableV12DynamicFloatingStyles = false
+}) {
   const parentScope = useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
   const combinedFlags = {

package/es/components/FileUploader/FileUploader.Skeleton.js

@@ -14,11 +14,10 @@ import ButtonSkeleton from '../Button/Button.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _ButtonSkeleton;
-function FileUploaderSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function FileUploaderSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--form-item`, className)

package/es/components/FileUploader/FileUploader.js

@@ -19,25 +19,24 @@ import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
 import { Text } from '../Text/Text.js';
 
-const FileUploader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    accept,
-    buttonKind,
-    buttonLabel,
-    className,
-    disabled,
-    filenameStatus,
-    iconDescription,
-    labelDescription,
-    labelTitle,
-    multiple,
-    name,
-    onChange,
-    onClick,
-    onDelete,
-    size,
-    ...other
-  } = _ref;
+const FileUploader = /*#__PURE__*/React.forwardRef(({
+  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: []
@@ -54,11 +53,10 @@ const FileUploader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onChange(evt);
     }
   };
-  const handleClick = (evt, _ref2) => {
-    let {
-      index,
-      filenameStatus
-    } = _ref2;
+  const handleClick = (evt, {
+    index,
+    filenameStatus
+  }) => {
     if (filenameStatus === 'edit') {
       evt.stopPropagation();
       const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());

package/es/components/FileUploader/FileUploaderButton.js

@@ -18,23 +18,22 @@ import { noopFn } from '../../internal/noopFn.js';
 import { ButtonKinds } from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-function FileUploaderButton(_ref) {
-  let {
-    accept,
-    buttonKind = 'primary',
-    className,
-    disabled = false,
-    disableLabelChanges = false,
-    id,
-    labelText: ownerLabelText = 'Add file',
-    multiple = false,
-    onChange = noopFn,
-    name,
-    size = 'md',
-    // eslint-disable-next-line react/prop-types
-    innerRef,
-    ...other
-  } = _ref;
+function FileUploaderButton({
+  accept,
+  buttonKind = 'primary',
+  className,
+  disabled = false,
+  disableLabelChanges = false,
+  id,
+  labelText: ownerLabelText = 'Add file',
+  multiple = false,
+  onChange = noopFn,
+  name,
+  size = 'md',
+  // eslint-disable-next-line react/prop-types
+  innerRef,
+  ...other
+}) {
   const prefix = usePrefix();
   const [labelText, setLabelText] = useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -17,22 +17,21 @@ import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-function FileUploaderDropContainer(_ref) {
-  let {
-    accept = [],
-    className,
-    id,
-    disabled,
-    labelText = 'Add file',
-    multiple = false,
-    name,
-    onAddFiles = noopFn,
-    onClick,
-    pattern = '.[0-9a-z]+$',
-    // eslint-disable-next-line react/prop-types
-    innerRef,
-    ...rest
-  } = _ref;
+function FileUploaderDropContainer({
+  accept = [],
+  className,
+  id,
+  disabled,
+  labelText = 'Add file',
+  multiple = false,
+  name,
+  onAddFiles = noopFn,
+  onClick,
+  pattern = '.[0-9a-z]+$',
+  // eslint-disable-next-line react/prop-types
+  innerRef,
+  ...rest
+}) {
   const prefix = usePrefix();
   const inputRef = useRef(null);
   const {

package/es/components/FileUploader/FileUploaderItem.js

@@ -20,20 +20,19 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { Text } from '../Text/Text.js';
 
-function FileUploaderItem(_ref) {
-  let {
-    uuid,
-    name,
-    status = 'uploading',
-    iconDescription,
-    onDelete = noopFn,
-    invalid,
-    errorSubject,
-    errorBody,
-    size,
-    className,
-    ...other
-  } = _ref;
+function FileUploaderItem({
+  uuid,
+  name,
+  status = 'uploading',
+  iconDescription,
+  onDelete = noopFn,
+  invalid,
+  errorSubject,
+  errorBody,
+  size,
+  className,
+  ...other
+}) {
   const textRef = useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();

package/es/components/FileUploader/Filename.js

@@ -13,16 +13,15 @@ import Loading from '../Loading/Loading.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Close;
-function Filename(_ref) {
-  let {
-    iconDescription = 'Uploading file',
-    status = 'uploading',
-    invalid,
-    name,
-    tabIndex = 0,
-    ['aria-describedby']: ariaDescribedBy,
-    ...rest
-  } = _ref;
+function Filename({
+  iconDescription = 'Uploading file',
+  status = 'uploading',
+  invalid,
+  name,
+  tabIndex = 0,
+  ['aria-describedby']: ariaDescribedBy,
+  ...rest
+}) {
   const prefix = usePrefix();
   switch (status) {
     case 'uploading':

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

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const FluidComboBoxSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidComboBoxSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/FluidComboBox/FluidComboBox.js

@@ -13,12 +13,11 @@ import ComboBox from '../ComboBox/ComboBox.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidComboBox = /*#__PURE__*/React.forwardRef(function FluidComboBox(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    ...other
-  } = _ref;
+const FluidComboBox = /*#__PURE__*/React.forwardRef(function FluidComboBox({
+  className,
+  isCondensed,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

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

@@ -13,12 +13,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { Calendar } from '@carbon/icons-react';
 
-const FluidDatePickerSkeleton = _ref => {
-  let {
-    className,
-    datePickerType = 'single',
-    ...other
-  } = _ref;
+const FluidDatePickerSkeleton = ({
+  className,
+  datePickerType = 'single',
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, {
     [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === 'range'

package/es/components/FluidDatePicker/FluidDatePicker.js

@@ -14,17 +14,16 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import React from 'react';
 
-const FluidDatePicker = /*#__PURE__*/React.forwardRef(function FluidDatePicker(_ref, ref) {
-  let {
-    className,
-    children,
-    invalid,
-    invalidText,
-    readOnly,
-    warn,
-    warnText,
-    ...other
-  } = _ref;
+const FluidDatePicker = /*#__PURE__*/React.forwardRef(function FluidDatePicker({
+  className,
+  children,
+  invalid,
+  invalidText,
+  readOnly,
+  warn,
+  warnText,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--date-picker--fluid`]: true,

package/es/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const FluidDropdownSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidDropdownSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/FluidDropdown/FluidDropdown.js

@@ -14,12 +14,11 @@ import '../Dropdown/Dropdown.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidDropdown = /*#__PURE__*/React.forwardRef(function FluidDropdown(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    ...other
-  } = _ref;
+const FluidDropdown = /*#__PURE__*/React.forwardRef(function FluidDropdown({
+  className,
+  isCondensed,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/es/components/FluidForm/FluidForm.js

@@ -13,12 +13,11 @@ import Form from '../Form/Form.js';
 import { FormContext } from './FormContext.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const FluidForm = _ref => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const FluidForm = ({
+  className,
+  children,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--form--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -11,11 +11,10 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const FluidMultiSelectSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidMultiSelectSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React.createElement("div", _extends({

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -14,13 +14,12 @@ import { MultiSelect } from '../MultiSelect/MultiSelect.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidMultiSelect = /*#__PURE__*/React.forwardRef(function FluidMultiSelect(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    isFilterable,
-    ...other
-  } = _ref;
+const FluidMultiSelect = /*#__PURE__*/React.forwardRef(function FluidMultiSelect({
+  className,
+  isCondensed,
+  isFilterable,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -12,11 +12,10 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidNumberInputSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidNumberInputSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { type NumberFormatOptions } from '@carbon/utilities';
 export interface FluidNumberInputProps {
     /**
      * `true` to allow empty string.
@@ -26,6 +27,13 @@ export interface FluidNumberInputProps {
      * Specify if the control should be disabled, or not
      */
     disabled?: boolean;
+    /**
+     * **Experimental:** Specify Intl.NumberFormat options applied to internal
+     * number parsing and formatting. Use with `type="text"`, has no effect when
+     * `type="number"`.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+     */
+    formatOptions?: NumberFormatOptions;
     /**
      * Provide a description for up/down icons that can be read by screen readers
      */
@@ -34,6 +42,12 @@ export interface FluidNumberInputProps {
      * Specify a custom `id` for the input
      */
     id: string;
+    /**
+     * Instruct the browser which keyboard to display on mobile devices. Note that
+     * standard numeric keyboards vary across devices and operating systems.
+     * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+     */
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     /**
      * Specify if the currently value is invalid.
      */
@@ -47,6 +61,12 @@ export interface FluidNumberInputProps {
      * this field is for
      */
     label?: React.ReactNode;
+    /**
+     * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+     * language code for parsing and formatting. Use with `type="text"`, has no
+     * effect when `type="number"`.
+     */
+    locale?: string;
     /**
      * The maximum value.
      */
@@ -55,7 +75,15 @@ export interface FluidNumberInputProps {
      * The minimum value.
      */
     min?: number;
-    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * NumberInput changes. This handler is called with event and state info.
+     * When type="number", this is called on every change of the input.
+     * When type="text", this is only called on blur after the number has been
+     * parsed and formatted.
+     * `(event, { value, direction }) => void`
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>, state: {
         value: number | string;
         direction: string;
     }) => void;
@@ -70,6 +98,11 @@ export interface FluidNumberInputProps {
      * Provide an optional function to be called when a key is pressed in the number input
      */
     onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * When type="text", provide an optional pattern to restrict user input. Has
+     * no effect when type="number".
+     */
+    pattern?: string;
     /**
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
@@ -78,6 +111,12 @@ export interface FluidNumberInputProps {
      * Provide custom text for the component for each translation id
      */
     translateWithId?: (id: string) => string;
+    /**
+     * **Experimental**: Specify if the input should be of type text or number.
+     * Use type="text" with `locale`, `formatOptions`, and guide user input with
+     * `pattern` and `inputMode`.
+     */
+    type?: 'number' | 'text';
     /**
      * Specify the value of the input
      */

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -13,12 +13,12 @@ import '../NumberInput/NumberInput.Skeleton.js';
 import { NumberInput } from '../NumberInput/NumberInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { NumberFormatOptionsPropType } from '../NumberInput/NumberFormatPropTypes.js';
 
-const FluidNumberInput = /*#__PURE__*/React.forwardRef(function FluidNumberInput(_ref, ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidNumberInput = /*#__PURE__*/React.forwardRef(function FluidNumberInput({
+  className,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--number-input--fluid`, className);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
@@ -51,6 +51,13 @@ FluidNumberInput.propTypes = {
    * Specify if the control should be disabled, or not
    */
   disabled: PropTypes.bool,
+  /**
+   * **Experimental:** Specify Intl.NumberFormat options applied to internal
+   * number parsing and formatting. Use with `type="text"`, has no effect when
+   * `type="number"`.
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+   */
+  formatOptions: NumberFormatOptionsPropType,
   /**
    * Provide a description for up/down icons that can be read by screen readers
    */
@@ -59,6 +66,12 @@ FluidNumberInput.propTypes = {
    * Specify a custom `id` for the input
    */
   id: PropTypes.string.isRequired,
+  /**
+   * Instruct the browser which keyboard to display on mobile devices. Note that
+   * standard numeric keyboards vary across devices and operating systems.
+   * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
+   */
+  inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   /**
    * Specify if the currently value is invalid.
    */
@@ -72,6 +85,12 @@ FluidNumberInput.propTypes = {
    * this field is for
    */
   label: PropTypes.node,
+  /**
+   * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
+   * language code for parsing and formatting. Use with `type="text"`, has no
+   * effect when `type="number"`.
+   */
+  locale: PropTypes.string,
   /**
    * The maximum value.
    */
@@ -83,6 +102,9 @@ FluidNumberInput.propTypes = {
   /**
    * Provide an optional handler that is called when the internal state of
    * NumberInput changes. This handler is called with event and state info.
+   * When type="number", this is called on every change of the input.
+   * When type="text", this is only called on blur after the number has been
+   * parsed and formatted.
    * `(event, { value, direction }) => void`
    */
   onChange: PropTypes.func,
@@ -94,6 +116,11 @@ FluidNumberInput.propTypes = {
    * Provide an optional function to be called when a key is pressed in the number input
    */
   onKeyUp: PropTypes.func,
+  /**
+   * When type="text", provide an optional pattern to restrict user input. Has
+   * no effect when type="number".
+   */
+  pattern: PropTypes.string,
   /**
    * Specify how much the values should increase/decrease upon clicking on up/down button
    */
@@ -102,6 +129,12 @@ FluidNumberInput.propTypes = {
    * Provide custom text for the component for each translation id
    */
   translateWithId: PropTypes.func,
+  /**
+   * **Experimental**: Specify if the input should be of type text or number.
+   * Use type="text" with `locale`, `formatOptions`, and guide user input with
+   * `pattern` and `inputMode`.
+   */
+  type: PropTypes.oneOf(['number', 'text']),
   /**
    * Specify the value of the input
    */