@carbon/react 1.32.0-rc.0 → 1.33.0-rc.0

package/lib/index.js

@@ -63,6 +63,7 @@ var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
 require('./components/TextInput/index.js');
 var Tile = require('./components/Tile/Tile.js');
 var index$a = require('./components/TileGroup/index.js');
+var Toggle = require('./components/Toggle/Toggle.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var index$b = require('./components/Toggletip/index.js');
@@ -114,7 +115,6 @@ var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleto
 var ProgressIndicator_Skeleton = require('./components/ProgressIndicator/ProgressIndicator.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var TextInput = require('./components/TextInput/TextInput.js');
-var Toggle = require('./components/Toggle/Toggle.js');
 var TreeNode = require('./components/TreeView/TreeNode.js');
 var TreeView = require('./components/TreeView/TreeView.js');
 var HeaderContainer = require('./components/UIShell/HeaderContainer.js');
@@ -296,6 +296,7 @@ exports.Tile = Tile.Tile;
 exports.TileAboveTheFoldContent = Tile.TileAboveTheFoldContent;
 exports.TileBelowTheFoldContent = Tile.TileBelowTheFoldContent;
 exports.TileGroup = index$a["default"];
+exports.Toggle = Toggle.Toggle;
 exports.ToggleSkeleton = Toggle_Skeleton["default"];
 exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
 exports.Toggletip = index$b.Toggletip;
@@ -360,7 +361,6 @@ exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
 exports.ProgressIndicatorSkeleton = ProgressIndicator_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.TextInput = TextInput["default"];
-exports.Toggle = Toggle.Toggle;
 exports.TreeNode = TreeNode["default"];
 exports.TreeView = TreeView["default"];
 exports.HeaderContainer = HeaderContainer["default"];

package/lib/internal/FloatingMenu.js

@@ -153,6 +153,7 @@ class FloatingMenu extends React__default["default"].Component {
     var _this;
     super(...arguments);
     _this = this;
+    // `true` if the menu body is mounted and calculation of the position is in progress.
     _rollupPluginBabelHelpers.defineProperty(this, "_placeInProgress", false);
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       /**
@@ -161,10 +162,36 @@ class FloatingMenu extends React__default["default"].Component {
        */
       floatingPosition: undefined
     });
+    /**
+     * The cached reference to the menu container.
+     * Only used if React portal API is not available.
+     * @type {Element}
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_menuContainer", null);
+    /**
+     * The cached reference to the menu body.
+     * The reference is set via callback ref instead of object ref,
+     * in order to hook the event when the element ref gets available,
+     * which can be at a different timing from `cDM()`, presumably with SSR scenario.
+     * @type {Element}
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
+    /**
+     * Focus sentinel refs for focus trap behavior
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "startSentinel", /*#__PURE__*/React__default["default"].createRef());
     _rollupPluginBabelHelpers.defineProperty(this, "endSentinel", /*#__PURE__*/React__default["default"].createRef());
+    /**
+     * Calculates the position in the viewport of floating menu,
+     * once this component is mounted or updated upon change in the following props:
+     *
+     * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
+     * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
+     *
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_updateMenuSize", function () {
       let prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -238,6 +265,11 @@ class FloatingMenu extends React__default["default"].Component {
         }
       }
     });
+    /**
+     * Set focus on floating menu content after menu placement.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_focusMenuContent", menuBody => {
       const primaryFocusNode = menuBody.querySelector(this.props.selectorPrimaryFocus || null);
       const tabbableNode = menuBody.querySelector(navigation.selectorTabbable);
@@ -254,6 +286,10 @@ class FloatingMenu extends React__default["default"].Component {
         process.env.NODE_ENV !== "production" ? warning.warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
       }
     });
+    /**
+     * A callback for called when menu body is mounted or unmounted.
+     * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_menuRef", menuBody => {
       const {
         menuRef
@@ -264,6 +300,10 @@ class FloatingMenu extends React__default["default"].Component {
         this._updateMenuSize();
       }
     });
+    /**
+     * @returns The child nodes, with styles containing the floating menu position.
+     * @private
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "_getChildrenWithProps", () => {
       const {
         styles,
@@ -292,6 +332,12 @@ class FloatingMenu extends React__default["default"].Component {
         }
       });
     });
+    /**
+     * Blur handler for when focus wrap behavior is enabled
+     * @param {Event} event
+     * @param {Element} event.target previously focused node
+     * @param {Element} event.relatedTarget current focused node
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "handleBlur", _ref2 => {
       let {
         target: oldActiveNode,
@@ -313,33 +359,7 @@ class FloatingMenu extends React__default["default"].Component {
         });
       }
     });
-  } // `true` if the menu body is mounted and calculation of the position is in progress.
-  /**
-   * The cached reference to the menu container.
-   * Only used if React portal API is not available.
-   * @type {Element}
-   * @private
-   */
-  /**
-   * The cached reference to the menu body.
-   * The reference is set via callback ref instead of object ref,
-   * in order to hook the event when the element ref gets available,
-   * which can be at a different timing from `cDM()`, presumably with SSR scenario.
-   * @type {Element}
-   * @private
-   */
-  /**
-   * Focus sentinel refs for focus trap behavior
-   */
-  /**
-   * Calculates the position in the viewport of floating menu,
-   * once this component is mounted or updated upon change in the following props:
-   *
-   * * `menuOffset` (The adjustment that should be applied to the calculated floating menu's position)
-   * * `menuDirection` (Where the floating menu menu should be placed relative to the trigger button)
-   *
-   * @private
-   */
+  }
   componentWillUnmount() {
     this.hResize.release();
   }
