@equinor/eds-core-react 0.14.2 → 0.15.0-dev.20211118

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

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } 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';
+
+const {
+  background,
+  height,
+  spacings,
+  border,
+  typography
+} = token;
+const StyledTopBar = styled.header.withConfig({
+  displayName: "TopBar__StyledTopBar",
+  componentId: "sc-1yj236q-0"
+})(["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;", " ", ";", ""], height, background, spacings.left, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
+const TopBar = /*#__PURE__*/forwardRef(function TopBar({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledTopBar, { ...props,
+    ref: ref,
+    children: children
+  });
+}); // TopBar.displayName = 'eds-topbar'
+
+export { TopBar };

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

@@ -0,0 +1,32 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography: {
+    navigation
+  }
+} = tokens;
+const token = {
+  height: '64px',
+  background: colors.ui.background__default.rgba,
+  typography: navigation.menu_title,
+  spacings: {
+    left: comfortable.xx_large,
+    right: comfortable.xx_large,
+    top: comfortable.small,
+    bottom: comfortable.small
+  },
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      style: 'solid',
+      color: colors.ui.background__light.rgba,
+      width: '2px'
+    }
+  }
+};
+
+export { token };

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

@@ -0,0 +1,14 @@
+import { TopBar as TopBar$1 } from './TopBar.js';
+import { Actions } from './Actions.js';
+import { Header } from './Header.js';
+import { CustomContent } from './CustomContent.js';
+
+const TopBar = TopBar$1;
+TopBar.Actions = Actions;
+TopBar.Header = Header;
+TopBar.CustomContent = CustomContent;
+TopBar.Actions.displayName = 'Topbar.Actions';
+TopBar.Header.displayName = 'Topbar.Header';
+TopBar.CustomContent.displayName = 'Topbar.CustomContent';
+
+export { TopBar };

package/dist/esm/components/Typography/Typography.js

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { colors, link, quickVariants, typography } from './Typography.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { typographyTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const getElementType = (variant, link) => {
+  if (link) {
+    return 'a';
+  }
+
+  switch (variant) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+      return variant;
+
+    case 'caption':
+    case 'overline':
+    case 'ingress':
+    case 'meta':
+    case 'body_short':
+    case 'body_long':
+    default:
+      return 'p';
+  }
+};
+
+const findTypography = (variantName, group) => {
+  // For quick use when using paragraphs and headings we can skip group
+  if (!group && quickVariants[variantName]) {
+    return quickVariants[variantName];
+  }
+
+  return typography[group][variantName];
+};
+
+const findColor = (inputColor = null) => typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
+
+const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
+
+const StyledTypography = styled.p.withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-179guof-0"
+})(["", " ", " ", " ", ""], ({
+  typography,
+  link
+}) => typographyTemplate(typography, link), ({
+  color
+}) => css({
+  color: findColor(color)
+}), ({
+  lines
+}) => //https://caniuse.com/#feat=css-line-clamp
+lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines), ({
+  link: link$1
+}) => link$1 && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], outlineTemplate(link.states.focus.outline)));
+const Typography = /*#__PURE__*/forwardRef(function Typography({
+  variant = 'body_short',
+  children,
+  bold,
+  italic,
+  link,
+  group,
+  token,
+  as: providedAs,
+  ...other
+}, ref) {
+  const as = providedAs ? providedAs : getElementType(variant, link);
+  const variantName = toVariantName(variant, bold, italic, link);
+  const typography = findTypography(variantName, group);
+
+  if (typeof typography === 'undefined') {
+    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
+  }
+
+  return /*#__PURE__*/jsx(StyledTypography, {
+    as: as,
+    typography: { ...typography,
+      ...token
+    },
+    link: link,
+    ref: ref,
+    ...other,
+    children: children
+  });
+}); // Typography.displayName = 'EdsTypography'
+
+export { Typography };

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

