@carbon/react 1.39.0 → 1.41.0-rc.0

package/es/components/FileUploader/FileUploaderItem.js

@@ -8,10 +8,15 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { noopFn } from '../../internal/noopFn.js';
+import '../Text/index.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -21,13 +26,14 @@ function FileUploaderItem(_ref) {
     name,
     status = 'uploading',
     iconDescription,
-    onDelete = () => {},
+    onDelete = noopFn,
     invalid,
     errorSubject,
     errorBody,
     size,
     ...other
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const {
     current: id
@@ -37,13 +43,39 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
-  }, other), /*#__PURE__*/React__default.createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default.createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
     title: name,
+    className: `${prefix}--file-filename-button`,
     id: name
-  }, name), /*#__PURE__*/React__default.createElement("span", {
+  }, name)))) : /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
+    title: name,
+    className: `${prefix}--file-filename`,
+    id: name
+  }, name), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default.createElement(Filename, {
     name: name,
@@ -68,13 +100,15 @@ function FileUploaderItem(_ref) {
         });
       }
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
     id: `${name}-id-error`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--form-requirement__title`
-  }, errorSubject), errorBody && /*#__PURE__*/React__default.createElement("p", {
+  }, errorSubject), errorBody && /*#__PURE__*/React__default.createElement(Text, {
+    as: "p",
     className: `${prefix}--form-requirement__supplement`
   }, errorBody)));
 }
@@ -118,9 +152,5 @@ FileUploaderItem.propTypes = {
    */
   uuid: PropTypes.string
 };
-FileUploaderItem.defaultProps = {
-  status: 'uploading',
-  onDelete: () => {}
-};
 
 export { FileUploaderItem as default };

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

@@ -4,11 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export type FilenameStatus = 'edit' | 'complete' | 'uploading';
-export interface FilenameProps extends Omit<ReactAttr<HTMLElement>, 'tabIndex'> {
+type SVGAttr = React.SVGAttributes<React.ReactSVGElement>;
+export interface FilenameProps extends Omit<ReactAttr & SVGAttr, 'tabIndex' | 'type'> {
     /**
      * Specify an id that describes the error to be read by screen readers when the filename is invalid
      */
@@ -32,9 +33,9 @@ export interface FilenameProps extends Omit<ReactAttr<HTMLElement>, 'tabIndex'>
     /**
      * Provide a custom tabIndex value for the `<Filename>`
      */
-    tabIndex?: number | string;
+    tabIndex?: number;
 }
-declare function Filename({ iconDescription, status, invalid, name, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): JSX.Element | null;
+declare function Filename({ iconDescription, status, invalid, name, tabIndex, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): JSX.Element | null;
 declare namespace Filename {
     var propTypes: {
         /**
@@ -60,12 +61,7 @@ declare namespace Filename {
         /**
          * Provide a custom tabIndex value for the `<Filename>`
          */
-        tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-    };
-    var defaultProps: {
-        iconDescription: string;
-        status: string;
-        tabIndex: string;
+        tabIndex: PropTypes.Requireable<number>;
     };
 }
 export default Filename;

package/es/components/FileUploader/Filename.js

@@ -15,10 +15,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 var _Close;
 function Filename(_ref) {
   let {
-    iconDescription,
-    status,
+    iconDescription = 'Uploading file',
+    status = 'uploading',
     invalid,
     name,
+    tabIndex = 0,
     ['aria-describedby']: ariaDescribedBy,
     ...rest
   } = _ref;
@@ -28,7 +29,8 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default.createElement(Loading, {
         description: iconDescription,
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
     case 'edit':
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
@@ -36,9 +38,9 @@ function Filename(_ref) {
       }), /*#__PURE__*/React__default.createElement("button", _extends({
         "aria-label": `${iconDescription} - ${name}`,
         className: `${prefix}--file-close`,
-        type: "button"
+        type: "button",
+        tabIndex: tabIndex
       }, rest, {
-        tabIndex: rest.tabIndex !== undefined ? parseInt(rest.tabIndex, 10) : undefined,
         "aria-describedby": invalid ? ariaDescribedBy : undefined
       }), _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
     case 'complete':
@@ -46,7 +48,7 @@ function Filename(_ref) {
         "aria-label": iconDescription,
         className: `${prefix}--file-complete`
       }, rest, {
-        tabIndex: null
+        tabIndex: -1
       }), iconDescription && /*#__PURE__*/React__default.createElement("title", null, iconDescription));
     default:
       return null;
@@ -76,12 +78,7 @@ Filename.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<Filename>`
    */
