@carbon/react 1.68.0 → 1.69.0

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/Grid/CSSGrid.js

@@ -14,6 +14,7 @@ import { useGridSettings, GridSettings } from './GridContext.js';
 
 function CSSGrid(_ref) {
   let {
+    align,
     as: BaseComponent = 'div',
     children,
     className: customClassName,
@@ -46,7 +47,9 @@ function CSSGrid(_ref) {
     [`${prefix}--css-grid`]: true,
     [`${prefix}--css-grid--condensed`]: mode === 'condensed',
     [`${prefix}--css-grid--narrow`]: mode === 'narrow',
-    [`${prefix}--css-grid--full-width`]: fullWidth
+    [`${prefix}--css-grid--full-width`]: fullWidth,
+    [`${prefix}--css-grid--start`]: align === 'start',
+    [`${prefix}--css-grid--end`]: align === 'end'
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
@@ -59,6 +62,10 @@ function CSSGrid(_ref) {
   }, rest), children));
 }
 CSSGrid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

package/es/components/Grid/Grid.js

@@ -19,6 +19,10 @@ function Grid(props) {
   return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
 }
 Grid.propTypes = {
+  /**
+   * Specify grid aligment. Default is center
+   */
+  align: PropTypes.oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { PropsWithChildren, ReactNode } from 'react';
+type IdPrefixProps = {
+    children?: ReactNode;
+    /**
+     * The value used to prefix the auto-generated id placed on some DOM elements
+     */
+    prefix?: string;
+};
+declare function IdPrefix({ children, prefix }: PropsWithChildren<IdPrefixProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace IdPrefix {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The value used to prefix the auto-generated id placed on some DOM elements
+         */
+        prefix: PropTypes.Requireable<string>;
+    };
+}
+export { IdPrefix };

package/es/components/ListBox/next/ListBoxSelection.d.ts

@@ -37,6 +37,10 @@ export interface ListBoxSelectionProps {
      * Specify whether or not the clear selection element should be disabled
      */
     disabled?: boolean;
+    /**
+     * Whether or not the listbox is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify an optional `onClearSelection` handler that is called when the underlying
      * element is cleared
@@ -58,7 +62,7 @@ export interface ListBoxSelectionProps {
      */
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
 }
-declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t, disabled, readOnly, onClearSelection, ...rest }: ListBoxSelectionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListBoxSelection {
     var propTypes: {
         /**
@@ -70,6 +74,10 @@ declare namespace ListBoxSelection {
          * Specify whether or not the clear selection element should be disabled
          */
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Whether or not the listbox is readonly
+         */
+        readOnly: PropTypes.Requireable<boolean>;
         /**
          * Specify an optional `onClearSelection` handler that is called when the underlying
          * element is cleared

package/es/components/ListBox/next/ListBoxSelection.js

@@ -26,6 +26,7 @@ function ListBoxSelection(_ref) {
     selectionCount,
     translateWithId: t = defaultTranslateWithId,
     disabled,
+    readOnly,
     onClearSelection,
     ...rest
   } = _ref;
@@ -40,7 +41,7 @@ function ListBoxSelection(_ref) {
   });
   function onClick(event) {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -57,21 +58,23 @@ function ListBoxSelection(_ref) {
     }, selectionCount), /*#__PURE__*/React__default.createElement("button", {
       "aria-label": description,
       className: `${prefix}--tag__close-icon`,
-      disabled: disabled,
+      disabled: disabled || readOnly,
       onClick: onClick,
       tabIndex: -1,
       title: description,
-      type: "button"
+      type: "button",
+      "aria-disabled": readOnly ? true : undefined
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     "aria-label": description,
     className: className,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: onClick,
     tabIndex: -1,
     title: description,
-    type: "button"
+    type: "button",
+    "aria-disabled": readOnly ? true : undefined
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 }
 ListBoxSelection.propTypes = {
@@ -84,6 +87,10 @@ ListBoxSelection.propTypes = {
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Whether or not the listbox is readonly
+   */
+  readOnly: PropTypes.bool,
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared

package/es/components/Menu/MenuItem.js

@@ -347,9 +347,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   });
   function handleClick(item, e) {
     setSelection(item);
-    if (onChange) {
-      onChange(e);
-    }
   }
   useEffect(() => {
     if (!context.state.hasIcons) {
@@ -374,7 +371,7 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     "aria-checked": item === selection,
     renderIcon: item === selection ? Checkmark : undefined,
     onClick: e => {
-      handleClick(item, e);
+      handleClick(item);
     }
   }))));
 });

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

@@ -39,6 +39,10 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
      * Specify the tabIndex of the button.
      */
     tabIndex?: number;
+    /**
+     * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+     */
+    menuTarget?: Element;
 }
 declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MenuButton };

package/es/components/MenuButton/index.js

@@ -18,6 +18,7 @@ import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
@@ -32,14 +33,21 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     size: size$1 = 'lg',
     menuAlignment = 'bottom',
     tabIndex = 0,
+    menuTarget,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId('MenuButton');
   const prefix = usePrefix();
   const triggerRef = useRef(null);
-  const middlewares = [flip({
-    crossAxis: false
-  })];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [flip({
+      crossAxis: false
+    })];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
       apply(_ref2) {
@@ -121,7 +129,8 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     mode: "basic",
     size: size$1,
     open: open,
-    onClose: handleClose
+    onClose: handleClose,
+    target: menuTarget
   }, children));
 });
 MenuButton.propTypes = {
@@ -160,7 +169,12 @@ MenuButton.propTypes = {
    * Specify the tabIndex of the button.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  /**
+   * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
+   */
+
+  menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 
 export { MenuButton };

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -143,6 +143,10 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * what this field is for
      */
     placeholder?: string;
+    /**
+     * Whether or not the filterable multiselect is readonly
+     */
+    readOnly?: boolean;
     /**
      * Specify feedback (mode) of the selection.
      * `top`: selected item jumps to top

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -90,6 +90,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -232,9 +233,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }
   };
   function handleMenuChange(forceIsOpen) {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
   useEffect(() => {
     onMenuChange?.(isOpen);
@@ -423,7 +426,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     [`${prefix}--multi-select--open`]: isOpen,
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
-    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
+    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
+    [`${prefix}--multi-select--readonly`]: readOnly
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -510,6 +514,24 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
+  const mergedRef = mergeRefs(textInput, inputProps.ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
+      // NOTE: does not prevent click
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
+      if (mergedRef.current !== undefined) {
+        mergedRef.current.focus();
+      }
+    },
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+      // This prevents the select from opening for the above keys
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
@@ -533,12 +555,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     invalidText: invalidText,
     warn: warn,
     warnText: warnText,
-    isOpen: isOpen,
+    isOpen: !readOnly && isOpen,
     size: size$1
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+    readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
       if (textInput.current) {
@@ -551,7 +574,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   }), /*#__PURE__*/React__default.createElement("input", _extends({
     className: inputClasses
   }, inputProps, {
-    ref: mergeRefs(textInput, inputProps.ref)
+    ref: mergedRef
+  }, readOnlyEventHandlers, {
+    readOnly: readOnly
   })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
@@ -560,6 +585,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
+    readOnly: readOnly,
     onMouseUp: event => {
       // If we do not stop this event from propagating,
       // it seems like Downshift takes our event and