@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.18.0-envis.2",
+  "version": "0.19.0-dev.20220405",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
   ],
   "main": "dist/eds-core-react.cjs.js",
-  "publishConfig": {
-    "main": "dist/eds-core-react.cjs.js",
-    "module": "dist/esm/index.js"
-  },
   "types": "dist/types/index.d.ts",
   "license": "MIT",
   "author": {
@@ -35,46 +31,48 @@
     "react"
   ],
   "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",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@storybook/addon-a11y": "^6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.0",
+    "@rollup/plugin-commonjs": "^19.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-docs": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/client-api": "^6.4.18",
+    "@storybook/react": "^6.4.18",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^26.0.24",
-    "@types/ramda": "^0.27.44",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@types/styled-components": "^5.1.11",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-styled-components": "^1.13.2",
-    "jest": "^27.0.6",
-    "jest-styled-components": "^7.0.5",
+    "@types/ramda": "^0.27.64",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.21",
+    "@types/testing-library__jest-dom": "^5.14.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-styled-components": "^1.13.3",
+    "jest": "^27.4.7",
+    "jest-styled-components": "^7.0.8",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.4",
-    "ramda": "^0.27.1",
+    "postcss": "^8.4.6",
+    "ramda": "^0.27.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.11.1",
-    "rollup": "^2.53.3",
+    "react-hook-form": "^7.26.0",
+    "rollup": "^2.67.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "styled-components": "5.3.0",
-    "tsc-watch": "^4.5.0",
-    "typescript": "^4.3.5"
+    "tsc-watch": "^4.6.0",
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -82,9 +80,10 @@
     "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
+    "@babel/runtime": "^7.17.8",
     "@equinor/eds-icons": "0.10.0",
     "@equinor/eds-tokens": "0.7.0",
+    "@equinor/eds-utils": "0.2.0",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",
     "react-fast-compare": "3.2.0",

package/dist/esm/components/Dialog/Actions.js

@@ -1,26 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
-
-const StyledActions = styled.div.withConfig({
-  displayName: "Actions__StyledActions",
-  componentId: "sc-1qfwg1m-0"
-})(({
-  theme,
-  children
-}) => {
-  return css(["min-height:", ";", " align-self:end;justify-self:start;", ""], theme.entities.actions.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
-});
-const Actions = /*#__PURE__*/forwardRef(function Actions({
-  children,
-  ...props
-}, ref) {
-  return /*#__PURE__*/jsx(StyledActions, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-}); // Actions.displayName = 'EdsDialogActions'
-
-export { Actions };

package/dist/esm/components/Dialog/CustomContent.js

@@ -1,46 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { Divider } from '../Divider/Divider.js';
-
-const StyledCustomContent = styled.div.withConfig({
-  displayName: "CustomContent__StyledCustomContent",
-  componentId: "sc-17fsw6x-0"
-})(({
-  theme,
-  scrollable
-}) => {
-  return css(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.content.spacings.bottom, spacingsTemplate(theme.entities.children.spacings), scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
-});
-const StyledDivider = styled(Divider).withConfig({
-  displayName: "CustomContent__StyledDivider",
-  componentId: "sc-17fsw6x-1"
-})(({
-  theme
-}) => {
-  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
-});
-const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
-  children,
-  scrollable = false,
-  ...rest
-}, ref) {
-  const props = {
-    scrollable,
-    ref,
-    ...rest
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledCustomContent, {
-      id: "eds-dialog-customcontent",
-      ...props,
-      children: children
-    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
-      color: "medium",
-      variant: "small"
-    })]
-  });
-});
-
-export { CustomContent };

