carbon-react 119.12.2 → 120.1.0

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -1,65 +1,78 @@
 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, { useCallback, useEffect, useContext, useState, useRef } from "react";
+import React, { useCallback, useContext, useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import Icon from "../../icon";
 import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
 import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
+import useCalculateStickyCells from "../__internal__/use-calculate-sticky-cells";
 export const FlatTableRowHeader = ({
   align = "left",
   children,
   width,
   py,
   px,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  leftPosition,
-  rightPosition,
   truncate,
   title,
   stickyAlignment = "left",
   colspan,
   rowspan,
+  id,
   ...rest
 }) => {
-  const id = useRef(guid());
+  const internalId = useRef(id || guid());
   const [tabIndex, setTabIndex] = useState(-1);
   const {
     selectedId
   } = useContext(FlatTableThemeContext);
+  const {
+    leftPosition,
+    rightPosition,
+    expandable,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell
+  } = useCalculateStickyCells(internalId.current);
+  useEffect(() => {
+    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
+  }, [selectedId, isExpandableCell]);
   const handleOnClick = useCallback(ev => {
-    if (expandable && onClick) onClick(ev);
-  }, [expandable, onClick]);
+    if (isExpandableCell && onClick) onClick(ev);
+  }, [isExpandableCell, onClick]);
   const handleOnKeyDown = useCallback(ev => {
-    if (expandable && onKeyDown) onKeyDown(ev);
-  }, [expandable, onKeyDown]);
-  useEffect(() => {
-    setTabIndex(selectedId === id.current ? 0 : -1);
-  }, [selectedId]);
+    if (isExpandableCell && onKeyDown) {
+      onKeyDown(ev);
+    }
+  }, [isExpandableCell, onKeyDown]);
   return /*#__PURE__*/React.createElement(StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
-    align: align,
+    align: align
+  }, tagComponent("flat-table-row-header", {
     "data-element": "flat-table-row-header",
+    ...rest
+  }), {
     width: width,
     py: py || "10px",
     px: px || 3,
     onClick: handleOnClick,
-    tabIndex: expandable && onClick ? tabIndex : undefined,
+    tabIndex: isExpandableCell ? tabIndex : undefined,
     onKeyDown: handleOnKeyDown,
     truncate: truncate,
     expandable: expandable,
-    stickyAlignment: stickyAlignment,
-    id: id.current
+    stickyAlignment: stickyAlignment
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
-  }, rest), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
-  }, expandable && /*#__PURE__*/React.createElement(Icon, {
+  }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
     bgSize: "extra-small",
     mr: "8px"

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts

@@ -1,5 +1,11 @@
 import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
-declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, FlatTableRowHeaderProps, never>;
+declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
+    "data-sticky-align": "left" | "right" | undefined;
+} & FlatTableRowHeaderProps & {
+    expandable?: boolean | undefined;
+    leftPosition?: number | undefined;
+    rightPosition?: number | undefined;
+}, "data-sticky-align">;
 declare const StyledFlatTableRowHeaderContent: import("styled-components").StyledComponent<"div", any, {
     expandable?: boolean | undefined;
 }, never>;

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

@@ -7,7 +7,11 @@ const verticalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
-const StyledFlatTableRowHeader = styled.th`
+const StyledFlatTableRowHeader = styled.th.attrs(({
+  stickyAlignment
+}) => ({
+  "data-sticky-align": stickyAlignment
+}))`
   ${({
   align,
   theme,

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

@@ -7,7 +7,7 @@ import Events from "../../__internal__/utils/helpers/events/events";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({
   setSelectedId: () => {}
 });
-const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
+const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
 export const FlatTable = ({
   caption,
   children,
@@ -98,7 +98,7 @@ export const FlatTable = ({
     if (!focusableElements) {
       return;
     }
-    const focusableElementsArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+    const focusableElementsArray = Array.from(focusableElements);
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
     if (Events.isDownKey(ev)) {
       ev.preventDefault();
@@ -125,13 +125,30 @@ export const FlatTable = ({
     }
   };
   useLayoutEffect(() => {
-    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+    const findSelectedId = () => {
+      const firstfocusableElement = tableRef.current?.querySelector(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+      // if no other menu item is selected, we need to make the first row a tab stop
+      if (firstfocusableElement && !selectedId) {
+        const currentlySelectedId = firstfocusableElement?.getAttribute("id");
+
+        /* istanbul ignore else */
+        if (currentlySelectedId && selectedId !== currentlySelectedId) {
+          setSelectedId(currentlySelectedId);
+        }
+      }
+    };
+    const observer = new MutationObserver(findSelectedId);
 
-    // if no other menu item is selected, we need to make the first row a tab stop
-    if (focusableElements && !selectedId) {
-      const focusableArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
-      setSelectedId(focusableArray[0]?.getAttribute("id") || "");
+    /* istanbul ignore else */
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current, {
+        subtree: true,
+        childList: true,
+        attributes: true
+      });
     }
+    return () => observer.disconnect();
   }, [selectedId]);
   return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
     ref: wrapperRef,

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