@carbon/react 1.64.0 → 1.65.0-rc.0

package/lib/components/DataTable/TableSelectAll.d.ts

@@ -20,7 +20,7 @@ interface TableSelectAllProps {
     /**
      * Specify whether all items are selected, or not
      */
-    checked: boolean;
+    checked?: boolean;
     /**
      * The CSS class names of the cell that wraps the underlying input control
      */
@@ -61,7 +61,7 @@ declare const TableSelectAll: {
         /**
          * Specify whether all items are selected, or not
          */
-        checked: PropTypes.Validator<boolean>;
+        checked: PropTypes.Requireable<boolean>;
         /**
          * The CSS class names of the cell that wraps the underlying input control
          */

package/lib/components/DataTable/TableSelectAll.js

@@ -62,7 +62,7 @@ TableSelectAll.propTypes = {
   /**
    * Specify whether all items are selected, or not
    */
-  checked: PropTypes__default["default"].bool.isRequired,
+  checked: PropTypes__default["default"].bool,
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */

package/lib/components/DataTable/TableSelectRow.d.ts

@@ -21,7 +21,7 @@ export interface TableSelectRowProps {
     /**
      * Specify whether this row is selected, or not
      */
-    checked: boolean;
+    checked?: boolean;
     /**
      * The CSS class names of the cell that wraps the underlying input control
      */
@@ -66,7 +66,7 @@ declare const TableSelectRow: {
         /**
          * Specify whether this row is selected, or not
          */
-        checked: PropTypes.Validator<boolean>;
+        checked: PropTypes.Requireable<boolean>;
         /**
          * The CSS class names of the cell that wraps the underlying input control
          */

package/lib/components/DataTable/TableSelectRow.js

@@ -78,7 +78,7 @@ TableSelectRow.propTypes = {
   /**
    * Specify whether this row is selected, or not
    */
-  checked: PropTypes__default["default"].bool.isRequired,
+  checked: PropTypes__default["default"].bool,
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */

package/lib/components/FileUploader/FileUploaderItem.js

@@ -44,6 +44,7 @@ function FileUploaderItem(_ref) {
     className,
     ...other
   } = _ref;
+  const textRef = React.useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   const prefix = usePrefix.usePrefix();
   const {
@@ -63,8 +64,7 @@ function FileUploaderItem(_ref) {
     return element.offsetWidth < element.scrollWidth;
   };
   React.useLayoutEffect(() => {
-    const element = document.querySelector(`[title="${name}"]`);
-    isEllipsisActive(element);
+    isEllipsisActive(textRef.current);
   }, [prefix, name]);
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
     className: classes
@@ -78,11 +78,13 @@ function FileUploaderItem(_ref) {
     className: `${prefix}--file-filename-button`,
     type: "button"
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    ref: textRef,
     as: "p",
     title: name,
     className: `${prefix}--file-filename-button`,
     id: filterSpaceName(name)
   }, name)))) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    ref: textRef,
     as: "p",
     title: name,
     className: `${prefix}--file-filename`,

package/lib/components/Menu/Menu.js

@@ -167,7 +167,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     }
     if (indexToFocus !== currentItem) {
       const nodeToFocus = focusableItems[indexToFocus];
-      nodeToFocus.ref.current.focus();
+      nodeToFocus.ref?.current?.focus();
     }
   }
   function handleBlur(e) {

package/lib/components/OverflowMenu/next/index.js

@@ -48,16 +48,22 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     placement,
     middlewareData
   } = react.useFloating(autoAlign ? {
+    // Computing the position starts with initial positioning
+    // via `placement`.
     placement: menuAlignment,
     // The floating element is positioned relative to its nearest
-    // containing block (usually the viewport). It will in many cases also
-    // “break” the floating element out of a clipping ancestor.
+    // containing block (usually the viewport). It will in many cases
+    // also “break” the floating element out of a clipping ancestor.
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
-    // Middleware order matters, arrow should be last
+    // Middleware are executed as an in-between “middle” step of the
+    // initial `placement` computation and eventual return of data for
+    // rendering. Each middleware is executed in order.
     middleware: [react.flip({
-      fallbackAxisSideDirection: 'start',
-      fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+      // An explicit array of placements to try if the initial
+      // `placement` doesn’t fit on the axes in which overflow
+      // is checked.
+      fallbackPlacements: menuAlignment.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
     })],
     whileElementsMounted: react.autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -43,6 +43,10 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The index of current page.
      */
     page?: number;
+    /**
+     * Specify the size of the PaginationNav.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * The total number of items.
      */

package/lib/components/PaginationNav/PaginationNav.js

@@ -185,6 +185,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     itemsShown = 10,
     page = 0,
     loop = false,
+    size = 'lg',
     translateWithId: t = translateWithId,
     ...rest
   } = _ref4;
@@ -255,7 +256,9 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(() => {
     setIsOverFlowDisabled(disableOverflow);
   }, [disableOverflow]);
-  const classNames = cx__default["default"](`${prefix}--pagination-nav`, className);
+  const classNames = cx__default["default"](`${prefix}--pagination-nav`, className, {
+    [`${prefix}--layout--size-${size}`]: size
+  });
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
   const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
@@ -408,6 +411,10 @@ PaginationNav.propTypes = {
    * The index of current page.
    */
   page: PropTypes__default["default"].number,
+  /**
+   * Specify the size of the PaginationNav.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**
    * The total number of items.
    */

package/lib/components/Tag/Tag.js

@@ -132,7 +132,8 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
     ref: ref,
     disabled: disabled,
     className: tagClasses,
-    id: tagId
+    id: tagId,
+    type: ComponentTag === 'button' ? 'button' : undefined
   }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', isEllipsisApplied && !isInteractiveTag ? /*#__PURE__*/React__default["default"].createElement(DefinitionTooltip.DefinitionTooltip, {

package/lib/components/Text/Text.d.ts

@@ -4,7 +4,6 @@
  * 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';
 import { PolymorphicProps } from '../../types/common';
 import { TextDir } from './TextDirection';
@@ -12,22 +11,5 @@ export interface TextBaseProps {
     dir?: TextDir | undefined;
 }
 export type TextProps<T extends React.ElementType> = PolymorphicProps<T, TextBaseProps>;
-declare function Text<T extends React.ElementType>({ as, children, dir, ...rest }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace Text {
-    var propTypes: {
-        /**
-         * Provide a custom element type used to render the outermost node
-         */
-        as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
-        /**
-         * Provide child elements or text to be rendered inside of this component
-         */
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        /**
-         * Specify the text direction to be used for this component and any of its
-         * children
-         */
-        dir: PropTypes.Requireable<string>;
-    };
-}
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Text };

package/lib/components/Text/Text.js

@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Text(_ref) {
+const Text = /*#__PURE__*/React__default["default"].forwardRef(function Text(_ref, ref) {
   let {
     as,
     children,
@@ -59,8 +59,10 @@ function Text(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(TextDirectionContext.TextDirectionContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, textProps), children));
-}
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, rest, textProps), children));
+});
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node

