@olundot/ui 0.17.0 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @olundot/ui
 
+## 0.17.1
+
+### Patch Changes
+
+- 6d9f93c: 연속 로드 목록(#1746) 준비물과 버그 수정. 새 prop은 모두 선택 사항이라, 주지 않으면 기존 화면의 마크업과 동작이 0.17.0과 같습니다. 기존 화면에서 달라지는 것은 아래 "수정" 항목뿐입니다.
+
+  - `BulkActionBar` `trailing`: 선택 해제(✕) 뒤에 붙는 자리입니다. 편집 모드의 [완료]처럼 선택과 별개인 컨트롤을 둡니다. inline 띠와 floating pill 모두 ✕ 바로 뒤이고, 선택 전 상태 줄(`idleContent`)에서는 오른쪽 끝입니다. 상태 줄에 `trailing`이 있으면 `role="status"`는 개수 텍스트에만 붙고 버튼은 라이브 영역 밖에 둡니다(불러올 때마다 개수만 다시 읽힙니다).
+  - `DataTable` `virtual.onRangeChange({ start, end })`: 보이는 행 범위(overscan 제외, `end` 제외)를 범위나 불러온 행 수가 바뀔 때 알립니다. 빠르게 스크롤해 지나친 행은 보고되지 않지만 `end`는 도착한 위치를 그대로 반영하므로, 미리 요청은 `end >= data.length - 30` 같은 문턱 비교로 씁니다.
+  - `DataTable` `virtual.handleRef` → `scrollToIndex(index)`: 그 행을 스크롤 컨테이너 맨 위(데스크톱은 sticky 열 머리 바로 아래)로 옮깁니다. 새로고침 복원용입니다. `DataTableVirtualRange`·`DataTableVirtualHandle` 타입을 export합니다.
+  - `DataTable` `selectionUnit`(기본 "개")·`announceSelection`(기본 `true`): sr-only 선택 안내의 단위를 바꾸거나 끕니다. inline `BulkActionBar`가 개수를 이미 읽어 줄 때, 또는 불러오지 않은 행까지 선택할 때(내장 안내는 불러온 행만 셉니다) 끕니다.
+  - 수정 — `BulkActionBar` inline `summary` 칸: 긴 문구를 자르는 칸이 28px 높이·좌우 3px 여백이라, 좁은 띠에서 `compactSummary`로 둔 `IconButton`의 44px 터치 영역이 위아래·왼쪽으로 잘렸습니다. 칸을 터치 영역 높이(44px)로 두고 왼쪽 여백을 8px로 넓혔습니다. 띠 높이 40px, 텍스트 잘림, `compactSummary` 전환은 그대로입니다.
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
+    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -54,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -70,7 +70,7 @@ declare const inputVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | 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"]>;
@@ -119,11 +119,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;
@@ -166,7 +166,7 @@ declare const textareaVariants: (props?: ({
     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. */
@@ -221,7 +221,7 @@ declare const selectVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | 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"]>;
@@ -706,9 +706,30 @@ interface DataTableLinkProps {
     children?: React.ReactNode;
     'data-slot'?: string;
 }
+/** Visible rows as `data` indexes: `start` inclusive, `end` exclusive (like `slice`). */
+interface DataTableVirtualRange {
+    start: number;
+    end: number;
+}
+interface DataTableVirtualHandle {
+    /**
+     * Scrolls the list's scroll container so row `index` (clamped to the loaded rows)
+     * sits at its top — under the sticky header on desktop. For restoring a position.
+     */
+    scrollToIndex: (index: number) => void;
+}
 interface DataTableVirtualOptions {
     /** Rows rendered past each viewport edge. Default 8. */
     overscan?: number;
+    /**
+     * Called with the rows actually visible (not the overscan) whenever that range or
+     * the number of loaded rows changes. Scrolling is sampled once per frame, so a fast
+     * scroll can skip rows — compare with a threshold (`end >= data.length - 30`), not
+     * equality with one row.
+     */
+    onRangeChange?: (range: DataTableVirtualRange) => void;
+    /** Receives `{ scrollToIndex }`. */
+    handleRef?: React.Ref<DataTableVirtualHandle>;
 }
 interface DataTableSort {
     key: string;
@@ -721,6 +742,15 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     selectable?: boolean;
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
+    /** Unit in the screen-reader selection message — `12명 선택됨`. Defaults to `개`. */
+    selectionUnit?: string;
+    /**
+     * `false` drops the built-in screen-reader selection message — when a
+     * `BulkActionBar placement="inline"` already announces the count (it is a status
+     * region), or when the real selection includes rows that are not loaded (the
+     * built-in message only counts loaded rows). Default `true`.
+     */
+    announceSelection?: boolean;
     activeRowId?: string;
     onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
     sortBy?: DataTableSort;
@@ -836,6 +866,12 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
+    /**
+     * After the clear (✕) button — e.g. an edit-mode "완료" button. On the idle line it
+     * sits at the right end, outside the `role="status"` region, so it is not re-read
+     * whenever `idleContent` changes. Same spot in both placements.
+     */
+    trailing?: React.ReactNode;
 }
 /**
  * OLUN BulkActionBar — multi-select table/list actions.
@@ -843,7 +879,8 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
  * placement="floating" (default) is the bottom pill; placement="inline" is a
  * top-sticky band that replaces the status line under the toolbar, so it comes
  * before the rows in tab order. `unit` sets the count unit, `summary` holds a
- * suggestion next to the count, `idleContent` shows while nothing is selected.
+ * suggestion next to the count, `idleContent` shows while nothing is selected,
+ * `trailing` follows the clear button (right end of the idle line).
  * Inline, the band and the idle line are one 40px line: a long `summary` is
  * clipped or swapped for `compactSummary`, never wrapped.
  *
@@ -859,7 +896,7 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
  *     { key: "del", label: "삭제", variant: "destructive", onClick: confirmDelete },
  *   ]} />
  */
-declare function BulkActionBar({ count, actions, onClear, emptyHint, placement, unit, summary, compactSummary, idleContent, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
+declare function BulkActionBar({ count, actions, onClear, emptyHint, placement, unit, summary, compactSummary, idleContent, trailing, className, style, ...props }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 declare const Dialog: React.FC<Dialog$1.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1092,12 +1129,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | 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" | "danger" | "success" | "warning" | "neutral" | "muted" | 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"]>;
@@ -1336,7 +1373,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']>;
@@ -1390,19 +1427,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> {
@@ -1459,11 +1496,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1488,7 +1525,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1509,16 +1546,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -1655,4 +1692,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertEmphasis, 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, type ButtonVariant, 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 DataTableProps, type DataTableSort, type DataTableVirtualOptions, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, 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, 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, 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, type SurfaceLevel, Switch, type SwitchProps, type TabItem, 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, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertEmphasis, 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, type ButtonVariant, 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 DataTableProps, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, 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, 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, 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, type SurfaceLevel, Switch, type SwitchProps, type TabItem, 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, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };

package/dist/index.js

@@ -5564,11 +5564,22 @@ var useIsomorphicLayoutEffect = typeof window === "undefined" ? React27.useEffec
 var VIRTUAL_DEFAULT_OVERSCAN = 8;
 var VIRTUAL_INITIAL_ROWS = 24;
 var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
+function getScrollParent(node) {
+  for (let el = node.parentElement; el && el !== document.body; el = el.parentElement) {
+    const { overflowY } = window.getComputedStyle(el);
+    if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+  }
+  return null;
+}
 function useVirtualWindow({
   enabled,
   count,
   overscan,
+  onRangeChange,
   desktopRef,
+  headerRef,
   desktopListRef,
   mobileListRef
 }) {
@@ -5580,6 +5591,8 @@ function useVirtualWindow({
   });
   const measuredSize = React27.useRef({ desktop: 0, mobile: 0 });
   const update = React27.useRef(() => void 0);
+  const reported = React27.useRef("");
+  const latest = React27.useRef({ count, layout: "desktop" });
   update.current = () => {
     if (!enabled) {
       return;
@@ -5593,6 +5606,7 @@ function useVirtualWindow({
       measuredSize.current[layout] = itemHeight;
     }
     const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+    latest.current = { count, layout };
     let start = 0;
     let end = Math.min(count, VIRTUAL_INITIAL_ROWS);
     if (list) {
@@ -5600,6 +5614,23 @@ function useVirtualWindow({
       const viewport = window.innerHeight || document.documentElement.clientHeight;
       start = Math.min(count, Math.max(0, Math.floor(-top / size) - overscan));
       end = Math.min(count, Math.max(start, Math.ceil((viewport - top) / size) + overscan));
+      if (onRangeChange) {
+        const container = getScrollParent(list);
+        const bounds = container?.getBoundingClientRect();
+        let visibleTop = Math.max(0, bounds ? bounds.top : 0);
+        const visibleBottom = Math.min(viewport, bounds ? bounds.bottom : viewport);
+        const header = headerRef.current;
+        if (layout === "desktop" && header) {
+          visibleTop = Math.max(visibleTop, header.getBoundingClientRect().bottom);
+        }
+        const first = Math.min(count, Math.max(0, Math.floor((visibleTop - top) / size)));
+        const last = Math.min(count, Math.max(first, Math.ceil((visibleBottom - top) / size)));
+        const key = `${first}:${last}:${count}`;
+        if (reported.current !== key) {
+          reported.current = key;
+          onRangeChange({ start: first, end: last });
+        }
+      }
     }
     setWin(
       (prev) => prev.layout === layout && prev.start === start && prev.end === end && prev.size === size ? prev : { layout, start, end, size }
@@ -5630,7 +5661,34 @@ function useVirtualWindow({
       window.cancelAnimationFrame(frame);
     };
   }, [enabled]);
-  return win;
+  const scrollToIndex = React27.useCallback(
+    (index) => {
+      const { count: rowCount, layout } = latest.current;
+      const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
+      if (!list || rowCount === 0) {
+        return;
+      }
+      const row = Math.min(rowCount - 1, Math.max(0, Math.floor(index)));
+      const size = measuredSize.current[layout] || VIRTUAL_FALLBACK_SIZE[layout];
+      const container = getScrollParent(list);
+      let target = container ? container.getBoundingClientRect().top : 0;
+      const header = headerRef.current;
+      if (layout === "desktop" && header) {
+        const { position, top } = window.getComputedStyle(header);
+        if (position === "sticky") {
+          target += (Number.parseFloat(top) || 0) + header.getBoundingClientRect().height;
+        }
+      }
+      const delta = list.getBoundingClientRect().top + row * size - target;
+      if (container) {
+        container.scrollTop += delta;
+      } else {
+        window.scrollBy(0, delta);
+      }
+    },
+    [desktopListRef, headerRef, mobileListRef]
+  );
+  return { win, scrollToIndex };
 }
 function DataTableInner({
   className,
@@ -5642,6 +5700,8 @@ function DataTableInner({
   selectable = false,
   selectedIds,
   onSelectionChange,
+  selectionUnit = "\uAC1C",
+  announceSelection = true,
   activeRowId,
   onRowContextMenu,
   sortBy,
@@ -5659,16 +5719,20 @@ function DataTableInner({
   const virtualOptions = virtual ? virtual === true ? {} : virtual : null;
   const isVirtual = virtualOptions !== null;
   const desktopRef = React27.useRef(null);
+  const headerRef = React27.useRef(null);
   const desktopListRef = React27.useRef(null);
   const mobileListRef = React27.useRef(null);
-  const virtualWindow = useVirtualWindow({
+  const { win: virtualWindow, scrollToIndex } = useVirtualWindow({
     enabled: isVirtual,
     count: data.length,
     overscan: virtualOptions?.overscan ?? VIRTUAL_DEFAULT_OVERSCAN,
+    onRangeChange: virtualOptions?.onRangeChange,
     desktopRef,
+    headerRef,
     desktopListRef,
     mobileListRef
   });
+  React27.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const resolvedSelectedIds = selectedIds ?? /* @__PURE__ */ new Set();
   const rowIds = data.map((row) => getRowId(row, keyField));
   const selectedCount = rowIds.filter((id) => resolvedSelectedIds.has(id)).length;
@@ -5773,13 +5837,13 @@ function DataTableInner({
       ),
       ...props,
       children: [
-        selectable ? /* @__PURE__ */ jsx31(
+        selectable && announceSelection ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-selection-status",
             "aria-live": "polite",
             className: "sr-only",
-            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
+            children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}${selectionUnit} \uC120\uD0DD\uB428` : ""
           }
         ) : null,
         loading && data.length > 0 ? /* @__PURE__ */ jsx31(
@@ -5801,6 +5865,7 @@ function DataTableInner({
               /* @__PURE__ */ jsxs30(
                 "div",
                 {
+                  ref: headerRef,
                   "data-slot": "data-table-header",
                   role: "row",
                   className: cn(
@@ -6313,6 +6378,8 @@ function ClearButton({ onClear }) {
   );
 }
 var INLINE_HEIGHT = 40;
+var HIT_AREA = 44;
+var HIT_INSET = 8;
 var floatingStyle = {
   position: "sticky",
   bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
@@ -6392,16 +6459,62 @@ function BulkActionBar({
   summary,
   compactSummary,
   idleContent,
+  trailing,
   className,
   style,
   ...props
 }) {
   const inline = placement === "inline";
+  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx34(
+    "div",
+    {
+      "data-slot": "bulk-action-bar-trailing",
+      style: {
+        display: "flex",
+        flexShrink: 0,
+        alignItems: "center",
+        gap: "var(--space-2)"
+      },
+      children: trailing
+    }
+  ) : null;
   const [summaryElement, setSummaryElement] = React28.useState(null);
   const compact = useCompactSummary(
     summaryElement,
     inline && compactSummary !== void 0 && compactSummary !== null
   );
+  if (count === 0 && idleContent !== void 0 && trailingSlot) {
+    return /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        "data-slot": "bulk-action-bar",
+        "data-placement": placement,
+        "data-state": "idle",
+        className,
+        style: { ...idleLineStyle, overflow: "visible", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx34(
+            "div",
+            {
+              role: "status",
+              "data-slot": "bulk-action-bar-idle",
+              style: {
+                display: "flex",
+                flex: "1 1 auto",
+                minWidth: 0,
+                alignItems: "center",
+                columnGap: "var(--space-3)",
+                overflow: "hidden"
+              },
+              children: idleContent
+            }
+          ),
+          trailingSlot
+        ]
+      }
+    );
+  }
   if (count === 0 && idleContent !== void 0) {
     return /* @__PURE__ */ jsx34(
       "div",
@@ -6452,12 +6565,16 @@ function BulkActionBar({
         color: "var(--text-secondary)",
         ...inline ? (
           // inline-size containment: the summary never widens the band's parent. The
-          // slot is full-height with 3px side gutters so focus rings are not clipped.
+          // slot clips text, so it is as tall as an IconButton's hit area (overhanging
+          // the 40px band) and has that inset as its left gutter: a compact IconButton
+          // keeps its full 44px target. The right gutter stays 3px (focus ring) so
+          // clipped text keeps clear of the controls.
           {
             flex: "1 1 0",
-            alignSelf: "stretch",
-            margin: "0 -3px",
-            padding: "0 3px",
+            alignSelf: "center",
+            height: HIT_AREA,
+            margin: `0 -3px 0 -${HIT_INSET}px`,
+            padding: `0 3px 0 ${HIT_INSET}px`,
             overflow: "hidden",
             whiteSpace: "nowrap",
             contain: "inline-size"
@@ -6529,7 +6646,8 @@ function BulkActionBar({
                 /* @__PURE__ */ jsx34(ClearButton, { onClear })
               ]
             }
-          )
+          ),
+          trailingSlot
         ]
       }
     );
@@ -6554,7 +6672,8 @@ function BulkActionBar({
         count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx34(Divider, {}) : null,
         actionGroup,
         /* @__PURE__ */ jsx34(Divider, {}),
-        /* @__PURE__ */ jsx34(ClearButton, { onClear })
+        /* @__PURE__ */ jsx34(ClearButton, { onClear }),
+        trailingSlot
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [