@carbon/react 1.97.0 → 1.98.0

package/es/components/DatePickerInput/DatePickerInput.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
+import { Calendar, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { warning } from '../../internal/warning.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -19,6 +19,7 @@ import '../Text/TextDirection.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
 
@@ -41,8 +42,9 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     size = 'md',
     slug,
     type = 'text',
-    warn,
+    warn = false,
     warnText,
+    readOnly,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -50,6 +52,15 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     isFluid
   } = useContext(FormContext);
   const datePickerInputInstanceId = useId();
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const datePickerInputProps = {
     id,
     onChange: event => {
@@ -71,28 +82,28 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     didWarnAboutDatePickerInputValue = true;
   }
   const wrapperClasses = cx(`${prefix}--date-picker-input__wrapper`, {
-    [`${prefix}--date-picker-input__wrapper--invalid`]: invalid,
-    [`${prefix}--date-picker-input__wrapper--warn`]: warn,
+    [`${prefix}--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
+    [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
     [`${prefix}--date-picker-input__wrapper--slug`]: slug,
     [`${prefix}--date-picker-input__wrapper--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled,
-    [`${prefix}--label--readonly`]: rest.readOnly
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
+    [`${prefix}--label--readonly`]: readOnly
   });
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx(`${prefix}--date-picker__input`, {
     [`${prefix}--date-picker__input--${size}`]: size,
-    [`${prefix}--date-picker__input--invalid`]: invalid,
-    [`${prefix}--date-picker__input--warn`]: warn
+    [`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--date-picker__input--warn`]: normalizedProps.warn
   });
   const containerClasses = cx(`${prefix}--date-picker-container`, {
     [`${prefix}--date-picker--nolabel`]: !labelText,
-    [`${prefix}--date-picker--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--date-picker--fluid--warn`]: isFluid && warn
+    [`${prefix}--date-picker--fluid--invalid`]: isFluid && normalizedProps.invalid,
+    [`${prefix}--date-picker--fluid--warn`]: isFluid && normalizedProps.warn
   });
   const datePickerInputHelperId = !helperText ? undefined : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
 
@@ -101,11 +112,11 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     ...rest,
     ...datePickerInputProps,
     className: inputClasses,
-    disabled,
+    disabled: normalizedProps.disabled,
     ref,
     ['aria-describedby']: helperText ? datePickerInputHelperId : undefined
   };
-  if (invalid) {
+  if (normalizedProps.invalid) {
     inputProps['data-invalid'] = true;
   }
   const input = /*#__PURE__*/React.createElement("input", inputProps);
@@ -130,19 +141,11 @@ const DatePickerInput = /*#__PURE__*/React.forwardRef(function DatePickerInput(p
     datePickerType: datePickerType
   }), /*#__PURE__*/React.createElement(DatePickerIcon, {
     datePickerType: datePickerType,
-    invalid: invalid,
-    warn: warn
-  }))), invalid && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`
-  }, invalidText)), warn && !invalid && /*#__PURE__*/React.createElement(React.Fragment, null, isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--date-picker__divider`
-  }), /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`
-  }, warnText)), helperText && !invalid && /*#__PURE__*/React.createElement(Text, {
+    invalid: normalizedProps.invalid,
+    warn: normalizedProps.warn,
+    disabled: normalizedProps.disabled,
+    readOnly: readOnly
+  }))), normalizedProps.validation, helperText && !normalizedProps.invalid && !normalizedProps.warn && /*#__PURE__*/React.createElement(Text, {
     as: "div",
     id: datePickerInputHelperId,
     className: helperTextClasses
@@ -243,7 +246,9 @@ DatePickerInput.propTypes = {
 function DatePickerIcon({
   datePickerType,
   invalid,
-  warn
+  warn,
+  disabled,
+  readOnly
 }) {
   const prefix = usePrefix();
   const {
@@ -254,6 +259,15 @@ function DatePickerIcon({
       return null;
     }
   }
+
+  // Don't show invalid/warn icons when disabled or readonly
+  if (disabled || readOnly) {
+    return /*#__PURE__*/React.createElement(Calendar, {
+      className: `${prefix}--date-picker__icon`,
+      role: "img",
+      "aria-hidden": "true"
+    });
+  }
   if (invalid) {
     return /*#__PURE__*/React.createElement(WarningFilled, {
       className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`
@@ -286,7 +300,15 @@ DatePickerIcon.propTypes = {
   /**
    * Specify whether the control is currently in warning state
    */
-  warn: PropTypes.bool
+  warn: PropTypes.bool,
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify whether the input is readonly
+   */
+  readOnly: PropTypes.bool
 };
 
 export { DatePickerInput as default };

