@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
package/README.md
CHANGED
|
@@ -183,3 +183,71 @@ npm install @astryxdesign/core @astryxdesign/theme-neutral
|
|
|
183
183
|
```
|
|
184
184
|
|
|
185
185
|
Same CSS imports and providers as above. No build plugins needed; XDS ships pre-built.
|
|
186
|
+
|
|
187
|
+
### No build step (CDN)
|
|
188
|
+
|
|
189
|
+
For prototypes, embeds, or pages without a bundler, load the components straight
|
|
190
|
+
from a public CDN. Two delivery options ship in the published package:
|
|
191
|
+
|
|
192
|
+
**1. UMD global (`<script>` tag).** A single pre-bundled file exposes every export
|
|
193
|
+
on `window.Astryx`. React and ReactDOM are peer dependencies — load them yourself.
|
|
194
|
+
Pair it with the precompiled stylesheet.
|
|
195
|
+
|
|
196
|
+
```html
|
|
197
|
+
<!doctype html>
|
|
198
|
+
<html data-astryx-theme="neutral">
|
|
199
|
+
<head>
|
|
200
|
+
<link
|
|
201
|
+
rel="stylesheet"
|
|
202
|
+
href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/src/reset.css" />
|
|
203
|
+
<link
|
|
204
|
+
rel="stylesheet"
|
|
205
|
+
href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css" />
|
|
206
|
+
</head>
|
|
207
|
+
<body>
|
|
208
|
+
<div id="root"></div>
|
|
209
|
+
<script
|
|
210
|
+
crossorigin
|
|
211
|
+
src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
|
|
212
|
+
<script
|
|
213
|
+
crossorigin
|
|
214
|
+
src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
|
|
215
|
+
<script src="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.umd.js"></script>
|
|
216
|
+
<script>
|
|
217
|
+
const {Button, Card} = window.Astryx;
|
|
218
|
+
const e = React.createElement;
|
|
219
|
+
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
220
|
+
e(Card, null, e(Button, {variant: 'primary'}, 'Hello from a CDN')),
|
|
221
|
+
);
|
|
222
|
+
</script>
|
|
223
|
+
</body>
|
|
224
|
+
</html>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
**2. ES modules (no UMD, no globals).** Use [esm.sh](https://esm.sh), which rewrites
|
|
228
|
+
bare imports to browser-resolvable URLs. An import map keeps a single React instance.
|
|
229
|
+
|
|
230
|
+
```html
|
|
231
|
+
<link
|
|
232
|
+
rel="stylesheet"
|
|
233
|
+
href="https://cdn.jsdelivr.net/npm/@astryxdesign/core/dist/astryx.css" />
|
|
234
|
+
<script type="importmap">
|
|
235
|
+
{
|
|
236
|
+
"imports": {
|
|
237
|
+
"react": "https://esm.sh/react@19",
|
|
238
|
+
"react-dom/client": "https://esm.sh/react-dom@19/client",
|
|
239
|
+
"@astryxdesign/core": "https://esm.sh/@astryxdesign/core?external=react,react-dom"
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
</script>
|
|
243
|
+
<script type="module">
|
|
244
|
+
import {createRoot} from 'react-dom/client';
|
|
245
|
+
import {Button} from '@astryxdesign/core';
|
|
246
|
+
// ...render as usual
|
|
247
|
+
</script>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
> Pin a version in production (e.g. `@astryxdesign/core@0.1.1`) — unversioned CDN URLs
|
|
251
|
+
> resolve to the latest release and are cached aggressively. The raw ESM entry
|
|
252
|
+
> (`dist/index.js`) uses bare `react` imports and will **not** run from a plain
|
|
253
|
+
> `<script src>`; use the UMD global or esm.sh as shown above.
|
|
@@ -41,7 +41,7 @@ export interface AvatarGroupOverflowProps extends Omit<BaseProps<HTMLElement>, '
|
|
|
41
41
|
* </AvatarGroup>
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
export declare function AvatarGroupOverflow({ ref, count, onClick, children, xstyle, className, style, }: AvatarGroupOverflowProps): ReactNode;
|
|
44
|
+
export declare function AvatarGroupOverflow({ ref, count, onClick, children, xstyle, className, style, ...rest }: AvatarGroupOverflowProps): ReactNode;
|
|
45
45
|
export declare namespace AvatarGroupOverflow {
|
|
46
46
|
var displayName: string;
|
|
47
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAwDtC;yBAjEe,mBAAmB"}
|
|
@@ -100,7 +100,8 @@ export function AvatarGroupOverflow({
|
|
|
100
100
|
children,
|
|
101
101
|
xstyle,
|
|
102
102
|
className,
|
|
103
|
-
style
|
|
103
|
+
style,
|
|
104
|
+
...rest
|
|
104
105
|
}) {
|
|
105
106
|
const group = useAvatarGroup();
|
|
106
107
|
const numericSize = group?.numericSize ?? 36;
|
|
@@ -113,6 +114,7 @@ export function AvatarGroupOverflow({
|
|
|
113
114
|
type: "button",
|
|
114
115
|
onClick: onClick,
|
|
115
116
|
"aria-label": label,
|
|
117
|
+
...rest,
|
|
116
118
|
...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
|
|
117
119
|
children: content
|
|
118
120
|
});
|
|
@@ -120,6 +122,7 @@ export function AvatarGroupOverflow({
|
|
|
120
122
|
return /*#__PURE__*/_jsx("span", {
|
|
121
123
|
ref: ref,
|
|
122
124
|
"aria-label": label,
|
|
125
|
+
...rest,
|
|
123
126
|
...mergeProps(themeProps('avatar-group-overflow'), stylex.props(styles.base, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), xstyle), className, style),
|
|
124
127
|
children: content
|
|
125
128
|
});
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -12,6 +12,13 @@
|
|
|
12
12
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
13
13
|
* - When children are provided, a collapse/expand toggle button appears in the end area
|
|
14
14
|
*
|
|
15
|
+
* Title and description render as <div> (not <p>): they accept arbitrary
|
|
16
|
+
* ReactNode content, and <p> cannot legally contain block-level children
|
|
17
|
+
* (the HTML parser reparents them, desyncing SSR markup from the hydrated
|
|
18
|
+
* DOM). Using <div> keeps these slots composable with any content. Their
|
|
19
|
+
* StyleX styles set margin: 0 and explicit typography, so the rendered
|
|
20
|
+
* appearance is identical to the previous <p>.
|
|
21
|
+
*
|
|
15
22
|
* SYNC: When modified, update these files to stay in sync:
|
|
16
23
|
* - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
|
|
17
24
|
* - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAW,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Hb;yBA1Ie,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -16,6 +16,13 @@
|
|
|
16
16
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
17
17
|
* - When children are provided, a collapse/expand toggle button appears in the end area
|
|
18
18
|
*
|
|
19
|
+
* Title and description render as <div> (not <p>): they accept arbitrary
|
|
20
|
+
* ReactNode content, and <p> cannot legally contain block-level children
|
|
21
|
+
* (the HTML parser reparents them, desyncing SSR markup from the hydrated
|
|
22
|
+
* DOM). Using <div> keeps these slots composable with any content. Their
|
|
23
|
+
* StyleX styles set margin: 0 and explicit typography, so the rendered
|
|
24
|
+
* appearance is identical to the previous <p>.
|
|
25
|
+
*
|
|
19
26
|
* SYNC: When modified, update these files to stay in sync:
|
|
20
27
|
* - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
|
|
21
28
|
* - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
|
|
@@ -291,12 +298,12 @@ export function Banner({
|
|
|
291
298
|
...{
|
|
292
299
|
className: "x78zum5 xdt5ytf xxhr3t x98rzlu xeuugli"
|
|
293
300
|
},
|
|
294
|
-
children: [/*#__PURE__*/_jsx("
|
|
301
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
295
302
|
...{
|
|
296
303
|
className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0"
|
|
297
304
|
},
|
|
298
305
|
children: title
|
|
299
|
-
}), description != null && /*#__PURE__*/_jsx("
|
|
306
|
+
}), description != null && /*#__PURE__*/_jsx("div", {
|
|
300
307
|
...{
|
|
301
308
|
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4"
|
|
302
309
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BA8CjB;yBA1De,UAAU"}
|
|
@@ -96,7 +96,13 @@ export function EmptyState({
|
|
|
96
96
|
1: {
|
|
97
97
|
className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
|
|
98
98
|
}
|
|
99
|
-
}[!!isCompact << 0], title), description != null &&
|
|
99
|
+
}[!!isCompact << 0], title), description != null &&
|
|
100
|
+
/*#__PURE__*/
|
|
101
|
+
// Rendered as <div> (not <p>): description accepts ReactNode and a
|
|
102
|
+
// <p> cannot legally contain block children, which causes hydration
|
|
103
|
+
// mismatches. The StyleX style sets margin: 0, so appearance is
|
|
104
|
+
// unchanged.
|
|
105
|
+
_jsx("div", {
|
|
100
106
|
...{
|
|
101
107
|
0: {
|
|
102
108
|
className: "x1ghz6dp xjb2p0i xjm74w1 x1sodnla xw6l6zx xv1l7n4"
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file HoverCard.tsx
|
|
3
|
-
* @input Uses React,
|
|
3
|
+
* @input Uses React, useHoverCard hook
|
|
4
4
|
* @output Exports HoverCard component for hover/focus triggered layers
|
|
5
|
-
* @position Layer component; uses inline-safe trigger wrapper and
|
|
5
|
+
* @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/HoverCard/HoverCard.test.tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAe,KAAK,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EAAC,qBAAqB,EAAC,MAAM,gBAAgB,CAAC;AAiB1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAgH/B;yBAhIe,SAAS"}
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file HoverCard.tsx
|
|
7
|
-
* @input Uses React,
|
|
7
|
+
* @input Uses React, useHoverCard hook
|
|
8
8
|
* @output Exports HoverCard component for hover/focus triggered layers
|
|
9
|
-
* @position Layer component; uses inline-safe trigger wrapper and
|
|
9
|
+
* @position Layer component; uses inline-safe trigger wrapper and renders the floating layer inline
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/HoverCard/HoverCard.test.tsx
|
|
@@ -14,8 +14,7 @@
|
|
|
14
14
|
* - /apps/storybook/stories/HoverCard.stories.tsx
|
|
15
15
|
* - /packages/cli/templates/blocks/components/HoverCard/ (showcase blocks)
|
|
16
16
|
*/
|
|
17
|
-
import
|
|
18
|
-
import { createPortal } from 'react-dom';
|
|
17
|
+
import { useCallback, useRef } from 'react';
|
|
19
18
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
20
19
|
import * as stylex from '@stylexjs/stylex';
|
|
21
20
|
import { useHoverCard } from "./useHoverCard.js";
|
|
@@ -125,11 +124,24 @@ export function HoverCard({
|
|
|
125
124
|
}
|
|
126
125
|
};
|
|
127
126
|
}, [textOnly, hoverCard.ref, hoverCard.describedBy]);
|
|
128
|
-
|
|
127
|
+
|
|
128
|
+
// Render the floating layer inline, in the same place on the server and the
|
|
129
|
+
// client. The layer is a `popover` element opened via the Popover API, so the
|
|
130
|
+
// browser promotes it to the top layer when shown — that already escapes
|
|
131
|
+
// ancestor clipping, stacking, and transform containing-block traps, and CSS
|
|
132
|
+
// anchor positioning resolves the trigger reference regardless of where the
|
|
133
|
+
// element sits in the DOM, so no portal is needed to "escape" layout.
|
|
134
|
+
//
|
|
135
|
+
// The layer renders as inline-safe phrasing markup (a `<span>`, see
|
|
136
|
+
// useHoverCard), which stays put inside a `<p>` instead of being reparented
|
|
137
|
+
// by the HTML parser. That keeps the server markup and the first client
|
|
138
|
+
// render identical, so there is no hydration mismatch — and it preserves the
|
|
139
|
+
// inline-safety guarantee (no block elements injected into a paragraph).
|
|
140
|
+
const renderedHoverCard = hoverCard.renderHoverCard(content, {
|
|
129
141
|
xstyle,
|
|
130
142
|
className,
|
|
131
143
|
style
|
|
132
|
-
})
|
|
144
|
+
});
|
|
133
145
|
|
|
134
146
|
// For text-only children: use inline span with ref on wrapper
|
|
135
147
|
if (textOnly) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA6C3B;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,kBAAkB,KACvB,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA2R5E"}
|
|
@@ -261,11 +261,14 @@ export function useHoverCard(options = {}) {
|
|
|
261
261
|
const renderProps = {
|
|
262
262
|
placement: renderPlacement,
|
|
263
263
|
alignment: props?.alignment ?? alignment,
|
|
264
|
-
xstyle: [popoverXstyle, layerAnimations[renderPlacement]]
|
|
264
|
+
xstyle: [popoverXstyle, layerAnimations[renderPlacement]],
|
|
265
|
+
// Render the layer as inline-safe phrasing markup so HoverCard stays
|
|
266
|
+
// valid (and hydration-stable) inside inline contexts like a `<p>`.
|
|
267
|
+
as: 'span'
|
|
265
268
|
};
|
|
266
|
-
return layer.render(/*#__PURE__*/_jsx("
|
|
269
|
+
return layer.render(/*#__PURE__*/_jsx("span", {
|
|
267
270
|
...mergeProps(themeProps('hovercard'), {
|
|
268
|
-
className: "x1vlblms xvmdzux x126nfab x1t818jl"
|
|
271
|
+
className: "x1lliihq x1vlblms xvmdzux x126nfab x1t818jl"
|
|
269
272
|
}),
|
|
270
273
|
onMouseEnter: () => {
|
|
271
274
|
isHoveringContentRef.current = true;
|
package/dist/Layer/useLayer.d.ts
CHANGED
|
@@ -38,6 +38,19 @@ export interface ContextRenderProps {
|
|
|
38
38
|
* Merged after StyleX and anchor positioning styles.
|
|
39
39
|
*/
|
|
40
40
|
style?: React.CSSProperties;
|
|
41
|
+
/**
|
|
42
|
+
* HTML tag to render the popover container as.
|
|
43
|
+
*
|
|
44
|
+
* Defaults to `'div'`. Pass `'span'` when the layer must render inline-safe
|
|
45
|
+
* markup — e.g. a `HoverCard` wrapping inline text inside a `<p>`. A `<span>`
|
|
46
|
+
* is phrasing content, so it stays put in the DOM tree instead of being
|
|
47
|
+
* reparented out of a paragraph by the HTML parser, which keeps server and
|
|
48
|
+
* client markup identical. The Popover API and CSS anchor positioning work
|
|
49
|
+
* the same on either tag.
|
|
50
|
+
*
|
|
51
|
+
* @default 'div'
|
|
52
|
+
*/
|
|
53
|
+
as?: 'div' | 'span';
|
|
41
54
|
}
|
|
42
55
|
/**
|
|
43
56
|
* Render props for fixed mode (manual coordinates)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2BnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,GAAG,EAAE,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACrE;AAuCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,GAAG,kBAAkB,CAAC;AAC3E,wBAAgB,QAAQ,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC"}
|
package/dist/Layer/useLayer.js
CHANGED
|
@@ -204,7 +204,8 @@ export function useLayer(options) {
|
|
|
204
204
|
alignment = 'center',
|
|
205
205
|
xstyle,
|
|
206
206
|
className: extraClassName,
|
|
207
|
-
style: extraStyle
|
|
207
|
+
style: extraStyle,
|
|
208
|
+
as: Container = 'div'
|
|
208
209
|
} = props || {};
|
|
209
210
|
|
|
210
211
|
// CSS anchor positioning (dynamic, not in StyleX)
|
|
@@ -215,7 +216,11 @@ export function useLayer(options) {
|
|
|
215
216
|
};
|
|
216
217
|
const stylexResult = stylex.props(styles.base, xstyle);
|
|
217
218
|
const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
|
|
218
|
-
|
|
219
|
+
|
|
220
|
+
// Render as the requested tag. A `span` keeps the layer phrasing content
|
|
221
|
+
// so it is valid (and stays put on hydration) inside inline contexts like
|
|
222
|
+
// a `<p>`; `div` remains the default for block layers.
|
|
223
|
+
return /*#__PURE__*/_jsx(Container, {
|
|
219
224
|
ref: popoverRefCallback,
|
|
220
225
|
id: id,
|
|
221
226
|
popover: lightDismiss ? 'auto' : 'manual',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/Markdown/Markdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -795,7 +795,17 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
|
|
|
795
795
|
children: paraChildren
|
|
796
796
|
}, index);
|
|
797
797
|
}
|
|
798
|
-
|
|
798
|
+
// Markdown paragraphs render as <div>, not <p>: inline content can
|
|
799
|
+
// include block-level nodes (images, custom inline components), and a
|
|
800
|
+
// <p> would reparent them, desyncing SSR markup from the hydrated DOM.
|
|
801
|
+
// Block spacing comes from token-based StyleX margins, so the rendered
|
|
802
|
+
// appearance is unchanged. role="paragraph" re-exposes the paragraph
|
|
803
|
+
// role in the accessibility tree (a pure ARIA hint — it does not trigger
|
|
804
|
+
// the parser's block-child reparenting) so prose semantics are preserved
|
|
805
|
+
// without the <p> composition hazard. Consumers who want a real <p>
|
|
806
|
+
// element can still pass components={{paragraph: 'p'}}.
|
|
807
|
+
return /*#__PURE__*/_jsx("div", {
|
|
808
|
+
role: "paragraph",
|
|
799
809
|
...stylex.props(spacing, contentWidthValue != null ? dynamicStyles.proseWidth(contentWidthValue) : null, contentAlign !== 'start' ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign]) : null, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
|
|
800
810
|
children: paraChildren
|
|
801
811
|
}, index);
|
|
@@ -953,12 +963,12 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
|
|
|
953
963
|
{
|
|
954
964
|
const safeSrc = sanitizeUrl(node.src);
|
|
955
965
|
if (safeSrc == null) {
|
|
956
|
-
return /*#__PURE__*/_jsxs("
|
|
966
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
957
967
|
...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
|
|
958
968
|
children: ["[", node.alt, "]"]
|
|
959
969
|
}, index);
|
|
960
970
|
}
|
|
961
|
-
return /*#__PURE__*/_jsx("
|
|
971
|
+
return /*#__PURE__*/_jsx("div", {
|
|
962
972
|
...stylex.props(spacing, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
|
|
963
973
|
children: /*#__PURE__*/_jsx("img", {
|
|
964
974
|
src: safeSrc,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+
|
|
1
|
+
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,MAAM,EACb,GAAG,GACJ,EAAE,cAAc,+BAwKhB;yBArLe,SAAS"}
|
|
@@ -233,8 +233,21 @@ export function MobileNav({
|
|
|
233
233
|
return () => {
|
|
234
234
|
if (closeTimeoutRef.current) {
|
|
235
235
|
clearTimeout(closeTimeoutRef.current);
|
|
236
|
+
closeTimeoutRef.current = null;
|
|
236
237
|
}
|
|
237
238
|
document.documentElement.style.overflow = '';
|
|
239
|
+
// Close the native dialog on teardown if it's still open. Inside AppShell
|
|
240
|
+
// the drawer is mounted in an <Activity> that switches to mode="hidden"
|
|
241
|
+
// when the drawer closes; React then runs this cleanup (with a stale
|
|
242
|
+
// isOpen) instead of re-running the effect with isOpen=false, so the
|
|
243
|
+
// close branch above never fires. If we leave the <dialog> `open` here,
|
|
244
|
+
// showModal() is skipped on the next open (the dialog is already open in
|
|
245
|
+
// the hidden tree) and the drawer can never be re-opened. Closing it
|
|
246
|
+
// unconditionally on teardown keeps the native dialog state in sync so a
|
|
247
|
+
// subsequent open cleanly calls showModal() again.
|
|
248
|
+
if (dialog.open) {
|
|
249
|
+
dialog.close();
|
|
250
|
+
}
|
|
238
251
|
};
|
|
239
252
|
}, [isOpen, side]);
|
|
240
253
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,
|
|
1
|
+
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAwhBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -105,7 +105,7 @@ function TableRowInner({
|
|
|
105
105
|
CellComponent
|
|
106
106
|
}) {
|
|
107
107
|
// Build cells first
|
|
108
|
-
const cells = columns.map(col => {
|
|
108
|
+
const cells = columns.map((col, columnIndex) => {
|
|
109
109
|
// Apply column alignment to body cells
|
|
110
110
|
const initialCellHtmlProps = {};
|
|
111
111
|
if (col.align) {
|
|
@@ -113,10 +113,13 @@ function TableRowInner({
|
|
|
113
113
|
textAlign: col.align
|
|
114
114
|
};
|
|
115
115
|
}
|
|
116
|
-
const
|
|
116
|
+
const initialBodyCellRenderProps = {
|
|
117
117
|
htmlProps: initialCellHtmlProps,
|
|
118
|
-
styles: []
|
|
119
|
-
|
|
118
|
+
styles: [],
|
|
119
|
+
columnIndex,
|
|
120
|
+
columns: columns
|
|
121
|
+
};
|
|
122
|
+
const cellRenderProps = applyPlugins(plugins, p => p.transformBodyCell, initialBodyCellRenderProps, col, item, columnIndex, columns);
|
|
120
123
|
const isDefaultRenderer = !col.renderCell;
|
|
121
124
|
const rawContent = isDefaultRenderer ? defaultCellRenderer(item, col.key) : col.renderCell?.(item) ?? null;
|
|
122
125
|
|
|
@@ -265,7 +268,7 @@ function BaseTableInner({
|
|
|
265
268
|
});
|
|
266
269
|
|
|
267
270
|
// --- Plugin pipeline: header cells ---
|
|
268
|
-
const headerCells = resolvedColumns.map(col => {
|
|
271
|
+
const headerCells = resolvedColumns.map((col, columnIndex) => {
|
|
269
272
|
const headerContent = col.header ?? col.key;
|
|
270
273
|
|
|
271
274
|
// Build initial htmlProps with column alignment if specified
|
|
@@ -277,11 +280,14 @@ function BaseTableInner({
|
|
|
277
280
|
textAlign: col.align
|
|
278
281
|
};
|
|
279
282
|
}
|
|
280
|
-
const
|
|
283
|
+
const initialHeaderRenderProps = {
|
|
281
284
|
htmlProps: initialHeaderHtmlProps,
|
|
282
285
|
styles: [],
|
|
283
|
-
content: headerContent
|
|
284
|
-
|
|
286
|
+
content: headerContent,
|
|
287
|
+
columnIndex,
|
|
288
|
+
columns: resolvedColumns
|
|
289
|
+
};
|
|
290
|
+
const cellRenderProps = applyPlugins(plugins, p => p.transformHeaderCell, initialHeaderRenderProps, col, columnIndex, resolvedColumns);
|
|
285
291
|
|
|
286
292
|
// Apply pre-computed column width styles on the <th>.
|
|
287
293
|
// With table-layout: fixed, header cell sizing controls column widths.
|
|
@@ -381,8 +387,20 @@ function BaseTableInner({
|
|
|
381
387
|
// when columns exceed the container width. This wrapper sits between
|
|
382
388
|
// the <table> and transformTableContext, so plugin chrome (pagination,
|
|
383
389
|
// toolbars) renders outside the scroll area.
|
|
390
|
+
//
|
|
391
|
+
// Before rendering the wrapper, run the plugin `transformScrollWrapper`
|
|
392
|
+
// pipeline so plugins can attach a ref to the scroll container (scroll-aware
|
|
393
|
+
// sticky shadows, virtualization) and inject before/after chrome.
|
|
384
394
|
if (ScrollWrapper) {
|
|
395
|
+
const scrollWrapperRenderProps = applyPlugins(plugins, p => p.transformScrollWrapper, {
|
|
396
|
+
htmlProps: {},
|
|
397
|
+
styles: []
|
|
398
|
+
});
|
|
385
399
|
tableElement = /*#__PURE__*/_jsx(ScrollWrapper, {
|
|
400
|
+
htmlProps: scrollWrapperRenderProps.htmlProps,
|
|
401
|
+
styles: scrollWrapperRenderProps.styles,
|
|
402
|
+
beforeTable: scrollWrapperRenderProps.beforeTable,
|
|
403
|
+
afterTable: scrollWrapperRenderProps.afterTable,
|
|
386
404
|
children: tableElement
|
|
387
405
|
});
|
|
388
406
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,YAAY,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,WAAW,EAEZ,MAAM,SAAS,CAAC;AAOjB,oDAAoD;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE/D,kCAAkC;AAElC,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,8DAA8D;AAE9D,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD;;;;;GAKG;AAEH,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAE,SAAQ,IAAI,CACzE,cAAc,CAAC,CAAC,CAAC,EACjB,SAAS,GAAG,YAAY,CACzB;IACC,uCAAuC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACnC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC1C;AAiJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,KAAK,EAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACjD,YAAY,CAAC"}
|
package/dist/Table/Table.js
CHANGED
|
@@ -41,7 +41,7 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
41
41
|
*
|
|
42
42
|
* @template T - The row data type
|
|
43
43
|
*/
|
|
44
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
44
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
45
45
|
// =============================================================================
|
|
46
46
|
// StyleX Styles (table-level only; cell/row/header styles owned by components)
|
|
47
47
|
// =============================================================================
|
|
@@ -53,14 +53,37 @@ const tableStyles = {
|
|
|
53
53
|
$$css: true
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
|
+
const scrollWrapperStyles = {
|
|
57
|
+
base: {
|
|
58
|
+
kXHlph: "xw2csxc",
|
|
59
|
+
kuHK5b: "x5lxg6s",
|
|
60
|
+
$$css: true
|
|
61
|
+
},
|
|
62
|
+
containerBleed: {
|
|
63
|
+
keTefX: "xojxgvx",
|
|
64
|
+
k71WvV: "x1fcf3bl",
|
|
65
|
+
kzqmXN: "xx6qvi6",
|
|
66
|
+
keoZOQ: "xkibk3",
|
|
67
|
+
k1K539: "xlayyun",
|
|
68
|
+
$$css: true
|
|
69
|
+
}
|
|
70
|
+
};
|
|
56
71
|
function TableScrollWrapper({
|
|
57
|
-
children
|
|
72
|
+
children,
|
|
73
|
+
htmlProps,
|
|
74
|
+
styles: pluginStyles,
|
|
75
|
+
beforeTable,
|
|
76
|
+
afterTable
|
|
58
77
|
}) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
78
|
+
const {
|
|
79
|
+
ref,
|
|
80
|
+
...restHtmlProps
|
|
81
|
+
} = htmlProps ?? {};
|
|
82
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
83
|
+
ref: ref,
|
|
84
|
+
...restHtmlProps,
|
|
85
|
+
...mergeProps(themeProps('table-scroll-wrapper'), stylex.props(scrollWrapperStyles.base, scrollWrapperStyles.containerBleed, ...(pluginStyles ?? []))),
|
|
86
|
+
children: [beforeTable, children, afterTable]
|
|
64
87
|
});
|
|
65
88
|
}
|
|
66
89
|
|
package/dist/Table/index.d.ts
CHANGED
|
@@ -22,10 +22,11 @@ export { useTablePagination, paginateData } from './plugins/pagination';
|
|
|
22
22
|
export { useTableColumnSettings } from './plugins/columnSettings';
|
|
23
23
|
export { useTableColumnSettingsState } from './plugins/columnSettings';
|
|
24
24
|
export { useTableColumnResize } from './plugins/columnResize';
|
|
25
|
+
export { useTableStickyColumns } from './plugins/stickyColumns';
|
|
25
26
|
export { useTableFiltering, useTableFilterState, toSearchFilters, } from './plugins/filtering';
|
|
26
27
|
export { useBaseTablePlugins } from './useBaseTablePlugins';
|
|
27
28
|
export { proportional, pixel, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH, } from './columnUtils';
|
|
28
|
-
export type { TableColumn, TableColumnAlign, TableVerticalAlign, ColumnWidth, ProportionalWidth, PixelWidth, TablePlugin, TableRenderProps, HeaderRowRenderProps, HeaderCellRenderProps, BodyRowRenderProps, BodyCellRenderProps, BaseTableProps, } from './types';
|
|
29
|
+
export type { TableColumn, TableColumnAlign, TableVerticalAlign, ColumnWidth, ProportionalWidth, PixelWidth, TablePlugin, TableRenderProps, HeaderRowRenderProps, HeaderCellRenderProps, BodyRowRenderProps, BodyCellRenderProps, ScrollWrapperRenderProps, BaseTableProps, } from './types';
|
|
29
30
|
export type { TableProps, TableDensity, TableDividers, TableTextOverflow, } from './Table';
|
|
30
31
|
export type { TableRowProps } from './TableRow';
|
|
31
32
|
export type { TableCellProps } from './TableCell';
|
|
@@ -42,5 +43,6 @@ export type { UseTablePaginationConfig } from './plugins/pagination';
|
|
|
42
43
|
export type { UseTableColumnSettingsConfig, ColumnSettingsOption, } from './plugins/columnSettings';
|
|
43
44
|
export type { UseTableColumnSettingsStateConfig, UseTableColumnSettingsStateReturn, } from './plugins/columnSettings';
|
|
44
45
|
export type { UseTableColumnResizeConfig } from './plugins/columnResize';
|
|
46
|
+
export type { UseTableStickyColumnsConfig } from './plugins/stickyColumns';
|
|
45
47
|
export type { UseTableFilteringConfig, TableFilterState, TableFilterVariant, TableFilterValue, TableFilterFieldRef, } from './plugins/filtering';
|
|
46
48
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"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"}
|
package/dist/Table/index.js
CHANGED
|
@@ -26,6 +26,7 @@ export { useTablePagination, paginateData } from "./plugins/pagination/index.js"
|
|
|
26
26
|
export { useTableColumnSettings } from "./plugins/columnSettings/index.js";
|
|
27
27
|
export { useTableColumnSettingsState } from "./plugins/columnSettings/index.js";
|
|
28
28
|
export { useTableColumnResize } from "./plugins/columnResize/index.js";
|
|
29
|
+
export { useTableStickyColumns } from "./plugins/stickyColumns/index.js";
|
|
29
30
|
export { useTableFiltering, useTableFilterState, toSearchFilters } from "./plugins/filtering/index.js";
|
|
30
31
|
export { useBaseTablePlugins } from "./useBaseTablePlugins.js";
|
|
31
32
|
export { proportional, pixel, generateColumns, resolveColumnWidths, DEFAULT_MIN_COLUMN_WIDTH } from "./columnUtils.js";
|