@wordpress/ui 0.11.0 → 0.12.1-next.v.202604201441.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 +24 -0
- package/README.md +4 -4
- package/build/alert-dialog/popup.cjs +4 -4
- package/build/alert-dialog/popup.cjs.map +2 -2
- package/build/collapsible-card/header.cjs +10 -0
- package/build/collapsible-card/header.cjs.map +3 -3
- package/build/dialog/context.cjs +21 -9
- package/build/dialog/context.cjs.map +2 -2
- package/build/dialog/footer.cjs +4 -4
- package/build/dialog/footer.cjs.map +2 -2
- package/build/dialog/header.cjs +4 -4
- package/build/dialog/header.cjs.map +2 -2
- package/build/dialog/popup.cjs +4 -4
- package/build/dialog/popup.cjs.map +2 -2
- package/build/dialog/title.cjs +9 -6
- package/build/dialog/title.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 +3 -3
- package/build/form/primitives/select/popup.cjs.map +2 -2
- package/build/link/link.cjs +8 -18
- package/build/link/link.cjs.map +2 -2
- package/build/link/types.cjs.map +1 -1
- package/build/notice/action-button.cjs +3 -3
- package/build/notice/action-button.cjs.map +2 -2
- package/build/notice/action-link.cjs +8 -7
- 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 +4 -4
- package/build/popover/arrow.cjs.map +2 -2
- package/build/popover/context.cjs +21 -9
- package/build/popover/context.cjs.map +2 -2
- package/build/popover/description.cjs +4 -4
- package/build/popover/description.cjs.map +2 -2
- package/build/popover/popup.cjs +8 -5
- package/build/popover/popup.cjs.map +2 -2
- package/build/popover/title.cjs +5 -2
- package/build/popover/title.cjs.map +2 -2
- package/build/tabs/context.cjs +9 -22
- package/build/tabs/context.cjs.map +2 -2
- package/build/tabs/list.cjs +4 -4
- package/build/tabs/list.cjs.map +2 -2
- package/build/tabs/panel.cjs +19 -6
- package/build/tabs/panel.cjs.map +3 -3
- package/build/tabs/tab.cjs +4 -4
- package/build/tabs/tab.cjs.map +2 -2
- package/build/tooltip/popup.cjs +4 -4
- package/build/tooltip/popup.cjs.map +2 -2
- package/build/utils/use-schedule-validation.cjs +59 -0
- package/build/utils/use-schedule-validation.cjs.map +7 -0
- package/build-module/alert-dialog/popup.mjs +4 -4
- package/build-module/alert-dialog/popup.mjs.map +2 -2
- package/build-module/collapsible-card/header.mjs +10 -0
- package/build-module/collapsible-card/header.mjs.map +3 -3
- package/build-module/dialog/context.mjs +21 -9
- package/build-module/dialog/context.mjs.map +2 -2
- package/build-module/dialog/footer.mjs +4 -4
- package/build-module/dialog/footer.mjs.map +2 -2
- package/build-module/dialog/header.mjs +4 -4
- package/build-module/dialog/header.mjs.map +2 -2
- package/build-module/dialog/popup.mjs +4 -4
- package/build-module/dialog/popup.mjs.map +2 -2
- package/build-module/dialog/title.mjs +10 -7
- package/build-module/dialog/title.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 +3 -3
- package/build-module/form/primitives/select/popup.mjs.map +2 -2
- package/build-module/link/link.mjs +8 -18
- package/build-module/link/link.mjs.map +2 -2
- 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 +8 -7
- 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 +4 -4
- package/build-module/popover/arrow.mjs.map +2 -2
- package/build-module/popover/context.mjs +21 -9
- package/build-module/popover/context.mjs.map +2 -2
- package/build-module/popover/description.mjs +4 -4
- package/build-module/popover/description.mjs.map +2 -2
- package/build-module/popover/popup.mjs +8 -5
- package/build-module/popover/popup.mjs.map +2 -2
- package/build-module/popover/title.mjs +6 -3
- package/build-module/popover/title.mjs.map +2 -2
- package/build-module/tabs/context.mjs +11 -24
- package/build-module/tabs/context.mjs.map +2 -2
- package/build-module/tabs/list.mjs +4 -4
- package/build-module/tabs/list.mjs.map +2 -2
- package/build-module/tabs/panel.mjs +19 -6
- package/build-module/tabs/panel.mjs.map +3 -3
- package/build-module/tabs/tab.mjs +4 -4
- package/build-module/tabs/tab.mjs.map +2 -2
- package/build-module/tooltip/popup.mjs +4 -4
- package/build-module/tooltip/popup.mjs.map +2 -2
- package/build-module/utils/use-schedule-validation.mjs +34 -0
- package/build-module/utils/use-schedule-validation.mjs.map +7 -0
- package/build-types/alert-dialog/stories/index.story.d.ts +1 -1
- package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
- package/build-types/badge/stories/index.story.d.ts.map +1 -1
- package/build-types/collapsible-card/header.d.ts.map +1 -1
- package/build-types/dialog/context.d.ts +1 -1
- package/build-types/dialog/context.d.ts.map +1 -1
- package/build-types/dialog/title.d.ts.map +1 -1
- package/build-types/empty-state/stories/index.story.d.ts +1 -1
- package/build-types/empty-state/stories/index.story.d.ts.map +1 -1
- package/build-types/form/input-control/stories/index.story.d.ts +1 -1
- package/build-types/form/input-control/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts +1 -1
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts +1 -1
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/input/stories/index.story.d.ts +1 -1
- package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts +1 -1
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -1
- package/build-types/form/primitives/select/stories/index.story.d.ts +1 -1
- package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
- package/build-types/link/link.d.ts.map +1 -1
- package/build-types/link/types.d.ts +1 -2
- package/build-types/link/types.d.ts.map +1 -1
- package/build-types/notice/action-link.d.ts.map +1 -1
- package/build-types/popover/context.d.ts +1 -1
- package/build-types/popover/context.d.ts.map +1 -1
- package/build-types/popover/popup.d.ts.map +1 -1
- package/build-types/popover/stories/index.story.d.ts +1 -1
- package/build-types/popover/stories/index.story.d.ts.map +1 -1
- package/build-types/popover/title.d.ts.map +1 -1
- package/build-types/stack/stories/index.story.d.ts.map +1 -1
- package/build-types/tabs/context.d.ts.map +1 -1
- package/build-types/tabs/panel.d.ts.map +1 -1
- package/build-types/tabs/stories/index.story.d.ts +1 -1
- package/build-types/tabs/stories/index.story.d.ts.map +1 -1
- package/build-types/text/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/stories/index.story.d.ts +1 -1
- package/build-types/tooltip/stories/index.story.d.ts.map +1 -1
- package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -1
- package/build-types/utils/use-schedule-validation.d.ts +13 -0
- package/build-types/utils/use-schedule-validation.d.ts.map +1 -0
- package/package.json +11 -11
- package/src/alert-dialog/stories/index.story.tsx +2 -2
- package/src/badge/stories/choosing-intent.story.tsx +1 -1
- package/src/badge/stories/index.story.tsx +1 -0
- package/src/collapsible-card/header.tsx +2 -0
- package/src/dialog/context.tsx +28 -15
- package/src/dialog/style.module.css +12 -0
- package/src/dialog/test/index.test.tsx +222 -142
- package/src/dialog/title.tsx +6 -4
- package/src/empty-state/stories/index.story.tsx +2 -1
- package/src/form/input-control/stories/index.story.tsx +4 -1
- package/src/form/primitives/field/stories/index.story.tsx +1 -1
- package/src/form/primitives/fieldset/stories/index.story.tsx +1 -1
- package/src/form/primitives/input/stories/index.story.tsx +2 -1
- package/src/form/primitives/input-layout/stories/index.story.tsx +2 -1
- package/src/form/primitives/select/stories/index.story.tsx +1 -1
- package/src/link/link.tsx +12 -26
- package/src/link/style.module.css +4 -16
- package/src/link/test/index.test.tsx +31 -27
- package/src/link/types.ts +1 -2
- package/src/notice/action-link.tsx +7 -4
- package/src/notice/style.module.css +5 -5
- package/src/popover/context.tsx +28 -12
- package/src/popover/popup.tsx +4 -1
- package/src/popover/stories/index.story.tsx +2 -1
- package/src/popover/style.module.css +23 -1
- package/src/popover/test/index.test.tsx +146 -70
- package/src/popover/title.tsx +6 -3
- package/src/stack/stories/index.story.tsx +1 -0
- package/src/tabs/context.tsx +14 -34
- package/src/tabs/panel.tsx +7 -2
- package/src/tabs/stories/index.story.tsx +2 -1
- package/src/tabs/style.module.css +0 -17
- package/src/tabs/test/index.test.tsx +7 -3
- package/src/text/stories/index.story.tsx +1 -0
- package/src/tooltip/stories/index.story.tsx +2 -1
- package/src/tooltip/stories/usage-guidelines.story.tsx +5 -1
- package/src/tooltip/style.module.css +12 -0
- package/src/utils/css/item-popup.module.css +12 -0
- package/src/utils/use-schedule-validation.ts +45 -0
- package/build/types/css-modules.d.cjs +0 -2
- package/build/types/css-modules.d.cjs.map +0 -7
- package/build/types/react.d.cjs +0 -5
- package/build/types/react.d.cjs.map +0 -7
- package/build-module/types/css-modules.d.mjs +0 -1
- package/build-module/types/css-modules.d.mjs.map +0 -7
- package/build-module/types/react.d.mjs +0 -3
- package/build-module/types/react.d.mjs.map +0 -7
- package/src/types/css-modules.d.ts +0 -4
- package/src/types/react.d.ts +0 -7
package/build/notice/actions.cjs
CHANGED
|
@@ -27,10 +27,10 @@ var import_element = require("@wordpress/element");
|
|
|
27
27
|
var import_react = require("@base-ui/react");
|
|
28
28
|
|
|
29
29
|
// packages/ui/src/notice/style.module.css
|
|
30
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
30
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='60dd1d4d42']")) {
|
|
31
31
|
const style = document.createElement("style");
|
|
32
|
-
style.setAttribute("data-wp-hash", "
|
|
33
|
-
style.appendChild(document.createTextNode(
|
|
32
|
+
style.setAttribute("data-wp-hash", "60dd1d4d42");
|
|
33
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}"));
|
|
34
34
|
document.head.appendChild(style);
|
|
35
35
|
}
|
|
36
36
|
var style_default = { "notice": "_4145abab73d17514__notice", "icon": "d0a25570cb528528__icon", "title": "b5397fb9d05389e3__title", "description": "_1904b570a89bb815__description", "actions": "_0a1270dcdd79c031__actions", "action-button": "_983740ab855c4e09__action-button", "action-link": "d329e7416d368d31__action-link", "close-icon": "_487e6a5c1375f7dc__close-icon", "is-info": "_531c140826094795__is-info", "is-warning": "ae2e1004697cce95__is-warning", "is-success": "_2e614a76af494837__is-success", "is-error": "af00331ae17a0065__is-error", "is-action-button-outline": "_8ddb8fb33fbf3d38__is-action-button-outline", "is-action-button-minimal": "_77bbde495a8a0af3__is-action-button-minimal" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/notice/actions.tsx", "../../src/notice/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { useRender, mergeProps } from '@base-ui/react';\nimport type { ActionsProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for Notice.ActionButton and Notice.ActionLink.\n */\nexport const Actions = forwardRef< HTMLDivElement, ActionsProps >(\n\tfunction NoticeActions( { render, ...props }, ref ) {\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{\n\t\t\t\t\tclassName: styles.actions,\n\t\t\t\t},\n\t\t\t\tprops\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,mBAAsC;;;ACDtC,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 { forwardRef } from '@wordpress/element';\nimport { useRender, mergeProps } from '@base-ui/react';\nimport type { ActionsProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A container for Notice.ActionButton and Notice.ActionLink.\n */\nexport const Actions = forwardRef< HTMLDivElement, ActionsProps >(\n\tfunction NoticeActions( { render, ...props }, ref ) {\n\t\tconst element = useRender( {\n\t\t\tdefaultTagName: 'div',\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{\n\t\t\t\t\tclassName: styles.actions,\n\t\t\t\t},\n\t\t\t\tprops\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='60dd1d4d42']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"60dd1d4d42\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"notice\":\"_4145abab73d17514__notice\",\"icon\":\"d0a25570cb528528__icon\",\"title\":\"b5397fb9d05389e3__title\",\"description\":\"_1904b570a89bb815__description\",\"actions\":\"_0a1270dcdd79c031__actions\",\"action-button\":\"_983740ab855c4e09__action-button\",\"action-link\":\"d329e7416d368d31__action-link\",\"close-icon\":\"_487e6a5c1375f7dc__close-icon\",\"is-info\":\"_531c140826094795__is-info\",\"is-warning\":\"ae2e1004697cce95__is-warning\",\"is-success\":\"_2e614a76af494837__is-success\",\"is-error\":\"af00331ae17a0065__is-error\",\"is-action-button-outline\":\"_8ddb8fb33fbf3d38__is-action-button-outline\",\"is-action-button-minimal\":\"_77bbde495a8a0af3__is-action-button-minimal\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,mBAAsC;;;ACDtC,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,0vHAA0vH,CAAC;AACryH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,QAAO,0BAAyB,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,8BAA6B,iBAAgB,oCAAmC,eAAc,iCAAgC,cAAa,iCAAgC,WAAU,8BAA6B,cAAa,gCAA+B,cAAa,iCAAgC,YAAW,8BAA6B,4BAA2B,+CAA8C,4BAA2B,8CAA6C;;;ADE7oB,IAAM,cAAU;AAAA,EACtB,SAAS,cAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAM;AACnD,UAAM,cAAU,wBAAW;AAAA,MAC1B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,WAAO;AAAA,QACN;AAAA,UACC,WAAW,cAAO;AAAA,QACnB;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,10 +40,10 @@ var import_clsx = __toESM(require("clsx"));
|
|
|
40
40
|
var import_icon_button = require("../icon-button/index.cjs");
|
|
41
41
|
|
|
42
42
|
// packages/ui/src/notice/style.module.css
|
|
43
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
43
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='60dd1d4d42']")) {
|
|
44
44
|
const style = document.createElement("style");
|
|
45
|
-
style.setAttribute("data-wp-hash", "
|
|
46
|
-
style.appendChild(document.createTextNode(
|
|
45
|
+
style.setAttribute("data-wp-hash", "60dd1d4d42");
|
|
46
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}"));
|
|
47
47
|
document.head.appendChild(style);
|
|
48
48
|
}
|
|
49
49
|
var style_default = { "notice": "_4145abab73d17514__notice", "icon": "d0a25570cb528528__icon", "title": "b5397fb9d05389e3__title", "description": "_1904b570a89bb815__description", "actions": "_0a1270dcdd79c031__actions", "action-button": "_983740ab855c4e09__action-button", "action-link": "d329e7416d368d31__action-link", "close-icon": "_487e6a5c1375f7dc__close-icon", "is-info": "_531c140826094795__is-info", "is-warning": "ae2e1004697cce95__is-warning", "is-success": "_2e614a76af494837__is-success", "is-error": "af00331ae17a0065__is-error", "is-action-button-outline": "_8ddb8fb33fbf3d38__is-action-button-outline", "is-action-button-minimal": "_77bbde495a8a0af3__is-action-button-minimal" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/notice/close-icon.tsx", "../../src/notice/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport clsx from 'clsx';\nimport { IconButton } from '../icon-button';\nimport type { CloseIconProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The close button for a notice. Renders an icon button with a close icon.\n */\nexport const CloseIcon = forwardRef< HTMLButtonElement, CloseIconProps >(\n\tfunction NoticeCloseIcon(\n\t\t{ className, icon = closeSmall, label = __( 'Dismiss' ), ...props },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<IconButton\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles[ 'close-icon' ], className ) }\n\t\t\t\tvariant=\"minimal\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ttone=\"neutral\"\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\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='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAmB;AACnB,mBAA2B;AAC3B,kBAAiB;AACjB,yBAA2B;;;ACJ3B,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 { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport clsx from 'clsx';\nimport { IconButton } from '../icon-button';\nimport type { CloseIconProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * The close button for a notice. Renders an icon button with a close icon.\n */\nexport const CloseIcon = forwardRef< HTMLButtonElement, CloseIconProps >(\n\tfunction NoticeCloseIcon(\n\t\t{ className, icon = closeSmall, label = __( 'Dismiss' ), ...props },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<IconButton\n\t\t\t\t{ ...props }\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( styles[ 'close-icon' ], className ) }\n\t\t\t\tvariant=\"minimal\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ttone=\"neutral\"\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\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='60dd1d4d42']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"60dd1d4d42\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"notice\":\"_4145abab73d17514__notice\",\"icon\":\"d0a25570cb528528__icon\",\"title\":\"b5397fb9d05389e3__title\",\"description\":\"_1904b570a89bb815__description\",\"actions\":\"_0a1270dcdd79c031__actions\",\"action-button\":\"_983740ab855c4e09__action-button\",\"action-link\":\"d329e7416d368d31__action-link\",\"close-icon\":\"_487e6a5c1375f7dc__close-icon\",\"is-info\":\"_531c140826094795__is-info\",\"is-warning\":\"ae2e1004697cce95__is-warning\",\"is-success\":\"_2e614a76af494837__is-success\",\"is-error\":\"af00331ae17a0065__is-error\",\"is-action-button-outline\":\"_8ddb8fb33fbf3d38__is-action-button-outline\",\"is-action-button-minimal\":\"_77bbde495a8a0af3__is-action-button-minimal\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAmB;AACnB,mBAA2B;AAC3B,kBAAiB;AACjB,yBAA2B;;;ACJ3B,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,0vHAA0vH,CAAC;AACryH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,QAAO,0BAAyB,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,8BAA6B,iBAAgB,oCAAmC,eAAc,iCAAgC,cAAa,iCAAgC,WAAU,8BAA6B,cAAa,gCAA+B,cAAa,iCAAgC,YAAW,8BAA6B,4BAA2B,+CAA8C,4BAA2B,8CAA6C;;;ADWjpB;AANI,IAAM,gBAAY;AAAA,EACxB,SAAS,gBACR,EAAE,WAAW,OAAO,yBAAY,YAAQ,gBAAI,SAAU,GAAG,GAAG,MAAM,GAClE,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACL;AAAA,QACA,eAAY,YAAAA,SAAM,cAAQ,YAAa,GAAG,SAAU;AAAA,QACpD,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["clsx"]
|
|
7
7
|
}
|
|
@@ -38,10 +38,10 @@ var import_clsx = __toESM(require("clsx"));
|
|
|
38
38
|
var import_text = require("../text/index.cjs");
|
|
39
39
|
|
|
40
40
|
// packages/ui/src/notice/style.module.css
|
|
41
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
41
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='60dd1d4d42']")) {
|
|
42
42
|
const style = document.createElement("style");
|
|
43
|
-
style.setAttribute("data-wp-hash", "
|
|
44
|
-
style.appendChild(document.createTextNode(
|
|
43
|
+
style.setAttribute("data-wp-hash", "60dd1d4d42");
|
|
44
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}"));
|
|
45
45
|
document.head.appendChild(style);
|
|
46
46
|
}
|
|
47
47
|
var style_default = { "notice": "_4145abab73d17514__notice", "icon": "d0a25570cb528528__icon", "title": "b5397fb9d05389e3__title", "description": "_1904b570a89bb815__description", "actions": "_0a1270dcdd79c031__actions", "action-button": "_983740ab855c4e09__action-button", "action-link": "d329e7416d368d31__action-link", "close-icon": "_487e6a5c1375f7dc__close-icon", "is-info": "_531c140826094795__is-info", "is-warning": "ae2e1004697cce95__is-warning", "is-success": "_2e614a76af494837__is-success", "is-error": "af00331ae17a0065__is-error", "is-action-button-outline": "_8ddb8fb33fbf3d38__is-action-button-outline", "is-action-button-minimal": "_77bbde495a8a0af3__is-action-button-minimal" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/notice/description.tsx", "../../src/notice/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport type { DescriptionProps } from './types';\nimport { Text } from '../text';\nimport styles from './style.module.css';\n\n/**\n * The description text for a notice.\n */\nexport const Description = forwardRef< HTMLSpanElement, DescriptionProps >(\n\tfunction NoticeDescription( { className, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"body-md\"\n\t\t\t\tclassName={ clsx( styles.description, className ) }\n\t\t\t\t{ ...props }\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='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AAEjB,kBAAqB;;;ACHrB,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 { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport type { DescriptionProps } from './types';\nimport { Text } from '../text';\nimport styles from './style.module.css';\n\n/**\n * The description text for a notice.\n */\nexport const Description = forwardRef< HTMLSpanElement, DescriptionProps >(\n\tfunction NoticeDescription( { className, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"body-md\"\n\t\t\t\tclassName={ clsx( styles.description, className ) }\n\t\t\t\t{ ...props }\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='60dd1d4d42']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"60dd1d4d42\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"notice\":\"_4145abab73d17514__notice\",\"icon\":\"d0a25570cb528528__icon\",\"title\":\"b5397fb9d05389e3__title\",\"description\":\"_1904b570a89bb815__description\",\"actions\":\"_0a1270dcdd79c031__actions\",\"action-button\":\"_983740ab855c4e09__action-button\",\"action-link\":\"d329e7416d368d31__action-link\",\"close-icon\":\"_487e6a5c1375f7dc__close-icon\",\"is-info\":\"_531c140826094795__is-info\",\"is-warning\":\"ae2e1004697cce95__is-warning\",\"is-success\":\"_2e614a76af494837__is-success\",\"is-error\":\"af00331ae17a0065__is-error\",\"is-action-button-outline\":\"_8ddb8fb33fbf3d38__is-action-button-outline\",\"is-action-button-minimal\":\"_77bbde495a8a0af3__is-action-button-minimal\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AAEjB,kBAAqB;;;ACHrB,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,0vHAA0vH,CAAC;AACryH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,QAAO,0BAAyB,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,8BAA6B,iBAAgB,oCAAmC,eAAc,iCAAgC,cAAa,iCAAgC,WAAU,8BAA6B,cAAa,gCAA+B,cAAa,iCAAgC,YAAW,8BAA6B,4BAA2B,+CAA8C,4BAA2B,8CAA6C;;;ADMjpB;AAHI,IAAM,kBAAc;AAAA,EAC1B,SAAS,kBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAM;AAC1D,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,eAAY,YAAAA,SAAM,cAAO,aAAa,SAAU;AAAA,QAC9C,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["clsx"]
|
|
7
7
|
}
|
package/build/notice/root.cjs
CHANGED
|
@@ -50,10 +50,10 @@ if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !docum
|
|
|
50
50
|
var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
|
|
51
51
|
|
|
52
52
|
// packages/ui/src/notice/style.module.css
|
|
53
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
53
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='60dd1d4d42']")) {
|
|
54
54
|
const style = document.createElement("style");
|
|
55
|
-
style.setAttribute("data-wp-hash", "
|
|
56
|
-
style.appendChild(document.createTextNode(
|
|
55
|
+
style.setAttribute("data-wp-hash", "60dd1d4d42");
|
|
56
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}"));
|
|
57
57
|
document.head.appendChild(style);
|
|
58
58
|
}
|
|
59
59
|
var style_default = { "notice": "_4145abab73d17514__notice", "icon": "d0a25570cb528528__icon", "title": "b5397fb9d05389e3__title", "description": "_1904b570a89bb815__description", "actions": "_0a1270dcdd79c031__actions", "action-button": "_983740ab855c4e09__action-button", "action-link": "d329e7416d368d31__action-link", "close-icon": "_487e6a5c1375f7dc__close-icon", "is-info": "_531c140826094795__is-info", "is-warning": "ae2e1004697cce95__is-warning", "is-success": "_2e614a76af494837__is-success", "is-error": "af00331ae17a0065__is-error", "is-action-button-outline": "_8ddb8fb33fbf3d38__is-action-button-outline", "is-action-button-minimal": "_77bbde495a8a0af3__is-action-button-minimal" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/notice/root.tsx", "../../src/utils/css/resets.module.css", "../../src/notice/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { speak } from '@wordpress/a11y';\nimport { forwardRef, renderToString, useEffect } from '@wordpress/element';\nimport { info, published, error, caution } from '@wordpress/icons';\nimport { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { Icon } from '../icon';\nimport resetStyles from '../utils/css/resets.module.css';\nimport type { NoticeIntent, RootProps } from './types';\nimport type { IconProps } from '../icon/types';\nimport styles from './style.module.css';\n\nconst icons: { [ key in NoticeIntent ]: IconProps[ 'icon' ] | null } = {\n\tneutral: null,\n\tinfo,\n\twarning: caution,\n\tsuccess: published,\n\terror,\n};\n\n/**\n * Returns the default politeness level based on the notice intent.\n * Error uses 'assertive' for urgent announcements, others use 'polite'.\n */\nfunction getDefaultPoliteness( intent: NoticeIntent ): 'polite' | 'assertive' {\n\treturn intent === 'error' ? 'assertive' : 'polite';\n}\n\n/**\n * Safely converts a message to a string for screen reader announcement.\n * Returns undefined if the message can't be safely serialized.\n */\nfunction safeRenderToString( message: RootProps[ 'spokenMessage' ] ) {\n\tif ( ! message ) {\n\t\treturn undefined;\n\t}\n\tif ( typeof message === 'string' ) {\n\t\treturn message;\n\t}\n\ttry {\n\t\treturn renderToString( message );\n\t} catch {\n\t\t// If renderToString fails (e.g., due to complex components like Tooltip),\n\t\t// return undefined and skip the announcement\n\t\treturn undefined;\n\t}\n}\n\n/**\n * Custom hook which announces the message with the given politeness.\n */\nfunction useSpokenMessage(\n\tmessage: RootProps[ 'spokenMessage' ],\n\tpoliteness: 'polite' | 'assertive'\n) {\n\tconst spokenMessage = safeRenderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\n/**\n * A notice component that communicates system status and provides actions.\n *\n * ```jsx\n * import { Notice } from '@wordpress/ui';\n *\n * function MyComponent() {\n * \treturn (\n * \t\t<Notice.Root intent=\"info\">\n * \t\t\t<Notice.Title>Heading</Notice.Title>\n * \t\t\t<Notice.Description>Body text</Notice.Description>\n * \t\t\t<Notice.Actions>\n * \t\t\t\t<Notice.ActionButton>Action</Notice.ActionButton>\n * \t\t\t</Notice.Actions>\n * \t\t\t<Notice.CloseIcon onClick={() => {}} />\n * \t\t</Notice.Root>\n * \t);\n * }\n * ```\n */\nexport const Root = forwardRef< HTMLDivElement, RootProps >( function Notice(\n\t{\n\t\tintent = 'neutral',\n\t\tchildren,\n\t\ticon,\n\t\tspokenMessage = children,\n\t\tpoliteness = getDefaultPoliteness( intent ),\n\t\trender,\n\t\t...restProps\n\t},\n\tref\n) {\n\t// Announce to screen readers via speak() API - no role attribute needed\n\t// as it would cause double announcements\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\tconst iconElement = icon === null ? null : icon ?? icons[ intent ];\n\n\tconst mergedClassName = clsx(\n\t\tstyles.notice,\n\t\tstyles[ `is-${ intent }` ],\n\t\tresetStyles[ 'box-sizing' ]\n\t);\n\n\tconst element = useRender( {\n\t\tdefaultTagName: 'div',\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >(\n\t\t\t{\n\t\t\t\tclassName: mergedClassName,\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t{ iconElement && (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tclassName={ styles.icon }\n\t\t\t\t\t\t\t\ticon={ iconElement }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\trestProps\n\t\t),\n\t} );\n\n\treturn element;\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e3ae230cea']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e3ae230cea\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAsB;AACtB,qBAAsD;AACtD,mBAAgD;AAChD,mBAAsC;AACtC,kBAAiB;AACjB,kBAAqB;;;ACLrB,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,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 { speak } from '@wordpress/a11y';\nimport { forwardRef, renderToString, useEffect } from '@wordpress/element';\nimport { info, published, error, caution } from '@wordpress/icons';\nimport { useRender, mergeProps } from '@base-ui/react';\nimport clsx from 'clsx';\nimport { Icon } from '../icon';\nimport resetStyles from '../utils/css/resets.module.css';\nimport type { NoticeIntent, RootProps } from './types';\nimport type { IconProps } from '../icon/types';\nimport styles from './style.module.css';\n\nconst icons: { [ key in NoticeIntent ]: IconProps[ 'icon' ] | null } = {\n\tneutral: null,\n\tinfo,\n\twarning: caution,\n\tsuccess: published,\n\terror,\n};\n\n/**\n * Returns the default politeness level based on the notice intent.\n * Error uses 'assertive' for urgent announcements, others use 'polite'.\n */\nfunction getDefaultPoliteness( intent: NoticeIntent ): 'polite' | 'assertive' {\n\treturn intent === 'error' ? 'assertive' : 'polite';\n}\n\n/**\n * Safely converts a message to a string for screen reader announcement.\n * Returns undefined if the message can't be safely serialized.\n */\nfunction safeRenderToString( message: RootProps[ 'spokenMessage' ] ) {\n\tif ( ! message ) {\n\t\treturn undefined;\n\t}\n\tif ( typeof message === 'string' ) {\n\t\treturn message;\n\t}\n\ttry {\n\t\treturn renderToString( message );\n\t} catch {\n\t\t// If renderToString fails (e.g., due to complex components like Tooltip),\n\t\t// return undefined and skip the announcement\n\t\treturn undefined;\n\t}\n}\n\n/**\n * Custom hook which announces the message with the given politeness.\n */\nfunction useSpokenMessage(\n\tmessage: RootProps[ 'spokenMessage' ],\n\tpoliteness: 'polite' | 'assertive'\n) {\n\tconst spokenMessage = safeRenderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\n/**\n * A notice component that communicates system status and provides actions.\n *\n * ```jsx\n * import { Notice } from '@wordpress/ui';\n *\n * function MyComponent() {\n * \treturn (\n * \t\t<Notice.Root intent=\"info\">\n * \t\t\t<Notice.Title>Heading</Notice.Title>\n * \t\t\t<Notice.Description>Body text</Notice.Description>\n * \t\t\t<Notice.Actions>\n * \t\t\t\t<Notice.ActionButton>Action</Notice.ActionButton>\n * \t\t\t</Notice.Actions>\n * \t\t\t<Notice.CloseIcon onClick={() => {}} />\n * \t\t</Notice.Root>\n * \t);\n * }\n * ```\n */\nexport const Root = forwardRef< HTMLDivElement, RootProps >( function Notice(\n\t{\n\t\tintent = 'neutral',\n\t\tchildren,\n\t\ticon,\n\t\tspokenMessage = children,\n\t\tpoliteness = getDefaultPoliteness( intent ),\n\t\trender,\n\t\t...restProps\n\t},\n\tref\n) {\n\t// Announce to screen readers via speak() API - no role attribute needed\n\t// as it would cause double announcements\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\tconst iconElement = icon === null ? null : icon ?? icons[ intent ];\n\n\tconst mergedClassName = clsx(\n\t\tstyles.notice,\n\t\tstyles[ `is-${ intent }` ],\n\t\tresetStyles[ 'box-sizing' ]\n\t);\n\n\tconst element = useRender( {\n\t\tdefaultTagName: 'div',\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >(\n\t\t\t{\n\t\t\t\tclassName: mergedClassName,\n\t\t\t\tchildren: (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t{ iconElement && (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tclassName={ styles.icon }\n\t\t\t\t\t\t\t\ticon={ iconElement }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t),\n\t\t\t},\n\t\t\trestProps\n\t\t),\n\t} );\n\n\treturn element;\n} );\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e3ae230cea']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e3ae230cea\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='60dd1d4d42']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"60dd1d4d42\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"notice\":\"_4145abab73d17514__notice\",\"icon\":\"d0a25570cb528528__icon\",\"title\":\"b5397fb9d05389e3__title\",\"description\":\"_1904b570a89bb815__description\",\"actions\":\"_0a1270dcdd79c031__actions\",\"action-button\":\"_983740ab855c4e09__action-button\",\"action-link\":\"d329e7416d368d31__action-link\",\"close-icon\":\"_487e6a5c1375f7dc__close-icon\",\"is-info\":\"_531c140826094795__is-info\",\"is-warning\":\"ae2e1004697cce95__is-warning\",\"is-success\":\"_2e614a76af494837__is-success\",\"is-error\":\"af00331ae17a0065__is-error\",\"is-action-button-outline\":\"_8ddb8fb33fbf3d38__is-action-button-outline\",\"is-action-button-minimal\":\"_77bbde495a8a0af3__is-action-button-minimal\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAsB;AACtB,qBAAsD;AACtD,mBAAgD;AAChD,mBAAsC;AACtC,kBAAiB;AACjB,kBAAqB;;;ACLrB,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,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,0vHAA0vH,CAAC;AACryH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,QAAO,0BAAyB,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,8BAA6B,iBAAgB,oCAAmC,eAAc,iCAAgC,cAAa,iCAAgC,WAAU,8BAA6B,cAAa,gCAA+B,cAAa,iCAAgC,YAAW,8BAA6B,4BAA2B,+CAA8C,4BAA2B,8CAA6C;;;AF6G/oB;AAxGL,IAAM,QAAiE;AAAA,EACtE,SAAS;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AACD;AAMA,SAAS,qBAAsB,QAA+C;AAC7E,SAAO,WAAW,UAAU,cAAc;AAC3C;AAMA,SAAS,mBAAoB,SAAwC;AACpE,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AACA,MAAK,OAAO,YAAY,UAAW;AAClC,WAAO;AAAA,EACR;AACA,MAAI;AACH,eAAO,+BAAgB,OAAQ;AAAA,EAChC,QAAQ;AAGP,WAAO;AAAA,EACR;AACD;AAKA,SAAS,iBACR,SACA,YACC;AACD,QAAM,gBAAgB,mBAAoB,OAAQ;AAElD,gCAAW,MAAM;AAChB,QAAK,eAAgB;AACpB,6BAAO,eAAe,UAAW;AAAA,IAClC;AAAA,EACD,GAAG,CAAE,eAAe,UAAW,CAAE;AAClC;AAsBO,IAAM,WAAO,2BAAyC,SAAS,OACrE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa,qBAAsB,MAAO;AAAA,EAC1C;AAAA,EACA,GAAG;AACJ,GACA,KACC;AAGD,mBAAkB,eAAe,UAAW;AAE5C,QAAM,cAAc,SAAS,OAAO,OAAO,QAAQ,MAAO,MAAO;AAEjE,QAAM,sBAAkB,YAAAA;AAAA,IACvB,cAAO;AAAA,IACP,cAAQ,MAAO,MAAO,EAAG;AAAA,IACzB,eAAa,YAAa;AAAA,EAC3B;AAEA,QAAM,cAAU,wBAAW;AAAA,IAC1B,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,WAAO;AAAA,MACN;AAAA,QACC,WAAW;AAAA,QACX,UACC,4EACG;AAAA;AAAA,UACA,eACD;AAAA,YAAC;AAAA;AAAA,cACA,WAAY,cAAO;AAAA,cACnB,MAAO;AAAA;AAAA,UACR;AAAA,WAEF;AAAA,MAEF;AAAA,MACA;AAAA,IACD;AAAA,EACD,CAAE;AAEF,SAAO;AACR,CAAE;",
|
|
6
6
|
"names": ["clsx"]
|
|
7
7
|
}
|
package/build/notice/title.cjs
CHANGED
|
@@ -38,10 +38,10 @@ var import_clsx = __toESM(require("clsx"));
|
|
|
38
38
|
var import_text = require("../text/index.cjs");
|
|
39
39
|
|
|
40
40
|
// packages/ui/src/notice/style.module.css
|
|
41
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
41
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='60dd1d4d42']")) {
|
|
42
42
|
const style = document.createElement("style");
|
|
43
|
-
style.setAttribute("data-wp-hash", "
|
|
44
|
-
style.appendChild(document.createTextNode(
|
|
43
|
+
style.setAttribute("data-wp-hash", "60dd1d4d42");
|
|
44
|
+
style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}"));
|
|
45
45
|
document.head.appendChild(style);
|
|
46
46
|
}
|
|
47
47
|
var style_default = { "notice": "_4145abab73d17514__notice", "icon": "d0a25570cb528528__icon", "title": "b5397fb9d05389e3__title", "description": "_1904b570a89bb815__description", "actions": "_0a1270dcdd79c031__actions", "action-button": "_983740ab855c4e09__action-button", "action-link": "d329e7416d368d31__action-link", "close-icon": "_487e6a5c1375f7dc__close-icon", "is-info": "_531c140826094795__is-info", "is-warning": "ae2e1004697cce95__is-warning", "is-success": "_2e614a76af494837__is-success", "is-error": "af00331ae17a0065__is-error", "is-action-button-outline": "_8ddb8fb33fbf3d38__is-action-button-outline", "is-action-button-minimal": "_77bbde495a8a0af3__is-action-button-minimal" };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/notice/title.tsx", "../../src/notice/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport type { TitleProps } from './types';\nimport { Text } from '../text';\nimport styles from './style.module.css';\n\n/**\n * A short heading that communicates the main message of the notice.\n */\nexport const Title = forwardRef< HTMLSpanElement, TitleProps >(\n\tfunction NoticeTitle( { className, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"heading-md\"\n\t\t\t\tclassName={ clsx( styles.title, className ) }\n\t\t\t\t{ ...props }\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='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AAEjB,kBAAqB;;;ACHrB,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 { forwardRef } from '@wordpress/element';\nimport clsx from 'clsx';\nimport type { TitleProps } from './types';\nimport { Text } from '../text';\nimport styles from './style.module.css';\n\n/**\n * A short heading that communicates the main message of the notice.\n */\nexport const Title = forwardRef< HTMLSpanElement, TitleProps >(\n\tfunction NoticeTitle( { className, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"heading-md\"\n\t\t\t\tclassName={ clsx( styles.title, className ) }\n\t\t\t\t{ ...props }\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='60dd1d4d42']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"60dd1d4d42\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._4145abab73d17514__notice{--icon-height:24px;--text-vertical-padding:calc((var(--icon-height) - var(--wpds-typography-line-height-sm, 20px))/2);--wp-ui-notice-background-color:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-neutral,#dbdbdb);--wp-ui-notice-text-color:var(--wpds-color-fg-content-neutral,#1e1e1e);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-neutral,#1e1e1e);align-items:start;background-color:var(--wp-ui-notice-background-color);border:1px solid var(--wp-ui-notice-border-color);border-radius:var(--wpds-border-radius-lg,8px);container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;padding:var(--wpds-dimension-padding-md,12px)}.d0a25570cb528528__icon{color:var(--wp-ui-notice-decorative-icon-color);grid-column:1;grid-row:1;margin-inline-end:var(--wpds-dimension-gap-xs,4px)}._1904b570a89bb815__description,.b5397fb9d05389e3__title{color:var(--wp-ui-notice-text-color);grid-column:2;padding-block:var(--text-vertical-padding)}._1904b570a89bb815__description{text-wrap:pretty}._0a1270dcdd79c031__actions{display:flex;flex-wrap:wrap;gap:var(--wpds-dimension-gap-md,12px);grid-column:2}._4145abab73d17514__notice:has(._1904b570a89bb815__description) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions{margin-block-start:var(--wpds-dimension-gap-sm,8px)}._983740ab855c4e09__action-button{flex-shrink:0}.d329e7416d368d31__action-link{flex-shrink:0;&:not(:first-child){margin-inline-start:var(--wpds-dimension-gap-xs,4px)}&:not(:last-child){margin-inline-end:var(--wpds-dimension-gap-xs,4px)}}._487e6a5c1375f7dc__close-icon{grid-column:3;grid-row:1;margin-inline-start:var(--wpds-dimension-gap-xs,4px)}._531c140826094795__is-info{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-info-weak,#f3f9ff);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-info,#9fbcdc);--wp-ui-notice-text-color:var(--wpds-color-fg-content-info,#001b4f);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-info-weak,#006bd7)}.ae2e1004697cce95__is-warning{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-warning-weak,#fff7e1);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-warning,#d0b481);--wp-ui-notice-text-color:var(--wpds-color-fg-content-warning,#2e1900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-warning-weak,#926300)}._2e614a76af494837__is-success{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-success-weak,#ebffed);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-success,#8ac894);--wp-ui-notice-text-color:var(--wpds-color-fg-content-success,#002900);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-success-weak,#008030)}.af00331ae17a0065__is-error{--wp-ui-notice-background-color:var(--wpds-color-bg-surface-error-weak,#fff6f5);--wp-ui-notice-border-color:var(--wpds-color-stroke-surface-error,#daa39b);--wp-ui-notice-text-color:var(--wpds-color-fg-content-error,#470000);--wp-ui-notice-decorative-icon-color:var(--wpds-color-fg-content-error-weak,#cc1818)}@container (max-width: 320px){._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._0a1270dcdd79c031__actions,._4145abab73d17514__notice:has(.b5397fb9d05389e3__title) ._1904b570a89bb815__description{grid-column:1/3}}}@layer wp-ui-compositions{.d329e7416d368d31__action-link{margin-block:auto}._487e6a5c1375f7dc__close-icon,._983740ab855c4e09__action-button:is(._8ddb8fb33fbf3d38__is-action-button-outline,._77bbde495a8a0af3__is-action-button-minimal){--wp-ui-button-background-color-active:color-mix(in srgb,#0000 50%,var(--wpds-color-bg-interactive-neutral-weak-active,#ededed))}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"notice\":\"_4145abab73d17514__notice\",\"icon\":\"d0a25570cb528528__icon\",\"title\":\"b5397fb9d05389e3__title\",\"description\":\"_1904b570a89bb815__description\",\"actions\":\"_0a1270dcdd79c031__actions\",\"action-button\":\"_983740ab855c4e09__action-button\",\"action-link\":\"d329e7416d368d31__action-link\",\"close-icon\":\"_487e6a5c1375f7dc__close-icon\",\"is-info\":\"_531c140826094795__is-info\",\"is-warning\":\"ae2e1004697cce95__is-warning\",\"is-success\":\"_2e614a76af494837__is-success\",\"is-error\":\"af00331ae17a0065__is-error\",\"is-action-button-outline\":\"_8ddb8fb33fbf3d38__is-action-button-outline\",\"is-action-button-minimal\":\"_77bbde495a8a0af3__is-action-button-minimal\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,kBAAiB;AAEjB,kBAAqB;;;ACHrB,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,0vHAA0vH,CAAC;AACryH,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,QAAO,0BAAyB,SAAQ,2BAA0B,eAAc,kCAAiC,WAAU,8BAA6B,iBAAgB,oCAAmC,eAAc,iCAAgC,cAAa,iCAAgC,WAAU,8BAA6B,cAAa,gCAA+B,cAAa,iCAAgC,YAAW,8BAA6B,4BAA2B,+CAA8C,4BAA2B,8CAA6C;;;ADMjpB;AAHI,IAAM,YAAQ;AAAA,EACpB,SAAS,YAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAM;AACpD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,eAAY,YAAAA,SAAM,cAAO,OAAO,SAAU;AAAA,QACxC,GAAG;AAAA;AAAA,IACN;AAAA,EAEF;AACD;",
|
|
6
6
|
"names": ["clsx"]
|
|
7
7
|
}
|
package/build/popover/arrow.cjs
CHANGED
|
@@ -38,13 +38,13 @@ var import_clsx = __toESM(require("clsx"));
|
|
|
38
38
|
var import_element = require("@wordpress/element");
|
|
39
39
|
|
|
40
40
|
// packages/ui/src/popover/style.module.css
|
|
41
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
41
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='39e546228c']")) {
|
|
42
42
|
const style = document.createElement("style");
|
|
43
|
-
style.setAttribute("data-wp-hash", "
|
|
44
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides
|
|
43
|
+
style.setAttribute("data-wp-hash", "39e546228c");
|
|
44
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._84e8f597bcf683b8__popup){display:block}@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._39506c52ee874f3b__default{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);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);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#707070)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
|
|
45
45
|
document.head.appendChild(style);
|
|
46
46
|
}
|
|
47
|
-
var style_default = { "positioner": "_10450722b9676f78__positioner", "
|
|
47
|
+
var style_default = { "popup": "_84e8f597bcf683b8__popup", "positioner": "_10450722b9676f78__positioner", "default": "_39506c52ee874f3b__default", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "description": "_42cb9ed02a2f0782__description", "backdrop": "e4d544aa033f05c6__backdrop" };
|
|
48
48
|
|
|
49
49
|
// packages/ui/src/popover/arrow.tsx
|
|
50
50
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/popover/arrow.tsx", "../../src/popover/style.module.css"],
|
|
4
|
-
"sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { ArrowProps } from './types';\n\nfunction DefaultArrowSvg( props: React.ComponentProps< 'svg' > ) {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"20\"\n\t\t\theight=\"10\"\n\t\t\tviewBox=\"0 0 20 10\"\n\t\t\tfill=\"none\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<path\n\t\t\t\td=\"M20 10H0V8h1.465a4 4 0 0 0 2.676-1.027l5.19-4.388c.378-.341.96-.341 1.338 0l5.19 4.388A4 4 0 0 0 18.535 8H20z\"\n\t\t\t\tclassName={ styles[ 'arrow-fill' ] }\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M10 3.097 4.81 7.486A5 5 0 0 1 1.465 8.77H0V8h1.465a4 4 0 0 0 2.676-1.027l5.19-4.388c.378-.341.96-.341 1.338 0l5.19 4.388A4 4 0 0 0 18.535 8H20v.77h-1.465a5 5 0 0 1-3.345-1.284z\"\n\t\t\t\tclassName={ styles[ 'arrow-stroke' ] }\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\n/**\n * Renders an optional arrow element that points toward the anchor.\n *\n * Must be placed inside `Popover.Popup`. The arrow automatically rotates\n * to match the current placement side.\n */\nconst Arrow = forwardRef< HTMLDivElement, ArrowProps >( function PopoverArrow(\n\t{ children, className, ...props },\n\tref\n) {\n\treturn (\n\t\t<_Popover.Arrow\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( styles.arrow, className ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? <DefaultArrowSvg /> }\n\t\t</_Popover.Arrow>\n\t);\n} );\n\nexport { Arrow };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,kBAAiB;AACjB,qBAA2B;;;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 { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { ArrowProps } from './types';\n\nfunction DefaultArrowSvg( props: React.ComponentProps< 'svg' > ) {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"20\"\n\t\t\theight=\"10\"\n\t\t\tviewBox=\"0 0 20 10\"\n\t\t\tfill=\"none\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<path\n\t\t\t\td=\"M20 10H0V8h1.465a4 4 0 0 0 2.676-1.027l5.19-4.388c.378-.341.96-.341 1.338 0l5.19 4.388A4 4 0 0 0 18.535 8H20z\"\n\t\t\t\tclassName={ styles[ 'arrow-fill' ] }\n\t\t\t/>\n\t\t\t<path\n\t\t\t\td=\"M10 3.097 4.81 7.486A5 5 0 0 1 1.465 8.77H0V8h1.465a4 4 0 0 0 2.676-1.027l5.19-4.388c.378-.341.96-.341 1.338 0l5.19 4.388A4 4 0 0 0 18.535 8H20v.77h-1.465a5 5 0 0 1-3.345-1.284z\"\n\t\t\t\tclassName={ styles[ 'arrow-stroke' ] }\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n\n/**\n * Renders an optional arrow element that points toward the anchor.\n *\n * Must be placed inside `Popover.Popup`. The arrow automatically rotates\n * to match the current placement side.\n */\nconst Arrow = forwardRef< HTMLDivElement, ArrowProps >( function PopoverArrow(\n\t{ children, className, ...props },\n\tref\n) {\n\treturn (\n\t\t<_Popover.Arrow\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( styles.arrow, className ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? <DefaultArrowSvg /> }\n\t\t</_Popover.Arrow>\n\t);\n} );\n\nexport { Arrow };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='39e546228c']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"39e546228c\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._84e8f597bcf683b8__popup){display:block}@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._39506c52ee874f3b__default{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);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);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#707070)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"popup\":\"_84e8f597bcf683b8__popup\",\"positioner\":\"_10450722b9676f78__positioner\",\"default\":\"_39506c52ee874f3b__default\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"description\":\"_42cb9ed02a2f0782__description\",\"backdrop\":\"e4d544aa033f05c6__backdrop\"};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,kBAAiB;AACjB,qBAA2B;;;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,olDAAgmD,CAAC;AAC3oD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,cAAa,iCAAgC,WAAU,8BAA6B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,6BAA4B;;;ADE3V;AAFF,SAAS,gBAAiB,OAAuC;AAChE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACH,GAAG;AAAA,MAEL;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,GAAE;AAAA,YACF,WAAY,cAAQ,YAAa;AAAA;AAAA,QAClC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,GAAE;AAAA,YACF,WAAY,cAAQ,cAAe;AAAA;AAAA,QACpC;AAAA;AAAA;AAAA,EACD;AAEF;AAQA,IAAM,YAAQ,2BAA0C,SAAS,aAChE,EAAE,UAAU,WAAW,GAAG,MAAM,GAChC,KACC;AACD,SACC;AAAA,IAAC,eAAAA,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA,eAAY,YAAAC,SAAM,cAAO,OAAO,SAAU;AAAA,MACxC,GAAG;AAAA,MAEH,sBAAY,4CAAC,mBAAgB;AAAA;AAAA,EAChC;AAEF,CAAE;",
|
|
6
6
|
"names": ["_Popover", "clsx"]
|
|
7
7
|
}
|
|
@@ -25,6 +25,7 @@ __export(context_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(context_exports);
|
|
27
27
|
var import_element = require("@wordpress/element");
|
|
28
|
+
var import_use_schedule_validation = require("../utils/use-schedule-validation.cjs");
|
|
28
29
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
30
|
var VALIDATION_ENABLED = process.env.NODE_ENV !== "production";
|
|
30
31
|
var PopoverValidationContext = VALIDATION_ENABLED ? (0, import_element.createContext)(null) : null;
|
|
@@ -39,14 +40,7 @@ function PopoverValidationProviderDev({
|
|
|
39
40
|
children
|
|
40
41
|
}) {
|
|
41
42
|
const titleElementRef = (0, import_element.useRef)(null);
|
|
42
|
-
const
|
|
43
|
-
titleElementRef.current = element;
|
|
44
|
-
}, []);
|
|
45
|
-
const contextValue = (0, import_element.useMemo)(
|
|
46
|
-
() => ({ registerTitle }),
|
|
47
|
-
[registerTitle]
|
|
48
|
-
);
|
|
49
|
-
(0, import_element.useEffect)(() => {
|
|
43
|
+
const scheduleValidation = (0, import_use_schedule_validation.useScheduleValidation)(() => {
|
|
50
44
|
const titleElement = titleElementRef.current;
|
|
51
45
|
if (!titleElement) {
|
|
52
46
|
throw new Error(
|
|
@@ -59,7 +53,25 @@ function PopoverValidationProviderDev({
|
|
|
59
53
|
"Popover: <Popover.Title> cannot be empty. Provide meaningful text content for the popover title."
|
|
60
54
|
);
|
|
61
55
|
}
|
|
62
|
-
}
|
|
56
|
+
});
|
|
57
|
+
const registerTitle = (0, import_element.useCallback)(
|
|
58
|
+
(element) => {
|
|
59
|
+
titleElementRef.current = element;
|
|
60
|
+
scheduleValidation();
|
|
61
|
+
return () => {
|
|
62
|
+
titleElementRef.current = null;
|
|
63
|
+
scheduleValidation();
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
[scheduleValidation]
|
|
67
|
+
);
|
|
68
|
+
(0, import_element.useEffect)(() => {
|
|
69
|
+
scheduleValidation();
|
|
70
|
+
}, [scheduleValidation]);
|
|
71
|
+
const contextValue = (0, import_element.useMemo)(
|
|
72
|
+
() => ({ registerTitle }),
|
|
73
|
+
[registerTitle]
|
|
74
|
+
);
|
|
63
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverValidationContext.Provider, { value: contextValue, children });
|
|
64
76
|
}
|
|
65
77
|
function PopoverValidationProviderProd({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/popover/context.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\n\n/**\n * Whether validation is enabled. This is a build-time constant that allows\n * bundlers to tree-shake all validation code in production builds.\n */\nconst VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';\n\ntype PopoverValidationContextType = {\n\tregisterTitle: ( element: HTMLElement | null ) => void;\n};\n\nconst PopoverValidationContext = VALIDATION_ENABLED\n\t? createContext< PopoverValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< PopoverValidationContextType | null > );\n\nfunction usePopoverValidationContextDev() {\n\treturn useContext( PopoverValidationContext );\n}\n\nfunction usePopoverValidationContextProd() {\n\treturn null;\n}\n\n/**\n * Hook to access the popover validation context.\n * Returns null in production or if not within a Popover.Popup.\n */\nexport const usePopoverValidationContext = VALIDATION_ENABLED\n\t? usePopoverValidationContextDev\n\t: usePopoverValidationContextProd;\n\n/**\n * Development-only provider that tracks whether Popover.Title is rendered.\n */\nfunction PopoverValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst titleElementRef = useRef< HTMLElement | null >( null );\n\n\tconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOO;
|
|
4
|
+
"sourcesContent": ["import {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { useScheduleValidation } from '../utils/use-schedule-validation';\n\n/**\n * Whether validation is enabled. This is a build-time constant that allows\n * bundlers to tree-shake all validation code in production builds.\n */\nconst VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';\n\ntype PopoverValidationContextType = {\n\tregisterTitle: ( element: HTMLElement | null ) => () => void;\n};\n\nconst PopoverValidationContext = VALIDATION_ENABLED\n\t? createContext< PopoverValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< PopoverValidationContextType | null > );\n\nfunction usePopoverValidationContextDev() {\n\treturn useContext( PopoverValidationContext );\n}\n\nfunction usePopoverValidationContextProd() {\n\treturn null;\n}\n\n/**\n * Hook to access the popover validation context.\n * Returns null in production or if not within a Popover.Popup.\n */\nexport const usePopoverValidationContext = VALIDATION_ENABLED\n\t? usePopoverValidationContextDev\n\t: usePopoverValidationContextProd;\n\n/**\n * Development-only provider that tracks whether Popover.Title is rendered.\n */\nfunction PopoverValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst titleElementRef = useRef< HTMLElement | null >( null );\n\n\tconst scheduleValidation = useScheduleValidation( () => {\n\t\tconst titleElement = titleElementRef.current;\n\n\t\tif ( ! titleElement ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Popover: Missing <Popover.Title>. ' +\n\t\t\t\t\t'For accessibility, every popover requires a title. ' +\n\t\t\t\t\t'If needed, the title can be visually hidden but must not be omitted.'\n\t\t\t);\n\t\t}\n\n\t\tconst textContent = titleElement.textContent?.trim();\n\t\tif ( ! textContent ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Popover: <Popover.Title> cannot be empty. ' +\n\t\t\t\t\t'Provide meaningful text content for the popover title.'\n\t\t\t);\n\t\t}\n\t} );\n\n\tconst registerTitle = useCallback(\n\t\t( element: HTMLElement | null ) => {\n\t\t\ttitleElementRef.current = element;\n\t\t\tscheduleValidation();\n\n\t\t\treturn () => {\n\t\t\t\ttitleElementRef.current = null;\n\t\t\t\tscheduleValidation();\n\t\t\t};\n\t\t},\n\t\t[ scheduleValidation ]\n\t);\n\n\t// Schedule an initial validation on mount to catch missing titles\n\t// (when no Title component is rendered, registerTitle is never called).\n\tuseEffect( () => {\n\t\tscheduleValidation();\n\t}, [ scheduleValidation ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( { registerTitle } ),\n\t\t[ registerTitle ]\n\t);\n\n\treturn (\n\t\t<PopoverValidationContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</PopoverValidationContext.Provider>\n\t);\n}\n\nfunction PopoverValidationProviderProd( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\treturn <>{ children }</>;\n}\n\n/**\n * Provider component that validates Popover.Title presence in development mode.\n * In production, this component is a no-op and just renders children.\n */\nexport const PopoverValidationProvider = VALIDATION_ENABLED\n\t? PopoverValidationProviderDev\n\t: PopoverValidationProviderProd;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOO;AACP,qCAAsC;AAuFpC;AAjFF,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAMpD,IAAM,2BAA2B,yBAC9B,8BAAsD,IAAK,IACzD;AAEL,SAAS,iCAAiC;AACzC,aAAO,2BAAY,wBAAyB;AAC7C;AAEA,SAAS,kCAAkC;AAC1C,SAAO;AACR;AAMO,IAAM,8BAA8B,qBACxC,iCACA;AAKH,SAAS,6BAA8B;AAAA,EACtC;AACD,GAEI;AACH,QAAM,sBAAkB,uBAA8B,IAAK;AAE3D,QAAM,yBAAqB,sDAAuB,MAAM;AACvD,UAAM,eAAe,gBAAgB;AAErC,QAAK,CAAE,cAAe;AACrB,YAAM,IAAI;AAAA,QACT;AAAA,MAGD;AAAA,IACD;AAEA,UAAM,cAAc,aAAa,aAAa,KAAK;AACnD,QAAK,CAAE,aAAc;AACpB,YAAM,IAAI;AAAA,QACT;AAAA,MAED;AAAA,IACD;AAAA,EACD,CAAE;AAEF,QAAM,oBAAgB;AAAA,IACrB,CAAE,YAAiC;AAClC,sBAAgB,UAAU;AAC1B,yBAAmB;AAEnB,aAAO,MAAM;AACZ,wBAAgB,UAAU;AAC1B,2BAAmB;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,kBAAmB;AAAA,EACtB;AAIA,gCAAW,MAAM;AAChB,uBAAmB;AAAA,EACpB,GAAG,CAAE,kBAAmB,CAAE;AAE1B,QAAM,mBAAe;AAAA,IACpB,OAAQ,EAAE,cAAc;AAAA,IACxB,CAAE,aAAc;AAAA,EACjB;AAEA,SACC,4CAAC,yBAAyB,UAAzB,EAAkC,OAAQ,cACxC,UACH;AAEF;AAEA,SAAS,8BAA+B;AAAA,EACvC;AACD,GAEI;AACH,SAAO,2EAAI,UAAU;AACtB;AAMO,IAAM,4BAA4B,qBACtC,+BACA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,13 +39,13 @@ var import_element = require("@wordpress/element");
|
|
|
39
39
|
var import_text = require("../text/index.cjs");
|
|
40
40
|
|
|
41
41
|
// packages/ui/src/popover/style.module.css
|
|
42
|
-
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='
|
|
42
|
+
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='39e546228c']")) {
|
|
43
43
|
const style = document.createElement("style");
|
|
44
|
-
style.setAttribute("data-wp-hash", "
|
|
45
|
-
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides
|
|
44
|
+
style.setAttribute("data-wp-hash", "39e546228c");
|
|
45
|
+
style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;[data-wpds-theme-provider-id]:has(>._84e8f597bcf683b8__popup){display:block}@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._39506c52ee874f3b__default{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);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);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e4e4e4)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#707070)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
|
|
46
46
|
document.head.appendChild(style);
|
|
47
47
|
}
|
|
48
|
-
var style_default = { "positioner": "_10450722b9676f78__positioner", "
|
|
48
|
+
var style_default = { "popup": "_84e8f597bcf683b8__popup", "positioner": "_10450722b9676f78__positioner", "default": "_39506c52ee874f3b__default", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "description": "_42cb9ed02a2f0782__description", "backdrop": "e4d544aa033f05c6__backdrop" };
|
|
49
49
|
|
|
50
50
|
// packages/ui/src/popover/description.tsx
|
|
51
51
|
var import_jsx_runtime = require("react/jsx-runtime");
|