@wordpress/components 30.3.0 → 30.3.2-next.836ecdcae.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.
Files changed (12) hide show
  1. package/CHANGELOG.md +7 -5
  2. package/build/validated-form-controls/control-with-error.js.map +1 -1
  3. package/build-module/validated-form-controls/control-with-error.js.map +1 -1
  4. package/build-style/style-rtl.css +11 -5
  5. package/build-style/style.css +11 -5
  6. package/build-types/validated-form-controls/control-with-error.d.ts +5 -0
  7. package/build-types/validated-form-controls/control-with-error.d.ts.map +1 -1
  8. package/package.json +19 -19
  9. package/src/modal/style.scss +8 -0
  10. package/src/validated-form-controls/control-with-error.tsx +5 -0
  11. package/src/validated-form-controls/style.scss +5 -5
  12. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -2,22 +2,24 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 30.3.0 (2025-09-03)
5
+ ## 30.3.1-next.0 (2025-09-05)
6
6
 
7
7
  ### Bug Fixes
8
8
 
9
- - `Tabs`: Ensure font size inheritance for tab buttons in all contexts ([#71346](https://github.com/WordPress/gutenberg/pull/71346)).
9
+ - `Modal`: Fix modal headings and labels to use proper editor text color instead of wp-admin colors ([#71311](https://github.com/WordPress/gutenberg/pull/71311)).
10
10
 
11
- ### Internal
11
+ ## 30.3.0 (2025-09-03)
12
12
 
13
- - Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208)
13
+ ### Bug Fixes
14
+
15
+ - `Tabs`: Ensure font size inheritance for tab buttons in all contexts ([#71346](https://github.com/WordPress/gutenberg/pull/71346)).
16
+ - Validated form controls: Fix Sass var handling for red color ([#71391](https://github.com/WordPress/gutenberg/pull/71391)).
14
17
 
15
18
  ### Internal
16
19
 
17
20
  - Upgrade `framer-motion` package to version `^11.15.0` ([#71442](https://github.com/WordPress/gutenberg/pull/71442)).
18
21
  - Display names for Context providers [#71208](https://github.com/WordPress/gutenberg/pull/71208).
19
22
 
20
-
21
23
  ## 30.2.0 (2025-08-20)
22
24
 
23
25
  ### Bug Fixes
package/build/validated-form-controls/control-with-error.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_compose","require","_i18n","_element","_withIgnoreImeEvents","_validityIndicator","_jsxRuntime","appendRequiredIndicator","label","required","markWhenOptional","jsxs","Fragment","children","__","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","useState","statusMessage","setStatusMessage","isTouched","setIsTouched","previousCustomValidityType","usePrevious","type","useEffect","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","onChange","args","props","onKeyDown","key","className","ref","withIgnoreIMEEvents","cloneElement","jsx","ValidityIndicator","ControlWithError","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst previousCustomValidityType = usePrevious( customValidity?.type );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( (): ReturnType< React.EffectCallback > => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\t\tsetErrorMessage( undefined );\n\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\t// Ensures that we wait for any async responses before showing\n\t\t\t\t// a synchronously valid state.\n\t\t\t\tif ( previousCustomValidityType === 'valid' ) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t\tpreviousCustomValidityType,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_compose","require","_i18n","_element","_withIgnoreImeEvents","_validityIndicator","_jsxRuntime","appendRequiredIndicator","label","required","markWhenOptional","jsxs","Fragment","children","__","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","useState","statusMessage","setStatusMessage","isTouched","setIsTouched","previousCustomValidityType","usePrevious","type","useEffect","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","onChange","args","props","onKeyDown","key","className","ref","withIgnoreIMEEvents","cloneElement","jsx","ValidityIndicator","ControlWithError","exports","forwardRef"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t *\n\t\t * As `children` will be cloned with additional props,\n\t\t * the component at the root of `children` should accept\n\t\t * `label`, `onChange`, and `required` props, and process them\n\t\t * appropriately.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst previousCustomValidityType = usePrevious( customValidity?.type );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( (): ReturnType< React.EffectCallback > => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\t\tsetErrorMessage( undefined );\n\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\t// Ensures that we wait for any async responses before showing\n\t\t\t\t// a synchronously valid state.\n\t\t\t\tif ( previousCustomValidityType === 'valid' ) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t\tpreviousCustomValidityType,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
package/build-module/validated-form-controls/control-with-error.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["usePrevious","__","cloneElement","forwardRef","useEffect","useState","withIgnoreIMEEvents","ValidityIndicator","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","appendRequiredIndicator","label","required","markWhenOptional","children","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","statusMessage","setStatusMessage","isTouched","setIsTouched","previousCustomValidityType","type","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","onChange","args","props","onKeyDown","key","className","ref","ControlWithError"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst previousCustomValidityType = usePrevious( customValidity?.type );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( (): ReturnType< React.EffectCallback > => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\t\tsetErrorMessage( undefined );\n\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\t// Ensures that we wait for any async responses before showing\n\t\t\t\t// a synchronously valid state.\n\t\t\t\tif ( previousCustomValidityType === 'valid' ) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t\tpreviousCustomValidityType,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["usePrevious","__","cloneElement","forwardRef","useEffect","useState","withIgnoreIMEEvents","ValidityIndicator","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","appendRequiredIndicator","label","required","markWhenOptional","children","UnforwardedControlWithError","onValidate","customValidity","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","statusMessage","setStatusMessage","isTouched","setIsTouched","previousCustomValidityType","type","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","setCustomValidity","undefined","timer","setTimeout","message","clearTimeout","_customValidity$messa","onBlur","event","relatedTarget","currentTarget","contains","onChange","args","props","onKeyDown","key","className","ref","ControlWithError"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport type { ValidatedControlProps } from './components/types';\nimport { ValidityIndicator } from './validity-indicator';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tonValidate,\n\t\tcustomValidity,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * The callback to run when the input should be validated.\n\t\t */\n\t\tonValidate?: () => void;\n\t\tcustomValidity?: ValidatedControlProps< unknown >[ 'customValidity' ];\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t *\n\t\t * As `children` will be cloned with additional props,\n\t\t * the component at the root of `children` should accept\n\t\t * `label`, `onChange`, and `required` props, and process them\n\t\t * appropriately.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ statusMessage, setStatusMessage ] = useState<\n\t\t| {\n\t\t\t\ttype: 'validating' | 'valid';\n\t\t\t\tmessage?: string;\n\t\t }\n\t\t| undefined\n\t>();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst previousCustomValidityType = usePrevious( customValidity?.type );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tuseEffect( (): ReturnType< React.EffectCallback > => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tif ( ! customValidity?.type ) {\n\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\tsetStatusMessage( undefined );\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( customValidity.type ) {\n\t\t\tcase 'validating': {\n\t\t\t\t// Wait before showing a validating state.\n\t\t\t\tconst timer = setTimeout( () => {\n\t\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\t\tsetErrorMessage( undefined );\n\n\t\t\t\t\tsetStatusMessage( {\n\t\t\t\t\t\ttype: 'validating',\n\t\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t\t} );\n\t\t\t\t}, 1000 );\n\n\t\t\t\treturn () => clearTimeout( timer );\n\t\t\t}\n\t\t\tcase 'valid': {\n\t\t\t\t// Ensures that we wait for any async responses before showing\n\t\t\t\t// a synchronously valid state.\n\t\t\t\tif ( previousCustomValidityType === 'valid' ) {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tvalidityTarget?.setCustomValidity( '' );\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( {\n\t\t\t\t\ttype: 'valid',\n\t\t\t\t\tmessage: customValidity.message,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'invalid': {\n\t\t\t\tvalidityTarget?.setCustomValidity(\n\t\t\t\t\tcustomValidity.message ?? ''\n\t\t\t\t);\n\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\t\t\tsetStatusMessage( undefined );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}, [\n\t\tisTouched,\n\t\tcustomValidity?.type,\n\t\tcustomValidity?.message,\n\t\tgetValidityTarget,\n\t\tpreviousCustomValidityType,\n\t] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tonValidate?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype=\"invalid\"\n\t\t\t\t\t\tmessage={ errorMessage }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ! errorMessage && statusMessage && (\n\t\t\t\t\t<ValidityIndicator\n\t\t\t\t\t\ttype={ statusMessage.type }\n\t\t\t\t\t\tmessage={ statusMessage.message }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}
package/build-style/style-rtl.css CHANGED
@@ -2304,6 +2304,7 @@ body.is-dragging-components-draggable {
2304
2304
  border-radius: 8px 8px 0 0;
2305
2305
  overflow: hidden;
2306
2306
  display: flex;
2307
+ color: #1e1e1e;
2307
2308
  animation-name: components-modal__appear-animation;
2308
2309
  animation-fill-mode: forwards;
2309
2310
  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
@@ -2313,6 +2314,11 @@ body.is-dragging-components-draggable {
2313
2314
  .components-modal__frame *::after {
2314
2315
  box-sizing: inherit;
2315
2316
  }
2317
+ .components-modal__frame h1,
2318
+ .components-modal__frame h2,
2319
+ .components-modal__frame h3 {
2320
+ color: #1e1e1e;
2321
+ }
2316
2322
  @media not (prefers-reduced-motion) {
2317
2323
  .components-modal__frame {
2318
2324
  animation-duration: var(--modal-frame-animation-duration);
@@ -3819,12 +3825,12 @@ div.components-toolbar > div + div.has-left-divider::before {
3819
3825
  }
3820
3826
 
3821
3827
  .components-validated-control:has(:is(input, select):user-invalid) .components-input-control__backdrop {
3822
- --wp-components-color-accent: $alert-red;
3828
+ --wp-components-color-accent: #cc1818;
3823
3829
  border-color: #cc1818;
3824
3830
  }
3825
3831
  .components-validated-control :is(textarea, input[type=text]):user-invalid {
3826
- --wp-admin-theme-color: $alert-red;
3827
- --wp-components-color-accent: $alert-red;
3832
+ --wp-admin-theme-color: #cc1818;
3833
+ --wp-components-color-accent: #cc1818;
3828
3834
  border-color: #cc1818;
3829
3835
  }
3830
3836
  .components-validated-control .components-combobox-control__suggestions-container:has(input:user-invalid):not(:has([aria-expanded=true])) {
@@ -3835,11 +3841,11 @@ div.components-toolbar > div + div.has-left-divider::before {
3835
3841
  position: relative;
3836
3842
  }
3837
3843
  .components-validated-control__wrapper-with-error-delegate:has(select:user-invalid) .components-input-control__backdrop {
3838
- --wp-components-color-accent: $alert-red;
3844
+ --wp-components-color-accent: #cc1818;
3839
3845
  border-color: #cc1818;
3840
3846
  }
3841
3847
  .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid) {
3842
- --wp-components-color-accent: $alert-red;
3848
+ --wp-components-color-accent: #cc1818;
3843
3849
  }
3844
3850
 
3845
3851
  .components-validated-control__error-delegate {
package/build-style/style.css CHANGED
@@ -2309,6 +2309,7 @@ body.is-dragging-components-draggable {
2309
2309
  border-radius: 8px 8px 0 0;
2310
2310
  overflow: hidden;
2311
2311
  display: flex;
2312
+ color: #1e1e1e;
2312
2313
  animation-name: components-modal__appear-animation;
2313
2314
  animation-fill-mode: forwards;
2314
2315
  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
@@ -2318,6 +2319,11 @@ body.is-dragging-components-draggable {
2318
2319
  .components-modal__frame *::after {
2319
2320
  box-sizing: inherit;
2320
2321
  }
2322
+ .components-modal__frame h1,
2323
+ .components-modal__frame h2,
2324
+ .components-modal__frame h3 {
2325
+ color: #1e1e1e;
2326
+ }
2321
2327
  @media not (prefers-reduced-motion) {
2322
2328
  .components-modal__frame {
2323
2329
  animation-duration: var(--modal-frame-animation-duration);
@@ -3832,12 +3838,12 @@ div.components-toolbar > div + div.has-left-divider::before {
3832
3838
  }
3833
3839
 
3834
3840
  .components-validated-control:has(:is(input, select):user-invalid) .components-input-control__backdrop {
3835
- --wp-components-color-accent: $alert-red;
3841
+ --wp-components-color-accent: #cc1818;
3836
3842
  border-color: #cc1818;
3837
3843
  }
3838
3844
  .components-validated-control :is(textarea, input[type=text]):user-invalid {
3839
- --wp-admin-theme-color: $alert-red;
3840
- --wp-components-color-accent: $alert-red;
3845
+ --wp-admin-theme-color: #cc1818;
3846
+ --wp-components-color-accent: #cc1818;
3841
3847
  border-color: #cc1818;
3842
3848
  }
3843
3849
  .components-validated-control .components-combobox-control__suggestions-container:has(input:user-invalid):not(:has([aria-expanded=true])) {
@@ -3848,11 +3854,11 @@ div.components-toolbar > div + div.has-left-divider::before {
3848
3854
  position: relative;
3849
3855
  }
3850
3856
  .components-validated-control__wrapper-with-error-delegate:has(select:user-invalid) .components-input-control__backdrop {
3851
- --wp-components-color-accent: $alert-red;
3857
+ --wp-components-color-accent: #cc1818;
3852
3858
  border-color: #cc1818;
3853
3859
  }
3854
3860
  .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid) {
3855
- --wp-components-color-accent: $alert-red;
3861
+ --wp-components-color-accent: #cc1818;
3856
3862
  }
3857
3863
 
3858
3864
  .components-validated-control__error-delegate {
package/build-types/validated-form-controls/control-with-error.d.ts CHANGED
@@ -28,6 +28,11 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
28
28
  getValidityTarget: () => ValidityTarget | null | undefined;
29
29
  /**
30
30
  * The control component to apply validation to.
31
+ *
32
+ * As `children` will be cloned with additional props,
33
+ * the component at the root of `children` should accept
34
+ * `label`, `onChange`, and `required` props, and process them
35
+ * appropriately.
31
36
  */
32
37
  children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
33
38
  } & import("react").RefAttributes<HTMLDivElement>>;
package/build-types/validated-form-controls/control-with-error.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAoMvB,eAAO,MAAM,gBAAgB;IAzL3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;OAEG;;kDAsKoE,CAAC"}
1
+ {"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAyMvB,eAAO,MAAM,gBAAgB;IA9L3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAsKoE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/components",
3
- "version": "30.3.0",
3
+ "version": "30.3.2-next.836ecdcae.0",
4
4
  "description": "UI components for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
44
44
  "@types/gradient-parser": "1.1.0",
45
45
  "@types/highlight-words-core": "1.2.1",
46
46
  "@use-gesture/react": "^10.3.1",
47
- "@wordpress/a11y": "^4.30.0",
48
- "@wordpress/compose": "^7.30.0",
49
- "@wordpress/date": "^5.30.0",
50
- "@wordpress/deprecated": "^4.30.0",
51
- "@wordpress/dom": "^4.30.0",
52
- "@wordpress/element": "^6.30.0",
53
- "@wordpress/escape-html": "^3.30.0",
54
- "@wordpress/hooks": "^4.30.0",
55
- "@wordpress/html-entities": "^4.30.0",
56
- "@wordpress/i18n": "^6.3.0",
57
- "@wordpress/icons": "^10.30.0",
58
- "@wordpress/is-shallow-equal": "^5.30.0",
59
- "@wordpress/keycodes": "^4.30.0",
60
- "@wordpress/primitives": "^4.30.0",
61
- "@wordpress/private-apis": "^1.30.0",
62
- "@wordpress/rich-text": "^7.30.0",
63
- "@wordpress/warning": "^3.30.0",
47
+ "@wordpress/a11y": "^4.30.1-next.836ecdcae.0",
48
+ "@wordpress/compose": "^7.30.1-next.836ecdcae.0",
49
+ "@wordpress/date": "^5.30.1-next.836ecdcae.0",
50
+ "@wordpress/deprecated": "^4.30.1-next.836ecdcae.0",
51
+ "@wordpress/dom": "^4.30.1-next.836ecdcae.0",
52
+ "@wordpress/element": "^6.30.1-next.836ecdcae.0",
53
+ "@wordpress/escape-html": "^3.30.1-next.836ecdcae.0",
54
+ "@wordpress/hooks": "^4.30.1-next.836ecdcae.0",
55
+ "@wordpress/html-entities": "^4.30.1-next.836ecdcae.0",
56
+ "@wordpress/i18n": "^6.3.1-next.836ecdcae.0",
57
+ "@wordpress/icons": "^10.30.1-next.836ecdcae.0",
58
+ "@wordpress/is-shallow-equal": "^5.30.1-next.836ecdcae.0",
59
+ "@wordpress/keycodes": "^4.30.1-next.836ecdcae.0",
60
+ "@wordpress/primitives": "^4.30.1-next.836ecdcae.0",
61
+ "@wordpress/private-apis": "^1.30.1-next.836ecdcae.0",
62
+ "@wordpress/rich-text": "^7.30.1-next.836ecdcae.0",
63
+ "@wordpress/warning": "^3.30.1-next.836ecdcae.0",
64
64
  "change-case": "^4.1.2",
65
65
  "clsx": "^2.1.1",
66
66
  "colord": "^2.7.0",
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "c66cb089eed19d4f4956962fa7b4c81abe6dd513"
89
+ "gitHead": "3e60b4c1e78d7b27acbf1d7dd172bbd64358a0f2"
90
90
  }
package/src/modal/style.scss CHANGED
@@ -31,11 +31,19 @@
31
31
  overflow: hidden;
32
32
  // Have the content element fill the vertical space yet not overflow.
33
33
  display: flex;
34
+ color: $gray-900;
34
35
  // Animate the modal frame/contents appearing on the page.
35
36
  animation-name: components-modal__appear-animation;
36
37
  animation-fill-mode: forwards;
37
38
  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
38
39
 
40
+ // Ensure all headings use the proper editor text color, overriding wp-admin common.css
41
+ h1,
42
+ h2,
43
+ h3 {
44
+ color: $gray-900;
45
+ }
46
+
39
47
  @media not (prefers-reduced-motion) {
40
48
  animation-duration: var(--modal-frame-animation-duration);
41
49
  }
package/src/validated-form-controls/control-with-error.tsx CHANGED
@@ -81,6 +81,11 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
81
81
  getValidityTarget: () => ValidityTarget | null | undefined;
82
82
  /**
83
83
  * The control component to apply validation to.
84
+ *
85
+ * As `children` will be cloned with additional props,
86
+ * the component at the root of `children` should accept
87
+ * `label`, `onChange`, and `required` props, and process them
88
+ * appropriately.
84
89
  */
85
90
  children: C;
86
91
  },
package/src/validated-form-controls/style.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  // For components based on InputBase
3
3
  &:has(:is(input, select):user-invalid)
4
4
  .components-input-control__backdrop {
5
- --wp-components-color-accent: $alert-red;
5
+ --wp-components-color-accent: #{$alert-red};
6
6
  border-color: $alert-red;
7
7
  }
8
8
 
9
9
  // For TextControl, TextareaControl
10
10
  :is(textarea, input[type="text"]):user-invalid {
11
- --wp-admin-theme-color: $alert-red;
12
- --wp-components-color-accent: $alert-red;
11
+ --wp-admin-theme-color: #{$alert-red};
12
+ --wp-components-color-accent: #{$alert-red};
13
13
  border-color: $alert-red;
14
14
  }
15
15
 
@@ -26,13 +26,13 @@
26
26
 
27
27
  // For CustomSelectControl
28
28
  &:has(select:user-invalid) .components-input-control__backdrop {
29
- --wp-components-color-accent: $alert-red;
29
+ --wp-components-color-accent: #{$alert-red};
30
30
  border-color: $alert-red;
31
31
  }
32
32
 
33
33
  // For ToggleGroupControl
34
34
  &:has(input[type="radio"]:invalid) {
35
- --wp-components-color-accent: $alert-red;
35
+ --wp-components-color-accent: #{$alert-red};
36
36
  }
37
37
  }
38
38