Skip to content

Commit 54e62c2

Browse files
sadmann7sadmann7
committed
chore: bump styles
1 parent c005004 commit 54e62c2

10 files changed

+35
-47
lines changed

‎src/components/data-grid/data-grid-cell-wrapper.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,21 +146,21 @@ export function DataGridCellWrapper<TData>({
146146
data-selected={isSelected ? "" : undefined}
147147
tabIndex={isFocused && !isEditing ? 0 : -1}
148148
className={cn(
149-
"size-full px-2 py-1.5 text-left text-sm outline-none has-[[data-slot=checkbox]]:pt-2.5",
149+
"size-full px-2 py-1.5 text-left text-sm outline-none has-data-[slot=checkbox]:pt-2.5",
150150
{
151151
"ring-1 ring-ring ring-inset": isFocused,
152152
"bg-yellow-100 dark:bg-yellow-900/30":
153153
isSearchMatch && !isActiveSearchMatch,
154154
"bg-orange-200 dark:bg-orange-900/50": isActiveSearchMatch,
155155
"bg-primary/10": isSelected && !isEditing,
156156
"cursor-default": !isEditing,
157-
"[&_[data-slot=grid-cell-content]]:line-clamp-1":
157+
"**:data-[slot=grid-cell-content]:line-clamp-1":
158158
!isEditing && rowHeight === "short",
159-
"[&_[data-slot=grid-cell-content]]:line-clamp-2":
159+
"**:data-[slot=grid-cell-content]:line-clamp-2":
160160
!isEditing && rowHeight === "medium",
161-
"[&_[data-slot=grid-cell-content]]:line-clamp-3":
161+
"**:data-[slot=grid-cell-content]:line-clamp-3":
162162
!isEditing && rowHeight === "tall",
163-
"[&_[data-slot=grid-cell-content]]:line-clamp-4":
163+
"**:data-[slot=grid-cell-content]:line-clamp-4":
164164
!isEditing && rowHeight === "extra-tall",
165165
},
166166
className,

‎src/components/data-grid/data-grid-render-count.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function DataGridRenderCount({
2626
return (
2727
<div
2828
className={cn(
29-
"fixed right-4 bottom-4 z-50 rounded-md border bg-background/95 px-3 py-2 font-mono text-xs shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60",
29+
"fixed right-4 bottom-4 z-50 rounded-md border bg-background/95 px-3 py-2 font-mono text-xs shadow-lg backdrop-blur supports-backdrop-filter:bg-background/60",
3030
className,
3131
)}
3232
{...props}

‎src/components/data-grid/data-grid-sort-menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ export function DataGridSortMenu<TData>({
191191
<PopoverContent
192192
aria-labelledby={labelId}
193193
aria-describedby={descriptionId}
194-
className="flex w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] flex-col gap-3.5 p-4 sm:min-w-[380px]"
194+
className="flex w-full max-w-(--radix-popover-content-available-width) flex-col gap-3.5 p-4 sm:min-w-[380px]"
195195
{...props}
196196
>
197197
<div className="flex flex-col gap-1">
@@ -331,7 +331,7 @@ function DataTableSortItem({
331331
</PopoverTrigger>
332332
<PopoverContent
333333
id={fieldListboxId}
334-
className="w-[var(--radix-popover-trigger-width)] origin-[var(--radix-popover-content-transform-origin)] p-0"
334+
className="w-(--radix-popover-trigger-width) p-0"
335335
>
336336
<Command>
337337
<CommandInput placeholder="Search fields..." />
@@ -362,13 +362,13 @@ function DataTableSortItem({
362362
>
363363
<SelectTrigger
364364
aria-controls={directionListboxId}
365-
className="h-8 w-24 rounded [&[data-size]]:h-8"
365+
className="h-8 w-24 rounded data-size:h-8"
366366
>
367367
<SelectValue />
368368
</SelectTrigger>
369369
<SelectContent
370370
id={directionListboxId}
371-
className="min-w-[var(--radix-select-trigger-width)] origin-[var(--radix-select-content-transform-origin)]"
371+
className="min-w-(--radix-select-trigger-width)"
372372
>
373373
{SORT_ORDERS.map((order) => (
374374
<SelectItem key={order.value} value={order.value}>

‎src/components/data-table/data-table-faceted-filter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export function DataTableFacetedFilter<TData, TValue>({
133133
)}
134134
</Button>
135135
</PopoverTrigger>
136-
<PopoverContent className="w-[12.5rem] p-0" align="start">
136+
<PopoverContent className="w-50 p-0" align="start">
137137
<Command>
138138
<CommandInput placeholder={title} />
139139
<CommandList className="max-h-full">

‎src/components/data-table/data-table-filter-list.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export function DataTableFilterList<TData>({
242242
<PopoverContent
243243
aria-describedby={descriptionId}
244244
aria-labelledby={labelId}
245-
className="flex w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] flex-col gap-3.5 p-4 sm:min-w-[380px]"
245+
className="flex w-full max-w-(--radix-popover-content-available-width) flex-col gap-3.5 p-4 sm:min-w-[380px]"
246246
{...props}
247247
>
248248
<div className="flex flex-col gap-1">
@@ -402,7 +402,7 @@ function DataTableFilterItem<TData>({
402402
<SelectTrigger
403403
aria-label="Select join operator"
404404
aria-controls={joinOperatorListboxId}
405-
className="h-8 rounded lowercase [&[data-size]]:h-8"
405+
className="h-8 rounded lowercase data-size:h-8"
406406
>
407407
<SelectValue placeholder={joinOperator} />
408408
</SelectTrigger>
@@ -442,7 +442,7 @@ function DataTableFilterItem<TData>({
442442
<PopoverContent
443443
id={fieldListboxId}
444444
align="start"
445-
className="w-40 origin-[var(--radix-popover-content-transform-origin)] p-0"
445+
className="w-40 p-0"
446446
>
447447
<Command>
448448
<CommandInput placeholder="Search fields..." />
@@ -498,16 +498,13 @@ function DataTableFilterItem<TData>({
498498
>
499499
<SelectTrigger
500500
aria-controls={operatorListboxId}
501-
className="h-8 w-32 rounded lowercase [&[data-size]]:h-8"
501+
className="h-8 w-32 rounded lowercase data-size:h-8"
502502
>
503503
<div className="truncate">
504504
<SelectValue placeholder={filter.operator} />
505505
</div>
506506
</SelectTrigger>
507-
<SelectContent
508-
id={operatorListboxId}
509-
className="origin-[var(--radix-select-content-transform-origin)]"
510-
>
507+
<SelectContent id={operatorListboxId}>
511508
{filterOperators.map((operator) => (
512509
<SelectItem
513510
key={operator.value}
@@ -645,7 +642,7 @@ function onFilterInputRender<TData>({
645642
id={inputId}
646643
aria-controls={inputListboxId}
647644
aria-label={`${columnMeta?.label} boolean filter`}
648-
className="h-8 w-full rounded [&[data-size]]:h-8"
645+
className="h-8 w-full rounded data-size:h-8"
649646
>
650647
<SelectValue placeholder={filter.value ? "True" : "False"} />
651648
</SelectTrigger>
@@ -700,10 +697,7 @@ function onFilterInputRender<TData>({
700697
/>
701698
</Button>
702699
</FacetedTrigger>
703-
<FacetedContent
704-
id={inputListboxId}
705-
className="w-[200px] origin-[var(--radix-popover-content-transform-origin)]"
706-
>
700+
<FacetedContent id={inputListboxId} className="w-[200px]">
707701
<FacetedInput
708702
aria-label={`Search ${columnMeta?.label} options`}
709703
placeholder={columnMeta?.placeholder ?? "Search options..."}
@@ -767,7 +761,7 @@ function onFilterInputRender<TData>({
767761
<PopoverContent
768762
id={inputListboxId}
769763
align="start"
770-
className="w-auto origin-[var(--radix-popover-content-transform-origin)] p-0"
764+
className="w-auto p-0"
771765
>
772766
{filter.operator === "isBetween" ? (
773767
<Calendar

‎src/components/data-table/data-table-filter-menu.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export function DataTableFilterMenu<TData>({
259259
</PopoverTrigger>
260260
<PopoverContent
261261
align={align}
262-
className="w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] p-0"
262+
className="w-full max-w-(--radix-popover-content-available-width) p-0"
263263
{...props}
264264
>
265265
<Command loop className="[&_[cmdk-input-wrapper]_svg]:hidden">
@@ -403,10 +403,7 @@ function DataTableFilterItem<TData>({
403403
{columnMeta?.label ?? column.id}
404404
</Button>
405405
</PopoverTrigger>
406-
<PopoverContent
407-
align="start"
408-
className="w-48 origin-[var(--radix-popover-content-transform-origin)] p-0"
409-
>
406+
<PopoverContent align="start" className="w-48 p-0">
410407
<Command loop>
411408
<CommandInput placeholder="Search fields..." />
412409
<CommandList>
@@ -464,14 +461,11 @@ function DataTableFilterItem<TData>({
464461
>
465462
<SelectTrigger
466463
aria-controls={operatorListboxId}
467-
className="h-8 rounded-none border-r-0 px-2.5 lowercase [&[data-size]]:h-8 [&_svg]:hidden"
464+
className="h-8 rounded-none border-r-0 px-2.5 lowercase data-size:h-8 [&_svg]:hidden"
468465
>
469466
<SelectValue placeholder={filter.operator} />
470467
</SelectTrigger>
471-
<SelectContent
472-
id={operatorListboxId}
473-
className="origin-[var(--radix-select-content-transform-origin)]"
474-
>
468+
<SelectContent id={operatorListboxId}>
475469
{filterOperators.map((operator) => (
476470
<SelectItem
477471
key={operator.value}
@@ -639,7 +633,7 @@ function onFilterInputRender<TData>({
639633
column={column}
640634
inputId={inputId}
641635
onFilterUpdate={onFilterUpdate}
642-
className="size-full max-w-28 gap-0 [&_[data-slot='range-min']]:border-r-0 [&_input]:rounded-none [&_input]:px-1.5"
636+
className="size-full max-w-28 gap-0 **:data-[slot='range-min']:border-r-0 [&_input]:rounded-none [&_input]:px-1.5"
643637
/>
644638
);
645639
}
@@ -744,7 +738,7 @@ function onFilterInputRender<TData>({
744738
<PopoverContent
745739
id={inputListboxId}
746740
align="start"
747-
className="w-48 origin-[var(--radix-popover-content-transform-origin)] p-0"
741+
className="w-48 p-0"
748742
>
749743
<Command>
750744
<CommandInput placeholder="Search options..." />
@@ -824,7 +818,7 @@ function onFilterInputRender<TData>({
824818
<PopoverContent
825819
id={inputListboxId}
826820
align="start"
827-
className="w-auto origin-[var(--radix-popover-content-transform-origin)] p-0"
821+
className="w-auto p-0"
828822
>
829823
{filter.operator === "isBetween" ? (
830824
<Calendar

‎src/components/data-table/data-table-pagination.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function DataTablePagination<TData>({
4848
table.setPageSize(Number(value));
4949
}}
5050
>
51-
<SelectTrigger className="h-8 w-[4.5rem] [&[data-size]]:h-8">
51+
<SelectTrigger className="h-8 w-18 data-size:h-8">
5252
<SelectValue placeholder={table.getState().pagination.pageSize} />
5353
</SelectTrigger>
5454
<SelectContent side="top">

‎src/components/data-table/data-table-skeleton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ export function DataTableSkeleton({
4444
<div className="flex flex-1 items-center gap-2">
4545
{filterCount > 0
4646
? Array.from({ length: filterCount }).map((_, i) => (
47-
<Skeleton key={i} className="h-7 w-[4.5rem] border-dashed" />
47+
<Skeleton key={i} className="h-7 w-18 border-dashed" />
4848
))
4949
: null}
5050
</div>
5151
{withViewOptions ? (
52-
<Skeleton className="ml-auto hidden h-7 w-[4.5rem] lg:flex" />
52+
<Skeleton className="ml-auto hidden h-7 w-18 lg:flex" />
5353
) : null}
5454
</div>
5555
<div className="rounded-md border">
@@ -96,7 +96,7 @@ export function DataTableSkeleton({
9696
<div className="flex items-center gap-4 sm:gap-6 lg:gap-8">
9797
<div className="flex items-center gap-2">
9898
<Skeleton className="h-7 w-24" />
99-
<Skeleton className="h-7 w-[4.5rem]" />
99+
<Skeleton className="h-7 w-18" />
100100
</div>
101101
<div className="flex items-center justify-center font-medium text-sm">
102102
<Skeleton className="h-7 w-20" />

‎src/components/data-table/data-table-sort-list.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export function DataTableSortList<TData>({
187187
<PopoverContent
188188
aria-labelledby={labelId}
189189
aria-describedby={descriptionId}
190-
className="flex w-full max-w-[var(--radix-popover-content-available-width)] origin-[var(--radix-popover-content-transform-origin)] flex-col gap-3.5 p-4 sm:min-w-[380px]"
190+
className="flex w-full max-w-(--radix-popover-content-available-width) flex-col gap-3.5 p-4 sm:min-w-[380px]"
191191
{...props}
192192
>
193193
<div className="flex flex-col gap-1">
@@ -327,7 +327,7 @@ function DataTableSortItem({
327327
</PopoverTrigger>
328328
<PopoverContent
329329
id={fieldListboxId}
330-
className="w-[var(--radix-popover-trigger-width)] origin-[var(--radix-popover-content-transform-origin)] p-0"
330+
className="w-(--radix-popover-trigger-width) p-0"
331331
>
332332
<Command>
333333
<CommandInput placeholder="Search fields..." />
@@ -358,13 +358,13 @@ function DataTableSortItem({
358358
>
359359
<SelectTrigger
360360
aria-controls={directionListboxId}
361-
className="h-8 w-24 rounded [&[data-size]]:h-8"
361+
className="h-8 w-24 rounded data-size:h-8"
362362
>
363363
<SelectValue />
364364
</SelectTrigger>
365365
<SelectContent
366366
id={directionListboxId}
367-
className="min-w-[var(--radix-select-trigger-width)] origin-[var(--radix-select-content-transform-origin)]"
367+
className="min-w-(--radix-select-trigger-width)"
368368
>
369369
{dataTableConfig.sortOrders.map((order) => (
370370
<SelectItem key={order.value} value={order.value}>

‎src/hooks/use-data-grid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const VIEWPORT_OFFSET = 1;
3030
const MIN_COLUMN_SIZE = 60;
3131
const MAX_COLUMN_SIZE = 800;
3232
const SEARCH_SHORTCUT_KEY = "f";
33-
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"] as const;
33+
const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
3434

3535
const useIsomorphicLayoutEffect =
3636
typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

0 commit comments

Comments
 (0)