maru_design2 3.1.1 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [3.2.0](https://github.com/42maru-ai/maru-design2/compare/v3.1.1...v3.2.0) (2026-09-10)
+
+
+### Features
+
+* support localized pagination labels and formatters ([5cd30a8](https://github.com/42maru-ai/maru-design2/commit/5cd30a8a01c60974a90dd0f7e8c827d1e2f28415))
+
+
+### Bug Fixes
+
+* align modal footer buttons with shared button styles ([5084958](https://github.com/42maru-ai/maru-design2/commit/5084958685415ed0083009ed4c5a06cde996e791))
+* prevent dropdown tooltips from covering adjacent options ([6d3cb7a](https://github.com/42maru-ai/maru-design2/commit/6d3cb7a0e6d8a938911fffa69d3591e0895f0b7d))
+
 ## [3.1.1](https://github.com/42maru-ai/maru-design2/compare/v3.1.0...v3.1.1) (2026-09-09)
 
 

package/dist/components/molecules/modal/Modal.d.ts

@@ -16,7 +16,7 @@ export interface ModalProps {
      */
     backdrop?: boolean;
     /**
-     * 모달 취소버튼 설정
+     * 모달 취소버튼 설정. 공통 Button의 secondary / outline / large를 사용합니다.
      */
     cancelButton?: {
         content: string;
@@ -45,7 +45,7 @@ export interface ModalProps {
      */
     icon?: React.ReactNode;
     /**
-     * 모달 확인버튼 설정 (@v1 confirmButton)
+     * 모달 확인버튼 설정 (@v1 confirmButton). 공통 Button의 default / large를 사용합니다.
      */
     okButton?: {
         content: string;

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -1,6 +1,29 @@
 import React from 'react';
 import './pagination.scss';
 export type PaginationVariant = 'default' | 'simple' | 'number';
+export interface PaginationLabels {
+    /** 이전 버튼의 표시 문구. @default '이전' */
+    previous: string;
+    /** 다음 버튼의 표시 문구. @default '다음' */
+    next: string;
+    /** 첫 페이지 버튼의 접근성 이름. @default '첫 페이지' */
+    firstPage: string;
+    /** 이전 페이지 버튼의 접근성 이름. @default '이전 페이지' */
+    previousPage: string;
+    /** 다음 페이지 버튼의 접근성 이름. @default '다음 페이지' */
+    nextPage: string;
+    /** 마지막 페이지 버튼의 접근성 이름. @default '마지막 페이지' */
+    lastPage: string;
+    /** 페이지 입력의 접근성 이름. @default '현재 페이지' */
+    currentPage: string;
+    /** 페이지 크기 선택의 접근성 이름. @default '페이지당 항목 수' */
+    pageSize: string;
+}
+export interface PaginationSummary {
+    totalCount: number;
+    rangeStart: number;
+    rangeEnd: number;
+}
 export interface PaginationProps {
     /** 현재 페이지 (1부터 시작). */
     page: number;
@@ -26,8 +49,16 @@ export interface PaginationProps {
     buttonVisibility?: 'visible' | 'hidden';
     /** 전체 페이지 수 뒤에 붙는 문구. @default '페이지' */
     label?: string;
+    /** 표시 문구와 접근성 이름. 생략한 항목은 기존 한국어 문구를 사용합니다. */
+    labels?: Partial<PaginationLabels>;
+    /** 기본형의 전체 범위 문구. totalCount가 있을 때만 정규화된 수치로 호출합니다. */
+    formatSummary?: (summary: PaginationSummary) => React.ReactNode;
+    /** 페이지 크기 선택 문구. 기본값은 `${size}개 씩`입니다. */
+    formatPageSize?: (size: number) => string;
+    /** 번호 버튼의 접근성 이름. 기본값은 `${page} 페이지`입니다. */
+    formatPageAriaLabel?: (page: number) => string;
     /** 탐색 영역의 접근성 이름. @default '페이지네이션' */
     'aria-label'?: string;
     className?: string;
 }
-export declare function Pagination({ page, onPageChange, totalPage, variant, totalCount, pageSize, pageSizeOptions, onPageSizeChange, divider, disabled, buttonVisibility, label, 'aria-label': ariaLabel, className, }: PaginationProps): React.JSX.Element;
+export declare function Pagination({ page, onPageChange, totalPage, variant, totalCount, pageSize, pageSizeOptions, onPageSizeChange, divider, disabled, buttonVisibility, label, labels, formatSummary, formatPageSize, formatPageAriaLabel, 'aria-label': ariaLabel, className, }: PaginationProps): React.JSX.Element;

package/dist/index.js

@@ -90282,7 +90282,7 @@ function MenuItem$1(_a) {
   var overflow = useOverflow(textRef, item[displayKey]);
   return jsx(Tooltip, __assign({
     content: item[displayKey],
-    direction: "bottom-start",
+    direction: "right-start",
     hidden: !overflow,
     portal: true
   }, {
@@ -91794,12 +91794,16 @@ function Modal(_a) {
         }, {
           children: [cancelButton && jsx(Button, __assign({
             color: "secondary",
+            variant: "outline",
+            size: "large",
             onClick: handleClose,
             disabled: cancelButton.disabled
           }, {
             children: cancelButton.content
           })), okButton && jsx(Button, __assign({
             color: okButton.color || 'primary',
+            variant: "default",
+            size: "large",
             onClick: handleOkButtonClick,
             disabled: okButton.disabled
           }, {
@@ -92686,27 +92690,39 @@ function getPageItems(page, total) {
   return items;
 }
 function Pagination(_a) {
+  var _b, _c;
   var page = _a.page,
     onPageChange = _a.onPageChange,
     totalPage = _a.totalPage,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'default' : _b,
+    _d = _a.variant,
+    variant = _d === void 0 ? 'default' : _d,
     totalCount = _a.totalCount,
-    _c = _a.pageSize,
-    pageSize = _c === void 0 ? 30 : _c,
-    _d = _a.pageSizeOptions,
-    pageSizeOptions = _d === void 0 ? [15, 30, 50, 100] : _d,
+    _e = _a.pageSize,
+    pageSize = _e === void 0 ? 30 : _e,
+    _f = _a.pageSizeOptions,
+    pageSizeOptions = _f === void 0 ? [15, 30, 50, 100] : _f,
     onPageSizeChange = _a.onPageSizeChange,
-    _e = _a.divider,
-    divider = _e === void 0 ? true : _e,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
-    _g = _a.buttonVisibility,
-    buttonVisibility = _g === void 0 ? 'visible' : _g,
-    _h = _a.label,
-    label = _h === void 0 ? '페이지' : _h,
-    _j = _a["aria-label"],
-    ariaLabel = _j === void 0 ? '페이지네이션' : _j,
+    _g = _a.divider,
+    divider = _g === void 0 ? true : _g,
+    _h = _a.disabled,
+    disabled = _h === void 0 ? false : _h,
+    _j = _a.buttonVisibility,
+    buttonVisibility = _j === void 0 ? 'visible' : _j,
+    _k = _a.label,
+    label = _k === void 0 ? '페이지' : _k,
+    _l = _a.labels,
+    labels = _l === void 0 ? {} : _l,
+    formatSummary = _a.formatSummary,
+    _m = _a.formatPageSize,
+    formatPageSize = _m === void 0 ? function (value) {
+      return "".concat(value, "\uAC1C \uC529");
+    } : _m,
+    _o = _a.formatPageAriaLabel,
+    formatPageAriaLabel = _o === void 0 ? function (value) {
+      return "".concat(value, " \uD398\uC774\uC9C0");
+    } : _o,
+    _p = _a["aria-label"],
+    ariaLabel = _p === void 0 ? '페이지네이션' : _p,
     className = _a.className;
   var total = nonNegativeInteger(totalPage);
   var currentPage = total === 0 ? 0 : Math.min(total, Math.max(1, nonNegativeInteger(page)));
@@ -92714,9 +92730,9 @@ function Pagination(_a) {
   var count = totalCount == null ? undefined : nonNegativeInteger(totalCount);
   var rangeEnd = count == null ? 0 : Math.min(currentPage * size, count);
   var rangeStart = rangeEnd === 0 ? 0 : Math.min((currentPage - 1) * size + 1, rangeEnd);
-  var _k = useState(String(currentPage)),
-    inputValue = _k[0],
-    setInputValue = _k[1];
+  var _q = useState(String(currentPage)),
+    inputValue = _q[0],
+    setInputValue = _q[1];
   var dirty = useRef(false);
   var pointerNavigation = useRef(false);
   useEffect(function () {
@@ -92741,14 +92757,15 @@ function Pagination(_a) {
     }
   };
   var navigationButton = function navigationButton(direction) {
+    var _a, _b, _c, _d, _e, _f;
     var backwards = direction === 'first' || direction === 'previous';
     var atBoundary = total <= 1 || (backwards ? currentPage === 1 : currentPage === total);
     var isDefault = variant === 'default';
     var names = {
-      first: '첫 페이지',
-      previous: '이전 페이지',
-      next: '다음 페이지',
-      last: '마지막 페이지'
+      first: (_a = labels.firstPage) !== null && _a !== void 0 ? _a : '첫 페이지',
+      previous: (_b = labels.previousPage) !== null && _b !== void 0 ? _b : '이전 페이지',
+      next: (_c = labels.nextPage) !== null && _c !== void 0 ? _c : '다음 페이지',
+      last: (_d = labels.lastPage) !== null && _d !== void 0 ? _d : '마지막 페이지'
     };
     var icons = {
       first: img$5,
@@ -92783,7 +92800,7 @@ function Pagination(_a) {
         return requestPage(targets[direction]);
       }
     }, {
-      children: isDefault ? undefined : backwards ? '이전' : '다음'
+      children: isDefault ? undefined : backwards ? (_e = labels.previous) !== null && _e !== void 0 ? _e : '이전' : (_f = labels.next) !== null && _f !== void 0 ? _f : '다음'
     }));
   };
   return jsx("nav", __assign({
@@ -92805,22 +92822,28 @@ function Pagination(_a) {
       className: "maru-pagination"
     }, {
       children: [variant === 'default' && jsxs(Fragment, {
-        children: [count != null && jsxs("span", __assign({
+        children: [count != null && jsx("span", __assign({
           className: "maru-pagination-summary",
           "aria-live": "polite",
           "aria-atomic": "true"
         }, {
-          children: [jsxs("span", __assign({
-            className: "maru-pagination-count"
-          }, {
-            children: [jsx("span", {
-              children: count
-            }), jsx("span", {
-              children: "\uAC1C \uC911"
+          children: formatSummary ? formatSummary({
+            totalCount: count,
+            rangeStart: rangeStart,
+            rangeEnd: rangeEnd
+          }) : jsxs(Fragment, {
+            children: [jsxs("span", __assign({
+              className: "maru-pagination-count"
+            }, {
+              children: [jsx("span", {
+                children: count
+              }), jsx("span", {
+                children: "\uAC1C \uC911"
+              })]
+            })), jsx("span", {
+              children: "".concat(rangeStart, "-").concat(rangeEnd)
             })]
-          })), jsx("span", {
-            children: "".concat(rangeStart, "-").concat(rangeEnd)
-          })]
+          })
         })), jsxs("div", __assign({
           className: "maru-pagination-controls"
         }, {
@@ -92831,7 +92854,7 @@ function Pagination(_a) {
               className: "maru-pagination-input",
               type: "number",
               inputMode: "numeric",
-              "aria-label": "\uD604\uC7AC \uD398\uC774\uC9C0",
+              "aria-label": (_b = labels.currentPage) !== null && _b !== void 0 ? _b : '현재 페이지',
               min: total === 0 ? 0 : 1,
               max: total,
               step: 1,
@@ -92886,7 +92909,7 @@ function Pagination(_a) {
             children: "".concat(currentPage, " / ").concat(total).concat(label ? " ".concat(label) : '')
           })), jsx(Dropdown, {
             className: "maru-pagination-size-select",
-            "aria-label": "\uD398\uC774\uC9C0\uB2F9 \uD56D\uBAA9 \uC218",
+            "aria-label": (_c = labels.pageSize) !== null && _c !== void 0 ? _c : '페이지당 항목 수',
             data: Array.from(new Set(__spreadArray([size], pageSizeOptions.filter(function (option) {
               return Number.isInteger(option) && option > 0;
             }), true))).sort(function (a, b) {
@@ -92894,7 +92917,7 @@ function Pagination(_a) {
             }).map(function (option) {
               return {
                 id: String(option),
-                text: "".concat(option, "\uAC1C \uC529")
+                text: formatPageSize(option)
               };
             }),
             selectedId: String(size),
@@ -92920,7 +92943,7 @@ function Pagination(_a) {
               color: "secondary",
               variant: "text",
               size: "small",
-              "aria-label": "".concat(item, " \uD398\uC774\uC9C0"),
+              "aria-label": formatPageAriaLabel(item),
               "aria-current": item === currentPage ? 'page' : undefined,
               disabled: disabled,
               onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",