@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/cjs/src/hooks/dropdown/useDropdown.js

@@ -12,51 +12,48 @@ var _useWindowResize = require("./useWindowResize");
 /**
  * 드롭다운 기능을 통합한 커스텀 훅
  */
-var useDropdown = function (config) {
-  var triggerRef = config.triggerRef,
-    dropdownRef = config.dropdownRef,
-    maxHeight = config.maxHeight,
-    itemCount = config.itemCount,
-    optionItems = config.optionItems,
-    _a = config.disabled,
-    disabled = _a === void 0 ? false : _a,
-    _b = config.multiple,
-    multiple = _b === void 0 ? false : _b,
-    onSelect = config.onSelect,
-    onChange = config.onChange;
-  var _c = (0, _react.useState)(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
-  var _d = (0, _react.useState)(-1),
-    focusedIndex = _d[0],
-    setFocusedIndex = _d[1];
+const useDropdown = config => {
+  const {
+    triggerRef,
+    dropdownRef,
+    maxHeight,
+    itemCount,
+    optionItems,
+    disabled = false,
+    multiple = false,
+    onSelect,
+    onChange
+  } = config;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
   // 드롭다운 위치 계산
-  var _e = (0, _useDropdownPosition.useDropdownPosition)({
-      triggerRef: triggerRef,
-      maxHeight: maxHeight,
-      itemCount: itemCount
-    }),
-    direction = _e.direction,
-    updatePosition = _e.updatePosition;
+  const {
+    direction,
+    updatePosition
+  } = (0, _useDropdownPosition.useDropdownPosition)({
+    triggerRef,
+    maxHeight,
+    itemCount
+  });
   // 드롭다운 토글
-  var toggleDropdown = (0, _react.useCallback)(function () {
+  const toggleDropdown = (0, _react.useCallback)(() => {
     if (disabled) return;
-    var newIsOpen = !isOpen;
+    const newIsOpen = !isOpen;
     if (newIsOpen) {
       updatePosition();
       setFocusedIndex(-1);
     }
     setIsOpen(newIsOpen);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newIsOpen);
+    onChange?.(newIsOpen);
   }, [disabled, isOpen, updatePosition, onChange]);
   // 드롭다운 닫기
-  var closeDropdown = (0, _react.useCallback)(function () {
+  const closeDropdown = (0, _react.useCallback)(() => {
     setIsOpen(false);
     setFocusedIndex(-1);
-    onChange === null || onChange === void 0 ? void 0 : onChange(false);
+    onChange?.(false);
   }, [onChange]);
   // 옵션 선택 처리
-  var handleOptionSelect = (0, _react.useCallback)(function (option) {
+  const handleOptionSelect = (0, _react.useCallback)(option => {
     onSelect(option);
     // multiple 모드가 아니어야 드롭다운을 닫음
     if (!multiple) {
@@ -64,46 +61,47 @@ var useDropdown = function (config) {
     }
   }, [onSelect, closeDropdown, multiple]);
   // 키보드 이벤트 처리
-  var _f = (0, _useDropdownKeyboard.useDropdownKeyboard)({
-      isOpen: isOpen,
-      disabled: disabled,
-      focusedIndex: focusedIndex,
-      optionItems: optionItems,
-      onToggle: toggleDropdown,
-      onSelect: handleOptionSelect,
-      onClose: closeDropdown,
-      onFocusChange: setFocusedIndex,
-      triggerRef: triggerRef,
-      dropdownRef: dropdownRef
-    }),
-    handleKeyDown = _f.handleKeyDown,
-    handleMouseMove = _f.handleMouseMove,
-    isKeyboardNavigation = _f.isKeyboardNavigation;
+  const {
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
+  } = (0, _useDropdownKeyboard.useDropdownKeyboard)({
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle: toggleDropdown,
+    onSelect: handleOptionSelect,
+    onClose: closeDropdown,
+    onFocusChange: setFocusedIndex,
+    triggerRef,
+    dropdownRef
+  });
   // 외부 클릭 감지
-  var refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+  const refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
   (0, _useOutsideClick.useOutsideClick)({
-    isOpen: isOpen,
-    refs: refs,
+    isOpen,
+    refs,
     onClose: closeDropdown
   });
   // 윈도우 리사이즈 시 위치 재계산
   (0, _useWindowResize.useWindowResize)(updatePosition, isOpen, triggerRef.current);
   return {
     // 상태
-    isOpen: isOpen,
-    direction: direction,
-    focusedIndex: focusedIndex,
+    isOpen,
+    direction,
+    focusedIndex,
     // 액션
-    toggleDropdown: toggleDropdown,
-    closeDropdown: closeDropdown,
-    handleOptionSelect: handleOptionSelect,
-    handleKeyDown: handleKeyDown,
-    setFocusedIndex: setFocusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleOptionSelect,
+    handleKeyDown,
+    setFocusedIndex,
     // 키보드 네비게이션
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation,
+    handleMouseMove,
+    isKeyboardNavigation,
     // 유틸리티
-    updatePosition: updatePosition
+    updatePosition
   };
 };
 exports.useDropdown = useDropdown;

package/dist/cjs/src/hooks/dropdown/useDropdownKeyboard.js

@@ -6,32 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDropdownKeyboard = void 0;
 var _react = require("react");
 var _dropdown = require("../../utils/dropdown");
+const SCROLL_DELAY_MS = 100;
 /**
  * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
  */
-var useDropdownKeyboard = function (config) {
-  var isOpen = config.isOpen,
-    disabled = config.disabled,
-    focusedIndex = config.focusedIndex,
-    optionItems = config.optionItems,
-    onToggle = config.onToggle,
-    onSelect = config.onSelect,
-    onClose = config.onClose,
-    onFocusChange = config.onFocusChange,
-    triggerRef = config.triggerRef,
-    dropdownRef = config.dropdownRef;
+const useDropdownKeyboard = config => {
+  const {
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle,
+    onSelect,
+    onClose,
+    onFocusChange,
+    triggerRef,
+    dropdownRef
+  } = config;
   // 키보드 네비게이션 플래그
-  var isKeyboardNavigationRef = (0, _react.useRef)(false);
+  const isKeyboardNavigationRef = (0, _react.useRef)(false);
   // 포커스된 옵션이 보이도록 스크롤 조정
-  var scrollToFocusedOption = (0, _react.useCallback)(function (index) {
-    if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || index < 0) return;
-    var optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
+  const scrollToFocusedOption = (0, _react.useCallback)(index => {
+    if (!dropdownRef?.current || index < 0) return;
+    const optionsList = dropdownRef.current.querySelector('.ncua-select-dropdown__options');
     if (!optionsList) return;
-    var options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
-    var focusedOption = options[index];
+    const options = optionsList.querySelectorAll('.ncua-select-dropdown__option');
+    const focusedOption = options[index];
     if (!focusedOption) return;
-    var optionsListRect = optionsList.getBoundingClientRect();
-    var focusedOptionRect = focusedOption.getBoundingClientRect();
+    const optionsListRect = optionsList.getBoundingClientRect();
+    const focusedOptionRect = focusedOption.getBoundingClientRect();
     // 옵션이 위쪽으로 벗어났을 때
     if (focusedOptionRect.top < optionsListRect.top) {
       optionsList.scrollTop = focusedOption.offsetTop;
@@ -41,91 +44,76 @@ var useDropdownKeyboard = function (config) {
       optionsList.scrollTop = focusedOption.offsetTop + focusedOption.offsetHeight - optionsList.clientHeight;
     }
   }, [dropdownRef]);
-  var handleKeyDown = (0, _react.useCallback)(function (e) {
-    var _a;
+  const handleEnterOrSpace = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    if (!isOpen) {
+      onToggle();
+    } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
+      onSelect(optionItems[focusedIndex]);
+    }
+  }, [isOpen, focusedIndex, optionItems, onToggle, onSelect]);
+  const handleEscape = (0, _react.useCallback)(e => {
+    if (isOpen) {
+      e.preventDefault();
+      onClose();
+      triggerRef?.current?.focus();
+    }
+  }, [isOpen, onClose, triggerRef]);
+  const handleArrowNavigation = (0, _react.useCallback)((e, direction) => {
+    e.preventDefault();
+    isKeyboardNavigationRef.current = true;
+    if (isOpen) {
+      const nextIndex = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, direction, optionItems.length);
+      onFocusChange(nextIndex);
+      setTimeout(() => scrollToFocusedOption(nextIndex), SCROLL_DELAY_MS);
+    } else {
+      onToggle();
+    }
+  }, [isOpen, focusedIndex, optionItems.length, onFocusChange, onToggle, scrollToFocusedOption]);
+  const handleHomeEnd = (0, _react.useCallback)((e, targetIndex) => {
+    if (isOpen) {
+      e.preventDefault();
+      isKeyboardNavigationRef.current = true;
+      onFocusChange(targetIndex);
+      setTimeout(() => scrollToFocusedOption(targetIndex), 0);
+    }
+  }, [isOpen, onFocusChange, scrollToFocusedOption]);
+  const handleKeyDown = (0, _react.useCallback)(e => {
     if (disabled) return;
     switch (e.key) {
       case 'Enter':
       case ' ':
-        e.preventDefault();
-        if (!isOpen) {
-          onToggle();
-        } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
-          onSelect(optionItems[focusedIndex]);
-        }
+        handleEnterOrSpace(e);
         break;
       case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          onClose();
-          (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        handleEscape(e);
         break;
       case 'ArrowDown':
-        e.preventDefault();
-        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-        if (!isOpen) {
-          onToggle();
-        } else {
-          var nextIndex_1 = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, 'down', optionItems.length);
-          onFocusChange(nextIndex_1);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(nextIndex_1);
-          }, 100);
-        }
+        handleArrowNavigation(e, 'down');
         break;
       case 'ArrowUp':
-        e.preventDefault();
-        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-        if (!isOpen) {
-          onToggle();
-        } else {
-          var nextIndex_2 = (0, _dropdown.calculateNextFocusIndex)(focusedIndex, 'up', optionItems.length);
-          onFocusChange(nextIndex_2);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(nextIndex_2);
-          }, 100);
-        }
+        handleArrowNavigation(e, 'up');
         break;
       case 'Home':
-        if (isOpen) {
-          e.preventDefault();
-          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-          onFocusChange(0);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(0);
-          }, 0);
-        }
+        handleHomeEnd(e, 0);
         break;
       case 'End':
-        if (isOpen) {
-          e.preventDefault();
-          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-          var lastIndex_1 = optionItems.length - 1;
-          onFocusChange(lastIndex_1);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(lastIndex_1);
-          }, 0);
-        }
+        handleHomeEnd(e, optionItems.length - 1);
         break;
     }
-  }, [disabled, isOpen, focusedIndex, optionItems, onToggle, onSelect, onClose, onFocusChange, triggerRef, scrollToFocusedOption]);
+  }, [disabled, optionItems.length, handleEnterOrSpace, handleEscape, handleArrowNavigation, handleHomeEnd]);
   // 마우스 움직임 감지 함수
