carbon-react 110.4.0 → 110.5.1

package/esm/__internal__/i18n-context/index.d.ts

@@ -1,2 +1,3 @@
-declare var _default: import("react").Context<import("../../locales/locale").default>;
+/// <reference types="react" />
+declare const _default: import("react").Context<import("../../locales/locale").default>;
 export default _default;

package/esm/__internal__/popover/popover.component.d.ts

@@ -13,6 +13,7 @@ export interface PopoverProps {
     onFirstUpdate?: (state: Partial<State>) => void;
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { createPopper } from "@popperjs/core";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import StyledBackdrop from "./popover.style";
+import { StyledBackdrop, StyledPopoverContent } from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import { ModalContext } from "../../components/modal/modal.component";
 
@@ -14,12 +14,12 @@ const Popover = ({
   reference,
   onFirstUpdate,
   modifiers,
-  disableBackgroundUI
+  disableBackgroundUI,
+  isOpen = true
 }) => {
   var _reference$current;
 
-  const elementDOM = useRef(null); // TODO: Remove TempModalContext after modal has been converted to TS
-
+  const elementDOM = useRef(null);
   const {
     isInModal
   } = useContext(ModalContext);
@@ -52,6 +52,13 @@ const Popover = ({
 
     popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
   });
+  useEffect(() => {
+    if (isOpen) {
+      var _popperInstance$curre2;
+
+      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
+    }
+  }, [isOpen]);
   useLayoutEffect(() => {
     if (reference.current) {
       popperInstance.current = createPopper(reference.current, popperElementRef.current, {
@@ -82,6 +89,9 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+  content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
+    isOpen: isOpen
+  }, content);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledBackdrop, null, content);
@@ -98,6 +108,7 @@ Popover.propTypes = {
   "children": PropTypes.element.isRequired,
   "disableBackgroundUI": PropTypes.bool,
   "disablePortal": PropTypes.bool,
+  "isOpen": PropTypes.bool,
   "modifiers": PropTypes.arrayOf(PropTypes.shape({
     "enabled": PropTypes.bool,
     "name": PropTypes.string.isRequired,

package/esm/__internal__/popover/popover.style.d.ts

@@ -1,2 +1,6 @@
-declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default StyledBackdrop;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledPopoverContentProps = {
+    isOpen?: boolean;
+};
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
+export {};

package/esm/__internal__/popover/popover.style.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import baseTheme from "../../style/themes/base";
-const StyledBackdrop = styled.div`
+export const StyledBackdrop = styled.div`
   bottom: 0;
   left: 0;
   position: fixed;
@@ -14,4 +14,8 @@ const StyledBackdrop = styled.div`
 StyledBackdrop.defaultProps = {
   theme: baseTheme
 };
-export default StyledBackdrop;
+export const StyledPopoverContent = styled.div`
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
+`;

package/esm/components/i18n-provider/i18n-provider.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Locale from "../../locales";
+export interface I18nProviderProps {
+    locale?: Partial<Locale>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export default I18nProvider;

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

@@ -1,6 +1,6 @@
 import React from "react";
-import merge from "lodash/merge";
 import PropTypes from "prop-types";
+import merge from "lodash/merge";
 import Context from "../../__internal__/i18n-context";
 import enGB from "../../locales/en-gb";
 
@@ -9,87 +9,107 @@ const I18nProvider = ({
   children
 }) => locale ? /*#__PURE__*/React.createElement(Context.Provider, {
   value: merge({}, enGB, locale)
-}, children) : children;
+}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 
-I18nProvider.defaultProps = {
-  locale: undefined
-};
 I18nProvider.propTypes = {
-  locale: PropTypes.shape({
-    locale: PropTypes.func,
-    actions: PropTypes.shape({
-      edit: PropTypes.func,
-      delete: PropTypes.func,
-      reset: PropTypes.func
-    }),
-    actionPopover: PropTypes.shape({
-      ariaLabel: PropTypes.func
-    }),
-    batchSelection: PropTypes.shape({
-      selected: PropTypes.func
-    }),
-    confirm: PropTypes.shape({
-      no: PropTypes.func,
-      yes: PropTypes.func
-    }),
-    date: PropTypes.shape({
-      dateFnsLocale: PropTypes.func
-    }),
-    errors: PropTypes.shape({
-      messages: PropTypes.shape({
-        formSummary: PropTypes.func
-      })
-    }),
-    message: PropTypes.shape({
-      closeButtonAriaLabel: PropTypes.func
-    }),
-    numeralDate: PropTypes.shape({
-      validation: PropTypes.shape({
-        day: PropTypes.func,
-        month: PropTypes.func,
-        year: PropTypes.func
-      })
-    }),
-    pager: PropTypes.shape({
-      show: PropTypes.func,
-      records: PropTypes.func,
-      first: PropTypes.func,
-      last: PropTypes.func,
-      next: PropTypes.func,
-      previous: PropTypes.func,
-      pageX: PropTypes.func,
-      ofY: PropTypes.func
-    }),
-    select: PropTypes.shape({
-      actionButtonText: PropTypes.func,
-      placeholder: PropTypes.func,
-      noResultsForTerm: PropTypes.func
-    }),
-    switch: PropTypes.shape({
-      on: PropTypes.func,
-      off: PropTypes.func
-    }),
-    table: PropTypes.shape({
-      noData: PropTypes.func
-    }),
-    textEditor: PropTypes.shape({
-      tooltipMessages: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      }),
-      ariaLabels: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      })
-    }),
-    titleSelect: PropTypes.shape({
-      deselect: PropTypes.func
+  "children": PropTypes.node,
+  "locale": PropTypes.shape({
+    "actionPopover": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired
+    }),
+    "actions": PropTypes.shape({
+      "delete": PropTypes.func.isRequired,
+      "edit": PropTypes.func.isRequired
+    }),
+    "batchSelection": PropTypes.shape({
+      "selected": PropTypes.func.isRequired
+    }),
+    "confirm": PropTypes.shape({
+      "no": PropTypes.func.isRequired,
+      "yes": PropTypes.func.isRequired
+    }),
+    "date": PropTypes.shape({
+      "dateFnsLocale": PropTypes.func.isRequired
+    }),
+    "dialog": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "dialogFullScreen": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "errors": PropTypes.shape({
+      "messages": PropTypes.shape({
+        "formSummary": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "heading": PropTypes.shape({
+      "backLinkAriaLabel": PropTypes.func.isRequired
+    }),
+    "link": PropTypes.shape({
+      "skipLinkLabel": PropTypes.func.isRequired
+    }),
+    "locale": PropTypes.func,
+    "message": PropTypes.shape({
+      "closeButtonAriaLabel": PropTypes.func.isRequired
+    }),
+    "numeralDate": PropTypes.shape({
+      "validation": PropTypes.shape({
+        "day": PropTypes.func.isRequired,
+        "month": PropTypes.func.isRequired,
+        "year": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "pager": PropTypes.shape({
+      "first": PropTypes.func.isRequired,
+      "last": PropTypes.func.isRequired,
+      "next": PropTypes.func.isRequired,
+      "ofY": PropTypes.func.isRequired,
+      "pageX": PropTypes.func.isRequired,
+      "previous": PropTypes.func.isRequired,
+      "records": PropTypes.func.isRequired,
+      "show": PropTypes.func.isRequired
+    }),
+    "select": PropTypes.shape({
+      "actionButtonText": PropTypes.func.isRequired,
+      "noResultsForTerm": PropTypes.func.isRequired,
+      "placeholder": PropTypes.func.isRequired
+    }),
+    "sidebar": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "switch": PropTypes.shape({
+      "off": PropTypes.func.isRequired,
+      "on": PropTypes.func.isRequired
+    }),
+    "textEditor": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired,
+      "tooltipMessages": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "tileSelect": PropTypes.shape({
+      "deselect": PropTypes.func.isRequired
+    }),
+    "toast": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
     })
-  }),
-  children: PropTypes.node.isRequired
+  })
 };
+export { I18nProvider };
 export default I18nProvider;

package/esm/components/i18n-provider/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./i18n-provider";
+export { default } from "./i18n-provider.component";
+export type { I18nProviderProps } from "./i18n-provider.component";

package/esm/components/icon/icon.component.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Tooltip from "../tooltip";
@@ -7,6 +7,7 @@ import { TooltipContext } from "../../__internal__/tooltip-provider";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
+import { TabTitleContext } from "../tabs/__internal__/tab-title/tab-title.component";
 const Icon = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,
@@ -47,9 +48,12 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     disabled: disabledFromContext,
     target
   } = useContext(TooltipContext);
+  const {
+    isInTab
+  } = useContext(TabTitleContext);
   /** Return Icon type with overrides */
 
-  const iconType = () => {
+  const iconType = useMemo(() => {
     // switch tweaks icon names for actual icons in the set
     switch (type) {
       case "help":
@@ -71,10 +75,16 @@ const Icon = /*#__PURE__*/React.forwardRef(({
       default:
         return type;
     }
-  };
-
+  }, [type]);
   const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
   const hasTooltip = !disabled && !disabledFromContext && !!tooltipMessage && isFocusable;
+  const computedTabIndex = useMemo(() => {
+    if (isInTab) {
+      return undefined;
+    }
+
+    return hasTooltip && tabIndex === undefined ? 0 : tabIndex;
+  }, [isInTab, hasTooltip, tabIndex]);
   const styledIconProps = {
     "aria-hidden": ariaHidden,
     "aria-label": ariaLabel,
@@ -83,7 +93,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     bgShape,
     className: className || undefined,
     color,
-    "data-element": iconType(),
+    "data-element": iconType,
     disabled: disabledFromContext || disabled,
     fontSize,
     hasTooltip,
@@ -92,15 +102,18 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     key: "icon",
     ref,
     role,
-    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
-    type: iconType(),
+    tabIndex: computedTabIndex,
+    type: iconType,
     ...tagComponent("icon", rest),
     ...filterStyledSystemMarginProps(rest)
   };
 
+  const shouldShowTooltip = () => {
+    return tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
+  };
+
   if (tooltipMessage) {
-    const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
-    const visible = disabled ? undefined : showTooltip;
+    const visible = disabled ? undefined : shouldShowTooltip();
     return /*#__PURE__*/React.createElement(Tooltip, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

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

@@ -1 +1,2 @@
-export { default } from "./message";
+export { default } from "./message.component";
+export type { MessageProps } from "./message.component";

package/esm/components/message/message-content/message-content.component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface MessageContentProps {
+    /** set message title */
+    title?: React.ReactNode;
+    /** set content to component */
+    children?: React.ReactNode;
+}
+declare const MessageContent: ({ title, children }: MessageContentProps) => JSX.Element;
+export default MessageContent;

package/esm/components/message/message-content/message-content.component.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Content from "../../content/content.component.js";
+import Content from "../../content";
 import MessageContentStyle from "./message-content.style";
 
 const MessageContent = ({
@@ -8,13 +8,12 @@ const MessageContent = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, null, /*#__PURE__*/React.createElement(Content, {
-    title: title,
-    className: "message-content"
+    title: title
   }, children));
 };
 
 MessageContent.propTypes = {
-  title: PropTypes.node,
-  children: PropTypes.node
+  "children": PropTypes.node,
+  "title": PropTypes.node
 };
 export default MessageContent;

package/esm/components/message/message-content/message-content.style.d.ts

@@ -0,0 +1,2 @@
+declare const MessageContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default MessageContentStyle;

package/esm/components/message/message-content/message-content.style.js

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { margin } from "styled-system";
 const MessageContentStyle = styled.div`
   padding: 15px 50px 15px 20px;
   white-space: pre-wrap;
@@ -12,7 +11,5 @@ const MessageContentStyle = styled.div`
   .carbon-content__body {
     margin-top: 0px;
   }
-
-  ${margin}
 `;
 export default MessageContentStyle;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export declare type MessageVariant = "error" | "info" | "success" | "warning";
+export interface MessageProps extends MarginProps {
+    /** set content to component */
+    children?: React.ReactNode;
+    /** set custom class to component */
+    className?: string;
+    /** set custom aria label for message close button */
+    closeButtonAriaLabel?: string;
+    /** set custom id to component root */
+    id?: string;
+    /** function runs when user click dismiss button */
+    onDismiss?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** show message component */
+    open?: boolean;
+    /** determines if the close icon is shown */
+    showCloseIcon?: boolean;
+    /** set message title */
+    title?: React.ReactNode;
+    /** set background to be invisible */
+    transparent?: boolean;
+    /** set type of message based on new DLS standard */
+    variant?: MessageVariant;
+}
+export declare const Message: ({ open, transparent, title, variant, children, onDismiss, id, className, closeButtonAriaLabel, showCloseIcon, ...props }: MessageProps) => JSX.Element | null;
+export default Message;