carbon-react 152.7.0 → 153.0.0

package/lib/components/tooltip/tooltip.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TooltipPositions } from "./tooltip.config";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export declare type InputSizes = "small" | "medium" | "large";
+export type InputSizes = "small" | "medium" | "large";
 export interface TooltipProps extends TagProps {
     /** The message to be displayed within the tooltip */
     message: React.ReactNode;

package/lib/components/tooltip/tooltip.config.d.ts

@@ -1,2 +1,2 @@
 export declare const TOOLTIP_POSITIONS: string[];
-export declare type TooltipPositions = "top" | "bottom" | "left" | "right";
+export type TooltipPositions = "top" | "bottom" | "left" | "right";

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

@@ -2,7 +2,7 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-export declare type VariantTypes = (typeof VARIANT_TYPES)[number];
+export type VariantTypes = (typeof VARIANT_TYPES)[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
     as?: React.ElementType;

package/lib/components/typography/typography.component.js

@@ -11,6 +11,21 @@ var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const VARIANT_TYPES = exports.VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "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 Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -42,7 +57,7 @@ const Typography = ({
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
     variant: variant,
-    as: as,
+    as: as || getAs(variant),
     id: id,
     fontSize: fontSize,
     fontWeight: fontWeight,

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

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

package/lib/components/typography/typography.style.js

@@ -12,21 +12,6 @@ var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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":
@@ -134,67 +119,57 @@ const getDecoration = variant => {
   }
   return "none";
 };
-const StyledTypography = _styledComponents.default.span.attrs(({
-  variant,
-  as,
+const StyledTypography = _styledComponents.default.span`
+  ${({
   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"
-  };
-})`
-  ${({
-  size,
-  weight,
-  textTransform,
-  lineHeight,
-  defaultMargin,
-  textDecoration,
   display,
   variant,
+  lineHeight: lHeight,
   listStyleType,
   whiteSpace,
   wordBreak,
   wordWrap,
   textAlign,
+  textDecoration: decoration,
   textOverflow,
+  textTransform: transform,
   truncate,
   screenReaderOnly
-}) => (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-break: ${wordBreak};
-    word-wrap: ${wordWrap};
-    text-align: ${textAlign};
-    text-overflow: ${textOverflow || truncate && "ellipsis"};
-    ${truncate && (0, _styledComponents.css)`
-      overflow: hidden;
-    `};
-    ${screenReaderOnly && _visuallyHidden.default}
-    ${variant === "sup" && "vertical-align: super;"};
-    ${variant === "sub" && "vertical-align: sub;"};
-    ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`};
-  `}
+}) => {
+  const size = fontSize || getSize(variant);
+  const weight = fontWeight || getWeight(variant);
+  const textTransform = transform || getTransform(variant);
+  const textDecoration = decoration || getDecoration(variant);
+  const lineHeight = lHeight || getLineHeight(variant);
+  const defaultMargin = variant === "p" ? "0 0 16px" : "0";
+  return (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-break: ${wordBreak};
+      word-wrap: ${wordWrap};
+      text-align: ${textAlign};
+      text-overflow: ${textOverflow || truncate && "ellipsis"};
+      ${truncate && `
+        overflow: hidden;
+      `};
+      ${screenReaderOnly && _visuallyHidden.default}
+      ${variant === "sup" && "vertical-align: super;"}
+      ${variant === "sub" && "vertical-align: sub;"}
+      ${display && `display: ${display};`}
+      ${listStyleType && `list-style-type: ${listStyleType};`}
+    `;
+}}
   ${_styledSystem.space}
-    ${({
+
+  ${({
   color,
   bg,
   backgroundColor,
@@ -205,6 +180,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   backgroundColor,
   ...rest
 })}
+
   ${({
   isDisabled
 }) => isDisabled && (0, _styledComponents.css)`

package/lib/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
+type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
 export interface VerticalDividerProps extends SpaceProps, TagProps {
     /** Shorthand for the height attribute */
     h?: number | string;

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.d.ts

@@ -22,6 +22,6 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
     /** Optional component to render instead of the default div, useful for rendering router link components */
     component?: T;
 }
-declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
+type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
 export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>) => React.JSX.Element;
 export default VerticalMenuItem;

package/lib/global.d.ts

@@ -1,4 +1,4 @@
-import { ModalList } from "components/modal/__internal__/modal-manager";
+import { ModalList } from "./components/modal/__internal__/modal-manager";
 
 declare global {
   module "*.png";

package/lib/hooks/__internal__/useChildButtons/useChildButtons.d.ts

@@ -4,7 +4,7 @@ declare const useChildButtons: (toggleButtonRef: React.RefObject<HTMLButtonEleme
     showButtons: () => void;
     hideButtons: () => void;
     buttonNode: import("react").RefObject<HTMLDivElement>;
-    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleToggleButtonKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     wrapperProps: {
         "data-element": string;
         role: string;

package/lib/hooks/__internal__/useDebounce/useDebounce.d.ts

@@ -1,4 +1,4 @@
 import { DebouncedFunc } from "lodash";
-declare type Callback = (...args: any[]) => void;
+type Callback = (...args: any[]) => void;
 declare const useDebounce: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
 export default useDebounce;

package/lib/hooks/__internal__/useFloating/useFloating.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
-declare type CustomRefObject<T> = {
+type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface UseFloatingProps {

package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare type UseModalManagerArgs = {
+type UseModalManagerArgs = {
     open: boolean;
     closeModal: (e: KeyboardEvent) => void;
     modalRef: React.RefObject<HTMLElement>;

package/lib/hooks/__internal__/useThrottle/useThrottle.d.ts

@@ -1,4 +1,4 @@
 import { DebouncedFunc } from "lodash";
-declare type Callback = (...args: any[]) => void;
+type Callback = (...args: any[]) => void;
 declare const useThrottle: <T extends Callback>(callback: T, delay: number) => DebouncedFunc<T>;
 export default useThrottle;

package/lib/style/palette/index.d.ts

@@ -1,4 +1,4 @@
-export declare type PaletteFunction = (weight: number | string) => string;
+export type PaletteFunction = (weight: number | string) => string;
 /**
  * Takes a config object of base colors and, for each base, generates functions
  * to lighten and darken it.

package/lib/style/themes/base/base-theme.config.d.ts

@@ -1,5 +1,5 @@
 import { PaletteFunction } from "../../palette";
-export declare type BasePalette = Record<string, string | PaletteFunction> & {
+export type BasePalette = Record<string, string | PaletteFunction> & {
     blackOpacity: PaletteFunction;
     whiteOpacity: PaletteFunction;
     [key: string]: PaletteFunction;

package/lib/style/utils/box-gap.d.ts

@@ -1,5 +1,5 @@
 export declare const GAP_VALUES: number[];
-export declare type AllowedNumericalValues = (typeof GAP_VALUES)[number];
-export declare type Gap = AllowedNumericalValues | string;
+export type AllowedNumericalValues = (typeof GAP_VALUES)[number];
+export type Gap = AllowedNumericalValues | string;
 export declare const getGapValue: (gapValue: number | string) => string;
 export default function gap(gapValue: number | string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "152.7.0",
+  "version": "153.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -51,7 +51,7 @@
     "@sage/design-tokens": "^4.17.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "@axe-core/playwright": "~4.10.1",
@@ -104,10 +104,10 @@
     "@types/react-transition-group": "^4.4.9",
     "@types/sinon": "^17.0.3",
     "@types/sprintf-js": "^1.1.4",
-    "@types/styled-components": "5.1.17",
+    "@types/styled-components": "5.1.34",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "browserslist": "^4.22.1",
@@ -143,7 +143,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jest-fail-on-console": "^3.3.1",
     "jest-fetch-mock": "^3.0.3",
-    "jest-styled-components": "^6.3.4",
+    "jest-styled-components": "^7.0.8",
     "jsdom": "^21.1.0",
     "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
@@ -162,8 +162,8 @@
     "semver": "^7.5.4",
     "sprintf-js": "^1.1.3",
     "storybook": "~8.6.7",
-    "styled-components": "^4.4.1",
-    "typescript": "~4.7.0",
+    "styled-components": "^5.3.11",
+    "typescript": "~5.3.0",
     "url-loader": "^4.1.1",
     "uuid": "^8.3.2",
     "webpack-dev-server": "^4.15.1"