@equinor/eds-core-react 0.16.1-dev.12072021 → 0.18.0-dev.20220210

package/dist/esm/components/Tabs/Tab.js

@@ -1,39 +1,36 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { token } from './Tabs.tokens.js';
+import { spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
-const {
-  entities: {
-    tab
-  }
-} = token;
-const StyledTab = styled.button.attrs(({
-  active = false,
-  disabled = false
-}) => ({
-  type: 'button',
-  role: 'tab',
-  'aria-selected': active,
-  'aria-disabled': disabled,
-  tabIndex: active ? '0' : '-1'
-})).withConfig({
+const StyledTab = styled.button.attrs(_ref => {
+  let {
+    active = false,
+    disabled = false
+  } = _ref;
+  return {
+    type: 'button',
+    role: 'tab',
+    'aria-selected': active,
+    'aria-disabled': disabled,
+    tabIndex: active ? '0' : '-1'
+  };
+}).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
-  active
-}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), ({
-  active
-}) => active ? tab.states.active.states.hover.typography.color : tab.typography.color, ({
-  disabled
-}) => disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), ({
-  disabled
-}) => disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), ({
-  active
-}) => active && bordersTemplate(tab.states.active.border));
+})(_ref2 => {
+  let {
+    theme,
+    active,
+    disabled
+  } = _ref2;
+  const {
+    entities: {
+      tab
+    }
+  } = theme;
+  return css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
+});
 const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsx(StyledTab, {
     ref: ref,

package/dist/esm/components/Tabs/TabList.js

@@ -1,8 +1,8 @@
 import { forwardRef, useContext, useRef, useCallback, useEffect, Children, cloneElement } from 'react';
 import styled from 'styled-components';
+import { useCombinedRefs } from '@equinor/eds-utils';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
 
 const variants = {
   fullWidth: 'minmax(1%, 360px)',
@@ -13,13 +13,17 @@ const StyledTabList = styled.div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], ({
-  variant
-}) => variants[variant]);
-const TabList = /*#__PURE__*/forwardRef(function TabsList({
-  children = [],
-  ...props
-}, ref) {
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], _ref => {
+  let {
+    variant
+  } = _ref;
+  return variants[variant];
+});
+const TabList = /*#__PURE__*/forwardRef(function TabsList(_ref2, ref) {
+  let {
+    children = [],
+    ...props
+  } = _ref2;
   const {
     activeTab,
     handleChange,

package/dist/esm/components/Tabs/TabPanel.js

@@ -1,24 +1,28 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { token } from './Tabs.tokens.js';
+import styled, { css } from 'styled-components';
+import { spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
-const {
-  entities: {
-    panel
-  }
-} = token;
 const StyledTabPanel = styled.div.attrs(() => ({
   tabIndex: 0,
   role: 'tabpanel'
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
-const TabPanel = /*#__PURE__*/forwardRef(function TabPanel({ ...props
-}, ref) {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  const {
+    entities: {
+      panel
+    }
+  } = theme;
+  return css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
+});
+const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
+  let { ...props
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledTabPanel, {
     ref: ref,
     ...props,

package/dist/esm/components/Tabs/TabPanels.js

@@ -2,10 +2,11 @@ import { forwardRef, useContext, Children, cloneElement } from 'react';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const TabPanels = /*#__PURE__*/forwardRef(function TabPanels({
-  children,
-  ...props
-}, ref) {
+const TabPanels = /*#__PURE__*/forwardRef(function TabPanels(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   const {
     activeTab,
     tabsId

package/dist/esm/components/Tabs/Tabs.js

@@ -1,17 +1,21 @@
 import { forwardRef, useState } from 'react';
 import { TabsProvider } from './Tabs.context.js';
+import { token } from './Tabs.tokens.js';
+import { useId, useToken } from '@equinor/eds-utils';
+import { ThemeProvider } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
-
-const Tabs = /*#__PURE__*/forwardRef(function Tabs({
-  activeTab = 0,
-  onChange,
-  onBlur,
-  onFocus,
-  variant = 'minWidth',
-  id,
-  ...props
-}, ref) {
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
+  let {
+    activeTab = 0,
+    onChange,
+    onBlur,
+    onFocus,
+    variant = 'minWidth',
+    id,
+    ...props
+  } = _ref;
   const tabsId = useId(id, 'tabs');
   const [tabsFocused, setTabsFocused] = useState(false);
   let blurTimer;
@@ -39,19 +43,28 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
     onFocus && onFocus(e);
   };
 
-  return /*#__PURE__*/jsx(TabsProvider, {
-    value: {
-      activeTab,
-      handleChange: onChange,
-      tabsId,
-      variant,
-      tabsFocused
-    },
-    children: /*#__PURE__*/jsx("div", {
-      ref: ref,
-      ...props,
-      onBlur: handleBlur,
-      onFocus: handleFocus
+  const {
+    density
+  } = useEds();
+  const token$1 = useToken({
+    density
+  }, token);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token$1,
+    children: /*#__PURE__*/jsx(TabsProvider, {
+      value: {
+        activeTab,
+        handleChange: onChange,
+        tabsId,
+        variant,
+        tabsFocused
+      },
+      children: /*#__PURE__*/jsx("div", {
+        ref: ref,
+        ...props,
+        onBlur: handleBlur,
+        onFocus: handleFocus
+      })
     })
   });
 });

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

@@ -121,6 +121,9 @@ const token = {
         }
       }
     }
+  },
+  modes: {
+    compact: {}
   }
 };
 

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

@@ -1,26 +1,27 @@
 import { forwardRef } from 'react';
 import { useTextField } from './TextField.context.js';
 import styled, { css } from 'styled-components';
+import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import * as TextField_tokens from './TextField.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Input } from '../Input/Input.js';
 import { Textarea } from '../Textarea/Textarea.js';
 import { Icon as InputIcon } from './Icon/Icon.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   textfield
 } = TextField_tokens;
 
-const Variation = ({
-  variant,
-  isFocused,
-  token
-}) => {
+const Variation = _ref => {
   var _token$border, _token$border2, _token$border3, _token$border4;
 
+  let {
+    variant,
+    isFocused,
+    token
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -39,45 +40,55 @@ const StrippedTextarea = styled(Textarea).withConfig({
 const InputWrapper = styled.div.withConfig({
   displayName: "Field__InputWrapper",
   componentId: "sc-455b88-2"
-})(({
-  inputIcon,
-  unit,
-  isDisabled,
-  isReadOnly,
-  multiline,
-  variant
-}) => css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"])));
+})(_ref2 => {
+  let {
+    inputIcon,
+    unit,
+    isDisabled,
+    isReadOnly,
+    multiline,
+    variant
+  } = _ref2;
+  return css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"]));
+});
 const Unit = styled.span.withConfig({
   displayName: "Field__Unit",
   componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), ({
-  isDisabled
-}) => isDisabled && {
-  color: textfield.entities.unit.states.disabled.typography.color
+})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), _ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled && {
+    color: textfield.entities.unit.states.disabled.typography.color
+  };
 });
 const Adornments = styled.div.withConfig({
   displayName: "Field__Adornments",
   componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, ({
-  multiline,
-  theme
-}) => multiline && {
-  marginTop: theme.spacings.top,
-  alignSelf: 'start'
+})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, _ref4 => {
+  let {
+    multiline,
+    theme
+  } = _ref4;
+  return multiline && {
+    marginTop: theme.spacings.top,
+    alignSelf: 'start'
+  };
 });
-const Field = /*#__PURE__*/forwardRef(function Field({
-  multiline,
-  variant,
-  disabled,
-  readOnly,
-  type,
-  unit,
-  inputIcon,
-  rowsMax,
-  onBlur,
-  onFocus,
-  ...other
-}, ref) {
+const Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
+  let {
+    multiline,
+    variant,
+    disabled,
+    readOnly,
+    type,
+    unit,
+    inputIcon,
+    rowsMax,
+    onBlur,
+    onFocus,
+    ...other
+  } = _ref5;
   const {
     handleFocus,
     handleBlur,
@@ -89,6 +100,7 @@ const Field = /*#__PURE__*/forwardRef(function Field({
   const iconSize = density === 'compact' ? 16 : 24;
   const actualVariant = variant === 'default' ? 'textfield' : variant;
   const inputVariant = TextField_tokens[actualVariant];
+  const isError = actualVariant === 'error';
 
   const focusHandler = e => {
     handleFocus();
@@ -112,6 +124,7 @@ const Field = /*#__PURE__*/forwardRef(function Field({
   };
   const inputProps = {
     ref: ref,
+    'aria-invalid': isError,
     type,
     disabled,
     readOnly,

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

@@ -1,16 +1,18 @@
 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';
-import { typographyTemplate } from '../../../utils/templates/index.js';
 
-const Variation = ({
-  variant,
-  isFocused,
-  isDisabled
-}) => {
+const Variation = _ref => {
+  let {
+    variant,
+    isFocused,
+    isDisabled
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -35,22 +37,29 @@ const Variation = ({
 const Container = styled.div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], ({
-  spacings
-}) => spacings.top);
+})(["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), ({
-  spacings
-}) => spacings.left, Variation);
-const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
-  helperText: helperText$1,
-  icon,
-  variant = 'default',
-  disabled: isDisabled,
-  ...rest
-}, ref) {
+})(["", " 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 {

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

@@ -7,12 +7,13 @@ import { jsx } from 'react/jsx-runtime';
 const StyledIcon = styled.div.withConfig({
   displayName: "Icon__StyledIcon",
   componentId: "sc-jr0rqa-0"
-})(({
-  colors,
-  isDisabled,
-  isFocused,
-  size
-}) => {
+})(_ref => {
+  let {
+    colors,
+    isDisabled,
+    isFocused,
+    size
+  } = _ref;
   const {
     focusColor,
     color,
@@ -30,18 +31,19 @@ const StyledIcon = styled.div.withConfig({
 
   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 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();

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

@@ -5,9 +5,10 @@ const initalState = {
   isFocused: false
 };
 const TextFieldContext = /*#__PURE__*/createContext(initalState);
-const TextFieldProvider = ({
-  children
-}) => {
+const TextFieldProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [state, setState] = useState(initalState);
 
   const handleFocus = () => {

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

@@ -3,34 +3,37 @@ 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';
-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 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,
@@ -43,6 +46,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField({
     ...other
   };
   const helperProps = {
+    id: helperTextId,
     variant,
     helperText,
     icon: helperIcon,

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

@@ -2,22 +2,21 @@ 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 { 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
-}) => {
+const Variation = _ref => {
+  let {
+    variant,
+    token,
+    density
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -46,13 +45,14 @@ 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 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);