@sellmate/design-system-react 1.0.62 → 1.0.64

package/dist/components/components.server.js

@@ -44,6 +44,7 @@ export const SdBarcodeInput = /*@__PURE__*/ createComponent({
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
     },
@@ -77,6 +78,7 @@ export const SdButtonV2 = /*@__PURE__*/ createComponent({
         name: 'name',
         label: 'label',
         icon: 'icon',
+        rightIcon: 'right-icon',
         ariaLabel: 'aria-label',
         disabled: 'disabled',
         type: 'type'
@@ -108,12 +110,24 @@ export const SdCheckbox = /*@__PURE__*/ createComponent({
         value: 'value',
         val: 'val',
         disabled: 'disabled',
+        inverse: 'inverse',
         label: 'label'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdCheckbox,
     serializeShadowRoot,
 });
+export const SdCircleProgress = /*@__PURE__*/ createComponent({
+    tagName: 'sd-circle-progress',
+    properties: {
+        indeterminate: 'indeterminate',
+        value: 'value',
+        type: 'type'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdCircleProgress,
+    serializeShadowRoot,
+});
 export const SdConfirmModal = /*@__PURE__*/ createComponent({
     tagName: 'sd-confirm-modal',
     properties: {
@@ -158,6 +172,7 @@ export const SdDatePicker = /*@__PURE__*/ createComponent({
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -198,6 +213,7 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
         disabled: 'disabled',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -241,7 +257,9 @@ export const SdField = /*@__PURE__*/ createComponent({
         hint: 'hint',
         errorMessage: 'error-message',
         width: 'width',
+        size: 'size',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
@@ -263,6 +281,7 @@ export const SdFilePicker = /*@__PURE__*/ createComponent({
         maxFiles: 'max-files',
         name: 'name',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -365,6 +384,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
         focused: 'focused',
         hovered: 'hovered',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         rules: 'rules'
     },
@@ -372,11 +392,24 @@ export const SdInput = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdInput,
     serializeShadowRoot,
 });
-export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
-    tagName: 'sd-loading-spinner',
-    properties: { color: 'color' },
+export const SdLoadingContainer = /*@__PURE__*/ createComponent({
+    tagName: 'sd-loading-container',
+    properties: {},
     hydrateModule: import('@sellmate/design-system/hydrate'),
-    clientModule: clientComponents.SdLoadingSpinner,
+    clientModule: clientComponents.SdLoadingContainer,
+    serializeShadowRoot,
+});
+export const SdLoadingModal = /*@__PURE__*/ createComponent({
+    tagName: 'sd-loading-modal',
+    properties: {
+        state: 'state',
+        message: 'message',
+        buttonLabel: 'button-label',
+        width: 'width',
+        height: 'height'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdLoadingModal,
     serializeShadowRoot,
 });
 export const SdModalContainer = /*@__PURE__*/ createComponent({
@@ -397,6 +430,7 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
         useDecimal: 'use-decimal',
         value: 'value',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         placeholder: 'placeholder',
         disabled: 'disabled',
@@ -488,8 +522,8 @@ export const SdRadio = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdRadio,
     serializeShadowRoot,
 });
-export const SdRadioButtonGroup = /*@__PURE__*/ createComponent({
-    tagName: 'sd-radio-button-group',
+export const SdRadioButton = /*@__PURE__*/ createComponent({
+    tagName: 'sd-radio-button',
     properties: {
         value: 'value',
         size: 'size',
@@ -498,7 +532,7 @@ export const SdRadioButtonGroup = /*@__PURE__*/ createComponent({
         options: 'options'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
-    clientModule: clientComponents.SdRadioButtonGroup,
+    clientModule: clientComponents.SdRadioButton,
     serializeShadowRoot,
 });
 export const SdRadioGroup = /*@__PURE__*/ createComponent({
@@ -527,6 +561,7 @@ export const SdSelect = /*@__PURE__*/ createComponent({
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -567,6 +602,7 @@ export const SdSelectGroup = /*@__PURE__*/ createComponent({
         clearable: 'clearable',
         searchable: 'searchable',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         labelTooltip: 'label-tooltip',
         error: 'error',
@@ -591,6 +627,7 @@ export const SdSelectMultiple = /*@__PURE__*/ createComponent({
         useAll: 'use-all',
         useCheckbox: 'use-checkbox',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -616,6 +653,7 @@ export const SdSelectMultipleGroup = /*@__PURE__*/ createComponent({
         allCheckedLabel: 'all-checked-label',
         allCheckOptionLabel: 'all-check-option-label',
         label: 'label',
+        labelWidth: 'label-width',
         labelTooltip: 'label-tooltip',
         error: 'error',
         value: 'value',
@@ -673,6 +711,7 @@ export const SdSelectV2 = /*@__PURE__*/ createComponent({
         dropdownHeight: 'dropdown-height',
         disabled: 'disabled',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         error: 'error',
         hint: 'hint',
@@ -734,6 +773,44 @@ export const SdSelectV2Trigger = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdSelectV2Trigger,
     serializeShadowRoot,
 });
+export const SdSwitch = /*@__PURE__*/ createComponent({
+    tagName: 'sd-switch',
+    properties: {
+        value: 'value',
+        label: 'label',
+        disabled: 'disabled'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdSwitch,
+    serializeShadowRoot,
+});
+export const SdTable = /*@__PURE__*/ createComponent({
+    tagName: 'sd-table',
+    properties: {
+        tableId: 'table-id',
+        rowKey: 'row-key',
+        selectable: 'selectable',
+        resizable: 'resizable',
+        width: 'width',
+        height: 'height',
+        stickyHeader: 'sticky-header',
+        noDataLabel: 'no-data-label',
+        isLoading: 'is-loading',
+        useInternalPagination: 'use-internal-pagination',
+        useRowsPerPageSelect: 'use-rows-per-page-select',
+        useVirtualScroll: 'use-virtual-scroll',
+        rowHeight: 'row-height',
+        virtualBuffer: 'virtual-buffer',
+        virtualEndThreshold: 'virtual-end-threshold',
+        columns: 'columns',
+        rows: 'rows',
+        selected: 'selected',
+        rowsPerPageOption: 'rowsPerPageOption'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdTable,
+    serializeShadowRoot,
+});
 export const SdTabs = /*@__PURE__*/ createComponent({
     tagName: 'sd-tabs',
     properties: {
@@ -758,6 +835,26 @@ export const SdTag = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdTag,
     serializeShadowRoot,
 });
+export const SdTbody = /*@__PURE__*/ createComponent({
+    tagName: 'sd-tbody',
+    properties: {
+        rows: 'rows'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdTbody,
+    serializeShadowRoot,
+});
+export const SdTd = /*@__PURE__*/ createComponent({
+    tagName: 'sd-td',
+    properties: {
+        field: 'field',
+        rowKey: 'row-key',
+        align: 'align'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdTd,
+    serializeShadowRoot,
+});
 export const SdTextLink = /*@__PURE__*/ createComponent({
     tagName: 'sd-text-link',
     properties: {
@@ -787,6 +884,7 @@ export const SdTextarea = /*@__PURE__*/ createComponent({
         spellcheck: 'spellcheck',
         width: 'width',
         label: 'label',
+        labelWidth: 'label-width',
         addonLabel: 'addon-label',
         hint: 'hint',
         errorMessage: 'error-message',
@@ -801,6 +899,22 @@ export const SdTextarea = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdTextarea,
     serializeShadowRoot,
 });
+export const SdThead = /*@__PURE__*/ createComponent({
+    tagName: 'sd-thead',
+    properties: {
+        selectable: 'selectable',
+        resizable: 'resizable',
+        stickyHeader: 'sticky-header',
+        scrolledLeft: 'scrolled-left',
+        scrolledRight: 'scrolled-right',
+        columns: 'columns',
+        rows: 'rows',
+        columnWidths: 'columnWidths'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdThead,
+    serializeShadowRoot,
+});
 export const SdToast = /*@__PURE__*/ createComponent({
     tagName: 'sd-toast',
     properties: {
@@ -838,17 +952,6 @@ export const SdToggle = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdToggle,
     serializeShadowRoot,
 });
-export const SdToggleButton = /*@__PURE__*/ createComponent({
-    tagName: 'sd-toggle-button',
-    properties: {
-        value: 'value',
-        label: 'label',
-        disabled: 'disabled'
-    },
-    hydrateModule: import('@sellmate/design-system/hydrate'),
-    clientModule: clientComponents.SdToggleButton,
-    serializeShadowRoot,
-});
 export const SdTooltip = /*@__PURE__*/ createComponent({
     tagName: 'sd-tooltip',
     properties: {
@@ -868,3 +971,26 @@ export const SdTooltip = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdTooltip,
     serializeShadowRoot,
 });
+export const SdTr = /*@__PURE__*/ createComponent({
+    tagName: 'sd-tr',
+    properties: {
+        selectable: 'selectable',
+        rowKey: 'row-key',
+        columns: 'columns'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdTr,
+    serializeShadowRoot,
+});
+export const TableTest = /*@__PURE__*/ createComponent({
+    tagName: 'table-test',
+    properties: {
+        bordered: 'bordered',
+        striped: 'striped',
+        columns: 'columns',
+        rows: 'rows'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.TableTest,
+    serializeShadowRoot,
+});

package/dist/hooks/useSdTableVirtualScroll.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+export interface VirtualRow<T = Record<string, any>> {
+    /** 전체 rows 기준 절대 인덱스 — SdTr의 rowKey로 사용 */
+    index: number;
+    row: T;
+}
+export declare function useSdTableVirtualScroll<T extends Record<string, any>>(tableRef: RefObject<HTMLElement | null>, rows: T[]): {
+    virtualRows: VirtualRow<T>[];
+    from: number;
+    to: number;
+};

package/dist/hooks/useSdTableVirtualScroll.js

@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useState } from 'react';
+export function useSdTableVirtualScroll(tableRef, rows) {
+    const [range, setRange] = useState(null);
+    useEffect(() => {
+        let targetEl = null;
+        let rafId = 0;
+        const onVirtualUpdate = (e) => {
+            const { from, to } = e.detail;
+            setRange({ from, to });
+        };
+        const syncRange = (el) => {
+            const currentRange = el.getVirtualScrollRangeSync?.();
+            if (currentRange &&
+                typeof currentRange.from === 'number' &&
+                typeof currentRange.to === 'number') {
+                setRange({ from: currentRange.from, to: currentRange.to });
+                return true;
+            }
+            return false;
+        };
+        const attachWhenReady = () => {
+            const el = tableRef.current;
+            if (!el) {
+                rafId = requestAnimationFrame(attachWhenReady);
+                return;
+            }
+            targetEl = el;
+            targetEl.addEventListener('sdVirtualUpdate', onVirtualUpdate);
+            const trySync = () => {
+                if (!targetEl)
+                    return;
+                if (!syncRange(targetEl)) {
+                    rafId = requestAnimationFrame(trySync);
+                }
+            };
+            trySync();
+        };
+        attachWhenReady();
+        return () => {
+            cancelAnimationFrame(rafId);
+            targetEl?.removeEventListener('sdVirtualUpdate', onVirtualUpdate);
+        };
+    }, [tableRef]);
+    const virtualRows = useMemo(() => {
+        if (!range)
+            return [];
+        return rows
+            .slice(range.from, range.to)
+            .map((row, i) => ({ index: range.from + i, row }));
+    }, [rows, range]);
+    return {
+        virtualRows,
+        from: range?.from ?? 0,
+        to: range?.to ?? 0,
+    };
+}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export * from './components/components.js';
+export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
+export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
 export { defineCustomElements } from '@sellmate/design-system/loader';
-export { SdTable } from './SdTable';
-export type { SdTableProps } from './SdTable';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
-export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
+export { sdLoading } from '@sellmate/design-system/utils';
+export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
+export type { SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -1,5 +1,6 @@
 'use client';
 export * from './components/components.js';
+export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
 export { defineCustomElements } from '@sellmate/design-system/loader';
-export { SdTable } from './SdTable';
 export { sdModal } from './sdModal';
+export { sdLoading } from '@sellmate/design-system/utils';

package/dist/sdModal.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType } from 'react';
-import { type ConfirmModalOptions, type ModalDialogRef, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
+import { type ConfirmModalOptions, type LoadingModalOptions, type ModalDialogRef, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
 /**
  * `sdModal.create` 에 넘기는 입력.
  *
@@ -29,6 +29,7 @@ export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'comp
  */
 export declare const sdModal: {
     confirm(options: ConfirmModalOptions): ModalDialogRef;
+    loading(options?: LoadingModalOptions): ModalDialogRef;
     configure(options: SdModalGlobalOptions): void;
     create(input: SdModalCreateOption): ModalDialogRef;
 };

package/dist/sdModal.js

@@ -13,12 +13,7 @@ function mountReactComponent(component, componentProps) {
     flushSync(() => {
         root.render(createElement(component, componentProps));
     });
-    const el = host.firstElementChild;
-    if (!el) {
-        root.unmount();
-        throw new Error('[sdModal] 전달한 React 컴포넌트의 루트는 단일 요소여야 합니다.');
-    }
-    return { el, host, root };
+    return { el: host, host, root };
 }
 /**
  * React-aware `sdModal`.
@@ -38,6 +33,9 @@ export const sdModal = {
     confirm(options) {
         return coreSdModal.confirm(options);
     },
+    loading(options = {}) {
+        return coreSdModal.loading(options);
+    },
     configure(options) {
         coreSdModal.configure(options);
     },