@equinor/eds-core-react 0.14.0-dev.20210930

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

@@ -0,0 +1,453 @@
+import { ComponentToken } from '@equinor/eds-tokens';
+import type { TypographyTokens } from '@equinor/eds-tokens';
+declare const typography: {
+    heading: {
+        h1_bold: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h1: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h2: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h3: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h4: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h5: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        h6: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+    };
+    navigation: {
+        menu_title: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        menu_tabs: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        drawer_active: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        drawer_inactive: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        button: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        breadcrumb: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        breadcrumb_hover: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textDecoration: string;
+            textAlign: string;
+        };
+        menu_title_hover: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+    };
+    input: {
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        text: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        text_monospaced: {
+            fontFeature: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+        helper: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textAlign: string;
+        };
+    };
+    paragraph: {
+        body_short_italic: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontStyle: string;
+            textAlign: string;
+        };
+        caption: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        meta: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_short: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_short_bold_italic: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontStyle: string;
+            textAlign: string;
+        };
+        body_short_bold: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_short_link: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textDecoration: string;
+            textAlign: string;
+        };
+        overline: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            lineHeight: string;
+            textTransform: string;
+            textAlign: string;
+        };
+        ingress: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_long: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_long_link: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textDecoration: string;
+            textAlign: string;
+        };
+        body_long_italic: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontStyle: string;
+            textAlign: string;
+        };
+        body_long_bold: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        body_long_bold_italic: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            fontStyle: string;
+            textAlign: string;
+        };
+    };
+    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;
+        };
+    };
+    _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;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        snackbar: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        accordion_header: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        chip__badge: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+        chart: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+        };
+    };
+};
+declare const colors: {
+    primary: string;
+    secondary: string;
+    danger: string;
+    warning: string;
+    success: string;
+    disabled: string;
+};
+export declare type QuickTypographyVariants = TypographyTokens['heading'] | TypographyTokens['paragraph'];
+declare const quickVariants: QuickTypographyVariants;
+declare type TypographyVariants = keyof TypographyTokens['heading'] | keyof TypographyTokens['paragraph'] | keyof TypographyTokens['navigation'] | keyof TypographyTokens['input'] | keyof TypographyTokens['ui'] | keyof TypographyTokens['table'];
+declare type ColorVariants = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'disabled';
+declare type TypographyGroups = keyof typeof typography;
+declare const link: ComponentToken;
+export { typography, colors, quickVariants, TypographyVariants, ColorVariants, TypographyGroups, link, };

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

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

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

@@ -0,0 +1,8 @@
+export { useOutsideClick } from './useOutsideClick';
+export { useCombinedRefs } from './useCombinedRefs';
+export * from './usePopper';
+export { useGlobalKeyPress } from './useGlobalKeyPress';
+export { useId } from './useId';
+export { useIsMounted } from './useMountedRef';
+export { useAutoResize } from './useAutoResize';
+export * from './useToken';

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

@@ -0,0 +1 @@
+export declare const useAutoResize: (targetEl: HTMLElement, maxHeight?: number) => void;

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

@@ -0,0 +1,3 @@
+import type { RefCallback, Ref } from 'react';
+/** Returns a memoized function that calls passed refs sequentially with passed element */
+export declare const useCombinedRefs: <T extends HTMLElement>(...refs: Ref<T>[]) => (instance: T) => void;

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

@@ -0,0 +1,10 @@
+declare enum KEY {
+    Escape = "Escape",
+    Enter = "Enter",
+    Tab = "Tab",
+    ArrowDown = "ArrowDown",
+    ArrowUp = "ArrowUp"
+}
+declare type KEYTYPES = keyof typeof KEY;
+export declare const useGlobalKeyPress: (targetKey: KEYTYPES, callback: (e: KeyboardEvent) => void) => void;
+export {};

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

@@ -0,0 +1 @@
+export declare const useId: (idOverride: string, type?: string) => string;

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

@@ -0,0 +1 @@
+export declare const useIsMounted: () => boolean;

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

@@ -0,0 +1 @@
+export declare const useOutsideClick: (el: HTMLElement, callback: (e: MouseEvent) => void) => void;

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

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+export declare const usePopper: (anchorEl: HTMLElement, popperEl: HTMLElement, arrowRef?: HTMLElement | string, placement?: Placement, offset?: number) => {
+    styles: {
+        [key: string]: CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        };
+    };
+};

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

@@ -0,0 +1,7 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+import type { Density } from '../components/EdsProvider';
+declare type UseToken = (options: {
+    density: Density;
+}, token: ComponentToken) => () => ComponentToken;
+export declare const useToken: UseToken;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,35 @@
+import 'focus-visible';
+export * from './components/Button';
+export * from './components/Typography';
+export * from './components/Table';
+export * from './components/Divider';
+export * from './components/TextField';
+export * from './components/Icon';
+export * from './components/List';
+export * from './components/Accordion';
+export * from './components/Tabs';
+export * from './components/Card';
+export * from './components/TopBar';
+export * from './components/Dialog';
+export * from './components/Scrim';
+export * from './components/TableOfContents';
+export * from './components/SideSheet';
+export * from './components/Chip';
+export * from './components/Avatar';
+export * from './components/Search';
+export * from './components/Slider';
+export * from './components/Tooltip';
+export * from './components/Snackbar';
+export * from './components/Popover';
+export * from './components/Banner';
+export * from './components/Progress';
+export * from './components/Breadcrumbs';
+export * from './components/Menu';
+export * from './components/Pagination';
+export * from './components/Select';
+export * from './components/Label';
+export * from './components/Input';
+export * from './components/Checkbox';
+export * from './components/Radio';
+export * from './components/Switch';
+export * from './components/EdsProvider';

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

@@ -0,0 +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 {};

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

@@ -0,0 +1,7 @@
+declare type ReactInternalHack = {
+    _valueTracker?: {
+        setValue: (a: string) => void;
+    };
+};
+export declare const setReactInputValue: (input: HTMLInputElement & ReactInternalHack, value: string) => void;
+export {};

package/dist/types/utils/templates/borders.d.ts

@@ -0,0 +1,2 @@
+import type { Borders } from '@equinor/eds-tokens';
+export declare const bordersTemplate: (border: Borders) => import("styled-components").FlattenSimpleInterpolation;

package/dist/types/utils/templates/common.d.ts

@@ -0,0 +1,9 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+export declare type StyledCSS = FlattenSimpleInterpolation;
+declare type Shorthand = (token: {
+    width?: string | number;
+    style?: string;
+    color?: string;
+}) => string;
+export declare const shorthand: Shorthand;
+export {};

package/dist/types/utils/templates/focus.d.ts

@@ -0,0 +1,2 @@
+import { Outline } from '@equinor/eds-tokens';
+export declare const outlineTemplate: (outline: Outline) => import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1,7 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { Typography, Border, Spacing } from '@equinor/eds-tokens';
+export * from './borders';
+export * from './focus';
+export declare const typographyTemplate: (typography: Partial<Typography>, link?: boolean) => string;
+export declare const spacingsTemplate: ({ left, right, top, bottom, }: Spacing) => FlattenSimpleInterpolation;
+export declare const boxshadowTemplate: (border: Border) => FlattenSimpleInterpolation;