@equinor/eds-core-react 1.0.2 → 2.0.0

package/dist/esm/components/Textarea/Textarea.js

@@ -1,22 +1,58 @@
-import { forwardRef, useState, useCallback } from 'react';
+import { forwardRef, useMemo } from 'react';
 import * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
 import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { Input } from '../Input/Input.js';
+import { useInputField } from '../InputWrapper/useInputField.js';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { Input } from '../Input/Input.js';
 
 const {
   input
 } = Input_tokens;
+const leftAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start'
+  }
+};
+const rightAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start',
+    pointerEvents: 'none'
+  }
+};
 const Textarea = /*#__PURE__*/forwardRef(function Textarea({
+  id,
+  label,
+  meta,
+  helperText,
+  placeholder,
+  disabled,
+  className,
   variant,
-  disabled = false,
-  type = 'text',
+  inputIcon,
+  helperIcon,
+  style,
   rowsMax,
   ...other
 }, ref) {
-  const [textareaEl, setTextareaEl] = useState(null);
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
+    className,
+    style
+  });
   const {
     density
   } = useEds();
@@ -28,40 +64,35 @@ const Textarea = /*#__PURE__*/forwardRef(function Textarea({
     top,
     bottom
   } = spacings;
-  let fontSize = 16;
-  if (textareaEl) {
-    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
-  }
-  const padding = parseInt(top) + parseInt(bottom);
-  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
-  useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  const combinedRef = useCallback(() => mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
-  const inputProps = {
-    ref: combinedRef,
-    type,
+
+  // Calculate maxHeight if rowsMax is provided
+  // Using default fontSize of 16px for initial calculation
+  // useAutoResize will handle actual resizing based on element's scrollHeight
+  const maxHeight = rowsMax ? parseFloat(lineHeight) * 16 * rowsMax + parseInt(top) + parseInt(bottom) : null;
+  const autoResizeRef = useAutoResize(maxHeight);
+  const combinedRef = useMemo(() => mergeRefs(ref, autoResizeRef), [ref, autoResizeRef]);
+  const fieldProps = {
+    ...ariaProps,
     disabled,
+    placeholder,
     variant,
-    ...other
-  };
-  const leftAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start'
-    }
-  };
-  const rigthAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start',
-      pointerEvents: 'none'
-    }
-  };
-  return /*#__PURE__*/jsx(Input, {
-    as: "textarea",
-    rightAdornmentsProps: rigthAdornmentStyles,
+    rightAdornments: inputIcon,
+    rightAdornmentsProps: rightAdornmentStyles,
     leftAdornmentsProps: leftAdornmentStyles,
+    as: 'textarea',
+    ref: combinedRef,
     style: {
       height: 'auto'
     },
-    ...inputProps
+    ...other
+  };
+  return /*#__PURE__*/jsx(InputWrapper, {
+    helperProps: helperProps,
+    labelProps: labelProps,
+    ...containerProps,
+    children: /*#__PURE__*/jsx(Input, {
+      ...fieldProps
+    })
   });
 });
 

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';
@@ -27,6 +30,7 @@ export { Row as TableRow } from './components/Table/Row/Row.js';
 export { Caption as TableCaption } from './components/Table/Caption.js';
 export { Divider } from './components/Divider/Divider.js';
 export { TextField } from './components/TextField/TextField.js';
+export { Textarea } from './components/Textarea/Textarea.js';
 export { ListItem } from './components/List/ListItem.js';
 export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionHeader } from './components/Accordion/AccordionHeader.js';
@@ -83,6 +87,7 @@ export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
 export { Paper } from './components/Paper/Paper.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
 export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
+export { useInputField } from './components/InputWrapper/useInputField.js';
 export { useSideBar } from './components/SideBar/SideBar.context.js';
 export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
 export { SideBarContent } from './components/SideBar/SideBarContent.js';

package/dist/types/components/Button/tokens/contained.d.ts

@@ -1,4 +1,3 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;
+export declare const primary: import("../Button.types").ButtonToken;
+export declare const secondary: import("../Button.types").ButtonToken;
+export declare const danger: import("../Button.types").ButtonToken;