-  var handleMouseMove = (0, _react.useCallback)(function () {
+  const handleMouseMove = (0, _react.useCallback)(() => {
     isKeyboardNavigationRef.current = false;
   }, []);
   // 키보드 네비게이션 상태 확인 함수
-  var isKeyboardNavigation = (0, _react.useCallback)(function () {
+  const isKeyboardNavigation = (0, _react.useCallback)(() => {
     return isKeyboardNavigationRef.current;
   }, []);
   return {
-    handleKeyDown: handleKeyDown,
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
   };
 };
 exports.useDropdownKeyboard = useDropdownKeyboard;

package/dist/cjs/src/hooks/dropdown/useDropdownPosition.js

@@ -9,19 +9,17 @@ var _dropdown = require("../../utils/dropdown");
 /**
  * 드롭다운 위치 계산을 위한 커스텀 훅
  */
-var useDropdownPosition = function (config) {
-  var _a = (0, _react.useState)('down'),
-    direction = _a[0],
-    setDirection = _a[1];
-  var updatePosition = (0, _react.useCallback)(function () {
-    var result = (0, _dropdown.calculateDropdownPosition)(config);
+const useDropdownPosition = config => {
+  const [direction, setDirection] = (0, _react.useState)('down');
+  const updatePosition = (0, _react.useCallback)(() => {
+    const result = (0, _dropdown.calculateDropdownPosition)(config);
     setDirection(result.direction);
     return result;
   }, [config]);
   return {
-    direction: direction,
-    updatePosition: updatePosition,
-    setDirection: setDirection
+    direction,
+    updatePosition,
+    setDirection
   };
 };
 exports.useDropdownPosition = useDropdownPosition;

package/dist/cjs/src/hooks/dropdown/useOutsideClick.js

@@ -8,24 +8,24 @@ var _react = require("react");
 /**
  * 외부 클릭 감지를 위한 커스텀 훅
  */
-var useOutsideClick = function (config) {
-  var isOpen = config.isOpen,
-    refs = config.refs,
-    onClose = config.onClose;
-  (0, _react.useEffect)(function () {
+const useOutsideClick = config => {
+  const {
+    isOpen,
+    refs,
+    onClose
+  } = config;
+  (0, _react.useEffect)(() => {
     if (!isOpen) return;
-    var handleClickOutside = function (event) {
-      var target = event.target;
+    const handleClickOutside = event => {
+      const target = event.target;
       // 모든 ref들에 대해 클릭이 외부에서 발생했는지 확인
-      var isOutside = refs.every(function (ref) {
-        return !ref.current || !ref.current.contains(target);
-      });
+      const isOutside = refs.every(ref => !ref.current || !ref.current.contains(target));
       if (isOutside) {
         onClose();
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
-    return function () {
+    return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, refs, onClose]);

package/dist/cjs/src/hooks/dropdown/useScrollLock.js

@@ -6,39 +6,52 @@ Object.defineProperty(exports, "__esModule", {
 exports.useScrollLock = void 0;
 var _react = require("react");
 var _utils = require("../../utils");
+const SCROLL_KEYS = ['PageUp', 'PageDown', 'Home', 'End', ' '];
+/** 이벤트 대상이 드롭다운 내부에 있는지 확인 */
+function isInsideDropdown(target, dropdownRef) {
+  return !!dropdownRef?.current && dropdownRef.current.contains(target);
+}
+/** 스크롤 가능한 요소의 경계에 도달했는지 확인하고, 도달했으면 이벤트 차단 */
+function preventScrollBeyondBounds(e, scrollableElement) {
+  const {
+    deltaY
+  } = e;
+  const {
+    scrollTop,
+    scrollHeight,
+    clientHeight
+  } = scrollableElement;
+  // 스크롤이 위쪽 끝에 도달했고 위로 스크롤하려는 경우
+  if (scrollTop === 0 && deltaY < 0) {
+    e.preventDefault();
+    return;
+  }
+  // 스크롤이 아래쪽 끝에 도달했고 아래로 스크롤하려는 경우
+  if (scrollTop + clientHeight >= scrollHeight && deltaY > 0) {
+    e.preventDefault();
+  }
+}
 /**
  * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
  */
-var useScrollLock = function (isLocked, dropdownRef) {
-  var scrollPosition = (0, _react.useRef)(0);
-  (0, _react.useEffect)(function () {
+const useScrollLock = (isLocked, dropdownRef) => {
+  const scrollPosition = (0, _react.useRef)(0);
+  (0, _react.useEffect)(() => {
     if (isLocked) {
       // 현재 스크롤 위치 저장
       scrollPosition.current = window.pageYOffset;
       // 스크롤 방지 함수 (드롭다운 내부는 스크롤 체이닝 방지)
-      var preventScroll_1 = function (e) {
+      const preventScroll = e => {
         // 드롭다운 내부에서 발생하지 않은 이벤트는 차단
-        if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || !dropdownRef.current.contains(e.target)) {
+        if (!isInsideDropdown(e.target, dropdownRef)) {
           e.preventDefault();
           return;
         }
         // 드롭다운 내부의 스크롤 가능한 요소 찾기
-        var scrollableElement = (0, _utils.findScrollableParent)(e.target, dropdownRef.current);
+        const scrollableElement = (0, _utils.findScrollableParent)(e.target, dropdownRef.current);
         if (scrollableElement && e instanceof WheelEvent) {
-          var deltaY = e.deltaY;
-          var scrollTop = scrollableElement.scrollTop,
-            scrollHeight = scrollableElement.scrollHeight,
-            clientHeight = scrollableElement.clientHeight;
-          // 스크롤이 위쪽 끝에 도달했고 위로 스크롤하려는 경우
-          if (scrollTop === 0 && deltaY < 0) {
-            e.preventDefault();
-            return;
-          }
-          // 스크롤이 아래쪽 끝에 도달했고 아래로 스크롤하려는 경우
-          if (scrollTop + clientHeight >= scrollHeight && deltaY > 0) {
-            e.preventDefault();
-            return;
-          }
+          preventScrollBeyondBounds(e, scrollableElement);
+          return;
         }
         // 드롭다운 내부에 스크롤 가능한 요소가 없으면 차단
         if (!scrollableElement) {
@@ -46,29 +59,27 @@ var useScrollLock = function (isLocked, dropdownRef) {
         }
       };
       // 키보드 스크롤 방지 함수 (드롭다운 내부는 제외)
-      var preventKeyboardScroll_1 = function (e) {
-        // 드롭다운 내부에서 발생한 이벤트는 허용
-        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(e.target)) {
+      const preventKeyboardScroll = e => {
+        if (isInsideDropdown(e.target, dropdownRef)) {
           return;
         }
-        var scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', ' '];
-        if (scrollKeys.includes(e.key)) {
+        if (SCROLL_KEYS.includes(e.key)) {
           e.preventDefault();
         }
       };
       // 이벤트 리스너 추가
-      document.addEventListener('wheel', preventScroll_1, {
+      document.addEventListener('wheel', preventScroll, {
         passive: false
       });
-      document.addEventListener('touchmove', preventScroll_1, {
+      document.addEventListener('touchmove', preventScroll, {
         passive: false
       });
-      document.addEventListener('keydown', preventKeyboardScroll_1);
-      return function () {
+      document.addEventListener('keydown', preventKeyboardScroll);
+      return () => {
         // 이벤트 리스너 제거
-        document.removeEventListener('wheel', preventScroll_1);
-        document.removeEventListener('touchmove', preventScroll_1);
-        document.removeEventListener('keydown', preventKeyboardScroll_1);
+        document.removeEventListener('wheel', preventScroll);
+        document.removeEventListener('touchmove', preventScroll);
+        document.removeEventListener('keydown', preventKeyboardScroll);
         // 스크롤 위치 복원
         window.scrollTo(0, scrollPosition.current);
       };

package/dist/cjs/src/hooks/dropdown/useWindowResize.js

@@ -11,37 +11,36 @@ var _react = require("react");
  * @param isActive 옵저버 활성화 여부
  * @param target 관찰할 대상 요소 (기본값: document.body)
  */
-var useWindowResize = function (callback, isActive, target) {
-  if (isActive === void 0) {
-    isActive = true;
-  }
-  var resizeObserverRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+const useWindowResize = function (callback) {
+  let isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let target = arguments.length > 2 ? arguments[2] : undefined;
+  const resizeObserverRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
     if (!isActive) return;
     // Resize Observer 지원 여부 확인
     if (!window.ResizeObserver) {
       // Resize Observer를 지원하지 않는 브라우저의 경우 기존 방식 사용
-      var handleResize_1 = function () {
+      const handleResize = () => {
         callback();
       };
-      window.addEventListener('resize', handleResize_1);
-      return function () {
-        window.removeEventListener('resize', handleResize_1);
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
       };
     }
     // Resize Observer 생성
-    resizeObserverRef.current = new ResizeObserver(function (entries) {
+    resizeObserverRef.current = new ResizeObserver(entries => {
       // entries가 비어있지 않을 때만 콜백 실행
       if (entries.length > 0) {
         callback();
       }
     });
     // 관찰할 대상 요소 결정
-    var targetElement = target || document.body;
+    const targetElement = target || document.body;
     if (targetElement) {
       resizeObserverRef.current.observe(targetElement);
     }
-    return function () {
+    return () => {
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;

package/dist/cjs/src/hooks/index.js

@@ -26,9 +26,6 @@ Object.defineProperty(exports, "useMergeRefs", {
     return _useMergeRefs.useMergeRefs;
   }
 });
-var _useCallbackRef = require("./useCallbackRef");
-var _useMediaQuery = require("./useMediaQuery");
-var _useMergeRefs = require("./useMergeRefs");
 var _dropdown = require("./dropdown");
 Object.keys(_dropdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -40,4 +37,7 @@ Object.keys(_dropdown).forEach(function (key) {
       return _dropdown[key];
     }
   });
-});
+});
+var _useCallbackRef = require("./useCallbackRef");
+var _useMediaQuery = require("./useMediaQuery");
+var _useMergeRefs = require("./useMergeRefs");

package/dist/cjs/src/hooks/useCallbackRef.js

@@ -32,8 +32,8 @@ var _react = require("react");
  * ```
  */
 function useCallbackRef(callback) {
-  var cleanupRef = (0, _react.useRef)();
-  return (0, _react.useCallback)(function (node) {
+  const cleanupRef = (0, _react.useRef)();
+  return (0, _react.useCallback)(node => {
     // Cleanup previous ref
     if (cleanupRef.current) {
       cleanupRef.current();

package/dist/cjs/src/hooks/useMediaQuery.js

@@ -5,25 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useMediaQuery = void 0;
 var _react = require("react");
-var useMediaQuery = function (query, options) {
-  var _a = (0, _react.useState)(false),
-    matches = _a[0],
-    setMatches = _a[1];
-  (0, _react.useEffect)(function () {
-    var mediaQuery = window.matchMedia(query);
+const useMediaQuery = (query, options) => {
+  const [matches, setMatches] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const mediaQuery = window.matchMedia(query);
     setMatches(mediaQuery.matches);
-    var handleChange = function (e) {
-      var _a;
+    const handleChange = e => {
       setMatches(e.matches);
       if (e.matches) {
-        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+        options?.onMatched?.();
       }
     };
     mediaQuery.addEventListener('change', handleChange);
-    return function () {
+    return () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
-  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  }, [query, options?.onMatched]);
   return matches;
 };
 exports.useMediaQuery = useMediaQuery;

package/dist/cjs/src/hooks/useMergeRefs.js

@@ -22,8 +22,8 @@ exports.useMergeRefs = useMergeRefs;
  * ```
  */
 function useMergeRefs(refs) {
-  return function (node) {
-    refs.forEach(function (ref) {
+  return node => {
+    refs.forEach(ref => {
       if (ref) {
         if (typeof ref === 'function') {
           ref(node);