@sellmate/design-system 1.16.0 → 1.18.0

package/dist/types/components/sd-chip-input/sd-chip-input.d.ts

@@ -3,6 +3,7 @@ import { Rule } from '../../types/form';
 import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
 import { type ChipInputSize } from './sd-chip-input.config';
 export declare class SdChipInput {
+    private static readonly SUGGESTIONS_VIEWPORT_PADDING;
     host: HTMLElement;
     values: string[];
     errors: boolean[] | ((value: string) => boolean);
@@ -14,6 +15,11 @@ export declare class SdChipInput {
     rules?: Rule[];
     error: boolean;
     useReset: boolean;
+    maxCount?: number;
+    suggestions: string[];
+    loadingSuggestions: boolean;
+    recommendedItems: string[];
+    loadingRecommendedItems: boolean;
     label?: string;
     labelWidth: string | number;
     hint: string;
@@ -28,26 +34,35 @@ export declare class SdChipInput {
     private focused;
     private hovered;
     private inputValue;
+    private activeSuggestionIndex;
+    private suppressSuggestions;
+    private suppressRecommendations;
     private inputEl?;
     private formField?;
+    private chipInputRef?;
     get value(): string[];
     valuesChanged(newValues: string[]): void;
     errorsChanged(newErrors: boolean[] | ((value: string) => boolean)): void;
+    suggestionsChanged(newVal: string[] | undefined): void;
+    recommendedItemsChanged(newVal: string[] | undefined): void;
     componentWillLoad(): void;
     private getChipError;
     private getChipDisabled;
     update: EventEmitter<string[]>;
     focusEvent: EventEmitter<void>;
     blurEvent: EventEmitter<void>;
+    inputEvent: EventEmitter<string>;
     sdValidate(): Promise<boolean | undefined>;
     sdReset(): Promise<void | undefined>;
     sdResetValidate(): Promise<void | undefined>;
     sdFocus(): Promise<void | undefined>;
+    private addChip;
     private handleChipRemove;
     private handleKeyDown;
     private handleInput;
     private handleFocus;
     private handleBlur;
+    private closeSuggestions;
     private handleContainerClick;
     private handleResetInput;
     render(): any;

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -53,6 +53,10 @@ export declare const PRESET_MENU_ITEM_COLORS: Record<DropdownButtonPreset, strin
 export declare const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS: Record<DropdownButtonPreset, string>;
 export declare const PRESET_MENU_ITEM_ACTIVE_COLORS: Record<DropdownButtonPreset, string>;
 export declare const DROPDOWN_CHEVRON_ICON_SIZE: Record<DropdownButtonSize, number>;
+export declare const DROPDOWN_BUTTON_MIN_WIDTH: Record<DropdownButtonSize, {
+    default: number;
+    split: number;
+}>;
 export declare const DROPDOWN_DISABLED_BACKGROUND: string;
 export declare const DROPDOWN_DISABLED_TEXT: string;
 export declare const DROPDOWN_DISABLED_ICON: string;

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts

@@ -13,6 +13,7 @@ export declare class SdDropdownButton extends BaseDropdownEvent {
     isAnimatingOut: boolean;
     itemIndex: number;
     private triggerRef?;
+    private splitContainerRef?;
     private menuRef?;
     private closeAnimationTimer?;
     click: EventEmitter<DropdownButtonValue>;

package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts

@@ -3,8 +3,7 @@ export declare const KEY_VALUE_TABLE_LAYOUT: {
     rowHeight: number;
     thWidth: number;
     borderRadius: number;
-    paddingX: number;
-    paddingY: number;
+    padding: number;
     helpIconSize: number;
     requiredIconSize: number;
     gap: number;
@@ -66,6 +65,8 @@ interface FieldBase {
     thStyle?: {
         [key: string]: string;
     };
+    /** th 컬럼 너비 (number는 px, string은 단위 포함 그대로 사용). 미지정 시 기본 thWidth(120px) */
+    thWidth?: number | string;
 }
 export type SdKeyValueField = (FieldBase & {
     type?: 'text';

package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts

@@ -31,6 +31,11 @@ export declare class SdKeyValueTable {
      * th/td 자체와 thColSpan/tdColSpan, hideTh, thRowSpan(autoSkip)을 모두 반영.
      */
     private computeMaxCols;
+    /**
+     * thStyle의 CSS 속성 값을 해당 CSS 변수로도 반영.
+     * label span이 var()로 스타일을 참조하기 때문에, 인라인 스타일만으로는 상속이 되지 않음.
+     */
+    private buildThStyle;
     private renderTh;
     private renderTd;
     private warnDuplicateNames;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -54,6 +54,8 @@ export interface ModalDialogRefLike {
     _triggerClose(): void;
     _triggerDismissed(): void;
     _triggerClick?(): void;
+    _hasSubmit?(): boolean;
+    _triggerSubmit?(): void;
 }
 export interface SdModalGlobalOptions {
     zIndex?: number;

package/dist/types/components/sd-portal/sd-portal.d.ts

@@ -33,6 +33,7 @@ export declare class SdPortal {
     private observeScrollParents;
     private unobserveScrollParents;
     private getScrollParents;
+    private isInsideTarget;
     handleMouseDown(e: MouseEvent): void;
     handleWindowClick(e: MouseEvent): void;
     render(): any;

package/dist/types/components.d.ts

@@ -369,6 +369,15 @@ export namespace Components {
           * @default ''
          */
         "labelWidth": string | number;
+        /**
+          * @default false
+         */
+        "loadingRecommendedItems": boolean;
+        /**
+          * @default false
+         */
+        "loadingSuggestions": boolean;
+        "maxCount"?: number;
         /**
           * @default nanoid()
          */
@@ -377,6 +386,10 @@ export namespace Components {
           * @default '입력해 주세요.'
          */
         "placeholder": string;
+        /**
+          * @default []
+         */
+        "recommendedItems": string[];
         /**
           * @default []
          */
@@ -390,6 +403,10 @@ export namespace Components {
          */
         "size": ChipInputSize;
         "status"?: 'default' | 'pass' | 'error';
+        /**
+          * @default []
+         */
+        "suggestions": string[];
         /**
           * @default false
          */
@@ -2393,6 +2410,7 @@ declare global {
         "sdUpdate": string[];
         "sdFocus": void;
         "sdBlur": void;
+        "sdInput": string;
     }
     interface HTMLSdChipInputElement extends Components.SdChipInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSdChipInputElementEventMap>(type: K, listener: (this: HTMLSdChipInputElement, ev: SdChipInputCustomEvent<HTMLSdChipInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3487,17 +3505,31 @@ declare namespace LocalJSX {
           * @default ''
          */
         "labelWidth"?: string | number;
+        /**
+          * @default false
+         */
+        "loadingRecommendedItems"?: boolean;
+        /**
+          * @default false
+         */
+        "loadingSuggestions"?: boolean;
+        "maxCount"?: number;
         /**
           * @default nanoid()
          */
         "name"?: string;
         "onSdBlur"?: (event: SdChipInputCustomEvent<void>) => void;
         "onSdFocus"?: (event: SdChipInputCustomEvent<void>) => void;
+        "onSdInput"?: (event: SdChipInputCustomEvent<string>) => void;
         "onSdUpdate"?: (event: SdChipInputCustomEvent<string[]>) => void;
         /**
           * @default '입력해 주세요.'
          */
         "placeholder"?: string;
+        /**
+          * @default []
+         */
+        "recommendedItems"?: string[];
         /**
           * @default []
          */
@@ -3507,6 +3539,10 @@ declare namespace LocalJSX {
          */
         "size"?: ChipInputSize;
         "status"?: 'default' | 'pass' | 'error';
+        /**
+          * @default []
+         */
+        "suggestions"?: string[];
         /**
           * @default false
          */
@@ -5281,6 +5317,9 @@ declare namespace LocalJSX {
         "name": string;
         "error": boolean;
         "useReset": boolean;
+        "maxCount": number;
+        "loadingSuggestions": boolean;
+        "loadingRecommendedItems": boolean;
         "label": string;
         "labelWidth": string;
         "hint": string;

package/dist/types/utils/modal.d.ts

@@ -12,6 +12,12 @@ export interface ModalDialogRef {
      * 후속 동작을 결정합니다.
      */
     onClick(fn: () => void): ModalDialogRef;
+    /**
+     * OK 버튼 클릭 시 자동 dismiss 없이 fn 만 호출합니다. API 응답 결과에 따라
+     * consumer 가 직접 `ok()` / `close()` / `update()` 로 후속 동작을 결정할 때
+     * 사용합니다. `onOk` 와 함께 등록하면 `onSubmit` 이 우선합니다.
+     */
+    onSubmit(fn: () => void): ModalDialogRef;
     update(props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): ModalDialogRef;
     /**
      * 컴포넌트가 직접 닫기를 명시적으로 요청할 때 사용합니다. 커스텀 모달