@semcore/scroll-area - npm Package Compare versions

Comparing version 3.5.3 to 3.6.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [3.6.0] - 2021-10-22
+
+### Changed
+
+- Rewrite code from ts to js.
+- Changed interception event of mouse for cursor in `ScrollBar`.
+
+- Call calculate position scroll when change size container
+
 ## [3.5.3] - 2021-9-24
@@ -7,0 +16,0 @@

lib/cjs/ScrollArea.js

@@ -46,4 +46,2 @@ "use strict";
 
-var _if = _interopRequireDefault(require("@semcore/utils/lib/if"));
-
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
@@ -68,3 +66,3 @@
 /*__inner_css_start__*/
-".___SScrollArea_yg99a_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_yg99a_gg_:after,.___SShadowHorizontal_yg99a_gg_:before,.___SShadowVertical_yg99a_gg_:after,.___SShadowVertical_yg99a_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none;z-index:1}.___SShadowHorizontal_yg99a_gg_:after,.___SShadowHorizontal_yg99a_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_yg99a_gg_._position_median_yg99a_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_median_yg99a_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_start_yg99a_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_end_yg99a_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_:after,.___SShadowVertical_yg99a_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_yg99a_gg_._position_median_yg99a_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_median_yg99a_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_start_yg99a_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_end_yg99a_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SContainer_yg99a_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_yg99a_gg_::-webkit-scrollbar{display:none}"
+".___SScrollArea_k6o81_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_k6o81_gg_:after,.___SShadowHorizontal_k6o81_gg_:before,.___SShadowVertical_k6o81_gg_:after,.___SShadowVertical_k6o81_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none;z-index:1}.___SShadowHorizontal_k6o81_gg_:after,.___SShadowHorizontal_k6o81_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_k6o81_gg_._position_median_k6o81_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_median_k6o81_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_start_k6o81_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_end_k6o81_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_:after,.___SShadowVertical_k6o81_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_k6o81_gg_._position_median_k6o81_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_median_k6o81_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_start_k6o81_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_end_k6o81_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SContainer_k6o81_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_k6o81_gg_::-webkit-scrollbar{display:none}"
 /*__inner_css_end__*/
@@ -74,9 +72,9 @@ , "1l5f7z5_gg_")
 , {
-  "__SScrollArea": "___SScrollArea_yg99a_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_yg99a_gg_",
-  "__SShadowVertical": "___SShadowVertical_yg99a_gg_",
-  "_position_median": "_position_median_yg99a_gg_",
-  "_position_start": "_position_start_yg99a_gg_",
-  "_position_end": "_position_end_yg99a_gg_",
-  "__SContainer": "___SContainer_yg99a_gg_"
+  "__SScrollArea": "___SScrollArea_k6o81_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_k6o81_gg_",
+  "__SShadowVertical": "___SShadowVertical_k6o81_gg_",
+  "_position_median": "_position_median_k6o81_gg_",
+  "_position_start": "_position_start_k6o81_gg_",
+  "_position_end": "_position_end_k6o81_gg_",
+  "__SContainer": "___SContainer_k6o81_gg_"
 });
@@ -109,4 +107,4 @@ var eventCalculate = undefined;
     _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$wrapper", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "observer", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "$wrapper", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "observer", null);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
@@ -284,11 +282,7 @@ shadowVertical: false,
         "onScroll": this.handleScroll
