carbon-react 119.12.2 → 120.1.0

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

@@ -10,6 +10,8 @@ var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTableRowHeader = require("./flat-table-row-header.style");
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
+var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
 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; }
@@ -20,55 +22,66 @@ const FlatTableRowHeader = ({
   width,
   py,
   px,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  leftPosition,
-  rightPosition,
   truncate,
   title,
   stickyAlignment = "left",
   colspan,
   rowspan,
+  id,
   ...rest
 }) => {
-  const id = (0, _react.useRef)((0, _guid.default)());
+  const internalId = (0, _react.useRef)(id || (0, _guid.default)());
   const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const {
     selectedId
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const {
+    leftPosition,
+    rightPosition,
+    expandable,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell
+  } = (0, _useCalculateStickyCells.default)(internalId.current);
+  (0, _react.useEffect)(() => {
+    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
+  }, [selectedId, isExpandableCell]);
   const handleOnClick = (0, _react.useCallback)(ev => {
-    if (expandable && onClick) onClick(ev);
-  }, [expandable, onClick]);
+    if (isExpandableCell && onClick) onClick(ev);
+  }, [isExpandableCell, onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(ev => {
-    if (expandable && onKeyDown) onKeyDown(ev);
-  }, [expandable, onKeyDown]);
-  (0, _react.useEffect)(() => {
-    setTabIndex(selectedId === id.current ? 0 : -1);
-  }, [selectedId]);
+    if (isExpandableCell && onKeyDown) {
+      onKeyDown(ev);
+    }
+  }, [isExpandableCell, onKeyDown]);
   return /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
-    align: align,
+    align: align
+  }, (0, _tags.default)("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.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
-  }, expandable && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
     bgSize: "extra-small",
     mr: "8px"

package/lib/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/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

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

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

@@ -17,7 +17,7 @@ const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
   setSelectedId: () => {}
 });
 exports.FlatTableThemeContext = FlatTableThemeContext;
-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]";
 const FlatTable = ({
   caption,
   children,
@@ -108,7 +108,7 @@ 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.default.isDownKey(ev)) {
       ev.preventDefault();
@@ -135,13 +135,30 @@ const FlatTable = ({
     }
   };
   (0, _react.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.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,

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