playbook_ui 15.5.0.pre.alpha.play265012854 → 15.5.0.pre.alpha.revert5553typeaheadfix12763

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf34a7cbdf05a7626ce21c8db3a61e0c932c67f2099d9b9ee04c04341152e063
-  data.tar.gz: 11a9f58fc3239cee3508cddf0ad875712e3192de67af4d2b147bdd4770f79e53
+  metadata.gz: 1a59cf8f69d5fe52b8de77c8841a833bf94874562f059e400cd0d579d594a138
+  data.tar.gz: 6cfe8278c2647fbd8d2a9e8a53aa9b3e05dd4ed95956054f875614b4b39de579
 SHA512:
-  metadata.gz: 641034c37e83b9fb00058a69de651804af40d9880909344cd8678cabe625b1f791b4224b2e94df4537b79c699aa9fd4dc165a09d4679a1d5cd663778d372aea6
-  data.tar.gz: 3eff1276d02c1a41a332d770604284b7770b7b4c3c771febb3cc1dd47b2d11c248574498d064e7881c7b6c106eac2c3fa71b2bd1edba2ba83946b2b2d6611053
+  metadata.gz: 7a9ddcc0dc503a03291f2098bc20dbf1e2c7e061dd5813b47d22d668e69e6174a329ee0124d3f97eb456d3d2eae3407206e9b538284f1d800e007dd90533481a
+  data.tar.gz: 4617c2fa17d4fd3cc8ea7d5fbb046f4a7963fa62a5c7410cceed78b028b1ba93a75043ea54e13744f2b14c0a57f63750235984cc9949122c83c7c1616d41665b

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(backgroundSize),
-        backgroundPosition: getResponsiveValue(backgroundPosition),
-        backgroundRepeat: getResponsiveValue(backgroundRepeat),
-        backgroundColor: getResponsiveValue(backgroundColor),
-        imageUrl: getResponsiveValue(imageUrl),
+        backgroundSize: getResponsiveValue(props.backgroundSize),
+        backgroundPosition: getResponsiveValue(props.backgroundPosition),
+        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
+        backgroundColor: getResponsiveValue(props.backgroundColor),
+        imageUrl: getResponsiveValue(props.imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
+  }, [props]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,6 +4,7 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
+  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -41,8 +42,3 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
-
-test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
-  const kit = renderKit(Background, props);
-  expect(kit).toHaveClass('pb_background_color_light');
-});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -169,11 +168,6 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
 
   const [options, setOptions] = useState({});
 
-  useEffect(() => {
-    // Warn about deprecated kit (only once per page load, dev mode only)
-    deprecatedKitWarning('BarGraph', '[Playbook] The "BarGraph" kit is deprecated. Please use "PbBarGraph" instead.');
-  }, []);
-
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

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

@@ -1,24 +1,3 @@
-<% 
-  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 %>
@@ -31,16 +10,6 @@
         <%= 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_legend/_legend.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import { deprecatedKitWarning } from '../utilities/deprecated'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -33,10 +32,6 @@ const Legend = (props: LegendProps) => {
     text,
   } = props
 
-  useEffect(() => {
-    deprecatedKitWarning('Legend')
-  }, [])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

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

@@ -110,25 +110,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const hasBlurredRef = useRef<boolean>(false);
-  const formSubmittedRef = useRef<boolean>(false);
   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(() => {
-    hasBlurredRef.current = hasBlurred
-  }, [hasBlurred])
-  
-  useEffect(() => {
-    formSubmittedRef.current = formSubmitted
-  }, [formSubmitted])
 
   // Only sync initial error from props, not continuous updates
   // Once validation starts, internal validation takes over
@@ -155,8 +143,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   // Determine which error to display
-  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
+  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
   const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
@@ -271,9 +259,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
 
-     // Only validate if field has been blurred or form has been submitted
-     // Use refs here since state updates are async and we need current values
-     if (!hasBlurredRef.current && !formSubmittedRef.current) return
+     if (!hasTyped && !error) return
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -294,7 +280,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
         const invalidInputName = target.name || target.getAttribute('name')
         if (invalidInputName === name) {
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           // Trigger validation when form is submitted
           validateErrors()
@@ -320,9 +305,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
-        hasBlurredRef.current = false
-        setHasBlurred(false)
-        formSubmittedRef.current = false
         setFormSubmitted(false)
         setHasStartedValidating(false)
         // Only clear validation state if field was required
@@ -340,7 +322,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
         if (required && isEmpty) {
           setError('Missing phone number')
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           return 'Missing phone number'
         }
@@ -397,7 +378,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           // Set the error state so the validation attribute gets added
           setError(errorMessage)
-          formSubmittedRef.current = true
           setFormSubmitted(true)
           setHasTyped(true)
 
@@ -421,7 +401,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     // Reset form submitted state when user types
     if (formSubmitted) {
-      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
 
@@ -437,15 +416,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    
-    // 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())
-    }
+    isValid(itiRef.current.isValidNumber())
 
-    // Don't validate on change - only validate on blur or form submission
+    // Trigger validation after onChange for React Hook Form
+    // This ensures validation state is up-to-date
+    setTimeout(() => validateErrors(), 0)
   }
 
   // Separating Concerns as React Docs Recommend
@@ -507,12 +482,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           setSelectedData(phoneNumberData)
           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())
-          }
+          isValid(telInputInit.isValidNumber())
         })
       }
     }
@@ -522,16 +492,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: displayError || props.error || "",
+    error: hasTyped ? error : props.error || displayError,
     type: 'tel',
     id,
     label,
     name,
-    onBlur: () => {
-      hasBlurredRef.current = true
-      setHasBlurred(true)
-      validateErrors()
-    },
+    onBlur: validateErrors,
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,42 +1,12 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { 
-        id: "validation", 
-        initial_country: "af", 
-        value: "", 
-        required: true 
-    }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
-        const form = document.querySelector('#example-form-validation');
-        
-        // Wait for React component to mount
-        function waitForComponent() {
-            const phoneInput = form.querySelector('#validation');
-            
-            if (!phoneInput) {
-                setTimeout(waitForComponent, 100);
-                return;
-            }
-            
-            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
-            setTimeout(function() {
-                phoneInput.focus({ preventScroll: true });
-                setTimeout(function() {
-                    phoneInput.blur();
-                }, 100);
-            }, 500);
-        }
-        
-        waitForComponent();
-        
-        // Prevent form submission if there are validation errors
-        form.addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
-                e.preventDefault();
-            }
-        });
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+        })
     })
 <% end %>

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

@@ -10,19 +10,8 @@ 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."
         );
@@ -34,16 +23,18 @@ const PhoneNumberInputValidation = (props) => {
     };
     
     const handleOnSubmit = (e) => {
-        if (!isValid) e.preventDefault()
+        if (showFormErrors) e.preventDefault()
     }
 
     useEffect(() => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    // 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);
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
 
     return (
         <form
@@ -59,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={shouldShowError ? initialError : undefined}
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

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

@@ -7,29 +7,18 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
-  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
-  const { selectProps, clearValue, innerProps } = props
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
+  const { selectProps, clearValue } = 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,
-        }}
     />
   )
 }