@equinor/eds-core-react 0.15.0 → 0.17.0

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

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

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

@@ -1,9 +1,9 @@
-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';
-export { useHideBodyScroll } from './useHideBodyScroll';
+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';
+export { useHideBodyScroll } from './useHideBodyScroll';

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

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

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

@@ -1,3 +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;
+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

@@ -1,10 +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 {};
+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/useHideBodyScroll.d.ts

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

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

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

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

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

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

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

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

@@ -1,12 +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;
-        };
-    };
-};
+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

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

@@ -1,35 +1,34 @@
-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';
+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

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

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

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

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

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

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

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

@@ -1,7 +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;
+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;

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "The React implementation of the Equinor Design System",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "dist/core-react.cjs.js",
   "publishConfig": {
     "main": "dist/core-react.cjs.js",
-    "module": "dist/core-react.esm.js",
-    "browser": "dist/core-react.umd.js"
+    "module": "dist/esm/index.js"
   },
   "types": "dist/types/index.d.ts",
   "license": "MIT",
@@ -35,6 +37,7 @@
   "devDependencies": {
     "@babel/cli": "^7.14.8",
     "@babel/core": "^7.14.8",
+    "@babel/plugin-transform-runtime": "^7.16.0",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
@@ -58,22 +61,19 @@
     "@types/testing-library__jest-dom": "^5.14.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
-    "focus-visible": "^5.2.0",
     "jest": "^27.0.6",
     "jest-styled-components": "^7.0.5",
     "js-file-download": "^0.4.12",
     "ramda": "^0.27.1",
+    "postcss": "^8.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.11.1",
     "rollup": "^2.53.3",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-size-snapshot": "^0.12.0",
-    "rollup-plugin-typescript-paths": "^1.3.0",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "styled-components": "5.3.0",
-    "ts-jest": "^27.0.4",
-    "tslib": "^2.3.0",
+    "tsc-watch": "^4.5.0",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {
@@ -82,7 +82,8 @@
     "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@equinor/eds-icons": "0.8.0",
+    "@babel/runtime": "^7.16.3",
+    "@equinor/eds-icons": "0.10.0",
     "@equinor/eds-tokens": "0.7.0",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",
@@ -93,15 +94,15 @@
     "pnpm": ">=4",
     "node": ">=10.0.0"
   },
+  "browserslist": "defaults, not IE 11",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w NODE_ENV=development",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "build": "rollup -c && tsc -p tsconfig.json",
+    "test": "tsc -p tsconfig.test.json && jest",
+    "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
     "storybook": "start-storybook -p 9000 --ci",
     "build:storybook": "build-storybook -o storybook-build"
   },
-  "module": "dist/core-react.esm.js",
-  "browser": "dist/core-react.umd.js"
+  "module": "dist/esm/index.js",
+  "readme": "# @equinor/eds-core-react\n\nAvailable components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!\n\nMake sure to check out our [Storybook](https://eds-storybook-react.azurewebsites.net/) for more examples!\nRead the [changelog](https://github.com/equinor/design-system/blob/develop/libraries/core-react/CHANGELOG.md) for details on specific releases.\n\n## Installation\n\n```sh\nnpm install @equinor/eds-core-react styled-components\n```\nIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:\n```sh\nnpm install typescript --save-dev\n```\n\n## Usage\n\n```jsx\nimport * as React from 'react'\nimport { render } from 'react-dom'\nimport { Button, Typography } from '@equinor/eds-core-react'\n\nconst App = () => (\n  <>\n    <Typography variant=\"h1\" bold>Buttons</Typography>\n\n    <Typography variant=\"h2\">Contained (default)</Typography>\n\n    <Button>Primary</Button>\n    <Button color=\"secondary\">Secondary</Button>\n    <Button color=\"danger\">Danger</Button>\n    <Button disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Outlined</Typography>\n\n    <Button variant=\"outlined\">Primary</Button>\n    <Button variant=\"outlined\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"outlined\" color=\"danger\">Danger</Button>\n    <Button variant=\"outlined\" disabled>Disabled</Button>\n\n    <Typography variant=\"h2\">Ghost</Typography>\n\n    <Button variant=\"ghost\">Primary</Button>\n    <Button variant=\"ghost\" color=\"secondary\">Secondary</Button>\n    <Button variant=\"ghost\" color=\"danger\">Danger</Button>\n    <Button variant=\"ghost\" disabled>Disabled</Button>\n  </>\n)\n\nrender(<App />, document.getElementById('root'))\n```\n\n\n## Components\n\n### Available ✅\n\n- Accordion\n- Banner\n- Breadcrumbs\n- Button\n- Cards\n- Chips\n- Dialog\n- Divider\n- Icon\n- List\n- Menu\n- Pagination\n- Popover\n- Progress indicators\n- Scrim\n- Search\n- Select (Native Select)\n- Single Select\n- Multi Select\n- Selection Controls\n- Side Sheet\n- Slider\n- Snackbar\n- Table\n- Table of contents\n- Tabs\n- TextField\n- Tooltip\n- TopBar\n- Typography\n\n### In progress 👷‍♀️\n\n- Navigation Drawer\n\n### TODO 🛠️\n\n- App launcher\n- Stepper\n\n"
 }