@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/src/components/modal/Modal.js

@@ -1,48 +1,29 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon';
-export var Modal = function (_a) {
-  var isOpen = _a.isOpen,
-    onClose = _a.onClose,
-    children = _a.children,
-    _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
-    _c = _a.closeOnBackdropClick,
-    closeOnBackdropClick = _c === void 0 ? false : _c,
-    _d = _a.closeOnEsc,
-    closeOnEsc = _d === void 0 ? true : _d,
-    className = _a.className,
-    zIndex = _a.zIndex,
-    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
-  var modalRef = useRef(null);
-  var handleBackdropClick = function (e) {
+const Modal = _ref => {
+  let {
+    isOpen,
+    onClose,
+    children,
+    size = 'md',
+    closeOnBackdropClick = false,
+    closeOnEsc = true,
+    className,
+    zIndex,
+    ...restProps
+  } = _ref;
+  const modalRef = useRef(null);
+  const handleBackdropClick = e => {
     if (closeOnBackdropClick && e.target === e.currentTarget) {
       onClose();
     }
   };
-  useEffect(function () {
-    var handleKeyDown = function (e) {
+  useEffect(() => {
+    const handleKeyDown = e => {
       if (isOpen && closeOnEsc && e.key === 'Escape') {
         onClose();
       }
@@ -51,82 +32,77 @@ export var Modal = function (_a) {
       document.addEventListener('keydown', handleKeyDown);
       document.body.style.overflow = 'hidden';
     }
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handleKeyDown);
       document.body.style.overflow = '';
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  var modalContent = _jsx("div", __assign({
+  const modalContent = _jsx("div", {
     className: classnames('ncua-modal-backdrop', className),
     onClick: handleBackdropClick,
     ref: modalRef,
     style: zIndex ? {
-      zIndex: zIndex
-    } : undefined
-  }, restProps, {
-    children: _jsx("div", __assign({
-      className: classnames('ncua-modal', "ncua-modal--".concat(size))
-    }, {
+      zIndex
+    } : undefined,
+    ...restProps,
+    children: _jsx("div", {
+      className: classnames('ncua-modal', `ncua-modal--${size}`),
       children: children
-    }))
-  }));
+    })
+  });
   return /*#__PURE__*/ReactDOM.createPortal(modalContent, document.body);
 };
-Modal.Header = function (_a) {
-  var children = _a.children,
-    onClose = _a.onClose,
-    featuredIcon = _a.featuredIcon,
-    title = _a.title,
-    subtitle = _a.subtitle,
-    _b = _a.align,
-    align = _b === void 0 ? 'left' : _b,
-    _c = _a.showDivider,
-    showDivider = _c === void 0 ? false : _c,
-    _d = _a.hideCloseButton,
-    hideCloseButton = _d === void 0 ? false : _d;
+Modal.Header = _ref2 => {
+  let {
+    children,
+    onClose,
+    featuredIcon,
+    title,
+    subtitle,
+    align = 'left',
+    showDivider = false,
+    hideCloseButton = false
+  } = _ref2;
   return _jsxs(_Fragment, {
-    children: [_jsxs("header", __assign({
-      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align), {
+    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", __assign({
-        className: "ncua-modal__title"
-      }, {
-        children: [_jsx("div", __assign({
-          className: "ncua-modal__title-text"
-        }, {
+      }), _jsxs("div", {
+        className: "ncua-modal__title",
+        children: [_jsx("div", {
+          className: "ncua-modal__title-text",
           children: title
-        })), subtitle && _jsx("div", __assign({
-          className: "ncua-modal__title-subtitle"
-        }, {
+        }), subtitle && _jsx("div", {
+          className: "ncua-modal__title-subtitle",
           children: subtitle
-        }))]
-      })), children, !hideCloseButton && _jsx(ButtonCloseX, {
+        })]
+      }), children, !hideCloseButton && _jsx(ButtonCloseX, {
         className: "ncua-modal__close-button",
         size: "sm",
         theme: "light",
         onClick: onClose
       })]
-    })), showDivider && _jsx("div", {
+    }), showDivider && _jsx("div", {
       className: "ncua-modal__header-divider"
     })]
   });
 };
-Modal.Content = function (_a) {
-  var children = _a.children,
-    className = _a.className;
-  return _jsx("div", __assign({
-    className: classnames('ncua-modal__content', className)
-  }, {
+Modal.Content = _ref3 => {
+  let {
+    children,
+    className
+  } = _ref3;
+  return _jsx("div", {
+    className: classnames('ncua-modal__content', className),
     children: children
-  }));
+  });
 };
 /**
  * Modal.Actions - The actions area of the modal
@@ -156,37 +132,33 @@ Modal.Content = function (_a) {
  *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
  * </Modal.Actions>
  */
-Modal.Actions = function (_a) {
-  var children = _a.children,
-    _b = _a.layout,
-    layout = _b === void 0 ? 'vertical' : _b,
-    _c = _a.showDivider,
-    showDivider = _c === void 0 ? false : _c,
-    _d = _a.align,
-    align = _d === void 0 ? 'stretch' : _d,
-    checkboxContent = _a.checkboxContent,
-    className = _a.className;
+Modal.Actions = _ref4 => {
+  let {
+    children,
+    layout = 'vertical',
+    showDivider = false,
+    align = 'stretch',
+    checkboxContent,
+    className
+  } = _ref4;
   return _jsxs(_Fragment, {
     children: [showDivider && _jsx("div", {
       className: "ncua-modal__actions-divider"
-    }), _jsxs("div", __assign({
+    }), _jsxs("div", {
       className: classnames('ncua-modal__actions-wrapper', className, {
         'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
-      })
-    }, {
-      children: [layout === 'checkbox' && _jsx("div", __assign({
-        className: "ncua-modal__actions-checkbox"
-      }, {
-        children: _jsx("div", __assign({
-          className: "ncua-modal__actions-checkbox-content"
-        }, {
+      }),
+      children: [layout === 'checkbox' && _jsx("div", {
+        className: "ncua-modal__actions-checkbox",
+        children: _jsx("div", {
+          className: "ncua-modal__actions-checkbox-content",
           children: checkboxContent
-        }))
-      })), _jsx("div", __assign({
-        className: classnames('ncua-modal__actions', "ncua-modal__actions--".concat(layout), "ncua-modal__actions--".concat(align))
-      }, {
+        })
+      }), _jsx("div", {
+        className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`),
         children: children
-      }))]
-    }))]
+      })]
+    })]
   });
-};
+};
+export { Modal };

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -1,21 +1,3 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -25,43 +7,41 @@ import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { Button } from '../button';
 import { ButtonCloseX } from '../button/ButtonCloseX';
 import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-var iconMap = {
+const iconMap = {
   neutral: Pin02,
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle
   // info는 floating에서는 지원하지 않음
 };
-export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var title = _a.title,
-    supportingText = _a.supportingText,
-    _b = _a.color,
-    color = _b === void 0 ? 'neutral' : _b,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    _c = _a.autoClose,
-    autoClose = _c === void 0 ? 0 : _c,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
-  var _d = useState(false),
-    shouldRemove = _d[0],
-    setShouldRemove = _d[1];
-  var iconColor = color;
-  var featuredIconProps = {
+const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = useState(false);
+  const iconColor = color;
+  const featuredIconProps = {
     icon: iconMap[color] || Pin02,
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
   };
-  var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+  const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
   // autoClose 타이머 관리
-  var timerRef = useRef(null);
-  useEffect(function () {
+  const timerRef = useRef(null);
+  useEffect(() => {
     // autoClose가 0보다 크면 무조건 타이머 설정
     if (autoClose > 0) {
-      timerRef.current = setTimeout(function () {
+      timerRef.current = setTimeout(() => {
         if (onClose) {
           onClose();
         }
@@ -70,7 +50,7 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
       }, autoClose);
     }
     // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return function () {
+    return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
@@ -81,53 +61,46 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   if (shouldRemove) {
     return null;
   }
-  return _jsxs("div", __assign({
+  return _jsxs("div", {
     ref: ref,
-    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
-    role: "alert"
-  }, rest, {
-    children: [_jsx("div", __assign({
-      className: "ncua-floating-notification__content"
-    }, {
-      children: _jsxs("div", __assign({
-        className: "ncua-floating-notification__container"
-      }, {
-        children: [iconMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+    className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: [_jsx("div", {
+      className: "ncua-floating-notification__content",
+      children: _jsxs("div", {
+        className: "ncua-floating-notification__container",
+        children: [iconMap[color] && _jsx(FeaturedIcon, {
+          ...featuredIconProps,
           size: isMobile ? 'md' : 'sm'
-        })), _jsxs("div", __assign({
-          className: "ncua-floating-notification__text-container"
-        }, {
-          children: [_jsx("div", __assign({
-            className: "ncua-floating-notification__title-wrapper"
-          }, {
-            children: _jsx("span", __assign({
-              className: "ncua-floating-notification__title"
-            }, {
+        }), _jsxs("div", {
+          className: "ncua-floating-notification__text-container",
+          children: [_jsx("div", {
+            className: "ncua-floating-notification__title-wrapper",
+            children: _jsx("span", {
+              className: "ncua-floating-notification__title",
               children: title
-            }))
-          })), supportingText && _jsx("span", __assign({
-            className: "ncua-floating-notification__supporting-text"
-          }, {
-            children: supportingText
-          })), actions && _jsx("div", __assign({
-            className: "ncua-floating-notification__actions"
-          }, {
-            children: actions.map(function (action) {
-              return _jsx(Button, {
-                size: "xs",
-                hierarchy: action.hierarchy || 'text',
-                label: action.label,
-                onClick: action === null || action === void 0 ? void 0 : action.onClick
-              }, "".concat(action.label, "-").concat(action.hierarchy));
             })
-          }))]
-        }))]
-      }))
-    })), onClose && _jsx(ButtonCloseX, {
+          }), supportingText && _jsx("span", {
+            className: "ncua-floating-notification__supporting-text",
+            children: supportingText
+          }), actions && _jsx("div", {
+            className: "ncua-floating-notification__actions",
+            children: actions.map(action => _jsx(Button, {
+              size: "xs",
+              hierarchy: action.hierarchy || 'text',
+              label: action.label,
+              onClick: action?.onClick
+            }, `${action.label}-${action.hierarchy}`))
+          })]
+        })]
+      })
+    }), onClose && _jsx(ButtonCloseX, {
       theme: "light",
       className: "ncua-floating-notification__close-button",
       size: isMobile ? 'sm' : 'xs',
       onClick: onClose
     })]
-  }));
-});
+  });
+});
+export { FloatingNotification };

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -1,66 +1,46 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../constant/color';
-var iconMap = {
+const iconMap = {
   neutral: MessageChatSquare,
   error: AlertTriangle,
   warning: AlertTriangle,
   success: CheckCircle,
   info: InfoCircle
 };
-var iconColorMap = {
+const iconColorMap = {
   neutral: 'gray700',
   error: 'red500',
   warning: 'orange500',
   success: 'green600',
   info: 'violet600'
 };
-export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var title = _a.title,
-    supportingText = _a.supportingText,
-    _b = _a.color,
-    color = _b === void 0 ? 'neutral' : _b,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    _c = _a.autoClose,
-    autoClose = _c === void 0 ? 0 : _c,
-    supportTextLink = _a.supportTextLink,
-    onHidePermanently = _a.onHidePermanently,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose", "supportTextLink", "onHidePermanently"]);
-  var _d = useState(false),
-    shouldRemove = _d[0],
-    setShouldRemove = _d[1];
-  var closeIconSize = {
+const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    supportTextLink,
+    onHidePermanently,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = useState(false);
+  const closeIconSize = {
     width: 20,
     height: 20
   };
   // autoClose 타이머 관리
-  var timerRef = useRef(null);
-  useEffect(function () {
+  const timerRef = useRef(null);
+  useEffect(() => {
     // autoClose가 0보다 크면 무조건 타이머 설정
     if (autoClose > 0) {
-      timerRef.current = setTimeout(function () {
+      timerRef.current = setTimeout(() => {
         if (onClose) {
           onClose();
         }
@@ -69,7 +49,7 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
       }, autoClose);
     }
     // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return function () {
+    return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
@@ -80,82 +60,69 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   if (shouldRemove) {
     return null;
   }
-  return _jsx("div", __assign({
+  return _jsx("div", {
     ref: ref,
-    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
-    role: "alert"
-  }, rest, {
-    children: _jsx("div", __assign({
-      className: "ncua-full-width-notification__container"
-    }, {
-      children: _jsxs("div", __assign({
-        className: "ncua-full-width-notification__content"
-      }, {
-        children: [_jsxs("div", __assign({
-          className: "ncua-full-width-notification__content-wrapper"
-        }, {
-          children: [function () {
-            var IconComponent = iconMap[color];
+    className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: _jsx("div", {
+      className: "ncua-full-width-notification__container",
+      children: _jsxs("div", {
+        className: "ncua-full-width-notification__content",
+        children: [_jsxs("div", {
+          className: "ncua-full-width-notification__content-wrapper",
+          children: [(() => {
+            const IconComponent = iconMap[color];
             return _jsx(IconComponent, {
               width: 16,
               height: 16,
               color: COLOR[iconColorMap[color]],
               className: "ncua-full-width-notification__icon"
             });
-          }(), _jsxs("div", __assign({
-            className: "ncua-full-width-notification__text-container"
-          }, {
-            children: [_jsx("span", __assign({
-              className: "ncua-full-width-notification__title"
-            }, {
+          })(), _jsxs("div", {
+            className: "ncua-full-width-notification__text-container",
+            children: [_jsx("span", {
+              className: "ncua-full-width-notification__title",
               children: title
-            })), !supportTextLink && supportingText && _jsx("span", __assign({
-              className: "ncua-full-width-notification__supporting-text"
-            }, {
+            }), !supportTextLink && supportingText && _jsx("span", {
+              className: "ncua-full-width-notification__supporting-text",
               children: supportingText
-            })), supportTextLink && supportingText && _jsx("a", __assign({
+            }), supportTextLink && supportingText && _jsx("a", {
               href: supportTextLink,
-              className: "ncua-full-width-notification__link"
-            }, {
-              children: _jsx("span", __assign({
-                className: "ncua-full-width-notification__supporting-text"
-              }, {
+              className: "ncua-full-width-notification__link",
+              children: _jsx("span", {
+                className: "ncua-full-width-notification__supporting-text",
                 children: supportingText
-              }))
-            }))]
-          }))]
-        })), _jsxs("div", __assign({
-          className: "ncua-full-width-notification__actions-container"
-        }, {
-          children: [actions && _jsx("div", __assign({
-            className: "ncua-full-width-notification__actions"
-          }, {
-            children: actions.map(function (action) {
-              return _jsx("button", __assign({
-                onClick: action.onClick,
-                className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'text'))
-              }, {
-                children: action.label
-              }), "".concat(action.label, "-").concat(action.hierarchy));
-            })
-          })), onHidePermanently && _jsx("button", __assign({
+              })
+            })]
+          })]
+        }), _jsxs("div", {
+          className: "ncua-full-width-notification__actions-container",
+          children: [actions && _jsx("div", {
+            className: "ncua-full-width-notification__actions",
+            children: actions.map(action => _jsx("button", {
+              onClick: action.onClick,
+              className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
+              children: action.label
+            }, `${action.label}-${action.hierarchy}`))
+          }), onHidePermanently && _jsx("button", {
             type: "button",
             className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
-            onClick: onHidePermanently
-          }, {
+            onClick: onHidePermanently,
             children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
-          })), onClose && _jsx("button", __assign({
+          }), onClose && _jsx("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",
             onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-          }, {
-            children: _jsx(XClose, __assign({}, closeIconSize, {
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
+            children: _jsx(XClose, {
+              ...closeIconSize,
               color: COLOR[iconColorMap[color]]
-            }))
-          }))]
-        }))]
-      }))
-    }))
-  }));
-});
+            })
+          })]
+        })]
+      })
+    })
+  });
+});
+export { FullWidthNotification };