playbook_ui 15.5.0.pre.alpha.play250612607 → 15.5.0.pre.alpha.play265012819

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

@@ -110,13 +110,25 @@ 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
@@ -143,8 +155,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   // Determine which error to display
-  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
-  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  // Show internal errors only after blur (hasBlurred) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasBlurred || formSubmitted) && error
   const displayError = shouldShowInternalError ? error : ""
 
   useEffect(() => {
@@ -259,7 +271,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       return
     }
 
-     if (!hasTyped && !error) 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
 
     // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -280,6 +294,7 @@ 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()
@@ -305,6 +320,9 @@ 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
@@ -322,6 +340,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
         if (required && isEmpty) {
           setError('Missing phone number')
+          formSubmittedRef.current = true
           setFormSubmitted(true)
           return 'Missing phone number'
         }
@@ -378,6 +397,7 @@ 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)
 
@@ -401,6 +421,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     // Reset form submitted state when user types
     if (formSubmitted) {
+      formSubmittedRef.current = false
       setFormSubmitted(false)
     }
 
@@ -416,11 +437,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiRef.current.isValidNumber())
+    
+    // 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())
+    }
 
-    // Trigger validation after onChange for React Hook Form
-    // This ensures validation state is up-to-date
-    setTimeout(() => validateErrors(), 0)
+    // Don't validate on change - only validate on blur or form submission
   }
 
   // Separating Concerns as React Docs Recommend
@@ -482,7 +507,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
           setSelectedData(phoneNumberData)
           onChange(phoneNumberData)
-          isValid(telInputInit.isValidNumber())
+          
+          // 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())
+          }
         })
       }
     }
@@ -492,12 +522,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error || displayError,
+    error: displayError || props.error || "",
     type: 'tel',
     id,
     label,
     name,
-    onBlur: validateErrors,
+    onBlur: () => {
+      hasBlurredRef.current = true
+      setHasBlurred(true)
+      validateErrors()
+    },
     onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }

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

@@ -1,12 +1,42 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("phone_number_input", props: { 
+        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 () {
-        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-        })
+        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();
+            }
+        });
     })
 <% end %>

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_typeahead/_typeahead.test.jsx

@@ -276,3 +276,18 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
+test('input display none shows number of selected items', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'input-display-none-test' }}
+        defaultValue={[options[0], options[1]]}
+        inputDisplay="none"
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('input-display-none-test')
+  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
+  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
+})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -43,6 +43,7 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -89,6 +90,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
+  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -238,6 +240,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
+    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,

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,
+        }}
     />
   )
 }

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

