@equinor/eds-core-react 0.15.0 → 0.16.0

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

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { token } from './Tabs.tokens.js';
+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({
+  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));
+const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  return /*#__PURE__*/jsx(StyledTab, {
+    ref: ref,
+    ...props
+  });
+});
+
+export { Tab };

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

@@ -0,0 +1,90 @@
+import { forwardRef, useContext, useRef, useCallback, useEffect, Children, cloneElement } from 'react';
+import styled from 'styled-components';
+import { TabsContext } from './Tabs.context.js';
+import { jsx } from 'react/jsx-runtime';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+
+const variants = {
+  fullWidth: 'minmax(1%, 360px)',
+  minWidth: 'max-content'
+};
+const StyledTabList = styled.div.attrs(() => ({
+  role: 'tablist'
+})).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) {
+  const {
+    activeTab,
+    handleChange,
+    tabsId,
+    variant = 'minWidth',
+    tabsFocused
+  } = useContext(TabsContext);
+  const currentTab = useRef(activeTab);
+  const selectedTabRef = useCallback(node => {
+    if (node !== null && tabsFocused) {
+      node.focus();
+    }
+  }, [tabsFocused]);
+  useEffect(() => {
+    currentTab.current = activeTab;
+  }, [activeTab]);
+  const Tabs = Children.map(children, (child, index) => {
+    const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
+    useCombinedRefs(child.ref, selectedTabRef) : child.ref;
+    return /*#__PURE__*/cloneElement(child, {
+      id: "".concat(tabsId, "-tab-").concat(index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
+      active: index === activeTab,
+      index,
+      onClick: () => handleChange(index),
+      ref: tabRef
+    });
+  });
+  const focusableChildren = Tabs.filter(child => {
+    const childProps = child.props;
+    return !childProps.disabled;
+  }).map(child => {
+    const childProps = child.props;
+    return childProps.index;
+  });
+  const firstFocusableChild = focusableChildren[0];
+  const lastFocusableChild = focusableChildren[focusableChildren.length - 1];
+
+  const handleTabsChange = (direction, fallbackTab) => {
+    const i = direction === 'left' ? 1 : -1;
+    const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
+    handleChange(nextTab === undefined ? fallbackTab : nextTab);
+  };
+
+  const handleKeyPress = event => {
+    const {
+      key
+    } = event;
+
+    if (key === 'ArrowLeft') {
+      handleTabsChange('left', lastFocusableChild);
+    }
+
+    if (key === 'ArrowRight') {
+      handleTabsChange('right', firstFocusableChild);
+    }
+  };
+
+  return /*#__PURE__*/jsx(StyledTabList, {
+    onKeyDown: handleKeyPress,
+    ref: ref,
+    ...props,
+    variant: variant,
+    children: Tabs
+  });
+});
+
+export { TabList };

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

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Tabs.tokens.js';
+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) {
+  return /*#__PURE__*/jsx(StyledTabPanel, {
+    ref: ref,
+    ...props,
+    children: props.children
+  });
+});
+
+export { TabPanel };

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

