@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

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

@@ -1,85 +1,94 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useContext, useRef, useState, useCallback, useEffect, Children, cloneElement } from 'react';
 import styled from 'styled-components';
 import { mergeRefs } from '@equinor/eds-utils';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const variants = {
+var _excluded = ["children"];
+var variants = {
   fullWidth: 'minmax(1%, 360px)',
   minWidth: 'max-content'
 };
-const StyledTabList = styled.div.attrs(() => ({
-  role: 'tablist'
-})).withConfig({
+var StyledTabList = styled.div.attrs(function () {
+  return {
+    role: 'tablist'
+  };
+}).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["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;
+})(["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;}}"], function (_ref) {
+  var variant = _ref.variant;
   return variants[variant];
-}, _ref2 => {
-  let {
-    scrollable
-  } = _ref2;
+}, function (_ref2) {
+  var scrollable = _ref2.scrollable;
   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 => {
+var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
+  var _ref3$children = _ref3.children,
+      children = _ref3$children === void 0 ? [] : _ref3$children,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  var _useContext = useContext(TabsContext),
+      activeTab = _useContext.activeTab,
+      handleChange = _useContext.handleChange,
+      tabsId = _useContext.tabsId,
+      _useContext$variant = _useContext.variant,
+      variant = _useContext$variant === void 0 ? 'minWidth' : _useContext$variant,
+      _useContext$scrollabl = _useContext.scrollable,
+      scrollable = _useContext$scrollabl === void 0 ? false : _useContext$scrollabl,
+      tabsFocused = _useContext.tabsFocused;
+
+  var currentTab = useRef(activeTab);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      arrowNavigating = _useState2[0],
+      setArrowNavigating = _useState2[1];
+
+  var selectedTabRef = useCallback(function (node) {
     if (node !== null && tabsFocused || node !== null && arrowNavigating) {
       setArrowNavigating(false);
       node.focus();
     }
   }, [arrowNavigating, tabsFocused]);
-  useEffect(() => {
+  useEffect(function () {
     currentTab.current = activeTab;
   }, [activeTab]);
-  const Tabs = Children.map(children, (child, index) => {
-    const tabRef = index === activeTab ? mergeRefs(child.ref, selectedTabRef) : child.ref;
+  var Tabs = Children.map(children, function (child, index) {
+    var tabRef = index === activeTab ? mergeRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/cloneElement(child, {
-      id: `${tabsId}-tab-${index + 1}`,
-      'aria-controls': `${tabsId}-panel-${index + 1}`,
+      id: "".concat(tabsId, "-tab-").concat(index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
       active: index === activeTab,
-      index,
-      onClick: () => handleChange(index),
+      index: index,
+      onClick: function onClick() {
+        return handleChange(index);
+      },
       ref: tabRef
     });
   });
-  const focusableChildren = Tabs.filter(child => {
-    const childProps = child.props;
+  var focusableChildren = Tabs.filter(function (child) {
+    var childProps = child.props;
     return !childProps.disabled;
-  }).map(child => {
-    const childProps = child.props;
+  }).map(function (child) {
+    var childProps = child.props;
     return childProps.index;
   });
-  const firstFocusableChild = focusableChildren[0];
-  const lastFocusableChild = focusableChildren[focusableChildren.length - 1];
+  var firstFocusableChild = focusableChildren[0];
+  var lastFocusableChild = focusableChildren[focusableChildren.length - 1];
 
-  const handleTabsChange = (direction, fallbackTab) => {
-    const i = direction === 'left' ? 1 : -1;
-    const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
+  var handleTabsChange = function handleTabsChange(direction, fallbackTab) {
+    var i = direction === 'left' ? 1 : -1;
+    var nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
     setArrowNavigating(true);
     handleChange(nextTab === undefined ? fallbackTab : nextTab);
   };
 
-  const handleKeyPress = event => {
-    const {
-      key
-    } = event;
+  var handleKeyPress = function handleKeyPress(event) {
+    var key = event.key;
 
     if (key === 'ArrowLeft') {
       event.preventDefault();
@@ -92,14 +101,14 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
     }
   };
 
-  return /*#__PURE__*/jsx(StyledTabList, {
+  return /*#__PURE__*/jsx(StyledTabList, _objectSpread(_objectSpread({
     onKeyDown: handleKeyPress,
-    ref: ref,
-    ...props,
+    ref: ref
+  }, props), {}, {
     variant: variant,
     scrollable: scrollable,
     children: Tabs
-  });
+  }));
 });
 
 export { TabList };

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

@@ -1,33 +1,31 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledTabPanel = styled.div.attrs(() => ({
-  tabIndex: 0,
-  role: 'tabpanel'
-})).withConfig({
+var StyledTabPanel = styled.div.attrs(function () {
+  return {
+    tabIndex: 0,
+    role: 'tabpanel'
+  };
+}).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
-  const {
-    entities: {
-      panel
-    }
-  } = theme;
+})(function (_ref) {
+  var theme = _ref.theme;
+  var panel = theme.entities.panel;
   return css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), 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,
+var TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
+  var props = _extends({}, _ref2);
+
+  return /*#__PURE__*/jsx(StyledTabPanel, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     children: props.children
-  });
+  }));
 });
 
 export { TabPanel };

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

@@ -1,26 +1,30 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  const {
-    activeTab,
-    tabsId
-  } = useContext(TabsContext);
-  const Panels = Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
-    id: `${tabsId}-panel-${index + 1}`,
-    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
-    hidden: activeTab !== index
-  }));
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...props,
-    children: Panels
+var _excluded = ["children"];
+var TabPanels = /*#__PURE__*/forwardRef(function TabPanels(_ref, ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(TabsContext),
+      activeTab = _useContext.activeTab,
+      tabsId = _useContext.tabsId;
+
+  var Panels = Children.map(children, function (child, index) {
+    return /*#__PURE__*/cloneElement(child, {
+      id: "".concat(tabsId, "-panel-").concat(index + 1),
+      'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
+      hidden: activeTab !== index
+    });
   });
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    children: Panels
+  }));
 });
 
 export { TabPanels };

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

@@ -1,14 +1,16 @@
 import { createContext } from 'react';
 
-const TabsContext = /*#__PURE__*/createContext({
+var TabsContext = /*#__PURE__*/createContext({
   variant: 'minWidth',
   scrollable: false,
-  handleChange: () => null,
+  handleChange: function handleChange() {
+    return null;
+  },
   activeTab: 0,
   tabsId: '',
   tabsFocused: false
 });
-const TabsProvider = TabsContext.Provider;
+var TabsProvider = TabsContext.Provider;
 TabsContext.Consumer;
 
 export { TabsContext, TabsProvider };

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

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
@@ -6,32 +9,49 @@ import { ThemeProvider } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
-  let {
-    activeTab = 0,
-    onChange = () => null,
-    onBlur,
-    onFocus,
-    variant = 'minWidth',
-    scrollable = false,
-    id,
-    ...props
-  } = _ref;
-  const tabsId = useId(id, 'tabs');
-  const tabsRef = useRef(null);
-  const combinedTabsRef = useMemo(() => mergeRefs(tabsRef, ref), [tabsRef, ref]);
-  const [tabsFocused, setTabsFocused] = useState(false);
-  const [listenerAttached, setListenerAttached] = useState(false);
-  let blurTimer;
-
-  const handleBlur = e => {
+var _excluded = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
+var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
+  var _ref$activeTab = _ref.activeTab,
+      activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {
+    return null;
+  } : _ref$onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'minWidth' : _ref$variant,
+      _ref$scrollable = _ref.scrollable,
+      scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+      id = _ref.id,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var tabsId = useId(id, 'tabs');
+  var tabsRef = useRef(null);
+  var combinedTabsRef = useMemo(function () {
+    return mergeRefs(tabsRef, ref);
+  }, [tabsRef, ref]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      tabsFocused = _useState2[0],
+      setTabsFocused = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      listenerAttached = _useState4[0],
+      setListenerAttached = _useState4[1];
+
+  var blurTimer;
+
+  var handleBlur = function handleBlur(e) {
     setListenerAttached(false);
 
     if (tabsRef.current) {
       tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
     }
 
-    blurTimer = setTimeout(() => {
+    blurTimer = setTimeout(function () {
       if (tabsFocused) {
         setTabsFocused(false);
       }
@@ -39,7 +59,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     onBlur && onBlur(e);
   };
 
-  const handleFocus = e => {
+  var handleFocus = function handleFocus(e) {
     if (e.target.getAttribute('role') !== 'tab') {
       return;
     }
@@ -61,40 +81,41 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   }; //Only force focus on active Tab if Tabs was navigated to with keyboard
 
 
-  const checkIfTabWasPressed = event => {
+  var checkIfTabWasPressed = function checkIfTabWasPressed(event) {
     setListenerAttached(false);
     if (event.key === 'Tab') setTabsFocused(true);
   };
 
-  useEffect(() => {
-    const tabs = tabsRef.current;
-    return () => {
+  useEffect(function () {
+    var tabs = tabsRef.current;
+    return function () {
       if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const {
-    density
-  } = useEds();
-  const token$1 = useToken({
-    density
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token$1 = useToken({
+    density: density
   }, token);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token$1,
     children: /*#__PURE__*/jsx(TabsProvider, {
       value: {
-        activeTab,
+        activeTab: activeTab,
         handleChange: onChange,
-        tabsId,
-        variant,
-        scrollable,
-        tabsFocused
+        tabsId: tabsId,
+        variant: variant,
+        scrollable: scrollable,
+        tabsFocused: tabsFocused
       },
-      children: /*#__PURE__*/jsx("div", {
-        ref: combinedTabsRef,
-        ...props,
+      children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+        ref: combinedTabsRef
+      }, props), {}, {
         onBlur: handleBlur,
         onFocus: handleFocus
-      })
+      }))
     })
   });
 });

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

@@ -1,53 +1,21 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    text: {
-      static_icons__tertiary: {
-        rgba: defaultColor
-      }
-    },
-    ui: {
-      background__medium: {
-        rgba: defaultBorderColor
-      }
-    },
-    interactive: {
-      focus: {
-        rgba: focusOutlineColor
-      },
-      primary__hover_alt: {
-        rgba: hoverBackgroundColor
-      },
-      primary__resting: {
-        rgba: activeColor
-      },
-      primary__hover: {
-        rgba: activeHoverColor
-      }
-    }
-  },
-  clickbounds: {
-    default__base: clickboundsHeight
-  },
-  spacings: {
-    comfortable: {
-      medium: spacingMedium
-    }
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  },
-  typography: {
-    navigation: {
-      menu_tabs,
-      menu_title
-    }
-  }
-} = tokens;
-const token = {
+var _tokens$colors = tokens.colors,
+    defaultColor = _tokens$colors.text.static_icons__tertiary.rgba,
+    defaultBorderColor = _tokens$colors.ui.background__medium.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    hoverBackgroundColor = _tokens$colors$intera.primary__hover_alt.rgba,
+    activeColor = _tokens$colors$intera.primary__resting.rgba,
+    activeHoverColor = _tokens$colors$intera.primary__hover.rgba,
+    clickboundsHeight = tokens.clickbounds.default__base,
+    spacingMedium = tokens.spacings.comfortable.medium,
+    focusOutlineWidth = tokens.interactions.focused.width,
+    _tokens$typography$na = tokens.typography.navigation,
+    menu_tabs = _tokens$typography$na.menu_tabs,
+    menu_title = _tokens$typography$na.menu_title;
+var token = {
   entities: {
     panel: {
       spacings: {
@@ -64,8 +32,7 @@ const token = {
           }
         }
       },
-      typography: { ...menu_title
-      }
+      typography: _objectSpread({}, menu_title)
     },
     tab: {
       background: 'transparent',
@@ -80,11 +47,10 @@ const token = {
         left: spacingMedium,
         right: spacingMedium
       },
-      typography: {
+      typography: _objectSpread({
         color: defaultColor,
-        textAlign: 'center',
-        ...menu_tabs
-      },
+        textAlign: 'center'
+      }, menu_tabs),
       border: {
         type: 'bordergroup',
         bottom: {
@@ -109,7 +75,7 @@ const token = {
           outline: {
             type: 'outline',
             width: focusOutlineWidth,
-            offset: `-${parseInt(focusOutlineWidth)}px`,
+            offset: "-".concat(parseInt(focusOutlineWidth), "px"),
             style: 'dashed',
             color: focusOutlineColor
           }

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

@@ -4,7 +4,7 @@ import { Tab } from './Tab.js';
 import { TabPanels } from './TabPanels.js';
 import { TabPanel } from './TabPanel.js';
 
-const Tabs = Tabs$1;
+var Tabs = Tabs$1;
 Tabs.Tab = Tab;
 Tabs.Panels = TabPanels;
 Tabs.Panel = TabPanel;