@sheinx/hooks 3.6.1-beta.4 → 3.6.1-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/common/use-in-view/use-in-view.d.ts.map +1 -1
  2. package/cjs/common/use-in-view/use-in-view.js +2 -1
  3. package/cjs/utils/dom/element.d.ts +1 -0
  4. package/cjs/utils/dom/element.d.ts.map +1 -1
  5. package/cjs/utils/dom/element.js +7 -0
  6. package/esm/common/use-in-view/use-in-view.d.ts.map +1 -1
  7. package/esm/common/use-in-view/use-in-view.js +2 -1
  8. package/esm/utils/dom/element.d.ts +1 -0
  9. package/esm/utils/dom/element.d.ts.map +1 -1
  10. package/esm/utils/dom/element.js +6 -0
  11. package/package.json +1 -1
package/cjs/common/use-in-view/use-in-view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["use-in-view.ts"],"names":[],"mappings":";AAIA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,oCAAoC,gBAAgB;;;;CA2ClE,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["use-in-view.ts"],"names":[],"mappings":";AAKA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,oCAAoC,gBAAgB;;;;CA2ClE,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/cjs/common/use-in-view/use-in-view.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("react");
8
+ var _dom = require("../../utils/dom");
8
9
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
10
  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."); }
10
11
  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); }
@@ -43,7 +44,7 @@ var useInView = function useInView() {
43
44
  }
44
45
  }
45
46
  }, {
46
- root: options.root || null,
47
+ root: options.root && (0, _dom.isScrollable)(options.root) ? options.root : null,
47
48
  rootMargin: options.rootMargin || '0px',
48
49
  threshold: options.threshold || 0
49
50
  });
package/cjs/utils/dom/element.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const addResizeObserver: (el: HTMLElement, handler: any, options?
12
12
  timer?: number | undefined;
13
13
  }) => () => void;
14
14
  export declare function getParent(el: HTMLElement | null | Element, target?: string | HTMLElement): Element | null;
15
+ export declare function isScrollable(el: HTMLElement): boolean;
15
16
  export declare function getClosestScrollContainer(element: HTMLElement | null): HTMLElement | null;
16
17
  export declare function getClosestPositionedContainer(element: Element | HTMLElement | null, positions?: React.CSSProperties['position'][]): HTMLElement | null;
17
18
  export declare function cssSupport(attr: keyof CSSStyleDeclaration, value: string): boolean;
package/cjs/utils/dom/element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,EACrC,SAAS,GAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,EAA0B,sBAuBrE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC;AAEpF,eAAO,MAAM,UAAU,UAAW,MAAM,aAAa,MAAM,uBAG1D,CAAC"}
1
+ {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,WAW3C;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,EACrC,SAAS,GAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,EAA0B,sBAuBrE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC;AAEpF,eAAO,MAAM,UAAU,UAAW,MAAM,aAAa,MAAM,uBAG1D,CAAC"}
package/cjs/utils/dom/element.js CHANGED
@@ -9,6 +9,7 @@ exports.getClosestPositionedContainer = getClosestPositionedContainer;
9
9
  exports.getClosestScrollContainer = getClosestScrollContainer;
10
10
  exports.getFieldId = void 0;
11
11
  exports.getParent = getParent;
12
+ exports.isScrollable = isScrollable;
12
13
  exports.parsePxToNumber = void 0;
13
14
  exports.wrapSpan = wrapSpan;
14
15
  var _react = _interopRequireDefault(require("react"));
@@ -128,6 +129,12 @@ function getParent(el, target) {
128
129
  }
129
130
  return null;
130
131
  }
132
+ function isScrollable(el) {
133
+ var style = window.getComputedStyle(el);
134
+ var overflowX = style.overflowX;
135
+ var overflowY = style.overflowY;
136
+ return (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
137
+ }
131
138
  function getClosestScrollContainer(element) {
132
139
  if (!element) {
133
140
  return null;
package/esm/common/use-in-view/use-in-view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["use-in-view.ts"],"names":[],"mappings":";AAIA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,oCAAoC,gBAAgB;;;;CA2ClE,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["use-in-view.ts"],"names":[],"mappings":";AAKA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,oCAAoC,gBAAgB;;;;CA2ClE,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/esm/common/use-in-view/use-in-view.js CHANGED
@@ -5,6 +5,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import { useEffect, useRef, useState } from 'react';
8
+ import { isScrollable } from "../../utils/dom";
8
9
  var useInView = function useInView() {
9
10
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
10
11
  var elementRef = useRef(null);
@@ -37,7 +38,7 @@ var useInView = function useInView() {
37
38
  }
38
39
  }
39
40
  }, {
40
- root: options.root || null,
41
+ root: options.root && isScrollable(options.root) ? options.root : null,
41
42
  rootMargin: options.rootMargin || '0px',
42
43
  threshold: options.threshold || 0
43
44
  });
package/esm/utils/dom/element.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare const addResizeObserver: (el: HTMLElement, handler: any, options?
12
12
  timer?: number | undefined;
13
13
  }) => () => void;
14
14
  export declare function getParent(el: HTMLElement | null | Element, target?: string | HTMLElement): Element | null;
15
+ export declare function isScrollable(el: HTMLElement): boolean;
15
16
  export declare function getClosestScrollContainer(element: HTMLElement | null): HTMLElement | null;
16
17
  export declare function getClosestPositionedContainer(element: Element | HTMLElement | null, positions?: React.CSSProperties['position'][]): HTMLElement | null;
17
18
  export declare function cssSupport(attr: keyof CSSStyleDeclaration, value: string): boolean;
package/esm/utils/dom/element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,EACrC,SAAS,GAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,EAA0B,sBAuBrE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC;AAEpF,eAAO,MAAM,UAAU,UAAW,MAAM,aAAa,MAAM,uBAG1D,CAAC"}
1
+ {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,UAAQ,EACnB,SAAS,CAAC,EAAE,MAAM,GACjB,KAAK,CAAC,SAAS,CASjB;AAGD,eAAO,MAAM,iBAAiB,OACxB,WAAW,WACN,GAAG;;;gBA4Cb,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,kBAmBxF;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,WAW3C;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,GAAG,IAAI,CAmCzF;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,EACrC,SAAS,GAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,EAA0B,sBAuBrE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,mBAAmB,EAAE,KAAK,EAAE,MAAM,WAYxE;AAED,eAAO,MAAM,eAAe,QAAS,MAAM,WAAwC,CAAC;AAEpF,eAAO,MAAM,UAAU,UAAW,MAAM,aAAa,MAAM,uBAG1D,CAAC"}
package/esm/utils/dom/element.js CHANGED
@@ -115,6 +115,12 @@ export function getParent(el, target) {
115
115
  }
116
116
  return null;
117
117
  }
118
+ export function isScrollable(el) {
119
+ var style = window.getComputedStyle(el);
120
+ var overflowX = style.overflowX;
121
+ var overflowY = style.overflowY;
122
+ return (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
123
+ }
118
124
  export function getClosestScrollContainer(element) {
119
125
  if (!element) {
120
126
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/hooks",
3
- "version": "3.6.1-beta.4",
3
+ "version": "3.6.1-beta.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",