package/dist/types/components/Button/tokens/outlined.d.ts

@@ -1,4 +1,3 @@
-import { ButtonToken } from '../Button.types';
-export declare const primary: ButtonToken;
-export declare const secondary: ButtonToken;
-export declare const danger: ButtonToken;
+export declare const primary: import("../Button.types").ButtonToken;
+export declare const secondary: import("../Button.types").ButtonToken;
+export declare const danger: import("../Button.types").ButtonToken;

package/dist/types/components/InputWrapper/index.d.ts

@@ -1,2 +1,5 @@
 export { InputWrapper } from './InputWrapper';
 export type { InputWrapperProps } from './InputWrapper';
+export { useInputField } from './useInputField';
+export type { InputFieldConfig, UseInputFieldReturn } from './useInputField';
+export type { BaseInputFieldProps } from './types';

package/dist/types/components/InputWrapper/types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { Variants } from '../types';
+/**
+ * Base props shared by all input field components (TextField, Textarea, etc.)
+ */
+export type BaseInputFieldProps = {
+    /** Variants */
+    variant?: Variants;
+    /** Input unique id. If this is not provided, one will be generated */
+    id?: string;
+    /** Label text */
+    label?: ReactNode;
+    /** Meta text */
+    meta?: ReactNode;
+    /** Helper text */
+    helperText?: string;
+    /** InputIcon */
+    inputIcon?: ReactNode;
+    /** HelperIcon */
+    helperIcon?: ReactNode;
+};

package/dist/types/components/InputWrapper/useInputField.d.ts

