maru_design2 2.4.1 → 2.4.3

package/dist/components/molecules/dropdown/toggleButton/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TColor } from '../../../../enums/color';
+interface Props<T extends Record<string, any>> {
+    displayKey: string;
+    placeholder?: string;
+    disabled?: boolean;
+    color: TColor;
+    stopPropagation?: boolean;
+    width?: number;
+    customButton?: React.ReactNode;
+    open: boolean;
+    selected: T | undefined;
+    errored?: boolean;
+    hasClearBtn: boolean;
+    onClear: () => void;
+    onClick: () => void;
+}
+declare function DropdownToggleButton<T extends Record<string, any>>({ displayKey, placeholder, disabled, color, stopPropagation, width, customButton, open, selected, errored, hasClearBtn, onClear, onClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default DropdownToggleButton;

package/dist/components/molecules/modal/Modal.d.ts

@@ -1,50 +1,48 @@
-import React from 'react';
-import { TColor } from '../../../enums/color';
-import { TModalSize } from '../../../enums/size';
-import './modal.scss';
-export interface ModalProps {
-    children: React.ReactNode;
-    onClose: () => void;
-    open: boolean;
-    /**
-     * 배경 클릭 시 컴포넌트 닫히는지 여부. (@v1 backdropOff)
-     */
-    backdrop?: boolean;
-    /**
-     * 모달 취소버튼 설정. { content: string, disabled?: string}
-     */
-    cancelButton?: {
-        content: string;
-        disabled?: boolean;
-    };
-    className?: string;
-    /**
-     * 엔터키 비활성화 여부. (@v1 disableEnterKeyDown)
-     */
-    disabledEnter?: boolean;
-    /**
-     * 모달 닫기 버튼 숨김 여부. (@v1 hasCloseButton)
-     */
-    hiddenCloseButton?: boolean;
-    /**
-     * 모달 확인버튼 설정.
-     * { content: string,
-     *  color?: 'primary' | 'secondary' | 'positive' | 'warning' | 'danger',
-     *  disabled?: boolean, onClick?: () => void }. (@v1 confirmButton)
-     */
-    okButton?: {
-        content: string;
-        color?: TColor;
-        disabled?: boolean;
-        onClick?: () => void;
-    };
-    /**
-     * ['xs', 's', 'm', 'l', 'xl']
-     */
-    size?: TModalSize;
-    /**
-     * 모달 제목
-     */
-    title?: string;
-}
-export declare function Modal({ children, onClose, open, backdrop, cancelButton, className, disabledEnter, hiddenCloseButton, okButton, size, title, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+import { TColor } from '../../../enums/color';
+import { TModalSize } from '../../../enums/size';
+import './modal.scss';
+export interface ModalProps {
+    children: React.ReactNode;
+    onClose: () => void;
+    open: boolean;
+    /**
+     * 배경 클릭 시 컴포넌트 닫히는지 여부. (@v1 backdropOff)
+     */
+    backdrop?: boolean;
+    /**
+     * 모달 취소버튼 설정
+     */
+    cancelButton?: {
+        content: string;
+        disabled?: boolean;
+    };
+    className?: string;
+    /**
+     * 엔터키 비활성화 여부. (@v1 disableEnterKeyDown)
+     */
+    disabledEnter?: boolean;
+    /**
+     * 모달 닫기 버튼 숨김 여부. (@v1 hasCloseButton)
+     */
+    hiddenCloseButton?: boolean;
+    /**
+     * 모달 확인버튼 설정 (@v1 confirmButton)
+     */
+    okButton?: {
+        content: string;
+        color?: TColor;
+        disabled?: boolean;
+        onClick?: () => void;
+    };
+    size?: TModalSize;
+    /**
+     * 모달 제목
+     */
+    title?: string;
+    /**
+     * 모달 제목 옆에 들어갈 내용
+     */
+    subTitle?: React.ReactNode;
+}
+export declare function Modal({ children, onClose, open, backdrop, cancelButton, className, disabledEnter, hiddenCloseButton, okButton, size, title, subTitle, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/modal/index.d.ts

@@ -1 +1 @@
-export * from './Modal';
+export * from './Modal';

package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts

@@ -0,0 +1,76 @@
+import { TColor } from '../../../enums/color';
+import { TDropdownType } from '../../../enums/type';
+import './multi-select-dropdown.scss';
+export interface MultiSelectDropdownProps<T extends Record<string, any>> {
+    data: T[];
+    /**
+     * 선택된 아이디들
+     */
+    selectedIds: string[];
+    onSelect: (ids: string[]) => void;
+    /**
+     * 아이디로 쓸 키
+     */
+    idKey: string;
+    /**
+     * 노출로 쓸 키
+     */
+    displayKey: string;
+    /**
+     * 드롭다운 버튼에 노출할 컨텐츠
+     */
+    content: string;
+    className?: string;
+    /**
+     * 드롭다운 버튼의 placeholder
+     */
+    placeholder?: string;
+    /**
+     * 메뉴 내 검색창의 placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * 전체 체크박스 옆에 노출할 라벨
+     */
+    allCheckLabel?: string;
+    disabled?: boolean;
+    color?: TColor;
+    /**
+     * true로 하면 드롭다운으로 이벤트가 가지 않음
+     */
+    stopPropagation?: boolean;
+    /**
+     * 데이터 타입
+     */
+    type?: TDropdownType;
+    /**
+     * 에러났을때 메시지
+     */
+    errorMessage?: string;
+    label?: string;
+    /**
+     * 초기화 함수
+     */
+    onClear?: () => void;
+    /**
+     * 데이터가 없을때의 문구
+     */
+    noDataMessage?: string;
+    /**
+     * 검색 결과가 없을때의 문구
+     */
+    noResultMessage?: string;
+    /**
+     * 토글, 메뉴 가로 크기(px)
+     */
+    width?: number;
+    /**
+     * 메뉴 세로 크기(px)
+     */
+    height?: number;
+    /**
+     * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
+     */
+    anchorEl?: HTMLElement | null;
+}
+export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, className, placeholder, searchPlaceholder, disabled, color, stopPropagation, type, errorMessage, label, allCheckLabel, onClear, noDataMessage, noResultMessage, width, height, anchorEl, }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/multiSelectDropdown/index.d.ts

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

package/dist/components/molecules/multiSelectDropdown/menu/MenuItem.d.ts

@@ -0,0 +1,12 @@
+import { TColor } from '../../../../enums/color';
+interface Props<T extends Record<string, any>> {
+    item: T;
+    selectedIds: string[];
+    onSelect: (ids: string[]) => void;
+    idKey: string;
+    displayKey: string;
+    color?: TColor;
+    width?: number;
+}
+declare function MenuItem<T extends Record<string, any>>({ item, selectedIds, onSelect, idKey, displayKey, color, width, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default MenuItem;

package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts

@@ -0,0 +1,21 @@
+import { TColor } from '../../../../enums/color';
+interface Props<T extends Record<string, any>> {
+    data: T[];
+    selectedIds: string[];
+    onSelect: (ids: string[]) => void;
+    idKey: string;
+    displayKey: string;
+    searchPlaceholder?: string;
+    allCheckLabel?: string;
+    color?: TColor;
+    noDataMessage?: string;
+    noResultMessage?: string;
+    width?: number;
+    height?: number;
+    isSearch: boolean;
+    parent: HTMLElement;
+    open: boolean;
+    onClose: () => void;
+}
+declare function DropdownMenu<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, open, onClose, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;

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

@@ -0,0 +1,9 @@
+import { TColor } from '../../../../enums/color';
+interface Props {
+    open: boolean;
+    focus: boolean;
+    color: TColor;
+    disabled?: boolean;
+}
+declare function Arrow({ open, focus, color, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+export default Arrow;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Clear.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    focus: boolean;
+    onClear: () => void;
+}
+declare function Clear({ focus, onClear }: Props): import("react/jsx-runtime").JSX.Element;
+export default Clear;

package/dist/components/molecules/multiSelectDropdown/toggleButton/index.d.ts

@@ -0,0 +1,17 @@
+import { TColor } from '../../../../enums/color';
+interface Props {
+    content: string;
+    placeholder?: string;
+    disabled?: boolean;
+    color: TColor;
+    stopPropagation?: boolean;
+    width?: number;
+    open: boolean;
+    selected: boolean;
+    errored?: boolean;
+    hasClearBtn: boolean;
+    onClear: () => void;
+    onClick: () => void;
+}
+declare function DropdownToggleButton({ content, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default DropdownToggleButton;

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -1,26 +1,22 @@
-import { TButtonType } from '../../../enums/type';
-import './pagination.scss';
-export interface PaginationProps {
-    /**
-     * 현재 페이지. (@v1 page.curPage)
-     */
-    page: number;
-    /**
-     * 현재 페이지 설정 함수. (@v1 page.setPage)
-     */
-    onPageChange: (page: number) => void;
-    /**
-     * 총 페이지
-     */
-    totalPage: number;
-    className?: string;
-    /**
-     * prev, next 버튼 공간 차지 여부
-     */
-    buttonVisibility?: 'visible' | 'hidden';
-    /**
-     * 데이터 타입. ['button', 'input'] (@v1 isSearch)
-     */
-    type?: TButtonType;
-}
-export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, type, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+import './pagination.scss';
+export interface PaginationProps {
+    /**
+     * 현재 페이지. (@v1 page.curPage)
+     */
+    page: number;
+    /**
+     * 현재 페이지 설정 함수. (@v1 page.setPage)
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * 총 페이지
+     */
+    totalPage: number;
+    className?: string;
+    /**
+     * prev, next 버튼 공간 차지 여부
+     */
+    buttonVisibility?: 'visible' | 'hidden';
+    label: string;
+}
+export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, label, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/pagination/index.d.ts

@@ -1 +1 @@
-export * from './Pagination';
+export * from './Pagination';

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import './search-input.scss';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
+    /**
+     * 초기화 함수 (@v1 hasClearBtn, onClear)
+     */
+    onClear?: () => void;
+    /**
+     * 초기화 버튼 숨기기
+     */
+    hiddenClearButton?: boolean;
+    /**
+     * input을 감싸고 있는 div의 ref, input은 일반 ref 사용
+     */
+    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({ hiddenClearButton, className, filter, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/searchInput/filter/FilterPopover.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Props {
+    parent: HTMLElement;
+    onClose: () => void;
+    formats: {
+        columnIdKey: string;
+        columnName?: string;
+        filter?: React.ReactNode;
+    }[];
+    resetButtonContent?: string;
+    onReset: () => void;
+    searchButtonContent?: string;
+    onSearch: () => void;
+}
+declare function FilterPopover({ parent, onClose, formats, resetButtonContent, onReset, searchButtonContent, onSearch, }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterPopover;

package/dist/components/molecules/searchInput/filter/index.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/index.d.ts

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

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

@@ -1,9 +1,9 @@
-import { IColumnFormats } from './types';
-interface Props {
-    hasCheckbox?: boolean;
-    formats: IColumnFormats[];
-    hasKebabMenu: boolean;
-    kebabMenuWidth?: string;
-}
-declare function Colgroup({ hasCheckbox, formats, hasKebabMenu, kebabMenuWidth, }: Props): import("react/jsx-runtime").JSX.Element;
-export default Colgroup;
+import { IColumnFormats } from './types';
+interface Props {
+    hasCheckbox?: boolean;
+    hasRadio?: boolean;
+    formats: IColumnFormats[];
+    hasActionCol: boolean;
+}
+declare function Colgroup({ hasCheckbox, hasRadio, formats, hasActionCol }: Props): import("react/jsx-runtime").JSX.Element;
+export default Colgroup;

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, sort, onSort, checkedIds, onCheck, kebabMenu, onRowClick, selectedRow, onRowMouseOver, onRowMouseLeave, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
+import { TableProps } from './types';
+import './table.scss';
+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;
-}
-declare function CheckboxTd({ rowId, checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
-export default CheckboxTd;
+interface Props {
+    checked: boolean;
+    onCheck: (checked: boolean) => void;
+}
+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/KebabMenuTd.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-interface Props {
-    rowId: string;
-    kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
-}
-declare function KebabMenuTd({ rowId, kebabContent }: Props): import("react/jsx-runtime").JSX.Element | null;
-export default KebabMenuTd;
+import React from 'react';
+interface Props {
+    rowId: string;
+    kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
+}
+declare function KebabMenuTd({ rowId, kebabContent }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default KebabMenuTd;

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

@@ -0,0 +1,6 @@
+interface Props {
+    checked: boolean;
+    onCheck: (checked: boolean) => void;
+}
+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/FilterButtonsTh.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    toggle: boolean;
+    onToggle: () => void;
+    onReset?: () => void;
+}
+declare function FilterButtonsTh({ toggle, onToggle, onReset }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterButtonsTh;

package/dist/components/molecules/table/header/FilterTh.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    children: React.ReactElement;
+    toggle: boolean;
+    filter?: React.ReactNode;
+}
+declare function FilterTh({ children, toggle, filter }: Props): import("react/jsx-runtime").JSX.Element;
+export default FilterTh;

package/dist/components/molecules/table/header/SortableColumn.d.ts

@@ -0,0 +1,15 @@
+import { IColumnFormats, ISort } from '../types';
+interface Props {
+    format: IColumnFormats;
+    sort?: ISort;
+    onSortClick: (columnName: string) => () => void;
+}
+/**
+ * 정렬 아닌거 마우스오버하면 쌍방 화살표
+ * 내림차순 정렬이면 아래 화살표
+ * 오름차순 정렬이면 위 화살표
+ * 색깔은 언제나 b500 #5c5c5c
+ * @returns
+ */
+declare function SortableColumn({ format, sort, onSortClick }: Props): import("react/jsx-runtime").JSX.Element;
+export default SortableColumn;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IColumnFormats, IFilter, ISort } from '../types';
+interface Props {
+    formats: IColumnFormats[];
+    sort?: ISort;
+    onSortClick: (columnName: string) => () => void;
+    hasCheckbox?: boolean;
+    allCheckbox: boolean;
+    onAllCheck: (checked: boolean) => void;
+    hasRadio?: boolean;
+    filter?: IFilter;
+    filterToggle: boolean;
+    setFilterToggle: React.Dispatch<React.SetStateAction<boolean>>;
+    hasActionCol: boolean;
+}
+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/index.d.ts

@@ -1 +1 @@
-export * from './Table';
+export * from './Table';