@ncds/ui-admin 1.8.2 → 1.8.3

package/dist/cjs/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _utils = require("../utils");
+(0, _vitest.describe)('arrayMoveById', () => {
+  (0, _vitest.it)('fromId를 toId 위치로 이동시킨다', () => {
+    const order = ['a', 'b', 'c', 'd'];
+    (0, _vitest.expect)((0, _utils.arrayMoveById)(order, 'a', 'c')).toEqual(['b', 'c', 'a', 'd']);
+  });
+  (0, _vitest.it)('같은 id로 이동 시 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    (0, _vitest.expect)((0, _utils.arrayMoveById)(order, 'b', 'b')).toEqual(['a', 'b', 'c']);
+  });
+  (0, _vitest.it)('존재하지 않는 id가 있으면 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    (0, _vitest.expect)((0, _utils.arrayMoveById)(order, 'a', 'z')).toEqual(['a', 'b', 'c']);
+    (0, _vitest.expect)((0, _utils.arrayMoveById)(order, 'z', 'a')).toEqual(['a', 'b', 'c']);
+  });
+  (0, _vitest.it)('원본 배열을 변형하지 않는다 (immutable)', () => {
+    const order = ['a', 'b', 'c'];
+    (0, _utils.arrayMoveById)(order, 'a', 'c');
+    (0, _vitest.expect)(order).toEqual(['a', 'b', 'c']);
+  });
+});
+(0, _vitest.describe)('initDraftState', () => {
+  (0, _vitest.it)('groups의 모든 item id를 순서대로 order에 담는다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }]
+    }, {
+      items: [{
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    (0, _vitest.expect)((0, _utils.initDraftState)(groups).order).toEqual(['a', 'b', 'c']);
+  });
+  (0, _vitest.it)('item.visible이 정의되지 않았으면 visibility는 true', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    (0, _vitest.expect)((0, _utils.initDraftState)(groups).visibility).toEqual({
+      a: true
+    });
+  });
+  (0, _vitest.it)('item.visible이 false면 visibility는 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: false
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    (0, _vitest.expect)((0, _utils.initDraftState)(groups).visibility).toEqual({
+      a: false,
+      b: true
+    });
+  });
+});
+(0, _vitest.describe)('applyDraftToItems', () => {
+  (0, _vitest.it)('draft.order 순서로 items를 재배열한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }, {
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    const draft = {
+      order: ['c', 'a', 'b'],
+      visibility: {
+        a: true,
+        b: true,
+        c: true
+      }
+    };
+    const result = (0, _utils.applyDraftToItems)(groups, draft);
+    (0, _vitest.expect)(result.map(i => i.id)).toEqual(['c', 'a', 'b']);
+  });
+  (0, _vitest.it)('draft.visibility 값을 각 item.visible에 반영한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    const result = (0, _utils.applyDraftToItems)(groups, draft);
+    (0, _vitest.expect)(result[0].visible).toBe(false);
+    (0, _vitest.expect)(result[1].visible).toBe(true);
+  });
+  (0, _vitest.it)('item의 다른 필드 (id, text, icon 등)는 그대로 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'Alpha',
+        shortcut: 'Cmd+A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = (0, _utils.applyDraftToItems)(groups, draft);
+    (0, _vitest.expect)(result[0]).toEqual({
+      id: 'a',
+      text: 'Alpha',
+      shortcut: 'Cmd+A'
+    });
+  });
+  (0, _vitest.it)('item.visible이 원래 undefined였으면 결과도 visible 필드 없이 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = (0, _utils.applyDraftToItems)(groups, draft);
+    (0, _vitest.expect)(result[0].visible).toBeUndefined();
+  });
+});
+(0, _vitest.describe)('hasDraftChanged', () => {
+  (0, _vitest.it)('original과 동일하면 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: false
+      }]
+    }];
+    const original = (0, _utils.initDraftState)(groups);
+    (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, original)).toBe(false);
+  });
+  (0, _vitest.it)('order가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['b', 'a'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, draft)).toBe(true);
+  });
+  (0, _vitest.it)('visibility가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, draft)).toBe(true);
+  });
+  (0, _vitest.it)('order·visibility 둘 다 같으면 false', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, draft)).toBe(false);
+  });
+});

