@synerise/ds-utils 1.7.0 → 1.7.1

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 (64) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/doubleClickListener/doubleClickListener.d.ts +1 -1
  3. package/dist/doubleClickListener/doubleClickListener.js +8 -9
  4. package/dist/focusWithArrowKeys/focusWithArrowKeys.d.ts +1 -1
  5. package/dist/focusWithArrowKeys/focusWithArrowKeys.js +24 -22
  6. package/dist/getInitials/getInitials.js +7 -11
  7. package/dist/getPopupContainer/getPopupContainer.js +9 -5
  8. package/dist/getPopupContainer/index.js +5 -1
  9. package/dist/hexToRgba/hexToRgba.js +8 -6
  10. package/dist/index.js +64 -28
  11. package/dist/modules.d.js +1 -0
  12. package/dist/modules.d.ts +1 -0
  13. package/dist/omitKeys/omitKeys.js +4 -6
  14. package/dist/regex/regex.js +3 -3
  15. package/dist/renderWithHighlight/renderWithHighlight.d.ts +1 -1
  16. package/dist/renderWithHighlight/renderWithHighlight.js +13 -20
  17. package/dist/selectColorByLetter/selectColorByLetter.js +17 -15
  18. package/dist/toCamelCase/toCamelCase.js +4 -14
  19. package/dist/types/types.d.ts +2 -2
  20. package/dist/types/types.js +1 -1
  21. package/dist/useBreakpoint/useBreakpoint.js +29 -28
  22. package/dist/useCombinedRefs/useCombinedRefs.d.ts +1 -1
  23. package/dist/useCombinedRefs/useCombinedRefs.js +9 -10
  24. package/dist/useDelimiterEscape/useDelimiterEscape.js +34 -62
  25. package/dist/useElementInView/useElementInView.d.ts +2 -2
  26. package/dist/useElementInView/useElementInView.js +16 -17
  27. package/dist/useIsMounted/useIsMounted.d.ts +1 -1
  28. package/dist/useIsMounted/useIsMounted.js +9 -6
  29. package/dist/useKeyboardShortcuts/useKeyboardShortcuts.js +11 -8
  30. package/dist/useLatestRef/index.js +4 -1
  31. package/dist/useLatestRef/useLatestRef.d.ts +1 -1
  32. package/dist/useLatestRef/useLatestRef.js +8 -5
  33. package/dist/useOnClickOutside/useOnClickOutside.d.ts +1 -1
  34. package/dist/useOnClickOutside/useOnClickOutside.js +19 -33
  35. package/dist/useOverscrollBlock/useOverscrollBlock.d.ts +1 -1
  36. package/dist/useOverscrollBlock/useOverscrollBlock.js +18 -16
  37. package/dist/usePrevious/usePrevious.js +6 -4
  38. package/dist/useResize/useResize.d.ts +1 -1
  39. package/dist/useResize/useResize.js +19 -25
  40. package/dist/useResizeObserver/useResizeObserver.d.ts +1 -1
  41. package/dist/useResizeObserver/useResizeObserver.js +16 -16
  42. package/dist/useResizeToFit/useResizeToFit.d.ts +1 -1
  43. package/dist/useResizeToFit/useResizeToFit.js +17 -14
  44. package/dist/useScrollContain/useScrollContain.d.ts +1 -1
  45. package/dist/useScrollContain/useScrollContain.js +13 -10
  46. package/dist/useSearchResults/index.js +8 -2
  47. package/dist/useSearchResults/search.utils.d.ts +1 -1
  48. package/dist/useSearchResults/search.utils.js +11 -13
  49. package/dist/useSearchResults/types.js +1 -1
  50. package/dist/useSearchResults/useSearchResults.d.ts +1 -1
  51. package/dist/useSearchResults/useSearchResults.js +29 -38
  52. package/dist/useStableId/useStableId.js +9 -11
  53. package/dist/useStickyScroll/useStickyScroll.d.ts +1 -1
  54. package/dist/useStickyScroll/useStickyScroll.js +33 -33
  55. package/dist/useTraceUpdate/index.js +10 -10
  56. package/package.json +4 -4
  57. package/dist/doubleClickListener/__specs__/doubleClickListener.spec.d.ts +0 -1
  58. package/dist/focusWithArrowKeys/__specs__/focusWithArrowKeys.spec.d.ts +0 -1
  59. package/dist/getInitials/__specs__/getInitials.spec.d.ts +0 -1
  60. package/dist/getPopupContainer/getPopupContainer.spec.d.ts +0 -1
  61. package/dist/regex/__specs__/regex.spec.d.ts +0 -1
  62. package/dist/selectColorByLetter/selectColorByLetter.spec.d.ts +0 -1
  63. package/dist/toCamelCase/__specs__/toCamelCase.spec.d.ts +0 -1
  64. package/dist/useDelimiterEscape/__specs__/useDelimiterEscape.spec.d.ts +0 -1
