@equinor/eds-core-react 1.0.1 → 1.1.0

package/README.md

@@ -3,7 +3,7 @@
 Available components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!
 
 Make sure to check out our [Storybook](https://storybook.eds.equinor.com/) for more examples!
-Read the [changelog](https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/CHANGELOG.md) for details on specific releases.
+Read the [changelog](https://github.com/equinor/design-system/blob/main/packages/eds-core-react/CHANGELOG.md) for details on specific releases.
 
 ## Installation
 

package/dist/eds-core-react.cjs

@@ -1184,7 +1184,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })],
     whileElementsMounted: react$1.autoUpdate
   });
-  const anchorRef = react.useMemo(() => edsUtils.mergeRefs(refs.setReference, children?.ref), [refs.setReference, children?.ref]);
+  const mergedAnchorRef = react.useMemo(() => edsUtils.mergeRefs(refs.setReference), [refs.setReference]);
   const tooltipRef = react.useMemo(() => edsUtils.mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
   const {
     getReferenceProps,
@@ -1229,11 +1229,13 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
       });
     }
   });
-  const updatedChildren = /*#__PURE__*/react.cloneElement(children, {
-    ...getReferenceProps({
-      ...children.props,
-      ref: anchorRef
-    })
+  const updatedChildren = /*#__PURE__*/react.cloneElement(children,
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  {
+    ...getReferenceProps(children.props),
+    ref: edsUtils.mergeRefs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    children.props.ref, mergedAnchorRef)
   });
   react.useEffect(() => {
     if (!elements.floating) return;
@@ -1265,7 +1267,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [shouldOpen && open && !disabled && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
+    children: [updatedChildren, shouldOpen && open && !disabled && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body)]
   });
 });
 
@@ -1441,6 +1443,19 @@ const StyledTypography$1 = styled__default.default.p.withConfig({
 }) => $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline)));
+/**
+ * @deprecated Typography component is deprecated and will be removed in a future version.
+ * Please use the new Typography, Heading, or Paragraph components instead.
+ *
+ * Migration guide:
+ * - For headings: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
+ * - For paragraphs: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
+ * - For inline text: Use `<Typography>` for more flexible text styling
+ *
+ * @see {@link TypographyNext}
+ * @see {@link Heading}
+ * @see {@link Paragraph}
+ */
 const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -1454,6 +1469,7 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
+  edsUtils.useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);
@@ -1477,6 +1493,138 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography({
 
 // Typography.displayName = 'EdsTypography'
 
+/**
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
+ */
+const TypographyNext = /*#__PURE__*/react.forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-text-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
+  });
+});
+TypographyNext.displayName = 'TypographyNext';
+
+const getHeadingSize = as => {
+  switch (as) {
+    case 'h1':
+      return '6xl';
+    case 'h2':
+      return '5xl';
+    case 'h3':
+      return '4xl';
+    case 'h4':
+      return '3xl';
+    case 'h5':
+      return '2xl';
+    case 'h6':
+      return 'xl';
+    default:
+      return '6xl';
+  }
+};
+
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+const Heading = /*#__PURE__*/react.forwardRef(({
+  lineHeight = 'squished',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  as,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: as,
+    family: "header",
+    baseline: "grid",
+    size: getHeadingSize(as),
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Heading.displayName = 'Heading';
+
+const Paragraph = /*#__PURE__*/react.forwardRef(({
+  size = 'lg',
+  lineHeight = 'default',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    baseline: "grid",
+    size: size,
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Paragraph.displayName = 'Paragraph';
+
 const {
   typography: {
     table: {
@@ -12598,6 +12746,7 @@ exports.DialogTitle = DialogTitle;
 exports.Divider = Divider;
 exports.DotProgress = DotProgress;
 exports.EdsProvider = EdsProvider;
+exports.Heading = Heading;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
@@ -12611,6 +12760,7 @@ exports.MenuSection = MenuSection;
 exports.NativeSelect = NativeSelect;
 exports.Pagination = Pagination;
 exports.Paper = Paper;
+exports.Paragraph = Paragraph;
 exports.Popover = Popover;
 exports.PopoverActions = PopoverActions;
 exports.PopoverContent = PopoverContent;
@@ -12656,5 +12806,6 @@ exports.TopbarActions = Actions;
 exports.TopbarCustomContent = CustomContent;
 exports.TopbarHeader = Header$2;
 exports.Typography = Typography;
+exports.TypographyNext = TypographyNext;
 exports.useEds = useEds;
 exports.useSideBar = useSideBar;

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -13,8 +13,8 @@ import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, size, useInteractions, autoUpdate } from '@floating-ui/react';
 import { AddNewOption } from './AddNewOption.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import pickBy from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/pickBy.js';
-import mergeWith from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeWith.js';
+import pickBy from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeWith.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography,

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   clickbounds: {

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Input/Input.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/InputWrapper/InputWrapper.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.31.3/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   typography: {

package/dist/esm/components/Tooltip/Tooltip.js

@@ -62,7 +62,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })],
     whileElementsMounted: autoUpdate
   });
-  const anchorRef = useMemo(() => mergeRefs(refs.setReference, children?.ref), [refs.setReference, children?.ref]);
+  const mergedAnchorRef = useMemo(() => mergeRefs(refs.setReference), [refs.setReference]);
   const tooltipRef = useMemo(() => mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
   const {
     getReferenceProps,
@@ -107,11 +107,13 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
       });
     }
   });
-  const updatedChildren = /*#__PURE__*/cloneElement(children, {
-    ...getReferenceProps({
-      ...children.props,
-      ref: anchorRef
-    })
+  const updatedChildren = /*#__PURE__*/cloneElement(children,
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  {
+    ...getReferenceProps(children.props),
+    ref: mergeRefs(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+    children.props.ref, mergedAnchorRef)
   });
   useEffect(() => {
     if (!elements.floating) return;
@@ -143,7 +145,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [shouldOpen && open && !disabled && /*#__PURE__*/createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
+    children: [updatedChildren, shouldOpen && open && !disabled && /*#__PURE__*/createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body)]
   });
 });
 

package/dist/esm/components/Typography/Heading.js

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { TypographyNext } from './Typography.new.js';
+import { jsx } from 'react/jsx-runtime';
+
+const getHeadingSize = as => {
+  switch (as) {
+    case 'h1':
+      return '6xl';
+    case 'h2':
+      return '5xl';
+    case 'h3':
+      return '4xl';
+    case 'h4':
+      return '3xl';
+    case 'h5':
+      return '2xl';
+    case 'h6':
+      return 'xl';
+    default:
+      return '6xl';
+  }
+};
+
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+const Heading = /*#__PURE__*/forwardRef(({
+  lineHeight = 'squished',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  as,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: as,
+    family: "header",
+    baseline: "grid",
+    size: getHeadingSize(as),
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Heading.displayName = 'Heading';
+
+export { Heading };

package/dist/esm/components/Typography/Paragraph.js

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { TypographyNext } from './Typography.new.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Paragraph = /*#__PURE__*/forwardRef(({
+  size = 'lg',
+  lineHeight = 'default',
+  weight = 'normal',
+  tracking = 'normal',
+  debug,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    baseline: "grid",
+    size: size,
+    lineHeight: lineHeight,
+    weight: weight,
+    tracking: tracking,
+    debug: debug,
+    ...rest
+  });
+});
+Paragraph.displayName = 'Paragraph';
+
+export { Paragraph };

package/dist/esm/components/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { useDeprecationWarning, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { quickVariants, typography, colors, link } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -53,6 +53,19 @@ const StyledTypography = styled.p.withConfig({
 }) => $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
   $link
 }) => $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
