carbon-react 111.12.1 → 111.12.3

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

@@ -10,7 +10,6 @@ const BOLD = "BOLD";
 const ITALIC = "ITALIC";
 const UNORDERED_LIST = "unordered-list-item";
 const ORDERED_LIST = "ordered-list-item";
-
 const Toolbar = ({
   activeControls,
   canFocus,
@@ -44,7 +43,6 @@ const Toolbar = ({
       } else {
         handleBlockType(ev, type);
       }
-
       setFocusIndex(0);
       setTabbable(true);
     } else if (Events.isLeftKey(ev)) {
@@ -55,7 +53,6 @@ const Toolbar = ({
         controlRefs[focusIndex - 1].current.focus();
         setFocusIndex(focusIndex - 1);
       }
-
       setTabbable(false);
     } else if (Events.isRightKey(ev)) {
       if (focusIndex === 3) {
@@ -65,7 +62,6 @@ const Toolbar = ({
         controlRefs[focusIndex + 1].current.focus();
         setFocusIndex(focusIndex + 1);
       }
-
       setTabbable(false);
     }
   }, [controlRefs, focusIndex, handleBlockType, handleInlineStyleChange]);
@@ -83,7 +79,6 @@ const Toolbar = ({
     if (!controlRefs[index] || !controlRefs[index].current) {
       return false;
     }
-
     return controlRefs[index].current === document.activeElement;
   }, [controlRefs]);
   return /*#__PURE__*/React.createElement(StyledToolbar, {
@@ -158,20 +153,15 @@ const Toolbar = ({
     type: "bullet_list_numbers"
   })))), toolbarElements && /*#__PURE__*/React.createElement(StyledEditorActionControls, null, toolbarElements));
 };
-
 Toolbar.propTypes = {
   /** Used to override the active status of the inline controls */
   activeControls: PropTypes.object.isRequired,
-
   /** Flag to trigger control focusing */
   canFocus: PropTypes.bool,
-
   /** Callback to handle setting the inline styles */
   setInlineStyle: PropTypes.func.isRequired,
-
   /** Callback to handle setting the block styles */
   setBlockStyle: PropTypes.func.isRequired,
-
   /** Additional elements to be rendered in the Toolbar, e.g. Save and Cancel Button */
   toolbarElements: PropTypes.node
 };

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

@@ -6,34 +6,29 @@ export const computeBlockType = (char, type) => {
   if (char === "." && type !== ORDERLIST_TYPE) {
     return ORDERLIST_TYPE;
   }
-
   if (char === "*" && type !== UNORDERLIST_TYPE) {
     return UNORDERLIST_TYPE;
   }
-
   return "unstyled";
 };
+
 /*
 Returns default block-level metadata for various block type. Empty object otherwise.
 */
-
 const getDefaultBlockData = (blockType, initialData = {}) => {
   switch (blockType) {
     case ORDERLIST_TYPE:
       return {};
-
     case UNORDERLIST_TYPE:
       return {};
-
     default:
       return initialData;
   }
 };
+
 /*
 Changes the block type of the current block.
 */
-
-
 export const resetBlockType = (value, newType = "unstyled") => {
   const contentState = value.getCurrentContent();
   const selectionState = value.getSelection();
@@ -58,35 +53,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());
@@ -103,10 +96,10 @@ export const getContentInfo = value => {
     blockMap
   };
 };
+
 /*
   Get the current Selection information
 */
-
 export const getSelectionInfo = value => {
   const selection = getSelection(value);
   const startKey = selection.getStartKey();
@@ -121,19 +114,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,
@@ -147,12 +139,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;
@@ -161,12 +151,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

@@ -41,84 +41,76 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const moveCursor = useRef(contentLength > 0);
   const lastKeyPressed = useRef();
   const labelId = useRef(`text-editor-label-${createGuid()}`);
-
   const keyBindingFn = ev => {
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
       setFocusToolbar(true);
     }
-
     return getDefaultKeyBinding(ev);
   };
