@olundot/ui 0.21.2 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @olundot/ui
 
+## 0.22.0
+
+### Minor Changes
+
+- 7bb0419: `BulkActionBar`에 고른 항목이 있으면 Ctrl+Period로 목록과 카드 사이를 오가고, 카드 안에 키보드 포커스가 있으면 작업 줄 왼쪽에 목록으로 돌아가는 버튼이 보인다. Mac은 Control+Period다. 작업 줄은 줄을 바꾸지 않고, 넘치면 끝 작업부터 더보기 메뉴로 옮긴다.
+
+  - 목록에서 누르면 첫 번째 켜진 작업 버튼으로, 카드에서 누르면 마지막으로 포커스가 있던 행으로 간다. 그 행이 없으면 같은 순번의 행, 그다음 목록으로 간다. 카드에 포커스가 있을 때 카드가 사라져도 같은 규칙으로 돌아간다.
+  - 입력란, 편집 가능한 칸, 글자 조합 중에는 동작하지 않는다.
+  - 이동 버튼 라벨은 「목록으로」이고 누르면 목록으로 돌아간다. 라벨 뒤에 키 표시 `Ctrl` `.`(Mac `⌃` `.`)가 붙고, 버튼에 `aria-keyshortcuts="Control+."`가 붙는다. 카드 안 포커스가 `:focus-visible`이 아니고 버튼 자신에도 없으면 건너뛰기 링크처럼 시각적으로만 숨어 이름과 Tab 순서는 남는다. 보일 때는 늘 라벨과 키 표시를 함께 보이고, 그만큼 작업이 더 접힐 수 있다. 카드에서 연 더보기 메뉴, 확인 창, 다이얼로그가 떠 있는 동안, 그리고 포인터를 누르고 있는 동안에는 보이던 상태를 바꾸지 않는다. 터치 전용 기기에서는 숨는다.
+  - 단축키 범위는 가장 가까운 `DataLayout` 영역, 없으면 카드의 부모다. 새 prop `shortcutScope`로 범위를 바꾸고, `shortcut={false}`로 단축키와 이동 버튼을 함께 끈다.
+  - DataTable 밖 목록은 행 요소에 `data-row-id`를 달아야 돌아갈 행을 기억한다.
+  - 카드는 이름 있는 영역(`section`)이 되고 안쪽 `role="toolbar"`와 이름을 함께 쓴다. `aria-label`은 둘에 같이 붙는다. `getByRole("toolbar", { name })`는 그대로 찾는다.
+  - 접힌 작업은 메뉴에서 라벨, 아이콘, 위험 색, 비활성을 그대로 가진다. 비활성 작업의 `title`은 메뉴에서 라벨 아래 사유로, 켜진 작업의 `title`은 드롭다운 항목의 툴팁과 아래쪽 시트 메뉴의 라벨 아래 줄로 보인다. 노드 라벨은 메뉴에서 그 글자로 보이고, 라벨 글자가 바뀌면 메뉴도 따라 바뀐다.
+  - 포커스가 있던 작업이 접히면 더보기 버튼으로, 다시 펼쳐지면 그 작업으로 포커스가 간다. 열린 더보기 메뉴 항목에 포커스가 있을 때 펼쳐지면 메뉴가 닫히고 그 항목의 작업으로 간다.
+  - `ActionMenuItem`에 `title`이 생긴다. 드롭다운 명령 행의 브라우저 툴팁이고 메뉴 시트에는 붙지 않는다.
+  - 단축키는 소비자의 React `onKeyDown`이 먼저 받는다. 거기서 `preventDefault()`하면 이동하지 않는다.
+  - 서버 렌더와 하이드레이션 전에는 작업 줄이 전처럼 줄을 바꾸고, 클라이언트에서 폭을 잰 뒤 한 줄로 접는다.
+  - `idleContent`, `emptyHint`, `summary`, `unit`, `--olun-bulk-bar-offset`은 그대로다.
+
+### Patch Changes
+
+- 6fba6b6: `ErrorState`에 `message`로 `null`이나 빈 문자열을 주면 빈 메시지 문단을 그리지 않습니다. `message`를 생략하면 기본 문구가 나오는 것은 그대로입니다.
+- 6fba6b6: `FileUploadZone`을 `FormField` 안에 두면 FormField 라벨이 숨은 파일 입력을 가리킵니다. 업로드 영역과 숨은 파일 입력에는 `aria-describedby`로 직접 준 값, `error` 문구, FormField의 안내 문구와 오류가 차례로 이어집니다. `error`를 주면 숨은 파일 입력에 `aria-invalid`도 켭니다. FormField 밖에서는 그대로입니다.
+- 6fba6b6: `IconButton`의 `tooltip`이 iframe 안에서도 Tab으로 포커스를 옮기면 열립니다. 바깥 문서에서 Tab으로 iframe에 들어올 때도 열립니다. Tab 감지 리스너를 버튼이 속한 문서와 그 바깥의 같은 출처 문서에 겁니다.
+- 6fba6b6: `FormField` 함수 자식에서 `SearchField`에 `controlProps`를 펼쳐도 `description`, `message`, `state`가 `<input>` 속성으로 새어 나가지 않습니다.
+- Updated dependencies [6fba6b6]
+  - @olundot/tokens@0.19.0
+
 ## 0.21.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -66,7 +66,7 @@ type GhostDefaultActionStyle = {
 declare const buttonCva: (props?: ({
     appearance?: "filled" | "outline" | "ghost" | "link" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -101,13 +101,13 @@ type CopyButtonProps = Omit<ButtonProps, 'appearance' | 'children' | 'loading' |
 declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -155,11 +155,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -930,6 +930,8 @@ interface ActionMenuItem {
     icon?: React.ComponentType<ActionMenuIconProps>;
     /** Secondary line under the label (menu sheet only). */
     description?: string;
+    /** Native tooltip on the dropdown item (not on a `disabledReason` item, not in the menu sheet). */
+    title?: string;
     /** Danger color (DropdownMenuItem `variant="destructive"`, the sheet row's error color). */
     destructive?: boolean;
     /** Not focusable and runs nothing. */
@@ -1307,6 +1309,16 @@ interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
+    /**
+     * `false` drops the Ctrl+. (Mac Control+.) shortcut between the list and the card, and the
+     * button that shows it.
+     */
+    shortcut?: boolean;
+    /**
+     * Where the shortcut listens and which rows it returns to. Defaults to the nearest DataLayout
+     * region (`[data-slot="data-layout-region"]`), else the card's parent.
+     */
+    shortcutScope?: React.RefObject<HTMLElement | null>;
 }
 interface BulkActionBarProps extends BulkActionBarBaseProps {
     /** `floating` (default) — card stuck to the bottom of the list. */
@@ -1317,11 +1329,16 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
  *
  * placement="floating" (default) is a card at the bottom of the list: the count
  * with the clear (✕) button on its right, `summary` under it at full width, then
- * the actions as outline sm Buttons aligned right, wrapping onto more lines when
- * they do not fit. `variant: "destructive"` is outline danger. The card is
+ * one line of outline sm Buttons: the move button back to the list at the left (shown
+ * only while keyboard focus is in the card), the actions at the right. A line that does
+ * not fit folds actions into a ⋯ menu from the end. `variant: "destructive"` is outline danger. The card is
  * min(360px, its slot − 32px) wide; while it is near the viewport bottom the document root
  * carries `--olun-bulk-bar-offset` (viewport bottom → card top) for toasts to clear it.
- * DOM order stays count → actions → ✕.
+ * The card is a named region around a toolbar; DOM order is count → move → actions → ⋯ → ✕.
+ *
+ * While count ≥ 1, Ctrl+. (Mac Control+.) in its scope moves focus from the list to the
+ * first action and from the card back to the last focused row; the move button goes back
+ * too. `shortcut={false}` drops both, `shortcutScope` sets the scope.
  *
  * `unit` sets the count unit, `idleContent` shows while nothing is selected.
  *
@@ -1332,7 +1349,7 @@ interface BulkActionBarProps extends BulkActionBarBaseProps {
  *     { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
  *   ]} />
  */
-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;
+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;
 
 interface ConfirmDialogProps {
     open: boolean;
@@ -1691,7 +1708,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "md" | "sm" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1704,13 +1721,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1724,7 +1741,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1736,7 +1753,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1762,7 +1779,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1782,7 +1799,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1815,7 +1832,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1824,7 +1841,7 @@ type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonVariantsOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
 declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
-    tone?: "error" | "success" | "info" | null | undefined;
+    tone?: "error" | "info" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
@@ -2061,7 +2078,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
+    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -2115,19 +2132,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -2154,10 +2171,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2181,7 +2198,7 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "md" | "sm" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
     appearance?: "card" | "plain" | null | undefined;