@@ -0,0 +1,61 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography,
+  colors: colorsToken
+} = tokens;
+const {
+  heading,
+  paragraph
+} = typography;
+const {
+  interactive: {
+    primary__resting: {
+      rgba: primary
+    },
+    secondary__resting: {
+      rgba: secondary
+    },
+    danger__resting: {
+      rgba: danger
+    },
+    warning__resting: {
+      rgba: warning
+    },
+    success__resting: {
+      rgba: success
+    },
+    disabled__text: {
+      rgba: disabled
+    },
+    focus: {
+      rgba: focus
+    }
+  }
+} = colorsToken;
+const colors = {
+  primary,
+  secondary,
+  danger,
+  warning,
+  success,
+  disabled
+};
+const quickVariants = { ...heading,
+  ...paragraph
+};
+const link = {
+  states: {
+    focus: {
+      outline: {
+        width: '1px',
+        color: focus,
+        style: 'dashed',
+        type: 'outline',
+        offset: '2px'
+      }
+    }
+  }
+};
+
+export { colors, link, quickVariants, typography };

package/dist/esm/hooks/useAutoResize.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+const useAutoResize = (targetEl, maxHeight) => {
+  useEffect(() => {
+    const handleResize = () => {
+      targetEl.style.height = 'auto';
+      const {
+        scrollHeight,
+        clientHeight
+      } = targetEl;
+      let newHeight = clientHeight;
+
+      if (maxHeight > newHeight) {
+        newHeight = Math.min(maxHeight, Math.max(scrollHeight, newHeight));
+
+        if (scrollHeight > maxHeight) {
+          targetEl.style.overflow = 'auto';
+        } else {
+          targetEl.style.overflow = 'hidden';
+        }
+
+        if (newHeight > clientHeight) {
+          targetEl.style.height = `${newHeight}px`;
+        }
+      }
+    };
+
+    if (targetEl && maxHeight) {
+      handleResize();
+      targetEl.addEventListener('keyup', handleResize, true);
+    }
+
+    return () => {
+      targetEl === null || targetEl === void 0 ? void 0 : targetEl.removeEventListener('keyup', handleResize, true);
+    };
+  }, [targetEl, maxHeight]);
+};
+
+export { useAutoResize };

package/dist/esm/hooks/useCombinedRefs.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+/** Returns a memoized function that calls passed refs sequentially with passed element */
+const useCombinedRefs = (...refs) => {
+  return useCallback(element => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+      ref(element);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = element;
+    }
+  }), [refs]);
+};
+
+export { useCombinedRefs };

package/dist/esm/hooks/useGlobalKeyPress.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+var KEY;
+
+(function (KEY) {
+  KEY["Escape"] = "Escape";
+  KEY["Enter"] = "Enter";
+  KEY["Tab"] = "Tab";
+  KEY["ArrowDown"] = "ArrowDown";
+  KEY["ArrowUp"] = "ArrowUp";
+})(KEY || (KEY = {}));
+
+const useGlobalKeyPress = (targetKey, callback) => {
+  useEffect(() => {
+    const handleGlobalKeyPress = e => {
+      const {
+        key
+      } = e;
+
+      switch (key) {
+        case targetKey:
+          callback(e);
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleGlobalKeyPress, true);
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyPress, true);
+    };
+  }, [targetKey, callback]);
+};
+
+export { useGlobalKeyPress };

package/dist/esm/hooks/useHideBodyScroll.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+const useHideBodyScroll = overflowState => {
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = overflowState;
+    };
+  }, []);
+};
+
+export { useHideBodyScroll };

package/dist/esm/hooks/useId.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+const useId = (idOverride, type) => {
+  const [defaultId, setDefaultId] = useState(idOverride);
+  const id = idOverride || defaultId;
+  useEffect(() => {
+    if (defaultId == null) {
+      setDefaultId(`eds-${type ? type + `-` : ''}${Math.round(Math.random() * 1e5)}`);
+    }
+  }, [defaultId, type]);
+  return id;
+};
+
+export { useId };

package/dist/esm/hooks/useMountedRef.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+
+const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(null);
+  useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  return isMounted;
+};
+
+export { useIsMounted };