-
   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 {
         blockType,
         blockLength
-      } = 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 true;
       }
     }
+    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 (INLINE_STYLES.includes(style)) {
       onChange(RichUtils.handleKeyCommand(value, command));
-      setActiveInlines({ ...activeInlines,
+      setActiveInlines({
+        ...activeInlines,
         [style]: !hasInlineStyle(value, style)
       });
       return true;
     }
-
     return false;
   };
-
   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(), true));
       return "handled";
     }
-
     if (str === " ") {
       lastKeyPressed.current = str;
       return false;
     }
-
-    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 false;
     }
-
     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, BLOCK_TYPES[0]);
       const hasBulletList = hasBlockStyle(value, BLOCK_TYPES[1]);
-
       if (BLOCK_TYPES.includes(newBlockType) && !hasNumberList && !hasBulletList) {
         onChange(resetBlockType(value, newBlockType));
         setActiveInlines({
@@ -128,37 +120,32 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
         return true;
       }
     }
-
     onChange(value);
     return false;
   };
-
   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 === null || pastedText === void 0 ? void 0 : 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, INLINE_STYLES[0]),
@@ -169,22 +156,20 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
     setIsFocused(focusValue);
-
     if (!isFocused && focusValue && editor.current !== document.activeElement) {
       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);
@@ -197,31 +182,27 @@ 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) => {
     onClose(url);
     editor.current.focus();
   };
-
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
@@ -277,47 +258,35 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     toolbarElements: toolbarElements
   })))));
 });
-TextEditor.propTypes = { ...marginPropTypes,
-
+TextEditor.propTypes = {
+  ...marginPropTypes,
   /** The maximum characters that the input will accept */
   characterLimit: PropTypes.number,
-
   /** The text for the editor's label */
   labelText: PropTypes.string.isRequired,
-
   /** onChange callback to control value updates */
   onChange: PropTypes.func.isRequired,
-
   /** The value of the input, this is an EditorState immutable object */
   value: PropTypes.object.isRequired,
-
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
-
   /** Message to be displayed when there is an error */
   error: PropTypes.string,
-
   /** Message to be displayed when there is a warning */
   warning: PropTypes.string,
-
   /** Message to be displayed when there is an info */
   info: PropTypes.string,
-
   /** Additional elements to be rendered in the Editor Toolbar, e.g. Save and Cancel Button */
   toolbarElements: PropTypes.node,
-
   /** Number greater than 2 multiplied by line-height (21px) to override the default min-height of the editor */
   rows: (props, propName, component) => {
     if (props[propName] && (typeof props[propName] !== "number" || props[propName] < 2)) {
       return new Error(`Prop \`${propName}\` must be a number value greater than 2 to override the min-height of the \`${component}\``);
     }
-
     return null;
   },
-
   /** The previews to display of any links added to the Editor */
   previews: PropTypes.arrayOf(PropTypes.node),
-
   /** Callback to report a url when a link is added */
   onLinkAdded: PropTypes.func
 };

package/esm/components/textarea/textarea.component.js

@@ -1,5 +1,4 @@
 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); }
