diff --git a/.changeset/gorgeous-readers-know.md b/.changeset/gorgeous-readers-know.md new file mode 100644 index 0000000000..6270a86ea3 --- /dev/null +++ b/.changeset/gorgeous-readers-know.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/confirmation-modal': major +--- + +Component now accepts a ref prop diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx index 36a266c24d..08f72daee2 100644 --- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx +++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx @@ -23,87 +23,93 @@ import { warningIconThemeStyle, } from './styles'; -export const ConfirmationModal = ({ - children, - title, - requiredInputText, - buttonText, - submitDisabled = false, - variant = Variant.Default, - onConfirm, - onCancel, - darkMode: darkModeProp, - ...modalProps -}: ConfirmationModalProps) => { - const [confirmEnabled, setConfirmEnabled] = useState(!requiredInputText); - const { theme, darkMode } = useDarkMode(darkModeProp); +export const ConfirmationModal = React.forwardRef( + ( + { + children, + title, + requiredInputText, + buttonText, + submitDisabled = false, + variant = Variant.Default, + onConfirm, + onCancel, + darkMode: darkModeProp, + ...modalProps + }: ConfirmationModalProps, + forwardRef: React.ForwardedRef, + ) => { + const [confirmEnabled, setConfirmEnabled] = useState(!requiredInputText); + const { theme, darkMode } = useDarkMode(darkModeProp); - const textEntryConfirmation = useMemo(() => { - setConfirmEnabled(!requiredInputText); + const textEntryConfirmation = useMemo(() => { + setConfirmEnabled(!requiredInputText); - let textEntryConfirmation = null; + let textEntryConfirmation = null; - if (requiredInputText) { - const onInputChange = (event: React.ChangeEvent) => { - setConfirmEnabled(event.target.value === requiredInputText); - }; - textEntryConfirmation = ( - - ); - } + if (requiredInputText) { + const onInputChange = (event: React.ChangeEvent) => { + setConfirmEnabled(event.target.value === requiredInputText); + }; + textEntryConfirmation = ( + + ); + } - return textEntryConfirmation; - }, [requiredInputText, darkMode]); + return textEntryConfirmation; + }, [requiredInputText, darkMode]); - return ( - -
- {variant === Variant.Danger && ( -
- -
- )} -

- {title} -

- {children} - {textEntryConfirmation} -
-
- - -
-
- ); -}; + {variant === Variant.Danger && ( +
+ +
+ )} +

+ {title} +

+ {children} + {textEntryConfirmation} + + + + ); + }, +); ConfirmationModal.displayName = 'ConfirmationModal'; @@ -114,7 +120,7 @@ ConfirmationModal.propTypes = { onCancel: PropTypes.func, children: PropTypes.node, className: PropTypes.string, - buttonText: PropTypes.string, + buttonText: PropTypes.string.isRequired, variant: PropTypes.oneOf(Object.values(Variant)), requiredInputText: PropTypes.string, darkMode: PropTypes.bool,