@equinor/eds-core-react 2.3.1 → 2.3.2-beta.0

package/dist/esm-next/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-font-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 → esm-next}/components/next/Button/Button.js

@@ -32,18 +32,16 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     "data-variant": variant,
     "data-selectable-space": selectableSpace,
     "data-space-proportions": "squished",
-    "data-font-family": "ui",
-    "data-font-size": typographySize,
-    "data-line-height": "squished",
     "data-color-appearance": disabled ? 'neutral' : tone,
     "data-icon-only": icon || undefined,
     "data-round": icon && round ? true : undefined,
     ...rest,
-    children: /*#__PURE__*/jsx(TypographyNext, {
+    children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
+      as: "span",
       family: "ui",
       size: typographySize,
-      baseline: "center",
       lineHeight: "squished",
+      baseline: "center",
       children: children
     })
   });

package/dist/index.next.cjs

@@ -106,18 +106,16 @@ const Button = /*#__PURE__*/react.forwardRef(function Button({
     "data-variant": variant,
     "data-selectable-space": selectableSpace,
     "data-space-proportions": "squished",
-    "data-font-family": "ui",
-    "data-font-size": typographySize,
-    "data-line-height": "squished",
     "data-color-appearance": disabled ? 'neutral' : tone,
     "data-icon-only": icon || undefined,
     "data-round": icon && round ? true : undefined,
     ...rest,
-    children: /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+    children: icon ? children : /*#__PURE__*/jsxRuntime.jsx(TypographyNext, {
+      as: "span",
       family: "ui",
       size: typographySize,
-      baseline: "center",
       lineHeight: "squished",
+      baseline: "center",
       children: children
     })
   });

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

@@ -11,7 +11,7 @@ export declare const StyledButton: import("styled-components/dist/types").IStyle
     disabled?: boolean;
     type?: string;
     fullWidth?: boolean;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, "variant" | "href" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "fullWidth">, never>> & string & Omit<import("@equinor/eds-utils").OverridableComponent<import("../Button").ButtonProps, HTMLButtonElement> & {
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Omit<any, keyof import("react").ButtonHTMLAttributes<HTMLButtonElement> | "variant" | "href" | "fullWidth">, never>> & string & Omit<import("@equinor/eds-utils").OverridableComponent<import("../Button").ButtonProps, HTMLButtonElement> & {
     Group: typeof import("../Button").ButtonGroup;
     Toggle: typeof import("../Button").ToggleButton;
 }, keyof import("react").Component<any, {}, any>>;

package/dist/types/components/Autocomplete/AutocompleteContext.d.ts

@@ -94,7 +94,7 @@ export declare const AutocompleteContext: import("react").Context<{
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "meta" | "label" | "disabled" | "style" | "ref" | "className" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;
@@ -208,7 +208,7 @@ export declare const useAutocompleteContext: () => {
         optionLabel?: (option: unknown) => string;
     } & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "meta" | "label" | "disabled" | "style" | "ref" | "className" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: unknown;
     isOpen: boolean;

package/dist/types/components/Autocomplete/useAutocomplete.d.ts

@@ -1,3 +1,4 @@
+import type { DOMAttributes } from 'react';
 import { AutocompleteProps } from './Autocomplete';
 import { AutocompleteToken } from './Autocomplete.tokens';
 export declare const useAutocomplete: <T>({ options, totalOptions, label, meta, className, style, disabled, readOnly, loading, hideClearButton, onOptionsChange, onAddNewOption, onInputChange, selectedOptions: _selectedOptions, selectionDisplay, multiple, itemToKey: _itemToKey, itemCompare: _itemCompare, allowSelectAll, initialSelectedOptions: _initialSelectedOptions, optionDisabled, optionsFilter, autoWidth, placeholder, optionLabel, clearSearchOnChange, multiline, dropdownHeight, optionComponent, helperText, helperIcon, noOptionsText, variant, onClear, ref, ...other }: AutocompleteProps<T> & {
@@ -26,7 +27,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
         disabled: boolean;
         ref: import("react").RefObject<HTMLInputElement>;
     }>, "preventKeyAction">>;
-    consolidatedEvents: Partial<import("react").DOMAttributes<unknown>>;
+    consolidatedEvents: Partial<DOMAttributes<unknown>>;
     multiple: boolean;
     disabled: boolean;
     optionDisabled: (option: T) => boolean;
@@ -102,7 +103,7 @@ export declare const useAutocomplete: <T>({ options, totalOptions, label, meta,
         optionLabel?: (option: T) => string;
     }) & {
         ref?: React.Ref<HTMLInputElement>;
-    }, "meta" | "label" | "disabled" | "style" | "ref" | "className" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
+    }, "disabled" | "className" | "style" | "meta" | "label" | "ref" | "multiple" | "variant" | "placeholder" | "readOnly" | "options" | "helperText" | "helperIcon" | "loading" | "optionDisabled" | "totalOptions" | "initialSelectedOptions" | "noOptionsText" | "hideClearButton" | "selectedOptions" | "selectionDisplay" | "onOptionsChange" | "onInputChange" | "onAddNewOption" | "allowSelectAll" | "optionComponent" | "optionsFilter" | "autoWidth" | "clearSearchOnChange" | "multiline" | "dropdownHeight" | "itemToKey" | "itemCompare" | "onClear" | "optionLabel">;
     highlightedIndex: number;
     selectedItem: T;
     isOpen: boolean;

package/dist/types/components/Datepicker/DateRangePicker.d.ts

@@ -2,7 +2,7 @@
  * DateRangePicker component encapsulates the logic for selecting a range of dates
  * Either by accessible input fields or by a calendar.
  */
-export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<import("./props").DatePickerProps, "defaultValue" | "onChange" | "multiple" | "value" | "showTimeInput" | "stateRef"> & Partial<{
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<import("./props").DatePickerProps, "value" | "defaultValue" | "onChange" | "multiple" | "showTimeInput" | "stateRef"> & Partial<{
     onChange: (range: {
         from: Date | null;
         to: Date | null;

package/dist/types/components/SideBar/SideBarButton/index.d.ts

@@ -7,4 +7,4 @@ export type SideBarButtonProps = {
 export declare const SideBarButton: import("react").ForwardRefExoticComponent<{
     label: string;
     icon: IconData;
-} & Omit<ButtonProps, "variant" | "href" | "type" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & Omit<ButtonProps, "type" | "variant" | "href" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -6,3 +6,4 @@ export type { TypographyNextProps } from './Typography.new.types';
 export type { HeadingProps } from './Heading.types';
 export type { ParagraphProps } from './Paragraph.types';
 export type { FontFamily, FontSize, LineHeight, BaselineAlignment, FontWeight, Tracking, } from './types';
+export type { TypographyVariants, ColorVariants, TypographyGroups, } from './Typography.tokens';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "2.3.1",
+  "version": "2.3.2-beta.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -31,7 +31,14 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/eds-core-react.cjs"
-    }
+    },
+    "./next": {
+      "types": "./dist/types/index.next.d.ts",
+      "import": "./dist/esm-next/index.next.js",
+      "require": "./dist/index.next.cjs"
+    },
+    "./next/index.css": "./build/index.css",
+    "./next/index.min.css": "./build/index.min.css"
   },
   "keywords": [
     "eds",
@@ -40,27 +47,27 @@
     "react"
   ],
   "devDependencies": {
-    "@figma/code-connect": "^1.3.12",
-    "@playwright/test": "^1.57.0",
+    "@figma/code-connect": "^1.3.13",
+    "@playwright/test": "^1.58.2",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-links": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "^30.0.0",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^24.9.1",
+    "@types/node": "^25.2.3",
     "@types/ramda": "^0.31.1",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint-plugin-storybook": "9.1.13",
+    "eslint-plugin-storybook": "10.2.8",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-styled-components": "^7.2.0",
@@ -68,16 +75,16 @@
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "ramda": "^0.32.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.65.0",
-    "react-router-dom": "^7.9.4",
-    "rollup": "^4.52.5",
-    "rollup-plugin-delete": "^3.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.1",
+    "react-router-dom": "^7.13.0",
+    "rollup": "^4.57.1",
+    "rollup-plugin-delete": "^3.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.1.13",
-    "styled-components": "6.1.19",
+    "storybook": "^10.2.8",
+    "styled-components": "6.3.9",
     "tsc-watch": "^7.2.0",
     "typescript": "^5.9.3"
   },
@@ -87,19 +94,19 @@
     "styled-components": "^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@floating-ui/react": "^0.27.16",
-    "@internationalized/date": "^3.10.0",
-    "@react-aria/utils": "^3.31.0",
-    "@react-stately/calendar": "^3.9.0",
-    "@react-stately/datepicker": "^3.15.2",
-    "@react-types/shared": "^3.32.1",
-    "@tanstack/react-virtual": "3.13.12",
-    "downshift": "9.0.10",
-    "react-aria": "^3.44.0",
-    "@equinor/eds-icons": "^1.2.0",
-    "@equinor/eds-utils": "^2.0.0",
-    "@equinor/eds-tokens": "^2.1.1"
+    "@babel/runtime": "^7.28.6",
+    "@floating-ui/react": "^0.27.17",
+    "@internationalized/date": "^3.11.0",
+    "@react-aria/utils": "^3.33.0",
+    "@react-stately/calendar": "^3.9.2",
+    "@react-stately/datepicker": "^3.16.0",
+    "@react-types/shared": "^3.33.0",
+    "@tanstack/react-virtual": "3.13.18",
+    "downshift": "9.3.0",
+    "react-aria": "^3.46.0",
+    "@equinor/eds-icons": "^1.2.2",
+    "@equinor/eds-tokens": "^2.2.0",
+    "@equinor/eds-utils": "^2.0.0"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",

package/dist/{esm → esm-next}/index.next.js

@@ -1,9 +1,9 @@
 export { Button } from './components/next/Button/Button.js';
-export { Icon } from './components/next/Icon/Icon.js';
-export { Field } from './components/next/Field/Field.js';
-export { useFieldIds } from './components/next/Field/useFieldIds.js';
 export { Checkbox } from './components/next/Checkbox/Checkbox.js';
+export { Field } from './components/next/Field/Field.js';
+export { Icon } from './components/next/Icon/Icon.js';
+export { Input } from './components/next/Input/Input.js';
 export { Radio } from './components/next/Radio/Radio.js';
 export { Switch } from './components/next/Switch/Switch.js';
-export { Input } from './components/next/Input/Input.js';
 export { TextField } from './components/next/TextField/TextField.js';
+export { useFieldIds } from './components/next/Field/useFieldIds.js';