@ncds/ui-admin 1.8.22-alpha.0 → 1.8.22-alpha.1

package/dist/temp/src/components/overlays/modal/Modal.d.ts

@@ -12,12 +12,14 @@ type ModalProps = {
     children: ReactNode;
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
+    showHeaderDivider?: boolean;
+    showActionsDivider?: boolean;
     className?: string;
     zIndex?: number;
 };
 declare const Modal: {
-    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
-    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
     Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Modal.Actions - The actions area of the modal
@@ -47,7 +49,7 @@ declare const Modal: {
      *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
-    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+    Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
 };
 type ModalHeaderProps = {
     children?: ReactNode;
@@ -60,7 +62,6 @@ type ModalHeaderProps = {
     align?: ModalHeaderAlign;
     title?: string | ReactNode;
     subtitle?: string | ReactNode;
-    showDivider?: boolean;
     hideCloseButton?: boolean;
 };
 type ModalContentProps = {
@@ -71,7 +72,6 @@ type ModalActionsProps = {
     className?: string;
     children: ReactNode;
     layout?: ModalActionsLayout;
-    showDivider?: boolean;
     align?: ModalActionsAlign;
     checkboxContent?: ReactNode;
 };

package/dist/temp/src/components/overlays/modal/Modal.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { ButtonCloseX } from '../../action/button/ButtonCloseX';
 import { FeaturedIcon } from '../../image-and-icons/featured-icon';
-const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
+const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, showHeaderDivider = false, showActionsDivider = false, className, zIndex, ...restProps }) => {
     const modalRef = useRef(null);
     const handleBackdropClick = (e) => {
         if (closeOnBackdropClick && e.target === e.currentTarget) {
@@ -28,13 +28,16 @@ const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick =
     }, [isOpen, closeOnEsc, onClose]);
     if (!isOpen)
         return null;
-    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 }) }));
+    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}`, {
+                'ncua-modal--divider-header': showHeaderDivider,
+                'ncua-modal--divider-actions': showActionsDivider,
+            }), children: children }) }));
     return ReactDOM.createPortal(modalContent, document.body);
 };
-Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', showDivider = false, hideCloseButton = false, }) => {
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
-                    'ncua-modal__header--close-button': !hideCloseButton,
-                }), 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" })] }));
+Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', hideCloseButton = false, }) => {
+    return (_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
+            'ncua-modal__header--close-button': !hideCloseButton,
+        }), 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 }))] }));
 };
 Modal.Content = ({ children, className }) => {
     return _jsx("div", { className: classnames('ncua-modal__content', className), children: children });
@@ -67,9 +70,9 @@ Modal.Content = ({ children, className }) => {
  *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
-Modal.Actions = ({ children, layout = 'vertical', showDivider = false, align = 'stretch', checkboxContent, className, }) => {
-    return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
-                    'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
-                }), 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 })] })] }));
+Modal.Actions = ({ children, layout = 'vertical', align = 'stretch', checkboxContent, className, }) => {
+    return (_jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
+            'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
+        }), 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 })] }));
 };
 export { Modal };

package/dist/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js

@@ -117,7 +117,7 @@ const PostcodeSearchModal = ({ open, onClose, zIndex, className, searchQuery, on
         event.preventDefault();
         handleSearch();
     };
-    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', {
+    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', {
                                 'is-fixed': hasResults && isContentScrolled,
                             }), 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: () => {
                                                 setSelectedKey(resultKey(result));