@ncds/ui-admin 0.0.32 → 0.0.33

package/dist/cjs/constant/color.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.COLOR = void 0;
 var COLOR = exports.COLOR = {
+  gray100: '#EAECF0',
   gray200: '#D0D5DD',
   gray300: '#98A2B3',
   gray400: '#667085',

package/dist/cjs/src/components/badge/BadgeGroup.js

@@ -36,9 +36,14 @@ var BadgeGroup = function (_a) {
     color = _b === void 0 ? 'neutral' : _b,
     _c = _a.size,
     size = _c === void 0 ? 'sm' : _c,
-    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size"]);
-  return (0, _jsxRuntime.jsxs)("span", __assign({
-    className: (0, _classnames.default)('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName)
+    href = _a.href,
+    _d = _a.target,
+    target = _d === void 0 ? '_blank' : _d,
+    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size", "href", "target"]);
+  return (0, _jsxRuntime.jsxs)("a", __assign({
+    className: (0, _classnames.default)('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName),
+    href: href,
+    target: target
   }, {
     children: [(0, _jsxRuntime.jsx)(_.Badge, __assign({
       type: "pill-dark-color",

package/dist/cjs/src/components/button/ButtonCloseX.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonCloseX = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__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 svgSize = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+var ButtonCloseX = function (_a) {
+  var size = _a.size,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light' : _b,
+    className = _a.className,
+    onClick = _a.onClick;
+  return (0, _jsxRuntime.jsx)("button", __assign({
+    className: (0, _classnames.default)('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
+    onClick: onClick
+  }, {
+    children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: "x-close",
+      width: svgSize[size],
+      height: svgSize[size]
+    })
+  }));
+};
+exports.ButtonCloseX = ButtonCloseX;

package/dist/cjs/src/components/date-picker/DatePicker.js

@@ -30,7 +30,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
-var DatePicker = function (_a) {
+var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
@@ -39,7 +39,6 @@ var DatePicker = function (_a) {
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
-  var ref = (0, _react.useRef)(null);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
     return onChangeDate(dateStr);
   };
@@ -59,7 +58,7 @@ var DatePicker = function (_a) {
     })
   }, {
     children: [(0, _jsxRuntime.jsx)(_reactFlatpickr.default, __assign({}, attrs, {
-      ref: ref,
+      ref: ref || undefined,
       className: (0, _classnames.default)('ncua-date-picker__input'),
       options: options,
       value: currentDate
@@ -83,5 +82,5 @@ var DatePicker = function (_a) {
       }))
     }))]
   }));
-};
-exports.DatePicker = DatePicker;
+});
+DatePicker.displayName = 'DatePicker';

package/dist/cjs/src/components/date-picker/RangeDatePicker.js

@@ -21,7 +21,7 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-var RangeDatePicker = function (_a) {
+var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
@@ -45,6 +45,7 @@ var RangeDatePicker = function (_a) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) return;
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
@@ -85,7 +86,7 @@ var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
-  }, [startDateOptions.currentDate]);
+  }, [startDateOptions.currentDate, endDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   (0, _react.useEffect)(function () {
     var _a;
     var needResetDate = validateDateType(endDateOptions.currentDate) && !(0, _lodash.isNil)((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
@@ -108,11 +109,16 @@ var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }
-  }, [endDateOptions.currentDate]);
+  }, [endDateOptions.currentDate, startDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: "ncua-range-date-picker"
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
   }, {
-    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions)), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions))]
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
   }));
-};
-exports.RangeDatePicker = RangeDatePicker;
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

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

@@ -8,8 +8,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _ButtonCloseX = require("../button/ButtonCloseX");
 var _featuredIcon = require("../featured-icon");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -112,14 +112,12 @@ Modal.Header = function (_a) {
         }, {
           children: subtitle
         }))]
-      })), children, !hideCloseButton && (0, _jsxRuntime.jsx)("button", __assign({
+      })), children, !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
         className: "ncua-modal__close-button",
+        size: "sm",
+        theme: "light",
         onClick: onClose
-      }, {
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-          name: "x-close"
-        })
-      }))]
+      })]
     })), showDivider && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-modal__header-divider"
     })]

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingNotification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
-var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _breakpoint = require("../../constant/breakpoint");
+var _useMediaQuery = require("../../hooks/useMediaQuery");
+var _button = require("../button");
+var _ButtonCloseX = require("../button/ButtonCloseX");
+var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -37,22 +40,25 @@ var iconNameMap = {
 var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var iconColor = variant;
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+  var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[variant],
+    name: iconNameMap[color],
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
   };
