@sellmate/design-system-react 1.5.0 → 1.6.0

package/dist/components/components.d.ts

@@ -21,6 +21,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -143,8 +144,11 @@ export type SdDateRangePickerCalendarEvents = {
     }>>;
 };
 export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>;
+export type SdDividerEvents = NonNullable<unknown>;
+export declare const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>;
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>;
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{
         isOpen: boolean;
     }>>;

package/dist/components/components.js

@@ -17,6 +17,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement
 import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement, defineCustomElement as defineSdDivider } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -217,6 +218,14 @@ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
     },
     defineCustomElement: defineSdDateRangePickerCalendar
 });
+export const SdDivider = /*@__PURE__*/ createComponent({
+    tagName: 'sd-divider',
+    elementClass: SdDividerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineSdDivider
+});
 export const SdDropdownButton = /*@__PURE__*/ createComponent({
     tagName: 'sd-dropdown-button',
     elementClass: SdDropdownButtonElement,
@@ -224,6 +233,7 @@ export const SdDropdownButton = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onSdClick: 'sdClick',
+        onSdButtonClick: 'sdButtonClick',
         onSdDropDownShow: 'sdDropDownShow'
     },
     defineCustomElement: defineSdDropdownButton

package/dist/components/components.server.d.ts

@@ -22,6 +22,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -145,8 +146,11 @@ export type SdDateRangePickerCalendarEvents = {
     }>>;
 };
 export declare const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerCalendarElement, SdDateRangePickerCalendarEvents, Components.SdDateRangePickerCalendar>;
+export type SdDividerEvents = NonNullable<unknown>;
+export declare const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>;
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>;
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{
         isOpen: boolean;
     }>>;

package/dist/components/components.server.js

@@ -236,12 +236,20 @@ export const SdDateRangePickerCalendar = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdDateRangePickerCalendar,
     serializeShadowRoot
 });
