@equinor/eds-core-react 0.13.1 → 0.14.1

package/dist/types/components/Accordion/Accordion.tokens.d.ts

@@ -3,6 +3,7 @@ declare type AccordionToken = ComponentToken & {
     entities: {
         chevron: ComponentToken;
         header: ComponentToken;
+        icon: ComponentToken;
     };
 };
 export declare const accordion: AccordionToken;

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

@@ -1,5 +1,7 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export declare type BannerProps = {
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
-export declare const Banner: FC<BannerProps>;
+export declare const Banner: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Banner/BannerActions.d.ts

@@ -1,8 +1,11 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 declare type BannerActionsPlacement = 'bottom' | 'left';
 export declare type BannerActionsProps = {
     children: ReactNode;
     placement?: BannerActionsPlacement;
 } & HTMLAttributes<HTMLDivElement>;
-export declare const BannerActions: FC<BannerActionsProps>;
+export declare const BannerActions: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    placement?: BannerActionsPlacement;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/components/Banner/BannerIcon.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 declare type BannerIconVariant = 'info' | 'warning';
 export declare type BannerIconProps = {
     /** Which icon background and fill color to use. Info = green, warning = red */
@@ -6,5 +6,10 @@ export declare type BannerIconProps = {
     /** @ignore */
     children: ReactNode;
 } & HTMLAttributes<HTMLSpanElement>;
-export declare const BannerIcon: FC<BannerIconProps>;
+export declare const BannerIcon: import("react").ForwardRefExoticComponent<{
+    /** Which icon background and fill color to use. Info = green, warning = red */
+    variant?: BannerIconVariant;
+    /** @ignore */
+    children: ReactNode;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/types/components/Banner/BannerMessage.d.ts

@@ -1,7 +1,10 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { TypographyProps } from '../Typography/Typography';
 export declare type BannerMessageProps = {
     /** Text content */
     children: string;
 } & Omit<TypographyProps, 'children'>;
-export declare const BannerMessage: FC<BannerMessageProps>;
+export declare const BannerMessage: import("react").ForwardRefExoticComponent<{
+    /** Text content */
+    children: string;
+} & Omit<TypographyProps, "children"> & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,55 @@
+import { SelectHTMLAttributes } from 'react';
+export declare type ComboboxChanges = {
+    selectedItems: string[];
+    inputValue: string;
+};
+export declare type ComboboxProps = {
+    /** List of options to choose from */
+    items: string[];
+    /** Label for the select element */
+    label: string;
+    /** Array of initial selected items */
+    initialSelectedItems?: string[];
+    /** Meta text, for instance unit */
+    meta?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read Only */
+    readOnly?: boolean;
+    /** If this prop is used, the select will become a controlled component. Use an empty
+     * array [] if there will be no initial selected items
+     * Note that this prop replaces the need for ```initialSelectedItems```
+     * The items that should be selected. */
+    selectedOptions?: string[];
+    /** Callback for the selected item change
+     * changes.selectedItem gives the selected item
+     */
+    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
+    /** Enable multiselect */
+    multiple?: boolean;
+} & SelectHTMLAttributes<HTMLSelectElement>;
+export declare const Combobox: import("react").ForwardRefExoticComponent<{
+    /** List of options to choose from */
+    items: string[];
+    /** Label for the select element */
+    label: string;
+    /** Array of initial selected items */
+    initialSelectedItems?: string[];
+    /** Meta text, for instance unit */
+    meta?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read Only */
+    readOnly?: boolean;
+    /** If this prop is used, the select will become a controlled component. Use an empty
+     * array [] if there will be no initial selected items
+     * Note that this prop replaces the need for ```initialSelectedItems```
+     * The items that should be selected. */
+    selectedOptions?: string[];
+    /** Callback for the selected item change
+     * changes.selectedItem gives the selected item
+     */
+    handleSelectedItemsChange?: (changes: ComboboxChanges) => void;
+    /** Enable multiselect */
+    multiple?: boolean;
+} & SelectHTMLAttributes<HTMLSelectElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Combobox/Combobox.tokens.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+export declare const selectTokens: ComponentToken;
+export declare const multiSelect: ComponentToken;

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

@@ -0,0 +1 @@
+export * from './Combobox';

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

@@ -10,7 +10,7 @@ export declare type InputProps = {
     /** Type */
     type?: string;
     /** Read Only */
-    readonly?: boolean;
+    readOnly?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
 export declare const Input: import("react").ForwardRefExoticComponent<{
     /** Placeholder */
@@ -22,5 +22,5 @@ export declare const Input: import("react").ForwardRefExoticComponent<{
     /** Type */
     type?: string;
     /** Read Only */
-    readonly?: boolean;
+    readOnly?: boolean;
 } & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -7,7 +7,7 @@ export declare type PaginationProps = {
     /** Choose number of items per page */
     itemsPerPage?: number;
     /** Callback fired on page change */
-    onChange?: (event: MouseEvent | KeyboardEvent, page: number) => void;
+    onChange?: (event: MouseEvent | KeyboardEvent | null, page: number) => void;
     /** Default start page */
     defaultPage?: number;
 } & Omit<HTMLAttributes<HTMLElement>, 'onChange'>;
@@ -19,7 +19,7 @@ export declare const Pagination: import("react").ForwardRefExoticComponent<{
     /** Choose number of items per page */
     itemsPerPage?: number;
     /** Callback fired on page change */
-    onChange?: (event: MouseEvent | KeyboardEvent, page: number) => void;
+    onChange?: (event: MouseEvent | KeyboardEvent | null, page: number) => void;
     /** Default start page */
     defaultPage?: number;
 } & Omit<HTMLAttributes<HTMLElement>, "onChange"> & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/Select/commonStyles.d.ts

@@ -2,10 +2,7 @@ import { HTMLAttributes } from 'react';
 declare type ContainerProps = HTMLAttributes<HTMLDivElement>;
 declare type StyledListItemType = {
     highlighted: string;
-    density: string;
-};
-declare type StyledButtonType = {
-    density: string;
+    active?: string;
 };
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
 export declare const PaddedInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
@@ -13,7 +10,7 @@ export declare const PaddedInput: import("styled-components").StyledComponent<im
     variant?: import("../TextField/types").Variants;
     disabled?: boolean;
     type?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     variant?: "bullet" | "numbered";
@@ -30,6 +27,6 @@ export declare const StyledButton: import("styled-components").StyledComponent<i
     as?: import("react").ElementType<any>;
     type?: string;
     fullWidth?: boolean;
-} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, StyledButtonType, never>;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -6,8 +6,8 @@ export declare type SnackbarProps = {
     autoHideDuration?: number;
     /** Callback fired when the snackbar is closed by auto hide duration timeout */
     onClose?: () => void;
-    /** Media query from which the snackbar will be horizontal centered */
-    leftAlignFrom?: string;
+    /** Placement of the snackbar relative to the viewport */
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right';
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Snackbar: import("react").ForwardRefExoticComponent<{
     /**  Controls the visibility of the snackbar */
@@ -16,6 +16,6 @@ export declare const Snackbar: import("react").ForwardRefExoticComponent<{
     autoHideDuration?: number;
     /** Callback fired when the snackbar is closed by auto hide duration timeout */
     onClose?: () => void;
-    /** Media query from which the snackbar will be horizontal centered */
-    leftAlignFrom?: string;
+    /** Placement of the snackbar relative to the viewport */
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right';
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Snackbar/SnackbarAction.d.ts

@@ -2,4 +2,4 @@ import { ReactNode } from 'react';
 export declare type SnackbarActionProps = {
     children: ReactNode;
 };
-export declare const SnackbarAction: ({ children, }: SnackbarActionProps) => JSX.Element;
+export declare const SnackbarAction: import("react").ForwardRefExoticComponent<SnackbarActionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Switch/Switch.styles.d.ts

@@ -2,3 +2,4 @@ export declare const BaseInputWrapper: import("styled-components").StyledCompone
 export declare const BaseInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     type: string;
 }, "type">;
+export declare const GridWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/Table/DataCell/DataCell.tokens.d.ts

@@ -1,13 +1,15 @@
 import type { ComponentToken } from '@equinor/eds-tokens';
+import { Variants } from '../Table.types';
 declare type Validation = {
     error: Partial<ComponentToken>;
 };
-declare type Variants = {
+declare type VariantsType = {
     numeric: Partial<ComponentToken>;
 };
 export declare type TableCellToken = ComponentToken & {
     validation: Validation;
-    variants: Variants;
+    variants: VariantsType;
 };
-export declare const token: TableCellToken;
+export declare const tableCell: TableCellToken;
+export declare const applyVariant: (variant: Variants, token: TableCellToken) => TableCellToken;
 export {};

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

@@ -4,6 +4,7 @@ import type { TextFieldToken } from './TextField.tokens';
 declare type InputWrapperType = {
     isFocused: boolean;
     isDisabled: boolean;
+    isReadOnly: boolean;
     variant: string;
     token: TextFieldToken;
     inputIcon?: ReactNode;
@@ -11,7 +12,7 @@ declare type InputWrapperType = {
     multiline?: boolean;
 };
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, InputWrapperType, never>;
-declare type FieldProps = {
+export declare const Field: import("react").ForwardRefExoticComponent<{
     /** Specifies if input should be multiline*/
     multiline?: boolean;
     /** Placeholder */
@@ -23,12 +24,11 @@ declare type FieldProps = {
     /** Type */
     type?: string;
     /** Read Only */
-    readonly?: boolean;
+    readOnly?: boolean;
     /** Unit text */
     unit?: string;
     inputIcon?: ReactNode;
     /** Specifies max rows for multiline input */
     rowsMax?: number;
-};
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+} & import("react").HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};

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

@@ -1,16 +1,13 @@
 import { HTMLAttributes } from 'react';
-import type { Spacing } from '@equinor/eds-tokens';
 import type { Variants, ColorStateProps } from '../types';
 declare const InputIcon: import("react").ForwardRefExoticComponent<{
     /** isDisabled */
     isDisabled?: boolean;
     /** Variant */
     variant?: Variants;
-    /** Is the icon inside a text field */
-    isInputIcon?: boolean;
-    /** Spacing object, comfortable is default */
-    spacings?: Spacing;
     /** Colors */
     colors?: ColorStateProps;
+    /** Size */
+    size?: 16 | 24;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export { InputIcon as Icon };

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

@@ -10,7 +10,7 @@ export declare type TextareaProps = {
     /** Type */
     type?: string;
     /** Read Only */
-    readonly?: boolean;
+    readOnly?: boolean;
     /** Specifies max rows for multiline input */
     rowsMax?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
@@ -24,7 +24,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<{
     /** Type */
     type?: string;
     /** Read Only */
-    readonly?: boolean;
+    readOnly?: boolean;
     /** Specifies max rows for multiline input */
     rowsMax?: number;
 } & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -6,7 +6,7 @@ export declare type TooltipProps = {
     /** Tooltip title */
     title?: string;
     /** Tooltip anchor element */
-    children: React.ReactElement;
+    children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
 } & HTMLAttributes<HTMLDivElement>;
@@ -16,7 +16,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     /** Tooltip title */
     title?: string;
     /** Tooltip anchor element */
-    children: React.ReactElement;
+    children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -345,6 +345,54 @@ declare const typography: {
             textAlign: string;
         };
     };
+    _modes: {
+        compact: {
+            table: {
+                cell_header: {
+                    color: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                };
+                cell_text: {
+                    color: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                };
+                cell_text_bold: {
+                    color: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                };
+                cell_text_link: {
+                    color: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textDecoration: string;
+                    textAlign: string;
+                };
+                cell_numeric_monospaced: {
+                    fontFeature: string;
+                    color: string;
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: number;
+                    lineHeight: string;
+                    textAlign: string;
+                };
+            };
+        };
+    };
     ui: {
         tooltip: {
             color: string;

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

@@ -6,3 +6,4 @@ export { useId } from './useId';
 export { useIsMounted } from './useMountedRef';
 export { useAutoResize } from './useAutoResize';
 export * from './useToken';
+export { useHideBodyScroll } from './useHideBodyScroll';

package/dist/types/hooks/useHideBodyScroll.d.ts

@@ -0,0 +1 @@
+export declare const useHideBodyScroll: (overflowState: string) => void;

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

@@ -1,3 +1,4 @@
 export * from './templates';
+export { joinHandlers } from './joinHandlers';
 export { setReactInputValue } from './setReactInputValue';
 export declare const trimSpaces: (text: string) => string;

package/dist/types/utils/joinHandlers.d.ts

@@ -0,0 +1,3 @@
+declare type Callback<T> = (e: T) => void;
+export declare const joinHandlers: <T>(handler1?: Callback<T>, handler2?: Callback<T>) => Callback<T>;
+export {};