package/dist/esm/hooks/useOutsideClick.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (el, callback) => {
+  useEffect(() => {
+    const handleClick = e => {
+      if (el && !el.contains(e.target)) {
+        callback(e);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [el, callback]);
+};
+
+export { useOutsideClick };

package/dist/esm/hooks/usePopper.js

@@ -0,0 +1,31 @@
+import { usePopper as usePopper$1 } from 'react-popper';
+
+const usePopper = (anchorEl, popperEl, arrowRef, placement, offset = 10) => {
+  if (placement === undefined) {
+    placement = 'auto';
+  }
+
+  const {
+    styles,
+    attributes
+  } = usePopper$1(anchorEl, popperEl, {
+    placement,
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowRef
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, offset]
+      }
+    }]
+  });
+  return {
+    styles,
+    attributes
+  };
+};
+
+export { usePopper };

package/dist/esm/hooks/useToken.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { mergeDeepRight } from 'ramda';
+
+const useToken = (options, token) => useCallback(() => {
+  const {
+    density
+  } = options;
+
+  if (density === 'compact') {
+    return mergeDeepRight(token, token.modes.compact);
+  }
+
+  return token;
+}, [options, token]);
+
+export { useToken };

package/dist/esm/index.js

@@ -0,0 +1,40 @@
+export { Table } from './components/Table/index.js';
+export { Icon } from './components/Icon/index.js';
+export { List } from './components/List/index.js';
+export { Accordion } from './components/Accordion/index.js';
+export { Tabs } from './components/Tabs/index.js';
+export { Card } from './components/Card/index.js';
+export { TopBar } from './components/TopBar/index.js';
+export { Dialog } from './components/Dialog/index.js';
+export { TableOfContents } from './components/TableOfContents/index.js';
+export { Snackbar } from './components/Snackbar/index.js';
+export { Popover } from './components/Popover/index.js';
+export { Banner } from './components/Banner/index.js';
+export { Progress } from './components/Progress/index.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { Menu } from './components/Menu/index.js';
+export { Button } from './components/Button/Button.js';
+export { Typography } from './components/Typography/Typography.js';
+export { Divider } from './components/Divider/Divider.js';
+export { TextField } from './components/TextField/TextField.js';
+export { Scrim } from './components/Scrim/Scrim.js';
+export { SideSheet } from './components/SideSheet/SideSheet.js';
+export { Chip } from './components/Chip/Chip.js';
+export { Avatar } from './components/Avatar/Avatar.js';
+export { Search } from './components/Search/Search.js';
+export { Slider } from './components/Slider/Slider.js';
+export { Tooltip } from './components/Tooltip/Tooltip.js';
+export { LinearProgress } from './components/Progress/Linear/LinearProgress.js';
+export { CircularProgress } from './components/Progress/Circular/CircularProgress.js';
+export { StarProgress } from './components/Progress/Star/StarProgress.js';
+export { DotProgress } from './components/Progress/Dots/DotProgress.js';
+export { Pagination } from './components/Pagination/Pagination.js';
+export { NativeSelect } from './components/Select/NativeSelect/NativeSelect.js';
+export { SingleSelect } from './components/Select/SingleSelect/SingleSelect.js';
+export { MultiSelect } from './components/Select/MultiSelect/MultiSelect.js';
+export { Label } from './components/Label/Label.js';
+export { Input } from './components/Input/Input.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Radio } from './components/Radio/Radio.js';
+export { Switch } from './components/Switch/Switch.js';
+export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';

package/dist/esm/utils/joinHandlers.js

@@ -0,0 +1,10 @@
+const joinHandlers = (handler1, handler2) => {
+  const callback = event => {
+    handler1 && handler1(event);
+    handler2 && handler2(event);
+  };
+
+  return callback;
+};
+
+export { joinHandlers };

package/dist/esm/utils/setReactInputValue.js

@@ -0,0 +1,18 @@
+// Workaround
+// React ignores 'dispathEvent' on input/textarea, see https://github.com/facebook/react/issues/10135
+const setReactInputValue = (input, value) => {
+  const previousValue = input.value;
+  input.value = value;
+  const tracker = input._valueTracker;
+
+  if (typeof tracker !== 'undefined') {
+    tracker.setValue(previousValue);
+  } //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+
+
+  input.dispatchEvent(new Event('change', {
+    bubbles: true
+  }));
+};
+
+export { setReactInputValue };

package/dist/esm/utils/templates/borders.js

