carbon-react 111.12.6 → 111.12.7

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -21,6 +21,7 @@ const DialogFullScreen = ({
   "aria-labelledby": ariaLabelledBy,
   disableAutoFocus,
   focusFirstElement,
+  bespokeFocusTrap,
   open,
   children,
   title,
@@ -93,6 +94,7 @@ const DialogFullScreen = ({
   }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
+    bespokeTrap: bespokeFocusTrap,
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
@@ -148,6 +150,13 @@ DialogFullScreen.propTypes = {
   /** Disables auto focus functionality on child elements */
   disableAutoFocus: PropTypes.bool,
 
+  /**
+   * Function to replace focus trap
+   * @ignore
+   * @private
+   */
+  bespokeFocusTrap: PropTypes.func,
+
   /** Determines if the Esc Key closes the Dialog */
   disableEscKey: PropTypes.bool,
 

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

@@ -28,6 +28,15 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps {
     disableEscKey?: boolean;
     /** Set this prop to false to hide the translucent background when the dialog is open. */
     enableBackgroundUI?: boolean;
+    /** Optional reference to an element meant to be focused on open */
+    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    disableAutoFocus?: boolean;
+    /**
+     * Function to replace focus trap
+     * @ignore
+     * @private
+     */
+    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Node that will be used as sidebar header. */
     header?: React.ReactNode;
     /** A custom close event handler */

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

@@ -21,6 +21,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
+  bespokeFocusTrap,
+  disableAutoFocus = false,
   disableEscKey = false,
   enableBackgroundUI = false,
   header,
@@ -29,6 +31,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   children,
   onCancel,
   role = "dialog",
+  focusFirstElement,
   focusableContainers,
   focusableSelectors,
   width,
@@ -104,17 +107,22 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     wrapperRef: sidebarRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
-    focusableSelectors: focusableSelectors
+    focusableSelectors: focusableSelectors,
+    focusFirstElement: focusFirstElement,
+    autoFocus: !disableAutoFocus,
+    bespokeTrap: bespokeFocusTrap
   }, sidebar));
 });
 Sidebar.propTypes = {
   "aria-describedby": PropTypes.string,
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
   "children": PropTypes.node,
   "data-component": PropTypes.string,
   "data-element": PropTypes.string,
   "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
   "disableEscKey": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
@@ -127,6 +135,15 @@ Sidebar.propTypes = {
     }
   })),
   "focusableSelectors": PropTypes.string,
+  "focusFirstElement": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), 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");
+      }
+    }]).isRequired
+  }),
   "header": PropTypes.node,
   "onCancel": PropTypes.func,
   "open": PropTypes.bool.isRequired,

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -47,6 +47,7 @@ const DialogFullScreen = ({
   "aria-labelledby": ariaLabelledBy,
   disableAutoFocus,
   focusFirstElement,
+  bespokeFocusTrap,
   open,
   children,
   title,
@@ -119,6 +120,7 @@ const DialogFullScreen = ({
   }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
+    bespokeTrap: bespokeFocusTrap,
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
@@ -174,6 +176,13 @@ DialogFullScreen.propTypes = {
   /** Disables auto focus functionality on child elements */
   disableAutoFocus: _propTypes.default.bool,
 
+  /**
+   * Function to replace focus trap
+   * @ignore
+   * @private
+   */
+  bespokeFocusTrap: _propTypes.default.func,
+
   /** Determines if the Esc Key closes the Dialog */
   disableEscKey: _propTypes.default.bool,
 

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

@@ -28,6 +28,15 @@ export interface SidebarProps extends PaddingProps, TagProps, WidthProps {
     disableEscKey?: boolean;
     /** Set this prop to false to hide the translucent background when the dialog is open. */
     enableBackgroundUI?: boolean;
+    /** Optional reference to an element meant to be focused on open */
+    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    disableAutoFocus?: boolean;
+    /**
+     * Function to replace focus trap
+     * @ignore
+     * @private
+     */
+    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Node that will be used as sidebar header. */
     header?: React.ReactNode;
     /** A custom close event handler */

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

@@ -50,6 +50,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   open,
+  bespokeFocusTrap,
+  disableAutoFocus = false,
   disableEscKey = false,
   enableBackgroundUI = false,
   header,
@@ -58,6 +60,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   children,
   onCancel,
   role = "dialog",
+  focusFirstElement,
   focusableContainers,
   focusableSelectors,
   width,
@@ -135,7 +138,10 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     wrapperRef: sidebarRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
-    focusableSelectors: focusableSelectors
+    focusableSelectors: focusableSelectors,
+    focusFirstElement: focusFirstElement,
+    autoFocus: !disableAutoFocus,
+    bespokeTrap: bespokeFocusTrap
   }, sidebar));
 });
 
@@ -144,10 +150,12 @@ Sidebar.propTypes = {
   "aria-describedby": _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,
+  "bespokeFocusTrap": _propTypes.default.func,
   "children": _propTypes.default.node,
   "data-component": _propTypes.default.string,
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
+  "disableAutoFocus": _propTypes.default.bool,
   "disableEscKey": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,
   "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -160,6 +168,15 @@ Sidebar.propTypes = {
     }
   })),
   "focusableSelectors": _propTypes.default.string,
+  "focusFirstElement": _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), 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");
+      }
+    }]).isRequired
+  }),
   "header": _propTypes.default.node,
   "onCancel": _propTypes.default.func,
   "open": _propTypes.default.bool.isRequired,

package/package.json

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