-      }, _ref))), /*#__PURE__*/_react["default"].createElement(_if["default"], _ref3.cn("If", {
-        "condition": shadowVertical
-      }), /*#__PURE__*/_react["default"].createElement(SShadowVertical, _ref3.cn("SShadowVertical", {
+      }, _ref))), shadowVertical && /*#__PURE__*/_react["default"].createElement(SShadowVertical, _ref3.cn("SShadowVertical", {
         "position": shadowVertical
-      }))), /*#__PURE__*/_react["default"].createElement(_if["default"], _ref3.cn("If", {
-        "condition": shadowHorizontal
-      }), /*#__PURE__*/_react["default"].createElement(SShadowHorizontal, _ref3.cn("SShadowHorizontal", {
+      })), shadowHorizontal && /*#__PURE__*/_react["default"].createElement(SShadowHorizontal, _ref3.cn("SShadowHorizontal", {
         "position": shadowHorizontal
-      }))), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ScrollAreaComponent.Container, null, /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))), (orientation === undefined || orientation === 'horizontal') && /*#__PURE__*/_react["default"].createElement(ScrollAreaComponent.Bar, {
+      })), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ScrollAreaComponent.Container, null, /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))), (orientation === undefined || orientation === 'horizontal') && /*#__PURE__*/_react["default"].createElement(ScrollAreaComponent.Bar, {
         orientation: "horizontal"
@@ -295,0 +289,0 @@ }), (orientation === undefined || orientation === 'vertical') && /*#__PURE__*/_react["default"].createElement(ScrollAreaComponent.Bar, {

lib/es6/ScrollArea.js

@@ -30,3 +30,2 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import findComponent from '@semcore/utils/lib/findComponent';
-import If from '@semcore/utils/lib/if';
 import logger from '@semcore/utils/lib/logger';
@@ -41,3 +40,3 @@ import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 /*__inner_css_start__*/
-".___SScrollArea_yg99a_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_yg99a_gg_:after,.___SShadowHorizontal_yg99a_gg_:before,.___SShadowVertical_yg99a_gg_:after,.___SShadowVertical_yg99a_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none;z-index:1}.___SShadowHorizontal_yg99a_gg_:after,.___SShadowHorizontal_yg99a_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_yg99a_gg_._position_median_yg99a_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_median_yg99a_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_start_yg99a_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_yg99a_gg_._position_end_yg99a_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_:after,.___SShadowVertical_yg99a_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_yg99a_gg_._position_median_yg99a_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_median_yg99a_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_start_yg99a_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_yg99a_gg_._position_end_yg99a_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SContainer_yg99a_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_yg99a_gg_::-webkit-scrollbar{display:none}"
+".___SScrollArea_k6o81_gg_{position:relative;width:100%;height:100%}.___SShadowHorizontal_k6o81_gg_:after,.___SShadowHorizontal_k6o81_gg_:before,.___SShadowVertical_k6o81_gg_:after,.___SShadowVertical_k6o81_gg_:before{content:\"\";position:absolute;display:none;pointer-events:none;z-index:1}.___SShadowHorizontal_k6o81_gg_:after,.___SShadowHorizontal_k6o81_gg_:before{top:0;display:block;width:5px;height:100%}.___SShadowHorizontal_k6o81_gg_._position_median_k6o81_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_median_k6o81_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_start_k6o81_gg_:before{left:0;background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1))}.___SShadowHorizontal_k6o81_gg_._position_end_k6o81_gg_:after{right:0;background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_:after,.___SShadowVertical_k6o81_gg_:before{left:0;display:block;width:100%;height:5px}.___SShadowVertical_k6o81_gg_._position_median_k6o81_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_median_k6o81_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_start_k6o81_gg_:before{top:0;background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.1))}.___SShadowVertical_k6o81_gg_._position_end_k6o81_gg_:after{bottom:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1))}.___SContainer_k6o81_gg_{display:block;width:100%;height:100%;box-sizing:content-box;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.___SContainer_k6o81_gg_::-webkit-scrollbar{display:none}"
 /*__inner_css_end__*/
@@ -47,9 +46,9 @@ , "1l5f7z5_gg_")
 , {
-  "__SScrollArea": "___SScrollArea_yg99a_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_yg99a_gg_",
-  "__SShadowVertical": "___SShadowVertical_yg99a_gg_",
-  "_position_median": "_position_median_yg99a_gg_",
-  "_position_start": "_position_start_yg99a_gg_",
-  "_position_end": "_position_end_yg99a_gg_",
-  "__SContainer": "___SContainer_yg99a_gg_"
+  "__SScrollArea": "___SScrollArea_k6o81_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_k6o81_gg_",
+  "__SShadowVertical": "___SShadowVertical_k6o81_gg_",
+  "_position_median": "_position_median_k6o81_gg_",
+  "_position_start": "_position_start_k6o81_gg_",
+  "_position_end": "_position_end_k6o81_gg_",
+  "__SContainer": "___SContainer_k6o81_gg_"
 });
