carbon-react 118.5.1 → 118.5.2

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.js

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from "react";
 /**
@@ -7,20 +6,14 @@ import React from "react";
  * We have to manually trigger focus on TextEditor by clicking on label component.
  * This wrapper allows us to trigger focus on TextEditor
  */
-
 import PropTypes from "prop-types";
-
-const LabelWrapper = ({
-  onClick,
-  children
-}) => {
+const LabelWrapper = _ref => {
+  let {
+    onClick,
+    children
+  } = _ref;
   return /*#__PURE__*/React.createElement("span", {
     onClick: onClick
   }, " ", children, " ");
 };
-
-LabelWrapper.propTypes = {
-  "children": PropTypes.node,
-  "onClick": PropTypes.func.isRequired
-};
 export default LabelWrapper;

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -1,20 +1,20 @@
-function _extends() { _extends = Object.assign || 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); }
-
+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 from "react";
 import PropTypes from "prop-types";
 import StyledToolbarButton from "./toolbar-button.style";
-const ToolbarButton = /*#__PURE__*/React.forwardRef(({
-  onKeyDown,
-  onMouseDown,
-  activated,
-  ariaLabel,
-  tabbable,
-  children,
-  onMouseOver,
-  onMouseLeave,
-  onFocus,
-  onBlur
-}, ref) => {
+const ToolbarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    onKeyDown,
+    onMouseDown,
+    activated,
+    ariaLabel,
+    tabbable,
+    children,
+    onMouseOver,
+    onMouseLeave,
+    onFocus,
+    onBlur
+  } = _ref;
   return /*#__PURE__*/React.createElement(StyledToolbarButton, _extends({
     "data-component": "text-editor-toolbar-button",
     ref: ref,

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -15,9 +15,11 @@ const StyledToolbarButton = styled.button.attrs({
     width: auto;
   }
 
-  ${({
-  isActive
-}) => css`
+  ${_ref => {
+  let {
+    isActive
+  } = _ref;
+  return css`
     :focus,
     :active {
       outline: 2px solid var(--colorsSemanticFocus500);
@@ -33,6 +35,7 @@ const StyledToolbarButton = styled.button.attrs({
     ${isActive && css`
       background-color: var(--colorsActionMinor200);
     `}
-  `}
+  `;
+}}
 `;
 export default StyledToolbarButton;

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

@@ -12,5 +12,5 @@ export interface ToolbarProps {
     /** Additional elements to be rendered in the Toolbar, e.g. Save and Cancel Button */
     toolbarElements?: React.ReactNode;
 }
-declare const Toolbar: ({ activeControls, canFocus, toolbarElements, setBlockStyle, setInlineStyle, }: ToolbarProps) => JSX.Element;
+declare const Toolbar: ({ activeControls, canFocus, toolbarElements, setBlockStyle, setInlineStyle, }: ToolbarProps) => React.JSX.Element;
 export default Toolbar;

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

@@ -7,14 +7,14 @@ import Icon from "../../../icon";
 import Tooltip from "../../../tooltip";
 import useLocale from "../../../../hooks/__internal__/useLocale";
 import { BOLD, ITALIC, UNORDERED_LIST, ORDERED_LIST } from "../../types";
-
-const Toolbar = ({
-  activeControls,
-  canFocus,
-  toolbarElements,
-  setBlockStyle,
-  setInlineStyle
-}) => {
+const Toolbar = _ref => {
+  let {
+    activeControls,
+    canFocus,
+    toolbarElements,
+    setBlockStyle,
+    setInlineStyle
+  } = _ref;
   const {
     textEditor
   } = useLocale();
@@ -41,37 +41,26 @@ const Toolbar = ({
       } else {
         handleBlockType(ev, type);
       }
-
       setFocusIndex(0);
       setTabbable(true);
     } else if (Events.isLeftKey(ev)) {
       if (focusIndex === null || focusIndex === 0) {
-        var _controlRefs$current$;
-
-        (_controlRefs$current$ = controlRefs.current[3].current) === null || _controlRefs$current$ === void 0 ? void 0 : _controlRefs$current$.focus();
+        controlRefs.current[3].current?.focus();
         setFocusIndex(3);
       } else {
-        var _controlRefs$current$2;
-
-        (_controlRefs$current$2 = controlRefs.current[focusIndex - 1].current) === null || _controlRefs$current$2 === void 0 ? void 0 : _controlRefs$current$2.focus();
+        controlRefs.current[focusIndex - 1].current?.focus();
         setFocusIndex(focusIndex - 1);
       }
-
       setTabbable(false);
     } else if (Events.isRightKey(ev)) {
       if (focusIndex === 3) {
-        var _controlRefs$current$3;
-
-        (_controlRefs$current$3 = controlRefs.current[0].current) === null || _controlRefs$current$3 === void 0 ? void 0 : _controlRefs$current$3.focus();
+        controlRefs.current[0].current?.focus();
         setFocusIndex(0);
       } else {
-        var _controlRefs$current$4;
-
         const currentIndex = focusIndex === null ? 0 : focusIndex;
-        (_controlRefs$current$4 = controlRefs.current[currentIndex + 1].current) === null || _controlRefs$current$4 === void 0 ? void 0 : _controlRefs$current$4.focus();
+        controlRefs.current[currentIndex + 1].current?.focus();
         setFocusIndex(currentIndex + 1);
       }
-
       setTabbable(false);
     }
   }, [focusIndex, handleBlockType, handleInlineStyleChange]);
@@ -85,15 +74,12 @@ const Toolbar = ({
       setFocusIndex(null);
     }
   }, [canFocus]);
-
   const isTabbable = index => {
     if (!controlRefs.current[index] || !controlRefs.current[index].current) {
       return false;
     }
-
     return controlRefs.current[index].current === document.activeElement;
   };
-
   return /*#__PURE__*/React.createElement(StyledToolbar, {
     "data-component": "text-editor-toolbar"
   }, /*#__PURE__*/React.createElement(StyledEditorStyleControls, null, /*#__PURE__*/React.createElement(Tooltip, {
@@ -166,17 +152,4 @@ const Toolbar = ({
     type: "bullet_list_numbers"
   })))), toolbarElements && /*#__PURE__*/React.createElement(StyledEditorActionControls, null, toolbarElements));
 };
-
-Toolbar.propTypes = {
-  "activeControls": PropTypes.shape({
-    "BOLD": PropTypes.bool.isRequired,
-    "ITALIC": PropTypes.bool.isRequired,
-    "ordered-list-item": PropTypes.bool.isRequired,
-    "unordered-list-item": PropTypes.bool.isRequired
-  }).isRequired,
-  "canFocus": PropTypes.bool,
-  "setBlockStyle": PropTypes.func.isRequired,
-  "setInlineStyle": PropTypes.func.isRequired,
-  "toolbarElements": PropTypes.node
-};
 export default Toolbar;

package/esm/components/text-editor/__internal__/utils/utils.js

@@ -5,35 +5,32 @@ export const computeBlockType = (char, type) => {
   if (char === "." && type !== ORDERED_LIST) {
     return ORDERED_LIST;
   }
-
   if (char === "*" && type !== UNORDERED_LIST) {
     return UNORDERED_LIST;
   }
-
   return "unstyled";
 };
+
 /*
 Returns default block-level metadata for various block type. Empty object otherwise.
 */
-
-const getDefaultBlockData = (blockType, initialData = {}) => {
+const getDefaultBlockData = function (blockType) {
+  let initialData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   switch (blockType) {
     case ORDERED_LIST:
       return {};
-
     case UNORDERED_LIST:
       return {};
-
     default:
       return initialData;
   }
 };
+
 /*
 Changes the block type of the current block.
 */
-
-
-export const resetBlockType = (value, newType = "unstyled") => {
+export const resetBlockType = function (value) {
+  let newType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "unstyled";
   const contentState = value.getCurrentContent();
   const selectionState = value.getSelection();
   const key = selectionState.getStartKey();
@@ -57,35 +54,33 @@ export function blockStyleFn(block) {
   switch (block.getType()) {
     case "unordered-list-item":
       return "text-editor-block-unordered";
-
     case "ordered-list-item":
       return "text-editor-block-ordered";
-
     default:
       return "";
   }
 }
+
 /*
   Return mutated editorState with decorators added
 */
-
 export const getDecoratedValue = value => EditorState.set(value, {
   decorator: decorators
 });
+
 /*
   Get the current Content State
 */
-
 export const getContent = value => value.getCurrentContent();
+
 /*
   Get the current selection State
 */
-
 export const getSelection = value => value.getSelection();
+
 /*
   Get the current Content and Block information
 */
-
 export const getContentInfo = value => {
   const content = getContent(value);
   const currentBlock = content.getBlockForKey(getSelection(value).getStartKey());
@@ -102,10 +97,10 @@ export const getContentInfo = value => {
     blockMap
   };
 };
+
 /*
   Get the current Selection information
 */
-
 export const getSelectionInfo = value => {
   const selection = getSelection(value);
   const startKey = selection.getStartKey();
@@ -120,19 +115,18 @@ export const getSelectionInfo = value => {
     endOffset
   };
 };
+
 /*
   Move cursor to end of Content
 */
-
 export const moveSelectionToEnd = value => EditorState.forceSelection(value, getContent(value).getSelectionAfter());
+
 /*
   Returns the current Selection length
 */
-
 export const getSelectedLength = value => {
   const selection = getSelection(value);
   let length = 0;
-
   if (!selection.isCollapsed()) {
     const {
       startKey,
@@ -146,12 +140,10 @@ export const getSelectedLength = value => {
     } = getContentInfo(value);
     const startLength = blockLength - startOffset;
     const keyAfterEnd = content.getKeyAfter(endKey);
-
     if (startKey === endKey) {
       length += endOffset - startOffset;
     } else {
       let currentKey = startKey;
-
       while (currentKey && currentKey !== keyAfterEnd) {
         if (currentKey === startKey) {
           length += startLength + 1;
@@ -160,12 +152,10 @@ export const getSelectedLength = value => {
         } else {
           length += content.getBlockForKey(currentKey).getLength() + 1;
         }
-
         currentKey = content.getKeyAfter(currentKey);
       }
     }
   }
-
   return length;
 };
 export function hasBlockStyle(value, type) {

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

@@ -13,21 +13,22 @@ import { BOLD, ITALIC, UNORDERED_LIST, ORDERED_LIST } from "./types";
 const NUMBERS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const INLINE_STYLES = [BOLD, ITALIC];
 export const EditorContext = /*#__PURE__*/React.createContext({});
-const TextEditor = /*#__PURE__*/React.forwardRef(({
-  characterLimit = 3000,
-  labelText,
-  onChange,
-  value,
-  required,
-  error,
-  warning,
-  info,
-  toolbarElements,
-  rows,
-  previews,
-  onLinkAdded,
-  ...rest
-}, ref) => {
+const TextEditor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    characterLimit = 3000,
+    labelText,
+    onChange,
+    value,
+    required,
+    error,
+    warning,
+    info,
+    toolbarElements,
+    rows,
+    previews,
+    onLinkAdded,
+    ...rest
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inlines, setInlines] = useState([]);
   const [activeInlines, setActiveInlines] = useState({});
@@ -38,95 +39,86 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const moveCursor = useRef(contentLength > 0);
   const lastKeyPressed = useRef();
   const labelId = useRef(`text-editor-label-${createGuid()}`);
-
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console
     console.warn(`Prop rows must be a number value that is 2 or greater to override the min-height of the \`${TextEditor.displayName}\``);
   }
-
   const keyBindingFn = ev => {
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
       setFocusToolbar(true);
     }
-
     return getDefaultKeyBinding(ev);
   };
-
   const BLOCK_TYPES = ["unordered-list-item", "ordered-list-item"];
-
   const handleKeyCommand = command => {
     // bail out if the enter is pressed and limit has been reached
     if (command.includes("split-block") && contentLength === characterLimit) {
       return "handled";
-    } // if the backspace or enter is pressed get block type and text
-
+    }
 
+    // if the backspace or enter is pressed get block type and text
     if (command.includes("backspace") || command.includes("split-block")) {
       const {
         blockLength,
         blockType
-      } = getContentInfo(value); // if a block control is active and there is no text, deactivate it and reset the block
+      } = getContentInfo(value);
 
+      // if a block control is active and there is no text, deactivate it and reset the block
       if (BLOCK_TYPES.includes(blockType) && !blockLength) {
         onChange(resetBlockType(value, "unstyled"));
         return "handled";
       }
     }
+    const style = command.toUpperCase();
 
-    const style = command.toUpperCase(); // if formatting shortcut used eg. command is "bold" or "italic"
-
+    // if formatting shortcut used eg. command is "bold" or "italic"
     if (style === BOLD || style === ITALIC) {
-      const update = RichUtils.handleKeyCommand(value, command); // istanbul ignore else
+      const update = RichUtils.handleKeyCommand(value, command);
 
+      // istanbul ignore else
       if (update) {
         onChange(update);
-        setActiveInlines({ ...activeInlines,
+        setActiveInlines({
+          ...activeInlines,
           [style]: !hasInlineStyle(value, style)
         });
         return "handled";
       }
     }
-
     return "not-handled";
   };
-
   const handleBeforeInput = (str, newState) => {
     // short circuit if exceeds character limit
     if (contentLength >= characterLimit) {
       return "handled";
     }
+    setActiveInlines({});
 
-    setActiveInlines({}); // there is a bug in how DraftJS handles the macOS double-space-period feature, this is added to catch this and
+    // there is a bug in how DraftJS handles the macOS double-space-period feature, this is added to catch this and
     // prevent the editor from crashing until a fix can be added to their codebase
-
     if (lastKeyPressed.current === " " && !isASCIIChar(str)) {
       lastKeyPressed.current = null;
       onChange(replaceText(newState, " ", newState.getCurrentInlineStyle()));
       return "handled";
     }
-
     if (str === " ") {
       lastKeyPressed.current = str;
       return "not-handled";
     }
-
-    lastKeyPressed.current = null; // short circuit if str does not match expected chars
-
+    lastKeyPressed.current = null;
+    // short circuit if str does not match expected chars
     if (![".", "*"].includes(str)) {
       return "not-handled";
     }
-
     const {
       blockType,
       blockLength,
       blockText
     } = getContentInfo(value);
-
     if (blockLength === 1 && NUMBERS.includes(blockText) && str === "." || blockLength === 0 && str === "*") {
       const newBlockType = computeBlockType(str, blockType);
       const hasNumberList = hasBlockStyle(value, ORDERED_LIST);
       const hasBulletList = hasBlockStyle(value, UNORDERED_LIST);
-
       if (BLOCK_TYPES.includes(newBlockType) && !hasNumberList && !hasBulletList) {
         onChange(resetBlockType(value, newBlockType));
         setActiveInlines({
@@ -136,37 +128,32 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
         return "handled";
       }
     }
-
     onChange(value);
     return "not-handled";
   };
-
   const handlePastedText = pastedText => {
     const selectedTextLength = getSelectedLength(value);
-    const newLength = contentLength + (pastedText === null || pastedText === void 0 ? void 0 : pastedText.length) - selectedTextLength; // if the pastedText will exceed the limit trim the excess
-
+    const newLength = contentLength + pastedText?.length - selectedTextLength;
+    // if the pastedText will exceed the limit trim the excess
     if (newLength > characterLimit) {
       const newContentState = Modifier.insertText(getContent(value), value.getSelection(), pastedText.substring(0, characterLimit - contentLength));
       const newState = EditorState.push(value, newContentState, "insert-fragment");
       onChange(newState);
       return "handled";
     }
-
     setActiveInlines({});
     return "not-handled";
   };
-
   const getEditorState = () => {
-    let editorState = getDecoratedValue(value); // should the cursor position be forced to the end of the content
+    let editorState = getDecoratedValue(value);
 
+    // should the cursor position be forced to the end of the content
     if (contentLength > 0 && moveCursor.current && isFocused) {
       editorState = moveSelectionToEnd(editorState);
       moveCursor.current = false;
     }
-
     return editorState;
   };
-
   const editorState = getEditorState();
   const activeControls = {
     BOLD: activeInlines.BOLD !== undefined ? activeInlines.BOLD : hasInlineStyle(editorState, BOLD),
@@ -177,24 +164,20 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
     setIsFocused(focusValue);
-
     if (!isFocused && focusValue && typeof editor === "object" && editor.current !== document.activeElement) {
-      var _editor$current;
-
-      (_editor$current = editor.current) === null || _editor$current === void 0 ? void 0 : _editor$current.focus();
+      editor.current?.focus();
       setFocusToolbar(false);
     }
   }, [editor, isFocused]);
-
   const handleInlineStyleChange = (ev, style) => {
     ev.preventDefault();
-    setActiveInlines({ ...activeInlines,
+    setActiveInlines({
+      ...activeInlines,
       [style]: !hasInlineStyle(value, style)
     });
     handleEditorFocus(true);
     setInlines([...inlines, style]);
   };
-
   const handleBlockStyleChange = (ev, newBlockType) => {
     ev.preventDefault();
     handleEditorFocus(true);
@@ -207,37 +190,32 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     });
     setInlines(temp);
   };
-
   useEffect(() => {
     // apply the inline styling, having it run in as an effect ensures that styles can be added
     // even when the editor is not focused
     INLINE_STYLES.forEach(style => {
       const preserveStyle = activeInlines[style] !== undefined && activeInlines[style] !== hasInlineStyle(value, style);
-
       if (preserveStyle && value.getSelection().isCollapsed() || isFocused && inlines.includes(style)) {
         onChange(RichUtils.toggleInlineStyle(value, style));
         setInlines(inlines.filter(inline => inline !== style));
       }
-
       if (preserveStyle && !value.getSelection().isCollapsed()) {
-        setActiveInlines({ ...activeInlines,
+        setActiveInlines({
+          ...activeInlines,
           [style]: undefined
         });
       }
     });
   }, [activeInlines, contentLength, editorState, inlines, isFocused, onChange, value]);
-
   const handlePreviewClose = (onClose, url) => {
     // istanbul ignore else
-    if (url) onClose(url); // istanbul ignore else
+    if (url) onClose(url);
 
+    // istanbul ignore else
     if (typeof editor === "object") {
-      var _editor$current2;
-
-      (_editor$current2 = editor.current) === null || _editor$current2 === void 0 ? void 0 : _editor$current2.focus();
+      editor.current?.focus();
     }
   };
-
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
@@ -280,13 +258,12 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     if ( /*#__PURE__*/React.isValidElement(preview)) {
       const {
         onClose
-      } = preview === null || preview === void 0 ? void 0 : preview.props;
+      } = preview?.props;
       return /*#__PURE__*/React.cloneElement(preview, {
         as: "div",
         onClose: onClose ? url => handlePreviewClose(onClose, url) : undefined
       });
     }
-
     return null;
   }), /*#__PURE__*/React.createElement(Toolbar, {
     setBlockStyle: (ev, newBlockType) => handleBlockStyleChange(ev, newBlockType),

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

@@ -10,11 +10,13 @@ StyledEditorWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledEditorContainer = styled.div`
-  ${({
-  hasError,
-  rows,
-  hasPreview
-}) => css`
+  ${_ref => {
+  let {
+    hasError,
+    rows,
+    hasPreview
+  } = _ref;
+  return css`
     border-radius: var(--borderRadius050);
     min-height: ${rows ? `${rows * lineHeight}` : `${hasPreview ? 125 : 220}`}px;
     min-width: 320px;
@@ -54,13 +56,16 @@ const StyledEditorContainer = styled.div`
 
     background-color: var(--colorsUtilityYang100);
     outline: ${hasError ? "2px solid var(--colorsSemanticNegative500)" : "1px solid var(--colorsUtilityMajor200)"};
-  `}
+  `;
+}}
 `;
 const StyledEditorOutline = styled.div`
-  ${({
-  isFocused,
-  hasError
-}) => css`
+  ${_ref2 => {
+  let {
+    isFocused,
+    hasError
+  } = _ref2;
+  return css`
     border-radius: var(--borderRadius050);
     outline: none;
     min-width: 320px;
@@ -69,6 +74,7 @@ const StyledEditorOutline = styled.div`
       outline: 3px solid var(--colorsSemanticFocus500);
       outline-offset: ${hasError ? "2px;" : "1px;"};
     `}
-  `}
+  `;
+}}
 `;
 export { StyledEditorWrapper, StyledEditorContainer, StyledEditorOutline };