@@ -0,0 +1,25 @@
+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 {
+    activeTab,
+    tabsId
+  } = useContext(TabsContext);
+  const Panels = Children.map(children, (child, index) => /*#__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", {
+    ref: ref,
+    ...props,
+    children: Panels
+  });
+});
+
+export { TabPanels };

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

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

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

@@ -0,0 +1,59 @@
+import { forwardRef, useState } from 'react';
+import { TabsProvider } from './Tabs.context.js';
+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) {
+  const tabsId = useId(id, 'tabs');
+  const [tabsFocused, setTabsFocused] = useState(false);
+  let blurTimer;
+
+  const handleBlur = e => {
+    blurTimer = setTimeout(() => {
+      if (tabsFocused) {
+        setTabsFocused(false);
+      }
+    }, 0);
+    onBlur && onBlur(e);
+  };
+
+  const handleFocus = e => {
+    if (e.target.getAttribute('role') !== 'tab') {
+      return;
+    }
+
+    clearTimeout(blurTimer);
+
+    if (!tabsFocused) {
+      setTabsFocused(true);
+    }
+
+    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
+    })
+  });
+});
+
+export { Tabs };

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

@@ -0,0 +1,127 @@
+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
+    }
+  }
+} = tokens;
+const token = {
+  entities: {
+    panel: {
+      spacings: {
+        top: spacingMedium,
+        bottom: spacingMedium
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor
+          }
+        }
+      }
+    },
+    tab: {
+      background: 'transparent',
+      height: clickboundsHeight,
+      clickbound: {
+        height: clickboundsHeight,
+        offset: {
+          top: '2px'
+        }
+      },
+      spacings: {
+        left: spacingMedium,
+        right: spacingMedium
+      },
+      typography: {
+        color: defaultColor,
+        textAlign: 'center'
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: defaultBorderColor,
+          style: 'solid',
+          width: '2px'
+        }
+      },
+      states: {
+        disabled: {
+          border: {
+            type: 'border',
+            width: 0,
+            color: 'transparent',
+            style: 'solid'
+          }
+        },
+        hover: {
+          background: hoverBackgroundColor
+        },
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor
+          }
+        },
+        active: {
+          typography: {
+            color: activeColor
+          },
+          border: {
+            type: 'bordergroup',
+            bottom: {
+              color: activeColor,
+              style: 'solid',
+              width: '2px'
+            }
+          },
+          states: {
+            hover: {
+              typography: {
+                color: activeHoverColor
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+
+export { token };

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

@@ -0,0 +1,17 @@
+import { Tabs as Tabs$1 } from './Tabs.js';
+import { TabList } from './TabList.js';
+import { Tab } from './Tab.js';
+import { TabPanels } from './TabPanels.js';
+import { TabPanel } from './TabPanel.js';
+
+const Tabs = Tabs$1;
+Tabs.Tab = Tab;
+Tabs.Panels = TabPanels;
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.Panels.displayName = 'Tabs.Panels';
+Tabs.Panel.displayName = 'Tabs.Panel';
+Tabs.List.displayName = 'Tabs.List';
+
+export { Tabs };

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

@@ -0,0 +1,145 @@
+import { forwardRef } from 'react';
+import { useTextField } from './TextField.context.js';
+import styled, { css } from 'styled-components';
+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
+}) => {
+  var _token$border, _token$border2, _token$border3, _token$border4;
+
+  if (!variant) {
+    return "";
+  }
+
+  return css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
+};
+
+const StrippedInput = styled(Input).withConfig({
+  displayName: "Field__StrippedInput",
+  componentId: "sc-455b88-0"
+})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
+const StrippedTextarea = styled(Textarea).withConfig({
+  displayName: "Field__StrippedTextarea",
+  componentId: "sc-455b88-1"
+})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
+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;"])));
+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
+});
+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'
+});
+const Field = /*#__PURE__*/forwardRef(function Field({
+  multiline,
+  variant,
+  disabled,
+  readOnly,
+  type,
+  unit,
+  inputIcon,
+  rowsMax,
+  onBlur,
+  onFocus,
+  ...other
+}, ref) {
+  const {
+    handleFocus,
+    handleBlur,
+    isFocused
+  } = useTextField();
+  const {
+    density
+  } = useEds();
+  const iconSize = density === 'compact' ? 16 : 24;
+  const actualVariant = variant === 'default' ? 'textfield' : variant;
+  const inputVariant = TextField_tokens[actualVariant];
+
+  const focusHandler = e => {
+    handleFocus();
+    onFocus && onFocus(e);
+  };
+
+  const blurHandler = e => {
+    handleBlur();
+    onBlur && onBlur(e);
+  };
+
+  const inputWrapperProps = {
+    isFocused,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    variant,
+    token: inputVariant,
+    inputIcon,
+    unit,
+    multiline
+  };
+  const inputProps = {
+    ref: ref,
+    type,
+    disabled,
+    readOnly,
+    variant,
+    onBlur: blurHandler,
+    onFocus: focusHandler,
+    ...other
+  };
+  const textareaProps = { ...inputProps,
+    rowsMax,
+    ref: ref
+  };
+  return /*#__PURE__*/jsxs(InputWrapper, { ...inputWrapperProps,
+    children: [multiline ? /*#__PURE__*/jsx(StrippedTextarea, { ...textareaProps
+    }) : /*#__PURE__*/jsx(StrippedInput, { ...inputProps
+    }), (inputIcon || unit) && /*#__PURE__*/jsxs(Adornments, {
+      multiline: multiline,
+      children: [unit && /*#__PURE__*/jsx(Unit, {
+        isDisabled: disabled,
+        children: unit
+      }), inputIcon && /*#__PURE__*/jsx(InputIcon, {
+        isDisabled: disabled,
+        variant: variant,
+        size: iconSize,
+        children: inputIcon
+      })]
+    })]
+  });
+});
+
+export { Field, InputWrapper };

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

@@ -0,0 +1,83 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+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
+}) => {
+  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:", ";"], ({
+  spacings
+}) => 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) {
+  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 };