@apostel/bedrock 0.1.0
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/LICENSE +21 -0
- package/README.md +216 -0
- package/dist/accessible-icon/parts.d.ts +16 -0
- package/dist/accessible-icon/parts.d.ts.map +1 -0
- package/dist/accessible-icon/parts.js +24 -0
- package/dist/accessible-icon/parts.js.map +1 -0
- package/dist/accordion/controlled-root.d.ts +19 -0
- package/dist/accordion/controlled-root.d.ts.map +1 -0
- package/dist/accordion/controlled-root.js +53 -0
- package/dist/accordion/controlled-root.js.map +1 -0
- package/dist/accordion/parts.d.ts +35 -0
- package/dist/accordion/parts.d.ts.map +1 -0
- package/dist/accordion/parts.js +52 -0
- package/dist/accordion/parts.js.map +1 -0
- package/dist/accordion/root.d.ts +24 -0
- package/dist/accordion/root.d.ts.map +1 -0
- package/dist/accordion/root.js +45 -0
- package/dist/accordion/root.js.map +1 -0
- package/dist/accordion/shared.d.ts +23 -0
- package/dist/accordion/shared.d.ts.map +1 -0
- package/dist/accordion/shared.js +16 -0
- package/dist/accordion/shared.js.map +1 -0
- package/dist/alert-dialog/parts.d.ts +16 -0
- package/dist/alert-dialog/parts.d.ts.map +1 -0
- package/dist/alert-dialog/parts.js +20 -0
- package/dist/alert-dialog/parts.js.map +1 -0
- package/dist/anchor.d.ts +27 -0
- package/dist/anchor.d.ts.map +1 -0
- package/dist/anchor.js +70 -0
- package/dist/anchor.js.map +1 -0
- package/dist/aspect-ratio/parts.d.ts +16 -0
- package/dist/aspect-ratio/parts.d.ts.map +1 -0
- package/dist/aspect-ratio/parts.js +15 -0
- package/dist/aspect-ratio/parts.js.map +1 -0
- package/dist/avatar/parts.d.ts +23 -0
- package/dist/avatar/parts.d.ts.map +1 -0
- package/dist/avatar/parts.js +51 -0
- package/dist/avatar/parts.js.map +1 -0
- package/dist/bedrock.css +64 -0
- package/dist/capabilities.d.ts +25 -0
- package/dist/capabilities.d.ts.map +1 -0
- package/dist/capabilities.js +40 -0
- package/dist/capabilities.js.map +1 -0
- package/dist/checkbox/controlled-root.d.ts +18 -0
- package/dist/checkbox/controlled-root.d.ts.map +1 -0
- package/dist/checkbox/controlled-root.js +28 -0
- package/dist/checkbox/controlled-root.js.map +1 -0
- package/dist/checkbox/parts.d.ts +29 -0
- package/dist/checkbox/parts.d.ts.map +1 -0
- package/dist/checkbox/parts.js +42 -0
- package/dist/checkbox/parts.js.map +1 -0
- package/dist/client-render.d.ts +10 -0
- package/dist/client-render.d.ts.map +1 -0
- package/dist/client-render.js +14 -0
- package/dist/client-render.js.map +1 -0
- package/dist/collapsible/controlled-root.d.ts +17 -0
- package/dist/collapsible/controlled-root.d.ts.map +1 -0
- package/dist/collapsible/controlled-root.js +21 -0
- package/dist/collapsible/controlled-root.js.map +1 -0
- package/dist/collapsible/parts.d.ts +14 -0
- package/dist/collapsible/parts.d.ts.map +1 -0
- package/dist/collapsible/parts.js +24 -0
- package/dist/collapsible/parts.js.map +1 -0
- package/dist/collapsible/root.d.ts +16 -0
- package/dist/collapsible/root.d.ts.map +1 -0
- package/dist/collapsible/root.js +28 -0
- package/dist/collapsible/root.js.map +1 -0
- package/dist/collapsible/shared.d.ts +11 -0
- package/dist/collapsible/shared.d.ts.map +1 -0
- package/dist/collapsible/shared.js +26 -0
- package/dist/collapsible/shared.js.map +1 -0
- package/dist/compose-refs.d.ts +29 -0
- package/dist/compose-refs.d.ts.map +1 -0
- package/dist/compose-refs.js +67 -0
- package/dist/compose-refs.js.map +1 -0
- package/dist/context-menu/root.d.ts +17 -0
- package/dist/context-menu/root.d.ts.map +1 -0
- package/dist/context-menu/root.js +50 -0
- package/dist/context-menu/root.js.map +1 -0
- package/dist/controlled.d.ts +120 -0
- package/dist/controlled.d.ts.map +1 -0
- package/dist/controlled.js +91 -0
- package/dist/controlled.js.map +1 -0
- package/dist/create-controlled-root.d.ts +29 -0
- package/dist/create-controlled-root.d.ts.map +1 -0
- package/dist/create-controlled-root.js +92 -0
- package/dist/create-controlled-root.js.map +1 -0
- package/dist/dialog/controlled-root.d.ts +15 -0
- package/dist/dialog/controlled-root.d.ts.map +1 -0
- package/dist/dialog/controlled-root.js +21 -0
- package/dist/dialog/controlled-root.js.map +1 -0
- package/dist/dialog/parts.d.ts +18 -0
- package/dist/dialog/parts.d.ts.map +1 -0
- package/dist/dialog/parts.js +80 -0
- package/dist/dialog/parts.js.map +1 -0
- package/dist/dialog/root.d.ts +22 -0
- package/dist/dialog/root.d.ts.map +1 -0
- package/dist/dialog/root.js +39 -0
- package/dist/dialog/root.js.map +1 -0
- package/dist/dialog/shared.d.ts +32 -0
- package/dist/dialog/shared.d.ts.map +1 -0
- package/dist/dialog/shared.js +53 -0
- package/dist/dialog/shared.js.map +1 -0
- package/dist/dropdown-menu/controlled-root.d.ts +7 -0
- package/dist/dropdown-menu/controlled-root.d.ts.map +1 -0
- package/dist/dropdown-menu/controlled-root.js +13 -0
- package/dist/dropdown-menu/controlled-root.js.map +1 -0
- package/dist/dropdown-menu/root.d.ts +13 -0
- package/dist/dropdown-menu/root.d.ts.map +1 -0
- package/dist/dropdown-menu/root.js +22 -0
- package/dist/dropdown-menu/root.js.map +1 -0
- package/dist/hover-card/controlled-root.d.ts +9 -0
- package/dist/hover-card/controlled-root.d.ts.map +1 -0
- package/dist/hover-card/controlled-root.js +15 -0
- package/dist/hover-card/controlled-root.js.map +1 -0
- package/dist/hover-card/root.d.ts +13 -0
- package/dist/hover-card/root.d.ts.map +1 -0
- package/dist/hover-card/root.js +19 -0
- package/dist/hover-card/root.js.map +1 -0
- package/dist/index.d.ts +274 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +211 -0
- package/dist/index.js.map +1 -0
- package/dist/interest.d.ts +30 -0
- package/dist/interest.d.ts.map +1 -0
- package/dist/interest.js +94 -0
- package/dist/interest.js.map +1 -0
- package/dist/label/parts.d.ts +14 -0
- package/dist/label/parts.d.ts.map +1 -0
- package/dist/label/parts.js +21 -0
- package/dist/label/parts.js.map +1 -0
- package/dist/menu/parts.d.ts +64 -0
- package/dist/menu/parts.d.ts.map +1 -0
- package/dist/menu/parts.js +131 -0
- package/dist/menu/parts.js.map +1 -0
- package/dist/menu/shared.d.ts +7 -0
- package/dist/menu/shared.d.ts.map +1 -0
- package/dist/menu/shared.js +9 -0
- package/dist/menu/shared.js.map +1 -0
- package/dist/menubar/parts.d.ts +20 -0
- package/dist/menubar/parts.d.ts.map +1 -0
- package/dist/menubar/parts.js +34 -0
- package/dist/menubar/parts.js.map +1 -0
- package/dist/navigation-menu/parts.d.ts +28 -0
- package/dist/navigation-menu/parts.d.ts.map +1 -0
- package/dist/navigation-menu/parts.js +46 -0
- package/dist/navigation-menu/parts.js.map +1 -0
- package/dist/open-state.d.ts +23 -0
- package/dist/open-state.d.ts.map +1 -0
- package/dist/open-state.js +106 -0
- package/dist/open-state.js.map +1 -0
- package/dist/popover/controlled-root.d.ts +14 -0
- package/dist/popover/controlled-root.d.ts.map +1 -0
- package/dist/popover/controlled-root.js +17 -0
- package/dist/popover/controlled-root.js.map +1 -0
- package/dist/popover/parts.d.ts +27 -0
- package/dist/popover/parts.d.ts.map +1 -0
- package/dist/popover/parts.js +39 -0
- package/dist/popover/parts.js.map +1 -0
- package/dist/popover/root.d.ts +24 -0
- package/dist/popover/root.d.ts.map +1 -0
- package/dist/popover/root.js +24 -0
- package/dist/popover/root.js.map +1 -0
- package/dist/popover/shared.d.ts +22 -0
- package/dist/popover/shared.d.ts.map +1 -0
- package/dist/popover/shared.js +25 -0
- package/dist/popover/shared.js.map +1 -0
- package/dist/progress/parts.d.ts +25 -0
- package/dist/progress/parts.d.ts.map +1 -0
- package/dist/progress/parts.js +32 -0
- package/dist/progress/parts.js.map +1 -0
- package/dist/radio-group/controlled-root.d.ts +19 -0
- package/dist/radio-group/controlled-root.d.ts.map +1 -0
- package/dist/radio-group/controlled-root.js +29 -0
- package/dist/radio-group/controlled-root.js.map +1 -0
- package/dist/radio-group/parts.d.ts +36 -0
- package/dist/radio-group/parts.d.ts.map +1 -0
- package/dist/radio-group/parts.js +62 -0
- package/dist/radio-group/parts.js.map +1 -0
- package/dist/roving.d.ts +26 -0
- package/dist/roving.d.ts.map +1 -0
- package/dist/roving.js +124 -0
- package/dist/roving.js.map +1 -0
- package/dist/scroll-area/parts.d.ts +29 -0
- package/dist/scroll-area/parts.d.ts.map +1 -0
- package/dist/scroll-area/parts.js +44 -0
- package/dist/scroll-area/parts.js.map +1 -0
- package/dist/select/parts.d.ts +57 -0
- package/dist/select/parts.d.ts.map +1 -0
- package/dist/select/parts.js +76 -0
- package/dist/select/parts.js.map +1 -0
- package/dist/separator/parts.d.ts +14 -0
- package/dist/separator/parts.d.ts.map +1 -0
- package/dist/separator/parts.js +15 -0
- package/dist/separator/parts.js.map +1 -0
- package/dist/slider/parts.d.ts +32 -0
- package/dist/slider/parts.d.ts.map +1 -0
- package/dist/slider/parts.js +52 -0
- package/dist/slider/parts.js.map +1 -0
- package/dist/slot.d.ts +3 -0
- package/dist/slot.d.ts.map +1 -0
- package/dist/slot.js +49 -0
- package/dist/slot.js.map +1 -0
- package/dist/switch/parts.d.ts +21 -0
- package/dist/switch/parts.d.ts.map +1 -0
- package/dist/switch/parts.js +31 -0
- package/dist/switch/parts.js.map +1 -0
- package/dist/tabs/controlled-root.d.ts +11 -0
- package/dist/tabs/controlled-root.d.ts.map +1 -0
- package/dist/tabs/controlled-root.js +15 -0
- package/dist/tabs/controlled-root.js.map +1 -0
- package/dist/tabs/parts.d.ts +20 -0
- package/dist/tabs/parts.d.ts.map +1 -0
- package/dist/tabs/parts.js +42 -0
- package/dist/tabs/parts.js.map +1 -0
- package/dist/tabs/root.d.ts +15 -0
- package/dist/tabs/root.d.ts.map +1 -0
- package/dist/tabs/root.js +26 -0
- package/dist/tabs/root.js.map +1 -0
- package/dist/tabs/shared.d.ts +12 -0
- package/dist/tabs/shared.d.ts.map +1 -0
- package/dist/tabs/shared.js +11 -0
- package/dist/tabs/shared.js.map +1 -0
- package/dist/toast/parts.d.ts +40 -0
- package/dist/toast/parts.d.ts.map +1 -0
- package/dist/toast/parts.js +102 -0
- package/dist/toast/parts.js.map +1 -0
- package/dist/toggle/controlled-root.d.ts +9 -0
- package/dist/toggle/controlled-root.d.ts.map +1 -0
- package/dist/toggle/controlled-root.js +14 -0
- package/dist/toggle/controlled-root.js.map +1 -0
- package/dist/toggle/parts.d.ts +20 -0
- package/dist/toggle/parts.d.ts.map +1 -0
- package/dist/toggle/parts.js +29 -0
- package/dist/toggle/parts.js.map +1 -0
- package/dist/toggle-group/parts.d.ts +28 -0
- package/dist/toggle-group/parts.d.ts.map +1 -0
- package/dist/toggle-group/parts.js +57 -0
- package/dist/toggle-group/parts.js.map +1 -0
- package/dist/toolbar/parts.d.ts +22 -0
- package/dist/toolbar/parts.d.ts.map +1 -0
- package/dist/toolbar/parts.js +27 -0
- package/dist/toolbar/parts.js.map +1 -0
- package/dist/tooltip/controlled-root.d.ts +9 -0
- package/dist/tooltip/controlled-root.d.ts.map +1 -0
- package/dist/tooltip/controlled-root.js +15 -0
- package/dist/tooltip/controlled-root.js.map +1 -0
- package/dist/tooltip/parts.d.ts +23 -0
- package/dist/tooltip/parts.d.ts.map +1 -0
- package/dist/tooltip/parts.js +28 -0
- package/dist/tooltip/parts.js.map +1 -0
- package/dist/tooltip/root.d.ts +13 -0
- package/dist/tooltip/root.d.ts.map +1 -0
- package/dist/tooltip/root.js +17 -0
- package/dist/tooltip/root.js.map +1 -0
- package/dist/tooltip/shared.d.ts +13 -0
- package/dist/tooltip/shared.d.ts.map +1 -0
- package/dist/tooltip/shared.js +9 -0
- package/dist/tooltip/shared.js.map +1 -0
- package/dist/tooltip/use-controlled-interest-root.d.ts +19 -0
- package/dist/tooltip/use-controlled-interest-root.d.ts.map +1 -0
- package/dist/tooltip/use-controlled-interest-root.js +31 -0
- package/dist/tooltip/use-controlled-interest-root.js.map +1 -0
- package/dist/tooltip/use-interest-root.d.ts +16 -0
- package/dist/tooltip/use-interest-root.d.ts.map +1 -0
- package/dist/tooltip/use-interest-root.js +39 -0
- package/dist/tooltip/use-interest-root.js.map +1 -0
- package/dist/types.d.ts +55 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/dist/validate-element.d.ts +12 -0
- package/dist/validate-element.d.ts.map +1 -0
- package/dist/validate-element.js +21 -0
- package/dist/validate-element.js.map +1 -0
- package/dist/validate-trigger.d.ts +14 -0
- package/dist/validate-trigger.d.ts.map +1 -0
- package/dist/validate-trigger.js +59 -0
- package/dist/validate-trigger.js.map +1 -0
- package/dist/visually-hidden/parts.d.ts +12 -0
- package/dist/visually-hidden/parts.d.ts.map +1 -0
- package/dist/visually-hidden/parts.js +25 -0
- package/dist/visually-hidden/parts.js.map +1 -0
- package/package.json +81 -0
- package/skills/migrate-to-bedrock/SKILL.md +188 -0
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { anchorName, type Align, type Side } from '../anchor.js';
|
|
3
|
+
import type { AsChildProps } from '../types.js';
|
|
4
|
+
export interface PopoverTriggerProps extends ComponentPropsWithRef<'button'>, AsChildProps {
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* `command="toggle-popover"` rather than `popovertarget`, because an invoker
|
|
8
|
+
* command gives the button implicit `aria-expanded` — measured in Chrome 141,
|
|
9
|
+
* and the one place where the platform hands us the expanded state for free.
|
|
10
|
+
*/
|
|
11
|
+
export declare function PopoverTrigger({ asChild, ref, style, ...props }: PopoverTriggerProps): import("react").JSX.Element;
|
|
12
|
+
export interface PopoverAnchorProps extends ComponentPropsWithRef<'div'>, AsChildProps {
|
|
13
|
+
}
|
|
14
|
+
/** Anchors the content to something other than the trigger. */
|
|
15
|
+
export declare function PopoverAnchor({ asChild, style, ...props }: PopoverAnchorProps): import("react").JSX.Element;
|
|
16
|
+
export interface PopoverContentProps extends ComponentPropsWithRef<'div'>, AsChildProps {
|
|
17
|
+
side?: Side;
|
|
18
|
+
align?: Align;
|
|
19
|
+
sideOffset?: number;
|
|
20
|
+
avoidCollisions?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export declare function PopoverContent({ asChild, children, side, align, sideOffset, avoidCollisions, style, ref, ...props }: PopoverContentProps): import("react").JSX.Element;
|
|
23
|
+
export interface PopoverCloseProps extends ComponentPropsWithRef<'button'>, AsChildProps {
|
|
24
|
+
}
|
|
25
|
+
export declare function PopoverClose({ asChild, ref, ...props }: PopoverCloseProps): import("react").JSX.Element;
|
|
26
|
+
export { anchorName };
|
|
27
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../src/popover/parts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAmB,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,WAAW,CAAA;AAI9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC,EAAE,YAAY;CAAG;AAE7F;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAmBpF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,CAAC,KAAK,CAAC,EAAE,YAAY;CAAG;AAEzF,+DAA+D;AAC/D,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAW7E;AAED,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,KAAK,CAAC,EAAE,YAAY;IACrF,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,IAAe,EACf,KAAgB,EAChB,UAAc,EACd,eAAsB,EACtB,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAmBrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC,EAAE,YAAY;CAAG;AAE3F,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAgBzE;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { anchorName, placementStyles } from '../anchor.js';
|
|
3
|
+
import { useClientRender } from '../client-render.js';
|
|
4
|
+
import { useComposedRefs } from '../compose-refs.js';
|
|
5
|
+
import { Slot } from '../slot.js';
|
|
6
|
+
import { validateTrigger } from '../validate-trigger.js';
|
|
7
|
+
import { usePopoverContext } from './shared.js';
|
|
8
|
+
/**
|
|
9
|
+
* `command="toggle-popover"` rather than `popovertarget`, because an invoker
|
|
10
|
+
* command gives the button implicit `aria-expanded` — measured in Chrome 141,
|
|
11
|
+
* and the one place where the platform hands us the expanded state for free.
|
|
12
|
+
*/
|
|
13
|
+
export function PopoverTrigger({ asChild, ref, style, ...props }) {
|
|
14
|
+
const { id, anchor } = usePopoverContext('Popover.Trigger');
|
|
15
|
+
const Part = asChild ? Slot : 'button';
|
|
16
|
+
return (_jsx(Part, { ...props, type: "button", commandfor: id, command: "toggle-popover",
|
|
17
|
+
// The anchor name has to live on the element the content points at, and
|
|
18
|
+
// it is per instance, so it cannot come from a stylesheet.
|
|
19
|
+
style: { anchorName: anchor, ...style }, ref: useComposedRefs(ref, (node) => validateTrigger(node, 'command', 'Popover.Trigger')), "data-bedrock-popover-trigger": "" }));
|
|
20
|
+
}
|
|
21
|
+
/** Anchors the content to something other than the trigger. */
|
|
22
|
+
export function PopoverAnchor({ asChild, style, ...props }) {
|
|
23
|
+
const { anchor } = usePopoverContext('Popover.Anchor');
|
|
24
|
+
const Part = asChild ? Slot : 'div';
|
|
25
|
+
return (_jsx(Part, { ...props, style: { anchorName: anchor, ...style }, "data-bedrock-popover-anchor": "" }));
|
|
26
|
+
}
|
|
27
|
+
export function PopoverContent({ asChild, children, side = 'bottom', align = 'center', sideOffset = 4, avoidCollisions = true, style, ref, ...props }) {
|
|
28
|
+
const { id, open, kind, anchor, registerContent } = usePopoverContext('Popover.Content');
|
|
29
|
+
const onClient = useClientRender();
|
|
30
|
+
const Part = asChild ? Slot : 'div';
|
|
31
|
+
return (_jsx(Part, { ...props, id: id, popover: kind, style: { ...placementStyles(anchor, { side, align, sideOffset, avoidCollisions }), ...style }, "data-side": side, "data-align": align, ref: useComposedRefs(ref, registerContent), "data-bedrock-popover": "", children: open || !onClient ? children : null }));
|
|
32
|
+
}
|
|
33
|
+
export function PopoverClose({ asChild, ref, ...props }) {
|
|
34
|
+
const { id } = usePopoverContext('Popover.Close');
|
|
35
|
+
const Part = asChild ? Slot : 'button';
|
|
36
|
+
return (_jsx(Part, { ...props, type: "button", commandfor: id, command: "hide-popover", ref: useComposedRefs(ref, (node) => validateTrigger(node, 'command', 'Popover.Close')), "data-bedrock-popover-close": "" }));
|
|
37
|
+
}
|
|
38
|
+
export { anchorName };
|
|
39
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../src/popover/parts.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type PopoverKind } from './shared.js';
|
|
3
|
+
export interface PopoverRootProps {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* `auto` light-dismisses and closes other auto popovers; `manual` does
|
|
7
|
+
* neither; `hint` layers above an open menu without closing it.
|
|
8
|
+
*
|
|
9
|
+
* Named for behaviour rather than for the attribute — the values happen to
|
|
10
|
+
* match today, and the prop survives if the platform's do not.
|
|
11
|
+
*/
|
|
12
|
+
kind?: PopoverKind;
|
|
13
|
+
onOpenChange?(open: boolean): void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Renders nothing. The trigger is bound to the content by `commandfor`, so
|
|
17
|
+
* opening is the parser's job and there is no state here in the common case.
|
|
18
|
+
*
|
|
19
|
+
* There is no `defaultOpen`: a popover cannot be shown until its element is
|
|
20
|
+
* connected, and an imperative `showPopover()` on mount is the sort of thing
|
|
21
|
+
* this library exists to avoid. Use `open` from `/controlled` if you need it.
|
|
22
|
+
*/
|
|
23
|
+
export declare function PopoverRoot({ children, kind, onOpenChange }: PopoverRootProps): import("react").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/popover/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3E,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CACnC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,YAAY,EAAE,EAAE,gBAAgB,+BAgBtF"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useId, useMemo, useRef } from 'react';
|
|
3
|
+
import { anchorName } from '../anchor.js';
|
|
4
|
+
import { useOpenState } from '../open-state.js';
|
|
5
|
+
import { PopoverContext } from './shared.js';
|
|
6
|
+
/**
|
|
7
|
+
* Renders nothing. The trigger is bound to the content by `commandfor`, so
|
|
8
|
+
* opening is the parser's job and there is no state here in the common case.
|
|
9
|
+
*
|
|
10
|
+
* There is no `defaultOpen`: a popover cannot be shown until its element is
|
|
11
|
+
* connected, and an imperative `showPopover()` on mount is the sort of thing
|
|
12
|
+
* this library exists to avoid. Use `open` from `/controlled` if you need it.
|
|
13
|
+
*/
|
|
14
|
+
export function PopoverRoot({ children, kind = 'auto', onOpenChange }) {
|
|
15
|
+
const id = useId();
|
|
16
|
+
const anchor = useMemo(() => anchorName(id), [id]);
|
|
17
|
+
const changeRef = useRef(onOpenChange);
|
|
18
|
+
changeRef.current = onOpenChange;
|
|
19
|
+
const report = useCallback((next) => changeRef.current?.(next), []);
|
|
20
|
+
const { open, observe } = useOpenState(report);
|
|
21
|
+
const context = useMemo(() => ({ id, open, anchor, kind, registerContent: observe }), [id, open, anchor, kind, observe]);
|
|
22
|
+
return _jsx(PopoverContext.Provider, { value: context, children: children });
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.js","sourceRoot":"","sources":["../../src/popover/root.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAoB,MAAM,UAAU,CAAA;AAe3D;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,EAAE,YAAY,EAAoB;IACrF,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAClB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAElD,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;IACtC,SAAS,CAAC,OAAO,GAAG,YAAY,CAAA;IAEhC,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5E,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;IAE9C,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAC5D,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAClC,CAAA;IAED,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA2B,CAAA;AACtF,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { OpenStateAdapter, RootContextValue } from '../types.js';
|
|
2
|
+
export type PopoverKind = 'auto' | 'manual' | 'hint';
|
|
3
|
+
export interface PopoverContextValue extends RootContextValue {
|
|
4
|
+
/** The `anchor-name` this instance owns, shared by trigger and content. */
|
|
5
|
+
anchor: string;
|
|
6
|
+
kind: PopoverKind;
|
|
7
|
+
}
|
|
8
|
+
export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
|
|
9
|
+
export declare function usePopoverContext(part: string): PopoverContextValue;
|
|
10
|
+
/**
|
|
11
|
+
* `beforetoggle` on a popover is cancelable in both directions, so a controlled
|
|
12
|
+
* Popover refuses outright — no frame of visible movement, unlike Collapsible.
|
|
13
|
+
*
|
|
14
|
+
* `hidePopover()` is not a close *request*, so unlike `<dialog>` there is no
|
|
15
|
+
* re-entrancy trap when reconciliation runs inside the dispatch it reacts to.
|
|
16
|
+
*/
|
|
17
|
+
export declare const popoverAdapter: OpenStateAdapter;
|
|
18
|
+
export declare function usePopoverTrigger(): {
|
|
19
|
+
readonly commandfor: string;
|
|
20
|
+
readonly command: "toggle-popover";
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=shared.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/popover/shared.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAElE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEpD,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAA;AAE7E,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAInE;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,gBAI5B,CAAA;AAED,wBAAgB,iBAAiB;;;EAGhC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
export const PopoverContext = createContext(null);
|
|
3
|
+
export function usePopoverContext(part) {
|
|
4
|
+
const context = useContext(PopoverContext);
|
|
5
|
+
if (!context)
|
|
6
|
+
throw new Error(`[bedrock] ${part} must be used inside Popover.Root.`);
|
|
7
|
+
return context;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* `beforetoggle` on a popover is cancelable in both directions, so a controlled
|
|
11
|
+
* Popover refuses outright — no frame of visible movement, unlike Collapsible.
|
|
12
|
+
*
|
|
13
|
+
* `hidePopover()` is not a close *request*, so unlike `<dialog>` there is no
|
|
14
|
+
* re-entrancy trap when reconciliation runs inside the dispatch it reacts to.
|
|
15
|
+
*/
|
|
16
|
+
export const popoverAdapter = {
|
|
17
|
+
isOpen: (node) => node.matches(':popover-open'),
|
|
18
|
+
open: (node) => node.showPopover(),
|
|
19
|
+
close: (node) => node.hidePopover(),
|
|
20
|
+
};
|
|
21
|
+
export function usePopoverTrigger() {
|
|
22
|
+
const { id } = usePopoverContext('usePopoverTrigger');
|
|
23
|
+
return { commandfor: id, command: 'toggle-popover' };
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=shared.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/popover/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWjD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAA;AAE7E,MAAM,UAAU,iBAAiB,CAAC,IAAY;IAC5C,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAC1C,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,aAAa,IAAI,oCAAoC,CAAC,CAAA;IACpF,OAAO,OAAO,CAAA;AAChB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAqB;IAC9C,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IAC/C,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;IAClC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;CACpC,CAAA;AAED,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,EAAE,EAAE,GAAG,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IACrD,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAW,CAAA;AAC/D,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import type { AsChildProps } from '../types.js';
|
|
3
|
+
export interface ProgressProps extends Omit<ComponentPropsWithRef<'progress'>, 'value'>, AsChildProps {
|
|
4
|
+
/** Omit or pass null for an indeterminate bar. */
|
|
5
|
+
value?: number | null;
|
|
6
|
+
max?: number;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A real `<progress>`. The role, the value semantics and the indeterminate
|
|
10
|
+
* state are the element's own, so there is nothing to reimplement and nothing
|
|
11
|
+
* to keep in sync with `aria-valuenow`.
|
|
12
|
+
*
|
|
13
|
+
* The fill is `::-webkit-progress-value`, which is why there is no `Indicator`
|
|
14
|
+
* element to put a `className` on.
|
|
15
|
+
*/
|
|
16
|
+
export declare function ProgressRoot({ asChild, value, max, ...props }: ProgressProps): import("react").JSX.Element;
|
|
17
|
+
export interface ProgressIndicatorProps extends ComponentPropsWithRef<'div'>, AsChildProps {
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Kept so Radix-shaped code compiles, and renders nothing. `<progress>` draws
|
|
21
|
+
* its own fill; style it with `::-webkit-progress-value` and
|
|
22
|
+
* `::-webkit-progress-bar` after `appearance: none`.
|
|
23
|
+
*/
|
|
24
|
+
export declare function ProgressIndicator({ className }: ProgressIndicatorProps): null;
|
|
25
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../src/progress/parts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IACtE,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAalF;AAID,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB,CAAC,KAAK,CAAC,EAAE,YAAY;CAAG;AAE7F;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,QAUtE"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slot } from '../slot.js';
|
|
3
|
+
/**
|
|
4
|
+
* A real `<progress>`. The role, the value semantics and the indeterminate
|
|
5
|
+
* state are the element's own, so there is nothing to reimplement and nothing
|
|
6
|
+
* to keep in sync with `aria-valuenow`.
|
|
7
|
+
*
|
|
8
|
+
* The fill is `::-webkit-progress-value`, which is why there is no `Indicator`
|
|
9
|
+
* element to put a `className` on.
|
|
10
|
+
*/
|
|
11
|
+
export function ProgressRoot({ asChild, value, max = 100, ...props }) {
|
|
12
|
+
const Part = asChild ? Slot : 'progress';
|
|
13
|
+
return (_jsx(Part, { ...props,
|
|
14
|
+
// `undefined`, not null: omitting the attribute is what makes it
|
|
15
|
+
// indeterminate, and null would stringify.
|
|
16
|
+
value: value ?? undefined, max: max, "data-bedrock-progress": "" }));
|
|
17
|
+
}
|
|
18
|
+
let warned = false;
|
|
19
|
+
/**
|
|
20
|
+
* Kept so Radix-shaped code compiles, and renders nothing. `<progress>` draws
|
|
21
|
+
* its own fill; style it with `::-webkit-progress-value` and
|
|
22
|
+
* `::-webkit-progress-bar` after `appearance: none`.
|
|
23
|
+
*/
|
|
24
|
+
export function ProgressIndicator({ className }) {
|
|
25
|
+
if (process.env.NODE_ENV !== 'production' && className && !warned) {
|
|
26
|
+
warned = true;
|
|
27
|
+
console.warn('[bedrock] Progress.Indicator renders nothing — <progress> draws its own fill. ' +
|
|
28
|
+
'Style ::-webkit-progress-value on Progress.Root instead.');
|
|
29
|
+
}
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../src/progress/parts.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAU9B;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,KAAK,EAAiB;IACjF,MAAM,IAAI,GAAgB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAA;IAErD,OAAO,CACL,KAAC,IAAI,OACC,KAAK;QACT,iEAAiE;QACjE,2CAA2C;QAC3C,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,GAAG,EAAE,GAAG,2BACc,EAAE,GACxB,CACH,CAAA;AACH,CAAC;AAED,IAAI,MAAM,GAAG,KAAK,CAAA;AAIlB;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,SAAS,EAA0B;IACrE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC;QAClE,MAAM,GAAG,IAAI,CAAA;QACb,OAAO,CAAC,IAAI,CACV,gFAAgF;YAC9E,0DAA0D,CAC7D,CAAA;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type ComponentPropsWithRef } from 'react';
|
|
2
|
+
import type { AsChildProps } from '../types.js';
|
|
3
|
+
export interface ControlledRadioGroupRootProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'>, AsChildProps {
|
|
4
|
+
name?: string;
|
|
5
|
+
value: string;
|
|
6
|
+
orientation?: 'horizontal' | 'vertical';
|
|
7
|
+
onValueChange?: ((value: string) => void) | undefined;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* As with Checkbox, the veto is React's own: the items become controlled inputs
|
|
11
|
+
* because the context carries a `value`, so a prop that does not change is a
|
|
12
|
+
* refusal and React writes the DOM back before paint.
|
|
13
|
+
*
|
|
14
|
+
* `RadioGroup.Item` never branches on which root it is under — it branches on
|
|
15
|
+
* whether the context has a value, which is a property of the data rather than
|
|
16
|
+
* of the bundle it came from.
|
|
17
|
+
*/
|
|
18
|
+
export declare function RadioGroupRoot({ asChild, children, name, value, orientation, onValueChange, ...props }: ControlledRadioGroupRootProps): import("react").JSX.Element;
|
|
19
|
+
//# sourceMappingURL=controlled-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controlled-root.d.ts","sourceRoot":"","sources":["../../src/radio-group/controlled-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,qBAAqB,EAE3B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG5C,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,EAAE,YAAY;IACxE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;CACtD;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,WAAwB,EACxB,aAAa,EACb,GAAG,KAAK,EACT,EAAE,6BAA6B,+BAiC/B"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useId, useMemo, useRef, } from 'react';
|
|
3
|
+
import { Slot } from '../slot.js';
|
|
4
|
+
import { RadioGroupContext } from './parts.js';
|
|
5
|
+
/**
|
|
6
|
+
* As with Checkbox, the veto is React's own: the items become controlled inputs
|
|
7
|
+
* because the context carries a `value`, so a prop that does not change is a
|
|
8
|
+
* refusal and React writes the DOM back before paint.
|
|
9
|
+
*
|
|
10
|
+
* `RadioGroup.Item` never branches on which root it is under — it branches on
|
|
11
|
+
* whether the context has a value, which is a property of the data rather than
|
|
12
|
+
* of the bundle it came from.
|
|
13
|
+
*/
|
|
14
|
+
export function RadioGroupRoot({ asChild, children, name, value, orientation = 'vertical', onValueChange, ...props }) {
|
|
15
|
+
const generated = useId();
|
|
16
|
+
const Part = asChild ? Slot : 'div';
|
|
17
|
+
const changeRef = useRef(onValueChange);
|
|
18
|
+
changeRef.current = onValueChange;
|
|
19
|
+
const report = useCallback((next) => changeRef.current?.(next), []);
|
|
20
|
+
const context = useMemo(() => ({
|
|
21
|
+
name: name ?? generated,
|
|
22
|
+
defaultValue: undefined,
|
|
23
|
+
value,
|
|
24
|
+
report,
|
|
25
|
+
orientation,
|
|
26
|
+
}), [name, generated, value, report, orientation]);
|
|
27
|
+
return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsx(Part, { ...props, role: "radiogroup", "aria-orientation": orientation, "data-orientation": orientation, "data-bedrock-radio-group": "", children: children }) }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=controlled-root.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"controlled-root.js","sourceRoot":"","sources":["../../src/radio-group/controlled-root.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,MAAM,GAGP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAU3C;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,WAAW,GAAG,UAAU,EACxB,aAAa,EACb,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,KAAK,EAAE,CAAA;IACzB,MAAM,IAAI,GAAgB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IAEhD,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;IACvC,SAAS,CAAC,OAAO,GAAG,aAAa,CAAA;IAEjC,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE3E,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,IAAI,IAAI,SAAS;QACvB,YAAY,EAAE,SAAS;QACvB,KAAK;QACL,MAAM;QACN,WAAW;KACZ,CAAC,EACF,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,CAC9C,CAAA;IAED,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACxC,KAAC,IAAI,OACC,KAAK,EACT,IAAI,EAAC,YAAY,sBACC,WAAW,sBACX,WAAW,8BACJ,EAAE,YAE1B,QAAQ,GACJ,GACoB,CAC9B,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { type ComponentPropsWithRef } from 'react';
|
|
2
|
+
import type { AsChildProps } from '../types.js';
|
|
3
|
+
interface RadioGroupContextValue {
|
|
4
|
+
name: string;
|
|
5
|
+
defaultValue: string | undefined;
|
|
6
|
+
value: string | undefined;
|
|
7
|
+
report(value: string): void;
|
|
8
|
+
orientation: 'horizontal' | 'vertical';
|
|
9
|
+
}
|
|
10
|
+
declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
|
|
11
|
+
export declare function useRadioGroupContext(part: string): RadioGroupContextValue;
|
|
12
|
+
export { RadioGroupContext };
|
|
13
|
+
export interface RadioGroupRootProps extends ComponentPropsWithRef<'div'>, AsChildProps {
|
|
14
|
+
name?: string;
|
|
15
|
+
defaultValue?: string;
|
|
16
|
+
orientation?: 'horizontal' | 'vertical';
|
|
17
|
+
onValueChange?(value: string): void;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* The whole roving-tabindex problem, solved by giving the inputs the same
|
|
21
|
+
* `name`. A radio group is one tab stop, arrow keys move and select, Home and
|
|
22
|
+
* End work — all of it from the browser, none of it from a keydown handler.
|
|
23
|
+
*
|
|
24
|
+
* This is the reason RadioGroup lands in the cheap group and DropdownMenu does
|
|
25
|
+
* not: there is no native equivalent for a menu.
|
|
26
|
+
*/
|
|
27
|
+
export declare function RadioGroupRoot({ asChild, children, name, defaultValue, orientation, onValueChange, ...props }: RadioGroupRootProps): import("react").JSX.Element;
|
|
28
|
+
export interface RadioGroupItemProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'name' | 'checked'>, AsChildProps {
|
|
29
|
+
value: string;
|
|
30
|
+
}
|
|
31
|
+
export declare function RadioGroupItem({ asChild, children: _children, value, onChange, ...props }: RadioGroupItemProps): import("react").JSX.Element;
|
|
32
|
+
export interface RadioGroupIndicatorProps extends ComponentPropsWithRef<'span'>, AsChildProps {
|
|
33
|
+
}
|
|
34
|
+
/** Renders nothing — the dot is a pseudo-element on the input. */
|
|
35
|
+
export declare function RadioGroupIndicator({ className }: RadioGroupIndicatorProps): null;
|
|
36
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../src/radio-group/parts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,qBAAqB,EAE3B,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,EAAE,YAAY,GAAG,UAAU,CAAA;CACvC;AAED,QAAA,MAAM,iBAAiB,wDAAqD,CAAA;AAE5E,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,sBAAsB,CAIzE;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,KAAK,CAAC,EAAE,YAAY;IACrF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAwB,EACxB,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAoCrB;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,YAAY;IACvF,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EAAE,SAAS,EACnB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA2BrB;AAID,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB,CAAC,MAAM,CAAC,EAAE,YAAY;CAAG;AAEhG,kEAAkE;AAClE,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,wBAAwB,QAU1E"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useCallback, useContext, useId, useMemo, useRef, } from 'react';
|
|
3
|
+
import { Slot } from '../slot.js';
|
|
4
|
+
const RadioGroupContext = createContext(null);
|
|
5
|
+
export function useRadioGroupContext(part) {
|
|
6
|
+
const context = useContext(RadioGroupContext);
|
|
7
|
+
if (!context)
|
|
8
|
+
throw new Error(`[bedrock] ${part} must be used inside RadioGroup.Root.`);
|
|
9
|
+
return context;
|
|
10
|
+
}
|
|
11
|
+
export { RadioGroupContext };
|
|
12
|
+
/**
|
|
13
|
+
* The whole roving-tabindex problem, solved by giving the inputs the same
|
|
14
|
+
* `name`. A radio group is one tab stop, arrow keys move and select, Home and
|
|
15
|
+
* End work — all of it from the browser, none of it from a keydown handler.
|
|
16
|
+
*
|
|
17
|
+
* This is the reason RadioGroup lands in the cheap group and DropdownMenu does
|
|
18
|
+
* not: there is no native equivalent for a menu.
|
|
19
|
+
*/
|
|
20
|
+
export function RadioGroupRoot({ asChild, children, name, defaultValue, orientation = 'vertical', onValueChange, ...props }) {
|
|
21
|
+
const generated = useId();
|
|
22
|
+
const Part = asChild ? Slot : 'div';
|
|
23
|
+
const changeRef = useRef(onValueChange);
|
|
24
|
+
changeRef.current = onValueChange;
|
|
25
|
+
const report = useCallback((value) => changeRef.current?.(value), []);
|
|
26
|
+
const initialValue = useRef(defaultValue);
|
|
27
|
+
const context = useMemo(() => ({
|
|
28
|
+
name: name ?? generated,
|
|
29
|
+
defaultValue: initialValue.current,
|
|
30
|
+
value: undefined,
|
|
31
|
+
report,
|
|
32
|
+
orientation,
|
|
33
|
+
}), [name, generated, report, orientation]);
|
|
34
|
+
return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsx(Part, { ...props,
|
|
35
|
+
// The inputs carry the group semantics; this is a container for layout
|
|
36
|
+
// and for `aria-labelledby` to attach to.
|
|
37
|
+
role: "radiogroup", "aria-orientation": orientation, "data-orientation": orientation, "data-bedrock-radio-group": "", children: children }) }));
|
|
38
|
+
}
|
|
39
|
+
export function RadioGroupItem({ asChild, children: _children, value, onChange, ...props }) {
|
|
40
|
+
const { name, defaultValue, value: controlled, report } = useRadioGroupContext('RadioGroup.Item');
|
|
41
|
+
const Part = asChild ? Slot : 'input';
|
|
42
|
+
const checkedProps = controlled === undefined
|
|
43
|
+
? { defaultChecked: defaultValue === value }
|
|
44
|
+
: { checked: controlled === value };
|
|
45
|
+
const handleChange = useCallback((event) => {
|
|
46
|
+
onChange?.(event);
|
|
47
|
+
if (event.currentTarget.checked)
|
|
48
|
+
report(value);
|
|
49
|
+
}, [onChange, report, value]);
|
|
50
|
+
return (_jsx(Part, { ...props, ...checkedProps, type: "radio", name: name, value: value, onChange: handleChange, "data-bedrock-radio-group-item": "" }));
|
|
51
|
+
}
|
|
52
|
+
let warned = false;
|
|
53
|
+
/** Renders nothing — the dot is a pseudo-element on the input. */
|
|
54
|
+
export function RadioGroupIndicator({ className }) {
|
|
55
|
+
if (process.env.NODE_ENV !== 'production' && className && !warned) {
|
|
56
|
+
warned = true;
|
|
57
|
+
console.warn('[bedrock] RadioGroup.Indicator renders nothing — an <input> has no children. ' +
|
|
58
|
+
'Draw the dot with ::before on RadioGroup.Item under :checked.');
|
|
59
|
+
}
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","sourceRoot":"","sources":["../../src/radio-group/parts.tsx"],"names":[],"mappings":"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"}
|
package/dist/roving.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export type Orientation = 'horizontal' | 'vertical' | 'both';
|
|
2
|
+
export interface RovingOptions {
|
|
3
|
+
orientation: Orientation;
|
|
4
|
+
loop: boolean;
|
|
5
|
+
/** Jump to the item whose text starts with what you typed. */
|
|
6
|
+
typeahead: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Roving tabindex, arrow-key navigation and typeahead. One module, built once,
|
|
10
|
+
* because every menu-shaped primitive needs all three and the platform provides
|
|
11
|
+
* none of them outside a radio group.
|
|
12
|
+
*
|
|
13
|
+
* This is the honest half of the library: there is no native roving tabindex,
|
|
14
|
+
* so DropdownMenu, Menubar, Tabs, Toolbar and ToggleGroup all pay for this file
|
|
15
|
+
* whichever entry point they come from. The two-root split saves them almost
|
|
16
|
+
* nothing, and the docs say so rather than implying otherwise.
|
|
17
|
+
*
|
|
18
|
+
* Items are found in the DOM rather than registered through context: a
|
|
19
|
+
* collection built from React children goes stale the moment something renders
|
|
20
|
+
* conditionally, and the DOM is already the source of truth everywhere else
|
|
21
|
+
* here.
|
|
22
|
+
*/
|
|
23
|
+
export declare function useRoving({ orientation, loop, typeahead }: RovingOptions): {
|
|
24
|
+
registerContainer: (node: HTMLElement | null) => void;
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=roving.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"roving.d.ts","sourceRoot":"","sources":["../src/roving.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;AAE5D,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,8DAA8D;IAC9D,SAAS,EAAE,OAAO,CAAA;CACnB;AAmBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa;8BAmG9D,WAAW,GAAG,IAAI;EAQ5B"}
|
package/dist/roving.js
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
const ITEM = '[data-bedrock-roving-item]';
|
|
3
|
+
const TYPEAHEAD_RESET = 1000;
|
|
4
|
+
function items(container) {
|
|
5
|
+
return [...container.querySelectorAll(ITEM)].filter((item) => !item.hasAttribute('disabled') &&
|
|
6
|
+
item.getAttribute('aria-disabled') !== 'true' &&
|
|
7
|
+
item.offsetParent !== null);
|
|
8
|
+
}
|
|
9
|
+
function focus(item) {
|
|
10
|
+
if (!item)
|
|
11
|
+
return;
|
|
12
|
+
item.focus();
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Roving tabindex, arrow-key navigation and typeahead. One module, built once,
|
|
16
|
+
* because every menu-shaped primitive needs all three and the platform provides
|
|
17
|
+
* none of them outside a radio group.
|
|
18
|
+
*
|
|
19
|
+
* This is the honest half of the library: there is no native roving tabindex,
|
|
20
|
+
* so DropdownMenu, Menubar, Tabs, Toolbar and ToggleGroup all pay for this file
|
|
21
|
+
* whichever entry point they come from. The two-root split saves them almost
|
|
22
|
+
* nothing, and the docs say so rather than implying otherwise.
|
|
23
|
+
*
|
|
24
|
+
* Items are found in the DOM rather than registered through context: a
|
|
25
|
+
* collection built from React children goes stale the moment something renders
|
|
26
|
+
* conditionally, and the DOM is already the source of truth everywhere else
|
|
27
|
+
* here.
|
|
28
|
+
*/
|
|
29
|
+
export function useRoving({ orientation, loop, typeahead }) {
|
|
30
|
+
const containerRef = useRef(null);
|
|
31
|
+
const search = useRef({ query: '', at: 0 });
|
|
32
|
+
const options = useRef({ orientation, loop, typeahead });
|
|
33
|
+
options.current = { orientation, loop, typeahead };
|
|
34
|
+
// Exactly one item is tabbable, so the whole group is a single tab stop.
|
|
35
|
+
const syncTabIndex = useCallback((active) => {
|
|
36
|
+
const container = containerRef.current;
|
|
37
|
+
if (!container)
|
|
38
|
+
return;
|
|
39
|
+
const all = items(container);
|
|
40
|
+
const current = active ?? all.find((item) => item.tabIndex === 0) ?? all[0];
|
|
41
|
+
for (const item of all)
|
|
42
|
+
item.tabIndex = item === current ? 0 : -1;
|
|
43
|
+
}, []);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const container = containerRef.current;
|
|
46
|
+
if (!container)
|
|
47
|
+
return;
|
|
48
|
+
syncTabIndex();
|
|
49
|
+
const onFocusIn = (event) => {
|
|
50
|
+
const target = event.target?.closest(ITEM);
|
|
51
|
+
if (target)
|
|
52
|
+
syncTabIndex(target);
|
|
53
|
+
};
|
|
54
|
+
const onKeyDown = (event) => {
|
|
55
|
+
// A toolbar can contain a toggle group, so two containers see the same
|
|
56
|
+
// bubbling event. Whoever acts first calls preventDefault; everyone
|
|
57
|
+
// outside them then leaves it alone rather than stepping a second time.
|
|
58
|
+
if (event.defaultPrevented)
|
|
59
|
+
return;
|
|
60
|
+
const { orientation: axis, loop: wraps, typeahead: types } = options.current;
|
|
61
|
+
const all = items(container);
|
|
62
|
+
if (all.length === 0)
|
|
63
|
+
return;
|
|
64
|
+
const active = document.activeElement;
|
|
65
|
+
const index = active ? all.indexOf(active.closest(ITEM) ?? active) : -1;
|
|
66
|
+
const forward = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
67
|
+
const back = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
|
|
68
|
+
const alsoForward = axis === 'both' ? 'ArrowRight' : null;
|
|
69
|
+
const alsoBack = axis === 'both' ? 'ArrowLeft' : null;
|
|
70
|
+
const step = (delta) => {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
const next = index + delta;
|
|
73
|
+
const bounded = wraps
|
|
74
|
+
? (next + all.length) % all.length
|
|
75
|
+
: Math.min(Math.max(next, 0), all.length - 1);
|
|
76
|
+
focus(all[bounded]);
|
|
77
|
+
};
|
|
78
|
+
if (event.key === forward || event.key === alsoForward)
|
|
79
|
+
return step(1);
|
|
80
|
+
if (event.key === back || event.key === alsoBack)
|
|
81
|
+
return step(-1);
|
|
82
|
+
if (event.key === 'Home') {
|
|
83
|
+
event.preventDefault();
|
|
84
|
+
return focus(all[0]);
|
|
85
|
+
}
|
|
86
|
+
if (event.key === 'End') {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
return focus(all[all.length - 1]);
|
|
89
|
+
}
|
|
90
|
+
// A single printable character, no modifiers: everything else belongs to
|
|
91
|
+
// the item, including the space bar on a button.
|
|
92
|
+
if (!types || event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey)
|
|
93
|
+
return;
|
|
94
|
+
if (event.key === ' ' && search.current.query === '')
|
|
95
|
+
return;
|
|
96
|
+
const now = Date.now();
|
|
97
|
+
if (now - search.current.at > TYPEAHEAD_RESET)
|
|
98
|
+
search.current.query = '';
|
|
99
|
+
search.current.at = now;
|
|
100
|
+
search.current.query += event.key.toLowerCase();
|
|
101
|
+
const { query } = search.current;
|
|
102
|
+
// Start from the item after the current one so repeating a letter cycles.
|
|
103
|
+
const ordered = [...all.slice(index + 1), ...all.slice(0, index + 1)];
|
|
104
|
+
const match = ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(query));
|
|
105
|
+
if (match) {
|
|
106
|
+
event.preventDefault();
|
|
107
|
+
focus(match);
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
container.addEventListener('focusin', onFocusIn);
|
|
111
|
+
container.addEventListener('keydown', onKeyDown);
|
|
112
|
+
return () => {
|
|
113
|
+
container.removeEventListener('focusin', onFocusIn);
|
|
114
|
+
container.removeEventListener('keydown', onKeyDown);
|
|
115
|
+
};
|
|
116
|
+
}, [syncTabIndex]);
|
|
117
|
+
const registerContainer = useCallback((node) => {
|
|
118
|
+
containerRef.current = node;
|
|
119
|
+
if (node)
|
|
120
|
+
syncTabIndex();
|
|
121
|
+
}, [syncTabIndex]);
|
|
122
|
+
return { registerContainer };
|
|
123
|
+
}
|
|
124
|
+
//# sourceMappingURL=roving.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"roving.js","sourceRoot":"","sources":["../src/roving.ts"],"names":[],"mappings":"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"}
|