@@ -85,5 +84,5 @@ var eventCalculate = undefined;
 
-    _defineProperty(_assertThisInitialized(_this), "$wrapper", void 0);
+    _defineProperty(_assertThisInitialized(_this), "$wrapper", null);
 
-    _defineProperty(_assertThisInitialized(_this), "observer", void 0);
+    _defineProperty(_assertThisInitialized(_this), "observer", null);
 
@@ -269,11 +268,7 @@ _defineProperty(_assertThisInitialized(_this), "state", {
         "onScroll": this.handleScroll
-      }, _ref))), /*#__PURE__*/React.createElement(If, _ref3.cn("If", {
-        "condition": shadowVertical
-      }), /*#__PURE__*/React.createElement(SShadowVertical, _ref3.cn("SShadowVertical", {
+      }, _ref))), shadowVertical && /*#__PURE__*/React.createElement(SShadowVertical, _ref3.cn("SShadowVertical", {
         "position": shadowVertical
-      }))), /*#__PURE__*/React.createElement(If, _ref3.cn("If", {
-        "condition": shadowHorizontal
-      }), /*#__PURE__*/React.createElement(SShadowHorizontal, _ref3.cn("SShadowHorizontal", {
+      })), shadowHorizontal && /*#__PURE__*/React.createElement(SShadowHorizontal, _ref3.cn("SShadowHorizontal", {
         "position": shadowHorizontal
-      }))), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, null, /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))), (orientation === undefined || orientation === 'horizontal') && /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
+      })), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollAreaComponent.Container, null, /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))), (orientation === undefined || orientation === 'horizontal') && /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {
         orientation: "horizontal"
@@ -280,0 +275,0 @@ }), (orientation === undefined || orientation === 'vertical') && /*#__PURE__*/React.createElement(ScrollAreaComponent.Bar, {

lib/types/index.d.ts

@@ -1,2 +0,48 @@
-export { default } from './ScrollArea';
-export * from './ScrollArea';
+import ResizeObserverCallback from 'resize-observer-polyfill';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import { NodeByRef } from '@semcore/utils/lib/ref';
+
+export interface IScrollAreaProps extends IBoxProps {
+  /** Shadow display on container */
+  shadow?: boolean;
+  /** Scroll direction */
+  orientation?: 'horizontal' | 'vertical';
+  /** Link to the dom element, which will be a container with overflow */
+  container?: NodeByRef;
+  /** Link to the dom element that will be stretched along with the content */
+  inner?: NodeByRef;
+  /** Callback executed when container change size  */
+  onResize?: ResizeObserverCallback;
+}
+
+export interface IScrollAreaContext extends IScrollAreaProps {
+  getContainerProps: PropGetterFn;
+  getBarProps: PropGetterFn;
+}
+
+export interface IScrollBarProps extends IBoxProps {
+  /** The direction of the scroll that can be calculated automatically  */
+  orientation?: 'horizontal' | 'vertical';
+  /** Link to the dom element, which will be a container with overflow */
+  container?: NodeByRef;
+}
+
+export interface IScrollBarContext extends IScrollBarProps {
+  getSliderProps: PropGetterFn;
+}
+
+declare const ScrollBar: (<T>(
+  props: CProps<IScrollBarProps & T, IScrollBarContext>,
+) => ReturnEl) & {
+  Slider: typeof Box;
+};
+
+declare const ScrollAreaComponent: (<T>(
+  props: CProps<IScrollAreaProps & T, IScrollAreaContext>,
+) => ReturnEl) & {
+  Container: typeof Box;
+  Bar: typeof ScrollBar;
+};
+
+export default ScrollAreaComponent;

package.json

 {
   "name": "@semcore/scroll-area",
   "description": "SEMRush ScrollArea Component",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "main": "lib/cjs/index.js",
@@ -12,3 +12,3 @@ "module": "lib/es6/index.js",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
@@ -15,0 +15,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

172006

decreased by-2.98%

Number of package files

26

decreased by-3.7%

Lines of code

2246

decreased by-1.66%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes