@equinor/eds-core-react 0.18.0-envis.1 → 0.19.0-dev.20220404

package/dist/esm/components/Chip/Chip.js

@@ -2,10 +2,8 @@ import { forwardRef, Children, cloneElement } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from './Icon.js';
 import * as Chip_tokens from './Chip.tokens.js';
+import { outlineTemplate, bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
 
 const {
   enabled,
@@ -19,20 +17,28 @@ const {
   border,
   states
 } = enabled;
-const StyledChips = styled.div.attrs(({
-  clickable,
-  deletable
-}) => ({
-  tabIndex: clickable || deletable ? 0 : null,
-  role: clickable ? 'button' : null
-})).withConfig({
+const StyledChips = styled.div.attrs(_ref => {
+  let {
+    clickable,
+    deletable
+  } = _ref;
+  return {
+    tabIndex: clickable || deletable ? 0 : null,
+    role: clickable ? 'button' : null
+  };
+}).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
-  clickable
-}) => clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
-  variant
-}) => {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), _ref2 => {
+  let {
+    clickable
+  } = _ref2;
+  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+}, _ref3 => {
+  let {
+    variant
+  } = _ref3;
+
   switch (variant) {
     case 'active':
       return css(["background:", ";"], states.active.background);
@@ -43,21 +49,31 @@ const StyledChips = styled.div.attrs(({
     default:
       return '';
   }
-}, ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color), ({
-  deletable
-}) => deletable && css(["padding-right:4px;"]), ({
-  onlyChild
-}) => onlyChild ? css(["padding-left:8px;"]) : '');
-const Chip = /*#__PURE__*/forwardRef(function Chip({
-  children,
-  onDelete,
-  disabled = false,
-  onClick,
-  variant = 'default',
-  ...other
-}, ref) {
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color);
+}, _ref5 => {
+  let {
+    deletable
+  } = _ref5;
+  return deletable && css(["padding-right:4px;"]);
+}, _ref6 => {
+  let {
+    onlyChild
+  } = _ref6;
+  return onlyChild ? css(["padding-left:8px;"]) : '';
+});
+const Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
+  let {
+    children,
+    onDelete,
+    disabled = false,
+    onClick,
+    variant = 'default',
+    ...other
+  } = _ref7;
   const handleDelete = disabled ? undefined : onDelete;
   const handleClick = disabled ? undefined : onClick;
   const deletable = handleDelete !== undefined;

package/dist/esm/components/Chip/Chip.tokens.js

@@ -56,6 +56,11 @@ const {
     rounded: {
       borderRadius
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens$1;
 const enabled = {
@@ -88,11 +93,11 @@ const enabled = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
         style: 'dashed',
         type: 'outline',
-        offset: '2px'
+        offset: '3px'
       }
     },
     active: {

package/dist/esm/components/Chip/Icon.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { close } from '@equinor/eds-icons';
 import { Icon as Icon$1 } from '../Icon/index.js';
 import * as Chip_tokens from './Chip.tokens.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 
 Icon$1.add({
   close
@@ -14,9 +14,11 @@ const {
 const Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), ({
-  variant
-}) => {
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), _ref => {
+  let {
+    variant
+  } = _ref;
+
   switch (variant) {
     case 'error':
       return css(["background:", ";svg{fill:", ";}"], error.entities.icon.background, error.entities.icon.typography.color);
@@ -24,8 +26,11 @@ const Icon = styled(Icon$1).withConfig({
     default:
       return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
   }
-}, ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]));
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
+});
 
 export { Icon };

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

@@ -1,12 +1,12 @@
 import { forwardRef } from 'react';
+import { createPortal } from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
+import { Scrim } from '../Scrim/Scrim.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
@@ -17,29 +17,53 @@ const StyledDialog = styled(Paper).attrs({
 }).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
-})(({
-  theme
-}) => {
-  return css(["width:", ";background:", ";display:grid;", " ", " ", ""], theme.width, theme.background, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), bordersTemplate(theme.border));
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", " ", " grid-gap:", ";"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
 });
