carbon-react 106.0.2 → 106.0.3

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

@@ -1,14 +1,11 @@
-export default Badge;
-declare function Badge({ children, counter, onClick }: {
-    children: any;
-    counter: any;
-    onClick: any;
-}): JSX.Element;
-declare namespace Badge {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const counter: PropTypes.Requireable<string | number>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+import React from "react";
+export interface BadgeProps {
+    /** The badge will be added to this element */
+    children: React.ReactNode;
+    /** The number rendered in the badge component */
+    counter?: string | number;
+    /** Callback fired when badge is clicked */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-import PropTypes from "prop-types";
+export declare const Badge: ({ children, counter, onClick }: BadgeProps) => JSX.Element;
+export default Badge;

package/esm/components/badge/badge.component.js

@@ -1,32 +1,68 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter } from "./badge.style";
-
-const Badge = ({
-  children,
-  counter,
-  onClick
-}) => {
-  return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, counter > 0 && /*#__PURE__*/React.createElement(StyledButton, {
-    "data-component": "badge",
-    buttonType: "secondary",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(StyledCrossIcon, {
-    "data-element": "badge-cross-icon",
-    type: "cross"
-  }), /*#__PURE__*/React.createElement(StyledCounter, {
-    "data-element": "badge-counter"
-  }, counter > 99 ? 99 : counter)), children);
+import {
+  StyledBadgeWrapper,
+  StyledButton,
+  StyledCrossIcon,
+  StyledCounter,
+} from "./badge.style";
+const Badge = ({ children, counter = 0, onClick }) => {
+  return /*#__PURE__*/ React.createElement(
+    StyledBadgeWrapper,
+    null,
+    counter > 0 &&
+      /*#__PURE__*/ React.createElement(
+        StyledButton,
+        {
+          "data-component": "badge",
+          buttonType: "secondary",
+          onClick: onClick,
+        },
+        /*#__PURE__*/ React.createElement(StyledCrossIcon, {
+          "data-element": "badge-cross-icon",
+          type: "cross",
+        }),
+        /*#__PURE__*/ React.createElement(
+          StyledCounter,
+          {
+            "data-element": "badge-counter",
+          },
+          counter > 99 ? 99 : counter
+        )
+      ),
+    children
+  );
 };
 
 Badge.propTypes = {
-  /** The badge will be added to this element */
-  children: PropTypes.node.isRequired,
-
-  /** The number rendered in the badge component */
+  /**
+   * The badge will be added to this element
+   */
+  children: PropTypes.node,
+  /**
+   * The number rendered in the badge component
+   */
   counter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Callback fired when badge is clicked
+   */
+  onClick: PropTypes.func,
+};
 
-  /** Callback fired when badge is clicked */
-  onClick: PropTypes.func
+Badge.propTypes = {
+  /**
+   * The badge will be added to this element
+   */
+  children: PropTypes.node,
+  /**
+   * The number rendered in the badge component
+   */
+  counter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Callback fired when badge is clicked
+   */
+  onClick: PropTypes.func,
 };
-export default Badge;
+
+export { Badge };
+export default Badge;

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

@@ -1,8 +1,10 @@
-export const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButton: import("styled-components").StyledComponent<{
+/// <reference types="react" />
+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;
     displayName: string;
 }, any, {}, never>;
-export const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Icon from "../icon";
+declare const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

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

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

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

@@ -1,16 +1,10 @@
-export const NewValidationContext: React.Context<{}>;
-export default CarbonProvider;
 import React from "react";
-declare function CarbonProvider({ children, theme, validationRedesignOptIn, }: {
-    children: any;
-    theme?: import("../../style/themes/base").ThemeObject | undefined;
-    validationRedesignOptIn?: boolean | undefined;
-}): JSX.Element;
-declare namespace CarbonProvider {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const theme: PropTypes.Requireable<object>;
-        const validationRedesignOptIn: PropTypes.Requireable<boolean>;
-    }
+import { ThemeObject } from "../../style/themes/base";
+export interface CarbonProviderProps {
+    theme?: ThemeObject;
+    children: React.ReactNode;
+    validationRedesignOptIn?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn">>;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, }: CarbonProviderProps) => JSX.Element;
+export default CarbonProvider;

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

@@ -3,23 +3,119 @@ import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import mintTheme from "../../style/themes/mint";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
-export const NewValidationContext = /*#__PURE__*/createContext({});
-
+export const NewValidationContext = /*#__PURE__*/ createContext({});
 const CarbonProvider = ({
   children,
   theme = mintTheme,
-  validationRedesignOptIn = false
-}) => /*#__PURE__*/React.createElement(ThemeProvider, {
-  theme: theme
-}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
-  value: {
-    validationRedesignOptIn
-  }
-}, children)));
+  validationRedesignOptIn = false,
+}) =>
+  /*#__PURE__*/ React.createElement(
+    ThemeProvider,
+    {
+      theme: theme,
+    },
+    /*#__PURE__*/ React.createElement(
+      CarbonScopedTokensProvider,
+      null,
+      /*#__PURE__*/ React.createElement(
+        NewValidationContext.Provider,
+        {
+          value: {
+            validationRedesignOptIn,
+          },
+        },
+        children
+      )
+    )
+  );
 
 CarbonProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  theme: PropTypes.object,