+  var isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
-    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(variant), className),
+    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: [(0, _jsxRuntime.jsx)("div", __assign({
@@ -61,14 +67,9 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
       children: (0, _jsxRuntime.jsxs)("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[variant] && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
-            className: "ncua-floating-notification__pc-icon"
-          })), (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
-            size: "md",
-            className: "ncua-floating-notification__mobile-icon"
-          }))]
-        }), (0, _jsxRuntime.jsxs)("div", __assign({
+        children: [iconNameMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+          size: isMobile ? 'md' : 'sm'
+        })), (0, _jsxRuntime.jsxs)("div", __assign({
           className: "ncua-floating-notification__text-container"
         }, {
           children: [(0, _jsxRuntime.jsx)("div", __assign({
@@ -86,19 +87,22 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
           })), actions && (0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-floating-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)(_button.Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'link',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
           }))]
         }))]
       }))
-    })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
-      type: "button",
+    })), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+      theme: "light",
       className: "ncua-floating-notification__close-button",
-      onClick: onClose,
-      "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-    }, {
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-        name: "x"
-      })
-    }))]
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
   }));
 });

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

@@ -43,19 +43,19 @@ var iconColorMap = {
 var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
   var closeIconSize = {
     width: 20,
     height: 20
   };
   return (0, _jsxRuntime.jsx)("div", __assign({
     ref: ref,
-    className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
+    className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: (0, _jsxRuntime.jsx)("div", __assign({
@@ -68,10 +68,10 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
           className: "ncua-full-width-notification__content-wrapper"
         }, {
           children: [(0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
-            name: iconNameMap[variant],
+            name: iconNameMap[color],
             width: 16,
             height: 16,
-            color: _color.COLOR[iconColorMap[variant]],
+            color: _color.COLOR[iconColorMap[color]],
             className: "ncua-full-width-notification__icon"
           }), (0, _jsxRuntime.jsxs)("div", __assign({
             className: "ncua-full-width-notification__text-container"
@@ -92,7 +92,14 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
           children: [actions && (0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-full-width-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)("button", __assign({
+                onClick: action.onClick,
+                className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+              }, {
+                children: action.label
+              }), "".concat(action.label, "-").concat(action.hierarchy));
+            })
           })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",
@@ -102,7 +109,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
             children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, __assign({
               name: "x-close"
             }, closeIconSize, {
-              color: _color.COLOR[iconColorMap[variant]]
+              color: _color.COLOR[iconColorMap[color]]
             }))
           }))]
         }))]

package/dist/cjs/src/components/notification/Notification.js

@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Notification = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -31,35 +29,16 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.type,
     type = _b === void 0 ? 'floating' : _b,
-    title = _a.title,
-    supportingText = _a.supportingText,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'neutral' : _c,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    rest = __rest(_a, ["type", "title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var actionsContent = actions && actions.length > 0 ? (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: actions.map(function (action, index) {
-      return (0, _jsxRuntime.jsx)("button", __assign({
-        onClick: action.onClick,
-        className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link-gray'))
-      }, {
-        children: action.label
-      }), index);
-    })
-  }) : null;
-  var sharedProps = __assign({
-    title: title,
-    supportingText: supportingText,
-    variant: variant,
-    onClose: onClose,
-    className: className,
-    actions: actionsContent
-  }, rest);
-  return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({}, sharedProps, {
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    rest = __rest(_a, ["type", "color"]);
+  return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
-  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({}, sharedProps, {
+  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
   }));
 });

package/dist/cjs/src/components/notification/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _Notification = require("./Notification");
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Notification[key];
+    }
+  });
+});
 var _FloatingNotification = require("./FloatingNotification");
 Object.keys(_FloatingNotification).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,15 +35,4 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
       return _FullWidthNotification[key];
     }
   });
-});
-var _Notification = require("./Notification");
-Object.keys(_Notification).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Notification[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Notification[key];
-    }
-  });
 });

package/dist/cjs/src/constant/breakpoint.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEDIA_QUERY = exports.BREAKPOINT = void 0;
+var BREAKPOINT = exports.BREAKPOINT = {
+  mobile: '768px'
+};
+var MEDIA_QUERY = exports.MEDIA_QUERY = {
+  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+};

