intergalactic 15.38.0-prerelease-46329ccd

package/scroll-area/lib/es6/ScrollBar.js

@@ -0,0 +1,386 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from 'intergalactic/core';
+import { assignProps as _assignProps2 } from 'intergalactic/core';
+import { assignProps as _assignProps } from 'intergalactic/core';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import createComponent, { Component, sstyled, Root } from 'intergalactic/core';
+import { Box } from 'intergalactic/flex-box';
+import { getNodeByRef } from 'intergalactic/utils/lib/ref';
+/*__reshadow-styles__:"./style/scroll-bar.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SScrollBar_1lsat_gg_{position:absolute;display:flex}.___SScrollBar_1lsat_gg_._orientation_vertical_1lsat_gg_{top:var(--intergalactic-spacing-1x, 4px);right:0;width:8px;height:calc(100% - var(--intergalactic-spacing-2x, 8px));justify-content:center}.___SScrollBar_1lsat_gg_._orientation_horizontal_1lsat_gg_{bottom:0;left:var(--intergalactic-spacing-1x, 4px);height:12px;width:calc(100% - var(--intergalactic-spacing-2x, 8px));align-items:center}.___SSlider_1lsat_gg_{cursor:pointer;width:6px;height:6px;border-radius:4px;background-color:var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3))}" /*__inner_css_end__*/, "1lsat_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollBar": "___SScrollBar_1lsat_gg_",
+  "_orientation_vertical": "_orientation_vertical_1lsat_gg_",
+  "_orientation_horizontal": "_orientation_horizontal_1lsat_gg_",
+  "__SSlider": "___SSlider_1lsat_gg_"
+});
+export var DEFAULT_SLIDER_SIZE = 50;
+
+// updating DOM directly to avoid react dom rerendering and reconciliation
+var setAriaValues = function setAriaValues($container, $horizontalBar, $verticalBar) {
+  if (!$container || !($horizontalBar || $verticalBar)) return;
+  var scrollWidth = $container.scrollWidth,
+    clientWidth = $container.clientWidth,
+    scrollHeight = $container.scrollHeight,
+    clientHeight = $container.clientHeight,
+    scrollLeft = $container.scrollLeft,
+    scrollTop = $container.scrollTop;
+  var maxScrollRight = scrollWidth - clientWidth;
+  var maxScrollBottom = scrollHeight - clientHeight;
+  if ($horizontalBar) {
+    $horizontalBar.setAttribute('aria-valuenow', Math.floor(scrollLeft));
+    $horizontalBar.setAttribute('aria-valuemax', maxScrollRight);
+  }
+  if ($verticalBar) {
+    $verticalBar.setAttribute('aria-valuenow', Math.floor(scrollTop));
+    $verticalBar.setAttribute('aria-valuemax', maxScrollBottom);
+  }
+};
+var ScrollBarRoot = /*#__PURE__*/function (_Component) {
+  _inherits(ScrollBarRoot, _Component);
+  var _super = _createSuper(ScrollBarRoot);
+  function ScrollBarRoot() {
+    var _this;
+    _classCallCheck(this, ScrollBarRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "$bar", null);
+    _defineProperty(_assertThisInitialized(_this), "$slider", null);
+    _defineProperty(_assertThisInitialized(_this), "sliderStyle", {
+      width: DEFAULT_SLIDER_SIZE,
+      height: DEFAULT_SLIDER_SIZE
+    });
+    _defineProperty(_assertThisInitialized(_this), "kefScroll", {
+      x: 0,
+      y: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "kefBar", {
+      x: 0,
+      y: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "_scroll", {
+      left: 0,
+      top: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "_mouse", {
+      pageX: 0,
+      pageY: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      visibleScroll: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "refBar", function (node) {
+      var domNode = findDOMNode(node);
+      _this.$bar = domNode;
+      var orientation = _this.getOrientation();
+      var _this$asProps = _this.asProps,
+        horizontalBarRef = _this$asProps.horizontalBarRef,
+        verticalBarRef = _this$asProps.verticalBarRef;
+      if (orientation === 'horizontal' && horizontalBarRef) horizontalBarRef.current = domNode;
+      if (orientation === 'vertical' && verticalBarRef) verticalBarRef.current = domNode;
+      setAriaValues(_this.$container, horizontalBarRef === null || horizontalBarRef === void 0 ? void 0 : horizontalBarRef.current, verticalBarRef === null || verticalBarRef === void 0 ? void 0 : verticalBarRef.current);
+    });
+    _defineProperty(_assertThisInitialized(_this), "refSlider", function (node) {
+      _this.$slider = findDOMNode(node);
+    });
+    _defineProperty(_assertThisInitialized(_this), "calculate", function () {
+      if (!_this.$container) return;
+      var visibleScroll = _this.calculateVisibleScroll();
+      _this.setState({
+        visibleScroll: visibleScroll
+      }, function () {
+        if (!_this.$container || !_this.$bar || !_this.$slider) return;
+        var orientation = _this.getOrientation();
+        _this.sliderStyle = _this.calculateSliderStyle();
+        _this.kefBar = _this.calculateKefBar();
+        _this.kefScroll = _this.calculateKefScroll();
+        if (orientation === 'horizontal') {
+          _this.$slider.style.width = "".concat(_this.sliderStyle.width, "px");
+        } else if (orientation === 'vertical') {
+          _this.$slider.style.height = "".concat(_this.sliderStyle.height, "px");
+        }
+        _this.handleScroll();
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", function () {
+      if (!_this.$container || !_this.$slider) return;
+      var _this$$container = _this.$container,
+        scrollTop = _this$$container.scrollTop,
+        scrollLeft = _this$$container.scrollLeft;
+      var orientation = _this.getOrientation();
+      if (orientation === 'horizontal') {
+        _this.$slider.style.transform = "translateX(".concat(scrollLeft * _this.kefScroll.x, "px)");
+      } else if (orientation === 'vertical') {
+        _this.$slider.style.transform = "translateY(".concat(scrollTop * _this.kefScroll.y, "px)");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSelectStartDocument", function (e) {
+      return e.preventDefault();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMoveDocument", function (e) {
+      var pageX = e.pageX,
+        pageY = e.pageY;
+      var _this$_scroll = _this._scroll,
+        left = _this$_scroll.left,
+        top = _this$_scroll.top;
+      var _this$kefScroll = _this.kefScroll,
+        x = _this$kefScroll.x,
+        y = _this$kefScroll.y;
+      var orientation = _this.getOrientation();
+      if (orientation === 'horizontal') {
+        _this.$container.scrollLeft = _this.calculateScrollByDiff(pageX, _this._mouse.pageX, left, x);
+      } else if (orientation === 'vertical') {
+        _this.$container.scrollTop = _this.calculateScrollByDiff(pageY, _this._mouse.pageY, top, y);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUpDocument", function () {
+      document.removeEventListener('mousemove', _this.handleMouseMoveDocument, true);
+      document.removeEventListener('mouseup', _this.handleMouseUpDocument, true);
+      document.removeEventListener('selectstart', _this.handleSelectStartDocument, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDownSlider", function (e) {
+      // canceling the emergence of a real scroll
+      e.stopPropagation();
+      // save mouse coordinates (relative to the page)
+      _this._mouse = {
+        pageX: e.pageX,
+        pageY: e.pageY
+      };
+      // save the scroll of the container
+      // TODO: what happens if the content increases while we scroll?
+      var _this$$container2 = _this.$container,
+        scrollLeft = _this$$container2.scrollLeft,
+        scrollTop = _this$$container2.scrollTop;
+      _this._scroll = {
+        left: scrollLeft,
+        top: scrollTop
+      };
+      document.addEventListener('mousemove', _this.handleMouseMoveDocument, true);
+      document.addEventListener('mouseup', _this.handleMouseUpDocument, true);
+      document.addEventListener('selectstart', _this.handleSelectStartDocument, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDownBar", function (e) {
+      // cancellation of the ascent as in a real scroll
+      e.stopPropagation();
+      var pageX = e.pageX,
+        pageY = e.pageY;
+      var _window = window,
+        pageXOffset = _window.pageXOffset,
+        pageYOffset = _window.pageYOffset;
+      var _this$$bar$getBoundin = _this.$bar.getBoundingClientRect(),
+        left = _this$$bar$getBoundin.left,
+        top = _this$$bar$getBoundin.top;
+      var orientation = _this.getOrientation();
+      if (orientation === 'horizontal') {
+        _this.$container.scrollLeft = _this.calculateScrollByClick(left, pageXOffset, pageX, _this.kefBar.x, _this.kefScroll.x);
+      } else if (orientation === 'vertical') {
+        _this.$container.scrollTop = _this.calculateScrollByClick(top, pageYOffset, pageY, _this.kefBar.y, _this.kefScroll.y);
+      }
+    });
+    return _this;
+  }
+  _createClass(ScrollBarRoot, [{
+    key: "$container",
+    get: function get() {
+      return getNodeByRef(this.asProps.container);
+    }
+  }, {
+    key: "calculateVisibleScroll",
+    value: function calculateVisibleScroll() {
+      var orientation = this.getOrientation();
+      var _this$calculateOrient = this.calculateOrientation(),
+        _this$calculateOrient2 = _slicedToArray(_this$calculateOrient, 2),
+        horizontal = _this$calculateOrient2[0],
+        vertical = _this$calculateOrient2[1];
+      if (horizontal && orientation === 'horizontal') {
+        return true;
+      } else if (vertical && orientation === 'vertical') {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "calculateKefScroll",
+    value: function calculateKefScroll() {
+      var _this$$container3 = this.$container,
+        clientWidth = _this$$container3.clientWidth,
+        clientHeight = _this$$container3.clientHeight,
+        scrollWidth = _this$$container3.scrollWidth,
+        scrollHeight = _this$$container3.scrollHeight;
+      var _this$$bar = this.$bar,
+        clientWidthBar = _this$$bar.clientWidth,
+        clientHeightBar = _this$$bar.clientHeight;
+      var _this$sliderStyle = this.sliderStyle,
+        width = _this$sliderStyle.width,
+        height = _this$sliderStyle.height;
+      return {
+        x: (clientWidthBar - width) / (scrollWidth - clientWidth),
+        y: (clientHeightBar - height) / (scrollHeight - clientHeight)
+      };
+    }
+  }, {
+    key: "calculateKefBar",
+    value: function calculateKefBar() {
+      var _this$$bar2 = this.$bar,
+        clientWidth = _this$$bar2.clientWidth,
+        clientHeight = _this$$bar2.clientHeight;
+      var _this$sliderStyle2 = this.sliderStyle,
+        width = _this$sliderStyle2.width,
+        height = _this$sliderStyle2.height;
+      return {
+        x: (clientWidth - width) / clientWidth,
+        y: (clientHeight - height) / clientHeight
+      };
+    }
+  }, {
+    key: "calculateSliderStyle",
+    value: function calculateSliderStyle() {
+      var _this$$bar3 = this.$bar,
+        clientWidth = _this$$bar3.clientWidth,
+        clientHeight = _this$$bar3.clientHeight;
+      var _this$$container4 = this.$container,
+        scrollWidth = _this$$container4.scrollWidth,
+        scrollHeight = _this$$container4.scrollHeight;
+      var calculateDimensions = function calculateDimensions(visibleSize, totalSize) {
+        var ratio = Math.min(visibleSize / totalSize, 1); // percentage of visible area
+        return Math.round(visibleSize * ratio);
+      };
+      return {
+        width: Math.max(calculateDimensions(clientWidth, scrollWidth), DEFAULT_SLIDER_SIZE),
+        height: Math.max(calculateDimensions(clientHeight, scrollHeight), DEFAULT_SLIDER_SIZE)
+      };
+    }
+  }, {
+    key: "calculateScrollByClick",
+    value: function calculateScrollByClick(position, windowOffset, mouseOffset, kefBar, kefScroll) {
+      // bar coordinates relative to the page
+      var barPage = position + windowOffset;
+
+      // click coordinates - bar coordinates * proportion
+      var scroll = (mouseOffset - barPage) * kefBar;
+      return scroll / kefScroll;
+    }
+  }, {
+    key: "calculateScrollByDiff",
+    value: function calculateScrollByDiff(mouseOffset, oldMouseOffset, oldScroll, kefScroll) {
+      // mouse offset (new coordinates - old coordinates)
+      var offsetMouse = mouseOffset - oldMouseOffset;
+
+      // old scroll position * scroll ratio + offset
+      var scroll = oldScroll * kefScroll + offsetMouse;
+      return scroll / kefScroll;
+    }
+  }, {
+    key: "calculateOrientation",
+    value: function calculateOrientation() {
+      if (!this.$container) return [false, false];
+      var _this$$container5 = this.$container,
+        scrollWidth = _this$$container5.scrollWidth,
+        scrollHeight = _this$$container5.scrollHeight,
+        clientWidth = _this$$container5.clientWidth,
+        clientHeight = _this$$container5.clientHeight;
+      return [scrollWidth > clientWidth, scrollHeight > clientHeight];
+    }
+  }, {
+    key: "getOrientation",
+    value: function getOrientation() {
+      if (this.asProps.orientation !== undefined) return this.asProps.orientation;
+      var _this$calculateOrient3 = this.calculateOrientation(),
+        _this$calculateOrient4 = _slicedToArray(_this$calculateOrient3, 2),
+        horizontal = _this$calculateOrient4[0],
+        vertical = _this$calculateOrient4[1];
+      if (vertical) return 'vertical';
+      if (horizontal) return 'horizontal';
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe($node) {
+      if (!$node) return;
+      $node.addEventListener('scroll', this.handleScroll);
+      $node.addEventListener('calculate', this.calculate);
+    }
+  }, {
+    key: "unsubscribe",
+    value: function unsubscribe($node) {
+      if (!$node) return;
+      $node.removeEventListener('scroll', this.handleScroll);
+      $node.removeEventListener('calculate', this.calculate);
+    }
+  }, {
+    key: "getSliderProps",
+    value: function getSliderProps() {
+      return {
+        ref: this.refSlider,
+        onMouseDown: this.handleMouseDownSlider
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.subscribe(this.$container);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribe(this.$container);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref3;
+      var SScrollBar = Box;
+      var _this$asProps2 = this.asProps,
+        styles = _this$asProps2.styles,
+        uid = _this$asProps2.uid;
+      var visibleScroll = this.state.visibleScroll;
+      if (!visibleScroll) {
+        return null;
+      }
+      return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SScrollBar, _ref3.cn("SScrollBar", _objectSpread({}, _assignProps({
+        "role": 'scrollbar',
+        "ref": this.refBar,
+        "aria-valuemin": 0,
+        "aria-controls": "igc-".concat(uid, "-scroll-container"),
+        "aria-orientation": this.getOrientation(),
+        "onMouseDown": this.handleMouseDownBar,
+        "orientation": this.getOrientation()
+      }, _ref))));
+    }
+  }]);
+  return ScrollBarRoot;
+}(Component);
+_defineProperty(ScrollBarRoot, "displayName", 'Bar');
+_defineProperty(ScrollBarRoot, "style", style);
+_defineProperty(ScrollBarRoot, "defaultProps", function () {
+  return {
+    container: /*#__PURE__*/React.createRef(),
+    children: /*#__PURE__*/React.createElement(ScrollBar.Slider, null)
+  };
+});
+function Slider(props) {
+  var _ref2 = arguments[0],
+    _ref4;
+  var styles = props.styles;
+  var SSlider = Box;
+  return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SSlider, _ref4.cn("SSlider", _objectSpread({}, _assignProps2({
+    "onDragStart": function onDragStart() {
+      return false;
+    }
+  }, _ref2))));
+}
+var ScrollBar = createComponent(ScrollBarRoot, {
+  Slider: Slider
+});
+export { setAriaValues as setAreaValue };
+export default ScrollBar;
+//# sourceMappingURL=ScrollBar.js.map

package/scroll-area/lib/es6/ScrollBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBar.js","names":["React","findDOMNode","createComponent","Component","sstyled","Root","Box","getNodeByRef","style","_sstyled","insert","DEFAULT_SLIDER_SIZE","setAriaValues","$container","$horizontalBar","$verticalBar","scrollWidth","clientWidth","scrollHeight","clientHeight","scrollLeft","scrollTop","maxScrollRight","maxScrollBottom","setAttribute","Math","floor","ScrollBarRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","width","height","x","y","left","top","pageX","pageY","visibleScroll","node","domNode","$bar","orientation","getOrientation","_this$asProps","asProps","horizontalBarRef","verticalBarRef","current","$slider","calculateVisibleScroll","setState","sliderStyle","calculateSliderStyle","kefBar","calculateKefBar","kefScroll","calculateKefScroll","handleScroll","_this$$container","transform","e","preventDefault","_this$_scroll","_scroll","_this$kefScroll","calculateScrollByDiff","_mouse","document","removeEventListener","handleMouseMoveDocument","handleMouseUpDocument","handleSelectStartDocument","stopPropagation","_this$$container2","addEventListener","_window","window","pageXOffset","pageYOffset","_this$$bar$getBoundin","getBoundingClientRect","calculateScrollByClick","_createClass","key","get","container","value","_this$calculateOrient","calculateOrientation","_this$calculateOrient2","_slicedToArray","horizontal","vertical","_this$$container3","_this$$bar","clientWidthBar","clientHeightBar","_this$sliderStyle","_this$$bar2","_this$sliderStyle2","_this$$bar3","_this$$container4","calculateDimensions","visibleSize","totalSize","ratio","min","round","max","position","windowOffset","mouseOffset","barPage","scroll","oldMouseOffset","oldScroll","offsetMouse","_this$$container5","undefined","_this$calculateOrient3","_this$calculateOrient4","subscribe","$node","calculate","unsubscribe","getSliderProps","ref","refSlider","onMouseDown","handleMouseDownSlider","componentDidMount","componentWillUnmount","render","_ref","_ref3","SScrollBar","_this$asProps2","styles","uid","state","createElement","cn","_objectSpread","_assignProps","refBar","handleMouseDownBar","createRef","children","ScrollBar","Slider","props","_ref2","arguments[0]","_ref4","SSlider","_assignProps2","onDragStart","setAreaValue"],"sources":["../../src/ScrollBar.jsx"],"sourcesContent":["import React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { getNodeByRef } from '@semcore/utils/lib/ref';\n\nimport style from './style/scroll-bar.shadow.css';\n\nexport const DEFAULT_SLIDER_SIZE = 50;\n\n// updating DOM directly to avoid react dom rerendering and reconciliation\nconst setAriaValues = ($container, $horizontalBar, $verticalBar) => {\n  if (!$container || !($horizontalBar || $verticalBar)) return;\n  const { scrollWidth, clientWidth, scrollHeight, clientHeight, scrollLeft, scrollTop } =\n    $container;\n  const maxScrollRight = scrollWidth - clientWidth;\n  const maxScrollBottom = scrollHeight - clientHeight;\n  if ($horizontalBar) {\n    $horizontalBar.setAttribute('aria-valuenow', Math.floor(scrollLeft));\n    $horizontalBar.setAttribute('aria-valuemax', maxScrollRight);\n  }\n  if ($verticalBar) {\n    $verticalBar.setAttribute('aria-valuenow', Math.floor(scrollTop));\n    $verticalBar.setAttribute('aria-valuemax', maxScrollBottom);\n  }\n};\n\nclass ScrollBarRoot extends Component {\n  static displayName = 'Bar';\n\n  static style = style;\n\n  static defaultProps = () => {\n    return {\n      container: React.createRef(),\n      children: <ScrollBar.Slider />,\n    };\n  };\n\n  $bar = null;\n  $slider = null;\n\n  sliderStyle = { width: DEFAULT_SLIDER_SIZE, height: DEFAULT_SLIDER_SIZE };\n\n  kefScroll = { x: 0, y: 0 };\n  kefBar = { x: 0, y: 0 };\n\n  _scroll = { left: 0, top: 0 };\n  _mouse = { pageX: 0, pageY: 0 };\n\n  state = {\n    visibleScroll: false,\n  };\n\n  get $container() {\n    return getNodeByRef(this.asProps.container);\n  }\n\n  refBar = (node) => {\n    const domNode = findDOMNode(node);\n    this.$bar = domNode;\n    const orientation = this.getOrientation();\n    const { horizontalBarRef, verticalBarRef } = this.asProps;\n    if (orientation === 'horizontal' && horizontalBarRef) horizontalBarRef.current = domNode;\n    if (orientation === 'vertical' && verticalBarRef) verticalBarRef.current = domNode;\n\n    setAriaValues(this.$container, horizontalBarRef?.current, verticalBarRef?.current);\n  };\n\n  refSlider = (node) => {\n    this.$slider = findDOMNode(node);\n  };\n\n  calculateVisibleScroll() {\n    const orientation = this.getOrientation();\n    const [horizontal, vertical] = this.calculateOrientation();\n\n    if (horizontal && orientation === 'horizontal') {\n      return true;\n    } else if (vertical && orientation === 'vertical') {\n      return true;\n    }\n\n    return false;\n  }\n\n  calculateKefScroll() {\n    const { clientWidth, clientHeight, scrollWidth, scrollHeight } = this.$container;\n    const { clientWidth: clientWidthBar, clientHeight: clientHeightBar } = this.$bar;\n    const { width, height } = this.sliderStyle;\n    return {\n      x: (clientWidthBar - width) / (scrollWidth - clientWidth),\n      y: (clientHeightBar - height) / (scrollHeight - clientHeight),\n    };\n  }\n\n  calculateKefBar() {\n    const { clientWidth, clientHeight } = this.$bar;\n    const { width, height } = this.sliderStyle;\n    return {\n      x: (clientWidth - width) / clientWidth,\n      y: (clientHeight - height) / clientHeight,\n    };\n  }\n\n  calculateSliderStyle() {\n    const { clientWidth, clientHeight } = this.$bar;\n    const { scrollWidth, scrollHeight } = this.$container;\n\n    const calculateDimensions = (visibleSize, totalSize) => {\n      const ratio = Math.min(visibleSize / totalSize, 1); // percentage of visible area\n      return Math.round(visibleSize * ratio);\n    };\n\n    return {\n      width: Math.max(calculateDimensions(clientWidth, scrollWidth), DEFAULT_SLIDER_SIZE),\n      height: Math.max(calculateDimensions(clientHeight, scrollHeight), DEFAULT_SLIDER_SIZE),\n    };\n  }\n\n  calculateScrollByClick(position, windowOffset, mouseOffset, kefBar, kefScroll) {\n    // bar coordinates relative to the page\n    const barPage = position + windowOffset;\n\n    // click coordinates - bar coordinates * proportion\n    const scroll = (mouseOffset - barPage) * kefBar;\n\n    return scroll / kefScroll;\n  }\n\n  calculateScrollByDiff(mouseOffset, oldMouseOffset, oldScroll, kefScroll) {\n    // mouse offset (new coordinates - old coordinates)\n    const offsetMouse = mouseOffset - oldMouseOffset;\n\n    // old scroll position * scroll ratio + offset\n    const scroll = oldScroll * kefScroll + offsetMouse;\n\n    return scroll / kefScroll;\n  }\n\n  calculateOrientation() {\n    if (!this.$container) return [false, false];\n    const { scrollWidth, scrollHeight, clientWidth, clientHeight } = this.$container;\n    return [scrollWidth > clientWidth, scrollHeight > clientHeight];\n  }\n\n  calculate = () => {\n    if (!this.$container) return;\n\n    const visibleScroll = this.calculateVisibleScroll();\n\n    this.setState({ visibleScroll }, () => {\n      if (!this.$container || !this.$bar || !this.$slider) return;\n      const orientation = this.getOrientation();\n\n      this.sliderStyle = this.calculateSliderStyle();\n      this.kefBar = this.calculateKefBar();\n      this.kefScroll = this.calculateKefScroll();\n\n      if (orientation === 'horizontal') {\n        this.$slider.style.width = `${this.sliderStyle.width}px`;\n      } else if (orientation === 'vertical') {\n        this.$slider.style.height = `${this.sliderStyle.height}px`;\n      }\n      this.handleScroll();\n    });\n  };\n\n  handleScroll = () => {\n    if (!this.$container || !this.$slider) return;\n\n    const { scrollTop, scrollLeft } = this.$container;\n    const orientation = this.getOrientation();\n\n    if (orientation === 'horizontal') {\n      this.$slider.style.transform = `translateX(${scrollLeft * this.kefScroll.x}px)`;\n    } else if (orientation === 'vertical') {\n      this.$slider.style.transform = `translateY(${scrollTop * this.kefScroll.y}px)`;\n    }\n  };\n\n  getOrientation() {\n    if (this.asProps.orientation !== undefined) return this.asProps.orientation;\n    const [horizontal, vertical] = this.calculateOrientation();\n    if (vertical) return 'vertical';\n    if (horizontal) return 'horizontal';\n  }\n\n  handleSelectStartDocument = (e) => e.preventDefault();\n\n  handleMouseMoveDocument = (e) => {\n    const { pageX, pageY } = e;\n    const { left, top } = this._scroll;\n    const { x, y } = this.kefScroll;\n    const orientation = this.getOrientation();\n\n    if (orientation === 'horizontal') {\n      this.$container.scrollLeft = this.calculateScrollByDiff(pageX, this._mouse.pageX, left, x);\n    } else if (orientation === 'vertical') {\n      this.$container.scrollTop = this.calculateScrollByDiff(pageY, this._mouse.pageY, top, y);\n    }\n  };\n\n  handleMouseUpDocument = () => {\n    document.removeEventListener('mousemove', this.handleMouseMoveDocument, true);\n    document.removeEventListener('mouseup', this.handleMouseUpDocument, true);\n    document.removeEventListener('selectstart', this.handleSelectStartDocument, true);\n  };\n\n  handleMouseDownSlider = (e) => {\n    // canceling the emergence of a real scroll\n    e.stopPropagation();\n    // save mouse coordinates (relative to the page)\n    this._mouse = { pageX: e.pageX, pageY: e.pageY };\n    // save the scroll of the container\n    // TODO: what happens if the content increases while we scroll?\n    const { scrollLeft, scrollTop } = this.$container;\n    this._scroll = { left: scrollLeft, top: scrollTop };\n\n    document.addEventListener('mousemove', this.handleMouseMoveDocument, true);\n    document.addEventListener('mouseup', this.handleMouseUpDocument, true);\n    document.addEventListener('selectstart', this.handleSelectStartDocument, true);\n  };\n\n  handleMouseDownBar = (e) => {\n    // cancellation of the ascent as in a real scroll\n    e.stopPropagation();\n\n    const { pageX, pageY } = e;\n    const { pageXOffset, pageYOffset } = window;\n    const { left, top } = this.$bar.getBoundingClientRect();\n    const orientation = this.getOrientation();\n\n    if (orientation === 'horizontal') {\n      this.$container.scrollLeft = this.calculateScrollByClick(\n        left,\n        pageXOffset,\n        pageX,\n        this.kefBar.x,\n        this.kefScroll.x,\n      );\n    } else if (orientation === 'vertical') {\n      this.$container.scrollTop = this.calculateScrollByClick(\n        top,\n        pageYOffset,\n        pageY,\n        this.kefBar.y,\n        this.kefScroll.y,\n      );\n    }\n  };\n\n  subscribe($node) {\n    if (!$node) return;\n    $node.addEventListener('scroll', this.handleScroll);\n    $node.addEventListener('calculate', this.calculate);\n  }\n\n  unsubscribe($node) {\n    if (!$node) return;\n    $node.removeEventListener('scroll', this.handleScroll);\n    $node.removeEventListener('calculate', this.calculate);\n  }\n\n  getSliderProps() {\n    return {\n      ref: this.refSlider,\n      onMouseDown: this.handleMouseDownSlider,\n    };\n  }\n\n  componentDidMount() {\n    this.subscribe(this.$container);\n  }\n\n  componentWillUnmount() {\n    this.unsubscribe(this.$container);\n  }\n\n  render() {\n    const SScrollBar = Root;\n    const { styles, uid } = this.asProps;\n    const { visibleScroll } = this.state;\n\n    if (!visibleScroll) {\n      return null;\n    }\n\n    return sstyled(styles)(\n      <SScrollBar\n        render={Box}\n        role='scrollbar'\n        ref={this.refBar}\n        aria-valuemin={0}\n        aria-controls={`igc-${uid}-scroll-container`}\n        aria-orientation={this.getOrientation()}\n        onMouseDown={this.handleMouseDownBar}\n        orientation={this.getOrientation()}\n      />,\n    );\n  }\n}\n\nfunction Slider(props) {\n  const { styles } = props;\n  const SSlider = Root;\n\n  return sstyled(styles)(<SSlider render={Box} onDragStart={() => false} />);\n}\n\nconst ScrollBar = createComponent(ScrollBarRoot, {\n  Slider,\n});\n\nexport { setAriaValues as setAreaValue };\nexport default ScrollBar;\n"],"mappings":"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"}

package/scroll-area/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/scroll-area/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NodeByRef } from '@semcore/utils/lib/ref';\n\n/** @deprecated */\nexport interface IScrollAreaProps extends ScrollAreaProps, UnknownProperties {}\nexport type ScrollAreaProps = BoxProps & {\n  /** Shadow display on container */\n  shadow?: boolean;\n  /** Scroll direction */\n  orientation?: 'horizontal' | 'vertical';\n  /** Link to the dom element, which will be a container with overflow */\n  container?: NodeByRef;\n  /** Link to the dom element that will be stretched along with the content */\n  inner?: NodeByRef;\n  /** Callback executed when container change size  */\n  onResize?: ResizeObserverCallback;\n  /** Called every time user scrolls area  */\n  onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /** Tab index that is being bypassed to the scroll container. */\n  tabIndex?: number | null;\n};\n\n/** @deprecated */\nexport interface IScrollAreaContext extends ScrollAreaContext, UnknownProperties {}\nexport type ScrollAreaContext = ScrollAreaProps & {\n  getContainerProps: PropGetterFn;\n  getBarProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IScrollBarProps extends ScrollBarProps, UnknownProperties {}\nexport type ScrollBarProps = BoxProps & {\n  /** The direction of the scroll that can be calculated automatically  */\n  orientation?: 'horizontal' | 'vertical';\n  /** Link to the dom element, which will be a container with overflow */\n  container?: NodeByRef;\n};\n\n/** @deprecated */\nexport interface IScrollBarContext extends ScrollBarContext, UnknownProperties {}\nexport type ScrollBarContext = ScrollBarProps & {\n  getSliderProps: PropGetterFn;\n};\n\ndeclare const ScrollBar: Intergalactic.Component<'div', ScrollBarProps, ScrollBarContext> & {\n  Slider: typeof Box;\n};\n\ndeclare const ScrollArea: Intergalactic.Component<'div', ScrollAreaProps, ScrollAreaContext> & {\n  Container: typeof Box;\n  Bar: typeof ScrollBar;\n};\n\ndeclare const eventCalculate: any;\n\nexport { eventCalculate };\nexport default ScrollArea;\n"],"mappings":""}

package/scroll-area/lib/es6/index.js

@@ -0,0 +1,3 @@
+export { default } from './ScrollArea';
+export * from './ScrollArea';
+//# sourceMappingURL=index.js.map

package/scroll-area/lib/es6/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ScrollArea';\nexport * from './ScrollArea';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,cAAc"}

package/scroll-area/lib/es6/style/scroll-area.shadow.css

@@ -0,0 +1,130 @@
+SScrollArea {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+SShadowHorizontal,
+SShadowVertical {
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    display: none;
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+SShadowHorizontal {
+
+  &:before,
+  &:after {
+    top: 0;
+    display: block;
+    width: 5px;
+    height: 100%;
+  }
+}
+
+SShadowHorizontal[position='median'] {
+  &:before {
+    left: 0;
+    background: var(--intergalactic-scroll-area-shadow-left,
+    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+
+  &:after {
+    right: 0;
+    background: var(--intergalactic-scroll-area-shadow-right,
+    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SShadowHorizontal[position='start'] {
+  &:before {
+    left: 0;
+    background: var(--intergalactic-scroll-area-shadow-left,
+    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SShadowHorizontal[position='end'] {
+  &:after {
+    right: 0;
+    background: var(--intergalactic-scroll-area-shadow-right,
+    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SShadowVertical {
+
+  &:before,
+  &:after {
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 5px;
+  }
+}
+
+SShadowVertical[position='median'] {
+  &:before {
+    top: 0;
+    background: var(--intergalactic-scroll-area-shadow-top,
+    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+
+  &:after {
+    bottom: 0;
+    background: var(--intergalactic-scroll-area-shadow-bottom,
+    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SShadowVertical[position='start'] {
+  &:before {
+    top: 0;
+    background: var(--intergalactic-scroll-area-shadow-top,
+    linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SShadowVertical[position='end'] {
+  &:after {
+    bottom: 0;
+    background: var(--intergalactic-scroll-area-shadow-bottom,
+    linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%));
+  }
+}
+
+SContainer {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: content-box;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  outline: none;
+
+  /* FF */
+  scrollbar-width: none;
+  /* IE */
+  -ms-overflow-style: none;
+  /* Webkit */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+SContainer[keyboardFocused]:focus::after {
+  position: absolute;
+  display: block;
+  content: '';
+  inset: 0;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  pointer-events: none;
+  z-index: 2;
+}

package/scroll-area/lib/es6/style/scroll-bar.shadow.css

@@ -0,0 +1,29 @@
+SScrollBar {
+  position: absolute;
+  display: flex;
+}
+
+SScrollBar[orientation='vertical'] {
+  top: var(--intergalactic-spacing-1x, 4px);
+  right: 0;
+  width: 8px;
+  height: calc(100% - var(--intergalactic-spacing-2x, 8px));
+  justify-content: center;
+}
+
+SScrollBar[orientation='horizontal'] {
+  bottom: 0;
+  left: var(--intergalactic-spacing-1x, 4px);
+  height: 12px;
+  width: calc(100% - var(--intergalactic-spacing-2x, 8px));
+  align-items: center;
+}
+
+SSlider {
+  cursor: pointer;
+  width: 6px;
+  height: 6px;
+  /* disable-tokens-validator */
+  border-radius: 4px;
+  background-color: var(--intergalactic-scroll-bar-background, rgba(25, 27, 35, 0.3));
+}