@carbon/react 1.80.0-rc.0 → 1.80.0

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.0",
   "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.0",
     "@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": "7c4674649e1a5bd1367d99797df86cdc338eff6e"
 }