@olundot/ui 0.21.2 → 0.23.0
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/CHANGELOG.md +48 -0
- package/dist/index.d.ts +135 -13
- package/dist/index.js +5582 -3919
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,53 @@
|
|
|
1
1
|
# @olundot/ui
|
|
2
2
|
|
|
3
|
+
## 0.23.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 6e233de: `DatePicker` 추가: 달력에서 날짜 하나나 기간을 고른다. `selectionMode`(`single`·`range`)와 `granularity`(`day` = `YYYY-MM-DD`, `minute` = `YYYY-MM-DDTHH:mm`)로 고르고, 기간 값은 `{ from, to }`(`DateRangeValue`)다. 두 끝이 차면 바로 반영하고 확인 단추는 없다. 시간 포함이면 시·분 열 목록을 1024px 이상 팝오버(424px)에서는 달력 오른쪽, 1024px 미만 아래쪽 시트에서는 달력 아래에 둔다. 분 간격 `minuteStep`(기본 5), 간격 밖 기존 분은 열에 끼워 보인다. `min`·`max` 밖은 비활성이고 넘으면 끝으로 당긴다. 라벨 계약은 Select와 같다(`label`, `labelPlacement` 기본 `top`, `description`, `message`, `invalid`, `size`, `fullWidth`). 달력은 APG 날짜 격자 키보드, 시·분 열은 `listbox` 키보드를 따른다. `maxDays`, `displayValue`, `popoverHeader`, `initialMonth`를 받는다.
|
|
8
|
+
- 9362060: `Alert`와 `InlineAlert`의 `role`을 `variant`로 정한다. `error`는 `role="alert"`와 `aria-live="assertive"`, 나머지는 `role="status"`와 `aria-live="polite"`다. `info`·`success`·`warning` Alert의 `role`이 `alert`에서 `status`로, `error` InlineAlert의 `role`이 `status`에서 `alert`로 바뀐다. 소비자가 넘긴 `role`과 `aria-live`가 우선한다.
|
|
9
|
+
- f7c737a: `RadioGroup`에 `marker?: "none" | "number"`가 생긴다(기본 `"none"`). `"number"`면 라디오 원 자리에 1부터 센 22px 번호 원을 그리고, 고르면 `--primary`로 채운다. 번호는 렌더할 때 정한다. 그룹이 자식 가운데 `Radio`를 Fragment와 DOM 요소(`div` 등) 안까지 순서대로 세고, 컴포넌트 안에서 그리는 `Radio`는 새 `number` prop으로 번호를 받는다(`number`가 이긴다). 세지도 못하고 `number`도 없는 `Radio`는 번호 없이 그리고 개발 모드에서 한 번 경고한다. 서버 렌더와 하이드레이션 뒤 번호가 같다. 화면 번호는 `aria-hidden`이고 접근 이름 앞에 숨긴 `{n}번 `이 붙는다. 번호 원은 라벨 첫 줄에 맞춘다. 앱에서 `[data-slot=radio-control]`을 숨기고 번호를 직접 그리던 우회를 이 옵션으로 바꿀 수 있다. 새 타입 `RadioGroupMarker`를 내보낸다.
|
|
10
|
+
- 0634104: `TablePagination`에 번호 모드가 생긴다. `page`(1부터)와 `onPageChange`를 주면 ◀ ▶ 대신 `« ‹ 1 2 3 … › »`를 그린다. 페이지 수와 범위는 `total`·`pageSize`로 계산하므로 `rangeStart`·`rangeEnd`·`hasPrev`·`hasNext`·`onPrev`·`onNext`는 넘기지 않는다(타입이 막는다). 번호 모드 props 타입은 새 `TablePaginationPagesProps`이고, 기존 `TablePaginationProps`는 ◀ ▶ 모드 계약 그대로라 이를 받아 펼치는 래퍼는 바꿀 필요가 없다.
|
|
11
|
+
|
|
12
|
+
- 넓은 패널: 행 수 선택 | 버튼 묶음 | 범위의 3칸 격자(`1fr auto 1fr`). 버튼 묶음이 패널 가운데에 고정되고 쪽을 넘겨도 움직이지 않는다. 번호는 `Pagination`과 같은 7칸.
|
|
13
|
+
- 패널 안쪽 폭 800px 미만: 두 줄(행 수·범위 / 가운데 버튼)과 번호 5칸(`1 2 3 … 끝`, `1 … 끝-2 끝-1 끝`, `1 … 현재 … 끝`). 안쪽 320px 미만(320 화면)에서는 «·»를 숨겨 버튼 7개(248px)로 들어간다. 1과 끝 쪽 번호는 남는다. CSS 컨테이너 쿼리로 바꾸고, 쓰지 않는 칸 수의 번호 줄은 `display: none`이라 접근성 트리와 Tab 순서에서 빠진다.
|
|
14
|
+
- `loading` 동안 번호 버튼까지 모든 버튼이 `disabled`다. `nav`는 바깥 하나뿐이고 현재 쪽에 `aria-current="page"`가 붙는다.
|
|
15
|
+
- ◀ ▶ 모드 렌더와 `shouldHideTablePagination`은 그대로다. `Pagination`의 번호 계산·버튼을 공유하며 `Pagination` 렌더 결과는 같다.
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 9362060: `BulkActionBar`가 토스트를 피하는 높이를 고정값 204px 대신 떠 있는 토스트 묶음의 실제 높이로 정한다. 두 줄 토스트가 쌓이면 카드가 가려지지 않고, 토스트가 하나뿐이면 카드가 필요 이상 올라가지 않는다. 토스트가 없으면 204px 그대로이고 `--olun-bulk-bar-offset` 계약은 같다. `ToastViewport`는 묶음 높이나 개수가 바뀌면 window에 `olun-toast-stack` 이벤트를 보낸다.
|
|
20
|
+
- f7c737a: `FormField` 함수 자식의 `controlProps`를 펼쳐도 `description`·`message`·`state`가 DOM 속성으로 새지 않는다. `Checkbox`·`Switch`·`OTPField`·`FileUploadZone`은 `description`을 안내 칸에, `message`(`state="error"`)를 오류 칸에 그리고 `aria-describedby`·`aria-invalid`로 잇는다(`OTPField`는 `helperText`·`errorText`, `FileUploadZone`은 `hint`·`error` 칸이며 직접 준 값이 이긴다). `RadioGroup`·`CheckboxGroup`·`ModeToggle`은 세 값을 걸러내며, 안내와 오류는 `FormField` 요소 자식으로 쓸 때 보인다.
|
|
21
|
+
- f7c737a: `Input`이 늘 같은 구조로 그린다. 래퍼 `data-slot="input-field"`가 늘 있고, `label`·`description`·`message`가 모두 없으면 `display: contents`라 배치와 높이는 맨 `<input>`과 같다. 오류가 생기고 사라져도 같은 `<input>` 노드가 남아 포커스와 입력 위치가 유지된다. `className`은 그대로 `<input>`에 붙는다. 맨 `Input`의 마크업 첫 요소가 `<input>`이 아니라 래퍼 `<div>`로 바뀐다.
|
|
22
|
+
|
|
23
|
+
## 0.22.0
|
|
24
|
+
|
|
25
|
+
### Minor Changes
|
|
26
|
+
|
|
27
|
+
- 7bb0419: `BulkActionBar`에 고른 항목이 있으면 Ctrl+Period로 목록과 카드 사이를 오가고, 카드 안에 키보드 포커스가 있으면 작업 줄 왼쪽에 목록으로 돌아가는 버튼이 보인다. Mac은 Control+Period다. 작업 줄은 줄을 바꾸지 않고, 넘치면 끝 작업부터 더보기 메뉴로 옮긴다.
|
|
28
|
+
|
|
29
|
+
- 목록에서 누르면 첫 번째 켜진 작업 버튼으로, 카드에서 누르면 마지막으로 포커스가 있던 행으로 간다. 그 행이 없으면 같은 순번의 행, 그다음 목록으로 간다. 카드에 포커스가 있을 때 카드가 사라져도 같은 규칙으로 돌아간다.
|
|
30
|
+
- 입력란, 편집 가능한 칸, 글자 조합 중에는 동작하지 않는다.
|
|
31
|
+
- 이동 버튼 라벨은 「목록으로」이고 누르면 목록으로 돌아간다. 라벨 뒤에 키 표시 `Ctrl` `.`(Mac `⌃` `.`)가 붙고, 버튼에 `aria-keyshortcuts="Control+."`가 붙는다. 카드 안 포커스가 `:focus-visible`이 아니고 버튼 자신에도 없으면 건너뛰기 링크처럼 시각적으로만 숨어 이름과 Tab 순서는 남는다. 보일 때는 늘 라벨과 키 표시를 함께 보이고, 그만큼 작업이 더 접힐 수 있다. 카드에서 연 더보기 메뉴, 확인 창, 다이얼로그가 떠 있는 동안, 그리고 포인터를 누르고 있는 동안에는 보이던 상태를 바꾸지 않는다. 터치 전용 기기에서는 숨는다.
|
|
32
|
+
- 단축키 범위는 가장 가까운 `DataLayout` 영역, 없으면 카드의 부모다. 새 prop `shortcutScope`로 범위를 바꾸고, `shortcut={false}`로 단축키와 이동 버튼을 함께 끈다.
|
|
33
|
+
- DataTable 밖 목록은 행 요소에 `data-row-id`를 달아야 돌아갈 행을 기억한다.
|
|
34
|
+
- 카드는 이름 있는 영역(`section`)이 되고 안쪽 `role="toolbar"`와 이름을 함께 쓴다. `aria-label`은 둘에 같이 붙는다. `getByRole("toolbar", { name })`는 그대로 찾는다.
|
|
35
|
+
- 접힌 작업은 메뉴에서 라벨, 아이콘, 위험 색, 비활성을 그대로 가진다. 비활성 작업의 `title`은 메뉴에서 라벨 아래 사유로, 켜진 작업의 `title`은 드롭다운 항목의 툴팁과 아래쪽 시트 메뉴의 라벨 아래 줄로 보인다. 노드 라벨은 메뉴에서 그 글자로 보이고, 라벨 글자가 바뀌면 메뉴도 따라 바뀐다.
|
|
36
|
+
- 포커스가 있던 작업이 접히면 더보기 버튼으로, 다시 펼쳐지면 그 작업으로 포커스가 간다. 열린 더보기 메뉴 항목에 포커스가 있을 때 펼쳐지면 메뉴가 닫히고 그 항목의 작업으로 간다.
|
|
37
|
+
- `ActionMenuItem`에 `title`이 생긴다. 드롭다운 명령 행의 브라우저 툴팁이고 메뉴 시트에는 붙지 않는다.
|
|
38
|
+
- 단축키는 소비자의 React `onKeyDown`이 먼저 받는다. 거기서 `preventDefault()`하면 이동하지 않는다.
|
|
39
|
+
- 서버 렌더와 하이드레이션 전에는 작업 줄이 전처럼 줄을 바꾸고, 클라이언트에서 폭을 잰 뒤 한 줄로 접는다.
|
|
40
|
+
- `idleContent`, `emptyHint`, `summary`, `unit`, `--olun-bulk-bar-offset`은 그대로다.
|
|
41
|
+
|
|
42
|
+
### Patch Changes
|
|
43
|
+
|
|
44
|
+
- 6fba6b6: `ErrorState`에 `message`로 `null`이나 빈 문자열을 주면 빈 메시지 문단을 그리지 않습니다. `message`를 생략하면 기본 문구가 나오는 것은 그대로입니다.
|
|
45
|
+
- 6fba6b6: `FileUploadZone`을 `FormField` 안에 두면 FormField 라벨이 숨은 파일 입력을 가리킵니다. 업로드 영역과 숨은 파일 입력에는 `aria-describedby`로 직접 준 값, `error` 문구, FormField의 안내 문구와 오류가 차례로 이어집니다. `error`를 주면 숨은 파일 입력에 `aria-invalid`도 켭니다. FormField 밖에서는 그대로입니다.
|
|
46
|
+
- 6fba6b6: `IconButton`의 `tooltip`이 iframe 안에서도 Tab으로 포커스를 옮기면 열립니다. 바깥 문서에서 Tab으로 iframe에 들어올 때도 열립니다. Tab 감지 리스너를 버튼이 속한 문서와 그 바깥의 같은 출처 문서에 겁니다.
|
|
47
|
+
- 6fba6b6: `FormField` 함수 자식에서 `SearchField`에 `controlProps`를 펼쳐도 `description`, `message`, `state`가 `<input>` 속성으로 새어 나가지 않습니다.
|
|
48
|
+
- Updated dependencies [6fba6b6]
|
|
49
|
+
- @olundot/tokens@0.19.0
|
|
50
|
+
|
|
3
51
|
## 0.21.2
|
|
4
52
|
|
|
5
53
|
### Patch Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -354,6 +354,71 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
|
|
|
354
354
|
}
|
|
355
355
|
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
|
|
356
356
|
|
|
357
|
+
type DatePickerGranularity = "day" | "minute";
|
|
358
|
+
interface DateRangeValue {
|
|
359
|
+
from: string;
|
|
360
|
+
to: string;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
type DatePickerSize = SelectSize;
|
|
364
|
+
interface DatePickerBaseProps {
|
|
365
|
+
/** Value format and whether a time is picked. `day` = `"YYYY-MM-DD"`, `minute` = `"YYYY-MM-DDTHH:mm"`. Default `"day"`. */
|
|
366
|
+
granularity?: DatePickerGranularity;
|
|
367
|
+
/** Minute column step. A stored minute off the step stays in the column. Default 5. */
|
|
368
|
+
minuteStep?: number;
|
|
369
|
+
/** Earliest pickable value, in the value format. Earlier dates, hours and minutes are disabled. */
|
|
370
|
+
min?: string;
|
|
371
|
+
/** Latest pickable value, in the value format. */
|
|
372
|
+
max?: string;
|
|
373
|
+
/** Month the calendar opens on while the value is empty, in the value format. */
|
|
374
|
+
initialMonth?: string;
|
|
375
|
+
label?: React.ReactNode;
|
|
376
|
+
/** Label above the field (default) or inside it before the value, as `라벨: 값`. Same as Select. */
|
|
377
|
+
labelPlacement?: "top" | "inline";
|
|
378
|
+
/** Hint under the field. Hidden while `invalid`; `message` takes its place. */
|
|
379
|
+
description?: React.ReactNode;
|
|
380
|
+
message?: React.ReactNode;
|
|
381
|
+
invalid?: boolean;
|
|
382
|
+
disabled?: boolean;
|
|
383
|
+
/** Empty field text. Default `날짜 선택` (`day`) or `일시 선택` (`minute`). */
|
|
384
|
+
placeholder?: string;
|
|
385
|
+
/** Field height: sm 30 · md 32 · lg 36. Default `"md"`. */
|
|
386
|
+
size?: DatePickerSize;
|
|
387
|
+
/** Stretch to the container (default) or fit the content. */
|
|
388
|
+
fullWidth?: boolean;
|
|
389
|
+
/** Summary text the caller formats (an organization time zone, for example). Shown while a value is set. */
|
|
390
|
+
displayValue?: string;
|
|
391
|
+
/** Slot at the top of the popover and the sheet. */
|
|
392
|
+
popoverHeader?: React.ReactNode;
|
|
393
|
+
/** Field button id. */
|
|
394
|
+
id?: string;
|
|
395
|
+
/** Classes on the field button. */
|
|
396
|
+
className?: string;
|
|
397
|
+
"aria-label"?: string;
|
|
398
|
+
"aria-describedby"?: string;
|
|
399
|
+
}
|
|
400
|
+
interface DatePickerSingleProps extends DatePickerBaseProps {
|
|
401
|
+
selectionMode?: "single";
|
|
402
|
+
/** `""` or a value in the `granularity` format. */
|
|
403
|
+
value: string;
|
|
404
|
+
onChange: (value: string) => void;
|
|
405
|
+
maxDays?: never;
|
|
406
|
+
}
|
|
407
|
+
interface DatePickerRangeProps extends DatePickerBaseProps {
|
|
408
|
+
selectionMode: "range";
|
|
409
|
+
/** Both `""` when empty. */
|
|
410
|
+
value: DateRangeValue;
|
|
411
|
+
/** Called once both ends are set, then on every change. */
|
|
412
|
+
onChange: (value: DateRangeValue) => void;
|
|
413
|
+
/** Most days the range spans, the start day included. */
|
|
414
|
+
maxDays?: number;
|
|
415
|
+
}
|
|
416
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
417
|
+
declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
418
|
+
declare namespace DatePicker {
|
|
419
|
+
var displayName: string;
|
|
420
|
+
}
|
|
421
|
+
|
|
357
422
|
declare const formFieldVariants: (props?: ({
|
|
358
423
|
layout?: "horizontal" | "vertical" | null | undefined;
|
|
359
424
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -930,6 +995,8 @@ interface ActionMenuItem {
|
|
|
930
995
|
icon?: React.ComponentType<ActionMenuIconProps>;
|
|
931
996
|
/** Secondary line under the label (menu sheet only). */
|
|
932
997
|
description?: string;
|
|
998
|
+
/** Native tooltip on the dropdown item (not on a `disabledReason` item, not in the menu sheet). */
|
|
999
|
+
title?: string;
|
|
933
1000
|
/** Danger color (DropdownMenuItem `variant="destructive"`, the sheet row's error color). */
|
|
934
1001
|
destructive?: boolean;
|
|
935
1002
|
/** Not focusable and runs nothing. */
|
|
@@ -1307,6 +1374,16 @@ interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
1307
1374
|
* Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
|
|
1308
1375
|
*/
|
|
1309
1376
|
idleContent?: React.ReactNode;
|
|
1377
|
+
/**
|
|
1378
|
+
* `false` drops the Ctrl+. (Mac Control+.) shortcut between the list and the card, and the
|
|
1379
|
+
* button that shows it.
|
|
1380
|
+
*/
|
|
1381
|
+
shortcut?: boolean;
|
|
1382
|
+
/**
|
|
1383
|
+
* Where the shortcut listens and which rows it returns to. Defaults to the nearest DataLayout
|
|
1384
|
+
* region (`[data-slot="data-layout-region"]`), else the card's parent.
|
|
1385
|
+
*/
|
|
1386
|
+
shortcutScope?: React.RefObject<HTMLElement | null>;
|
|
1310
1387
|
}
|
|
1311
1388
|
interface BulkActionBarProps extends BulkActionBarBaseProps {
|
|
1312
1389
|
/** `floating` (default) — card stuck to the bottom of the list. */
|
|
@@ -1317,11 +1394,16 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
|
|
|
1317
1394
|
*
|
|
1318
1395
|
* placement="floating" (default) is a card at the bottom of the list: the count
|
|
1319
1396
|
* with the clear (✕) button on its right, `summary` under it at full width, then
|
|
1320
|
-
*
|
|
1321
|
-
*
|
|
1397
|
+
* one line of outline sm Buttons: the move button back to the list at the left (shown
|
|
1398
|
+
* only while keyboard focus is in the card), the actions at the right. A line that does
|
|
1399
|
+
* not fit folds actions into a ⋯ menu from the end. `variant: "destructive"` is outline danger. The card is
|
|
1322
1400
|
* min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
|
|
1323
1401
|
* carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
|
|
1324
|
-
* DOM order
|
|
1402
|
+
* The card is a named region around a toolbar; DOM order is count → move → actions → ⋯ → ✕.
|
|
1403
|
+
*
|
|
1404
|
+
* While count ≥ 1, Ctrl+. (Mac Control+.) in its scope moves focus from the list to the
|
|
1405
|
+
* first action and from the card back to the last focused row; the move button goes back
|
|
1406
|
+
* too. `shortcut={false}` drops both, `shortcutScope` sets the scope.
|
|
1325
1407
|
*
|
|
1326
1408
|
* `unit` sets the count unit, `idleContent` shows while nothing is selected.
|
|
1327
1409
|
*
|
|
@@ -1332,7 +1414,7 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
|
|
|
1332
1414
|
* { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
|
|
1333
1415
|
* ]} />
|
|
1334
1416
|
*/
|
|
1335
|
-
declare function BulkActionBar({ count, actions, onClear, emptyHint, placement: _placement, compactSummary: _compactSummary, trailing: _trailing, unit, summary, idleContent, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
|
|
1417
|
+
declare function BulkActionBar({ count, actions, onClear, emptyHint, placement: _placement, compactSummary: _compactSummary, trailing: _trailing, unit, summary, idleContent, shortcut, shortcutScope, className, style, "aria-label": ariaLabelProp, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
|
|
1336
1418
|
|
|
1337
1419
|
interface ConfirmDialogProps {
|
|
1338
1420
|
open: boolean;
|
|
@@ -1975,27 +2057,48 @@ interface PageSizeSelectProps {
|
|
|
1975
2057
|
declare function PageSizeSelect({ value, onChange, options, label, unit, size, disabled, id, 'aria-label': ariaLabel, className, }: PageSizeSelectProps): react_jsx_runtime.JSX.Element;
|
|
1976
2058
|
|
|
1977
2059
|
declare const TABLE_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
|
|
1978
|
-
interface
|
|
2060
|
+
interface TablePaginationBaseProps {
|
|
1979
2061
|
pageSize: number;
|
|
1980
2062
|
/** The caller sends the list back to the first page when the page size changes. */
|
|
1981
2063
|
onPageSizeChange: (pageSize: number) => void;
|
|
1982
2064
|
/** Default `TABLE_PAGE_SIZE_OPTIONS` (20, 50, 100). */
|
|
1983
2065
|
pageSizeOptions?: readonly number[];
|
|
2066
|
+
/** Unit after the total — `명` for people. Default `개`. */
|
|
2067
|
+
unit?: string;
|
|
2068
|
+
/** While the next page loads, every page button is disabled. */
|
|
2069
|
+
loading?: boolean;
|
|
2070
|
+
'aria-label'?: string;
|
|
2071
|
+
}
|
|
2072
|
+
interface TablePaginationProps extends TablePaginationBaseProps {
|
|
1984
2073
|
/** First row number on this page, from 1. 0 when there are no rows. */
|
|
1985
2074
|
rangeStart: number;
|
|
1986
2075
|
/** Last row number on this page. */
|
|
1987
2076
|
rangeEnd: number;
|
|
1988
2077
|
/** Total count. Leave it out when the API has none: only the range shows. */
|
|
1989
2078
|
total?: number;
|
|
1990
|
-
/** Unit after the total — `명` for people. Default `개`. */
|
|
1991
|
-
unit?: string;
|
|
1992
2079
|
hasPrev: boolean;
|
|
1993
2080
|
hasNext: boolean;
|
|
1994
2081
|
onPrev: () => void;
|
|
1995
2082
|
onNext: () => void;
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
2083
|
+
page?: never;
|
|
2084
|
+
onPageChange?: never;
|
|
2085
|
+
}
|
|
2086
|
+
interface TablePaginationPagesProps extends TablePaginationBaseProps {
|
|
2087
|
+
/**
|
|
2088
|
+
* Numbered mode: current page, from 1. With `onPageChange` it draws `« ‹ 1 2 3 … › »`
|
|
2089
|
+
* instead of ◀ ▶. The page count and the range come from `total` and `pageSize`.
|
|
2090
|
+
*/
|
|
2091
|
+
page: number;
|
|
2092
|
+
/** Called with the page to show, from 1. */
|
|
2093
|
+
onPageChange: (page: number) => void;
|
|
2094
|
+
/** Total count. Numbered mode needs it for the page count. */
|
|
2095
|
+
total: number;
|
|
2096
|
+
rangeStart?: never;
|
|
2097
|
+
rangeEnd?: never;
|
|
2098
|
+
hasPrev?: never;
|
|
2099
|
+
hasNext?: never;
|
|
2100
|
+
onPrev?: never;
|
|
2101
|
+
onNext?: never;
|
|
1999
2102
|
}
|
|
2000
2103
|
type TablePaginationVisibility = Pick<TablePaginationProps, 'rangeEnd' | 'total' | 'hasPrev' | 'hasNext' | 'pageSizeOptions'>;
|
|
2001
2104
|
/**
|
|
@@ -2008,8 +2111,13 @@ declare function shouldHideTablePagination({ rangeEnd, total, hasPrev, hasNext,
|
|
|
2008
2111
|
* and ◀ ▶ on the right. Put it in `DataTable`'s `footer`, which draws the line above it.
|
|
2009
2112
|
* Below 1024px the `페이지당` label hides (the select keeps its name), and below 400px of
|
|
2010
2113
|
* panel width the total hides. Both are CSS, so nothing flashes on hydration or paging.
|
|
2114
|
+
*
|
|
2115
|
+
* With `page` and `onPageChange` it is numbered: page size, then `« ‹ 1 2 3 … › »` in the
|
|
2116
|
+
* middle of the panel, then the range on the right. Below 800px of panel width it wraps to
|
|
2117
|
+
* two lines (page size and range, then the buttons) and the numbers drop to five slots;
|
|
2118
|
+
* below 320px the « » buttons hide too (1 and the last page stay as numbers).
|
|
2011
2119
|
*/
|
|
2012
|
-
declare function TablePagination(
|
|
2120
|
+
declare function TablePagination(props: TablePaginationProps | TablePaginationPagesProps): react_jsx_runtime.JSX.Element | null;
|
|
2013
2121
|
|
|
2014
2122
|
declare const modeToggleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
2015
2123
|
declare const modeToggleItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
@@ -2027,7 +2135,7 @@ interface ModeToggleProps<T extends string> extends Omit<React.HTMLAttributes<HT
|
|
|
2027
2135
|
onChange: (value: T) => void;
|
|
2028
2136
|
itemClassName?: string;
|
|
2029
2137
|
}
|
|
2030
|
-
declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...
|
|
2138
|
+
declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
|
|
2031
2139
|
|
|
2032
2140
|
declare const actionFooterVariants: (props?: ({
|
|
2033
2141
|
position?: "fixed" | "static" | "sticky" | null | undefined;
|
|
@@ -2250,6 +2358,7 @@ type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>[
|
|
|
2250
2358
|
type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
|
|
2251
2359
|
type RadioGroupDensity = NonNullable<VariantProps<typeof radioVariants>["density"]>;
|
|
2252
2360
|
type RadioGroupOrientation = NonNullable<VariantProps<typeof radioGroupVariants>["orientation"]>;
|
|
2361
|
+
type RadioGroupMarker = "none" | "number";
|
|
2253
2362
|
interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Root>, "children" | "orientation">, Omit<VariantProps<typeof radioGroupVariants>, "appearance" | "orientation"> {
|
|
2254
2363
|
children: React.ReactNode;
|
|
2255
2364
|
orientation?: RadioGroupOrientation;
|
|
@@ -2257,10 +2366,23 @@ interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Rad
|
|
|
2257
2366
|
columns?: RadioGroupColumns;
|
|
2258
2367
|
density?: RadioGroupDensity;
|
|
2259
2368
|
required?: boolean;
|
|
2369
|
+
/**
|
|
2370
|
+
* What goes before each option's label.
|
|
2371
|
+
* - `"none"` (default): the radio circle.
|
|
2372
|
+
* - `"number"`: a number circle counted from 1 in its place, filled when selected. The group
|
|
2373
|
+
* counts the Radios among its children, through Fragments and DOM elements; a Radio a
|
|
2374
|
+
* component renders takes `number`. The accessible name starts with the number ("3번 …").
|
|
2375
|
+
*/
|
|
2376
|
+
marker?: RadioGroupMarker;
|
|
2260
2377
|
}
|
|
2261
2378
|
interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup$1.Item>, "children"> {
|
|
2262
2379
|
children: React.ReactNode;
|
|
2263
2380
|
description?: React.ReactNode;
|
|
2381
|
+
/**
|
|
2382
|
+
* The option's number under the group's `marker="number"`; it wins over the group's count. Give
|
|
2383
|
+
* it to a Radio a component renders, which the group cannot count.
|
|
2384
|
+
*/
|
|
2385
|
+
number?: number;
|
|
2264
2386
|
}
|
|
2265
2387
|
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
2266
2388
|
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -2388,4 +2510,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
|
|
|
2388
2510
|
}
|
|
2389
2511
|
declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
|
|
2390
2512
|
|
|
2391
|
-
export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogListFit, type DialogListHeight, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
|
|
2513
|
+
export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertMarker, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DatePicker, type DatePickerBaseProps, type DatePickerGranularity, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSize, type DateRangeValue, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogListFit, type DialogListHeight, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarAppliedFilter, type FilterToolbarCollapseBelow, type FilterToolbarLayout, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupMarker, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationPagesProps, type TablePaginationProps, type TablePaginationVisibility, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
|