@ncds/ui-admin 1.2.1 → 1.3.0

package/dist/cjs/assets/scripts/datePicker.js

@@ -17,8 +17,8 @@ var __assign = void 0 && (void 0).__assign || function () {
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
-    sm: '14',
-    md: '16'
+    xs: '14',
+    sm: '16'
   },
   CLASS_NAMES: {
     RANGE_WRAPPER: 'ncua-range-date-picker',

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RangeDatePicker = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
 var _moment = _interopRequireDefault(require("moment"));
+var _react = require("react");
 var _DatePicker = require("./DatePicker");
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,7 +24,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
-    onDateValidation = _a.onDateValidation;
+    onDateValidation = _a.onDateValidation,
+    _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b;
   var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
@@ -130,9 +132,11 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     ref: ref || undefined
   }, {
     children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     })), "-", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     }))]
   }));
 });

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.RangeDatePickerWithButtons = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _RangeDatePicker = require("./RangeDatePicker");
+var _datePicker = require("../../constant/date-picker");
+var _datePicker2 = require("../../utils/date-picker");
 var _button = require("../button");
-var _datePicker = require("../../utils/date-picker");
-var _datePicker2 = require("../../constant/date-picker");
+var _RangeDatePicker = require("./RangeDatePicker");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,9 +22,9 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 var RangeDatePickerWithButtons = function (_a) {
   var _b = _a.fixedEndDate,
-    fixedEndDate = _b === void 0 ? (0, _datePicker.getDateFormat)() : _b,
-    _c = _a.buttonGroupSize,
-    buttonGroupSize = _c === void 0 ? 'sm' : _c,
+    fixedEndDate = _b === void 0 ? (0, _datePicker2.getDateFormat)() : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
@@ -33,7 +33,7 @@ var RangeDatePickerWithButtons = function (_a) {
     periodKeys = _a.periodKeys,
     onDateValidation = _a.onDateValidation;
   var setCalculatedDate = function () {
-    var currentPeriodItem = _datePicker2.PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = _datePicker.PERIOD_ITEM[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -42,7 +42,7 @@ var RangeDatePickerWithButtons = function (_a) {
       endDateOptions.onChangeDate('');
       return;
     }
-    var startDate = (0, _datePicker.getDateFormat)((0, _datePicker.getSubtractDate)({
+    var startDate = (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
       period: currentPeriodItem.period,
       unit: currentPeriodItem.unit
     }));
@@ -62,12 +62,12 @@ var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [(0, _jsxRuntime.jsx)(_button.ButtonGroup, __assign({
-      size: buttonGroupSize
+      size: size
     }, {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: _datePicker2.PERIOD_ITEM[key].text,
+          label: _datePicker.PERIOD_ITEM[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }
@@ -85,7 +85,8 @@ var RangeDatePickerWithButtons = function (_a) {
         }
       }),
       validationOption: validationOption,
-      onDateValidation: onDateValidation
+      onDateValidation: onDateValidation,
+      size: size
     })]
   }));
 };

package/dist/cjs/src/components/select/Select.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Select = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _HintText = require("../shared/hintText/HintText");
@@ -32,8 +31,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var icon = _a.icon,
-    placeholder = _a.placeholder,
+  var placeholder = _a.placeholder,
     _b = _a.disabledPlaceholder,
     disabledPlaceholder = _b === void 0 ? false : _b,
     id = _a.id,
@@ -49,26 +47,17 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
     value = _a.value,
     optionItems = _a.optionItems,
     register = _a.register,
