@equinor/eds-core-react 0.14.2 → 0.15.0-dev.20211118

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

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { useTextField } from '../TextField.context.js';
+import { input } from './Icon.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledIcon = styled.div.withConfig({
+  displayName: "Icon__StyledIcon",
+  componentId: "sc-jr0rqa-0"
+})(({
+  colors,
+  isDisabled,
+  isFocused,
+  size
+}) => {
+  const {
+    focusColor,
+    color,
+    disabledColor
+  } = colors;
+  let fill = color;
+
+  if (isDisabled) {
+    fill = disabledColor;
+  }
+
+  if (isFocused) {
+    fill = focusColor;
+  }
+
+  return css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
+});
+const InputIcon = /*#__PURE__*/forwardRef(function InputIcon({
+  size = 24,
+  variant = 'default',
+  isDisabled = false,
+  colors = {
+    color: input[variant].color,
+    disabledColor: input[variant].disabledColor,
+    focusColor: input[variant].focusColor
+  },
+  children,
+  ...other
+}, ref) {
+  const {
+    isFocused
+  } = useTextField();
+  const iconProps = {
+    isDisabled,
+    colors,
+    isFocused,
+    size
+  };
+  return /*#__PURE__*/jsx(StyledIcon, {
+    ref: ref,
+    ...iconProps,
+    ...other,
+    children: children
+  });
+});
+
+export { InputIcon as Icon };

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

@@ -0,0 +1,46 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  }
+} = tokens;
+const input = {
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: '10px',
+      bottom: '10px'
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: '10px',
+      bottom: '10px'
+    }
+  },
+  default: {
+    color: colors.text.static_icons__tertiary.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.primary__resting.hex
+  },
+  error: {
+    color: colors.interactive.danger__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.danger__hover.hex
+  },
+  warning: {
+    color: colors.interactive.warning__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.warning__hover.hex
+  },
+  success: {
+    color: colors.interactive.success__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.success__hover.hex
+  }
+};
+
+export { input };

package/dist/esm/components/TextField/TextField.context.js

@@ -0,0 +1,37 @@
+import { useState, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  isFocused: false
+};
+const TextFieldContext = /*#__PURE__*/createContext(initalState);
+const TextFieldProvider = ({
+  children
+}) => {
+  const [state, setState] = useState(initalState);
+
+  const handleFocus = () => {
+    setState(prevState => ({ ...prevState,
+      isFocused: true
+    }));
+  };
+
+  const handleBlur = () => {
+    setState(prevState => ({ ...prevState,
+      isFocused: false
+    }));
+  };
+
+  const value = {
+    handleFocus,
+    handleBlur,
+    isFocused: state.isFocused
+  };
+  return /*#__PURE__*/jsx(TextFieldContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useTextField = () => useContext(TextFieldContext);
+
+export { TextFieldProvider, useTextField };

package/dist/esm/components/TextField/TextField.js

@@ -0,0 +1,83 @@
+import { forwardRef } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { Field } from './Field.js';
+import { TextFieldProvider } from './TextField.context.js';
+import { textfield } from './TextField.tokens.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Label } from '../Label/Label.js';
+import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+const Container = styled.div.withConfig({
+  displayName: "TextField__Container",
+  componentId: "sc-o1nc07-0"
+})(["min-width:100px;width:100%;"]);
+const TextField = /*#__PURE__*/forwardRef(function TextField({
+  id,
+  label,
+  meta,
+  unit,
+  helperText,
+  placeholder,
+  disabled,
+  multiline,
+  className,
+  variant = 'default',
+  inputRef,
+  inputIcon,
+  helperIcon,
+  rowsMax,
+  ...other
+}, ref) {
+  const inputProps = {
+    multiline,
+    disabled,
+    placeholder,
+    id,
+    variant,
+    ref: inputRef,
+    inputIcon,
+    unit,
+    rowsMax,
+    ...other
+  };
+  const helperProps = {
+    variant,
+    helperText,
+    icon: helperIcon,
+    disabled
+  };
+  const containerProps = {
+    ref,
+    className,
+    style: other.style
+  };
+  const labelProps = {
+    htmlFor: id,
+    label,
+    meta,
+    disabled
+  };
+  const showLabel = label || meta;
+  const showHelperText = helperText;
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, textfield);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(Container, { ...containerProps,
+      children: /*#__PURE__*/jsxs(TextFieldProvider, {
+        children: [showLabel && /*#__PURE__*/jsx(Label, { ...labelProps
+        }), /*#__PURE__*/jsx(Field, { ...inputProps
+        }), showHelperText && /*#__PURE__*/jsx(TextfieldHelperText, { ...helperProps
+        })]
+      })
+    })
+  });
+});
+
+export { TextField };

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

