@sellmate/design-system 0.0.12 → 0.0.13

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

@@ -50,11 +50,6 @@ export declare class SdSelect extends BaseDropdownEvent {
     disabled: boolean;
     clearable: boolean;
     searchable: boolean;
-    containerStyle: SelectStyleProps['containerStyle'];
-    triggerStyle: SelectStyleProps['triggerStyle'];
-    dropdownStyle: SelectStyleProps['dropdownStyle'];
-    optionStyle: SelectStyleProps['optionStyle'];
-    labelStyle: SelectStyleProps['labelStyle'];
     optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
     filteredOptions: SelectOption[];
     isOpen: boolean;
@@ -82,7 +77,6 @@ export declare class SdSelect extends BaseDropdownEvent {
         option: SelectOption;
         event: Event;
     }) => void;
-    handleDropdownOpen: (element: HTMLElement) => void;
     private filterOptions;
     private getSelectedOption;
     private handleDropdownScroll;

package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SelectOption, SelectMultipleEvents } from '../../types/select';
+import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
+export declare class SdSelectMultiple extends BaseDropdownEvent {
+    el: HTMLElement;
+    value: SelectOption[] | null;
+    label: string;
+    options: SelectOption[];
+    placeholder: string;
+    optionPlaceholder: string;
+    width: string;
+    dropdownHeight: string;
+    disabled: boolean;
+    clearable: boolean;
+    searchable: boolean;
+    useCheckbox: boolean;
+    optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
+    filteredOptions: SelectOption[];
+    isOpen: boolean;
+    searchText: string | null;
+    itemIndex: number;
+    isScrolled: boolean;
+    sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;
+    dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
+    private selectRef?;
+    private searchRef?;
+    private optionRef?;
+    private dropdownRef?;
+    valueChanged(): void;
+    optionsChanged(): void;
+    searchTextChanged(): void;
+    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
+    isOpenChanged(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected handleDocumentClick(event: Event): void;
+    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
+    handleTriggerClick: (event: Event) => void;
+    handleOptionClick: (detail: {
+        option: SelectOption;
+        event: Event;
+    }) => void;
+    private filterOptions;
+    private getSelectedOption;
+    private handleDropdownScroll;
+    private getNativeInputElement;
+    private handleOptionSelection;
+    closeDropdown(): void;
+    private scrollToOption;
+    render(): any;
+    private renderLabel;
+    private renderTrigger;
+    private renderDropdown;
+}

package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
+import { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';
+export interface SelectOptionGroup extends SelectOption {
+    type: 'group' | 'subgroup' | 'item';
+    parent?: string;
+}
+export declare class SdSelectMultipleGroup extends BaseDropdownEvent {
+    el: HTMLElement;
+    value: SelectOptionGroup[] | null;
+    label: string;
+    options: SelectOptionGroup[];
+    placeholder: string;
+    optionPlaceholder: string;
+    width: string;
+    dropdownHeight: string;
+    disabled: boolean;
+    clearable: boolean;
+    searchable: boolean;
+    useCheckbox: boolean;
+    containerStyle: SelectStyleProps['containerStyle'];
+    triggerStyle: SelectStyleProps['triggerStyle'];
+    dropdownStyle: SelectStyleProps['dropdownStyle'];
+    optionStyle: SelectStyleProps['optionStyle'];
+    labelStyle: SelectStyleProps['labelStyle'];
+    optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;
+    filteredOptions: SelectOptionGroup[];
+    isOpen: boolean;
+    searchText: string | null;
+    itemIndex: number;
+    isScrolled: boolean;
+    sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;
+    dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;
+    private selectRef?;
+    private searchRef?;
+    private optionRef?;
+    private dropdownRef?;
+    valueChanged(): void;
+    optionsChanged(): void;
+    searchTextChanged(): void;
+    itemIndexChanged(newIndex: number, oldIndex: number): Promise<void>;
+    isOpenChanged(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected handleDocumentClick(event: Event): void;
+    protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void;
+    handleTriggerClick: (event: Event) => void;
+    handleOptionClick: (detail: {
+        option: SelectOptionGroup;
+        isSelected: boolean | null;
+        index: number;
+        event: MouseEvent;
+    }) => void;
+    handleGroupOptionClick: (detail: {
+        option: SelectOptionGroup;
+        isSelected: boolean | null;
+        index: number;
+    }) => void;
+    handleSubGroupOptionClick: (detail: {
+        option: SelectOptionGroup;
+        isSelected: boolean | null;
+    }) => void;
+    private filterOptions;
+    private getSelectedOption;
+    private handleDropdownScroll;
+    private getNativeInputElement;
+    private handleOptionSelection;
+    private isAllChildrenSelected;
+    closeDropdown(): void;
+    private scrollToOption;
+    render(): any;
+    private renderLabel;
+    private renderTrigger;
+    private renderDropdown;
+}

package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SelectOptionGroup } from '../../sd-select/sd-select';
+export declare class SdSelectOptionGroup {
+    el: HTMLElement;
+    option: SelectOptionGroup;
+    index: number;
+    isSelected: boolean | null;
+    isFocused: boolean;
+    optionStyle?: {
+        [key: string]: string;
+    };
+    disabled: boolean;
+    useCheckbox: boolean;
+    isHovered: boolean;
+    isDisabled(): Promise<boolean>;
+    optionClick: EventEmitter<{
+        option: SelectOptionGroup;
+        isSelected: boolean | null;
+        index: number;
+        event: MouseEvent;
+    }>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -9,16 +9,20 @@ import { ButtonSize, ButtonVariant } from "./components/sd-button/sd-button";
 import { Type } from "./components/sd-date-box/sd-date-box";
 import { Event } from "./stencil-public-runtime";
 import { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
-import { SelectEvents, SelectOption, SelectStyleProps } from "./components/sd-select/sd-select";
-import { SelectOption as SelectOption1 } from "./types/select";
+import { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
+import { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
+import { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
+import { SelectMultipleEvents as SelectMultipleEvents1, SelectOption as SelectOption2, SelectOptionGroup as SelectOptionGroup1, SelectStyleProps } from "./components/sd-select/sd-select";
 import { Row, SdTableColumn } from "./components/sd-table/sd-table";
 import { TagColor, TagSize } from "./components/sd-tag/sd-tag";
 export { ButtonSize, ButtonVariant } from "./components/sd-button/sd-button";
 export { Type } from "./components/sd-date-box/sd-date-box";
 export { Event } from "./stencil-public-runtime";
 export { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
-export { SelectEvents, SelectOption, SelectStyleProps } from "./components/sd-select/sd-select";
-export { SelectOption as SelectOption1 } from "./types/select";
+export { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
+export { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
+export { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
+export { SelectMultipleEvents as SelectMultipleEvents1, SelectOption as SelectOption2, SelectOptionGroup as SelectOptionGroup1, SelectStyleProps } from "./components/sd-select/sd-select";
 export { Row, SdTableColumn } from "./components/sd-table/sd-table";
 export { TagColor, TagSize } from "./components/sd-tag/sd-tag";
 export namespace Components {
@@ -345,6 +349,96 @@ export namespace Components {
         "zIndex": number;
     }
     interface SdSelect {
+        /**
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight": string;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder": string;
+        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options": SelectOption[];
+        /**
+          * @default '선택'
+         */
+        "placeholder": string;
+        /**
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * @default null
+         */
+        "value": string | number | null;
+        /**
+          * @default '200px'
+         */
+        "width": string;
+    }
+    interface SdSelectMultiple {
+        /**
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight": string;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder": string;
+        "optionRenderer"?: (option: SelectOption1, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options": SelectOption1[];
+        /**
+          * @default '선택'
+         */
+        "placeholder": string;
+        /**
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
+        /**
+          * @default null
+         */
+        "value": SelectOption1[] | null;
+        /**
+          * @default '200px'
+         */
+        "width": string;
+    }
+    interface SdSelectMultipleGroup {
         /**
           * @default false
          */
@@ -377,7 +471,7 @@ export namespace Components {
           * @default '옵션이 없습니다.'
          */
         "optionPlaceholder": string;
-        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        "optionRenderer"?: (option: SelectOption2, index: number, isSelected: boolean) => any;
         /**
           * @default {}
          */
@@ -385,7 +479,7 @@ export namespace Components {
         /**
           * @default []
          */
-        "options": SelectOption[];
+        "options": SelectOptionGroup[];
         /**
           * @default '선택'
          */
@@ -398,10 +492,14 @@ export namespace Components {
           * @default {}
          */
         "triggerStyle": SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
         /**
           * @default null
          */
-        "value": string | number | null;
+        "value": SelectOptionGroup[] | null;
         /**
           * @default '200px'
          */
@@ -429,6 +527,28 @@ export namespace Components {
          */
         "useCheckbox": boolean;
     }
+    interface SdSelectOptionGroup {
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "index": number;
+        "isDisabled": () => Promise<boolean>;
+        /**
+          * @default false
+         */
+        "isFocused": boolean;
+        /**
+          * @default false
+         */
+        "isSelected": boolean | null;
+        "option": SelectOptionGroup1;
+        "optionStyle"?: { [key: string]: string };
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
+    }
     interface SdTable {
         "bodyCellRenderer"?: (
   column: SdTableColumn,
@@ -603,10 +723,22 @@ export interface SdSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdSelectElement;
 }
+export interface SdSelectMultipleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectMultipleElement;
+}
+export interface SdSelectMultipleGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectMultipleGroupElement;
+}
 export interface SdSelectOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdSelectOptionElement;
 }
+export interface SdSelectOptionGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectOptionGroupElement;
+}
 export interface SdTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTableElement;
@@ -799,6 +931,42 @@ declare global {
         prototype: HTMLSdSelectElement;
         new (): HTMLSdSelectElement;
     };
+    interface HTMLSdSelectMultipleElementEventMap {
+        "sdChange": SelectMultipleEvents['sdChange'];
+        "dropDownShow": SelectMultipleEvents['dropDownShow'];
+    }
+    interface HTMLSdSelectMultipleElement extends Components.SdSelectMultiple, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectMultipleElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleElement, ev: SdSelectMultipleCustomEvent<HTMLSdSelectMultipleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectMultipleElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleElement, ev: SdSelectMultipleCustomEvent<HTMLSdSelectMultipleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectMultipleElement: {
+        prototype: HTMLSdSelectMultipleElement;
+        new (): HTMLSdSelectMultipleElement;
+    };
+    interface HTMLSdSelectMultipleGroupElementEventMap {
+        "sdChange": SelectMultipleEvents1['sdChange'];
+        "dropDownShow": SelectMultipleEvents1['dropDownShow'];
+    }
+    interface HTMLSdSelectMultipleGroupElement extends Components.SdSelectMultipleGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectMultipleGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleGroupElement, ev: SdSelectMultipleGroupCustomEvent<HTMLSdSelectMultipleGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectMultipleGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleGroupElement, ev: SdSelectMultipleGroupCustomEvent<HTMLSdSelectMultipleGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectMultipleGroupElement: {
+        prototype: HTMLSdSelectMultipleGroupElement;
+        new (): HTMLSdSelectMultipleGroupElement;
+    };
     interface HTMLSdSelectOptionElementEventMap {
         "optionClick": {
   option: SelectOption1;
@@ -820,6 +988,28 @@ declare global {
         prototype: HTMLSdSelectOptionElement;
         new (): HTMLSdSelectOptionElement;
     };
+    interface HTMLSdSelectOptionGroupElementEventMap {
+        "optionClick": {
+  option: SelectOptionGroup1;
+  isSelected: boolean | null;
+  index: number;
+  event: MouseEvent;
+ };
+    }
+    interface HTMLSdSelectOptionGroupElement extends Components.SdSelectOptionGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectOptionGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectOptionGroupElement, ev: SdSelectOptionGroupCustomEvent<HTMLSdSelectOptionGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectOptionGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectOptionGroupElement, ev: SdSelectOptionGroupCustomEvent<HTMLSdSelectOptionGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectOptionGroupElement: {
+        prototype: HTMLSdSelectOptionGroupElement;
+        new (): HTMLSdSelectOptionGroupElement;
+    };
     interface HTMLSdTableElementEventMap {
         "sdSelectChange": Row[];
         "sdPageChange": number;
@@ -881,7 +1071,10 @@ declare global {
         "sd-popover": HTMLSdPopoverElement;
         "sd-portal": HTMLSdPortalElement;
         "sd-select": HTMLSdSelectElement;
+        "sd-select-multiple": HTMLSdSelectMultipleElement;
+        "sd-select-multiple-group": HTMLSdSelectMultipleGroupElement;
         "sd-select-option": HTMLSdSelectOptionElement;
+        "sd-select-option-group": HTMLSdSelectOptionGroupElement;
         "sd-table": HTMLSdTableElement;
         "sd-tag": HTMLSdTagElement;
         "sd-tooltip": HTMLSdTooltipElement;
@@ -1227,6 +1420,100 @@ declare namespace LocalJSX {
         "zIndex"?: number;
     }
     interface SdSelect {
+        /**
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight"?: string;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onDropDownShow"?: (event: SdSelectCustomEvent<SelectEvents['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectCustomEvent<SelectEvents['sdChange']>) => void;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder"?: string;
+        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options"?: SelectOption[];
+        /**
+          * @default '선택'
+         */
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * @default null
+         */
+        "value"?: string | number | null;
+        /**
+          * @default '200px'
+         */
+        "width"?: string;
+    }
+    interface SdSelectMultiple {
+        /**
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight"?: string;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onDropDownShow"?: (event: SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectMultipleCustomEvent<SelectMultipleEvents['sdChange']>) => void;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder"?: string;
+        "optionRenderer"?: (option: SelectOption1, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options"?: SelectOption1[];
+        /**
+          * @default '선택'
+         */
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
+        /**
+          * @default null
+         */
+        "value"?: SelectOption1[] | null;
+        /**
+          * @default '200px'
+         */
+        "width"?: string;
+    }
+    interface SdSelectMultipleGroup {
         /**
           * @default false
          */
@@ -1255,13 +1542,13 @@ declare namespace LocalJSX {
           * @default {}
          */
         "labelStyle"?: SelectStyleProps['labelStyle'];
-        "onDropDownShow"?: (event: SdSelectCustomEvent<SelectEvents['dropDownShow']>) => void;
-        "onSdChange"?: (event: SdSelectCustomEvent<SelectEvents['sdChange']>) => void;
+        "onDropDownShow"?: (event: SdSelectMultipleGroupCustomEvent<SelectMultipleEvents1['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectMultipleGroupCustomEvent<SelectMultipleEvents1['sdChange']>) => void;
         /**
           * @default '옵션이 없습니다.'
          */
         "optionPlaceholder"?: string;
-        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        "optionRenderer"?: (option: SelectOption2, index: number, isSelected: boolean) => any;
         /**
           * @default {}
          */
@@ -1269,7 +1556,7 @@ declare namespace LocalJSX {
         /**
           * @default []
          */
-        "options"?: SelectOption[];
+        "options"?: SelectOptionGroup[];
         /**
           * @default '선택'
          */
@@ -1282,10 +1569,14 @@ declare namespace LocalJSX {
           * @default {}
          */
         "triggerStyle"?: SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
         /**
           * @default null
          */
-        "value"?: string | number | null;
+        "value"?: SelectOptionGroup[] | null;
         /**
           * @default '200px'
          */
@@ -1317,6 +1608,33 @@ declare namespace LocalJSX {
          */
         "useCheckbox"?: boolean;
     }
+    interface SdSelectOptionGroup {
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "index": number;
+        /**
+          * @default false
+         */
+        "isFocused"?: boolean;
+        /**
+          * @default false
+         */
+        "isSelected"?: boolean | null;
+        "onOptionClick"?: (event: SdSelectOptionGroupCustomEvent<{
+  option: SelectOptionGroup1;
+  isSelected: boolean | null;
+  index: number;
+  event: MouseEvent;
+ }>) => void;
+        "option": SelectOptionGroup1;
+        "optionStyle"?: { [key: string]: string };
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
+    }
     interface SdTable {
         "bodyCellRenderer"?: (
   column: SdTableColumn,
@@ -1471,7 +1789,10 @@ declare namespace LocalJSX {
         "sd-popover": SdPopover;
         "sd-portal": SdPortal;
         "sd-select": SdSelect;
+        "sd-select-multiple": SdSelectMultiple;
+        "sd-select-multiple-group": SdSelectMultipleGroup;
         "sd-select-option": SdSelectOption;
+        "sd-select-option-group": SdSelectOptionGroup;
         "sd-table": SdTable;
         "sd-tag": SdTag;
         "sd-tooltip": SdTooltip;
@@ -1495,7 +1816,10 @@ declare module "@stencil/core" {
             "sd-popover": LocalJSX.SdPopover & JSXBase.HTMLAttributes<HTMLSdPopoverElement>;
             "sd-portal": LocalJSX.SdPortal & JSXBase.HTMLAttributes<HTMLSdPortalElement>;
             "sd-select": LocalJSX.SdSelect & JSXBase.HTMLAttributes<HTMLSdSelectElement>;
+            "sd-select-multiple": LocalJSX.SdSelectMultiple & JSXBase.HTMLAttributes<HTMLSdSelectMultipleElement>;
+            "sd-select-multiple-group": LocalJSX.SdSelectMultipleGroup & JSXBase.HTMLAttributes<HTMLSdSelectMultipleGroupElement>;
             "sd-select-option": LocalJSX.SdSelectOption & JSXBase.HTMLAttributes<HTMLSdSelectOptionElement>;
+            "sd-select-option-group": LocalJSX.SdSelectOptionGroup & JSXBase.HTMLAttributes<HTMLSdSelectOptionGroupElement>;
             "sd-table": LocalJSX.SdTable & JSXBase.HTMLAttributes<HTMLSdTableElement>;
             "sd-tag": LocalJSX.SdTag & JSXBase.HTMLAttributes<HTMLSdTagElement>;
             "sd-tooltip": LocalJSX.SdTooltip & JSXBase.HTMLAttributes<HTMLSdTooltipElement>;