ublo-lib 1.42.22 → 1.42.24

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 (4) hide show
  1. package/es/common/hooks/use-in-view.d.ts +1 -1
  2. package/es/common/hooks/use-in-view.d.ts.map +1 -1
  3. package/es/common/hooks/use-in-view.js +19 -11
  4. package/package.json +7 -6
package/es/common/hooks/use-in-view.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
2
  type CmsMode = "connected" | "info" | "editing";
3
- export default function useInView(ref: React.MutableRefObject<HTMLElement>, cmsMode: CmsMode, selector: string, repeat?: boolean, intersectionValue?: number, dependencyKey?: any): void;
3
+ export default function useInView(ref: React.MutableRefObject<HTMLElement>, cmsMode: CmsMode, selector: string, repeat?: boolean, intersectionValue?: number, refreshKey?: any): void;
4
4
  export {};
5
5
  //# sourceMappingURL=use-in-view.d.ts.map
package/es/common/hooks/use-in-view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-in-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAOhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,EACxC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,OAAc,EACtB,iBAAiB,GAAE,MAAY,EAC/B,aAAa,CAAC,EAAE,GAAG,QAmFpB"}
1
+ {"version":3,"file":"use-in-view.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-in-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAShD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,EACxC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,OAAc,EACtB,iBAAiB,GAAE,MAAY,EAC/B,UAAU,CAAC,EAAE,GAAG,QAyFjB"}
package/es/common/hooks/use-in-view.js CHANGED
@@ -1,27 +1,35 @@
1
1
  import * as React from "react";
2
2
  import { useUbloContext } from "ublo/with-ublo";
3
- const options = {
3
+ const OPTIONS = {
4
4
  rootMargin: "0px",
5
5
  threshold: ratio(100),
6
6
  };
7
- export default function useInView(ref, cmsMode, selector, repeat = true, intersectionValue = 0.2, dependencyKey) {
7
+ const IN_VIEW_ATTRIBUTE = "data-in-view";
8
+ export default function useInView(ref, cmsMode, selector, repeat = true, intersectionValue = 0.2, refreshKey) {
8
9
  const { lang, path } = useUbloContext();
9
10
  const [compatible, setCompatible] = React.useState(false);
10
11
  const callback = React.useCallback((entries) => {
11
12
  entries.forEach((entry) => {
12
13
  const { intersectionRatio, target } = entry;
13
- if (!target || !target.classList[0])
14
+ const hasAtLeastOneClass = target?.classList.length > 0;
15
+ if (!target || !hasAtLeastOneClass)
14
16
  return;
15
17
  const inViewClass = buildClass(target.classList[0]);
16
18
  if (intersectionRatio !== 0) {
17
19
  if (repeat) {
18
- intersectionRatio <= intersectionValue
19
- ? target.classList.remove(inViewClass)
20
- : target.classList.add(inViewClass);
20
+ if (intersectionRatio <= intersectionValue) {
21
+ target.classList.remove(inViewClass);
22
+ target.removeAttribute(IN_VIEW_ATTRIBUTE);
23
+ }
24
+ else {
25
+ target.classList.add(inViewClass);
26
+ target.setAttribute(IN_VIEW_ATTRIBUTE, "");
27
+ }
21
28
  }
22
29
  else {
23
30
  if (intersectionRatio >= intersectionValue) {
24
31
  target.classList.add(inViewClass);
32
+ target.setAttribute(IN_VIEW_ATTRIBUTE, "");
25
33
  }
26
34
  }
27
35
  }
@@ -42,7 +50,7 @@ export default function useInView(ref, cmsMode, selector, repeat = true, interse
42
50
  const inViewClassName = buildClass(firstClassName);
43
51
  target.classList.add(inViewClassName);
44
52
  }
45
- target.setAttribute("data-in-view", "");
53
+ target.setAttribute(IN_VIEW_ATTRIBUTE, "");
46
54
  });
47
55
  }
48
56
  else {
@@ -52,9 +60,9 @@ export default function useInView(ref, cmsMode, selector, repeat = true, interse
52
60
  const inViewClassName = buildClass(firstClassName);
53
61
  target.classList.remove(inViewClassName);
54
62
  }
55
- target.removeAttribute("data-in-view");
63
+ target.removeAttribute(IN_VIEW_ATTRIBUTE);
56
64
  });
57
- const observer = new IntersectionObserver(callback, options);
65
+ const observer = new IntersectionObserver(callback, OPTIONS);
58
66
  const observe = () => {
59
67
  targets.forEach((target) => observer?.observe(target));
60
68
  };
@@ -66,7 +74,7 @@ export default function useInView(ref, cmsMode, selector, repeat = true, interse
66
74
  const inViewClassName = buildClass(firstClassName);
67
75
  target.classList.remove(inViewClassName);
68
76
  }
69
- target.removeAttribute("data-in-view");
77
+ target.removeAttribute(IN_VIEW_ATTRIBUTE);
70
78
  observer.disconnect();
71
79
  });
72
80
  observe();
@@ -76,7 +84,7 @@ export default function useInView(ref, cmsMode, selector, repeat = true, interse
76
84
  }
77
85
  }
78
86
  }
79
- }, [callback, cmsMode, compatible, lang, path, ref, selector, dependencyKey]);
87
+ }, [callback, cmsMode, compatible, lang, path, ref, selector, refreshKey]);
80
88
  }
81
89
  function ratio(steps) {
82
90
  return Array.from({ length: steps + 1 }).map((_, i) => i / steps);
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "ublo-lib",
3
- "version": "1.42.22",
3
+ "version": "1.42.24",
4
4
  "peerDependencies": {
5
+ "classnames": "^2.5.1",
5
6
  "dt-design-system": "^3.10.8",
6
7
  "framer-motion": "^11.11.9",
7
8
  "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -16,8 +17,6 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "awesome-debounce-promise": "^2.1.0",
19
- "classnames": "^2.5.1",
20
- "framer-motion": "^11.11.9",
21
20
  "react-async-hook": "^4.0.0",
22
21
  "react-player": "^2.16.0"
23
22
  },
@@ -27,17 +26,19 @@
27
26
  "@types/react-dom": "^18.3.1",
28
27
  "@typescript-eslint/eslint-plugin": "^7.18.0",
29
28
  "@typescript-eslint/parser": "^7.18.0",
29
+ "classnames": "^2.5.1",
30
30
  "cpx2": "^7.0.2",
31
- "dt-design-system": "^3.11.2",
31
+ "dt-design-system": "^3.11.6",
32
32
  "eslint": "^8.57.1",
33
33
  "eslint-plugin-react": "^7.37.2",
34
34
  "eslint-plugin-react-hooks": "^4.6.2",
35
+ "framer-motion": "^11.11.9",
35
36
  "mv": "^2.1.1",
36
- "next": "^14.2.16",
37
+ "next": "^14.2.18",
37
38
  "react": "^18.3.1",
38
39
  "react-dom": "^18.3.1",
39
40
  "typescript": "^5.6.3",
40
- "ublo": "^3.20.7"
41
+ "ublo": "^3.20.18"
41
42
  },
42
43
  "scripts": {
43
44
  "clean": "rm -rf es",