@yakad/ui 1.3.164 → 1.3.166

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 (77) hide show
  1. package/dist/ActiveOnVisible/ActiveOnVisible.d.ts +1 -1
  2. package/dist/ActiveOnVisible/ActiveOnVisible.js +2 -1
  3. package/dist/AppBar/AppBar.d.ts +1 -1
  4. package/dist/Avatar/Avatar.d.ts +1 -1
  5. package/dist/Avatar/Avatar.js +2 -2
  6. package/dist/Button/Button.d.ts +1 -1
  7. package/dist/Button/Button.js +2 -2
  8. package/dist/Card/Card.d.ts +1 -1
  9. package/dist/CheckBox/CheckBox.d.ts +1 -1
  10. package/dist/CheckBox/CheckBox.js +2 -2
  11. package/dist/CodeBox/CodeBox.d.ts +1 -1
  12. package/dist/CodeBox/CodeBox.js +2 -2
  13. package/dist/CodeField/CodeField.d.ts +1 -1
  14. package/dist/Container/Container.d.ts +1 -1
  15. package/dist/Display/Display.d.ts +1 -1
  16. package/dist/Dropdown/Dropdown.d.ts +2 -1
  17. package/dist/Dropdown/Dropdown.js +17 -3
  18. package/dist/Footer/Footer.d.ts +1 -1
  19. package/dist/Form/Form.d.ts +1 -1
  20. package/dist/GridContainer/GridContainer.d.ts +1 -1
  21. package/dist/GridItem/GridItem.d.ts +1 -1
  22. package/dist/Hr/Hr.d.ts +1 -1
  23. package/dist/InputField/InputField.d.ts +13 -5
  24. package/dist/InputField/InputField.js +36 -6
  25. package/dist/InputField/cn.d.ts +2 -0
  26. package/dist/InputField/cn.js +5 -0
  27. package/dist/InputField/input.d.ts +7 -0
  28. package/dist/InputField/input.js +18 -0
  29. package/dist/List/List.d.ts +1 -1
  30. package/dist/ListItem/ListItem.d.ts +1 -1
  31. package/dist/Main/Main.d.ts +1 -1
  32. package/dist/Navigation/Navigation.d.ts +1 -1
  33. package/dist/Popup/Popup.d.ts +2 -1
  34. package/dist/Popup/Popup.js +19 -5
  35. package/dist/RadioButton/RadioButton.d.ts +1 -1
  36. package/dist/RadioButton/RadioButton.js +2 -2
  37. package/dist/RadioGroup/RadioGroup.d.ts +1 -1
  38. package/dist/RenderByScroll/RenderByScroll.d.ts +1 -1
  39. package/dist/RenderByScroll/RenderByScroll.js +2 -1
  40. package/dist/Row/Row.d.ts +1 -1
  41. package/dist/Screen/Screen.d.ts +1 -1
  42. package/dist/Select/Select.d.ts +1 -1
  43. package/dist/Spacer/Spacer.d.ts +1 -1
  44. package/dist/Stack/Stack.d.ts +1 -1
  45. package/dist/SvgIcon/SvgIcon.d.ts +1 -1
  46. package/dist/Table/Table.d.ts +7 -7
  47. package/dist/Text/Text.d.ts +9 -9
  48. package/dist/Theme/Theme.d.ts +1 -1
  49. package/dist/WithOverlay/WithOverlay.d.ts +1 -1
  50. package/dist/WithOverlay/WithOverlay.js +12 -23
  51. package/dist/index.d.ts +0 -11
  52. package/dist/index.js +0 -11
  53. package/package.json +8 -4
  54. package/dist/InputField/InputField.module.css +0 -212
  55. package/dist/LoadingIcon/LoadingIcon.d.ts +0 -7
  56. package/dist/LoadingIcon/LoadingIcon.js +0 -19
  57. package/dist/LoadingIcon/LoadingIcon.module.css +0 -98
  58. package/dist/interactionHooks/useOnDoubleTap.d.ts +0 -2
  59. package/dist/interactionHooks/useOnDoubleTap.js +0 -23
  60. package/dist/interactionHooks/useOnHoverChange.d.ts +0 -2
  61. package/dist/interactionHooks/useOnHoverChange.js +0 -23
  62. package/dist/interactionHooks/useOnOutsideClick.d.ts +0 -2
  63. package/dist/interactionHooks/useOnOutsideClick.js +0 -21
  64. package/dist/interactionHooks/useOnPinch.d.ts +0 -2
  65. package/dist/interactionHooks/useOnPinch.js +0 -35
  66. package/dist/interactionHooks/useOnResizeChange.d.ts +0 -2
  67. package/dist/interactionHooks/useOnResizeChange.js +0 -23
  68. package/dist/interactionHooks/useOnRightClick.d.ts +0 -2
  69. package/dist/interactionHooks/useOnRightClick.js +0 -19
  70. package/dist/interactionHooks/useOnRotate.d.ts +0 -2
  71. package/dist/interactionHooks/useOnRotate.js +0 -36
  72. package/dist/interactionHooks/useOnScroll.d.ts +0 -2
  73. package/dist/interactionHooks/useOnScroll.js +0 -29
  74. package/dist/interactionHooks/useOnSwipe.d.ts +0 -2
  75. package/dist/interactionHooks/useOnSwipe.js +0 -53
  76. package/dist/interactionHooks/useOnVisibilityChange.d.ts +0 -2
  77. package/dist/interactionHooks/useOnVisibilityChange.js +0 -21
