@carbon/react 1.103.0 → 1.104.0-rc.0

package/lib/internal/keyboard/keys.js

@@ -1,81 +1,80 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
 
+//#region src/internal/keyboard/keys.ts
 const Tab = {
-  key: 'Tab',
-  which: 9,
-  keyCode: 9,
-  code: 'Tab'
+	key: "Tab",
+	which: 9,
+	keyCode: 9,
+	code: "Tab"
 };
 const Enter = {
-  key: 'Enter',
-  which: 13,
-  keyCode: 13,
-  code: 'Enter'
+	key: "Enter",
+	which: 13,
+	keyCode: 13,
+	code: "Enter"
 };
 const Escape = {
-  key: ['Escape',
-  // IE11 Escape
-  'Esc'],
-  which: 27,
-  keyCode: 27,
-  code: 'Esc'
+	key: ["Escape", "Esc"],
+	which: 27,
+	keyCode: 27,
+	code: "Esc"
 };
 const Space = {
-  key: ' ',
-  which: 32,
-  keyCode: 32,
-  code: 'Space'
+	key: " ",
+	which: 32,
+	keyCode: 32,
+	code: "Space"
 };
 const End = {
-  key: 'End',
-  which: 35,
-  keyCode: 35,
-  code: 'Numpad1'
+	key: "End",
+	which: 35,
+	keyCode: 35,
+	code: "Numpad1"
 };
 const Home = {
-  key: 'Home',
-  which: 36,
-  keyCode: 36,
-  code: 'Numpad7'
+	key: "Home",
+	which: 36,
+	keyCode: 36,
+	code: "Numpad7"
 };
 const ArrowLeft = {
-  key: 'ArrowLeft',
-  which: 37,
-  keyCode: 37,
-  code: 'ArrowLeft'
+	key: "ArrowLeft",
+	which: 37,
+	keyCode: 37,
+	code: "ArrowLeft"
 };
 const ArrowUp = {
-  key: 'ArrowUp',
-  which: 38,
-  keyCode: 38,
-  code: 'ArrowUp'
+	key: "ArrowUp",
+	which: 38,
+	keyCode: 38,
+	code: "ArrowUp"
 };
 const ArrowRight = {
-  key: 'ArrowRight',
-  which: 39,
-  keyCode: 39,
-  code: 'ArrowRight'
+	key: "ArrowRight",
+	which: 39,
+	keyCode: 39,
+	code: "ArrowRight"
 };
 const ArrowDown = {
-  key: 'ArrowDown',
-  which: 40,
-  keyCode: 40,
-  code: 'ArrowDown'
+	key: "ArrowDown",
+	which: 40,
+	keyCode: 40,
+	code: "ArrowDown"
 };
 const Delete = {
-  key: 'Delete',
-  which: 8,
-  keyCode: 8,
-  code: 'ArrowDecimal'
+	key: "Delete",
+	which: 8,
+	keyCode: 8,
+	code: "ArrowDecimal"
 };
 
+//#endregion
 exports.ArrowDown = ArrowDown;
 exports.ArrowLeft = ArrowLeft;
 exports.ArrowRight = ArrowRight;
@@ -86,4 +85,4 @@ exports.Enter = Enter;
 exports.Escape = Escape;
 exports.Home = Home;
 exports.Space = Space;
-exports.Tab = Tab;
+exports.Tab = Tab;

package/lib/internal/keyboard/match.js

@@ -1,57 +1,39 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
 
+//#region src/internal/keyboard/match.ts
 /**
- * Check to see if at least one key code matches the key code of the
- * given event.
- *
- * @param event - The event to test.
- * @param keysToMatch - An array of key definitions to match against.
- * @returns `true` if one of the keys matches.
- */
+* Check to see if at least one key code matches the key code of the
+* given event.
+*
+* @param event - The event to test.
+* @param keysToMatch - An array of key definitions to match against.
+* @returns `true` if one of the keys matches.
+*/
 const matches = (event, keysToMatch) => {
-  for (let i = 0; i < keysToMatch.length; i++) {
-    if (match(event, keysToMatch[i])) {
-      return true;
-    }
-  }
-  return false;
+	for (let i = 0; i < keysToMatch.length; i++) if (match(event, keysToMatch[i])) return true;
+	return false;
 };
