@equinor/eds-core-react 0.14.3 → 0.15.0-dev.20211116

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,41 @@
+import 'focus-visible';
+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,35 @@
+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 };

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

@@ -1,10 +1,10 @@
-import type { ComponentToken } from '@equinor/eds-tokens';
-declare type AccordionToken = ComponentToken & {
-    entities: {
-        chevron: ComponentToken;
-        header: ComponentToken;
-        icon: ComponentToken;
-    };
-};
-export declare const accordion: AccordionToken;
-export {};
+import type { ComponentToken } from '@equinor/eds-tokens';
+declare type AccordionToken = ComponentToken & {
+    entities: {
+        chevron: ComponentToken;
+        header: ComponentToken;
+        icon: ComponentToken;
+    };
+};
+export declare const accordion: AccordionToken;
+export {};

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

@@ -1,6 +1,6 @@
-export declare type AccordionProps = {
-    /** The header level, i.e. h1, h2, h3 etc. */
-    headerLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    /** Which side the chevron should be on  */
-    chevronPosition?: 'left' | 'right';
-};
+export declare type AccordionProps = {
+    /** The header level, i.e. h1, h2, h3 etc. */
+    headerLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Which side the chevron should be on  */
+    chevronPosition?: 'left' | 'right';
+};

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

@@ -1,35 +1,35 @@
-import { HTMLAttributes } from 'react';
-import type { AccordionProps } from './Accordion.types';
-export declare type AccordionHeaderProps = {
-    /** The id of the button that toggles expansion */
-    id?: string;
-    /**  Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /**  The panel that is controlled by the HeaderButton */
-    panelId?: string;
-    /**  The index of the parent AccordionItem  */
-    parentIndex?: number;
-    /** Accordion item is disabled */
-    disabled?: boolean;
-    /** @ignore */
-    toggleExpanded?: () => void;
-    /** Accordion item toggle callback */
-    onToggle?: () => void;
-} & AccordionProps & HTMLAttributes<HTMLDivElement>;
-declare const AccordionHeader: import("react").ForwardRefExoticComponent<{
-    /** The id of the button that toggles expansion */
-    id?: string;
-    /**  Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /**  The panel that is controlled by the HeaderButton */
-    panelId?: string;
-    /**  The index of the parent AccordionItem  */
-    parentIndex?: number;
-    /** Accordion item is disabled */
-    disabled?: boolean;
-    /** @ignore */
-    toggleExpanded?: () => void;
-    /** Accordion item toggle callback */
-    onToggle?: () => void;
-} & AccordionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export { AccordionHeader };
+import { HTMLAttributes } from 'react';
+import type { AccordionProps } from './Accordion.types';
+export declare type AccordionHeaderProps = {
+    /** The id of the button that toggles expansion */
+    id?: string;
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /**  The panel that is controlled by the HeaderButton */
+    panelId?: string;
+    /**  The index of the parent AccordionItem  */
+    parentIndex?: number;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+    /** @ignore */
+    toggleExpanded?: () => void;
+    /** Accordion item toggle callback */
+    onToggle?: () => void;
+} & AccordionProps & HTMLAttributes<HTMLDivElement>;
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<{
+    /** The id of the button that toggles expansion */
+    id?: string;
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /**  The panel that is controlled by the HeaderButton */
+    panelId?: string;
+    /**  The index of the parent AccordionItem  */
+    parentIndex?: number;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+    /** @ignore */
+    toggleExpanded?: () => void;
+    /** Accordion item toggle callback */
+    onToggle?: () => void;
+} & AccordionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { AccordionHeader };

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

@@ -1,14 +1,14 @@
-import { HTMLAttributes } from 'react';
-export declare type AccordionHeaderTitleProps = {
-    /**  Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /** Accordion item is disabled */
-    disabled?: boolean;
-} & HTMLAttributes<HTMLSpanElement>;
-declare const AccordionHeaderTitle: import("react").ForwardRefExoticComponent<{
-    /**  Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /** Accordion item is disabled */
-    disabled?: boolean;
-} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-export { AccordionHeaderTitle };
+import { HTMLAttributes } from 'react';
+export declare type AccordionHeaderTitleProps = {
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const AccordionHeaderTitle: import("react").ForwardRefExoticComponent<{
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export { AccordionHeaderTitle };

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

@@ -1,19 +1,19 @@
-import { HTMLAttributes } from 'react';
-import type { AccordionProps } from './Accordion.types';
-export declare type AccordionItemProps = {
-    index?: number;
-    accordionId?: string;
-    /** Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /** accordion item is disabled */
-    disabled?: boolean;
-} & HTMLAttributes<HTMLDivElement> & AccordionProps;
-declare const AccordionItem: import("react").ForwardRefExoticComponent<{
-    index?: number;
-    accordionId?: string;
-    /** Is AccordionItem expanded */
-    isExpanded?: boolean;
-    /** accordion item is disabled */
-    disabled?: boolean;
-} & HTMLAttributes<HTMLDivElement> & AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
-export { AccordionItem };
+import { HTMLAttributes } from 'react';
+import type { AccordionProps } from './Accordion.types';
+export declare type AccordionItemProps = {
+    index?: number;
+    accordionId?: string;
+    /** Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLDivElement> & AccordionProps;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<{
+    index?: number;
+    accordionId?: string;
+    /** Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLDivElement> & AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+export { AccordionItem };

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

@@ -1,18 +1,18 @@
-import { HTMLAttributes } from 'react';
-export declare type AccordionPanelProps = {
-    /** The ID of the element that controls the panel */
-    headerId?: string;
-    /** The ID of the panel */
-    id?: string;
-    /** If `true`, the panel will be hidden. */
-    hidden?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
-declare const AccordionPanel: import("react").ForwardRefExoticComponent<{
-    /** The ID of the element that controls the panel */
-    headerId?: string;
-    /** The ID of the panel */
-    id?: string;
-    /** If `true`, the panel will be hidden. */
-    hidden?: boolean;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export { AccordionPanel };
+import { HTMLAttributes } from 'react';
+export declare type AccordionPanelProps = {
+    /** The ID of the element that controls the panel */
+    headerId?: string;
+    /** The ID of the panel */
+    id?: string;
+    /** If `true`, the panel will be hidden. */
+    hidden?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const AccordionPanel: import("react").ForwardRefExoticComponent<{
+    /** The ID of the element that controls the panel */
+    headerId?: string;
+    /** The ID of the panel */
+    id?: string;
+    /** If `true`, the panel will be hidden. */
+    hidden?: boolean;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { AccordionPanel };