package/dist/cjs/src/hooks/useMediaQuery.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaQuery = void 0;
+var _react = require("react");
+var useMediaQuery = function (query, options) {
+  var _a = (0, _react.useState)(false),
+    matches = _a[0],
+    setMatches = _a[1];
+  (0, _react.useEffect)(function () {
+    var mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    var handleChange = function (e) {
+      var _a;
+      setMatches(e.matches);
+      if (e.matches) {
+        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  return matches;
+};
+exports.useMediaQuery = useMediaQuery;

package/dist/esm/constant/color.js

@@ -1,4 +1,5 @@
 export var COLOR = {
+  gray100: '#EAECF0',
   gray200: '#D0D5DD',
   gray300: '#98A2B3',
   gray400: '#667085',

package/dist/esm/src/components/badge/BadgeGroup.js

@@ -29,9 +29,14 @@ export var BadgeGroup = function (_a) {
     color = _b === void 0 ? 'neutral' : _b,
     _c = _a.size,
     size = _c === void 0 ? 'sm' : _c,
-    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size"]);
-  return _jsxs("span", __assign({
-    className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName)
+    href = _a.href,
+    _d = _a.target,
+    target = _d === void 0 ? '_blank' : _d,
+    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size", "href", "target"]);
+  return _jsxs("a", __assign({
+    className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName),
+    href: href,
+    target: target
   }, {
     children: [_jsx(Badge, __assign({
       type: "pill-dark-color",

package/dist/esm/src/components/button/ButtonCloseX.js

@@ -0,0 +1,36 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classnames from 'classnames';
+var svgSize = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+export var ButtonCloseX = function (_a) {
+  var size = _a.size,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light' : _b,
+    className = _a.className,
+    onClick = _a.onClick;
+  return _jsx("button", __assign({
+    className: classnames('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className),
+    onClick: onClick
+  }, {
+    children: _jsx(Icon, {
+      name: "x-close",
+      width: svgSize[size],
+      height: svgSize[size]
+    })
+  }));
+};

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -20,10 +20,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import 'flatpickr/dist/flatpickr.css';
 import { Korean } from 'flatpickr/dist/l10n/ko';
-import { useRef } from 'react';
+import { forwardRef } from 'react';
 import Flatpickr from 'react-flatpickr';
 import { COLOR } from '../../../constant/color';
-export var DatePicker = function (_a) {
+export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
@@ -32,7 +32,6 @@ export var DatePicker = function (_a) {
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
-  var ref = useRef(null);
   var onChangeDateHandler = function (dateTimeStamp, dateStr) {
     return onChangeDate(dateStr);
   };
@@ -52,7 +51,7 @@ export var DatePicker = function (_a) {
     })
   }, {
     children: [_jsx(Flatpickr, __assign({}, attrs, {
-      ref: ref,
+      ref: ref || undefined,
       className: classNames('ncua-date-picker__input'),
       options: options,
       value: currentDate
@@ -76,4 +75,5 @@ export var DatePicker = function (_a) {
       }))
     }))]
   }));
-};
+});
+DatePicker.displayName = 'DatePicker';

package/dist/esm/src/components/date-picker/RangeDatePicker.js

@@ -9,12 +9,12 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, forwardRef } from 'react';
 import { isNil } from 'lodash';
 import moment from 'moment';
 import { DatePicker } from './DatePicker';
 import { getDateFormat } from './utils';
-export var RangeDatePicker = function (_a) {
+export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
@@ -38,6 +38,7 @@ export var RangeDatePicker = function (_a) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) return;
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
@@ -78,7 +79,7 @@ export var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('start', !isValidPeriod);
     }
-  }, [startDateOptions.currentDate]);
+  }, [startDateOptions.currentDate, endDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   useEffect(function () {
     var _a;
     var needResetDate = validateDateType(endDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
@@ -101,10 +102,16 @@ export var RangeDatePicker = function (_a) {
     if (!isValidPeriod) {
       changeSettingDateAndAlert('end', !isValidPeriod);
     }
-  }, [endDateOptions.currentDate]);
+  }, [endDateOptions.currentDate, startDateOptions.currentDate, validationOption, resetDateAndAlert, changeSettingDateAndAlert]);
   return _jsxs("div", __assign({
-    className: "ncua-range-date-picker"
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
   }, {
-    children: [_jsx(DatePicker, __assign({}, startDateOptions)), "-", _jsx(DatePicker, __assign({}, endDateOptions))]
+    children: [_jsx(DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
   }));
-};
+});
+RangeDatePicker.displayName = 'RangeDatePicker';