@@ -1,48 +1,33 @@
1
- import { useMemo } from 'react';
2
- export var useDelimiterEscape = function useDelimiterEscape(config) {
3
- if (config === void 0) {
4
- config = {};
5
- }
6
- var _config = config,
7
- _config$delimiter = _config.delimiter,
8
- delimiter = _config$delimiter === void 0 ? ',' : _config$delimiter,
9
- _config$openTag = _config.openTag,
10
- openTag = _config$openTag === void 0 ? '```' : _config$openTag,
11
- _config$closeTag = _config.closeTag,
12
- closeTag = _config$closeTag === void 0 ? '```' : _config$closeTag;
13
- return useMemo(function () {
14
- var joinWithEscape = function joinWithEscape(items) {
15
- return items.map(function (item) {
16
- return item.includes(delimiter) ? "" + openTag + item + closeTag : item;
17
- }).join(delimiter);
1
+ import { useMemo } from "react";
2
+ const useDelimiterEscape = (config = {}) => {
3
+ const {
4
+ delimiter = ",",
5
+ openTag = "```",
6
+ closeTag = "```"
7
+ } = config;
8
+ return useMemo(() => {
9
+ const joinWithEscape = (items) => {
10
+ return items.map((item) => item.includes(delimiter) ? `${openTag}${item}${closeTag}` : item).join(delimiter);
18
11
  };
19
- var splitWithEscape = function splitWithEscape(input) {
20
- var result = [];
21
- var i = 0;
22
- var openTagLen = openTag.length;
23
- var closeTagLen = closeTag.length;
12
+ const splitWithEscape = (input) => {
13
+ const result = [];
14
+ let i = 0;
15
+ const openTagLen = openTag.length;
16
+ const closeTagLen = closeTag.length;
24
17
  while (i < input.length) {
25
- var current = '';
26
-
27
- // Check if we're at the start of a potential opening sequence
18
+ let current = "";
28
19
  if (input.substring(i, i + openTagLen) === openTag) {
29
- var validOpening = i === 0 || input[i - 1] === delimiter;
20
+ const validOpening = i === 0 || input[i - 1] === delimiter;
30
21
  if (validOpening) {
31
- // This is a valid opening - consume the opening tag
32
22
  i += openTagLen;
33
- current = '';
34
-
35
- // Find the closing tag (must be followed by delimiter or at end)
23
+ current = "";
36
24
  while (i < input.length) {
37
25
  if (input.substring(i, i + closeTagLen) === closeTag) {
38
- // Check if this is a valid closing
39
- var validClosing = i + closeTagLen === input.length || input[i + closeTagLen] === delimiter;
26
+ const validClosing = i + closeTagLen === input.length || input[i + closeTagLen] === delimiter;
40
27
  if (validClosing) {
41
- // Found closing tag
42
28
  i += closeTagLen;
43
29
  break;
44
30
  } else {
45
- // Not a valid closing - treat as content
46
31
  current += input[i];
47
32
  i++;
48
33
  }
@@ -51,10 +36,8 @@ export var useDelimiterEscape = function useDelimiterEscape(config) {
51
36
  i++;
52
37
  }
53
38
  }
54
- // Push the item without the wrapper tags
55
39
  result.push(current);
56
40
  } else {
57
- // Not a valid opening - treat as regular item
58
41
  while (i < input.length && input[i] !== delimiter) {
59
42
  current += input[i];
60
43
  i++;
@@ -64,7 +47,6 @@ export var useDelimiterEscape = function useDelimiterEscape(config) {
64
47
  }
65
48
  }
66
49
  } else {
67
- // Regular item - consume until delimiter
68
50
  while (i < input.length && input[i] !== delimiter) {
69
51
  current += input[i];
70
52
  i++;
@@ -73,49 +55,38 @@ export var useDelimiterEscape = function useDelimiterEscape(config) {
73
55
  result.push(current);
74
56
  }
75
57
  }
76
-
77
- // Skip the delimiter
78
58
  if (i < input.length && input[i] === delimiter) {
79
59
  i++;
80
60
  }
81
61
  }
82
62
  return result;
83
63
  };
84
- var isValidEscapedString = function isValidEscapedString(input) {
85
- var inEscapeBlock = false;
86
- var i = 0;
87
- var openTagLen = openTag.length;
88
- var closeTagLen = closeTag.length;
89
- var delimiterLen = delimiter.length;
64
+ const isValidEscapedString = (input) => {
65
+ let inEscapeBlock = false;
66
+ let i = 0;
67
+ const openTagLen = openTag.length;
68
+ const closeTagLen = closeTag.length;
69
+ const delimiterLen = delimiter.length;
90
70
  while (i < input.length) {
91
71
  if (!inEscapeBlock) {
92
- // Not in escape block - look for opening tag
93
72
  if (input.substring(i, i + openTagLen) === openTag) {
94
- // Check if this is a valid opening position
95
- var validOpening = i === 0 || input.substring(i - delimiterLen, i) === delimiter;
73
+ const validOpening = i === 0 || input.substring(i - delimiterLen, i) === delimiter;
96
74
  if (validOpening) {
97
- // Valid opening position - enter escape block
98
75
  inEscapeBlock = true;
99
76
  i += openTagLen;
100
77
  } else {
101
- // Not a valid opening position - treat as regular content
102
78
  i++;
103
79
  }
104
80
  } else {
105
81
  i++;
106
82
  }
107
83
  } else {
108
- // In escape block - look for closing tag
109
84
  if (input.substring(i, i + closeTagLen) === closeTag) {
110
- // Check if this is a valid closing
111
- // Valid closing: at end of string or followed by delimiter
112
- var validClosing = i + closeTagLen === input.length || input.substring(i + closeTagLen, i + closeTagLen + delimiterLen) === delimiter;
85
+ const validClosing = i + closeTagLen === input.length || input.substring(i + closeTagLen, i + closeTagLen + delimiterLen) === delimiter;
113
86
  if (validClosing) {
114
- // This is a closing tag
115
87
  inEscapeBlock = false;
116
88
  i += closeTagLen;
117
89
  } else {
118
- // Not a valid closing - treat as regular content
119
90
  i++;
120
91
  }
121
92
  } else {
@@ -123,14 +94,15 @@ export var useDelimiterEscape = function useDelimiterEscape(config) {
123
94
  }
124
95
  }
125
96
  }
126
-
127
- // Invalid if we're still inside an escape block (unclosed opening tag)
128
97
  return !inEscapeBlock;
129
98
  };
130
99
  return {
131
- joinWithEscape: joinWithEscape,
132
- splitWithEscape: splitWithEscape,
133
- isValidEscapedString: isValidEscapedString
100
+ joinWithEscape,
101
+ splitWithEscape,
102
+ isValidEscapedString
134
103
  };
135
104
  }, [delimiter, openTag, closeTag]);
136
- };
105
+ };
106
+ export {
107
+ useDelimiterEscape
108
+ };
@@ -1,11 +1,11 @@
1
- import { type MutableRefObject } from 'react';
1
+ import { MutableRefObject } from 'react';
2
2
  type IntersectionObserverOptions = {
3
3
  rootMargin?: string;
4
4
  threshold?: number | number[];
5
5
  };
6
6
  declare const useElementInView: <T extends HTMLElement = HTMLElement>(options: IntersectionObserverOptions, rootElementRef?: MutableRefObject<HTMLDivElement | null | undefined>) => {
7
7
  isIntersecting: boolean;
8
- elementRef: import("react").RefObject<T>;
8
+ elementRef: import('react').RefObject<T>;
9
9
  isVisible: boolean;
10
10
  };
11
11
  export default useElementInView;
@@ -1,28 +1,27 @@
1
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import { useEffect, useRef, useState } from 'react';
3
- var useElementInView = function useElementInView(options, rootElementRef) {
4
- var elementRef = useRef(null);
5
- var _useState = useState(false),
6
- isVisible = _useState[0],
7
- setIsVisible = _useState[1];
8
- useEffect(function () {
9
- var intersectionObserver = new IntersectionObserver(function (_ref) {
10
- var entry = _ref[0];
1
+ import { useRef, useState, useEffect } from "react";
2
+ const useElementInView = (options, rootElementRef) => {
3
+ const elementRef = useRef(null);
4
+ const [isVisible, setIsVisible] = useState(false);
5
+ useEffect(() => {
6
+ const intersectionObserver = new IntersectionObserver(([entry]) => {
11
7
  setIsVisible(entry.isIntersecting);
12
- }, _extends({}, options, {
13
- root: (rootElementRef == null ? void 0 : rootElementRef.current) || null
14
- }));
8
+ }, {
9
+ ...options,
10
+ root: rootElementRef?.current || null
11
+ });
15
12
  if (elementRef.current) {
16
13
  intersectionObserver.observe(elementRef.current);
17
14
  }
18
- return function () {
15
+ return () => {
19
16
  intersectionObserver.disconnect();
20
17
  };
21
18
  });
22
19
  return {
23
20
  isIntersecting: isVisible,
24
- elementRef: elementRef,
25
- isVisible: isVisible
21
+ elementRef,
22
+ isVisible
26
23
  };
27
24
  };
28
- export default useElementInView;
25
+ export {
26
+ useElementInView as default
27
+ };
@@ -1 +1 @@
1
- export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;
1
+ export declare const useIsMounted: () => import('react').MutableRefObject<boolean>;
@@ -1,11 +1,14 @@
1
- import { useEffect, useRef } from 'react';
2
- export var useIsMounted = function useIsMounted() {
3
- var isMounted = useRef(false);
4
- useEffect(function () {
1
+ import { useRef, useEffect } from "react";
2
+ const useIsMounted = () => {
3
+ const isMounted = useRef(false);
4
+ useEffect(() => {
5
5
  isMounted.current = true;
6
- return function () {
6
+ return () => {
7
7
  isMounted.current = false;
8
8
  };
9
9
  }, []);
10
10
  return isMounted;
11
- };
11
+ };
12
+ export {
13
+ useIsMounted
14
+ };
@@ -1,12 +1,15 @@
1
- import { useEffect } from 'react';
2
- export var useKeyboardShortcuts = function useKeyboardShortcuts(keyConfig) {
3
- useEffect(function () {
4
- var keyboardShortcuts = function keyboardShortcuts(event) {
1
+ import { useEffect } from "react";
2
+ const useKeyboardShortcuts = (keyConfig) => {
3
+ useEffect(() => {
4
+ const keyboardShortcuts = (event) => {
5
5
  keyConfig[event.key] && keyConfig[event.key](event);
6
6
  };
7
- document.addEventListener('keydown', keyboardShortcuts);
8
- return function () {
9
- document.removeEventListener('keydown', keyboardShortcuts);
7
+ document.addEventListener("keydown", keyboardShortcuts);
8
+ return () => {
9
+ document.removeEventListener("keydown", keyboardShortcuts);
10
10
  };
11
11
  }, [keyConfig]);
12
- };
12
+ };
13
+ export {
14
+ useKeyboardShortcuts
15
+ };
@@ -1 +1,4 @@
1
- export * from './useLatestRef';
1
+ import { useLatestRef } from "./useLatestRef.js";
2
+ export {
3
+ useLatestRef
4
+ };
@@ -1 +1 @@
1
- export declare const useLatestRef: <T>(value: T) => import("react").MutableRefObject<T>;
1
+ export declare const useLatestRef: <T>(value: T) => import('react').MutableRefObject<T>;
@@ -1,8 +1,11 @@
1
- import { useEffect, useRef } from 'react';
2
- export var useLatestRef = function useLatestRef(value) {
3
- var ref = useRef(value);
4
- useEffect(function () {
1
+ import { useRef, useEffect } from "react";
2
+ const useLatestRef = (value) => {
3
+ const ref = useRef(value);
4
+ useEffect(() => {
5
5
  ref.current = value;
6
6
  }, [value]);
7
7
  return ref;
8
- };
8
+ };
9
+ export {
10
+ useLatestRef
11
+ };
@@ -1,4 +1,4 @@
1
- import { type RefObject } from 'react';
1
+ import { RefObject } from 'react';
2
2
  declare const MOUSEDOWN = "mousedown";
3
3
  declare const TOUCHSTART = "touchstart";
4
4
  declare const _CLICK = "click";
@@ -1,53 +1,39 @@
1
- import { useEffect, useRef } from 'react';
2
- var MOUSEDOWN = 'mousedown';
3
- var TOUCHSTART = 'touchstart';
4
- var _CLICK = 'click';
5
- var _CONTEXTMENU = 'contextmenu';
6
- var defaultEvents = [MOUSEDOWN, TOUCHSTART];
7
-
8
- /**
9
- * Hook for listening for outside clicks.
10
- *
11
- * @param ref main component to out of which outside clicks will be detected
12
- * @param handler function called on outside click
13
- * @param customEventsTypes list of events to handle that are happening outside (optional, pass something else than `undefined` to overwrite default `['mousedown', 'touchstart']`)
14
- * @param ignoreSelectors list of selectors/classes which, in case it is found that any of parent elements of triggering element has this class, event `handler` won't be called
15
- */
16
- export var useOnClickOutside = function useOnClickOutside(ref, handler, customEventsTypes, ignoreSelectors) {
17
- var handlerRef = useRef(handler);
18
- var events = customEventsTypes || defaultEvents;
19
- useEffect(function () {
1
+ import { useRef, useEffect } from "react";
2
+ const MOUSEDOWN = "mousedown";
3
+ const TOUCHSTART = "touchstart";
4
+ const defaultEvents = [MOUSEDOWN, TOUCHSTART];
5
+ const useOnClickOutside = (ref, handler, customEventsTypes, ignoreSelectors) => {
6
+ const handlerRef = useRef(handler);
7
+ const events = customEventsTypes || defaultEvents;
8
+ useEffect(() => {
20
9
  handlerRef.current = handler;
21
10
  });
22
- useEffect(function () {
11
+ useEffect(() => {
23
12
  if (!handler) {
24
- return function () {
25
- return null;
26
- };
13
+ return () => null;
27
14
  }
28
- var listener = function listener(event) {
15
+ const listener = (event) => {
29
16
  if (!ref.current || !handlerRef.current) {
30
17
  return;
31
18
  }
32
19
  if (ref.current.contains(event.target)) {
33
20
  return;
34
21
  }
35
- if (ignoreSelectors != null && ignoreSelectors.some(function (className) {
36
- var _event$target;
37
- return (_event$target = event.target) == null ? void 0 : _event$target.closest(className);
38
- })) {
39
- // if any of parent elements contain one of ignored classes - stop proceeding this event
22
+ if (ignoreSelectors?.some((className) => event.target?.closest(className))) {
40
23
  return;
41
24
  }
42
25
  handlerRef.current(event);
43
26
  };
44
- events.forEach(function (event) {
27
+ events.forEach((event) => {
45
28
  document.addEventListener(event, listener);
46
29
  });
47
- return function () {
48
- events.forEach(function (event) {
30
+ return () => {
31
+ events.forEach((event) => {
49
32
  document.removeEventListener(event, listener);
50
33
  });
51
34
  };
52
35
  }, [handler, ref, events, ignoreSelectors]);
53
- };
36
+ };
37
+ export {
38
+ useOnClickOutside
39
+ };
@@ -1,2 +1,2 @@
1
- declare const useOverscrollBlock: <T extends HTMLElement>() => import("react").MutableRefObject<T | undefined>;
1
+ declare const useOverscrollBlock: <T extends HTMLElement>() => import('react').MutableRefObject<T | undefined>;
2
2
  export default useOverscrollBlock;
@@ -1,26 +1,28 @@
1
- import { useCallback, useEffect, useRef } from 'react';
2
- var useOverscrollBlock = function useOverscrollBlock() {
3
- var ref = useRef();
4
- var handleMouseEnter = useCallback(function () {
5
- document.body.style.overscrollBehaviorX = 'contain';
1
+ import { useRef, useCallback, useEffect } from "react";
2
+ const useOverscrollBlock = () => {
3
+ const ref = useRef();
4
+ const handleMouseEnter = useCallback(() => {
5
+ document.body.style.overscrollBehaviorX = "contain";
6
6
  }, []);
7
- var handleMouseLeave = useCallback(function () {
8
- document.body.style.removeProperty('overscroll-behavior-x');
7
+ const handleMouseLeave = useCallback(() => {
8
+ document.body.style.removeProperty("overscroll-behavior-x");
9
9
  }, []);
10
- useEffect(function () {
11
- var element = ref.current;
10
+ useEffect(() => {
11
+ const element = ref.current;
12
12
  if (element) {
13
- element.addEventListener('mouseenter', handleMouseEnter);
14
- element.addEventListener('mouseleave', handleMouseLeave);
13
+ element.addEventListener("mouseenter", handleMouseEnter);
14
+ element.addEventListener("mouseleave", handleMouseLeave);
15
15
  }
16
- return function () {
16
+ return () => {
17
17
  if (element) {
18
- element.removeEventListener('mouseenter', handleMouseEnter);
19
- element.removeEventListener('mouseleave', handleMouseLeave);
18
+ element.removeEventListener("mouseenter", handleMouseEnter);
19
+ element.removeEventListener("mouseleave", handleMouseLeave);
20
20
  }
21
- document.body.style.removeProperty('overscroll-behavior-x');
21
+ document.body.style.removeProperty("overscroll-behavior-x");
22
22
  };
23
23
  }, [handleMouseEnter, handleMouseLeave]);
24
24
  return ref;
25
25
  };
26
- export default useOverscrollBlock;
26
+ export {
27
+ useOverscrollBlock as default
28
+ };
@@ -1,9 +1,11 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  function usePrevious(value) {
3
- var ref = React.useRef();
4
- React.useEffect(function () {
3
+ const ref = React.useRef();
4
+ React.useEffect(() => {
5
5
  ref.current = value;
6
6
  });
7
7
  return ref.current;
8
8
  }
9
- export default usePrevious;
9
+ export {
10
+ usePrevious as default
11
+ };
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import { default as React } from 'react';
2
2
  type Dimensions = {
3
3
  width: number;
4
4
  height: number;
@@ -1,33 +1,27 @@
1
- import React from 'react';
2
- var useResize = function useResize(componentRef, visible) {
3
- if (visible === void 0) {
4
- visible = true;
5
- }
6
- var _React$useState = React.useState({
7
- width: 0,
8
- height: 0
9
- }),
10
- dimensions = _React$useState[0],
11
- setDimensions = _React$useState[1];
12
- React.useEffect(function () {
13
- var getDimensions = function getDimensions() {
14
- var _componentRef$current, _componentRef$current2;
15
- return {
16
- width: (componentRef == null || (_componentRef$current = componentRef.current) == null ? void 0 : _componentRef$current.offsetWidth) || 0,
17
- height: (componentRef == null || (_componentRef$current2 = componentRef.current) == null ? void 0 : _componentRef$current2.offsetHeight) || 0
18
- };
19
- };
20
- var handleResize = function handleResize() {
1
+ import React from "react";
2
+ const useResize = (componentRef, visible = true) => {
3
+ const [dimensions, setDimensions] = React.useState({
4
+ width: 0,
5
+ height: 0
6
+ });
7
+ React.useEffect(() => {
8
+ const getDimensions = () => ({
9
+ width: componentRef?.current?.offsetWidth || 0,
10
+ height: componentRef?.current?.offsetHeight || 0
11
+ });
12
+ const handleResize = () => {
21
13
  setDimensions(getDimensions());
22
14
  };
23
- if (componentRef != null && componentRef.current) {
15
+ if (componentRef?.current) {
24
16
  setDimensions(getDimensions());
25
17
  }
26
- window.addEventListener('resize', handleResize);
27
- return function () {
28
- window.removeEventListener('resize', handleResize);
18
+ window.addEventListener("resize", handleResize);
19
+ return () => {
20
+ window.removeEventListener("resize", handleResize);
29
21
  };
30
22
  }, [componentRef, setDimensions, visible]);
31
23
  return dimensions;
32
24
  };
33
- export default useResize;
25
+ export {
26
+ useResize as default
27
+ };
@@ -1,3 +1,3 @@
1
- import { type RefObject } from 'react';
1
+ import { RefObject } from 'react';
2
2
  declare const useResizeObserver: (elementRef: RefObject<HTMLElement | undefined>, resizeHandler?: (dimensions: DOMRect) => void) => DOMRect;
3
3
  export default useResizeObserver;
@@ -1,36 +1,36 @@
1
- import { useCallback, useEffect, useRef, useState } from 'react';
2
- var useResizeObserver = function useResizeObserver(elementRef, resizeHandler) {
3
- var _useState = useState(new DOMRect()),
4
- dimensions = _useState[0],
5
- setDimensions = _useState[1];
6
- var resizeObserver = useRef(new ResizeObserver(function (entries) {
7
- var runHandler = function runHandler() {
8
- var contentRect = entries[0].contentRect;
1
+ import { useState, useRef, useCallback, useEffect } from "react";
2
+ const useResizeObserver = (elementRef, resizeHandler) => {
3
+ const [dimensions, setDimensions] = useState(new DOMRect());
4
+ const resizeObserver = useRef(new ResizeObserver((entries) => {
5
+ const runHandler = () => {
6
+ const {
7
+ contentRect
8
+ } = entries[0];
9
9
  setDimensions(contentRect);
10
10
  resizeHandler && resizeHandler(contentRect);
11
11
  };
12
- if ('requestAnimationFrame' in window) {
12
+ if ("requestAnimationFrame" in window) {
13
13
  window.requestAnimationFrame(runHandler);
14
14
  } else {
15
15
  setTimeout(runHandler, 0);
16
16
  }
17
17
  })).current;
18
- var observe = useCallback(function () {
18
+ const observe = useCallback(() => {
19
19
  elementRef.current && resizeObserver.observe(elementRef.current);
20
- // eslint-disable-next-line react-hooks/exhaustive-deps
21
20
  }, [resizeObserver]);
22
- var disconnect = useCallback(function () {
21
+ const disconnect = useCallback(() => {
23
22
  resizeObserver.disconnect();
24
23
  }, [resizeObserver]);
25
- useEffect(function () {
24
+ useEffect(() => {
26
25
  if (elementRef.current) {
27
26
  observe();
28
27
  }
29
- return function () {
28
+ return () => {
30
29
  resizeObserver.disconnect();
31
30
  };
32
- // eslint-disable-next-line react-hooks/exhaustive-deps
33
31
  }, [resizeObserver, observe, disconnect]);
34
32
  return dimensions;
35
33
  };
36
- export default useResizeObserver;
34
+ export {
35
+ useResizeObserver as default
36
+ };
@@ -3,7 +3,7 @@ type useResizeToFitProps = {
3
3
  autoObserve?: boolean;
4
4
  };
5
5
  declare const useResizeToFit: <T extends HTMLElement = HTMLDivElement>({ onResize, autoObserve, }: useResizeToFitProps) => {
6
- elementRef: import("react").RefObject<T>;
6
+ elementRef: import('react').RefObject<T>;
7
7
  disconnect: () => void;
8
8
  observe: () => void;
9
9
  };
@@ -1,18 +1,19 @@
1
- import { useCallback, useEffect, useRef } from 'react';
2
- var useResizeToFit = function useResizeToFit(_ref) {
3
- var onResize = _ref.onResize,
4
- autoObserve = _ref.autoObserve;
5
- var elementRef = useRef(null);
6
- var resizeObserver = useRef(new ResizeObserver(function () {
1
+ import { useRef, useCallback, useEffect } from "react";
2
+ const useResizeToFit = ({
3
+ onResize,
4
+ autoObserve
5
+ }) => {
6
+ const elementRef = useRef(null);
7
+ const resizeObserver = useRef(new ResizeObserver(() => {
7
8
  elementRef.current && onResize(elementRef.current.clientWidth);
8
9
  })).current;
9
- var observe = useCallback(function () {
10
+ const observe = useCallback(() => {
10
11
  elementRef.current && resizeObserver.observe(elementRef.current);
11
12
  }, [resizeObserver]);
12
- var disconnect = useCallback(function () {
13
+ const disconnect = useCallback(() => {
13
14
  resizeObserver.disconnect();
14
15
  }, [resizeObserver]);
15
- useEffect(function () {
16
+ useEffect(() => {
16
17
  if (elementRef.current) {
17
18
  if (autoObserve) {
18
19
  observe();
@@ -20,14 +21,16 @@ var useResizeToFit = function useResizeToFit(_ref) {
20
21
  disconnect();
21
22
  }
22
23
  }
23
- return function () {
24
+ return () => {
24
25
  resizeObserver.disconnect();
25
26
  };
26
27
  }, [resizeObserver, autoObserve, elementRef, observe, disconnect]);
27
28
  return {
28
- elementRef: elementRef,
29
- disconnect: disconnect,
30
- observe: observe
29
+ elementRef,
30
+ disconnect,
31
+ observe
31
32
  };
32
33
  };
33
- export default useResizeToFit;
34
+ export {
35
+ useResizeToFit as default
36
+ };
@@ -1 +1 @@
1
- export declare const useScrollContain: <ElementType extends HTMLElement>() => import("react").RefObject<ElementType>;
1
+ export declare const useScrollContain: <ElementType extends HTMLElement>() => import('react').RefObject<ElementType>;