@reopt-ai/opt-ui 1.12.2 → 1.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENT_CATALOG.md +26 -24
- package/dist/docs/02-components/01-core.md +1 -1
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +26 -24
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +1 -1
- package/dist/{field-sidebar-uXmoyvd7.d.cts → field-sidebar-BdP0-TMs.d.cts} +26 -1
- package/dist/{field-sidebar-CrYlRZew.d.ts → field-sidebar-CHs8eEzs.d.ts} +26 -1
- package/dist/{field-sidebar-D0ITbhfJ.cjs → field-sidebar-CQSlweP0.cjs} +41 -30
- package/dist/{field-sidebar-BXAXigMS.js → field-sidebar-DJKWQQeu.js} +41 -30
- package/dist/index.cjs +19 -9
- package/dist/index.d.cts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +19 -9
- package/dist/meta.cjs +26 -12
- package/dist/meta.js +26 -12
- package/dist/shells/index.cjs +1 -1
- package/dist/shells/index.d.cts +1 -1
- package/dist/shells/index.d.ts +1 -1
- package/dist/shells/index.js +1 -1
- package/package.json +1 -1
package/COMPONENT_CATALOG.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- DEPRECATED: Prefer dist/docs/02-components/ for per-layer reference. -->
|
|
4
4
|
<!-- Auto-generated from ComponentMeta. Do not edit. -->
|
|
5
|
-
<!-- Version: 1.12.
|
|
5
|
+
<!-- Version: 1.12.2 -->
|
|
6
6
|
|
|
7
7
|
## Quick Stats
|
|
8
8
|
|
|
@@ -2671,22 +2671,24 @@ const fields = [
|
|
|
2671
2671
|
|
|
2672
2672
|
**DataTable:**
|
|
2673
2673
|
|
|
2674
|
-
| Prop | Type | Required | Default | Description
|
|
2675
|
-
| -------------- | -------------------- | -------- | ------------------- |
|
|
2676
|
-
| `data` | `T[]` | Yes | | 테이블 데이터 배열
|
|
2677
|
-
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? }
|
|
2678
|
-
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수
|
|
2679
|
-
| `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음
|
|
2680
|
-
| `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름
|
|
2681
|
-
| `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러
|
|
2682
|
-
| `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지
|
|
2674
|
+
| Prop | Type | Required | Default | Description |
|
|
2675
|
+
| -------------- | -------------------- | -------- | ------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
2676
|
+
| `data` | `T[]` | Yes | | 테이블 데이터 배열 |
|
|
2677
|
+
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? } |
|
|
2678
|
+
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수 |
|
|
2679
|
+
| `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음 |
|
|
2680
|
+
| `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름 |
|
|
2681
|
+
| `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러 |
|
|
2682
|
+
| `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지 |
|
|
2683
|
+
| `labels` | `DataTableLabels` | | | 선택·리사이즈·펼치기처럼 스크린리더만 듣는 문구. 보이는 문구는 columns와 emptyMessage가 이미 호출자의 것입니다 |
|
|
2683
2684
|
|
|
2684
2685
|
**ColumnDef:**
|
|
2685
2686
|
|
|
2686
|
-
| Prop
|
|
2687
|
-
|
|
|
2688
|
-
| `
|
|
2689
|
-
| `
|
|
2687
|
+
| Prop | Type | Required | Default | Description |
|
|
2688
|
+
| -------------- | -------------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------- |
|
|
2689
|
+
| `headerHidden` | `boolean` | | false | 이름은 두되 그리지 않음. 행 액션처럼 제목이 필요 없는 컬럼용 — 빈 header는 컬럼을 익명으로 만듭니다 |
|
|
2690
|
+
| `bar` | `(row: T) => number` | | | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
|
|
2691
|
+
| `barColor` | `string` | | "bg-accent" | 인라인 바 색상 클래스 |
|
|
2690
2692
|
|
|
2691
2693
|
**Keyboard Shortcuts:**
|
|
2692
2694
|
|
|
@@ -3130,15 +3132,15 @@ const filters = [
|
|
|
3130
3132
|
|
|
3131
3133
|
**EventMetaEditor:**
|
|
3132
3134
|
|
|
3133
|
-
| Prop | Type | Required | Default | Description
|
|
3134
|
-
| ----------- | --------------------------- | -------- | ------- |
|
|
3135
|
-
| `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터
|
|
3136
|
-
| `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경
|
|
3137
|
-
| `icons` | `IconDef[]` | | | 선택 가능한 아이콘
|
|
3138
|
-
| `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션
|
|
3139
|
-
| `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역
|
|
3140
|
-
| `className` | `string` | | | 추가 CSS 클래스
|
|
3141
|
-
| `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder
|
|
3135
|
+
| Prop | Type | Required | Default | Description |
|
|
3136
|
+
| ----------- | --------------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
3137
|
+
| `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터 |
|
|
3138
|
+
| `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경 |
|
|
3139
|
+
| `icons` | `IconDef[]` | | | 선택 가능한 아이콘 |
|
|
3140
|
+
| `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션 |
|
|
3141
|
+
| `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역 |
|
|
3142
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3143
|
+
| `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder 문구. iconPlaceholder는 내부 IconPicker로 전달됩니다 |
|
|
3142
3144
|
|
|
3143
3145
|
**EventMetaEditorSection:**
|
|
3144
3146
|
|
|
@@ -3906,7 +3908,7 @@ const messages = [
|
|
|
3906
3908
|
| `onBulkAction` | `(actionId: string) => void` | | | 일괄 작업 실행 |
|
|
3907
3909
|
| `error` | `ReactNode` | | | 읽기 실패. 빈 목록과 다른 답 |
|
|
3908
3910
|
| `onRetry` | `() => void` | | | 재시도 |
|
|
3909
|
-
| `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러
|
|
3911
|
+
| `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러 문구와 인스펙터 닫기 버튼(closeInspector) |
|
|
3910
3912
|
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3911
3913
|
|
|
3912
3914
|
**CatalogRowActions:**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "Shell Components"
|
|
3
3
|
description: "86 Shell layer components — props, examples, keyboard shortcuts."
|
|
4
|
-
version: "1.12.
|
|
4
|
+
version: "1.12.2"
|
|
5
5
|
generated: true
|
|
6
6
|
---
|
|
7
7
|
|
|
@@ -322,22 +322,24 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
322
322
|
|
|
323
323
|
**DataTable:**
|
|
324
324
|
|
|
325
|
-
| Prop | Type | Required | Default | Description
|
|
326
|
-
| -------------- | -------------------- | -------- | ------------------- |
|
|
327
|
-
| `data` | `T[]` | Yes | | 테이블 데이터 배열
|
|
328
|
-
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? }
|
|
329
|
-
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수
|
|
330
|
-
| `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음
|
|
331
|
-
| `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름
|
|
332
|
-
| `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러
|
|
333
|
-
| `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지
|
|
325
|
+
| Prop | Type | Required | Default | Description |
|
|
326
|
+
| -------------- | -------------------- | -------- | ------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
327
|
+
| `data` | `T[]` | Yes | | 테이블 데이터 배열 |
|
|
328
|
+
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? } |
|
|
329
|
+
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수 |
|
|
330
|
+
| `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음 |
|
|
331
|
+
| `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름 |
|
|
332
|
+
| `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러 |
|
|
333
|
+
| `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지 |
|
|
334
|
+
| `labels` | `DataTableLabels` | | | 선택·리사이즈·펼치기처럼 스크린리더만 듣는 문구. 보이는 문구는 columns와 emptyMessage가 이미 호출자의 것입니다 |
|
|
334
335
|
|
|
335
336
|
**ColumnDef:**
|
|
336
337
|
|
|
337
|
-
| Prop
|
|
338
|
-
|
|
|
339
|
-
| `
|
|
340
|
-
| `
|
|
338
|
+
| Prop | Type | Required | Default | Description |
|
|
339
|
+
| -------------- | -------------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------- |
|
|
340
|
+
| `headerHidden` | `boolean` | | false | 이름은 두되 그리지 않음. 행 액션처럼 제목이 필요 없는 컬럼용 — 빈 header는 컬럼을 익명으로 만듭니다 |
|
|
341
|
+
| `bar` | `(row: T) => number` | | | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
|
|
342
|
+
| `barColor` | `string` | | "bg-accent" | 인라인 바 색상 클래스 |
|
|
341
343
|
|
|
342
344
|
**Keyboard Shortcuts:**
|
|
343
345
|
|
|
@@ -1180,15 +1182,15 @@ const fields = [
|
|
|
1180
1182
|
|
|
1181
1183
|
**EventMetaEditor:**
|
|
1182
1184
|
|
|
1183
|
-
| Prop | Type | Required | Default | Description
|
|
1184
|
-
| ----------- | --------------------------- | -------- | ------- |
|
|
1185
|
-
| `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터
|
|
1186
|
-
| `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경
|
|
1187
|
-
| `icons` | `IconDef[]` | | | 선택 가능한 아이콘
|
|
1188
|
-
| `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션
|
|
1189
|
-
| `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역
|
|
1190
|
-
| `className` | `string` | | | 추가 CSS 클래스
|
|
1191
|
-
| `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder
|
|
1185
|
+
| Prop | Type | Required | Default | Description |
|
|
1186
|
+
| ----------- | --------------------------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
1187
|
+
| `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터 |
|
|
1188
|
+
| `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경 |
|
|
1189
|
+
| `icons` | `IconDef[]` | | | 선택 가능한 아이콘 |
|
|
1190
|
+
| `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션 |
|
|
1191
|
+
| `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역 |
|
|
1192
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
1193
|
+
| `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder 문구. iconPlaceholder는 내부 IconPicker로 전달됩니다 |
|
|
1192
1194
|
|
|
1193
1195
|
**EventMetaEditorSection:**
|
|
1194
1196
|
|
|
@@ -1831,7 +1833,7 @@ const messages = [
|
|
|
1831
1833
|
| `onBulkAction` | `(actionId: string) => void` | | | 일괄 작업 실행 |
|
|
1832
1834
|
| `error` | `ReactNode` | | | 읽기 실패. 빈 목록과 다른 답 |
|
|
1833
1835
|
| `onRetry` | `() => void` | | | 재시도 |
|
|
1834
|
-
| `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러
|
|
1836
|
+
| `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러 문구와 인스펙터 닫기 버튼(closeInspector) |
|
|
1835
1837
|
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
1836
1838
|
|
|
1837
1839
|
**CatalogRowActions:**
|
|
@@ -282,6 +282,30 @@ interface ColumnDef<T> {
|
|
|
282
282
|
bar?: (row: T) => number;
|
|
283
283
|
/** Bar color class (default: "bg-accent") */
|
|
284
284
|
barColor?: string;
|
|
285
|
+
/**
|
|
286
|
+
* Name the column without drawing the name.
|
|
287
|
+
*
|
|
288
|
+
* A column of row actions or icons needs no visible heading, but a `<th>`
|
|
289
|
+
* with an empty string leaves the column unnamed to anyone navigating the
|
|
290
|
+
* grid by header. `header` stays required so there is always a name to say.
|
|
291
|
+
*/
|
|
292
|
+
headerHidden?: boolean;
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Localized labels for the data table component.
|
|
296
|
+
*
|
|
297
|
+
* These were hard-coded English. Everything a caller can see was already
|
|
298
|
+
* theirs to write — headers, empty message, title — but the strings only a
|
|
299
|
+
* screen reader hears were not, so a fully translated table still announced
|
|
300
|
+
* "Select row purchase_completed" in the middle of a Korean page.
|
|
301
|
+
*/
|
|
302
|
+
interface DataTableLabels {
|
|
303
|
+
selectAll?: string;
|
|
304
|
+
/** Named per row, because "select row" alone does not say which. */
|
|
305
|
+
selectRow?: (key: string) => string;
|
|
306
|
+
resizeColumn?: (header: string) => string;
|
|
307
|
+
expandRow?: (key: string) => string;
|
|
308
|
+
collapseRow?: (key: string) => string;
|
|
285
309
|
}
|
|
286
310
|
/** Props for the data table component. */
|
|
287
311
|
interface DataTableProps<T> {
|
|
@@ -321,10 +345,11 @@ interface DataTableProps<T> {
|
|
|
321
345
|
resizableColumns?: boolean;
|
|
322
346
|
/** External (server-side) sort callback */
|
|
323
347
|
onSort?: (columnId: string, direction: "asc" | "desc" | null) => void;
|
|
348
|
+
labels?: DataTableLabels;
|
|
324
349
|
className?: string;
|
|
325
350
|
}
|
|
326
351
|
/** Renders the data table component. */
|
|
327
|
-
declare function DataTable<T>({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage, activeRowId, sortable, selectable, selectedKeys, onSelectionChange, expandable, renderExpanded, pageSize, stickyHeader, resizableColumns, onSort: onSortExternal, className }: DataTableProps<T>): import("react").JSX.Element;
|
|
352
|
+
declare function DataTable<T>({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage, activeRowId, sortable, selectable, selectedKeys, onSelectionChange, expandable, renderExpanded, pageSize, stickyHeader, resizableColumns, onSort: onSortExternal, labels: customLabels, className }: DataTableProps<T>): import("react").JSX.Element;
|
|
328
353
|
//#endregion
|
|
329
354
|
//#region src/shells/notification-toast.d.ts
|
|
330
355
|
/** Defines the toast action shape. */
|
|
@@ -282,6 +282,30 @@ interface ColumnDef<T> {
|
|
|
282
282
|
bar?: (row: T) => number;
|
|
283
283
|
/** Bar color class (default: "bg-accent") */
|
|
284
284
|
barColor?: string;
|
|
285
|
+
/**
|
|
286
|
+
* Name the column without drawing the name.
|
|
287
|
+
*
|
|
288
|
+
* A column of row actions or icons needs no visible heading, but a `<th>`
|
|
289
|
+
* with an empty string leaves the column unnamed to anyone navigating the
|
|
290
|
+
* grid by header. `header` stays required so there is always a name to say.
|
|
291
|
+
*/
|
|
292
|
+
headerHidden?: boolean;
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Localized labels for the data table component.
|
|
296
|
+
*
|
|
297
|
+
* These were hard-coded English. Everything a caller can see was already
|
|
298
|
+
* theirs to write — headers, empty message, title — but the strings only a
|
|
299
|
+
* screen reader hears were not, so a fully translated table still announced
|
|
300
|
+
* "Select row purchase_completed" in the middle of a Korean page.
|
|
301
|
+
*/
|
|
302
|
+
interface DataTableLabels {
|
|
303
|
+
selectAll?: string;
|
|
304
|
+
/** Named per row, because "select row" alone does not say which. */
|
|
305
|
+
selectRow?: (key: string) => string;
|
|
306
|
+
resizeColumn?: (header: string) => string;
|
|
307
|
+
expandRow?: (key: string) => string;
|
|
308
|
+
collapseRow?: (key: string) => string;
|
|
285
309
|
}
|
|
286
310
|
/** Props for the data table component. */
|
|
287
311
|
interface DataTableProps<T> {
|
|
@@ -321,10 +345,11 @@ interface DataTableProps<T> {
|
|
|
321
345
|
resizableColumns?: boolean;
|
|
322
346
|
/** External (server-side) sort callback */
|
|
323
347
|
onSort?: (columnId: string, direction: "asc" | "desc" | null) => void;
|
|
348
|
+
labels?: DataTableLabels;
|
|
324
349
|
className?: string;
|
|
325
350
|
}
|
|
326
351
|
/** Renders the data table component. */
|
|
327
|
-
declare function DataTable<T>({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage, activeRowId, sortable, selectable, selectedKeys, onSelectionChange, expandable, renderExpanded, pageSize, stickyHeader, resizableColumns, onSort: onSortExternal, className }: DataTableProps<T>): import("react").JSX.Element;
|
|
352
|
+
declare function DataTable<T>({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage, activeRowId, sortable, selectable, selectedKeys, onSelectionChange, expandable, renderExpanded, pageSize, stickyHeader, resizableColumns, onSort: onSortExternal, labels: customLabels, className }: DataTableProps<T>): import("react").JSX.Element;
|
|
328
353
|
//#endregion
|
|
329
354
|
//#region src/shells/notification-toast.d.ts
|
|
330
355
|
/** Defines the toast action shape. */
|
|
@@ -254,7 +254,7 @@ function CommandPaletteTrigger({ commands, onSelect, labels }) {
|
|
|
254
254
|
}
|
|
255
255
|
//#endregion
|
|
256
256
|
//#region src/shells/dashboard-grid.tsx
|
|
257
|
-
const defaultLabels$
|
|
257
|
+
const defaultLabels$22 = { ariaLabel: "대시보드 통계" };
|
|
258
258
|
const MIN_DASHBOARD_COLUMNS = 1;
|
|
259
259
|
const MAX_DASHBOARD_COLUMNS = 12;
|
|
260
260
|
function normalizeDashboardColumns(columns) {
|
|
@@ -263,7 +263,7 @@ function normalizeDashboardColumns(columns) {
|
|
|
263
263
|
}
|
|
264
264
|
/** Renders the dashboard grid component. */
|
|
265
265
|
function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
|
|
266
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
266
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$22), customLabels);
|
|
267
267
|
const columnCount = normalizeDashboardColumns(columns);
|
|
268
268
|
const rowStyle = { "--opt-dashboard-grid-columns": `repeat(${columnCount}, minmax(0, 1fr))` };
|
|
269
269
|
const rows = [];
|
|
@@ -291,13 +291,13 @@ function DashboardGrid({ stats, columns = 3, labels: customLabels }) {
|
|
|
291
291
|
}
|
|
292
292
|
//#endregion
|
|
293
293
|
//#region src/shells/search-combobox.tsx
|
|
294
|
-
const defaultLabels$
|
|
294
|
+
const defaultLabels$21 = {
|
|
295
295
|
noResults: "결과가 없습니다.",
|
|
296
296
|
loading: "Loading…"
|
|
297
297
|
};
|
|
298
298
|
/** Renders the search combobox component. */
|
|
299
299
|
function SearchCombobox({ items, placeholder = "검색...", label = "검색", onSelect, labels: customLabels, async: isAsync = false, onSearch, debounceMs = 300 }) {
|
|
300
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
300
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$21), customLabels);
|
|
301
301
|
const inputId = (0, react.useId)();
|
|
302
302
|
const [query, setQuery] = (0, react.useState)("");
|
|
303
303
|
const [asyncResults, setAsyncResults] = (0, react.useState)([]);
|
|
@@ -395,14 +395,14 @@ function SearchCombobox({ items, placeholder = "검색...", label = "검색", on
|
|
|
395
395
|
}
|
|
396
396
|
//#endregion
|
|
397
397
|
//#region src/shells/status-select.tsx
|
|
398
|
-
const defaultLabels$
|
|
398
|
+
const defaultLabels$20 = {
|
|
399
399
|
selectLabel: "상태",
|
|
400
400
|
emptyMessage: "사용 가능한 상태 옵션이 없습니다."
|
|
401
401
|
};
|
|
402
402
|
/** Renders the status select component. */
|
|
403
403
|
function StatusSelect({ options, value: controlledValue, onChange, label, labels: customLabels }) {
|
|
404
404
|
var _options$0$value, _options$;
|
|
405
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
405
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$20), customLabels);
|
|
406
406
|
const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
|
|
407
407
|
const [internalValue, setInternalValue] = (0, react.useState)((_options$0$value = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) !== null && _options$0$value !== void 0 ? _options$0$value : "");
|
|
408
408
|
const value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
|
|
@@ -469,7 +469,7 @@ function StatusSelect({ options, value: controlledValue, onChange, label, labels
|
|
|
469
469
|
}
|
|
470
470
|
//#endregion
|
|
471
471
|
//#region src/shells/app-menubar.tsx
|
|
472
|
-
const defaultLabels$
|
|
472
|
+
const defaultLabels$19 = { ariaLabel: "Application menu" };
|
|
473
473
|
function MenuSection({ menu }) {
|
|
474
474
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.MenuTrigger, { children: [menu.label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuButtonArrow, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuPopover, { children: menu.items.map((item, i) => {
|
|
475
475
|
if (item.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenuSeparator, {}, `sep-${i}`);
|
|
@@ -513,7 +513,7 @@ function MenuSection({ menu }) {
|
|
|
513
513
|
}
|
|
514
514
|
/** Renders the app menubar component. */
|
|
515
515
|
function AppMenubar({ menus, labels: customLabels }) {
|
|
516
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
516
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$19), customLabels);
|
|
517
517
|
if (menus.length === 0) return null;
|
|
518
518
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.MenubarRoot, {
|
|
519
519
|
"data-opt-id": "BGKHW",
|
|
@@ -552,10 +552,10 @@ const sectionStyles = {
|
|
|
552
552
|
Templates: "text-text-tertiary"
|
|
553
553
|
};
|
|
554
554
|
const defaultSectionStyle = "text-text-secondary";
|
|
555
|
-
const defaultLabels$
|
|
555
|
+
const defaultLabels$18 = { ariaLabel: "문서 네비게이션" };
|
|
556
556
|
/** Renders the sidebar nav component. */
|
|
557
557
|
function SidebarNav({ items, labels: customLabels }) {
|
|
558
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
558
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$18), customLabels);
|
|
559
559
|
const pathname = (0, next_navigation.usePathname)();
|
|
560
560
|
const activeItem = items.find((item) => item.href === pathname);
|
|
561
561
|
const [activeId, setActiveId] = (0, react.useState)(activeItem ? domId(activeItem.id) : void 0);
|
|
@@ -603,7 +603,7 @@ function SidebarNav({ items, labels: customLabels }) {
|
|
|
603
603
|
}
|
|
604
604
|
//#endregion
|
|
605
605
|
//#region src/shells/editor-toolbar.tsx
|
|
606
|
-
const defaultLabels$
|
|
606
|
+
const defaultLabels$17 = { ariaLabel: "텍스트 편집기 툴바" };
|
|
607
607
|
function ToolbarButtonWithTooltip({ button, active, onAction }) {
|
|
608
608
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TooltipAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.ToolbarButton, {
|
|
609
609
|
className: `text-text-primary data-[active-item]:bg-bg-subtle data-[focus-visible]:ring-ring rounded-md p-2 transition-colors outline-none data-[focus-visible]:ring-2 ${active ? "bg-bg-muted" : "hover:bg-bg-subtle"}`,
|
|
@@ -613,7 +613,7 @@ function ToolbarButtonWithTooltip({ button, active, onAction }) {
|
|
|
613
613
|
}
|
|
614
614
|
/** Renders the editor toolbar component. */
|
|
615
615
|
function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLabels }) {
|
|
616
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
616
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$17), customLabels);
|
|
617
617
|
const groups = [];
|
|
618
618
|
let current = [];
|
|
619
619
|
for (const btn of buttons) {
|
|
@@ -646,14 +646,14 @@ function EditorToolbar({ buttons, onAction, activeButtons = [], labels: customLa
|
|
|
646
646
|
}
|
|
647
647
|
//#endregion
|
|
648
648
|
//#region src/shells/content-tabs.tsx
|
|
649
|
-
const defaultLabels$
|
|
649
|
+
const defaultLabels$16 = {
|
|
650
650
|
ariaLabel: "콘텐츠 탭",
|
|
651
651
|
emptyMessage: "표시할 탭이 없습니다."
|
|
652
652
|
};
|
|
653
653
|
/** Renders the content tabs component. */
|
|
654
654
|
function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
|
|
655
655
|
var _tabs$, _tabs$find;
|
|
656
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
656
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$16), customLabels);
|
|
657
657
|
const [selectedTabId, setSelectedTabId] = (0, react.useState)(defaultTabId !== null && defaultTabId !== void 0 ? defaultTabId : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id);
|
|
658
658
|
if (tabs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
659
659
|
className: "text-text-secondary text-sm",
|
|
@@ -685,13 +685,13 @@ function ContentTabs({ tabs, defaultTabId, labels: customLabels }) {
|
|
|
685
685
|
}
|
|
686
686
|
//#endregion
|
|
687
687
|
//#region src/shells/faq-accordion.tsx
|
|
688
|
-
const defaultLabels$
|
|
688
|
+
const defaultLabels$15 = {
|
|
689
689
|
ariaLabel: "자주 묻는 질문",
|
|
690
690
|
emptyMessage: "등록된 FAQ가 없습니다."
|
|
691
691
|
};
|
|
692
692
|
/** Renders the faq accordion component. */
|
|
693
693
|
function FaqAccordion({ items, labels: customLabels }) {
|
|
694
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
694
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$15), customLabels);
|
|
695
695
|
if (items.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
696
696
|
className: "text-text-secondary text-sm",
|
|
697
697
|
"data-opt-id": "QRBHV",
|
|
@@ -731,14 +731,14 @@ function FaqAccordion({ items, labels: customLabels }) {
|
|
|
731
731
|
}
|
|
732
732
|
//#endregion
|
|
733
733
|
//#region src/shells/settings-form.tsx
|
|
734
|
-
const defaultLabels$
|
|
734
|
+
const defaultLabels$14 = {
|
|
735
735
|
formAriaLabel: "설정 폼",
|
|
736
736
|
submitButton: "저장",
|
|
737
737
|
successMessage: "설정이 저장되었습니다."
|
|
738
738
|
};
|
|
739
739
|
/** Renders the settings form component. */
|
|
740
740
|
function SettingsForm({ fields, onSubmit, labels: customLabels }) {
|
|
741
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
741
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$14), customLabels);
|
|
742
742
|
const [submitted, setSubmitted] = (0, react.useState)(false);
|
|
743
743
|
const defaultValues = {};
|
|
744
744
|
for (const field of fields) {
|
|
@@ -1064,7 +1064,7 @@ function ProjectSwitcher({ projects, value, onChange, placeholder = "프로젝
|
|
|
1064
1064
|
ProjectSwitcher.displayName = "ProjectSwitcher";
|
|
1065
1065
|
//#endregion
|
|
1066
1066
|
//#region src/shells/env-panel.tsx
|
|
1067
|
-
const defaultLabels$
|
|
1067
|
+
const defaultLabels$13 = {
|
|
1068
1068
|
varCount: (count) => `${count}개 변수`,
|
|
1069
1069
|
envVarsLabel: (env) => `${env} 환경 변수`,
|
|
1070
1070
|
secretBadge: "secret"
|
|
@@ -1076,7 +1076,7 @@ const envDot = {
|
|
|
1076
1076
|
};
|
|
1077
1077
|
/** Renders the env panel component. */
|
|
1078
1078
|
function EnvPanel({ groups, labels: customLabels }) {
|
|
1079
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
1079
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$13), customLabels);
|
|
1080
1080
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1081
1081
|
className: `rounded-lg ${require_text_truncate.OPT_BORDER} divide-y ${require_text_truncate.OPT_DIVIDER} bg-surface`,
|
|
1082
1082
|
"data-opt-id": "ZBDWK",
|
|
@@ -1149,7 +1149,7 @@ function EnvPanel({ groups, labels: customLabels }) {
|
|
|
1149
1149
|
}
|
|
1150
1150
|
//#endregion
|
|
1151
1151
|
//#region src/shells/branch-select.tsx
|
|
1152
|
-
const defaultLabels$
|
|
1152
|
+
const defaultLabels$12 = {
|
|
1153
1153
|
selectLabel: "브랜치",
|
|
1154
1154
|
emptySelectionLabel: "선택...",
|
|
1155
1155
|
emptyMessage: "사용 가능한 브랜치가 없습니다.",
|
|
@@ -1158,7 +1158,7 @@ const defaultLabels$11 = {
|
|
|
1158
1158
|
/** Renders the branch select component. */
|
|
1159
1159
|
function BranchSelect({ branches, value: controlledValue, onChange, label, labels: customLabels }) {
|
|
1160
1160
|
var _ref, _defaultBranch$name, _branches$, _selected$name;
|
|
1161
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
1161
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$12), customLabels);
|
|
1162
1162
|
const resolvedLabel = label !== null && label !== void 0 ? label : labels.selectLabel;
|
|
1163
1163
|
const defaultBranch = branches.find((b) => b.isDefault);
|
|
1164
1164
|
const [internalValue, setInternalValue] = (0, react.useState)((_ref = (_defaultBranch$name = defaultBranch === null || defaultBranch === void 0 ? void 0 : defaultBranch.name) !== null && _defaultBranch$name !== void 0 ? _defaultBranch$name : (_branches$ = branches[0]) === null || _branches$ === void 0 ? void 0 : _branches$.name) !== null && _ref !== void 0 ? _ref : "");
|
|
@@ -1267,7 +1267,7 @@ function BranchSelect({ branches, value: controlledValue, onChange, label, label
|
|
|
1267
1267
|
BranchSelect.displayName = "BranchSelect";
|
|
1268
1268
|
//#endregion
|
|
1269
1269
|
//#region src/shells/domain-table.tsx
|
|
1270
|
-
const defaultLabels$
|
|
1270
|
+
const defaultLabels$11 = {
|
|
1271
1271
|
domain: "Domain",
|
|
1272
1272
|
status: "Status",
|
|
1273
1273
|
ssl: "SSL",
|
|
@@ -1297,7 +1297,7 @@ const sslLabel = {
|
|
|
1297
1297
|
};
|
|
1298
1298
|
/** Renders the domain table component. */
|
|
1299
1299
|
function DomainTable({ domains, title = "도메인", labels: customLabels }) {
|
|
1300
|
-
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$
|
|
1300
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$11), customLabels);
|
|
1301
1301
|
if (domains.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
1302
1302
|
className: "gap-group flex flex-col",
|
|
1303
1303
|
"data-opt-id": "A7SRM",
|
|
@@ -1415,6 +1415,13 @@ function DomainTable({ domains, title = "도메인", labels: customLabels }) {
|
|
|
1415
1415
|
}
|
|
1416
1416
|
//#endregion
|
|
1417
1417
|
//#region src/shells/data-table.tsx
|
|
1418
|
+
const defaultLabels$10 = {
|
|
1419
|
+
selectAll: "Select all",
|
|
1420
|
+
selectRow: (key) => `Select row ${key}`,
|
|
1421
|
+
resizeColumn: (header) => `Resize ${header}`,
|
|
1422
|
+
expandRow: (key) => `Expand row ${key}`,
|
|
1423
|
+
collapseRow: (key) => `Collapse row ${key}`
|
|
1424
|
+
};
|
|
1418
1425
|
const MIN_COLUMN_WIDTH = 40;
|
|
1419
1426
|
const DEFAULT_COLUMN_RESIZE_MAX = 1200;
|
|
1420
1427
|
const alignmentClass = {
|
|
@@ -1475,7 +1482,8 @@ function DataTableProgressBar({ value, barColor, label }) {
|
|
|
1475
1482
|
});
|
|
1476
1483
|
}
|
|
1477
1484
|
/** Renders the data table component. */
|
|
1478
|
-
function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, className }) {
|
|
1485
|
+
function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick, emptyMessage = "No data available", activeRowId, sortable = false, selectable = false, selectedKeys, onSelectionChange, expandable = false, renderExpanded, pageSize, stickyHeader = false, resizableColumns = false, onSort: onSortExternal, labels: customLabels, className }) {
|
|
1486
|
+
const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$10), customLabels);
|
|
1479
1487
|
const [sortCol, setSortCol] = (0, react.useState)(null);
|
|
1480
1488
|
const [sortDir, setSortDir] = (0, react.useState)(null);
|
|
1481
1489
|
const [expandedKeys, setExpandedKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
|
|
@@ -1580,7 +1588,7 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
|
|
|
1580
1588
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Checkbox, {
|
|
1581
1589
|
checked: allSelected,
|
|
1582
1590
|
onChange: toggleSelectAll,
|
|
1583
|
-
"aria-label":
|
|
1591
|
+
"aria-label": labels.selectAll
|
|
1584
1592
|
})
|
|
1585
1593
|
}),
|
|
1586
1594
|
expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { className: require_text_truncate.cn("px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-tertiary", "w-10") }),
|
|
@@ -1602,11 +1610,14 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
|
|
|
1602
1610
|
"aria-sort": sortCol === col.id && sortDir ? sortDir === "asc" ? "ascending" : "descending" : void 0,
|
|
1603
1611
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
1604
1612
|
className: "flex items-center whitespace-nowrap",
|
|
1605
|
-
children: [
|
|
1613
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1614
|
+
className: require_text_truncate.cn(col.headerHidden && "sr-only"),
|
|
1615
|
+
children: col.header
|
|
1616
|
+
}), sortIndicator(col.id)]
|
|
1606
1617
|
}), resizableColumns && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
1607
1618
|
role: "separator",
|
|
1608
1619
|
"aria-orientation": "vertical",
|
|
1609
|
-
"aria-label":
|
|
1620
|
+
"aria-label": labels.resizeColumn(col.header),
|
|
1610
1621
|
"aria-valuemin": MIN_COLUMN_WIDTH,
|
|
1611
1622
|
"aria-valuemax": resizeMax,
|
|
1612
1623
|
"aria-valuenow": resizeValue,
|
|
@@ -1669,7 +1680,7 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
|
|
|
1669
1680
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Checkbox, {
|
|
1670
1681
|
checked: isSelected,
|
|
1671
1682
|
onChange: () => toggleSelectRow(key),
|
|
1672
|
-
"aria-label":
|
|
1683
|
+
"aria-label": labels.selectRow(key)
|
|
1673
1684
|
})
|
|
1674
1685
|
}),
|
|
1675
1686
|
expandable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.CompositeItem, {
|
|
@@ -1686,7 +1697,7 @@ function DataTable({ data, columns, keyExtractor, title, ariaLabel, onRowClick,
|
|
|
1686
1697
|
},
|
|
1687
1698
|
className: require_text_truncate.cn("rounded p-0.5 text-sm transition-transform", "text-text-secondary", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-ring-offset", isExpanded && "rotate-90"),
|
|
1688
1699
|
"aria-expanded": isExpanded,
|
|
1689
|
-
"aria-label":
|
|
1700
|
+
"aria-label": isExpanded ? labels.collapseRow(key) : labels.expandRow(key),
|
|
1690
1701
|
children: "▶"
|
|
1691
1702
|
})
|
|
1692
1703
|
}),
|