-const Dialog = /*#__PURE__*/forwardRef(function Dialog({
-  children,
-  ...props
-}, ref) {
+const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
+  let {
+    children,
+    open,
+    onClose,
+    isDismissable = false,
+    ...props
+  } = _ref2;
+  const rest = { ...props,
+    open,
+    ref
+  };
   const {
     density
   } = useEds();
   const token = useToken({
     density
   }, dialog);
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsx(StyledDialog, {
-      elevation: "above_scrim",
-      ...props,
-      ref: ref,
-      children: children
-    })
+
+  const handleDismiss = () => {
+    onClose && onClose();
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemeProvider, {
+      theme: token,
+      children: /*#__PURE__*/jsx(Scrim, {
+        open: true,
+        isDismissable: isDismissable,
+        onClose: handleDismiss,
+        children: /*#__PURE__*/jsx(StyledDialog, {
+          elevation: "above_scrim",
+          ...rest,
+          children: children
+        })
+      })
+    }), document.body)
   });
 }); // Dialog.displayName = 'EdsDialog'
 

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

@@ -36,22 +36,17 @@ const dialog = {
     radius: borderRadius
   },
   spacings: {
-    top: spacingMedium
+    bottom: spacingMedium
   },
   entities: {
     children: {
       spacings: {
-        top: '0px',
-        bottom: '0px',
+        top: spacingMedium,
+        bottom: spacingMedium,
         left: spacingMedium,
         right: spacingMedium
       }
     },
-    divider: {
-      spacings: {
-        bottom: spacingMedium
-      }
-    },
     title: {
       minHeight: '24px',
       typography: accordion_header
@@ -59,10 +54,7 @@ const dialog = {
     content: {
       minHeight: '80px',
       height: '104px',
-      typography: body_long,
-      spacings: {
-        bottom: spacingMedium
-      }
+      typography: body_long
     },
     actions: {
       minHeight: '48px'

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

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialogActions = styled.div.withConfig({
+  displayName: "DialogActions__StyledDialogActions",
+  componentId: "sc-16ydtxd-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["align-self:end;justify-self:start;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogActions = /*#__PURE__*/forwardRef(function DialogActions(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledDialogActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Actions.displayName = 'EdsDialogActions'
+
+export { DialogActions };

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

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogContent = styled.div.withConfig({
+  displayName: "DialogContent__StyledDialogContent",
+  componentId: "sc-1tze18k-0"
+})(_ref => {
+  let {
+    theme,
+    scrollable
+  } = _ref;
+  return css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogContent__StyledDivider",
+  componentId: "sc-1tze18k-1"
+})(["width:100%;margin-bottom:0;"]);
+const DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
+  let {
+    children,
+    scrollable = false,
+    ...rest
+  } = _ref2;
+  const props = {
+    scrollable,
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledDialogContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { DialogContent };

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

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogHeader = styled.div.withConfig({
+  displayName: "DialogHeader__StyledDialogHeader",
+  componentId: "sc-mbwcos-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogHeader__StyledDivider",
+  componentId: "sc-mbwcos-1"
+})(["margin-bottom:0;"]);
+const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledDialogHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small",
+      color: "medium"
+    })]
+  });
+});
+
+export { DialogHeader };

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

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const StyledDialogTitle = styled.div.withConfig({
+  displayName: "DialogTitle__StyledDialogTitle",
+  componentId: "sc-1t3jljt-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(StyledDialogTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    })
+  });
+});
+
+export { DialogTitle };

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

@@ -1,14 +1,18 @@
 import { Dialog as Dialog$1 } from './Dialog.js';
-import { Actions } from './Actions.js';
-import { Title } from './Title.js';
-import { CustomContent } from './CustomContent.js';
+import { DialogActions } from './DialogActions.js';
+import { DialogTitle } from './DialogTitle.js';
+import { DialogContent } from './DialogContent.js';
+import { DialogHeader } from './DialogHeader.js';
 
 const Dialog = Dialog$1;
