carbon-react 106.7.0 → 107.1.1

package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ClickAwayWrapperProps {
+    children: React.ReactNode;
+    handleClickAway: (ev: CustomEvent) => void;
+    eventTypeId?: "mousedown" | "click";
+    targets: React.RefObject<HTMLElement>[];
+}
+declare const ClickAwayWrapper: {
+    ({ children, handleClickAway, eventTypeId, targets, }: ClickAwayWrapperProps): JSX.Element;
+    displayName: string;
+};
+export default ClickAwayWrapper;

package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import Events from "../utils/helpers/events";
+
+const ClickAwayWrapper = ({
+  children,
+  handleClickAway,
+  eventTypeId = "click",
+  targets
+}) => {
+  useEffect(() => {
+    const fnClickAway = ev => {
+      const clickedElements = targets.filter(ref => (ref === null || ref === void 0 ? void 0 : ref.current) && Events.composedPath(ev).includes(ref.current));
+
+      if (!clickedElements || !clickedElements.length) {
+        handleClickAway(ev);
+      }
+    };
+
+    document.addEventListener(eventTypeId, fnClickAway);
+    return function cleanup() {
+      document.removeEventListener(eventTypeId, fnClickAway);
+    };
+  }, [handleClickAway, targets, eventTypeId]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+ClickAwayWrapper.propTypes = {
+  "children": PropTypes.node,
+  "eventTypeId": PropTypes.oneOf(["click", "mousedown"]),
+  "handleClickAway": PropTypes.func.isRequired,
+  "targets": PropTypes.arrayOf(PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
+  })).isRequired
+};
+ClickAwayWrapper.displayName = "ClickAwayWrapper";
+export default ClickAwayWrapper;

package/esm/__internal__/click-away-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./click-away-wrapper.component";
+export type { ClickAwayWrapperProps } from "./click-away-wrapper.component";

package/esm/__internal__/click-away-wrapper/index.js

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

package/esm/components/badge/badge.style.d.ts

@@ -3,7 +3,7 @@ import Icon from "../icon";
 declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledButton: import("styled-components").StyledComponent<{
-    ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
+    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
     displayName: string;
 }, any, {}, never>;
 declare const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;

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

