@wordpress/ui 0.9.1-next.v.202603161435.0 → 0.11.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/CHANGELOG.md +76 -1
- package/CONTRIBUTING.md +180 -0
- package/README.md +34 -6
- package/build/alert-dialog/context.cjs +39 -0
- package/build/alert-dialog/context.cjs.map +7 -0
- package/build/alert-dialog/index.cjs +37 -0
- package/build/alert-dialog/index.cjs.map +7 -0
- package/build/alert-dialog/popup.cjs +165 -0
- package/build/alert-dialog/popup.cjs.map +7 -0
- package/build/alert-dialog/root.cjs +152 -0
- package/build/alert-dialog/root.cjs.map +7 -0
- package/build/alert-dialog/trigger.cjs +38 -0
- package/build/alert-dialog/trigger.cjs.map +7 -0
- package/build/alert-dialog/types.cjs +19 -0
- package/build/alert-dialog/types.cjs.map +7 -0
- package/build/badge/badge.cjs +14 -14
- package/build/badge/badge.cjs.map +2 -2
- package/build/button/button.cjs +18 -8
- package/build/button/button.cjs.map +3 -3
- package/build/card/content.cjs +4 -4
- package/build/card/content.cjs.map +2 -2
- package/build/card/full-bleed.cjs +4 -4
- package/build/card/full-bleed.cjs.map +2 -2
- package/build/card/header.cjs +4 -4
- package/build/card/header.cjs.map +2 -2
- package/build/card/root.cjs +6 -6
- package/build/card/root.cjs.map +2 -2
- package/build/card/title.cjs +14 -21
- package/build/card/title.cjs.map +3 -3
- package/build/collapsible-card/content.cjs +24 -3
- package/build/collapsible-card/content.cjs.map +4 -4
- package/build/collapsible-card/context.cjs +35 -0
- package/build/collapsible-card/context.cjs.map +7 -0
- package/build/collapsible-card/header-description.cjs +52 -0
- package/build/collapsible-card/header-description.cjs.map +7 -0
- package/build/collapsible-card/header.cjs +39 -18
- package/build/collapsible-card/header.cjs.map +2 -2
- package/build/collapsible-card/index.cjs +3 -0
- package/build/collapsible-card/index.cjs.map +2 -2
- package/build/collapsible-card/types.cjs.map +1 -1
- package/build/dialog/action.cjs +4 -2
- package/build/dialog/action.cjs.map +2 -2
- package/build/dialog/close-icon.cjs +2 -1
- package/build/dialog/close-icon.cjs.map +2 -2
- package/build/dialog/footer.cjs +3 -3
- package/build/dialog/footer.cjs.map +2 -2
- package/build/dialog/header.cjs +3 -3
- package/build/dialog/header.cjs.map +2 -2
- package/build/dialog/popup.cjs +24 -6
- package/build/dialog/popup.cjs.map +2 -2
- package/build/dialog/title.cjs +10 -19
- package/build/dialog/title.cjs.map +3 -3
- package/build/dialog/types.cjs.map +1 -1
- package/build/empty-state/actions.cjs +66 -0
- package/build/empty-state/actions.cjs.map +7 -0
- package/build/empty-state/description.cjs +69 -0
- package/build/empty-state/description.cjs.map +7 -0
- package/build/empty-state/icon.cjs +69 -0
- package/build/empty-state/icon.cjs.map +7 -0
- package/build/empty-state/index.cjs +46 -0
- package/build/empty-state/index.cjs.map +7 -0
- package/build/empty-state/root.cjs +66 -0
- package/build/empty-state/root.cjs.map +7 -0
- package/build/empty-state/title.cjs +71 -0
- package/build/empty-state/title.cjs.map +7 -0
- package/build/empty-state/types.cjs +19 -0
- package/build/empty-state/types.cjs.map +7 -0
- package/build/empty-state/visual.cjs +66 -0
- package/build/empty-state/visual.cjs.map +7 -0
- package/build/form/index.cjs +27 -0
- package/build/form/index.cjs.map +7 -0
- package/build/form/input-control/index.cjs +31 -0
- package/build/form/input-control/index.cjs.map +7 -0
- package/build/form/input-control/input-control.cjs +50 -0
- package/build/form/input-control/input-control.cjs.map +7 -0
- package/build/form/input-control/types.cjs +19 -0
- package/build/form/input-control/types.cjs.map +7 -0
- package/build/form/primitives/field/description.cjs +17 -4
- package/build/form/primitives/field/description.cjs.map +3 -3
- package/build/form/primitives/field/details.cjs +4 -4
- package/build/form/primitives/field/details.cjs.map +2 -2
- package/build/form/primitives/field/label.cjs +8 -8
- package/build/form/primitives/field/label.cjs.map +2 -2
- package/build/form/primitives/field/root.cjs +2 -2
- package/build/form/primitives/field/root.cjs.map +1 -1
- package/build/form/primitives/fieldset/description.cjs +20 -4
- package/build/form/primitives/fieldset/description.cjs.map +3 -3
- package/build/form/primitives/fieldset/details.cjs +3 -3
- package/build/form/primitives/fieldset/details.cjs.map +2 -2
- package/build/form/primitives/fieldset/legend.cjs +8 -7
- package/build/form/primitives/fieldset/legend.cjs.map +2 -2
- package/build/form/primitives/fieldset/root.cjs +2 -2
- package/build/form/primitives/fieldset/root.cjs.map +1 -1
- package/build/form/primitives/input/input.cjs +23 -7
- package/build/form/primitives/input/input.cjs.map +3 -3
- package/build/form/primitives/input-layout/input-layout.cjs +15 -5
- package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
- package/build/form/primitives/input-layout/slot.cjs +6 -5
- package/build/form/primitives/input-layout/slot.cjs.map +2 -2
- package/build/form/primitives/select/item.cjs +5 -5
- package/build/form/primitives/select/item.cjs.map +2 -2
- package/build/form/primitives/select/popup.cjs +9 -9
- package/build/form/primitives/select/popup.cjs.map +2 -2
- package/build/form/primitives/select/trigger.cjs +6 -6
- package/build/form/primitives/select/trigger.cjs.map +2 -2
- package/build/form/primitives/select/types.cjs.map +1 -1
- package/build/form/primitives/textarea/textarea.cjs +23 -4
- package/build/form/primitives/textarea/textarea.cjs.map +3 -3
- package/build/form/types.cjs +19 -0
- package/build/form/types.cjs.map +7 -0
- package/build/icon-button/icon-button.cjs +2 -2
- package/build/icon-button/icon-button.cjs.map +1 -1
- package/build/index.cjs +11 -2
- package/build/index.cjs.map +2 -2
- package/build/link/link.cjs +18 -8
- package/build/link/link.cjs.map +3 -3
- package/build/notice/action-button.cjs +3 -3
- package/build/notice/action-button.cjs.map +2 -2
- package/build/notice/action-link.cjs +3 -3
- package/build/notice/action-link.cjs.map +2 -2
- package/build/notice/actions.cjs +3 -3
- package/build/notice/actions.cjs.map +2 -2
- package/build/notice/close-icon.cjs +3 -3
- package/build/notice/close-icon.cjs.map +2 -2
- package/build/notice/description.cjs +3 -3
- package/build/notice/description.cjs.map +2 -2
- package/build/notice/index.cjs.map +1 -1
- package/build/notice/root.cjs +5 -5
- package/build/notice/root.cjs.map +2 -2
- package/build/notice/title.cjs +3 -3
- package/build/notice/title.cjs.map +2 -2
- package/build/popover/arrow.cjs +94 -0
- package/build/popover/arrow.cjs.map +7 -0
- package/build/popover/close.cjs +45 -0
- package/build/popover/close.cjs.map +7 -0
- package/build/popover/context.cjs +76 -0
- package/build/popover/context.cjs.map +7 -0
- package/build/popover/description.cjs +70 -0
- package/build/popover/description.cjs.map +7 -0
- package/build/popover/index.cjs +49 -0
- package/build/popover/index.cjs.map +7 -0
- package/build/popover/popup.cjs +138 -0
- package/build/popover/popup.cjs.map +7 -0
- package/build/popover/root.cjs +35 -0
- package/build/popover/root.cjs.map +7 -0
- package/build/popover/title.cjs +56 -0
- package/build/popover/title.cjs.map +7 -0
- package/build/popover/trigger.cjs +38 -0
- package/build/popover/trigger.cjs.map +7 -0
- package/build/popover/types.cjs +19 -0
- package/build/popover/types.cjs.map +7 -0
- package/build/stack/stack.cjs +2 -2
- package/build/stack/stack.cjs.map +1 -1
- package/build/tabs/context.cjs +121 -0
- package/build/tabs/context.cjs.map +7 -0
- package/build/tabs/list.cjs +3 -4
- package/build/tabs/list.cjs.map +2 -2
- package/build/tabs/panel.cjs +5 -3
- package/build/tabs/panel.cjs.map +2 -2
- package/build/tabs/root.cjs +2 -1
- package/build/tabs/root.cjs.map +2 -2
- package/build/tabs/tab.cjs +5 -3
- package/build/tabs/tab.cjs.map +2 -2
- package/build/text/text.cjs +20 -5
- package/build/text/text.cjs.map +3 -3
- package/build/tooltip/popup.cjs +7 -6
- package/build/tooltip/popup.cjs.map +2 -2
- package/build/tooltip/root.cjs.map +2 -2
- package/build/tooltip/types.cjs.map +1 -1
- package/build/utils/types.cjs.map +1 -1
- package/build/utils/use-deprioritized-initial-focus.cjs +64 -0
- package/build/utils/use-deprioritized-initial-focus.cjs.map +7 -0
- package/build/visually-hidden/visually-hidden.cjs +2 -2
- package/build/visually-hidden/visually-hidden.cjs.map +2 -2
- package/build-module/alert-dialog/context.mjs +14 -0
- package/build-module/alert-dialog/context.mjs.map +7 -0
- package/build-module/alert-dialog/index.mjs +10 -0
- package/build-module/alert-dialog/index.mjs.map +7 -0
- package/build-module/alert-dialog/popup.mjs +132 -0
- package/build-module/alert-dialog/popup.mjs.map +7 -0
- package/build-module/alert-dialog/root.mjs +133 -0
- package/build-module/alert-dialog/root.mjs.map +7 -0
- package/build-module/alert-dialog/trigger.mjs +13 -0
- package/build-module/alert-dialog/trigger.mjs.map +7 -0
- package/build-module/alert-dialog/types.mjs +1 -0
- package/build-module/alert-dialog/types.mjs.map +7 -0
- package/build-module/badge/badge.mjs +14 -14
- package/build-module/badge/badge.mjs.map +2 -2
- package/build-module/button/button.mjs +18 -8
- package/build-module/button/button.mjs.map +3 -3
- package/build-module/card/content.mjs +4 -4
- package/build-module/card/content.mjs.map +2 -2
- package/build-module/card/full-bleed.mjs +4 -4
- package/build-module/card/full-bleed.mjs.map +2 -2
- package/build-module/card/header.mjs +4 -4
- package/build-module/card/header.mjs.map +2 -2
- package/build-module/card/root.mjs +6 -6
- package/build-module/card/root.mjs.map +2 -2
- package/build-module/card/title.mjs +14 -21
- package/build-module/card/title.mjs.map +3 -3
- package/build-module/collapsible-card/content.mjs +24 -3
- package/build-module/collapsible-card/content.mjs.map +3 -3
- package/build-module/collapsible-card/context.mjs +10 -0
- package/build-module/collapsible-card/context.mjs.map +7 -0
- package/build-module/collapsible-card/header-description.mjs +27 -0
- package/build-module/collapsible-card/header-description.mjs.map +7 -0
- package/build-module/collapsible-card/header.mjs +40 -19
- package/build-module/collapsible-card/header.mjs.map +2 -2
- package/build-module/collapsible-card/index.mjs +2 -0
- package/build-module/collapsible-card/index.mjs.map +2 -2
- package/build-module/dialog/action.mjs +4 -2
- package/build-module/dialog/action.mjs.map +2 -2
- package/build-module/dialog/close-icon.mjs +2 -1
- package/build-module/dialog/close-icon.mjs.map +2 -2
- package/build-module/dialog/footer.mjs +3 -3
- package/build-module/dialog/footer.mjs.map +2 -2
- package/build-module/dialog/header.mjs +3 -3
- package/build-module/dialog/header.mjs.map +2 -2
- package/build-module/dialog/popup.mjs +24 -6
- package/build-module/dialog/popup.mjs.map +2 -2
- package/build-module/dialog/title.mjs +10 -9
- package/build-module/dialog/title.mjs.map +2 -2
- package/build-module/empty-state/actions.mjs +31 -0
- package/build-module/empty-state/actions.mjs.map +7 -0
- package/build-module/empty-state/description.mjs +34 -0
- package/build-module/empty-state/description.mjs.map +7 -0
- package/build-module/empty-state/icon.mjs +34 -0
- package/build-module/empty-state/icon.mjs.map +7 -0
- package/build-module/empty-state/index.mjs +16 -0
- package/build-module/empty-state/index.mjs.map +7 -0
- package/build-module/empty-state/root.mjs +31 -0
- package/build-module/empty-state/root.mjs.map +7 -0
- package/build-module/empty-state/title.mjs +36 -0
- package/build-module/empty-state/title.mjs.map +7 -0
- package/build-module/empty-state/types.mjs +1 -0
- package/build-module/empty-state/types.mjs.map +7 -0
- package/build-module/empty-state/visual.mjs +31 -0
- package/build-module/empty-state/visual.mjs.map +7 -0
- package/build-module/form/index.mjs +4 -0
- package/build-module/form/index.mjs.map +7 -0
- package/build-module/form/input-control/index.mjs +6 -0
- package/build-module/form/input-control/index.mjs.map +7 -0
- package/build-module/form/input-control/input-control.mjs +25 -0
- package/build-module/form/input-control/input-control.mjs.map +7 -0
- package/build-module/form/input-control/types.mjs +1 -0
- package/build-module/form/input-control/types.mjs.map +7 -0
- package/build-module/form/primitives/field/description.mjs +17 -4
- package/build-module/form/primitives/field/description.mjs.map +3 -3
- package/build-module/form/primitives/field/details.mjs +4 -4
- package/build-module/form/primitives/field/details.mjs.map +2 -2
- package/build-module/form/primitives/field/label.mjs +8 -8
- package/build-module/form/primitives/field/label.mjs.map +2 -2
- package/build-module/form/primitives/field/root.mjs +2 -2
- package/build-module/form/primitives/field/root.mjs.map +1 -1
- package/build-module/form/primitives/fieldset/description.mjs +20 -4
- package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/details.mjs +3 -3
- package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/legend.mjs +8 -7
- package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/root.mjs +2 -2
- package/build-module/form/primitives/fieldset/root.mjs.map +1 -1
- package/build-module/form/primitives/input/input.mjs +23 -7
- package/build-module/form/primitives/input/input.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs +15 -5
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs +6 -5
- package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
- package/build-module/form/primitives/select/item.mjs +5 -5
- package/build-module/form/primitives/select/item.mjs.map +2 -2
- package/build-module/form/primitives/select/popup.mjs +9 -9
- package/build-module/form/primitives/select/popup.mjs.map +2 -2
- package/build-module/form/primitives/select/trigger.mjs +6 -6
- package/build-module/form/primitives/select/trigger.mjs.map +2 -2
- package/build-module/form/primitives/textarea/textarea.mjs +23 -4
- package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
- package/build-module/form/types.mjs +1 -0
- package/build-module/form/types.mjs.map +7 -0
- package/build-module/icon-button/icon-button.mjs +2 -2
- package/build-module/icon-button/icon-button.mjs.map +1 -1
- package/build-module/index.mjs +7 -1
- package/build-module/index.mjs.map +2 -2
- package/build-module/link/link.mjs +18 -8
- package/build-module/link/link.mjs.map +3 -3
- package/build-module/notice/action-button.mjs +3 -3
- package/build-module/notice/action-button.mjs.map +2 -2
- package/build-module/notice/action-link.mjs +3 -3
- package/build-module/notice/action-link.mjs.map +2 -2
- package/build-module/notice/actions.mjs +3 -3
- package/build-module/notice/actions.mjs.map +2 -2
- package/build-module/notice/close-icon.mjs +3 -3
- package/build-module/notice/close-icon.mjs.map +2 -2
- package/build-module/notice/description.mjs +3 -3
- package/build-module/notice/description.mjs.map +2 -2
- package/build-module/notice/index.mjs.map +1 -1
- package/build-module/notice/root.mjs +5 -5
- package/build-module/notice/root.mjs.map +2 -2
- package/build-module/notice/title.mjs +3 -3
- package/build-module/notice/title.mjs.map +2 -2
- package/build-module/popover/arrow.mjs +59 -0
- package/build-module/popover/arrow.mjs.map +7 -0
- package/build-module/popover/close.mjs +20 -0
- package/build-module/popover/close.mjs.map +7 -0
- package/build-module/popover/context.mjs +57 -0
- package/build-module/popover/context.mjs.map +7 -0
- package/build-module/popover/description.mjs +35 -0
- package/build-module/popover/description.mjs.map +7 -0
- package/build-module/popover/index.mjs +18 -0
- package/build-module/popover/index.mjs.map +7 -0
- package/build-module/popover/popup.mjs +105 -0
- package/build-module/popover/popup.mjs.map +7 -0
- package/build-module/popover/root.mjs +10 -0
- package/build-module/popover/root.mjs.map +7 -0
- package/build-module/popover/title.mjs +31 -0
- package/build-module/popover/title.mjs.map +7 -0
- package/build-module/popover/trigger.mjs +13 -0
- package/build-module/popover/trigger.mjs.map +7 -0
- package/build-module/popover/types.mjs +1 -0
- package/build-module/popover/types.mjs.map +7 -0
- package/build-module/stack/stack.mjs +2 -2
- package/build-module/stack/stack.mjs.map +1 -1
- package/build-module/tabs/context.mjs +101 -0
- package/build-module/tabs/context.mjs.map +7 -0
- package/build-module/tabs/list.mjs +3 -4
- package/build-module/tabs/list.mjs.map +2 -2
- package/build-module/tabs/panel.mjs +5 -3
- package/build-module/tabs/panel.mjs.map +2 -2
- package/build-module/tabs/root.mjs +2 -1
- package/build-module/tabs/root.mjs.map +2 -2
- package/build-module/tabs/tab.mjs +5 -3
- package/build-module/tabs/tab.mjs.map +2 -2
- package/build-module/text/text.mjs +20 -5
- package/build-module/text/text.mjs.map +3 -3
- package/build-module/tooltip/popup.mjs +7 -6
- package/build-module/tooltip/popup.mjs.map +2 -2
- package/build-module/tooltip/root.mjs.map +2 -2
- package/build-module/utils/use-deprioritized-initial-focus.mjs +39 -0
- package/build-module/utils/use-deprioritized-initial-focus.mjs.map +7 -0
- package/build-module/visually-hidden/visually-hidden.mjs +2 -2
- package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
- package/build-types/alert-dialog/context.d.ts +11 -0
- package/build-types/alert-dialog/context.d.ts.map +1 -0
- package/build-types/alert-dialog/index.d.ts +4 -0
- package/build-types/alert-dialog/index.d.ts.map +1 -0
- package/build-types/alert-dialog/popup.d.ts +4 -0
- package/build-types/alert-dialog/popup.d.ts.map +1 -0
- package/build-types/alert-dialog/root.d.ts +18 -0
- package/build-types/alert-dialog/root.d.ts.map +1 -0
- package/build-types/alert-dialog/stories/index.story.d.ts +56 -0
- package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -0
- package/build-types/alert-dialog/test/index.test.d.ts +2 -0
- package/build-types/alert-dialog/test/index.test.d.ts.map +1 -0
- package/build-types/alert-dialog/trigger.d.ts +7 -0
- package/build-types/alert-dialog/trigger.d.ts.map +1 -0
- package/build-types/alert-dialog/types.d.ts +105 -0
- package/build-types/alert-dialog/types.d.ts.map +1 -0
- package/build-types/badge/badge.d.ts.map +1 -1
- package/build-types/button/button.d.ts.map +1 -1
- package/build-types/card/stories/index.story.d.ts.map +1 -1
- package/build-types/card/title.d.ts.map +1 -1
- package/build-types/collapsible/panel.d.ts +2 -1
- package/build-types/collapsible/panel.d.ts.map +1 -1
- package/build-types/collapsible/root.d.ts +2 -1
- package/build-types/collapsible/root.d.ts.map +1 -1
- package/build-types/collapsible/trigger.d.ts +2 -1
- package/build-types/collapsible/trigger.d.ts.map +1 -1
- package/build-types/collapsible-card/content.d.ts.map +1 -1
- package/build-types/collapsible-card/context.d.ts +4 -0
- package/build-types/collapsible-card/context.d.ts.map +1 -0
- package/build-types/collapsible-card/header-description.d.ts +15 -0
- package/build-types/collapsible-card/header-description.d.ts.map +1 -0
- package/build-types/collapsible-card/header.d.ts.map +1 -1
- package/build-types/collapsible-card/index.d.ts +2 -1
- package/build-types/collapsible-card/index.d.ts.map +1 -1
- package/build-types/collapsible-card/stories/index.story.d.ts +10 -0
- package/build-types/collapsible-card/stories/index.story.d.ts.map +1 -1
- package/build-types/collapsible-card/types.d.ts +21 -0
- package/build-types/collapsible-card/types.d.ts.map +1 -1
- package/build-types/dialog/action.d.ts.map +1 -1
- package/build-types/dialog/close-icon.d.ts.map +1 -1
- package/build-types/dialog/popup.d.ts.map +1 -1
- package/build-types/dialog/stories/index.story.d.ts +8 -6
- package/build-types/dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/dialog/title.d.ts +12 -2
- package/build-types/dialog/title.d.ts.map +1 -1
- package/build-types/dialog/types.d.ts +13 -6
- package/build-types/dialog/types.d.ts.map +1 -1
- package/build-types/empty-state/actions.d.ts +7 -0
- package/build-types/empty-state/actions.d.ts.map +1 -0
- package/build-types/empty-state/description.d.ts +7 -0
- package/build-types/empty-state/description.d.ts.map +1 -0
- package/build-types/empty-state/icon.d.ts +7 -0
- package/build-types/empty-state/icon.d.ts.map +1 -0
- package/build-types/empty-state/index.d.ts +8 -0
- package/build-types/empty-state/index.d.ts.map +1 -0
- package/build-types/empty-state/root.d.ts +6 -0
- package/build-types/empty-state/root.d.ts.map +1 -0
- package/build-types/empty-state/stories/index.story.d.ts +8 -0
- package/build-types/empty-state/stories/index.story.d.ts.map +1 -0
- package/build-types/empty-state/test/actions.test.d.ts +2 -0
- package/build-types/empty-state/test/actions.test.d.ts.map +1 -0
- package/build-types/empty-state/test/description.test.d.ts +2 -0
- package/build-types/empty-state/test/description.test.d.ts.map +1 -0
- package/build-types/empty-state/test/icon.test.d.ts +2 -0
- package/build-types/empty-state/test/icon.test.d.ts.map +1 -0
- package/build-types/empty-state/test/root.test.d.ts +2 -0
- package/build-types/empty-state/test/root.test.d.ts.map +1 -0
- package/build-types/empty-state/test/title.test.d.ts +2 -0
- package/build-types/empty-state/test/title.test.d.ts.map +1 -0
- package/build-types/empty-state/test/visual.test.d.ts +2 -0
- package/build-types/empty-state/test/visual.test.d.ts.map +1 -0
- package/build-types/empty-state/title.d.ts +6 -0
- package/build-types/empty-state/title.d.ts.map +1 -0
- package/build-types/empty-state/types.d.ts +40 -0
- package/build-types/empty-state/types.d.ts.map +1 -0
- package/build-types/empty-state/visual.d.ts +7 -0
- package/build-types/empty-state/visual.d.ts.map +1 -0
- package/build-types/form/index.d.ts +3 -0
- package/build-types/form/index.d.ts.map +1 -0
- package/build-types/form/input-control/index.d.ts +2 -0
- package/build-types/form/input-control/index.d.ts.map +1 -0
- package/build-types/form/input-control/input-control.d.ts +6 -0
- package/build-types/form/input-control/input-control.d.ts.map +1 -0
- package/build-types/form/input-control/stories/index.story.d.ts +16 -0
- package/build-types/form/input-control/stories/index.story.d.ts.map +1 -0
- package/build-types/form/input-control/test/index.test.d.ts +2 -0
- package/build-types/form/input-control/test/index.test.d.ts.map +1 -0
- package/build-types/form/input-control/types.d.ts +4 -0
- package/build-types/form/input-control/types.d.ts.map +1 -0
- package/build-types/form/primitives/field/description.d.ts +2 -1
- package/build-types/form/primitives/field/description.d.ts.map +1 -1
- package/build-types/form/primitives/field/details.d.ts +2 -1
- package/build-types/form/primitives/field/details.d.ts.map +1 -1
- package/build-types/form/primitives/field/label.d.ts +2 -1
- package/build-types/form/primitives/field/label.d.ts.map +1 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/description.d.ts +2 -1
- package/build-types/form/primitives/fieldset/description.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/details.d.ts +2 -1
- package/build-types/form/primitives/fieldset/details.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/legend.d.ts +2 -1
- package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/root.d.ts +2 -1
- package/build-types/form/primitives/fieldset/root.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/input/input.d.ts.map +1 -1
- package/build-types/form/primitives/input/stories/index.story.d.ts +2 -0
- package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/input-layout.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/slot.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts +5 -0
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/select/item.d.ts +6 -2
- package/build-types/form/primitives/select/item.d.ts.map +1 -1
- package/build-types/form/primitives/select/popup.d.ts +11 -1
- package/build-types/form/primitives/select/popup.d.ts.map +1 -1
- package/build-types/form/primitives/select/trigger.d.ts +12 -2
- package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
- package/build-types/form/primitives/select/types.d.ts +13 -3
- package/build-types/form/primitives/select/types.d.ts.map +1 -1
- package/build-types/form/primitives/textarea/textarea.d.ts.map +1 -1
- package/build-types/form/stories/shared.d.ts +3 -0
- package/build-types/form/stories/shared.d.ts.map +1 -0
- package/build-types/form/types.d.ts +30 -0
- package/build-types/form/types.d.ts.map +1 -0
- package/build-types/index.d.ts +4 -1
- package/build-types/index.d.ts.map +1 -1
- package/build-types/link/link.d.ts.map +1 -1
- package/build-types/notice/index.d.ts +0 -1
- package/build-types/notice/index.d.ts.map +1 -1
- package/build-types/popover/arrow.d.ts +10 -0
- package/build-types/popover/arrow.d.ts.map +1 -0
- package/build-types/popover/close.d.ts +11 -0
- package/build-types/popover/close.d.ts.map +1 -0
- package/build-types/popover/context.d.ts +22 -0
- package/build-types/popover/context.d.ts.map +1 -0
- package/build-types/popover/description.d.ts +10 -0
- package/build-types/popover/description.d.ts.map +1 -0
- package/build-types/popover/index.d.ts +9 -0
- package/build-types/popover/index.d.ts.map +1 -0
- package/build-types/popover/popup.d.ts +11 -0
- package/build-types/popover/popup.d.ts.map +1 -0
- package/build-types/popover/root.d.ts +37 -0
- package/build-types/popover/root.d.ts.map +1 -0
- package/build-types/popover/stories/index.story.d.ts +211 -0
- package/build-types/popover/stories/index.story.d.ts.map +1 -0
- package/build-types/popover/stories/utils.d.ts +25 -0
- package/build-types/popover/stories/utils.d.ts.map +1 -0
- package/build-types/popover/test/index.test.d.ts +2 -0
- package/build-types/popover/test/index.test.d.ts.map +1 -0
- package/build-types/popover/title.d.ts +20 -0
- package/build-types/popover/title.d.ts.map +1 -0
- package/build-types/popover/trigger.d.ts +10 -0
- package/build-types/popover/trigger.d.ts.map +1 -0
- package/build-types/popover/types.d.ts +83 -0
- package/build-types/popover/types.d.ts.map +1 -0
- package/build-types/tabs/context.d.ts +26 -0
- package/build-types/tabs/context.d.ts.map +1 -0
- package/build-types/tabs/list.d.ts +2 -1
- package/build-types/tabs/list.d.ts.map +1 -1
- package/build-types/tabs/panel.d.ts +2 -1
- package/build-types/tabs/panel.d.ts.map +1 -1
- package/build-types/tabs/root.d.ts +2 -1
- package/build-types/tabs/root.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +2 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts +4 -0
- package/build-types/text/stories/index.story.d.ts.map +1 -1
- package/build-types/text/text.d.ts.map +1 -1
- package/build-types/tooltip/popup.d.ts.map +1 -1
- package/build-types/tooltip/root.d.ts +13 -0
- package/build-types/tooltip/root.d.ts.map +1 -1
- package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts +21 -0
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -0
- package/build-types/tooltip/types.d.ts +4 -0
- package/build-types/tooltip/types.d.ts.map +1 -1
- package/build-types/utils/test/use-deprioritized-initial-focus.test.d.ts +2 -0
- package/build-types/utils/test/use-deprioritized-initial-focus.test.d.ts.map +1 -0
- package/build-types/utils/types.d.ts +6 -2
- package/build-types/utils/types.d.ts.map +1 -1
- package/build-types/utils/use-deprioritized-initial-focus.d.ts +36 -0
- package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -0
- package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
- package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
- package/build-types/visually-hidden/visually-hidden.d.ts +34 -0
- package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
- package/package.json +17 -16
- package/src/alert-dialog/context.tsx +22 -0
- package/src/alert-dialog/index.ts +3 -0
- package/src/alert-dialog/popup.tsx +116 -0
- package/src/alert-dialog/root.tsx +226 -0
- package/src/alert-dialog/stories/index.story.tsx +305 -0
- package/src/alert-dialog/style.module.css +21 -0
- package/src/alert-dialog/test/index.test.tsx +1509 -0
- package/src/alert-dialog/trigger.tsx +15 -0
- package/src/alert-dialog/types.ts +119 -0
- package/src/badge/badge.tsx +11 -14
- package/src/badge/style.module.css +0 -4
- package/src/button/button.tsx +2 -0
- package/src/button/style.module.css +9 -3
- package/src/card/stories/index.story.tsx +4 -5
- package/src/card/style.module.css +4 -10
- package/src/card/test/index.test.tsx +17 -1
- package/src/card/title.tsx +14 -12
- package/src/collapsible-card/content.tsx +16 -3
- package/src/collapsible-card/context.ts +7 -0
- package/src/collapsible-card/header-description.tsx +43 -0
- package/src/collapsible-card/header.tsx +47 -24
- package/src/collapsible-card/index.ts +2 -1
- package/src/collapsible-card/stories/index.story.tsx +102 -4
- package/src/collapsible-card/style.module.css +34 -2
- package/src/collapsible-card/test/index.test.tsx +96 -9
- package/src/collapsible-card/types.ts +22 -0
- package/src/dialog/action.tsx +8 -2
- package/src/dialog/close-icon.tsx +1 -0
- package/src/dialog/popup.tsx +23 -3
- package/src/dialog/stories/index.story.tsx +33 -28
- package/src/dialog/style.module.css +18 -14
- package/src/dialog/test/index.test.tsx +180 -4
- package/src/dialog/title.tsx +21 -9
- package/src/dialog/types.ts +20 -6
- package/src/empty-state/actions.tsx +24 -0
- package/src/empty-state/description.tsx +31 -0
- package/src/empty-state/icon.tsx +24 -0
- package/src/empty-state/index.ts +8 -0
- package/src/empty-state/root.tsx +23 -0
- package/src/empty-state/stories/index.story.tsx +64 -0
- package/src/empty-state/style.module.css +53 -0
- package/src/empty-state/test/actions.test.tsx +18 -0
- package/src/empty-state/test/description.test.tsx +26 -0
- package/src/empty-state/test/icon.test.tsx +13 -0
- package/src/empty-state/test/root.test.tsx +13 -0
- package/src/empty-state/test/title.test.tsx +26 -0
- package/src/empty-state/test/visual.test.tsx +17 -0
- package/src/empty-state/title.tsx +29 -0
- package/src/empty-state/types.ts +45 -0
- package/src/empty-state/visual.tsx +24 -0
- package/src/form/index.ts +3 -0
- package/src/form/input-control/index.ts +1 -0
- package/src/form/input-control/input-control.tsx +33 -0
- package/src/form/input-control/stories/index.story.tsx +163 -0
- package/src/form/input-control/test/index.test.tsx +53 -0
- package/src/form/input-control/types.ts +5 -0
- package/src/form/primitives/field/description.tsx +6 -1
- package/src/form/primitives/field/details.tsx +4 -2
- package/src/form/primitives/field/label.tsx +9 -5
- package/src/form/primitives/field/stories/index.story.tsx +2 -7
- package/src/form/primitives/field/test/index.test.tsx +11 -0
- package/src/form/primitives/fieldset/description.tsx +9 -1
- package/src/form/primitives/fieldset/legend.tsx +9 -4
- package/src/form/primitives/fieldset/stories/index.story.tsx +2 -7
- package/src/form/primitives/fieldset/test/index.test.tsx +22 -0
- package/src/form/primitives/input/input.tsx +6 -1
- package/src/form/primitives/input/stories/index.story.tsx +7 -0
- package/src/form/primitives/input/style.module.css +4 -0
- package/src/form/primitives/input-layout/input-layout.tsx +2 -0
- package/src/form/primitives/input-layout/slot.tsx +6 -2
- package/src/form/primitives/input-layout/stories/index.story.tsx +22 -1
- package/src/form/primitives/input-layout/style.module.css +3 -3
- package/src/form/primitives/select/popup.tsx +5 -2
- package/src/form/primitives/select/test/index.test.tsx +60 -1
- package/src/form/primitives/select/types.ts +14 -4
- package/src/form/primitives/stories/overview.mdx +15 -0
- package/src/form/primitives/textarea/textarea.tsx +11 -2
- package/src/form/stories/shared.tsx +21 -0
- package/src/form/types.ts +34 -0
- package/src/index.ts +4 -1
- package/src/link/link.tsx +2 -0
- package/src/link/style.module.css +11 -1
- package/src/notice/index.ts +0 -2
- package/src/notice/style.module.css +6 -6
- package/src/popover/arrow.tsx +49 -0
- package/src/popover/close.tsx +24 -0
- package/src/popover/context.tsx +100 -0
- package/src/popover/description.tsx +29 -0
- package/src/popover/index.ts +9 -0
- package/src/popover/popup.tsx +106 -0
- package/src/popover/root.tsx +41 -0
- package/src/popover/stories/index.story.tsx +1315 -0
- package/src/popover/stories/utils.tsx +91 -0
- package/src/popover/style.module.css +64 -0
- package/src/popover/test/index.test.tsx +727 -0
- package/src/popover/title.tsx +47 -0
- package/src/popover/trigger.tsx +17 -0
- package/src/popover/types.ts +113 -0
- package/src/tabs/context.tsx +170 -0
- package/src/tabs/list.tsx +0 -1
- package/src/tabs/panel.tsx +3 -0
- package/src/tabs/root.tsx +6 -1
- package/src/tabs/style.module.css +3 -3
- package/src/tabs/tab.tsx +3 -0
- package/src/tabs/test/index.test.tsx +162 -0
- package/src/text/stories/index.story.tsx +4 -2
- package/src/text/style.module.css +62 -36
- package/src/text/test/index.test.tsx +1 -4
- package/src/text/text.tsx +8 -1
- package/src/tooltip/popup.tsx +2 -1
- package/src/tooltip/root.tsx +13 -0
- package/src/tooltip/stories/index.story.tsx +20 -15
- package/src/tooltip/stories/usage-guidelines.mdx +91 -0
- package/src/tooltip/stories/usage-guidelines.story.tsx +119 -0
- package/src/tooltip/style.module.css +2 -2
- package/src/tooltip/test/index.test.tsx +61 -0
- package/src/tooltip/types.ts +5 -0
- package/src/utils/css/field.module.css +12 -9
- package/src/utils/css/focus.module.css +7 -5
- package/src/utils/css/global-css-defense.module.css +117 -0
- package/src/utils/css/item-popup.module.css +3 -2
- package/src/utils/css/select-trigger.module.css +1 -0
- package/src/utils/test/use-deprioritized-initial-focus.test.tsx +230 -0
- package/src/utils/types.ts +7 -2
- package/src/utils/use-deprioritized-initial-focus.ts +84 -0
- package/src/visually-hidden/stories/index.story.tsx +25 -0
- package/src/visually-hidden/visually-hidden.tsx +34 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/utils/use-deprioritized-initial-focus.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMemo, useRef } from '@wordpress/element';\nimport { tabbable } from 'tabbable';\n\n/**\n * The `initialFocus` type shared by Base UI overlay popups (Dialog, Popover,\n * AlertDialog, etc.). We derive it from `Popover.Popup.Props` here, but it\n * is identical across all overlay components.\n */\ntype InitialFocus = _Popover.Popup.Props[ 'initialFocus' ];\n\n/**\n * Options matching Base UI's internal tabbable configuration.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/utils/tabbable.ts\n */\nconst getTabbableOptions = () => ( {\n\tgetShadowRoot: true,\n\tdisplayCheck:\n\t\ttypeof ResizeObserver === 'function' &&\n\t\tResizeObserver.toString().includes( '[native code]' )\n\t\t\t? ( 'full' as const )\n\t\t\t: ( 'none' as const ),\n} );\n\n/**\n * Returns a resolved `initialFocus` value that deprioritizes elements\n * marked with a given data attribute (e.g. a close icon), and an internal\n * ref that must be merged onto the popup element.\n *\n * When `initialFocus` is `undefined` or `true` (the default behavior),\n * the hook replaces it with a callback that:\n * 1. On touch interactions \u2014 focuses the popup element itself (preventing\n * the virtual keyboard on Android), matching Base UI's default.\n * 2. On other interactions \u2014 returns the first tabbable element that does\n * *not* carry `deprioritizedAttribute`. Falls back to Base UI's default\n * when the deprioritized element is the only tabbable element.\n *\n * All other `initialFocus` values (`false`, `RefObject`, callback) pass\n * through unchanged.\n *\n * @param props\n * @param props.initialFocus The consumer-provided `initialFocus` value.\n * @param props.deprioritizedAttribute The data attribute whose elements should be deprioritized.\n */\nexport function useDeprioritizedInitialFocus( {\n\tinitialFocus,\n\tdeprioritizedAttribute,\n}: {\n\tinitialFocus: InitialFocus;\n\tdeprioritizedAttribute: string;\n} ) {\n\tconst popupRef = useRef< HTMLDivElement >( null );\n\n\tconst resolvedInitialFocus = useMemo( (): InitialFocus => {\n\t\tif ( initialFocus !== undefined && initialFocus !== true ) {\n\t\t\treturn initialFocus;\n\t\t}\n\n\t\treturn ( interactionType ): HTMLElement | boolean | null => {\n\t\t\tif ( interactionType === 'touch' ) {\n\t\t\t\treturn popupRef.current ?? true;\n\t\t\t}\n\n\t\t\tconst popup = popupRef.current;\n\t\t\tif ( ! popup ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst tabbables = tabbable( popup, getTabbableOptions() );\n\t\t\tfor ( const el of tabbables ) {\n\t\t\t\tif (\n\t\t\t\t\tel instanceof HTMLElement &&\n\t\t\t\t\t! el.hasAttribute( deprioritizedAttribute )\n\t\t\t\t) {\n\t\t\t\t\treturn el;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t};\n\t}, [ initialFocus, deprioritizedAttribute ] );\n\n\treturn { resolvedInitialFocus, popupRef };\n}\n"],
|
|
5
|
+
"mappings": ";AACA,SAAS,SAAS,cAAc;AAChC,SAAS,gBAAgB;AAazB,IAAM,qBAAqB,OAAQ;AAAA,EAClC,eAAe;AAAA,EACf,cACC,OAAO,mBAAmB,cAC1B,eAAe,SAAS,EAAE,SAAU,eAAgB,IAC/C,SACA;AACP;AAsBO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAGI;AACH,QAAM,WAAW,OAA0B,IAAK;AAEhD,QAAM,uBAAuB,QAAS,MAAoB;AACzD,QAAK,iBAAiB,UAAa,iBAAiB,MAAO;AAC1D,aAAO;AAAA,IACR;AAEA,WAAO,CAAE,oBAAmD;AAC3D,UAAK,oBAAoB,SAAU;AAClC,eAAO,SAAS,WAAW;AAAA,MAC5B;AAEA,YAAM,QAAQ,SAAS;AACvB,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,YAAM,YAAY,SAAU,OAAO,mBAAmB,CAAE;AACxD,iBAAY,MAAM,WAAY;AAC7B,YACC,cAAc,eACd,CAAE,GAAG,aAAc,sBAAuB,GACzC;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,EACD,GAAG,CAAE,cAAc,sBAAuB,CAAE;AAE5C,SAAO,EAAE,sBAAsB,SAAS;AACzC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -3,9 +3,9 @@ import { mergeProps, useRender } from "@base-ui/react";
|
|
|
3
3
|
import { forwardRef } from "@wordpress/element";
|
|
4
4
|
|
|
5
5
|
// packages/ui/src/visually-hidden/style.module.css
|
|
6
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
6
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='c46e8cb841']")) {
|
|
7
7
|
const style = document.createElement("style");
|
|
8
|
-
style.setAttribute("data-wp-hash", "
|
|
8
|
+
style.setAttribute("data-wp-hash", "c46e8cb841");
|
|
9
9
|
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}"));
|
|
10
10
|
document.head.appendChild(style);
|
|
11
11
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/visually-hidden/visually-hidden.tsx", "../../src/visually-hidden/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport type { VisuallyHiddenProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful when providing context that's only meaningful to assistive technology.\n */\nexport const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(\n\tfunction VisuallyHidden( { render, ...restProps }, ref ) {\n\t\tconst element = useRender( {\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{ className: styles[ 'visually-hidden' ] },\n\t\t\t\trestProps\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACD3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0RAA0R,CAAC;AACrU,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,mBAAkB,oCAAmC;;;
|
|
4
|
+
"sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport type { VisuallyHiddenProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful when providing context that's only meaningful to assistive technology.\n *\n * Renders a `<div>` by default. Use the `render` prop to swap the\n * underlying element while preserving the visually-hidden behavior.\n *\n * ## Composing with other components\n *\n * When composing with another component that uses the `render` prop\n * pattern, there are two directions \u2014 and they produce different results.\n *\n * Most of the time you'll want `VisuallyHidden` as the **host** (outer\n * component) and pass the other component via `render`. This keeps the\n * other component's HTML element and semantics intact, while\n * `VisuallyHidden` only adds its hiding styles:\n *\n * ```jsx\n * // OtherComponent keeps its semantic element (e.g. <h2>).\n * <VisuallyHidden render={ <OtherComponent /> }>\n * Accessible text\n * </VisuallyHidden>\n * ```\n *\n * The opposite direction is also possible, but be aware that it replaces\n * the other component's element with VisuallyHidden's default `<div>`:\n *\n * ```jsx\n * // OtherComponent's element becomes a <div>.\n * <OtherComponent render={ <VisuallyHidden /> }>\n * Accessible text\n * </OtherComponent>\n * ```\n *\n * Choose based on what you need: if the other component's semantic\n * element matters (e.g. `<label>`, `<legend>`, `<h2>`), keep\n * `VisuallyHidden` as the host so the element is preserved.\n */\nexport const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(\n\tfunction VisuallyHidden( { render, ...restProps }, ref ) {\n\t\tconst element = useRender( {\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{ className: styles[ 'visually-hidden' ] },\n\t\t\t\trestProps\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='c46e8cb841']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c46e8cb841\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"visually-hidden\":\"f37b9e2e191ebd66__visually-hidden\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACD3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0RAA0R,CAAC;AACrU,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,mBAAkB,oCAAmC;;;ADqC9D,IAAM,iBAAiB;AAAA,EAC7B,SAASA,gBAAgB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AACxD,UAAM,UAAU,UAAW;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACN,EAAE,WAAW,cAAQ,iBAAkB,EAAE;AAAA,QACzC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
|
|
6
6
|
"names": ["VisuallyHidden"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type Phase = 'idle' | 'pending' | 'closing';
|
|
2
|
+
interface AlertDialogContextValue {
|
|
3
|
+
phase: Phase;
|
|
4
|
+
showSpinner: boolean;
|
|
5
|
+
errorMessage?: string;
|
|
6
|
+
confirm: () => Promise<void>;
|
|
7
|
+
}
|
|
8
|
+
declare const AlertDialogContext: import("react").Context<AlertDialogContextValue>;
|
|
9
|
+
export { AlertDialogContext };
|
|
10
|
+
export type { Phase };
|
|
11
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/context.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5C,UAAU,uBAAuB;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,OAAO,CAAE,IAAI,CAAE,CAAC;CAC/B;AAID,QAAA,MAAM,kBAAkB,kDAKrB,CAAC;AAEJ,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/popup.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,QAAA,MAAM,KAAK,uGA4FV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { RootProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A dialog that requires a user response to proceed.
|
|
4
|
+
*
|
|
5
|
+
* Use `AlertDialog.Trigger` to render a button that opens the dialog.
|
|
6
|
+
* Use `AlertDialog.Popup` to render the dialog content.
|
|
7
|
+
* The `AlertDialog.Trigger` is optional — the dialog can also be controlled
|
|
8
|
+
* via `open` / `onOpenChange` props.
|
|
9
|
+
*
|
|
10
|
+
* For use cases outside the standard confirm/cancel pattern, use the lower-level
|
|
11
|
+
* `Dialog` component directly.
|
|
12
|
+
*
|
|
13
|
+
* See the [Destructive Actions guidelines](https://wordpress.github.io/gutenberg/?path=/docs/design-system-patterns-destructive-actions--docs)
|
|
14
|
+
* for more details on when to use each pattern.
|
|
15
|
+
*/
|
|
16
|
+
declare function Root({ children, open: openProp, onOpenChange, defaultOpen, onConfirm, }: RootProps): import("react").JSX.Element;
|
|
17
|
+
export { Root };
|
|
18
|
+
//# sourceMappingURL=root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/root.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUzC;;;;;;;;;;;;;GAaG;AACH,iBAAS,IAAI,CAAE,EACd,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,WAAW,EACX,SAAS,GACT,EAAE,SAAS,+BAqLX;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { AlertDialog } from '../..';
|
|
3
|
+
declare const meta: Meta<typeof AlertDialog.Root>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof AlertDialog.Root>;
|
|
6
|
+
/**
|
|
7
|
+
* Standard confirmation dialog for reversible actions. The dialog can be
|
|
8
|
+
* dismissed via Escape key or the cancel/confirm buttons. Backdrop click
|
|
9
|
+
* is blocked.
|
|
10
|
+
*/
|
|
11
|
+
export declare const Default: Story;
|
|
12
|
+
/**
|
|
13
|
+
* Confirmation dialog for irreversible actions that cannot be undone.
|
|
14
|
+
* The confirm button uses error/danger coloring.
|
|
15
|
+
*/
|
|
16
|
+
export declare const Irreversible: Story;
|
|
17
|
+
/**
|
|
18
|
+
* Example with custom button labels for both confirm and cancel buttons.
|
|
19
|
+
*/
|
|
20
|
+
export declare const CustomLabels: Story;
|
|
21
|
+
/**
|
|
22
|
+
* Use `children` to render custom content between the description and the
|
|
23
|
+
* action buttons. The `description` should be self-contained for
|
|
24
|
+
* accessibility (`aria-describedby`); `children` adds supplementary detail.
|
|
25
|
+
*/
|
|
26
|
+
export declare const WithCustomContent: Story;
|
|
27
|
+
/**
|
|
28
|
+
* Example showing composition with a menu. The `AlertDialog.Trigger` is
|
|
29
|
+
* composed with Base UI's `Menu.Item` using the `render` prop, allowing the
|
|
30
|
+
* menu item to directly trigger the alert dialog.
|
|
31
|
+
*
|
|
32
|
+
* Note: the example currently uses the `Menu` component from BaseUI, although
|
|
33
|
+
* consumers should not use BaseUI directly and instead use the DS `Menu`
|
|
34
|
+
* component (not ready yet).
|
|
35
|
+
*/
|
|
36
|
+
export declare const MenuTrigger: Story;
|
|
37
|
+
/**
|
|
38
|
+
* Async confirm flow. The consumer returns a promise from `onConfirm`.
|
|
39
|
+
* The dialog automatically manages the pending state: buttons are disabled
|
|
40
|
+
* and a spinner appears on the confirm button. Toggle between success and
|
|
41
|
+
* failure to test both outcomes.
|
|
42
|
+
*
|
|
43
|
+
* On failure, the consumer catches the error and returns
|
|
44
|
+
* `{ close: false, error: '...' }`. The component displays the message
|
|
45
|
+
* below the action buttons and announces it to screen readers. The error
|
|
46
|
+
* is automatically cleared on the next confirm attempt or when the dialog
|
|
47
|
+
* reopens.
|
|
48
|
+
*/
|
|
49
|
+
export declare const AsyncConfirm: Story;
|
|
50
|
+
/**
|
|
51
|
+
* The `AlertDialog.Trigger` element is not necessary when the open state is
|
|
52
|
+
* controlled externally. This is useful when the dialog needs to be opened
|
|
53
|
+
* from code or from a non-standard trigger element.
|
|
54
|
+
*/
|
|
55
|
+
export declare const Controlled: Story;
|
|
56
|
+
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alert-dialog/stories/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,WAAW,EAAQ,MAAM,OAAO,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAAC,IAAI,CAWxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAC,IAAI,CAAE,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAC;AAuBF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KA+CzB,CAAC;AAMF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/alert-dialog/test/index.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { TriggerProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Renders a button that opens the alert dialog when clicked.
|
|
4
|
+
*/
|
|
5
|
+
declare const Trigger: import("react").ForwardRefExoticComponent<TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
export { Trigger };
|
|
7
|
+
//# sourceMappingURL=trigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;GAEG;AACH,QAAA,MAAM,OAAO,4GAIZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { ComponentProps } from '../utils/types';
|
|
4
|
+
/**
|
|
5
|
+
* The return type of `onConfirm`. Return `void` (or nothing) to auto-close
|
|
6
|
+
* the dialog after the confirm handler completes. Return `{ close: false }`
|
|
7
|
+
* to keep the dialog open (e.g. for validation errors).
|
|
8
|
+
*
|
|
9
|
+
* Return `{ error: '...' }` to display a built-in error message below the
|
|
10
|
+
* action buttons. When `error` is provided, the dialog stays open
|
|
11
|
+
* regardless of the `close` value.
|
|
12
|
+
*/
|
|
13
|
+
export type ConfirmResult = void | {
|
|
14
|
+
close?: boolean;
|
|
15
|
+
error?: string;
|
|
16
|
+
};
|
|
17
|
+
export interface RootProps extends Pick<_AlertDialog.Root.Props, 'open' | 'onOpenChange' | 'defaultOpen'> {
|
|
18
|
+
/**
|
|
19
|
+
* The content to be rendered inside the component. Typically includes
|
|
20
|
+
* `AlertDialog.Trigger` and `AlertDialog.Popup`.
|
|
21
|
+
*/
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Callback fired when the user confirms the action.
|
|
25
|
+
*
|
|
26
|
+
* - Synchronous handlers: the dialog closes immediately after the
|
|
27
|
+
* handler returns.
|
|
28
|
+
* - Async handlers: the dialog enters a "pending" state (buttons
|
|
29
|
+
* disabled, spinner shown on the confirm button) until the promise
|
|
30
|
+
* settles.
|
|
31
|
+
*
|
|
32
|
+
* Return `{ close: false }` to keep the dialog open after the handler
|
|
33
|
+
* completes (e.g. for server-side validation). Return `void` or
|
|
34
|
+
* `{ close: true }` to close the dialog (the default).
|
|
35
|
+
*
|
|
36
|
+
* Return `{ error: '...' }` to show a built-in error message below
|
|
37
|
+
* the action buttons. The dialog stays open regardless of the `close`
|
|
38
|
+
* value. The error is announced to screen readers and is automatically
|
|
39
|
+
* cleared on the next confirm attempt or when the dialog reopens.
|
|
40
|
+
*
|
|
41
|
+
* If the promise rejects (or the handler throws) without returning an
|
|
42
|
+
* `error`, the dialog stays open and returns to idle without showing
|
|
43
|
+
* a visible error message. The error is logged to the console.
|
|
44
|
+
* To show a user-facing message on failure, catch the error and
|
|
45
|
+
* return `{ close: false, error: '...' }`.
|
|
46
|
+
*/
|
|
47
|
+
onConfirm?: () => ConfirmResult | Promise<ConfirmResult>;
|
|
48
|
+
}
|
|
49
|
+
export interface TriggerProps extends ComponentProps<'button'> {
|
|
50
|
+
/**
|
|
51
|
+
* The content to be rendered inside the component.
|
|
52
|
+
*/
|
|
53
|
+
children?: ReactNode;
|
|
54
|
+
}
|
|
55
|
+
export interface PopupProps extends ComponentProps<'div'>, Pick<_AlertDialog.Popup.Props, 'initialFocus' | 'finalFocus'> {
|
|
56
|
+
/**
|
|
57
|
+
* A parent element to render the portal into.
|
|
58
|
+
*/
|
|
59
|
+
container?: _AlertDialog.Portal.Props['container'];
|
|
60
|
+
/**
|
|
61
|
+
* The semantic intent of the dialog, which determines its styling.
|
|
62
|
+
*
|
|
63
|
+
* All intents use `role="alertdialog"`, are always modal, and block
|
|
64
|
+
* backdrop click dismissal. Escape key and the cancel/confirm buttons
|
|
65
|
+
* still dismiss the dialog.
|
|
66
|
+
*
|
|
67
|
+
* - `'default'`: Standard confirmation dialog for reversible actions.
|
|
68
|
+
* - `'irreversible'`: Confirmation dialog for irreversible actions that
|
|
69
|
+
* cannot be undone. The confirm button uses error/danger coloring.
|
|
70
|
+
*
|
|
71
|
+
* @default 'default'
|
|
72
|
+
*/
|
|
73
|
+
intent?: 'default' | 'irreversible';
|
|
74
|
+
/**
|
|
75
|
+
* The title displayed in the dialog header. This serves as both the
|
|
76
|
+
* visible heading and the accessible label (`aria-labelledby`) for the
|
|
77
|
+
* dialog. Must be a plain string to ensure a predictable accessible name.
|
|
78
|
+
*/
|
|
79
|
+
title: string;
|
|
80
|
+
/**
|
|
81
|
+
* An optional description displayed below the title. Rendered using
|
|
82
|
+
* Base UI's `AlertDialog.Description` for proper `aria-describedby`
|
|
83
|
+
* association with the dialog. Must be a plain string to ensure a
|
|
84
|
+
* predictable accessible description.
|
|
85
|
+
*/
|
|
86
|
+
description?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Optional body content displayed between the description and the
|
|
89
|
+
* action buttons. Use for supplementary details or form fields.
|
|
90
|
+
*/
|
|
91
|
+
children?: ReactNode;
|
|
92
|
+
/**
|
|
93
|
+
* Custom text for the confirm button.
|
|
94
|
+
*
|
|
95
|
+
* @default 'OK'
|
|
96
|
+
*/
|
|
97
|
+
confirmButtonText?: string;
|
|
98
|
+
/**
|
|
99
|
+
* Custom text for the cancel button.
|
|
100
|
+
*
|
|
101
|
+
* @default 'Cancel'
|
|
102
|
+
*/
|
|
103
|
+
cancelButtonText?: string;
|
|
104
|
+
}
|
|
105
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,MAAM,WAAW,SAChB,SAAQ,IAAI,CACX,YAAY,CAAC,IAAI,CAAC,KAAK,EACvB,MAAM,GAAG,cAAc,GAAG,aAAa,CACvC;IACD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,SAAS,CAAC,EAAE,MAAM,aAAa,GAAG,OAAO,CAAE,aAAa,CAAE,CAAC;CAC3D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CAAE,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAE;IAChE;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAE,WAAW,CAAE,CAAC;IAErD;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAEpC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,KAAK,wGAgBf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAM3C,eAAO,MAAM,MAAM,2GA+ClB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/card/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAwBjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAAC,IAAI,CASjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAAE,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/card/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAwBjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAAC,IAAI,CASjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAC,IAAI,CAAE,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/card/title.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/card/title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAajB,CAAC"}
|
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
* `Collapsible` is a collection of React components that combine to render
|
|
6
6
|
* a collapsible panel controlled by a button.
|
|
7
7
|
*/
|
|
8
|
-
export declare const Panel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
|
|
8
|
+
export declare const Panel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "style" | "className" | "children" | "render"> & {
|
|
9
9
|
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
10
11
|
render?: ((props: import("react").HTMLAttributes<any> & {
|
|
11
12
|
ref?: import("react").Ref<any> | undefined;
|
|
12
13
|
}) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/collapsible/panel.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/collapsible/panel.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;kDAIjB,CAAC"}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
* `Collapsible` is a collection of React components that combine to render
|
|
5
5
|
* a collapsible panel controlled by a button.
|
|
6
6
|
*/
|
|
7
|
-
export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "className" | "children" | "render"> & {
|
|
7
|
+
export declare const Root: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "style" | "className" | "children" | "render"> & {
|
|
8
8
|
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
9
10
|
render?: ((props: import("react").HTMLAttributes<any> & {
|
|
10
11
|
ref?: import("react").Ref<any> | undefined;
|
|
11
12
|
}) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/collapsible/root.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/collapsible/root.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;kDAIhB,CAAC"}
|
|
@@ -4,8 +4,9 @@
|
|
|
4
4
|
* `Collapsible` is a collection of React components that combine to render
|
|
5
5
|
* a collapsible panel controlled by a button.
|
|
6
6
|
*/
|
|
7
|
-
export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref">, "className" | "children" | "render"> & {
|
|
7
|
+
export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref">, "style" | "className" | "children" | "render"> & {
|
|
8
8
|
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
9
10
|
render?: ((props: import("react").HTMLAttributes<any> & {
|
|
10
11
|
ref?: import("react").Ref<any> | undefined;
|
|
11
12
|
}) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/collapsible/trigger.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"trigger.d.ts","sourceRoot":"","sources":["../../src/collapsible/trigger.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;;qDAInB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/content.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/content.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,OAAO,yGAqBnB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B;sBACpB,CAAE,EAAE,EAAE,MAAM,GAAG,SAAS,KAAM,IAAI;EAGlD,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { HeaderDescriptionProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Secondary content placed in the collapsible card header that describes
|
|
4
|
+
* the trigger button via `aria-describedby`. Use it for supplementary
|
|
5
|
+
* information such as status badges or summary values.
|
|
6
|
+
*
|
|
7
|
+
* The content is visually rendered but marked `aria-hidden` so that
|
|
8
|
+
* assistive technologies consume it only through the `aria-describedby`
|
|
9
|
+
* relationship on the trigger, avoiding double announcements.
|
|
10
|
+
*
|
|
11
|
+
* Avoid interactive elements (buttons, links, inputs) inside this
|
|
12
|
+
* component — the entire header is the toggle trigger.
|
|
13
|
+
*/
|
|
14
|
+
export declare const HeaderDescription: import("react").ForwardRefExoticComponent<HeaderDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
//# sourceMappingURL=header-description.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"header-description.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/header-description.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,mHA0B3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/header.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,wGAuDlB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Root } from './root';
|
|
2
2
|
import { Header } from './header';
|
|
3
|
+
import { HeaderDescription } from './header-description';
|
|
3
4
|
import { Content } from './content';
|
|
4
|
-
export { Root, Header, Content };
|
|
5
|
+
export { Root, Header, HeaderDescription, Content };
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -15,6 +15,16 @@ export declare const InitiallyOpened: Story;
|
|
|
15
15
|
* A disabled collapsible card cannot be toggled by the user.
|
|
16
16
|
*/
|
|
17
17
|
export declare const Disabled: Story;
|
|
18
|
+
/**
|
|
19
|
+
* Multiple collapsible cards stacked vertically, simulating a typical
|
|
20
|
+
* settings-panel or FAQ-style layout.
|
|
21
|
+
*/
|
|
22
|
+
export declare const Stacked: Story;
|
|
23
|
+
/**
|
|
24
|
+
* A collapsible card with a `HeaderDescription` that provides supplementary
|
|
25
|
+
* information (e.g. status, summary) as an `aria-describedby` relationship.
|
|
26
|
+
*/
|
|
27
|
+
export declare const WithHeaderDescription: Story;
|
|
18
28
|
/**
|
|
19
29
|
* Visual comparison: a `CollapsibleCard` (open) next to a regular `Card`
|
|
20
30
|
* to verify identical spacing and layout.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/collapsible-card/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,eAAe,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/collapsible-card/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,eAAe,MAAM,UAAU,CAAC;AAyB5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAAC,IAAI,CAQ5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,eAAe,CAAC,IAAI,CAAE,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAuCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KA4C5B,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import type { PanelProps } from '../collapsible/types';
|
|
2
3
|
import type { ComponentProps } from '../utils/types';
|
|
3
4
|
export interface RootProps extends ComponentProps<'div'> {
|
|
4
5
|
/**
|
|
@@ -33,10 +34,30 @@ export interface HeaderProps extends ComponentProps<'div'> {
|
|
|
33
34
|
*/
|
|
34
35
|
children?: ReactNode;
|
|
35
36
|
}
|
|
37
|
+
export interface HeaderDescriptionProps extends ComponentProps<'div'> {
|
|
38
|
+
/**
|
|
39
|
+
* Secondary content that describes the header trigger via
|
|
40
|
+
* `aria-describedby`. Rendered visually but marked `aria-hidden`
|
|
41
|
+
* so assistive technologies consume it only through the description
|
|
42
|
+
* relationship, avoiding double announcements.
|
|
43
|
+
*
|
|
44
|
+
* Avoid interactive elements — the entire header is the toggle trigger.
|
|
45
|
+
*/
|
|
46
|
+
children?: ReactNode;
|
|
47
|
+
}
|
|
36
48
|
export interface ContentProps extends ComponentProps<'div'> {
|
|
37
49
|
/**
|
|
38
50
|
* The content to be rendered inside the collapsible content area.
|
|
39
51
|
*/
|
|
40
52
|
children?: ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* Allows the browser’s built-in page search to find and expand the panel contents.
|
|
55
|
+
*
|
|
56
|
+
* Overrides the `keepMounted` prop and uses `hidden="until-found"`
|
|
57
|
+
* to hide the element without removing it from the DOM.
|
|
58
|
+
*
|
|
59
|
+
* @default true
|
|
60
|
+
*/
|
|
61
|
+
hiddenUntilFound?: PanelProps['hiddenUntilFound'];
|
|
41
62
|
}
|
|
42
63
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAE,KAAK,CAAE;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,OAAO,KAAM,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/collapsible-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAE,KAAK,CAAE;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAE,IAAI,EAAE,OAAO,KAAM,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAE,KAAK,CAAE;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAE,kBAAkB,CAAE,CAAC;CACpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/dialog/action.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/dialog/action.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;GAGG;AACH,QAAA,MAAM,MAAM,2GAgBX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/dialog/close-icon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,QAAA,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/dialog/close-icon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,QAAA,MAAM,SAAS,8GAmBd,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/dialog/popup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/dialog/popup.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAO1C;;;GAGG;AACH,QAAA,MAAM,KAAK,uGAwCR,CAAC;AAEJ,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -8,12 +8,6 @@ type Story = StoryObj<typeof Dialog.Root>;
|
|
|
8
8
|
* what happens when clicking the close icon.
|
|
9
9
|
*/
|
|
10
10
|
export declare const _Default: Story;
|
|
11
|
-
/**
|
|
12
|
-
* A confirmation dialog that intentionally omits the close icon. The user
|
|
13
|
-
* must explicitly choose "Cancel" or "Confirm" to make their intent clear,
|
|
14
|
-
* since it is not obvious what would happen when clicking a close icon.
|
|
15
|
-
*/
|
|
16
|
-
export declare const ConfirmDialog: Story;
|
|
17
11
|
export declare const AllSizes: Story;
|
|
18
12
|
/**
|
|
19
13
|
* Popovers in Gutenberg are managed with explicit z-index values, which can create
|
|
@@ -25,4 +19,12 @@ export declare const AllSizes: Story;
|
|
|
25
19
|
* because it requires a global CSS rule.)
|
|
26
20
|
*/
|
|
27
21
|
export declare const WithCustomZIndex: Story;
|
|
22
|
+
/**
|
|
23
|
+
* A dialog with a visually hidden title. The title is still present in the
|
|
24
|
+
* DOM for `aria-labelledby`, but is not visible to sighted users.
|
|
25
|
+
*
|
|
26
|
+
* Use `<VisuallyHidden render={ <Dialog.Title /> }>` so that `Dialog.Title`
|
|
27
|
+
* keeps its `<h2>` element while being visually hidden.
|
|
28
|
+
*/
|
|
29
|
+
export declare const WithVisuallyHiddenTitle: Story;
|
|
28
30
|
//# sourceMappingURL=index.story.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/dialog/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/dialog/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAAC,IAAI,CAqCnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,MAAM,CAAC,IAAI,CAAE,CAAC;AAE5C;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAuEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAuBrC,CAAC"}
|
|
@@ -4,8 +4,18 @@ import type { TitleProps } from './types';
|
|
|
4
4
|
* and serves as both the visible heading and the accessible label for
|
|
5
5
|
* the dialog.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* **Required** — every dialog must include a `Dialog.Title`, even if
|
|
8
|
+
* visually hidden. The rendered element is linked to the popup via
|
|
9
|
+
* `aria-labelledby`. Renders an `<h2>` by default.
|
|
10
|
+
*
|
|
11
|
+
* To visually hide the title while keeping it accessible, wrap it with
|
|
12
|
+
* `VisuallyHidden` using the `render` prop:
|
|
13
|
+
*
|
|
14
|
+
* ```jsx
|
|
15
|
+
* <VisuallyHidden render={ <Dialog.Title /> }>
|
|
16
|
+
* Accessible title text
|
|
17
|
+
* </VisuallyHidden>
|
|
18
|
+
* ```
|
|
9
19
|
*/
|
|
10
20
|
declare const Title: import("react").ForwardRefExoticComponent<TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
11
21
|
export { Title };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/dialog/title.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C
|
|
1
|
+
{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/dialog/title.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,2GAsBV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|