carbon-react 128.1.2 → 128.2.0

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

@@ -25,6 +25,7 @@ var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal_
 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 NUMBERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const INLINE_STYLES = [_types.BOLD, _types.ITALIC];
 const EditorContext = exports.EditorContext = /*#__PURE__*/_react.default.createContext({});
@@ -42,6 +43,7 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
   previews,
   onLinkAdded,
   inputHint,
+  isOptional,
   ...rest
 }, ref) => {
   const {
@@ -52,6 +54,7 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
   const [activeInlines, setActiveInlines] = (0, _react.useState)({});
   const [focusToolbar, setFocusToolbar] = (0, _react.useState)(false);
   const editorRef = (0, _react.useRef)(null);
+  const wrapper = (0, _react.useRef)(null);
   const editor = ref || editorRef;
   const contentLength = (0, _utils.getContent)(value).getPlainText("").length;
   const moveCursor = (0, _react.useRef)(contentLength > 0);
@@ -251,16 +254,26 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
       editor.current?.focus();
     }
   };
+  (0, _react.useEffect)(() => {
+    if (required) {
+      const editableElement = wrapper.current?.querySelector("div[contenteditable='true']");
+      editableElement?.setAttribute("required", "");
+      editableElement?.setAttribute("aria-required", "true");
+    }
+  }, [required]);
   return /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
       editMode: true
     }
-  }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorWrapper, rest, /*#__PURE__*/_react.default.createElement(_labelWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_textEditor.StyledEditorWrapper, _extends({
+    ref: wrapper
+  }, rest), /*#__PURE__*/_react.default.createElement(_labelWrapper.default, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/_react.default.createElement(_label.default, {
     labelId: labelId,
-    isRequired: required
+    isRequired: required,
+    optional: isOptional
   }, labelText)), inputHint && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, {
     id: inputHintId.current
   }, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
@@ -322,6 +335,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": _propTypes.default.string,
     "info": _propTypes.default.string,
     "inputHint": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "labelText": _propTypes.default.string.isRequired,
     "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,

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

package/lib/components/textarea/textarea.component.js

@@ -69,6 +69,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   inputRef,
   borderRadius,
   hideBorders = false,
+  required,
+  isOptional,
   ...rest
 }, ref) => {
   const {
@@ -194,7 +196,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     as: "textarea",
     inputRef: inputRef,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
-    inputBorderRadius: borderRadius
+    inputBorderRadius: borderRadius,
+    required: required
   }, rest)), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, {
     disabled: disabled,
     readOnly: readOnly,
@@ -231,7 +234,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    isRequired: rest.required,
+    isRequired: required,
+    isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
@@ -358,6 +362,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputRef": _propTypes.default.func,
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

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

@@ -91,12 +91,12 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export interface TextboxProps extends CommonTextboxProps {
     /** Content to be rendered next to the input */
     children?: React.ReactNode;
-    /** [Legacy] Flag to configure component as optional in Form */
-    isOptional?: boolean;
     /** Container for DatePicker or SelectList components */
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */

package/lib/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/package.json

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