playbook_ui 15.4.0.pre.rc.4 → 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -10,8 +10,19 @@ const PhoneNumberInputValidation = (props) => {
     const [showFormErrors, setShowFormErrors] = useState(false);
     const [phoneNumber, setPhoneNumber] = useState("");
     const [countryCode, setCountryCode] = useState("af");
+    const [isValid, setIsValid] = useState(false);
+    const [hasInteracted, setHasInteracted] = useState(false);
+
+    // Start with initial error - will be cleared on blur if valid
+    const initialError = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    );
 
     const handleOnValidate = (valid) => {
+        setIsValid(valid);
+        setHasInteracted(true);
         setFormErrors(
             valid ? "" : "Please correct the fields below and try again."
         );
@@ -23,18 +34,16 @@ const PhoneNumberInputValidation = (props) => {
     };
     
     const handleOnSubmit = (e) => {
-        if (showFormErrors) e.preventDefault()
+        if (!isValid) e.preventDefault()
     }
 
     useEffect(() => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    const error = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    )
+    // Only show error prop initially, or if invalid after interaction
+    // Clear error prop once valid (component handles validation on blur)
+    const shouldShowError = !hasInteracted || (hasInteracted && !isValid);
 
     return (
         <form
@@ -50,7 +59,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={error}
+                error={shouldShowError ? initialError : undefined}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+import PbReactPopover from "../_popover";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
 
 const PopoverAppendTo = (props) => {
   const [showParentPopover, setShowParentPopover] = useState(false);