@carbon/react 1.97.0-rc.0 → 1.98.0

package/lib/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/lib/components/FileUploader/FileUploader.js

@@ -24,7 +24,6 @@ require('../Text/TextDirection.js');
 var useId = require('../../internal/useId.js');
 var index = require('../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,
@@ -35,8 +34,10 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   iconDescription,
   labelDescription,
   labelTitle,
+  maxFileSize,
   multiple,
   name,
+  onAddFiles,
   onChange,
   onClick,
   onDelete,
@@ -48,20 +49,51 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   const enhancedFileUploaderEnabled = index.useFeatureFlag('enable-enhanced-file-uploader');
   const [fileItems, setFileItems] = React.useState([]);
   const [legacyFileNames, setLegacyFileNames] = React.useState([]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-  const [fileObjects, setFileObjects] = React.useState(new Map());
+  const uploaderButton = /*#__PURE__*/React.createRef();
   const nodes = [];
-  const createFileItem = file => ({
+  const createFileItem = React.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 = React.useCallback(files => {
+    return files.map(file => {
+      if (maxFileSize && file.size > maxFileSize) {
+        file.invalidFileType = true;
+      }
+      return file;
+    });
+  }, [maxFileSize]);
   const handleChange = React.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));
@@ -88,23 +120,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 = React.useCallback((evt, {
     index,
     filenameStatus
@@ -141,15 +164,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);
         }
@@ -159,9 +173,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]);
   React.useImperativeHandle(ref, () => ({
     clearFiles() {
       if (enhancedFileUploaderEnabled) {
@@ -184,7 +196,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
         }
       } else {
         setLegacyFileNames([]);
-        setFileObjects(new Map());
       }
     },
     ...(enhancedFileUploaderEnabled && {
@@ -193,7 +204,6 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
       }
     })
   }), [enhancedFileUploaderEnabled, fileItems, onChange]);
-  const uploaderButton = /*#__PURE__*/React.createRef();
   const classes = cx({
     [`${prefix}--form-item`]: true,
     [className]: className
@@ -267,6 +277,7 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     })
   }))))));
 });
+FileUploader.displayName = 'FileUploader';
 FileUploader.propTypes = {
   /**
    * Specify the types of files that this input should be able to receive
@@ -305,6 +316,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
    */
@@ -313,6 +328,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/lib/components/FileUploader/FileUploaderButton.js

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

package/lib/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/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -27,6 +27,7 @@ function FileUploaderDropContainer({
   id,
   disabled,
   labelText = 'Add file',
+  maxFileSize,
   multiple = false,
   name,
   onAddFiles = noopFn.noopFn,
@@ -37,10 +38,10 @@ function FileUploaderDropContainer({
 }) {
   const prefix = usePrefix.usePrefix();
   const inputRef = React.useRef(null);
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId.useId();
   const {
     current: uid
-  } = React.useRef(id || useId.useId());
+  } = React.useRef(id || generatedId);
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
@@ -48,12 +49,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 {
@@ -62,6 +60,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;
       }
@@ -174,6 +179,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/lib/components/FileUploader/FileUploaderItem.js

@@ -40,10 +40,10 @@ function FileUploaderItem({
   const textRef = React.useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
+  const generatedId = useId.useId();
   const {
     current: id
-  } = React.useRef(uuid || useId.useId());
+  } = React.useRef(uuid || generatedId);
   const classes = cx(`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
@@ -53,11 +53,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;
   };
   React.useLayoutEffect(() => {
     isEllipsisActive(textRef.current);

package/lib/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/lib/components/Modal/Modal.js

@@ -171,7 +171,7 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
     // behavior by explicitly setting preventCloseOnClickOutside to false,
     // rather than just leaving it undefined.
     !passiveModal && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -198,7 +198,8 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
           endTrapNode,
           currentActiveNode,
           oldActiveNode,
-          selectorsFloatingMenus
+          selectorsFloatingMenus,
+          prefix
         });
         if (wrapFocusTimeout.current) {
           clearTimeout(wrapFocusTimeout.current);

package/lib/components/Notification/Notification.js

@@ -511,7 +511,7 @@ function ActionableNotification({
   const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect.default(() => {
     if (hasFocus && role === 'alertdialog') {
-      const button = document.querySelector('button.cds--actionable-notification__action-button');
+      const button = document.querySelector(`button.${prefix}--actionable-notification__action-button`);
       button?.focus();
     }
   });
@@ -534,7 +534,8 @@ function ActionableNotification({
         startTrapNode,
         endTrapNode,
         currentActiveNode,
-        oldActiveNode
+        oldActiveNode,
+        prefix
       });
     }
   }

package/lib/components/Pagination/Pagination.js

@@ -11,16 +11,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var PropTypes = require('prop-types');
 var React = require('react');
+var index = require('../IconButton/index.js');
+var PropTypes = require('prop-types');
 var Select = require('../Select/Select.js');
 require('../Select/Select.Skeleton.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
+var cx = require('classnames');
+var isEqual = require('react-fast-compare');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var index = require('../IconButton/index.js');
-var isEqual = require('react-fast-compare');
 
 var _CaretLeft, _CaretRight;
 function mapPageSizesToObject(sizes) {
@@ -270,7 +270,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
     onClick: decrementPage,
     ref: backBtnRef
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React.createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React.createElement(index.IconButton, {
-    align: "top-end",
+    align: "top",
     disabled: forwardButtonDisabled || isLastPage,
     kind: "ghost",
     className: forwardButtonClasses,

package/lib/components/Popover/index.js

@@ -118,8 +118,8 @@ forwardRef) {
       // If a value is not set via a custom property, provide a default value that matches the
       // default values defined in the sass style file
       const getStyle = window.getComputedStyle(popover.current, null);
-      const offsetProperty = getStyle.getPropertyValue('--cds-popover-offset');
-      const caretProperty = getStyle.getPropertyValue('--cds-popover-caret-height');
+      const offsetProperty = getStyle.getPropertyValue(`--${prefix}-popover-offset`);
+      const caretProperty = getStyle.getPropertyValue(`--${prefix}-popover-caret-height`);
 
       // Handle if the property values are in px or rem.
       // We want to store just the base number value without a unit suffix

package/lib/components/Select/Select.js

@@ -18,12 +18,12 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var useId = require('../../internal/useId.js');
 var events = require('../../tools/events.js');
 var Text = require('../Text/Text.js');
 require('../Text/TextDirection.js');
 var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 
 const Select = /*#__PURE__*/React.forwardRef(({
   className,
@@ -53,7 +53,6 @@ const Select = /*#__PURE__*/React.forwardRef(({
     isFluid
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
-  const selectInstanceId = useId.useId();
   // Convert children to an array of valid elements once using type narrowing
   const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 
@@ -65,55 +64,50 @@ const Select = /*#__PURE__*/React.forwardRef(({
   // otherwise, fallback to the first option's text
   const initialTitle = other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || '';
   const [title, setTitle] = React.useState(initialTitle);
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid,
+    invalidText,
+    warn,
+    warnText
+  });
   const selectClasses = cx({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,
     [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: invalid,
-    [`${prefix}--select--disabled`]: disabled,
+    [`${prefix}--select--invalid`]: normalizedProps.invalid,
+    [`${prefix}--select--disabled`]: normalizedProps.disabled,
     [`${prefix}--select--readonly`]: readOnly,
-    [`${prefix}--select--warning`]: warn,
-    [`${prefix}--select--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--select--warning`]: normalizedProps.warn,
+    [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
     [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--select--slug`]: slug,
     [`${prefix}--select--decorator`]: decorator
   });
   const labelClasses = cx(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: disabled
+    [`${prefix}--label--disabled`]: normalizedProps.disabled
   });
   const inputClasses = cx({
     [`${prefix}--select-input`]: true,
     [`${prefix}--select-input--${size}`]: size
   });
-  const errorId = `${id}-error-msg`;
-  const errorText = (() => {
-    if (invalid) {
-      return invalidText;
-    }
-    if (warn) {
-      return warnText;
-    }
-  })();
-  const error = invalid || warn ? /*#__PURE__*/React.createElement(Text.Text, {
-    as: "div",
-    className: `${prefix}--form-requirement`,
-    id: errorId
-  }, errorText) : null;
+  const error = normalizedProps.validation;
   const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: disabled
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
   });
