carbon-react 118.2.0 → 118.3.0

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { ContentState, EditorState, Editor, RichUtils, getDefaultKeyBinding, Modifier } from "draft-js";
+import { ContentState, EditorState, RichUtils, getDefaultKeyBinding, Modifier, Editor } from "draft-js";
 import { computeBlockType, getContent, getContentInfo, getDecoratedValue, getSelectedLength, moveSelectionToEnd, resetBlockType, isASCIIChar, replaceText, hasInlineStyle, hasBlockStyle, blockStyleFn } from "./__internal__/utils";
 import { StyledEditorWrapper, StyledEditorOutline, StyledEditorContainer } from "./text-editor.style";
 import Counter from "./__internal__/editor-counter";
@@ -10,11 +9,9 @@ import Label from "../../__internal__/label";
 import Events from "../../__internal__/utils/helpers/events";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import LabelWrapper from "./__internal__/label-wrapper";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+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"];
-const BLOCK_TYPES = ["unordered-list-item", "ordered-list-item"];
+const INLINE_STYLES = [BOLD, ITALIC];
 export const EditorContext = /*#__PURE__*/React.createContext({});
 const TextEditor = /*#__PURE__*/React.forwardRef(({
   characterLimit = 3000,
@@ -35,13 +32,18 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const [inlines, setInlines] = useState([]);
   const [activeInlines, setActiveInlines] = useState({});
   const [focusToolbar, setFocusToolbar] = useState(false);
-  const editorRef = useRef();
+  const editorRef = useRef(null);
   const editor = ref || editorRef;
   const contentLength = getContent(value).getPlainText("").length;
   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);
@@ -50,6 +52,8 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     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) {
@@ -59,27 +63,31 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
 
     if (command.includes("backspace") || command.includes("split-block")) {
       const {
-        blockType,
-        blockLength
+        blockLength,
+        blockType
       } = 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;
+        return "handled";
       }
     }
 
     const style = command.toUpperCase(); // if formatting shortcut used eg. command is "bold" or "italic"
 
-    if (INLINE_STYLES.includes(style)) {
-      onChange(RichUtils.handleKeyCommand(value, command));
-      setActiveInlines({ ...activeInlines,
-        [style]: !hasInlineStyle(value, style)
-      });
-      return true;
+    if (style === BOLD || style === ITALIC) {
+      const update = RichUtils.handleKeyCommand(value, command); // istanbul ignore else
+
+      if (update) {
+        onChange(update);
+        setActiveInlines({ ...activeInlines,
+          [style]: !hasInlineStyle(value, style)
+        });
+        return "handled";
+      }
     }
 
-    return false;
+    return "not-handled";
   };
 
   const handleBeforeInput = (str, newState) => {
@@ -93,19 +101,19 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
 
     if (lastKeyPressed.current === " " && !isASCIIChar(str)) {
       lastKeyPressed.current = null;
-      onChange(replaceText(newState, " ", newState.getCurrentInlineStyle(), true));
+      onChange(replaceText(newState, " ", newState.getCurrentInlineStyle()));
       return "handled";
     }
 
     if (str === " ") {
       lastKeyPressed.current = str;
-      return false;
+      return "not-handled";
     }
 
     lastKeyPressed.current = null; // short circuit if str does not match expected chars
 
     if (![".", "*"].includes(str)) {
-      return false;
+      return "not-handled";
     }
 
     const {
@@ -116,21 +124,21 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
 
     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]);
+      const hasNumberList = hasBlockStyle(value, ORDERED_LIST);
+      const hasBulletList = hasBlockStyle(value, UNORDERED_LIST);
 
       if (BLOCK_TYPES.includes(newBlockType) && !hasNumberList && !hasBulletList) {
         onChange(resetBlockType(value, newBlockType));
         setActiveInlines({
-          BOLD: hasInlineStyle(value, INLINE_STYLES[0]),
-          ITALIC: hasInlineStyle(value, INLINE_STYLES[1])
+          BOLD: hasInlineStyle(value, BOLD),
+          ITALIC: hasInlineStyle(value, ITALIC)
         });
-        return true;
+        return "handled";
       }
     }
 
     onChange(value);
