carbon-react 132.2.1 → 133.0.0

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

@@ -17,7 +17,6 @@ import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
@@ -57,7 +56,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
-  inputRef,
   borderRadius,
   hideBorders = false,
   required,
@@ -83,10 +81,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       ref(inputElement);
     }
   }, [ref]);
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Textarea` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -185,7 +179,6 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     cols: cols,
     id: id,
     as: "textarea",
-    inputRef: inputRef,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
     inputBorderRadius: borderRadius,
     required: required
@@ -350,7 +343,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "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", "bill_paid", "bill_unpaid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "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", "check_all", "check_none", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "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", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "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", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

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

@@ -22,7 +22,6 @@ export const ALIGN_DEFAULT = "left";
 export const SIZE_DEFAULT = "medium";
 export const LABEL_WIDTH_DEFAULT = 30;
 export const LABEL_VALIDATION_DEFAULT = false;
-let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -50,7 +49,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
   value,
   readOnly,
   placeholder,
-  inputRef,
   onBlur,
   onClick,
   onFocus,
@@ -88,10 +86,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     disableErrorBorder
   } = useContext(NumeralDateContext);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
-  if (!deprecateInputRefWarnTriggered && inputRef) {
-    deprecateInputRefWarnTriggered = true;
-    Logger.deprecate("The `inputRef` prop in `Textbox` component is deprecated and will soon be removed. Please use `ref` instead.");
-  }
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -141,7 +135,6 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     deferTimeout: deferTimeout,
     disabled: disabled,
     id: uniqueId,
-    inputRef: inputRef,
     ref: ref,
     name: uniqueName,
     onBlur: onBlur,
@@ -318,7 +311,6 @@ if (process.env.NODE_ENV !== "production") {
     "inputHint": PropTypes.string,
     "inputIcon": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "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", "bill_paid", "bill_unpaid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "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", "check_all", "check_none", "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", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "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", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minimise", "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", "pin", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOptional": PropTypes.bool,

package/lib/__internal__/input/input.component.d.ts

@@ -15,8 +15,6 @@ export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     id?: string;
     /** Specify a custom border radius for the input. Any valid border-radius design token, or an array of border-radius design tokens. */
     inputBorderRadius?: BorderRadiusType | BorderRadiusType[];
-    /** A callback to retrieve the input reference */
-    inputRef?: (input: React.RefObject<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Name of the input */
     name?: string;
     /** Specify a callback triggered on blur */

package/lib/__internal__/input/input.component.js

@@ -41,8 +41,6 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   readOnly,
   autoFocus,
-  // TODO: remove inputRef prop from this component (and props interface) when it has been removed from all exposed input components
-  inputRef,
   onClick,
   onChangeDeferred,
   onChange,
@@ -76,11 +74,6 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
       element.setAttribute("enterkeyhint", enterKeyHint);
     }
   }, [autoFocus, ref, enterKeyHint]);
-  (0, _react.useEffect)(() => {
-    if (inputRef) {
-      inputRef(input);
-    }
-  }, [input, inputRef]);
   (0, _react.useEffect)(() => {
     if (context.inputRef) {
       context.inputRef(input);
@@ -258,7 +251,6 @@ if (process.env.NODE_ENV !== "production") {
     "inlist": _propTypes.default.any,
     "inputBorderRadius": _propTypes.default.any,
     "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
-    "inputRef": _propTypes.default.func,
     "is": _propTypes.default.string,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,

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

@@ -2,7 +2,6 @@ declare const _default: (isDisabled?: boolean, destructive?: boolean) => {
     primary: string;
     secondary: string;
     tertiary: string;
-    dashed: string;
     darkBackground: string;
     "gradient-grey": string;
     "gradient-white": string;

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

@@ -130,27 +130,6 @@ var _default = (isDisabled, destructive) => ({
           ${disabledImageStyle}
         ` : ""}
   `,
-  dashed: `
-    background: transparent;
-    border: 2px dashed var(--colorsActionMinor500);
-    ${makeColors("var(--colorsActionMinor500)")};
-    &:hover {
-      background-color: var(--colorsActionMinor200);
-    }
-
-    ${destructive ? `
-          border-color: var(--colorsSemanticNegative500);
-        ` : ""}
-
-    ${isDisabled ? `
-          border-color: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsActionMinorYin030)")};
-          &:hover {
-            background-color: transparent;
-          }
-          ${disabledImageStyle}
-        ` : ""}
-  `,
   darkBackground: `
     background: var(--colorsActionMajorYang100);
     border-color: transparent;

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

@@ -3,7 +3,7 @@ import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
-export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" | "gradient-grey" | "gradient-white";
+export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "darkBackground" | "gradient-grey" | "gradient-white";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps, TagProps {
@@ -26,8 +26,6 @@ export interface ButtonProps extends SpaceProps, TagProps {
     disabled?: boolean;
     /** Apply destructive style to the button */
     destructive?: boolean;
-    /** Ref to be forwarded */
-    forwardRef?: React.RefCallback<HTMLButtonElement> | React.MutableRefObject<HTMLButtonElement | null> | null;
     /** Apply fullWidth style to the button */
     fullWidth?: boolean;
     /** Used to transform button into anchor */
@@ -66,6 +64,4 @@ export interface ButtonProps extends SpaceProps, TagProps {
     rel?: string;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { ButtonWithForwardRef };
 export default Button;