@carbon/react 1.108.0-rc.0 → 1.109.0-rc.0

package/lib/components/Modal/Modal.js

@@ -77,7 +77,7 @@ const Modal = react.default.forwardRef(function Modal({ open, ...props }, ref) {
 		...props
 	});
 });
-const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, slug, ...rest }, ref) {
+const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, dangerDescription = "", alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, slug, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const button = (0, react.useRef)(null);
 	const secondaryButton = (0, react.useRef)(null);
@@ -171,11 +171,18 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 		[`${prefix}--modal-container--${size}`]: size,
 		[`${prefix}--modal-container--full-width`]: isFullWidth
 	});
-	/**
-	* isScrollable is implicitly dependent on height, when height gets updated
-	* via `useResizeObserver`, clientHeight and scrollHeight get updated too
-	*/
-	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
+	const currentScrollHeight = contentRef.current?.scrollHeight || 0;
+	const currentClientHeight = contentRef.current?.clientHeight || 0;
+	const [isScrollable, setIsScrollable] = (0, react.useState)(currentScrollHeight > currentClientHeight);
+	(0, react.useEffect)(() => {
+		if (!contentRef.current) {
+			setIsScrollable(false);
+			return;
+		}
+		const diff = contentRef.current.scrollHeight - contentRef.current.clientHeight;
+		if (diff > 5) setIsScrollable(true);
+		else if (diff < -5) setIsScrollable(false);
+	}, [currentScrollHeight, currentClientHeight]);
 	const contentClasses = (0, classnames.default)(`${prefix}--modal-content`, {
 		[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
 		[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
@@ -366,6 +373,7 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
 					className: primaryButtonClass,
 					kind: danger ? "danger" : "primary",
+					dangerDescription,
 					disabled: loadingActive || primaryButtonDisabled,
 					onClick: onRequestSubmit,
 					ref: button,
@@ -442,6 +450,7 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
 						className: primaryButtonClass,
 						kind: danger ? "danger" : "primary",
+						dangerDescription,
 						disabled: loadingActive || primaryButtonDisabled,
 						onClick: onRequestSubmit,
 						ref: button,
@@ -484,6 +493,7 @@ Modal.propTypes = {
 	className: prop_types.default.string,
 	closeButtonLabel: prop_types.default.string,
 	danger: prop_types.default.bool,
+	dangerDescription: prop_types.default.string,
 	decorator: prop_types.default.node,
 	hasScrollingContent: prop_types.default.bool,
 	id: prop_types.default.string,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -27,7 +27,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 */
 const OverflowMenuItem = (0, react.forwardRef)((props, ref) => {
-	const { className, closeMenu, dangerDescription = "danger", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
+	const { className, closeMenu, dangerDescription = "", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
 	const prefix = require_usePrefix.usePrefix();
 	function setTabFocus(evt) {
 		if (require_match.match(evt, require_keys.ArrowDown)) handleOverflowMenuItemFocus?.({
@@ -51,13 +51,14 @@ const OverflowMenuItem = (0, react.forwardRef)((props, ref) => {
 		[`${prefix}--overflow-menu-options__option--disabled`]: disabled
 	}, wrapperClassName);
 	const TagToUse = href ? "a" : "button";
+	const hasDangerDescription = isDelete && Boolean(dangerDescription);
 	const assistiveId = require_useId.useId("danger-description");
 	const OverflowMenuItemContent = (() => {
 		if (typeof itemText !== "string") return itemText;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: `${prefix}--overflow-menu-options__option-content`,
 			children: itemText
-		}), isDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		}), hasDangerDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			id: assistiveId,
 			className: `${prefix}--visually-hidden`,
 			children: dangerDescription

package/lib/components/Tabs/Tabs.d.ts

@@ -192,8 +192,12 @@ export interface TabListProps extends DivAttributes {
      * on component rerender
      */
     scrollIntoView?: boolean;
+    /**
+     * Specify the size of the tabs.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, size, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**

package/lib/components/Tabs/Tabs.js

@@ -148,7 +148,7 @@ function getNextIndexVertical(event, total, index) {
 		default: return index;
 	}
 }
-function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, ...rest }) {
+function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex, dismissable } = react.default.useContext(TabsContext);
 	const prefix = require_usePrefix.usePrefix();
 	const ref = (0, react.useRef)(null);
@@ -165,6 +165,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
 		[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
 		[`${prefix}--layout--size-lg`]: iconSize === "lg",
+		[`${prefix}--layout--size-${size}`]: size && contained && !hasSecondaryLabelTabs,
 		[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable

package/lib/index.d.ts

@@ -46,6 +46,7 @@ export * from './components/FormLabel';
 export * from './components/Grid';
 export * from './components/Icon/Icon.Skeleton';
 export * from './components/IdPrefix';
+export { InlineCheckbox } from './components/InlineCheckbox';
 export * from './components/InlineLoading';
 export * from './components/Link';
 export * from './components/ListItem';

package/lib/index.js

@@ -83,6 +83,7 @@ const require_TableExpandedRow = require("./components/DataTable/TableExpandedRo
 const require_TableHead = require("./components/DataTable/TableHead.js");
 const require_TableHeader = require("./components/DataTable/TableHeader.js");
 const require_TableRow = require("./components/DataTable/TableRow.js");
+const require_InlineCheckbox = require("./components/InlineCheckbox/InlineCheckbox.js");
 const require_TableSelectAll = require("./components/DataTable/TableSelectAll.js");
 const require_RadioButton = require("./components/RadioButton/RadioButton.js");
 const require_TableSelectRow = require("./components/DataTable/TableSelectRow.js");
@@ -366,6 +367,7 @@ exports.IconSkeleton = require_Icon_Skeleton.default || require_Icon_Skeleton;
 exports.IconSwitch = require_IconSwitch.default || require_IconSwitch;
 exports.IconTab = require_Tabs.IconTab;
 exports.IdPrefix = require_index$13.IdPrefix;
+exports.InlineCheckbox = require_InlineCheckbox.default || require_InlineCheckbox;
 exports.InlineLoading = require_InlineLoading.default || require_InlineLoading;
 exports.InlineNotification = require_Notification.InlineNotification;
 exports.Layer = require_index$8.Layer;

package/lib/internal/FloatingMenu.js

@@ -116,7 +116,10 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 					position: getComputedStyle(target()).position
 				}
 			});
-			if (!floatingPosition || floatingPosition.left !== newFloatingPosition.left || floatingPosition.top !== newFloatingPosition.top) setFloatingPosition(newFloatingPosition);
+			setFloatingPosition((prev) => {
+				if (prev && prev.left === newFloatingPosition.left && prev.top === newFloatingPosition.top) return prev;
+				return newFloatingPosition;
+			});
 			if (!isAdjustment) {
 				const newMenuSize = menuBody.getBoundingClientRect();
 				if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) updateMenuPosition(true);
@@ -128,8 +131,7 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 		menuDirection,
 		flipped,
 		target,
-		updateOrientation,
-		floatingPosition
+		updateOrientation
 	]);
 	const focusMenuContent = (menuBody) => {
 		const primaryFocusNode = selectorPrimaryFocus ? menuBody.querySelector(selectorPrimaryFocus) : null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.108.0-rc.0",
+  "version": "1.109.0-rc.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": "^1.3.0",
-    "@carbon/icons-react": "^11.81.0-rc.0",
-    "@carbon/layout": "^11.53.0-rc.0",
-    "@carbon/styles": "^1.107.0-rc.0",
-    "@carbon/utilities": "^0.20.0-rc.0",
+    "@carbon/icons-react": "^11.82.0-rc.0",
+    "@carbon/layout": "^11.53.0",
+    "@carbon/styles": "^1.108.0-rc.0",
+    "@carbon/utilities": "^0.20.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,8 +79,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.74.0-rc.0",
-    "@figma/code-connect": "^1.4.2",
+    "@carbon/themes": "^11.75.0-rc.0",
+    "@figma/code-connect": "^1.4.5",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
@@ -110,7 +110,7 @@
     "stream-browserify": "^3.0.0",
     "tinyclip": "^0.1.12",
     "tsdown": "^0.21.0",
-    "typescript-config-carbon": "^0.10.0-rc.0",
+    "typescript-config-carbon": "^0.10.0",
     "use-sync-external-store": "^1.5.0",
     "vite": "^7.1.2"
   },
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3d219dfcc2a3da515016f7ce0e769d013c3a6c03"
+  "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
 }