carbon-react 118.2.0 → 118.3.0

package/esm/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/esm/components/button-minor/button-minor.component.js

@@ -7,10 +7,12 @@ import StyledButtonMinor from "./button-minor.style";
 const ButtonMinor = ({
   buttonType = "secondary",
   size = "medium",
+  isInPassword,
   ...rest
 }) => /*#__PURE__*/React.createElement(StyledButtonMinor, _extends({
   size: size,
-  buttonType: buttonType
+  buttonType: buttonType,
+  isInPassword: isInPassword
 }, rest));
 
 ButtonMinor.propTypes = {
@@ -29,6 +31,7 @@ ButtonMinor.propTypes = {
   "iconTooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
   "iconType": PropTypes.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.string,
+  "isInPassword": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/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/esm/components/button-minor/button-minor.style.js

@@ -61,6 +61,23 @@ const StyledButtonMinor = styled(Button)`
         }
       `}
     `}
+    
+    ${({
+  isInPassword,
+  disabled
+}) => isInPassword && !disabled && css`
+      ${StyledIcon} {
+        color: var(--colorsUtilityMajor300);
+      }
+
+      &:hover {
+        ${StyledIcon} {
+          color: var(--colorsUtilityMajor300);
+        }
+        color: var(--colorsActionMinor500);
+        background: transparent;
+      }
+    `}
 
   ${({
   size

package/esm/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/esm/components/i18n-provider/i18n-provider.component.js

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

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

@@ -33,6 +33,24 @@ const MenuFullscreen = ({
     if (Events.isEscKey(ev)) {
       onClose(ev);
     }
+
+    if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
+      var _menuWrapperRef$curre;
+
+      const search = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.querySelector('[data-component="search"');
+      const searchInput = search === null || search === void 0 ? void 0 : search.querySelector("input");
+      const searchButton = search === null || search === void 0 ? void 0 : search.querySelector("button"); // 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) {
+        var _menuWrapperRef$curre2, _elements;
+
+        ev.preventDefault();
+        const elements = Array.from((_menuWrapperRef$curre2 = menuWrapperRef.current) === null || _menuWrapperRef$curre2 === void 0 ? void 0 : _menuWrapperRef$curre2.querySelectorAll("a, input, button"));
+        const index = elements.indexOf(searchInput);
+        (_elements = elements[index + 2]) === null || _elements === void 0 ? void 0 : _elements.focus();
+      }
+    }
   };
 
   return /*#__PURE__*/React.createElement("li", {

package/esm/components/menu/menu-item/menu-item.component.js

@@ -111,7 +111,7 @@ const MenuItem = ({
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
 
-    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable
+    const shouldFocusIcon = ((_inputIcon$current2 = inputIcon.current) === null || _inputIcon$current2 === void 0 ? void 0 : _inputIcon$current2.getAttribute("tabindex")) === "0" && document.activeElement === inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value); // let natural tab order move focus if input icon is tabbable or input with button exists
 
     if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon.current)) {
       return;

package/esm/components/menu/menu-item/menu-item.style.js

@@ -300,18 +300,20 @@ const StyledMenuItemWrapper = styled.a.attrs({
         position: relative;
       }
 
-      a:focus,
-      a:hover,
-      button:focus,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
+      && {
+        a:focus,
+        a:hover,
+        button:focus,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+          color: var(--colorsComponentsMenuYang100);
 
-          ${!hasInput && `
-            [data-component="icon"] {
-              color: var(--colorsComponentsMenuYang100);
-            }
-          `}
+            ${!hasInput && `
+              [data-component="icon"] {
+                color: var(--colorsComponentsMenuYang100);
+              }
+            `}
+          }
         }
       }
     `}

package/esm/components/password/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./password.component";
+export type { PasswordProps } from "./password.component";

package/esm/components/password/index.js

@@ -0,0 +1 @@
+export { default } from "./password.component";

package/esm/components/password/password.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TextboxProps } from "../textbox";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface PasswordProps extends TextboxProps, TagProps {
+    /** When `true` input `type` is `password` and text is obscured. */
+    forceObscurity?: boolean;
+}
+export declare const Password: ({ id, disabled, forceObscurity, ...rest }: PasswordProps) => JSX.Element;
+export default Password;