@astryxdesign/core 0.2.0-canary.33d4e98 → 0.2.0-canary.531fb34
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/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +9 -1
- package/dist/DropdownMenu/menuItemHover.d.ts +1 -0
- package/dist/DropdownMenu/menuItemHover.d.ts.map +1 -1
- package/dist/DropdownMenu/menuItemHover.js +1 -0
- package/dist/Field/FieldLabel.d.ts +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +7 -3
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +12 -2
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +3 -2
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +1 -1
- package/dist/Text/Text.d.ts +10 -1
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +25 -2
- package/dist/Text/index.d.ts +2 -2
- package/dist/Text/index.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +51 -45
- package/dist/Timestamp/Timestamp.js +1 -1
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +9 -3
- package/dist/astryx.css +35 -5
- package/dist/astryx.umd.js +43 -43
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/containerReveal.pool.stylex.d.ts +281 -0
- package/dist/hooks/containerReveal.pool.stylex.d.ts.map +1 -0
- package/dist/hooks/containerReveal.pool.stylex.js +281 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useContainerReveal.d.ts +83 -0
- package/dist/hooks/useContainerReveal.d.ts.map +1 -0
- package/dist/hooks/useContainerReveal.js +123 -0
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +11 -0
- package/dist/theme/index.d.ts +3 -3
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/types.d.ts +39 -2
- package/dist/theme/types.d.ts.map +1 -1
- package/locales/en.json +8 -0
- package/locales/pseudo.json +6 -0
- package/package.json +2 -2
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +29 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +13 -5
- package/src/DropdownMenu/menuItemHover.ts +1 -0
- package/src/Field/Field.doc.mjs +4 -0
- package/src/Field/FieldLabel.test.tsx +25 -0
- package/src/Field/FieldLabel.tsx +11 -2
- package/src/FieldStatus/FieldStatus.doc.mjs +1 -0
- package/src/FieldStatus/FieldStatus.test.tsx +61 -0
- package/src/FieldStatus/FieldStatus.tsx +14 -3
- package/src/Heading/Heading.tsx +2 -1
- package/src/MultiSelector/MultiSelector.tsx +6 -5
- package/src/Text/Heading.doc.mjs +3 -3
- package/src/Text/Text.doc.mjs +1 -1
- package/src/Text/Text.test.tsx +42 -0
- package/src/Text/Text.tsx +25 -1
- package/src/Text/index.ts +2 -6
- package/src/Thumbnail/Thumbnail.test.tsx +24 -1
- package/src/Thumbnail/Thumbnail.tsx +27 -34
- package/src/TopNav/TopNavMegaMenu.tsx +26 -2
- package/src/__tests__/babelPluginAddExtensions.test.ts +190 -0
- package/src/hooks/containerReveal.pool.stylex.ts +464 -0
- package/src/hooks/index.ts +7 -0
- package/src/hooks/useContainerReveal.test.tsx +116 -0
- package/src/hooks/useContainerReveal.ts +180 -0
- package/src/hooks/useInputStatusIcon.test.tsx +59 -0
- package/src/hooks/useInputStatusIcon.tsx +12 -1
- package/src/theme/index.ts +4 -8
- package/src/theme/types.ts +43 -13
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +0 -9
- package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +0 -1
- package/dist/Thumbnail/thumbnail.markers.stylex.js +0 -14
- package/src/Thumbnail/thumbnail.markers.stylex.ts +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CA2UX;yBA7Ue,mBAAmB"}
|
|
@@ -53,6 +53,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
53
53
|
import { themeProps } from "../utils/themeProps.js";
|
|
54
54
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
|
|
55
55
|
import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
56
|
+
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
56
57
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
57
58
|
const triggerStyles = {
|
|
58
59
|
root: {
|
|
@@ -65,7 +66,6 @@ const triggerStyles = {
|
|
|
65
66
|
kGuDYH: "xcr08ib",
|
|
66
67
|
kMwMTN: "x1tgivj0",
|
|
67
68
|
kWkggS: "xjbqb8w x1c52tdz",
|
|
68
|
-
kHE3J0: "xe9uy6x",
|
|
69
69
|
kkrTdU: "x1ypdohk",
|
|
70
70
|
k9WMMc: "x1yc453h",
|
|
71
71
|
kI3sdo: "x1a2a7pz",
|
|
@@ -281,6 +281,13 @@ export function DropdownMenuSubMenu(props) {
|
|
|
281
281
|
}
|
|
282
282
|
}, [isDisabled, open]);
|
|
283
283
|
|
|
284
|
+
// Move the single focus-driven highlight onto the trigger as the pointer
|
|
285
|
+
// enters it, so a sibling item that still holds focus doesn't stay
|
|
286
|
+
// highlighted alongside the hovered trigger. This is separate from the
|
|
287
|
+
// hover-open intent (onMouseEnter/onMouseLeave) — the flyout still opens on
|
|
288
|
+
// the hover delay; this only keeps the highlight single.
|
|
289
|
+
const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
|
|
290
|
+
|
|
284
291
|
// Enter/Space activate the focused row; typeahead jumps by first character;
|
|
285
292
|
// the close key (Left, or Right in RTL) returns focus to the trigger;
|
|
286
293
|
// arrows/Home/End defer to useListFocus (RTL-aware).
|
|
@@ -378,6 +385,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
378
385
|
"data-testid": testId,
|
|
379
386
|
onMouseEnter: triggerProps.onMouseEnter,
|
|
380
387
|
onMouseLeave: triggerProps.onMouseLeave,
|
|
388
|
+
onPointerMove: handlePointerMove,
|
|
381
389
|
startContent: icon ? renderIconSlot(icon, {
|
|
382
390
|
size: 'sm',
|
|
383
391
|
color: 'secondary'
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
|
|
13
13
|
* - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
|
|
14
14
|
* - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
|
|
15
|
+
* - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
|
|
15
16
|
*/
|
|
16
17
|
import type { PointerEvent } from 'react';
|
|
17
18
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuItemHover.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemHover.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"menuItemHover.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemHover.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,EAC5B,UAAU,CAAC,EAAE,OAAO,GACnB,IAAI,CAQN"}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
* - /packages/core/src/DropdownMenu/DropdownMenuItem.tsx
|
|
17
17
|
* - /packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.tsx
|
|
18
18
|
* - /packages/core/src/DropdownMenu/DropdownMenuRadioItem.tsx
|
|
19
|
+
* - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.tsx
|
|
19
20
|
*/
|
|
20
21
|
/**
|
|
21
22
|
* Move focus to a menu item as the pointer moves over it, so hover and
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file FieldLabel.tsx
|
|
3
|
-
* @input Uses React, Icon, IconType
|
|
3
|
+
* @input Uses React, Icon, IconType, useTranslator
|
|
4
4
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
5
5
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
6
6
|
*
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
9
9
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
10
10
|
* - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
|
|
11
|
+
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
11
12
|
*/
|
|
12
13
|
import type { ReactNode } from 'react';
|
|
13
14
|
import type { BaseProps } from '../BaseProps';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAmD5D,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA+DjB;yBAjFe,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
3
5
|
/**
|
|
4
6
|
* @file FieldLabel.tsx
|
|
5
|
-
* @input Uses React, Icon, IconType
|
|
7
|
+
* @input Uses React, Icon, IconType, useTranslator
|
|
6
8
|
* @output Exports FieldLabel component, FieldLabelProps
|
|
7
9
|
* @position Core label implementation; used by Field, CheckboxInput, Switch
|
|
8
10
|
*
|
|
@@ -10,14 +12,15 @@
|
|
|
10
12
|
* - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
|
|
11
13
|
* - /packages/core/src/Field/index.ts (exports if types change)
|
|
12
14
|
* - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
|
|
15
|
+
* - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
|
|
13
16
|
*/
|
|
14
|
-
|
|
15
17
|
import * as stylex from '@stylexjs/stylex';
|
|
16
18
|
import { mergeProps } from "../utils/index.js";
|
|
17
19
|
import "../theme/tokens.stylex.js";
|
|
18
20
|
import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
19
21
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
20
22
|
import { Tooltip } from "../Tooltip/index.js";
|
|
23
|
+
import { useTranslator } from "../i18n/index.js";
|
|
21
24
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
25
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
23
26
|
const styles = {
|
|
@@ -87,7 +90,8 @@ export function FieldLabel({
|
|
|
87
90
|
ref,
|
|
88
91
|
...rest
|
|
89
92
|
}) {
|
|
90
|
-
const
|
|
93
|
+
const t = useTranslator();
|
|
94
|
+
const statusText = isOptional ? t('@astryx.field.optional') : isRequired ? t('@astryx.field.required') : null;
|
|
91
95
|
|
|
92
96
|
// A group label (e.g. for a radiogroup) must not be a literal `<label>`
|
|
93
97
|
// element: a `<label>` semantically names a single form control and can't be
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAoEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAoEpD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,QAAQ,EAAE,IAAI,CAAC;IACf,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAsDlB;yBAhEe,WAAW"}
|
|
@@ -48,8 +48,8 @@ const styles = {
|
|
|
48
48
|
kLKAdn: "x1ak3mig",
|
|
49
49
|
kGO01o: "x1wesfrj",
|
|
50
50
|
kg3NbH: "xf314gf",
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
kVL7Gh: "xquck67",
|
|
52
|
+
kT0f0o: "x14i3lts",
|
|
53
53
|
$$css: true
|
|
54
54
|
},
|
|
55
55
|
detached: {
|
|
@@ -172,6 +172,16 @@ export function FieldStatus({
|
|
|
172
172
|
icon: statusIconMap[type],
|
|
173
173
|
size: "sm",
|
|
174
174
|
color: "inherit"
|
|
175
|
+
// Stable theme target on the detached message box's leading glyph
|
|
176
|
+
// itself, so a theme can restyle just this icon (color, size) —
|
|
177
|
+
// and each status — via `defineTheme`. Same-element rules in
|
|
178
|
+
// @layer astryx-theme win over the icon's own base
|
|
179
|
+
// width/height/fontSize, which a field-level target could not
|
|
180
|
+
// reach.
|
|
181
|
+
,
|
|
182
|
+
...themeProps('field-status-icon', {
|
|
183
|
+
type
|
|
184
|
+
})
|
|
175
185
|
})
|
|
176
186
|
}), /*#__PURE__*/_jsx("span", {
|
|
177
187
|
children: message
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAmFd;yBAtGe,OAAO"}
|
package/dist/Heading/Heading.js
CHANGED
|
@@ -20,10 +20,11 @@ import { lazy, Suspense, useRef } from 'react';
|
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, truncationTooltipStyles } from "../Text/text.stylex.js";
|
|
22
22
|
import { useTruncation } from "../Text/useTruncation.js";
|
|
23
|
+
import { resolveStyleColor } from "../Text/Text.js";
|
|
23
24
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
24
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
26
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
|
-
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import(
|
|
27
|
+
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
27
28
|
default: mod.Tooltip
|
|
28
29
|
})));
|
|
29
30
|
|
|
@@ -119,7 +120,7 @@ export function Heading({
|
|
|
119
120
|
...(type && {
|
|
120
121
|
type
|
|
121
122
|
})
|
|
122
|
-
}), stylex.props(colorStyles[color], type ? sizeByTypeStyles[type] : sizeByLevelStyles[level], type && defaultWeightByTypeStyles[type],
|
|
123
|
+
}), stylex.props(colorStyles[resolveStyleColor(color)], type ? sizeByTypeStyles[type] : sizeByLevelStyles[level], type && defaultWeightByTypeStyles[type],
|
|
123
124
|
// Display: use truncation styles when maxLines > 0
|
|
124
125
|
maxLines === 1 ? truncationStyles.singleLine : maxLines > 1 ? truncationStyles.multiLine : displayStyles[resolvedDisplay],
|
|
125
126
|
// Word break when truncating
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAiBlB,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAWjB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -793,7 +793,7 @@ export function MultiSelector({
|
|
|
793
793
|
onKeyDown: onKeyDown,
|
|
794
794
|
tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
|
|
795
795
|
...{
|
|
796
|
-
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz
|
|
796
|
+
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz xh6dtrn"
|
|
797
797
|
},
|
|
798
798
|
children: /*#__PURE__*/_jsx("span", {
|
|
799
799
|
...{
|
package/dist/Text/Text.d.ts
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* - /packages/cli/templates/blocks/components/Text/ (showcase blocks)
|
|
13
13
|
*/
|
|
14
14
|
import { type ReactNode } from 'react';
|
|
15
|
-
import type { TextType, TextSize, TextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap } from '../theme/types';
|
|
15
|
+
import type { TextType, TextSize, TextColor, BuiltinTextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap } from '../theme/types';
|
|
16
16
|
import type { LayerPlacement } from '../Layer';
|
|
17
17
|
import type { BaseProps } from '../BaseProps';
|
|
18
18
|
export type { TextType, TextSize };
|
|
@@ -104,6 +104,15 @@ export interface TextProps extends Omit<BaseProps, 'children'> {
|
|
|
104
104
|
*/
|
|
105
105
|
as?: 'span' | 'p' | 'div' | 'label' | 'h1' | 'h2' | 'h3';
|
|
106
106
|
}
|
|
107
|
+
/**
|
|
108
|
+
* Resolve the StyleX baseline color. Built-in colors map to their own color
|
|
109
|
+
* style; custom (theme-defined) colors fall back to the `primary` baseline —
|
|
110
|
+
* their actual color comes from theme CSS (`.astryx-text.<color>` /
|
|
111
|
+
* `.astryx-heading.<color>`), which the rendered `color` class targets.
|
|
112
|
+
*
|
|
113
|
+
* Exported so Heading applies the same custom-color fallback as Text.
|
|
114
|
+
*/
|
|
115
|
+
export declare function resolveStyleColor(color: TextColor): BuiltinTextColor;
|
|
107
116
|
/**
|
|
108
117
|
* Semantic text component. Renders text with type-based styling from the theme.
|
|
109
118
|
*
|
package/dist/Text/Text.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,QAAQ,EAER,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1D;AA2BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,iBAAyB,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAkB,EACtB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,QAAQ,EAER,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1D;AA2BD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAQpE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,iBAAyB,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAkB,EACtB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwFX;yBA7Ge,IAAI"}
|
package/dist/Text/Text.js
CHANGED
|
@@ -22,7 +22,7 @@ import { useTruncation } from "./useTruncation.js";
|
|
|
22
22
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
|
-
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import(
|
|
25
|
+
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
26
26
|
default: mod.Tooltip
|
|
27
27
|
})));
|
|
28
28
|
// Default color by text type — custom types fall back to 'primary'
|
|
@@ -50,6 +50,24 @@ function resolveStyleType(type) {
|
|
|
50
50
|
return 'body';
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
/**
|
|
54
|
+
* Resolve the StyleX baseline color. Built-in colors map to their own color
|
|
55
|
+
* style; custom (theme-defined) colors fall back to the `primary` baseline —
|
|
56
|
+
* their actual color comes from theme CSS (`.astryx-text.<color>` /
|
|
57
|
+
* `.astryx-heading.<color>`), which the rendered `color` class targets.
|
|
58
|
+
*
|
|
59
|
+
* Exported so Heading applies the same custom-color fallback as Text.
|
|
60
|
+
*/
|
|
61
|
+
export function resolveStyleColor(color) {
|
|
62
|
+
// The `in` guard is a runtime check for consumer-augmented custom colors
|
|
63
|
+
// (which widen `TextColor` beyond the built-ins via TextColorMap); within
|
|
64
|
+
// core the two types coincide, so no cast is needed.
|
|
65
|
+
if (color in colorStyles) {
|
|
66
|
+
return color;
|
|
67
|
+
}
|
|
68
|
+
return 'primary';
|
|
69
|
+
}
|
|
70
|
+
|
|
53
71
|
/**
|
|
54
72
|
* Semantic text component. Renders text with type-based styling from the theme.
|
|
55
73
|
*
|
|
@@ -93,6 +111,11 @@ export function Text({
|
|
|
93
111
|
// Resolve style type — custom types fall back to 'body' for StyleX baseline
|
|
94
112
|
const styleType = resolveStyleType(type);
|
|
95
113
|
|
|
114
|
+
// Resolve style color — custom colors fall back to 'primary' for StyleX
|
|
115
|
+
// baseline; the real color comes from theme CSS via the rendered `color`
|
|
116
|
+
// class (see themeProps below).
|
|
117
|
+
const styleColor = resolveStyleColor(resolvedColor);
|
|
118
|
+
|
|
96
119
|
// Resolve wordBreak with smart default
|
|
97
120
|
const resolvedWordBreak = wordBreak ?? (maxLines === 1 ? 'break-all' : 'break-word');
|
|
98
121
|
|
|
@@ -122,7 +145,7 @@ export function Text({
|
|
|
122
145
|
type,
|
|
123
146
|
size,
|
|
124
147
|
color: resolvedColor
|
|
125
|
-
}), stylex.props(colorStyles[
|
|
148
|
+
}), stylex.props(colorStyles[styleColor], sizeByTypeStyles[styleType], size && sizeStyles[size], defaultWeightByTypeStyles[styleType], weight && weightStyles[weight],
|
|
126
149
|
// Display: use truncation styles when maxLines > 0
|
|
127
150
|
maxLines === 1 ? truncationStyles.singleLine : maxLines > 1 ? truncationStyles.multiLine : displayStyles[resolvedDisplay],
|
|
128
151
|
// Word break when truncating
|
package/dist/Text/index.d.ts
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* @file Text component exports
|
|
3
3
|
* @position Entry point for Text components
|
|
4
4
|
*/
|
|
5
|
-
export { Text, type TextProps, type TextType, type TextSize
|
|
5
|
+
export { Text, type TextProps, type TextType, type TextSize } from './Text';
|
|
6
6
|
export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, } from '../Heading';
|
|
7
|
-
export type { TextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types';
|
|
7
|
+
export type { TextColor, TextColorMap, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types';
|
|
8
8
|
export { useTruncation, type UseTruncationOptions, type UseTruncationReturn, } from './useTruncation';
|
|
9
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/Text/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAC1E,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AAGpB,YAAY,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,YAAY,GACb,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmJD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA+IhB;yBA9Je,SAAS"}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
* - /apps/storybook/stories/Thumbnail.stories.tsx
|
|
25
25
|
* - /packages/cli/templates/blocks/components/Thumbnail/ (showcase blocks)
|
|
26
26
|
*/
|
|
27
|
+
import { useState } from 'react';
|
|
27
28
|
import * as stylex from '@stylexjs/stylex';
|
|
28
29
|
import "../theme/tokens.stylex.js";
|
|
29
30
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -33,11 +34,10 @@ import { Skeleton } from "../Skeleton/index.js";
|
|
|
33
34
|
import { Spinner } from "../Spinner/index.js";
|
|
34
35
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
35
36
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
37
|
+
import { useContainerReveal } from "../hooks/useContainerReveal.js";
|
|
36
38
|
import { mergeProps } from "../utils/index.js";
|
|
37
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
40
|
import { useTranslator } from "../i18n/index.js";
|
|
39
|
-
import "./thumbnail.markers.stylex.js";
|
|
40
|
-
import { thumbnailScope } from "./thumbnail.markers.stylex.js";
|
|
41
41
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
42
42
|
// =============================================================================
|
|
43
43
|
// Styles
|
|
@@ -53,38 +53,6 @@ const styles = {
|
|
|
53
53
|
kHBbk8: "xc8icb0",
|
|
54
54
|
$$css: true
|
|
55
55
|
},
|
|
56
|
-
imageContainer: {
|
|
57
|
-
kVAEAm: "x1n2onr6",
|
|
58
|
-
kzqmXN: "xh8yej3",
|
|
59
|
-
kOBAk4: "x1plog1",
|
|
60
|
-
kaIpWk: "xh6dtrn",
|
|
61
|
-
kVQacm: "xb3r6kr",
|
|
62
|
-
kWkggS: "x17x4s8c",
|
|
63
|
-
$$css: true
|
|
64
|
-
},
|
|
65
|
-
interactive: {
|
|
66
|
-
kkrTdU: "x1ypdohk",
|
|
67
|
-
kI3sdo: "x1irc7jg",
|
|
68
|
-
kInvED: "x1wfwxd8 xdjuwb3",
|
|
69
|
-
$$css: true
|
|
70
|
-
},
|
|
71
|
-
overlay: {
|
|
72
|
-
k5JduY: "x1s928wv",
|
|
73
|
-
kwXMNM: "x1j6awrg",
|
|
74
|
-
kv0HGH: "xarstr8",
|
|
75
|
-
kUfP38: "x1k48kgn",
|
|
76
|
-
kloYau: "x2q1x1w",
|
|
77
|
-
kRicXK: "x1ywzrc5",
|
|
78
|
-
kPNhGg: "x97pup0",
|
|
79
|
-
kA8PQs: "x1dlmc9c",
|
|
80
|
-
ks3ayO: "xyhc2n1",
|
|
81
|
-
kAcZsS: "x1k7wiig",
|
|
82
|
-
$$css: true
|
|
83
|
-
},
|
|
84
|
-
hoverOnPointer: {
|
|
85
|
-
kJs8I2: "xi14tyy",
|
|
86
|
-
$$css: true
|
|
87
|
-
},
|
|
88
56
|
removeButtonOverrides: {
|
|
89
57
|
"--_button-radius": "xh8ntw8",
|
|
90
58
|
kZKoxP: "x1qx5ct2",
|
|
@@ -157,14 +125,25 @@ export function Thumbnail({
|
|
|
157
125
|
...props
|
|
158
126
|
}) {
|
|
159
127
|
const t = useTranslator();
|
|
128
|
+
|
|
129
|
+
// Track the exact src that failed (rather than a boolean) so a changed src
|
|
130
|
+
// gets a fresh load attempt instead of the stale error.
|
|
131
|
+
const [erroredSrc, setErroredSrc] = useState(undefined);
|
|
160
132
|
const hasSrc = src != null;
|
|
133
|
+
const hasError = hasSrc && erroredSrc === src;
|
|
161
134
|
const showSkeleton = isLoading && !hasSrc;
|
|
162
|
-
const showImage = hasSrc && !showSkeleton;
|
|
135
|
+
const showImage = hasSrc && !showSkeleton && !hasError;
|
|
163
136
|
const showUploadOverlay = isLoading && hasSrc;
|
|
164
|
-
const showPlaceholder = !isLoading && !hasSrc;
|
|
137
|
+
const showPlaceholder = !isLoading && !hasSrc || hasError;
|
|
165
138
|
const isInteractive = onClick != null && !isDisabled && !isLoading;
|
|
166
139
|
const hasRemove = onRemove != null && !isDisabled;
|
|
167
140
|
const isHoverReveal = hasRemove && showRemoveOn === 'hover';
|
|
141
|
+
const {
|
|
142
|
+
getContainerProps,
|
|
143
|
+
getContentRevealProps
|
|
144
|
+
} = useContainerReveal({
|
|
145
|
+
isEnabled: isHoverReveal
|
|
146
|
+
});
|
|
168
147
|
const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? t('@astryx.thumbnail.fallbackName');
|
|
169
148
|
|
|
170
149
|
// Without `alt`, the image is explicitly decorative rather than silently
|
|
@@ -184,6 +163,7 @@ export function Thumbnail({
|
|
|
184
163
|
alt: alt ?? '',
|
|
185
164
|
role: isImageDecorative ? 'presentation' : undefined,
|
|
186
165
|
"aria-hidden": isImageDecorative || undefined,
|
|
166
|
+
onError: () => setErroredSrc(src),
|
|
187
167
|
...{
|
|
188
168
|
className: "xh8yej3 x5yr21d xl1xv1r x1lliihq"
|
|
189
169
|
}
|
|
@@ -197,14 +177,15 @@ export function Thumbnail({
|
|
|
197
177
|
})]
|
|
198
178
|
});
|
|
199
179
|
const removeButtonEl = hasRemove ? /*#__PURE__*/_jsx("div", {
|
|
200
|
-
...{
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
180
|
+
...mergeProps({
|
|
181
|
+
className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
|
|
182
|
+
},
|
|
183
|
+
// The remove button is absolutely positioned in the corner, so it is
|
|
184
|
+
// already out of flow — an opacity-only reveal (layout preserved)
|
|
185
|
+
// matches its overlay placement instead of the clip recipe.
|
|
186
|
+
isHoverReveal ? getContentRevealProps({
|
|
187
|
+
isLayoutPreserved: true
|
|
188
|
+
}) : {}),
|
|
208
189
|
children: /*#__PURE__*/_jsx(Button, {
|
|
209
190
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
210
191
|
icon: "close",
|
|
@@ -231,7 +212,32 @@ export function Thumbnail({
|
|
|
231
212
|
...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
|
|
232
213
|
...props,
|
|
233
214
|
children: /*#__PURE__*/_jsxs("div", {
|
|
234
|
-
...
|
|
215
|
+
...mergeProps({
|
|
216
|
+
0: {
|
|
217
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
|
|
218
|
+
},
|
|
219
|
+
4: {
|
|
220
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3"
|
|
221
|
+
},
|
|
222
|
+
2: {
|
|
223
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
|
|
224
|
+
},
|
|
225
|
+
6: {
|
|
226
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
|
|
227
|
+
},
|
|
228
|
+
1: {
|
|
229
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c xi14tyy"
|
|
230
|
+
},
|
|
231
|
+
5: {
|
|
232
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 xi14tyy"
|
|
233
|
+
},
|
|
234
|
+
3: {
|
|
235
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
|
|
236
|
+
},
|
|
237
|
+
7: {
|
|
238
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
|
|
239
|
+
}
|
|
240
|
+
}[!!isInteractive << 2 | !!isInteractive << 1 | !!isInteractive << 0], isHoverReveal ? getContainerProps() : {}),
|
|
235
241
|
children: [isInteractive ? /*#__PURE__*/_jsx("button", {
|
|
236
242
|
type: "button",
|
|
237
243
|
onClick: onClick,
|
|
@@ -26,7 +26,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
|
26
26
|
import { formatInstant } from "./formatInstant.js";
|
|
27
27
|
import { formatTooltipLines } from "./tooltipEntries.js";
|
|
28
28
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
29
|
-
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import(
|
|
29
|
+
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
30
30
|
default: mod.Tooltip
|
|
31
31
|
})));
|
|
32
32
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2L5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}
|
|
@@ -51,6 +51,12 @@ const styles = {
|
|
|
51
51
|
k1tdAh: "x12p7p72",
|
|
52
52
|
$$css: true
|
|
53
53
|
},
|
|
54
|
+
panelViewportFit: {
|
|
55
|
+
k1xSpc: "x78zum5",
|
|
56
|
+
kXwgrk: "xdt5ytf",
|
|
57
|
+
kskxy: "xbhvqqn",
|
|
58
|
+
$$css: true
|
|
59
|
+
},
|
|
54
60
|
drawerHeader: {
|
|
55
61
|
kjj79g: "x1qughib",
|
|
56
62
|
$$css: true
|
|
@@ -288,11 +294,11 @@ function DefaultMegaMenu({
|
|
|
288
294
|
onMouseEnter: handleMouseEnter,
|
|
289
295
|
onMouseLeave: handleMouseLeave,
|
|
290
296
|
...{
|
|
291
|
-
className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr"
|
|
297
|
+
className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr x78zum5 xdt5ytf x2lwn1j"
|
|
292
298
|
},
|
|
293
299
|
children: /*#__PURE__*/_jsxs("div", {
|
|
294
300
|
...{
|
|
295
|
-
className: "x78zum5 x1a02dak x1qh66ti x8o8v82 xrrkdod
|
|
301
|
+
className: "x78zum5 x1a02dak x1qh66ti x8o8v82 xrrkdod x1m1aaou x9f619 x1odjw0f xish69e"
|
|
296
302
|
},
|
|
297
303
|
children: [items != null && /*#__PURE__*/_jsx("div", {
|
|
298
304
|
...{
|
|
@@ -313,7 +319,7 @@ function DefaultMegaMenu({
|
|
|
313
319
|
}), {
|
|
314
320
|
placement: 'below',
|
|
315
321
|
alignment: slot,
|
|
316
|
-
xstyle: styles.panelAnimation
|
|
322
|
+
xstyle: [styles.panelAnimation, styles.panelViewportFit]
|
|
317
323
|
})]
|
|
318
324
|
});
|
|
319
325
|
}
|