@carbon/react 1.56.0 → 1.57.0

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -45,6 +45,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
     warn = false,
     warnText,
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -72,7 +73,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
         key: value,
         value: value,
         onChange: handleOnChange,
-        checked: value === selected
+        checked: value === selected,
+        required: required
       };
       if (!selected && radioButton?.props.checked) {
         newProps.checked = true;
@@ -197,6 +199,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes__default["default"].bool,
+  /**
+   * `true` to specify if radio selection in group is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */

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/components/TimePicker/TimePicker.js

@@ -123,7 +123,7 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
       if (item) {
         return /*#__PURE__*/React__default["default"].cloneElement(item, {
           ...item.props,
-          disabled: disabled,
+          disabled: item.props.disabled ?? disabled,
           readOnly: readOnly,
           ...readOnlyEventHandlers
         });

package/lib/index.js

@@ -30,6 +30,7 @@ var index$5 = require('./components/ComboButton/index.js');
 var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
 var ModalHeader = require('./components/ComposedModal/ModalHeader.js');
 var ModalFooter = require('./components/ComposedModal/ModalFooter.js');
+require('./components/ContainedList/index.js');
 var index$6 = require('./components/ContentSwitcher/index.js');
 var Copy = require('./components/Copy/Copy.js');
 var CopyButton = require('./components/CopyButton/CopyButton.js');
@@ -73,6 +74,7 @@ var MenuItem = require('./components/Menu/MenuItem.js');
 var index$8 = require('./components/MenuButton/index.js');
 var Modal = require('./components/Modal/Modal.js');
 var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
+require('./components/MultiSelect/index.js');
 var Notification = require('./components/Notification/Notification.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
 var NumberInput = require('./components/NumberInput/NumberInput.js');

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",
   "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",
+    "@carbon/icons-react": "^11.41.0",
+    "@carbon/layout": "^11.22.0",
+    "@carbon/styles": "^1.57.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",
     "@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": "e4922a44b2110b9dcb71da21ff6c0c9bb95610e0"
 }

package/telemetry.yml

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