package/dist/cjs/src/components/overlays/dropdown/utils.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyDraftToItems = applyDraftToItems;
+exports.arrayMoveById = arrayMoveById;
+exports.arrayReorderByEdge = arrayReorderByEdge;
+exports.hasDraftChanged = hasDraftChanged;
+exports.initDraftState = initDraftState;
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+function arrayMoveById(order, fromId, toId) {
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+    return order;
+  }
+  const next = [...order];
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+function arrayReorderByEdge(order, fromId, toId, edge) {
+  if (fromId === toId) return order;
+  const fromIndex = order.indexOf(fromId);
+  const toIndex = order.indexOf(toId);
+  if (fromIndex === -1 || toIndex === -1) return order;
+  const next = [...order];
+  next.splice(fromIndex, 1);
+  // 목표 인덱스 재계산 (제거로 인해 toIndex가 한 칸 당겨질 수 있음)
+  const adjustedToIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+  const insertIndex = edge === 'bottom' ? adjustedToIndex + 1 : adjustedToIndex;
+  next.splice(insertIndex, 0, fromId);
+  return next;
+}
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+function initDraftState(groups) {
+  const order = [];
+  const visibility = {};
+  for (const group of groups) {
+    for (const item of group.items) {
+      order.push(item.id);
+      visibility[item.id] = item.visible ?? true;
+    }
+  }
+  return {
+    order,
+    visibility
+  };
+}
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+function applyDraftToItems(groups, draft) {
+  const itemsById = new Map();
+  for (const group of groups) {
+    for (const item of group.items) {
+      itemsById.set(item.id, item);
+    }
+  }
+  return draft.order.map(id => itemsById.get(id)).filter(item => item !== undefined).map(item => {
+    if (item.visible === undefined) return item;
+    return {
+      ...item,
+      visible: draft.visibility[item.id]
+    };
+  });
+}
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+function hasDraftChanged(original, draft) {
+  if (original.order.length !== draft.order.length) return true;
+  for (let i = 0; i < original.order.length; i++) {
+    if (original.order[i] !== draft.order[i]) return true;
+  }
+  const keys = new Set([...Object.keys(original.visibility), ...Object.keys(draft.visibility)]);
+  for (const key of keys) {
+    if (original.visibility[key] !== draft.visibility[key]) return true;
+  }
+  return false;
+}

