@carbon/react 1.83.0 → 1.84.0-rc.0

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -38,8 +38,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  */
 
 class ErrorBoundary extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _rollupPluginBabelHelpers.defineProperty(this, "context", void 0);
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       hasError: false

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -25,16 +25,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ExpandableSearch = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableSearch(_ref, forwardedRef) {
-  let {
-    onBlur,
-    onChange,
-    onExpand,
-    onKeyDown,
-    defaultValue,
-    isExpanded,
-    ...props
-  } = _ref;
+const ExpandableSearch = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableSearch({
+  onBlur,
+  onChange,
+  onExpand,
+  onKeyDown,
+  defaultValue,
+  isExpanded,
+  ...props
+}, forwardedRef) {
   const [expanded, setExpanded] = React.useState(isExpanded || false);
   const [hasContent, setHasContent] = React.useState(defaultValue ? true : false);
   const searchRef = React.useRef(null);

package/lib/components/FeatureFlags/index.js

@@ -30,18 +30,17 @@ const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.Featu
  * 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 = React.useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
   const combinedFlags = {

package/lib/components/FileUploader/FileUploader.Skeleton.js

@@ -24,11 +24,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _ButtonSkeleton;
-function FileUploaderSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function FileUploaderSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--form-item`, className)

package/lib/components/FileUploader/FileUploader.js

@@ -29,25 +29,24 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FileUploader = /*#__PURE__*/React__default["default"].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__default["default"].forwardRef(({
+  accept,
+  buttonKind,
+  buttonLabel,
+  className,
+  disabled,
+  filenameStatus,
+  iconDescription,
+  labelDescription,
+  labelTitle,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  onDelete,
+  size,
+  ...other
+}, ref) => {
   const fileUploaderInstanceId = useId.useId('file-uploader');
   const [state, updateState] = React.useState({
     fileNames: []
@@ -64,11 +63,10 @@ const FileUploader = /*#__PURE__*/React__default["default"].forwardRef((_ref, re
       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/lib/components/FileUploader/FileUploaderButton.js

@@ -28,23 +28,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FileUploaderButton(_ref) {
-  let {
-    accept,
-    buttonKind = 'primary',
-    className,
-    disabled = false,
-    disableLabelChanges = false,
-    id,
-    labelText: ownerLabelText = 'Add file',
-    multiple = false,
-    onChange = noopFn.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.noopFn,
+  name,
+  size = 'md',
+  // eslint-disable-next-line react/prop-types
+  innerRef,
+  ...other
+}) {
   const prefix = usePrefix.usePrefix();
   const [labelText, setLabelText] = React.useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -27,22 +27,21 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FileUploaderDropContainer(_ref) {
-  let {
-    accept = [],
-    className,
-    id,
-    disabled,
-    labelText = 'Add file',
-    multiple = false,
-    name,
-    onAddFiles = noopFn.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.noopFn,
+  onClick,
+  pattern = '.[0-9a-z]+$',
+  // eslint-disable-next-line react/prop-types
+  innerRef,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   const inputRef = React.useRef(null);
   const {

package/lib/components/FileUploader/FileUploaderItem.js

@@ -30,20 +30,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FileUploaderItem(_ref) {
-  let {
-    uuid,
-    name,
-    status = 'uploading',
-    iconDescription,
-    onDelete = noopFn.noopFn,
-    invalid,
-    errorSubject,
-    errorBody,
-    size,
-    className,
-    ...other
-  } = _ref;
+function FileUploaderItem({
+  uuid,
+  name,
+  status = 'uploading',
+  iconDescription,
+  onDelete = noopFn.noopFn,
+  invalid,
+  errorSubject,
+  errorBody,
+  size,
+  className,
+  ...other
+}) {
   const textRef = React.useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();

package/lib/components/FileUploader/Filename.js

@@ -22,16 +22,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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.usePrefix();
   switch (status) {
     case 'uploading':

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidComboBoxSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidComboBoxSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -23,12 +23,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidComboBox = /*#__PURE__*/React__default["default"].forwardRef(function FluidComboBox(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    ...other
-  } = _ref;
+const FluidComboBox = /*#__PURE__*/React__default["default"].forwardRef(function FluidComboBox({
+  className,
+  isCondensed,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -23,12 +23,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidDatePickerSkeleton = _ref => {
-  let {
-    className,
-    datePickerType = 'single',
-    ...other
-  } = _ref;
+const FluidDatePickerSkeleton = ({
+  className,
+  datePickerType = 'single',
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, `${prefix}--form-item ${prefix}--date-picker--fluid__skeleton`, {
     [`${prefix}--date-picker--fluid__skeleton--range`]: datePickerType === 'range'

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -24,17 +24,16 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
-  let {
-    className,
-    children,
-    invalid,
-    invalidText,
-    readOnly,
-    warn,
-    warnText,
-    ...other
-  } = _ref;
+const FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker({
+  className,
+  children,
+  invalid,
+  invalidText,
+  readOnly,
+  warn,
+  warnText,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--date-picker--fluid`]: true,

package/lib/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidDropdownSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidDropdownSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FluidDropdown/FluidDropdown.js

@@ -24,12 +24,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidDropdown = /*#__PURE__*/React__default["default"].forwardRef(function FluidDropdown(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    ...other
-  } = _ref;
+const FluidDropdown = /*#__PURE__*/React__default["default"].forwardRef(function FluidDropdown({
+  className,
+  isCondensed,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/lib/components/FluidForm/FluidForm.js

@@ -23,12 +23,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidForm = _ref => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const FluidForm = ({
+  className,
+  children,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--form--fluid`, className);
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidMultiSelectSkeleton = _ref => {
-  let {
-    className,
-    ...rest
-  } = _ref;
+const FluidMultiSelectSkeleton = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const wrapperClasses = cx__default["default"](className, `${prefix}--list-box__wrapper--fluid`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -24,13 +24,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect(_ref, ref) {
-  let {
-    className,
-    isCondensed,
-    isFilterable,
-    ...other
-  } = _ref;
+const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FluidMultiSelect({
+  className,
+  isCondensed,
+  isFilterable,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](`${prefix}--list-box__wrapper--fluid`, className, {
     [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed

package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -22,11 +22,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const FluidNumberInputSkeleton = _ref => {
-  let {
-    className,
-    ...other
-  } = _ref;
+const FluidNumberInputSkeleton = ({
+  className,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {

package/lib/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
      */