playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12653 → 15.5.0.pre.alpha.PLAY2581aggressivevalidation12698

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd8b63915fa51f6daabd0a877e7bd6c0dbe337c900389228dd9434f5deeaa535
-  data.tar.gz: 1ba2091df0504ec326221fd2660e9238e7220673385b159e0c207ad82fb28e35
+  metadata.gz: ae823d2ea188c8b8b0476223c92ffb8cbf0604e42028c011f6fe12b81a25b8d1
+  data.tar.gz: 7d8758ea0c6fb712605df92777b66589a7d62c63b43cefb3e0cb0a4a104b9547
 SHA512:
-  metadata.gz: 212923b88fdcc63bd98592cc373ff989b51f237d1d147b6fb5f083e15b521812e7a06d9f9ee54f2b1ccf16edf3160ee94e6b28f81a10caf5bcbcee59b731774d
-  data.tar.gz: 8ee030cb7e451dae0bedec3d130b94ae4607ce49037f95c4901ce02a755eb054829734682c1d46c067cca2955da6272baa46c741cc1124b4be94b2fddb64859f
+  metadata.gz: b0bdb702a07ce7985616a28ee935a875208cf9e6292c78d4368408804bbd5a18743e52f642be425d0282b951035fbdbf89a51ced9f143ac314e9545e51069b7a
+  data.tar.gz: 2b3897ff7f64c3d7a618ba0ae8056bcc817b81dbf65088e66b800fec33f23144966bdceec47386a8356cc04727c62d8db0e5f5d3f6f0f53be142d04545a3329f

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,3 +1,24 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ]
+%>
+
+
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -10,6 +31,16 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
+        <%= pb_rails("typeahead", props: {
+        id: "typeahead-default",
+        placeholder: "Select one...",
+        options: options,
+        name: :foo,
+        margin_top: "sm",
+        is_multi: false
+      })
+%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -143,25 +143,30 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalMousedownHandler = dialogElement._outsideClickHandler
-      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
+      const originalClickHandler = dialogElement._outsideClickHandler
+      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
+      
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        const dialogModal = event.target.getBoundingClientRect()
-        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-          event.clientX > dialogModal.right ||
-          event.clientY < dialogModal.top ||
-          event.clientY > dialogModal.bottom
-
-        if (clickedOutsideDialogModal) {
+        // Get the dialog's bounding box (the actual content area)
+        const rect = dialogElement.getBoundingClientRect()
+        const clickedInDialog = (
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom
+        )
+
+        // Only close if clicked outside the dialog content (on the backdrop)
+        if (!clickedInDialog) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -112,19 +112,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const hasBlurredRef = useRef<boolean>(false);
   const formSubmittedRef = useRef<boolean>(false);
-  // Handle value prop - it might be a string or an object with number property (from react-hook-form)
-  const getValueString = (val: any): string => {
-    if (typeof val === 'string') return val
-    if (val?.number) return val.number
-    return ""
-  }
-  const [inputValue, setInputValue] = useState(getValueString(value))
+  const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error || "")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
   const [hasBlurred, setHasBlurred] = useState(false)
   const [formSubmitted, setFormSubmitted] = useState(false)
+  const [hasStartedValidating, setHasStartedValidating] = useState(false)
   
   // Keep refs in sync with state for use in event listeners
   useEffect(() => {
@@ -134,16 +129,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   useEffect(() => {
     formSubmittedRef.current = formSubmitted
   }, [formSubmitted])
-  const [hasStartedValidating, setHasStartedValidating] = useState(false)
-
-  // Sync value prop when it changes (e.g., from react-hook-form)
-  useEffect(() => {
-    const newValue = getValueString(props.value)
-    if (newValue !== inputValue) {
-      setInputValue(newValue)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.value])
 
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
@@ -173,10 +158,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
   const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
-  
-  // Only show error prop after blur (to prevent showing react-hook-form errors while typing)
-  const shouldShowPropError = hasBlurred || formSubmitted
-  const propError = shouldShowPropError ? (props.error || "") : ""
 
   useEffect(() => {
     const hasError = (error ?? '').length > 0
@@ -291,8 +272,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
 
      // Only validate if field has been blurred or form has been submitted
-     // Don't validate on change - only on blur or submission
-     if (!hasBlurred && !formSubmitted) return
+     // Use refs here since state updates are async and we need current values
+     if (!hasBlurredRef.current && !formSubmittedRef.current) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -306,7 +287,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   // Add listener for form validation to track when validation should be shown
   useEffect(() => {
-      const handleInvalid = (event: Event) => {
+    const handleInvalid = (event: Event) => {
       const target = event.target as HTMLInputElement
       const phoneNumberContainer = target.closest('.pb_phone_number_input')
 
@@ -444,12 +425,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       setFormSubmitted(false)
     }
 
-    // Clear error when user starts typing (before blur)
-    // This prevents showing validation errors while typing
-    if (!hasBlurredRef.current && error) {
-      setError('')
-    }
-
     let phoneNumberData
 
     // Handle formatAsYouType with input event
@@ -465,6 +440,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     
     // Don't call isValid callback on change - only on blur or form submission
     // This prevents triggering validation while typing
+    // Use refs to get current values in case this is called from event listener
     if (hasBlurredRef.current || formSubmittedRef.current) {
       isValid(itiRef.current.isValidNumber())
     }
@@ -525,11 +501,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           setInputValue(formattedValue)
           setHasTyped(true)
 
-          // Clear error when user types (before blur) - use ref to get current value
-          if (!hasBlurredRef.current) {
-            setError('')
-          }
-
           // Get phone number data with unformatted number
           const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
           const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
@@ -538,6 +509,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
           onChange(phoneNumberData)
           
           // Don't call isValid callback on change - only on blur or form submission
+          // Use refs to check current blur state in the event listener (closure issue)
           if (hasBlurredRef.current || formSubmittedRef.current) {
             isValid(telInputInit.isValidNumber())
           }
@@ -550,7 +522,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: displayError || propError,
+    error: displayError || props.error || "",
     type: 'tel',
     id,
     label,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -7,18 +7,29 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
+  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
-  const { selectProps, clearValue } = props
+const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
+  const { selectProps, clearValue, innerProps } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
+  // To stop this from bubbling up when inside a dialog or other modal
+  const handleMouseDown = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    innerProps?.onMouseDown?.(event)
+  }
+
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
+        innerProps={{
+          ...innerProps,
+          onMouseDown: handleMouseDown,
+        }}
     />
   )
 }