fix: use correct WordPress Modal component props

Fix modal that was persisting by using correct @wordpress/components
Modal API:
- Use 'open' instead of 'isOpen' prop
- Use 'onRequestClose' instead of 'onClose'
- Add 'isDismissible' to allow closing with ESC/outside click
- Add 'focusOnMount' for accessibility
- Add deprecation warning props for TextControl (__next40pxDefaultSize,
  __nextHasNoMarginBottom)

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:38:36 +07:00
parent 83b7294fa4
commit 9499931034
5 changed files with 15 additions and 5 deletions

View File

@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/eye-closed', 'wp-icons/build/eye-opened', 'wp-icons/build/list', 'wp-icons/build/message', 'wp-icons/build/minus', 'wp-icons/build/trash', 'wp-icons/build/visible'), 'version' => 'ffa92e2b75f22808382a'); <?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/eye-closed', 'wp-icons/build/eye-opened', 'wp-icons/build/list', 'wp-icons/build/message', 'wp-icons/build/minus', 'wp-icons/build/trash', 'wp-icons/build/visible'), 'version' => 'b71d9ac468e7d4c01a3d');

File diff suppressed because one or more lines are too long

View File

@@ -535,10 +535,17 @@ export default function DataTable({
{actions.addNew && ( {actions.addNew && (
<Modal <Modal
title={actions.addNew.label || __('Add New', 'formipay')} title={actions.addNew.label || __('Add New', 'formipay')}
isOpen={isAddModalOpen} open={isAddModalOpen}
onClose={() => setIsAddModalOpen(false)} onRequestClose={() => {
setIsAddModalOpen(false);
setNewItemTitle('');
}}
isDismissible
focusOnMount="firstContentElement"
> >
<TextControl <TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={__('Title', 'formipay')} label={__('Title', 'formipay')}
value={newItemTitle} value={newItemTitle}
onChange={setNewItemTitle} onChange={setNewItemTitle}
@@ -547,7 +554,10 @@ export default function DataTable({
<div className="formipay-modal-actions"> <div className="formipay-modal-actions">
<Button <Button
variant="secondary" variant="secondary"
onClick={() => setIsAddModalOpen(false)} onClick={() => {
setIsAddModalOpen(false);
setNewItemTitle('');
}}
> >
{__('Cancel', 'formipay')} {__('Cancel', 'formipay')}
</Button> </Button>