package/es/components/Dropdown/Dropdown.js

@@ -27,7 +27,9 @@ import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxProp
 
 const {
   ItemMouseMove,
-  MenuMouseLeave
+  MenuMouseLeave,
+  ToggleButtonBlur,
+  FunctionCloseMenu
 } = useSelect.stateChangeTypes;
 /**
  * Custom state reducer for `useSelect` in Downshift, providing control over
@@ -61,6 +63,12 @@ function stateReducer(state, actionAndChanges) {
         return state;
       }
       return changes;
+    case ToggleButtonBlur:
+    case FunctionCloseMenu:
+      return {
+        ...changes,
+        selectedItem: state.selectedItem
+      };
     default:
       return changes;
   }

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

@@ -8,7 +8,9 @@ import React, { type HTMLAttributes } from 'react';
 interface FileItem {
     name: string;
     uuid: string;
-    file: File;
+    file: File & {
+        invalidFileType?: boolean;
+    };
 }
 export interface FileChangeData {
     addedFiles: FileItem[];
@@ -58,6 +60,10 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Specify the title text of this `<FileUploader>`
      */
     labelTitle?: string;
+    /**
+     * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+     */
+    maxFileSize?: number;
     /**
      * Specify if the component should accept multiple files to upload
      */
@@ -66,24 +72,32 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      * Provide a name for the underlying `<input>` node
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: Array<File & {
+            invalidFileType?: boolean;
+        }>;
+    }) => void;
     /**
      * Provide an optional `onChange` hook that is called each time the input is changed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Also fires for file deletions and clearFiles operations
      * - Event includes enhanced file information in event.target
      */
-    onChange?: (event: any, data?: FileChangeData) => void;
+    onChange?: (event: React.SyntheticEvent<HTMLElement>, data?: FileChangeData) => void;
     /**
      * Provide an optional `onClick` hook that is called each time the
      * FileUploader is clicked
      */
-    onClick?: (event: any) => void;
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
     /**
      * Provide an optional `onDelete` hook that is called when an uploaded item is removed.
      * When 'enable-enhanced-file-uploader' feature flag is enabled:
      * - Event includes deleted file information in event.target
      */
-    onDelete?: (event: any, data?: FileDeleteData) => void;
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, data?: FileDeleteData) => void;
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
@@ -101,9 +115,10 @@ export interface FileUploaderHandle {
     getCurrentFiles?: () => FileItem[];
 }
 declare const FileUploader: {
-    <ItemType>(props: FileUploaderProps): React.ReactElement<any>;
-    propTypes?: any;
-    contextTypes?: any;
-    defaultProps?: any;
+    (props: FileUploaderProps): React.ReactElement;
+    displayName?: string;
+    propTypes?: unknown;
+    contextTypes?: unknown;
+    defaultProps?: unknown;
 };
 export default FileUploader;

package/es/components/FileUploader/FileUploader.js

@@ -20,7 +20,6 @@ import '../Text/TextDirection.js';
 import { useId } from '../../internal/useId.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
-// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const FileUploader = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonKind,
@@ -31,8 +30,10 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   iconDescription,
   labelDescription,
   labelTitle,
+  maxFileSize,
   multiple,
   name,
+  onAddFiles,
   onChange,
   onClick,
   onDelete,
