@nurihaus/web-design-system 3.6.0 → 3.7.0

package/dist/ai/components.md

@@ -1019,7 +1019,22 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 **언제 쓴다.** 삭제 확인처럼 제목, 설명, 버튼 두 개로 된 확인 대화상자에 쓴다. `ModalWithDoubleButton.Row`는 버튼을 가로로, `ModalWithDoubleButton.Column`은 세로로 배치하며, `left`와 `right`는 CTAButton props를 그대로 받는다.
 
-**쓰지 않는다.** `open` prop이 없고 렌더되는 동안 항상 보이므로, 표시 여부는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트한다. `showCloseIcon`의 X 아이콘은 클릭해도 동작이 없으므로 닫기 수단으로 쓰지 않는다. 일반 모달은 Modal 을 쓴다.
+**열고 닫기.** `open`·`onOpenChange`를 넘기면 부모가 열림을 정한다. 열리면 포커스가 창 안으로 들어가고, Esc·바깥 누름·X 아이콘(`showCloseIcon`)·두 버튼이 `onOpenChange(false)`를 부르며, 닫히면 포커스가 연 요소로 돌아온다. 바텀시트 안의 삭제 확인처럼 키보드로 닿아야 하는 곳은 이 방식으로 쓴다.
+
+```tsx
+<ModalWithDoubleButton.Row
+  open
+  onOpenChange={() => {}}
+  showCloseIcon
+  title="항목을 삭제할까요?"
+  left={{ text: '취소' }}
+  right={{ text: '삭제', onClick: () => {} }}
+/>
+```
+
+`open`을 넘기지 않으면 예전처럼 렌더되는 동안 항상 보이고 포커스를 가두지 않는다. 이때는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트하며, X 아이콘은 동작이 없다.
+
+**쓰지 않는다.** 제목·설명·버튼 두 개를 벗어나는 일반 모달은 Modal 을 쓴다.
 
 ```tsx
 <ModalWithDoubleButton.Row
@@ -1034,6 +1049,8 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
+| `open` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
 | `title` | `string` |  |  |
 | `subTitle` | `ReactNode` |  |  |
 | `titleIcon` | `ReactNode` |  |  |
@@ -1050,6 +1067,8 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
+| `open` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
 | `title` | `string` |  |  |
 | `subTitle` | `ReactNode` |  |  |
 | `titleIcon` | `ReactNode` |  |  |

package/dist/components/modal/modal-type.d.ts

@@ -10,6 +10,9 @@ export interface ModalRootProps {
 }
 export interface ModalContainerProps extends AsChildProps, StyleProps {
     forceMount?: true;
+    /** 열릴 때·닫힐 때 포커스를 옮기기 직전. Radix `Dialog.Content` 에 그대로 넘긴다 */
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
 }
 export interface ModalTriggerProps extends AsChildProps {
     className?: string;
@@ -27,6 +30,14 @@ export interface ModalCloseProps extends AsChildProps {
     className?: string;
 }
 export interface ModalWithDoubleButtonProps {
+    /**
+     * 넘기면 열림을 부모가 정한다. 열리면 포커스가 창 안으로 들어가고 닫히면 연 요소로 돌아오며,
+     * Esc·바깥 누름·X 아이콘·두 버튼이 `onOpenChange(false)` 를 부른다.
+     * 안 넘기면 예전처럼 렌더되는 동안 항상 보인다 (포커스를 가두지 않는다).
+     * `onOpenChange` 를 함께 넘겨야 닫힌다.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     title?: string;
     subTitle?: string | ReactNode;
     titleIcon?: ReactNode;

package/dist/components/skeleton/skeleton.stories.d.ts

@@ -38,10 +38,9 @@ declare const meta: {
         animated: true;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        slot?: string | undefined | undefined;
+        className?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
+        children?: import("react").ReactNode;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -49,7 +48,6 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -59,8 +57,10 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -143,7 +143,6 @@ declare const meta: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        children?: import("react").ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -305,6 +304,7 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+        key?: import("react").Key | null | undefined;
         height?: number | string | undefined;
         width?: number | string | undefined;
         shape?: (typeof shapes)[number] | undefined;

package/dist/components/toast/toast.stories.d.ts

@@ -17,12 +17,8 @@ declare const meta: {
         variant: "default";
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        slot?: string | undefined | undefined;
+        className?: string | undefined;
         style?: import("react").CSSProperties | undefined;
-        title: import("react").ReactNode;
-        track?: string | undefined;
-        key?: import("react").Key | null | undefined;
-        value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -30,7 +26,6 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -40,8 +35,10 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title: import("react").ReactNode;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -285,6 +282,9 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        value?: string | number | readonly string[] | undefined;
         variant?: (typeof variants)[number] | undefined;
         trackProps?: Record<string, string | number | boolean> | undefined;
         open?: boolean | undefined;

package/dist/components.css

@@ -2238,6 +2238,14 @@
   width: 100%;
 }
 
+/* open 을 넘기면 X 가 진짜 닫기 버튼이 된다. 버튼 기본 모양을 지워 예전 아이콘과 같게 보이게 한다 */
+
+button.modal-with-double-button-close-button {
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-grey-scale-600);
+}
+
 .modal-with-double-button-container.size-s {
     width: var(--modal-width-s);
   }

package/dist/index.js

@@ -3183,9 +3183,28 @@ var GHOST_SIDE = {
   row: 'left',
   column: 'right'
 };
+// Radix 는 Dialog.Trigger 로 열었을 때만 포커스를 돌려준다. 부모가 연 경우를 위해 연 요소를 기억한다
+var useReturnFocus = function useReturnFocus() {
+  var opener = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var rememberOpener = function rememberOpener() {
+    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  };
+  var returnFocus = function returnFocus(event) {
+    var _a;
+    if (!((_a = opener.current) === null || _a === void 0 ? void 0 : _a.isConnected)) return;
+    event.preventDefault();
+    opener.current.focus();
+  };
+  return {
+    rememberOpener: rememberOpener,
+    returnFocus: returnFocus
+  };
+};
 var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_8__/* .modalWithDoubleButtonProps */ .r4),
     layout = _a.layout,
+    open = _a.open,
+    onOpenChange = _a.onOpenChange,
     content = _a.content,
     title = _a.title,
     subTitle = _a.subTitle,
@@ -3195,16 +3214,32 @@ var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1
     right = _a.right,
     className = _a.className;
   var ghostSide = GHOST_SIDE[layout];
+  // open 을 넘기면 Radix 가 열림·포커스·Esc 를 맡는다. 안 넘기면 예전처럼 forceMount 로 늘 보인다.
+  var controlled = open !== undefined;
+  var _b = useReturnFocus(),
+    rememberOpener = _b.rememberOpener,
+    returnFocus = _b.returnFocus;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
+    open: open,
+    onOpenChange: onOpenChange,
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Container, {
       ref: ref,
       className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'modal-with-double-button-container'),
-      forceMount: true,
-      children: [showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      forceMount: controlled ? undefined : true,
+      onOpenAutoFocus: controlled ? rememberOpener : undefined,
+      onCloseAutoFocus: controlled ? returnFocus : undefined,
+      children: [showCloseIcon && (controlled ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
+        className: 'modal-with-double-button-close-button',
+        "aria-label": "\uB2EB\uAE30",
+        asChild: true,
+        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
+        })
+      }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
         className: 'modal-with-double-button-close-button',
         asChild: true,
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
-      }), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
+      })), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
         className: 'modal-with-double-button-title-icon',
         asChild: true,
         children: titleIcon

package/dist/modal-with-double-button.js

@@ -62,9 +62,28 @@ var GHOST_SIDE = {
   row: 'left',
   column: 'right'
 };
+// Radix 는 Dialog.Trigger 로 열었을 때만 포커스를 돌려준다. 부모가 연 경우를 위해 연 요소를 기억한다
+var useReturnFocus = function useReturnFocus() {
+  var opener = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var rememberOpener = function rememberOpener() {
+    opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  };
+  var returnFocus = function returnFocus(event) {
+    var _a;
+    if (!((_a = opener.current) === null || _a === void 0 ? void 0 : _a.isConnected)) return;
+    event.preventDefault();
+    opener.current.focus();
+  };
+  return {
+    rememberOpener: rememberOpener,
+    returnFocus: returnFocus
+  };
+};
 var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _modal_props__WEBPACK_IMPORTED_MODULE_8__/* .modalWithDoubleButtonProps */ .r4),
     layout = _a.layout,
+    open = _a.open,
+    onOpenChange = _a.onOpenChange,
     content = _a.content,
     title = _a.title,
     subTitle = _a.subTitle,
@@ -74,16 +93,32 @@ var ModalWithDoubleButtonBody = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1
     right = _a.right,
     className = _a.className;
   var ghostSide = GHOST_SIDE[layout];
+  // open 을 넘기면 Radix 가 열림·포커스·Esc 를 맡는다. 안 넘기면 예전처럼 forceMount 로 늘 보인다.
+  var controlled = open !== undefined;
+  var _b = useReturnFocus(),
+    rememberOpener = _b.rememberOpener,
+    returnFocus = _b.returnFocus;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {
+    open: open,
+    onOpenChange: onOpenChange,
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Container, {
       ref: ref,
       className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'modal-with-double-button-container'),
-      forceMount: true,
-      children: [showCloseIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      forceMount: controlled ? undefined : true,
+      onOpenAutoFocus: controlled ? rememberOpener : undefined,
+      onCloseAutoFocus: controlled ? returnFocus : undefined,
+      children: [showCloseIcon && (controlled ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Close, {
+        className: 'modal-with-double-button-close-button',
+        "aria-label": "\uB2EB\uAE30",
+        asChild: true,
+        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+          children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
+        })
+      }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_button_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
         className: 'modal-with-double-button-close-button',
         asChild: true,
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets_icons_multifly_svg__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A, {})
-      }), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
+      })), titleIcon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_modal__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A.Title, {
         className: 'modal-with-double-button-title-icon',
         asChild: true,
         children: titleIcon

package/dist/styles.css

@@ -2280,6 +2280,12 @@ p {
   align-items: center;
   width: 100%;
 }
+/* open 을 넘기면 X 가 진짜 닫기 버튼이 된다. 버튼 기본 모양을 지워 예전 아이콘과 같게 보이게 한다 */
+button.modal-with-double-button-close-button {
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-grey-scale-600);
+}
 .modal-with-double-button-container.size-s {
     width: var(--modal-width-s);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",