@ncds/ui-admin 1.3.0 → 1.4.1

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollLock = void 0;
+var _react = require("react");
+var _utils = require("../../utils");
+/**
+ * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
+ */
+var useScrollLock = function (isLocked, dropdownRef) {
+  var scrollPosition = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    if (isLocked) {
+      // 현재 스크롤 위치 저장
+      scrollPosition.current = window.pageYOffset;
+      // 스크롤 방지 함수 (드롭다운 내부는 스크롤 체이닝 방지)
+      var preventScroll_1 = function (e) {
+        // 드롭다운 내부에서 발생하지 않은 이벤트는 차단
+        if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || !dropdownRef.current.contains(e.target)) {
+          e.preventDefault();
+          return;
+        }
+        // 드롭다운 내부의 스크롤 가능한 요소 찾기
+        var 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;
+          }
+        }
+        // 드롭다운 내부에 스크롤 가능한 요소가 없으면 차단
+        if (!scrollableElement) {
+          e.preventDefault();
+        }
+      };
+      // 키보드 스크롤 방지 함수 (드롭다운 내부는 제외)
+      var preventKeyboardScroll_1 = function (e) {
+        // 드롭다운 내부에서 발생한 이벤트는 허용
+        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(e.target)) {
+          return;
+        }
+        var scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', ' '];
+        if (scrollKeys.includes(e.key)) {
+          e.preventDefault();
+        }
+      };
+      // 이벤트 리스너 추가
+      document.addEventListener('wheel', preventScroll_1, {
+        passive: false
+      });
+      document.addEventListener('touchmove', preventScroll_1, {
+        passive: false
+      });
+      document.addEventListener('keydown', preventKeyboardScroll_1);
+      return function () {
+        // 이벤트 리스너 제거
+        document.removeEventListener('wheel', preventScroll_1);
+        document.removeEventListener('touchmove', preventScroll_1);
+        document.removeEventListener('keydown', preventKeyboardScroll_1);
+        // 스크롤 위치 복원
+        window.scrollTo(0, scrollPosition.current);
+      };
+    }
+  }, [isLocked, dropdownRef]);
+};
+exports.useScrollLock = useScrollLock;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowResize = void 0;
+var _react = require("react");
+/**
+ * Resize Observer를 사용하여 요소의 크기 변화를 감지하는 커스텀 훅
+ * @param callback 크기 변화 시 실행될 콜백 함수
+ * @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 () {
+    if (!isActive) return;
+    // Resize Observer 지원 여부 확인
+    if (!window.ResizeObserver) {
+      // Resize Observer를 지원하지 않는 브라우저의 경우 기존 방식 사용
+      var handleResize_1 = function () {
+        callback();
+      };
+      window.addEventListener('resize', handleResize_1);
+      return function () {
+        window.removeEventListener('resize', handleResize_1);
+      };
+    }
+    // Resize Observer 생성
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
+      // entries가 비어있지 않을 때만 콜백 실행
+      if (entries.length > 0) {
+        callback();
+      }
+    });
+    // 관찰할 대상 요소 결정
+    var targetElement = target || document.body;
+    if (targetElement) {
+      resizeObserverRef.current.observe(targetElement);
+    }
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [callback, isActive, target]);
+};
+exports.useWindowResize = useWindowResize;

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

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useCallbackRef: true,
+  useMediaQuery: true,
+  useMergeRefs: true
+};
 Object.defineProperty(exports, "useCallbackRef", {
   enumerable: true,
   get: function () {
@@ -21,6 +26,18 @@ Object.defineProperty(exports, "useMergeRefs", {
     return _useMergeRefs.useMergeRefs;
   }
 });
+var _useCallbackRef = require("./useCallbackRef");
 var _useMediaQuery = require("./useMediaQuery");
 var _useMergeRefs = require("./useMergeRefs");
-var _useCallbackRef = require("./useCallbackRef");
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});

package/dist/cjs/src/types/dropdown/dropdown.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/src/types/dropdown/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});
+var _option = require("./option");
+Object.keys(_option).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _option[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _option[key];
+    }
+  });
+});

package/dist/cjs/src/types/dropdown/option.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});

package/dist/cjs/src/utils/date-picker.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.formatMinuteInput = exports.formatHourInput = exports.formatDateInput = void 0;
 exports.getDateFormat = getDateFormat;
 exports.getSubtractDate = getSubtractDate;
 exports.getToday = getToday;
@@ -23,4 +24,39 @@ function getSubtractDate(_a) {
     period = _a.period,
     unit = _a.unit;
   return (0, _moment.default)(date).subtract(period, unit).toDate();
-}
+}
+var formatDateInput = function (input) {
+  var dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
+  if (dateRegex.test(input)) {
+    // 20231112 -> 2023-11-12 형식으로 변환
+    var year = input.substring(0, 4);
+    var month = input.substring(4, 6);
+    var day = input.substring(6, 8);
+    return "".concat(year, "-").concat(month, "-").concat(day);
+  }
+  return input;
+};
+exports.formatDateInput = formatDateInput;
+var formatHourInput = function (input) {
+  var numbers = input.replace(/\D/g, '');
+  var hourStr = numbers.substring(0, 2);
+  var hourNum = parseInt(hourStr, 10);
+  if (hourNum >= 0 && hourNum <= 23) {
+    return hourStr;
+  }
+  return input;
+};
+exports.formatHourInput = formatHourInput;
+var formatMinuteInput = function (input) {
+  // 숫자만 추출
+  var numbers = input.replace(/\D/g, '');
+  // 2자리 숫자로 제한
+  var minuteStr = numbers.substring(0, 2);
+  var minuteNum = parseInt(minuteStr, 10);
+  // 00-59 범위 체크
+  if (minuteNum >= 0 && minuteNum <= 59) {
+    return minuteStr; // 2자리로 패딩
+  }
+  return input;
+};
+exports.formatMinuteInput = formatMinuteInput;

package/dist/cjs/src/utils/dropdown/dropdownUtils.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findScrollableParent = exports.calculateNextFocusIndex = exports.calculateDropdownPosition = exports.adjustDropdownPosition = void 0;
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+var calculateDropdownPosition = function (_a) {
+  var triggerRef = _a.triggerRef,
+    maxHeight = _a.maxHeight,
+    itemCount = _a.itemCount,
+    _b = _a.itemHeight,
+    itemHeight = _b === void 0 ? 40 : _b,
+    _c = _a.offset,
+    offset = _c === void 0 ? 20 : _c;
+  if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+    return {
+      direction: 'down',
+      maxHeight: maxHeight
+    };
+  }
+  var rect = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.getBoundingClientRect();
+  var viewportHeight = window.innerHeight;
+  var dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
+  // 아래쪽 공간이 충분한지 확인
+  var spaceBelow = viewportHeight - rect.bottom;
+  if (spaceBelow < dropdownHeight + offset) {
+    return {
+      direction: 'up',
+      maxHeight: maxHeight
+    };
+  } else {
+    return {
+      direction: 'down',
+      maxHeight: maxHeight
+    };
+  }
+};
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+exports.calculateDropdownPosition = calculateDropdownPosition;
+var calculateNextFocusIndex = function (currentIndex, direction, validOptionsLength) {
+  if (validOptionsLength === 0) return -1;
+  if (direction === 'down') {
+    return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
+  } else {
+    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
+  }
+};
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+exports.calculateNextFocusIndex = calculateNextFocusIndex;
+var adjustDropdownPosition = function (dropdownElement, triggerElement) {
+  var dropdownRect = dropdownElement.getBoundingClientRect();
+  var viewportWidth = window.innerWidth;
+  var viewportHeight = window.innerHeight;
+  // 좌우 위치 조정
+  if (dropdownRect.right > viewportWidth) {
+    var overflow = dropdownRect.right - viewportWidth;
+    dropdownElement.style.left = "".concat(-overflow - 10, "px");
+  }
+  if (dropdownRect.left < 0) {
+    dropdownElement.style.left = '10px';
+  }
+  // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
+  if (dropdownRect.bottom > viewportHeight) {
+    var overflow = dropdownRect.bottom - viewportHeight;
+    dropdownElement.style.maxHeight = "".concat(dropdownRect.height - overflow - 10, "px");
+  }
+};
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+exports.adjustDropdownPosition = adjustDropdownPosition;
+var findScrollableParent = function (element, boundary) {
+  var current = element;
+  while (current && current !== boundary && current !== document.body) {
+    var style = window.getComputedStyle(current);
+    var overflowY = style.overflowY;
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      var scrollHeight = current.scrollHeight,
+        clientHeight = current.clientHeight;
+      if (scrollHeight > clientHeight) {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  // boundary 자체가 스크롤 가능한지 확인
+  if (current === boundary) {
+    var style = window.getComputedStyle(boundary);
+    var overflowY = style.overflowY;
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      var scrollHeight = boundary.scrollHeight,
+        clientHeight = boundary.clientHeight;
+      if (scrollHeight > clientHeight) {
+        return boundary;
+      }
+    }
+  }
+  return null;
+};
+exports.findScrollableParent = findScrollableParent;

package/dist/cjs/src/utils/dropdown/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dropdownUtils = require("./dropdownUtils");
+Object.keys(_dropdownUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdownUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdownUtils[key];
+    }
+  });
+});
+var _multiSelect = require("./multiSelect");
+Object.keys(_multiSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _multiSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _multiSelect[key];
+    }
+  });
+});

package/dist/cjs/src/utils/dropdown/multiSelect.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiSelect = exports.removeTagFromSelected = exports.isAllItemsSelected = exports.handleSelectAllItems = exports.getSelectedTags = exports.getSelectAllButtonText = void 0;
+/**
+ * 전체 선택 상태를 확인하는 유틸 함수
+ */
+var isAllItemsSelected = function (selectedValues, options) {
+  if (options.length === 0) return false;
+  var validOptionIds = options.filter(function (option) {
+    return !option.disabled;
+  }).map(function (option) {
+    return option.id;
+  });
+  return validOptionIds.length > 0 && validOptionIds.every(function (id) {
+    return selectedValues.includes(id);
+  });
+};
+/**
+ * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
+ */
+exports.isAllItemsSelected = isAllItemsSelected;
+var getSelectAllButtonText = function (selectedValues, options, selectText, deselectText) {
+  if (selectText === void 0) {
+    selectText = '전체 선택';
+  }
+  if (deselectText === void 0) {
+    deselectText = '전체 해제';
+  }
+  return isAllItemsSelected(selectedValues, options) ? deselectText : selectText;
+};
+/**
+ * 전체 선택/해제를 처리하는 유틸 함수
+ */
+exports.getSelectAllButtonText = getSelectAllButtonText;
+var handleSelectAllItems = function (selectedValues, options) {
+  if (isAllItemsSelected(selectedValues, options)) {
+    // 전체 해제: 빈 배열 반환
+    return [];
+  }
+  // 전체 선택: 비활성화되지 않은 모든 옵션 ID 반환
+  return options.filter(function (option) {
+    return !option.disabled;
+  }).map(function (option) {
+    return option.id;
+  });
+};
+/**
+ * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
+ */
+exports.handleSelectAllItems = handleSelectAllItems;
+var getSelectedTags = function (selectedValues, options) {
+  return selectedValues.map(function (value) {
+    var option = options.find(function (opt) {
+      return opt.id === value;
+    });
+    return option ? {
+      id: option.id,
+      label: option.label || String(option.id)
+    } : null;
+  }).filter(function (tag) {
+    return tag !== null;
+  });
+};
+/**
+ * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
+ */
+exports.getSelectedTags = getSelectedTags;
+var removeTagFromSelected = function (selectedValues, tagIdToRemove) {
+  return selectedValues.filter(function (id) {
+    return id !== tagIdToRemove;
+  });
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ */
+exports.removeTagFromSelected = removeTagFromSelected;
+var useMultiSelect = function (selectedValues, options, selectText, deselectText) {
+  var isAllSelected = isAllItemsSelected(selectedValues, options);
+  var buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
+  var toggleSelectAll = function () {
+    return handleSelectAllItems(selectedValues, options);
+  };
+  var getSelectedTagsData = function () {
+    return getSelectedTags(selectedValues, options);
+  };
+  var removeTag = function (tagId) {
+    return removeTagFromSelected(selectedValues, tagId);
+  };
+  return {
+    isAllSelected: isAllSelected,
+    buttonText: buttonText,
+    toggleSelectAll: toggleSelectAll,
+    getSelectedTagsData: getSelectedTagsData,
+    removeTag: removeTag
+  };
+};
+exports.useMultiSelect = useMultiSelect;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _datePicker = require("./date-picker");
+Object.keys(_datePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _datePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _datePicker[key];
+    }
+  });
+});
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});