@@ -0,0 +1,124 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  typography,
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  }
+} = tokens$1;
+const textfield = {
+  background: colors.ui.background__light.hex,
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.text.static_icons__tertiary.hex
+  },
+  spacings: {
+    left: small,
+    right: small,
+    top: small
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.primary__resting.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    }
+  },
+  entities: {
+    unit: {
+      typography: { ...typography.input.label,
+        color: colors.text.static_icons__tertiary.hex
+      },
+      states: {
+        disabled: {
+          typography: {
+            color: colors.interactive.disabled__text.hex
+          }
+        }
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small
+      }
+    }
+  }
+};
+const error = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.danger__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.danger__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+const warning = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.warning__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.warning__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+const success = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.success__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.success__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+
+export { error, success, textfield, warning };

package/dist/esm/components/Textarea/Textarea.js

@@ -0,0 +1,92 @@
+import { forwardRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import * as Input_tokens from '../Input/Input.tokens.js';
+import { input as input$1 } from '../Input/Input.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { useAutoResize } from '../../hooks/useAutoResize.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  input
+} = Input_tokens;
+
+const Variation = ({
+  variant,
+  token,
+  density
+}) => {
+  if (!variant) {
+    return ``;
+  }
+
+  const {
+    states: {
+      focus: {
+        outline: focusOutline
+      },
+      active: {
+        outline: activeOutline
+      }
+    },
+    boxShadow
+  } = token;
+  let spacings = input.spacings;
+
+  if (density === 'compact') {
+    spacings = input.modes.compact.spacings;
+  }
+
+  return css(["border:none;", " ", " box-shadow:", ";&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], spacingsTemplate(spacings), outlineTemplate(activeOutline), boxShadow, outlineTemplate(focusOutline));
+};
+
+const StyledTextarea = styled.textarea.withConfig({
+  displayName: "Textarea__StyledTextarea",
+  componentId: "sc-2yjdcc-0"
+})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
+const Textarea = /*#__PURE__*/forwardRef(function Textarea({
+  variant = 'default',
+  disabled = false,
+  type = 'text',
+  rowsMax,
+  ...other
+}, ref) {
+  const actualVariant = variant === 'default' ? 'input' : variant;
+  const inputVariant = Input_tokens[actualVariant];
+  const [textareaEl, setTextareaEl] = useState(null);
+  const {
+    density
+  } = useEds();
+  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  const {
+    lineHeight
+  } = input$1.typography;
+  const {
+    top,
+    bottom
+  } = spacings;
+  let fontSize = 16;
+
+  if (textareaEl) {
+    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
+  }
+
+  const padding = parseInt(top) + parseInt(bottom);
+  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
+  useAutoResize(textareaEl, rowsMax ? maxHeight : null);
+  const inputProps = {
+    ref: useCombinedRefs(ref, setTextareaEl),
+    type,
+    disabled,
+    variant,
+    token: inputVariant,
+    density,
+    ...other
+  };
+  return /*#__PURE__*/jsx(StyledTextarea, { ...inputProps
+  });
+});
+
+export { Textarea };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,119 @@
+import { forwardRef, useState, useRef, useEffect, cloneElement } from 'react';
+import * as ReactDom from 'react-dom';
+import styled from 'styled-components';
+import { tooltip } from './Tooltip.tokens.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useIsMounted } from '../../hooks/useMountedRef.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { useId } from '../../hooks/useId.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+import { usePopper } from '../../hooks/usePopper.js';
+import { joinHandlers } from '../../utils/joinHandlers.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const StyledTooltip = styled.div.withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-m2im2p-0"
+})(["", " ", " ", " background:", ";z-index:350;white-space:nowrap;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background, tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.entities.arrow.spacings.bottom, tooltip.entities.arrow.spacings.top, tooltip.entities.arrow.spacings.right, tooltip.entities.arrow.spacings.left);
+const ArrowWrapper = styled.div.withConfig({
+  displayName: "Tooltip__ArrowWrapper",
+  componentId: "sc-m2im2p-1"
+})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+const TooltipArrow = styled.svg.withConfig({
+  displayName: "Tooltip__TooltipArrow",
+  componentId: "sc-m2im2p-2"
+})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'bottom',
+  children,
+  enterDelay = 100,
+  id,
+  ...rest
+}, ref) {
+  const isMounted = useIsMounted();
+  const [popperEl, setPopperEl] = useState(null);
+  const [arrowRef, setArrowRef] = useState(null);
+  const [open, setOpen] = useState(false);
+  const openTimer = useRef();
+  const tooltipRef = useCombinedRefs(setPopperEl, ref);
+  const anchorRef = useRef();
+  const combinedChilddRef = useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
+  const tooltipId = useId(id, 'tooltip');
+  const containerId = 'eds-tooltip-container';
+  const shouldOpen = isMounted && title !== '';
+  const {
+    setTimeout,
+    clearTimeout
+  } = window;
+  useEffect(() => {
+    if (document.getElementById(containerId) === null) {
+      const tooltipContainerElement = document.createElement('div');
+      tooltipContainerElement.id = containerId;
+      document.body.appendChild(tooltipContainerElement);
+    }
+
+    return () => {
+      clearTimeout(openTimer.current);
+    };
+  }, [clearTimeout]);
+
+  const openTooltip = () => {
+    if (shouldOpen) {
+      clearTimeout(openTimer.current);
+      openTimer.current = setTimeout(() => {
+        setOpen(true);
+      }, enterDelay);
+    }
+  };
+
+  const closeTooltip = () => {
+    clearTimeout(openTimer.current);
+    setOpen(false);
+  };
+
+  useGlobalKeyPress('Escape', () => closeTooltip());
+  const {
+    styles,
+    attributes
+  } = usePopper(anchorRef.current, popperEl, arrowRef, placement, 14);
+  const props = {
+    open,
+    ...rest,
+    ...attributes.popper
+  };
+  const childProps = children.props;
+  const updatedChildren = /*#__PURE__*/cloneElement(children, {
+    ref: combinedChilddRef,
+    'aria-describedby': open ? tooltipId : null,
+    onMouseOver: joinHandlers(openTooltip, childProps.onMouseOver),
+    onMouseLeave: joinHandlers(closeTooltip, childProps.onMouseLeave),
+    onPointerEnter: joinHandlers(openTooltip, childProps.onPointerEnter),
+    onPointerLeave: joinHandlers(closeTooltip, childProps.onPointerLeave),
+    onBlur: joinHandlers(closeTooltip, childProps.onBlur),
+    onFocus: joinHandlers(openTooltip, childProps.onFocus)
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [shouldOpen && open && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsxs(StyledTooltip, {
+      id: tooltipId,
+      role: "tooltip",
+      ref: tooltipRef,
+      style: styles.popper,
+      ...props,
+      children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsx(TooltipArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
+        })
+      })]
+    }), document.getElementById(containerId)), updatedChildren]
+  });
+});
+
+export { Tooltip };

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