-Dialog.Actions = Actions;
-Dialog.Title = Title;
-Dialog.CustomContent = CustomContent;
+Dialog.Actions = DialogActions;
+Dialog.Title = DialogTitle;
+Dialog.CustomContent = DialogContent;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
 Dialog.Actions.displayName = 'Dialog.Actions';
 Dialog.Title.displayName = 'Dialog.Title';
-Dialog.CustomContent.displayName = 'Dialog.CustomContent';
+Dialog.Content.displayName = 'Dialog.Content';
+Dialog.Header.displayName = 'Dialog.Header';
 
 export { Dialog };

package/dist/esm/components/Divider/Divider.js

@@ -11,11 +11,12 @@ const StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/forwardRef(function Divider({
-  color = 'medium',
-  variant = 'medium',
-  ...rest
-}, ref) {
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+  let {
+    color = 'medium',
+    variant = 'medium',
+    ...rest
+  } = _ref;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,

package/dist/esm/components/EdsProvider/eds.context.js

@@ -5,10 +5,11 @@ const initalState = {
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
-const EdsProvider = ({
-  children,
-  density = 'comfortable'
-}) => {
+const EdsProvider = _ref => {
+  let {
+    children,
+    density = 'comfortable'
+  } = _ref;
   const [state, setState] = useState({ ...initalState,
     density
   });

package/dist/esm/components/Icon/Icon.js

@@ -3,75 +3,106 @@ import styled from 'styled-components';
 import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
+const transform = _ref => {
+  let {
+    rotation
+  } = _ref;
+  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+};
 
-const transform = ({
-  rotation
-}) => rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
-
-const StyledSvg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height: "".concat(height, "px"),
-  width: "".concat(width, "px"),
-  fill
-})).withConfig({
+const StyledSvg = styled.svg.attrs(_ref2 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref2;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height: "".concat(height, "px"),
+    width: "".concat(width, "px"),
+    fill
+  };
+}).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
-const StyledPath = styled.path.attrs(({
-  height,
-  size
-}) => ({
-  size: null,
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
-})).withConfig({
+const StyledPath = styled.path.attrs(_ref3 => {
+  let {
+    height,
+    size
+  } = _ref3;
+  return {
+    size: null,
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+  };
+}).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const Icon = /*#__PURE__*/forwardRef(function Icon({
-  size = 24,
-  color = 'currentColor',
-  name,
-  className,
-  rotation,
-  title,
-  data,
-  ...rest
-}, ref) {
-  const {
+
+const customIcon = icon => ({
+  icon,
+  count: Math.floor(Math.random() * 1000)
+});
+
+const findIcon = (name, data, size) => {
+  // eslint-disable-next-line prefer-const
+  let {
     icon,
     count
   } = data ? customIcon(data) : get(name);
 
+  if (size < 24) {
+    var _icon$sizes;
+
+    // fallback to normal icon if small is not made yet
+    icon = ((_icon$sizes = icon.sizes) === null || _icon$sizes === void 0 ? void 0 : _icon$sizes.small) || icon;
+  }
+
+  return {
+    icon,
+    count
+  };
+};
+
+const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
+  let {
+    size = 24,
+    color = 'currentColor',
+    name,
+    rotation,
+    title,
+    data,
+    ...rest
+  } = _ref4;
+  // eslint-disable-next-line prefer-const
+  const {
+    icon,
+    count
+  } = findIcon(name, data, size);
+
   if (typeof icon === 'undefined') {
     throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
+  const height = size ? size : parseInt(icon.width);
+  const width = size ? size : parseInt(icon.height);
   let svgProps = {
-    height: size,
-    width: size,
+    height,
+    width,
     fill: color,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    className,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
     rotation,
     name,
-    'aria-hidden': true,
-    title: null
+    'aria-hidden': true
   };
   const pathProps = {
     d: icon.svgPathData,
     height: icon.height ? icon.height : size,
-    size
+    size: size || icon.height
   }; // Accessibility
 
   let titleId = '';