carbon-react 119.12.1 → 120.0.0

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

@@ -0,0 +1,3 @@
+import { BoxProps } from "./box.component";
+declare const StyledBox: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
+export default StyledBox;

package/esm/components/box/box.style.js

@@ -0,0 +1,112 @@
+import styled, { css } from "styled-components";
+import { space, layout, flexbox, grid, position as positionFn } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+import styledColor from "../../style/utils/color";
+import boxConfig from "./box.config";
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = positionFn(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+const StyledBox = styled.div`
+  ${space}
+  ${layout}
+  ${flexbox}
+  ${grid}
+  ${calculatePosition}
+
+  ${({
+  theme,
+  borderRadius = "borderRadius000"
+}) => !theme.roundedCornersOptOut && css`
+      border-radius: var(--${borderRadius});
+    `}
+
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
+
+  ${({
+  overflowWrap
+}) => overflowWrap && css`
+      overflow-wrap: ${overflowWrap};
+    `}
+  
+  ${({
+  height
+}) => height && css`
+      height: ${height};
+    `}
+
+  ${({
+  width
+}) => width && css`
+      width: ${width};
+    `}
+
+  ${({
+  scrollVariant
+}) => scrollVariant && css`
+      scrollbar-color: ${boxConfig[scrollVariant].thumb}
+        ${boxConfig[scrollVariant].track};
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: ${boxConfig[scrollVariant].track};
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${boxConfig[scrollVariant].thumb};
+      }
+    `}
+
+  ${({
+  boxSizing
+}) => boxSizing && css`
+      box-sizing: ${boxSizing};
+    `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && css`
+      ${gap !== undefined && css`
+        gap: ${boxConfig.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && css`
+        column-gap: ${boxConfig.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && css`
+        row-gap: ${boxConfig.gap(rowGap)};
+      `}
+    `};
+
+  ${({
+  boxShadow
+}) => boxShadow && css`
+      box-shadow: var(--${boxShadow});
+    `}
+`;
+StyledBox.defaultProps = {
+  theme: BaseTheme
+};
+export default StyledBox;

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export interface StyledDismissibleBoxProps {
     /** Flag to control whether the thicker left border highlight should be rendered */
     hasBorderLeftHighlight?: boolean;
     /** Set the base color variant */
     variant?: "light" | "dark";
 }
-declare const StyledDismissibleBox: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDismissibleBoxProps, never>;
+declare const StyledDismissibleBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledDismissibleBoxProps, never>;
 export { StyledDismissibleBox };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
     isExpanded?: boolean | undefined;
 }, never>;
@@ -7,7 +8,7 @@ interface StyledDrawerSidebarProps {
     isExpanded?: boolean;
     hasControls: boolean;
 }
-declare const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledDrawerSidebarProps, never>;
+declare const StyledDrawerSidebar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box").BoxProps & import("react").RefAttributes<HTMLDivElement>>, any, StyledDrawerSidebarProps, never>;
 interface StyledDrawerContentProps {
     animationDuration?: string;
     backgroundColor?: string;

package/esm/components/duelling-picklist/picklist/picklist.style.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
-import Box from "../../box";
-const StyledPicklist = styled(Box).attrs({
+import StyledBox from "../../box/box.style";
+
+// TODO: remove polymorphism when we revisit as part of ticket FE-6177
+const StyledPicklist = styled(StyledBox).attrs({
   as: "ul"
 })`
   position: relative;

package/esm/components/flat-table/flat-table.style.js

@@ -7,7 +7,7 @@ import StyledFlatTableCheckbox from "./flat-table-checkbox/flat-table-checkbox.s
 import { baseTheme } from "../../style/themes";
 import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
 import cellSizes from "./cell-sizes.style";
-import Box from "../box";
+import StyledBox from "../box/box.style";
 import { StyledPagerContainer } from "../pager/pager.style";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 const HEADER_OVERLAY_INCREMENT = 3;
@@ -93,7 +93,7 @@ const StyledFlatTable = styled.table`
       }
     `}
 `;
-const StyledFlatTableWrapper = styled(Box)`
+const StyledFlatTableWrapper = styled(StyledBox)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
   ${({

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

@@ -11,15 +11,10 @@ declare const StyledHeadingBackButton: import("styled-components").StyledCompone
 declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
-declare const StyledHeadingTitle: import("styled-components").StyledComponent<"span", any, {
-    as: import("react").ElementType<any> | undefined;
-    size: string;
-    weight: string;
-    textTransform: string;
-    textDecoration: string;
-    lineHeight: string;
-    defaultMargin: string;
-} & import("../typography").TypographyProps & StyledHeadingTitleProps, "as" | "textDecoration" | "size" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;
+declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    displayName: string;
+}, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare type StyledSubHeaderProps = {
     hasBackLink?: boolean;

package/esm/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { baseTheme } from "../../../style/themes";
 import StyledIconButton from "../../icon-button/icon-button.style";
-import Box from "../../box";
+import StyledBox from "../../box/box.style";
 import StyledSearch from "../../search/search.style";
 import StyledIcon from "../../icon/icon.style";
 import StyledButton from "../../button/button.style";
@@ -90,7 +90,7 @@ const StyledMenuFullscreen = styled.div`
     `}
   `}
 
-  ${Box} {
+  ${StyledBox} {
     &::-webkit-scrollbar {
       width: 16px;
     }

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledMenuItemWrapper from "../menu-item/menu-item.style";
 import menuConfigVariants from "../menu.config";
-import Box from "../../box/box.component";
+import StyledBox from "../../box/box.style";
 import { StyledMenuItem } from "../menu.style";
 import { StyledLink } from "../../link/link.style";
 const StyledScrollableBlock = styled.li`
@@ -13,7 +13,7 @@ const StyledScrollableBlock = styled.li`
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].alternate};
     }
 