@@ -44,20 +45,51 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   const enhancedFileUploaderEnabled = useFeatureFlag('enable-enhanced-file-uploader');
   const [fileItems, setFileItems] = useState([]);
   const [legacyFileNames, setLegacyFileNames] = useState([]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-  const [fileObjects, setFileObjects] = useState(new Map());
+  const uploaderButton = /*#__PURE__*/React.createRef();
   const nodes = [];
-  const createFileItem = file => ({
+  const createFileItem = useCallback(file => ({
     name: file.name,
     uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(new Uint8Array(8))).map(b => b.toString(36)).join('')}`,
     file
-  });
+  }), [fileUploaderInstanceId]);
+
+  /**
+   * Validates files based on file size restrictions.
+   * Marks invalid files with `invalidFileType: true` but includes them in the result.
+   *
+   * Note: The `accept` prop is passed to the native HTML input element (`FileUploaderButton`),
+   * which provides UI-level filtering in the file picker dialog, but there is no JavaScript validation
+   * for file types - users can bypass this by changing the file type filter in the dialog.
+   * https://github.com/carbon-design-system/carbon/issues/21166
+   */
+  const validateFiles = useCallback(files => {
+    return files.map(file => {
+      if (maxFileSize && file.size > maxFileSize) {
+        file.invalidFileType = true;
+      }
+      return file;
+    });
+  }, [maxFileSize]);
   const handleChange = useCallback(evt => {
     evt.stopPropagation();
-    const newFiles = Array.from(evt.target.files);
+    const incomingFiles = Array.from(evt.target.files);
+    const filesToValidate = multiple ? incomingFiles : [incomingFiles[0]];
+    const validatedFiles = validateFiles(filesToValidate);
+    if (onAddFiles) {
+      onAddFiles(evt, {
+        addedFiles: validatedFiles
+      });
+    }
+
+    // Filter out invalid files since FileUploader cannot display them
+    // (FileUploaderDropContainer returns all files because parent uses FileUploaderItem to display errors)
+    // https://github.com/carbon-design-system/carbon/issues/21166
+    const validFiles = validatedFiles.filter(file => !file.invalidFileType);
+    if (validFiles.length === 0) {
+      return;
+    }
     if (enhancedFileUploaderEnabled) {
-      const newFileItems = newFiles.map(createFileItem);
+      const newFileItems = validFiles.map(createFileItem);
       let updatedFileItems;
       if (multiple) {
         const existingNames = new Set(fileItems.map(item => item.name));
@@ -84,23 +116,14 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         onChange(enhancedEvent);
       }
     } else {
-      const filenames = newFiles.map(file => file.name);
+      const filenames = validFiles.map(file => file.name);
       const updatedFileNames = multiple ? [...new Set([...legacyFileNames, ...filenames])] : filenames;
       setLegacyFileNames(updatedFileNames);
-      setFileObjects(prevMap => {
-        const newMap = multiple ? new Map(prevMap) : new Map();
-        newFiles.forEach(file => {
-          newMap.set(file.name, file);
-        });
-        return newMap;
-      });
       if (onChange) {
         onChange(evt);
       }
     }
-  },
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onAddFiles, onChange, createFileItem, validateFiles]);
   const handleClick = useCallback((evt, {
     index,
     filenameStatus
@@ -137,15 +160,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         const deletedFileName = legacyFileNames[index];
         const filteredArray = legacyFileNames.filter(filename => filename !== deletedFileName);
         setLegacyFileNames(filteredArray);
-
-        // Update File objects
-        setFileObjects(prevMap => {
-          const newMap = new Map(prevMap);
-          if (deletedFileName) {
-            newMap.delete(deletedFileName);
-          }
-          return newMap;
-        });
         if (onDelete) {
           onDelete(evt);
         }
@@ -155,9 +169,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
       uploaderButton.current?.focus?.();
     }
-  },
-  // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick, uploaderButton]);
   useImperativeHandle(ref, () => ({
     clearFiles() {
       if (enhancedFileUploaderEnabled) {
@@ -180,7 +192,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         }
       } else {
         setLegacyFileNames([]);
-        setFileObjects(new Map());
       }
     },
     ...(enhancedFileUploaderEnabled && {
@@ -189,7 +200,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
     })
   }), [enhancedFileUploaderEnabled, fileItems, onChange]);
-  const uploaderButton = /*#__PURE__*/React.createRef();
   const classes = cx({
     [`${prefix}--form-item`]: true,
     [className]: className
@@ -263,6 +273,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     })
   }))))));
 });
+FileUploader.displayName = 'FileUploader';
 FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
@@ -301,6 +312,10 @@ FileUploader.propTypes = {
    * Specify the title text of this `<FileUploader>`
    */
   labelTitle: PropTypes.string,
+  /**
+   * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+   */
+  maxFileSize: PropTypes.number,
   /**
    * Specify if the component should accept multiple files to upload
    */
@@ -309,6 +324,11 @@ FileUploader.propTypes = {
    * Provide a name for the underlying `<input>` node
    */
   name: PropTypes.string,
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles: PropTypes.func,
   /**
    * Provide an optional `onChange` hook that is called each time the input is
    * changed

package/es/components/FileUploader/FileUploaderButton.js

@@ -36,10 +36,10 @@ function FileUploaderButton({
   const prefix = usePrefix();
   const [labelText, setLabelText] = useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId();
   const {
     current: inputId
-  } = useRef(id || useId());
+  } = useRef(id || generatedId);
   const inputNode = useRef(null);
   const classes = cx(`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

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

@@ -28,6 +28,10 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      * this control
      */
     labelText?: string;
+    /**
+     * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+     */
+    maxFileSize?: number;
     /**
      * Specify if the component should accept multiple files to upload
      */
@@ -40,7 +44,7 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      * Event handler that is called after files are added to the uploader
      */
     onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
-        addedFiles: File[];
+        addedFiles: AddedFile[];
     }) => void;
     /**
      * Provide an optional function to be called when the button element
@@ -64,7 +68,10 @@ export interface FileUploaderDropContainerProps extends Omit<HTMLAttributes<HTML
      */
     tabIndex?: number | string;
 }
-declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): import("react/jsx-runtime").JSX.Element;
+interface AddedFile extends File {
+    invalidFileType?: boolean;
+}
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, maxFileSize, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**
@@ -88,6 +95,10 @@ declare namespace FileUploaderDropContainer {
          * this control
          */
         labelText: PropTypes.Validator<string>;
+        /**
+         * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+         */
+        maxFileSize: PropTypes.Requireable<number>;
         /**
          * Specify if the component should accept multiple files to upload
          */

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -23,6 +23,7 @@ function FileUploaderDropContainer({
   id,
   disabled,
   labelText = 'Add file',
+  maxFileSize,
   multiple = false,
   name,
   onAddFiles = noopFn,
@@ -33,10 +34,10 @@ function FileUploaderDropContainer({
 }) {
   const prefix = usePrefix();
   const inputRef = useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId();
   const {
     current: uid
-  } = useRef(id || useId());
+  } = useRef(id || generatedId);
   const [isActive, setActive] = useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
@@ -44,12 +45,9 @@ function FileUploaderDropContainer({
   }, className);
 
   /**
-   * Filters the array of added files based on file type restrictions
+   * Filters the array of added files based on file type and size restrictions
    */
   function validateFiles(transferredFiles) {
-    if (!accept.length) {
-      return transferredFiles;
-    }
     const acceptedTypes = new Set(accept);
     return transferredFiles.reduce((acc, curr) => {
       const {
@@ -58,6 +56,13 @@ function FileUploaderDropContainer({
       } = curr;
       const fileExtensionRegExp = new RegExp(pattern, 'i');
       const [fileExtension] = name.match(fileExtensionRegExp) ?? [];
+      if (maxFileSize && curr.size > maxFileSize) {
+        curr.invalidFileType = true;
+        return acc.concat([curr]);
+      }
+      if (!accept.length) {
+        return acc.concat([curr]);
+      }
       if (fileExtension === undefined) {
         return acc;
       }
@@ -170,6 +175,10 @@ FileUploaderDropContainer.propTypes = {
    * this control
    */
   labelText: PropTypes.string.isRequired,
+  /**
+   * Maximum file size allowed in bytes. Files larger than this will be marked invalid
+   */
+  maxFileSize: PropTypes.number,
   /**
    * Specify if the component should accept multiple files to upload
    */

package/es/components/FileUploader/FileUploaderItem.js

@@ -36,10 +36,10 @@ function FileUploaderItem({
   const textRef = useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId();
   const {
     current: id
-  } = useRef(uuid || useId());
+  } = useRef(uuid || generatedId);
   const classes = cx(`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
@@ -49,11 +49,14 @@ function FileUploaderItem({
   const filterSpaceName = name => {
     return name?.replace(/\s+/g, '');
   };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
+    if (!element) {
+      setIsEllipsisApplied(false);
+      return false;
+    }
+    const isActive = element.offsetWidth < element.scrollWidth;
+    setIsEllipsisApplied(isActive);
+    return isActive;
   };
   useLayoutEffect(() => {
     isEllipsisActive(textRef.current);

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

@@ -4,6 +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 { Menu } from './Menu';
-import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable } from './MenuItem';
-export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, };
+import { Menu, type MenuProps } from './Menu';
+import { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps } from './MenuItem';
+export { Menu, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, type MenuProps, type MenuItemProps, type MenuItemDividerProps, type MenuItemGroupProps, type MenuItemRadioGroupProps, type MenuItemSelectableProps, };
+export default Menu;

package/es/components/Pagination/Pagination.js

@@ -7,16 +7,16 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useRef, useState, useEffect } from 'react';
+import { IconButton } from '../IconButton/index.js';
+import PropTypes from 'prop-types';
 import Select from '../Select/Select.js';
 import '../Select/Select.Skeleton.js';
 import SelectItem from '../SelectItem/SelectItem.js';
+import cx from 'classnames';
+import isEqual from 'react-fast-compare';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { IconButton } from '../IconButton/index.js';
-import isEqual from 'react-fast-compare';
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -266,7 +266,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(CaretLeft, null))), /*#__PURE__*/React.createElement(IconButton, {
-    align: "top-end",
+    align: "top",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,