@carbon/react 1.56.0 → 1.57.0-rc.0

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -104,10 +104,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-class OverflowMenu extends React.Component {
+class OverflowMenu extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {});
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      open: false,
+      // Set a default value for 'open'
+      hasMountedTrigger: false,
+      // Set a default value for 'hasMountedTrigger'
+      click: false // Set a default value for 'click'
+    });
     _rollupPluginBabelHelpers.defineProperty(this, "instanceId", getInstanceId());
     /**
      * The handle of `onfocusin` or `focus` event handler.
@@ -141,8 +147,8 @@ class OverflowMenu extends React.Component {
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
-      let wasClicked = this.state.click;
-      let wasOpen = this.state.open;
+      const wasClicked = this.state.click;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen && !wasClicked) {
           this.focusMenuEl();
@@ -150,7 +156,7 @@ class OverflowMenu extends React.Component {
       });
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuOnEscape", () => {
-      let wasOpen = this.state.open;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen) {
           this.focusMenuEl();
@@ -212,7 +218,7 @@ class OverflowMenu extends React.Component {
         direction
       } = _ref;
       const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if (!curr.props.disabled) {
+        if ( /*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;
@@ -237,6 +243,7 @@ class OverflowMenu extends React.Component {
      * @param {Element} menuBody The DOM element of the menu body.
      * @private
      */
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
     _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
@@ -279,7 +286,7 @@ class OverflowMenu extends React.Component {
       const {
         current: triggerEl
       } = this._triggerRef;
-      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+      return triggerEl instanceof Element && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
   componentDidUpdate(_, prevState) {
@@ -360,18 +367,19 @@ class OverflowMenu extends React.Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx__default["default"](`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-      closeMenu: child?.props?.closeMenu || this.closeMenuAndFocus,
+    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+      // @ts-expect-error: PropTypes are not expressive enough to cover this case
+      closeMenu: child.props.closeMenu || this.closeMenuAndFocus,
       handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
       ref: e => {
         this[`overflowMenuItem${index}`] = e;
       },
       index
-    }));
+    }) : null);
     const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
     const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
       className: overflowMenuOptionsClasses,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "menu",
       "aria-label": ariaLabel || deprecatedAriaLabel,
       onKeyDown: this.handleKeyPress,
@@ -398,12 +406,12 @@ class OverflowMenu extends React.Component {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--overflow-menu__wrapper`,
-      "aria-owns": open ? menuBodyId : null
+      "aria-owns": open ? menuBodyId : undefined
     }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": open,
-      "aria-controls": open ? menuBodyId : null,
+      "aria-controls": open ? menuBodyId : undefined,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,

package/lib/components/OverflowMenu/next/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+import React, { type ComponentType, type FunctionComponent } from 'react';
+interface OverflowMenuProps {
+    /**
+     * A collection of MenuItems to be rendered within this OverflowMenu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names for the trigger button.
+     */
+    className?: string;
+    /**
+     * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+     */
+    label?: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Optionally provide a custom icon to be rendered on the trigger button.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the menu, from a list of available sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+}
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
+export { OverflowMenu };

package/lib/components/OverflowMenu/next/index.js

@@ -62,10 +62,10 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     ref: forwardRef
   }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
-    "aria-controls": open ? id : null,
+    "aria-controls": open ? id : undefined,
     "aria-haspopup": true,
     "aria-expanded": open,
     className: triggerClasses,
@@ -107,8 +107,9 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
+   * Optionally provide a custom icon to be rendered on the trigger button.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the menu, from a list of available sizes.

package/lib/components/RadioTile/RadioTile.d.ts

@@ -50,6 +50,10 @@ export interface RadioTileProps {
      * Specify the value of the underlying `<input>`.
      */
     value: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/lib/components/RadioTile/RadioTile.js

@@ -43,6 +43,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id,
     onChange = noopFn.noopFn,
     tabIndex = 0,
+    required,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -84,7 +85,8 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
-    ref: ref
+    ref: ref,
+    required: required
   }), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
     htmlFor: inputId,
     className: className