@@ -0,0 +1,35 @@
+import { css } from 'styled-components';
+import { shorthand } from './common.js';
+
+const bordersTemplate = border => {
+  var _border$left, _border$left2, _border$right, _border$right2;
+
+  if (!border) {
+    return css({});
+  }
+
+  switch (border.type) {
+    case 'border':
+      return css({
+        border: shorthand(border),
+        borderRadius: border.radius
+      });
+
+    case 'bordergroup':
+      return css({
+        borderBottom: shorthand(border.bottom),
+        borderTop: shorthand(border.top),
+        borderLeft: shorthand(border.left),
+        borderRight: shorthand(border.right),
+        borderBottomLeftRadius: border === null || border === void 0 ? void 0 : (_border$left = border.left) === null || _border$left === void 0 ? void 0 : _border$left.radius,
+        borderTopLeftRadius: border === null || border === void 0 ? void 0 : (_border$left2 = border.left) === null || _border$left2 === void 0 ? void 0 : _border$left2.radius,
+        borderBottomRightRadius: border === null || border === void 0 ? void 0 : (_border$right = border.right) === null || _border$right === void 0 ? void 0 : _border$right.radius,
+        borderTopRightRadius: border === null || border === void 0 ? void 0 : (_border$right2 = border.right) === null || _border$right2 === void 0 ? void 0 : _border$right2.radius
+      });
+
+    default:
+      return css({});
+  }
+};
+
+export { bordersTemplate };

package/dist/esm/utils/templates/common.js

@@ -0,0 +1,19 @@
+const shorthand = token => {
+  if (!token) {
+    return undefined;
+  }
+
+  const {
+    width = '',
+    style = '',
+    color = ''
+  } = token;
+
+  if (!width) {
+    return null;
+  }
+
+  return `${width} ${style} ${color}`;
+};
+
+export { shorthand };

package/dist/esm/utils/templates/focus.js

@@ -0,0 +1,36 @@
+import 'focus-visible';
+import { css } from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { shorthand } from './common.js';
+
+const {
+  colors: {
+    interactive: {
+      focus: {
+        rgba: focusColor
+      }
+    }
+  }
+} = tokens;
+const outlineTemplate = outline => {
+  const {
+    color = focusColor,
+    style = 'dashed',
+    width = '1px',
+    offset = '0px',
+    type
+  } = outline;
+  const outline_ = {
+    color,
+    style,
+    width,
+    offset,
+    type
+  };
+  return css({
+    outline: shorthand(outline_),
+    outlineOffset: outline_.offset
+  });
+};
+
+export { outlineTemplate };

package/dist/esm/utils/templates/index.js

@@ -0,0 +1,59 @@
+import { css } from 'styled-components';
+
+const typographyTemplate = (typography, link) => {
+  if (!typography) {
+    return '';
+  }
+
+  let base = `
+  margin: 0;
+  color: ${typography.color};
+  font-family: ${typography.fontFamily};
+  font-size: ${typography.fontSize};
+  font-weight: ${typography.fontWeight};
+  line-height: ${typography.lineHeight};
+  `;
+
+  if (typography.fontStyle) {
+    base += `\nfont-style: ${typography.fontStyle};`;
+  }
+
+  if (typography.letterSpacing) {
+    base += `\nletter-spacing: ${typography.letterSpacing};`;
+  }
+
+  if (typography.textTransform) {
+    base += `\ntext-transform: ${typography.textTransform};`;
+  }
+
+  if (typography.textDecoration) {
+    base += `\ntext-decoration: ${typography.textDecoration};`;
+  }
+
+  if (typography.textAlign) {
+    base += `\ntext-align: ${typography.textAlign};`;
+  }
+
+  if (typography.fontFeature) {
+    base += `\nfont-feature-settings: ${typography.fontFeature};`;
+  }
+
+  if (link) {
+    base += `\ncursor: pointer;`;
+  }
+
+  return base;
+};
+const spacingsTemplate = ({
+  left,
+  right,
+  top,
+  bottom
+}) => css({
+  paddingLeft: left,
+  paddingTop: top,
+  paddingRight: right,
+  paddingBottom: bottom
+});
+
+export { spacingsTemplate, typographyTemplate };

package/dist/types/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
-import type { AccordionProps } from './Accordion.types';
-declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export { Accordion };
+import { HTMLAttributes } from 'react';
+import type { AccordionProps } from './Accordion.types';
+declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { Accordion };