carbon-react 128.1.2 → 128.3.0

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -21,9 +21,11 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): React.JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, isOptional, ...rest }: InlineInputsProps): React.JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 columnWrapper = (children, gutter) => {
   return _react.default.Children.map(children, input => {
@@ -36,9 +36,11 @@ const InlineInputs = ({
   labelInline = true,
   labelWidth,
   required,
+  isOptional,
   ...rest
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
+  const ref = (0, _react.useRef)(null);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {
     inlineLabel = largeScreen;
@@ -50,16 +52,24 @@ const InlineInputs = ({
       labelId: labelId,
       inline: inlineLabel,
       htmlFor: htmlFor,
-      isRequired: required
+      isRequired: required,
+      optional: isOptional
     }, label);
   }
   const marginProps = (0, _useFormSpacing.default)(rest);
+  (0, _react.useEffect)(() => {
+    if (required) {
+      const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
+      elements.forEach(el => el.setAttribute("required", ""));
+    }
+  }, [required]);
   return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
-    labelInline: inlineLabel
+    labelInline: inlineLabel,
+    ref: ref
   }, marginProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",

package/lib/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface MenuFullscreenProps extends TagProps {
+import type { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
+    /** Accessible name that conveys the purpose of the menu   */
+    "aria-label"?: string;
     /** The child elements to render */
     children?: React.ReactNode;
     /** Sets whether the component is open or closed */
@@ -8,7 +10,9 @@ export interface MenuFullscreenProps extends TagProps {
     /** The start position for the component to open from */
     startPosition?: "left" | "right";
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-    onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+    /** Manually override the internal modal stacking order to set this as top */
+    topModalOverride?: boolean;
 }
-export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => React.JSX.Element;
+export declare const MenuFullscreen: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, children, isOpen, onClose, startPosition, topModalOverride, }: MenuFullscreenProps) => React.JSX.Element;
 export default MenuFullscreen;

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

@@ -6,52 +6,57 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.MenuFullscreen = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTransitionGroup = require("react-transition-group");
 var _menuFullScreen = require("./menu-full-screen.style");
 var _menu = require("../menu.style");
 var _menu2 = _interopRequireDefault(require("../menu.context"));
-var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _box = _interopRequireDefault(require("../../box"));
 var _iconButton = _interopRequireDefault(require("../../icon-button"));
 var _icon = _interopRequireDefault(require("../../icon"));
 var _portal = _interopRequireDefault(require("../../portal"));
+var _focusTrap = _interopRequireDefault(require("../../../__internal__/focus-trap"));
 var _menuDivider = _interopRequireDefault(require("../menu-divider/menu-divider.component"));
-var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _useModalAria = _interopRequireDefault(require("../../../hooks/__internal__/useModalAria"));
+var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 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 = (0, _react.useRef)(null);
-  const menuContentRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const modalRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const isTopModal = (0, _useModalAria.default)(modalRef);
   const {
     menuType
   } = (0, _react.useContext)(_menu2.default);
   const isDarkVariant = ["dark", "black"].includes(menuType);
-  const handleKeyDown = ev => {
-    /* istanbul ignore else */
-    if (_events.default.isEscKey(ev)) {
-      onClose(ev);
-    }
-    if (_events.default.isTabKey(ev) && !_events.default.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 = (0, _useLocale.default)();
 
-      // 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.default.Children.toArray(children);
@@ -61,23 +66,45 @@ const MenuFullscreen = ({
     }
     return child;
   }));
-  return /*#__PURE__*/_react.default.createElement("li", {
-    "aria-label": "menu-fullscreen"
-  }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
-    wrapperRef: menuWrapperRef,
-    isOpen: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, _extends({
-    ref: menuWrapperRef,
-    isOpen: isOpen,
-    menuType: menuType,
+  const closeModal = (0, _react.useCallback)(ev => {
+    if (onClose && _events.default.isEscKey(ev)) {
+      ev.stopImmediatePropagation();
+      onClose(ev);
+    }
+  }, [onClose]);
+  (0, _useModalManager.default)({
+    open: isOpen,
+    closeModal,
+    modalRef: menuRef,
+    topModalOverride
+  });
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: menuRef,
+    in: isOpen,
+    timeout: transitionDuration,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreen, {
+    ref: menuRef,
     startPosition: startPosition,
-    onKeyDown: handleKeyDown
-  }, rest, (0, _tags.default)("menu-fullscreen", rest)), /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
-    isOpen: isOpen,
+    transitionDuration: transitionDuration
+  }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+    wrapperRef: modalRef,
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.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.default.isTabKey(ev) && !_events.default.isShiftKey(ev) && handleFocusedSearchButton(ev),
+    ref: modalRef,
+    role: "dialog",
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_menuFullScreen.StyledMenuFullscreenHeader, {
+    menuType: menuType
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-    "aria-label": "menu fullscreen close button",
+    "aria-label": locale.menuFullscreen.ariaLabels.closeButton(),
     onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -91,7 +118,7 @@ const MenuFullscreen = ({
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,
-    ref: menuContentRef,
+    ref: contentRef,
     display: "flex",
     flexDirection: "column",
     role: "list",
@@ -104,7 +131,7 @@ const MenuFullscreen = ({
       openSubmenuId: null,
       setOpenSubmenuId: /* istanbul ignore next */() => {}
     }
-  }, childArray)))))));
+  }, childArray)))))))));
 };
 exports.MenuFullscreen = MenuFullscreen;
 var _default = exports.default = MenuFullscreen;