@@ -130,6 +132,10 @@ RadioTile.propTypes = {
    * the underlying `<input>` changes.
    */
   onChange: PropTypes__default["default"].func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/lib/components/Slider/Slider.js

@@ -522,7 +522,7 @@ class Slider extends React.PureComponent {
       if (clientX) {
         const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         return leftOffset / width;
-      } else if (value && range) {
+      } else if (value !== null && value !== undefined && range) {
         // Prevent NaN calculation if the range is 0.
         return range === 0 ? 0 : (value - this.props.min) / range;
       }
@@ -1104,7 +1104,7 @@ class Slider extends React.PureComponent {
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
         label: `${value}`,
-        align: twoHandles ? 'top-right' : 'top'
+        align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
@@ -1123,7 +1123,7 @@ class Slider extends React.PureComponent {
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${valueUpper}`,
-        align: "top-left"
+        align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default["default"].createElement("div", {
         className: upperThumbClasses,
         role: "slider",

package/lib/components/StructuredList/StructuredList.js

@@ -27,7 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _StructuredListCell, _RadioButtonChecked, _RadioButton;
+var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListWrapper(props) {
@@ -202,7 +202,11 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default["default"].createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, null))), children));
+  }, selection && /*#__PURE__*/React__default["default"].createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, {
+    className: `${prefix}--structured-list__icon`
+  }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, {
+    className: `${prefix}--structured-list__icon`
+  })), children));
 }
 StructuredListRow.propTypes = {
   /**

package/lib/components/TileGroup/TileGroup.d.ts

@@ -40,6 +40,10 @@ export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, Exc
      * Specify the value that is currently selected in the group
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const TileGroup: {
     (props: any): import("react/jsx-runtime").JSX.Element;
@@ -73,6 +77,10 @@ declare const TileGroup: {
          * the group changes
          */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to specify if input selection in group is required.
+         */
+        required: PropTypes.Requireable<boolean>;
         /**
          * Specify the value that is currently selected in the group
          */

package/lib/components/TileGroup/TileGroup.js

@@ -30,7 +30,8 @@ const TileGroup = props => {
     legend,
     name,
     onChange = noopFn.noopFn,
-    valueSelected
+    valueSelected,
+    required
   } = props;
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
@@ -54,6 +55,7 @@ const TileGroup = props => {
             ...otherProps
           } = child.props;
           return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, otherProps, {
+            required: required,
             name: name,
             key: value,
             value: value,
@@ -122,6 +124,10 @@ TileGroup.propTypes = {
    * the group changes
    */
   onChange: PropTypes__default["default"].func,
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * Specify the value that is currently selected in the group
    */

package/lib/index.js

@@ -183,7 +183,6 @@ var PageSelector = require('./components/Pagination/experimental/PageSelector.js
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
 var CheckboxGroup = require('./components/CheckboxGroup/CheckboxGroup.js');
 var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
-var ContainedList = require('./components/ContainedList/ContainedList.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
 var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
@@ -208,6 +207,7 @@ var ChatButton = require('./components/ChatButton/ChatButton.js');
 var ChatButton_Skeleton = require('./components/ChatButton/ChatButton.Skeleton.js');
 var Text = require('./components/Text/Text.js');
 var TextDirection = require('./components/Text/TextDirection.js');
+var ContainedList = require('./components/ContainedList/ContainedList.js');
 var DataTable = require('./components/DataTable/DataTable.js');
 var Table = require('./components/DataTable/Table.js');
 var TableActionList = require('./components/DataTable/TableActionList.js');
@@ -454,7 +454,6 @@ exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
 exports.CheckboxGroup = CheckboxGroup["default"];
 exports.ContainedListItem = ContainedListItem["default"];
-exports.ContainedList = ContainedList["default"];
 exports.useContextMenu = useContextMenu["default"];
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
@@ -479,6 +478,7 @@ exports.unstable__ChatButton = ChatButton["default"];
 exports.unstable__ChatButtonSkeleton = ChatButton_Skeleton["default"];
 exports.unstable_Text = Text.Text;
 exports.unstable_TextDirection = TextDirection.TextDirection;
+exports.ContainedList = ContainedList["default"];
 exports.DataTable = DataTable["default"];
 exports.Table = Table.Table;
 exports.TableActionList = TableActionList["default"];

package/lib/internal/Selection.js

@@ -50,6 +50,9 @@ function useSelection(_ref2) {
   const [uncontrolledItems, setUncontrolledItems] = React.useState(initialSelectedItems);
   const isControlled = !!controlledItems;
   const [selectedItems, setSelectedItems] = React.useState(isControlled ? controlledItems : uncontrolledItems);
+  React.useEffect(() => {
+    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
+  }, [isControlled, controlledItems, uncontrolledItems]);
   React.useEffect(() => {
     callOnChangeHandler({
       isControlled,
@@ -84,7 +87,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: setSelectedItems([])
+      selectedItems: []
     });
   }, [disabled, isControlled]);
   React.useEffect(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.56.0",
+  "version": "1.57.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,12 +48,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.19.0",
-    "@carbon/icons-react": "^11.40.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.56.0",
+    "@carbon/feature-flags": "^0.20.0-rc.0",
+    "@carbon/icons-react": "^11.41.0-rc.0",
+    "@carbon/layout": "^11.22.0-rc.0",
+    "@carbon/styles": "^1.57.0-rc.0",
     "@floating-ui/react": "^0.26.0",
-    "@ibm/telemetry-js": "^1.4.0",
+    "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "8.5.0",
@@ -81,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.34.0",
+    "@carbon/themes": "^11.35.0-rc.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7d883c90790c14c76ce131a62121a533ffe6af6f"
+  "gitHead": "401633ab2d5fdeaeb89f66bb9040cc1de008599d"
 }

package/telemetry.yml

@@ -816,4 +816,4 @@ collect:
       - 'hollow'
   js:
     tokens: null
-    functions: {}
+    functions: {}