@ndla/ui 34.6.1 → 34.6.3

package/es/RelatedArticleList/RelatedArticleV2.js

@@ -0,0 +1,101 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Children, useMemo, useState } from 'react';
+import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
+import { ButtonV2 } from '@ndla/button';
+import SafeLink from '@ndla/safelink';
+import SectionHeading from '../SectionHeading';
+import ContentTypeBadge from '../ContentTypeBadge';
+import { contentTypes } from '../model/ContentType';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+var classes = new BEMHelper({
+  name: 'related-articles',
+  prefix: 'c-'
+});
+export var RelatedArticleV2 = function RelatedArticleV2(_ref) {
+  var title = _ref.title,
+    introduction = _ref.introduction,
+    to = _ref.to,
+    _ref$linkInfo = _ref.linkInfo,
+    linkInfo = _ref$linkInfo === void 0 ? '' : _ref$linkInfo,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '' : _ref$target,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? contentTypes.SUBJECT_MATERIAL : _ref$type;
+  return _jsxs("article", _objectSpread(_objectSpread({}, classes('item', type)), {}, {
+    children: [_jsxs("h3", _objectSpread(_objectSpread({}, classes('title')), {}, {
+      children: [_jsx(ContentTypeBadge, {
+        type: type,
+        background: true,
+        size: "small"
+      }), _jsx("span", _objectSpread(_objectSpread({}, classes('link-wrapper')), {}, {
+        children: _jsx(SafeLink, _objectSpread(_objectSpread({
+          to: to
+        }, classes('link')), {}, {
+          target: target,
+          rel: linkInfo ? 'noopener noreferrer' : undefined,
+          children: title
+        }))
+      }))]
+    })), _jsx("p", _objectSpread(_objectSpread({}, classes('description')), {}, {
+      dangerouslySetInnerHTML: {
+        __html: introduction
+      }
+    })), linkInfo && _jsx("p", _objectSpread(_objectSpread({}, classes('link-info')), {}, {
+      children: linkInfo
+    }))]
+  }));
+};
+export var RelatedArticleListV2 = function RelatedArticleListV2(_ref2) {
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children,
+    articleCount = _ref2.articleCount,
+    _ref2$headingLevel = _ref2.headingLevel,
+    headingLevel = _ref2$headingLevel === void 0 ? 'h3' : _ref2$headingLevel;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var childCount = useMemo(function () {
+    return articleCount !== null && articleCount !== void 0 ? articleCount : Children.count(children);
+  }, [children, articleCount]);
+  var childrenToShow = useMemo(function () {
+    return childCount > 2 && !expanded ? children === null || children === void 0 ? void 0 : children.slice(0, 2) : children;
+  }, [childCount, children, expanded]);
+  return _jsxs("section", _objectSpread(_objectSpread({}, classes('')), {}, {
+    children: [_jsx(SectionHeading, {
+      headingLevel: headingLevel,
+      className: classes('component-title').className,
+      children: t('related.title')
+    }), _jsx("div", _objectSpread(_objectSpread({}, classes('articles')), {}, {
+      children: childrenToShow
+    })), childCount > 2 ? _jsx(ButtonV2, {
+      onClick: function onClick() {
+        return setExpanded(function (p) {
+          return !p;
+        });
+      },
+      variant: "outline",
+      children: t("related.show".concat(expanded ? 'Less' : 'More'))
+    }) : null]
+  }));
+};

package/es/RelatedArticleList/index.js

@@ -7,5 +7,6 @@
  */
 
 import RelatedArticleList, { RelatedArticle } from './RelatedArticleList';
-export { RelatedArticle };
+import { RelatedArticleListV2 } from './RelatedArticleV2';
+export { RelatedArticle, RelatedArticleListV2 };
 export default RelatedArticleList;

package/es/Table/Table.js

