maru_design2 2.20.3 → 2.21.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [2.21.0](https://github.com/42maru-ai/maru-design2/compare/v2.20.4...v2.21.0) (2025-02-03)
+
+
+### Features
+
+* :sparkles: Color - ADD llm studio theme color ([c78fca8](https://github.com/42maru-ai/maru-design2/commit/c78fca8cbf53171d61da99ecd70fe3bad7f3d9b5))
+* :sparkles: SearchInput - add filter [#430](https://github.com/42maru-ai/maru-design2/issues/430) ([6df679c](https://github.com/42maru-ai/maru-design2/commit/6df679c2979b23c5d5548c7025837203936bc736))
+* :sparkles: Table - add selectedRow.scrollIntoView [#131](https://github.com/42maru-ai/maru-design2/issues/131) ([2694bd5](https://github.com/42maru-ai/maru-design2/commit/2694bd51e577cf7e03550c15f1d51d46ef974e3d))
+
+
+### Bug Fixes
+
+* :art: Input - UPDATE type=number checking [#415](https://github.com/42maru-ai/maru-design2/issues/415) ([25a605d](https://github.com/42maru-ai/maru-design2/commit/25a605d716724aa367bdd825a60118ea0a008cab))
+* :art: Slider - UPDATE handleSliderChange ([b5feb97](https://github.com/42maru-ai/maru-design2/commit/b5feb97cf73a6da683f86816cc8edad330e3a724))
+* :art: Table - Refactor td ([c4133a5](https://github.com/42maru-ai/maru-design2/commit/c4133a518f10f669a5c021e3ab721b7db07fea55))
+* :bento: Icon - add filter icon ([9e6a9d1](https://github.com/42maru-ai/maru-design2/commit/9e6a9d1ad26d4974f75193b8bd9e27b46c9cd9e9))
+* :bento: Icon - add icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([8857840](https://github.com/42maru-ai/maru-design2/commit/8857840121ffbc7b55fbe2a2fd2662d3c178a3c7))
+* :bento: Icon - ADD icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([eaea048](https://github.com/42maru-ai/maru-design2/commit/eaea0484f6e84049d90b3a2547576d034e85aa93))
+* :bug: Input - UPDATE clear btn to number type ([8578045](https://github.com/42maru-ai/maru-design2/commit/85780453541e75ac672308f468cf095e934ceed6))
+* :bug: Input - UPDATE number type logic ([669c5dc](https://github.com/42maru-ai/maru-design2/commit/669c5dcb0cd834cebe64bf24a99f36f5c1bab4ea))
+* :bug: Table - update tr hover logic [#277](https://github.com/42maru-ai/maru-design2/issues/277) ([4eafc9e](https://github.com/42maru-ai/maru-design2/commit/4eafc9e6ae0562e544bdfcf9f928d96fbf1e2096))
+* :lipstick: SearchInput - update filter style ([cd06122](https://github.com/42maru-ai/maru-design2/commit/cd06122d7c5c0c2de6023437abc609148fbf8274))
+* :lipstick: SearchInput - update popover border radius ([9522925](https://github.com/42maru-ai/maru-design2/commit/95229254a1a551a835d97697ab67383a4603a9a4))
+* :lipstick: Table - Update chart button style ([6dc3bed](https://github.com/42maru-ai/maru-design2/commit/6dc3bed39f2a8b261607912e6192fcc56485c7cd))
+* :truck: Table - Rename arrow to chart button ([d593857](https://github.com/42maru-ai/maru-design2/commit/d593857d0a9387034e2f9e9fe59a1f514fd9626c))
+* :twisted_rightwards_arrows: Icon - resolve conflicts ([ff43b3c](https://github.com/42maru-ai/maru-design2/commit/ff43b3cb7eadcd7e7ca23ac2ffd8cfd94125aa1c))
+
+## [2.20.4](https://github.com/42maru-ai/maru-design2/compare/v2.20.3...v2.20.4) (2025-01-21)
+
+
+### Bug Fixes
+
+* :lipstick: add disabled to MultiSelectDropdown ([034ec2f](https://github.com/42maru-ai/maru-design2/commit/034ec2f2d3a0061c2227fcec2d2c46625b104f3b))
+
 ## [2.20.3](https://github.com/42maru-ai/maru-design2/compare/v2.20.2...v2.20.3) (2025-01-21)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -51,6 +51,8 @@ export declare const ICONS: {
     readonly BarChart10_s2420: "BarChart10_s2420";
     readonly BarChart12_s2420: "BarChart12_s2420";
     readonly BarChart20_s1613: "BarChart20_s1613";
+    readonly BarChartSquare01Bg_s1810: "BarChartSquare01Bg_s1810";
+    readonly BarChartSquare01_s1810: "BarChartSquare01_s1810";
     readonly BarChartSquare01_s2420: "BarChartSquare01_s2420";
     readonly BarChartSquare02_s2420: "BarChartSquare02_s2420";
     readonly BookClosed_s2420: "BookClosed_s2420";
@@ -140,6 +142,7 @@ export declare const ICONS: {
     readonly Dataflow04_s2415: "Dataflow04_s2415";
     readonly Dataflow05_s1815: "Dataflow05_s1815";
     readonly Diagram_s2014: "Diagram_s2014";
+    readonly Diagram_s2415: "Diagram_s2415";
     readonly Dotpoints01_s2420: "Dotpoints01_s2420";
     readonly DotsGrid_s1815: "DotsGrid_s1815";
     readonly DotsGrid_s2420: "DotsGrid_s2420";
@@ -187,14 +190,18 @@ export declare const ICONS: {
     readonly File_s2420: "File_s2420";
     readonly File_s3020: "File_s3020";
     readonly FilterLines_s1815: "FilterLines_s1815";
+    readonly Filter_s1613: "Filter_s1613";
     readonly FolderSetting_s2013: "FolderSetting_s2013";
+    readonly FolderSetting_s2415: "FolderSetting_s2415";
     readonly FolderUpload_s1615: "FolderUpload_s1615";
     readonly FolderUpload_s1815: "FolderUpload_s1815";
     readonly FolderUpload_s2420: "FolderUpload_s2420";
     readonly Folder_s1810: "Folder_s1810";
+    readonly Folder_s1815: "Folder_s1815";
     readonly Folder_s2415: "Folder_s2415";
     readonly Folder_s2420: "Folder_s2420";
     readonly Folder_s2820: "Folder_s2820";
+    readonly Folders_s1815: "Folders_s1815";
     readonly Globe01_s1615: "Globe01_s1615";
     readonly GraduationHat01_s1615: "GraduationHat01_s1615";
     readonly GraduationHat01_s2415: "GraduationHat01_s2415";
@@ -204,6 +211,7 @@ export declare const ICONS: {
     readonly Home_s2415: "Home_s2415";
     readonly Information_s1410: "Information_s1410";
     readonly Information_s1610: "Information_s1610";
+    readonly Information_s2015: "Information_s2015";
     readonly LineChartDown01_s2420: "LineChartDown01_s2420";
     readonly Loading02_s1415: "Loading02_s1415";
     readonly Loading02_s1615: "Loading02_s1615";
@@ -245,7 +253,9 @@ export declare const ICONS: {
     readonly PlusUpLines_s1413: "PlusUpLines_s1413";
     readonly Plus_s1610: "Plus_s1610";
     readonly PreviewLine_s2013: "PreviewLine_s2013";
+    readonly PreviewLine_s2415: "PreviewLine_s2415";
     readonly PreviewZoom_s2013: "PreviewZoom_s2013";
+    readonly PreviewZoom_s2415: "PreviewZoom_s2415";
     readonly Preview_s1413: "Preview_s1413";
     readonly QuestionCircleBg_s1610: "QuestionCircleBg_s1610";
     readonly RefreshCcw02_s1415: "RefreshCcw02_s1415";
@@ -257,6 +267,7 @@ export declare const ICONS: {
     readonly RefreshCw02_s1615: "RefreshCw02_s1615";
     readonly ReverseLeft2_s1613: "ReverseLeft2_s1613";
     readonly ReverseLeft_s1815: "ReverseLeft_s1815";
+    readonly ReverseRight2Circle_s1413: "ReverseRight2Circle_s1413";
     readonly SaveAll_s1810: "SaveAll_s1810";
     readonly SaveAll_s1812: "SaveAll_s1812";
     readonly Save_s1413: "Save_s1413";
@@ -282,6 +293,7 @@ export declare const ICONS: {
     readonly SwitchHorizontal02_s1615: "SwitchHorizontal02_s1615";
     readonly Title_s2420: "Title_s2420";
     readonly Toggle_s2013: "Toggle_s2013";
+    readonly Toggle_s2415: "Toggle_s2415";
     readonly Tool_s1413: "Tool_s1413";
     readonly Transform_s1815: "Transform_s1815";
     readonly Trash01_s1413: "Trash01_s1413";

package/dist/components/atoms/slider/Slider.d.ts

@@ -0,0 +1,31 @@
+import { TColor } from '../../../enums/color';
+import './slider.scss';
+export interface SliderProps {
+    /**
+     * 현재 값
+     */
+    value: number;
+    /**
+     * 값이 변경될 때 호출되는 함수
+     */
+    onChange: (value: number) => void;
+    /**
+     * 색상
+     */
+    color?: TColor;
+    /**
+     * 최소값 (기본값: 0)
+     */
+    min?: number;
+    /**
+     * 최대값 (기본값: 100)
+     */
+    max?: number;
+    /**
+     * 값 증가 단위 (기본값: 1)
+     */
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Slider({ value, onChange, color, min, max, step, disabled, className, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/components/molecules/multiSelectDropdown/toggle/Arrow.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     open: boolean;
     focus: boolean;
+    disabled?: boolean;
 }
-declare function Arrow({ open, focus }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Arrow({ open, focus, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export default Arrow;

package/dist/components/molecules/searchInput/Filter.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface Props {
+    on: boolean;
+    formats: {
+        columnIdKey: string;
+        columnName?: string;
+        filter?: React.ReactNode;
+    }[];
+    hoverContent?: string;
+    resetButtonContent?: string;
+    onReset: () => void;
+    searchButtonContent?: string;
+    onSearch: () => void;
+    inputWrapperRef: React.RefObject<HTMLDivElement>;
+}
+declare function Filter({ on, formats, hoverContent, resetButtonContent, onReset, searchButtonContent, onSearch, inputWrapperRef, }: Props): import("react/jsx-runtime").JSX.Element;
+export default Filter;

package/dist/components/molecules/searchInput/SearchInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './search-input.scss';
-export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
     /**
      * 초기화 함수 (@v1 hasClearBtn, onClear)
      */
@@ -14,5 +14,21 @@ export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     wrapperRef?: React.RefObject<HTMLDivElement>;
     className?: string;
+    /**
+     * 검색 필터
+     */
+    filter?: {
+        on: boolean;
+        formats: {
+            columnIdKey: string;
+            columnName?: string;
+            filter?: React.ReactNode;
+        }[];
+        hoverContent?: string;
+        onReset: () => void;
+        resetButtonContent?: string;
+        onSearch: () => void;
+        searchButtonContent?: string;
+    };
 }
-export declare function SearchInput({ className, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchInput({ hiddenClearButton, className, filter, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/table/Table.d.ts

@@ -1,3 +1,3 @@
 import { TableProps } from './types';
 import './table.scss';
-export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, arrowButton, onRowClick, selectedRow, highlightRows, className, id, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, className, id, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/table/body/BinButtonTd.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    rowId: string;
+    hovered: boolean;
+    onClick: (rowId: string) => void;
+}
+declare function BinButtonTd({ rowId, hovered, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export default BinButtonTd;

package/dist/components/molecules/table/body/ChartButtonTd.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    rowId: string;
+    hovered: boolean;
+    selected?: boolean;
+    onClick: (rowId: string) => void;
+}
+declare function ChartButtonTd({ rowId, hovered, selected, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export default ChartButtonTd;

package/dist/components/molecules/table/body/CheckboxTd.d.ts

@@ -1,7 +1,6 @@
 interface Props {
-    rowId: string;
     checked: boolean;
-    onCheck: (rowId: string, checked: boolean) => void;
+    onCheck: (checked: boolean) => void;
 }
-declare function CheckboxTd({ rowId, checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxTd({ checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
 export default CheckboxTd;

package/dist/components/molecules/table/body/EmptyTr.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    noDataMessage?: string;
+    loadingContent?: React.ReactNode;
+    emptyBodyHeight: number;
+}
+declare function EmptyTr({ noDataMessage, loadingContent, emptyBodyHeight }: Props): import("react/jsx-runtime").JSX.Element;
+export default EmptyTr;

package/dist/components/molecules/table/body/RadioTd.d.ts

@@ -1,7 +1,6 @@
 interface Props {
-    rowId: string;
     checked: boolean;
-    onCheck: (rowId: string, checked: boolean) => void;
+    onCheck: (checked: boolean) => void;
 }
-declare function RadioTd({ rowId, checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
+declare function RadioTd({ checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
 export default RadioTd;

package/dist/components/molecules/table/body/Tr.d.ts

@@ -0,0 +1,7 @@
+import { TableProps } from '../types';
+interface Props extends TableProps {
+    row: Record<string, any>;
+    hasActionCol: boolean;
+}
+declare function Tr({ row, rowIdKey, formats, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, }: Props): import("react/jsx-runtime").JSX.Element;
+export default Tr;

package/dist/components/molecules/table/body/index.d.ts

@@ -0,0 +1,7 @@
+import { TableProps } from '../types';
+interface Props extends TableProps {
+    hasActionCol: boolean;
+    emptyBodyHeight: number;
+}
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyBodyHeight, }: Props): import("react/jsx-runtime").JSX.Element;
+export default TBody;

package/dist/components/molecules/table/header/{THead.d.ts → index.d.ts}

@@ -1,20 +1,17 @@
 import React from 'react';
-import { IColumnFormats, ISort } from '../types';
+import { IColumnFormats, IFilter, ISort } from '../types';
 interface Props {
     formats: IColumnFormats[];
     sort?: ISort;
     onSortClick: (columnName: string) => () => void;
     hasCheckbox?: boolean;
-    hasRadio?: boolean;
     allCheckbox: boolean;
     onAllCheck: (checked: boolean) => void;
-    hasActionCol: boolean;
-    filter?: {
-        on: boolean;
-        onReset: () => void;
-    };
+    hasRadio?: boolean;
+    filter?: IFilter;
     filterToggle: boolean;
     setFilterToggle: React.Dispatch<React.SetStateAction<boolean>>;
+    hasActionCol: boolean;
 }
-declare function THead({ formats, sort, onSortClick, hasCheckbox, hasRadio, allCheckbox, onAllCheck, hasActionCol, filter, filterToggle, setFilterToggle, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasRadio, filter, filterToggle, setFilterToggle, hasActionCol, }: Props): import("react/jsx-runtime").JSX.Element;
 export default THead;

package/dist/components/molecules/table/types.d.ts

@@ -16,6 +16,10 @@ export interface IColumnFormats {
      */
     iconTooltip?: string;
 }
+export interface IFilter {
+    on: boolean;
+    onReset: () => void;
+}
 export type TShow = 'none' | 'hover' | 'always';
 export interface TableProps {
     /**
@@ -57,10 +61,7 @@ export interface TableProps {
     /**
      * 최우측 컬럼 헤더의 필터 영역. format.filter와 조합해서 사용 가능
      */
-    filter?: {
-        on: boolean;
-        onReset: () => void;
-    };
+    filter?: IFilter;
     /**
      * 최우측 컬럼 바디의 더보기 메뉴. binButton, arrowButton과 같이 쓸 수 없음.
      * TShow='none' | 'hover' | 'always'. (@v1 hamberger)
@@ -81,7 +82,7 @@ export interface TableProps {
      * 최우측 컬럼 바디의 화살표 버튼. kebabMenu, binButton과 같이 쓸 수 없음.
      * TShow='none' | 'hover' | 'always'.
      */
-    arrowButton?: {
+    chartButton?: {
         show: (rowId?: string) => TShow;
         onClick: (rowId: string) => void;
     };
@@ -91,10 +92,12 @@ export interface TableProps {
     onRowClick?: (rowId: string) => void;
     /**
      * 선택된 행 스타일 지정, onRowClick과 조합해서 사용 가능 (@v1 focusedRowInfo)
+     * @scrollIntoView smooth / center / center
      */
     selectedRow?: {
         rowId: string;
         className?: string;
+        scrollIntoView?: boolean;
     };
     /**
      * 하이라이팅할 행과 스타일 지정

package/dist/enums/color.d.ts

@@ -1,4 +1,4 @@
-export type TTheme = 'blue' | 'green';
+export type TTheme = 'blue' | 'green' | 'navy';
 declare const DColor: {
     readonly primary: "var(--p)";
     readonly secondary: "#8c8c8c";

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/atoms/input';
 export * from './components/atoms/popover';
 export * from './components/atoms/radio';
 export * from './components/atoms/skeleton';
+export * from './components/atoms/slider';
 export * from './components/atoms/textarea';
 export * from './components/atoms/toggle';
 export * from './components/atoms/tooltip';