-
 import React, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -18,7 +17,6 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
 const Textarea = ({
   autoFocus,
   fieldHelp,
@@ -60,25 +58,20 @@ const Textarea = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
-
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-
   const {
     current: id
   } = useRef(idProp || guid());
   const inputRef = useRef();
   const minHeight = useRef(MIN_HEIGHT);
-
   const expandTextarea = () => {
     const textarea = inputRef.current;
-
     if (textarea.scrollHeight > minHeight.current) {
-      textarea.style.height = "0px"; // Set the height so all content is shown
-
+      textarea.style.height = "0px";
+      // Set the height so all content is shown
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
     }
   };
-
   const {
     labelId,
     validationIconId,
@@ -93,7 +86,8 @@ const Textarea = ({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount] = useCharacterCount(value, // TODO: Can be removed after the characterLimit type is changed to number
+  const [maxLength, characterCount] = useCharacterCount(value,
+  // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   useEffect(() => {
     if (rows) {
@@ -110,7 +104,6 @@ const Textarea = ({
       window.addEventListener("resize", expandTextarea);
       minHeight.current = inputRef.current.clientHeight;
     }
-
     return () => {
       if (expandable) {
         window.removeEventListener("resize", expandTextarea);
@@ -189,127 +182,90 @@ const Textarea = ({
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }))), characterCount)));
 };
-
-Textarea.propTypes = { ...marginPropTypes,
-
+Textarea.propTypes = {
+  ...marginPropTypes,
   /** Automatically focus the input on component mount */
   autoFocus: PropTypes.bool,
-
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": PropTypes.string,
-
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
-
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
-
   /** id of the input */
   id: PropTypes.string,
-
   /** Character limit of the textarea */
   characterLimit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** Type of the icon that will be rendered next to the input */
   children: PropTypes.node,
-
   /** The visible width of the text control, in average character widths */
   cols: PropTypes.number,
-
   /** Adds disabled property */
   disabled: PropTypes.bool,
-
   /** Stop the user typing over the characterLimit */
   enforceCharacterLimit: PropTypes.bool,
-
   /** Allows the Textareas Height to change based on user input */
   expandable: PropTypes.bool,
-
   /** Help content to be displayed under an input */
   fieldHelp: PropTypes.node,
-
   /** The content of the label for the input */
   label: PropTypes.string,
-
   /** Text applied to label help tooltip */
   labelHelp: PropTypes.node,
-
   /** Inline label alignment */
   labelAlign: PropTypes.oneOf(["left", "right"]),
-
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
-
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
-
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth: PropTypes.number,
-
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: PropTypes.number,
-
   /** Name of the input */
   name: PropTypes.string,
-
   /** Callback fired when the user types in the Textarea */
   onChange: PropTypes.func,
-
   /** Placeholder text for the component */
   placeholder: PropTypes.string,
-
   /** Adds readOnly property */
   readOnly: PropTypes.bool,
-
   /** The number of visible text lines for the control */
   rows: PropTypes.number,
-
   /** One of type of size to apply to the textarea */
   size: PropTypes.oneOf(["small", "medium", "large"]),
-
   /** The value of the Textarea */
   value: PropTypes.string,
-
   /** Whether to display the character count message in red */
   warnOverLimit: PropTypes.bool,
-
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that warning has occurred
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate additional information
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** When true, validation icon will be placed on label instead of being placed on the input */
   validationOnLabel: PropTypes.bool,
-
   /**
    * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
    * Icon to display inside of the Textarea
    */
   inputIcon: PropTypes.string,
-
   /** Message to be displayed in a Tooltip when the user hovers over the help icon */
   tooltipMessage: PropTypes.string,
-
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint: PropTypes.number,
-
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
-
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-
   /** Aria label for rendered help component */
   helpAriaLabel: PropTypes.string
 };

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

@@ -1,5 +1,4 @@
 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); }
-
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -16,7 +15,6 @@ import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
-
 const Textbox = ({
   align = "left",
   autoFocus,
@@ -72,7 +70,8 @@ const Textbox = ({
   ...props
 }) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount] = useCharacterCount(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
+  const [maxLength, characterCount] = useCharacterCount(characterCountValue,
+  // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   const {
     validationRedesignOptIn
@@ -80,9 +79,7 @@ const Textbox = ({
   const {
     disableErrorBorder
   } = useContext(NumeralDateContext);
-
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-
   const [uniqueId, uniqueName] = useUniqueId(id, name);
   const {
     labelId: internalLabelId,
@@ -184,7 +181,6 @@ const Textbox = ({
     validationIconId: validationRedesignOptIn ? undefined : validationIconId
   }))), characterCount));
 };
-
 Textbox.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -254,9 +250,6 @@ Textbox.propTypes = {
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
-  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-    "__emotion_styles": PropTypes.any.isRequired
-  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),