carbon-react 109.7.1 → 110.0.2

package/lib/components/profile/profile.config.d.ts

@@ -0,0 +1,55 @@
+export declare const PROFILE_SIZES: readonly ["XS", "S", "M", "ML", "L", "XL", "XXL"];
+declare type AllProfileSizes = typeof PROFILE_SIZES;
+export declare type ProfileSize = AllProfileSizes[number];
+declare const _default: {
+    XS: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    S: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    M: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    ML: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    L: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    XL: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+    XXL: {
+        nameSize: string;
+        emailSize: string;
+        lineHeight: string;
+        marginLeft: string;
+        marginTop: string;
+    };
+};
+export default _default;

package/lib/components/profile/profile.style.d.ts

@@ -0,0 +1,16 @@
+import Portrait from "../portrait";
+import { ProfileSize } from "./profile.config";
+interface ProfileSizeProps {
+    size?: ProfileSize;
+}
+interface ProfileHasSrcProps {
+    hasSrc: boolean;
+}
+interface ProfileDetailsStyleProps extends ProfileSizeProps, ProfileHasSrcProps {
+}
+declare const ProfileNameStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
+declare const ProfileEmailStyle: import("styled-components").StyledComponent<"span", any, ProfileSizeProps, never>;
+declare const ProfileStyle: import("styled-components").StyledComponent<"div", any, ProfileHasSrcProps, never>;
+declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, ProfileDetailsStyleProps, never>;
+declare const ProfileAvatarStyle: import("styled-components").StyledComponent<typeof Portrait, any, {}, never>;
+export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, };

package/lib/components/profile/profile.style.js

@@ -21,13 +21,13 @@ const ProfileNameStyle = _styledComponents.default.span`
   font-weight: bold;
   display: block;
   font-size: ${({
-  size
+  size = "M"
 }) => _profile.default[size].nameSize};
 `;
 exports.ProfileNameStyle = ProfileNameStyle;
 const ProfileEmailStyle = _styledComponents.default.span`
   font-size: ${({
-  size
+  size = "M"
 }) => _profile.default[size].emailSize};
 `;
 exports.ProfileEmailStyle = ProfileEmailStyle;
@@ -46,13 +46,13 @@ const ProfileDetailsStyle = _styledComponents.default.div`
   display: inline-block;
   margin-top: ${({
   hasSrc,
-  size
+  size = "M"
 }) => hasSrc ? _profile.default[size].marginTop : ""};
   line-height: ${({
-  size
+  size = "M"
 }) => _profile.default[size].lineHeight};
   margin-left: ${({
-  size
+  size = "M"
 }) => _profile.default[size].marginLeft};
 `;
 exports.ProfileDetailsStyle = ProfileDetailsStyle;
