@digigov/ui 0.21.2 → 0.21.3

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Thu, 23 Jun 2022 11:49:45 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Jun 2022 10:08:07 GMT and should not be manually modified.
+
+## 0.21.3
+Mon, 27 Jun 2022 10:08:07 GMT
+
+### Patches
+
+- Add support for floating Table scroll in Table and Dropdown components
 
 ## 0.21.2
 Thu, 23 Jun 2022 11:49:45 GMT

package/admin/Dropdown/index.d.ts

@@ -7,9 +7,15 @@ export interface DropdownProps extends CoreDropdownProps {
      * Use closeBehaviour to set the way that the Dropdown will close.
      */
     closeBehaviour?: 'clickButton' | 'clickOutside';
+    /**
+     * Use float dropdown to set the dropdown to float over
+     * scroll bars and stay on a static position.
+     * This is mainly used to show actions in a long table.
+     */
+    float?: boolean;
 }
 /**
  * Dropdown component is used for showing more options with a button.
  */
-export declare const Dropdown: ({ closeBehaviour, ...props }: DropdownProps) => React.ReactElement;
+export declare const Dropdown: ({ closeBehaviour, float, ...props }: DropdownProps) => React.ReactElement;
 export default Dropdown;

package/admin/Dropdown/index.js

@@ -47,7 +47,7 @@ Object.keys(_DropdownContent).forEach(function (key) {
     }
   });
 });
-var _excluded = ["closeBehaviour"];
+var _excluded = ["closeBehaviour", "float"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,7 +59,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Dropdown = function Dropdown(_ref) {
   var _ref$closeBehaviour = _ref.closeBehaviour,
       closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      _ref$float = _ref["float"],
+      _float = _ref$float === void 0 ? false : _ref$float,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
   var innerRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -72,10 +75,35 @@ var Dropdown = function Dropdown(_ref) {
       document.addEventListener('click', handleClickOutside, true);
     }
 
+    var toggleFloat = function toggleFloat() {
+      if (innerRef.current.open) {
+        var rect = innerRef.current.getBoundingClientRect();
+        innerRef.current.style.position = 'static';
+        var top = rect.top + window.pageYOffset;
+        var left = rect.left + window.pageXOffset;
+        innerRef.current.style.top = "".concat(top, "px");
+        innerRef.current.style.left = "".concat(left, "px");
+        innerRef.current.style.position = "absolute";
+        innerRef.current.style.display = "block";
+      } else {
+        innerRef.current.style.top = "0";
+        innerRef.current.style.left = "0";
+        innerRef.current.style.position = "relative";
+      }
+    };
+
+    if (_float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+
     return function () {
       if (closeBehaviour === 'clickOutside') {
         document.removeEventListener('click', handleClickOutside, true);
       }
+
+      if (_float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
     };
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore

package/admin/Pagination/__stories__/Default.js

@@ -103,9 +103,9 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   visible: true,
   size: "l"
 }), /*#__PURE__*/_react["default"].createElement(_Pagination["default"], null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 1,
+  end: 10,
+  total: 15
 }), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
@@ -114,7 +114,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
   variant: "dots"
 }), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "/page7"
-}, "7")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
+}, "2")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
   currentPage: true
 }, "8"), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
   href: "/page9"
@@ -127,6 +127,23 @@ var _ref = /*#__PURE__*/_react["default"].createElement("div", {
 }))))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
   visible: true,
   size: "l"
+}), /*#__PURE__*/_react["default"].createElement(_Pagination["default"], null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
+  start: 1,
+  end: 10,
+  total: 15
+}), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+  direction: "left"
+}))), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
+  currentPage: true
+}, "1"), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  href: "/page7"
+}, "2")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+  direction: "right"
+}))))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
+  visible: true,
+  size: "l"
 }));
 
 var Default = function Default() {

package/core/Table/TableFloatingScroll.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function TableFloatingScroll(props: any): JSX.Element;
+export default TableFloatingScroll;

package/core/Table/TableFloatingScroll.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableFloatingScroll = TableFloatingScroll;
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function TableFloatingScroll(props) {
+  var ref = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+  var scrollBlockRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      containerWidth = _useState4[0],
+      setContainerWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)('relative'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    var _ref$current;
+
+    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild; // @ts-ignore
+
+    setContainerWidth(ref.current.offsetWidth);
+    setWidth(contentRef.current.scrollWidth);
+    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+
+    function onBodyScroll() {
+      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+
+      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed'); // @ts-ignore
+      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+        setPosition('relative');
+      }
+    }
+
+    function onBlockScroll() {
+      // @ts-ignore
+      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+    } // @ts-ignore
+
+
+    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    document.addEventListener('scroll', onBodyScroll);
+    window.addEventListener('resize', function () {
+      // @ts-ignore
+      setContainerWidth(ref.current.offsetWidth); // @ts-ignore
+
+      setWidth(contentRef.current.scrollWidth);
+    });
+    return function () {
+      // @ts-ignore
+      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    style: {
+      maxWidth: '100%',
+      overflowX: 'scroll'
+    }
+  }, props.children), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      overflow: 'auto',
+      height: '35px',
+      marginTop: '-35px',
+      position: position,
+      maxWidth: "".concat(containerWidth, "px"),
+      bottom: 0
+    },
+    ref: scrollBlockRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: "".concat(width, "px"),
+      overflow: 'hidden'
+    }
+  })));
+}
+
+var _default = TableFloatingScroll;
+exports["default"] = _default;