-  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-Filename.defaultProps = {
-  iconDescription: 'Uploading file',
-  status: 'uploading',
-  tabIndex: '0'
+  tabIndex: PropTypes.number
 };
 
 export { Filename as default };

package/es/components/FormGroup/FormGroup.d.ts

@@ -71,10 +71,5 @@ declare const FormGroup: {
          */
         messageText: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        invalid: boolean;
-        message: boolean;
-        messageText: string;
-    };
 };
 export default FormGroup;

package/es/components/FormGroup/FormGroup.js

@@ -15,11 +15,11 @@ const FormGroup = _ref => {
   let {
     legendId,
     legendText,
-    invalid,
+    invalid = false,
     children,
     className,
-    message,
-    messageText,
+    message = false,
+    messageText = '',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -68,10 +68,5 @@ FormGroup.propTypes = {
    */
   messageText: PropTypes.string
 };
-FormGroup.defaultProps = {
-  invalid: false,
-  message: false,
-  messageText: ''
-};
 
 export { FormGroup as default };

package/es/components/FormItem/FormItem.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 React from 'react';
+type FormItemProps = {
+    /**
+     * Provide content to be rendered in the form item
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className to be applied to the containing node
+     */
+    className?: string;
+};
+declare function FormItem({ className, children, ...rest }: FormItemProps): JSX.Element;
+declare namespace FormItem {
+    var propTypes: {
+        /**
+         * Provide content to be rendered in the form item
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FormItem;

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

@@ -0,0 +1,9 @@
+/**
+ * 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 FormItem from './FormItem';
+export default FormItem;
+export { FormItem };

package/es/components/FormLabel/FormLabel.js

@@ -10,6 +10,8 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 function FormLabel(_ref) {
   let {
@@ -20,7 +22,8 @@ function FormLabel(_ref) {
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--label`, `${prefix}--label--no-margin`, customClassName);
-  return /*#__PURE__*/React__default.createElement("label", _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
+    as: "label",
     htmlFor: id,
     className: className
   }, rest), children);

package/es/components/ListBox/ListBox.js

@@ -32,8 +32,8 @@ const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, re
   let {
     children,
     className: containerClassName,
-    disabled,
-    type,
+    disabled = false,
+    type = 'default',
     size,
     invalid,
     invalidText,
@@ -88,7 +88,7 @@ ListBox.propTypes = {
   /**
    * Specify whether the ListBox is currently disabled
    */
-  disabled: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
   /**
    * Specify whether the control is currently invalid
    */
@@ -114,7 +114,7 @@ ListBox.propTypes = {
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
-  type: ListBoxType.isRequired,
+  type: ListBoxType,
   /**
    * Specify whether the control is currently in warning state
    */
@@ -124,9 +124,5 @@ ListBox.propTypes = {
    */
   warnText: PropTypes.node
 };
-ListBox.defaultProps = {
-  disabled: false,
-  type: 'default'
-};
 
 export { ListBox as default };

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -52,10 +52,7 @@ ListBoxMenuIcon.propTypes = {
    * icon. This function takes in an id defined in `translationIds` and should
    * return a string message for that given message id.
    */
-  translateWithId: PropTypes.func.isRequired
-};
-ListBoxMenuIcon.defaultProps = {
-  translateWithId: defaultTranslateWithId
+  translateWithId: PropTypes.func
 };
 
 export { ListBoxMenuIcon as default, translationIds };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -31,8 +31,8 @@ function useIsTruncated(ref) {
 const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
   let {
     children,
-    isActive,
-    isHighlighted,
+    isActive = false,
+    isHighlighted = false,
     title,
     ...rest
   } = _ref;
@@ -65,19 +65,15 @@ ListBoxMenuItem.propTypes = {
   /**
    * Specify whether the current menu item is "active".
    */
-  isActive: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool,
   /**
    * Specify whether the current menu item is "highlighted".
    */
-  isHighlighted: PropTypes.bool.isRequired,
+  isHighlighted: PropTypes.bool,
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */
   title: PropTypes.string
 };
-ListBoxMenuItem.defaultProps = {
-  isActive: false,
-  isHighlighted: false
-};
 
 export { ListBoxMenuItem as default };

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

@@ -35,17 +35,17 @@ export interface ListBoxSelectionProps {
      * icon. This function takes in an id defined in `translationIds` and should
      * return a string message for that given message id.
      */
-    translateWithId(messageId: string, args?: Record<string, unknown>): string;
+    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
 }
 export type ListBoxSelectionComponent = React.FC<ListBoxSelectionProps>;
+export declare const translationIds: {
+    'clear.all': string;
+    'clear.selection': string;
+};
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
 declare const ListBoxSelection: ListBoxSelectionComponent;
-export declare const translationIds: {
-    'clear.all': string;
-    'clear.selection': string;
-};
 export default ListBoxSelection;

package/es/components/ListBox/ListBoxSelection.js

@@ -12,6 +12,16 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Close, _Close2;
+const translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
+const defaultTranslateWithId = id => defaultTranslations[id];
+
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
@@ -21,7 +31,7 @@ const ListBoxSelection = _ref => {
   let {
     clearSelection,
     selectionCount,
-    translateWithId: t,
+    translateWithId: t = defaultTranslateWithId,
     disabled,
     onClearSelection,
     readOnly
@@ -69,14 +79,6 @@ const ListBoxSelection = _ref => {
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 };
-const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
-};
-const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
-};
 ListBoxSelection.propTypes = {
   /**
    * Specify a function to be invoked when a user interacts with the clear
@@ -106,10 +108,7 @@ ListBoxSelection.propTypes = {
    * icon. This function takes in an id defined in `translationIds` and should
    * return a string message for that given message id.
    */
-  translateWithId: PropTypes.func.isRequired
-};
-ListBoxSelection.defaultProps = {
-  translateWithId: id => defaultTranslations[id]
+  translateWithId: PropTypes.func
 };
 
 export { ListBoxSelection as default, translationIds };

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

@@ -19,11 +19,21 @@ var _Close, _Close2;
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
+
+const translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
+const defaultTranslateWithId = id => defaultTranslations[id];
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
     selectionCount,
-    translateWithId: t,
+    translateWithId: t = defaultTranslateWithId,
     disabled,
     onClearSelection,
     ...rest
@@ -73,14 +83,6 @@ function ListBoxSelection(_ref) {
     type: "button"
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 }
-const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
-};
-const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
-};
 ListBoxSelection.propTypes = {
   /**
    * Specify a function to be invoked when a user interacts with the clear
@@ -116,10 +118,7 @@ ListBoxSelection.propTypes = {
    * icon. This function takes in an id defined in `translationIds` and should
    * return a string message for that given message id.
    */
-  translateWithId: PropTypes.func.isRequired
-};
-ListBoxSelection.defaultProps = {
-  translateWithId: id => defaultTranslations[id]
+  translateWithId: PropTypes.func
 };
 
 export { ListBoxSelection as default, translationIds };

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

@@ -21,6 +21,7 @@ const defaultTranslations = {
   [translationIds['close.menu']]: 'Close',
   [translationIds['open.menu']]: 'Open'
 };
+const defaultTranslateWithId = id => defaultTranslations[id];
 
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
@@ -29,7 +30,7 @@ const defaultTranslations = {
 const ListBoxTrigger = _ref => {
   let {
     isOpen,
-    translateWithId: t,
+    translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -57,10 +58,7 @@ ListBoxTrigger.propTypes = {
    * icon. This function takes in an id defined in `translationIds` and should
    * return a string message for that given message id.
    */
-  translateWithId: PropTypes.func.isRequired
-};
-ListBoxTrigger.defaultProps = {
-  translateWithId: id => defaultTranslations[id]
+  translateWithId: PropTypes.func
 };
 var ListBoxTrigger$1 = ListBoxTrigger;
 

package/es/components/ListItem/ListItem.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
 type ListItemProps = ComponentProps<'li'>;
-declare function ListItem({ className, ...other }: ListItemProps): JSX.Element;
+declare function ListItem({ className, children, ...other }: ListItemProps): JSX.Element;
 declare namespace ListItem {
     var propTypes: {
         /**

package/es/components/ListItem/ListItem.js

@@ -10,17 +10,21 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Text/index.js';
+import { Text } from '../Text/Text.js';
 
 function ListItem(_ref) {
   let {
     className,
+    children,
     ...other
   } = _ref;
   const prefix = usePrefix();
   const classNames = cx(`${prefix}--list__item`, className);
-  return /*#__PURE__*/React__default.createElement("li", _extends({
+  return /*#__PURE__*/React__default.createElement(Text, _extends({
+    as: "li",
     className: classNames
-  }, other));
+  }, other), children);
 }
 ListItem.propTypes = {
   /**

package/es/components/Menu/MenuItem.js

@@ -15,7 +15,9 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
+import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
+import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -156,7 +158,8 @@ const MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
     className: `${prefix}--menu-item__label`
   }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`