sellmate-design-system-react 9.0.0-beta.56 → 9.0.0-beta.59

package/dist/components/STable/STable.d.ts

@@ -1,6 +1,15 @@
 import { type CSSProperties, type UIEvent as ReactUIEvent, type ReactNode } from 'react';
+import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
+/** 오른쪽 클릭 메뉴의 항목 한 줄 */
+export interface STableContextMenuItem {
+    /** 클릭 시 `onContextMenuItemClick` 으로 돌아오는 값 */
+    value: string | number;
+    label: string;
+    icon?: SIconName;
+    disabled?: boolean;
+}
 /** `STableColumn.renderCell`에 전달되는 컨텍스트 */
 export interface STableCellContext {
     row: SRow;
@@ -217,6 +226,42 @@ export interface STableProps {
     rowKey?: string;
     /** 행 선택 체크박스 */
     selectable?: boolean;
+    /**
+     * 행을 드래그해서 고른다. 기본 `false`.
+     *
+     * 고르는 수단만 다를 뿐 `selectable` 과 같은 선택이다 — `selected` · `onSelectedChange` ·
+     * `isRowSelectable` 을 그대로 쓴다. 체크박스 열은 생기지 않고, 대신 고른 구간이 배경색과
+     * 바깥 테두리로 표시된다.
+     *
+     * **`selectable` 과 함께 켜면 `selectable` 이 이긴다** — 체크박스가 있는 표에서 드래그까지
+     * 걸리면 글자를 긁으려던 손이 선택을 갈아치운다. 둘 다 필요해 보이면 체크박스 쪽만 남긴다.
+     *
+     * 누른 자리가 구간의 기준점이고, 끌어간 자리까지가 구간이다. **새로 끌면 이전 선택은 풀린다** —
+     * 기존 선택에 더하려면 `Ctrl`(macOS 는 `Cmd`)을 짚고 끈다. 잠긴 행(`isRowSelectable`)은
+     * 구간 안에 있어도 그냥 지나간다.
+     *
+     * **켜 두면 셀 안의 글자를 긁어 복사할 수 없다** — 끌기가 곧 선택이라 글자 선택과 같은 손짓을
+     * 두고 다툰다. 값을 복사해 가는 표에는 켜지 않는다. 셀 안의 버튼·입력은 그대로 눌린다.
+     */
+    dragSelectable?: boolean;
+    /**
+     * 드래그 선택에서 **행을 오른쪽 클릭했을 때** 커서 자리에 뜨는 메뉴의 항목.
+     * 주지 않거나 비면 메뉴가 뜨지 않고 브라우저 기본 메뉴가 나온다.
+     *
+     * **`dragSelectable` 에서만 동작한다** — 체크박스 모드에서는 무시된다.
+     *
+     * 고르지 않은 행에서 누르면 **그 행만 고른 뒤** 열린다. 메뉴가 다룰 대상과 화면에 칠해진
+     * 것이 어긋나지 않게 하기 위함이다. 잠긴 행(`isRowSelectable`) 위에서는 열리지 않는다 —
+     * 고를 수 없는 행을 대상으로 삼을 수 없기 때문이다.
+     */
+    contextMenuItems?: STableContextMenuItem[];
+    /**
+     * 메뉴 항목을 골랐을 때. 고른 항목의 `value` 와 **그 메뉴가 다루는 행들**이 함께 온다.
+     *
+     * 행 목록은 메뉴가 열린 시점에 확정되므로 `selected` 를 따로 읽지 않아도 된다 — 오른쪽
+     * 클릭이 선택을 바꾸는 경우(고르지 않은 행)에도 바뀐 뒤의 행이 온다.
+     */
+    onContextMenuItemClick?: (value: string | number, rows: SRow[]) => void;
     /**
      * 이 행을 고를 수 있는가. 주지 않으면 모든 행을 고를 수 있다.
      *

package/dist/components/STag/README.md

@@ -61,6 +61,7 @@ export const TAG_COLORS = [
   'blue',
   'darkblue',
   'indigo',
+  'purple',
 ] as const;
 ```
 

package/dist/components/STag/tag.config.d.ts

@@ -1,6 +1,6 @@
 export declare const TAG_SHAPES: readonly ["square", "pill"];
 export declare const TAG_SIZES: readonly ["xs", "sm", "md"];
-export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo"];
+export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "purple"];
 export type STagShape = (typeof TAG_SHAPES)[number];
 export type STagSize = (typeof TAG_SIZES)[number];
 export type STagColor = (typeof TAG_COLORS)[number];

package/dist/components/STimePicker/README.md

@@ -17,6 +17,7 @@
 | `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
 | `minuteStep?` | `number` | `1` |  |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |

package/dist/components/STimePicker/STimePicker.d.ts

@@ -29,6 +29,16 @@ export interface STimePickerProps {
      * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
      */
     width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘
+     * 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로
+     * 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
@@ -53,4 +63,4 @@ export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange
     onChange: (time: string) => void;
 }): import("react").JSX.Element;
 /** STimePicker — sd-time-picker 포팅. SField + Popover(TimeSelector). */
-export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;
+export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

package/dist/components/STimeRangePicker/README.md

@@ -18,6 +18,7 @@
 | `minuteStep?` | `number` | `1` |  |
 | `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |

package/dist/components/STimeRangePicker/STimeRangePicker.d.ts

@@ -31,6 +31,15 @@ export interface STimeRangePickerProps {
      * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
      */
     width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘
+     * 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
@@ -56,4 +65,4 @@ export declare function RangeTimeSelector({ value, showMeridiem, minuteStep, ran
     onChange: (range: [string, string]) => void;
 }): import("react").JSX.Element;
 /** STimeRangePicker — sd-time-range-picker 포팅. SField + Popover(RangeTimeSelector). */
-export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, rangeOrder, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;
+export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, rangeOrder, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;