@carbon/react 1.104.1 → 1.105.0

package/lib/components/Slider/Slider.js

@@ -50,13 +50,18 @@ const translationIds = { "carbon.slider.auto-correct-announcement": "carbon.slid
 const defaultTranslations = { [translationIds["carbon.slider.auto-correct-announcement"]]: "The inputted value \"{correctedValue}\" was corrected to the nearest allowed digit." };
 const defaultTranslateWithId = (messageId, args) => {
 	const template = defaultTranslations[messageId];
-	if (args?.correctedValue) return template.replace("{correctedValue}", args.correctedValue);
-	return template;
+	const correctedValue = args?.correctedValue ?? "";
+	return template.replace("{correctedValue}", correctedValue);
 };
 const defaultFormatLabel = (value, label) => {
 	return `${value}${label ?? ""}`;
 };
 const hasUpperValue = (valueUpper) => typeof valueUpper !== "undefined";
+const calcRawLeftPercent = ({ max, min, value }) => {
+	const range = max - min;
+	if (range === 0) return 0;
+	return require_clamp.clamp((value - min) / range, 0, 1);
+};
 /**
 * Minimum time between processed "drag" events in milliseconds.
 */
@@ -73,6 +78,12 @@ var HandlePosition = /* @__PURE__ */ function(HandlePosition) {
 	return HandlePosition;
 }(HandlePosition || {});
 const Slider = (props) => {
+	const controlledValue = props.value;
+	const controlledValueUpper = props.unstable_valueUpper;
+	const controlledMax = props.max;
+	const controlledMin = props.min;
+	const onChange = props.onChange;
+	const onRelease = props.onRelease;
 	const [state, setState] = (0, react.useReducer)((prev, args) => ({
 		...prev,
 		...args
@@ -145,18 +156,20 @@ const Slider = (props) => {
 		};
 	}, []);
 	(0, react.useEffect)(() => {
-		if (twoHandles) {
-			if (filledTrackRef.current) filledTrackRef.current.style.transform = state.isRtl ? `translate(${100 - state.leftUpper}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})` : `translate(${state.left}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})`;
-		} else if (filledTrackRef.current) filledTrackRef.current.style.transform = state.isRtl ? `translate(100%, -50%) scaleX(-${state.left / 100})` : `translate(0%, -50%) scaleX(${state.left / 100})`;
+		const el = filledTrackRef.current;
+		if (!el) return;
+		if (twoHandles) el.style.transform = state.isRtl ? `translate(${100 - state.leftUpper}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})` : `translate(${state.left}%, -50%) scaleX(${(state.leftUpper - state.left) / 100})`;
+		else el.style.transform = state.isRtl ? `translate(100%, -50%) scaleX(-${state.left / 100})` : `translate(0%, -50%) scaleX(${state.left / 100})`;
 	}, [
+		state.isRtl,
 		state.left,
 		state.leftUpper,
-		state.isRtl
+		twoHandles
 	]);
 	const prevValsRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const prev = prevValsRef.current;
-		if (prev && (prev.value !== state.value || prev.valueUpper !== state.valueUpper) && typeof props.onChange === "function") props.onChange({
+		if (prev && (prev.value !== state.value || prev.valueUpper !== state.valueUpper) && typeof onChange === "function") onChange({
 			value: state.value,
 			valueUpper: state.valueUpper
 		});
@@ -167,56 +180,59 @@ const Slider = (props) => {
 	}, [
 		state.value,
 		state.valueUpper,
-		props.onChange
+		onChange
 	]);
 	(0, react.useEffect)(() => {
-		if (state.needsOnRelease && typeof props.onRelease === "function") {
-			props.onRelease({
+		if (state.needsOnRelease && typeof onRelease === "function") {
+			onRelease({
 				value: state.value,
 				valueUpper: state.valueUpper
 			});
 			setState({ needsOnRelease: false });
 		}
 	}, [
+		onRelease,
 		state.needsOnRelease,
 		state.value,
-		state.valueUpper,
-		props.onRelease
+		state.valueUpper
 	]);
 	const prevSyncKeysRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const prev = prevSyncKeysRef.current;
 		const next = [
-			props.value,
-			props.unstable_valueUpper,
-			props.max,
-			props.min
+			controlledValue,
+			controlledValueUpper,
+			controlledMax,
+			controlledMin
 		];
 		if (!prev || prev[0] !== next[0] || prev[1] !== next[1] || prev[2] !== next[2] || prev[3] !== next[3]) {
-			setState(calcValue({
-				value: props.value,
-				useRawValue: true
-			}));
-			if (typeof props.unstable_valueUpper !== "undefined") {
-				const { value: valueUpper, left: leftUpper } = calcValue({
-					value: props.unstable_valueUpper,
-					useRawValue: true
-				});
-				setState({
-					valueUpper,
-					leftUpper
-				});
-			} else setState({
+			setState({
+				value: controlledValue,
+				left: calcRawLeftPercent({
+					max: controlledMax,
+					min: controlledMin,
+					value: controlledValue
+				}) * 100
+			});
+			if (typeof controlledValueUpper !== "undefined") setState({
+				valueUpper: controlledValueUpper,
+				leftUpper: calcRawLeftPercent({
+					max: controlledMax,
+					min: controlledMin,
+					value: controlledValueUpper
+				}) * 100
+			});
+			else setState({
 				valueUpper: void 0,
 				leftUpper: void 0
 			});
 			prevSyncKeysRef.current = next;
 		}
 	}, [
-		props.value,
-		props.unstable_valueUpper,
-		props.max,
-		props.min
+		controlledMax,
+		controlledMin,
+		controlledValue,
+		controlledValueUpper
 	]);
 	/**
 	* Rounds a given value to the nearest step defined by the slider's `step`
@@ -291,7 +307,7 @@ const Slider = (props) => {
 	const _onDragRef = (0, react.useRef)(null);
 	_onDragRef.current = (evt, activeHandle) => {
 		activeHandle = activeHandle ?? stateRef.current.activeHandle;
-		if (propsRef.current.disabled || propsRef.current.readOnly || !evt) return;
+		if (propsRef.current.disabled || propsRef.current.readOnly) return;
 		const { value, left } = calcValue({
 			clientX: getClientXFromEvent(evt),
 			value: stateRef.current.value
@@ -358,7 +374,6 @@ const Slider = (props) => {
 	*/
 	const onChangeInput = (evt) => {
 		if (props.disabled || props.readOnly) return;
-		if (!evt || !("target" in evt) || typeof evt.target.value !== "string") return;
 		const activeHandle = evt.target.dataset.handlePosition ?? HandlePosition.LOWER;
 		const targetValue = Number.parseFloat(evt.target.value);
 		if (twoHandles) if (isNaN(targetValue)) setValueForHandle(activeHandle, evt.target.value);
@@ -382,7 +397,6 @@ const Slider = (props) => {
 	* Handles state change to isValid state.
 	*/
 	const onBlurInput = (evt) => {
-		if (!evt || !("target" in evt) || typeof evt.target.value !== "string") return;
 		const { value: targetValue } = evt.target;
 		processNewInputValue(evt.target);
 		props.onBlur?.({
@@ -392,7 +406,6 @@ const Slider = (props) => {
 	};
 	const onInputKeyDown = (evt) => {
 		if (props.disabled || props.readOnly || !(evt.target instanceof HTMLInputElement)) return;
-		if (!evt || !("target" in evt) || typeof evt.target.value !== "string") return;
 		if (require_match.matches(evt, [require_keys.Enter])) processNewInputValue(evt.target);
 	};
 	const processNewInputValue = (input) => {
@@ -439,13 +452,17 @@ const Slider = (props) => {
 			});
 		}
 	};
-	const calcLeftPercent = ({ clientX, value, range }) => {
+	const calcLeftPercent = ({ clientX, value }) => {
 		const boundingRect = elementRef.current?.getBoundingClientRect?.();
 		let width = boundingRect ? boundingRect.right - boundingRect.left : 0;
+		const nextValue = value ?? props.min;
 		if (width <= 0) width = 1;
 		if (clientX) return (state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0)) / width;
-		else if (value !== null && typeof value !== "undefined" && range) return range === 0 ? 0 : (value - props.min) / range;
-		return 0;
+		return calcRawLeftPercent({
+			max: props.max,
+			min: props.min,
+			value: nextValue
+		});
 	};
 	/**
 	* Calculates the discrete value (snapped to the nearest step) along
@@ -469,8 +486,7 @@ const Slider = (props) => {
 		/** `leftPercentRaw` clamped between 0 and 1. */
 		const leftPercent = require_clamp.clamp(calcLeftPercent({
 			clientX,
-			value,
-			range: props.max - props.min
+			value
 		}), 0, 1);
 		if (useRawValue) return {
 			value,
@@ -539,8 +555,7 @@ const Slider = (props) => {
 			max
 		})) return false;
 		if (handle === HandlePosition.LOWER) return !valueUpper || newValue <= valueUpper;
-		else if (handle === HandlePosition.UPPER) return !value || newValue >= value;
-		return false;
+		return !value || newValue >= value;
 	};
 	const isValidValue = ({ value, min, max }) => {
 		return !(value < min || value > max);

package/lib/components/Tabs/Tabs.js

@@ -13,11 +13,11 @@ const require_match = require('../../internal/keyboard/match.js');
 const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_useEvent = require('../../internal/useEvent.js');
 const require_Tooltip = require('../Tooltip/Tooltip.js');
 const require_index = require('../BadgeIndicator/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_useControllableState = require('../../internal/useControllableState.js');
 const require_Grid = require('../Grid/Grid.js');
 const require_useMatchMedia = require('../../internal/useMatchMedia.js');

package/lib/components/Tag/DismissibleTag.js

@@ -11,9 +11,9 @@ const require_Text = require('../Text/Text.js');
 const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_Tooltip = require('../Tooltip/Tooltip.js');
 const require_index = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_mergeRefs = require('../../tools/mergeRefs.js');
 const require_isEllipsisActive = require('./isEllipsisActive.js');
 const require_Tag = require('./Tag.js');

package/lib/components/Tag/Tag.js

@@ -11,10 +11,10 @@ const require_Text = require('../Text/Text.js');
 const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 const require_index = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_isEllipsisActive = require('./isEllipsisActive.js');
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);

package/lib/components/TextArea/TextArea.js

@@ -12,9 +12,9 @@ const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.
 const require_useId = require('../../internal/useId.js');
 const require_noopFn = require('../../internal/noopFn.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_index = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_getAnnouncement = require('../../internal/getAnnouncement.js');
 let classnames = require("classnames");

package/lib/components/TextInput/TextInput.js

@@ -9,9 +9,9 @@ const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_usePrefix = require('../../internal/usePrefix.js');
 const require_Text = require('../Text/Text.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_index = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_FormContext = require('../FluidForm/FormContext.js');
 const require_useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 const require_util = require('./util.js');

package/lib/components/Tile/Tile.js

@@ -14,11 +14,11 @@ const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.
 const require_useId = require('../../internal/useId.js');
 const require_deprecate = require('../../prop-types/deprecate.js');
 const require_index = require('../Link/index.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_index$1 = require('../FeatureFlags/index.js');
 const require_useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 const require_index$2 = require('../AILabel/index.js');
-const require_utils = require('../../internal/utils.js');
 const require_events = require('../../tools/events.js');
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);

package/lib/components/UIShell/HeaderPanel.js

@@ -10,9 +10,9 @@ const require_usePrefix = require('../../internal/usePrefix.js');
 const require_keys = require('../../internal/keyboard/keys.js');
 const require_match = require('../../internal/keyboard/match.js');
 const require_noopFn = require('../../internal/noopFn.js');
+const require_utils = require('../../internal/utils.js');
 const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_useEvent = require('../../internal/useEvent.js');
-const require_utils = require('../../internal/utils.js');
 const require_Switcher = require('./Switcher.js');
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);

package/lib/components/UIShell/Switcher.js

@@ -7,8 +7,8 @@
 
 const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_usePrefix = require('../../internal/usePrefix.js');
-const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_utils = require('../../internal/utils.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.js');
 const require_AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 const require_SwitcherItem = require('./SwitcherItem.js');
 const require_SwitcherDivider = require('./SwitcherDivider.js');

package/lib/internal/useNoInteractiveChildren.d.ts

@@ -8,18 +8,10 @@ import { type RefObject } from 'react';
 export declare const useNoInteractiveChildren: (ref: RefObject<HTMLElement | null>, message?: string) => void;
 export declare const useInteractiveChildrenNeedDescription: (ref: RefObject<HTMLElement | null>, message?: string) => void;
 /**
- * Determines if a given DOM node has interactive content, or is itself
- * interactive. It returns the interactive node if one is found.
- *
- * @param node - The node to check.
- * @returns The interactive node, or `null` if none is found.
+ * Finds an interactive node in a given DOM node, including the node itself.
  */
 export declare const getInteractiveContent: (node: HTMLElement) => HTMLElement | null;
 /**
- * Determines if a given DOM node has a `role`, or has itself a `role`.
- * It returns the node with a `role` if one is found.
- *
- * @param node - The node to check.
- * @returns The node with a `role`, or `null` if none is found.
+ * Finds a node with a `role` in a given DOM node, including the node itself.
  */
 export declare const getRoleContent: (node: HTMLElement) => HTMLElement | null;

package/lib/internal/useNoInteractiveChildren.js

@@ -35,39 +35,28 @@ const useInteractiveChildrenNeedDescription = (ref, message = `interactive child
 		if (node && !node.hasAttribute("aria-describedby")) throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
 	}, [message, ref]);
 };
-/**
-* Determines if a given DOM node has interactive content, or is itself
-* interactive. It returns the interactive node if one is found.
-*
-* @param node - The node to check.
-* @returns The interactive node, or `null` if none is found.
-*/
-const getInteractiveContent = (node) => {
-	if (!node || !node.childNodes) return null;
-	if (isFocusable(node)) return node;
-	for (const childNode of node.childNodes) if (childNode instanceof HTMLElement) {
-		const interactiveNode = getInteractiveContent(childNode);
-		if (interactiveNode) return interactiveNode;
+const findMatchingContent = (node, matcher) => {
+	if (matcher(node)) return node;
+	for (const child of node.children) {
+		if (!(child instanceof HTMLElement)) continue;
+		const matchingChild = findMatchingContent(child, matcher);
+		if (matchingChild) return matchingChild;
 	}
 	return null;
 };
 /**
-* Determines if a given DOM node has a `role`, or has itself a `role`.
-* It returns the node with a `role` if one is found.
-*
-* @param node - The node to check.
-* @returns The node with a `role`, or `null` if none is found.
+* Finds an interactive node in a given DOM node, including the node itself.
 */
-const getRoleContent = (node) => {
-	if (!node || !node.childNodes) return null;
-	if (node.getAttribute("role") && node.getAttribute("role") !== "") return node;
-	for (const childNode of node.childNodes) if (childNode instanceof HTMLElement) {
-		const roleNode = getRoleContent(childNode);
-		if (roleNode) return roleNode;
-	}
-	return null;
+const getInteractiveContent = (node) => findMatchingContent(node, isFocusable);
+const hasRole = (element) => {
+	const role = element.getAttribute("role");
+	return role !== null && role !== "";
 };
 /**
+* Finds a node with a `role` in a given DOM node, including the node itself.
+*/
+const getRoleContent = (node) => findMatchingContent(node, hasRole);
+/**
 * Determines if the given element is focusable.
 *
 * @param element - The element to check.
@@ -75,7 +64,7 @@ const getRoleContent = (node) => {
 * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
 */
 const isFocusable = (element) => {
-	if (element.tabIndex === void 0 || element.tabIndex < 0) return false;
+	if (element.tabIndex < 0) return false;
 	if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
 		if (element.disabled) return false;
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.104.1",
+  "version": "1.105.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.2.0",
-    "@carbon/icons-react": "^11.77.1",
-    "@carbon/layout": "^11.50.0",
-    "@carbon/styles": "^1.103.0",
+    "@carbon/icons-react": "^11.78.0",
+    "@carbon/layout": "^11.51.0",
+    "@carbon/styles": "^1.104.0",
     "@carbon/utilities": "^0.18.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -78,8 +78,8 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@carbon/test-utils": "^10.40.0",
-    "@carbon/themes": "^11.70.0",
+    "@carbon/test-utils": "^10.41.0",
+    "@carbon/themes": "^11.71.0",
     "@figma/code-connect": "^1.4.2",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^9.1.8",
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a4755588e3a7d4e4d9c53abcc65367644dca7e73"
+  "gitHead": "937649543e9cc6af9dfb6b53a2adb76760bca986"
 }