-    props = __rest(_a, ["icon", "placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
-  return (0, _jsxRuntime.jsxs)("div", __assign({
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+  return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
     }, className)
   }, {
-    children: [(0, _jsxRuntime.jsxs)("div", __assign({
+    children: [(0, _jsxRuntime.jsx)("span", __assign({
       className: (0, _classnames.default)('ncua-select__content', "ncua-select--".concat(size))
     }, {
-      children: [icon ? (0, _jsxRuntime.jsx)("span", __assign({
-        className: "ncua-select__icon"
-      }, {
-        children: (0, _jsxRuntime.jsx)(_dynamic.default, {
-          name: icon.icon,
-          width: icon.size,
-          height: icon.size,
-          color: icon.color
-        })
-      })) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}), (0, _jsxRuntime.jsxs)("select", __assign({
+      children: (0, _jsxRuntime.jsxs)("select", __assign({
         value: value,
         ref: ref,
         id: id,
@@ -87,7 +76,7 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
             children: item.label
           }), "option-".concat(index));
         }), children]
-      }))]
+      }))
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
       destructive: destructive,
       className: "ncua-hint-text"

package/dist/esm/assets/scripts/datePicker.js

@@ -11,8 +11,8 @@ var __assign = this && this.__assign || function () {
 // Constants
 var CONSTANTS = {
   ICON_SIZES: {
-    sm: '14',
-    md: '16'
+    xs: '14',
+    sm: '16'
   },
   CLASS_NAMES: {
     RANGE_WRAPPER: 'ncua-range-date-picker',

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

@@ -9,15 +9,17 @@ 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, forwardRef } from 'react';
 import moment from 'moment';
+import { forwardRef, useCallback, useEffect } from 'react';
 import { DatePicker } from './DatePicker';
 import { getDateFormat } from './utils';
 export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
-    onDateValidation = _a.onDateValidation;
+    onDateValidation = _a.onDateValidation,
+    _b = _a.size,
+    size = _b === void 0 ? 'xs' : _b;
   var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
@@ -123,9 +125,11 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref || undefined
   }, {
     children: [_jsx(DatePicker, __assign({}, startDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
-      ref: undefined
+      ref: undefined,
+      size: size
     }))]
   }));
 });

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