package/lib/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/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMenuFullscreenHeader = exports.StyledMenuFullscreen = void 0;
+exports.StyledMenuModal = exports.StyledMenuFullscreenHeader = exports.StyledMenuFullscreen = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _themes = require("../../../style/themes");
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
@@ -17,15 +17,50 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const oldFocusStyling = `
-  outline: solid 3px var(--colorsSemanticFocus500);
-  box-shadow: none;
+outline: solid 3px var(--colorsSemanticFocus500);
+box-shadow: none;
 `;
 const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.default.div`
   position: fixed;
   top: 0;
   bottom: 0;
+
+  ${({
+  theme
+}) => (0, _styledComponents.css)`
+    z-index: ${theme.zIndex.fullScreenModal};
+  `}
+
+  ${({
+  startPosition,
+  transitionDuration
+}) => (0, _styledComponents.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 = exports.StyledMenuModal = _styledComponents.default.div`
   height: 100vh;
-  width: 100%;
+  width: 100vw;
   outline: none;
 
   a,
@@ -35,13 +70,10 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
   }
 
   ${({
-  isOpen,
   menuType,
-  startPosition,
   theme
 }) => (0, _styledComponents.css)`
     background-color: ${_menu.default[menuType].background};
-    z-index: ${theme.zIndex.fullScreenModal};
 
     && {
       ${menuType === "dark" && (0, _styledComponents.css)`
@@ -64,7 +96,7 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
         }
       `}
 
-      ${_search.default} {
+    ${_search.default} {
         ${_icon.default} {
           display: inline-flex;
           margin-right: 0;
@@ -85,18 +117,6 @@ const StyledMenuFullscreen = exports.StyledMenuFullscreen = _styledComponents.de
         }
       }
     }
-
-    ${isOpen && (0, _styledComponents.css)`
-      visibility: visible;
-      ${startPosition}: 0;
-      transition: all 0.3s ease;
-    `}
-
-    ${!isOpen && (0, _styledComponents.css)`
-      visibility: hidden;
-      ${startPosition}: -100%;
-      transition: all 0.3s ease;
-    `}
   `}
 
   ${_box.default} {
@@ -123,4 +143,7 @@ const StyledMenuFullscreenHeader = exports.StyledMenuFullscreenHeader = _styledC
 `;
 StyledMenuFullscreen.defaultProps = {
   theme: _themes.baseTheme
+};
+StyledMenuModal.defaultProps = {
+  theme: _themes.baseTheme
 };

package/lib/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/lib/components/numeral-date/numeral-date.component.js

@@ -112,6 +112,7 @@ const NumeralDate = ({
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  isOptional,
   readOnly,
   size,
   enableInternalError,
@@ -224,6 +225,7 @@ const NumeralDate = ({
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
+    isOptional: isOptional,
     validationRedesignOptIn: validationRedesignOptIn
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
@@ -294,8 +296,6 @@ const NumeralDate = ({
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info
-    }, required && {
-      required
     }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
@@ -303,7 +303,8 @@ const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition,
-      "aria-labelledby": labelId
+      "aria-labelledby": labelId,
+      required: required
     })))));
   }))))));
 };

package/lib/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/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -44,6 +44,7 @@ const RadioButtonGroup = props => {
     adaptiveLegendBreakpoint,
     adaptiveSpacingBreakpoint,
     required,
+    isOptional,
     tooltipPosition
   } = props;
   const {
@@ -73,7 +74,8 @@ const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)
@@ -119,7 +121,8 @@ const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning || info)
@@ -143,7 +146,6 @@ const RadioButtonGroup = props => {
       error: !!error,
       warning: !!warning,
       info: !!info,
-      required,
       ...child.props
     });
   }))))));

package/lib/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/lib/components/radio-button/radio-button.component.js

@@ -38,7 +38,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
   onFocus,
   value,
   reverse = false,
-  required,
   size,
   error,
   warning,
@@ -106,7 +105,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
      * opposite way around by default)
      */
     reverse: !reverse,
-    required,
     ref: ref || inputRef,
     ...props
   };
@@ -234,6 +232,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,
@@ -574,7 +573,6 @@ if (process.env.NODE_ENV !== "production") {
     "radioGroup": _propTypes.default.string,
     "readOnly": _propTypes.default.bool,
     "rel": _propTypes.default.string,
-    "required": _propTypes.default.bool,
     "resource": _propTypes.default.string,
     "results": _propTypes.default.number,
     "rev": _propTypes.default.string,

package/lib/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/lib/components/select/filterable-select/filterable-select.component.js

@@ -63,6 +63,8 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   enableVirtualScroll,
   virtualScrollOverscan,
   disableDefaultFiltering = false,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -406,6 +408,8 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
       inputRef,
+      required,
+      isOptional,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
@@ -574,6 +578,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isLoading": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/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/lib/components/select/multi-select/multi-select.component.js

@@ -64,6 +64,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -413,6 +415,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      required,
+      isOptional,
       inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
@@ -583,6 +587,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isLoading": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/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/lib/components/select/select-textbox/select-textbox.component.js

@@ -46,6 +46,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   selectedValue,
   required,
+  isOptional,
   textboxRef,
   hasTextCursor,
   transparent,
@@ -89,6 +90,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     id,
     readOnly,
     required,
+    isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
     onBlur: handleTextboxBlur,
@@ -243,6 +245,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isOpen": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/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;