@astryxdesign/core 0.1.3-canary.73bcac9 → 0.1.3-canary.a18ca6b
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAyFrD,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAsGH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,IAAI,CAAC;IACd,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,IAAI,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAuHD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,eAAuB,EACvB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CAqOzB;yBA5Pe,MAAM"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
*/
|
|
20
20
|
import { useRef, useTransition } from 'react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
|
+
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
22
23
|
import "../theme/tokens.stylex.js";
|
|
23
24
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
24
|
-
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
27
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
28
28
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
29
29
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
30
|
-
import { mergeProps } from "../utils/index.js";
|
|
30
|
+
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
31
31
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
32
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
33
|
|
|
@@ -339,6 +339,16 @@ export function Button({
|
|
|
339
339
|
// Use aria-disabled when tooltip is present so the button remains focusable
|
|
340
340
|
// for keyboard users to reach the tooltip. Otherwise use native disabled.
|
|
341
341
|
const useAriaDisabled = tooltip != null && buttonDisabled;
|
|
342
|
+
|
|
343
|
+
// Attach tooltip behavior via the hook rather than wrapping the button in a
|
|
344
|
+
// <Tooltip> element. The hook adds hover/focus triggers to the button itself,
|
|
345
|
+
// so no extra DOM node is inserted — the button stays a direct child of its
|
|
346
|
+
// container (no layout shift, and edge-compensation markers remain
|
|
347
|
+
// discoverable through the container's direct-child `:has()` selector).
|
|
348
|
+
const tooltipHook = useTooltip({
|
|
349
|
+
placement: 'above',
|
|
350
|
+
isEnabled: tooltip != null
|
|
351
|
+
});
|
|
342
352
|
const handleClick = e => {
|
|
343
353
|
// The ref guard dedupes fire-once actions. Interruptible callers skip it so
|
|
344
354
|
// a re-click while pending starts a fresh action that interrupts the prior.
|
|
@@ -429,28 +439,41 @@ export function Button({
|
|
|
429
439
|
const ariaLabelProp = needsAriaLabel ? {
|
|
430
440
|
'aria-label': label
|
|
431
441
|
} : null;
|
|
442
|
+
|
|
443
|
+
// When a tooltip is attached via the hook, point aria-describedby at the
|
|
444
|
+
// tooltip content (composing with any consumer-provided value).
|
|
445
|
+
const describedByProp = tooltip != null ? {
|
|
446
|
+
'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
|
|
447
|
+
} : null;
|
|
448
|
+
|
|
449
|
+
// Merge the consumer ref with the tooltip hook's trigger ref so both point at
|
|
450
|
+
// the same element. mergeRefs tolerates undefined, so this is a no-op for the
|
|
451
|
+
// tooltip side when no tooltip is set.
|
|
452
|
+
const mergedButtonRef = mergeRefs(ref, tooltip != null ? tooltipHook.ref : undefined);
|
|
432
453
|
let element;
|
|
433
454
|
if (renderAsLink) {
|
|
434
455
|
element = /*#__PURE__*/_jsx(LinkComponent, {
|
|
435
|
-
ref:
|
|
456
|
+
ref: mergedButtonRef,
|
|
436
457
|
href: href,
|
|
437
458
|
target: target,
|
|
438
459
|
rel: rel,
|
|
439
460
|
...sharedMergedProps,
|
|
440
461
|
...props,
|
|
441
462
|
...ariaLabelProp,
|
|
463
|
+
...describedByProp,
|
|
442
464
|
...edgeCompAttr,
|
|
443
465
|
onClick: handleClick,
|
|
444
466
|
children: buttonContent
|
|
445
467
|
});
|
|
446
468
|
} else {
|
|
447
469
|
element = /*#__PURE__*/_jsx("button", {
|
|
448
|
-
ref:
|
|
470
|
+
ref: mergedButtonRef,
|
|
449
471
|
type: type,
|
|
450
472
|
disabled: useAriaDisabled ? undefined : buttonDisabled,
|
|
451
473
|
...sharedMergedProps,
|
|
452
474
|
...props,
|
|
453
475
|
...ariaLabelProp,
|
|
476
|
+
...describedByProp,
|
|
454
477
|
...edgeCompAttr,
|
|
455
478
|
"aria-busy": isLoadingState || undefined,
|
|
456
479
|
"aria-disabled": useAriaDisabled || undefined,
|
|
@@ -462,10 +485,8 @@ export function Button({
|
|
|
462
485
|
});
|
|
463
486
|
}
|
|
464
487
|
if (tooltip) {
|
|
465
|
-
return /*#__PURE__*/
|
|
466
|
-
|
|
467
|
-
placement: "above",
|
|
468
|
-
children: element
|
|
488
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
489
|
+
children: [element, tooltipHook.renderTooltip(tooltip)]
|
|
469
490
|
});
|
|
470
491
|
}
|
|
471
492
|
return element;
|