@equinor/eds-core-react 2.0.1 → 2.2.0-beta.0

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

@@ -1,26 +1,18 @@
-import { LiHTMLAttributes, ReactNode } from 'react';
+import { VirtualItem } from '@tanstack/react-virtual';
 type StyledListItemType = {
     $highlighted?: string;
     $active?: string;
     $isdisabled?: string;
 };
-export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
+export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
 export declare const AutocompleteOptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $multiline: boolean;
 }>> & string;
 export type AutocompleteOptionProps = {
-    value: string;
-    multiple: boolean;
-    highlighted: string;
-    isSelected: boolean;
-    isDisabled?: boolean;
-    multiline: boolean;
-    optionComponent?: ReactNode;
+    index: number;
+    virtualItem: VirtualItem;
+    item: unknown;
     indeterminate?: boolean;
-} & LiHTMLAttributes<HTMLLIElement>;
-declare function AutocompleteOptionInner(props: AutocompleteOptionProps, ref: React.ForwardedRef<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
-export declare const AutocompleteOption: (props: AutocompleteOptionProps & {
-    ref?: React.ForwardedRef<HTMLLIElement>;
-    displayName?: string | undefined;
-}) => ReturnType<typeof AutocompleteOptionInner>;
+};
+export declare function Option({ indeterminate, index, item, virtualItem, }: AutocompleteOptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+import { UseFloatingReturn } from '@floating-ui/react';
+export declare const OptionList: ({ refs, strategy, x, y, update, }: UseFloatingReturn) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const RightAdornments: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export type AutocompleteOptionProps = {
+    item: unknown;
+    index: number;
+    ref?: React.Ref<HTMLLIElement>;
+};
+export declare function SelectAllOption({ item, index, ref }: AutocompleteOptionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const SingleInput: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,122 @@
+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> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => {
+    getDropdownProps: <Options>(options?: import("downshift").UseMultipleSelectionGetDropdownPropsOptions & Options, extraOptions?: import("downshift").GetPropsCommonOptions) => Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, Options>, "preventKeyAction">;
+    addSelectedItem: (item: T) => void;
+    removeSelectedItem: (item: T) => void;
+    selectedItems: T[];
+    setSelectedItems: (items: T[]) => void;
+    clear: () => void;
+    availableItems: readonly T[];
+    getLabel: (item: T) => string;
+    scrollContainer: import("react").RefObject<HTMLUListElement>;
+    rowVirtualizer: import("@tanstack/react-virtual").Virtualizer<HTMLUListElement, Element>;
+    allSelectedState: string;
+    toggleAllSelected: () => void;
+    typedInputValue: string;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    token: () => import("styled-components").DefaultTheme;
+    tokens: AutocompleteToken;
+    placeholderText: string;
+    readOnly: boolean;
+    inputProps: import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Omit<import("downshift").Overwrite<import("downshift").UseMultipleSelectionGetDropdownReturnValue, {
+        preventKeyAction: boolean;
+        disabled: boolean;
+        ref: import("react").RefObject<HTMLInputElement>;
+    }>, "preventKeyAction">>;
+    consolidatedEvents: Partial<import("react").DOMAttributes<unknown>>;
+    multiple: boolean;
+    disabled: boolean;
+    optionDisabled: (option: T) => boolean;
+    onAddNewOption: (text: string) => void;
+    options: readonly T[];
+    totalOptions: number;
+    label: import("react").ReactNode;
+    meta: import("react").ReactNode;
+    className: string;
+    style: import("react").CSSProperties;
+    loading: boolean;
+    hideClearButton: boolean;
+    onOptionsChange: (changes: import("./Autocomplete").AutocompleteChanges<T>) => void;
+    onInputChange: (text: string) => void;
+    selectedOptions: T[];
+    selectionDisplay: "summary" | "chips";
+    itemToKey: (item: T) => unknown;
+    itemCompare: (value: T, compare: T) => boolean;
+    allowSelectAll: boolean;
+    initialSelectedOptions: T[];
+    optionsFilter: (option: T, inputValue: string) => boolean;
+    autoWidth: boolean;
+    placeholder: string;
+    optionLabel: ((option: T) => string) | ((option: T) => string) | ((option: T) => string);
+    clearSearchOnChange: boolean;
+    multiline: boolean;
+    dropdownHeight: number;
+    optionComponent: (option: T, isSelected: boolean) => import("react").ReactNode;
+    helperText: string;
+    helperIcon: import("react").ReactNode;
+    noOptionsText: string;
+    variant: import("../types").Variants;
+    onClear: () => void;
+    selectedItemsLabels: string[];
+    restHtmlProps: Omit<{
+        options: readonly T[];
+        totalOptions?: number;
+        label: import("react").ReactNode;
+        initialSelectedOptions?: T[];
+        helperText?: string;
+        helperIcon?: import("react").ReactNode;
+        noOptionsText?: string;
+        variant?: import("../types").Variants;
+        meta?: import("react").ReactNode;
+        disabled?: boolean;
+        loading?: boolean;
+        readOnly?: boolean;
+        hideClearButton?: boolean;
+        selectedOptions?: T[];
+        selectionDisplay?: "chips" | "summary";
+        onOptionsChange?: (changes: import("./Autocomplete").AutocompleteChanges<T>) => void;
+        onInputChange?: (text: string) => void;
+        onAddNewOption?: (text: string) => void;
+        multiple?: boolean;
+        allowSelectAll?: boolean;
+        optionComponent?: (option: T, isSelected: boolean) => import("react").ReactNode;
+        optionDisabled?: (option: T) => boolean;
+        optionsFilter?: (option: T, inputValue: string) => boolean;
+        autoWidth?: boolean;
+        placeholder?: string;
+        clearSearchOnChange?: boolean;
+        multiline?: boolean;
+        dropdownHeight?: number;
+        itemToKey?: (value: T) => unknown;
+        itemCompare?: (value: T, compare: T) => boolean;
+        onClear?: () => void;
+        ref?: React.Ref<HTMLInputElement>;
+    } & import("react").HTMLAttributes<HTMLDivElement> & (T extends string | number ? {
+        optionLabel?: (option: T) => string;
+    } : T extends object ? {
+        optionLabel: (option: T) => string;
+    } : {
+        optionLabel?: (option: T) => string;
+    }) & {
+        ref?: React.Ref<HTMLInputElement>;
+    }, "ref" | "className" | "style" | "disabled" | "label" | "meta" | "multiple" | "variant" | "options" | "placeholder" | "readOnly" | "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;
+    inputValue: string;
+    getToggleButtonProps: <Options>(options?: import("downshift").UseComboboxGetToggleButtonPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetToggleButtonPropsReturnValue, Options>;
+    getLabelProps: <Options>(options?: import("downshift").UseComboboxGetLabelPropsOptions & Options) => import("downshift").Overwrite<import("downshift").UseComboboxGetLabelPropsReturnValue, Options>;
+    getMenuProps: <Options>(options?: import("downshift").UseComboboxGetMenuPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetMenuPropsReturnValue, Options>;
+    getItemProps: <Options>(options: import("downshift").UseComboboxGetItemPropsOptions<T> & Options) => Omit<import("downshift").Overwrite<import("downshift").UseComboboxGetItemPropsReturnValue, Options>, "index" | "item">;
+    getInputProps: <Options>(options?: import("downshift").UseComboboxGetInputPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Options>;
+    reset: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    toggleMenu: () => void;
+    selectItem: (item: T) => void;
+    setHighlightedIndex: (index: number) => void;
+    setInputValue: (inputValue: string) => void;
+};

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

@@ -0,0 +1,13 @@
+import { DOMAttributes, FocusEvent } from 'react';
+export declare const findNextIndex: IndexFinderType;
+export declare const findPrevIndex: IndexFinderType;
+type IndexFinderType = <T>({ calc, index, optionDisabled, availableItems, allDisabled, }: {
+    index: number;
+    optionDisabled: (option: T) => boolean;
+    availableItems: readonly T[];
+    allDisabled?: boolean;
+    calc?: (n: number) => number;
+}) => number;
+export declare function mergeEventsFromRight(props1: DOMAttributes<unknown>, props2: DOMAttributes<unknown>): Partial<DOMAttributes<unknown>>;
+export declare const handleListFocus: (e: FocusEvent<HTMLElement>) => void;
+export {};

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" | "value" | "multiple" | "showTimeInput" | "stateRef"> & Partial<{
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<import("./props").DatePickerProps, "onChange" | "defaultValue" | "value" | "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, "type" | "variant" | "href" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;
+} & Omit<ButtonProps, "type" | "href" | "variant" | "fullWidth"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/next/Icon/Icon.d.ts

@@ -0,0 +1,29 @@
+import type { IconProps } from './Icon.types';
+import './icon.css';
+/**
+ * Icon component for EDS 2.0
+ *
+ * Features:
+ * - Automatic sizing from parent's data-font-size via --eds-typography-icon-size
+ * - Dynamic fallback sizing (1.5em) when no tokens are set
+ * - Explicit size prop for standalone usage
+ * - WCAG 2.1 AA accessible with optional title for semantic icons
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@equinor/eds-core-react/next'
+ * import { save } from '@equinor/eds-icons'
+ *
+ * // Auto-sized from parent's data-font-size
+ * <div data-font-size="md">
+ *   <Icon data={warning} /> Error message
+ * </div>
+ *
+ * // Explicit size for standalone usage
+ * <Icon data={save} size="lg" />
+ *
+ * // Semantic icon with accessible name
+ * <Icon data={save} title="Save document" />
+ * ```
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/types/components/next/Icon/Icon.types.d.ts

@@ -0,0 +1,19 @@
+import type { IconData, IconName } from '@equinor/eds-icons';
+import type { SVGProps, Ref } from 'react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export type IconProps = {
+    /** Icon data from @equinor/eds-icons */
+    data: IconData;
+    /** Title for accessibility - when provided, icon becomes semantic with role="img" */
+    title?: string;
+    /** Color of the icon. Defaults to currentColor for inheritance */
+    color?: string;
+    /**
+     * Explicit size. Overrides automatic sizing from parent's data-font-size.
+     * When not set, icon inherits size from --eds-typography-icon-size or scales dynamically (1.5em).
+     */
+    size?: IconSize;
+    /** @ignore */
+    ref?: Ref<SVGSVGElement>;
+} & Omit<SVGProps<SVGSVGElement>, 'color'>;
+export type { IconData, IconName };

package/dist/types/components/next/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSize, IconData, IconName } from './Icon.types';

package/dist/types/components/next/Placeholder/Placeholder.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Placeholder component for testing the /next entry point.
+ * This component should be removed once real EDS 2.0 components are added.
+ */
+export type PlaceholderProps = {
+    /** Text to display */
+    text?: string;
+};
+export declare const Placeholder: ({ text, }: PlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/next/Placeholder/Placeholder.figma.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Example Code Connect file for EDS components.
+ *
+ * This file demonstrates how to connect a React component to its Figma counterpart.
+ * Code Connect files should be placed alongside the component they connect.
+ *
+ * To use Code Connect:
+ * 1. Copy this file as a template for your component
+ * 2. Update the import and component reference
+ * 3. Replace the Figma URL with your component's URL (right-click → "Copy link to selection")
+ * 4. Map Figma properties to code props
+ * 5. Run `npx figma connect publish` from packages/eds-core-react/
+ *
+ * See FIGMA_CODE_CONNECT.md for full documentation.
+ */
+export {};

package/dist/types/components/next/Placeholder/index.d.ts

@@ -0,0 +1,2 @@
+export { Placeholder } from './Placeholder';
+export type { PlaceholderProps } from './Placeholder';

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

@@ -0,0 +1,4 @@
+export { Placeholder } from './Placeholder';
+export type { PlaceholderProps } from './Placeholder';
+export { Icon } from './Icon';
+export type { IconProps, IconSize, IconData, IconName } from './Icon';

package/dist/types/index.next.d.ts

@@ -0,0 +1,11 @@
+/**
+ * EDS 2.0 Beta Components
+ *
+ * These components are experimental and under active development.
+ * Breaking changes may occur between beta releases.
+ *
+ * Install: npm install @equinor/eds-core-react@beta
+ *
+ * @packageDocumentation
+ */
+export * from './components/next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "2.0.1",
+  "version": "2.2.0-beta.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -30,6 +30,11 @@
       "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/index.next.js",
+      "require": "./dist/index.next.cjs"
     }
   },
   "keywords": [
@@ -39,7 +44,8 @@
     "react"
   ],
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
+    "@figma/code-connect": "^1.3.12",
+    "@playwright/test": "^1.57.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -82,8 +88,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "styled-components": "^6",
-    "@equinor/eds-tokens": "^2.0.1"
+    "styled-components": "^6"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
@@ -96,13 +101,13 @@
     "@tanstack/react-virtual": "3.13.12",
     "downshift": "9.0.10",
     "react-aria": "^3.44.0",
-    "@equinor/eds-icons": "^1.0.1",
-    "@equinor/eds-tokens": "^2.0.1",
-    "@equinor/eds-utils": "^2.0.0"
+    "@equinor/eds-icons": "^1.2.0",
+    "@equinor/eds-utils": "^2.0.0",
+    "@equinor/eds-tokens": "^2.1.1"
   },
   "scripts": {
     "build": "rollup -c && tsc -p tsconfig.build.json",
-    "test": "tsc -p tsconfig.test.json && jest",
+    "test": "tsc -p tsconfig.test.json && jest --ci",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
     "test:visual": "playwright test",