-    ${Box} {
+    ${StyledBox} {
       border-radius: var(--borderRadius000);
       border-bottom-left-radius: var(--borderRadius100);
 

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -24,7 +24,7 @@ const StyledToolbarButton = styled.button.attrs({
     :focus,
     :active {
       z-index: 1;
-      postion: relative;
+      position: relative;
       ${theme.focusRedesignOptOut && /* istanbul ignore next */
 css`
         outline: 2px solid var(--colorsSemanticFocus500);

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

@@ -1,10 +1,15 @@
-/// <reference types="react" />
-import { ColorProps, SpaceProps } from "styled-system";
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
-export interface TypographyProps extends SpaceProps, ColorProps {
+export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
     as?: React.ElementType;
+    /** Set the ID attribute of the Typography component */
+    id?: string;
+    /** Content to be rendered inside the Typography component */
+    children?: React.ReactNode;
     /** The visual style to apply to the component */
     variant?: VariantTypes;
     /** Override the variant font-size */
@@ -21,22 +26,27 @@ export interface TypographyProps extends SpaceProps, ColorProps {
     display?: string;
     /** Override the list-style-type */
     listStyleType?: string;
-    /** Override the white-space type */
+    /** Override the white-space */
     whiteSpace?: string;
-    /** Override the word-wrap type */
+    /** Override the word-wrap */
     wordWrap?: string;
-    /** Override the text-overflow type */
+    /** Override the text-overflow */
     textOverflow?: string;
     /** Apply truncation */
     truncate?: boolean;
+    /** Override the color style */
+    color?: string;
+    /** Override the backgroundColor style */
+    backgroundColor?: string;
+    /** Override the bg value shorthand for backgroundColor */
+    bg?: string;
+    /** Override the opacity value */
+    opacity?: string | number;
+    /** @private @ignore */
+    className?: string;
 }
-declare const Typography: import("styled-components").StyledComponent<"span", any, {
-    as: import("react").ElementType<any> | undefined;
-    size: string;
-    weight: string;
-    textTransform: string;
-    textDecoration: string;
-    lineHeight: string;
-    defaultMargin: string;
-} & TypographyProps, "as" | "textDecoration" | "size" | "lineHeight" | "textTransform" | "weight" | "defaultMargin">;
+export declare const Typography: {
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, ...rest }: TypographyProps): React.JSX.Element;
+    displayName: string;
+};
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -1,202 +1,55 @@
-import styled, { css } from "styled-components";
-import { space } from "styled-system";
-import styledColor from "../../style/utils/color";
-import baseTheme from "../../style/themes/base";
-import Logger from "../../__internal__/utils/logger";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
+import StyledTypography from "./typography.style";
 const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-const getAs = variant => {
-  switch (variant) {
-    case "h1-large":
-      return "h1";
-    case "segment-header":
-    case "segment-header-small":
-    case "segment-subheader":
-    case "segment-subheader-alt":
-      return "h5";
-    case "big":
-      return "p";
-    default:
-      return variant;
-  }
-};
-const getSize = variant => {
-  switch (variant) {
-    case "h1-large":
-      return "32px";
-    case "h1":
-      return "24px";
-    case "h2":
-      return "22px";
-    case "h3":
-    case "segment-header":
-      return "20px";
-    case "h4":
-    case "segment-header-small":
-      return "18px";
-    case "h5":
-    case "segment-subheader":
-    case "big":
-      return "16px";
-    case "small":
-    case "sub":
-    case "sup":
-      return "13px";
-    case "segment-subheader-alt":
-    case "p":
-    case "b":
-    case "strong":
-    case "em":
-    default:
-      return "14px";
-  }
-};
-const getLineHeight = variant => {
-  switch (variant) {
-    case "h1-large":
-      return "40px";
-    case "h1":
-    case "segment-subheader":
-      return "31px";
-    case "h2":
-      return "29px";
-    case "h3":
-    case "segment-header":
-      return "26px";
-    case "big":
-      return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
-    case "small":
-    case "sub":
-    case "sup":
-      return "20px";
-    case "h5":
-    case "segment-subheader-alt":
-    case "p":
-    case "b":
-    case "strong":
-    case "em":
-    default:
-      return "21px";
-  }
-};
-const getWeight = variant => {
-  switch (variant) {
-    case "h1-large":
-    case "h1":
-    case "segment-header":
-    case "segment-header-small":
-      return "900";
-    case "h2":
-    case "h3":
-    case "segment-subheader":
-    case "segment-subheader-alt":
-    case "b":
-    case "em":
-    case "strong":
-      return "700";
-    case "h4":
-    case "h5":
-    case "p":
-    case "small":
-    case "big":
-    case "sub":
-    case "sup":
-    default:
-      return "400";
-  }
-};
-const getTransform = variant => {
-  if (variant === "segment-subheader-alt") {
-    return "uppercase";
-  }
-  return "none";
-};
-const getDecoration = variant => {
-  if (variant === "em") {
-    return "underline";
-  }
-  return "none";
-};
-let isDeprecationWarningTriggered = false;
-const Typography = styled.span.attrs(({
-  variant,
+export const Typography = ({
+  "data-component": dataComponent,
+  variant = "p",
   as,
+  id,
   fontSize,
   fontWeight,
   textTransform,
   lineHeight,
-  textDecoration
-}) => {
-  return {
-    as: as || getAs(variant),
-    size: fontSize || getSize(variant),
-    weight: fontWeight || getWeight(variant),
-    textTransform: textTransform || getTransform(variant),
-    textDecoration: textDecoration || getDecoration(variant),
-    lineHeight: lineHeight || getLineHeight(variant),
-    defaultMargin: variant === "p" ? "0 0 16px" : "0"
-  };
-})`
-  ${() => {
-  if (!isDeprecationWarningTriggered) {
-    isDeprecationWarningTriggered = true;
-    Logger.deprecate("Previous props that could be spread to the `Typography` component are being removed. Only props documented in the intefaces will be supported.");
-  }
-  return css``;
-}}
-  ${({
-  size,
-  weight,
-  textTransform,
-  lineHeight,
-  defaultMargin,
   textDecoration,
   display,
-  variant,
   listStyleType,
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
-}) => css`
-    font-style: normal;
-    font-size: ${size};
-    font-weight: ${weight};
-    text-transform: ${textTransform};
-    text-decoration: ${textDecoration};
-    line-height: ${lineHeight};
-    margin: ${defaultMargin};
-    padding: 0;
-    white-space: ${truncate ? "nowrap" : whiteSpace};
-    word-wrap: ${wordWrap};
-    text-overflow: ${truncate ? "ellipsis" : textOverflow};
-    ${truncate && css`
-      overflow: hidden;
-    `};
-    ${variant === "sup" && "vertical-align: super;"};
-    ${variant === "sub" && "vertical-align: sub;"};
-    ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`}; ;
-  `}
-  ${space}
-  ${({
-  color,
-  bg,
+  truncate,
+  color = "blackOpacity90",
   backgroundColor,
-  ...rest
-}) => styledColor({
-  color,
   bg,
-  backgroundColor,
+  opacity,
+  children,
+  className,
   ...rest
-})}
-`;
-Typography.defaultProps = {
-  color: "blackOpacity90",
-  variant: "p",
-  theme: baseTheme
+}) => {
+  return /*#__PURE__*/React.createElement(StyledTypography, _extends({
+    variant: variant,
+    as: as,
+    id: id,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    textTransform: textTransform,
+    lineHeight: lineHeight,
+    textDecoration: textDecoration,
+    display: display,
+    listStyleType: listStyleType,
+    whiteSpace: whiteSpace,
+    wordWrap: wordWrap,
+    textOverflow: textOverflow,
+    truncate: truncate,
+    color: color,
+    backgroundColor: backgroundColor,
+    bg: bg,
+    opacity: opacity,
+    className: className
+  }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";
 export default Typography;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TypographyProps } from "./typography.component";
+declare const StyledTypography: import("styled-components").StyledComponent<"span", any, {
+    as: import("react").ElementType<any> | undefined;
+    size: string;
+    weight: string;
+    textTransform: string;
+    textDecoration: string;
+    lineHeight: string;
+    defaultMargin: string;
+} & TypographyProps, "as" | "textDecoration" | "size" | "weight" | "textTransform" | "lineHeight" | "defaultMargin">;
+export default StyledTypography;