carbon-react 120.5.0 → 120.6.0

package/esm/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -7,5 +7,5 @@ declare const HiddenCurrentColorList: import("styled-components").StyledComponen
     displayName: string;
 }, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => import("react").JSX.Element, any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../dialog/dialog.component").DialogProps & import("react").RefAttributes<import("../dialog/dialog.component").DialogHandle>>, any, {}, never>;
 export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

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

@@ -59,5 +59,9 @@ export interface DialogProps extends ModalProps, TagProps {
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => React.JSX.Element;
+export declare type DialogHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
 export default Dialog;

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useEffect, useLayoutEffect, useCallback } from "react";
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, forwardRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -14,7 +14,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-export const Dialog = ({
+const Dialog = /*#__PURE__*/forwardRef(({
   className,
   children,
   open,
@@ -35,9 +35,9 @@ export const Dialog = ({
   contentPadding = {},
   focusableContainers,
   ...rest
-}) => {
+}, ref) => {
   const locale = useLocale();
-  const dialogRef = useRef(null);
+  const containerRef = useRef(null);
   const innerContentRef = useRef(null);
   const titleRef = useRef(null);
   const listenersAdded = useRef(false);
@@ -48,16 +48,21 @@ export const Dialog = ({
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const isTopModal = useModalAria(dialogRef);
+  const isTopModal = useModalAria(containerRef);
+  useImperativeHandle(ref, () => ({
+    focus() {
+      containerRef.current?.focus();
+    }
+  }), []);
   const centerDialog = useCallback(() => {
     /* istanbul ignore if */
-    if (!dialogRef.current) {
+    if (!containerRef.current) {
       return;
     }
     const {
       width: dialogWidth,
       height: dialogHeight
-    } = dialogRef.current.getBoundingClientRect();
+    } = containerRef.current.getBoundingClientRect();
     let midPointY = window.innerHeight / 2;
     let midPointX = window.innerWidth / 2;
     midPointY -= dialogHeight / 2;
@@ -68,8 +73,8 @@ export const Dialog = ({
     if (midPointX < 0) {
       midPointX = 0;
     }
-    dialogRef.current.style.top = `${midPointY}px`;
-    dialogRef.current.style.left = `${midPointX}px`;
+    containerRef.current.style.top = `${midPointY}px`;
+    containerRef.current.style.left = `${midPointX}px`;
   }, []);
   useResizeObserver(innerContentRef, centerDialog, !open);
   const addListeners = useCallback(() => {
@@ -155,22 +160,81 @@ export const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     focusableSelectors: focusableSelectors,
-    wrapperRef: dialogRef,
+    wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     "aria-modal": isTopModal ? true : undefined,
-    ref: dialogRef,
+    ref: containerRef,
     topMargin: TOP_MARGIN
   }, dialogProps, {
     "data-component": "dialog",
     "data-element": "dialog",
     "data-role": rest["data-role"],
-    role: role
+    role: role,
+    tabIndex: -1
   }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
+});
+Dialog.propTypes = {
+  "aria-describedby": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "ariaRole": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "contentPadding": PropTypes.shape({
+    "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  }),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
+  "disableClose": PropTypes.bool,
+  "disableEscKey": PropTypes.bool,
+  "disableFocusTrap": PropTypes.bool,
+  "enableBackgroundUI": PropTypes.bool,
+  "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "focusableSelectors": PropTypes.string,
+  "focusFirstElement": PropTypes.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })]),
+  "height": PropTypes.string,
+  "help": PropTypes.string,
+  "onCancel": PropTypes.func,
+  "open": PropTypes.bool.isRequired,
+  "role": PropTypes.string,
+  "showCloseIcon": PropTypes.bool,
+  "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": PropTypes.string,
+  "timeout": PropTypes.number,
+  "title": PropTypes.node
 };
+export { Dialog };
 export default Dialog;

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

@@ -1,3 +1,4 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogHandle } from "./dialog.component";
 export type { DialogSizes } from "./dialog.config";

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -7,5 +7,5 @@ declare const HiddenCurrentColorList: import("styled-components").StyledComponen
     displayName: string;
 }, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => import("react").JSX.Element, any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../dialog/dialog.component").DialogProps & import("react").RefAttributes<import("../dialog/dialog.component").DialogHandle>>, any, {}, never>;
 export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

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

@@ -59,5 +59,9 @@ export interface DialogProps extends ModalProps, TagProps {
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
     focusableContainers?: CustomRefObject<HTMLElement>[];
 }
-export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => React.JSX.Element;
+export declare type DialogHandle = {
+    /** Programmatically focus on root container of Dialog. */
+    focus: () => void;
+} | null;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<DialogHandle>>;
 export default Dialog;

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

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-const Dialog = ({
+const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   className,
   children,
   open,
@@ -44,9 +44,9 @@ const Dialog = ({
   contentPadding = {},
   focusableContainers,
   ...rest
-}) => {
+}, ref) => {
   const locale = (0, _useLocale.default)();
-  const dialogRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
   const innerContentRef = (0, _react.useRef)(null);
   const titleRef = (0, _react.useRef)(null);
   const listenersAdded = (0, _react.useRef)(false);
@@ -57,16 +57,21 @@ const Dialog = ({
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const isTopModal = (0, _useModalAria.default)(dialogRef);
+  const isTopModal = (0, _useModalAria.default)(containerRef);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus() {
+      containerRef.current?.focus();
+    }
+  }), []);
   const centerDialog = (0, _react.useCallback)(() => {
     /* istanbul ignore if */
-    if (!dialogRef.current) {
+    if (!containerRef.current) {
       return;
     }
     const {
       width: dialogWidth,
       height: dialogHeight
-    } = dialogRef.current.getBoundingClientRect();
+    } = containerRef.current.getBoundingClientRect();
     let midPointY = window.innerHeight / 2;
     let midPointX = window.innerWidth / 2;
     midPointY -= dialogHeight / 2;
@@ -77,8 +82,8 @@ const Dialog = ({
     if (midPointX < 0) {
       midPointX = 0;
     }
-    dialogRef.current.style.top = `${midPointY}px`;
-    dialogRef.current.style.left = `${midPointX}px`;
+    containerRef.current.style.top = `${midPointY}px`;
+    containerRef.current.style.left = `${midPointX}px`;
   }, []);
   (0, _useResizeObserver.default)(innerContentRef, centerDialog, !open);
   const addListeners = (0, _react.useCallback)(() => {
@@ -164,24 +169,82 @@ const Dialog = ({
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
     focusableSelectors: focusableSelectors,
-    wrapperRef: dialogRef,
+    wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
     "aria-modal": isTopModal ? true : undefined,
-    ref: dialogRef,
+    ref: containerRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {
     "data-component": "dialog",
     "data-element": "dialog",
     "data-role": rest["data-role"],
-    role: role
+    role: role,
+    tabIndex: -1
   }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     hasStickyFooter: hasStickyFooter
   }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
-};
+});
 exports.Dialog = Dialog;
+Dialog.propTypes = {
+  "aria-describedby": _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "aria-labelledby": _propTypes.default.string,
+  "ariaRole": _propTypes.default.string,
+  "bespokeFocusTrap": _propTypes.default.func,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "contentPadding": _propTypes.default.shape({
+    "p": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  }),
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disableAutoFocus": _propTypes.default.bool,
+  "disableClose": _propTypes.default.bool,
+  "disableEscKey": _propTypes.default.bool,
+  "disableFocusTrap": _propTypes.default.bool,
+  "enableBackgroundUI": _propTypes.default.bool,
+  "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })),
+  "focusableSelectors": _propTypes.default.string,
+  "focusFirstElement": _propTypes.default.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, _propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  })]),
+  "height": _propTypes.default.string,
+  "help": _propTypes.default.string,
+  "onCancel": _propTypes.default.func,
+  "open": _propTypes.default.bool.isRequired,
+  "role": _propTypes.default.string,
+  "showCloseIcon": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": _propTypes.default.string,
+  "timeout": _propTypes.default.number,
+  "title": _propTypes.default.node
+};
 var _default = Dialog;
 exports.default = _default;

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

@@ -1,3 +1,4 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogHandle } from "./dialog.component";
 export type { DialogSizes } from "./dialog.config";

package/package.json

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