@equinor/eds-core-react 0.15.0 → 0.17.0-dev.20220209

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

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { helperText } from './HelperText.token.js';
+import { useTextField } from '../TextField.context.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon as InputIcon } from '../Icon/Icon.js';
+
+const Variation = _ref => {
+  let {
+    variant,
+    isFocused,
+    isDisabled
+  } = _ref;
+
+  if (!variant) {
+    return "";
+  }
+
+  const {
+    focusColor,
+    color,
+    disabledColor
+  } = variant;
+
+  if (isDisabled) {
+    return css(["color:", ";"], disabledColor);
+  }
+
+  if (isFocused) {
+    return css(["color:", ";"], focusColor);
+  }
+
+  return css(["color:", ";"], color);
+};
+
+const Container = styled.div.withConfig({
+  displayName: "HelperText__Container",
+  componentId: "sc-1kfkyxg-0"
+})(["display:flex;align-items:flex-start;margin-top:", ";"], _ref2 => {
+  let {
+    spacings
+  } = _ref2;
+  return spacings.top;
+});
+const Text = styled.p.withConfig({
+  displayName: "HelperText__Text",
+  componentId: "sc-1kfkyxg-1"
+})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), _ref3 => {
+  let {
+    spacings
+  } = _ref3;
+  return spacings.left;
+}, Variation);
+const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
+  let {
+    helperText: helperText$1,
+    icon,
+    variant = 'default',
+    disabled: isDisabled,
+    ...rest
+  } = _ref4;
+  const helperVariant = helperText[variant];
+  const spacings = helperText.spacings.comfortable;
+  const {
+    isFocused
+  } = useTextField();
+  const colors = {
+    color: helperVariant.color,
+    disabledColor: helperVariant.disabledColor,
+    focusColor: helperVariant.focusColor
+  };
+  return /*#__PURE__*/jsxs(Container, {
+    ref: ref,
+    ...rest,
+    spacings: spacings,
+    children: [icon && /*#__PURE__*/jsx(InputIcon, {
+      isDisabled: isDisabled,
+      colors: colors,
+      size: 16,
+      children: icon
+    }), /*#__PURE__*/jsx(Text, {
+      variant: helperVariant,
+      isFocused: isFocused,
+      isDisabled: isDisabled,
+      spacings: spacings,
+      children: helperText$1
+    })]
+  });
+});
+
+export { TextfieldHelperText as HelperText };

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

@@ -0,0 +1,49 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography
+} = tokens;
+const helperText = {
+  background: colors.ui.background__light.hex,
+  typography: typography.input.helper,
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.small,
+      bottom: '6px'
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.xx_small,
+      bottom: '6px'
+    }
+  },
+  default: {
+    color: colors.text.static_icons__tertiary.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.text.static_icons__tertiary.hex
+  },
+  error: {
+    color: colors.interactive.danger__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.danger__hover.hex
+  },
+  warning: {
+    color: colors.interactive.warning__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.warning__hover.hex
+  },
+  success: {
+    color: colors.interactive.success__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.success__hover.hex
+  }
+};
+
+export { helperText };

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

@@ -0,0 +1,64 @@
+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"
+})(_ref => {
+  let {
+    colors,
+    isDisabled,
+    isFocused,
+    size
+  } = _ref;
+  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(_ref2, ref) {
+  let {
+    size = 24,
+    variant = 'default',
+    isDisabled = false,
+    colors = {
+      color: input[variant].color,
+      disabledColor: input[variant].disabledColor,
+      focusColor: input[variant].focusColor
+    },
+    children,
+    ...other
+  } = _ref2;
+  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,38 @@
+import { useState, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  isFocused: false
+};
+const TextFieldContext = /*#__PURE__*/createContext(initalState);
+const TextFieldProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  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,87 @@
+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 { useId, useToken } from '@equinor/eds-utils';
+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';
+
+const Container = styled.div.withConfig({
+  displayName: "TextField__Container",
+  componentId: "sc-o1nc07-0"
+})(["min-width:100px;width:100%;"]);
+const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
+  let {
+    id,
+    label,
+    meta,
+    unit,
+    helperText,
+    placeholder,
+    disabled,
+    multiline,
+    className,
+    variant = 'default',
+    inputRef,
+    inputIcon,
+    helperIcon,
+    rowsMax,
+    ...other
+  } = _ref;
+  const helperTextId = useId(null, 'helpertext');
+  const inputProps = {
+    'aria-describedby': helperTextId,
+    multiline,
+    disabled,
+    placeholder,
+    id,
+    variant,
+    ref: inputRef,
+    inputIcon,
+    unit,
+    rowsMax,
+    ...other
+  };
+  const helperProps = {
+    id: helperTextId,
+    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 { typographyTemplate, useAutoResize, useCombinedRefs, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const {
+  input
+} = Input_tokens;
+
+const Variation = _ref => {
+  let {
+    variant,
+    token,
+    density
+  } = _ref;
+
+  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(_ref2, ref) {
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    rowsMax,
+    ...other
+  } = _ref2;
+  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,113 @@
+import { forwardRef, useState, useRef, useEffect, cloneElement } from 'react';
+import * as ReactDom from 'react-dom';
+import styled from 'styled-components';
+import { typographyTemplate, spacingsTemplate, bordersTemplate, useIsMounted, useCombinedRefs, useId, useGlobalKeyPress, usePopper, joinHandlers } from '@equinor/eds-utils';
+import { tooltip } from './Tooltip.tokens.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+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(_ref, ref) {
+  let {
+    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 };