carbon-react 128.1.2 → 128.3.0

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

@@ -1,48 +1,53 @@
-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, { useContext, useRef } from "react";
+import React, { useCallback, useContext, useRef } from "react";
 import PropTypes from "prop-types";
-import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
+import { CSSTransition } from "react-transition-group";
+import { StyledMenuFullscreen, StyledMenuModal, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
 import { StyledMenuWrapper } from "../menu.style";
 import MenuContext from "../menu.context";
-import FocusTrap from "../../../__internal__/focus-trap";
 import Events from "../../../__internal__/utils/helpers/events";
 import Box from "../../box";
 import IconButton from "../../icon-button";
 import Icon from "../../icon";
 import Portal from "../../portal";
+import FocusTrap from "../../../__internal__/focus-trap";
 import MenuDivider from "../menu-divider/menu-divider.component";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
+import useLocale from "../../../hooks/__internal__/useLocale";
+import useModalAria from "../../../hooks/__internal__/useModalAria";
+import useModalManager from "../../../hooks/__internal__/useModalManager";
 export const MenuFullscreen = ({
+  "aria-label": ariaLabel = "Fullscreen menu",
+  "data-element": dataElement,
+  "data-role": dataRole,
   children,
-  isOpen,
-  startPosition = "left",
+  isOpen = false,
   onClose,
-  ...rest
+  startPosition = "left",
+  topModalOverride
 }) => {
-  const menuWrapperRef = useRef(null);
-  const menuContentRef = useRef(null);
+  const menuRef = useRef(null);
+  const modalRef = useRef(null);
+  const contentRef = useRef(null);
+  const isTopModal = useModalAria(modalRef);
   const {
     menuType
   } = useContext(MenuContext);
   const isDarkVariant = ["dark", "black"].includes(menuType);
-  const handleKeyDown = ev => {
-    /* istanbul ignore else */
-    if (Events.isEscKey(ev)) {
-      onClose(ev);
-    }
-    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-      const search = menuWrapperRef.current?.querySelector('[data-component="search"');
-      const searchInput = search?.querySelector("input");
-      const searchButton = search?.querySelector("button");
+  const transitionDuration = 200;
+  const locale = useLocale();
 
-      // if there is no value in the search input the button disappears when the input blurs
-      // this means we need to programatically set focus to the next menu item
-      if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
-        ev.preventDefault();
-        const elements = Array.from(menuWrapperRef.current?.querySelectorAll("a, input, button"));
-        const index = elements.indexOf(searchInput);
-        elements[index + 2]?.focus();
-      }
+  // TODO: Remove this temporary event handler as part of FE-6078
+  const handleFocusedSearchButton = ev => {
+    const search = modalRef.current?.querySelector('[data-component="search"]');
+    const searchInput = search?.querySelector("input");
+    const searchButton = search?.querySelector("button");
+
+    // if there is no value in the search input the button disappears when the input blurs
+    // this means we need to programmatically set focus to the next menu item
+    if (searchButton && searchInput && !searchInput.value && searchInput === document.activeElement) {
+      ev.preventDefault();
+      const elements = Array.from(modalRef.current?.querySelectorAll("a, input, button"));
+      const index = elements.indexOf(searchInput);
+      elements[index + 2]?.focus();
     }
   };
   const flattenedChildren = React.Children.toArray(children);
@@ -52,23 +57,45 @@ export const MenuFullscreen = ({
     }
     return child;
   }));