@@ -10,8 +10,6 @@ export interface ButtonProps extends SpaceProps {
      * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
      */
     "aria-label"?: string;
-    /** [Legacy] Button types for legacy theme: "primary" | "secondary" */
-    as?: ButtonTypes;
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
     buttonType?: ButtonTypes;
     /** The text the button displays */
@@ -60,7 +58,7 @@ export interface ButtonProps extends SpaceProps {
     rel?: string;
 }
 declare const Button: {
-    ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
+    ({ size, subtext, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: ButtonProps): JSX.Element;
     displayName: string;
 };
 declare const ButtonWithForwardRef: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/esm/components/button/button.component.js

@@ -7,7 +7,6 @@ import Icon from "../icon";
 import StyledButton, { StyledButtonSubtext } from "./button.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import Logger from "../../__internal__/utils/logger";
 
 function renderChildren({
   /* eslint-disable react/prop-types */
@@ -74,12 +73,10 @@ renderChildren.propTypes = {
     }
   }
 };
-let deprecatedWarnTriggered = false;
 
 const Button = ({
   size = "medium",
   subtext = "",
-  as,
   children,
   forwardRef,
   "aria-label": ariaLabel,
@@ -99,12 +96,6 @@ const Button = ({
   fullWidth = false,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && as) {
-    deprecatedWarnTriggered = true;
-    Logger.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `Button` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
-  }
-
   invariant(!!(children || iconType), "Either prop `iconType` must be defined or this node must have children.");
 
   if (subtext) {
@@ -112,7 +103,7 @@ const Button = ({
   }
 
   const [internalRef, setInternalRef] = useState();
-  const buttonType = as || buttonTypeProp;
+  const buttonType = buttonTypeProp;
   let paddingX;
 
   const handleLinkKeyDown = event => {
@@ -182,7 +173,6 @@ const Button = ({
 
 Button.propTypes = {
   "aria-label": PropTypes.string,
-  "as": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
   "destructive": PropTypes.bool,
@@ -522,7 +512,6 @@ const ButtonWithForwardRef = /*#__PURE__*/React.forwardRef((props, ref) => /*#__
 }, props)));
 ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
-  "as": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
   "destructive": PropTypes.bool,

package/esm/components/button/button.style.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "as"> & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
     iconOnly?: boolean | undefined;
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/button-toggle-group/button-toggle-group.component.js

@@ -6,7 +6,7 @@ import styledSystemPropTypes from "@styled-system/prop-types";
 import FormField from "../../__internal__/form-field";
 import ButtonToggleGroupStyle from "./button-toggle-group.style";
 import ButtonToggle from "../button-toggle";
-import RadioButtonMapper from "../radio-button/radio-button-mapper.component";
+import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";

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

@@ -1,12 +1,11 @@
 export default Confirm;
-declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
+declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
     [x: string]: any;
     "aria-labelledby": any;
     "aria-describedby": any;
     "aria-label": any;
     open: any;
     children: any;
-    destructive: any;
     cancelButtonDestructive: any;
     confirmButtonDestructive: any;
     cancelButtonType: any;
@@ -30,7 +29,6 @@ declare namespace Confirm {
     namespace defaultProps {
         const size: string;
         const showCloseIcon: boolean;
-        const destructive: boolean;
         const cancelButtonDestructive: boolean;
         const confirmButtonDestructive: boolean;
         const iconType: null;
@@ -81,8 +79,6 @@ declare namespace Confirm {
         confirmLabel: PropTypes.Requireable<string>;
         /** Customise the cancel button label */
         cancelLabel: PropTypes.Requireable<string>;
-        /** Apply destructive style to the buttons */
-        destructive: PropTypes.Requireable<boolean>;
         /** Apply destructive style to the cancel button */
         cancelButtonDestructive: PropTypes.Requireable<boolean>;
         /** Apply destructive style to the confirm button */

package/esm/components/confirm/confirm.component.js

@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
-import Logger from "../../__internal__/utils/logger";
 import Heading from "../heading";
 import Dialog from "../dialog";
 import { StyledConfirmButtons, StyledConfirmHeading } from "./confirm.style";
@@ -11,7 +10,6 @@ import Button from "../button/button.component";
 import Icon from "../icon";
 import Loader from "../loader";
 import useLocale from "../../hooks/__internal__/useLocale";
-let deprecatedWarnTriggered = false;
 
 const Confirm = ({
   "aria-labelledby": ariaLabelledBy,
@@ -19,7 +17,6 @@ const Confirm = ({
   "aria-label": ariaLabel,
   open,
   children,
-  destructive,
   cancelButtonDestructive,
   confirmButtonDestructive,
   cancelButtonType,
@@ -40,11 +37,6 @@ const Confirm = ({
   title,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && destructive) {
-    deprecatedWarnTriggered = true;
-    Logger.deprecate("`destructive` prop is deprecated and will soon be removed. Please use `cancelButtonDestructive` and `confirmButtonDestructive` props.");
-  }
-
   const l = useLocale();
   const {
     current: titleId
@@ -72,7 +64,7 @@ const Confirm = ({
       onClick: onCancel,
       "data-element": "cancel",
       buttonType: cancelButtonType,
-      destructive: destructive || cancelButtonDestructive,
+      destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
@@ -83,7 +75,7 @@ const Confirm = ({
     onClick: onConfirm,
     "data-element": "confirm",
     buttonType: confirmButtonType,
-    destructive: destructive || confirmButtonDestructive,
+    destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
@@ -127,7 +119,6 @@ const Confirm = ({
 Confirm.defaultProps = {
   size: "extra-small",
   showCloseIcon: false,
-  destructive: false,
   cancelButtonDestructive: false,
   confirmButtonDestructive: false,
   iconType: null,
@@ -195,9 +186,6 @@ Confirm.propTypes = {
   /** Customise the cancel button label */
   cancelLabel: PropTypes.string,
 
-  /** Apply destructive style to the buttons */
-  destructive: PropTypes.bool,
-
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive: PropTypes.bool,
 

package/esm/components/confirm/confirm.d.ts

@@ -21,8 +21,6 @@ export interface ConfirmProps extends DialogProps {
   cancelLabel?: string;
   /** Customise the confirm button label */
   confirmLabel?: string;
-  /** Apply destructive style to the buttons */
-  destructive?: boolean;
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive?: boolean;
   /** Apply destructive style to the confirm button */

package/esm/components/date/date.component.js

@@ -12,6 +12,7 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
+import ClickAwayWrapper from "../../__internal__/click-away-wrapper";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const DateInput = ({
@@ -234,23 +235,6 @@ const DateInput = ({
     }
   };
 
-  useEffect(() => {
-    const fnClosePicker = ev => {
-      if (open && !Events.composedPath(ev).includes(parentRef.current) && !Events.composedPath(ev).includes(pickerRef.current)) {
-        alreadyFocused.current = true;
-        inputRef.current.focus();
-        isBlurBlocked.current = false;
-        inputRef.current.blur();
-        setOpen(false);
-        alreadyFocused.current = false;
-      }
-    };
-
-    document.addEventListener("mousedown", fnClosePicker);
-    return function cleanup() {
-      document.removeEventListener("mousedown", fnClosePicker);
-    };
-  }, [open]);
   useEffect(() => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
 
@@ -282,7 +266,22 @@ const DateInput = ({
     return value;
   };
 
-  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
+    handleClickAway: handleClickAway,
+    eventTypeId: "mousedown",
+    targets: [parentRef, pickerRef]
+  }, /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -322,13 +321,13 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  }));
+  })));
 };
 
 DateInput.propTypes = { ...Textbox.propTypes,
   ...marginPropTypes,
 
-  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: PropTypes.object,

package/esm/components/date/date.d.ts

@@ -2,6 +2,15 @@ import * as React from "react";
 import { DayPickerProps } from "react-day-picker";
 import { TextboxProps } from "../textbox/textbox";
 
+export interface DateChangeEvent {
+  target: {
+    value: {
+      formattedValue: string;
+      rawValue: string;
+    };
+  };
+}
+
 export interface DateInputProps
   extends Omit<
     TextboxProps,
@@ -31,7 +40,7 @@ export interface DateInputProps
   /** Maximum possible date YYYY-MM-DD */
   maxDate?: string;
   /** Specify a callback triggered on change */
-  onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (ev: DateChangeEvent) => void;
   /** The current date string */
   value: string;
   /** Pass any props that match the DayPickerProps interface to override default behaviors */

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

@@ -1 +1,2 @@
 export { default } from "./date";
+export type { DateChangeEvent } from "./date";

package/esm/components/date-range/date-range.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 import { DateInputProps } from "../date/date";
 
-interface DateRangeChangeEvent {
+export interface DateRangeChangeEvent {
   target: {
     value: [
       {
@@ -19,7 +19,7 @@ interface DateRangeChangeEvent {
 
 export interface DateRangeProps extends MarginProps {
   /** Props for the child end Date component */
-  endDateProps?: DateInputProps;
+  endDateProps?: Partial<DateInputProps>;
   /** Optional label for endDate field */
   endLabel?: string;
   /**
@@ -51,7 +51,7 @@ export interface DateRangeProps extends MarginProps {
   /** Specify a callback triggered on blur */
   onBlur?: (ev: DateRangeChangeEvent) => void;
   /** Props for the child start Date component */
-  startDateProps?: DateInputProps;
+  startDateProps?: Partial<DateInputProps>;
   /** Optional label for startDate field */
   startLabel?: string;
   /**

package/esm/components/date-range/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./date-range";
 export { default as DateRangeContext } from "./date-range-context";
+export type { DateRangeChangeEvent } from "./date-range";

package/esm/components/dialog-full-screen/content.style.js

@@ -80,15 +80,9 @@ const StyledContent = styled.div`
 
   ${({
   hasHeader
-}) => !hasHeader && `
-    padding-top: 0;
-    margin-top: -25px;
-
-    .carbon-app-wrapper {
-      max-width: 100%;
-      padding: 0;
-      height: 70px;
-    }
-  `}
+}) => !hasHeader && css`
+      padding-top: 0;
+      margin-top: -25px;
+    `}
 `;
 export default StyledContent;

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

@@ -1,64 +1,44 @@
 export default Heading;
-declare class Heading extends React.Component<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    get help(): JSX.Element | null;
-    get back(): JSX.Element | null;
-    get subheader(): JSX.Element | null;
-    get separator(): JSX.Element | null;
-    get divider(): JSX.Element | null;
-    get pills(): JSX.Element | null;
-    render(): JSX.Element | null;
-}
+declare function Heading({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: {
+    [x: string]: any;
+    children: any;
+    backLink: any;
+    divider?: boolean | undefined;
+    help: any;
+    helpAriaLabel: any;
+    helpLink: any;
+    pills: any;
+    separator?: boolean | undefined;
+    subheader: any;
+    subtitleId: any;
+    title: any;
+    titleId: any;
+}): JSX.Element | null;
 declare namespace Heading {
     const propTypes: {
-        /**
-         * Children elements
-         */
+        /** Child elements */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title for the heading.
-         */
+        /** Defines the title for the heading. */
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title id for the heading.
-         */
+        /** Defines the title id for the heading. */
         titleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the subheader for the heading.
-         */
+        /** Defines the subheader for the heading. */
         subheader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the subtitle id for the heading.
-         */
+        /** Defines the subtitle id for the heading. */
         subtitleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the help text for the heading.
-         */
+        /** Defines the help text for the heading. */
         help: PropTypes.Requireable<string>;
-        /**
-         * Defines the help link for the heading.
-         */
+        /** Defines the help link for the heading. */
         helpLink: PropTypes.Requireable<string>;
-        /**
-         * Defines the a href for the back link.
-         */
+        /** Defines the a href for the back link. */
         backLink: PropTypes.Requireable<string | ((...args: any[]) => any)>;
-        /**
-         * Adds a divider below the heading and the content.
-         */
+        /** Adds a divider below the heading and the content. */
         divider: PropTypes.Requireable<boolean>;
-        /**
-         * Adds a separator between the title and the subheader.
-         */
+        /** Adds a separator between the title and the subheader. */
         separator: PropTypes.Requireable<boolean>;
-        /**
-         * Pills that will be added after the title.
-         */
+        /** Pills that will be added after the title. */
         pills: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Aria label for rendered help component
-         */
+        /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
         marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -75,10 +55,5 @@ declare namespace Heading {
         marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
-    namespace defaultProps {
-        const divider: boolean;
-        const separator: boolean;
-    }
 }
-import React from "react";
 import PropTypes from "prop-types";