package/dist/cjs/src/components/{modal → overlays/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 _ButtonCloseX = require("../../action/button/ButtonCloseX");
+var _featuredIcon = require("../../image-and-icons/featured-icon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Modal = _ref => {
   let {

package/dist/cjs/src/components/{notification → overlays/notification}/FloatingNotification.js

@@ -8,11 +8,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = 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");
+var _breakpoint = require("../../../constant/breakpoint");
+var _useMediaQuery = require("../../../hooks/useMediaQuery");
+var _button = require("../../action/button");
+var _ButtonCloseX = require("../../action/button/ButtonCloseX");
+var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,

package/dist/cjs/src/components/{notification → overlays/notification}/FullWidthNotification.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
+var _color = require("../../../../constant/color");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,

package/dist/cjs/src/components/{notification → overlays/notification}/MessageNotification.js

@@ -8,9 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _button = require("../button");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
+var _color = require("../../../../constant/color");
+var _button = require("../../action/button");
+var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,

package/dist/cjs/src/components/{tooltip → overlays/tooltip}/Tooltip.js

@@ -9,7 +9,7 @@ var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _reactDom = require("react-dom");
-var _ButtonCloseX = require("../button/ButtonCloseX");
+var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -7,7 +7,7 @@ exports.SelectDropdown = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _button = require("../button");
+var _button = require("../action/button");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

package/dist/cjs/src/components/tab/TabButton.js

@@ -7,7 +7,7 @@ exports.TabButton = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Badge = require("../badge/Badge");
+var _Badge = require("../feedback-and-status/badge/Badge");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TabButton = _ref => {
   let {

package/dist/cjs/vitest.config.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _config = require("vitest/config");
 var _default = exports.default = (0, _config.defineConfig)({
   test: {
-    include: ['scripts/**/__tests__/**/*.test.ts'],
+    include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
     environment: 'node'
   }
 });

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

@@ -1,3 +1,7 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 export class Slider {
   constructor(element, options) {
     this.activeHandle = null;
@@ -40,17 +44,19 @@ export class Slider {
       this.isDragging = false;
     };
     this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
+    // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+    // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+    // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+    this.options = {
+      min: Number(options.min ?? DEFAULT_MIN),
+      max: Number(options.max ?? DEFAULT_MAX),
+      step: Number(options.step ?? DEFAULT_STEP),
+      value: options.value ?? DEFAULT_MIN,
+      onChange: options.onChange,
+      labelPosition: options.labelPosition,
+      disabled: options.disabled ?? false
+    };
     this.value = this.options.value;
-    this.options.min = Number(this.options.min);
-    this.options.max = Number(this.options.max);
-    this.options.step = Number(this.options.step);
     this.init();
   }
   init() {
@@ -104,19 +110,20 @@ export class Slider {
     });
     if (this.options.labelPosition === 'bottom') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label`;
+      label.className = 'ncua-slider__label';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     if (this.options.labelPosition === 'top-floating') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+      label.className = 'ncua-slider__label ncua-slider__label--tooltip';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     this.element.appendChild(handle);
     this.handleElements[index] = handle;
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   updateHandlePositions() {
     if (Array.isArray(this.value)) {
       // Range slider
@@ -174,14 +181,15 @@ export class Slider {
     }
   }
   getPositionFromValue(value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+    return (value - this.options.min) / (this.options.max - this.options.min) * PERCENT;
   }
   getValueFromPosition(position) {
-    const percentage = Math.min(Math.max(position, 0), 100);
-    const exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    const percentage = Math.min(Math.max(position, 0), PERCENT);
+    const exactValue = this.options.min + percentage / PERCENT * (this.options.max - this.options.min);
     const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
     return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   handleInteractionStart(clientX, target) {
     // 슬라이더 영역 내부를 클릭/터치한 경우
     if (target.closest('.ncua-slider')) {
@@ -193,12 +201,12 @@ export class Slider {
         } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
           this.activeHandle = 1;
         } else {
-          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+          this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
         }
       } else {
         // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
         const rect = this.element.getBoundingClientRect();
-        const position = (clientX - rect.left) / rect.width * 100;
+        const position = (clientX - rect.left) / rect.width * PERCENT;
         if (Array.isArray(this.value)) {
           const [leftValue, rightValue] = this.value;
           const leftPosition = this.getPositionFromValue(leftValue);
@@ -223,7 +231,7 @@ export class Slider {
   updateValueFromClientX(clientX) {
     if (!this.element || this.activeHandle === null) return;
     const rect = this.element.getBoundingClientRect();
-    const position = (clientX - rect.left) / rect.width * 100;
+    const position = (clientX - rect.left) / rect.width * PERCENT;
     const newValue = this.getValueFromPosition(position);
     const prevValue = this.value;
     if (Array.isArray(this.value)) {

package/dist/esm/src/components/{button → action/button}/Button.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { createElement, forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 export const svgSize = {
   xxs: 12,
   xs: 14,

package/dist/esm/src/components/{button-group → action/button-group}/ButtonGroup.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import React, { createElement } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const svgSize = {
   xxs: 12,
   xs: 16,

package/dist/esm/src/components/{badge → feedback-and-status/badge}/utils.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot/Dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot/Dot';
 const DEFAULT_DOT_COLOR = 'neutral';
 const sideSlotRender = _ref => {
   let {

package/dist/esm/src/components/{empty-state → feedback-and-status/empty-state}/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../button/Button';
+import { Button } from '../../action/button/Button';
 export const EmptyState = _ref => {
   let {
     title,

package/dist/esm/src/components/{tag → feedback-and-status/tag}/Tag.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
+import { COLOR } from '../../../../constant/color';
+import { Dot } from '../../image-and-icons/dot';
 const MARGIN = 10;
 const DEFAULT_TOOLTIP_WIDTH = 200;
 const DEFAULT_TOOLTIP_HEIGHT = 60;

package/dist/esm/src/components/{combo-box → forms-and-input/combo-box}/ComboBox.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useDropdown } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { Button } from '../button';
+import { useDropdown } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 import { InputBase } from '../input-base/InputBase';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
 const defaultMaxHeight = 275;
 const toggleMultiSelectValue = (currentValue, optionId) => {
   const currentValues = Array.isArray(currentValue) ? currentValue : [];