-  return /*#__PURE__*/React.createElement("li", {
-    "aria-label": "menu-fullscreen"
-  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: menuWrapperRef,
-    isOpen: isOpen
-  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    menuType: menuType,
+  const closeModal = useCallback(ev => {
+    if (onClose && Events.isEscKey(ev)) {
+      ev.stopImmediatePropagation();
+      onClose(ev);
+    }
+  }, [onClose]);
+  useModalManager({
+    open: isOpen,
+    closeModal,
+    modalRef: menuRef,
+    topModalOverride
+  });
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(CSSTransition, {
+    nodeRef: menuRef,
+    in: isOpen,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, {
+    ref: menuRef,
     startPosition: startPosition,
-    onKeyDown: handleKeyDown
-  }, rest, tagComponent("menu-fullscreen", rest)), /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
-    isOpen: isOpen,
+    transitionDuration: transitionDuration
+  }, /*#__PURE__*/React.createElement(FocusTrap, {
+    wrapperRef: modalRef,
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(StyledMenuModal, {
+    "aria-label": ariaLabel,
+    "aria-modal": isTopModal ? true : undefined,
+    "data-component": "menu-fullscreen",
+    "data-element": dataElement,
+    "data-role": dataRole,
     menuType: menuType,
-    startPosition: startPosition
+    onKeyDown: ev => Events.isTabKey(ev) && !Events.isShiftKey(ev) && handleFocusedSearchButton(ev),
+    ref: modalRef,
+    role: "dialog",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(StyledMenuFullscreenHeader, {
+    menuType: menuType
   }, /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": "menu fullscreen close button",
+    "aria-label": locale.menuFullscreen.ariaLabels.closeButton(),
     onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -82,7 +109,7 @@ export const MenuFullscreen = ({
   }, /*#__PURE__*/React.createElement(StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,
-    ref: menuContentRef,
+    ref: contentRef,
     display: "flex",
     flexDirection: "column",
     role: "list",
@@ -95,6 +122,6 @@ export const MenuFullscreen = ({
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }
-  }, childArray)))))));
+  }, childArray)))))))));
 };
 export default MenuFullscreen;

package/esm/components/menu/menu-full-screen/menu-full-screen.style.d.ts

@@ -1,8 +1,12 @@
-import { MenuFullscreenProps } from "./menu-full-screen.component";
 import { MenuType } from "../menu.context";
-interface StyledMenuFullScreenProps extends Pick<MenuFullscreenProps, "isOpen" | "startPosition"> {
+declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, {
+    transitionDuration: number;
+    startPosition: "left" | "right";
+}, never>;
+declare const StyledMenuModal: import("styled-components").StyledComponent<"div", any, {
     menuType: MenuType;
-}
-declare const StyledMenuFullscreen: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, StyledMenuFullScreenProps, never>;
-export { StyledMenuFullscreen, StyledMenuFullscreenHeader };
+}, never>;
+declare const StyledMenuFullscreenHeader: import("styled-components").StyledComponent<"div", any, {
+    menuType: MenuType;
+}, never>;
+export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -8,15 +8,50 @@ import StyledButton from "../../button/button.style";
 import menuConfigVariants from "../menu.config";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-  box-shadow: none;
+outline: solid 3px var(--colorsSemanticFocus500);
+box-shadow: none;
 `;
 const StyledMenuFullscreen = styled.div`
   position: fixed;
   top: 0;
   bottom: 0;
+
+  ${({
+  theme
+}) => css`
+    z-index: ${theme.zIndex.fullScreenModal};
+  `}
+
+  ${({
+  startPosition,
+  transitionDuration
+}) => css`
+    &.enter {
+      visibility: hidden;
+      ${startPosition}: -100%;
+    }
+
+    &.enter-active {
+      visibility: visible;
+      ${startPosition}: 0;
+      transition: all ${transitionDuration}ms ease;
+    }
+
+    &.exit {
+      visibility: visible;
+      ${startPosition}: 0;
+    }
+
+    &.exit-active {
+      visibility: hidden;
+      ${startPosition}: -100%;
+      transition: all ${transitionDuration}ms ease;
+    }
+  `}
+`;
+const StyledMenuModal = styled.div`
   height: 100vh;
-  width: 100%;
+  width: 100vw;
   outline: none;
 
   a,
@@ -26,13 +61,10 @@ const StyledMenuFullscreen = styled.div`
   }
 
   ${({
-  isOpen,
   menuType,
-  startPosition,
   theme
 }) => css`
     background-color: ${menuConfigVariants[menuType].background};