@@ -62,13 +62,4 @@ const ProfileAvatarStyle = (0, _styledComponents.default)(_portrait.default)`
 exports.ProfileAvatarStyle = ProfileAvatarStyle;
 ProfileStyle.defaultProps = {
   theme: _base.default
-};
-ProfileNameStyle.defaultProps = {
-  size: "M"
-};
-ProfileEmailStyle.defaultProps = {
-  size: "M"
-};
-ProfileDetailsStyle.defaultProps = {
-  size: "M"
 };

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

@@ -201,10 +201,11 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
-  (0, _useClickAwayListener.default)([splitButtonNode], hideButtons);
+  const handleClick = (0, _useClickAwayListener.default)(hideButtons);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,
+    onClick: handleClick,
     ref: splitButtonNode
   }, componentTags(), (0, _utils.filterStyledSystemMarginProps)(rest)), renderMainButton(), renderAdditionalButtons());
 };

package/lib/components/text-editor/__internal__/editor-link/editor-link.component.js

@@ -47,12 +47,11 @@ const EditorLink = ({
 
   }, [validUrl]);
   return /*#__PURE__*/_react.default.createElement(_editorLink.default, _extends({
-    href: validUrl,
+    href: !editMode ? validUrl : undefined,
     title: validUrl,
-    "aria-label": validUrl,
+    "aria-label": !editMode ? validUrl : undefined,
     target: "_blank",
-    rel: "noopener noreferrer",
-    tabbable: !editMode
+    rel: "noopener noreferrer"
   }, rest), children);
 };
 

package/lib/hooks/__internal__/useClickAwayListener/useClickAwayListener.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-declare const _default: (targets: React.RefObject<HTMLElement>[], handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => void;
+declare const _default: (handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => () => void;
 export default _default;

package/lib/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -7,27 +7,29 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _default = (targets, handleClickAway, eventTypeId = "click") => {
-  const targetsRef = (0, _react.useRef)(targets);
-  targetsRef.current = targets;
-  (0, _react.useEffect)(() => {
-    const fnClickAway = ev => {
-      const clickedElements = targetsRef.current.filter(targetRef => {
-        var _targetRef$current;
-
-        return (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.contains(ev === null || ev === void 0 ? void 0 : ev.target);
-      });
+// Needs to also take Portals into account (so can't just check DOM containment), but ideally without using
+// event.stopPropagation() which could have unexpected and frustrating consequences for consumers.
+// Simple approach taken from https://github.com/facebook/react/issues/10962#issuecomment-444622208
+var _default = (handleClickAway, eventTypeId = "click") => {
+  const clickIsInside = (0, _react.useRef)(false);
+  const onDocumentClick = (0, _react.useCallback)(ev => {
+    if (clickIsInside.current) {
+      clickIsInside.current = false;
+      return;
+    }
 
-      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
-        handleClickAway(ev);
-      }
-    };
-
-    document.addEventListener(eventTypeId, fnClickAway);
+    handleClickAway(ev);
+  }, [handleClickAway]);
+  const onInsideClick = (0, _react.useCallback)(() => {
+    clickIsInside.current = true;
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener(eventTypeId, onDocumentClick);
     return function cleanup() {
-      document.removeEventListener(eventTypeId, fnClickAway);
+      document.removeEventListener(eventTypeId, onDocumentClick);
     };
-  }, [handleClickAway, eventTypeId]);
+  }, [onDocumentClick, eventTypeId]);
+  return onInsideClick;
 };
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.7.1",
+  "version": "110.0.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/definition-list/dd.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface DdProps extends SpaceProps {
-  /** Prop for what will render in the `<Dd></Dd>` tags */
-  children: React.ReactNode;
-}
-
-declare function DdComponent(props: DdProps): JSX.Element;
-
-export default DdComponent;

package/esm/components/definition-list/dl.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface DlProps extends SpaceProps {
-  /** This string will specify the text align styling of the `<dt></dt>`. */
-  dtTextAlign?: "left" | "center" | "right";
-  /** This string will specify the text align styling of the `<dd></dd>`. */
-  ddTextAlign?: "left" | "center" | "right";
-  /** This value will specify the width of the `StyledDtDiv` as a percentage. */
-  w?: number;
-  /** prop to render children. */
-  children: React.ReactNode;
-  /** Render the DefinitionList as a single column */
-  asSingleColumn?: boolean;
-}
-
-declare function DlComponent(props: DlProps): JSX.Element;
-
-export default DlComponent;

package/esm/components/definition-list/dt.d.ts

@@ -1,10 +0,0 @@
-import { SpaceProps } from "styled-system";
-
-export interface DtProps extends SpaceProps {
-  /** prop for dt text */
-  children: string;
-}
-
-declare function DtComponent(props: DtProps): JSX.Element;
-
-export default DtComponent;

package/esm/components/profile/profile.d.ts

@@ -1,18 +0,0 @@
-export interface ProfileProps {
-  /** [Legacy] A custom class name for the component */
-  className?: string;
-  /** Custom source URL */
-  src?: string;
-  /** Define the name to display. */
-  name: string;
-  /** Define the email to use (will check Gravatar for image). */
-  email: string;
-  /** Define initials to display if there is no Gravatar image. */
-  initials?: string;
-  /** Allow to setup size for the component */
-  size?: "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-}
-
-declare function Profile(props: ProfileProps): JSX.Element;
-
-export default Profile;

package/lib/components/definition-list/dd.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface DdProps extends SpaceProps {
-  /** Prop for what will render in the `<Dd></Dd>` tags */
-  children: React.ReactNode;
-}
-
-declare function DdComponent(props: DdProps): JSX.Element;
-
-export default DdComponent;

package/lib/components/definition-list/dl.d.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface DlProps extends SpaceProps {
-  /** This string will specify the text align styling of the `<dt></dt>`. */
-  dtTextAlign?: "left" | "center" | "right";
-  /** This string will specify the text align styling of the `<dd></dd>`. */
-  ddTextAlign?: "left" | "center" | "right";
-  /** This value will specify the width of the `StyledDtDiv` as a percentage. */
-  w?: number;
-  /** prop to render children. */
-  children: React.ReactNode;
-  /** Render the DefinitionList as a single column */
-  asSingleColumn?: boolean;
-}
-
-declare function DlComponent(props: DlProps): JSX.Element;
-
-export default DlComponent;

package/lib/components/definition-list/dt.d.ts

@@ -1,10 +0,0 @@
-import { SpaceProps } from "styled-system";
-
-export interface DtProps extends SpaceProps {
-  /** prop for dt text */
-  children: string;
-}
-
-declare function DtComponent(props: DtProps): JSX.Element;
-
-export default DtComponent;

package/lib/components/profile/profile.d.ts

@@ -1,18 +0,0 @@
-export interface ProfileProps {
-  /** [Legacy] A custom class name for the component */
-  className?: string;
-  /** Custom source URL */
-  src?: string;
-  /** Define the name to display. */
-  name: string;
-  /** Define the email to use (will check Gravatar for image). */
-  email: string;
-  /** Define initials to display if there is no Gravatar image. */
-  initials?: string;
-  /** Allow to setup size for the component */
-  size?: "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-}
-
-declare function Profile(props: ProfileProps): JSX.Element;
-
-export default Profile;