+export const SdDivider = /*@__PURE__*/ createComponent({
+    tagName: 'sd-divider',
+    properties: { vertical: 'vertical' },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdDivider,
+    serializeShadowRoot
+});
 export const SdDropdownButton = /*@__PURE__*/ createComponent({
     tagName: 'sd-dropdown-button',
     properties: {
         name: 'name',
         label: 'label',
         disabled: 'disabled',
+        split: 'split',
         items: 'items'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
@@ -463,6 +471,7 @@ export const SdNumberInput = /*@__PURE__*/ createComponent({
         value: 'value',
         label: 'label',
         labelWidth: 'label-width',
+        labelTooltip: 'label-tooltip',
         addonLabel: 'addon-label',
         addonAlign: 'addon-align',
         placeholder: 'placeholder',
@@ -513,7 +522,6 @@ export const SdPopover = /*@__PURE__*/ createComponent({
         type: 'type',
         menuTitle: 'menu-title',
         menuClass: 'menu-class',
-        useClose: 'use-close',
         messages: 'messages'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
@@ -680,7 +688,7 @@ export const SdTable = /*@__PURE__*/ createComponent({
         width: 'width',
         height: 'height',
         stickyHeader: 'sticky-header',
-        radius: 'radius',
+        useTop: 'use-top',
         noDataLabel: 'no-data-label',
         isLoading: 'is-loading',
         useInternalPagination: 'use-internal-pagination',

package/dist/define-custom-elements.d.ts

@@ -0,0 +1 @@
+export declare function defineCustomElements(): void;

package/dist/define-custom-elements.js

@@ -0,0 +1,25 @@
+import { defineCustomElements as defineLazyCustomElements } from '@sellmate/design-system/loader';
+// Host 기반 컴포넌트는 static 등록으로 고정해, 이중 runtime에서 발생하는 Host 식별자 불일치를 방지한다.
+import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
+import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
+import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
+import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
+import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
+import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
+import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
+import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
+export function defineCustomElements() {
+    if (typeof customElements === 'undefined')
+        return;
+    // Host 기반 컴포넌트 우선 등록
+    defineSdCircleProgress();
+    defineSdLinearProgress();
+    defineSdLoadingModal();
+    defineSdTable();
+    defineSdTbody();
+    defineSdTd();
+    defineSdThead();
+    defineSdTr();
+    // 나머지 컴포넌트는 Stencil loader가 lazy 등록
+    defineLazyCustomElements();
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from './components/components.js';
 export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
 export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { defineCustomElements } from './define-custom-elements';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
 export { sdLoading } from '@sellmate/design-system/utils';

package/dist/index.js

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

package/lib/components/components.server.ts

@@ -30,6 +30,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement } from "@sellmate/des
 import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -379,8 +380,19 @@ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerC
     serializeShadowRoot
 });
 
+export type SdDividerEvents = NonNullable<unknown>;
+
+export const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider> = /*@__PURE__*/ createComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>({
+    tagName: 'sd-divider',
+    properties: { vertical: 'vertical' },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdDivider as StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>,
+    serializeShadowRoot
+});
+
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>,
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{ isOpen: boolean }>>
 };
 
@@ -390,6 +402,7 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
         name: 'name',
         label: 'label',
         disabled: 'disabled',
+        split: 'split',
         items: 'items'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdDropdownButton as StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents, Components.SdDropdownButton>,
@@ -663,6 +676,7 @@ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumber
         value: 'value',
         label: 'label',
         labelWidth: 'label-width',
+        labelTooltip: 'label-tooltip',
         addonLabel: 'addon-label',
         addonAlign: 'addon-align',
         placeholder: 'placeholder',
@@ -718,7 +732,6 @@ export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents,
         type: 'type',
         menuTitle: 'menu-title',
         menuClass: 'menu-class',
-        useClose: 'use-close',
         messages: 'messages'},
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdPopover as StencilReactComponent<SdPopoverElement, SdPopoverEvents, Components.SdPopover>,
@@ -932,7 +945,7 @@ export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents, Compo
         width: 'width',
         height: 'height',
         stickyHeader: 'sticky-header',
-        radius: 'radius',
+        useTop: 'use-top',
         noDataLabel: 'no-data-label',
         isLoading: 'is-loading',
         useInternalPagination: 'use-internal-pagination',

package/lib/components/components.ts

@@ -29,6 +29,7 @@ import { SdDatePickerTrigger as SdDatePickerTriggerElement, defineCustomElement
 import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
 import { SdDateRangePickerCalendar as SdDateRangePickerCalendarElement, defineCustomElement as defineSdDateRangePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-range-picker-calendar.js";
 import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdDivider as SdDividerElement, defineCustomElement as defineSdDivider } from "@sellmate/design-system/dist/components/sd-divider.js";
 import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
 import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
 import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
@@ -309,8 +310,20 @@ export const SdDateRangePickerCalendar: StencilReactComponent<SdDateRangePickerC
     defineCustomElement: defineSdDateRangePickerCalendar
 });
 
+export type SdDividerEvents = NonNullable<unknown>;
+
+export const SdDivider: StencilReactComponent<SdDividerElement, SdDividerEvents, Components.SdDivider> = /*@__PURE__*/ createComponent<SdDividerElement, SdDividerEvents, Components.SdDivider>({
+    tagName: 'sd-divider',
+    elementClass: SdDividerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdDividerEvents,
+    defineCustomElement: defineSdDivider
+});
+
 export type SdDropdownButtonEvents = {
     onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
+    onSdButtonClick: EventName<SdDropdownButtonCustomEvent<void>>,
     onSdDropDownShow: EventName<SdDropdownButtonCustomEvent<{ isOpen: boolean }>>
 };
 
@@ -321,6 +334,7 @@ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, Sd
     react: React,
     events: {
         onSdClick: 'sdClick',
+        onSdButtonClick: 'sdButtonClick',
         onSdDropDownShow: 'sdDropDownShow'
     } as SdDropdownButtonEvents,
     defineCustomElement: defineSdDropdownButton

package/lib/define-custom-elements.ts

@@ -0,0 +1,28 @@
+import { defineCustomElements as defineLazyCustomElements } from '@sellmate/design-system/loader';
+
+// Host 기반 컴포넌트는 static 등록으로 고정해, 이중 runtime에서 발생하는 Host 식별자 불일치를 방지한다.
+import { defineCustomElement as defineSdCircleProgress } from '@sellmate/design-system/dist/components/sd-circle-progress.js';
+import { defineCustomElement as defineSdLinearProgress } from '@sellmate/design-system/dist/components/sd-linear-progress.js';
+import { defineCustomElement as defineSdLoadingModal } from '@sellmate/design-system/dist/components/sd-loading-modal.js';
+import { defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
+import { defineCustomElement as defineSdTbody } from '@sellmate/design-system/dist/components/sd-tbody.js';
+import { defineCustomElement as defineSdTd } from '@sellmate/design-system/dist/components/sd-td.js';
+import { defineCustomElement as defineSdThead } from '@sellmate/design-system/dist/components/sd-thead.js';
+import { defineCustomElement as defineSdTr } from '@sellmate/design-system/dist/components/sd-tr.js';
+
+export function defineCustomElements(): void {
+  if (typeof customElements === 'undefined') return;
+
+  // Host 기반 컴포넌트 우선 등록
+  defineSdCircleProgress();
+  defineSdLinearProgress();
+  defineSdLoadingModal();
+  defineSdTable();
+  defineSdTbody();
+  defineSdTd();
+  defineSdThead();
+  defineSdTr();
+
+  // 나머지 컴포넌트는 Stencil loader가 lazy 등록
+  defineLazyCustomElements();
+}

package/lib/index.ts

@@ -3,7 +3,7 @@
 export * from './components/components.js';
 export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
 export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
-export { defineCustomElements } from '@sellmate/design-system/loader';
+export { defineCustomElements } from './define-custom-elements';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
 export { sdLoading } from '@sellmate/design-system/utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system-react",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Design System - React Component Wrappers",
   "keywords": [
     "react",
@@ -55,7 +55,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@sellmate/design-system": "^1.5.0",
+    "@sellmate/design-system": "^1.6.0",
     "@stencil/react-output-target": "^1.2.0"
   },
   "peerDependencies": {