-    z-index: ${theme.zIndex.fullScreenModal};
 
     && {
       ${menuType === "dark" && css`
@@ -55,7 +87,7 @@ const StyledMenuFullscreen = styled.div`
         }
       `}
 
-      ${StyledSearch} {
+    ${StyledSearch} {
         ${StyledIcon} {
           display: inline-flex;
           margin-right: 0;
@@ -76,18 +108,6 @@ const StyledMenuFullscreen = styled.div`
         }
       }
     }
-
-    ${isOpen && css`
-      visibility: visible;
-      ${startPosition}: 0;
-      transition: all 0.3s ease;
-    `}
-
-    ${!isOpen && css`
-      visibility: hidden;
-      ${startPosition}: -100%;
-      transition: all 0.3s ease;
-    `}
   `}
 
   ${StyledBox} {
@@ -115,4 +135,7 @@ const StyledMenuFullscreenHeader = styled.div`
 StyledMenuFullscreen.defaultProps = {
   theme: baseTheme
 };
-export { StyledMenuFullscreen, StyledMenuFullscreenHeader };
+StyledMenuModal.defaultProps = {
+  theme: baseTheme
+};
+export { StyledMenuModal, StyledMenuFullscreen, StyledMenuFullscreenHeader };

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -87,7 +87,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
      * A React ref to pass to the input corresponding to the year
      */
     yearRef?: React.ForwardedRef<HTMLInputElement>;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

package/esm/components/numeral-date/numeral-date.component.js

@@ -103,6 +103,7 @@ export const NumeralDate = ({
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  isOptional,
   readOnly,
   size,
   enableInternalError,
@@ -215,6 +216,7 @@ export const NumeralDate = ({
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
+    isOptional: isOptional,
     validationRedesignOptIn: validationRedesignOptIn
   }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
     position: "relative"
@@ -285,8 +287,6 @@ export const NumeralDate = ({
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info
-    }, required && {
-      required
     }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
@@ -294,7 +294,8 @@ export const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition,
-      "aria-labelledby": labelId
+      "aria-labelledby": labelId,
+      required: required
     })))));
   }))))));
 };

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -32,6 +32,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** value of the selected RadioButton */
     value?: string;
     /** Overrides the default tooltip position */

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -35,6 +35,7 @@ export const RadioButtonGroup = props => {
     adaptiveLegendBreakpoint,
     adaptiveSpacingBreakpoint,
     required,
+    isOptional,
     tooltipPosition
   } = props;
   const {
@@ -64,7 +65,8 @@ export const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)
@@ -110,7 +112,8 @@ export const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning || info)
@@ -134,7 +137,6 @@ export const RadioButtonGroup = props => {
       error: !!error,
       warning: !!warning,
       info: !!info,
-      required,
       ...child.props
     });
   }))))));

package/esm/components/radio-button/radio-button.component.d.ts

@@ -3,9 +3,8 @@ import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 interface InternalRadioButtonProps {
     inline?: boolean;
-    required?: boolean;
 }
-export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps {
+export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "required" | "IsOptional">, MarginProps {
     /** 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. */

package/esm/components/radio-button/radio-button.component.js

@@ -29,7 +29,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   onFocus,
   value,
   reverse = false,
-  required,
   size,
   error,
   warning,
@@ -97,7 +96,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
      * opposite way around by default)
      */
     reverse: !reverse,
-    required,
     ref: ref || inputRef,
     ...props
   };
@@ -225,6 +223,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,
@@ -565,7 +564,6 @@ if (process.env.NODE_ENV !== "production") {
     "radioGroup": PropTypes.string,
     "readOnly": PropTypes.bool,
     "rel": PropTypes.string,
-    "required": PropTypes.bool,
     "resource": PropTypes.string,
     "results": PropTypes.number,
     "rev": PropTypes.string,

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -61,6 +61,10 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Boolean to disable automatic filtering and highlighting of options.
      * This allows custom filtering and option styling to be performed outside of the component when the filter text changes. */
     disableDefaultFiltering?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
 export default FilterableSelect;

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -54,6 +54,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   enableVirtualScroll,
   virtualScrollOverscan,
   disableDefaultFiltering = false,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -397,6 +399,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
       inputRef,
+      required,
+      isOptional,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
@@ -565,6 +569,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -55,6 +55,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<unknown>>;
 export default MultiSelect;

package/esm/components/select/multi-select/multi-select.component.js

@@ -55,6 +55,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -404,6 +406,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      required,
+      isOptional,
       inputRef,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
@@ -574,6 +578,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -59,6 +59,8 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
      *
      */
     labelId?: string;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
 }
 export interface SelectTextboxProps extends FormInputPropTypes {
     /** Id attribute of the select list */

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

@@ -37,6 +37,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   onChange,
   selectedValue,
   required,
+  isOptional,
   textboxRef,
   hasTextCursor,
   transparent,
@@ -80,6 +81,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     id,
     readOnly,
     required,
+    isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
     onBlur: handleTextboxBlur,
@@ -234,6 +236,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOpen": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -61,6 +61,10 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
 }
 export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<unknown>>;
 export default SimpleSelect;