-  validationRedesignOptIn: PropTypes.bool
+  children: PropTypes.node,
+  theme: PropTypes.shape({
+    colors: PropTypes.shape({
+      destructive: PropTypes.shape({
+        hover: PropTypes.string.isRequired,
+      }).isRequired,
+      error: PropTypes.string.isRequired,
+      focus: PropTypes.string.isRequired,
+      info: PropTypes.string.isRequired,
+      loadingBarBackground: PropTypes.string.isRequired,
+      placeholder: PropTypes.string.isRequired,
+      primary: PropTypes.string.isRequired,
+      secondary: PropTypes.string.isRequired,
+      tertiary: PropTypes.string.isRequired,
+      warning: PropTypes.string.isRequired,
+      warningText: PropTypes.string.isRequired,
+      white: PropTypes.oneOf(["#FFFFFF"]).isRequired,
+    }).isRequired,
+    disabled: PropTypes.shape({
+      background: PropTypes.string.isRequired,
+    }).isRequired,
+    name: PropTypes.string.isRequired,
+    palette: PropTypes.shape({
+      blackOpacity: PropTypes.func.isRequired,
+      whiteOpacity: PropTypes.func.isRequired,
+    }).isRequired,
+    space: PropTypes.arrayOf(PropTypes.string).isRequired,
+    spacing: PropTypes.number.isRequired,
+    zIndex: PropTypes.shape({
+      aboveAll: PropTypes.number.isRequired,
+      fullScreenModal: PropTypes.number.isRequired,
+      header: PropTypes.number.isRequired,
+      modal: PropTypes.number.isRequired,
+      nav: PropTypes.number.isRequired,
+      notification: PropTypes.number.isRequired,
+      overlay: PropTypes.number.isRequired,
+      popover: PropTypes.number.isRequired,
+      smallOverlay: PropTypes.number.isRequired,
+    }).isRequired,
+  }),
+  validationRedesignOptIn: PropTypes.bool,
 };
-export default CarbonProvider;
+
+CarbonProvider.propTypes = {
+  children: PropTypes.node,
+  theme: PropTypes.shape({
+    colors: PropTypes.shape({
+      destructive: PropTypes.shape({
+        hover: PropTypes.string.isRequired,
+      }).isRequired,
+      error: PropTypes.string.isRequired,
+      focus: PropTypes.string.isRequired,
+      info: PropTypes.string.isRequired,
+      loadingBarBackground: PropTypes.string.isRequired,
+      placeholder: PropTypes.string.isRequired,
+      primary: PropTypes.string.isRequired,
+      secondary: PropTypes.string.isRequired,
+      tertiary: PropTypes.string.isRequired,
+      warning: PropTypes.string.isRequired,
+      warningText: PropTypes.string.isRequired,
+      white: PropTypes.oneOf(["#FFFFFF"]).isRequired,
+    }).isRequired,
+    disabled: PropTypes.shape({
+      background: PropTypes.string.isRequired,
+    }).isRequired,
+    name: PropTypes.string.isRequired,
+    palette: PropTypes.shape({
+      blackOpacity: PropTypes.func.isRequired,
+      whiteOpacity: PropTypes.func.isRequired,
+    }).isRequired,
+    space: PropTypes.arrayOf(PropTypes.string).isRequired,
+    spacing: PropTypes.number.isRequired,
+    zIndex: PropTypes.shape({
+      aboveAll: PropTypes.number.isRequired,
+      fullScreenModal: PropTypes.number.isRequired,
+      header: PropTypes.number.isRequired,
+      modal: PropTypes.number.isRequired,
+      nav: PropTypes.number.isRequired,
+      notification: PropTypes.number.isRequired,
+      overlay: PropTypes.number.isRequired,
+      popover: PropTypes.number.isRequired,
+      smallOverlay: PropTypes.number.isRequired,
+    }).isRequired,
+  }),
+  validationRedesignOptIn: PropTypes.bool,
+};
+
+export { CarbonProvider };
+export default CarbonProvider;

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

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

