@equinor/eds-core-react 0.17.0 → 0.18.0

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

@@ -1,33 +1,35 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+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 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"
-})(({
-  theme,
-  active,
-  disabled
-}) => {
+})(_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));
+  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;scroll-snap-align:end;scroll-snap-stop:always;&: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, {

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

@@ -1,8 +1,8 @@
-import { forwardRef, useContext, useRef, useCallback, useEffect, Children, cloneElement } from 'react';
+import { forwardRef, useContext, useRef, useState, 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,26 +13,38 @@ 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:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;&::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
+  let {
+    variant
+  } = _ref;
+  return variants[variant];
+}, _ref2 => {
+  let {
+    scrollable
+  } = _ref2;
+  return scrollable ? 'auto' : 'hidden';
+});
+const TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
+  let {
+    children = [],
+    ...props
+  } = _ref3;
   const {
     activeTab,
     handleChange,
     tabsId,
     variant = 'minWidth',
+    scrollable = false,
     tabsFocused
   } = useContext(TabsContext);
   const currentTab = useRef(activeTab);
+  const [arrowNavigating, setArrowNavigating] = useState(false);
   const selectedTabRef = useCallback(node => {
-    if (node !== null && tabsFocused) {
+    if (node !== null && tabsFocused || node !== null && arrowNavigating) {
+      setArrowNavigating(false);
       node.focus();
     }
-  }, [tabsFocused]);
+  }, [arrowNavigating, tabsFocused]);
   useEffect(() => {
     currentTab.current = activeTab;
   }, [activeTab]);
@@ -61,6 +73,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
   const handleTabsChange = (direction, fallbackTab) => {
     const i = direction === 'left' ? 1 : -1;
     const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
+    setArrowNavigating(true);
     handleChange(nextTab === undefined ? fallbackTab : nextTab);
   };
 
@@ -70,10 +83,12 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     } = event;
 
     if (key === 'ArrowLeft') {
+      event.preventDefault();
       handleTabsChange('left', lastFocusableChild);
     }
 
     if (key === 'ArrowRight') {
+      event.preventDefault();
       handleTabsChange('right', firstFocusableChild);
     }
   };
@@ -83,6 +98,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     ref: ref,
     ...props,
     variant: variant,
+    scrollable: scrollable,
     children: Tabs
   });
 });

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.context.js

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 
 const TabsContext = /*#__PURE__*/createContext({
   variant: 'minWidth',
+  scrollable: false,
   handleChange: () => null,
   activeTab: 0,
   tabsId: '',

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

@@ -1,26 +1,36 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
+import { useId, useCombinedRefs, 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',
+    scrollable,
+    id,
+    ...props
+  } = _ref;
   const tabsId = useId(id, 'tabs');
+  const tabsRef = useRef(null);
+  const combinedTabsRef = useCombinedRefs(tabsRef, ref);
   const [tabsFocused, setTabsFocused] = useState(false);
+  const [listenerAttached, setListenerAttached] = useState(false);
   let blurTimer;
 
   const handleBlur = e => {
+    setListenerAttached(false);
+
+    if (tabsRef.current) {
+      tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
+    }
+
     blurTimer = setTimeout(() => {
       if (tabsFocused) {
         setTabsFocused(false);
@@ -35,14 +45,33 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
     }
 
     clearTimeout(blurTimer);
+    if (tabsFocused) return;
 
-    if (!tabsFocused) {
-      setTabsFocused(true);
+    if (!listenerAttached) {
+      if (tabsRef.current) {
+        setListenerAttached(true);
+        tabsRef.current.addEventListener('keyup', checkIfTabWasPressed, {
+          once: true,
+          capture: true
+        });
+      }
     }
 
     onFocus && onFocus(e);
+  }; //Only force focus on active Tab if Tabs was navigated to with keyboard
+
+
+  const checkIfTabWasPressed = event => {
+    setListenerAttached(false);
+    if (event.key === 'Tab') setTabsFocused(true);
   };
 
+  useEffect(() => {
+    const tabs = tabsRef.current;
+    return () => {
+      if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const {
     density
   } = useEds();
@@ -57,10 +86,11 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
         handleChange: onChange,
         tabsId,
         variant,
+        scrollable,
         tabsFocused
       },
       children: /*#__PURE__*/jsx("div", {
-        ref: ref,
+        ref: combinedTabsRef,
         ...props,
         onBlur: handleBlur,
         onFocus: handleFocus

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

@@ -95,6 +95,7 @@ const token = {
           outline: {
             type: 'outline',
             width: '1px',
+            offset: '-1px',
             style: 'dashed',
             color: focusOutlineColor
           }

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,