package/core/Table/index.d.ts

@@ -7,3 +7,4 @@ export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
 export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';

package/core/Table/index.js

@@ -119,4 +119,17 @@ Object.keys(_TableNoDataRow).forEach(function (key) {
       return _TableNoDataRow[key];
     }
   });
+});
+
+var _TableFloatingScroll = require("@digigov/ui/core/Table/TableFloatingScroll");
+
+Object.keys(_TableFloatingScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableFloatingScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TableFloatingScroll[key];
+    }
+  });
 });

package/es/admin/Dropdown/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["closeBehaviour"];
+var _excluded = ["closeBehaviour", "float"];
 import React, { useEffect, useRef } from 'react';
 import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
 export * from '@digigov/react-extensions/admin/DropdownButton';
@@ -12,6 +12,8 @@ export * from '@digigov/react-extensions/admin/DropdownContent';
 export var Dropdown = function Dropdown(_ref) {
   var _ref$closeBehaviour = _ref.closeBehaviour,
       closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      _ref$float = _ref["float"],
+      _float = _ref$float === void 0 ? false : _ref$float,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var innerRef = useRef();
@@ -26,10 +28,35 @@ export var Dropdown = function Dropdown(_ref) {
       document.addEventListener('click', handleClickOutside, true);
     }
 
+    var toggleFloat = function toggleFloat() {
+      if (innerRef.current.open) {
+        var rect = innerRef.current.getBoundingClientRect();
+        innerRef.current.style.position = 'static';
+        var top = rect.top + window.pageYOffset;
+        var left = rect.left + window.pageXOffset;
+        innerRef.current.style.top = "".concat(top, "px");
+        innerRef.current.style.left = "".concat(left, "px");
+        innerRef.current.style.position = "absolute";
+        innerRef.current.style.display = "block";
+      } else {
+        innerRef.current.style.top = "0";
+        innerRef.current.style.left = "0";
+        innerRef.current.style.position = "relative";
+      }
+    };
+
+    if (_float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+
     return function () {
       if (closeBehaviour === 'clickOutside') {
         document.removeEventListener('click', handleClickOutside, true);
       }
+
+      if (_float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
     };
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore

package/es/admin/Pagination/__stories__/Default.js

@@ -84,9 +84,9 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   visible: true,
   size: "l"
 }), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 1,
+  end: 10,
+  total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -95,7 +95,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   variant: "dots"
 }), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "/page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, {
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "/page9"
@@ -108,6 +108,23 @@ var _ref = /*#__PURE__*/React.createElement("div", {
 }))))), /*#__PURE__*/React.createElement(Divider, {
   visible: true,
   size: "l"
+}), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 1,
+  end: 10,
+  total: 15
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}))), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
 }));
 
 export var Default = function Default() {

package/es/core/Table/TableFloatingScroll.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+export function TableFloatingScroll(props) {
+  var ref = useRef(null);
+  var contentRef = useRef(null);
+  var scrollBlockRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerWidth = _useState4[0],
+      setContainerWidth = _useState4[1];
+
+  var _useState5 = useState('relative'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  useEffect(function () {
+    var _ref$current;
+
+    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild; // @ts-ignore
+
+    setContainerWidth(ref.current.offsetWidth);
+    setWidth(contentRef.current.scrollWidth);
+    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+
+    function onBodyScroll() {
+      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+
+      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed'); // @ts-ignore
+      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+        setPosition('relative');
+      }
+    }
+
+    function onBlockScroll() {
+      // @ts-ignore
+      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+    } // @ts-ignore
+
+
+    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    document.addEventListener('scroll', onBodyScroll);
+    window.addEventListener('resize', function () {
+      // @ts-ignore
+      setContainerWidth(ref.current.offsetWidth); // @ts-ignore
+
+      setWidth(contentRef.current.scrollWidth);
+    });
+    return function () {
+      // @ts-ignore
+      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      maxWidth: '100%',
+      overflowX: 'scroll'
+    }
+  }, props.children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'auto',
+      height: '35px',
+      marginTop: '-35px',
+      position: position,
+      maxWidth: "".concat(containerWidth, "px"),
+      bottom: 0
+    },
+    ref: scrollBlockRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(width, "px"),
+      overflow: 'hidden'
+    }
+  })));
+}
+export default TableFloatingScroll;

package/es/core/Table/index.js

@@ -6,4 +6,5 @@ export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
-export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';

