@astryxdesign/core 0.1.0 → 0.1.1-canary.129bf0e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +66 -0
- 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/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +2 -0
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +5 -1
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/DropdownMenu/DropdownMenu.js +2 -2
- package/dist/DropdownMenu/{renderXDSDropdownItems.d.ts → renderDropdownItems.d.ts} +3 -3
- package/dist/DropdownMenu/renderDropdownItems.d.ts.map +1 -0
- package/dist/DropdownMenu/{renderXDSDropdownItems.js → renderDropdownItems.js} +2 -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/Layout/Layout.d.ts +10 -1
- package/dist/Layout/Layout.d.ts.map +1 -1
- package/dist/Layout/Layout.js +5 -1
- 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/Outline/Outline.d.ts +3 -2
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +23 -4
- package/dist/Outline/useScrollSpy.d.ts +14 -1
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +161 -50
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +31 -27
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +1 -5
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +1 -1
- 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/ToggleButton/ToggleButton.d.ts +10 -3
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +64 -18
- package/dist/astryx.css +11 -0
- package/dist/astryx.umd.js +147 -0
- package/dist/astryx.umd.js.map +7 -0
- package/dist/theme/Theme.js +1 -1
- package/dist/theme/defineTheme.d.ts +1 -1
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +1 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +1 -1
- package/dist/theme/tokens.d.ts +1 -1
- package/dist/theme/tokens.js +4 -4
- package/dist/theme/useTheme.d.ts +2 -2
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +15 -2
- package/package.json +7 -3
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -0
- package/src/Banner/Banner.test.tsx +16 -7
- package/src/Banner/Banner.tsx +9 -2
- package/src/Button/Button.test.tsx +26 -11
- package/src/Button/Button.tsx +2 -0
- package/src/Chat/ChatLayoutScrollButton.tsx +7 -1
- package/src/Collapsible/useCollapsible.doc.mjs +2 -2
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/DateInput/DateInput.test.tsx +68 -20
- package/src/Divider/Divider.doc.mjs +1 -1
- package/src/DropdownMenu/DropdownMenu.tsx +2 -2
- package/src/DropdownMenu/{renderXDSDropdownItems.tsx → renderDropdownItems.tsx} +2 -2
- package/src/EmptyState/EmptyState.test.tsx +4 -2
- package/src/EmptyState/EmptyState.tsx +6 -2
- package/src/FormLayout/FormLayout.doc.mjs +3 -3
- 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/Icon/Icon.doc.mjs +4 -4
- package/src/Item/Item.doc.mjs +2 -2
- package/src/Layer/useLayer.doc.mjs +7 -2
- package/src/Layer/useLayer.tsx +19 -2
- package/src/Layout/Layout.doc.mjs +2 -1
- package/src/Layout/Layout.tsx +15 -1
- package/src/Layout/__tests__/childrenAsContent.test.tsx +59 -0
- package/src/Lightbox/Lightbox.doc.mjs +0 -2
- package/src/Link/Link.doc.mjs +3 -3
- package/src/Link/LinkProvider.doc.mjs +3 -3
- package/src/Markdown/Markdown.doc.mjs +6 -4
- 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/Outline/Outline.doc.mjs +1 -1
- package/src/Outline/Outline.test.tsx +76 -38
- package/src/Outline/Outline.tsx +23 -4
- package/src/Outline/useScrollSpy.ts +196 -63
- package/src/Pagination/Pagination.test.tsx +137 -13
- package/src/Pagination/Pagination.tsx +33 -28
- package/src/Resizable/Resizable.doc.mjs +3 -3
- package/src/Resizable/useResizable.ts +1 -7
- package/src/Selector/Selector.doc.mjs +4 -0
- package/src/Selector/Selector.tsx +5 -6
- package/src/Skeleton/Skeleton.doc.mjs +11 -1
- package/src/Table/BaseTable.tsx +50 -24
- package/src/Table/Table.doc.mjs +3 -3
- 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/ToggleButton/ToggleButton.doc.mjs +2 -2
- package/src/ToggleButton/ToggleButton.test.tsx +148 -6
- package/src/ToggleButton/ToggleButton.tsx +83 -20
- package/src/Toolbar/Toolbar.doc.mjs +1 -1
- package/src/hooks/useEntryAnimation.doc.mjs +3 -3
- package/src/hooks/useMediaQuery.doc.mjs +2 -2
- package/src/hooks/useStreamingText.doc.mjs +3 -3
- package/src/theme/Theme.doc.mjs +2 -2
- package/src/theme/Theme.tsx +1 -1
- package/src/theme/defineTheme.ts +1 -1
- package/src/theme/index.ts +1 -1
- package/src/theme/syntax/defineSyntaxTheme.ts +1 -1
- package/src/theme/tokens.ts +4 -4
- package/src/theme/useTheme.ts +2 -2
- package/src/utils/dateParser.test.ts +26 -0
- package/src/utils/dateParser.ts +16 -2
- package/dist/DropdownMenu/renderXDSDropdownItems.d.ts.map +0 -1
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.
|
|
@@ -38,8 +38,15 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
38
38
|
*/
|
|
39
39
|
onPressedChange?: (isPressed: boolean) => void;
|
|
40
40
|
/**
|
|
41
|
-
*
|
|
42
|
-
* The button shows a loading spinner while the
|
|
41
|
+
* Action handler for API- or navigation-backed toggles, run inside a
|
|
42
|
+
* transition. The button shows a loading spinner while the action is
|
|
43
|
+
* pending — whether it returns a promise or synchronously triggers a
|
|
44
|
+
* suspending update (e.g. a router navigation that suspends on data).
|
|
45
|
+
*
|
|
46
|
+
* Because it runs in a transition, the toggle is *interruptible*: clicking
|
|
47
|
+
* again while an action is pending starts a new transition with the next
|
|
48
|
+
* optimistic state, so the action reflects the latest intent rather than
|
|
49
|
+
* being dropped.
|
|
43
50
|
*
|
|
44
51
|
* @example
|
|
45
52
|
* ```
|
|
@@ -53,7 +60,7 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
53
60
|
* />
|
|
54
61
|
* ```
|
|
55
62
|
*/
|
|
56
|
-
pressedChangeAction?: (isPressed: boolean) => Promise<void>;
|
|
63
|
+
pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
|
|
57
64
|
/**
|
|
58
65
|
* The size of the toggle button.
|
|
59
66
|
* When used inside ToggleButtonGroup, defaults to the group's size.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyE5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAyG/B;yBA5He,YAAY"}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
* - /apps/storybook/stories/ToggleButton.stories.tsx
|
|
20
20
|
* - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
|
|
21
21
|
*/
|
|
22
|
-
import React, { useCallback } from 'react';
|
|
22
|
+
import React, { useCallback, useEffect, useOptimistic, useState, useTransition } from 'react';
|
|
23
23
|
import * as stylex from '@stylexjs/stylex';
|
|
24
24
|
import "../theme/tokens.stylex.js";
|
|
25
25
|
import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
@@ -27,6 +27,38 @@ import { Button } from "../Button/index.js";
|
|
|
27
27
|
import { useToggleButtonGroup } from "./ToggleButtonGroup.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
|
|
30
|
+
// =============================================================================
|
|
31
|
+
// Constants & helpers
|
|
32
|
+
// =============================================================================
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* The spinner only appears once the action has been pending for this long.
|
|
36
|
+
* A fast action shows the optimistic pressed state immediately with no spinner
|
|
37
|
+
* flash, and rapid re-clicks can interrupt the in-flight action before the
|
|
38
|
+
* button locks behind the spinner.
|
|
39
|
+
*/
|
|
40
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
|
+
const PENDING_SPINNER_DELAY_MS = 150;
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Returns `true` only once `active` has stayed `true` for `delayMs`.
|
|
45
|
+
* Used to debounce the loading spinner so the optimistic state shows first.
|
|
46
|
+
*/
|
|
47
|
+
function useDelayed(active, delayMs) {
|
|
48
|
+
const [delayed, setDelayed] = useState(false);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (!active) {
|
|
51
|
+
return undefined;
|
|
52
|
+
}
|
|
53
|
+
const timer = setTimeout(() => setDelayed(true), delayMs);
|
|
54
|
+
return () => {
|
|
55
|
+
clearTimeout(timer);
|
|
56
|
+
setDelayed(false);
|
|
57
|
+
};
|
|
58
|
+
}, [active, delayMs]);
|
|
59
|
+
return active && delayed;
|
|
60
|
+
}
|
|
61
|
+
|
|
30
62
|
// =============================================================================
|
|
31
63
|
// Styles
|
|
32
64
|
// =============================================================================
|
|
@@ -36,7 +68,6 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
36
68
|
* A hidden span renders the same text at semibold weight to reserve
|
|
37
69
|
* the wider width, preventing layout shift when toggling.
|
|
38
70
|
*/
|
|
39
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
40
71
|
const pressedStyles = {
|
|
41
72
|
background: {
|
|
42
73
|
kWkggS: "xi89dp7",
|
|
@@ -93,32 +124,47 @@ export function ToggleButton({
|
|
|
93
124
|
style,
|
|
94
125
|
...props
|
|
95
126
|
}) {
|
|
96
|
-
// Read group context if inside a group
|
|
97
127
|
const group = useToggleButtonGroup();
|
|
98
|
-
|
|
99
|
-
// Resolve state from group or props
|
|
100
|
-
const isPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
|
|
128
|
+
const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
|
|
101
129
|
const size = sizeProp ?? group?.size ?? 'md';
|
|
102
130
|
const isDisabled = group?.isDisabled ?? isDisabledProp;
|
|
131
|
+
|
|
132
|
+
// Track the pressed state optimistically. While an action is pending, the
|
|
133
|
+
// button reflects the intended (optimistic) state immediately, and a click
|
|
134
|
+
// mid-flight derives its next state from this value — so rapid toggles read
|
|
135
|
+
// true -> false -> true rather than stalling on the last committed value.
|
|
136
|
+
const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
|
|
137
|
+
const isPressed = optimisticPressed;
|
|
103
138
|
const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
|
|
139
|
+
|
|
140
|
+
// Run the toggle inside a transition. The action is interruptible: clicking
|
|
141
|
+
// again while it is pending starts a fresh transition with the next
|
|
142
|
+
// optimistic state instead of being dropped, so there is no re-entry guard.
|
|
143
|
+
// Both onPressedChange and pressedChangeAction run inside the transition,
|
|
144
|
+
// which means a synchronous-but-suspending handler (e.g. a router navigation
|
|
145
|
+
// that suspends on data) also drives the pending state — not just promises.
|
|
146
|
+
const [isPending, startTransition] = useTransition();
|
|
147
|
+
// Debounce the spinner so a fast action shows the optimistic state without a
|
|
148
|
+
// spinner flash, and rapid re-clicks can interrupt before the button locks.
|
|
149
|
+
const showSpinner = useDelayed(isPending, PENDING_SPINNER_DELAY_MS);
|
|
150
|
+
const isLoadingState = isLoading || showSpinner;
|
|
104
151
|
const handleClick = useCallback(() => {
|
|
105
|
-
if (isDisabled
|
|
152
|
+
if (isDisabled) {
|
|
106
153
|
return;
|
|
107
154
|
}
|
|
108
155
|
if (group && value != null) {
|
|
109
|
-
//
|
|
156
|
+
// Group mode delegates selection to the group; no async-action path.
|
|
110
157
|
group.toggle(value);
|
|
111
|
-
|
|
112
|
-
// Standalone toggle
|
|
113
|
-
const newState = !isPressed;
|
|
114
|
-
onPressedChangeProp(newState);
|
|
115
|
-
if (pressedChangeAction) {
|
|
116
|
-
void pressedChangeAction(newState);
|
|
117
|
-
}
|
|
158
|
+
return;
|
|
118
159
|
}
|
|
119
|
-
|
|
160
|
+
const newState = !optimisticPressed;
|
|
161
|
+
startTransition(async () => {
|
|
162
|
+
setOptimisticPressed(newState);
|
|
163
|
+
onPressedChangeProp?.(newState);
|
|
164
|
+
await pressedChangeAction?.(newState);
|
|
165
|
+
});
|
|
166
|
+
}, [isDisabled, group, value, optimisticPressed, onPressedChangeProp, pressedChangeAction, setOptimisticPressed]);
|
|
120
167
|
|
|
121
|
-
// Label with font weight shift and width reservation
|
|
122
168
|
// isIconOnly prop is the source of truth for icon-only rendering.
|
|
123
169
|
const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
|
|
124
170
|
...{
|
|
@@ -165,7 +211,7 @@ export function ToggleButton({
|
|
|
165
211
|
variant: "ghost",
|
|
166
212
|
size: size,
|
|
167
213
|
isDisabled: isDisabled,
|
|
168
|
-
isLoading:
|
|
214
|
+
isLoading: isLoadingState,
|
|
169
215
|
isIconOnly: isIconOnly,
|
|
170
216
|
"aria-pressed": isPressed,
|
|
171
217
|
icon: resolvedIcon,
|
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
|
}
|