package/dist/esm/components/Dialog/Title.js

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-
-const StyledTitle = styled.div.withConfig({
-  displayName: "Title__StyledTitle",
-  componentId: "sc-i4qfl5-0"
-})(({
-  theme,
-  children
-}) => {
-  return css(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, spacingsTemplate(theme.entities.children.spacings), !children && css(["min-height:initial;height:'8px';"]));
-});
-const StyledDivider = styled(Divider).withConfig({
-  displayName: "Title__StyledDivider",
-  componentId: "sc-i4qfl5-1"
-})(({
-  theme
-}) => {
-  return css(["width:100%;margin-bottom:", ";"], theme.entities.divider.spacings.bottom);
-});
-const Title = /*#__PURE__*/forwardRef(function Title({
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledTitle, {
-      id: "eds-dialog-title",
-      ref: ref,
-      ...rest,
-      children: children
-    }), children && /*#__PURE__*/jsx(StyledDivider, {
-      color: "medium",
-      variant: "small"
-    })]
-  });
-});
-
-export { Title };

package/dist/esm/hooks/useAutoResize.js

@@ -1,39 +0,0 @@
-import { useEffect } from 'react';
-
-const useAutoResize = (targetEl, maxHeight) => {
-  useEffect(() => {
-    const handleResize = () => {
-      targetEl.style.height = 'auto';
-      const {
-        scrollHeight,
-        clientHeight
-      } = targetEl;
-      let newHeight = clientHeight;
-
-      if (maxHeight > newHeight) {
-        newHeight = Math.min(maxHeight, Math.max(scrollHeight, newHeight));
-
-        if (scrollHeight > maxHeight) {
-          targetEl.style.overflow = 'auto';
-        } else {
-          targetEl.style.overflow = 'hidden';
-        }
-
-        if (newHeight > clientHeight) {
-          targetEl.style.height = "".concat(newHeight, "px");
-        }
-      }
-    };
-
-    if (targetEl && maxHeight) {
-      handleResize();
-      targetEl.addEventListener('keyup', handleResize, true);
-    }
-
-    return () => {
-      targetEl === null || targetEl === void 0 ? void 0 : targetEl.removeEventListener('keyup', handleResize, true);
-    };
-  }, [targetEl, maxHeight]);
-};
-
-export { useAutoResize };

package/dist/esm/hooks/useCombinedRefs.js

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-
-/** Returns a memoized function that calls passed refs sequentially with passed element */
-const useCombinedRefs = (...refs) => {
-  return useCallback(element => refs.forEach(ref => {
-    if (typeof ref === 'function') {
-      ref(element);
-    } else if (ref && typeof ref === 'object') {
-      ref.current = element;
-    }
-  }), [refs]);
-};
-
-export { useCombinedRefs };

package/dist/esm/hooks/useGlobalKeyPress.js

@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-
-var KEY;
-
-(function (KEY) {
-  KEY["Escape"] = "Escape";
-  KEY["Enter"] = "Enter";
-  KEY["Tab"] = "Tab";
-  KEY["ArrowDown"] = "ArrowDown";
-  KEY["ArrowUp"] = "ArrowUp";
-})(KEY || (KEY = {}));
-
-const useGlobalKeyPress = (targetKey, callback) => {
-  useEffect(() => {
-    const handleGlobalKeyPress = e => {
-      const {
-        key
-      } = e;
-
-      switch (key) {
-        case targetKey:
-          callback(e);
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handleGlobalKeyPress, true);
-    return () => {
-      document.removeEventListener('keydown', handleGlobalKeyPress, true);
-    };
-  }, [targetKey, callback]);
-};
-
-export { useGlobalKeyPress };

package/dist/esm/hooks/useHideBodyScroll.js

@@ -1,20 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-const useHideBodyScroll = active => {
-  const overflowState = useRef(document.body.style.overflow);
-  useEffect(() => {
-    const originalState = overflowState.current;
-
-    if (active) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = originalState;
-    }
-
-    return () => {
-      document.body.style.overflow = originalState;
-    };
-  }, [active]);
-};
-
-export { useHideBodyScroll };

package/dist/esm/hooks/useId.js

