@carbon/react 1.80.0-rc.0 → 1.80.1

package/lib/components/TreeView/TreeView.js

@@ -54,7 +54,11 @@ const TreeView = _ref => {
   const treeWalker = React.useRef(treeRootRef?.current);
   const controllableSelectionState = useControllableState.useControllableState({
     value: preselected,
-    onChange: onSelect,
+    onChange: newSelected => {
+      onSelect?.(undefined, {
+        activeNodeId: newSelected[0]
+      });
+    },
     defaultValue: []
   });
   const uncontrollableSelectionState = React.useState(preselected ?? []);
@@ -137,11 +141,7 @@ const TreeView = _ref => {
   });
   function handleKeyDown(event) {
     event.stopPropagation();
-    if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
-    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-    {
-      code: 'KeyA'
-    }])) {
+    if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End])) {
       event.preventDefault();
     }
     if (!treeWalker.current) {

package/lib/internal/ClickListener.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+import React, { type ReactElement } from 'react';
+interface ClickListenerProps {
+    children: ReactElement;
+    onClickOutside: (event: MouseEvent) => void;
+}
+export declare const ClickListener: ({ children, onClickOutside, }: ClickListenerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/lib/internal/ClickListener.js

@@ -9,75 +9,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Generic component used for reacting to a click event happening outside of a
- * given `children` element.
- */
-class ClickListener extends React__default["default"].Component {
-  static getEventTarget(evt) {
-    // support Shadow DOM
-    if (evt.composed && typeof evt.composedPath === 'function') {
-      return evt.composedPath()[0];
+const ClickListener = _ref => {
+  let {
+    children,
+    onClickOutside
+  } = _ref;
+  const elementRef = React.useRef(null);
+  const getEventTarget = event => {
+    if (event.composed && typeof event.composedPath === 'function') {
+      return event.composedPath()[0];
     }
-    return evt.target;
-  }
-  constructor(props) {
-    super(props);
-    // We manually bind handlers in this Component, versus using class
-    // properties, so that we can properly test the `handleRef` handler.
-    this.handleRef = this.handleRef.bind(this);
-    this.handleDocumentClick = this.handleDocumentClick.bind(this);
-  }
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick);
-  }
-  handleDocumentClick(evt) {
-    if (this.element) {
-      if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
-        this.props.onClickOutside(evt);
+    return event.target;
+  };
+  const handleDocumentClick = event => {
+    if (elementRef.current?.contains) {
+      const eventTarget = getEventTarget(event);
+      if (eventTarget instanceof Node && !elementRef.current.contains(eventTarget)) {
+        onClickOutside(event);
       }
     }
-  }
-  handleRef(el) {
-    const {
-      children
-    } = this.props;
-    this.element = el;
-
-    /**
-     * One important note, `children.ref` corresponds to a `ref` prop passed in
-     * directly to the child, not necessarily a `ref` defined in the component.
-     * This means that here we target the following `ref` location:
-     *
-     * <ClickListener onClickOutside={() => {}}>
-     *   <Child ref={targetedRefHere} />
-     * </ClickListener>
-     */
-    if (children.ref && typeof children.ref === 'function') {
+  };
+  React.useEffect(() => {
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [onClickOutside]);
+  const handleRef = el => {
+    elementRef.current = el;
+    if ('ref' in children && typeof children.ref === 'function') {
       children.ref(el);
     }
-  }
-  render() {
-    return /*#__PURE__*/React__default["default"].cloneElement(this.props.children, {
-      ref: this.handleRef
-    });
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(ClickListener, "propTypes", {
-  children: PropTypes__default["default"].element.isRequired,
-  onClickOutside: PropTypes__default["default"].func.isRequired
-});
+  };
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: handleRef
+  });
+};
 
-exports["default"] = ClickListener;
+exports.ClickListener = ClickListener;

package/lib/internal/useControllableState.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+interface UseControllableStateConfig<T> {
+    /** The name of the component. */
+    name?: string;
+    /**
+     * The default value for the component. This value is used when the component
+     * is uncontrolled (i.e., when `value` is not provided).
+     */
+    defaultValue: T;
+    /**
+     * This callback is called whenever the state changes. It's useful for
+     * communicating state updates to parent components of controlled components.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Controlled value. If this prop is omitted, the state will be uncontrolled.
+     */
+    value?: T;
+}
+/**
+ * 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.
+ */
+export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void];
+export {};

package/lib/internal/useControllableState.js

@@ -13,58 +13,43 @@ var React = require('react');
 var warning = require('./warning.js');
 
 /**
- * This custom hook simplifies the behavior of a component if it has state that
- * can be both controlled and uncontrolled. It functions identical to a
- * useState() hook and provides [state, setState] for you to use. You can use
- * the `onChange` argument to allow updates to the `state` to be communicated to
- * owners of controlled components.
+ * 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 a component is switching from controlled to
- * uncontrolled, or vice-versa.
- *
- * @param {object} config
- * @param {string} [config.name] - the name of the custom component
- * @param {any} config.defaultValue - the default value used for the state. This will be
- * the fallback value used if `value` is not defined.
- * @param {Function|undefined} config.onChange - an optional function that is called when
- * the value of the state changes. This is useful for communicating to parents of
- * controlled components that the value is requesting to be changed.
- * @param {any} config.value - a controlled value. Omitting this means that the state is
- * uncontrolled
- * @returns {[any, (v: any) => void]}
+ * Note: This hook will warn if the component switches between controlled and
+ * uncontrolled states.
  */
-function useControllableState(_ref) {
+const useControllableState = _ref => {
   let {
     defaultValue,
     name = 'custom',
     onChange,
     value
   } = _ref;
-  const [state, internalSetState] = React.useState(value ?? defaultValue);
+  const [state, internalSetState] = React.useState(typeof value !== 'undefined' ? value : defaultValue);
   const controlled = React.useRef(null);
   if (controlled.current === null) {
-    controlled.current = value !== undefined;
+    controlled.current = typeof value !== 'undefined';
   }
-  function setState(stateOrUpdater) {
-    const value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+  const setState = stateOrUpdater => {
+    const newValue = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
     if (controlled.current === false) {
-      internalSetState(value);
+      internalSetState(newValue);
     }
     if (onChange) {
-      onChange(value);
+      onChange(newValue);
     }
-  }
+  };
   React.useEffect(() => {
-    const controlledValue = value !== undefined;
+    const controlledValue = typeof value !== 'undefined';
 
     // Uncontrolled -> Controlled
-    // If the component prop is uncontrolled, the prop value should be undefined
     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 the component prop is controlled, the prop value should be defined
     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;
     }
@@ -73,6 +58,6 @@ function useControllableState(_ref) {
     return [value, setState];
   }
   return [state, setState];
-}
+};
 
 exports.useControllableState = useControllableState;

package/lib/internal/useOutsideClick.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+import { type RefObject } from 'react';
+export declare const useOutsideClick: <T extends HTMLElement>(ref: RefObject<T>, callback: (event: MouseEvent) => void) => void;

package/lib/internal/useOutsideClick.js

@@ -10,26 +10,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useEvent = require('./useEvent.js');
 var environment = require('./environment.js');
+var useEvent = require('./useEvent.js');
 
-function useOutsideClick(ref, callback) {
+const useOutsideClick = (ref, callback) => {
   const savedCallback = React.useRef(callback);
   React.useEffect(() => {
     savedCallback.current = callback;
-  });
+  }, [callback]);
 
   // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
   // treated as a constant as it will be false when executed in a Node.js
   // environment and true when executed in the browser
   if (environment.canUseDOM) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEvent.useEvent(window, 'click', event => {
-      if (ref.current && !ref.current.contains(event.target)) {
+    useEvent.useWindowEvent('click', event => {
+      const {
+        target
+      } = event;
+      if (target instanceof Node && ref.current && !ref.current.contains(target)) {
         savedCallback.current(event);
       }
     });
   }
-}
+};
 
 exports.useOutsideClick = useOutsideClick;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.80.0-rc.0",
+  "version": "1.80.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
+  "sass": "index.scss",
   "repository": {
     "type": "git",
     "url": "https://github.com/carbon-design-system/carbon.git",
@@ -51,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@carbon/feature-flags": "^0.25.0",
-    "@carbon/icons-react": "^11.58.0-rc.0",
-    "@carbon/layout": "^11.32.0-rc.0",
-    "@carbon/styles": "^1.79.0-rc.0",
+    "@carbon/feature-flags": "^0.26.0",
+    "@carbon/icons-react": "^11.58.0",
+    "@carbon/layout": "^11.32.0",
+    "@carbon/styles": "^1.79.1",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +80,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.35.0",
-    "@carbon/themes": "^11.50.0-rc.0",
+    "@carbon/themes": "^11.50.0",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -146,5 +147,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "0d87b91846d3b2a877f9f385f4f4b16214388315"
+  "gitHead": "1fcbf602a0c0a9e33987b3b63e7a7a8b39af47d0"
 }