carbon-react 111.5.0 → 111.5.1

package/esm/__internal__/utils/helpers/tags/tags.d.ts

@@ -1,16 +1,16 @@
-interface DataProps {
+interface RestProps {
+    [restKeys: string]: any;
+}
+export interface TagProps {
+    /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    [restKeys: string]: any;
-}
-export interface TagProps extends DataProps {
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
 }
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
 export default tagComponent;

package/esm/components/alert/alert.component.js

@@ -36,13 +36,13 @@ Alert.propTypes = {
   "disableFocusTrap": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusFirstElement": PropTypes.shape({
     "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {

package/esm/components/dialog/dialog.component.d.ts

@@ -4,6 +4,9 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { DialogSizes } from "./dialog.config";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 declare type PaddingValues = typeof PADDING_VALUES[number];
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
@@ -54,7 +57,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
 }
 export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => JSX.Element;
 export default Dialog;

package/esm/components/dialog/dialog.component.js

@@ -205,13 +205,13 @@ Dialog.propTypes = {
   "disableFocusTrap": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusFirstElement": PropTypes.shape({
     "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {

package/esm/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -42,7 +42,7 @@ export interface DialogFullScreenProps extends ModalProps {
   /** The ARIA role to be applied to the DialogFullscreen container */
   role?: string;
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-  focusableContainers?: React.MutableRefObject<HTMLElement>[];
+  focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
 }
 
 declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;

package/esm/components/sidebar/sidebar.component.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
 export interface SidebarContextProps {
     isInSidebar?: boolean;
 }
@@ -10,13 +13,13 @@ export interface SidebarProps extends PaddingProps, TagProps {
     "aria-describedby"?: string;
     /**
      * Prop to specify the aria-label of the component.
-     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     * To be used only when the header prop is not defined, and the component is not labelled by any internal element.
      */
     "aria-label"?: string;
     /**
      * Prop to specify the aria-labeledby property of the component
-     * To be used when the title prop is a custom React Node,
-     * or the component is labelled by an internal element other than the title.
+     * To be used when the header prop is a custom React Node,
+     * or the component is labelled by an internal element other than the header.
      */
     "aria-labelledby"?: string;
     /** Modal content */
@@ -38,7 +41,7 @@ export interface SidebarProps extends PaddingProps, TagProps {
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-    focusableContainers?: React.MutableRefObject<HTMLElement>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Sidebar: React.ForwardRefExoticComponent<Pick<SidebarProps, keyof SidebarProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/esm/components/sidebar/sidebar.component.js

@@ -32,7 +32,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const locale = useLocale();
   const {
-    current: titleId
+    current: headerId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
   const sidebarRef = useRef(null);
@@ -63,7 +63,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
-    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
+    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
     ref: setRefs,
     position: position,
     size: size,
@@ -71,7 +71,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     onCancel: onCancel,
     role: role
   }, header && /*#__PURE__*/React.createElement(SidebarHeader, {
-    id: titleId
+    id: headerId
   }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
     pt: "var(--spacing300)",
@@ -110,7 +110,7 @@ Sidebar.propTypes = {
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
     "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }

package/esm/components/textbox/textbox.component.js

@@ -125,9 +125,7 @@ const Textbox = ({
     "data-role": dataRole,
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
-    validationRedesignOptIn: validationRedesignOptIn,
-    size: size,
-    readOnly: readOnly
+    validationRedesignOptIn: validationRedesignOptIn
   }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
     error: error,
     warning: warning

package/lib/__internal__/utils/helpers/tags/tags.d.ts

@@ -1,16 +1,16 @@
-interface DataProps {
+interface RestProps {
+    [restKeys: string]: any;
+}
+export interface TagProps {
+    /** @private @ignore Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    [restKeys: string]: any;
-}
-export interface TagProps extends DataProps {
-    /** Identifier used for testing purposes, applied to the root element of the component. */
-    "data-component"?: string;
 }
 /**
  * Builds props object containing top level data tags
  */
-declare function tagComponent(componentName: string | undefined, props: DataProps): TagProps;
+declare function tagComponent(componentName: string | undefined, props: TagProps & RestProps): TagProps;
 export default tagComponent;

package/lib/components/alert/alert.component.js

@@ -48,13 +48,13 @@ Alert.propTypes = {
   "disableFocusTrap": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,
   "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusFirstElement": _propTypes.default.shape({
     "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {

package/lib/components/dialog/dialog.component.d.ts

@@ -4,6 +4,9 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { DialogSizes } from "./dialog.config";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 declare type PaddingValues = typeof PADDING_VALUES[number];
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
@@ -54,7 +57,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** Padding to be set on the Dialog content */
     contentPadding?: ContentPaddingInterface;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
 }
 export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => JSX.Element;
 export default Dialog;

package/lib/components/dialog/dialog.component.js

@@ -232,13 +232,13 @@ Dialog.propTypes = {
   "disableFocusTrap": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,
   "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusFirstElement": _propTypes.default.shape({
     "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {

package/lib/components/dialog-full-screen/dialog-full-screen.d.ts

@@ -42,7 +42,7 @@ export interface DialogFullScreenProps extends ModalProps {
   /** The ARIA role to be applied to the DialogFullscreen container */
   role?: string;
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-  focusableContainers?: React.MutableRefObject<HTMLElement>[];
+  focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
 }
 
 declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;

package/lib/components/sidebar/sidebar.component.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
 export interface SidebarContextProps {
     isInSidebar?: boolean;
 }
@@ -10,13 +13,13 @@ export interface SidebarProps extends PaddingProps, TagProps {
     "aria-describedby"?: string;
     /**
      * Prop to specify the aria-label of the component.
-     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     * To be used only when the header prop is not defined, and the component is not labelled by any internal element.
      */
     "aria-label"?: string;
     /**
      * Prop to specify the aria-labeledby property of the component
-     * To be used when the title prop is a custom React Node,
-     * or the component is labelled by an internal element other than the title.
+     * To be used when the header prop is a custom React Node,
+     * or the component is labelled by an internal element other than the header.
      */
     "aria-labelledby"?: string;
     /** Modal content */
@@ -38,7 +41,7 @@ export interface SidebarProps extends PaddingProps, TagProps {
     /** Sets the size of the sidebar when open. */
     size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-    focusableContainers?: React.MutableRefObject<HTMLElement>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Sidebar: React.ForwardRefExoticComponent<Pick<SidebarProps, keyof SidebarProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

package/lib/components/sidebar/sidebar.component.js

@@ -61,7 +61,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const locale = (0, _useLocale.default)();
   const {
-    current: titleId
+    current: headerId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
   const sidebarRef = (0, _react.useRef)(null);
@@ -93,7 +93,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     "aria-modal": !enableBackgroundUI,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
-    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? titleId : ariaLabelledBy,
+    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
     ref: setRefs,
     position: position,
     size: size,
@@ -101,7 +101,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     onCancel: onCancel,
     role: role
   }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, {
-    id: titleId
+    id: headerId
   }, header), closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",
     pt: "var(--spacing300)",
@@ -143,7 +143,7 @@ Sidebar.propTypes = {
   "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
     "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }

package/lib/components/textbox/textbox.component.js

@@ -153,9 +153,7 @@ const Textbox = ({
     "data-role": dataRole,
     "data-element": dataElement,
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
-    validationRedesignOptIn: validationRedesignOptIn,
-    size: size,
-    readOnly: readOnly
+    validationRedesignOptIn: validationRedesignOptIn
   }, (0, _utils.filterStyledSystemMarginProps)(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.5.0",
+  "version": "111.5.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",