@carbon/react 1.93.0-rc.0 → 1.93.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import cx from 'classnames';
 import { useResizeObserver } from '../../internal/useResizeObserver.js';
 import { ChevronDown } from '@carbon/icons-react';
@@ -60,8 +60,6 @@ function CodeSnippet({
   const codeContentRef = useRef(null);
   const codeContainerRef = useRef(null);
   const innerCodeRef = useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = useState(false);
   const getCodeRef = useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -73,39 +71,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix();
-  const getCodeRefDimensions = useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = useCallback(() => {
-    if (type === 'inline' || type === 'single' && !codeContainerRef?.current || type === 'multi' && !codeContentRef?.current) {
-      return;
-    }
-    const {
-      horizontalOverflow,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    } = getCodeRefDimensions();
-    setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
-    setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
-  }, [type, getCodeRefDimensions]);
   useResizeObserver({
     ref: getCodeRef(),
     onResize: () => {
-      if (codeContentRef?.current && type === 'multi') {
+      if (innerCodeRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -115,14 +87,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -137,8 +103,7 @@ function CodeSnippet({
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
-    [`${prefix}--snippet--wraptext`]: wrapText,
-    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+    [`${prefix}--snippet--wraptext`]: wrapText
   });
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
   if (type === 'inline') {
@@ -196,18 +161,12 @@ function CodeSnippet({
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
-    "aria-multiline": type === 'multi' ? true : undefined,
-    onScroll: type === 'single' && handleScroll || undefined
-  }, containerStyle), /*#__PURE__*/React.createElement("pre", {
-    ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || undefined
-  }, /*#__PURE__*/React.createElement("code", {
+    "aria-multiline": type === 'multi' ? true : undefined
+  }, containerStyle), /*#__PURE__*/React.createElement("pre", _extends({
+    ref: codeContentRef
+  }, containerStyle), /*#__PURE__*/React.createElement("code", {
     ref: innerCodeRef
-  }, children))), hasLeftOverflow && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--left`
-  }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--right`
-  }), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

package/es/components/DataTable/DataTable.d.ts

@@ -92,6 +92,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded: boolean;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        id: string;
     };
     getRowProps: (options: {
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -105,6 +106,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         key: string;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        expandHeader: string;
     };
     getExpandedRowProps: (options: {
         row: DataTableRow<ColTypes>;

package/es/components/DataTable/DataTable.js

@@ -194,9 +194,10 @@ const DataTable = props => {
       ...rest,
       'aria-label': t(translationKey),
       // Provide a string of all expanded row IDs, separated by a space.
-      'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
+      'aria-controls': rowIds.map(id => `${getTablePrefix()}-expanded-row-${id}`).join(' '),
       isExpanded,
-      onExpand: composeEventHandlers(handlers)
+      onExpand: composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -228,9 +229,10 @@ const DataTable = props => {
       onExpand: composeEventHandlers([handleOnExpandRow(row.id), onClick]),
       isExpanded: row.isExpanded,
       'aria-label': t(translationKey),
-      'aria-controls': `expanded-row-${row.id}`,
+      'aria-controls': `${getTablePrefix()}-expanded-row-${row.id}`,
       isSelected: row.isSelected,
-      disabled: row.disabled
+      disabled: row.disabled,
+      expandHeader: `${getTablePrefix()}-expand`
     };
   };
   const getExpandedRowProps = ({
@@ -239,7 +241,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 

package/es/components/DataTable/TableExpandRow.d.ts

@@ -33,6 +33,10 @@ export interface TableRowExpandInteropProps {
      * Specify if the row is selected.
      */
     isSelected?: boolean;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
 }
 export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**

package/es/components/DataTable/TableRow.js

@@ -31,6 +31,8 @@ const TableRow = frFn((props, ref) => {
     isExpanded,
     // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isSelected,
+    expandHeader,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     ...cleanProps
   } = props;
   const prefix = usePrefix();

package/es/components/Popover/index.js

@@ -149,7 +149,8 @@ forwardRef) {
       fallbackAxisSideDirection: 'start',
       boundary: autoAlignBoundary
     }), arrow({
-      element: caretRef
+      element: caretRef,
+      padding: 16
     }), autoAlign && hide()],
     whileElementsMounted: autoUpdate
   } : {}

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -64,8 +64,6 @@ function CodeSnippet({
   const codeContentRef = React.useRef(null);
   const codeContainerRef = React.useRef(null);
   const innerCodeRef = React.useRef(null);
-  const [hasLeftOverflow, setHasLeftOverflow] = React.useState(false);
-  const [hasRightOverflow, setHasRightOverflow] = React.useState(false);
   const getCodeRef = React.useCallback(() => {
     if (type === 'single') {
       return codeContainerRef;
@@ -77,39 +75,13 @@ function CodeSnippet({
     }
   }, [type]);
   const prefix = usePrefix.usePrefix();
-  const getCodeRefDimensions = React.useCallback(() => {
-    const {
-      clientWidth: codeClientWidth = 0,
-      scrollLeft: codeScrollLeft = 0,
-      scrollWidth: codeScrollWidth = 0
-    } = getCodeRef().current || {};
-    return {
-      horizontalOverflow: codeScrollWidth > codeClientWidth,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    };
-  }, [getCodeRef]);
-  const handleScroll = React.useCallback(() => {
-    if (type === 'inline' || type === 'single' && !codeContainerRef?.current || type === 'multi' && !codeContentRef?.current) {
-      return;
-    }
-    const {
-      horizontalOverflow,
-      codeClientWidth,
-      codeScrollWidth,
-      codeScrollLeft
-    } = getCodeRefDimensions();
-    setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
-    setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
-  }, [type, getCodeRefDimensions]);
   useResizeObserver.useResizeObserver({
     ref: getCodeRef(),
     onResize: () => {
-      if (codeContentRef?.current && type === 'multi') {
+      if (innerCodeRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
@@ -119,14 +91,8 @@ function CodeSnippet({
           setExpandedCode(false);
         }
       }
-      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
-        handleScroll();
-      }
     }
   });
-  React.useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
   const handleCopyClick = evt => {
     if (copyText || innerCodeRef?.current) {
       copy(copyText ?? innerCodeRef?.current?.innerText ?? '');
@@ -141,8 +107,7 @@ function CodeSnippet({
     [`${prefix}--snippet--expand`]: expandedCode,
     [`${prefix}--snippet--light`]: light,
     [`${prefix}--snippet--no-copy`]: hideCopyButton,
-    [`${prefix}--snippet--wraptext`]: wrapText,
-    [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
+    [`${prefix}--snippet--wraptext`]: wrapText
   });
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
   if (type === 'inline') {
@@ -200,18 +165,12 @@ function CodeSnippet({
     className: `${prefix}--snippet-container`,
     "aria-label": deprecatedAriaLabel || ariaLabel || 'code-snippet',
     "aria-readonly": type === 'single' || type === 'multi' ? true : undefined,
-    "aria-multiline": type === 'multi' ? true : undefined,
-    onScroll: type === 'single' && handleScroll || undefined
-  }, containerStyle), /*#__PURE__*/React.createElement("pre", {
-    ref: codeContentRef,
-    onScroll: type === 'multi' && handleScroll || undefined
-  }, /*#__PURE__*/React.createElement("code", {
+    "aria-multiline": type === 'multi' ? true : undefined
+  }, containerStyle), /*#__PURE__*/React.createElement("pre", _rollupPluginBabelHelpers.extends({
+    ref: codeContentRef
+  }, containerStyle), /*#__PURE__*/React.createElement("code", {
     ref: innerCodeRef
-  }, children))), hasLeftOverflow && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--left`
-  }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--snippet__overflow-indicator--right`
-  }), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
+  }, children))), !hideCopyButton && /*#__PURE__*/React.createElement(CopyButton.default, {
     align: align,
     autoAlign: autoAlign,
     size: type === 'multi' ? 'sm' : 'md',

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

@@ -92,6 +92,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded: boolean;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        id: string;
     };
     getRowProps: (options: {
         onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -105,6 +106,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         key: string;
         onExpand: (event: MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
+        expandHeader: string;
     };
     getExpandedRowProps: (options: {
         row: DataTableRow<ColTypes>;

package/lib/components/DataTable/DataTable.js

@@ -196,9 +196,10 @@ const DataTable = props => {
       ...rest,
       'aria-label': t(translationKey),
       // Provide a string of all expanded row IDs, separated by a space.
-      'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
+      'aria-controls': rowIds.map(id => `${getTablePrefix()}-expanded-row-${id}`).join(' '),
       isExpanded,
-      onExpand: events.composeEventHandlers(handlers)
+      onExpand: events.composeEventHandlers(handlers),
+      id: `${getTablePrefix()}-expand`
     };
   };
 
@@ -230,9 +231,10 @@ const DataTable = props => {
       onExpand: events.composeEventHandlers([handleOnExpandRow(row.id), onClick]),
       isExpanded: row.isExpanded,
       'aria-label': t(translationKey),
-      'aria-controls': `expanded-row-${row.id}`,
+      'aria-controls': `${getTablePrefix()}-expanded-row-${row.id}`,
       isSelected: row.isSelected,
-      disabled: row.disabled
+      disabled: row.disabled,
+      expandHeader: `${getTablePrefix()}-expand`
     };
   };
   const getExpandedRowProps = ({
@@ -241,7 +243,7 @@ const DataTable = props => {
   }) => {
     return {
       ...rest,
-      id: `expanded-row-${row.id}`
+      id: `${getTablePrefix()}-expanded-row-${row.id}`
     };
   };
 

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

@@ -33,6 +33,10 @@ export interface TableRowExpandInteropProps {
      * Specify if the row is selected.
      */
     isSelected?: boolean;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
 }
 export interface TableExpandRowProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick'>>, Omit<TableRowExpandInteropProps, 'aria-label' | 'onExpand'> {
     /**

package/lib/components/DataTable/TableRow.js

@@ -35,6 +35,8 @@ const TableRow = frFn((props, ref) => {
     isExpanded,
     // eslint-disable-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
     isSelected,
+    expandHeader,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     ...cleanProps
   } = props;
   const prefix = usePrefix.usePrefix();

package/lib/components/Popover/index.js

@@ -151,7 +151,8 @@ forwardRef) {
       fallbackAxisSideDirection: 'start',
       boundary: autoAlignBoundary
     }), react.arrow({
-      element: caretRef
+      element: caretRef,
+      padding: 16
     }), autoAlign && react.hide()],
     whileElementsMounted: react.autoUpdate
   } : {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.93.0-rc.0",
+  "version": "1.93.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^0.31.0",
-    "@carbon/icons-react": "^11.69.0-rc.0",
-    "@carbon/layout": "^11.43.0-rc.0",
-    "@carbon/styles": "^1.92.0-rc.0",
-    "@carbon/utilities": "^0.11.0-rc.0",
+    "@carbon/icons-react": "^11.69.0",
+    "@carbon/layout": "^11.43.0",
+    "@carbon/styles": "^1.92.0",
+    "@carbon/utilities": "^0.11.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -80,7 +80,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.38.0",
-    "@carbon/themes": "^11.62.0-rc.0",
+    "@carbon/themes": "^11.62.0",
     "@figma/code-connect": "^1.3.5",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -123,7 +123,7 @@
     "storybook": "^9.0.5",
     "stream-browserify": "^3.0.0",
     "style-loader": "^4.0.0",
-    "typescript-config-carbon": "^0.8.0-rc.0",
+    "typescript-config-carbon": "^0.8.0",
     "use-sync-external-store": "^1.5.0",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^5.0.0"
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "0d9497f77c917c567c8be19157e3da42d7a02c04"
+  "gitHead": "c17cce753e36124e6e8e02daba97ae9d4decbcc3"
 }