@@ -0,0 +1,63 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: white
+      }
+    },
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    }
+  },
+  typography: {
+    ui
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const tooltip = {
+  typography: { ...ui.tooltip,
+    color: white
+  },
+  background,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  entities: {
+    tooltip: {
+      height: spacingXlarge
+    },
+    arrow: {
+      width: '6px',
+      height: spacingSmall,
+      spacings: {
+        bottom: '-6px',
+        top: '-6px',
+        left: '-6px',
+        right: '-6px'
+      }
+    }
+  },
+  spacings: {
+    left: spacingSmall,
+    right: spacingSmall,
+    top: spacingSmall,
+    bottom: spacingSmall
+  }
+};
+
+export { tooltip };

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

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledActions = styled.div.withConfig({
+  displayName: "Actions__StyledActions",
+  componentId: "sc-1251ang-0"
+})(["grid-area:right;text-align:right;"]);
+const Actions = /*#__PURE__*/forwardRef(function Actions({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Actions.displayName = 'eds-topbar-actions'
+
+export { Actions };

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

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledCustomContent = styled.div.withConfig({
+  displayName: "CustomContent__StyledCustomContent",
+  componentId: "sc-d0e83a-0"
+})(["grid-area:center;"]);
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledCustomContent, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // CustomContent.displayName = 'eds-topbar-customcontent'
+
+export { CustomContent };

package/dist/esm/components/TopBar/Header.js

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledHeader = styled.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "sc-1fpllve-0"
+})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
+const Header = /*#__PURE__*/forwardRef(function Header({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledHeader, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Header.displayName = 'eds-topbar-header'
+
+export { Header };