package/esm/components/date-range/date-range.style.js

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { margin } from "styled-system";
 import StyledDateInput from "../date/date.style";
-import { StyledLabelContainer } from "../../__internal__/label/label.style.js";
-import { StyledInputPresentationContainer } from "../../__internal__/input/input-presentation.style.js";
+import { StyledLabelContainer } from "../../__internal__/label/label.style";
+import { StyledInputPresentationContainer } from "../../__internal__/input/input-presentation.style";
 import baseTheme from "../../style/themes/base";
 const StyledDateRange = styled.div`
   ${margin}

package/esm/components/decimal/decimal.component.js

@@ -190,7 +190,8 @@ const Decimal = ({
     onChange: handleOnChange,
     onBlur: handleOnBlur,
     value: stateValue,
-    "data-component": "decimal"
+    "data-component": "decimal",
+    id: id
   }, rest)), /*#__PURE__*/React.createElement("input", {
     name: name,
     value: toStandardDecimal(stateValue),

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

@@ -7,9 +7,8 @@ export const StyledHeaderHelp: import("styled-components").StyledComponent<typeo
 export const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, {}, never>;
 export const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr/hr.component").HrProps) => JSX.Element, any, {}, never>;
 export const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHeadingBackButton: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link/link.component").LinkProps & import("react").RefAttributes<HTMLLinkElement | HTMLButtonElement>>, any, {}, never>;
 export const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
 import Icon from "../icon";
 import Help from "../help";
 import Typography from "../typography";
-import Link from "../link";

package/esm/components/inline-inputs/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./inline-inputs";
+export { default, InlineInputsContext } from "./inline-inputs.component";
+export type { InlineInputsProps } from "./inline-inputs.component";

package/esm/components/inline-inputs/index.js

@@ -1 +1 @@
-export { default } from "./inline-inputs.component";
+export { default, InlineInputsContext } from "./inline-inputs.component";

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,24 +1,27 @@
-export const InlineInputsContext: React.Context<{}>;
-export default InlineInputs;
 import React from "react";
-declare function InlineInputs(props: any): JSX.Element;
-declare namespace InlineInputs {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const className: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<string>;
-        const htmlFor: PropTypes.Requireable<string>;
-        const gutter: PropTypes.Requireable<string>;
-        const inputWidth: PropTypes.Requireable<number>;
-        const labelWidth: PropTypes.Requireable<number>;
-    }
-    namespace defaultProps {
-        const children_1: null;
-        export { children_1 as children };
-        const className_1: string;
-        export { className_1 as className };
-        const gutter_1: string;
-        export { gutter_1 as gutter };
-    }
+interface InlineInputsContextProps {
+    ariaLabelledBy?: string;
+}
+declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+export interface InlineInputsProps {
+    /** Children elements */
+    children?: React.ReactNode;
+    /** [Legacy prop] A custom class name for the component. */
+    className?: string;
+    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+    gutter?: GutterOptions;
+    /** The id of the corresponding input control for the label */
+    htmlFor?: string;
+    /** Width of the inline inputs container in percentage */
+    inputWidth?: number;
+    /** Defines the label text for the heading. */
+    label?: string;
+    /** Width of a label in percentage */
+    labelWidth?: number;
 }
-import PropTypes from "prop-types";
+export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
+declare const InlineInputs: {
+    ({ label, htmlFor, children, className, gutter, inputWidth, labelWidth, }: InlineInputsProps): JSX.Element;
+    displayName: string;
+};
+export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -1,82 +1,118 @@
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
-import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
+import StyledInlineInputs, {
+  StyledContentContainer,
+  StyledInlineInput,
+} from "./inline-inputs.style";
 import createGuid from "../../__internal__/utils/helpers/guid";
-export const InlineInputsContext = /*#__PURE__*/React.createContext({});
+export const InlineInputsContext = /*#__PURE__*/ React.createContext({});
 
 const columnWrapper = (children, gutter, labelId) => {
-  return React.Children.map(children, input => {
-    return /*#__PURE__*/React.createElement(InlineInputsContext.Provider, {
-      value: {
-        ariaLabelledBy: labelId
-      }
-    }, /*#__PURE__*/React.createElement(StyledInlineInput, {
-      gutter: gutter,
-      "data-element": "inline-input"
-    }, input));
+  return React.Children.map(children, (input) => {
+    return /*#__PURE__*/ React.createElement(
+      InlineInputsContext.Provider,
+      {
+        value: {
+          ariaLabelledBy: labelId,
+        },
+      },
+      /*#__PURE__*/ React.createElement(
+        StyledInlineInput,
+        {
+          gutter: gutter,
+          "data-element": "inline-input",
+        },
+        input
+      )
+    );
   });
 };
 
-const InlineInputs = props => {
-  const {
-    label,
-    htmlFor,
-    children,
-    className,
-    gutter,
-    inputWidth,
-    labelWidth
-  } = props;
+const InlineInputs = ({
+  label,
+  htmlFor,
+  children = null,
+  className = "",
+  gutter = "none",
+  inputWidth,
+  labelWidth,
+}) => {
   const labelId = useRef(createGuid());
 
   function renderLabel() {
     if (!label) return null;
-    return /*#__PURE__*/React.createElement(Label, {
-      labelId: labelId.current,
-      inline: true,
-      htmlFor: htmlFor
-    }, label);
+    return /*#__PURE__*/ React.createElement(
+      Label,
+      {
+        labelId: labelId.current,
+        inline: true,
+        htmlFor: htmlFor,
+      },
+      label
+    );
   }
 
-  return /*#__PURE__*/React.createElement(StyledInlineInputs, {
-    gutter: gutter,
-    "data-component": "inline-inputs",
-    className: className,
-    labelWidth: labelWidth
-  }, renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
-    gutter: gutter,
-    "data-element": "inline-inputs-container",
-    inputWidth: inputWidth
-  }, columnWrapper(children, gutter, label ? labelId.current : undefined)));
-}; // Assign props over for demo site
-
+  return /*#__PURE__*/ React.createElement(
+    StyledInlineInputs,
+    {
+      gutter: gutter,
+      "data-component": "inline-inputs",
+      className: className,
+      labelWidth: labelWidth,
+    },
+    renderLabel(),
+    /*#__PURE__*/ React.createElement(
+      StyledContentContainer,
+      {
+        gutter: gutter,
+        "data-element": "inline-inputs-container",
+        inputWidth: inputWidth,
+      },
+      columnWrapper(children, gutter, label ? labelId.current : undefined)
+    )
+  );
+};
 
 InlineInputs.propTypes = {
-  /** Children elements */
+  /**
+   * Children elements
+   */
   children: PropTypes.node,
-
-  /** [Legacy prop] A custom class name for the component. */
+  /**
+   * [Legacy prop] A custom class name for the component.
+   */
   className: PropTypes.string,
-
-  /** Defines the label text for the heading. */
-  label: PropTypes.string,
-
-  /** The id of the corresponding input control for the label */
+  /**
+   * Gutter prop gets passed down to Row component if false gutter value is "none"
+   */
+  gutter: PropTypes.oneOf([
+    "extra-large",
+    "extra-small",
+    "large",
+    "medium-large",
+    "medium-small",
+    "medium",
+    "none",
+    "small",
+  ]),
+  /**
+   * The id of the corresponding input control for the label
+   */
   htmlFor: PropTypes.string,
-
-  /** Gutter prop gets passed down to Row component if false gutter value is "none" */
-  gutter: PropTypes.oneOf(["none", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Width of the inline inputs container in percentage */
+  /**
+   * Width of the inline inputs container in percentage
+   */
   inputWidth: PropTypes.number,
-
-  /** Width of a label in percentage */
-  labelWidth: PropTypes.number
-};
-InlineInputs.defaultProps = {
-  children: null,
-  className: "",
-  gutter: "none"
+  /**
+   * Defines the label text for the heading.
+   */
+  label: PropTypes.string,
+  /**
+   * Width of a label in percentage
+   */
+  labelWidth: PropTypes.number,
 };
-export default InlineInputs;
+
+InlineInputs.displayName = "InlineInputs";
+export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.config.d.ts

@@ -1 +1 @@
-export const INLINE_INPUTS_SIZES: string[];
+export declare const INLINE_INPUTS_SIZES: string[];

package/esm/components/inline-inputs/inline-inputs.style.d.ts

@@ -1,4 +1,6 @@
+import { InlineInputsProps } from "./inline-inputs.component";
+declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter">, never>;
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "inputWidth" | "gutter">, never>;
+declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "labelWidth" | "gutter">, never>;
+export { StyledContentContainer, StyledInlineInput };
 export default StyledInlineInputs;
-export const StyledContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledInlineInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -17,7 +17,7 @@ const StyledInlineInput = styled.div`
 
   ${({
   gutter
-}) => css`
+}) => gutter && css`
       margin-bottom: 0;
       padding-left: ${spacings[gutter]}px;
     `}
@@ -30,7 +30,7 @@ const StyledContentContainer = styled.div`
 
   ${({
   gutter
-}) => css`
+}) => gutter && css`
       margin-bottom: 0;
       margin-left: -${spacings[gutter]}px;
 

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

@@ -1,2 +1 @@
-export { default } from "./link";
-export * from "./link";
+export { default } from "./link.component";