@wordpress/ui 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/CONTRIBUTING.md +149 -0
- package/README.md +34 -6
- package/build/alert-dialog/context.cjs +6 -1
- package/build/alert-dialog/context.cjs.map +2 -2
- package/build/alert-dialog/popup.cjs +105 -33
- package/build/alert-dialog/popup.cjs.map +4 -4
- package/build/alert-dialog/root.cjs +106 -6
- package/build/alert-dialog/root.cjs.map +2 -2
- package/build/alert-dialog/trigger.cjs +4 -14
- package/build/alert-dialog/trigger.cjs.map +3 -3
- package/build/alert-dialog/types.cjs.map +1 -1
- package/build/badge/badge.cjs +14 -14
- package/build/badge/badge.cjs.map +2 -2
- package/build/button/button.cjs +16 -6
- package/build/button/button.cjs.map +3 -3
- package/build/card/content.cjs +4 -4
- package/build/card/content.cjs.map +2 -2
- package/build/card/full-bleed.cjs +4 -4
- package/build/card/full-bleed.cjs.map +2 -2
- package/build/card/header.cjs +4 -4
- package/build/card/header.cjs.map +2 -2
- package/build/card/root.cjs +4 -4
- package/build/card/root.cjs.map +2 -2
- package/build/card/title.cjs +5 -25
- package/build/card/title.cjs.map +4 -4
- package/build/collapsible-card/content.cjs +3 -3
- package/build/collapsible-card/content.cjs.map +1 -1
- package/build/collapsible-card/header.cjs +6 -6
- package/build/collapsible-card/header.cjs.map +2 -2
- package/build/dialog/footer.cjs +3 -3
- package/build/dialog/footer.cjs.map +2 -2
- package/build/dialog/header.cjs +3 -3
- package/build/dialog/header.cjs.map +2 -2
- package/build/dialog/popup.cjs +5 -4
- package/build/dialog/popup.cjs.map +2 -2
- package/build/dialog/title.cjs +10 -19
- package/build/dialog/title.cjs.map +3 -3
- package/build/dialog/types.cjs.map +1 -1
- package/build/empty-state/actions.cjs +3 -3
- package/build/empty-state/actions.cjs.map +2 -2
- package/build/empty-state/description.cjs +8 -5
- package/build/empty-state/description.cjs.map +2 -2
- package/build/empty-state/icon.cjs +3 -3
- package/build/empty-state/icon.cjs.map +2 -2
- package/build/empty-state/root.cjs +3 -3
- package/build/empty-state/root.cjs.map +2 -2
- package/build/empty-state/title.cjs +8 -5
- package/build/empty-state/title.cjs.map +2 -2
- package/build/empty-state/visual.cjs +3 -3
- package/build/empty-state/visual.cjs.map +2 -2
- package/build/form/primitives/field/description.cjs +17 -4
- package/build/form/primitives/field/description.cjs.map +3 -3
- package/build/form/primitives/field/details.cjs +4 -4
- package/build/form/primitives/field/details.cjs.map +2 -2
- package/build/form/primitives/field/label.cjs +8 -8
- package/build/form/primitives/field/label.cjs.map +2 -2
- package/build/form/primitives/field/root.cjs +2 -2
- package/build/form/primitives/field/root.cjs.map +2 -2
- package/build/form/primitives/fieldset/description.cjs +20 -4
- package/build/form/primitives/fieldset/description.cjs.map +3 -3
- package/build/form/primitives/fieldset/details.cjs +3 -3
- package/build/form/primitives/fieldset/details.cjs.map +2 -2
- package/build/form/primitives/fieldset/legend.cjs +8 -7
- package/build/form/primitives/fieldset/legend.cjs.map +2 -2
- package/build/form/primitives/input/input.cjs +23 -7
- package/build/form/primitives/input/input.cjs.map +3 -3
- package/build/form/primitives/input-layout/input-layout.cjs +13 -3
- package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
- package/build/form/primitives/input-layout/slot.cjs +3 -3
- package/build/form/primitives/input-layout/slot.cjs.map +2 -2
- package/build/form/primitives/select/item.cjs +3 -3
- package/build/form/primitives/select/item.cjs.map +2 -2
- package/build/form/primitives/select/popup.cjs +5 -5
- package/build/form/primitives/select/popup.cjs.map +2 -2
- package/build/form/primitives/select/trigger.cjs +6 -6
- package/build/form/primitives/select/trigger.cjs.map +2 -2
- package/build/form/primitives/select/types.cjs.map +1 -1
- package/build/form/primitives/textarea/textarea.cjs +20 -1
- package/build/form/primitives/textarea/textarea.cjs.map +3 -3
- package/build/index.cjs +3 -0
- package/build/index.cjs.map +2 -2
- package/build/link/link.cjs +16 -6
- package/build/link/link.cjs.map +3 -3
- package/build/notice/action-button.cjs +3 -3
- package/build/notice/action-button.cjs.map +2 -2
- package/build/notice/action-link.cjs +3 -3
- package/build/notice/action-link.cjs.map +2 -2
- package/build/notice/actions.cjs +3 -3
- package/build/notice/actions.cjs.map +2 -2
- package/build/notice/close-icon.cjs +3 -3
- package/build/notice/close-icon.cjs.map +2 -2
- package/build/notice/description.cjs +3 -3
- package/build/notice/description.cjs.map +2 -2
- package/build/notice/root.cjs +3 -3
- package/build/notice/root.cjs.map +2 -2
- package/build/notice/title.cjs +3 -3
- package/build/notice/title.cjs.map +2 -2
- package/build/popover/arrow.cjs +94 -0
- package/build/popover/arrow.cjs.map +7 -0
- package/build/popover/close.cjs +45 -0
- package/build/popover/close.cjs.map +7 -0
- package/build/popover/context.cjs +76 -0
- package/build/popover/context.cjs.map +7 -0
- package/build/popover/description.cjs +70 -0
- package/build/popover/description.cjs.map +7 -0
- package/build/popover/index.cjs +49 -0
- package/build/popover/index.cjs.map +7 -0
- package/build/popover/popup.cjs +138 -0
- package/build/popover/popup.cjs.map +7 -0
- package/build/popover/root.cjs +35 -0
- package/build/popover/root.cjs.map +7 -0
- package/build/popover/title.cjs +56 -0
- package/build/popover/title.cjs.map +7 -0
- package/build/popover/trigger.cjs +38 -0
- package/build/popover/trigger.cjs.map +7 -0
- package/build/popover/types.cjs +19 -0
- package/build/popover/types.cjs.map +7 -0
- package/build/tabs/list.cjs +3 -4
- package/build/tabs/list.cjs.map +2 -2
- package/build/tabs/panel.cjs +3 -3
- package/build/tabs/panel.cjs.map +2 -2
- package/build/tabs/tab.cjs +3 -3
- package/build/tabs/tab.cjs.map +2 -2
- package/build/text/text.cjs +20 -5
- package/build/text/text.cjs.map +3 -3
- package/build/tooltip/popup.cjs +5 -4
- package/build/tooltip/popup.cjs.map +2 -2
- package/build/tooltip/root.cjs.map +2 -2
- package/build/tooltip/types.cjs.map +1 -1
- package/build/utils/types.cjs.map +1 -1
- package/build/utils/use-deprioritized-initial-focus.cjs.map +2 -2
- package/build/visually-hidden/visually-hidden.cjs.map +2 -2
- package/build-module/alert-dialog/context.mjs +6 -1
- package/build-module/alert-dialog/context.mjs.map +2 -2
- package/build-module/alert-dialog/popup.mjs +107 -33
- package/build-module/alert-dialog/popup.mjs.map +4 -4
- package/build-module/alert-dialog/root.mjs +113 -7
- package/build-module/alert-dialog/root.mjs.map +2 -2
- package/build-module/alert-dialog/trigger.mjs +4 -4
- package/build-module/alert-dialog/trigger.mjs.map +3 -3
- package/build-module/badge/badge.mjs +14 -14
- package/build-module/badge/badge.mjs.map +2 -2
- package/build-module/button/button.mjs +16 -6
- package/build-module/button/button.mjs.map +3 -3
- package/build-module/card/content.mjs +4 -4
- package/build-module/card/content.mjs.map +2 -2
- package/build-module/card/full-bleed.mjs +4 -4
- package/build-module/card/full-bleed.mjs.map +2 -2
- package/build-module/card/header.mjs +4 -4
- package/build-module/card/header.mjs.map +2 -2
- package/build-module/card/root.mjs +4 -4
- package/build-module/card/root.mjs.map +2 -2
- package/build-module/card/title.mjs +5 -15
- package/build-module/card/title.mjs.map +3 -3
- package/build-module/collapsible-card/content.mjs +3 -3
- package/build-module/collapsible-card/content.mjs.map +1 -1
- package/build-module/collapsible-card/header.mjs +6 -6
- package/build-module/collapsible-card/header.mjs.map +2 -2
- package/build-module/dialog/footer.mjs +3 -3
- package/build-module/dialog/footer.mjs.map +2 -2
- package/build-module/dialog/header.mjs +3 -3
- package/build-module/dialog/header.mjs.map +2 -2
- package/build-module/dialog/popup.mjs +5 -4
- package/build-module/dialog/popup.mjs.map +2 -2
- package/build-module/dialog/title.mjs +10 -9
- package/build-module/dialog/title.mjs.map +2 -2
- package/build-module/empty-state/actions.mjs +3 -3
- package/build-module/empty-state/actions.mjs.map +2 -2
- package/build-module/empty-state/description.mjs +8 -5
- package/build-module/empty-state/description.mjs.map +2 -2
- package/build-module/empty-state/icon.mjs +3 -3
- package/build-module/empty-state/icon.mjs.map +2 -2
- package/build-module/empty-state/root.mjs +3 -3
- package/build-module/empty-state/root.mjs.map +2 -2
- package/build-module/empty-state/title.mjs +8 -5
- package/build-module/empty-state/title.mjs.map +2 -2
- package/build-module/empty-state/visual.mjs +3 -3
- package/build-module/empty-state/visual.mjs.map +2 -2
- package/build-module/form/primitives/field/description.mjs +17 -4
- package/build-module/form/primitives/field/description.mjs.map +3 -3
- package/build-module/form/primitives/field/details.mjs +4 -4
- package/build-module/form/primitives/field/details.mjs.map +2 -2
- package/build-module/form/primitives/field/label.mjs +8 -8
- package/build-module/form/primitives/field/label.mjs.map +2 -2
- package/build-module/form/primitives/field/root.mjs +2 -2
- package/build-module/form/primitives/field/root.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/description.mjs +20 -4
- package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
- package/build-module/form/primitives/fieldset/details.mjs +3 -3
- package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
- package/build-module/form/primitives/fieldset/legend.mjs +8 -7
- package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
- package/build-module/form/primitives/input/input.mjs +23 -7
- package/build-module/form/primitives/input/input.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs +13 -3
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs +3 -3
- package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
- package/build-module/form/primitives/select/item.mjs +3 -3
- package/build-module/form/primitives/select/item.mjs.map +2 -2
- package/build-module/form/primitives/select/popup.mjs +5 -5
- package/build-module/form/primitives/select/popup.mjs.map +2 -2
- package/build-module/form/primitives/select/trigger.mjs +6 -6
- package/build-module/form/primitives/select/trigger.mjs.map +2 -2
- package/build-module/form/primitives/textarea/textarea.mjs +20 -1
- package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
- package/build-module/index.mjs +2 -0
- package/build-module/index.mjs.map +2 -2
- package/build-module/link/link.mjs +16 -6
- package/build-module/link/link.mjs.map +3 -3
- package/build-module/notice/action-button.mjs +3 -3
- package/build-module/notice/action-button.mjs.map +2 -2
- package/build-module/notice/action-link.mjs +3 -3
- package/build-module/notice/action-link.mjs.map +2 -2
- package/build-module/notice/actions.mjs +3 -3
- package/build-module/notice/actions.mjs.map +2 -2
- package/build-module/notice/close-icon.mjs +3 -3
- package/build-module/notice/close-icon.mjs.map +2 -2
- package/build-module/notice/description.mjs +3 -3
- package/build-module/notice/description.mjs.map +2 -2
- package/build-module/notice/root.mjs +3 -3
- package/build-module/notice/root.mjs.map +2 -2
- package/build-module/notice/title.mjs +3 -3
- package/build-module/notice/title.mjs.map +2 -2
- package/build-module/popover/arrow.mjs +59 -0
- package/build-module/popover/arrow.mjs.map +7 -0
- package/build-module/popover/close.mjs +20 -0
- package/build-module/popover/close.mjs.map +7 -0
- package/build-module/popover/context.mjs +57 -0
- package/build-module/popover/context.mjs.map +7 -0
- package/build-module/popover/description.mjs +35 -0
- package/build-module/popover/description.mjs.map +7 -0
- package/build-module/popover/index.mjs +18 -0
- package/build-module/popover/index.mjs.map +7 -0
- package/build-module/popover/popup.mjs +105 -0
- package/build-module/popover/popup.mjs.map +7 -0
- package/build-module/popover/root.mjs +10 -0
- package/build-module/popover/root.mjs.map +7 -0
- package/build-module/popover/title.mjs +31 -0
- package/build-module/popover/title.mjs.map +7 -0
- package/build-module/popover/trigger.mjs +13 -0
- package/build-module/popover/trigger.mjs.map +7 -0
- package/build-module/popover/types.mjs +1 -0
- package/build-module/popover/types.mjs.map +7 -0
- package/build-module/tabs/list.mjs +3 -4
- package/build-module/tabs/list.mjs.map +2 -2
- package/build-module/tabs/panel.mjs +3 -3
- package/build-module/tabs/panel.mjs.map +2 -2
- package/build-module/tabs/tab.mjs +3 -3
- package/build-module/tabs/tab.mjs.map +2 -2
- package/build-module/text/text.mjs +20 -5
- package/build-module/text/text.mjs.map +3 -3
- package/build-module/tooltip/popup.mjs +5 -4
- package/build-module/tooltip/popup.mjs.map +2 -2
- package/build-module/tooltip/root.mjs.map +2 -2
- package/build-module/utils/use-deprioritized-initial-focus.mjs.map +2 -2
- package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
- package/build-types/alert-dialog/context.d.ts +6 -3
- package/build-types/alert-dialog/context.d.ts.map +1 -1
- package/build-types/alert-dialog/popup.d.ts.map +1 -1
- package/build-types/alert-dialog/root.d.ts +2 -8
- package/build-types/alert-dialog/root.d.ts.map +1 -1
- package/build-types/alert-dialog/stories/index.story.d.ts +18 -6
- package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/alert-dialog/trigger.d.ts +2 -1
- package/build-types/alert-dialog/trigger.d.ts.map +1 -1
- package/build-types/alert-dialog/types.d.ts +61 -26
- package/build-types/alert-dialog/types.d.ts.map +1 -1
- package/build-types/badge/badge.d.ts.map +1 -1
- package/build-types/button/button.d.ts.map +1 -1
- package/build-types/card/stories/index.story.d.ts.map +1 -1
- package/build-types/card/title.d.ts.map +1 -1
- package/build-types/collapsible/panel.d.ts +2 -1
- package/build-types/collapsible/panel.d.ts.map +1 -1
- package/build-types/collapsible/root.d.ts +2 -1
- package/build-types/collapsible/root.d.ts.map +1 -1
- package/build-types/collapsible/trigger.d.ts +2 -1
- package/build-types/collapsible/trigger.d.ts.map +1 -1
- package/build-types/dialog/popup.d.ts.map +1 -1
- package/build-types/dialog/stories/index.story.d.ts +8 -0
- package/build-types/dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/dialog/title.d.ts +12 -2
- package/build-types/dialog/title.d.ts.map +1 -1
- package/build-types/dialog/types.d.ts +8 -1
- package/build-types/dialog/types.d.ts.map +1 -1
- package/build-types/empty-state/description.d.ts.map +1 -1
- package/build-types/empty-state/title.d.ts.map +1 -1
- package/build-types/form/primitives/field/description.d.ts +2 -1
- package/build-types/form/primitives/field/description.d.ts.map +1 -1
- package/build-types/form/primitives/field/details.d.ts +2 -1
- package/build-types/form/primitives/field/details.d.ts.map +1 -1
- package/build-types/form/primitives/field/label.d.ts +2 -1
- package/build-types/form/primitives/field/label.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/description.d.ts +2 -1
- package/build-types/form/primitives/fieldset/description.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/details.d.ts +2 -1
- package/build-types/form/primitives/fieldset/details.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/legend.d.ts +2 -1
- package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/root.d.ts +2 -1
- package/build-types/form/primitives/fieldset/root.d.ts.map +1 -1
- package/build-types/form/primitives/input/input.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/input-layout.d.ts.map +1 -1
- package/build-types/form/primitives/select/item.d.ts +6 -2
- package/build-types/form/primitives/select/item.d.ts.map +1 -1
- package/build-types/form/primitives/select/popup.d.ts +11 -1
- package/build-types/form/primitives/select/popup.d.ts.map +1 -1
- package/build-types/form/primitives/select/trigger.d.ts +12 -2
- package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
- package/build-types/form/primitives/select/types.d.ts +13 -3
- package/build-types/form/primitives/select/types.d.ts.map +1 -1
- package/build-types/form/primitives/textarea/textarea.d.ts.map +1 -1
- package/build-types/form/stories/shared.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/link/link.d.ts.map +1 -1
- package/build-types/popover/arrow.d.ts +10 -0
- package/build-types/popover/arrow.d.ts.map +1 -0
- package/build-types/popover/close.d.ts +11 -0
- package/build-types/popover/close.d.ts.map +1 -0
- package/build-types/popover/context.d.ts +22 -0
- package/build-types/popover/context.d.ts.map +1 -0
- package/build-types/popover/description.d.ts +10 -0
- package/build-types/popover/description.d.ts.map +1 -0
- package/build-types/popover/index.d.ts +9 -0
- package/build-types/popover/index.d.ts.map +1 -0
- package/build-types/popover/popup.d.ts +11 -0
- package/build-types/popover/popup.d.ts.map +1 -0
- package/build-types/popover/root.d.ts +37 -0
- package/build-types/popover/root.d.ts.map +1 -0
- package/build-types/popover/stories/index.story.d.ts +211 -0
- package/build-types/popover/stories/index.story.d.ts.map +1 -0
- package/build-types/popover/stories/utils.d.ts +25 -0
- package/build-types/popover/stories/utils.d.ts.map +1 -0
- package/build-types/popover/test/index.test.d.ts +2 -0
- package/build-types/popover/test/index.test.d.ts.map +1 -0
- package/build-types/popover/title.d.ts +20 -0
- package/build-types/popover/title.d.ts.map +1 -0
- package/build-types/popover/trigger.d.ts +10 -0
- package/build-types/popover/trigger.d.ts.map +1 -0
- package/build-types/popover/types.d.ts +83 -0
- package/build-types/popover/types.d.ts.map +1 -0
- package/build-types/tabs/list.d.ts +2 -1
- package/build-types/tabs/list.d.ts.map +1 -1
- package/build-types/tabs/panel.d.ts +2 -1
- package/build-types/tabs/panel.d.ts.map +1 -1
- package/build-types/tabs/root.d.ts +2 -1
- package/build-types/tabs/root.d.ts.map +1 -1
- package/build-types/tabs/tab.d.ts +2 -1
- package/build-types/tabs/tab.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts +4 -0
- package/build-types/text/stories/index.story.d.ts.map +1 -1
- package/build-types/text/text.d.ts.map +1 -1
- package/build-types/tooltip/popup.d.ts.map +1 -1
- package/build-types/tooltip/root.d.ts +9 -8
- package/build-types/tooltip/root.d.ts.map +1 -1
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts +21 -0
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -0
- package/build-types/tooltip/types.d.ts +4 -0
- package/build-types/tooltip/types.d.ts.map +1 -1
- package/build-types/utils/types.d.ts +6 -2
- package/build-types/utils/types.d.ts.map +1 -1
- package/build-types/utils/use-deprioritized-initial-focus.d.ts +6 -5
- package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
- package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
- package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
- package/build-types/visually-hidden/visually-hidden.d.ts +34 -0
- package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/alert-dialog/context.tsx +12 -4
- package/src/alert-dialog/popup.tsx +91 -33
- package/src/alert-dialog/root.tsx +191 -13
- package/src/alert-dialog/stories/index.story.tsx +116 -65
- package/src/alert-dialog/style.module.css +11 -0
- package/src/alert-dialog/test/index.test.tsx +1319 -347
- package/src/alert-dialog/trigger.tsx +2 -2
- package/src/alert-dialog/types.ts +64 -28
- package/src/badge/badge.tsx +11 -14
- package/src/badge/style.module.css +0 -4
- package/src/button/button.tsx +2 -0
- package/src/button/style.module.css +7 -3
- package/src/card/stories/index.story.tsx +4 -5
- package/src/card/style.module.css +1 -5
- package/src/card/test/index.test.tsx +17 -1
- package/src/card/title.tsx +6 -5
- package/src/collapsible-card/stories/index.story.tsx +5 -5
- package/src/dialog/popup.tsx +2 -1
- package/src/dialog/stories/index.story.tsx +33 -0
- package/src/dialog/style.module.css +13 -9
- package/src/dialog/test/index.test.tsx +63 -4
- package/src/dialog/title.tsx +21 -9
- package/src/dialog/types.ts +9 -1
- package/src/empty-state/description.tsx +6 -2
- package/src/empty-state/style.module.css +1 -1
- package/src/empty-state/test/description.test.tsx +13 -0
- package/src/empty-state/test/title.test.tsx +13 -0
- package/src/empty-state/title.tsx +9 -3
- package/src/form/primitives/field/description.tsx +6 -1
- package/src/form/primitives/field/details.tsx +4 -2
- package/src/form/primitives/field/label.tsx +9 -5
- package/src/form/primitives/field/root.tsx +2 -2
- package/src/form/primitives/field/test/index.test.tsx +11 -0
- package/src/form/primitives/fieldset/description.tsx +9 -1
- package/src/form/primitives/fieldset/legend.tsx +9 -4
- package/src/form/primitives/fieldset/test/index.test.tsx +22 -0
- package/src/form/primitives/input/input.tsx +6 -1
- package/src/form/primitives/input/style.module.css +4 -0
- package/src/form/primitives/input-layout/input-layout.tsx +2 -0
- package/src/form/primitives/input-layout/style.module.css +3 -3
- package/src/form/primitives/select/popup.tsx +5 -2
- package/src/form/primitives/select/test/index.test.tsx +60 -1
- package/src/form/primitives/select/types.ts +14 -4
- package/src/form/primitives/textarea/textarea.tsx +10 -1
- package/src/form/stories/shared.tsx +4 -2
- package/src/index.ts +1 -0
- package/src/link/link.tsx +2 -0
- package/src/link/style.module.css +11 -1
- package/src/notice/style.module.css +5 -5
- package/src/popover/arrow.tsx +49 -0
- package/src/popover/close.tsx +24 -0
- package/src/popover/context.tsx +100 -0
- package/src/popover/description.tsx +29 -0
- package/src/popover/index.ts +9 -0
- package/src/popover/popup.tsx +106 -0
- package/src/popover/root.tsx +41 -0
- package/src/popover/stories/index.story.tsx +1315 -0
- package/src/popover/stories/utils.tsx +91 -0
- package/src/popover/style.module.css +64 -0
- package/src/popover/test/index.test.tsx +727 -0
- package/src/popover/title.tsx +47 -0
- package/src/popover/trigger.tsx +17 -0
- package/src/popover/types.ts +113 -0
- package/src/tabs/list.tsx +0 -1
- package/src/tabs/style.module.css +2 -2
- package/src/text/stories/index.story.tsx +4 -2
- package/src/text/style.module.css +62 -36
- package/src/text/test/index.test.tsx +1 -4
- package/src/text/text.tsx +8 -1
- package/src/tooltip/popup.tsx +2 -1
- package/src/tooltip/root.tsx +9 -8
- package/src/tooltip/stories/usage-guidelines.mdx +91 -0
- package/src/tooltip/stories/usage-guidelines.story.tsx +119 -0
- package/src/tooltip/style.module.css +2 -2
- package/src/tooltip/test/index.test.tsx +61 -0
- package/src/tooltip/types.ts +5 -0
- package/src/utils/css/field.module.css +12 -9
- package/src/utils/css/focus.module.css +7 -5
- package/src/utils/css/global-css-defense.module.css +117 -0
- package/src/utils/css/item-popup.module.css +2 -2
- package/src/utils/types.ts +7 -2
- package/src/utils/use-deprioritized-initial-focus.ts +5 -4
- package/src/visually-hidden/stories/index.story.tsx +25 -0
- package/src/visually-hidden/visually-hidden.tsx +34 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/dialog/title.tsx", "../../src/dialog/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport
|
|
5
|
-
"mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,
|
|
4
|
+
"sourcesContent": ["import { Dialog as _Dialog } from '@base-ui/react/dialog';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { useDialogValidationContext } from './context';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * Renders the dialog title. This component is required for accessibility\n * and serves as both the visible heading and the accessible label for\n * the dialog.\n *\n * **Required** \u2014 every dialog must include a `Dialog.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={ <Dialog.Title /> }>\n * Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction DialogTitle( { children, ...props }, forwardedRef ) {\n\t\tconst validationContext = useDialogValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\t// Register this title with the parent Popup for validation (dev only)\n\t\tuseLayoutEffect( () => {\n\t\t\tvalidationContext?.registerTitle( internalRef.current );\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={ <_Dialog.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='0289d42d13']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0289d42d13\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._074affe4c56b4f2f__backdrop{background-color:#00000059;inset:0;position:fixed;z-index:var(--wp-ui-dialog-z-index,initial);&[data-ending-style],&[data-starting-style]{opacity:0}&[data-open]{opacity:1}@media not (prefers-reduced-motion){transition:opacity .2s ease-out}}._8acaa98861620d4d__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border-radius:var(--wpds-border-radius-lg,8px);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);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);left:50%;line-height:var(--wpds-typography-line-height-md,24px);max-height:calc(100vh - var(--wpds-dimension-padding-2xl, 24px)*2);min-width:var(--wpds-dimension-surface-width-sm,320px);overflow:auto;padding:var(--wpds-dimension-padding-2xl,24px);position:fixed;top:50%;transform:translate(-50%,-50%);width:calc(100vw - var(--wpds-dimension-padding-2xl, 24px)*2);z-index:var(--wp-ui-dialog-z-index,initial);&[data-ending-style],&[data-starting-style]{opacity:0;transform:translate(-50%,-50%) scale(.9)}@media not (prefers-reduced-motion){transition:opacity .2s cubic-bezier(1,0,.2,1),transform .2s cubic-bezier(1,0,.2,1);&[data-open]{transition:opacity .2s cubic-bezier(.29,0,0,1),transform .2s cubic-bezier(.29,0,0,1)}}@media (min-width:480px){min-width:var(--wpds-dimension-surface-width-md,400px)}&._7acfa67ebf092988__is-small{max-width:var(--wpds-dimension-surface-width-md,400px)}&._1eeeed880cb5769d__is-medium{max-width:var(--wpds-dimension-surface-width-lg,560px)}&._99f900b2267e22d0__is-large{max-width:var(--wpds-dimension-surface-width-2xl,960px)}&.b49f7ff9c06fe387__is-stretch{max-width:none}&.dcd4c2f5036cbf1a__is-full{height:100vh}}._76fb3b28fcbd45fc__header{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);margin-bottom:var(--wpds-dimension-gap-lg,16px)}.f636832002af749e__title{--_gcd-heading-margin:0 auto 0 0;margin-inline-end:auto;&:dir(rtl){--_gcd-heading-margin:0 0 0 auto}}._00eeb4f220cddae3__footer{align-items:center;display:flex;gap:var(--wpds-dimension-gap-sm,8px);justify-content:flex-end;margin-top:var(--wpds-dimension-gap-lg,16px);padding-top:var(--wpds-dimension-padding-lg,16px)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"backdrop\":\"_074affe4c56b4f2f__backdrop\",\"popup\":\"_8acaa98861620d4d__popup\",\"is-small\":\"_7acfa67ebf092988__is-small\",\"is-medium\":\"_1eeeed880cb5769d__is-medium\",\"is-large\":\"_99f900b2267e22d0__is-large\",\"is-stretch\":\"b49f7ff9c06fe387__is-stretch\",\"is-full\":\"dcd4c2f5036cbf1a__is-full\",\"header\":\"_76fb3b28fcbd45fc__header\",\"title\":\"f636832002af749e__title\",\"footer\":\"_00eeb4f220cddae3__footer\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,iBAAiB,cAAc;AACpD,SAAS,YAAY;AACrB,SAAS,kCAAkC;;;ACJ3C,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,8/EAA0gF,CAAC;AACrjF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,YAAW,+BAA8B,SAAQ,4BAA2B,YAAW,+BAA8B,aAAY,gCAA+B,YAAW,+BAA8B,cAAa,gCAA+B,WAAU,6BAA4B,UAAS,6BAA4B,SAAQ,2BAA0B,UAAS,4BAA2B;;;ADmCzY;AAfb,IAAM,QAAQ;AAAA,EACb,SAAS,YAAa,EAAE,UAAU,GAAG,MAAM,GAAG,cAAe;AAC5D,UAAM,oBAAoB,2BAA2B;AACrD,UAAM,cAAc,OAA8B,IAAK;AACvD,UAAM,YAAY,aAAc,CAAE,aAAa,YAAa,CAAE;AAG9D,oBAAiB,MAAM;AACtB,yBAAmB,cAAe,YAAY,OAAQ;AAAA,IACvD,GAAG,CAAE,iBAAkB,CAAE;AAEzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAS,oBAAC,QAAQ,OAAR,EAAgB,GAAG,OAAQ;AAAA,QACrC,WAAY,cAAO;AAAA,QAEjB;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,10 @@ import clsx from "clsx";
|
|
|
4
4
|
import { forwardRef } from "@wordpress/element";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/empty-state/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
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-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,#
|
|
9
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
10
|
+
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}}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/actions.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateActionsProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for action buttons in an empty state. Actions are optional, and\n * can include a primary and optional secondary action button.\n */\nexport const Actions = forwardRef< HTMLDivElement, EmptyStateActionsProps >(\n\tfunction EmptyStateActions( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.actions );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateActionsProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for action buttons in an empty state. Actions are optional, and\n * can include a primary and optional secondary action button.\n */\nexport const Actions = forwardRef< HTMLDivElement, EmptyStateActionsProps >(\n\tfunction EmptyStateActions( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.actions );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADItO,IAAM,UAAU;AAAA,EACtB,SAAS,kBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AACvD,UAAM,YAAY,KAAM,cAAO,OAAQ;AAEvC,UAAM,UAAU,UAAW;AAAA,MAC1B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO,WAAqB,EAAE,UAAU,GAAG,KAAM;AAAA,IAClD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,23 +4,26 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { Text } from "../text/index.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/empty-state/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
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-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,#
|
|
9
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
10
|
+
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}}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
14
14
|
|
|
15
15
|
// packages/ui/src/empty-state/description.tsx
|
|
16
16
|
import { jsx } from "react/jsx-runtime";
|
|
17
|
-
var
|
|
17
|
+
var DEFAULT_TAG = /* @__PURE__ */ jsx("p", {});
|
|
18
|
+
var Description = forwardRef(function EmptyStateDescription({ render = DEFAULT_TAG, className, children, ...props }, ref) {
|
|
18
19
|
return /* @__PURE__ */ jsx(
|
|
19
20
|
Text,
|
|
20
21
|
{
|
|
22
|
+
ref,
|
|
21
23
|
variant: "body-md",
|
|
22
|
-
render
|
|
24
|
+
render,
|
|
23
25
|
className: clsx(style_default.description, className),
|
|
26
|
+
...props,
|
|
24
27
|
children
|
|
25
28
|
}
|
|
26
29
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/description.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport type { EmptyStateDescriptionProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The description text for an empty state, providing additional context and\n * guidance on what the user should do next.\n */\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tEmptyStateDescriptionProps\n>( function EmptyStateDescription(\n\t{ render, className, children, ...props },\n\tref\n) {\n\treturn (\n\t\t<Text\n\t\t\tvariant=\"body-md\"\n\t\t\trender={ render
|
|
5
|
-
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;;;ACFrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport type { EmptyStateDescriptionProps } from './types';\nimport styles from './style.module.css';\n\nconst DEFAULT_TAG = <p />;\n\n/**\n * The description text for an empty state, providing additional context and\n * guidance on what the user should do next.\n */\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tEmptyStateDescriptionProps\n>( function EmptyStateDescription(\n\t{ render = DEFAULT_TAG, className, children, ...props },\n\tref\n) {\n\treturn (\n\t\t<Text\n\t\t\tref={ ref }\n\t\t\tvariant=\"body-md\"\n\t\t\trender={ render }\n\t\t\tclassName={ clsx( styles.description, className ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Text>\n\t);\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;;;ACFrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADAzN;AAApB,IAAM,cAAc,oBAAC,OAAE;AAMhB,IAAM,cAAc,WAGxB,SAAS,sBACX,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,MAAM,GACtD,KACC;AACD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA,WAAY,KAAM,cAAO,aAAa,SAAU;AAAA,MAC9C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEF,CAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,10 +5,10 @@ import { Icon as _Icon } from "../icon/index.mjs";
|
|
|
5
5
|
import { Visual } from "./visual.mjs";
|
|
6
6
|
|
|
7
7
|
// packages/ui/src/empty-state/style.module.css
|
|
8
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
8
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
9
9
|
const style = document.createElement("style");
|
|
10
|
-
style.setAttribute("data-wp-hash", "
|
|
11
|
-
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-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,#
|
|
10
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
11
|
+
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}}}'));
|
|
12
12
|
document.head.appendChild(style);
|
|
13
13
|
}
|
|
14
14
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/icon.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Icon as _Icon } from '../icon';\nimport { Visual } from './visual';\nimport type { EmptyStateIconProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * An icon visual for empty states. Renders an icon with styling treatment for\n * empty states.\n */\nexport const Icon = forwardRef< HTMLDivElement, EmptyStateIconProps >(\n\tfunction EmptyStateIcon( { icon, className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<Visual\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.icon, className ) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<_Icon icon={ icon } />\n\t\t\t</Visual>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,aAAa;AAC9B,SAAS,cAAc;;;ACHvB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Icon as _Icon } from '../icon';\nimport { Visual } from './visual';\nimport type { EmptyStateIconProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * An icon visual for empty states. Renders an icon with styling treatment for\n * empty states.\n */\nexport const Icon = forwardRef< HTMLDivElement, EmptyStateIconProps >(\n\tfunction EmptyStateIcon( { icon, className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<Visual\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles.icon, className ) }\n\t\t\t\t{ ...restProps }\n\t\t\t>\n\t\t\t\t<_Icon icon={ icon } />\n\t\t\t</Visual>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,aAAa;AAC9B,SAAS,cAAc;;;ACHvB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADazO;AARG,IAAM,OAAO;AAAA,EACnB,SAAS,eAAgB,EAAE,MAAM,WAAW,GAAG,UAAU,GAAG,KAAM;AACjE,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY,KAAM,cAAO,MAAM,SAAU;AAAA,QACvC,GAAG;AAAA,QAEL,8BAAC,SAAM,MAAc;AAAA;AAAA,IACtB;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,10 @@ import clsx from "clsx";
|
|
|
4
4
|
import { forwardRef } from "@wordpress/element";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/empty-state/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
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-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,#
|
|
9
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
10
|
+
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}}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/root.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateRootProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The root container for an empty state component.\n */\nexport const Root = forwardRef< HTMLDivElement, EmptyStateRootProps >(\n\tfunction EmptyStateRoot( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.root );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateRootProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The root container for an empty state component.\n */\nexport const Root = forwardRef< HTMLDivElement, EmptyStateRootProps >(\n\tfunction EmptyStateRoot( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.root );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADGtO,IAAM,OAAO;AAAA,EACnB,SAAS,eAAgB,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AACpD,UAAM,YAAY,KAAM,cAAO,IAAK;AAEpC,UAAM,UAAU,UAAW;AAAA,MAC1B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO,WAAqB,EAAE,UAAU,GAAG,KAAM;AAAA,IAClD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,24 +4,27 @@ import { forwardRef } from "@wordpress/element";
|
|
|
4
4
|
import { Text } from "../text/index.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/empty-state/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
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-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,#
|
|
9
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
10
|
+
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}}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
14
14
|
|
|
15
15
|
// packages/ui/src/empty-state/title.tsx
|
|
16
16
|
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var DEFAULT_TAG = /* @__PURE__ */ jsx("h2", {});
|
|
17
18
|
var Title = forwardRef(
|
|
18
|
-
function EmptyStateTitle({ render, className, children, ...props }, ref) {
|
|
19
|
+
function EmptyStateTitle({ render = DEFAULT_TAG, className, children, ...props }, ref) {
|
|
19
20
|
return /* @__PURE__ */ jsx(
|
|
20
21
|
Text,
|
|
21
22
|
{
|
|
23
|
+
ref,
|
|
22
24
|
variant: "heading-lg",
|
|
23
|
-
render
|
|
25
|
+
render,
|
|
24
26
|
className: clsx(style_default.title, className),
|
|
27
|
+
...props,
|
|
25
28
|
children
|
|
26
29
|
}
|
|
27
30
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/title.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport type { EmptyStateTitleProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The title is a short heading that communicates the empty state.\n */\nexport const Title = forwardRef< HTMLHeadingElement, EmptyStateTitleProps >(\n\tfunction EmptyStateTitle(
|
|
5
|
-
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;;;ACFrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport type { EmptyStateTitleProps } from './types';\nimport styles from './style.module.css';\n\nconst DEFAULT_TAG = <h2 />;\n\n/**\n * The title is a short heading that communicates the empty state.\n */\nexport const Title = forwardRef< HTMLHeadingElement, EmptyStateTitleProps >(\n\tfunction EmptyStateTitle(\n\t\t{ render = DEFAULT_TAG, className, children, ...props },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"heading-lg\"\n\t\t\t\trender={ render }\n\t\t\t\tclassName={ clsx( styles.title, className ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;;;ACFrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADAzN;AAApB,IAAM,cAAc,oBAAC,QAAG;AAKjB,IAAM,QAAQ;AAAA,EACpB,SAAS,gBACR,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,MAAM,GACtD,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR;AAAA,QACA,WAAY,KAAM,cAAO,OAAO,SAAU;AAAA,QACxC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,10 +4,10 @@ import clsx from "clsx";
|
|
|
4
4
|
import { forwardRef } from "@wordpress/element";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/empty-state/style.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='6d6361d221']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
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-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,#
|
|
9
|
+
style.setAttribute("data-wp-hash", "6d6361d221");
|
|
10
|
+
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}}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var style_default = { "root": "a23e08e65c8e62e5__root", "visual": "_01303b3680eaa216__visual", "icon": "_58c8e351db225608__icon", "title": "b8b96f70820333a1__title", "description": "_70f1dd22bad55b18__description", "actions": "_89ac025fd8e2bc52__actions" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/empty-state/visual.tsx", "../../src/empty-state/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateVisualProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for visual content in an empty state (e.g., icons, illustrations).\n * Provides appropriate spacing and alignment for visual elements.\n */\nexport const Visual = forwardRef< HTMLDivElement, EmptyStateVisualProps >(\n\tfunction EmptyStateVisual( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.visual );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport type { EmptyStateVisualProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for visual content in an empty state (e.g., icons, illustrations).\n * Provides appropriate spacing and alignment for visual elements.\n */\nexport const Visual = forwardRef< HTMLDivElement, EmptyStateVisualProps >(\n\tfunction EmptyStateVisual( { render, ...props }, ref ) {\n\t\tconst className = clsx( styles.visual );\n\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >( { className }, props ),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='6d6361d221']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"6d6361d221\");\n\tstyle.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}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"root\":\"a23e08e65c8e62e5__root\",\"visual\":\"_01303b3680eaa216__visual\",\"icon\":\"_58c8e351db225608__icon\",\"title\":\"b8b96f70820333a1__title\",\"description\":\"_70f1dd22bad55b18__description\",\"actions\":\"_89ac025fd8e2bc52__actions\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,SAAS,WAAW,kBAAkB;AACtC,OAAO,UAAU;AACjB,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAozC,CAAC;AAC/1C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,QAAO,0BAAyB,UAAS,6BAA4B,QAAO,2BAA0B,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,6BAA4B;;;ADItO,IAAM,SAAS;AAAA,EACrB,SAAS,iBAAkB,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AACtD,UAAM,YAAY,KAAM,cAAO,MAAO;AAEtC,UAAM,UAAU,UAAW;AAAA,MAC1B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO,WAAqB,EAAE,UAAU,GAAG,KAAM;AAAA,IAClD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,11 +3,20 @@ import clsx from "clsx";
|
|
|
3
3
|
import { Field as _Field } from "@base-ui/react/field";
|
|
4
4
|
import { forwardRef } from "@wordpress/element";
|
|
5
5
|
|
|
6
|
+
// packages/ui/src/utils/css/global-css-defense.module.css
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='1fb29d3a3c']")) {
|
|
8
|
+
const style = document.createElement("style");
|
|
9
|
+
style.setAttribute("data-wp-hash", "1fb29d3a3c");
|
|
10
|
+
style.appendChild(document.createTextNode("._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}"));
|
|
11
|
+
document.head.appendChild(style);
|
|
12
|
+
}
|
|
13
|
+
var global_css_defense_default = { "button": "_6defc79820e382c6__button", "input": "d2cff2e5dea83bd1__input", "textarea": "_547d86373d02e108__textarea", "div": "_8c15fd0ed9f28ba4__div", "p": "_43cec3e1eec1066d__p", "heading": "e97669c6d9a38497__heading", "a": "_2c0831b0499dbd6e__a" };
|
|
14
|
+
|
|
6
15
|
// packages/ui/src/utils/css/field.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
16
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f9ecc2af7d']")) {
|
|
8
17
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-
|
|
18
|
+
style.setAttribute("data-wp-hash", "f9ecc2af7d");
|
|
19
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-typography-line-height-xs,16px);color:var(--wpds-color-fg-content-neutral,#1e1e1e);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-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-typography-font-size-md,13px);text-transform:none}}._08a3750500e0233f__description{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);--_gcd-p-margin:0;color:var(--wpds-color-fg-content-neutral-weak,#707070);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-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}'));
|
|
11
20
|
document.head.appendChild(style);
|
|
12
21
|
}
|
|
13
22
|
var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
|
|
@@ -19,7 +28,11 @@ var Description = forwardRef(function Description2({ className, ...restProps },
|
|
|
19
28
|
_Field.Description,
|
|
20
29
|
{
|
|
21
30
|
ref,
|
|
22
|
-
className: clsx(
|
|
31
|
+
className: clsx(
|
|
32
|
+
global_css_defense_default.p,
|
|
33
|
+
field_default.description,
|
|
34
|
+
className
|
|
35
|
+
),
|
|
23
36
|
...restProps
|
|
24
37
|
}
|
|
25
38
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/form/primitives/field/description.tsx", "../../../../src/utils/css/field.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(
|
|
5
|
-
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
3
|
+
"sources": ["../../../../src/form/primitives/field/description.tsx", "../../../../src/utils/css/global-css-defense.module.css", "../../../../src/utils/css/field.module.css"],
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport defenseStyles from '../../../utils/css/global-css-defense.module.css';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tdefenseStyles.p,\n\t\t\t\tfieldStyles.description,\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='1fb29d3a3c']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"1fb29d3a3c\");\n\tstyle.appendChild(document.createTextNode(\"._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_6defc79820e382c6__button\",\"input\":\"d2cff2e5dea83bd1__input\",\"textarea\":\"_547d86373d02e108__textarea\",\"div\":\"_8c15fd0ed9f28ba4__div\",\"p\":\"_43cec3e1eec1066d__p\",\"heading\":\"e97669c6d9a38497__heading\",\"a\":\"_2c0831b0499dbd6e__a\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f9ecc2af7d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f9ecc2af7d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-typography-line-height-xs,16px);color:var(--wpds-color-fg-content-neutral,#1e1e1e);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-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-typography-font-size-md,13px);text-transform:none}}._08a3750500e0233f__description{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);--_gcd-p-margin:0;color:var(--wpds-color-fg-content-neutral-weak,#707070);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-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"label\":\"_2d5ad850b2f90964__label\",\"is-plain\":\"_17c4214649230bea__is-plain\",\"description\":\"_08a3750500e0233f__description\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2vFAA2vF,CAAC;AACtyF,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,6BAAQ,EAAC,UAAS,6BAA4B,SAAQ,2BAA0B,YAAW,+BAA8B,OAAM,0BAAyB,KAAI,wBAAuB,WAAU,6BAA4B,KAAI,uBAAsB;;;ACN1P,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2qCAAmsC,CAAC;AAC9uC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,eAAc,iCAAgC;;;AFMxI;AALK,IAAM,cAAc,WAGxB,SAASA,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AAC3D,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX,2BAAc;AAAA,QACd,cAAY;AAAA,QACZ;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;",
|
|
6
6
|
"names": ["Description"]
|
|
7
7
|
}
|
|
@@ -5,10 +5,10 @@ import { forwardRef } from "@wordpress/element";
|
|
|
5
5
|
import { __ } from "@wordpress/i18n";
|
|
6
6
|
|
|
7
7
|
// packages/ui/src/utils/css/field.module.css
|
|
8
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
8
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f9ecc2af7d']")) {
|
|
9
9
|
const style = document.createElement("style");
|
|
10
|
-
style.setAttribute("data-wp-hash", "
|
|
11
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-
|
|
10
|
+
style.setAttribute("data-wp-hash", "f9ecc2af7d");
|
|
11
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-typography-line-height-xs,16px);color:var(--wpds-color-fg-content-neutral,#1e1e1e);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-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-typography-font-size-md,13px);text-transform:none}}._08a3750500e0233f__description{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);--_gcd-p-margin:0;color:var(--wpds-color-fg-content-neutral-weak,#707070);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-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}'));
|
|
12
12
|
document.head.appendChild(style);
|
|
13
13
|
}
|
|
14
14
|
var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
|
|
@@ -19,7 +19,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
19
19
|
var Details = forwardRef(
|
|
20
20
|
function Details2({ className, ...restProps }, ref) {
|
|
21
21
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
-
/* @__PURE__ */ jsx(
|
|
22
|
+
/* @__PURE__ */ jsx(VisuallyHidden, { render: /* @__PURE__ */ jsx(_Field.Description, {}), children: __("More details follow the field.") }),
|
|
23
23
|
/* @__PURE__ */ jsx(
|
|
24
24
|
"div",
|
|
25
25
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/form/primitives/field/details.tsx", "../../../../src/utils/css/field.module.css"],
|
|
4
|
-
"sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDetailsProps } from './types';\nimport { VisuallyHidden } from '../../../visually-hidden';\n\n/**\n * A component for showing additional information about the field,\n * styled similarly to a normal `Field.Description`.\n * Unlike a normal description, it can include links and other semantic elements.\n *\n * Although this content is not associated with the field using direct semantics,\n * it is made discoverable to screen reader users via a visually hidden description,\n * alerting them to the presence of additional information below.\n *\n * If the content only includes plain text, use `Field.Description` instead,\n * so the readout is not unnecessarily verbose for screen reader users.\n */\nexport const Details = forwardRef< HTMLDivElement, FieldDetailsProps >(\n\tfunction Details( { className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t
|
|
5
|
-
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;;;ACHnB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,
|
|
4
|
+
"sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDetailsProps } from './types';\nimport { VisuallyHidden } from '../../../visually-hidden';\n\n/**\n * A component for showing additional information about the field,\n * styled similarly to a normal `Field.Description`.\n * Unlike a normal description, it can include links and other semantic elements.\n *\n * Although this content is not associated with the field using direct semantics,\n * it is made discoverable to screen reader users via a visually hidden description,\n * alerting them to the presence of additional information below.\n *\n * If the content only includes plain text, use `Field.Description` instead,\n * so the readout is not unnecessarily verbose for screen reader users.\n */\nexport const Details = forwardRef< HTMLDivElement, FieldDetailsProps >(\n\tfunction Details( { className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ /* VisuallyHidden is the host so that _Field.Description's\n\t\t\t\t semantic element is preserved. See VisuallyHidden docs. */ }\n\t\t\t\t<VisuallyHidden render={ <_Field.Description /> }>\n\t\t\t\t\t{ __( 'More details follow the field.' ) }\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t></div>\n\t\t\t</>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f9ecc2af7d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f9ecc2af7d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-typography-line-height-xs,16px);color:var(--wpds-color-fg-content-neutral,#1e1e1e);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-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-typography-font-size-md,13px);text-transform:none}}._08a3750500e0233f__description{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);--_gcd-p-margin:0;color:var(--wpds-color-fg-content-neutral-weak,#707070);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-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"label\":\"_2d5ad850b2f90964__label\",\"is-plain\":\"_17c4214649230bea__is-plain\",\"description\":\"_08a3750500e0233f__description\"};\n"],
|
|
5
|
+
"mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;;;ACHnB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2qCAAmsC,CAAC;AAC9uC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,eAAc,iCAAgC;;;ADA1I,SAAS,sBAAsB;AAiB5B,mBAG0B,KAH1B;AAHI,IAAM,UAAU;AAAA,EACtB,SAASA,SAAS,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AACpD,WACC,iCAGC;AAAA,0BAAC,kBAAe,QAAS,oBAAC,OAAO,aAAP,EAAmB,GAC1C,aAAI,gCAAiC,GACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAY,KAAM,cAAY,aAAa,SAAU;AAAA,UACnD,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["Details"]
|
|
7
7
|
}
|
|
@@ -4,10 +4,10 @@ import { Field as _Field } from "@base-ui/react/field";
|
|
|
4
4
|
import { forwardRef } from "@wordpress/element";
|
|
5
5
|
|
|
6
6
|
// packages/ui/src/utils/css/field.module.css
|
|
7
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
7
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f9ecc2af7d']")) {
|
|
8
8
|
const style = document.createElement("style");
|
|
9
|
-
style.setAttribute("data-wp-hash", "
|
|
10
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-
|
|
9
|
+
style.setAttribute("data-wp-hash", "f9ecc2af7d");
|
|
10
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-typography-line-height-xs,16px);color:var(--wpds-color-fg-content-neutral,#1e1e1e);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-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-typography-font-size-md,13px);text-transform:none}}._08a3750500e0233f__description{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);--_gcd-p-margin:0;color:var(--wpds-color-fg-content-neutral-weak,#707070);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-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}'));
|
|
11
11
|
document.head.appendChild(style);
|
|
12
12
|
}
|
|
13
13
|
var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
|
|
@@ -17,7 +17,7 @@ import { VisuallyHidden } from "../../../visually-hidden/index.mjs";
|
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
18
18
|
var Label = forwardRef(
|
|
19
19
|
function Label2({ className, hideFromVision, variant, ...restProps }, ref) {
|
|
20
|
-
|
|
20
|
+
const label = /* @__PURE__ */ jsx(
|
|
21
21
|
_Field.Label,
|
|
22
22
|
{
|
|
23
23
|
ref,
|
|
@@ -26,13 +26,13 @@ var Label = forwardRef(
|
|
|
26
26
|
variant && field_default[`is-${variant}`],
|
|
27
27
|
className
|
|
28
28
|
),
|
|
29
|
-
...hideFromVision && {
|
|
30
|
-
render: /* @__PURE__ */ jsx(VisuallyHidden, {}),
|
|
31
|
-
nativeLabel: false
|
|
32
|
-
},
|
|
33
29
|
...restProps
|
|
34
30
|
}
|
|
35
31
|
);
|
|
32
|
+
if (hideFromVision) {
|
|
33
|
+
return /* @__PURE__ */ jsx(VisuallyHidden, { render: label });
|
|
34
|
+
}
|
|
35
|
+
return label;
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
38
|
export {
|