@@ -1,19 +0,0 @@
1
- import { useCallback, useEffect, useRef } from "react";
2
- export function useOnRightClick(callback, ref) {
3
- const defaultRef = useRef(null);
4
- const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
5
- const handleContextMenu = useCallback((e) => {
6
- e.preventDefault();
7
- callback(e);
8
- }, [callback]);
9
- useEffect(() => {
10
- const element = targetRef.current;
11
- if (!element)
12
- return;
13
- element.addEventListener("contextmenu", handleContextMenu);
14
- return () => {
15
- element.removeEventListener("contextmenu", handleContextMenu);
16
- };
17
- }, [handleContextMenu, targetRef]);
18
- return targetRef;
19
- }
@@ -1,2 +0,0 @@
1
- import { RefObject } from "react";
2
- export declare function useOnRotate<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, deltaAngle: number) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;
@@ -1,36 +0,0 @@
1
- import { useCallback, useEffect, useRef, useState } from "react";
2
- export function useOnRotate(callback, ref) {
3
- const defaultRef = useRef(null);
4
- const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
5
- const [startAngle, setStartAngle] = useState(0);
6
- const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
7
- (180 / Math.PI);
8
- const handleStart = useCallback((e) => {
9
- if (e.touches.length === 2) {
10
- const [t1, t2] = e.touches;
11
- setStartAngle(getAngle(t1, t2));
12
- }
13
- }, []);
14
- const handleMove = useCallback((e) => {
15
- if (e.touches.length === 2) {
16
- const [t1, t2] = e.touches;
17
- const angle = getAngle(t1, t2);
18
- const deltaAngle = angle - startAngle;
19
- if (Math.abs(deltaAngle) > 15) {
20
- callback(e, deltaAngle);
21
- }
22
- }
23
- }, [callback, startAngle]);
24
- useEffect(() => {
25
- const element = targetRef.current;
26
- if (!element)
27
- return;
28
- element.addEventListener("touchstart", handleStart);
29
- element.addEventListener("touchmove", handleMove);
30
- return () => {
31
- element.removeEventListener("touchstart", handleStart);
32
- element.removeEventListener("touchmove", handleMove);
33
- };
34
- }, [handleMove, handleStart, targetRef]);
35
- return targetRef;
36
- }
@@ -1,2 +0,0 @@
1
- import { RefObject } from "react";
2
- export declare function useOnScroll<T extends HTMLElement = HTMLElement>(callback: (scrolling: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;
@@ -1,29 +0,0 @@
1
- import { useCallback, useEffect, useRef } from "react";
2
- export function useOnScroll(callback, ref) {
3
- const defaultRef = useRef(null);
4
- const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
5
- const scrollTimeoutRef = useRef(undefined);
6
- const scrollingRef = useRef(false);
7
- const handleScroll = useCallback(() => {
8
- if (!scrollingRef.current) {
9
- scrollingRef.current = true;
10
- callback(true);
11
- }
12
- clearTimeout(scrollTimeoutRef.current);
13
- scrollTimeoutRef.current = setTimeout(() => {
14
- scrollingRef.current = false;
15
- callback(false);
16
- }, 150);
17
- }, [callback]);
18
- useEffect(() => {
19
- const element = targetRef.current;
20
- if (!element)
21
- return;
22
- element.addEventListener("scroll", handleScroll);
23
- return () => {
24
- element.removeEventListener("scroll", handleScroll);
25
- clearTimeout(scrollTimeoutRef.current);
26
- };
27
- }, [handleScroll, targetRef]);
28
- return targetRef;
29
- }
@@ -1,2 +0,0 @@
1
- import { RefObject } from "react";
2
- export declare function useOnSwipe<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, direction: "left" | "right" | "up" | "down") => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;
@@ -1,53 +0,0 @@
1
- import { useCallback, useEffect, useRef, useState } from "react";
2
- export function useOnSwipe(callback, ref) {
3
- const defaultRef = useRef(null);
4
- const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
5
- const [swipeCoordinates, setSwipeCoordinates] = useState({
6
- startX: 0,
7
- startY: 0,
8
- endX: 0,
9
- endY: 0,
10
- });
11
- const touchStart = useCallback((e) => {
12
- const t = e.touches[0];
13
- setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { startX: t.clientX, startY: t.clientY, endX: t.clientX, endY: t.clientY })));
14
- }, []);
15
- const touchMove = useCallback((e) => {
16
- const t = e.touches[0];
17
- setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { endX: t.clientX, endY: t.clientY })));
18
- }, []);
19
- const touchEnd = useCallback((e) => {
20
- // Could do unpacking of object but its not necessary
21
- const dx = swipeCoordinates.endX - swipeCoordinates.startX;
22
- const dy = swipeCoordinates.endY - swipeCoordinates.startY;
23
- const absDx = Math.abs(dx);
24
- const absDy = Math.abs(dy);
25
- const threshold = 30;
26
- if (absDx > absDy) {
27
- if (dx > threshold)
28
- callback(e, "right");
29
- if (dx < -threshold)
30
- callback(e, "left");
31
- }
32
- else {
33
- if (dy > threshold)
34
- callback(e, "down");
35
- if (dy < -threshold)
36
- callback(e, "up");
37
- }
38
- }, [callback, swipeCoordinates.endX, swipeCoordinates.startX, swipeCoordinates.endY, swipeCoordinates.startY]);
39
- useEffect(() => {
40
- const element = targetRef.current;
41
- if (!element)
42
- return;
43
- element.addEventListener("touchstart", touchStart, { passive: true });
44
- element.addEventListener("touchmove", touchMove, { passive: true });
45
- element.addEventListener("touchend", touchEnd, { passive: true });
46
- return () => {
47
- element.removeEventListener("touchstart", touchStart);
48
- element.removeEventListener("touchmove", touchMove);
49
- element.removeEventListener("touchend", touchEnd);
50
- };
51
- }, [touchStart, touchMove, touchEnd, targetRef]);
52
- return targetRef;
53
- }
@@ -1,2 +0,0 @@
1
- import { RefObject } from "react";
2
- export declare function useOnVisibilityChange<T extends HTMLElement = HTMLElement>(callback: (visible: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;
@@ -1,21 +0,0 @@
1
- import { useCallback, useEffect, useRef } from "react";
2
- export function useOnVisibilityChange(callback, ref) {
3
- const defaultRef = useRef(null);
4
- const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
5
- const handleVisibility = useCallback((visible) => {
6
- callback(visible);
7
- }, [callback]);
8
- useEffect(() => {
9
- const element = targetRef.current;
10
- if (!element)
11
- return;
12
- const intersectionObserver = new IntersectionObserver((entries) => {
13
- entries[0].isIntersecting ? handleVisibility(true) : handleVisibility(false);
14
- });
15
- intersectionObserver.observe(element);
16
- return () => {
17
- intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
18
- };
19
- }, [handleVisibility, targetRef]);
20
- return targetRef;
21
- }