carbon-react 119.12.1 → 120.0.0

package/lib/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/lib/components/box/box.style.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _color = _interopRequireDefault(require("../../style/utils/color"));
+var _box = _interopRequireDefault(require("./box.config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = (0, _styledSystem.position)(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+const StyledBox = _styledComponents.default.div`
+  ${_styledSystem.space}
+  ${_styledSystem.layout}
+  ${_styledSystem.flexbox}
+  ${_styledSystem.grid}
+  ${calculatePosition}
+
+  ${({
+  theme,
+  borderRadius = "borderRadius000"
+}) => !theme.roundedCornersOptOut && (0, _styledComponents.css)`
+      border-radius: var(--${borderRadius});
+    `}
+
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => (0, _color.default)({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
+
+  ${({
+  overflowWrap
+}) => overflowWrap && (0, _styledComponents.css)`
+      overflow-wrap: ${overflowWrap};
+    `}
+  
+  ${({
+  height
+}) => height && (0, _styledComponents.css)`
+      height: ${height};
+    `}
+
+  ${({
+  width
+}) => width && (0, _styledComponents.css)`
+      width: ${width};
+    `}
+
+  ${({
+  scrollVariant
+}) => scrollVariant && (0, _styledComponents.css)`
+      scrollbar-color: ${_box.default[scrollVariant].thumb}
+        ${_box.default[scrollVariant].track};
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: ${_box.default[scrollVariant].track};
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: ${_box.default[scrollVariant].thumb};
+      }
+    `}
+
+  ${({
+  boxSizing
+}) => boxSizing && (0, _styledComponents.css)`
+      box-sizing: ${boxSizing};
+    `}
+
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid") && (0, _styledComponents.css)`
+      ${gap !== undefined && (0, _styledComponents.css)`
+        gap: ${_box.default.gap(gap)};
+      `}
+
+      ${columnGap !== undefined && (0, _styledComponents.css)`
+        column-gap: ${_box.default.gap(columnGap)};
+      `}
+
+      ${rowGap !== undefined && (0, _styledComponents.css)`
+        row-gap: ${_box.default.gap(rowGap)};
+      `}
+    `};
+
+  ${({
+  boxShadow
+}) => boxShadow && (0, _styledComponents.css)`
+      box-shadow: var(--${boxShadow});
+    `}
+`;
+StyledBox.defaultProps = {
+  theme: _base.default
+};
+var _default = StyledBox;
+exports.default = _default;

package/lib/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/lib/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/lib/components/duelling-picklist/picklist/picklist.style.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledPicklist = exports.StyledEmptyContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _box = _interopRequireDefault(require("../../box"));
+var _box = _interopRequireDefault(require("../../box/box.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// TODO: remove polymorphism when we revisit as part of ticket FE-6177
 const StyledPicklist = (0, _styledComponents.default)(_box.default).attrs({
   as: "ul"
 })`

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

@@ -13,7 +13,7 @@ var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox/f
 var _themes = require("../../style/themes");
 var _flatTableCell = require("./flat-table-cell/flat-table-cell.style");
 var _cellSizes = _interopRequireDefault(require("./cell-sizes.style"));
-var _box = _interopRequireDefault(require("../box"));
+var _box = _interopRequireDefault(require("../box/box.style"));
 var _pager = require("../pager/pager.style");
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/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/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -7,7 +7,7 @@ exports.StyledMenuFullscreenHeader = exports.StyledMenuFullscreen = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _themes = require("../../../style/themes");
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
-var _box = _interopRequireDefault(require("../../box"));
+var _box = _interopRequireDefault(require("../../box/box.style"));
 var _search = _interopRequireDefault(require("../../search/search.style"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _button = _interopRequireDefault(require("../../button/button.style"));

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

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _menuItem = _interopRequireDefault(require("../menu-item/menu-item.style"));
 var _menu = _interopRequireDefault(require("../menu.config"));
-var _box = _interopRequireDefault(require("../../box/box.component"));
+var _box = _interopRequireDefault(require("../../box/box.style"));
 var _menu2 = require("../menu.style");
 var _link = require("../../link/link.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

package/lib/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/lib/components/typography/typography.component.js

@@ -3,210 +3,62 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _color = _interopRequireDefault(require("../../style/utils/color"));
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+exports.default = exports.Typography = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+var _utils = require("../../style/utils");
+var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }
 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 = _styledComponents.default.span.attrs(({
-  variant,
+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.default.deprecate("Previous props that could be spread to the `Typography` component are being removed. Only props documented in the intefaces will be supported.");
-  }
-  return (0, _styledComponents.css)``;
-}}
-  ${({
-  size,
-  weight,
-  textTransform,
-  lineHeight,
-  defaultMargin,
   textDecoration,
   display,
-  variant,
   listStyleType,
   whiteSpace,
   wordWrap,
   textOverflow,
-  truncate
-}) => (0, _styledComponents.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 && (0, _styledComponents.css)`
-      overflow: hidden;
-    `};
-    ${variant === "sup" && "vertical-align: super;"};
-    ${variant === "sub" && "vertical-align: sub;"};
-    ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`}; ;
-  `}
-  ${_styledSystem.space}
-  ${({
-  color,
-  bg,
+  truncate,
+  color = "blackOpacity90",
   backgroundColor,
-  ...rest
-}) => (0, _color.default)({
-  color,
   bg,
-  backgroundColor,
+  opacity,
+  children,
+  className,
   ...rest
-})}
-`;
-Typography.defaultProps = {
-  color: "blackOpacity90",
-  variant: "p",
-  theme: _base.default
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_typography.default, _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
+  }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
 };
+exports.Typography = Typography;
 Typography.displayName = "Typography";
 var _default = Typography;
 exports.default = _default;

package/lib/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;