carbon-react 111.5.3 → 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/image/image.component.js

@@ -729,6 +729,7 @@ Image.propTypes = {
     "trimStart": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
+  "hidden": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/image/image.style.d.ts

@@ -1,16 +1,19 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
 export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
-    /** alt property to display when an img fails to load */
+    /** HTML alt property to display when an img fails to load */
     alt?: string;
-    /** any valid file path, passing this will render the component as an img element */
+    /** Any valid file path, passing this will render the component as an img element */
     src?: string;
+    /** HTML hidden property to indicate whether to remain hidden visually and from screen readers */
+    hidden?: boolean;
     /** Children elements, will only render if component is a div element */
     children?: React.ReactNode;
 }
 declare const StyledImage: import("styled-components").StyledComponent<"div", any, {
     children: import("react").ReactNode;
     src: string | undefined;
+    hidden: boolean;
     as?: string | undefined;
-} & StyledImageProps, "children" | "as" | "src">;
+} & StyledImageProps, "hidden" | "children" | "as" | "src">;
 export { StyledImage };

package/esm/components/image/image.style.js

@@ -3,12 +3,14 @@ import { margin, layout, background } from "styled-system";
 import { baseTheme } from "../../style/themes";
 const StyledImage = styled.div.attrs(({
   src,
-  children
+  children,
+  hidden = false
 }) => ({ ...(src && {
     as: "img"
   }),
   children: src ? undefined : children,
-  src
+  src,
+  hidden
 }))`
   ${margin}
   ${layout}

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/esm/global.d.ts

@@ -1,2 +1,3 @@
 declare module "@styled-system/prop-types";
 declare module "*.png";
+declare module "*.svg";

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/image/image.component.js

@@ -742,6 +742,7 @@ Image.propTypes = {
     "trimStart": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
+  "hidden": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/image/image.style.d.ts

@@ -1,16 +1,19 @@
 /// <reference types="react" />
 import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
 export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
-    /** alt property to display when an img fails to load */
+    /** HTML alt property to display when an img fails to load */
     alt?: string;
-    /** any valid file path, passing this will render the component as an img element */
+    /** Any valid file path, passing this will render the component as an img element */
     src?: string;
+    /** HTML hidden property to indicate whether to remain hidden visually and from screen readers */
+    hidden?: boolean;
     /** Children elements, will only render if component is a div element */
     children?: React.ReactNode;
 }
 declare const StyledImage: import("styled-components").StyledComponent<"div", any, {
     children: import("react").ReactNode;
     src: string | undefined;
+    hidden: boolean;
     as?: string | undefined;
-} & StyledImageProps, "children" | "as" | "src">;
+} & StyledImageProps, "hidden" | "children" | "as" | "src">;
 export { StyledImage };

package/lib/components/image/image.style.js

@@ -17,12 +17,14 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledImage = _styledComponents.default.div.attrs(({
   src,
-  children
+  children,
+  hidden = false
 }) => ({ ...(src && {
     as: "img"
   }),
   children: src ? undefined : children,
-  src
+  src,
+  hidden
 }))`
   ${_styledSystem.margin}
   ${_styledSystem.layout}

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/lib/global.d.ts

@@ -1,2 +1,3 @@
 declare module "@styled-system/prop-types";
 declare module "*.png";
+declare module "*.svg";

package/package.json

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