@@ -10,15 +10,15 @@ var __assign = this && this.__assign || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { RangeDatePicker } from './RangeDatePicker';
-import { ButtonGroup } from '../button';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button';
+import { RangeDatePicker } from './RangeDatePicker';
 export var RangeDatePickerWithButtons = function (_a) {
   var _b = _a.fixedEndDate,
     fixedEndDate = _b === void 0 ? getDateFormat() : _b,
-    _c = _a.buttonGroupSize,
-    buttonGroupSize = _c === void 0 ? 'sm' : _c,
+    _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     currentButtonId = _a.currentButtonId,
     setCurrentButtonId = _a.setCurrentButtonId,
     startDateOptions = _a.startDateOptions,
@@ -56,7 +56,7 @@ export var RangeDatePickerWithButtons = function (_a) {
     className: "ncua-range-date-picker-with-buttons"
   }, {
     children: [_jsx(ButtonGroup, __assign({
-      size: buttonGroupSize
+      size: size
     }, {
       children: periodKeys.map(function (key) {
         return _jsx(ButtonGroup.Item, {
@@ -79,7 +79,8 @@ export var RangeDatePickerWithButtons = function (_a) {
         }
       }),
       validationOption: validationOption,
-      onDateValidation: onDateValidation
+      onDateValidation: onDateValidation,
+      size: size
     })]
   }));
 };

package/dist/esm/src/components/select/Select.js

@@ -16,8 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '@ncds/ui-admin-icon/dynamic';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
@@ -25,8 +24,7 @@ import { HintText } from '../shared/hintText/HintText';
  * 현재 icon 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var icon = _a.icon,
-    placeholder = _a.placeholder,
+  var placeholder = _a.placeholder,
     _b = _a.disabledPlaceholder,
     disabledPlaceholder = _b === void 0 ? false : _b,
     id = _a.id,
@@ -42,26 +40,17 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
     value = _a.value,
     optionItems = _a.optionItems,
     register = _a.register,
-    props = __rest(_a, ["icon", "placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
-  return _jsxs("div", __assign({
+    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register"]);
+  return _jsxs("span", __assign({
     className: classNames('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
     }, className)
   }, {
-    children: [_jsxs("div", __assign({
+    children: [_jsx("span", __assign({
       className: classNames('ncua-select__content', "ncua-select--".concat(size))
     }, {
-      children: [icon ? _jsx("span", __assign({
-        className: "ncua-select__icon"
-      }, {
-        children: _jsx(Icon, {
-          name: icon.icon,
-          width: icon.size,
-          height: icon.size,
-          color: icon.color
-        })
-      })) : _jsx(_Fragment, {}), _jsxs("select", __assign({
+      children: _jsxs("select", __assign({
         value: value,
         ref: ref,
         id: id,
@@ -80,7 +69,7 @@ export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: item.label
           }), "option-".concat(index));
         }), children]
-      }))]
+      }))
     })), hintText && _jsx(HintText, __assign({
       destructive: destructive,
       className: "ncua-hint-text"

package/dist/types/assets/scripts/datePicker.d.ts

@@ -1,4 +1,4 @@
-export type DatePickerSize = 'sm' | 'md';
+export type DatePickerSize = 'xs' | 'sm';
 interface Options {
     buttons?: DatePickerButton[];
     size: DatePickerSize;

package/dist/types/src/components/date-picker/RangeDatePicker.d.ts

@@ -19,6 +19,7 @@ export type RangeDatePickerProps = {
         newDate: string;
         currentDate: string;
     }) => void;
+    size?: 'xs' | 'sm';
 };
 export declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RangeDatePicker.d.ts.map

package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -1,15 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
-import { RangeDatePickerProps } from './RangeDatePicker';
-import { ButtonGroupSize } from '../button';
 import { PERIOD_ITEM } from '../../constant/date-picker';
+import { RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
     fixedEndDate?: string;
-    buttonGroupSize?: ButtonGroupSize;
     currentButtonId: PeriodKeyType;
     setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
     periodKeys: PeriodKeyType[];
+    size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ fixedEndDate, buttonGroupSize, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: ({ fixedEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

package/dist/types/src/components/select/Select.d.ts

@@ -1,5 +1,3 @@
-import { IconName } from '@ncds/ui-admin-icon/dynamic';
-import { COLOR } from '@ncds/ui-admin/constant/color';
 import { Size } from '@ncds/ui/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
@@ -8,13 +6,7 @@ export type OptionType = {
     id: string | number;
     label: string;
 };
-type IconSlot = {
-    icon: IconName;
-    color?: keyof typeof COLOR;
-    size?: number;
-};
 export interface SelectProps extends PropsWithChildren<BaseSelectProps> {
-    icon?: IconSlot;
     placeholder?: string;
     disabledPlaceholder?: boolean;
     hintText?: string;

package/dist/ui-admin/assets/styles/style.css

@@ -2375,40 +2375,27 @@ button {
   --select-simple-height-md: 22px;
 }
 
+.ncua-select {
+  --icon-size: 14px;
+}
 .ncua-select__content {
+  position: relative;
   display: flex;
   align-items: center;
-  padding-inline-start: 14px;
   border: 1px solid var(--gray-200);
   background-color: var(--base-white);
   overflow: hidden;
-  position: relative;
-}
-.ncua-select__content::after {
-  width: 14px;
-  height: 14px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  content: "";
-  transform: translateY(-50%);
-  position: absolute;
-  top: 50%;
-  right: 10px;
-}
-.ncua-select__icon {
-  margin-right: 8px;
-}
-.ncua-select__icon svg {
-  display: block;
 }
-.ncua-select select {
+.ncua-select__tag {
   -webkit-appearance: none;
   appearance: none;
   border: 0;
   height: 100%;
   flex: 1;
-  background-color: transparent;
   outline: none;
   color: var(--gray-700);
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  background-size: var(--icon-size) var(--icon-size);
 }
 .ncua-select__content:focus-within {
   border-color: var(--gray-400);
@@ -2423,9 +2410,9 @@ button {
 .ncua-select--xs {
   height: var(--select-height-xs);
   border-radius: 6px;
-  padding-inline: 10px 28px;
 }
 .ncua-select--xs > .ncua-select__tag {
+  padding-inline: 10px 28px;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
@@ -2438,9 +2425,10 @@ button {
 .ncua-select--sm {
   height: var(--select-height-sm);
   border-radius: 6px;
-  padding-inline: 12px 30px;
+  --icon-size: 16px;
 }
 .ncua-select--sm > .ncua-select__tag {
+  padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-sm);
@@ -2450,18 +2438,14 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--sm.ncua-select__content::after {
-  width: 16px;
-  height: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
 .ncua-select--md {
   min-width: 132px;
   height: var(--select-height-md);
   border-radius: 8px;
-  padding-inline: 12px 30px;
+  --icon-size: 16px;
 }
 .ncua-select--md > .ncua-select__tag {
+  padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-sm);
@@ -2471,13 +2455,7 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--md.ncua-select__content::after {
-  width: 16px;
-  height: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
 .ncua-select--simple .ncua-select__content {
-  padding-inline-start: 0;
   border: 0;
   background-color: transparent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -101,7 +101,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
     "react-scripts": "^5.0.1",
-    "sass": "^1.66.1",
+    "sass": "^1.86.3",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",