-
 /**
- * Check to see if the given key matches the corresponding keyboard event. Also
- * supports passing in the value directly if you can't use the given event.
- *
- * @param eventOrCode - A `KeyboardEvent`, a number, or a string value.
- * @param keyObj - An object with key properties to match against.
- * @returns `true` if the event or code matches the key definition.
- */
-const match = (eventOrCode, {
-  key,
-  which,
-  keyCode,
-  code
-}) => {
-  if (typeof eventOrCode === 'string') {
-    return eventOrCode === key;
-  }
-  if (typeof eventOrCode === 'number') {
-    return eventOrCode === which || eventOrCode === keyCode;
-  }
-  if (eventOrCode.key && Array.isArray(key)) {
-    return key.includes(eventOrCode.key);
-  }
-  return eventOrCode.key === key ||
-  // TODO: When can these checks for deprecated properties be deleted?
-  // Presumably, the `Key` type should also be pruned of these properties.
-  eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
+* Check to see if the given key matches the corresponding keyboard event. Also
+* supports passing in the value directly if you can't use the given event.
+*
+* @param eventOrCode - A `KeyboardEvent`, a number, or a string value.
+* @param keyObj - An object with key properties to match against.
+* @returns `true` if the event or code matches the key definition.
+*/
+const match = (eventOrCode, { key, which, keyCode, code }) => {
+	if (typeof eventOrCode === "string") return eventOrCode === key;
+	if (typeof eventOrCode === "number") return eventOrCode === which || eventOrCode === keyCode;
+	if (eventOrCode.key && Array.isArray(key)) return key.includes(eventOrCode.key);
+	return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
 };
 
+//#endregion
 exports.match = match;
-exports.matches = matches;
+exports.matches = matches;

package/lib/internal/keyboard/navigation.js

@@ -1,49 +1,41 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var keys = require('./keys.js');
-var match = require('./match.js');
+const require_keys = require('./keys.js');
+const require_match = require('./match.js');
 
+//#region src/internal/keyboard/navigation.ts
 /**
- * A "ring buffer" function that takes an array and, depending on an ArrowRight
- * or ArrowLeft key input, loops from last index to first or first index to last.
- *
- * @param key - the left or right arrow key (KeyboardEvent, number, or string)
- * @param index - the current index in the array
- * @param arrayLength - the total length of the array
- *
- * @example
- *  getNextIndex(keyCodes.RIGHT, 0, 4)
- */
+* A "ring buffer" function that takes an array and, depending on an ArrowRight
+* or ArrowLeft key input, loops from last index to first or first index to last.
+*
+* @param key - the left or right arrow key (KeyboardEvent, number, or string)
+* @param index - the current index in the array
+* @param arrayLength - the total length of the array
+*
+* @example
+*  getNextIndex(keyCodes.RIGHT, 0, 4)
+*/
 const getNextIndex = (key, index, arrayLength) => {
-  if (match.match(key, keys.ArrowRight)) {
-    return (index + 1) % arrayLength;
-  }
-  if (match.match(key, keys.ArrowLeft)) {
-    return (index + arrayLength - 1) % arrayLength;
-  }
-  return;
+	if (require_match.match(key, require_keys.ArrowRight)) return (index + 1) % arrayLength;
+	if (require_match.match(key, require_keys.ArrowLeft)) return (index + arrayLength - 1) % arrayLength;
 };
-
 /**
- * CSS selector that selects major nodes that are sequentially focusable.
- */
+* CSS selector that selects major nodes that are sequentially focusable.
+*/
 const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
   button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
   textarea:not([disabled]):not([tabindex='-1']),
   iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
 `;
-
 /**
- * CSS selector that selects major nodes that are click focusable.
- */
+* CSS selector that selects major nodes that are click focusable.
+*/
 const selectorFocusable = `
   a[href], area[href], input:not([disabled]),
   button:not([disabled]),select:not([disabled]),
@@ -51,6 +43,7 @@ const selectorFocusable = `
   iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]
 `;
 
+//#endregion
 exports.getNextIndex = getNextIndex;
 exports.selectorFocusable = selectorFocusable;
-exports.selectorTabbable = selectorTabbable;
+exports.selectorTabbable = selectorTabbable;

package/lib/internal/noopFn.js

@@ -1,12 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
 
+//#region src/internal/noopFn.ts
+/**
+* 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.
+*/
 const noopFn = () => {};
 
-exports.noopFn = noopFn;
+//#endregion
+exports.noopFn = noopFn;

package/lib/internal/useAttachedMenu.js

@@ -1,65 +1,56 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useAttachedMenu.ts
 /**
- * Array of two numbers either representing [left, right] or [top, bottom].
- */
-
+* Copyright IBM Corp. 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.
+*/
 /**
- * This hook contains common code to be used when a menu should be visually attached to an anchor based on a click event.
- *
- * @param {Element|object} anchor The element or ref the menu should visually be attached to.
- * @returns {useAttachedMenuReturn}
- */
+* This hook contains common code to be used when a menu should be visually attached to an anchor based on a click event.
+*
+* @param {Element|object} anchor The element or ref the menu should visually be attached to.
+* @returns {useAttachedMenuReturn}
+*/
 function useAttachedMenu(anchor) {
-  const [open, setOpen] = React.useState(false);
-  const [position, setPosition] = React.useState([[-1, -1], [-1, -1]]);
-  function openMenu() {
-    const anchorEl = anchor?.current || anchor;
-    if (anchorEl) {
-      const {
-        left,
-        top,
-        right,
-        bottom
-      } = anchorEl.getBoundingClientRect();
-      setPosition([[left, right], [top, bottom]]);
-    }
-    setOpen(true);
-  }
-  function closeMenu() {
-    setOpen(false);
-  }
-  function handleClick() {
-    if (open) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-  function handleMousedown(e) {
-    // prevent default for mousedown on trigger element to avoid
-    // the "blur" event from firing on the menu as this would close
-    // it and immediately re-open since "click" event is fired after
-    // "blur" event.
-    e.preventDefault();
-  }
-  return {
-    open,
-    x: position[0],
-    y: position[1],
-    handleClick,
-    handleMousedown,
-    handleClose: closeMenu
-  };
+	const [open, setOpen] = (0, react.useState)(false);
+	const [position, setPosition] = (0, react.useState)([[-1, -1], [-1, -1]]);
+	function openMenu() {
+		const anchorEl = anchor?.current || anchor;
+		if (anchorEl) {
+			const { left, top, right, bottom } = anchorEl.getBoundingClientRect();
+			setPosition([[left, right], [top, bottom]]);
+		}
+		setOpen(true);
+	}
+	function closeMenu() {
+		setOpen(false);
+	}
+	function handleClick() {
+		if (open) closeMenu();
+		else openMenu();
+	}
+	function handleMousedown(e) {
+		e.preventDefault();
+	}
+	return {
+		open,
+		x: position[0],
+		y: position[1],
+		handleClick,
+		handleMousedown,
+		handleClose: closeMenu
+	};
 }
 
-exports.useAttachedMenu = useAttachedMenu;
+//#endregion
+exports.useAttachedMenu = useAttachedMenu;

package/lib/internal/useControllableState.js

@@ -1,60 +1,54 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
-var warning = require('./warning.js');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+const require_warning = require('./warning.js');
+let react = require("react");
 
+//#region src/internal/useControllableState.ts
 /**
- * This hook simplifies the behavior of a component that has state which can be
- * both controlled and uncontrolled. It works like `useState`. You can use the
- * `onChange` callback to communicate state updates to parent components.
- *
- * Note: This hook will warn if the component switches between controlled and
- * uncontrolled states.
- */
-const useControllableState = ({
-  defaultValue,
-  name = 'custom',
-  onChange,
-  value
-}) => {
-  const [state, internalSetState] = React.useState(typeof value !== 'undefined' ? value : defaultValue);
-  const controlled = React.useRef(null);
-  if (controlled.current === null) {
-    controlled.current = typeof value !== 'undefined';
-  }
-  const setState = stateOrUpdater => {
-    const newValue = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
-    if (controlled.current === false) {
-      internalSetState(newValue);
-    }
-    if (onChange) {
-      onChange(newValue);
-    }
-  };
-  React.useEffect(() => {
-    const controlledValue = typeof value !== 'undefined';
-
-    // Uncontrolled -> Controlled
-    if (controlled.current === false && controlledValue) {
-      process.env.NODE_ENV !== "production" ? warning.warning(false, `A component is changing an uncontrolled ${name} component to be controlled. ` + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components') : void 0;
-    }
-
-    // Controlled -> Uncontrolled
-    if (controlled.current === true && !controlledValue) {
-      process.env.NODE_ENV !== "production" ? warning.warning(false, `A component is changing a controlled ${name} component to be uncontrolled. ` + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components') : void 0;
-    }
-  }, [name, value]);
-  if (controlled.current === true) {
-    return [value, setState, controlled.current];
-  }
-  return [state, setState, controlled.current];
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* This hook simplifies the behavior of a component that has state which can be
+* both controlled and uncontrolled. It works like `useState`. You can use the
+* `onChange` callback to communicate state updates to parent components.
+*
+* Note: This hook will warn if the component switches between controlled and
+* uncontrolled states.
+*/
+const useControllableState = ({ defaultValue, name = "custom", onChange, value }) => {
+	const [state, internalSetState] = (0, react.useState)(typeof value !== "undefined" ? value : defaultValue);
+	const controlled = (0, react.useRef)(null);
+	if (controlled.current === null) controlled.current = typeof value !== "undefined";
+	const setState = (stateOrUpdater) => {
+		const newValue = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+		if (controlled.current === false) internalSetState(newValue);
+		if (onChange) onChange(newValue);
+	};
+	(0, react.useEffect)(() => {
+		const controlledValue = typeof value !== "undefined";
+		if (controlled.current === false && controlledValue) require_warning.warning(false, `A component is changing an uncontrolled ${name} component to be controlled. This is likely caused by the value changing to a defined value from undefined. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components`);
+		if (controlled.current === true && !controlledValue) require_warning.warning(false, `A component is changing a controlled ${name} component to be uncontrolled. This is likely caused by the value changing to an undefined value from a defined one. Decide between using a controlled or uncontrolled value for the lifetime of the component. More info: https://reactjs.org/link/controlled-components`);
+	}, [name, value]);
+	if (controlled.current === true) return [
+		value,
+		setState,
+		controlled.current
+	];
+	return [
+		state,
+		setState,
+		controlled.current
+	];
 };
 
-exports.useControllableState = useControllableState;
+//#endregion
+exports.useControllableState = useControllableState;

package/lib/internal/useDelayedState.js

@@ -1,48 +1,42 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var React = require('react');
+const require_runtime = require('../_virtual/_rolldown/runtime.js');
+let react = require("react");
 
+//#region src/internal/useDelayedState.ts
 /**
- * `useDelayedState` mirrors `useState` but also allows you to add a delay to
- * when your state updates. You can provide a second argument to `setState`,
- * `delayMs`, which will be the time in milliseconds after which the state is
- * updated.
- *
- * This hook will clean up pending timers in `useEffect` and will cancel any
- * pending timers when a `setState` is called before the state is updated from
- * a previous call
- */
-
+* 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.
+*/
 function useDelayedState(initialState) {
-  const [state, setState] = React.useState(initialState);
-  const timeoutId = React.useRef(null);
-  // We use `useCallback` to match the signature of React's `useState` which will
-  // always return the same reference for the `setState` updater
-  const setStateWithDelay = React.useCallback((stateToSet, delayMs = 0) => {
-    window.clearTimeout(timeoutId.current ?? undefined);
-    timeoutId.current = null;
-    if (delayMs === 0) {
-      setState(stateToSet);
-      return;
-    }
-    timeoutId.current = window.setTimeout(() => {
-      setState(stateToSet);
-      timeoutId.current = null;
-    }, delayMs);
-  }, []);
-  React.useEffect(() => {
-    return () => {
-      window.clearTimeout(timeoutId.current ?? undefined);
-    };
-  }, []);
-  return [state, setStateWithDelay];
+	const [state, setState] = (0, react.useState)(initialState);
+	const timeoutId = (0, react.useRef)(null);
+	const setStateWithDelay = (0, react.useCallback)((stateToSet, delayMs = 0) => {
+		window.clearTimeout(timeoutId.current ?? void 0);
+		timeoutId.current = null;
+		if (delayMs === 0) {
+			setState(stateToSet);
+			return;
+		}
+		timeoutId.current = window.setTimeout(() => {
+			setState(stateToSet);
+			timeoutId.current = null;
+		}, delayMs);
+	}, []);
+	(0, react.useEffect)(() => {
+		return () => {
+			window.clearTimeout(timeoutId.current ?? void 0);
+		};
+	}, []);
+	return [state, setStateWithDelay];
 }
 
-exports.useDelayedState = useDelayedState;
+//#endregion
+exports.useDelayedState = useDelayedState;