carbon-react 111.6.0 → 111.7.0

package/esm/__internal__/focus-trap/focus-trap.component.d.ts

@@ -9,11 +9,13 @@ export interface FocusTrapProps {
     focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
     /** a ref to the container wrapping the focusable elements */
     wrapperRef?: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
     additionalWrapperRefs?: CustomRefObject<HTMLElement>[];
 }
-declare const FocusTrap: ({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => JSX.Element;
+declare const FocusTrap: ({ children, autoFocus, focusableSelectors, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => JSX.Element;
 export default FocusTrap;

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -7,6 +7,7 @@ import usePrevious from "../../hooks/__internal__/usePrevious"; // TODO investig
 const FocusTrap = ({
   children,
   autoFocus = true,
+  focusableSelectors,
   focusFirstElement,
   bespokeTrap,
   wrapperRef,
@@ -35,7 +36,7 @@ const FocusTrap = ({
     const elements = [];
     allRefs.forEach(ref => {
       if (ref) {
-        elements.push(...Array.from(ref.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1));
+        elements.push(...Array.from(ref.querySelectorAll(focusableSelectors || defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1));
       }
     });
 
@@ -44,7 +45,7 @@ const FocusTrap = ({
       setFirstElement(elements[0]);
       setLastElement(elements[elements.length - 1]);
     }
-  }, [hasNewInputs, allRefs]);
+  }, [hasNewInputs, allRefs, focusableSelectors]);
   useEffect(() => {
     const observer = new MutationObserver(updateFocusableElements);
     trapWrappers.forEach(wrapper => {
@@ -180,6 +181,7 @@ FocusTrap.propTypes = {
   "autoFocus": PropTypes.bool,
   "bespokeTrap": PropTypes.func,
   "children": PropTypes.node,
+  "focusableSelectors": PropTypes.string,
   "focusFirstElement": PropTypes.oneOfType([function (props, propName) {
     if (props[propName] == null) {
       return new Error("Prop '" + propName + "' is required but wasn't specified");

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

@@ -44,6 +44,7 @@ Alert.propTypes = {
       }
     }
   })),
+  "focusableSelectors": PropTypes.string,
   "focusFirstElement": PropTypes.shape({
     "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
       if (props[propName] == null) {

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

@@ -38,6 +38,8 @@ export interface DialogProps extends ModalProps, TagProps {
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
     focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */
     height?: string;
     /** Adds Help tooltip to Header */
@@ -59,5 +61,5 @@ 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, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => JSX.Element;
+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) => JSX.Element;
 export default Dialog;

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

@@ -27,6 +27,7 @@ const Dialog = ({
   subtitle,
   disableAutoFocus = false,
   focusFirstElement,
+  focusableSelectors,
   onCancel,
   showCloseIcon = true,
   bespokeFocusTrap,
@@ -168,6 +169,7 @@ const Dialog = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
+    focusableSelectors: focusableSelectors,
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
@@ -217,6 +219,7 @@ Dialog.propTypes = {
       }
     }
   })),
+  "focusableSelectors": PropTypes.string,
   "focusFirstElement": PropTypes.shape({
     "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
       if (props[propName] == null) {

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

@@ -35,6 +35,7 @@ const DialogFullScreen = ({
   help,
   role = "dialog",
   focusableContainers,
+  focusableSelectors,
   ...rest
 }) => {
   const locale = useLocale();
@@ -94,7 +95,8 @@ const DialogFullScreen = ({
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef,
     isOpen: open,
-    additionalWrapperRefs: focusableContainers
+    additionalWrapperRefs: focusableContainers,
+    focusableSelectors: focusableSelectors
   }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
     "aria-modal": role === "dialog" && topModal !== null && topModal !== void 0 && topModal.contains(dialogRef.current) ? true : undefined
   }, ariaProps, {
@@ -184,6 +186,9 @@ DialogFullScreen.propTypes = {
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
   focusableContainers: PropTypes.arrayOf(PropTypes.shape({
     current: PropTypes.any
-  }))
+  })),
+
+  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+  focusableSelectors: PropTypes.string
 };
 export default DialogFullScreen;

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

@@ -43,6 +43,8 @@ export interface DialogFullScreenProps extends ModalProps {
   role?: string;
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
   focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+  focusableSelectors?: string;
 }
 
 declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;

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

@@ -42,6 +42,8 @@ export interface SidebarProps extends PaddingProps, TagProps {
     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?: CustomRefObject<HTMLElement>[];
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

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

@@ -30,6 +30,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   onCancel,
   role = "dialog",
   focusableContainers,
+  focusableSelectors,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -99,7 +100,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: sidebarRef,
     isOpen: open,
-    additionalWrapperRefs: focusableContainers
+    additionalWrapperRefs: focusableContainers,
+    focusableSelectors: focusableSelectors
   }, sidebar));
 });
 Sidebar.propTypes = {
@@ -121,6 +123,7 @@ Sidebar.propTypes = {
       }
     }
   })),
+  "focusableSelectors": PropTypes.string,
   "header": PropTypes.node,
   "onCancel": PropTypes.func,
   "open": PropTypes.bool.isRequired,

package/lib/__internal__/focus-trap/focus-trap.component.d.ts

@@ -9,11 +9,13 @@ export interface FocusTrapProps {
     focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
     /** a ref to the container wrapping the focusable elements */
     wrapperRef?: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     /** an optional array of refs to containers whose content should also be reachable from the FocusTrap */
     additionalWrapperRefs?: CustomRefObject<HTMLElement>[];
 }
-declare const FocusTrap: ({ children, autoFocus, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => JSX.Element;
+declare const FocusTrap: ({ children, autoFocus, focusableSelectors, focusFirstElement, bespokeTrap, wrapperRef, isOpen, additionalWrapperRefs, }: FocusTrapProps) => JSX.Element;
 export default FocusTrap;

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -24,6 +24,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const FocusTrap = ({
   children,
   autoFocus = true,
+  focusableSelectors,
   focusFirstElement,
   bespokeTrap,
   wrapperRef,
@@ -52,7 +53,7 @@ const FocusTrap = ({
     const elements = [];
     allRefs.forEach(ref => {
       if (ref) {
-        elements.push(...Array.from(ref.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1));
+        elements.push(...Array.from(ref.querySelectorAll(focusableSelectors || _focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1));
       }
     });
 
@@ -61,7 +62,7 @@ const FocusTrap = ({
       setFirstElement(elements[0]);
       setLastElement(elements[elements.length - 1]);
     }
-  }, [hasNewInputs, allRefs]);
+  }, [hasNewInputs, allRefs, focusableSelectors]);
   (0, _react.useEffect)(() => {
     const observer = new MutationObserver(updateFocusableElements);
     trapWrappers.forEach(wrapper => {
@@ -198,6 +199,7 @@ FocusTrap.propTypes = {
   "autoFocus": _propTypes.default.bool,
   "bespokeTrap": _propTypes.default.func,
   "children": _propTypes.default.node,
+  "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");

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

@@ -56,6 +56,7 @@ Alert.propTypes = {
       }
     }
   })),
+  "focusableSelectors": _propTypes.default.string,
   "focusFirstElement": _propTypes.default.shape({
     "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
       if (props[propName] == null) {

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

@@ -38,6 +38,8 @@ export interface DialogProps extends ModalProps, TagProps {
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
     focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */
     height?: string;
     /** Adds Help tooltip to Header */
@@ -59,5 +61,5 @@ 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, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => JSX.Element;
+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) => JSX.Element;
 export default Dialog;

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

@@ -54,6 +54,7 @@ const Dialog = ({
   subtitle,
   disableAutoFocus = false,
   focusFirstElement,
+  focusableSelectors,
   onCancel,
   showCloseIcon = true,
   bespokeFocusTrap,
@@ -195,6 +196,7 @@ const Dialog = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     bespokeTrap: bespokeFocusTrap,
+    focusableSelectors: focusableSelectors,
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
@@ -245,6 +247,7 @@ Dialog.propTypes = {
       }
     }
   })),
+  "focusableSelectors": _propTypes.default.string,
   "focusFirstElement": _propTypes.default.shape({
     "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
       if (props[propName] == null) {

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

@@ -61,6 +61,7 @@ const DialogFullScreen = ({
   help,
   role = "dialog",
   focusableContainers,
+  focusableSelectors,
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -120,7 +121,8 @@ const DialogFullScreen = ({
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef,
     isOpen: open,
-    additionalWrapperRefs: focusableContainers
+    additionalWrapperRefs: focusableContainers,
+    focusableSelectors: focusableSelectors
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
     "aria-modal": role === "dialog" && topModal !== null && topModal !== void 0 && topModal.contains(dialogRef.current) ? true : undefined
   }, ariaProps, {
@@ -210,7 +212,10 @@ DialogFullScreen.propTypes = {
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
   focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
     current: _propTypes.default.any
-  }))
+  })),
+
+  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+  focusableSelectors: _propTypes.default.string
 };
 var _default = DialogFullScreen;
 exports.default = _default;

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

@@ -43,6 +43,8 @@ export interface DialogFullScreenProps extends ModalProps {
   role?: string;
   /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
   focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+  focusableSelectors?: string;
 }
 
 declare function DialogFullScreen(props: DialogFullScreenProps): JSX.Element;

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

@@ -42,6 +42,8 @@ export interface SidebarProps extends PaddingProps, TagProps {
     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?: CustomRefObject<HTMLElement>[];
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
 export default Sidebar;

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

@@ -59,6 +59,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   onCancel,
   role = "dialog",
   focusableContainers,
+  focusableSelectors,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -130,7 +131,8 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: sidebarRef,
     isOpen: open,
-    additionalWrapperRefs: focusableContainers
+    additionalWrapperRefs: focusableContainers,
+    focusableSelectors: focusableSelectors
   }, sidebar));
 });
 
@@ -154,6 +156,7 @@ Sidebar.propTypes = {
       }
     }
   })),
+  "focusableSelectors": _propTypes.default.string,
   "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.6.0",
+  "version": "111.7.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",