@@ -348,12 +368,6 @@ class FloatingMenu extends React__default["default"].Component {
       this._updateMenuSize();
     });
   }
-  /**
-   * Set focus on floating menu content after menu placement.
-   * @param {Element} menuBody The DOM element of the menu body.
-   * @private
-   */
-
   componentDidUpdate(prevProps) {
     this._updateMenuSize(prevProps);
     const {
@@ -369,24 +383,6 @@ class FloatingMenu extends React__default["default"].Component {
       }
     }
   }
-
-  /**
-   * A callback for called when menu body is mounted or unmounted.
-   * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
-   */
-
-  /**
-   * @returns The child nodes, with styles containing the floating menu position.
-   * @private
-   */
-
-  /**
-   * Blur handler for when focus wrap behavior is enabled
-   * @param {Event} event
-   * @param {Element} event.target previously focused node
-   * @param {Element} event.relatedTarget current focused node
-   */
-
   render() {
     const {
       context: prefix

package/lib/internal/useControllableState.js

@@ -26,7 +26,7 @@ var warning = require('./warning.js');
  * @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} config.onChange - an optional function that is called when
+ * @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

package/lib/internal/useId.js

@@ -43,6 +43,15 @@ function useId() {
       serverHandoffCompleted = true;
     }
   }, []);
+  if (React.useId) {
+    const id = nativeReactUseId(_prefix, prefix);
+    return id;
+  }
+  return id;
+}
+function nativeReactUseId(_prefix, prefix) {
+  const getId = React.useId();
+  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
   return id;
 }
 

package/lib/internal/useMatchMedia.js

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var environment = require('./environment.js');
+
+function useMatchMedia(mediaQueryString) {
+  const [matches, setMatches] = React.useState(() => {
+    if (environment.canUseDOM) {
+      const mediaQueryList = window.matchMedia(mediaQueryString);
+      return mediaQueryList.matches;
+    }
+    return false;
+  });
+  React.useEffect(() => {
+    function listener(event) {
+      setMatches(event.matches);
+    }
+    const mediaQueryList = window.matchMedia(mediaQueryString);
+    // Support fallback to `addListener` for broader browser support
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+
+    // Make sure the media query list is in sync with the matches state
+    setMatches(mediaQueryList.matches);
+    return () => {
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, [mediaQueryString]);
+  return matches;
+}
+
+exports.useMatchMedia = useMatchMedia;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.32.0-rc.0",
+  "version": "1.33.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,8 @@
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
     "clean": "rimraf es lib icons/index.js icons/index.esm.js storybook-static",
     "postinstall": "carbon-telemetry collect --install",
-    "storybook": "start-storybook -p 3000"
+    "storybook": "storybook dev -p 3000",
+    "storybook:build": "storybook build"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
@@ -44,9 +45,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.15.0",
-    "@carbon/icons-react": "^11.21.0",
-    "@carbon/layout": "^11.15.0",
-    "@carbon/styles": "^1.32.0-rc.0",
+    "@carbon/icons-react": "^11.22.0-rc.0",
+    "@carbon/layout": "^11.16.0-rc.0",
+    "@carbon/styles": "^1.33.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -70,25 +71,25 @@
     "@babel/plugin-proposal-export-default-from": "^7.17.12",
     "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "@babel/plugin-transform-react-constant-elements": "^7.17.12",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.20.0",
+    "@carbon/themes": "^11.21.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-docs": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-a11y": "^7.0.23",
+    "@storybook/addon-actions": "^7.0.23",
+    "@storybook/addon-docs": "^7.0.23",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/addon-storysource": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/theming": "^6.5.6",
+    "@storybook/addon-storysource": "^7.0.23",
+    "@storybook/react": "^7.0.23",
+    "@storybook/react-webpack5": "^7.0.23",
+    "@storybook/theming": "^7.0.23",
     "@types/react-is": "~18.2.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
@@ -109,6 +110,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "remark-gfm": "^3.0.1",
     "requestanimationframe": "^0.0.23",
     "rimraf": "^5.0.0",
     "rollup": "^2.79.1",
@@ -116,6 +118,7 @@
     "rtlcss": "^4.0.0",
     "sass": "^1.51.0",
     "sass-loader": "^13.0.0",
+    "storybook": "^7.0.23",
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
@@ -134,5 +137,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "fe40fbf428231bd35f6bc8cc871ea09c7afa5051"
+  "gitHead": "b9e28c4e35eeddf4ecc3261630a8f3fecc7012d4"
 }