@ncds/ui-admin 1.8.22-alpha.3 → 1.8.22

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.
@@ -16,4 +16,4 @@ type BadgeProps = {
16
16
  };
17
17
  declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
18
18
  export { Badge };
19
- export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
19
+ export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
7
7
  */
8
8
  const BADGE_ICON_SIZE = 12;
9
9
  /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
10
- const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
10
+ const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
11
11
  const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
12
12
  // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
13
13
  // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
@@ -12,14 +12,12 @@ type ModalProps = {
12
12
  children: ReactNode;
13
13
  closeOnBackdropClick?: boolean;
14
14
  closeOnEsc?: boolean;
15
- showHeaderDivider?: boolean;
16
- showActionsDivider?: boolean;
17
15
  className?: string;
18
16
  zIndex?: number;
19
17
  };
20
18
  declare const Modal: {
21
- ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
22
- Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
19
+ ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
20
+ Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
23
21
  Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
24
22
  /**
25
23
  * Modal.Actions - The actions area of the modal
@@ -49,7 +47,7 @@ declare const Modal: {
49
47
  * <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
50
48
  * </Modal.Actions>
51
49
  */
52
- Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
50
+ Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
53
51
  };
54
52
  type ModalHeaderProps = {
55
53
  children?: ReactNode;
@@ -62,6 +60,7 @@ type ModalHeaderProps = {
62
60
  align?: ModalHeaderAlign;
63
61
  title?: string | ReactNode;
64
62
  subtitle?: string | ReactNode;
63
+ showDivider?: boolean;
65
64
  hideCloseButton?: boolean;
66
65
  };
67
66
  type ModalContentProps = {
@@ -72,6 +71,7 @@ type ModalActionsProps = {
72
71
  className?: string;
73
72
  children: ReactNode;
74
73
  layout?: ModalActionsLayout;
74
+ showDivider?: boolean;
75
75
  align?: ModalActionsAlign;
76
76
  checkboxContent?: ReactNode;
77
77
  };
@@ -1,10 +1,10 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import classnames from 'classnames';
3
3
  import { useEffect, useRef } from 'react';
4
4
  import ReactDOM from 'react-dom';
5
5
  import { ButtonCloseX } from '../../action/button/ButtonCloseX';
6
6
  import { FeaturedIcon } from '../../image-and-icons/featured-icon';
7
- const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, showHeaderDivider = false, showActionsDivider = false, className, zIndex, ...restProps }) => {
7
+ const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
8
8
  const modalRef = useRef(null);
9
9
  const handleBackdropClick = (e) => {
10
10
  if (closeOnBackdropClick && e.target === e.currentTarget) {
@@ -28,16 +28,13 @@ const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick =
28
28
  }, [isOpen, closeOnEsc, onClose]);
29
29
  if (!isOpen)
30
30
  return null;
31
- const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}`, {
32
- 'ncua-modal--divider-header': showHeaderDivider,
33
- 'ncua-modal--divider-actions': showActionsDivider,
34
- }), children: children }) }));
31
+ const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}`), children: children }) }));
35
32
  return ReactDOM.createPortal(modalContent, document.body);
36
33
  };
37
- Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', hideCloseButton = false, }) => {
38
- return (_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
39
- 'ncua-modal__header--close-button': !hideCloseButton,
40
- }), children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", { className: "ncua-modal__title", children: [_jsx("div", { className: "ncua-modal__title-text", children: title }), subtitle && _jsx("div", { className: "ncua-modal__title-subtitle", children: subtitle })] }), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] }));
34
+ Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', showDivider = false, hideCloseButton = false, }) => {
35
+ return (_jsxs(_Fragment, { children: [_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
36
+ 'ncua-modal__header--close-button': !hideCloseButton,
37
+ }), children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", { className: "ncua-modal__title", children: [_jsx("div", { className: "ncua-modal__title-text", children: title }), subtitle && _jsx("div", { className: "ncua-modal__title-subtitle", children: subtitle })] }), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] }), showDivider && _jsx("div", { className: "ncua-modal__header-divider" })] }));
41
38
  };
42
39
  Modal.Content = ({ children, className }) => {
43
40
  return _jsx("div", { className: classnames('ncua-modal__content', className), children: children });
@@ -70,9 +67,9 @@ Modal.Content = ({ children, className }) => {
70
67
  * <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
71
68
  * </Modal.Actions>
72
69
  */
73
- Modal.Actions = ({ children, layout = 'vertical', align = 'stretch', checkboxContent, className, }) => {
74
- return (_jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
75
- 'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
76
- }), children: [layout === 'checkbox' && (_jsx("div", { className: "ncua-modal__actions-checkbox", children: _jsx("div", { className: "ncua-modal__actions-checkbox-content", children: checkboxContent }) })), _jsx("div", { className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`), children: children })] }));
70
+ Modal.Actions = ({ children, layout = 'vertical', showDivider = false, align = 'stretch', checkboxContent, className, }) => {
71
+ return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
72
+ 'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
73
+ }), children: [layout === 'checkbox' && (_jsx("div", { className: "ncua-modal__actions-checkbox", children: _jsx("div", { className: "ncua-modal__actions-checkbox-content", children: checkboxContent }) })), _jsx("div", { className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`), children: children })] })] }));
77
74
  };