@@ -19,7 +19,12 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
+
+  // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
+  if (inputDisplay === 'none') {
+    return null
+  }
 
   const formPillProps = {
     marginRight: 'xs',

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

@@ -1,15 +1,42 @@
 import React from 'react'
 import { components } from 'react-select'
+import Body from '../../pb_body/_body'
 
 type ValueContainerProps = {
-  children: React.ReactNode,
+  children: React.ReactNode | React.ReactNode[],
+  selectProps?: Record<string, unknown>,
+  hasValue?: boolean,
 }
 
-const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
-  <components.ValueContainer
-      className="text_input_value_container"
-      {...props}
-  />
-)
+const ValueContainer = (props: ValueContainerProps | any): React.ReactElement => {
+  const { children, selectProps, hasValue } = props
+  const inputDisplay = (selectProps as any)?.inputDisplay
+  const value = (selectProps as any)?.value
+
+  // When inputDisplay is "none" and there are selected values, show count text (this is for multi-select only)
+  if (inputDisplay === 'none' && hasValue && value) {
+    const selectedCount = Array.isArray(value) ? value.length : 0
+    
+    return (
+      <components.ValueContainer 
+          className="text_input_value_container"
+          {...props}
+      >
+        <Body
+            className="pb_typeahead_selection_count"
+            text={`${selectedCount} item${selectedCount !== 1 ? 's' : ''} selected`}
+        />
+        {children}
+      </components.ValueContainer>
+    )
+  }
+
+  return (
+    <components.ValueContainer 
+        className="text_input_value_container"
+        {...props}
+    />
+  )
+}
 
 export default ValueContainer

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -0,0 +1,30 @@
+<% 
+options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+] 
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-none",
+    label: "With Input Display None",
+    options: options,
+    name: :foo,
+    input_display: "none",
+    })
+%>
+<br/>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-input-display-pills",
+    label: "With Input Display Pills (Default)",
+    options: options,
+    name: :foo,
+    pills: true,
+    })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' }
+]
+
+const TypeaheadInputDisplay = (props) => {
+  return (
+    <>
+      <Typeahead
+          inputDisplay="none"
+          isMulti
+          label="With Input Display None"
+          options={options}
+          {...props}
+      />
+      <br/>
+      <Typeahead
+          isMulti
+          label="With Input Display Pills (Default)"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -0,0 +1,3 @@
+Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
+
+**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

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

@@ -5,6 +5,7 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -26,6 +27,7 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
+    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -17,4 +17,5 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
+export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -25,6 +25,10 @@ module Playbook
       prop :is_multi, type: Playbook::Props::Boolean,
                       default: true
 
+      prop :input_display, type: Playbook::Props::Enum,
+                           values: %w[none pills],
+                           default: "pills"
+
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -78,7 +82,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -91,6 +95,7 @@ module Playbook
           id: id,
           inline: inline,
           isMulti: is_multi,
+          inputDisplay: input_display,
           label: label,
           marginBottom: margin_bottom,
           multiKit: multi_kit,

data/app/pb_kits/playbook/utilities/DEPRECATION_WARNINGS.md

@@ -0,0 +1,82 @@
+# Deprecation Warning System for React Kits
+
+## Overview
+
+This system provides runtime console warnings when deprecated Playbook kits are used in development mode. It helps developers identify deprecated kit usage in Nitro, Tempo, Runway, and other apps without impacting production builds.
+
+## How It Works
+
+### Key Features
+
+✅ **Once per page load**: Each deprecated kit logs exactly one warning per page load, preventing spam on re-renders  
+✅ **Dev mode only**: No warnings in production builds (`process.env.NODE_ENV === 'production'`)  
+✅ **Platform-specific**: Can warn only for React or Rails, or both  
+✅ **Customizable messages**: Default or custom deprecation messages
+
+## Usage
+
+### Step 1: Import the utility
+
+In your kit's main React component file (e.g., `_bar_graph.tsx`):
+
+```tsx
+import { deprecatedKitWarning } from "../utilities/deprecated";
+```
+
+### Step 2: Add the warning in a useEffect hook
+
+Add a `useEffect` hook that calls the warning once when the component mounts:
+
+```tsx
+const YourKit = (props: YourKitProps): React.ReactElement => {
+
+  useEffect(() => {
+    deprecatedKitWarning('YourKitName', 'Optional custom message');
+  }, []); // Empty dependency array ensures it runs once
+
+  // rest of component
+};
+```
+
+
+## API Reference
+
+### `deprecatedKitWarning(kitName, message?)`
+
+**Parameters:**
+- `kitName` (string, required): Name of the deprecated kit (e.g., 'BarGraph')
+- `message` (string, optional): Custom deprecation message. If omitted, uses default.
+
+**Default message format:**
+```
+[Playbook] The "{kitName}" kit is deprecated and will be removed in a future version. Please migrate to the recommended alternative.
+```
+
+**Behavior:**
+- Only logs in development mode (`process.env.NODE_ENV !== 'production'`)
+- Tracks warned kits in a Set to prevent duplicate warnings
+- Silent in production builds
+
+
+## Best Practices
+
+### 1. Place the warning early in the component lifecycle
+```tsx
+useEffect(() => {
+  deprecatedKitWarning('YourKit');
+}, []); // Run once on mount
+```
+
+### 2. Provide helpful migration messages
+```tsx
+deprecatedKitWarning(
+  'BarGraph', 
+  '[Playbook] The "BarGraph" kit is deprecated. Please use "PbBarGraph" instead.'
+);
+```
+
+### 3. Check menu.yml before applying
+Always verify the kit's status in `playbook-website/config/menu.yml` to ensure it's actually deprecated for React.
+
+### 4. Don't over-warn
+The utility handles deduplication, but keep it to one `deprecatedKitWarning` call per kit component.

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -0,0 +1,50 @@
+/**
+ * Tracks which deprecated kits have already logged warnings in this session
+ * to ensure we only log once per page load per kit
+ */
+const warnedKits = new Set<string>();
+
+/**
+ * Logs a deprecation warning for a Playbook kit
+ * - Only logs once per kit per page load (prevents spam on re-renders)
+ * - Only logs in development mode (not in production or test environments)
+ * 
+ * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
+ * @param message - Optional custom deprecation message. If not provided, uses a default message.
+ * 
+ * @example
+ * // In your kit component:
+ * useEffect(() => {
+ *   deprecatedKitWarning('BarGraph');
+ * }, []);
+ */
+export const deprecatedKitWarning = (
+  kitName: string,
+  message?: string
+): void => {
+  // Only run in development mode, not in production or test
+  if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') {
+    return;
+  }
+
+  // Only warn once per kit per page load
+  if (warnedKits.has(kitName)) {
+    return;
+  }
+
+  // Mark this kit as warned
+  warnedKits.add(kitName);
+
+  // Log the warning
+  const defaultMessage = `[PLAYBOOK] The "${kitName}" kit is deprecated and will be removed in a future version. Please migrate to the recommended alternative.`;
+  
+  console.warn(message || defaultMessage);
+};
+
+/**
+ * Resets the warned kits tracker (useful for testing)
+ * @internal
+ */
+export const resetDeprecationWarnings = (): void => {
+  warnedKits.clear();
+};