-  const helperId = !helperText ? undefined : `select-helper-text-${selectInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
-    id: helperId,
+    id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
   const ariaProps = {};
-  if (invalid) {
-    ariaProps['aria-describedby'] = errorId;
+  if (normalizedProps.invalid) {
+    ariaProps['aria-describedby'] = normalizedProps.invalidId;
   } else if (!inline && !isFluid) {
-    ariaProps['aria-describedby'] = helper ? helperId : undefined;
+    ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
   }
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
@@ -150,8 +144,8 @@ const Select = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _rollupPluginBabelHelpers.extends({}, other, ariaProps, {
       id: id,
       className: inputClasses,
-      disabled: disabled || undefined,
-      "aria-invalid": invalid || undefined,
+      disabled: normalizedProps.disabled || undefined,
+      "aria-invalid": normalizedProps.invalid || undefined,
       "aria-readonly": readOnly || undefined,
       title: title,
       onChange: events.composeEventHandlers([onChange, handleChange])
@@ -159,9 +153,9 @@ const Select = /*#__PURE__*/React.forwardRef(({
       ref: ref
     }), children), /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
       className: `${prefix}--select__arrow`
-    }), invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
+    }), normalizedProps.invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
       className: `${prefix}--select__invalid-icon`
-    }), !invalid && warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
+    }), !normalizedProps.invalid && normalizedProps.warn && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
       className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
     }));
   })();
@@ -177,10 +171,10 @@ const Select = /*#__PURE__*/React.forwardRef(({
     className: `${prefix}--select-input--inline__wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null
+    "data-invalid": normalizedProps.invalid || null
   }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--select-input__wrapper`,
-    "data-invalid": invalid || null,
+    "data-invalid": normalizedProps.invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
   }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {

package/lib/components/Toggletip/index.d.ts

@@ -111,3 +111,4 @@ export declare namespace ToggletipActions {
         className: PropTypes.Requireable<string>;
     };
 }
+export default Toggletip;

package/lib/components/Toggletip/index.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
@@ -289,3 +291,4 @@ exports.ToggletipActions = ToggletipActions;
 exports.ToggletipButton = ToggletipButton;
 exports.ToggletipContent = ToggletipContent;
 exports.ToggletipLabel = ToggletipLabel;
+exports.default = Toggletip;

package/lib/components/Tooltip/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 { DefinitionTooltip } from './DefinitionTooltip';
+import { DefinitionTooltip, type DefinitionTooltipProps } from './DefinitionTooltip';
 import { Tooltip, type TooltipProps } from './Tooltip';
-export { DefinitionTooltip, Tooltip, type TooltipProps };
+export { DefinitionTooltip, Tooltip, type DefinitionTooltipProps, type TooltipProps, };
+export default Tooltip;