playbook_ui 15.5.0.pre.alpha.play260612706 → 15.5.0.pre.alpha.play265012854

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/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,71 @@
+/**
+ * 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 => {
+  // Skip in test environments (Jest sets NODE_ENV to 'test')
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+    return;
+  }
+
+  // Skip if production mode was set at build time
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') {
+    return;
+  }
+
+  // Skip if this looks like a production build (minified, no sourcemaps in browser)
+  // This helps catch cases where the package was built for production but consumed in dev
+  if (typeof window !== 'undefined') {
+    // Check for common production indicators
+    const isMinified = !new Error().stack?.includes('.ts:') && !new Error().stack?.includes('.tsx:');
+    // Allow warnings even in built packages when consumed locally (localhost)
+    const isLocalhost = window.location?.hostname === 'localhost' || 
+                        window.location?.hostname === '127.0.0.1' ||
+                        window.location?.hostname === '';
+    
+    // Only skip if it's minified AND not on localhost
+    if (isMinified && !isLocalhost) {
+      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();
+};