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

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,8 +1,7 @@
 import { forwardRef } from 'react';
 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 StyledTabPanel = styled.div.attrs(() => ({
   tabIndex: 0,
@@ -10,9 +9,10 @@ const StyledTabPanel = styled.div.attrs(() => ({
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   const {
     entities: {
       panel
@@ -20,8 +20,9 @@ const StyledTabPanel = styled.div.attrs(() => ({
   } = 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({ ...props
-}, ref) {
+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,21 +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';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
-const Tabs = /*#__PURE__*/forwardRef(function Tabs({
-  activeTab = 0,
-  onChange,
-  onBlur,
-  onFocus,
-  variant = 'minWidth',
-  id,
-  ...props
-}, ref) {
+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;

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,

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,34 @@ 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 { useId } from '../../hooks/useId.js';
 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,

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);

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

@@ -1,16 +1,9 @@
 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';
-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",
@@ -24,14 +17,15 @@ 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 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);

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

@@ -6,10 +6,11 @@ const StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
-const Actions = /*#__PURE__*/forwardRef(function Actions({
-  children,
-  ...props
-}, ref) {
+const Actions = /*#__PURE__*/forwardRef(function Actions(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledActions, {
     ref: ref,
     ...props,

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

@@ -6,10 +6,11 @@ const StyledCustomContent = styled.div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
-  children,
-  ...props
-}, ref) {
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledCustomContent, {
     ref: ref,
     ...props,

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

@@ -6,10 +6,11 @@ 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) {
+const Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(StyledHeader, {
     ref: ref,
     ...props,

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

@@ -1,24 +1,24 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
 import { topbar } from './TopBar.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../utils/templates/borders.js';
-import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledTopBar = styled.header.withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   return css(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography));
 });
-const TopBar = /*#__PURE__*/forwardRef(function TopBar({
-  children,
-  ...props
-}, ref) {
+const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
   const {
     density
   } = useEds();