-    return false;
+    return "not-handled";
   };
 
   const handlePastedText = pastedText => {
@@ -161,17 +169,19 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
 
   const editorState = getEditorState();
   const activeControls = {
-    BOLD: activeInlines.BOLD !== undefined ? activeInlines.BOLD : hasInlineStyle(editorState, INLINE_STYLES[0]),
-    ITALIC: activeInlines.ITALIC !== undefined ? activeInlines.ITALIC : hasInlineStyle(editorState, INLINE_STYLES[1]),
-    "unordered-list-item": hasBlockStyle(editorState, BLOCK_TYPES[0]),
-    "ordered-list-item": hasBlockStyle(editorState, BLOCK_TYPES[1])
+    BOLD: activeInlines.BOLD !== undefined ? activeInlines.BOLD : hasInlineStyle(editorState, BOLD),
+    ITALIC: activeInlines.ITALIC !== undefined ? activeInlines.ITALIC : hasInlineStyle(editorState, ITALIC),
+    "unordered-list-item": hasBlockStyle(editorState, UNORDERED_LIST),
+    "ordered-list-item": hasBlockStyle(editorState, ORDERED_LIST)
   };
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
     setIsFocused(focusValue);
 
-    if (!isFocused && focusValue && editor.current !== document.activeElement) {
-      editor.current.focus();
+    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();
       setFocusToolbar(false);
     }
   }, [editor, isFocused]);
@@ -218,8 +228,14 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   }, [activeInlines, contentLength, editorState, inlines, isFocused, onChange, value]);
 
   const handlePreviewClose = (onClose, url) => {
-    onClose(url);
-    editor.current.focus();
+    // 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();
+    }
   };
 
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
@@ -237,7 +253,6 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     hasError: !!error
   }, /*#__PURE__*/React.createElement(StyledEditorContainer, {
     "data-component": "text-editor-container",
-    ariaLabelledBy: labelId.current,
     hasError: !!error,
     rows: rows,
     hasPreview: !!React.Children.count(previews)
@@ -262,66 +277,194 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     keyBindingFn: keyBindingFn,
     tabIndex: 0
   }), React.Children.map(previews, preview => {
-    const {
-      onClose
-    } = preview.props;
-    return /*#__PURE__*/React.cloneElement(preview, {
-      as: "div",
-      onClose: onClose ? url => handlePreviewClose(onClose, url) : undefined
-    });
+    if ( /*#__PURE__*/React.isValidElement(preview)) {
+      const {
+        onClose
+      } = preview === null || preview === void 0 ? void 0 : 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),
-    setInlineStyle: (ev, inlineStyle, keyboardUsed) => handleInlineStyleChange(ev, inlineStyle, keyboardUsed),
-    editorState: editorState,
+    setInlineStyle: (ev, inlineStyle) => handleInlineStyleChange(ev, inlineStyle),
     activeControls: activeControls,
     canFocus: focusToolbar,
     toolbarElements: toolbarElements
   })))));
 });
-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
+TextEditor.propTypes = {
+  "characterLimit": PropTypes.number,
+  "error": PropTypes.string,
+  "info": PropTypes.string,
+  "labelText": PropTypes.string.isRequired,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onChange": PropTypes.func.isRequired,
+  "onLinkAdded": PropTypes.func,
+  "previews": PropTypes.node,
+  "required": PropTypes.bool,
+  "rows": PropTypes.number,
+  "toolbarElements": PropTypes.node,
+  "value": PropTypes.object.isRequired,
+  "warning": PropTypes.string
 };
+export { TextEditor };
 export const TextEditorState = EditorState;
 export const TextEditorContentState = ContentState;
 export default TextEditor;

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

@@ -1,3 +1,11 @@
-export const StyledEditorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEditorContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledEditorOutline: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledEditorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledEditorContainer: import("styled-components").StyledComponent<"div", any, {
+    hasError?: boolean | undefined;
+    rows?: number | undefined;
+    hasPreview?: boolean | undefined;
+}, never>;
+declare const StyledEditorOutline: import("styled-components").StyledComponent<"div", any, {
+    isFocused?: boolean | undefined;
+    hasError?: boolean | undefined;
+}, never>;
+export { StyledEditorWrapper, StyledEditorContainer, StyledEditorOutline };

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

@@ -10,13 +10,12 @@ StyledEditorWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledEditorContainer = styled.div`
-  border-radius: var(--borderRadius050);
-
   ${({
   hasError,
   rows,
   hasPreview
 }) => css`
+    border-radius: var(--borderRadius050);
     min-height: ${rows ? `${rows * lineHeight}` : `${hasPreview ? 125 : 220}`}px;
     min-width: 320px;
     position: relative;

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

@@ -0,0 +1,6 @@
+export declare const BOLD = "BOLD";
+export declare const ITALIC = "ITALIC";
+export declare const UNORDERED_LIST = "unordered-list-item";
+export declare const ORDERED_LIST = "ordered-list-item";
+export declare type InlineStyleType = typeof BOLD | typeof ITALIC;
+export declare type BlockType = typeof UNORDERED_LIST | typeof ORDERED_LIST;

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

@@ -0,0 +1,4 @@
+export const BOLD = "BOLD";
+export const ITALIC = "ITALIC";
+export const UNORDERED_LIST = "unordered-list-item";
+export const ORDERED_LIST = "ordered-list-item";

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