package/esm/admin/Dropdown/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["closeBehaviour"];
+var _excluded = ["closeBehaviour", "float"];
 import React, { useEffect, useRef } from 'react';
 import CoreDropdown from '@digigov/react-extensions/admin/Dropdown';
 export * from '@digigov/react-extensions/admin/DropdownButton';
@@ -12,6 +12,8 @@ export * from '@digigov/react-extensions/admin/DropdownContent';
 export var Dropdown = function Dropdown(_ref) {
   var _ref$closeBehaviour = _ref.closeBehaviour,
       closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
+      _ref$float = _ref["float"],
+      _float = _ref$float === void 0 ? false : _ref$float,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var innerRef = useRef();
@@ -26,10 +28,35 @@ export var Dropdown = function Dropdown(_ref) {
       document.addEventListener('click', handleClickOutside, true);
     }
 
+    var toggleFloat = function toggleFloat() {
+      if (innerRef.current.open) {
+        var rect = innerRef.current.getBoundingClientRect();
+        innerRef.current.style.position = 'static';
+        var top = rect.top + window.pageYOffset;
+        var left = rect.left + window.pageXOffset;
+        innerRef.current.style.top = "".concat(top, "px");
+        innerRef.current.style.left = "".concat(left, "px");
+        innerRef.current.style.position = "absolute";
+        innerRef.current.style.display = "block";
+      } else {
+        innerRef.current.style.top = "0";
+        innerRef.current.style.left = "0";
+        innerRef.current.style.position = "relative";
+      }
+    };
+
+    if (_float) {
+      innerRef.current.addEventListener('toggle', toggleFloat);
+    }
+
     return function () {
       if (closeBehaviour === 'clickOutside') {
         document.removeEventListener('click', handleClickOutside, true);
       }
+
+      if (_float) {
+        innerRef.current.removeEventListener('toggle', toggleFloat);
+      }
     };
   }, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore

package/esm/admin/Pagination/__stories__/Default.js

@@ -84,9 +84,9 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   visible: true,
   size: "l"
 }), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 1,
+  end: 10,
+  total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -95,7 +95,7 @@ var _ref = /*#__PURE__*/React.createElement("div", {
   variant: "dots"
 }), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "/page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, {
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "/page9"
@@ -108,6 +108,23 @@ var _ref = /*#__PURE__*/React.createElement("div", {
 }))))), /*#__PURE__*/React.createElement(Divider, {
   visible: true,
   size: "l"
+}), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 1,
+  end: 10,
+  total: 15
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}))), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
 }));
 
 export var Default = function Default() {

package/esm/core/Table/TableFloatingScroll.js

@@ -0,0 +1,85 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+export function TableFloatingScroll(props) {
+  var ref = useRef(null);
+  var contentRef = useRef(null);
+  var scrollBlockRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerWidth = _useState4[0],
+      setContainerWidth = _useState4[1];
+
+  var _useState5 = useState('relative'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  useEffect(function () {
+    var _ref$current;
+
+    contentRef.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstChild; // @ts-ignore
+
+    setContainerWidth(ref.current.offsetWidth);
+    setWidth(contentRef.current.scrollWidth);
+    var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
+
+    function onBodyScroll() {
+      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+
+      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed'); // @ts-ignore
+      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+        setPosition('relative');
+      }
+    }
+
+    function onBlockScroll() {
+      // @ts-ignore
+      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+    } // @ts-ignore
+
+
+    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    document.addEventListener('scroll', onBodyScroll);
+    window.addEventListener('resize', function () {
+      // @ts-ignore
+      setContainerWidth(ref.current.offsetWidth); // @ts-ignore
+
+      setWidth(contentRef.current.scrollWidth);
+    });
+    return function () {
+      // @ts-ignore
+      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      maxWidth: '100%',
+      overflowX: 'scroll'
+    }
+  }, props.children), /*#__PURE__*/React.createElement("div", {
+    style: {
+      overflow: 'auto',
+      height: '35px',
+      marginTop: '-35px',
+      position: position,
+      maxWidth: "".concat(containerWidth, "px"),
+      bottom: 0
+    },
+    ref: scrollBlockRef
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(width, "px"),
+      overflow: 'hidden'
+    }
+  })));
+}
+export default TableFloatingScroll;

package/esm/core/Table/index.js

@@ -6,4 +6,5 @@ export * from '@digigov/react-core/TableDataCell';
 export * from '@digigov/react-core/TableHead';
 export * from '@digigov/react-core/TableHeadCell';
 export * from '@digigov/react-core/TableRow';
-export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/react-core/TableNoDataRow';
+export * from '@digigov/ui/core/Table/TableFloatingScroll';

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.21.2
+/** @license Digigov v0.21.3
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.21.2",
+  "version": "0.21.3",
   "description": "@digigov reusable components toolkit",
   "module": "./esm/index.js",
   "publishConfig": {
@@ -19,7 +19,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "@digigov/react-core": "0.15.1",
-    "@digigov/react-extensions": "0.15.1"
+    "@digigov/react-extensions": "0.15.2"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,