package/esm/components/select/simple-select/simple-select.component.js

@@ -48,6 +48,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...props
 }, ref) => {
   const selectListId = useRef(guid());
@@ -314,6 +316,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       onKeyDown: handleTextboxKeydown,
       onBlur: handleTextboxBlur,
       tooltipPosition,
+      required,
+      isOptional,
       transparent,
       inputRef,
       ...filterOutStyledSystemSpacingProps(props)
@@ -476,6 +480,8 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
+    "isRequired": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/switch/switch.component.js

@@ -275,6 +275,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/text-editor/text-editor.component.d.ts

@@ -16,8 +16,10 @@ export interface TextEditorProps extends MarginProps {
     toolbarElements?: React.ReactNode;
     /** The value of the input, this is an EditorState immutable object */
     value: EditorState;
-    /** Flag to configure component as mandatory */
+    /** Flag to configure component as mandatory. */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** Message to be displayed when there is an error */
     error?: string;
     /** Message to be displayed when there is a warning */

package/esm/components/text-editor/text-editor.component.js

@@ -1,3 +1,4 @@
+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, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { ContentState, EditorState, RichUtils, getDefaultKeyBinding, Modifier, Editor } from "draft-js";
@@ -33,6 +34,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   previews,
   onLinkAdded,
   inputHint,
+  isOptional,
   ...rest
 }, ref) => {
   const {
@@ -43,6 +45,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const [activeInlines, setActiveInlines] = useState({});
   const [focusToolbar, setFocusToolbar] = useState(false);
   const editorRef = useRef(null);
+  const wrapper = useRef(null);
   const editor = ref || editorRef;
   const contentLength = getContent(value).getPlainText("").length;
   const moveCursor = useRef(contentLength > 0);
@@ -242,16 +245,26 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
       editor.current?.focus();
     }
   };
+  useEffect(() => {
+    if (required) {
+      const editableElement = wrapper.current?.querySelector("div[contenteditable='true']");
+      editableElement?.setAttribute("required", "");
+      editableElement?.setAttribute("aria-required", "true");
+    }
+  }, [required]);
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
       editMode: true
     }
-  }, /*#__PURE__*/React.createElement(StyledEditorWrapper, rest, /*#__PURE__*/React.createElement(LabelWrapper, {
+  }, /*#__PURE__*/React.createElement(StyledEditorWrapper, _extends({
+    ref: wrapper
+  }, rest), /*#__PURE__*/React.createElement(LabelWrapper, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/React.createElement(Label, {
     labelId: labelId,
-    isRequired: required
+    isRequired: required,
+    optional: isOptional
   }, labelText)), inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId.current
   }, inputHint), /*#__PURE__*/React.createElement(Box, {
@@ -313,6 +326,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": PropTypes.string,
     "info": PropTypes.string,
     "inputHint": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "labelText": PropTypes.string.isRequired,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

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

@@ -79,8 +79,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     placeholder?: string;
     /** Adds readOnly property */
     readOnly?: boolean;
-    /** Flag to configure component as mandatory */
-    required?: boolean;
+    /** Flag to configure component as optional */
+    isOptional?: boolean;
     /** The number of visible text lines for the control */
     rows?: number;
     /** One of type of size to apply to the textarea */