@carbon/react 1.22.0 → 1.23.0

package/lib/components/Grid/GridContext.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+import * as React from 'react';
+export type GridMode = 'flexbox' | 'css-grid';
+export interface GridSettingContext {
+    /**
+     * The grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specifies whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export interface GridSettingsProps {
+    /**
+     * Pass in components which will be rendered within the `GridSettings`
+     * component
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specify whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export declare const GridSettings: React.FC<GridSettingsProps>;
+/**
+ * Helper function for accessing the GridContext value
+ */
+export declare const useGridSettings: () => GridSettingContext;

package/lib/components/Grid/GridContext.js

@@ -39,12 +39,11 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-
 var GridSettingsContext = /*#__PURE__*/React__namespace.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-function GridSettings(_ref) {
+var GridSettings = function GridSettings(_ref) {
   var children = _ref.children,
       mode = _ref.mode,
       _ref$subgrid = _ref.subgrid,
@@ -58,7 +57,8 @@ function GridSettings(_ref) {
   return /*#__PURE__*/React__namespace.createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
-}
+};
+var gridModes = ['flexbox', 'css-grid'];
 GridSettings.propTypes = {
   /**
    * Pass in components which will be rendered within the `GridSettings`
@@ -69,7 +69,7 @@ GridSettings.propTypes = {
   /**
    * Specify the grid mode for the GridContext
    */
-  mode: PropTypes__default["default"].oneOf(['flexbox', 'css-grid']).isRequired,
+  mode: PropTypes__default["default"].oneOf(gridModes).isRequired,
 
   /**
    * Specify whether subgrid should be enabled
@@ -80,9 +80,9 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 
-function useGridSettings() {
+var useGridSettings = function useGridSettings() {
   return React__namespace.useContext(GridSettingsContext);
-}
+};
 
 exports.GridSettings = GridSettings;
 exports.useGridSettings = useGridSettings;

package/lib/components/Grid/GridTypes.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+/// <reference types="react" />
+import { PolymorphicProps } from '../../types/common';
+interface GridBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Grid`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Grid`
+     */
+    className?: string;
+    /**
+     * Collapse the gutter to 1px. Useful for fluid layouts.
+     * Rows have 1px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Remove the default max width that the grid has set
+     */
+    fullWidth?: boolean;
+    /**
+     * Container hangs 16px into the gutter. Useful for
+     * typographic alignment with and without containers.
+     */
+    narrow?: boolean;
+}
+export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
+export interface GridComponent {
+    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export {};

package/lib/components/Grid/Row.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+export interface RowBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Row`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Row`
+     */
+    className?: string;
+    /**
+     * Specify a single row as condensed.Rows that are adjacent
+     * and are condensed will have 2px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Specify a single row as narrow. The container will hang
+     * 16px into the gutter.
+     */
+    narrow?: boolean;
+}
+export type RowProps<T extends React.ElementType> = PolymorphicProps<T, RowBaseProps>;
+export interface RowComponent {
+    <T extends React.ElementType>(props: RowProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: RowComponent;
+export default _default;

package/lib/components/Grid/Row.js

@@ -37,8 +37,10 @@ function Row(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx)); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }

package/lib/components/Grid/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+export { FlexGrid } from './FlexGrid';
+export { Grid } from './Grid';
+export { default as Row } from './Row';
+export { default as Column } from './Column';
+export { ColumnHang } from './ColumnHang';

package/lib/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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, { ReactNode } from 'react';
+export declare const translationIds: {
+    'increment.number': string;
+    'decrement.number': string;
+};
+type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether you want the steppers to be hidden
+     */
+    hideSteppers?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: ReactNode;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `NumberInput` is no longer needed and has
+     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * NumberInput changes. This handler is called with event and state info.
+     * `(event, { value, direction }) => void`
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify if the component should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+export { NumberInput };

package/lib/components/NumberInput/NumberInput.js

@@ -137,11 +137,12 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setValue(controlledValue);
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = null;
+  var ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -168,7 +169,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }
 
   var handleFocus = function handleFocus(evt) {
-    if (evt.target.type === 'button') {
+    if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
       setIsFocused(evt.type === 'focus' ? true : false);
@@ -176,10 +177,11 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   };
 
   var outerElementClasses = cx__default["default"]("".concat(prefix, "--form-item"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: outerElementClasses,
-    onFocus: isFluid ? handleFocus : null,
-    onBlur: isFluid ? handleFocus : null
+    onFocus: isFluid ? handleFocus : undefined,
+    onBlur: isFluid ? handleFocus : undefined
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -225,7 +227,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     step: step,
     type: "number",
     value: value
-  })), normalizedProps.icon ? /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+  })), Icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--number__controls")
@@ -248,7 +250,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default["default"].createElement(iconsReact.Subtract, {
@@ -274,7 +276,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
   }, _Add || (_Add = /*#__PURE__*/React__default["default"].createElement(iconsReact.Add, {

package/lib/components/TextArea/TextArea.js

@@ -114,6 +114,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
   useIsomorphicEffect["default"](function () {
     if (other.cols) {
       textareaRef.current.style.width = null;
+      textareaRef.current.style.resize = 'none';
     } else {
       textareaRef.current.style.width = "100%";
     }

package/lib/components/Toggle/Toggle.js

@@ -51,6 +51,7 @@ function Toggle(_ref) {
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+  var buttonElement = React.useRef(null);
 
   var _useControllableState = useControllableState.useControllableState({
     value: toggled,
@@ -79,37 +80,53 @@ function Toggle(_ref) {
   var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
   var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
-    id: id,
-    className: "".concat(prefix, "--toggle__button"),
-    role: "switch",
-    type: "button",
-    "aria-checked": checked,
-    "aria-labelledby": ariaLabelledby,
-    disabled: disabled,
-    onClick: handleClick
-  })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
-    htmlFor: ariaLabelledby ? null : id,
-    className: "".concat(prefix, "--toggle__label")
-  }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: labelTextClasses
-  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: appearanceClasses
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: switchClasses
-  }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: "".concat(prefix, "--toggle__check"),
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-  })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--toggle__text"),
-    "aria-hidden": "true"
-  }, sideLabel))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default["default"].createElement("div", {
+      className: wrapperClasses,
+      onClick: ariaLabelledby ? function (e) {
+        // the underlying <button> can only be activated by keyboard as it is visually hidden;
+        // therefore, if this event's target is the <button>, it had to be triggered by
+        // the keyboard event which already calls handleClick. if we wouldn't catch this, the
+        // onClick and onToggle functions would be called twice whenever the user activates the
+        // toggle by keyboard and props['aria-labelledby'] is passed.
+        if (buttonElement.current && e.target !== buttonElement.current) {
+          handleClick(e);
+          buttonElement.current.focus();
+        }
+      } : null
+    }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+      ref: buttonElement,
+      id: id,
+      className: "".concat(prefix, "--toggle__button"),
+      role: "switch",
+      type: "button",
+      "aria-checked": checked,
+      "aria-labelledby": ariaLabelledby,
+      disabled: disabled,
+      onClick: handleClick
+    })), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
+      htmlFor: ariaLabelledby ? null : id,
+      className: "".concat(prefix, "--toggle__label")
+    }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: labelTextClasses
+    }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: appearanceClasses
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: switchClasses
+    }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
+      className: "".concat(prefix, "--toggle__check"),
+      width: "6px",
+      height: "5px",
+      viewBox: "0 0 6 5"
+    }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+    })))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--toggle__text"),
+      "aria-hidden": "true"
+    }, sideLabel))))
+  );
 }
 Toggle.propTypes = {
   /**
@@ -133,7 +150,11 @@ Toggle.propTypes = {
   disabled: PropTypes__default["default"].bool,
 
   /**
-   * Specify whether the label should be hidden, or not
+   * If true, the side labels (props.labelA and props.labelB) will be replaced by
+   * props.labelText, so that the toggle doesn't render a top label. In order to fully
+   * hide any labels, you can use props['aria-labelledby'] to refer to another element
+   * that labels the toggle. props.labelText would no longer be required in that case
+   * and can therefore be omitted.
    */
   hideLabel: PropTypes__default["default"].bool,
 

package/lib/components/Toggletip/index.js

@@ -112,10 +112,34 @@ function Toggletip(_ref2) {
 
   function onKeyDown(event) {
     if (open && match.match(event, keys.Escape)) {
-      actions.close();
+      actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+
+      var button = ref.current.children[0];
+
+      if (button && button.type === 'button') {
+        button.focus();
+      }
     }
   }
 
+  function handleBlur(event) {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+
+
+  useEvent.useWindowEvent('blur', function () {
+    if (open) {
+      actions.close();
+    }
+  });
   useEvent.useWindowEvent('click', function (event) {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
@@ -132,6 +156,7 @@ function Toggletip(_ref2) {
     highContrast: true,
     open: open,
     onKeyDown: onKeyDown,
+    onBlur: handleBlur,
     ref: ref
   }, children));
 }

package/lib/index.js

@@ -18,6 +18,11 @@ var Dropdown = require('./components/Dropdown/Dropdown.js');
 var Dropdown_Skeleton = require('./components/Dropdown/Dropdown.Skeleton.js');
 var FluidForm = require('./components/FluidForm/FluidForm.js');
 var FormContext = require('./components/FluidForm/FormContext.js');
+var FlexGrid = require('./components/Grid/FlexGrid.js');
+var Grid = require('./components/Grid/Grid.js');
+var Row = require('./components/Grid/Row.js');
+var Column = require('./components/Grid/Column.js');
+var ColumnHang = require('./components/Grid/ColumnHang.js');
 var index$4 = require('./components/IdPrefix/index.js');
 var index$5 = require('./components/OverflowMenu/index.js');
 var index$6 = require('./components/Slider/index.js');
@@ -74,8 +79,6 @@ var FileUploaderDropContainer = require('./components/FileUploader/FileUploaderD
 var FileUploaderItem = require('./components/FileUploader/FileUploaderItem.js');
 var FormItem = require('./components/FormItem/FormItem.js');
 var FormLabel = require('./components/FormLabel/FormLabel.js');
-var Row = require('./components/Grid/Row.js');
-var Column = require('./components/Grid/Column.js');
 var InlineLoading = require('./components/InlineLoading/InlineLoading.js');
 var Loading = require('./components/Loading/Loading.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
@@ -154,9 +157,6 @@ var FileUploader = require('./components/FileUploader/FileUploader.js');
 var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
 var Form = require('./components/Form/Form.js');
 var FormGroup = require('./components/FormGroup/FormGroup.js');
-var FlexGrid = require('./components/Grid/FlexGrid.js');
-var Grid = require('./components/Grid/Grid.js');
-var ColumnHang = require('./components/Grid/ColumnHang.js');
 var Link = require('./components/Link/Link.js');
 var ListItem = require('./components/ListItem/ListItem.js');
 var Modal = require('./components/Modal/Modal.js');
@@ -232,6 +232,11 @@ exports.Dropdown = Dropdown["default"];
 exports.DropdownSkeleton = Dropdown_Skeleton["default"];
 exports.FluidForm = FluidForm["default"];
 exports.FormContext = FormContext.FormContext;
+exports.FlexGrid = FlexGrid.FlexGrid;
+exports.Grid = Grid.Grid;
+exports.Row = Row["default"];
+exports.Column = Column["default"];
+exports.ColumnHang = ColumnHang.ColumnHang;
 exports.IdPrefix = index$4.IdPrefix;
 exports.OverflowMenu = index$5["default"];
 exports.Slider = index$6["default"];
@@ -301,8 +306,6 @@ exports.FileUploaderDropContainer = FileUploaderDropContainer["default"];
 exports.FileUploaderItem = FileUploaderItem["default"];
 exports.FormItem = FormItem["default"];
 exports.FormLabel = FormLabel["default"];
-exports.Row = Row["default"];
-exports.Column = Column["default"];
 exports.InlineLoading = InlineLoading["default"];
 exports.Loading = Loading["default"];
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
@@ -382,9 +385,6 @@ exports.FileUploader = FileUploader["default"];
 exports.FilterableMultiSelect = FilterableMultiSelect["default"];
 exports.Form = Form["default"];
 exports.FormGroup = FormGroup["default"];
-exports.FlexGrid = FlexGrid.FlexGrid;
-exports.Grid = Grid.Grid;
-exports.ColumnHang = ColumnHang.ColumnHang;
 exports.Link = Link["default"];
 exports.ListItem = ListItem["default"];
 exports.Modal = Modal["default"];

package/lib/internal/useNormalizedInputProps.js

@@ -20,12 +20,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /**
  * @typedef {object} InputProps
  * @property {string} id - The input's id
- * @property {boolean} readOnly - Whether the input should be readonly
+ * @property {boolean | undefined} readOnly - Whether the input should be readonly
  * @property {boolean} disabled - Whether the input should be disabled
  * @property {boolean} invalid - Whether the input should be marked as invalid
- * @property {string} invalidText - The validation message displayed in case the input is considered invalid
+ * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
  * @property {boolean} warn - Whether the input should be in warning state
- * @property {string} warnText - The validation message displayed in case the input is in warning state
+ * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
  */
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.12.0",
     "@carbon/icons-react": "^11.16.0",
     "@carbon/layout": "^11.11.0",
-    "@carbon/styles": "^1.22.0",
+    "@carbon/styles": "^1.23.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -89,8 +89,6 @@
     "@storybook/manager-webpack5": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -135,5 +133,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "f4c904ce641392046ad21e6c77394a53f6cf0f30"
+  "gitHead": "6234f2b1304e340345fff3935342f80a1e36e08e"
 }