@astryxdesign/core 0.1.1-canary.a514b99 → 0.1.1-canary.b6ade74
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/README.md +68 -0
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +4 -1
- package/dist/Banner/Banner.d.ts +7 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +9 -2
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +7 -1
- package/dist/HoverCard/HoverCard.d.ts +2 -2
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +18 -6
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +6 -3
- package/dist/Layer/useLayer.d.ts +13 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +7 -2
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +13 -3
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +13 -0
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +26 -8
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +30 -7
- package/dist/Table/index.d.ts +3 -1
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -0
- package/dist/Table/plugins/stickyColumns/index.d.ts +3 -0
- package/dist/Table/plugins/stickyColumns/index.d.ts.map +1 -0
- package/dist/Table/plugins/stickyColumns/index.js +3 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts +25 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -0
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +376 -0
- package/dist/Table/types.d.ts +90 -5
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +1 -1
- package/dist/astryx.css +11 -0
- package/dist/astryx.umd.js +147 -0
- package/dist/astryx.umd.js.map +7 -0
- package/package.json +6 -2
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -0
- package/src/Banner/Banner.test.tsx +16 -7
- package/src/Banner/Banner.tsx +9 -2
- package/src/EmptyState/EmptyState.test.tsx +4 -2
- package/src/EmptyState/EmptyState.tsx +6 -2
- package/src/HoverCard/HoverCard.doc.mjs +3 -0
- package/src/HoverCard/HoverCard.test.tsx +178 -2
- package/src/HoverCard/HoverCard.tsx +20 -16
- package/src/HoverCard/useHoverCard.tsx +12 -10
- package/src/Layer/useLayer.doc.mjs +7 -2
- package/src/Layer/useLayer.tsx +19 -2
- package/src/Lightbox/Lightbox.doc.mjs +0 -2
- package/src/Markdown/Markdown.doc.mjs +2 -0
- package/src/Markdown/Markdown.test.tsx +17 -26
- package/src/Markdown/Markdown.tsx +16 -6
- package/src/MobileNav/MobileNav.doc.mjs +8 -8
- package/src/MobileNav/MobileNav.tsx +13 -0
- package/src/MobileNav/MobileNavReopen.test.tsx +118 -0
- package/src/Resizable/Resizable.doc.mjs +1 -1
- package/src/Selector/Selector.doc.mjs +4 -0
- package/src/Skeleton/Skeleton.doc.mjs +11 -1
- package/src/Table/BaseTable.tsx +50 -24
- package/src/Table/Table.tsx +22 -1
- package/src/Table/index.ts +3 -0
- package/src/Table/plugins/stickyColumns/index.ts +4 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +163 -0
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +414 -0
- package/src/Table/types.ts +96 -4
- package/src/Table/useBaseTablePlugins.ts +1 -0
- package/src/Toolbar/Toolbar.doc.mjs +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAC,2BAA2B,EAAC,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { TablePlugin } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* Config for {@link useTableStickyColumns}. Provide at least one of
|
|
4
|
+
* `startKeys` / `endKeys` to pin columns.
|
|
5
|
+
*
|
|
6
|
+
* @remarks Every field is optional by design, so `useTableStickyColumns({})`
|
|
7
|
+
* compiles and is an intentional no-op that pins nothing — the hook returns a
|
|
8
|
+
* plugin that passes every cell through untouched. This lets callers compute
|
|
9
|
+
* the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
|
|
10
|
+
* without branching on whether to install the plugin at all.
|
|
11
|
+
*/
|
|
12
|
+
export interface UseTableStickyColumnsConfig {
|
|
13
|
+
/**
|
|
14
|
+
* Column keys pinned to the START (inline-start / left in LTR) edge — the
|
|
15
|
+
* contiguous run from the first column through the last listed key.
|
|
16
|
+
*/
|
|
17
|
+
startKeys?: string[];
|
|
18
|
+
/**
|
|
19
|
+
* Column keys pinned to the END (inline-end / right in LTR) edge — the
|
|
20
|
+
* contiguous run from the first listed key through the last column.
|
|
21
|
+
*/
|
|
22
|
+
endKeys?: string[];
|
|
23
|
+
}
|
|
24
|
+
export declare function useTableStickyColumns<T extends Record<string, unknown>>(config: UseTableStickyColumnsConfig): TablePlugin<T>;
|
|
25
|
+
//# sourceMappingURL=useTableStickyColumns.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableStickyColumns.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/stickyColumns/useTableStickyColumns.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAOrB;;;;;;;;;GASG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAoND,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrE,MAAM,EAAE,2BAA2B,GAClC,WAAW,CAAC,CAAC,CAAC,CAmJhB"}
|
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useTableStickyColumns.tsx
|
|
7
|
+
* @input React, StyleX, theme tokens, Table types
|
|
8
|
+
* @output Exports useTableStickyColumns hook and UseTableStickyColumnsConfig type
|
|
9
|
+
* @position Sticky-columns plugin; consumed by Table via plugins prop
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
12
|
+
* - /packages/core/src/Table/Table.doc.mjs (sticky-columns documentation)
|
|
13
|
+
* - /packages/core/src/Table/index.ts (exports)
|
|
14
|
+
*/
|
|
15
|
+
import { useCallback, useMemo, useRef } from 'react';
|
|
16
|
+
import * as stylex from '@stylexjs/stylex';
|
|
17
|
+
import "../../../theme/tokens.stylex.js";
|
|
18
|
+
import { colorVars } from "../../../theme/tokens.stylex.js";
|
|
19
|
+
import { DEFAULT_MIN_COLUMN_WIDTH } from "../../columnUtils.js";
|
|
20
|
+
|
|
21
|
+
// =============================================================================
|
|
22
|
+
// Config
|
|
23
|
+
// =============================================================================
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Config for {@link useTableStickyColumns}. Provide at least one of
|
|
27
|
+
* `startKeys` / `endKeys` to pin columns.
|
|
28
|
+
*
|
|
29
|
+
* @remarks Every field is optional by design, so `useTableStickyColumns({})`
|
|
30
|
+
* compiles and is an intentional no-op that pins nothing — the hook returns a
|
|
31
|
+
* plugin that passes every cell through untouched. This lets callers compute
|
|
32
|
+
* the config conditionally (e.g. `endKeys: enabled ? ['notes'] : undefined`)
|
|
33
|
+
* without branching on whether to install the plugin at all.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
// =============================================================================
|
|
37
|
+
// Width helpers
|
|
38
|
+
// =============================================================================
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Resolve a column's pixel width for cumulative offset math. Mirrors the
|
|
42
|
+
* resize plugin's fallback so offsets line up with rendered widths:
|
|
43
|
+
* pixel columns use their value; proportional columns use their declared
|
|
44
|
+
* minWidth (or the default); unknown widths use the default.
|
|
45
|
+
*/
|
|
46
|
+
function getColumnWidth(col) {
|
|
47
|
+
const w = col.width;
|
|
48
|
+
if (!w) {
|
|
49
|
+
return DEFAULT_MIN_COLUMN_WIDTH;
|
|
50
|
+
}
|
|
51
|
+
if (w.type === 'pixel') {
|
|
52
|
+
return w.value;
|
|
53
|
+
}
|
|
54
|
+
// proportional
|
|
55
|
+
return w.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Columns pinned to the START edge, keyed by column key → cumulative inline
|
|
60
|
+
* offset in pixels. The pinned block is the CONTIGUOUS run of leading columns
|
|
61
|
+
* from index 0 through the last column whose key is in `startKeys` (inclusive),
|
|
62
|
+
* INCLUDING synthetic columns (selection checkbox, row-index, …) that sit to
|
|
63
|
+
* the start of the user's sticky column. Returns `null` when no start-sticky
|
|
64
|
+
* column is present or column context is unavailable.
|
|
65
|
+
*/
|
|
66
|
+
function computeStartOffsets(columns, startKeys) {
|
|
67
|
+
if (!columns || columns.length === 0 || startKeys.length === 0) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
let lastStickyIndex = -1;
|
|
71
|
+
for (let i = 0; i < columns.length; i++) {
|
|
72
|
+
if (startKeys.includes(columns[i].key)) {
|
|
73
|
+
lastStickyIndex = i;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (lastStickyIndex === -1) {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
const offsets = new Map();
|
|
80
|
+
let cumulative = 0;
|
|
81
|
+
for (let i = 0; i <= lastStickyIndex; i++) {
|
|
82
|
+
offsets.set(columns[i].key, cumulative);
|
|
83
|
+
cumulative += getColumnWidth(columns[i]);
|
|
84
|
+
}
|
|
85
|
+
return offsets;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Mirror image of {@link computeStartOffsets} — columns pinned to the END edge,
|
|
90
|
+
* keyed by column key → cumulative inline-end offset. The pinned block is the
|
|
91
|
+
* CONTIGUOUS run of trailing columns from the FIRST column whose key is in
|
|
92
|
+
* `endKeys` through the last column (inclusive). Offsets accumulate from the
|
|
93
|
+
* end edge — the last column gets `0`, its neighbor gets that column's width,
|
|
94
|
+
* etc. Returns `null` when no end-sticky column is present.
|
|
95
|
+
*/
|
|
96
|
+
function computeEndOffsets(columns, endKeys) {
|
|
97
|
+
if (!columns || columns.length === 0 || endKeys.length === 0) {
|
|
98
|
+
return null;
|
|
99
|
+
}
|
|
100
|
+
let firstStickyIndex = -1;
|
|
101
|
+
for (let i = 0; i < columns.length; i++) {
|
|
102
|
+
if (endKeys.includes(columns[i].key)) {
|
|
103
|
+
firstStickyIndex = i;
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
if (firstStickyIndex === -1) {
|
|
108
|
+
return null;
|
|
109
|
+
}
|
|
110
|
+
const offsets = new Map();
|
|
111
|
+
let cumulative = 0;
|
|
112
|
+
for (let i = columns.length - 1; i >= firstStickyIndex; i--) {
|
|
113
|
+
offsets.set(columns[i].key, cumulative);
|
|
114
|
+
cumulative += getColumnWidth(columns[i]);
|
|
115
|
+
}
|
|
116
|
+
return offsets;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Resolve how a single column should be pinned given the start/end configs and
|
|
120
|
+
* the full column list. A key (mis)configured on both edges resolves to start.
|
|
121
|
+
* Returns `null` for columns that should not be pinned.
|
|
122
|
+
*/
|
|
123
|
+
function resolveStickySide(columns, columnKey, startKeys, endKeys) {
|
|
124
|
+
const startOffsets = computeStartOffsets(columns, startKeys);
|
|
125
|
+
if (startOffsets?.has(columnKey)) {
|
|
126
|
+
return {
|
|
127
|
+
edge: 'start',
|
|
128
|
+
offset: startOffsets.get(columnKey) ?? 0
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
const endOffsets = computeEndOffsets(columns, endKeys);
|
|
132
|
+
if (endOffsets?.has(columnKey)) {
|
|
133
|
+
return {
|
|
134
|
+
edge: 'end',
|
|
135
|
+
offset: endOffsets.get(columnKey) ?? 0
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// =============================================================================
|
|
142
|
+
// Styles
|
|
143
|
+
// =============================================================================
|
|
144
|
+
|
|
145
|
+
// CSS variables toggled on the scroll container by the layout ref. The cell
|
|
146
|
+
// ::after shadows read these, so each edge's shadow only shows when there is
|
|
147
|
+
// horizontally-scrolled content hidden behind that edge. We use CSS variables
|
|
148
|
+
// (not stylex.when.ancestor) because StyleX ancestor selectors support pseudo-
|
|
149
|
+
// classes only, not attribute/className matching — a CSS variable inherited
|
|
150
|
+
// from the scroll container is the supported way to gate descendant styles on
|
|
151
|
+
// container scroll state.
|
|
152
|
+
const SHADOW_VAR_START = '--table-sticky-shadow-start';
|
|
153
|
+
const SHADOW_VAR_END = '--table-sticky-shadow-end';
|
|
154
|
+
const stickyStyles = {
|
|
155
|
+
cell: {
|
|
156
|
+
kVAEAm: "x7wzq59",
|
|
157
|
+
kWkggS: "x10xzikg",
|
|
158
|
+
kHypHr: "xx83zyx",
|
|
159
|
+
kVQacm: "x1rea2x4",
|
|
160
|
+
$$css: true
|
|
161
|
+
},
|
|
162
|
+
headerCell: {
|
|
163
|
+
kY2c9j: "xzkaem6",
|
|
164
|
+
$$css: true
|
|
165
|
+
},
|
|
166
|
+
bodyCell: {
|
|
167
|
+
kY2c9j: "x1vjfegm",
|
|
168
|
+
$$css: true
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
// A soft drop shadow over the scrolling region, matching the EPS sticky-column
|
|
173
|
+
// treatment. `border-collapse: collapse` tables (Astryx Table uses
|
|
174
|
+
// table-layout: fixed + border-collapse: collapse) do NOT paint `box-shadow`
|
|
175
|
+
// on the cells themselves in Chromium, so the shadow is cast by a ::after strip
|
|
176
|
+
// positioned just outside the pinned edge, filled with a soft gradient that
|
|
177
|
+
// fades from a shadow tint to transparent over the scrolled content. Sticky
|
|
178
|
+
// cells set `overflow: visible` (above) so this strip isn't clipped. Its
|
|
179
|
+
// opacity reads a CSS variable inherited from the scroll container, which the
|
|
180
|
+
// layout ref toggles between 0 and 1 on scroll so the shadow only shows when
|
|
181
|
+
// there is hidden content behind that edge.
|
|
182
|
+
const SHADOW_WIDTH = '6px';
|
|
183
|
+
// A subtle tint that fades to transparent. --color-shadow is only ~10% alpha,
|
|
184
|
+
// which reads too faintly here, so use a slightly stronger but still soft tint.
|
|
185
|
+
const SHADOW_TINT = 'light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32))';
|
|
186
|
+
const shadowStyles = {
|
|
187
|
+
start: {
|
|
188
|
+
k5JduY: "x1s928wv",
|
|
189
|
+
kwXMNM: "x1j6awrg",
|
|
190
|
+
k3foIR: "x1m1drc7",
|
|
191
|
+
k8Iv0R: "x1xrz1ek",
|
|
192
|
+
kH8aOt: "x1unh1gc",
|
|
193
|
+
kkgrvl: "xzkji8o",
|
|
194
|
+
kLigFv: "x1qyefdi",
|
|
195
|
+
kloYau: "x2q1x1w",
|
|
196
|
+
kFJxch: "x17s1k9h",
|
|
197
|
+
kypkao: "x1sggmfs",
|
|
198
|
+
kNctxI: "x156sm4c",
|
|
199
|
+
$$css: true
|
|
200
|
+
},
|
|
201
|
+
end: {
|
|
202
|
+
k5JduY: "x1s928wv",
|
|
203
|
+
kwXMNM: "x1j6awrg",
|
|
204
|
+
k3foIR: "x1m1drc7",
|
|
205
|
+
k8Iv0R: "x1xrz1ek",
|
|
206
|
+
kc1e00: "x1iygr5g",
|
|
207
|
+
kkgrvl: "xzkji8o",
|
|
208
|
+
kLigFv: "xvs0bi2",
|
|
209
|
+
kloYau: "x2q1x1w",
|
|
210
|
+
kFJxch: "x17s1k9h",
|
|
211
|
+
kypkao: "x1c2idit",
|
|
212
|
+
kNctxI: "x14ofgck",
|
|
213
|
+
$$css: true
|
|
214
|
+
}
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
// Stable empty default so an unset start/end doesn't allocate a fresh array
|
|
218
|
+
// (and bust the memo) on every render.
|
|
219
|
+
const EMPTY = [];
|
|
220
|
+
|
|
221
|
+
// =============================================================================
|
|
222
|
+
// Hook
|
|
223
|
+
// =============================================================================
|
|
224
|
+
|
|
225
|
+
export function useTableStickyColumns(config) {
|
|
226
|
+
const {
|
|
227
|
+
startKeys,
|
|
228
|
+
endKeys
|
|
229
|
+
} = config;
|
|
230
|
+
const start = startKeys ?? EMPTY;
|
|
231
|
+
const end = endKeys ?? EMPTY;
|
|
232
|
+
const hasStart = start.length > 0;
|
|
233
|
+
const hasEnd = end.length > 0;
|
|
234
|
+
|
|
235
|
+
// Live snapshot of the resolved config, read inside the (memoized) transforms
|
|
236
|
+
// and the scroll-shadow callback. Keeping these in a ref lets the plugin memo
|
|
237
|
+
// be computed once (deps: only the stable scroll-shadow callback) while never
|
|
238
|
+
// reading stale config — consumers typically pass fresh array literals each
|
|
239
|
+
// render, so we never want array identity in the deps.
|
|
240
|
+
const stateRef = useRef({
|
|
241
|
+
start,
|
|
242
|
+
end,
|
|
243
|
+
hasStart,
|
|
244
|
+
hasEnd
|
|
245
|
+
});
|
|
246
|
+
stateRef.current = {
|
|
247
|
+
start,
|
|
248
|
+
end,
|
|
249
|
+
hasStart,
|
|
250
|
+
hasEnd
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
// Scroll-aware shadows: toggle CSS variables on the scroll container so each
|
|
254
|
+
// edge's shadow only paints when there is hidden, horizontally-scrolled
|
|
255
|
+
// content behind that edge. Implemented with a callback ref + scroll/resize
|
|
256
|
+
// listeners (synchronizing with the DOM) rather than React state, so
|
|
257
|
+
// scrolling never triggers re-renders.
|
|
258
|
+
const detachRef = useRef(null);
|
|
259
|
+
const attachScrollShadow = useCallback(el => {
|
|
260
|
+
detachRef.current?.();
|
|
261
|
+
detachRef.current = null;
|
|
262
|
+
if (!el) {
|
|
263
|
+
return;
|
|
264
|
+
}
|
|
265
|
+
const update = () => {
|
|
266
|
+
const {
|
|
267
|
+
hasStart: hs,
|
|
268
|
+
hasEnd: he
|
|
269
|
+
} = stateRef.current;
|
|
270
|
+
const maxScroll = el.scrollWidth - el.clientWidth;
|
|
271
|
+
const hasOverflow = maxScroll > 1;
|
|
272
|
+
if (hs) {
|
|
273
|
+
el.style.setProperty(SHADOW_VAR_START, hasOverflow && el.scrollLeft > 1 ? '1' : '0');
|
|
274
|
+
}
|
|
275
|
+
if (he) {
|
|
276
|
+
el.style.setProperty(SHADOW_VAR_END, hasOverflow && el.scrollLeft < maxScroll - 1 ? '1' : '0');
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
el.addEventListener('scroll', update, {
|
|
280
|
+
passive: true
|
|
281
|
+
});
|
|
282
|
+
const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;
|
|
283
|
+
resizeObserver?.observe(el);
|
|
284
|
+
update();
|
|
285
|
+
detachRef.current = () => {
|
|
286
|
+
el.removeEventListener('scroll', update);
|
|
287
|
+
resizeObserver?.disconnect();
|
|
288
|
+
};
|
|
289
|
+
}, []);
|
|
290
|
+
return useMemo(() => ({
|
|
291
|
+
transformHeaderCell(props, column) {
|
|
292
|
+
const {
|
|
293
|
+
start: s,
|
|
294
|
+
end: e
|
|
295
|
+
} = stateRef.current;
|
|
296
|
+
const side = resolveStickySide(props.columns, column.key, s, e);
|
|
297
|
+
if (!side) {
|
|
298
|
+
return props;
|
|
299
|
+
}
|
|
300
|
+
// position/inline-offset are runtime values → set via inline style so
|
|
301
|
+
// they are authoritative regardless of plugin composition order (the
|
|
302
|
+
// resize plugin also writes inline style on header cells).
|
|
303
|
+
const offsetStyle = side.edge === 'start' ? {
|
|
304
|
+
insetInlineStart: `${side.offset}px`
|
|
305
|
+
} : {
|
|
306
|
+
insetInlineEnd: `${side.offset}px`
|
|
307
|
+
};
|
|
308
|
+
return {
|
|
309
|
+
...props,
|
|
310
|
+
htmlProps: {
|
|
311
|
+
...props.htmlProps,
|
|
312
|
+
style: {
|
|
313
|
+
...props.htmlProps.style,
|
|
314
|
+
...offsetStyle
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
styles: [...props.styles, stickyStyles.cell, stickyStyles.headerCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
|
|
318
|
+
};
|
|
319
|
+
},
|
|
320
|
+
transformBodyCell(props, column) {
|
|
321
|
+
const {
|
|
322
|
+
start: s,
|
|
323
|
+
end: e
|
|
324
|
+
} = stateRef.current;
|
|
325
|
+
const side = resolveStickySide(props.columns, column.key, s, e);
|
|
326
|
+
if (!side) {
|
|
327
|
+
return props;
|
|
328
|
+
}
|
|
329
|
+
const offsetStyle = side.edge === 'start' ? {
|
|
330
|
+
insetInlineStart: `${side.offset}px`
|
|
331
|
+
} : {
|
|
332
|
+
insetInlineEnd: `${side.offset}px`
|
|
333
|
+
};
|
|
334
|
+
return {
|
|
335
|
+
...props,
|
|
336
|
+
htmlProps: {
|
|
337
|
+
...props.htmlProps,
|
|
338
|
+
style: {
|
|
339
|
+
...props.htmlProps.style,
|
|
340
|
+
...offsetStyle
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
styles: [...props.styles, stickyStyles.cell, stickyStyles.bodyCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
|
|
344
|
+
};
|
|
345
|
+
},
|
|
346
|
+
transformScrollWrapper(props) {
|
|
347
|
+
// No pinned edges → nothing to gate; leave the wrapper untouched.
|
|
348
|
+
if (!stateRef.current.hasStart && !stateRef.current.hasEnd) {
|
|
349
|
+
return props;
|
|
350
|
+
}
|
|
351
|
+
// Compose with any ref a prior plugin (e.g. virtualization) set on the
|
|
352
|
+
// scroll container.
|
|
353
|
+
const existingRef = props.htmlProps.ref;
|
|
354
|
+
const mergedRef = node => {
|
|
355
|
+
attachScrollShadow(node);
|
|
356
|
+
if (typeof existingRef === 'function') {
|
|
357
|
+
existingRef(node);
|
|
358
|
+
} else if (existingRef != null) {
|
|
359
|
+
// RefObject — assign through its writable `.current`.
|
|
360
|
+
existingRef.current = node;
|
|
361
|
+
}
|
|
362
|
+
};
|
|
363
|
+
return {
|
|
364
|
+
...props,
|
|
365
|
+
htmlProps: {
|
|
366
|
+
...props.htmlProps,
|
|
367
|
+
ref: mergedRef
|
|
368
|
+
}
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
}),
|
|
372
|
+
// The returned plugin's transforms read live config from `stateRef` and
|
|
373
|
+
// `attachScrollShadow` is stable (empty deps), so the plugin object can be
|
|
374
|
+
// computed once and reused across renders.
|
|
375
|
+
[attachScrollShadow]);
|
|
376
|
+
}
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -217,6 +217,20 @@ export interface HeaderCellRenderProps {
|
|
|
217
217
|
overlay?: ReactNode;
|
|
218
218
|
/** Content rendered below the header label row (e.g. inline filter controls). */
|
|
219
219
|
below?: ReactNode;
|
|
220
|
+
/**
|
|
221
|
+
* Index of this column within the final, ordered list of rendered columns
|
|
222
|
+
* (after column injection/reordering by other plugins). Populated by
|
|
223
|
+
* BaseTable. Optional for backward compatibility with hand-constructed
|
|
224
|
+
* renders in tests.
|
|
225
|
+
*/
|
|
226
|
+
columnIndex?: number;
|
|
227
|
+
/**
|
|
228
|
+
* The full, final ordered list of columns being rendered (after column
|
|
229
|
+
* injection/reordering by other plugins). Populated by BaseTable so plugins
|
|
230
|
+
* can reason about column position — e.g. cumulative sticky offsets. Optional
|
|
231
|
+
* for backward compatibility.
|
|
232
|
+
*/
|
|
233
|
+
columns?: ReadonlyArray<TableColumn<Record<string, unknown>>>;
|
|
220
234
|
}
|
|
221
235
|
/** Props passed through the plugin pipeline for each body `<tr>` */
|
|
222
236
|
export interface BodyRowRenderProps {
|
|
@@ -230,6 +244,48 @@ export interface BodyRowRenderProps {
|
|
|
230
244
|
export interface BodyCellRenderProps {
|
|
231
245
|
htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
|
|
232
246
|
styles: StyleXStyles[];
|
|
247
|
+
/**
|
|
248
|
+
* Index of this cell's column within the final ordered column list.
|
|
249
|
+
* Mirrors the `columnIndex` passed to `transformHeaderCell`. Populated by
|
|
250
|
+
* BaseTable. Optional for backward compatibility with hand-constructed
|
|
251
|
+
* renders in tests.
|
|
252
|
+
*/
|
|
253
|
+
columnIndex?: number;
|
|
254
|
+
/**
|
|
255
|
+
* The full, final ordered list of columns being rendered. Populated by
|
|
256
|
+
* BaseTable so plugins can reason about column position — e.g. cumulative
|
|
257
|
+
* sticky offsets. Optional for backward compatibility.
|
|
258
|
+
*/
|
|
259
|
+
columns?: ReadonlyArray<TableColumn<Record<string, unknown>>>;
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* Props passed through the plugin pipeline for the scroll-wrapper region — the
|
|
263
|
+
* `<div>` wrapping the `<table>` element (the horizontal scroll container, see
|
|
264
|
+
* the `scrollWrapper` prop on `BaseTableProps`). Lets plugins attach a `ref` to
|
|
265
|
+
* the scrollable element (e.g. for scroll-aware sticky-column shadows or
|
|
266
|
+
* virtualization) and inject chrome before/after the table.
|
|
267
|
+
*
|
|
268
|
+
* Named after `scrollWrapper` (not "layout") to avoid ambiguity: it transforms
|
|
269
|
+
* the wrapper element, not the internal header/body/footer layout of `<table>`.
|
|
270
|
+
*
|
|
271
|
+
* Runs after `transformTable`/cell transforms but inside `transformTableContext`,
|
|
272
|
+
* so plugin chrome added here stays within any context providers but wraps the
|
|
273
|
+
* scroll area.
|
|
274
|
+
*/
|
|
275
|
+
export interface ScrollWrapperRenderProps {
|
|
276
|
+
/**
|
|
277
|
+
* HTML attributes applied to the scroll container `<div>`, including an
|
|
278
|
+
* optional `ref`. Plugins compose refs by reading the existing `ref` and
|
|
279
|
+
* merging their own (see `useTableStickyColumns`).
|
|
280
|
+
*/
|
|
281
|
+
htmlProps: HTMLAttributes<HTMLDivElement> & {
|
|
282
|
+
ref?: Ref<HTMLDivElement>;
|
|
283
|
+
};
|
|
284
|
+
styles: StyleXStyles[];
|
|
285
|
+
/** Content rendered before the `<table>`, inside the scroll container. */
|
|
286
|
+
beforeTable?: ReactNode;
|
|
287
|
+
/** Content rendered after the `<table>`, inside the scroll container. */
|
|
288
|
+
afterTable?: ReactNode;
|
|
233
289
|
}
|
|
234
290
|
/**
|
|
235
291
|
* Table plugin — transforms render props at each structural level.
|
|
@@ -243,7 +299,8 @@ export interface BodyCellRenderProps {
|
|
|
243
299
|
* 4. `transformHeaderCell` — transform each `<th>` props
|
|
244
300
|
* 5. `transformBodyRow` — transform each body `<tr>` props
|
|
245
301
|
* 6. `transformBodyCell` — transform each body `<td>` props
|
|
246
|
-
* 7. `
|
|
302
|
+
* 7. `transformScrollWrapper` — transform the scroll-container wrapper around the table
|
|
303
|
+
* 8. `transformTableContext` — wrap the table output in context providers
|
|
247
304
|
*/
|
|
248
305
|
export interface TablePlugin<T extends Record<string, unknown> = Record<string, unknown>> {
|
|
249
306
|
/**
|
|
@@ -256,12 +313,29 @@ export interface TablePlugin<T extends Record<string, unknown> = Record<string,
|
|
|
256
313
|
transformTable?: (props: TableRenderProps) => TableRenderProps;
|
|
257
314
|
/** Transform the header `<tr>` props */
|
|
258
315
|
transformHeaderRow?: (props: HeaderRowRenderProps) => HeaderRowRenderProps;
|
|
259
|
-
/**
|
|
260
|
-
|
|
316
|
+
/**
|
|
317
|
+
* Transform each `<th>` props.
|
|
318
|
+
*
|
|
319
|
+
* `columnIndex` and the full `columns` list are provided for plugins that
|
|
320
|
+
* need to reason about column position (e.g. cumulative sticky offsets).
|
|
321
|
+
*/
|
|
322
|
+
transformHeaderCell?: (props: HeaderCellRenderProps, column: TableColumn<T>, columnIndex: number, columns: ReadonlyArray<TableColumn<T>>) => HeaderCellRenderProps;
|
|
261
323
|
/** Transform each body `<tr>` props */
|
|
262
324
|
transformBodyRow?: (props: BodyRowRenderProps, item: T, index: number) => BodyRowRenderProps;
|
|
263
|
-
/**
|
|
264
|
-
|
|
325
|
+
/**
|
|
326
|
+
* Transform each body `<td>` props.
|
|
327
|
+
*
|
|
328
|
+
* `columnIndex` and the full `columns` list are provided for plugins that
|
|
329
|
+
* need to reason about column position (e.g. cumulative sticky offsets).
|
|
330
|
+
*/
|
|
331
|
+
transformBodyCell?: (props: BodyCellRenderProps, column: TableColumn<T>, item: T, columnIndex: number, columns: ReadonlyArray<TableColumn<T>>) => BodyCellRenderProps;
|
|
332
|
+
/**
|
|
333
|
+
* Transform the scroll-wrapper region — the `<div>` wrapping the `<table>`
|
|
334
|
+
* (see the `scrollWrapper` prop). Use to attach a `ref` to the scrollable
|
|
335
|
+
* element (scroll-aware shadows, virtualization) or to inject chrome
|
|
336
|
+
* before/after the table.
|
|
337
|
+
*/
|
|
338
|
+
transformScrollWrapper?: (props: ScrollWrapperRenderProps) => ScrollWrapperRenderProps;
|
|
265
339
|
/** Wrap the table output in context providers */
|
|
266
340
|
transformTableContext?: (children: ReactNode) => ReactNode;
|
|
267
341
|
}
|
|
@@ -311,9 +385,20 @@ export interface BaseTableProps<T extends Record<string, unknown>> extends BaseP
|
|
|
311
385
|
* plugin `transformTableContext` layer. Used by `Table` to add a
|
|
312
386
|
* horizontal scroll container so plugin chrome (pagination, toolbars)
|
|
313
387
|
* stays outside the scrollable area.
|
|
388
|
+
*
|
|
389
|
+
* Receives `htmlProps` (including an optional `ref`) and `styles` produced
|
|
390
|
+
* by the plugin `transformScrollWrapper` pipeline, plus `beforeTable`/`afterTable`
|
|
391
|
+
* chrome. The wrapper must spread `htmlProps` (and apply `styles`) onto its
|
|
392
|
+
* scroll-container element so plugins can attach refs / scroll listeners.
|
|
314
393
|
*/
|
|
315
394
|
scrollWrapper?: ComponentType<{
|
|
316
395
|
children: ReactNode;
|
|
396
|
+
htmlProps?: HTMLAttributes<HTMLDivElement> & {
|
|
397
|
+
ref?: Ref<HTMLDivElement>;
|
|
398
|
+
};
|
|
399
|
+
styles?: StyleXStyles[];
|
|
400
|
+
beforeTable?: ReactNode;
|
|
401
|
+
afterTable?: ReactNode;
|
|
317
402
|
}>;
|
|
318
403
|
/**
|
|
319
404
|
* How default-rendered body cell text behaves when it exceeds column width.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,GAAG,EACH,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,uCAAuC,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,UAAU,CAAC;AAMzD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAM1D;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAM7D;;;;GAIG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D,gFAAgF;IAChF,GAAG,EAAE,MAAM,CAAC;IACZ,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;;;;;;;;;;;;OAcG;IACH;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAC;IAC/C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC;IACtC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACrC;AAMD,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,qEAAqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC/C,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAClD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBaseTablePlugins.d.ts","sourceRoot":"","sources":["../../src/Table/useBaseTablePlugins.ts"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"useBaseTablePlugins.d.ts","sourceRoot":"","sources":["../../src/Table/useBaseTablePlugins.ts"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AA6GzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GACtD,WAAW,CAAC,CAAC,CAAC,EAAE,CA2ClB"}
|
|
@@ -67,7 +67,7 @@ function sortPluginEntries(entries) {
|
|
|
67
67
|
// Plugin Validation (dev mode only)
|
|
68
68
|
// ======================================================================
|
|
69
69
|
/** Known transform method names on the TablePlugin interface. */
|
|
70
|
-
const VALID_TRANSFORM_KEYS = new Set(['transformColumns', 'transformTable', 'transformHeaderRow', 'transformHeaderCell', 'transformBodyRow', 'transformBodyCell', 'transformTableContext']);
|
|
70
|
+
const VALID_TRANSFORM_KEYS = new Set(['transformColumns', 'transformTable', 'transformHeaderRow', 'transformHeaderCell', 'transformBodyRow', 'transformBodyCell', 'transformScrollWrapper', 'transformTableContext']);
|
|
71
71
|
|
|
72
72
|
/**
|
|
73
73
|
* Validate a plugin object in development mode.
|
package/dist/astryx.css
CHANGED
|
@@ -485,6 +485,7 @@
|
|
|
485
485
|
.xioom0i:not(#\#):not(#\#):not(#\#){aspect-ratio:var(--button-icon-only-aspect)}
|
|
486
486
|
.xvn2z4z:not(#\#):not(#\#):not(#\#){backdrop-filter:blur(12px)}
|
|
487
487
|
.xlp1x4z:not(#\#):not(#\#):not(#\#){backface-visibility:hidden}
|
|
488
|
+
.xx83zyx:not(#\#):not(#\#):not(#\#){background-clip:padding-box}
|
|
488
489
|
.x1rkw3yq:not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,white 60%,transparent)}
|
|
489
490
|
.xtwfq29:not(#\#):not(#\#):not(#\#){background-color:currentColor}
|
|
490
491
|
.xgcd1z6:not(#\#):not(#\#):not(#\#){background-color:inherit}
|
|
@@ -989,6 +990,7 @@
|
|
|
989
990
|
.x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
|
|
990
991
|
.x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
|
|
991
992
|
.xhtitgo:not(#\#):not(#\#):not(#\#){z-index:2}
|
|
993
|
+
.xzkaem6:not(#\#):not(#\#):not(#\#){z-index:3}
|
|
992
994
|
.x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
|
|
993
995
|
.x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
|
|
994
996
|
.x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
|
|
@@ -1420,21 +1422,29 @@
|
|
|
1420
1422
|
.x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
|
|
1421
1423
|
@starting-style{.x5rzir7.x5rzir7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}}
|
|
1422
1424
|
.xvtkv6q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:background-color .15s ease,width .15s ease}
|
|
1425
|
+
.x17s1k9h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:opacity .15s ease}
|
|
1423
1426
|
.x1abwkk1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{backdrop-filter:blur(2px)}
|
|
1424
1427
|
.xyhc2n1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:transparent}
|
|
1425
1428
|
.xnixb3f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{background-color:var(--color-overlay)}
|
|
1426
1429
|
.x1i3206j:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--indicator-color,transparent)}
|
|
1430
|
+
.x14ofgck:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,light-dark(rgba(0,0,0,.12),rgba(0,0,0,.32)),transparent)}
|
|
1431
|
+
.x156sm4c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,light-dark(rgba(0,0,0,.12),rgba(0,0,0,.32)),transparent)}
|
|
1427
1432
|
.xnf3u0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-disabled)}
|
|
1428
1433
|
.xeyghm5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-secondary)}
|
|
1429
1434
|
.x1cpjm7i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:""}
|
|
1430
1435
|
.x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
|
|
1431
1436
|
.xc2ndz5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:counter(astryx-list) "."}
|
|
1432
1437
|
.x1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
|
|
1438
|
+
.x1iygr5g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:0}
|
|
1433
1439
|
.xph5o2a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:0}
|
|
1434
1440
|
.xb3n6bw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:1}
|
|
1441
|
+
.x1c2idit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{opacity:var(--table-sticky-shadow-end,0)}
|
|
1442
|
+
.x1sggmfs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{opacity:var(--table-sticky-shadow-start,0)}
|
|
1435
1443
|
.x2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
|
|
1436
1444
|
.x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
|
|
1437
1445
|
.x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
|
|
1446
|
+
.xvs0bi2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(-100%)}
|
|
1447
|
+
.x1qyefdi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(100%)}
|
|
1438
1448
|
.x97pup0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-duration:var(--duration-fast)}
|
|
1439
1449
|
.xft5bk6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:var(--duration-medium)}
|
|
1440
1450
|
.x1ywzrc5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-property:background-color}
|
|
@@ -1450,5 +1460,6 @@
|
|
|
1450
1460
|
.x1ydowbf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:-2px}
|
|
1451
1461
|
.x51xajf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-2px}
|
|
1452
1462
|
.x1m1drc7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:0}
|
|
1463
|
+
.xzkji8o:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:6px}
|
|
1453
1464
|
.xi8c0p9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--indicator-width,1px)}
|
|
1454
1465
|
}
|