78
75
  export { Modal };
@@ -117,7 +117,7 @@ const PostcodeSearchModal = ({ open, onClose, zIndex, className, searchQuery, on
117
117
  event.preventDefault();
118
118
  handleSearch();
119
119
  };
120
- return (_jsxs(Modal, { isOpen: open, onClose: onClose, size: "md", zIndex: zIndex, className: className, showHeaderDivider: true, children: [_jsx(Modal.Header, { title: MODAL_TITLE, onClose: onClose }), _jsx(Modal.Content, { children: _jsxs("div", { className: "ncua-postcode-search-modal", ref: rootRef, children: [_jsxs("div", { className: classnames('ncua-postcode-search-modal__search-area', {
120
+ return (_jsxs(Modal, { isOpen: open, onClose: onClose, size: "md", zIndex: zIndex, className: className, children: [_jsx(Modal.Header, { title: MODAL_TITLE, onClose: onClose, showDivider: true }), _jsx(Modal.Content, { children: _jsxs("div", { className: "ncua-postcode-search-modal", ref: rootRef, children: [_jsxs("div", { className: classnames('ncua-postcode-search-modal__search-area', {
121
121
  'is-fixed': hasResults && isContentScrolled,
122
122
  }), children: [_jsxs("div", { className: "ncua-postcode-search-modal__search", children: [_jsx(InputBase, { className: "ncua-postcode-search-modal__search-input", size: "sm", fullWidth: true, value: searchQuery, clearText: !!searchQuery, onClearText: () => onSearchQueryChange(''), onChange: handleSearchQueryChange, onKeyDown: handleSearchKeyDown, placeholder: SEARCH_PLACEHOLDER, destructive: hasError, hintText: errorCode ? (ERROR_HINT[errorCode] ?? DEFAULT_ERROR_HINT) : undefined }), _jsx(Button, { className: "ncua-postcode-search-modal__search-button", label: SEARCH_BUTTON_LABEL, size: "sm", hierarchy: "secondary", onClick: handleSearch })] }), showSearchHint && (_jsxs("div", { children: [_jsx("p", { className: "ncua-postcode-search-modal__result-title", children: "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9 \uC2DC \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694." }), _jsx("p", { className: "ncua-postcode-search-modal__result-desc", children: "\uB3C4\uB85C\uBA85+\uAC74\uBB3C\uBC88\uD638, \uC9C0\uC5ED\uBA85+\uC9C0\uBC88, \uC9C0\uC5ED\uBA85+\uAC74\uBB3C\uBA85(\uC544\uD30C\uD2B8\uBA85)" })] }))] }), !hasResults && _jsx(PostcodeSearchModal.Tip, {}), hasResults && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "ncua-postcode-search-modal__count", children: ["\uAC80\uC0C9 ", _jsx("b", { children: totalCount }), "\uAC1C"] }), _jsx("ul", { className: "ncua-postcode-search-modal__list", children: results.map((result, index) => (_jsx("li", { className: "ncua-postcode-search-modal__item", children: _jsx(Radio, { name: RESULT_RADIO_NAME, value: result.zipCode, checked: selectedKey === resultKey(result), onChange: () => {
123
123
  setSelectedKey(resultKey(result));