@@ -1,9 +1,17 @@
+import _styled from "@emotion/styled/base";
 var _excluded = ["children", "id"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright (c) 2016-present, NDLA.
  *
@@ -12,24 +20,103 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  *
  */
 
-import React from 'react';
+import { colors, spacing } from '@ndla/core';
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var classes = BEMHelper('c-table');
-var Table = function Table(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var MARGIN = 5;
+var ScrollBorder = /*#__PURE__*/_styled("div", {
+  target: "e69565p2",
+  label: "ScrollBorder"
+})("position:absolute;top:0;height:calc(100% - ", spacing.mediumlarge, ");width:3px;background:", colors.background.dark, ";display:", function (_ref) {
+  var show = _ref.show;
+  return show ? 'block' : 'none';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQzRDIiwiZmlsZSI6IlRhYmxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB0aHJvdHRsZSBmcm9tICdsb2Rhc2gvdGhyb3R0bGUnO1xuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSwgVUlFdmVudCwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBCRU1IZWxwZXIgZnJvbSAncmVhY3QtYmVtLWhlbHBlcic7XG5cbnR5cGUgU2Nyb2xsUG9zaXRpb24gPSAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJztcblxuY29uc3QgY2xhc3NlcyA9IEJFTUhlbHBlcignYy10YWJsZScpO1xuXG5jb25zdCBNQVJHSU4gPSA1O1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPzoge1xuICAgIF9faHRtbDogc3RyaW5nO1xuICB9O1xufVxuXG5pbnRlcmZhY2UgU3R5bGVkUHJvcHMge1xuICBzaG93OiBib29sZWFuO1xufVxuXG5jb25zdCBTY3JvbGxCb3JkZXIgPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gJHtzcGFjaW5nLm1lZGl1bWxhcmdlfSk7XG4gIHdpZHRoOiAzcHg7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJhY2tncm91bmQuZGFya307XG4gIGRpc3BsYXk6ICR7KHsgc2hvdyB9KSA9PiAoc2hvdyA/ICdibG9jaycgOiAnbm9uZScpfTtcbmA7XG5cbmNvbnN0IFJpZ2h0U2Nyb2xsQm9yZGVyID0gc3R5bGVkKFNjcm9sbEJvcmRlcilgXG4gIHJpZ2h0OiAwO1xuYDtcblxuY29uc3QgTGVmdFNjcm9sbEJvcmRlciA9IHN0eWxlZChTY3JvbGxCb3JkZXIpYFxuICBsZWZ0OiAwO1xuYDtcblxuY29uc3QgVGFibGUgPSAoeyBjaGlsZHJlbiwgaWQsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgW3Njcm9sbFBvc2l0aW9uLCBzZXRTY3JvbGxQb3NpdGlvbl0gPSB1c2VTdGF0ZTxTY3JvbGxQb3NpdGlvbiB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcbiAgY29uc3QgdGFibGVSZWYgPSB1c2VSZWY8SFRNTFRhYmxlRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3QgY2hlY2tTY3JvbGxQb3NpdGlvbiA9IHVzZUNhbGxiYWNrKChlbDogSFRNTFRhYmxlRWxlbWVudCkgPT4ge1xuICAgIGNvbnN0IHsgc2Nyb2xsTGVmdCwgb2Zmc2V0V2lkdGgsIHNjcm9sbFdpZHRoLCBjbGllbnRXaWR0aCB9ID0gZWw7XG4gICAgY29uc3QgaGFzU2Nyb2xsYmFyID0gc2Nyb2xsV2lkdGggPiBjbGllbnRXaWR0aDtcblxuICAgIGlmICghaGFzU2Nyb2xsYmFyKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbih1bmRlZmluZWQpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IGlzU3RhcnQgPSBzY3JvbGxMZWZ0IDw9IE1BUkdJTjtcbiAgICBjb25zdCBpc0VuZCA9IG9mZnNldFdpZHRoICsgc2Nyb2xsTGVmdCA+PSBzY3JvbGxXaWR0aCAtIE1BUkdJTjtcblxuICAgIGlmIChpc1N0YXJ0KSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignc3RhcnQnKTtcbiAgICB9IGVsc2UgaWYgKGlzRW5kKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignZW5kJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNldFNjcm9sbFBvc2l0aW9uKCdjZW50ZXInKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBvblNjcm9sbCA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIHRocm90dGxlKChldmVudDogVUlFdmVudDxIVE1MVGFibGVFbGVtZW50PikgPT4ge1xuICAgICAgICBjb25zdCBlbCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MVGFibGVFbGVtZW50IHwgdW5kZWZpbmVkO1xuICAgICAgICBpZiAoZWwpIHtcbiAgICAgICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICAgICAgfVxuICAgICAgfSwgMTAwKSxcbiAgICBbY2hlY2tTY3JvbGxQb3NpdGlvbl0sXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBlbCA9IHRhYmxlUmVmLmN1cnJlbnQ7XG4gICAgaWYgKGVsKSB7XG4gICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICB9XG4gIH0sIFtjaGVja1Njcm9sbFBvc2l0aW9uXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHsuLi5jbGFzc2VzKCd3cmFwcGVyJyl9PlxuICAgICAgPGRpdiB7Li4uY2xhc3NlcygnY29udGVudCcpfT5cbiAgICAgICAgPExlZnRTY3JvbGxCb3JkZXIgc2hvdz17c2Nyb2xsUG9zaXRpb24gPT09ICdlbmQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ30gey4uLmNsYXNzZXMoJ2xlZnQtc2hhZG93Jyl9IC8+XG4gICAgICAgIDx0YWJsZSByZWY9e3RhYmxlUmVmfSBpZD17aWR9IG9uU2Nyb2xsPXtvblNjcm9sbH0gey4uLmNsYXNzZXMoeyBleHRyYTogWydvLXRhYmxlJ10gfSl9IHsuLi5yZXN0fT5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvdGFibGU+XG4gICAgICAgIDxSaWdodFNjcm9sbEJvcmRlclxuICAgICAgICAgIHNob3c9e3Njcm9sbFBvc2l0aW9uID09PSAnc3RhcnQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ31cbiAgICAgICAgICB7Li4uY2xhc3NlcygncmlnaHQtc2hhZG93Jyl9XG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhYmxlO1xuIl19 */"));
+var RightScrollBorder = /*#__PURE__*/_styled(ScrollBorder, {
+  target: "e69565p1",
+  label: "RightScrollBorder"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1wf8jf",
+  styles: "right:0"
+} : {
+  name: "1wf8jf",
+  styles: "right:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QzhDIiwiZmlsZSI6IlRhYmxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB0aHJvdHRsZSBmcm9tICdsb2Rhc2gvdGhyb3R0bGUnO1xuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSwgVUlFdmVudCwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBCRU1IZWxwZXIgZnJvbSAncmVhY3QtYmVtLWhlbHBlcic7XG5cbnR5cGUgU2Nyb2xsUG9zaXRpb24gPSAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJztcblxuY29uc3QgY2xhc3NlcyA9IEJFTUhlbHBlcignYy10YWJsZScpO1xuXG5jb25zdCBNQVJHSU4gPSA1O1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPzoge1xuICAgIF9faHRtbDogc3RyaW5nO1xuICB9O1xufVxuXG5pbnRlcmZhY2UgU3R5bGVkUHJvcHMge1xuICBzaG93OiBib29sZWFuO1xufVxuXG5jb25zdCBTY3JvbGxCb3JkZXIgPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gJHtzcGFjaW5nLm1lZGl1bWxhcmdlfSk7XG4gIHdpZHRoOiAzcHg7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJhY2tncm91bmQuZGFya307XG4gIGRpc3BsYXk6ICR7KHsgc2hvdyB9KSA9PiAoc2hvdyA/ICdibG9jaycgOiAnbm9uZScpfTtcbmA7XG5cbmNvbnN0IFJpZ2h0U2Nyb2xsQm9yZGVyID0gc3R5bGVkKFNjcm9sbEJvcmRlcilgXG4gIHJpZ2h0OiAwO1xuYDtcblxuY29uc3QgTGVmdFNjcm9sbEJvcmRlciA9IHN0eWxlZChTY3JvbGxCb3JkZXIpYFxuICBsZWZ0OiAwO1xuYDtcblxuY29uc3QgVGFibGUgPSAoeyBjaGlsZHJlbiwgaWQsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgW3Njcm9sbFBvc2l0aW9uLCBzZXRTY3JvbGxQb3NpdGlvbl0gPSB1c2VTdGF0ZTxTY3JvbGxQb3NpdGlvbiB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcbiAgY29uc3QgdGFibGVSZWYgPSB1c2VSZWY8SFRNTFRhYmxlRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3QgY2hlY2tTY3JvbGxQb3NpdGlvbiA9IHVzZUNhbGxiYWNrKChlbDogSFRNTFRhYmxlRWxlbWVudCkgPT4ge1xuICAgIGNvbnN0IHsgc2Nyb2xsTGVmdCwgb2Zmc2V0V2lkdGgsIHNjcm9sbFdpZHRoLCBjbGllbnRXaWR0aCB9ID0gZWw7XG4gICAgY29uc3QgaGFzU2Nyb2xsYmFyID0gc2Nyb2xsV2lkdGggPiBjbGllbnRXaWR0aDtcblxuICAgIGlmICghaGFzU2Nyb2xsYmFyKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbih1bmRlZmluZWQpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IGlzU3RhcnQgPSBzY3JvbGxMZWZ0IDw9IE1BUkdJTjtcbiAgICBjb25zdCBpc0VuZCA9IG9mZnNldFdpZHRoICsgc2Nyb2xsTGVmdCA+PSBzY3JvbGxXaWR0aCAtIE1BUkdJTjtcblxuICAgIGlmIChpc1N0YXJ0KSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignc3RhcnQnKTtcbiAgICB9IGVsc2UgaWYgKGlzRW5kKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignZW5kJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNldFNjcm9sbFBvc2l0aW9uKCdjZW50ZXInKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBvblNjcm9sbCA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIHRocm90dGxlKChldmVudDogVUlFdmVudDxIVE1MVGFibGVFbGVtZW50PikgPT4ge1xuICAgICAgICBjb25zdCBlbCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MVGFibGVFbGVtZW50IHwgdW5kZWZpbmVkO1xuICAgICAgICBpZiAoZWwpIHtcbiAgICAgICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICAgICAgfVxuICAgICAgfSwgMTAwKSxcbiAgICBbY2hlY2tTY3JvbGxQb3NpdGlvbl0sXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBlbCA9IHRhYmxlUmVmLmN1cnJlbnQ7XG4gICAgaWYgKGVsKSB7XG4gICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICB9XG4gIH0sIFtjaGVja1Njcm9sbFBvc2l0aW9uXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHsuLi5jbGFzc2VzKCd3cmFwcGVyJyl9PlxuICAgICAgPGRpdiB7Li4uY2xhc3NlcygnY29udGVudCcpfT5cbiAgICAgICAgPExlZnRTY3JvbGxCb3JkZXIgc2hvdz17c2Nyb2xsUG9zaXRpb24gPT09ICdlbmQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ30gey4uLmNsYXNzZXMoJ2xlZnQtc2hhZG93Jyl9IC8+XG4gICAgICAgIDx0YWJsZSByZWY9e3RhYmxlUmVmfSBpZD17aWR9IG9uU2Nyb2xsPXtvblNjcm9sbH0gey4uLmNsYXNzZXMoeyBleHRyYTogWydvLXRhYmxlJ10gfSl9IHsuLi5yZXN0fT5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvdGFibGU+XG4gICAgICAgIDxSaWdodFNjcm9sbEJvcmRlclxuICAgICAgICAgIHNob3c9e3Njcm9sbFBvc2l0aW9uID09PSAnc3RhcnQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ31cbiAgICAgICAgICB7Li4uY2xhc3NlcygncmlnaHQtc2hhZG93Jyl9XG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhYmxlO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var LeftScrollBorder = /*#__PURE__*/_styled(ScrollBorder, {
+  target: "e69565p0",
+  label: "LeftScrollBorder"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ode3cm",
+  styles: "left:0"
+} : {
+  name: "1ode3cm",
+  styles: "left:0",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QzZDIiwiZmlsZSI6IlRhYmxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB0aHJvdHRsZSBmcm9tICdsb2Rhc2gvdGhyb3R0bGUnO1xuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSwgVUlFdmVudCwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBCRU1IZWxwZXIgZnJvbSAncmVhY3QtYmVtLWhlbHBlcic7XG5cbnR5cGUgU2Nyb2xsUG9zaXRpb24gPSAnc3RhcnQnIHwgJ2VuZCcgfCAnY2VudGVyJztcblxuY29uc3QgY2xhc3NlcyA9IEJFTUhlbHBlcignYy10YWJsZScpO1xuXG5jb25zdCBNQVJHSU4gPSA1O1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBpZD86IHN0cmluZztcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIGRhbmdlcm91c2x5U2V0SW5uZXJIVE1MPzoge1xuICAgIF9faHRtbDogc3RyaW5nO1xuICB9O1xufVxuXG5pbnRlcmZhY2UgU3R5bGVkUHJvcHMge1xuICBzaG93OiBib29sZWFuO1xufVxuXG5jb25zdCBTY3JvbGxCb3JkZXIgPSBzdHlsZWQuZGl2PFN0eWxlZFByb3BzPmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gJHtzcGFjaW5nLm1lZGl1bWxhcmdlfSk7XG4gIHdpZHRoOiAzcHg7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJhY2tncm91bmQuZGFya307XG4gIGRpc3BsYXk6ICR7KHsgc2hvdyB9KSA9PiAoc2hvdyA/ICdibG9jaycgOiAnbm9uZScpfTtcbmA7XG5cbmNvbnN0IFJpZ2h0U2Nyb2xsQm9yZGVyID0gc3R5bGVkKFNjcm9sbEJvcmRlcilgXG4gIHJpZ2h0OiAwO1xuYDtcblxuY29uc3QgTGVmdFNjcm9sbEJvcmRlciA9IHN0eWxlZChTY3JvbGxCb3JkZXIpYFxuICBsZWZ0OiAwO1xuYDtcblxuY29uc3QgVGFibGUgPSAoeyBjaGlsZHJlbiwgaWQsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgW3Njcm9sbFBvc2l0aW9uLCBzZXRTY3JvbGxQb3NpdGlvbl0gPSB1c2VTdGF0ZTxTY3JvbGxQb3NpdGlvbiB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcbiAgY29uc3QgdGFibGVSZWYgPSB1c2VSZWY8SFRNTFRhYmxlRWxlbWVudD4obnVsbCk7XG5cbiAgY29uc3QgY2hlY2tTY3JvbGxQb3NpdGlvbiA9IHVzZUNhbGxiYWNrKChlbDogSFRNTFRhYmxlRWxlbWVudCkgPT4ge1xuICAgIGNvbnN0IHsgc2Nyb2xsTGVmdCwgb2Zmc2V0V2lkdGgsIHNjcm9sbFdpZHRoLCBjbGllbnRXaWR0aCB9ID0gZWw7XG4gICAgY29uc3QgaGFzU2Nyb2xsYmFyID0gc2Nyb2xsV2lkdGggPiBjbGllbnRXaWR0aDtcblxuICAgIGlmICghaGFzU2Nyb2xsYmFyKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbih1bmRlZmluZWQpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IGlzU3RhcnQgPSBzY3JvbGxMZWZ0IDw9IE1BUkdJTjtcbiAgICBjb25zdCBpc0VuZCA9IG9mZnNldFdpZHRoICsgc2Nyb2xsTGVmdCA+PSBzY3JvbGxXaWR0aCAtIE1BUkdJTjtcblxuICAgIGlmIChpc1N0YXJ0KSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignc3RhcnQnKTtcbiAgICB9IGVsc2UgaWYgKGlzRW5kKSB7XG4gICAgICBzZXRTY3JvbGxQb3NpdGlvbignZW5kJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHNldFNjcm9sbFBvc2l0aW9uKCdjZW50ZXInKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBvblNjcm9sbCA9IHVzZU1lbW8oXG4gICAgKCkgPT5cbiAgICAgIHRocm90dGxlKChldmVudDogVUlFdmVudDxIVE1MVGFibGVFbGVtZW50PikgPT4ge1xuICAgICAgICBjb25zdCBlbCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MVGFibGVFbGVtZW50IHwgdW5kZWZpbmVkO1xuICAgICAgICBpZiAoZWwpIHtcbiAgICAgICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICAgICAgfVxuICAgICAgfSwgMTAwKSxcbiAgICBbY2hlY2tTY3JvbGxQb3NpdGlvbl0sXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBlbCA9IHRhYmxlUmVmLmN1cnJlbnQ7XG4gICAgaWYgKGVsKSB7XG4gICAgICBjaGVja1Njcm9sbFBvc2l0aW9uKGVsKTtcbiAgICB9XG4gIH0sIFtjaGVja1Njcm9sbFBvc2l0aW9uXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHsuLi5jbGFzc2VzKCd3cmFwcGVyJyl9PlxuICAgICAgPGRpdiB7Li4uY2xhc3NlcygnY29udGVudCcpfT5cbiAgICAgICAgPExlZnRTY3JvbGxCb3JkZXIgc2hvdz17c2Nyb2xsUG9zaXRpb24gPT09ICdlbmQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ30gey4uLmNsYXNzZXMoJ2xlZnQtc2hhZG93Jyl9IC8+XG4gICAgICAgIDx0YWJsZSByZWY9e3RhYmxlUmVmfSBpZD17aWR9IG9uU2Nyb2xsPXtvblNjcm9sbH0gey4uLmNsYXNzZXMoeyBleHRyYTogWydvLXRhYmxlJ10gfSl9IHsuLi5yZXN0fT5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvdGFibGU+XG4gICAgICAgIDxSaWdodFNjcm9sbEJvcmRlclxuICAgICAgICAgIHNob3c9e3Njcm9sbFBvc2l0aW9uID09PSAnc3RhcnQnIHx8IHNjcm9sbFBvc2l0aW9uID09PSAnY2VudGVyJ31cbiAgICAgICAgICB7Li4uY2xhc3NlcygncmlnaHQtc2hhZG93Jyl9XG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRhYmxlO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var Table = function Table(_ref2) {
+  var children = _ref2.children,
+    id = _ref2.id,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollPosition = _useState2[0],
+    setScrollPosition = _useState2[1];
+  var tableRef = useRef(null);
+  var checkScrollPosition = useCallback(function (el) {
+    var scrollLeft = el.scrollLeft,
+      offsetWidth = el.offsetWidth,
+      scrollWidth = el.scrollWidth,
+      clientWidth = el.clientWidth;
+    var hasScrollbar = scrollWidth > clientWidth;
+    if (!hasScrollbar) {
+      setScrollPosition(undefined);
+      return;
+    }
+    var isStart = scrollLeft <= MARGIN;
+    var isEnd = offsetWidth + scrollLeft >= scrollWidth - MARGIN;
+    if (isStart) {
+      setScrollPosition('start');
+    } else if (isEnd) {
+      setScrollPosition('end');
+    } else {
+      setScrollPosition('center');
+    }
+  }, []);
+  var onScroll = useMemo(function () {
+    return throttle(function (event) {
+      var el = event.target;
+      if (el) {
+        checkScrollPosition(el);
+      }
+    }, 100);
+  }, [checkScrollPosition]);
+  useEffect(function () {
+    var el = tableRef.current;
+    if (el) {
+      checkScrollPosition(el);
+    }
+  }, [checkScrollPosition]);
   return _jsx("div", _objectSpread(_objectSpread({}, classes('wrapper')), {}, {
     children: _jsxs("div", _objectSpread(_objectSpread({}, classes('content')), {}, {
-      children: [_jsx("div", _objectSpread({}, classes('left-shadow'))), _jsx("table", _objectSpread(_objectSpread(_objectSpread({
-        id: id
+      children: [_jsx(LeftScrollBorder, _objectSpread({
+        show: scrollPosition === 'end' || scrollPosition === 'center'
+      }, classes('left-shadow'))), _jsx("table", _objectSpread(_objectSpread(_objectSpread({
+        ref: tableRef,
+        id: id,
+        onScroll: onScroll
       }, classes({
         extra: ['o-table']
       })), rest), {}, {
         children: children
-      })), _jsx("div", _objectSpread({}, classes('right-shadow')))]
+      })), _jsx(RightScrollBorder, _objectSpread({
+        show: scrollPosition === 'start' || scrollPosition === 'center'
+      }, classes('right-shadow')))]
     }))
   }));
 };