@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.f4c72f9
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/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/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +15 -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/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +106 -38
- 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 +44 -5
- package/dist/astryx.umd.js +45 -45
- 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 +3 -3
- 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/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/Lightbox/Lightbox.test.tsx +33 -0
- package/src/Lightbox/Lightbox.tsx +15 -3
- 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/TextArea/TextArea.doc.mjs +2 -2
- package/src/TextArea/TextArea.test.tsx +112 -7
- package/src/TextArea/TextArea.tsx +142 -49
- 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 +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":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwVf;yBAxWe,QAAQ"}
|
|
@@ -136,6 +136,7 @@ export function Lightbox({
|
|
|
136
136
|
}) {
|
|
137
137
|
const t = useTranslator();
|
|
138
138
|
const dialogRef = useRef(null);
|
|
139
|
+
const containerRef = useRef(null);
|
|
139
140
|
const imageWrapperRef = useRef(null);
|
|
140
141
|
const triggerElementRef = useRef(null);
|
|
141
142
|
|
|
@@ -237,9 +238,18 @@ export function Lightbox({
|
|
|
237
238
|
handleClose();
|
|
238
239
|
}, [handleClose]);
|
|
239
240
|
|
|
240
|
-
// Backdrop click
|
|
241
|
+
// Backdrop click. The layout container fills the whole transparent dialog,
|
|
242
|
+
// so clicks on the visual backdrop (the dark area around the media) land on
|
|
243
|
+
// the container, never on the dialog element itself — treat both as the
|
|
244
|
+
// backdrop. A pan drag that ends over the backdrop still fires a click on
|
|
245
|
+
// the common ancestor; ignore it so releasing a drag doesn't dismiss.
|
|
246
|
+
const didDragRef = useRef(false);
|
|
241
247
|
const handleBackdropClick = useCallback(e => {
|
|
242
|
-
if (
|
|
248
|
+
if (didDragRef.current) {
|
|
249
|
+
didDragRef.current = false;
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
if (e.target === e.currentTarget || e.target === containerRef.current) {
|
|
243
253
|
handleClose();
|
|
244
254
|
}
|
|
245
255
|
}, [handleClose]);
|
|
@@ -293,6 +303,7 @@ export function Lightbox({
|
|
|
293
303
|
return;
|
|
294
304
|
}
|
|
295
305
|
setIsDragging(true);
|
|
306
|
+
didDragRef.current = false;
|
|
296
307
|
dragStartRef.current = {
|
|
297
308
|
x: e.clientX,
|
|
298
309
|
y: e.clientY,
|
|
@@ -305,6 +316,7 @@ export function Lightbox({
|
|
|
305
316
|
return;
|
|
306
317
|
}
|
|
307
318
|
const handlePointerMove = e => {
|
|
319
|
+
didDragRef.current = true;
|
|
308
320
|
const dx = e.clientX - dragStartRef.current.x;
|
|
309
321
|
const dy = e.clientY - dragStartRef.current.y;
|
|
310
322
|
setPan({
|
|
@@ -342,6 +354,7 @@ export function Lightbox({
|
|
|
342
354
|
...mergeProps(themeProps('lightbox'), stylex.props(styles.dialog, xstyle), className, style),
|
|
343
355
|
...props,
|
|
344
356
|
children: /*#__PURE__*/_jsxs("div", {
|
|
357
|
+
ref: containerRef,
|
|
345
358
|
...{
|
|
346
359
|
className: "x78zum5 xdt5ytf x6s0dn4 xl56j7k xh8yej3 x5yr21d x1n2onr6"
|
|
347
360
|
},
|
|
@@ -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":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,27 +15,68 @@
|
|
|
15
15
|
* - /apps/storybook/stories/TextArea.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/templates/blocks/components/TextArea/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useOptimistic, useTransition, useRef } from 'react';
|
|
18
|
+
import { useId, useOptimistic, useTransition, useRef, useCallback } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
|
-
import { renderIconSlot } from "../Icon/index.js";
|
|
23
|
+
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
25
|
import { useTooltip } from "../Tooltip/index.js";
|
|
26
26
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
27
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
28
28
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
29
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
29
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
30
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
31
|
-
import {
|
|
32
|
+
import { useTranslator } from "../i18n/index.js";
|
|
32
33
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
34
|
const COUNTER_WARNING_THRESHOLD = 0.8;
|
|
34
35
|
const styles = {
|
|
35
36
|
wrapper: {
|
|
36
37
|
kY2c9j: "x1vjfegm",
|
|
37
|
-
|
|
38
|
+
k1xSpc: "x1lliihq",
|
|
39
|
+
kmVPX3: "x1717udv",
|
|
40
|
+
"--_textarea-inline-padding": "x1kdpo6e",
|
|
41
|
+
$$css: true
|
|
42
|
+
},
|
|
43
|
+
textarea: {
|
|
44
|
+
k1xSpc: "x1lliihq",
|
|
45
|
+
kzqmXN: "xh8yej3",
|
|
46
|
+
kB7OPa: "x9f619",
|
|
47
|
+
k7Eaqz: "xeuugli",
|
|
48
|
+
kMzoRj: "xc342km",
|
|
49
|
+
ksu8eU: "xng3xce",
|
|
38
50
|
k8WAf4: "xu0wf1k",
|
|
51
|
+
kg3NbH: "x1w6f3ag",
|
|
52
|
+
kMv6JI: "x9ynric",
|
|
53
|
+
kGuDYH: "xjm74w1 x6pjikd",
|
|
54
|
+
kLWn49: "xw6l6zx",
|
|
55
|
+
kMwMTN: "x1tgivj0",
|
|
56
|
+
kWkggS: "xjbqb8w",
|
|
57
|
+
kI3sdo: "x1a2a7pz",
|
|
58
|
+
k8Qsv1: "xeyghm5",
|
|
59
|
+
kHenm0: "x288g5",
|
|
60
|
+
$$css: true
|
|
61
|
+
},
|
|
62
|
+
textareaDisabled: {
|
|
63
|
+
kkrTdU: "x1h6gzvc",
|
|
64
|
+
$$css: true
|
|
65
|
+
},
|
|
66
|
+
textareaWithStartIcon: {
|
|
67
|
+
kZCmMZ: "x1b6te9z",
|
|
68
|
+
$$css: true
|
|
69
|
+
},
|
|
70
|
+
textareaWithStatus: {
|
|
71
|
+
kwRFfy: "xp2dy4z",
|
|
72
|
+
$$css: true
|
|
73
|
+
},
|
|
74
|
+
textareaWithBusyStatus: {
|
|
75
|
+
kwRFfy: "x1g2apga",
|
|
76
|
+
$$css: true
|
|
77
|
+
},
|
|
78
|
+
textareaWithCounter: {
|
|
79
|
+
kGO01o: "xekm6fs",
|
|
39
80
|
$$css: true
|
|
40
81
|
}
|
|
41
82
|
};
|
|
@@ -94,12 +135,17 @@ export function TextArea({
|
|
|
94
135
|
...rest
|
|
95
136
|
}) {
|
|
96
137
|
const size = useSize(sizeProp, 'md');
|
|
138
|
+
const t = useTranslator();
|
|
139
|
+
const announce = useAnnounce();
|
|
97
140
|
const id = useId();
|
|
98
141
|
const descriptionID = useId();
|
|
99
142
|
const statusMessageID = useId();
|
|
100
143
|
const counterID = useId();
|
|
101
144
|
const textareaRef = useRef(null);
|
|
102
145
|
const containerRef = useRef(null);
|
|
146
|
+
// Tracks the counter "zone" last announced (under / near / over) so we only
|
|
147
|
+
// announce on a zone change, not on every keystroke.
|
|
148
|
+
const counterZoneRef = useRef(null);
|
|
103
149
|
const [, startTransition] = useTransition();
|
|
104
150
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
105
151
|
const isBusy = isLoading || optimisticValue !== value;
|
|
@@ -128,6 +174,30 @@ export function TextArea({
|
|
|
128
174
|
// The tooltip variant renders no message box; describe the input by the
|
|
129
175
|
// tooltip's content instead so the status is still announced.
|
|
130
176
|
statusTooltipDescribedBy, maxLength != null ? counterID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
|
|
177
|
+
|
|
178
|
+
// Announce the character-count status through the shared live region, but
|
|
179
|
+
// only when the value crosses into a new zone (near the limit / over the
|
|
180
|
+
// limit) so we don't speak on every keystroke. Over-limit is assertive (an
|
|
181
|
+
// error the user should hear immediately); nearing the limit is polite.
|
|
182
|
+
const announceCounter = useCallback(length => {
|
|
183
|
+
if (maxLength == null) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
const zone = length > maxLength ? 'over' : length >= maxLength * COUNTER_WARNING_THRESHOLD ? 'near' : 'under';
|
|
187
|
+
if (zone === counterZoneRef.current) {
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
counterZoneRef.current = zone;
|
|
191
|
+
if (zone === 'over') {
|
|
192
|
+
announce(t('@astryx.textArea.charactersOverLimit', {
|
|
193
|
+
count: length - maxLength
|
|
194
|
+
}), 'assertive');
|
|
195
|
+
} else if (zone === 'near') {
|
|
196
|
+
announce(t('@astryx.textArea.charactersRemaining', {
|
|
197
|
+
count: maxLength - length
|
|
198
|
+
}));
|
|
199
|
+
}
|
|
200
|
+
}, [announce, t, maxLength]);
|
|
131
201
|
const handleChange = e => {
|
|
132
202
|
// Value can't change while showing a disabled message (the field is
|
|
133
203
|
// read-only and non-native-disabled), but guard the handler too so the
|
|
@@ -136,6 +206,7 @@ export function TextArea({
|
|
|
136
206
|
return;
|
|
137
207
|
}
|
|
138
208
|
const newValue = e.target.value;
|
|
209
|
+
announceCounter(newValue.length);
|
|
139
210
|
onChange?.(newValue, e);
|
|
140
211
|
if (changeAction && !e.defaultPrevented) {
|
|
141
212
|
startTransition(async () => {
|
|
@@ -185,10 +256,15 @@ export function TextArea({
|
|
|
185
256
|
...mergeProps(themeProps('textarea', {
|
|
186
257
|
size,
|
|
187
258
|
status: status?.type ?? null
|
|
188
|
-
}), stylex.props(inputWrapperStyles.base, styles.wrapper,
|
|
189
|
-
children: [startIcon &&
|
|
190
|
-
|
|
191
|
-
|
|
259
|
+
}), stylex.props(inputWrapperStyles.base, styles.wrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
|
|
260
|
+
children: [startIcon && /*#__PURE__*/_jsx("span", {
|
|
261
|
+
...{
|
|
262
|
+
className: "x10l6tqk xctzyg x1kiyvbf x47corl x78zum5"
|
|
263
|
+
},
|
|
264
|
+
children: renderIconSlot(startIcon, {
|
|
265
|
+
size: 'sm',
|
|
266
|
+
color: 'secondary'
|
|
267
|
+
})
|
|
192
268
|
}), /*#__PURE__*/_jsx("textarea", {
|
|
193
269
|
...rest,
|
|
194
270
|
ref: mergeRefs(ref, textareaRef),
|
|
@@ -215,41 +291,33 @@ export function TextArea({
|
|
|
215
291
|
"aria-required": isRequired && !isOptional ? 'true' : undefined,
|
|
216
292
|
"aria-invalid": status?.type === 'error' || maxLength != null && optimisticValue.length > maxLength ? 'true' : undefined,
|
|
217
293
|
"aria-busy": isBusy || undefined,
|
|
294
|
+
...stylex.props(styles.textarea, textareaSizeStyles[size], isDisabled && styles.textareaDisabled, Boolean(startIcon) && styles.textareaWithStartIcon, (status || isBusy) && styles.textareaWithStatus, isBusy && !!statusIcon && styles.textareaWithBusyStatus, maxLength != null && styles.textareaWithCounter)
|
|
295
|
+
}), (isBusy || statusIcon) && /*#__PURE__*/_jsxs("span", {
|
|
296
|
+
...{
|
|
297
|
+
className: "x10l6tqk xctzyg x13oyzgk x47corl x78zum5 x6s0dn4 x1txdalj"
|
|
298
|
+
},
|
|
299
|
+
children: [isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
300
|
+
size: "sm"
|
|
301
|
+
}), statusIcon]
|
|
302
|
+
}), maxLength != null && /*#__PURE__*/_jsxs("div", {
|
|
303
|
+
id: counterID,
|
|
218
304
|
...{
|
|
219
305
|
0: {
|
|
220
|
-
className: "
|
|
221
|
-
},
|
|
222
|
-
2: {
|
|
223
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc"
|
|
306
|
+
className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xv1l7n4"
|
|
224
307
|
},
|
|
225
308
|
1: {
|
|
226
|
-
className: "
|
|
227
|
-
},
|
|
228
|
-
3: {
|
|
229
|
-
className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc x1we12cn"
|
|
309
|
+
className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xjt36v0"
|
|
230
310
|
}
|
|
231
|
-
}[!!
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
id: counterID,
|
|
242
|
-
...{
|
|
243
|
-
0: {
|
|
244
|
-
className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xv1l7n4"
|
|
245
|
-
},
|
|
246
|
-
1: {
|
|
247
|
-
className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xjt36v0"
|
|
248
|
-
}
|
|
249
|
-
}[!!(optimisticValue.length > maxLength) << 0],
|
|
250
|
-
children: [optimisticValue.length, "/", maxLength, /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
251
|
-
"aria-live": "polite",
|
|
252
|
-
children: optimisticValue.length >= maxLength * COUNTER_WARNING_THRESHOLD ? optimisticValue.length > maxLength ? `${optimisticValue.length - maxLength} characters over limit` : `${maxLength - optimisticValue.length} characters remaining` : ''
|
|
311
|
+
}[!!(optimisticValue.length > maxLength) << 0],
|
|
312
|
+
children: [optimisticValue.length > maxLength &&
|
|
313
|
+
/*#__PURE__*/
|
|
314
|
+
// Non-color cue so the over-limit state isn't conveyed by the red
|
|
315
|
+
// color alone (WCAG 1.4.1). Decorative — the count text and the
|
|
316
|
+
// live-region announcement carry the meaning.
|
|
317
|
+
_jsx(Icon, {
|
|
318
|
+
icon: "warning",
|
|
319
|
+
size: "sm"
|
|
320
|
+
}), optimisticValue.length, "/", maxLength]
|
|
253
321
|
})]
|
|
254
322
|
}), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
|
|
255
323
|
});
|
|
@@ -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"}
|