@@ -6,7 +6,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import FormField from "../../__internal__/form-field";
-import useUniqueId from "../../__internal__/utils/helpers/useUniqueId";
+import useUniqueId from "../../hooks/__internal__/useUniqueId";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
 import StyledPrefix from "./__internal__/prefix.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";

package/esm/{__internal__/utils/helpers → hooks/__internal__}/useUniqueId/index.js

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import createGuid from "../guid";
+import createGuid from "../../../__internal__/utils/helpers/guid";
 export default ((id, name) => {
   const createdId = useRef(createGuid());
   const createdName = useRef(createGuid());

package/esm/locales/en-gb.js

@@ -102,6 +102,10 @@ const enGB = {
     pageX: () => "Page",
     ofY: count => `of ${count}`
   },
+  password: {
+    ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
+    ariaLiveHiddenMessage: () => "Your Password is currently hidden."
+  },
   progressTracker: {
     of: () => "of"
   },

package/esm/locales/locale.d.ts

@@ -75,6 +75,10 @@ interface Locale {
         pageX: () => string;
         ofY: (count: string | number) => string;
     };
+    password: {
+        ariaLiveShownMessage: () => string;
+        ariaLiveHiddenMessage: () => string;
+    };
     progressTracker: {
         of: () => string;
     };

package/esm/locales/pl-pl.js

@@ -152,6 +152,10 @@ const plPL = {
     pageX: () => "Strona",
     ofY: count => `z ${count}`
   },
+  password: {
+    ariaLiveShownMessage: () => "Zostało wyświetlone Twoje hasło. Skup się na haśle, aby je odczytać, jeśli jest to bezpieczne.",
+    ariaLiveHiddenMessage: () => "Twoje hasło jest obecnie ukryte."
+  },
   progressTracker: {
     of: () => "z"
   },

package/lib/components/button-minor/button-minor.component.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { ButtonProps } from "../button";
+export interface ButtonMinorProps extends ButtonProps {
+    /** @private @ignore */
+    isInPassword?: boolean;
+}
 export declare const ButtonMinor: {
-    ({ buttonType, size, ...rest }: ButtonProps): JSX.Element;
+    ({ buttonType, size, isInPassword, ...rest }: ButtonMinorProps): JSX.Element;
     displayName: string;
 };
 export default ButtonMinor;

package/lib/components/button-minor/button-minor.component.js

@@ -18,10 +18,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const ButtonMinor = ({
   buttonType = "secondary",
   size = "medium",
+  isInPassword,
   ...rest
 }) => /*#__PURE__*/_react.default.createElement(_buttonMinor.default, _extends({
   size: size,
-  buttonType: buttonType
+  buttonType: buttonType,
+  isInPassword: isInPassword
 }, rest));
 
 exports.ButtonMinor = ButtonMinor;
@@ -41,6 +43,7 @@ ButtonMinor.propTypes = {
   "iconTooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
   "iconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "id": _propTypes.default.string,
+  "isInPassword": _propTypes.default.bool,
   "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,
     "description": _propTypes.default.string,

package/lib/components/button-minor/button-minor.style.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const StyledButtonMinor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+import { ButtonMinorProps } from "./button-minor.component";
+declare const StyledButtonMinor: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, ButtonMinorProps, never>;
 export default StyledButtonMinor;

package/lib/components/button-minor/button-minor.style.js

@@ -77,6 +77,23 @@ const StyledButtonMinor = (0, _styledComponents.default)(_button.default)`
         }
       `}
     `}
+    
+    ${({
+  isInPassword,
+  disabled
+}) => isInPassword && !disabled && (0, _styledComponents.css)`
+      ${_icon.default} {
+        color: var(--colorsUtilityMajor300);
+      }
+
+      &:hover {
+        ${_icon.default} {
+          color: var(--colorsUtilityMajor300);
+        }
+        color: var(--colorsActionMinor500);
+        background: transparent;
+      }
+    `}
 
   ${({
   size

package/lib/components/button-minor/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./button-minor.component";
-export type { ButtonProps as ButtonMinorProps } from "../button";
+export type { ButtonMinorProps } from "./button-minor.component";

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -103,6 +103,10 @@ I18nProvider.propTypes = {
       "records": _propTypes.default.func.isRequired,
       "show": _propTypes.default.func.isRequired
     }),
+    "password": _propTypes.default.shape({
+      "ariaLiveHiddenMessage": _propTypes.default.func.isRequired,
+      "ariaLiveShownMessage": _propTypes.default.func.isRequired
+    }),
     "pod": _propTypes.default.shape({
       "undo": _propTypes.default.func.isRequired
     }),