@@ -0,0 +1,31 @@
+import type { LabelProps } from '../Label/Label';
+import type { HelperTextProps } from './HelperText/HelperText';
+import type { BaseInputFieldProps } from './types';
+import type { Variants } from '../types';
+export type InputFieldConfig = BaseInputFieldProps & {
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type UseInputFieldReturn = {
+    fieldId: string;
+    helperTextId: string | null;
+    containerProps: {
+        className?: string;
+        style: React.CSSProperties;
+        color?: Variants;
+    };
+    labelProps: LabelProps;
+    helperProps: HelperTextProps;
+    ariaProps: {
+        id: string;
+        'aria-invalid'?: boolean;
+        'aria-describedby'?: string;
+    };
+};
+/**
+ * Shared hook for TextField and Textarea that handles common logic
+ * for IDs, labels, helper text, and ARIA attributes
+ */
+export declare const useInputField: ({ id, label, meta, helperText, helperIcon, variant, disabled, className, style, }: InputFieldConfig) => UseInputFieldReturn;

package/dist/types/components/TextField/TextField.d.ts

@@ -1,31 +1,11 @@
-import { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, ForwardedRef } from 'react';
-import type { Variants } from '../types';
-type SharedTextFieldProps = {
-    /** Variants */
-    variant?: Variants;
-    /** Input unique id. If this is not provided, one will be generated */
-    id?: string;
-    /** Label text */
-    label?: ReactNode;
-    /** Meta text */
-    meta?: ReactNode;
+import { InputHTMLAttributes, ForwardedRef } from 'react';
+import { BaseInputFieldProps } from '../InputWrapper';
+type TextFieldSpecificProps = {
     /** Unit text */
     unit?: string;
-    /** Helper text */
-    helperText?: string;
-    /** InputIcon */
-    inputIcon?: ReactNode;
-    /** HelperIcon */
-    helperIcon?: ReactNode;
-    /**  Maximum number of rows if `multiline` is set to `true` */
-    rowsMax?: number;
     /** Input ref */
     inputRef?: ForwardedRef<HTMLInputElement>;
-    /** Textarea ref when multiline is set to `true` */
-    textareaRef?: ForwardedRef<HTMLTextAreaElement>;
-    /** If `true` a `textarea` is rendered for multiline support. Make sure to use `textareaRef` if you need to access reference element  */
-    multiline?: boolean;
 };
-export type TextFieldProps = SharedTextFieldProps & (TextareaHTMLAttributes<HTMLTextAreaElement> | InputHTMLAttributes<HTMLInputElement>);
-export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export type TextFieldProps = BaseInputFieldProps & TextFieldSpecificProps & InputHTMLAttributes<HTMLInputElement>;
+export declare const TextField: import("react").ForwardRefExoticComponent<BaseInputFieldProps & TextFieldSpecificProps & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/types/components/Textarea/Textarea.d.ts

@@ -1,30 +1,9 @@
 import { TextareaHTMLAttributes } from 'react';
-import type { Variants } from '../types';
-export type TextareaProps = {
-    /** Placeholder */
-    placeholder?: string;
-    /** Variant */
-    variant?: Variants;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Type */
-    type?: string;
-    /** Read Only */
-    readOnly?: boolean;
+import { BaseInputFieldProps } from '../InputWrapper';
+type TextareaSpecificProps = {
     /** Specifies max rows for multiline  */
     rowsMax?: number;
-} & TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare const Textarea: import("react").ForwardRefExoticComponent<{
-    /** Placeholder */
-    placeholder?: string;
-    /** Variant */
-    variant?: Variants;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Type */
-    type?: string;
-    /** Read Only */
-    readOnly?: boolean;
-    /** Specifies max rows for multiline  */
-    rowsMax?: number;
-} & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
+};
+export type TextareaProps = BaseInputFieldProps & TextareaSpecificProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<BaseInputFieldProps & TextareaSpecificProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/types/components/Typography/Heading.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Heading component for semantic headings (h1-h6).
+ * Uses the design system's typography styles for headings.
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/types/components/Typography/Heading.types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { BaseTypographyProps } from './Typography.new.types';
+export type HeadingProps = {
+    /** HTML heading element to render */
+    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & BaseTypographyProps & HTMLAttributes<HTMLHeadingElement>;

package/dist/types/components/Typography/Paragraph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Paragraph component for rendering text paragraphs.
+ * Uses the design system's typography styles for UI text.
+ */
+export declare const Paragraph: import("react").ForwardRefExoticComponent<{
+    size?: import("./types").FontSize;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/types/components/Typography/Paragraph.types.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { FontSize } from './types';
+import { BaseTypographyProps } from './Typography.new.types';
+export type ParagraphProps = {
+    /** Size of the text */
+    size?: FontSize;
+} & BaseTypographyProps & HTMLAttributes<HTMLParagraphElement>;

package/dist/types/components/Typography/Typography.d.ts

@@ -20,4 +20,17 @@ export type TypographyProps = {
     /** Number of lines. */
     lines?: number;
 } & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+/**
+ * @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}
+ */
 export declare const Typography: OverridableComponent<TypographyProps, HTMLElement>;

package/dist/types/components/Typography/Typography.new.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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>
+ * ```
+ */
+export declare const TypographyNext: import("react").ForwardRefExoticComponent<{
+    family: import("./types").FontFamily;
+    size: import("./types").FontSize;
+    baseline: import("./types").BaselineAlignment;
+    as?: import("react").ElementType;
+} & import("./Typography.new.types").BaseTypographyProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/Typography/Typography.new.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ElementType } from 'react';
+import { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking } from './types';
+/**
+ * Base typography props shared across typography components.
+ * Can be extended for specific typography component needs.
+ */
+export type BaseTypographyProps = {
+    /** Line height variant */
+    lineHeight?: LineHeight;
+    /** Font weight */
+    weight?: FontWeight;
+    /** Letter spacing (tracking) */
+    tracking?: Tracking;
+    /** Enable debug mode to visualize text box */
+    debug?: boolean;
+    /** Children to render */
+    children?: React.ReactNode;
+};
+export type TypographyNextProps = {
+    /** Font family */
+    family: FontFamily;
+    /** Size of the text */
+    size: FontSize;
+    /** Baseline alignment strategy */
+    baseline: BaselineAlignment;
+    /** Semantic HTML element to render. Defaults to 'span' */
+    as?: ElementType;
+} & BaseTypographyProps & HTMLAttributes<HTMLElement>;