+/**
+ * @deprecated Typography component is deprecated and will be removed in a future version.
+ * Please use the new Typography, Heading, or Paragraph components instead.
+ *
+ * Migration guide:
+ * - For headings: Use `<Heading as="h1|h2|h3|h4|h5|h6">` instead of `<Typography variant="h1|h2|h3|h4|h5|h6">`
+ * - For paragraphs: Use `<Paragraph>` instead of `<Typography variant="body_short|body_long">`
+ * - For inline text: Use `<Typography>` for more flexible text styling
+ *
+ * @see {@link TypographyNext}
+ * @see {@link Heading}
+ * @see {@link Paragraph}
+ */
 const Typography = /*#__PURE__*/forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -66,6 +79,7 @@ const Typography = /*#__PURE__*/forwardRef(function Typography({
   as: providedAs,
   ...other
 }, ref) {
+  useDeprecationWarning('The Typography component is deprecated and will be removed in a future version. ' + 'Please migrate to the new TypographyNext, Heading, or Paragraph component. ' + 'See the documentation for migration details.', 'Typography');
   const as = providedAs ? providedAs : getElementType(variant, link);
   const variantName = toVariantName(variant, bold, italic, link);
   const typography = findTypography(variantName, group);

package/dist/esm/components/Typography/Typography.new.js

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * TypographyNext component for flexible typography with baseline grid support.
+ *
+ * Provides full control over typography properties including family, size,
+ * lineHeight, baseline alignment, weight, and tracking.
+ *
+ * **Display behavior:** Elements render as `display: block` by default for
+ * text-box trimming and baseline grid alignment. Override with CSS if needed.
+ *
+ * @example
+ * ```tsx
+ * import { TypographyNext as Typography } from '@equinor/eds-core-react'
+ *
+ * <Typography
+ *   family="ui"
+ *   size="md"
+ *   lineHeight="default"
+ *   baseline="grid"
+ *   weight="normal"
+ *   tracking="normal"
+ * >
+ *   Text content (renders as block-level by default)
+ * </Typography>
+ *
+ * <Typography
+ *   as="h1"
+ *   family="header"
+ *   size="3xl"
+ *   lineHeight="squished"
+ *   baseline="grid"
+ *   weight="bolder"
+ *   tracking="tight"
+ * >
+ *   Page heading
+ * </Typography>
+ * ```
+ */
+const TypographyNext = /*#__PURE__*/forwardRef(({
+  as = 'span',
+  family,
+  size,
+  baseline,
+  lineHeight,
+  weight,
+  tracking,
+  debug,
+  ...rest
+}, ref) => {
+  const Component = as;
+  return /*#__PURE__*/jsx(Component, {
+    ref: ref,
+    "data-font-family": family,
+    "data-text-size": size,
+    "data-baseline": baseline || undefined,
+    "data-line-height": lineHeight || undefined,
+    "data-font-weight": weight || undefined,
+    "data-tracking": tracking || undefined,
+    "data-debug": debug ? '' : undefined,
+    ...rest
+  });
+});
+TypographyNext.displayName = 'TypographyNext';
+
+export { TypographyNext };

package/dist/esm/index.js

@@ -18,6 +18,9 @@ export { Menu } from './components/Menu/index.js';
 export { SideBar } from './components/SideBar/index.js';
 export { ButtonGroup } from './components/Button/ButtonGroup/ButtonGroup.js';
 export { ToggleButton } from './components/Button/ToggleButton/ToggleButton.js';
+export { TypographyNext } from './components/Typography/Typography.new.js';
+export { Heading } from './components/Typography/Heading.js';
+export { Paragraph } from './components/Typography/Paragraph.js';
 export { Typography } from './components/Typography/Typography.js';
 export { Body as TableBody } from './components/Table/Body.js';
 export { Cell as TableCell } from './components/Table/Cell.js';