@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/{types/src/components/combobox → temp/src/components/combo-box}/index.d.ts

@@ -1,3 +1,2 @@
-export { ComboBox } from './ComboBox';
 export type { ComboBoxProps } from './ComboBox';
-//# sourceMappingURL=index.d.ts.map
+export { ComboBox } from './ComboBox';

package/dist/temp/src/components/combo-box/index.js

@@ -0,0 +1 @@
+export { ComboBox } from './ComboBox';

package/dist/temp/src/components/data-grid/DataGrid.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPaginationProps, DataGridSearchFilterProps, DataGridSummaryProps, DataGridTableProps } from './DataGrid.types';
+export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: import("./DataGrid.types").DataGridVariant | undefined;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    SearchFilter: {
+        ({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Summary: {
+        ({ children, className, ...rest }: DataGridSummaryProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    FilterBar: {
+        ({ children, className, ...rest }: DataGridFilterBarProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ActionBar: {
+        ({ children, className, position, align, ...rest }: DataGridActionBarProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Table: import("react").ForwardRefExoticComponent<DataGridTableProps & import("react").RefAttributes<HTMLDivElement>>;
+    Pagination: {
+        ({ children, className, ...rest }: DataGridPaginationProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/temp/src/components/data-grid/DataGrid.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Children, forwardRef, isValidElement } from 'react';
+import { Table as NcuaTable } from '../table';
+// ──────────────────────────────────────────────
+// Sub-components
+// ──────────────────────────────────────────────
+const SearchFilter = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__search-filter', className), ...rest, children: children }));
+SearchFilter.displayName = 'DataGrid.SearchFilter';
+const Summary = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__summary', className), ...rest, children: children }));
+Summary.displayName = 'DataGrid.Summary';
+const FilterBar = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__filter-bar', className), ...rest, children: children }));
+FilterBar.displayName = 'DataGrid.FilterBar';
+const ActionBar = ({ children, className, position = 'top', align = 'space-between', ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__action-bar', className, {
+        'ncua-data-grid__action-bar--top': position === 'top',
+        'ncua-data-grid__action-bar--bottom': position === 'bottom',
+        'ncua-data-grid__action-bar--left': align === 'left',
+        'ncua-data-grid__action-bar--right': align === 'right',
+        'ncua-data-grid__action-bar--space-between': align === 'space-between',
+    }), ...rest, children: children }));
+ActionBar.displayName = 'DataGrid.ActionBar';
+const DataGridTable = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-data-grid__table', className), children: _jsx(NcuaTable, { className: "ncua-table--in-data-grid", type: type, fixedHeader: fixedHeader, maxHeight: maxHeight, hoverable: hoverable, selectable: selectable, children: children }) })));
+DataGridTable.displayName = 'DataGrid.Table';
+const Pagination = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__pagination', className), ...rest, children: children }));
+Pagination.displayName = 'DataGrid.Pagination';
+const CHILD_TYPE_MAP = new Map([
+    [SearchFilter, 'searchFilter'],
+    [Summary, 'summary'],
+    [FilterBar, 'filterBar'],
+    [DataGridTable, 'dataTable'],
+    [Pagination, 'pagination'],
+]);
+const categorizeChild = (child, result) => {
+    if (!isValidElement(child)) {
+        return;
+    }
+    // ActionBar requires position-based categorization
+    if (child.type === ActionBar) {
+        const position = child.props.position ?? 'top';
+        const key = position === 'bottom' ? 'bottomActionBar' : 'topActionBar';
+        result[key].push(child);
+        return;
+    }
+    const category = CHILD_TYPE_MAP.get(child.type);
+    if (category) {
+        result[category].push(child);
+    }
+};
+const sortChildren = (children) => {
+    const result = {
+        searchFilter: [],
+        summary: [],
+        filterBar: [],
+        topActionBar: [],
+        dataTable: [],
+        bottomActionBar: [],
+        pagination: [],
+    };
+    Children.forEach(children, (child) => {
+        categorizeChild(child, result);
+    });
+    return result;
+};
+const hasTableWrapperContent = (sorted) => sorted.filterBar.length > 0 ||
+    sorted.topActionBar.length > 0 ||
+    sorted.dataTable.length > 0 ||
+    sorted.bottomActionBar.length > 0;
+const isTableSelectable = (dataTable) => dataTable.some((child) => isValidElement(child) && child.props.selectable === true);
+// ──────────────────────────────────────────────
+// Main DataGrid component
+// ──────────────────────────────────────────────
+const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, ...rest }, ref) => {
+    const sorted = sortChildren(children);
+    const needsEmptyBottomBar = sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`), ...rest, children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && (_jsxs("div", { className: "ncua-data-grid__table-wrapper", children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", { className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom" })] })), sorted.pagination] }));
+});
+DataGridComponent.displayName = 'DataGrid';
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+export const DataGrid = Object.assign(DataGridComponent, {
+    SearchFilter,
+    Summary,
+    FilterBar,
+    ActionBar,
+    Table: DataGridTable,
+    Pagination,
+});

package/dist/temp/src/components/data-grid/DataGrid.types.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { TableType } from '../table';
+export type DataGridVariant = 'search-result' | 'horizontal';
+export type ActionBarPosition = 'top' | 'bottom';
+export type ActionBarAlign = 'left' | 'right' | 'space-between';
+export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    variant?: DataGridVariant;
+    children: ReactNode;
+};
+export type DataGridSearchFilterProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridSummaryProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridFilterBarProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridActionBarProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    children: ReactNode;
+    position?: ActionBarPosition;
+    align?: ActionBarAlign;
+};
+export type DataGridTableProps = {
+    children: ReactNode;
+    className?: string;
+    type?: TableType;
+    fixedHeader?: boolean;
+    maxHeight?: string | number;
+    hoverable?: boolean;
+    selectable?: boolean;
+};
+export type DataGridPaginationProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};

package/dist/temp/src/components/data-grid/DataGrid.types.js

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/data-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export * from './DataGrid.types';

package/dist/temp/src/components/data-grid/index.js

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export * from './DataGrid.types';

package/dist/temp/src/components/date-picker/CustomInput.d.ts

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes } from 'react';
+import type { Size } from '../../../constant/size';
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled: boolean;
+    iconName: 'calendar' | 'clock';
+    iconSize: Extract<Size, 'xs' | 'sm'>;
+    placeholder?: string;
+}
+declare const CustomInput: import("react").ForwardRefExoticComponent<CustomInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { CustomInput };

package/dist/temp/src/components/date-picker/CustomInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, Clock } from '@ncds/ui-admin-icon';
+import { forwardRef } from 'react';
+const SVG_SIZE_XS = 14;
+const SVG_SIZE_SM = 16;
+const CustomInput = forwardRef(({ disabled, iconSize, iconName, ...props }, ref) => {
+    const svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: ref, disabled: disabled, autoComplete: props.autoComplete || 'off', ...props }), _jsx("label", { className: "ncua-date-picker__ico", htmlFor: props.id, children: iconName === 'calendar' ? (_jsx(Calendar, { width: svgSize, height: svgSize })) : (_jsx(Clock, { width: svgSize, height: svgSize })) })] }));
+});
+CustomInput.displayName = 'CustomInput';
+export { CustomInput };

package/dist/temp/src/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,28 @@
+import type { DateOption, Options } from 'flatpickr/dist/types/options';
+import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
+import type { Size } from '../../../constant/size';
+export type DatePickerProps = {
+    size?: Extract<Size, 'xs' | 'sm'>;
+    shouldFocus?: boolean;
+    currentDate: string;
+    datePickerOptions?: Options;
+    destructive?: string;
+    placeholder?: string;
+    isEndDate?: boolean;
+    className?: string;
+    /**
+     * 캘린더를 body에 포탈 마운트합니다.
+     * overflow: auto/scroll/hidden이 적용된 스크롤 컨테이너 안에서
+     * 캘린더가 잘리는 문제를 해결합니다.
+     */
+    portal?: boolean;
+    onChangeDate: (date: string) => void;
+    onValidationError?: (error: {
+        date: Date;
+        minDate?: DateOption;
+        maxDate?: DateOption;
+        violations: Array<'minDate' | 'maxDate'>;
+        previousDate?: Date;
+    }) => void;
+} & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;