package/lib/components/TextInput/PasswordInput.js

@@ -97,10 +97,12 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     placeholder,
     type: inputType,
     className: textInputClasses,
+    readOnly,
     ref,
     ...rest
   };
   const inputWrapperClasses = cx__default["default"](`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--readonly`]: readOnly,
     [`${prefix}--text-input-wrapper--light`]: light,
     [`${prefix}--text-input-wrapper--inline`]: inline,
     [`${prefix}--text-input--fluid`]: isFluid
@@ -183,7 +185,7 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   React.useEffect(() => {
@@ -242,6 +244,10 @@ PasswordInput.propTypes = {
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes__default["default"].bool,
+  /**
+   * Whether the PasswordInput should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */

package/lib/components/TileGroup/TileGroup.js

@@ -49,7 +49,7 @@ const TileGroup = props => {
     const traverseAndModifyChildren = children => {
       return React__default["default"].Children.map(children, child => {
         // If RadioTile found, return it with necessary props
-        if (child.type === RadioTile["default"]) {
+        if (child?.type === RadioTile["default"]) {
           const {
             value,
             ...otherProps
@@ -62,7 +62,7 @@ const TileGroup = props => {
             onChange: handleChange,
             checked: value === selected
           }));
-        } else if (child.props && child.props.children) {
+        } else if (child?.props?.children) {
           // If the child is not RadioTile and has children, recheck the children
           return /*#__PURE__*/React__default["default"].cloneElement(child, {
             ...child.props,

package/lib/components/UIShell/Content.d.ts

@@ -82,12 +82,12 @@ declare const Content: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "date" | "step" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
@@ -109,7 +109,7 @@ declare const Content: {
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.64.0",
+  "version": "1.65.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.21.0",
-    "@carbon/icons-react": "^11.47.0",
-    "@carbon/layout": "^11.24.0",
-    "@carbon/styles": "^1.63.0",
+    "@carbon/feature-flags": "^0.22.0-rc.0",
+    "@carbon/icons-react": "^11.48.0-rc.0",
+    "@carbon/layout": "^11.25.0-rc.0",
+    "@carbon/styles": "^1.64.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,8 +79,8 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.38.0",
+    "@carbon/test-utils": "^10.31.0-rc.0",
+    "@carbon/themes": "^11.39.0-rc.0",
     "@figma/code-connect": "^1.0.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
@@ -117,7 +117,7 @@
     "react-dom": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "requestanimationframe": "^0.0.23",
-    "rimraf": "^5.0.0",
+    "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.51.0",
@@ -125,8 +125,8 @@
     "storybook": "^7.1.0",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "stream-browserify": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "typescript-config-carbon": "^0.2.0",
+    "style-loader": "^4.0.0",
+    "typescript-config-carbon": "^0.3.0-rc.0",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^4.7.4"
   },
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "185c4cf3598df1050c197870455c01775e21c366"
+  "gitHead": "5e14bf5949724bee568601e514b5ce18e50d4525"
 }