@@ -1,14 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useId = (idOverride, type) => {
-  const [defaultId, setDefaultId] = useState(idOverride);
-  const id = idOverride || defaultId;
-  useEffect(() => {
-    if (defaultId == null) {
-      setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
-    }
-  }, [defaultId, type]);
-  return id;
-};
-
-export { useId };

package/dist/esm/hooks/useMountedRef.js

@@ -1,12 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useIsMounted = () => {
-  const [isMounted, setIsMounted] = useState(null);
-  useEffect(() => {
-    setIsMounted(true);
-    return () => setIsMounted(false);
-  }, []);
-  return isMounted;
-};
-
-export { useIsMounted };

package/dist/esm/hooks/useOutsideClick.js

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-
-const useOutsideClick = (el, callback) => {
-  useEffect(() => {
-    const handleClick = e => {
-      if (el && !el.contains(e.target)) {
-        callback(e);
-      }
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [el, callback]);
-};
-
-export { useOutsideClick };

package/dist/esm/hooks/usePopper.js

@@ -1,31 +0,0 @@
-import { usePopper as usePopper$1 } from 'react-popper';
-
-const usePopper = (anchorEl, popperEl, arrowRef, placement, offset = 10) => {
-  if (placement === undefined) {
-    placement = 'auto';
-  }
-
-  const {
-    styles,
-    attributes
-  } = usePopper$1(anchorEl, popperEl, {
-    placement,
-    modifiers: [{
-      name: 'arrow',
-      options: {
-        element: arrowRef
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, offset]
-      }
-    }]
-  });
-  return {
-    styles,
-    attributes
-  };
-};
-
-export { usePopper };

package/dist/esm/hooks/useToken.js

@@ -1,16 +0,0 @@
-import { useCallback } from 'react';
-import mergeDeepRight_1 from '../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
-
-const useToken = (options, token) => useCallback(() => {
-  const {
-    density
-  } = options;
-
-  if (density === 'compact') {
-    return mergeDeepRight_1(token, token.modes.compact);
-  }
-
-  return token;
-}, [options, token]);
-
-export { useToken };

package/dist/esm/utils/joinHandlers.js

@@ -1,10 +0,0 @@
-const joinHandlers = (handler1, handler2) => {
-  const callback = event => {
-    handler1 && handler1(event);
-    handler2 && handler2(event);
-  };
-
-  return callback;
-};
-
-export { joinHandlers };

package/dist/esm/utils/setReactInputValue.js

@@ -1,18 +0,0 @@
-// Workaround
-// React ignores 'dispathEvent' on input/textarea, see https://github.com/facebook/react/issues/10135
-const setReactInputValue = (input, value) => {
-  const previousValue = input.value;
-  input.value = value;
-  const tracker = input._valueTracker;
-
-  if (typeof tracker !== 'undefined') {
-    tracker.setValue(previousValue);
-  } //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
-
-
-  input.dispatchEvent(new Event('change', {
-    bubbles: true
-  }));
-};
-
-export { setReactInputValue };

package/dist/esm/utils/templates/borders.js

@@ -1,35 +0,0 @@
-import { css } from 'styled-components';
-import { shorthand } from './common.js';
-
-const bordersTemplate = border => {
-  var _border$left, _border$left2, _border$right, _border$right2;
-
-  if (!border) {
-    return css({});
-  }
-
-  switch (border.type) {
-    case 'border':
-      return css({
-        border: shorthand(border),
-        borderRadius: border.radius
-      });
-
-    case 'bordergroup':
-      return css({
-        borderBottom: shorthand(border.bottom),
-        borderTop: shorthand(border.top),
-        borderLeft: shorthand(border.left),
-        borderRight: shorthand(border.right),
-        borderBottomLeftRadius: border === null || border === void 0 ? void 0 : (_border$left = border.left) === null || _border$left === void 0 ? void 0 : _border$left.radius,
-        borderTopLeftRadius: border === null || border === void 0 ? void 0 : (_border$left2 = border.left) === null || _border$left2 === void 0 ? void 0 : _border$left2.radius,
-        borderBottomRightRadius: border === null || border === void 0 ? void 0 : (_border$right = border.right) === null || _border$right === void 0 ? void 0 : _border$right.radius,
-        borderTopRightRadius: border === null || border === void 0 ? void 0 : (_border$right2 = border.right) === null || _border$right2 === void 0 ? void 0 : _border$right2.radius
-      });
-
-    default:
-      return css({});
-  }
-};
-
-export { bordersTemplate };

package/dist/esm/utils/templates/common.js

@@ -1,19 +0,0 @@
-const shorthand = token => {
-  if (!token) {
-    return undefined;
-  }
-
-  const {
-    width = '',
-    style = '',
-    color = ''
-  } = token;
-
-  if (!width) {
-    return null;
-  }
-
-  return "".concat(width, " ").concat(style, " ").concat(color);
-};
-
-export { shorthand };

package/dist/esm/utils/templates/focus.js

@@ -1,35 +0,0 @@
-import { css } from 'styled-components';
-import { tokens } from '@equinor/eds-tokens';
-import { shorthand } from './common.js';
-
-const {
-  colors: {
-    interactive: {
-      focus: {
-        rgba: focusColor
-      }
-    }
-  }
-} = tokens;
-const outlineTemplate = outline => {
-  const {
-    color = focusColor,
-    style = 'dashed',
-    width = '1px',
-    offset = '0px',
-    type
-  } = outline;
-  const outline_ = {
-    color,
-    style,
-    width,
-    offset,
-    type
-  };
-  return css({
-    outline: shorthand(outline_),
-    outlineOffset: outline_.offset
-  });
-};
-
-export { outlineTemplate };

package/dist/esm/utils/templates/index.js

@@ -1,52 +0,0 @@
-import { css } from 'styled-components';
-
-const typographyTemplate = (typography, link) => {
-  if (!typography) {
-    return '';
-  }
-
-  let base = "\n  margin: 0;\n  color: ".concat(typography.color, ";\n  font-family: ").concat(typography.fontFamily, ";\n  font-size: ").concat(typography.fontSize, ";\n  font-weight: ").concat(typography.fontWeight, ";\n  line-height: ").concat(typography.lineHeight, ";\n  ");
-
-  if (typography.fontStyle) {
-    base += "\nfont-style: ".concat(typography.fontStyle, ";");
-  }
-
-  if (typography.letterSpacing) {
-    base += "\nletter-spacing: ".concat(typography.letterSpacing, ";");
-  }
-
-  if (typography.textTransform) {
-    base += "\ntext-transform: ".concat(typography.textTransform, ";");
-  }
-
-  if (typography.textDecoration) {
-    base += "\ntext-decoration: ".concat(typography.textDecoration, ";");
-  }
-
-  if (typography.textAlign) {
-    base += "\ntext-align: ".concat(typography.textAlign, ";");
-  }
-
-  if (typography.fontFeature) {
-    base += "\nfont-feature-settings: ".concat(typography.fontFeature, ";");
-  }
-
-  if (link) {
-    base += "\ncursor: pointer;";
-  }
-
-  return base;
-};
-const spacingsTemplate = ({
-  left,
-  right,
-  top,
-  bottom
-}) => css({
-  paddingLeft: left,
-  paddingTop: top,
-  paddingRight: right,
-  paddingBottom: bottom
-});
-
-export { spacingsTemplate, typographyTemplate };

package/dist/types/components/Dialog/Actions.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare type DialogActionsProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Actions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Dialog/Title.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare type DialogTitleProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Title: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,9 +0,0 @@
-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 +0,0 @@
-export declare const useAutoResize: (targetEl: HTMLElement, maxHeight?: number) => void;

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

@@ -1,3 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export declare const useHideBodyScroll: (active: boolean) => void;

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

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

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

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