@apostel/bedrock 0.1.1 → 0.2.1
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 +25 -20
- package/dist/accordion/controlled-root.d.ts +5 -2
- package/dist/accordion/controlled-root.d.ts.map +1 -1
- package/dist/accordion/controlled-root.js +5 -2
- package/dist/accordion/controlled-root.js.map +1 -1
- package/dist/capabilities.d.ts +15 -4
- package/dist/capabilities.d.ts.map +1 -1
- package/dist/capabilities.js +17 -4
- package/dist/capabilities.js.map +1 -1
- package/dist/collapsible/controlled-root.d.ts +10 -7
- package/dist/collapsible/controlled-root.d.ts.map +1 -1
- package/dist/collapsible/controlled-root.js +10 -7
- package/dist/collapsible/controlled-root.js.map +1 -1
- package/dist/collapsible/root.d.ts +2 -2
- package/dist/collapsible/root.js +2 -2
- package/dist/collapsible/shared.d.ts +3 -2
- package/dist/collapsible/shared.d.ts.map +1 -1
- package/dist/collapsible/shared.js +3 -2
- package/dist/collapsible/shared.js.map +1 -1
- package/dist/create-controlled-root.d.ts +12 -4
- package/dist/create-controlled-root.d.ts.map +1 -1
- package/dist/create-controlled-root.js +15 -5
- package/dist/create-controlled-root.js.map +1 -1
- package/dist/hover-card/controlled-root.d.ts.map +1 -1
- package/dist/hover-card/controlled-root.js +2 -0
- package/dist/hover-card/controlled-root.js.map +1 -1
- package/dist/hover-card/root.d.ts.map +1 -1
- package/dist/hover-card/root.js +2 -0
- package/dist/hover-card/root.js.map +1 -1
- package/dist/interest.d.ts +18 -9
- package/dist/interest.d.ts.map +1 -1
- package/dist/interest.js +242 -32
- package/dist/interest.js.map +1 -1
- package/dist/popover/controlled-root.d.ts +1 -1
- package/dist/popover/controlled-root.d.ts.map +1 -1
- package/dist/popover/controlled-root.js +3 -2
- package/dist/popover/controlled-root.js.map +1 -1
- package/dist/popover/root.d.ts +1 -1
- package/dist/popover/root.d.ts.map +1 -1
- package/dist/popover/root.js +3 -2
- package/dist/popover/root.js.map +1 -1
- package/dist/popover/shared.d.ts +12 -0
- package/dist/popover/shared.d.ts.map +1 -1
- package/dist/popover/shared.js +16 -0
- package/dist/popover/shared.js.map +1 -1
- package/dist/tooltip/controlled-root.d.ts.map +1 -1
- package/dist/tooltip/controlled-root.js +2 -0
- package/dist/tooltip/controlled-root.js.map +1 -1
- package/dist/tooltip/parts.d.ts +8 -1
- package/dist/tooltip/parts.d.ts.map +1 -1
- package/dist/tooltip/parts.js +35 -1
- package/dist/tooltip/parts.js.map +1 -1
- package/dist/tooltip/root.d.ts.map +1 -1
- package/dist/tooltip/root.js +2 -0
- package/dist/tooltip/root.js.map +1 -1
- package/dist/tooltip/shared.d.ts +2 -1
- package/dist/tooltip/shared.d.ts.map +1 -1
- package/dist/tooltip/shared.js.map +1 -1
- package/dist/tooltip/use-controlled-interest-root.d.ts +2 -0
- package/dist/tooltip/use-controlled-interest-root.d.ts.map +1 -1
- package/dist/tooltip/use-controlled-interest-root.js +4 -2
- package/dist/tooltip/use-controlled-interest-root.js.map +1 -1
- package/dist/tooltip/use-interest-root.d.ts +2 -0
- package/dist/tooltip/use-interest-root.d.ts.map +1 -1
- package/dist/tooltip/use-interest-root.js +5 -2
- package/dist/tooltip/use-interest-root.js.map +1 -1
- package/package.json +15 -12
- package/skills/migrate-to-bedrock/SKILL.md +11 -3
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Headless React primitives that let the browser do the layering, positioning and
|
|
4
4
|
dismissal.
|
|
5
5
|
|
|
6
|
-
Radix-shaped anatomy
|
|
6
|
+
Radix-shaped anatomy: compound components, `asChild`, the part names you
|
|
7
7
|
already type. Underneath, the top layer, invoker commands and anchor positioning
|
|
8
8
|
do the work that `Portal`, `Presence`, `DismissableLayer` and Floating UI used to
|
|
9
9
|
do.
|
|
@@ -45,22 +45,27 @@ bundle never arrives.
|
|
|
45
45
|
|
|
46
46
|
Measured with esbuild, minified and gzipped, React external:
|
|
47
47
|
|
|
48
|
+
<!-- sizes-figure -->
|
|
49
|
+
|
|
48
50
|
| primitive | bedrock | Radix | |
|
|
49
51
|
| --- | --- | --- | --- |
|
|
50
|
-
| Checkbox | **0.70 kB** | 5.9 kB | 8.
|
|
51
|
-
| Slider | **0.74 kB** | 9.8 kB | 13× |
|
|
52
|
-
| Select | **0.84 kB** | 31.5 kB | 37× |
|
|
52
|
+
| Checkbox | **0.70 kB** | 5.9 kB | 8.4× |
|
|
53
|
+
| Slider | **0.74 kB** | 9.8 kB | 13.2× |
|
|
54
|
+
| Select | **0.84 kB** | 31.5 kB | 37.5× |
|
|
53
55
|
| Accordion | **1.61 kB** | 8.8 kB | 5.5× |
|
|
54
|
-
| Dialog | **1.95 kB** | 13.7 kB | 7× |
|
|
55
|
-
| Popover | **2.11 kB** | 24.2 kB | 11× |
|
|
56
|
+
| Dialog | **1.95 kB** | 13.7 kB | 7.0× |
|
|
57
|
+
| Popover | **2.11 kB** | 24.2 kB | 11.5× |
|
|
56
58
|
| Tooltip | **2.55 kB** | 19.3 kB | 7.6× |
|
|
57
59
|
| DropdownMenu | **3.55 kB** | 31.6 kB | 8.9× |
|
|
58
60
|
|
|
59
|
-
The
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
The ratio is largest where the platform hands over a whole element and smallest
|
|
62
|
+
where it hands over nothing but the layering. Menus are the case to budget from:
|
|
63
|
+
they save more kilobytes than anything but Select, and they still leave the
|
|
64
|
+
largest bedrock bundle in the library, because roving focus and typeahead have
|
|
65
|
+
no native equivalent and ship either way.
|
|
66
|
+
[Should you switch?](./docs/should-you-switch.md#3-the-saving-is-uneven)
|
|
67
|
+
breaks that down by group. The larger win is behavioural anyway: no z-index
|
|
68
|
+
fights, no portal clipping, no repositioning on every scroll frame.
|
|
64
69
|
|
|
65
70
|
## What it costs
|
|
66
71
|
|
|
@@ -77,26 +82,26 @@ The component still opens, closes, traps focus and is announced correctly. Below
|
|
|
77
82
|
it, nothing opens at all.
|
|
78
83
|
|
|
79
84
|
[Browser support](./docs/compat.md) has every feature, its minimum version in
|
|
80
|
-
each engine, and what its absence does to your UI
|
|
85
|
+
each engine, and what its absence does to your UI, measured in the browser you
|
|
81
86
|
open it in.
|
|
82
87
|
|
|
83
88
|
## Where to start
|
|
84
89
|
|
|
85
|
-
- **[Getting started](./docs/getting-started.md)
|
|
86
|
-
|
|
87
|
-
- **[Should you switch?](./docs/should-you-switch.md)
|
|
90
|
+
- **[Getting started](./docs/getting-started.md)**: install, a first component,
|
|
91
|
+
and the one rule that applies to every trigger.
|
|
92
|
+
- **[Should you switch?](./docs/should-you-switch.md)**: the case against
|
|
88
93
|
adopting this. Read it first if you are evaluating.
|
|
89
|
-
- **[Migrating from Radix](./docs/migration-from-radix.md)
|
|
94
|
+
- **[Migrating from Radix](./docs/migration-from-radix.md)**: what changes,
|
|
90
95
|
what breaks, and what to do about it.
|
|
91
|
-
- **[shadcn registry](./docs/shadcn-registry.md)
|
|
96
|
+
- **[shadcn registry](./docs/shadcn-registry.md)**: shadcn's own components with
|
|
92
97
|
Radix swapped for bedrock, installable with `npx shadcn add`.
|
|
93
|
-
- **[Agent skill](./skills/migrate-to-bedrock/SKILL.md)
|
|
98
|
+
- **[Agent skill](./skills/migrate-to-bedrock/SKILL.md)**: does the mechanical
|
|
94
99
|
migration and brings you the four decisions it cannot make for you.
|
|
95
100
|
|
|
96
101
|
## Status
|
|
97
102
|
|
|
98
|
-
`0.1.
|
|
99
|
-
What is missing is soak time and other engines
|
|
103
|
+
`0.1.1` on npm. All 29 primitives, 200 Playwright tests against real Chrome.
|
|
104
|
+
What is missing is soak time and other engines, not components.
|
|
100
105
|
|
|
101
106
|
[Contributing](./CONTRIBUTING.md) · [Releasing](./RELEASING.md) ·
|
|
102
107
|
[Changelog](./CHANGELOG.md)
|
|
@@ -12,8 +12,11 @@ export interface ControlledAccordionRootProps extends Omit<ComponentPropsWithRef
|
|
|
12
12
|
* Items publish their value as a data attribute; nothing about that costs the
|
|
13
13
|
* plain root anything.
|
|
14
14
|
*
|
|
15
|
-
* `<details>` has no cancelable toggle, so this cannot refuse
|
|
16
|
-
*
|
|
15
|
+
* `<details>` has no cancelable toggle, so this cannot refuse: the disclosure
|
|
16
|
+
* moves, you are told, and it stays moved. The walk below runs when `value`
|
|
17
|
+
* changes, and declining means leaving `value` alone — so a declined item is
|
|
18
|
+
* left disagreeing with the prop. Same gap as Collapsible, same reasoning, in
|
|
19
|
+
* `create-controlled-root.ts` and docs/known-gaps.md.
|
|
17
20
|
*/
|
|
18
21
|
export declare function AccordionRoot({ asChild, children, type, value, orientation, onValueChange, ref, ...props }: ControlledAccordionRootProps): import("react").JSX.Element;
|
|
19
22
|
//# sourceMappingURL=controlled-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/accordion/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,qBAAqB,EAE3B,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,4BACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAAE,YAAY;IACxE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACxD;AAMD
|
|
1
|
+
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/accordion/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,qBAAqB,EAE3B,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,4BACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAAE,YAAY;IACxE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACxD;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,IAAe,EACf,KAAK,EACL,WAAwB,EACxB,aAAa,EACb,GAAG,EACH,GAAG,KAAK,EACT,EAAE,4BAA4B,+BAuD9B"}
|
|
@@ -12,8 +12,11 @@ function toArray(value) {
|
|
|
12
12
|
* Items publish their value as a data attribute; nothing about that costs the
|
|
13
13
|
* plain root anything.
|
|
14
14
|
*
|
|
15
|
-
* `<details>` has no cancelable toggle, so this cannot refuse
|
|
16
|
-
*
|
|
15
|
+
* `<details>` has no cancelable toggle, so this cannot refuse: the disclosure
|
|
16
|
+
* moves, you are told, and it stays moved. The walk below runs when `value`
|
|
17
|
+
* changes, and declining means leaving `value` alone — so a declined item is
|
|
18
|
+
* left disagreeing with the prop. Same gap as Collapsible, same reasoning, in
|
|
19
|
+
* `create-controlled-root.ts` and docs/known-gaps.md.
|
|
17
20
|
*/
|
|
18
21
|
export function AccordionRoot({ asChild, children, type = 'single', value, orientation = 'vertical', onValueChange, ref, ...props }) {
|
|
19
22
|
const name = useId();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/accordion/controlled-root.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,GAGP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAU3C,SAAS,OAAO,CAAC,KAAwB;IACvC,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAC/C,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/accordion/controlled-root.tsx"],"names":[],"mappings":"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"}
|
package/dist/capabilities.d.ts
CHANGED
|
@@ -5,14 +5,23 @@
|
|
|
5
5
|
* All of them are safe to call while server-rendering.
|
|
6
6
|
*/
|
|
7
7
|
/**
|
|
8
|
-
* `interestfor` — hover and focus intent without timers.
|
|
9
|
-
*
|
|
10
|
-
* JavaScript path as their normal one rather
|
|
8
|
+
* `interestfor` — hover and focus intent without timers. In Chrome since 142
|
|
9
|
+
* and in no other engine, and still not on a standards track, which is why
|
|
10
|
+
* Tooltip and HoverCard ship the JavaScript path as their normal one rather
|
|
11
|
+
* than as a contingency.
|
|
11
12
|
*/
|
|
12
13
|
export declare function supportsInterestInvokers(): boolean;
|
|
13
14
|
/** Anchor positioning. Without it, overlays land where the UA puts them. */
|
|
14
15
|
export declare function supportsAnchorPositioning(): boolean;
|
|
15
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* `popover=hint`, which layers above an open menu instead of closing it.
|
|
18
|
+
*
|
|
19
|
+
* Asking is not optional politeness. `popover` is an enumerated attribute whose
|
|
20
|
+
* invalid-value default is **manual**, so an engine that has never heard of
|
|
21
|
+
* `hint` does not ignore it and fall back to `auto` — it reads the element as a
|
|
22
|
+
* popover nothing dismisses. Emitting it unasked costs light dismiss and
|
|
23
|
+
* Escape on every engine but Chrome.
|
|
24
|
+
*/
|
|
16
25
|
export declare function supportsHintPopovers(): boolean;
|
|
17
26
|
/**
|
|
18
27
|
* The same test, as a hook, for anything that changes what is rendered.
|
|
@@ -22,4 +31,6 @@ export declare function supportsHintPopovers(): boolean;
|
|
|
22
31
|
* the hydrating render and the real one immediately after.
|
|
23
32
|
*/
|
|
24
33
|
export declare function useSupportsInterestInvokers(): boolean;
|
|
34
|
+
/** Likewise: the answer decides which attribute value is written. */
|
|
35
|
+
export declare function useSupportsHintPopovers(): boolean;
|
|
25
36
|
//# sourceMappingURL=capabilities.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"capabilities.d.ts","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH
|
|
1
|
+
{"version":3,"file":"capabilities.d.ts","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH;;;;;GAKG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAElD;AAED,4EAA4E;AAC5E,wBAAgB,yBAAyB,IAAI,OAAO,CAEnD;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAM9C;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,IAAI,OAAO,CAErD;AAED,qEAAqE;AACrE,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}
|
package/dist/capabilities.js
CHANGED
|
@@ -8,9 +8,10 @@ import { useSyncExternalStore } from 'react';
|
|
|
8
8
|
const hasDom = typeof window !== 'undefined';
|
|
9
9
|
const noopSubscribe = () => () => { };
|
|
10
10
|
/**
|
|
11
|
-
* `interestfor` — hover and focus intent without timers.
|
|
12
|
-
*
|
|
13
|
-
* JavaScript path as their normal one rather
|
|
11
|
+
* `interestfor` — hover and focus intent without timers. In Chrome since 142
|
|
12
|
+
* and in no other engine, and still not on a standards track, which is why
|
|
13
|
+
* Tooltip and HoverCard ship the JavaScript path as their normal one rather
|
|
14
|
+
* than as a contingency.
|
|
14
15
|
*/
|
|
15
16
|
export function supportsInterestInvokers() {
|
|
16
17
|
return hasDom && 'interestForElement' in HTMLButtonElement.prototype;
|
|
@@ -19,7 +20,15 @@ export function supportsInterestInvokers() {
|
|
|
19
20
|
export function supportsAnchorPositioning() {
|
|
20
21
|
return hasDom && CSS.supports('anchor-name', '--a');
|
|
21
22
|
}
|
|
22
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* `popover=hint`, which layers above an open menu instead of closing it.
|
|
25
|
+
*
|
|
26
|
+
* Asking is not optional politeness. `popover` is an enumerated attribute whose
|
|
27
|
+
* invalid-value default is **manual**, so an engine that has never heard of
|
|
28
|
+
* `hint` does not ignore it and fall back to `auto` — it reads the element as a
|
|
29
|
+
* popover nothing dismisses. Emitting it unasked costs light dismiss and
|
|
30
|
+
* Escape on every engine but Chrome.
|
|
31
|
+
*/
|
|
23
32
|
export function supportsHintPopovers() {
|
|
24
33
|
if (!hasDom)
|
|
25
34
|
return false;
|
|
@@ -37,4 +46,8 @@ export function supportsHintPopovers() {
|
|
|
37
46
|
export function useSupportsInterestInvokers() {
|
|
38
47
|
return useSyncExternalStore(noopSubscribe, supportsInterestInvokers, () => false);
|
|
39
48
|
}
|
|
49
|
+
/** Likewise: the answer decides which attribute value is written. */
|
|
50
|
+
export function useSupportsHintPopovers() {
|
|
51
|
+
return useSyncExternalStore(noopSubscribe, supportsHintPopovers, () => false);
|
|
52
|
+
}
|
|
40
53
|
//# sourceMappingURL=capabilities.js.map
|
package/dist/capabilities.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"capabilities.js","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;AAC5C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAA;AAEpC
|
|
1
|
+
{"version":3,"file":"capabilities.js","sourceRoot":"","sources":["../src/capabilities.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAE5C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;AAC5C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAA;AAEpC;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB;IACtC,OAAO,MAAM,IAAI,oBAAoB,IAAI,iBAAiB,CAAC,SAAS,CAAA;AACtE,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,yBAAyB;IACvC,OAAO,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;AACrD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB;IAClC,IAAI,CAAC,MAAM;QAAE,OAAO,KAAK,CAAA;IAEzB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7C,OAAO,CAAC,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,OAAO,CAAC,OAAO,KAAK,MAAM,CAAA;AACnC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,2BAA2B;IACzC,OAAO,oBAAoB,CAAC,aAAa,EAAE,wBAAwB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAA;AACnF,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,uBAAuB;IACrC,OAAO,oBAAoB,CAAC,aAAa,EAAE,oBAAoB,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAA;AAC/E,CAAC"}
|
|
@@ -4,14 +4,17 @@ import type { AsChildProps } from '../types.js';
|
|
|
4
4
|
export interface ControlledCollapsibleRootProps extends Omit<ComponentPropsWithRef<'details'>, 'open'>, ControlledRootProps, AsChildProps {
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
* `<details>` exposes no cancelable hook — no `beforetoggle`, no `cancel
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* `<details>` exposes no cancelable hook — no `beforetoggle`, no `cancel`, only
|
|
8
|
+
* a `toggle` once the disclosure has already moved — so unlike Dialog this root
|
|
9
|
+
* cannot refuse. Control here runs one way: change `open` and the DOM follows.
|
|
10
|
+
* Declining a toggle is heard and nothing more, and the disclosure is left
|
|
11
|
+
* where the user put it. It is a documented gap, not a bug in this file; the
|
|
12
|
+
* reasoning is in `create-controlled-root.ts` and docs/known-gaps.md.
|
|
11
13
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
14
|
+
* A consumer who genuinely needs a veto has one, and it isn't this root:
|
|
15
|
+
* `preventDefault()` on the Trigger's click stops the toggle before it happens,
|
|
16
|
+
* for pointer and keyboard alike, because a `<summary>` toggles its parent as
|
|
17
|
+
* that click's default action.
|
|
15
18
|
*/
|
|
16
19
|
export declare function CollapsibleRoot({ asChild, children, open, onOpenChange, ref, ...props }: ControlledCollapsibleRootProps): import("react").JSX.Element;
|
|
17
20
|
//# sourceMappingURL=controlled-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/collapsible/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,8BACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,YAAY;CAAG;AAE9F
|
|
1
|
+
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/collapsible/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,8BACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,YAAY;CAAG;AAE9F;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,GAAG,KAAK,EACT,EAAE,8BAA8B,+BAehC"}
|
|
@@ -4,14 +4,17 @@ import { useControlledRoot } from '../create-controlled-root.js';
|
|
|
4
4
|
import { Slot } from '../slot.js';
|
|
5
5
|
import { CollapsibleContext, collapsibleAdapter } from './shared.js';
|
|
6
6
|
/**
|
|
7
|
-
* `<details>` exposes no cancelable hook — no `beforetoggle`, no `cancel
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* `<details>` exposes no cancelable hook — no `beforetoggle`, no `cancel`, only
|
|
8
|
+
* a `toggle` once the disclosure has already moved — so unlike Dialog this root
|
|
9
|
+
* cannot refuse. Control here runs one way: change `open` and the DOM follows.
|
|
10
|
+
* Declining a toggle is heard and nothing more, and the disclosure is left
|
|
11
|
+
* where the user put it. It is a documented gap, not a bug in this file; the
|
|
12
|
+
* reasoning is in `create-controlled-root.ts` and docs/known-gaps.md.
|
|
11
13
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
14
|
+
* A consumer who genuinely needs a veto has one, and it isn't this root:
|
|
15
|
+
* `preventDefault()` on the Trigger's click stops the toggle before it happens,
|
|
16
|
+
* for pointer and keyboard alike, because a `<summary>` toggles its parent as
|
|
17
|
+
* that click's default action.
|
|
15
18
|
*/
|
|
16
19
|
export function CollapsibleRoot({ asChild, children, open, onOpenChange, ref, ...props }) {
|
|
17
20
|
const context = useControlledRoot({ open, onOpenChange }, collapsibleAdapter);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/collapsible/controlled-root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAA4B,MAAM,2BAA2B,CAAA;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAKjE
|
|
1
|
+
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/collapsible/controlled-root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAA4B,MAAM,2BAA2B,CAAA;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAKjE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,GAAG,EACH,GAAG,KAAK,EACuB;IAC/B,MAAM,OAAO,GAAG,iBAAiB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,kBAAkB,CAAC,CAAA;IAC7E,MAAM,IAAI,GAAgB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpD,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACzC,KAAC,IAAI,OACC,KAAK,EACT,GAAG,EAAE,eAAe,CAAc,GAAG,EAAE,OAAO,CAAC,eAAe,CAAC,8BACtC,EAAE,YAE1B,QAAQ,GACJ,GACqB,CAC/B,CAAA;AACH,CAAC"}
|
|
@@ -6,8 +6,8 @@ export interface CollapsibleRootProps extends ComponentPropsWithRef<'details'>,
|
|
|
6
6
|
onOpenChange?(open: boolean): void;
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* `<summary>` only works as a child of `<details>`, so the parts are bound by
|
|
10
|
+
* nesting: nothing to wire by id, no invoker involved.
|
|
11
11
|
*
|
|
12
12
|
* Which means `defaultOpen` is a plain attribute rather than an imperative call
|
|
13
13
|
* on mount — the disclosure is open in the HTML before any script runs.
|
package/dist/collapsible/root.js
CHANGED
|
@@ -5,8 +5,8 @@ import { useOpenState } from '../open-state.js';
|
|
|
5
5
|
import { Slot } from '../slot.js';
|
|
6
6
|
import { CollapsibleContext } from './shared.js';
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* `<summary>` only works as a child of `<details>`, so the parts are bound by
|
|
9
|
+
* nesting: nothing to wire by id, no invoker involved.
|
|
10
10
|
*
|
|
11
11
|
* Which means `defaultOpen` is a plain attribute rather than an imperative call
|
|
12
12
|
* on mount — the disclosure is open in the HTML before any script runs.
|
|
@@ -4,8 +4,9 @@ export declare function useCollapsibleContext(part: string): RootContextValue;
|
|
|
4
4
|
/**
|
|
5
5
|
* `<details>` has no invoker and needs none: `<summary>` is the trigger, wired
|
|
6
6
|
* to its parent by the parser. There is also no cancelable hook — no
|
|
7
|
-
* `beforetoggle`, no `cancel` — so a controlled Collapsible
|
|
8
|
-
*
|
|
7
|
+
* `beforetoggle`, no `cancel` — so a controlled Collapsible cannot refuse a
|
|
8
|
+
* toggle at all. These two calls only ever run from reconciliation, after the
|
|
9
|
+
* `open` prop itself changed; nothing here ever undoes something the user did.
|
|
9
10
|
*/
|
|
10
11
|
export declare const collapsibleAdapter: OpenStateAdapter;
|
|
11
12
|
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/collapsible/shared.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAElE,eAAO,MAAM,kBAAkB,kDAA+C,CAAA;AAE9E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAIpE;AAED
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/collapsible/shared.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAElE,eAAO,MAAM,kBAAkB,kDAA+C,CAAA;AAE9E,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAIpE;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBAQhC,CAAA"}
|
|
@@ -9,8 +9,9 @@ export function useCollapsibleContext(part) {
|
|
|
9
9
|
/**
|
|
10
10
|
* `<details>` has no invoker and needs none: `<summary>` is the trigger, wired
|
|
11
11
|
* to its parent by the parser. There is also no cancelable hook — no
|
|
12
|
-
* `beforetoggle`, no `cancel` — so a controlled Collapsible
|
|
13
|
-
*
|
|
12
|
+
* `beforetoggle`, no `cancel` — so a controlled Collapsible cannot refuse a
|
|
13
|
+
* toggle at all. These two calls only ever run from reconciliation, after the
|
|
14
|
+
* `open` prop itself changed; nothing here ever undoes something the user did.
|
|
14
15
|
*/
|
|
15
16
|
export const collapsibleAdapter = {
|
|
16
17
|
isOpen: (node) => node.open,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/collapsible/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAE9E,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC9C,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,aAAa,IAAI,wCAAwC,CAAC,CAAA;IACxF,OAAO,OAAO,CAAA;AAChB,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/collapsible/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAE9E,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAC9C,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,aAAa,IAAI,wCAAwC,CAAC,CAAA;IACxF,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAqB;IAClD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAE,IAA2B,CAAC,IAAI;IACnD,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,CAAC;QAAC,IAA2B,CAAC,IAAI,GAAG,IAAI,CAAA;IAC3C,CAAC;IACD,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;QACd,CAAC;QAAC,IAA2B,CAAC,IAAI,GAAG,KAAK,CAAA;IAC5C,CAAC;CACF,CAAA"}
|
|
@@ -20,10 +20,18 @@ export interface ControlledRootProps {
|
|
|
20
20
|
* 3. An effect on `open` reconciles the DOM whenever the prop changes without
|
|
21
21
|
* user interaction.
|
|
22
22
|
*
|
|
23
|
-
* Where step 1 isn't available
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
23
|
+
* Where step 1 isn't available there is no veto, only a report. `<details>` is
|
|
24
|
+
* the case: no `beforetoggle`, no `cancel`, just a `toggle` once the disclosure
|
|
25
|
+
* has already moved. Step 3 does not stand in for it, because step 3 is keyed
|
|
26
|
+
* on the prop and a refusal is exactly the case where the prop does not change.
|
|
27
|
+
* So a declined toggle on a `<details>`-backed primitive stays where the user
|
|
28
|
+
* put it, with `open` disagreeing until something else moves it.
|
|
29
|
+
*
|
|
30
|
+
* That is the documented gap rather than a bug to fix here — see
|
|
31
|
+
* docs/known-gaps.md. Reverting afterwards would be a visible flicker, and the
|
|
32
|
+
* accept path could not be told from the refusal path reliably: `toggle` is
|
|
33
|
+
* dispatched asynchronously, so a consumer who accepts has not necessarily
|
|
34
|
+
* re-rendered by the time we would have to decide.
|
|
27
35
|
*/
|
|
28
36
|
export declare function useControlledRoot({ open, onOpenChange }: ControlledRootProps, adapter: OpenStateAdapter): RootContextValue;
|
|
29
37
|
//# sourceMappingURL=create-controlled-root.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-controlled-root.d.ts","sourceRoot":"","sources":["../src/create-controlled-root.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAA;IAGb,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACrD;AAED
|
|
1
|
+
{"version":3,"file":"create-controlled-root.d.ts","sourceRoot":"","sources":["../src/create-controlled-root.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAEjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAA;IAGb,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,mBAAmB,EAC3C,OAAO,EAAE,gBAAgB,GACxB,gBAAgB,CAyElB"}
|
|
@@ -17,10 +17,18 @@ import { useOpenState } from './open-state.js';
|
|
|
17
17
|
* 3. An effect on `open` reconciles the DOM whenever the prop changes without
|
|
18
18
|
* user interaction.
|
|
19
19
|
*
|
|
20
|
-
* Where step 1 isn't available
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
20
|
+
* Where step 1 isn't available there is no veto, only a report. `<details>` is
|
|
21
|
+
* the case: no `beforetoggle`, no `cancel`, just a `toggle` once the disclosure
|
|
22
|
+
* has already moved. Step 3 does not stand in for it, because step 3 is keyed
|
|
23
|
+
* on the prop and a refusal is exactly the case where the prop does not change.
|
|
24
|
+
* So a declined toggle on a `<details>`-backed primitive stays where the user
|
|
25
|
+
* put it, with `open` disagreeing until something else moves it.
|
|
26
|
+
*
|
|
27
|
+
* That is the documented gap rather than a bug to fix here — see
|
|
28
|
+
* docs/known-gaps.md. Reverting afterwards would be a visible flicker, and the
|
|
29
|
+
* accept path could not be told from the refusal path reliably: `toggle` is
|
|
30
|
+
* dispatched asynchronously, so a consumer who accepts has not necessarily
|
|
31
|
+
* re-rendered by the time we would have to decide.
|
|
24
32
|
*/
|
|
25
33
|
export function useControlledRoot({ open, onOpenChange }, adapter) {
|
|
26
34
|
const id = useId();
|
|
@@ -45,7 +53,9 @@ export function useControlledRoot({ open, onOpenChange }, adapter) {
|
|
|
45
53
|
event.preventDefault();
|
|
46
54
|
changeRef.current?.(next);
|
|
47
55
|
};
|
|
48
|
-
//
|
|
56
|
+
// Reached when `beforetoggle` couldn't be canceled, or — `<details>` —
|
|
57
|
+
// never fired at all. The move has happened; reporting it is all that is
|
|
58
|
+
// left, and the consumer's answer cannot change it.
|
|
49
59
|
const onToggle = (event) => {
|
|
50
60
|
const next = event.newState === 'open';
|
|
51
61
|
if (next !== openRef.current)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-controlled-root.js","sourceRoot":"","sources":["../src/create-controlled-root.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAU3C
|
|
1
|
+
{"version":3,"file":"create-controlled-root.js","sourceRoot":"","sources":["../src/create-controlled-root.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/hover-card/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAIpE,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAe,EACf,UAAgB,EAChB,GAAG,KAAK,EACT,EAAE,4BAA4B,+
|
|
1
|
+
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/hover-card/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AAIpE,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAe,EACf,UAAgB,EAChB,GAAG,KAAK,EACT,EAAE,4BAA4B,+BAa9B"}
|
|
@@ -7,6 +7,8 @@ export function HoverCardRoot({ children, openDelay = 700, closeDelay = 300, ...
|
|
|
7
7
|
showDelay: openDelay,
|
|
8
8
|
hideDelay: closeDelay,
|
|
9
9
|
hoverableContent: true,
|
|
10
|
+
// Somewhere to go, so the lift leaves it up to be read and reached into.
|
|
11
|
+
pressHolds: true,
|
|
10
12
|
kind: 'auto',
|
|
11
13
|
role: undefined,
|
|
12
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/hover-card/controlled-root.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AAQnF,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,GAAG,KAAK,EACqB;IAC7B,MAAM,OAAO,GAAG,yBAAyB,CAAC;QACxC,GAAG,KAAK;QACR,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;KAChB,CAAC,CAAA;IAEF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA2B,CAAA;AACtF,CAAC"}
|
|
1
|
+
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/hover-card/controlled-root.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAA;AAQnF,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,GAAG,KAAK,EACqB;IAC7B,MAAM,OAAO,GAAG,yBAAyB,CAAC;QACxC,GAAG,KAAK;QACR,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,gBAAgB,EAAE,IAAI;QACtB,yEAAyE;QACzE,UAAU,EAAE,IAAI;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;KAChB,CAAC,CAAA;IAEF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA2B,CAAA;AACtF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/hover-card/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CACnC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAe,EACf,UAAgB,EAChB,YAAY,GACb,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/hover-card/root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CACnC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAe,EACf,UAAgB,EAChB,YAAY,GACb,EAAE,kBAAkB,+BAapB"}
|
package/dist/hover-card/root.js
CHANGED
|
@@ -10,6 +10,8 @@ export function HoverCardRoot({ children, openDelay = 700, closeDelay = 300, onO
|
|
|
10
10
|
showDelay: openDelay,
|
|
11
11
|
hideDelay: closeDelay,
|
|
12
12
|
hoverableContent: true,
|
|
13
|
+
// Somewhere to go, so the lift leaves it up to be read and reached into.
|
|
14
|
+
pressHolds: true,
|
|
13
15
|
kind: 'auto',
|
|
14
16
|
role: undefined,
|
|
15
17
|
onOpenChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.js","sourceRoot":"","sources":["../../src/hover-card/root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAS9D;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,YAAY,GACO;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC;QAC9B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,gBAAgB,EAAE,IAAI;QACtB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,YAAY;KACb,CAAC,CAAA;IAEF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA2B,CAAA;AACtF,CAAC"}
|
|
1
|
+
{"version":3,"file":"root.js","sourceRoot":"","sources":["../../src/hover-card/root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAS9D;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,YAAY,GACO;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC;QAC9B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,gBAAgB,EAAE,IAAI;QACtB,yEAAyE;QACzE,UAAU,EAAE,IAAI;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,SAAS;QACf,YAAY;KACb,CAAC,CAAA;IAEF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA2B,CAAA;AACtF,CAAC"}
|
package/dist/interest.d.ts
CHANGED
|
@@ -3,19 +3,28 @@ export interface InterestOptions {
|
|
|
3
3
|
hideDelay: number;
|
|
4
4
|
/** Whether moving the pointer onto the content keeps it open. */
|
|
5
5
|
hoverableContent: boolean;
|
|
6
|
+
/** Whether a press that opened it survives the finger coming back up. */
|
|
7
|
+
pressHolds: boolean;
|
|
6
8
|
}
|
|
7
9
|
/**
|
|
8
|
-
* Hover and
|
|
9
|
-
* something we can rely on.
|
|
10
|
+
* Hover, focus and press intent, in JavaScript, for as long as `interestfor` is
|
|
11
|
+
* not something we can rely on.
|
|
10
12
|
*
|
|
11
|
-
* This is the fallback the compat table calls "replaceable":
|
|
12
|
-
*
|
|
13
|
+
* This is the fallback the compat table calls "replaceable": where the attribute
|
|
14
|
+
* is supported, `useInterest` stops opening anything and the same props become
|
|
13
15
|
* declarative. Nothing above it changes — which is the entire reason
|
|
14
16
|
* `delayDuration` is not called `interest-show-delay`.
|
|
15
17
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
18
|
+
* One thing stays attached either way. A long press ends in a click, and a
|
|
19
|
+
* browser answering the press itself still lets that click through, so the
|
|
20
|
+
* gesture previews the link *and* follows it. Tracking the press costs four
|
|
21
|
+
* listeners and an early return; leaving it to the platform costs a navigation
|
|
22
|
+
* nobody asked for.
|
|
23
|
+
*
|
|
24
|
+
* Deliberately not a general hover library: it does the gestures the pattern
|
|
25
|
+
* needs — pointer in, pointer out, focus, blur, and the long press that stands
|
|
26
|
+
* in for all four on a touch screen — and leaves dismissal to the popover,
|
|
27
|
+
* which already handles Escape and light dismiss.
|
|
19
28
|
*
|
|
20
29
|
* Listeners are attached when a node registers, not from an effect that runs
|
|
21
30
|
* each render. That distinction is load-bearing: opening the card is itself a
|
|
@@ -23,8 +32,8 @@ export interface InterestOptions {
|
|
|
23
32
|
* the teardown and the rebuild — which is exactly when the pointer is moving
|
|
24
33
|
* from the trigger onto the content.
|
|
25
34
|
*/
|
|
26
|
-
export declare function useInterest({ showDelay, hideDelay, hoverableContent }: InterestOptions): {
|
|
27
|
-
registerTrigger: (node: HTMLElement | null) => void;
|
|
35
|
+
export declare function useInterest({ showDelay, hideDelay, hoverableContent, pressHolds, }: InterestOptions): {
|
|
36
|
+
registerTrigger: (node: HTMLElement | null, activates?: boolean) => void;
|
|
28
37
|
registerInterestContent: (node: HTMLElement | null) => void;
|
|
29
38
|
};
|
|
30
39
|
//# sourceMappingURL=interest.d.ts.map
|
package/dist/interest.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interest.d.ts","sourceRoot":"","sources":["../src/interest.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,gBAAgB,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"interest.d.ts","sourceRoot":"","sources":["../src/interest.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,iEAAiE;IACjE,gBAAgB,EAAE,OAAO,CAAA;IACzB,yEAAyE;IACzE,UAAU,EAAE,OAAO,CAAA;CACpB;AAoED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,UAAU,GACX,EAAE,eAAe;4BA0PP,WAAW,GAAG,IAAI;oCAalB,WAAW,GAAG,IAAI;EAwB5B"}
|