@equinor/eds-core-react 0.15.0 → 0.17.0

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) => "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(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{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), 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 \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(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 = "".concat(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,20 @@
+import { useRef, useEffect } from 'react';
+
+const useHideBodyScroll = active => {
+  const overflowState = useRef(document.body.style.overflow);
+  useEffect(() => {
+    const originalState = overflowState.current;
+
+    if (active) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = originalState;
+    }
+
+    return () => {
+      document.body.style.overflow = originalState;
+    };
+  }, [active]);
+};
+
+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-".concat(type ? type + "-" : '').concat(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_1 from '../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+
+const useToken = (options, token) => useCallback(() => {
+  const {
+    density
+  } = options;
+
+  if (density === 'compact') {
+    return mergeDeepRight_1(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/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry1.js

@@ -0,0 +1,25 @@
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal one-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry1(fn) {
+  return function f1(a) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
+      return f1;
+    } else {
+      return fn.apply(this, arguments);
+    }
+  };
+}
+
+var _curry1_1 = _curry1;
+
+export default _curry1_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry2.js

@@ -0,0 +1,38 @@
+import _curry1_1 from './_curry1.js';
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _curry1 = _curry1_1;
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal two-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry2(fn) {
+  return function f2(a, b) {
+    switch (arguments.length) {
+      case 0:
+        return f2;
+
+      case 1:
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
+          return fn(a, _b);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b);
+        }) : fn(a, b);
+    }
+  };
+}
+
+var _curry2_1 = _curry2;
+
+export default _curry2_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry3.js

@@ -0,0 +1,57 @@
+import _curry1_1 from './_curry1.js';
+import _curry2_1 from './_curry2.js';
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _curry1 = _curry1_1;
+var _curry2 = _curry2_1;
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal three-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry3(fn) {
+  return function f3(a, b, c) {
+    switch (arguments.length) {
+      case 0:
+        return f3;
+
+      case 1:
+        return _isPlaceholder(a) ? f3 : _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        });
+
+      case 2:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) ? _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _curry1(function (_c) {
+          return fn(a, b, _c);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2(function (_a, _b) {
+          return fn(_a, _b, c);
+        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b, c);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b, c);
+        }) : _isPlaceholder(c) ? _curry1(function (_c) {
+          return fn(a, b, _c);
+        }) : fn(a, b, c);
+    }
+  };
+}
+
+var _curry3_1 = _curry3;
+
+export default _curry3_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_has.js

@@ -0,0 +1,7 @@
+function _has(prop, obj) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+var _has_1 = _has;
+
+export default _has_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_isObject.js

@@ -0,0 +1,7 @@
+function _isObject(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
+
+var _isObject_1 = _isObject;
+
+export default _isObject_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_isPlaceholder.js

@@ -0,0 +1,7 @@
+function _isPlaceholder(a) {
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+}
+
+var _isPlaceholder_1 = _isPlaceholder;
+
+export default _isPlaceholder_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js

@@ -0,0 +1,36 @@
+import _curry2_1 from './internal/_curry2.js';
+import mergeDeepWithKey_1 from './mergeDeepWithKey.js';
+
+var _curry2 = _curry2_1;
+var mergeDeepWithKey = mergeDeepWithKey_1;
+/**
+ * Creates a new object with the own properties of the first object merged with
+ * the own properties of the second object. If a key exists in both objects:
+ * - and both values are objects, the two values will be recursively merged
+ * - otherwise the value from the second object will be used.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.24.0
+ * @category Object
+ * @sig {a} -> {a} -> {a}
+ * @param {Object} lObj
+ * @param {Object} rObj
+ * @return {Object}
+ * @see R.merge, R.mergeDeepLeft, R.mergeDeepWith, R.mergeDeepWithKey
+ * @example
+ *
+ *      R.mergeDeepRight({ name: 'fred', age: 10, contact: { email: 'moo@example.com' }},
+ *                       { age: 40, contact: { email: 'baa@example.com' }});
+ *      //=> { name: 'fred', age: 40, contact: { email: 'baa@example.com' }}
+ */
+
+var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
+  return mergeDeepWithKey(function (k, lVal, rVal) {
+    return rVal;
+  }, lObj, rObj);
+});
+
+var mergeDeepRight_1 = mergeDeepRight;
+
+export default mergeDeepRight_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepWithKey.js

@@ -0,0 +1,49 @@
+import _curry3_1 from './internal/_curry3.js';
+import _isObject_1 from './internal/_isObject.js';
+import mergeWithKey_1 from './mergeWithKey.js';
+
+var _curry3 = _curry3_1;
+var _isObject = _isObject_1;
+var mergeWithKey = mergeWithKey_1;
+/**
+ * Creates a new object with the own properties of the two provided objects.
+ * If a key exists in both objects:
+ * - and both associated values are also objects then the values will be
+ *   recursively merged.
+ * - otherwise the provided function is applied to the key and associated values
+ *   using the resulting value as the new value associated with the key.
+ * If a key only exists in one object, the value will be associated with the key
+ * of the resulting object.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.24.0
+ * @category Object
+ * @sig ((String, a, a) -> a) -> {a} -> {a} -> {a}
+ * @param {Function} fn
+ * @param {Object} lObj
+ * @param {Object} rObj
+ * @return {Object}
+ * @see R.mergeWithKey, R.mergeDeepWith
+ * @example
+ *
+ *      let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
+ *      R.mergeDeepWithKey(concatValues,
+ *                         { a: true, c: { thing: 'foo', values: [10, 20] }},
+ *                         { b: true, c: { thing: 'bar', values: [15, 35] }});
+ *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
+ */
+
+var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+  return mergeWithKey(function (k, lVal, rVal) {
+    if (_isObject(lVal) && _isObject(rVal)) {
+      return mergeDeepWithKey(fn, lVal, rVal);
+    } else {
+      return fn(k, lVal, rVal);
+    }
+  }, lObj, rObj);
+});
+
+var mergeDeepWithKey_1 = mergeDeepWithKey;
+
+export default mergeDeepWithKey_1;