@wordpress/ui 0.12.0 → 0.13.1-next.v.202605131006.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 +35 -0
- package/CONTRIBUTING.md +34 -0
- package/build/alert-dialog/popup.cjs +92 -22
- package/build/alert-dialog/popup.cjs.map +3 -3
- package/build/badge/badge.cjs +84 -5
- package/build/badge/badge.cjs.map +3 -3
- package/build/button/button.cjs +90 -20
- package/build/button/button.cjs.map +3 -3
- package/build/button/icon.cjs.map +2 -2
- package/build/button/index.cjs +1 -0
- package/build/button/index.cjs.map +3 -3
- package/build/button/types.cjs.map +1 -1
- package/build/card/content.cjs +84 -5
- package/build/card/content.cjs.map +3 -3
- package/build/card/full-bleed.cjs +84 -5
- package/build/card/full-bleed.cjs.map +3 -3
- package/build/card/header.cjs +84 -5
- package/build/card/header.cjs.map +3 -3
- package/build/card/root.cjs +86 -10
- package/build/card/root.cjs.map +3 -3
- package/build/collapsible-card/content.cjs +85 -6
- package/build/collapsible-card/content.cjs.map +3 -3
- package/build/collapsible-card/header.cjs +131 -52
- package/build/collapsible-card/header.cjs.map +3 -3
- package/build/dialog/content.cjs +86 -10
- package/build/dialog/content.cjs.map +3 -3
- package/build/dialog/description.cjs +84 -5
- package/build/dialog/description.cjs.map +3 -3
- package/build/dialog/footer.cjs +84 -5
- package/build/dialog/footer.cjs.map +3 -3
- package/build/dialog/header.cjs +84 -5
- package/build/dialog/header.cjs.map +3 -3
- package/build/dialog/popup.cjs +86 -7
- package/build/dialog/popup.cjs.map +3 -3
- package/build/dialog/title.cjs +84 -5
- package/build/dialog/title.cjs.map +3 -3
- package/build/drawer/content.cjs +103 -19
- package/build/drawer/content.cjs.map +4 -4
- package/build/drawer/footer.cjs +84 -5
- package/build/drawer/footer.cjs.map +3 -3
- package/build/drawer/header.cjs +84 -5
- package/build/drawer/header.cjs.map +3 -3
- package/build/drawer/popup.cjs +86 -7
- package/build/drawer/popup.cjs.map +3 -3
- package/build/drawer/title.cjs +84 -5
- package/build/drawer/title.cjs.map +3 -3
- package/build/drawer/types.cjs.map +1 -1
- package/build/empty-state/actions.cjs +84 -5
- package/build/empty-state/actions.cjs.map +3 -3
- package/build/empty-state/description.cjs +84 -5
- package/build/empty-state/description.cjs.map +3 -3
- package/build/empty-state/icon.cjs +84 -5
- package/build/empty-state/icon.cjs.map +3 -3
- package/build/empty-state/root.cjs +84 -5
- package/build/empty-state/root.cjs.map +3 -3
- package/build/empty-state/title.cjs +84 -5
- package/build/empty-state/title.cjs.map +3 -3
- package/build/empty-state/visual.cjs +84 -5
- package/build/empty-state/visual.cjs.map +3 -3
- package/build/form/index.cjs +3 -1
- package/build/form/index.cjs.map +2 -2
- package/build/form/primitives/autocomplete/empty.cjs +84 -5
- package/build/form/primitives/autocomplete/empty.cjs.map +3 -3
- package/build/form/primitives/autocomplete/item.cjs +86 -10
- package/build/form/primitives/autocomplete/item.cjs.map +3 -3
- package/build/form/primitives/autocomplete/list-body.cjs +84 -5
- package/build/form/primitives/autocomplete/list-body.cjs.map +3 -3
- package/build/form/primitives/autocomplete/list.cjs +84 -5
- package/build/form/primitives/autocomplete/list.cjs.map +3 -3
- package/build/form/primitives/autocomplete/popup.cjs +90 -17
- package/build/form/primitives/autocomplete/popup.cjs.map +3 -3
- package/build/form/primitives/field/description.cjs +86 -10
- package/build/form/primitives/field/description.cjs.map +3 -3
- package/build/form/primitives/field/details.cjs +84 -5
- package/build/form/primitives/field/details.cjs.map +3 -3
- package/build/form/primitives/field/label.cjs +84 -5
- package/build/form/primitives/field/label.cjs.map +3 -3
- package/build/form/primitives/field/root.cjs +84 -5
- package/build/form/primitives/field/root.cjs.map +3 -3
- package/build/form/primitives/fieldset/description.cjs +86 -10
- package/build/form/primitives/fieldset/description.cjs.map +3 -3
- package/build/form/primitives/fieldset/details.cjs +84 -5
- package/build/form/primitives/fieldset/details.cjs.map +3 -3
- package/build/form/primitives/fieldset/legend.cjs +84 -5
- package/build/form/primitives/fieldset/legend.cjs.map +3 -3
- package/build/form/primitives/fieldset/root.cjs +84 -5
- package/build/form/primitives/fieldset/root.cjs.map +3 -3
- package/build/form/primitives/input/input.cjs +88 -15
- package/build/form/primitives/input/input.cjs.map +3 -3
- package/build/form/primitives/input-layout/input-layout.cjs +88 -15
- package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
- package/build/form/primitives/input-layout/slot.cjs +84 -5
- package/build/form/primitives/input-layout/slot.cjs.map +3 -3
- package/build/form/primitives/select/item.cjs +87 -11
- package/build/form/primitives/select/item.cjs.map +3 -3
- package/build/form/primitives/select/popup.cjs +90 -17
- package/build/form/primitives/select/popup.cjs.map +3 -3
- package/build/form/primitives/select/root.cjs.map +2 -2
- package/build/form/primitives/select/trigger.cjs +98 -16
- package/build/form/primitives/select/trigger.cjs.map +3 -3
- package/build/form/primitives/select/types.cjs.map +1 -1
- package/build/form/primitives/textarea/textarea.cjs +86 -10
- package/build/form/primitives/textarea/textarea.cjs.map +3 -3
- package/build/form/select-control/context.cjs +37 -0
- package/build/form/select-control/context.cjs.map +7 -0
- package/build/form/select-control/index.cjs +39 -0
- package/build/form/select-control/index.cjs.map +7 -0
- package/build/form/select-control/item.cjs +41 -0
- package/build/form/select-control/item.cjs.map +7 -0
- package/build/form/select-control/select-control.cjs +75 -0
- package/build/form/select-control/select-control.cjs.map +7 -0
- package/build/form/select-control/types.cjs +19 -0
- package/build/form/select-control/types.cjs.map +7 -0
- package/build/form/types.cjs.map +1 -1
- package/build/icon-button/icon-button.cjs +86 -6
- package/build/icon-button/icon-button.cjs.map +3 -3
- package/build/icon-button/types.cjs.map +1 -1
- package/build/link/link.cjs +90 -20
- package/build/link/link.cjs.map +3 -3
- package/build/notice/action-button.cjs +84 -5
- package/build/notice/action-button.cjs.map +3 -3
- package/build/notice/action-link.cjs +84 -5
- package/build/notice/action-link.cjs.map +3 -3
- package/build/notice/actions.cjs +84 -5
- package/build/notice/actions.cjs.map +3 -3
- package/build/notice/close-icon.cjs +84 -5
- package/build/notice/close-icon.cjs.map +3 -3
- package/build/notice/description.cjs +84 -5
- package/build/notice/description.cjs.map +3 -3
- package/build/notice/root.cjs +86 -10
- package/build/notice/root.cjs.map +3 -3
- package/build/notice/title.cjs +84 -5
- package/build/notice/title.cjs.map +3 -3
- package/build/popover/arrow.cjs +84 -5
- package/build/popover/arrow.cjs.map +3 -3
- package/build/popover/popup.cjs +88 -12
- package/build/popover/popup.cjs.map +3 -3
- package/build/popover/title.cjs +84 -5
- package/build/popover/title.cjs.map +3 -3
- package/build/stack/stack.cjs +84 -5
- package/build/stack/stack.cjs.map +3 -3
- package/build/tabs/list.cjs +84 -5
- package/build/tabs/list.cjs.map +3 -3
- package/build/tabs/panel.cjs +86 -10
- package/build/tabs/panel.cjs.map +3 -3
- package/build/tabs/tab.cjs +84 -5
- package/build/tabs/tab.cjs.map +3 -3
- package/build/text/text.cjs +86 -10
- package/build/text/text.cjs.map +3 -3
- package/build/tooltip/index.cjs +3 -0
- package/build/tooltip/index.cjs.map +2 -2
- package/build/tooltip/popup.cjs +111 -40
- package/build/tooltip/popup.cjs.map +3 -3
- package/build/tooltip/positioner.cjs +159 -0
- package/build/tooltip/positioner.cjs.map +7 -0
- package/build/tooltip/types.cjs.map +1 -1
- package/build/utils/{render-portal-with-children.cjs → render-slot-with-children.cjs} +9 -12
- package/build/utils/render-slot-with-children.cjs.map +7 -0
- package/build/visually-hidden/visually-hidden.cjs +84 -5
- package/build/visually-hidden/visually-hidden.cjs.map +3 -3
- package/build-module/alert-dialog/popup.mjs +92 -22
- package/build-module/alert-dialog/popup.mjs.map +3 -3
- package/build-module/badge/badge.mjs +84 -5
- package/build-module/badge/badge.mjs.map +3 -3
- package/build-module/button/button.mjs +90 -20
- package/build-module/button/button.mjs.map +3 -3
- package/build-module/button/icon.mjs.map +2 -2
- package/build-module/button/index.mjs +3 -2
- package/build-module/button/index.mjs.map +2 -2
- package/build-module/card/content.mjs +84 -5
- package/build-module/card/content.mjs.map +3 -3
- package/build-module/card/full-bleed.mjs +84 -5
- package/build-module/card/full-bleed.mjs.map +3 -3
- package/build-module/card/header.mjs +84 -5
- package/build-module/card/header.mjs.map +3 -3
- package/build-module/card/root.mjs +86 -10
- package/build-module/card/root.mjs.map +3 -3
- package/build-module/collapsible-card/content.mjs +85 -6
- package/build-module/collapsible-card/content.mjs.map +3 -3
- package/build-module/collapsible-card/header.mjs +131 -52
- package/build-module/collapsible-card/header.mjs.map +3 -3
- package/build-module/dialog/content.mjs +86 -10
- package/build-module/dialog/content.mjs.map +3 -3
- package/build-module/dialog/description.mjs +84 -5
- package/build-module/dialog/description.mjs.map +3 -3
- package/build-module/dialog/footer.mjs +84 -5
- package/build-module/dialog/footer.mjs.map +3 -3
- package/build-module/dialog/header.mjs +84 -5
- package/build-module/dialog/header.mjs.map +3 -3
- package/build-module/dialog/popup.mjs +86 -7
- package/build-module/dialog/popup.mjs.map +3 -3
- package/build-module/dialog/title.mjs +84 -5
- package/build-module/dialog/title.mjs.map +3 -3
- package/build-module/drawer/content.mjs +103 -19
- package/build-module/drawer/content.mjs.map +3 -3
- package/build-module/drawer/footer.mjs +84 -5
- package/build-module/drawer/footer.mjs.map +3 -3
- package/build-module/drawer/header.mjs +84 -5
- package/build-module/drawer/header.mjs.map +3 -3
- package/build-module/drawer/popup.mjs +86 -7
- package/build-module/drawer/popup.mjs.map +3 -3
- package/build-module/drawer/title.mjs +84 -5
- package/build-module/drawer/title.mjs.map +3 -3
- package/build-module/empty-state/actions.mjs +84 -5
- package/build-module/empty-state/actions.mjs.map +3 -3
- package/build-module/empty-state/description.mjs +84 -5
- package/build-module/empty-state/description.mjs.map +3 -3
- package/build-module/empty-state/icon.mjs +84 -5
- package/build-module/empty-state/icon.mjs.map +3 -3
- package/build-module/empty-state/root.mjs +84 -5
- package/build-module/empty-state/root.mjs.map +3 -3
- package/build-module/empty-state/title.mjs +84 -5
- package/build-module/empty-state/title.mjs.map +3 -3
- package/build-module/empty-state/visual.mjs +84 -5
- package/build-module/empty-state/visual.mjs.map +3 -3
- package/build-module/form/index.mjs +1 -0
- package/build-module/form/index.mjs.map +2 -2
- package/build-module/form/primitives/autocomplete/empty.mjs +84 -5
- package/build-module/form/primitives/autocomplete/empty.mjs.map +3 -3
- package/build-module/form/primitives/autocomplete/item.mjs +86 -10
- package/build-module/form/primitives/autocomplete/item.mjs.map +3 -3
- package/build-module/form/primitives/autocomplete/list-body.mjs +84 -5
- package/build-module/form/primitives/autocomplete/list-body.mjs.map +3 -3
- package/build-module/form/primitives/autocomplete/list.mjs +84 -5
- package/build-module/form/primitives/autocomplete/list.mjs.map +3 -3
- package/build-module/form/primitives/autocomplete/popup.mjs +90 -17
- package/build-module/form/primitives/autocomplete/popup.mjs.map +3 -3
- package/build-module/form/primitives/field/description.mjs +86 -10
- package/build-module/form/primitives/field/description.mjs.map +3 -3
- package/build-module/form/primitives/field/details.mjs +84 -5
- package/build-module/form/primitives/field/details.mjs.map +3 -3
- package/build-module/form/primitives/field/label.mjs +84 -5
- package/build-module/form/primitives/field/label.mjs.map +3 -3
- package/build-module/form/primitives/field/root.mjs +84 -5
- package/build-module/form/primitives/field/root.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/description.mjs +86 -10
- package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/details.mjs +84 -5
- package/build-module/form/primitives/fieldset/details.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/legend.mjs +84 -5
- package/build-module/form/primitives/fieldset/legend.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/root.mjs +84 -5
- package/build-module/form/primitives/fieldset/root.mjs.map +3 -3
- package/build-module/form/primitives/input/input.mjs +88 -15
- package/build-module/form/primitives/input/input.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs +88 -15
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs +84 -5
- package/build-module/form/primitives/input-layout/slot.mjs.map +3 -3
- package/build-module/form/primitives/select/item.mjs +87 -11
- package/build-module/form/primitives/select/item.mjs.map +3 -3
- package/build-module/form/primitives/select/popup.mjs +90 -17
- package/build-module/form/primitives/select/popup.mjs.map +3 -3
- package/build-module/form/primitives/select/root.mjs.map +2 -2
- package/build-module/form/primitives/select/trigger.mjs +98 -16
- package/build-module/form/primitives/select/trigger.mjs.map +3 -3
- package/build-module/form/primitives/textarea/textarea.mjs +86 -10
- package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
- package/build-module/form/select-control/context.mjs +11 -0
- package/build-module/form/select-control/context.mjs.map +7 -0
- package/build-module/form/select-control/index.mjs +14 -0
- package/build-module/form/select-control/index.mjs.map +7 -0
- package/build-module/form/select-control/item.mjs +16 -0
- package/build-module/form/select-control/item.mjs.map +7 -0
- package/build-module/form/select-control/select-control.mjs +50 -0
- package/build-module/form/select-control/select-control.mjs.map +7 -0
- package/build-module/form/select-control/types.mjs +1 -0
- package/build-module/form/select-control/types.mjs.map +7 -0
- package/build-module/icon-button/icon-button.mjs +86 -6
- package/build-module/icon-button/icon-button.mjs.map +3 -3
- package/build-module/link/link.mjs +90 -20
- package/build-module/link/link.mjs.map +3 -3
- package/build-module/notice/action-button.mjs +84 -5
- package/build-module/notice/action-button.mjs.map +3 -3
- package/build-module/notice/action-link.mjs +84 -5
- package/build-module/notice/action-link.mjs.map +3 -3
- package/build-module/notice/actions.mjs +84 -5
- package/build-module/notice/actions.mjs.map +3 -3
- package/build-module/notice/close-icon.mjs +84 -5
- package/build-module/notice/close-icon.mjs.map +3 -3
- package/build-module/notice/description.mjs +84 -5
- package/build-module/notice/description.mjs.map +3 -3
- package/build-module/notice/root.mjs +86 -10
- package/build-module/notice/root.mjs.map +3 -3
- package/build-module/notice/title.mjs +84 -5
- package/build-module/notice/title.mjs.map +3 -3
- package/build-module/popover/arrow.mjs +84 -5
- package/build-module/popover/arrow.mjs.map +3 -3
- package/build-module/popover/popup.mjs +88 -12
- package/build-module/popover/popup.mjs.map +3 -3
- package/build-module/popover/title.mjs +84 -5
- package/build-module/popover/title.mjs.map +3 -3
- package/build-module/stack/stack.mjs +84 -5
- package/build-module/stack/stack.mjs.map +3 -3
- package/build-module/tabs/list.mjs +84 -5
- package/build-module/tabs/list.mjs.map +3 -3
- package/build-module/tabs/panel.mjs +86 -10
- package/build-module/tabs/panel.mjs.map +3 -3
- package/build-module/tabs/tab.mjs +84 -5
- package/build-module/tabs/tab.mjs.map +3 -3
- package/build-module/text/text.mjs +86 -10
- package/build-module/text/text.mjs.map +3 -3
- package/build-module/tooltip/index.mjs +2 -0
- package/build-module/tooltip/index.mjs.map +2 -2
- package/build-module/tooltip/popup.mjs +111 -40
- package/build-module/tooltip/popup.mjs.map +3 -3
- package/build-module/tooltip/positioner.mjs +124 -0
- package/build-module/tooltip/positioner.mjs.map +7 -0
- package/build-module/utils/render-slot-with-children.mjs +9 -0
- package/build-module/utils/render-slot-with-children.mjs.map +7 -0
- package/build-module/visually-hidden/visually-hidden.mjs +84 -5
- package/build-module/visually-hidden/visually-hidden.mjs.map +3 -3
- package/build-types/alert-dialog/portal.d.ts +1 -1
- package/build-types/alert-dialog/portal.d.ts.map +1 -1
- package/build-types/alert-dialog/root.d.ts +1 -1
- package/build-types/alert-dialog/root.d.ts.map +1 -1
- package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/badge/stories/choosing-intent.story.d.ts.map +1 -1
- package/build-types/badge/stories/index.story.d.ts.map +1 -1
- package/build-types/button/button.d.ts +3 -0
- package/build-types/button/button.d.ts.map +1 -1
- package/build-types/button/icon.d.ts +1 -8
- package/build-types/button/icon.d.ts.map +1 -1
- package/build-types/button/index.d.ts +6 -5
- package/build-types/button/index.d.ts.map +1 -1
- package/build-types/button/stories/index.story.d.ts.map +1 -1
- package/build-types/button/types.d.ts +7 -0
- package/build-types/button/types.d.ts.map +1 -1
- package/build-types/card/stories/index.story.d.ts.map +1 -1
- package/build-types/collapsible/panel.d.ts +1 -1
- package/build-types/collapsible/root.d.ts +1 -1
- package/build-types/collapsible/stories/index.story.d.ts.map +1 -1
- package/build-types/collapsible/trigger.d.ts +1 -1
- package/build-types/collapsible-card/header.d.ts +6 -0
- package/build-types/collapsible-card/header.d.ts.map +1 -1
- package/build-types/collapsible-card/stories/index.story.d.ts +8 -0
- package/build-types/collapsible-card/stories/index.story.d.ts.map +1 -1
- package/build-types/dialog/context.d.ts +2 -2
- package/build-types/dialog/popup.d.ts +1 -2
- package/build-types/dialog/popup.d.ts.map +1 -1
- package/build-types/dialog/portal.d.ts +1 -1
- package/build-types/dialog/portal.d.ts.map +1 -1
- package/build-types/dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/drawer/content.d.ts +7 -4
- package/build-types/drawer/content.d.ts.map +1 -1
- package/build-types/drawer/context.d.ts +2 -2
- package/build-types/drawer/popup.d.ts +1 -2
- package/build-types/drawer/popup.d.ts.map +1 -1
- package/build-types/drawer/stories/index.story.d.ts.map +1 -1
- package/build-types/drawer/types.d.ts +1 -1
- package/build-types/empty-state/stories/index.story.d.ts.map +1 -1
- package/build-types/form/index.d.ts +1 -0
- package/build-types/form/index.d.ts.map +1 -1
- package/build-types/form/input-control/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/autocomplete/clear.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/empty.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/input-group.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/item.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/list-body.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/list.d.ts +2 -2
- package/build-types/form/primitives/autocomplete/popup.d.ts +2 -2
- package/build-types/form/primitives/autocomplete/portal.d.ts +1 -1
- package/build-types/form/primitives/autocomplete/portal.d.ts.map +1 -1
- package/build-types/form/primitives/autocomplete/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/field/control.d.ts +2 -2
- package/build-types/form/primitives/field/description.d.ts +1 -1
- package/build-types/form/primitives/field/details.d.ts +1 -1
- package/build-types/form/primitives/field/label.d.ts +3 -3
- package/build-types/form/primitives/field/root.d.ts +3 -3
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/description.d.ts +1 -1
- package/build-types/form/primitives/fieldset/details.d.ts +1 -1
- package/build-types/form/primitives/fieldset/legend.d.ts +1 -1
- package/build-types/form/primitives/fieldset/root.d.ts +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 +5 -5
- package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/select/item.d.ts +3 -3
- package/build-types/form/primitives/select/popup.d.ts +2 -2
- package/build-types/form/primitives/select/root.d.ts +12 -1
- package/build-types/form/primitives/select/root.d.ts.map +1 -1
- package/build-types/form/primitives/select/stories/index.story.d.ts +9 -6
- package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/select/trigger.d.ts +5 -4
- package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
- package/build-types/form/primitives/select/types.d.ts +12 -4
- package/build-types/form/primitives/select/types.d.ts.map +1 -1
- package/build-types/form/primitives/textarea/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/textarea/textarea.d.ts +2 -2
- package/build-types/form/select-control/context.d.ts +3 -0
- package/build-types/form/select-control/context.d.ts.map +1 -0
- package/build-types/form/select-control/index.d.ts +20 -0
- package/build-types/form/select-control/index.d.ts.map +1 -0
- package/build-types/form/select-control/item.d.ts +6 -0
- package/build-types/form/select-control/item.d.ts.map +1 -0
- package/build-types/form/select-control/select-control.d.ts +11 -0
- package/build-types/form/select-control/select-control.d.ts.map +1 -0
- package/build-types/form/select-control/stories/index.story.d.ts +40 -0
- package/build-types/form/select-control/stories/index.story.d.ts.map +1 -0
- package/build-types/form/select-control/test/index.test.d.ts +2 -0
- package/build-types/form/select-control/test/index.test.d.ts.map +1 -0
- package/build-types/form/select-control/types.d.ts +40 -0
- package/build-types/form/select-control/types.d.ts.map +1 -0
- package/build-types/form/types.d.ts +1 -1
- package/build-types/form/types.d.ts.map +1 -1
- package/build-types/icon/stories/index.story.d.ts.map +1 -1
- package/build-types/icon-button/icon-button.d.ts +2 -1
- package/build-types/icon-button/icon-button.d.ts.map +1 -1
- package/build-types/icon-button/stories/index.story.d.ts +5 -0
- package/build-types/icon-button/stories/index.story.d.ts.map +1 -1
- package/build-types/icon-button/types.d.ts +8 -0
- package/build-types/icon-button/types.d.ts.map +1 -1
- package/build-types/link/stories/index.story.d.ts.map +1 -1
- package/build-types/notice/stories/index.story.d.ts.map +1 -1
- package/build-types/popover/stories/index.story.d.ts.map +1 -1
- package/build-types/stack/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/context.d.ts +1 -1
- package/build-types/tabs/context.d.ts.map +1 -1
- package/build-types/tabs/list.d.ts +2 -2
- package/build-types/tabs/panel.d.ts +1 -1
- package/build-types/tabs/root.d.ts +1 -1
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +1 -1
- package/build-types/text/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/index.d.ts +2 -1
- package/build-types/tooltip/index.d.ts.map +1 -1
- package/build-types/tooltip/popup.d.ts.map +1 -1
- package/build-types/tooltip/positioner.d.ts +9 -0
- package/build-types/tooltip/positioner.d.ts.map +1 -0
- package/build-types/tooltip/stories/index.story.d.ts +11 -2
- package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -1
- package/build-types/tooltip/types.d.ts +10 -1
- package/build-types/tooltip/types.d.ts.map +1 -1
- package/build-types/utils/create-overlay-modal-context.d.ts.map +1 -1
- package/build-types/utils/render-slot-with-children.d.ts +24 -0
- package/build-types/utils/render-slot-with-children.d.ts.map +1 -0
- package/build-types/utils/use-deprioritized-initial-focus.d.ts +1 -1
- package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
- package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
- package/package.json +13 -12
- package/src/alert-dialog/popup.tsx +2 -2
- package/src/alert-dialog/stories/index.story.tsx +8 -0
- package/src/badge/stories/index.story.tsx +6 -0
- package/src/button/button.tsx +3 -0
- package/src/button/icon.tsx +1 -8
- package/src/button/index.ts +5 -6
- package/src/button/stories/index.story.tsx +10 -0
- package/src/button/types.ts +8 -0
- package/src/card/stories/index.story.tsx +6 -0
- package/src/collapsible/stories/index.story.tsx +6 -0
- package/src/collapsible-card/header.tsx +55 -42
- package/src/collapsible-card/stories/index.story.tsx +61 -0
- package/src/collapsible-card/style.module.css +20 -0
- package/src/collapsible-card/test/index.test.tsx +60 -1
- package/src/dialog/popup.tsx +3 -4
- package/src/dialog/stories/index.story.tsx +8 -0
- package/src/dialog/style.module.css +3 -9
- package/src/drawer/content.tsx +31 -16
- package/src/drawer/popup.tsx +3 -4
- package/src/drawer/stories/index.story.tsx +7 -0
- package/src/drawer/style.module.css +41 -9
- package/src/drawer/test/index.test.tsx +56 -0
- package/src/drawer/types.ts +1 -1
- package/src/empty-state/stories/index.story.tsx +7 -0
- package/src/form/index.ts +1 -0
- package/src/form/input-control/stories/index.story.tsx +7 -0
- package/src/form/primitives/autocomplete/popup.tsx +2 -2
- package/src/form/primitives/autocomplete/stories/index.story.tsx +18 -10
- package/src/form/primitives/field/stories/index.story.tsx +12 -5
- package/src/form/primitives/fieldset/stories/index.story.tsx +10 -3
- package/src/form/primitives/input/stories/index.story.tsx +7 -0
- package/src/form/primitives/input-layout/stories/index.story.tsx +8 -1
- package/src/form/primitives/select/item.tsx +1 -1
- package/src/form/primitives/select/popup.tsx +2 -2
- package/src/form/primitives/select/root.tsx +13 -2
- package/src/form/primitives/select/stories/index.story.tsx +132 -61
- package/src/form/primitives/select/test/index.test.tsx +123 -5
- package/src/form/primitives/select/trigger.tsx +11 -8
- package/src/form/primitives/select/types.ts +13 -5
- package/src/form/primitives/textarea/stories/index.story.tsx +7 -0
- package/src/form/select-control/context.tsx +9 -0
- package/src/form/select-control/index.ts +14 -0
- package/src/form/select-control/item.tsx +13 -0
- package/src/form/select-control/select-control.tsx +65 -0
- package/src/form/select-control/stories/index.story.tsx +220 -0
- package/src/form/select-control/test/index.test.tsx +196 -0
- package/src/form/select-control/types.ts +50 -0
- package/src/form/types.ts +1 -1
- package/src/icon/stories/index.story.tsx +7 -0
- package/src/icon-button/icon-button.tsx +2 -1
- package/src/icon-button/stories/index.story.tsx +20 -0
- package/src/icon-button/types.ts +9 -0
- package/src/link/stories/index.story.tsx +6 -0
- package/src/link/style.module.css +1 -0
- package/src/notice/stories/index.story.tsx +7 -0
- package/src/popover/popup.tsx +2 -2
- package/src/popover/stories/index.story.tsx +7 -0
- package/src/stack/stories/index.story.tsx +6 -0
- package/src/tabs/stories/index.story.tsx +15 -1
- package/src/text/stories/index.story.tsx +6 -0
- package/src/text/style.module.css +25 -0
- package/src/tooltip/index.ts +2 -1
- package/src/tooltip/popup.tsx +30 -38
- package/src/tooltip/positioner.tsx +36 -0
- package/src/tooltip/stories/index.story.tsx +61 -10
- package/src/tooltip/stories/usage-guidelines.story.tsx +5 -0
- package/src/tooltip/types.ts +14 -3
- package/src/utils/css/dropdown-motion.module.css +3 -3
- package/src/utils/css/item-popup.module.css +5 -1
- package/src/utils/css/overlay-chrome.module.css +21 -4
- package/src/utils/css/select-trigger.module.css +5 -2
- package/src/utils/render-slot-with-children.ts +31 -0
- package/src/visually-hidden/stories/index.story.tsx +6 -0
- package/build/utils/render-portal-with-children.cjs.map +0 -7
- package/build-module/utils/render-portal-with-children.mjs +0 -12
- package/build-module/utils/render-portal-with-children.mjs.map +0 -7
- package/build-types/utils/render-portal-with-children.d.ts +0 -16
- package/build-types/utils/render-portal-with-children.d.ts.map +0 -1
- package/src/utils/render-portal-with-children.ts +0 -27
package/build/drawer/popup.cjs
CHANGED
|
@@ -41,16 +41,95 @@ var import_theme = require("@wordpress/theme");
|
|
|
41
41
|
var import_lock_unlock = require("../lock-unlock.cjs");
|
|
42
42
|
var import_use_deprioritized_initial_focus = require("../utils/use-deprioritized-initial-focus.cjs");
|
|
43
43
|
var import_use_overlay_scroll_state_attributes = require("../utils/use-overlay-scroll-state-attributes.cjs");
|
|
44
|
-
var
|
|
44
|
+
var import_render_slot_with_children = require("../utils/render-slot-with-children.cjs");
|
|
45
45
|
var import_context = require("./context.cjs");
|
|
46
46
|
var import_portal = require("./portal.cjs");
|
|
47
47
|
|
|
48
|
+
// packages/style-runtime/src/index.ts
|
|
49
|
+
var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
|
|
50
|
+
function getRuntime() {
|
|
51
|
+
const globalScope = globalThis;
|
|
52
|
+
if (globalScope.__wpStyleRuntime) {
|
|
53
|
+
return globalScope.__wpStyleRuntime;
|
|
54
|
+
}
|
|
55
|
+
globalScope.__wpStyleRuntime = {
|
|
56
|
+
documents: /* @__PURE__ */ new Map(),
|
|
57
|
+
styles: /* @__PURE__ */ new Map(),
|
|
58
|
+
injectedStyles: /* @__PURE__ */ new WeakMap()
|
|
59
|
+
};
|
|
60
|
+
if (typeof document !== "undefined") {
|
|
61
|
+
registerDocument(document);
|
|
62
|
+
}
|
|
63
|
+
return globalScope.__wpStyleRuntime;
|
|
64
|
+
}
|
|
65
|
+
function documentContainsStyleHash(targetDocument, hash) {
|
|
66
|
+
if (!targetDocument.head) {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
for (const style of targetDocument.head.querySelectorAll(
|
|
70
|
+
`style[${STYLE_HASH_ATTRIBUTE}]`
|
|
71
|
+
)) {
|
|
72
|
+
if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
|
|
73
|
+
return true;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
function injectStyle(targetDocument, hash, css) {
|
|
79
|
+
if (!targetDocument.head) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
const runtime = getRuntime();
|
|
83
|
+
let injectedStyles = runtime.injectedStyles.get(targetDocument);
|
|
84
|
+
if (!injectedStyles) {
|
|
85
|
+
injectedStyles = /* @__PURE__ */ new Set();
|
|
86
|
+
runtime.injectedStyles.set(targetDocument, injectedStyles);
|
|
87
|
+
}
|
|
88
|
+
if (injectedStyles.has(hash)) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
if (documentContainsStyleHash(targetDocument, hash)) {
|
|
92
|
+
injectedStyles.add(hash);
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const style = targetDocument.createElement("style");
|
|
96
|
+
style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
|
|
97
|
+
style.appendChild(targetDocument.createTextNode(css));
|
|
98
|
+
targetDocument.head.appendChild(style);
|
|
99
|
+
injectedStyles.add(hash);
|
|
100
|
+
}
|
|
101
|
+
function registerDocument(targetDocument) {
|
|
102
|
+
const runtime = getRuntime();
|
|
103
|
+
runtime.documents.set(
|
|
104
|
+
targetDocument,
|
|
105
|
+
(runtime.documents.get(targetDocument) ?? 0) + 1
|
|
106
|
+
);
|
|
107
|
+
for (const [hash, css] of runtime.styles) {
|
|
108
|
+
injectStyle(targetDocument, hash, css);
|
|
109
|
+
}
|
|
110
|
+
return () => {
|
|
111
|
+
const count = runtime.documents.get(targetDocument);
|
|
112
|
+
if (count === void 0) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (count <= 1) {
|
|
116
|
+
runtime.documents.delete(targetDocument);
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
runtime.documents.set(targetDocument, count - 1);
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
function registerStyle(hash, css) {
|
|
123
|
+
const runtime = getRuntime();
|
|
124
|
+
runtime.styles.set(hash, css);
|
|
125
|
+
for (const targetDocument of runtime.documents.keys()) {
|
|
126
|
+
injectStyle(targetDocument, hash, css);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
48
130
|
// packages/ui/src/drawer/style.module.css
|
|
49
|
-
if (typeof
|
|
50
|
-
|
|
51
|
-
style.setAttribute("data-wp-hash", "7b0e336948");
|
|
52
|
-
style.appendChild(document.createTextNode('@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-open],&[data-swiping]{will-change:transform;@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}'));
|
|
53
|
-
document.head.appendChild(style);
|
|
131
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
132
|
+
registerStyle("f56e33ff28", '@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-ending-style],&[data-open],&[data-swiping]{will-change:transform}&[data-ending-style],&[data-starting-style]{box-shadow:none}@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}');
|
|
54
133
|
}
|
|
55
134
|
var style_default = { "popup": "_882277c289298491__popup", "backdrop": "_07e459cfa0254522__backdrop", "viewport": "f1cf22f966cf516e__viewport", "is-small": "e758b2a0572e1951__is-small", "is-medium": "_21ddafd99d004b84__is-medium", "is-large": "_78636e3fdcb75c3b__is-large", "is-stretch": "b2960a80aa46d1f9__is-stretch", "is-auto": "_949cc180111d609b__is-auto", "header": "e84af91dc76cf84f__header f1c50237c4787636__header", "footer": "_1136b31b67a81245__footer _579f95efdec92a66__footer", "title": "_0dab095165fca096__title _5371cc08aad82574__title", "content": "c7c17b6b2378b2ee__content _766d9011d37ce2d9__content" };
|
|
56
135
|
|
|
@@ -94,7 +173,7 @@ var Popup = (0, import_element.forwardRef)(function DrawerPopup({ className, por
|
|
|
94
173
|
}
|
|
95
174
|
) }) })
|
|
96
175
|
] });
|
|
97
|
-
return (0,
|
|
176
|
+
return (0, import_render_slot_with_children.renderSlotWithChildren)(portal, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {}), portalChildren);
|
|
98
177
|
});
|
|
99
178
|
// Annotate the CommonJS export names for ESM import in node:
|
|
100
179
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/drawer/popup.tsx", "../../src/drawer/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../lock-unlock';\nimport { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';\nimport { SCROLL_CONTAINER_ATTR } from '../utils/use-overlay-scroll-state-attributes';\nimport { renderPortalWithChildren } from '../utils/render-portal-with-children';\nimport { DrawerValidationProvider, useDrawerModal } from './context';\nimport { Portal } from './portal';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst CLOSE_ICON_ATTR = 'data-wp-ui-drawer-close-icon';\n\n/**\n * Renders the drawer popup element that contains the drawer content.\n * Uses a portal to render outside the DOM hierarchy.\n *\n * When `portal` is omitted, defaults to `Drawer.Portal`. Portal merging is\n * handled by `renderPortalWithChildren` (shared with other overlay `Popup`s).\n *\n * The popup is a flex column; scroll ownership lives on `Drawer.Content`,\n * which children are expected to render. Without it, long body content will\n * clip instead of scrolling and Base UI's swipe-dismiss-on-scroll-edge\n * logic on up/down drawers cannot engage.\n */\nconst Popup = forwardRef< HTMLDivElement, PopupProps >( function DrawerPopup(\n\t{ className, portal, children, size, initialFocus, finalFocus, ...props },\n\tref\n) {\n\tconst { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {\n\t\tinitialFocus,\n\t\tdeprioritizedAttributes: [ CLOSE_ICON_ATTR, SCROLL_CONTAINER_ATTR ],\n\t} );\n\tconst mergedRef = useMergeRefs( [ ref, popupRef ] );\n\tconst modal = useDrawerModal();\n\n\tconst portalChildren = (\n\t\t<>\n\t\t\t{ /*\n\t\t\t * Only render a backdrop for fully modal drawers. Non-modal drawers\n\t\t\t * should not dim the page, and `trap-focus` keeps outside pointer\n\t\t\t * interactions enabled, so a backdrop would misrepresent that mode.\n\t\t\t */ }\n\t\t\t{ modal === true && (\n\t\t\t\t<_Drawer.Backdrop\n\t\t\t\t\tclassName={ styles.backdrop }\n\t\t\t\t\tdata-testid=\"drawer-backdrop\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<_Drawer.Viewport className={ styles.viewport }>\n\t\t\t\t{ /*\n\t\t\t\t * ThemeProvider wraps _Drawer.Popup directly (matching Dialog\n\t\t\t\t * and Popover) so the `display: contents` focus-trap workaround\n\t\t\t\t * selector in the CSS module actually targets this subtree.\n\t\t\t\t */ }\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<_Drawer.Popup\n\t\t\t\t\t\tref={ mergedRef }\n\t\t\t\t\t\tclassName={ ( state ) => {\n\t\t\t\t\t\t\tconst isVertical =\n\t\t\t\t\t\t\t\tstate.swipeDirection === 'up' ||\n\t\t\t\t\t\t\t\tstate.swipeDirection === 'down';\n\t\t\t\t\t\t\tconst resolvedSize =\n\t\t\t\t\t\t\t\tsize ?? ( isVertical ? 'auto' : 'medium' );\n\n\t\t\t\t\t\t\treturn clsx(\n\t\t\t\t\t\t\t\tstyles.popup,\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\tstyles[ `is-${ resolvedSize }` ]\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitialFocus={ resolvedInitialFocus }\n\t\t\t\t\t\tfinalFocus={ finalFocus }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tdata-wp-ui-overlay-modal={\n\t\t\t\t\t\t\tmodal === true ? '' : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DrawerValidationProvider>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</DrawerValidationProvider>\n\t\t\t\t\t</_Drawer.Popup>\n\t\t\t\t</ThemeProvider>\n\t\t\t</_Drawer.Viewport>\n\t\t</>\n\t);\n\n\treturn renderPortalWithChildren( portal, <Portal />, portalChildren );\n} );\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='7b0e336948']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"7b0e336948\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-open],&[data-swiping]{will-change:transform;@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_882277c289298491__popup\",\"backdrop\":\"_07e459cfa0254522__backdrop\",\"viewport\":\"f1cf22f966cf516e__viewport\",\"is-small\":\"e758b2a0572e1951__is-small\",\"is-medium\":\"_21ddafd99d004b84__is-medium\",\"is-large\":\"_78636e3fdcb75c3b__is-large\",\"is-stretch\":\"b2960a80aa46d1f9__is-stretch\",\"is-auto\":\"_949cc180111d609b__is-auto\",\"header\":\"e84af91dc76cf84f__header f1c50237c4787636__header\",\"footer\":\"_1136b31b67a81245__footer _579f95efdec92a66__footer\",\"title\":\"_0dab095165fca096__title _5371cc08aad82574__title\",\"content\":\"c7c17b6b2378b2ee__content _766d9011d37ce2d9__content\"};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,qBAA2B;AAC3B,qBAA6B;AAC7B,mBAGO;AACP,yBAAuB;AACvB,6CAA6C;AAC7C,iDAAsC;AACtC,
|
|
3
|
+
"sources": ["../../src/drawer/popup.tsx", "../../../style-runtime/src/index.ts", "../../src/drawer/style.module.css"],
|
|
4
|
+
"sourcesContent": ["import { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../lock-unlock';\nimport { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';\nimport { SCROLL_CONTAINER_ATTR } from '../utils/use-overlay-scroll-state-attributes';\nimport { renderSlotWithChildren } from '../utils/render-slot-with-children';\nimport { DrawerValidationProvider, useDrawerModal } from './context';\nimport { Portal } from './portal';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst CLOSE_ICON_ATTR = 'data-wp-ui-drawer-close-icon';\n\n/**\n * Renders the drawer popup element that contains the drawer content.\n * Uses a portal to render outside the DOM hierarchy.\n *\n * When `portal` is omitted, defaults to `Drawer.Portal`.\n *\n * The popup is a flex column; scroll ownership lives on `Drawer.Content`,\n * which children are expected to render. Without it, long body content will\n * clip instead of scrolling and Base UI's swipe-dismiss-on-scroll-edge\n * logic on up/down drawers cannot engage.\n */\nconst Popup = forwardRef< HTMLDivElement, PopupProps >( function DrawerPopup(\n\t{ className, portal, children, size, initialFocus, finalFocus, ...props },\n\tref\n) {\n\tconst { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {\n\t\tinitialFocus,\n\t\tdeprioritizedAttributes: [ CLOSE_ICON_ATTR, SCROLL_CONTAINER_ATTR ],\n\t} );\n\tconst mergedRef = useMergeRefs( [ ref, popupRef ] );\n\tconst modal = useDrawerModal();\n\n\tconst portalChildren = (\n\t\t<>\n\t\t\t{ /*\n\t\t\t * Only render a backdrop for fully modal drawers. Non-modal drawers\n\t\t\t * should not dim the page, and `trap-focus` keeps outside pointer\n\t\t\t * interactions enabled, so a backdrop would misrepresent that mode.\n\t\t\t */ }\n\t\t\t{ modal === true && (\n\t\t\t\t<_Drawer.Backdrop\n\t\t\t\t\tclassName={ styles.backdrop }\n\t\t\t\t\tdata-testid=\"drawer-backdrop\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<_Drawer.Viewport className={ styles.viewport }>\n\t\t\t\t{ /*\n\t\t\t\t * ThemeProvider wraps _Drawer.Popup directly (matching Dialog\n\t\t\t\t * and Popover) so the `display: contents` focus-trap workaround\n\t\t\t\t * selector in the CSS module actually targets this subtree.\n\t\t\t\t */ }\n\t\t\t\t<ThemeProvider>\n\t\t\t\t\t<_Drawer.Popup\n\t\t\t\t\t\tref={ mergedRef }\n\t\t\t\t\t\tclassName={ ( state ) => {\n\t\t\t\t\t\t\tconst isVertical =\n\t\t\t\t\t\t\t\tstate.swipeDirection === 'up' ||\n\t\t\t\t\t\t\t\tstate.swipeDirection === 'down';\n\t\t\t\t\t\t\tconst resolvedSize =\n\t\t\t\t\t\t\t\tsize ?? ( isVertical ? 'auto' : 'medium' );\n\n\t\t\t\t\t\t\treturn clsx(\n\t\t\t\t\t\t\t\tstyles.popup,\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\tstyles[ `is-${ resolvedSize }` ]\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitialFocus={ resolvedInitialFocus }\n\t\t\t\t\t\tfinalFocus={ finalFocus }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tdata-wp-ui-overlay-modal={\n\t\t\t\t\t\t\tmodal === true ? '' : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DrawerValidationProvider>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</DrawerValidationProvider>\n\t\t\t\t\t</_Drawer.Popup>\n\t\t\t\t</ThemeProvider>\n\t\t\t</_Drawer.Viewport>\n\t\t</>\n\t);\n\n\treturn renderSlotWithChildren( portal, <Portal />, portalChildren );\n} );\n\nexport { Popup };\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"f56e33ff28\", \"@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-ending-style],&[data-open],&[data-swiping]{will-change:transform}&[data-ending-style],&[data-starting-style]{box-shadow:none}@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}\");\n}\nexport default {\"popup\":\"_882277c289298491__popup\",\"backdrop\":\"_07e459cfa0254522__backdrop\",\"viewport\":\"f1cf22f966cf516e__viewport\",\"is-small\":\"e758b2a0572e1951__is-small\",\"is-medium\":\"_21ddafd99d004b84__is-medium\",\"is-large\":\"_78636e3fdcb75c3b__is-large\",\"is-stretch\":\"b2960a80aa46d1f9__is-stretch\",\"is-auto\":\"_949cc180111d609b__is-auto\",\"header\":\"e84af91dc76cf84f__header f1c50237c4787636__header\",\"footer\":\"_1136b31b67a81245__footer _579f95efdec92a66__footer\",\"title\":\"_0dab095165fca096__title _5371cc08aad82574__title\",\"content\":\"c7c17b6b2378b2ee__content _766d9011d37ce2d9__content\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,kBAAiB;AACjB,qBAA2B;AAC3B,qBAA6B;AAC7B,mBAGO;AACP,yBAAuB;AACvB,6CAA6C;AAC7C,iDAAsC;AACtC,uCAAuC;AACvC,qBAAyD;AACzD,oBAAuB;;;ACHvB,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACrB,QAAM,cAAc;AAEpB,MAAK,YAAY,kBAAmB;AACnC,WAAO,YAAY;AAAA,EACpB;AAEA,cAAY,mBAAmB;AAAA,IAC9B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC7B;AAEA,MAAK,OAAO,aAAa,aAAc;AACtC,qBAAkB,QAAS;AAAA,EAC5B;AAEA,SAAO,YAAY;AACpB;AAUA,SAAS,0BACR,gBACA,MACU;AACV,MAAK,CAAE,eAAe,MAAO;AAC5B,WAAO;AAAA,EACR;AAEA,aAAY,SAAS,eAAe,KAAK;AAAA,IACxC,SAAU,oBAAqB;AAAA,EAChC,GAAI;AACH,QAAK,MAAM,aAAc,oBAAqB,MAAM,MAAO;AAC1D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,YAAa,gBAA0B,MAAc,KAAc;AAC3E,MAAK,CAAE,eAAe,MAAO;AAC5B;AAAA,EACD;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAK,cAAe;AAEhE,MAAK,CAAE,gBAAiB;AACvB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAK,gBAAgB,cAAe;AAAA,EAC5D;AAEA,MAAK,eAAe,IAAK,IAAK,GAAI;AACjC;AAAA,EACD;AAKA,MAAK,0BAA2B,gBAAgB,IAAK,GAAI;AACxD,mBAAe,IAAK,IAAK;AACzB;AAAA,EACD;AAEA,QAAM,QAAQ,eAAe,cAAe,OAAQ;AACpD,QAAM,aAAc,sBAAsB,IAAK;AAC/C,QAAM,YAAa,eAAe,eAAgB,GAAI,CAAE;AACxD,iBAAe,KAAK,YAAa,KAAM;AACvC,iBAAe,IAAK,IAAK;AAC1B;AAaO,SAAS,iBAAkB,gBAA2B;AAC5D,QAAM,UAAU,WAAW;AAE3B,UAAQ,UAAU;AAAA,IACjB;AAAA,KACE,QAAQ,UAAU,IAAK,cAAe,KAAK,KAAM;AAAA,EACpD;AAEA,aAAY,CAAE,MAAM,GAAI,KAAK,QAAQ,QAAS;AAC7C,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AAEA,SAAO,MAAM;AACZ,UAAM,QAAQ,QAAQ,UAAU,IAAK,cAAe;AAEpD,QAAK,UAAU,QAAY;AAC1B;AAAA,IACD;AAEA,QAAK,SAAS,GAAI;AACjB,cAAQ,UAAU,OAAQ,cAAe;AACzC;AAAA,IACD;AAEA,YAAQ,UAAU,IAAK,gBAAgB,QAAQ,CAAE;AAAA,EAClD;AACD;AAaO,SAAS,cAAe,MAAc,KAAc;AAC1D,QAAM,UAAU,WAAW;AAE3B,UAAQ,OAAO,IAAK,MAAM,GAAI;AAE9B,aAAY,kBAAkB,QAAQ,UAAU,KAAK,GAAI;AACxD,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AACD;;;ACpKA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,61PAAy2P;AACt4P;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,YAAW,8BAA6B,YAAW,8BAA6B,aAAY,gCAA+B,YAAW,+BAA8B,cAAa,gCAA+B,WAAU,8BAA6B,UAAS,qDAAoD,UAAS,uDAAsD,SAAQ,qDAAoD,WAAU,uDAAsD;;;AFyCzkB;AA5BF,IAAM,oBACL,2BAAQ,aAAAA,WAAiB,EAAE;AAE5B,IAAM,kBAAkB;AAaxB,IAAM,YAAQ,2BAA0C,SAAS,YAChE,EAAE,WAAW,QAAQ,UAAU,MAAM,cAAc,YAAY,GAAG,MAAM,GACxE,KACC;AACD,QAAM,EAAE,sBAAsB,SAAS,QAAI,qEAA8B;AAAA,IACxE;AAAA,IACA,yBAAyB,CAAE,iBAAiB,gEAAsB;AAAA,EACnE,CAAE;AACF,QAAM,gBAAY,6BAAc,CAAE,KAAK,QAAS,CAAE;AAClD,QAAM,YAAQ,+BAAe;AAE7B,QAAM,iBACL,4EAMG;AAAA,cAAU,QACX;AAAA,MAAC,cAAAC,OAAQ;AAAA,MAAR;AAAA,QACA,WAAY,cAAO;AAAA,QACnB,eAAY;AAAA;AAAA,IACb;AAAA,IAED,4CAAC,cAAAA,OAAQ,UAAR,EAAiB,WAAY,cAAO,UAMpC,sDAAC,iBACA;AAAA,MAAC,cAAAA,OAAQ;AAAA,MAAR;AAAA,QACA,KAAM;AAAA,QACN,WAAY,CAAE,UAAW;AACxB,gBAAM,aACL,MAAM,mBAAmB,QACzB,MAAM,mBAAmB;AAC1B,gBAAM,eACL,SAAU,aAAa,SAAS;AAEjC,qBAAO,YAAAC;AAAA,YACN,cAAO;AAAA,YACP;AAAA,YACA,cAAQ,MAAO,YAAa,EAAG;AAAA,UAChC;AAAA,QACD;AAAA,QACA,cAAe;AAAA,QACf;AAAA,QACE,GAAG;AAAA,QACL,4BACC,UAAU,OAAO,KAAK;AAAA,QAGvB,sDAAC,2CACE,UACH;AAAA;AAAA,IACD,GACD,GACD;AAAA,KACD;AAGD,aAAO,yDAAwB,QAAQ,4CAAC,wBAAO,GAAI,cAAe;AACnE,CAAE;",
|
|
6
6
|
"names": ["themePrivateApis", "_Drawer", "clsx"]
|
|
7
7
|
}
|
package/build/drawer/title.cjs
CHANGED
|
@@ -29,12 +29,91 @@ var import_element = require("@wordpress/element");
|
|
|
29
29
|
var import_text = require("../text/index.cjs");
|
|
30
30
|
var import_context = require("./context.cjs");
|
|
31
31
|
|
|
32
|
+
// packages/style-runtime/src/index.ts
|
|
33
|
+
var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
|
|
34
|
+
function getRuntime() {
|
|
35
|
+
const globalScope = globalThis;
|
|
36
|
+
if (globalScope.__wpStyleRuntime) {
|
|
37
|
+
return globalScope.__wpStyleRuntime;
|
|
38
|
+
}
|
|
39
|
+
globalScope.__wpStyleRuntime = {
|
|
40
|
+
documents: /* @__PURE__ */ new Map(),
|
|
41
|
+
styles: /* @__PURE__ */ new Map(),
|
|
42
|
+
injectedStyles: /* @__PURE__ */ new WeakMap()
|
|
43
|
+
};
|
|
44
|
+
if (typeof document !== "undefined") {
|
|
45
|
+
registerDocument(document);
|
|
46
|
+
}
|
|
47
|
+
return globalScope.__wpStyleRuntime;
|
|
48
|
+
}
|
|
49
|
+
function documentContainsStyleHash(targetDocument, hash) {
|
|
50
|
+
if (!targetDocument.head) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
for (const style of targetDocument.head.querySelectorAll(
|
|
54
|
+
`style[${STYLE_HASH_ATTRIBUTE}]`
|
|
55
|
+
)) {
|
|
56
|
+
if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
|
|
57
|
+
return true;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
function injectStyle(targetDocument, hash, css) {
|
|
63
|
+
if (!targetDocument.head) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const runtime = getRuntime();
|
|
67
|
+
let injectedStyles = runtime.injectedStyles.get(targetDocument);
|
|
68
|
+
if (!injectedStyles) {
|
|
69
|
+
injectedStyles = /* @__PURE__ */ new Set();
|
|
70
|
+
runtime.injectedStyles.set(targetDocument, injectedStyles);
|
|
71
|
+
}
|
|
72
|
+
if (injectedStyles.has(hash)) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (documentContainsStyleHash(targetDocument, hash)) {
|
|
76
|
+
injectedStyles.add(hash);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const style = targetDocument.createElement("style");
|
|
80
|
+
style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
|
|
81
|
+
style.appendChild(targetDocument.createTextNode(css));
|
|
82
|
+
targetDocument.head.appendChild(style);
|
|
83
|
+
injectedStyles.add(hash);
|
|
84
|
+
}
|
|
85
|
+
function registerDocument(targetDocument) {
|
|
86
|
+
const runtime = getRuntime();
|
|
87
|
+
runtime.documents.set(
|
|
88
|
+
targetDocument,
|
|
89
|
+
(runtime.documents.get(targetDocument) ?? 0) + 1
|
|
90
|
+
);
|
|
91
|
+
for (const [hash, css] of runtime.styles) {
|
|
92
|
+
injectStyle(targetDocument, hash, css);
|
|
93
|
+
}
|
|
94
|
+
return () => {
|
|
95
|
+
const count = runtime.documents.get(targetDocument);
|
|
96
|
+
if (count === void 0) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
if (count <= 1) {
|
|
100
|
+
runtime.documents.delete(targetDocument);
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
runtime.documents.set(targetDocument, count - 1);
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
function registerStyle(hash, css) {
|
|
107
|
+
const runtime = getRuntime();
|
|
108
|
+
runtime.styles.set(hash, css);
|
|
109
|
+
for (const targetDocument of runtime.documents.keys()) {
|
|
110
|
+
injectStyle(targetDocument, hash, css);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
32
114
|
// packages/ui/src/drawer/style.module.css
|
|
33
|
-
if (typeof
|
|
34
|
-
|
|
35
|
-
style.setAttribute("data-wp-hash", "7b0e336948");
|
|
36
|
-
style.appendChild(document.createTextNode('@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-open],&[data-swiping]{will-change:transform;@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}'));
|
|
37
|
-
document.head.appendChild(style);
|
|
115
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
116
|
+
registerStyle("f56e33ff28", '@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-ending-style],&[data-open],&[data-swiping]{will-change:transform}&[data-ending-style],&[data-starting-style]{box-shadow:none}@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}');
|
|
38
117
|
}
|
|
39
118
|
var style_default = { "popup": "_882277c289298491__popup", "backdrop": "_07e459cfa0254522__backdrop", "viewport": "f1cf22f966cf516e__viewport", "is-small": "e758b2a0572e1951__is-small", "is-medium": "_21ddafd99d004b84__is-medium", "is-large": "_78636e3fdcb75c3b__is-large", "is-stretch": "b2960a80aa46d1f9__is-stretch", "is-auto": "_949cc180111d609b__is-auto", "header": "e84af91dc76cf84f__header f1c50237c4787636__header", "footer": "_1136b31b67a81245__footer _579f95efdec92a66__footer", "title": "_0dab095165fca096__title _5371cc08aad82574__title", "content": "c7c17b6b2378b2ee__content _766d9011d37ce2d9__content" };
|
|
40
119
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/drawer/title.tsx", "../../src/drawer/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { useDrawerValidationContext } from './context';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * Renders the drawer title. This component is required for accessibility\n * and serves as both the visible heading and the accessible label for\n * the drawer.\n *\n * **Required** \u2014 every drawer must include a `Drawer.Title`, even if\n * visually hidden. The rendered element is linked to the popup via\n * `aria-labelledby`. Renders an `<h2>` by default.\n *\n * To visually hide the title while keeping it accessible, wrap it with\n * `VisuallyHidden` using the `render` prop:\n *\n * ```jsx\n * <VisuallyHidden render={ <Drawer.Title /> }>\n * Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction DrawerTitle( { children, ...props }, forwardedRef ) {\n\t\tconst validationContext = useDrawerValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\tuseEffect( () => {\n\t\t\tif ( validationContext ) {\n\t\t\t\treturn validationContext.registerTitle( internalRef.current );\n\t\t\t}\n\t\t\treturn undefined;\n\t\t}, [ validationContext ] );\n\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ mergedRef }\n\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\trender={ <_Drawer.Title { ...props } /> }\n\t\t\t\tclassName={ styles.title }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Title };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='7b0e336948']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"7b0e336948\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-open],&[data-swiping]{will-change:transform;@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_882277c289298491__popup\",\"backdrop\":\"_07e459cfa0254522__backdrop\",\"viewport\":\"f1cf22f966cf516e__viewport\",\"is-small\":\"e758b2a0572e1951__is-small\",\"is-medium\":\"_21ddafd99d004b84__is-medium\",\"is-large\":\"_78636e3fdcb75c3b__is-large\",\"is-stretch\":\"b2960a80aa46d1f9__is-stretch\",\"is-auto\":\"_949cc180111d609b__is-auto\",\"header\":\"e84af91dc76cf84f__header f1c50237c4787636__header\",\"footer\":\"_1136b31b67a81245__footer _579f95efdec92a66__footer\",\"title\":\"_0dab095165fca096__title _5371cc08aad82574__title\",\"content\":\"c7c17b6b2378b2ee__content _766d9011d37ce2d9__content\"};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,qBAA6B;AAC7B,qBAA8C;AAC9C,kBAAqB;AACrB,qBAA2C;;;
|
|
3
|
+
"sources": ["../../src/drawer/title.tsx", "../../../style-runtime/src/index.ts", "../../src/drawer/style.module.css"],
|
|
4
|
+
"sourcesContent": ["import { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { useDrawerValidationContext } from './context';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * Renders the drawer title. This component is required for accessibility\n * and serves as both the visible heading and the accessible label for\n * the drawer.\n *\n * **Required** \u2014 every drawer must include a `Drawer.Title`, even if\n * visually hidden. The rendered element is linked to the popup via\n * `aria-labelledby`. Renders an `<h2>` by default.\n *\n * To visually hide the title while keeping it accessible, wrap it with\n * `VisuallyHidden` using the `render` prop:\n *\n * ```jsx\n * <VisuallyHidden render={ <Drawer.Title /> }>\n * Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction DrawerTitle( { children, ...props }, forwardedRef ) {\n\t\tconst validationContext = useDrawerValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\tuseEffect( () => {\n\t\t\tif ( validationContext ) {\n\t\t\t\treturn validationContext.registerTitle( internalRef.current );\n\t\t\t}\n\t\t\treturn undefined;\n\t\t}, [ validationContext ] );\n\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ mergedRef }\n\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\trender={ <_Drawer.Title { ...props } /> }\n\t\t\t\tclassName={ styles.title }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Title };\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"f56e33ff28\", \"@layer wp-ui-components{.f1c50237c4787636__header{min-height:32px;padding-block:var(--wpds-dimension-padding-2xl,24px) var(--wpds-dimension-gap-lg,16px)}._579f95efdec92a66__footer,.f1c50237c4787636__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);padding-inline:var(--wpds-dimension-padding-2xl,24px)}._579f95efdec92a66__footer{justify-content:flex-end;padding-block:var(--wpds-dimension-gap-lg,16px) var(--wpds-dimension-padding-2xl,24px)}._5371cc08aad82574__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--_gcd-heading-margin:0 auto 0 0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._766d9011d37ce2d9__content{flex:1 1 auto;min-block-size:0;overflow-block:auto;overflow-inline:hidden;padding:var(--wpds-dimension-padding-2xl,24px);&:focus-visible{outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}}.f1c50237c4787636__header:has(~._766d9011d37ce2d9__content){border-block-end:1px solid #0000;padding-block-end:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}.f1c50237c4787636__header~._766d9011d37ce2d9__content{padding-block-start:0}._766d9011d37ce2d9__content~._579f95efdec92a66__footer{border-block-start:1px solid #0000;padding-block-start:calc(var(--wpds-dimension-gap-lg, 16px) - 1px)}._766d9011d37ce2d9__content:has(~._579f95efdec92a66__footer){padding-block-end:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header{padding-inline:0}._766d9011d37ce2d9__content>.f1c50237c4787636__header:first-child,._766d9011d37ce2d9__content>[data-drawer-content]>.f1c50237c4787636__header:first-child{padding-block-start:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer{padding-inline:0}._766d9011d37ce2d9__content>._579f95efdec92a66__footer:last-child,._766d9011d37ce2d9__content>[data-drawer-content]>._579f95efdec92a66__footer:last-child{padding-block-end:0}.f1c50237c4787636__header:has(~[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-top]){border-block-end-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-scroll-container][data-wp-ui-overlay-scrolled-from-bottom]~._579f95efdec92a66__footer{border-block-start-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}[data-wp-ui-overlay-modal] [data-wp-ui-overlay-scroll-container]{overscroll-behavior:contain}}@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._882277c289298491__popup){display:block}@layer wp-ui-components{._07e459cfa0254522__backdrop{--backdrop-opacity:0.35;background-color:#000;inset:0;min-height:100dvh;opacity:calc(var(--backdrop-opacity)*(1 - var(--drawer-swipe-progress)));position:fixed;z-index:var(--wp-ui-drawer-z-index,initial);@supports (-webkit-touch-callout:none){position:absolute}&[data-ending-style],&[data-starting-style]{opacity:0}@media not (prefers-reduced-motion){transition:opacity .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{pointer-events:none;transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}}.f1cf22f966cf516e__viewport{inset:0;pointer-events:none;position:fixed;z-index:var(--wp-ui-drawer-z-index,initial)}._882277c289298491__popup{--viewport-inset:var(--wpds-dimension-padding-2xl,24px);background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);box-shadow:var(--wpds-elevation-lg,0 5px 15px 0 #00000014,0 15px 27px 0 #00000012,0 30px 36px 0 #0000000a,0 50px 43px 0 #00000005);box-sizing:border-box;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;overflow:hidden;pointer-events:auto;position:fixed;touch-action:auto;z-index:var(--wp-ui-drawer-z-index,initial);&[data-ending-style],&[data-open],&[data-swiping]{will-change:transform}&[data-ending-style],&[data-starting-style]{box-shadow:none}@media not (prefers-reduced-motion){transition:transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1);&[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength)*.4s)}&[data-swiping]{transition-duration:0ms}}&.e758b2a0572e1951__is-small{--popup-size:var(--wpds-dimension-surface-width-sm,320px)}&._21ddafd99d004b84__is-medium{--popup-size:var(--wpds-dimension-surface-width-md,400px)}&._78636e3fdcb75c3b__is-large{--popup-size:var(--wpds-dimension-surface-width-lg,560px)}&.b2960a80aa46d1f9__is-stretch{--popup-size:var(--stretch-size)}&._949cc180111d609b__is-auto{--popup-size:auto}&[data-swiping]{user-select:none}&[data-swipe-direction=left]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-start-end-radius:var(--wpds-border-radius-lg,8px);bottom:0;left:0;max-width:calc(100vw - var(--viewport-inset));top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(-100%)}}&[data-swipe-direction=right]{--stretch-size:calc(100vw - var(--viewport-inset));border-end-start-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;max-width:calc(100vw - var(--viewport-inset));right:0;top:0;transform:translateX(var(--drawer-swipe-movement-x));width:var(--popup-size);&[data-ending-style],&[data-starting-style]{transform:translateX(100%)}}&[data-swipe-direction=down]{--stretch-size:calc(100dvh - var(--viewport-inset));border-start-end-radius:var(--wpds-border-radius-lg,8px);border-start-start-radius:var(--wpds-border-radius-lg,8px);bottom:0;height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(100%)}}&[data-swipe-direction=up]{--stretch-size:calc(100dvh - var(--viewport-inset));border-end-end-radius:var(--wpds-border-radius-lg,8px);border-end-start-radius:var(--wpds-border-radius-lg,8px);height:var(--popup-size);left:0;max-height:calc(100dvh - var(--viewport-inset));right:0;top:0;transform:translateY(var(--drawer-swipe-movement-y));&[data-ending-style],&[data-starting-style]{transform:translateY(-100%)}}}._07e459cfa0254522__backdrop~* ._882277c289298491__popup{border-color:#0000}@media (forced-colors:active){._07e459cfa0254522__backdrop~* ._882277c289298491__popup,._882277c289298491__popup{border-color:CanvasText}}.e84af91dc76cf84f__header [data-wp-ui-drawer-close-icon]{margin-inline-start:auto}._882277c289298491__popup[data-swipe-direction=left] .c7c17b6b2378b2ee__content{padding-left:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-left))}._882277c289298491__popup[data-swipe-direction=right] .c7c17b6b2378b2ee__content{padding-right:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-right))}._882277c289298491__popup[data-swipe-direction=up]>.e84af91dc76cf84f__header{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>._1136b31b67a81245__footer{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}._882277c289298491__popup[data-swipe-direction=up]>.c7c17b6b2378b2ee__content:first-child{padding-top:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-top))}._882277c289298491__popup[data-swipe-direction=down]>.c7c17b6b2378b2ee__content:last-child{padding-bottom:max(var(--wpds-dimension-padding-2xl,24px),env(safe-area-inset-bottom))}}\");\n}\nexport default {\"popup\":\"_882277c289298491__popup\",\"backdrop\":\"_07e459cfa0254522__backdrop\",\"viewport\":\"f1cf22f966cf516e__viewport\",\"is-small\":\"e758b2a0572e1951__is-small\",\"is-medium\":\"_21ddafd99d004b84__is-medium\",\"is-large\":\"_78636e3fdcb75c3b__is-large\",\"is-stretch\":\"b2960a80aa46d1f9__is-stretch\",\"is-auto\":\"_949cc180111d609b__is-auto\",\"header\":\"e84af91dc76cf84f__header f1c50237c4787636__header\",\"footer\":\"_1136b31b67a81245__footer _579f95efdec92a66__footer\",\"title\":\"_0dab095165fca096__title _5371cc08aad82574__title\",\"content\":\"c7c17b6b2378b2ee__content _766d9011d37ce2d9__content\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkC;AAClC,qBAA6B;AAC7B,qBAA8C;AAC9C,kBAAqB;AACrB,qBAA2C;;;ACM3C,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACrB,QAAM,cAAc;AAEpB,MAAK,YAAY,kBAAmB;AACnC,WAAO,YAAY;AAAA,EACpB;AAEA,cAAY,mBAAmB;AAAA,IAC9B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC7B;AAEA,MAAK,OAAO,aAAa,aAAc;AACtC,qBAAkB,QAAS;AAAA,EAC5B;AAEA,SAAO,YAAY;AACpB;AAUA,SAAS,0BACR,gBACA,MACU;AACV,MAAK,CAAE,eAAe,MAAO;AAC5B,WAAO;AAAA,EACR;AAEA,aAAY,SAAS,eAAe,KAAK;AAAA,IACxC,SAAU,oBAAqB;AAAA,EAChC,GAAI;AACH,QAAK,MAAM,aAAc,oBAAqB,MAAM,MAAO;AAC1D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,YAAa,gBAA0B,MAAc,KAAc;AAC3E,MAAK,CAAE,eAAe,MAAO;AAC5B;AAAA,EACD;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAK,cAAe;AAEhE,MAAK,CAAE,gBAAiB;AACvB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAK,gBAAgB,cAAe;AAAA,EAC5D;AAEA,MAAK,eAAe,IAAK,IAAK,GAAI;AACjC;AAAA,EACD;AAKA,MAAK,0BAA2B,gBAAgB,IAAK,GAAI;AACxD,mBAAe,IAAK,IAAK;AACzB;AAAA,EACD;AAEA,QAAM,QAAQ,eAAe,cAAe,OAAQ;AACpD,QAAM,aAAc,sBAAsB,IAAK;AAC/C,QAAM,YAAa,eAAe,eAAgB,GAAI,CAAE;AACxD,iBAAe,KAAK,YAAa,KAAM;AACvC,iBAAe,IAAK,IAAK;AAC1B;AAaO,SAAS,iBAAkB,gBAA2B;AAC5D,QAAM,UAAU,WAAW;AAE3B,UAAQ,UAAU;AAAA,IACjB;AAAA,KACE,QAAQ,UAAU,IAAK,cAAe,KAAK,KAAM;AAAA,EACpD;AAEA,aAAY,CAAE,MAAM,GAAI,KAAK,QAAQ,QAAS;AAC7C,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AAEA,SAAO,MAAM;AACZ,UAAM,QAAQ,QAAQ,UAAU,IAAK,cAAe;AAEpD,QAAK,UAAU,QAAY;AAC1B;AAAA,IACD;AAEA,QAAK,SAAS,GAAI;AACjB,cAAQ,UAAU,OAAQ,cAAe;AACzC;AAAA,IACD;AAEA,YAAQ,UAAU,IAAK,gBAAgB,QAAQ,CAAE;AAAA,EAClD;AACD;AAaO,SAAS,cAAe,MAAc,KAAc;AAC1D,QAAM,UAAU,WAAW;AAE3B,UAAQ,OAAO,IAAK,MAAM,GAAI;AAE9B,aAAY,kBAAkB,QAAQ,UAAU,KAAK,GAAI;AACxD,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AACD;;;ACpKA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,61PAAy2P;AACt4P;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,YAAW,8BAA6B,YAAW,8BAA6B,aAAY,gCAA+B,YAAW,+BAA8B,cAAa,gCAA+B,WAAU,8BAA6B,UAAS,qDAAoD,UAAS,uDAAsD,SAAQ,qDAAoD,WAAU,uDAAsD;;;AFuC9jB;AAjBb,IAAM,YAAQ;AAAA,EACb,SAAS,YAAa,EAAE,UAAU,GAAG,MAAM,GAAG,cAAe;AAC5D,UAAM,wBAAoB,2CAA2B;AACrD,UAAM,kBAAc,uBAA8B,IAAK;AACvD,UAAM,gBAAY,6BAAc,CAAE,aAAa,YAAa,CAAE;AAE9D,kCAAW,MAAM;AAChB,UAAK,mBAAoB;AACxB,eAAO,kBAAkB,cAAe,YAAY,OAAQ;AAAA,MAC7D;AACA,aAAO;AAAA,IACR,GAAG,CAAE,iBAAkB,CAAE;AAEzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAS,4CAAC,cAAAA,OAAQ,OAAR,EAAgB,GAAG,OAAQ;AAAA,QACrC,WAAY,cAAO;AAAA,QAEjB;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["_Drawer"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/drawer/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport type { Button } from '../button';\nimport type { IconButton } from '../icon-button';\nimport type { ComponentProps } from '../utils/types';\n\nexport type PortalProps = ComponentPropsWithoutRef< typeof _Drawer.Portal >;\n\nexport interface RootProps\n\textends Pick<\n\t\t_Drawer.Root.Props,\n\t\t| 'open'\n\t\t| 'onOpenChange'\n\t\t| 'onOpenChangeComplete'\n\t\t| 'defaultOpen'\n\t\t| 'modal'\n\t\t| 'disablePointerDismissal'\n\t> {\n\t/**\n\t * The edge the drawer slides in from, and the direction used to dismiss it\n\t * via swipe gesture.\n\t *\n\t * - `'left'` / `'right'`: side drawers; swipe horizontally to dismiss.\n\t * - `'down'`: bottom sheet; swipe down to dismiss.\n\t * - `'up'`: top drawer; swipe up to dismiss.\n\t *\n\t * @default 'left'\n\t */\n\tswipeDirection?: _Drawer.Root.Props[ 'swipeDirection' ];\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface TriggerProps extends ComponentProps< 'button' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface PopupProps\n\textends ComponentProps< 'div' >,\n\t\tPick< _Drawer.Popup.Props, 'initialFocus' | 'finalFocus' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * Optional portal element, typically `<Drawer.Portal />` with custom\n\t * `container`, `className`, or `style`. The backdrop and inner viewport\n\t * are rendered as this portal's children (do not pass `children` on the\n\t * portal element; they would be ignored).\n\t *\n\t * When omitted, `Drawer.Popup` uses `Drawer.Portal` with default props,\n\t * rendering the portal in the current document's `<body>`.\n\t */\n\tportal?: ReactElement< Omit< PortalProps, 'children' > >;\n\n\t/**\n\t * Controls the size of the drawer along its relevant axis (width for\n\t * left/right drawers, height for up/down drawers).\n\t *\n\t * When not specified, left/right drawers use a default medium width\n\t * and up/down drawers fit their content.\n\t *\n\t * - `'small'` \u2014 narrow/short.\n\t * - `'medium'` \u2014 moderate.\n\t * - `'large'` \u2014 wide/tall.\n\t * - `'stretch'` \u2014 fills available space, respecting the viewport inset.\n\t * - `'auto'` \u2014 fit content along the relevant axis.\n\t *\n\t * @default 'medium' for left/right drawers, 'auto' for up/down drawers\n\t */\n\tsize?: 'small' | 'medium' | 'large' | 'stretch' | 'auto';\n}\n\nexport interface ActionProps extends ComponentProps< typeof Button > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface FooterProps extends ComponentProps< 'footer' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface HeaderProps extends ComponentProps< 'header' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface ContentProps extends ComponentProps< 'div' > {\n\t/**\n\t * The body content to be rendered inside the scroll
|
|
4
|
+
"sourcesContent": ["import type { Drawer as _Drawer } from '@base-ui/react/drawer';\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport type { Button } from '../button';\nimport type { IconButton } from '../icon-button';\nimport type { ComponentProps } from '../utils/types';\n\nexport type PortalProps = ComponentPropsWithoutRef< typeof _Drawer.Portal >;\n\nexport interface RootProps\n\textends Pick<\n\t\t_Drawer.Root.Props,\n\t\t| 'open'\n\t\t| 'onOpenChange'\n\t\t| 'onOpenChangeComplete'\n\t\t| 'defaultOpen'\n\t\t| 'modal'\n\t\t| 'disablePointerDismissal'\n\t> {\n\t/**\n\t * The edge the drawer slides in from, and the direction used to dismiss it\n\t * via swipe gesture.\n\t *\n\t * - `'left'` / `'right'`: side drawers; swipe horizontally to dismiss.\n\t * - `'down'`: bottom sheet; swipe down to dismiss.\n\t * - `'up'`: top drawer; swipe up to dismiss.\n\t *\n\t * @default 'left'\n\t */\n\tswipeDirection?: _Drawer.Root.Props[ 'swipeDirection' ];\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface TriggerProps extends ComponentProps< 'button' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface PopupProps\n\textends ComponentProps< 'div' >,\n\t\tPick< _Drawer.Popup.Props, 'initialFocus' | 'finalFocus' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * Optional portal element, typically `<Drawer.Portal />` with custom\n\t * `container`, `className`, or `style`. The backdrop and inner viewport\n\t * are rendered as this portal's children (do not pass `children` on the\n\t * portal element; they would be ignored).\n\t *\n\t * When omitted, `Drawer.Popup` uses `Drawer.Portal` with default props,\n\t * rendering the portal in the current document's `<body>`.\n\t */\n\tportal?: ReactElement< Omit< PortalProps, 'children' > >;\n\n\t/**\n\t * Controls the size of the drawer along its relevant axis (width for\n\t * left/right drawers, height for up/down drawers).\n\t *\n\t * When not specified, left/right drawers use a default medium width\n\t * and up/down drawers fit their content.\n\t *\n\t * - `'small'` \u2014 narrow/short.\n\t * - `'medium'` \u2014 moderate.\n\t * - `'large'` \u2014 wide/tall.\n\t * - `'stretch'` \u2014 fills available space, respecting the viewport inset.\n\t * - `'auto'` \u2014 fit content along the relevant axis.\n\t *\n\t * @default 'medium' for left/right drawers, 'auto' for up/down drawers\n\t */\n\tsize?: 'small' | 'medium' | 'large' | 'stretch' | 'auto';\n}\n\nexport interface ActionProps extends ComponentProps< typeof Button > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface FooterProps extends ComponentProps< 'footer' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface HeaderProps extends ComponentProps< 'header' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface ContentProps extends ComponentProps< 'div' > {\n\t/**\n\t * The body content to be rendered inside the scroll region.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * The scroll region automatically becomes a keyboard-reachable tab\n\t * stop (`tabindex=\"0\"`) whenever the body overflows, so keyboard\n\t * users can arrow-scroll the region (WCAG 2.1.1). It becomes\n\t * non-tabbable again as soon as the content no longer overflows.\n\t *\n\t * If you supply `tabIndex` explicitly, your value wins and is never\n\t * overwritten \u2014 including `tabIndex={ -1 }` to opt out of the\n\t * automatic tab stop entirely, and including overrides applied\n\t * after the component had already managed the value.\n\t *\n\t * Two narrow edge cases:\n\t * - If you later *remove* an explicit `tabIndex` at runtime, the\n\t * component will resume managing it on the next overflow tick; it\n\t * can't distinguish a previous explicit opt-out from an\n\t * unconfigured state.\n\t * - Passing `tabIndex={ 0 }` while the body overflows produces a\n\t * value identical to the auto-managed one, so the component can\n\t * no longer tell the two apart and may strip it on the next\n\t * non-overflow tick. Pick a different value (or rely on the\n\t * default behavior, which is already `0` while overflowing).\n\t *\n\t * Note: the scroll region is intentionally rendered without\n\t * `role` / `aria-label`, so screen readers don't announce a\n\t * generic \"scrollable\" landmark on top of the drawer's existing\n\t * heading + body; the surrounding `Drawer.Title` and body content\n\t * provide the context.\n\t */\n\ttabIndex?: number;\n}\n\nexport interface TitleProps extends ComponentProps< 'h2' > {\n\t/**\n\t * The title content to be rendered. This serves as both the visible\n\t * heading and the accessible label for the drawer.\n\t *\n\t * When `Drawer.Title` is passed as a render element (e.g. to\n\t * `VisuallyHidden`), children can be provided by the wrapper instead.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface DescriptionProps extends ComponentProps< 'p' > {\n\t/**\n\t * The description content to be rendered inside the component.\n\t */\n\tchildren?: ReactNode;\n}\n\nexport interface CloseIconProps\n\textends Omit<\n\t\tComponentProps< typeof IconButton >,\n\t\t'label' | 'icon' | 'loading' | 'loadingAnnouncement'\n\t> {\n\t/**\n\t * A label describing the button's action, shown as a tooltip and to\n\t * assistive technology.\n\t *\n\t * @default __( 'Close' )\n\t */\n\tlabel?: ComponentProps< typeof IconButton >[ 'label' ];\n\t/**\n\t * The icon to display in the button.\n\t *\n\t * @default the `close` icon from `@wordpress/icons`\n\t */\n\ticon?: ComponentProps< typeof IconButton >[ 'icon' ];\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,12 +37,91 @@ var import_react = require("@base-ui/react");
|
|
|
37
37
|
var import_clsx = __toESM(require("clsx"));
|
|
38
38
|
var import_element = require("@wordpress/element");
|
|
39
39
|
|
|
40
|
+
// packages/style-runtime/src/index.ts
|
|
41
|
+
var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
|
|
42
|
+
function getRuntime() {
|
|
43
|
+
const globalScope = globalThis;
|
|
44
|
+
if (globalScope.__wpStyleRuntime) {
|
|
45
|
+
return globalScope.__wpStyleRuntime;
|
|
46
|
+
}
|
|
47
|
+
globalScope.__wpStyleRuntime = {
|
|
48
|
+
documents: /* @__PURE__ */ new Map(),
|
|
49
|
+
styles: /* @__PURE__ */ new Map(),
|
|
50
|
+
injectedStyles: /* @__PURE__ */ new WeakMap()
|
|
51
|
+
};
|
|
52
|
+
if (typeof document !== "undefined") {
|
|
53
|
+
registerDocument(document);
|
|
54
|
+
}
|
|
55
|
+
return globalScope.__wpStyleRuntime;
|
|
56
|
+
}
|
|
57
|
+
function documentContainsStyleHash(targetDocument, hash) {
|
|
58
|
+
if (!targetDocument.head) {
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
for (const style of targetDocument.head.querySelectorAll(
|
|
62
|
+
`style[${STYLE_HASH_ATTRIBUTE}]`
|
|
63
|
+
)) {
|
|
64
|
+
if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
function injectStyle(targetDocument, hash, css) {
|
|
71
|
+
if (!targetDocument.head) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const runtime = getRuntime();
|
|
75
|
+
let injectedStyles = runtime.injectedStyles.get(targetDocument);
|
|
76
|
+
if (!injectedStyles) {
|
|
77
|
+
injectedStyles = /* @__PURE__ */ new Set();
|
|
78
|
+
runtime.injectedStyles.set(targetDocument, injectedStyles);
|
|
79
|
+
}
|
|
80
|
+
if (injectedStyles.has(hash)) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (documentContainsStyleHash(targetDocument, hash)) {
|
|
84
|
+
injectedStyles.add(hash);
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
const style = targetDocument.createElement("style");
|
|
88
|
+
style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
|
|
89
|
+
style.appendChild(targetDocument.createTextNode(css));
|
|
90
|
+
targetDocument.head.appendChild(style);
|
|
91
|
+
injectedStyles.add(hash);
|
|
92
|
+
}
|
|
93
|
+
function registerDocument(targetDocument) {
|
|
94
|
+
const runtime = getRuntime();
|
|
95
|
+
runtime.documents.set(
|
|
96
|
+
targetDocument,
|
|
97
|
+
(runtime.documents.get(targetDocument) ?? 0) + 1
|
|
98
|
+
);
|
|
99
|
+
for (const [hash, css] of runtime.styles) {
|
|
100
|
+
injectStyle(targetDocument, hash, css);
|
|
101
|
+
}
|
|
102
|
+
return () => {
|
|
103
|
+
const count = runtime.documents.get(targetDocument);
|
|
104
|
+
if (count === void 0) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (count <= 1) {
|
|
108
|
+
runtime.documents.delete(targetDocument);
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
runtime.documents.set(targetDocument, count - 1);
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
function registerStyle(hash, css) {
|
|
115
|
+
const runtime = getRuntime();
|
|
116
|
+
runtime.styles.set(hash, css);
|
|
117
|
+
for (const targetDocument of runtime.documents.keys()) {
|
|
118
|
+
injectStyle(targetDocument, hash, css);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
40
122
|
// packages/ui/src/empty-state/style.module.css
|
|
41
|
-
if (typeof
|
|
42
|
-
|
|
43
|
-
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
44
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.a23e08e65c8e62e5__root{text-wrap:balance;align-items:center;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);gap:var(--wpds-dimension-gap-xs,4px);max-width:var(--wpds-dimension-surface-width-sm,320px);text-align:center}._01303b3680eaa216__visual{align-items:center;color:var(--wpds-color-fg-content-neutral-weak,#707070);display:flex;justify-content:center;line-height:1;margin-block-end:var(--wpds-dimension-gap-xs,4px)}._58c8e351db225608__icon{background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:50%;padding:var(--wpds-dimension-padding-xs,4px)}.b8b96f70820333a1__title{margin:0}._70f1dd22bad55b18__description{color:var(--wpds-color-fg-content-neutral-weak,#707070);margin:0}._89ac025fd8e2bc52__actions{align-items:center;display:flex;flex-direction:column;gap:var(--wpds-dimension-gap-xs,4px);margin-block-start:var(--wpds-dimension-gap-md,12px);@media (min-width:480px){flex-direction:row;justify-content:center}}}'));
|
|
45
|
-
document.head.appendChild(style);
|
|
123
|
+
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
124
|
+
registerStyle("6d6361d221", '@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.a23e08e65c8e62e5__root{text-wrap:balance;align-items:center;color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:column;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);gap:var(--wpds-dimension-gap-xs,4px);max-width:var(--wpds-dimension-surface-width-sm,320px);text-align:center}._01303b3680eaa216__visual{align-items:center;color:var(--wpds-color-fg-content-neutral-weak,#707070);display:flex;justify-content:center;line-height:1;margin-block-end:var(--wpds-dimension-gap-xs,4px)}._58c8e351db225608__icon{background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:50%;padding:var(--wpds-dimension-padding-xs,4px)}.b8b96f70820333a1__title{margin:0}._70f1dd22bad55b18__description{color:var(--wpds-color-fg-content-neutral-weak,#707070);margin:0}._89ac025fd8e2bc52__actions{align-items:center;display:flex;flex-direction:column;gap:var(--wpds-dimension-gap-xs,4px);margin-block-start:var(--wpds-dimension-gap-md,12px);@media (min-width:480px){flex-direction:row;justify-content:center}}}');
|
|
46
125
|
}
|
|
47
126
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
48
127
|
|