playbook_ui 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15347 → 16.4.0.pre.alpha.play287215277

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 47486b650716761b037a855cbb4d7bc840decb2bdc016abb00e36c7c38a18bd9
-  data.tar.gz: 7e75068a145d827a2c0d3c507aa93b860271e6866f82a385566f37ec6a628343
+  metadata.gz: f192477f8ce86f7e7d34c1fcd3e04ce3ec19bce384af58ee7b670ad2020bb7da
+  data.tar.gz: cdf3515b0efd18f633a9f0b9c971fba9f5e1c86ba26e1072be960e42d0dce68d
 SHA512:
-  metadata.gz: edfbc7125580ec249fa053b8e0bc2158d2b352ec1b470a51b59105a2973ae4ecc7fe7465e21c1b534b608325167f380a6d480ea20e3f760a4533d97c0e6b288f
-  data.tar.gz: b81a924f047e85a95faed9d5a2d0e2a3ae0dde3c981d740047141b07624937d54a3b0899c6ac5b30448e55221645f4c38db5d97adb1286f5e324a0527ffbc25c
+  metadata.gz: 7ea0752cc8fa230d382be06fa02a93b19830976599733888686a05cc85feccef9024d16debed509130b7902c7251c62b6e1f2604796b4e0b1ca8259f020738d0
+  data.tar.gz: 92b037ce1dded39bc8a28f90c79fdfbbcbff46056af9b9c111d9a51e43a1e2b60e441f9ac77c25ab022fd5a6a6c238d1800f92416935fb634550f877f527819e

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -9,8 +9,6 @@ const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
 const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
 const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
-const FORM_VALIDATION_MESSAGE_ATTR = 'data-pb-form-validation-message'
-const FORM_VALIDATION_MESSAGE_REUSED_ATTR = 'data-pb-form-validation-message-reused'
 
 const FIELD_EVENTS = [
   'change',
@@ -22,58 +20,26 @@ class PbFormValidation extends PbEnhancedElement {
     return FORM_SELECTOR
   }
 
-  static start() {
-    if (this.__pbStarted) return
-    this.__pbStarted = true
-    super.start()
-  }
-
   connect() {
-    this.boundFields    = new WeakSet()
-    this._fieldHandlers = new WeakMap()
-    this._typeaheadFieldHandlers = new WeakMap()
-
-    this.bindValidationListeners()
-    this._setupMutationObserver()
-    this._setupSubmitHandler()
-  }
+    this.formValidationFields.forEach((field) => {
+      // Skip phone number inputs - they handle their own validation
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
 
-  _setupMutationObserver() {
-    this._pendingFieldsToBind    = new Set()
-    this._flushPendingFieldBinds = debounce(() => {
-      if (!this._pendingFieldsToBind?.size) return
-      this._pendingFieldsToBind.forEach((f) => this.bindFieldValidationListeners(f))
-      this._pendingFieldsToBind.clear()
-    }, 50)
+      // Skip TimePicker inputs - they handle their own validation
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
 
-    this.mutationObserver = new MutationObserver((mutations) => {
-      let sawRequired = false
-      mutations.forEach(({ addedNodes }) => {
-        addedNodes.forEach((node) => {
-          if (!(node instanceof Element)) return
-          if (node.matches(REQUIRED_FIELDS_SELECTOR)) {
-            this._pendingFieldsToBind.add(node)
-            sawRequired = true
-          }
-          node.querySelectorAll?.(REQUIRED_FIELDS_SELECTOR)?.forEach?.((el) => {
-            this._pendingFieldsToBind.add(el)
-            sawRequired = true
-          })
-        })
+      FIELD_EVENTS.forEach((e) => {
+        field.addEventListener(e, debounce((event) => {
+          this.validateFormField(event)
+        }, 250), false)
       })
-      if (sawRequired) this._flushPendingFieldBinds()
     })
 
-    this.mutationObserver.observe(this.element, { childList: true, subtree: true })
-  }
-
-  _setupSubmitHandler() {
+    // Add event listener to check for phone number validation errors
     this.element.addEventListener('submit', (event) => {
-      if (this.validateOnSubmit()) {
-        event.preventDefault()
-        return false
-      }
-
+      // Use setTimeout to ensure React state updates have completed
       setTimeout(() => {
         if (this.hasPhoneNumberValidationErrors()) {
           event.preventDefault()
@@ -83,293 +49,61 @@ class PbFormValidation extends PbEnhancedElement {
     })
   }
 
-  validateOnSubmit() {
-    let foundInvalid = false
-
-    this.formValidationFields.forEach((field) => {
-      if (this.isTypeaheadField(field)) return
-
-      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
-      if (isPhoneNumberInput) return
-
-      const isTimePickerInput = field.closest('.pb_time_picker')
-      if (isTimePickerInput) return
-
-      field.setCustomValidity('')
-      const ctx = this.getValidationContext(field)
-
-      if (field.validity.valid) {
-        this.clearError(field, ctx)
-        return
-      }
-
-      const message = ctx.validationMessage
-      if (message) field.setCustomValidity(message)
-
-      foundInvalid = true
-      this.showValidationMessage(field, ctx)
-    })
-
-    return foundInvalid
-  }
-
-  disconnect() {
-    this.mutationObserver?.disconnect()
-
-    this._pendingFieldsToBind?.clear()
-    this._pendingFieldsToBind    = null
-    this._flushPendingFieldBinds = null
-    this._typeaheadFieldHandlers = null
-  }
-
-  bindValidationListeners() {
-    this.formValidationFields.forEach((field) => this.bindFieldValidationListeners(field))
-  }
-
-  bindFieldValidationListeners(field) {
-    if (!field || !(field instanceof Element)) return
-    if (this.boundFields?.has(field)) return
-    if (this.isTypeaheadField(field)) {
-      this.bindTypeaheadValidationListeners(field)
-      return
-    }
-
-    const isPhoneNumberInput = field.closest('.pb_phone_number_input')
-    if (isPhoneNumberInput) return
-
-    const isTimePickerInput = field.closest('.pb_time_picker')
-    if (isTimePickerInput) return
-
-    let handlers = this._fieldHandlers?.get(field)
-    if (!handlers) {
-      const debouncedHandler = debounce((event) => {
-        this.validateFormField(event)
-      }, 250)
-
-      const immediateHandler = (event) => {
-        this.validateFormField(event)
-      }
-
-      handlers = { debouncedHandler, immediateHandler }
-      this._fieldHandlers?.set(field, handlers)
-    }
-
-    FIELD_EVENTS.forEach((eventName) => {
-      if (eventName === 'invalid') {
-        field.addEventListener(eventName, handlers.immediateHandler, true)
-      } else if (eventName === 'change' && field.tagName === 'SELECT') {
-        field.addEventListener(eventName, handlers.immediateHandler, false)
-      } else {
-        field.addEventListener(eventName, handlers.debouncedHandler, false)
-      }
-    })
-
-    this.boundFields?.add(field)
-  }
-
-  bindTypeaheadValidationListeners(field) {
-    if (!field || !(field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement || field instanceof HTMLSelectElement)) return
-    if (this.boundFields?.has(field)) return
-
-    let handlers = this._typeaheadFieldHandlers?.get(field)
-    if (!handlers) {
-      const applyCustomMessage = () => {
-        const kitElement = this.getKitElement(field)
-        const ctx = this.getValidationContext(field)
-        const message = this.getValidationMessage(field, kitElement)
-
-        field.setCustomValidity('')
-        if (!message) {
-          if (!this.isReactTypeaheadField(field)) this.showValidationMessage(field, ctx)
-          return
-        }
-
-        if (field.validity.valueMissing || !field.validity.valid) {
-          field.setCustomValidity(message)
-        }
-
-        if (!this.isReactTypeaheadField(field)) {
-          this.showValidationMessage(field, ctx)
-        }
-      }
-
-      const clearCustomMessage = () => {
-        field.setCustomValidity('')
-        if (!this.isReactTypeaheadField(field)) {
-          this.clearError(field)
-        }
-      }
-
-      handlers = { applyCustomMessage, clearCustomMessage }
-      this._typeaheadFieldHandlers?.set(field, handlers)
-    }
-
-    field.addEventListener('invalid', handlers.applyCustomMessage, true)
-    field.addEventListener('input', handlers.clearCustomMessage, false)
-    field.addEventListener('change', handlers.clearCustomMessage, false)
-
-    this.boundFields?.add(field)
-  }
-
   validateFormField(event) {
     event.preventDefault()
     const { target } = event
-    if (this.isTypeaheadField(target)) return
-
-    // Suppress the native browser tooltip; PB shows its own inline error instead.
-
-    const ctx = this.getValidationContext(target)
-
     target.setCustomValidity('')
-
-    const isValid = target.validity.valid
+    const isValid = event.target.validity.valid
 
     if (isValid) {
-      this.clearError(target, ctx)
+      this.clearError(target)
     } else {
-      const message = ctx.validationMessage
-      if (message) target.setCustomValidity(message)
-      this.showValidationMessage(target, ctx)
+      this.showValidationMessage(target)
     }
   }
 
-  getValidationContext(target) {
-    const parentElement = target?.parentElement || null
-    const kitElement = this.getKitElement(target)
-    const controlWrapper = this.getControlWrapper(target, kitElement)
-    const errorParent = this.getErrorParent(target, kitElement, parentElement)
-    const validationMessage = this.getValidationMessage(target, kitElement)
+  showValidationMessage(target) {
+    const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
 
-    return {
-      parentElement,
-      kitElement,
-      controlWrapper,
-      errorParent,
-      validationMessage,
-      isPhoneNumberInput: !!kitElement?.classList?.contains('pb_phone_number_input'),
-      isTimePickerInput: !!kitElement?.classList?.contains('pb_time_picker'),
-    }
-  }
+    // FIX: Add null check for kitElement
+    if (!kitElement) return
 
-  showValidationMessage(target, ctx = this.getValidationContext(target)) {
-    const { kitElement, controlWrapper, errorParent, validationMessage, isPhoneNumberInput, isTimePickerInput } = ctx
+    // Check if this is a phone number input
+    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
+    
+    // Check if this is a TimePicker input
+    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
 
     // ensure clean error message state
-    this.clearError(target, ctx)
-    if (kitElement) kitElement.classList.add('error')
-
-    if (controlWrapper) controlWrapper.classList.add('error')
+    this.clearError(target)
+    kitElement.classList.add('error')
 
+    // Only add error message if it's NOT a phone number input or TimePicker input
     if (!isPhoneNumberInput && !isTimePickerInput) {
-      const message = validationMessage || target.validationMessage
+      // set the error message element
+      const errorMessageContainer = this.errorMessageContainer
 
-      let errorMessageElement = errorParent.querySelector(`[${FORM_VALIDATION_MESSAGE_ATTR}="true"]`)
-      if (!errorMessageElement) {
-        const existingEmpty = Array.from(errorParent.querySelectorAll(ERROR_MESSAGE_SELECTOR)).find((el) => {
-          return (el.textContent || '').trim() === ''
-        })
-        if (existingEmpty) {
-          errorMessageElement = existingEmpty
-          errorMessageElement.setAttribute(FORM_VALIDATION_MESSAGE_ATTR, 'true')
-          errorMessageElement.setAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR, 'true')
-        }
-      }
+      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-      if (!errorMessageElement) {
-        errorMessageElement = this.errorMessageContainer
-        errorParent.appendChild(errorMessageElement)
-      }
+      errorMessageContainer.innerHTML = target.validationMessage
 
-      errorMessageElement.textContent = message
-      // If we previously hid a reused error element, unhide it now.
-      errorMessageElement.style.display = ""
+      // add the error message element to the dom tree
+      parentElement.appendChild(errorMessageContainer)
     }
   }
 
-  clearError(target, ctx = this.getValidationContext(target)) {
-    const { kitElement, controlWrapper, errorParent } = ctx
+  clearError(target) {
+    const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+    // Remove error class from kit element
     if (kitElement) kitElement.classList.remove('error')
-    if (controlWrapper) controlWrapper.classList.remove('error')
-    const messageEl = errorParent.querySelector(`[${FORM_VALIDATION_MESSAGE_ATTR}="true"]`)
-    if (messageEl) {
-      const reused = messageEl.getAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR) === 'true'
-      if (reused) {
-        messageEl.textContent = ''
-        messageEl.style.display = "none"
-        messageEl.removeAttribute(FORM_VALIDATION_MESSAGE_ATTR)
-        messageEl.removeAttribute(FORM_VALIDATION_MESSAGE_REUSED_ATTR)
-      } else {
-        messageEl.remove()
-      }
-    }
-  }
-
-  getErrorParent(target, kitElement, parentElement) {
-    const candidate =
-      target.closest('.text_input_wrapper') ||
-      target.closest('.pb_select_kit_wrapper') ||
-      target.closest('.dropdown_wrapper') ||
-      target.closest('.input_wrapper') ||
-      target.closest('.pb_typeahead_wrapper') ||
-      kitElement ||
-      parentElement
-
-    if (kitElement && candidate && candidate !== kitElement && !kitElement.contains(candidate)) {
-      return kitElement
-    }
-
-    return candidate
-  }
-
-  getControlWrapper(target, kitElement) {
-    return (
-      target.closest('.dropdown_wrapper') ||
-      target.closest('.pb_select_kit_wrapper') ||
-      target.closest('.text_input_wrapper') ||
-      kitElement?.querySelector?.('.dropdown_wrapper') ||
-      kitElement?.querySelector?.('.pb_select_kit_wrapper') ||
-      null
-    )
-  }
-
-  isReactTypeaheadField(el) {
-    return !!(
-      el?.closest?.('[data-pb-react-component="Typeahead"]') ||
-      el?.closest?.('.pb_typeahead_kit.react-select')
-    )
-  }
-
-  isTypeaheadField(el) {
-    return !!el?.closest?.('.pb_typeahead_kit')
-  }
-
-  getKitElement(target) {
-    return (
-      target.closest(KIT_SELECTOR) ||
-      target.parentElement?.closest(KIT_SELECTOR) ||
-      // Some kits don't expose a *_kit class but do expose data hooks.
-      target.closest('[data-pb-select]') ||
-      target.closest('[data-pb-date-picker]') ||
-      target.closest('[data-pb-typeahead-kit]') ||
-      null
-    )
-  }
-
-  getValidationMessage(target, kitElement) {
-    const fromTarget = target.dataset?.message || target.dataset?.validationMessage
-
-    const wrapperWithMessage =
-      target.closest?.('[data-validation-message]') ||
-      target.closest?.('[data-pb-select]') ||
-      target.closest?.('.dropdown_wrapper') ||
-      target.closest?.('.pb_select_kit_wrapper')
-    const fromWrapper = wrapperWithMessage?.dataset?.validationMessage
-
-    const fromKit = kitElement?.dataset?.validationMessage
-
-    return fromTarget || fromWrapper || fromKit || ''
+    // Remove error message from parent element
+    const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
+    if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
   hasPhoneNumberValidationErrors() {
     const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
     return phoneNumberErrors.length > 0
@@ -379,25 +113,12 @@ class PbFormValidation extends PbEnhancedElement {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')
     errorContainer.classList.add(kitClassName)
-    errorContainer.setAttribute(FORM_VALIDATION_MESSAGE_ATTR, 'true')
-    errorContainer.setAttribute('role', 'alert')
-    errorContainer.setAttribute('aria-live', 'polite')
     return errorContainer
   }
   get formValidationFields() {
-    return this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
+    return this._formValidationFields =
+      this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
-
-const __pbStartFormValidation = () => {
-  if (!window.PbFormValidation || typeof window.PbFormValidation.start !== 'function') return
-  if (window.__pbFormValidationStarted) return
-  window.__pbFormValidationStarted = true
-  window.PbFormValidation.start()
-}
-
-document.addEventListener('DOMContentLoaded', __pbStartFormValidation)
-document.addEventListener('turbo:load', __pbStartFormValidation)
-document.addEventListener('turbo:render', __pbStartFormValidation)
+window.PbFormValidation = PbFormValidation

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import { warnFontAwesomeFallback } from '../utilities/iconFallbackWarning'
 
 export type IconSizes = "lg"
 | "xs"
@@ -164,6 +165,9 @@ const Icon = (props: IconProps) => {
       iconElement = <PowerIcon /> as ReactSVGElement
     } else {
       faClasses[`fa-${icon}`] = icon as string
+      if (icon && window.PB_ICONS && Object.keys(window.PB_ICONS).length > 0) {
+        warnFontAwesomeFallback(icon as string)
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -5,6 +5,7 @@
     <%= object.icon.html_safe %>
   </span>
 <% else %>
+  <%= object.warn_font_awesome_fallback %>
   <%= pb_content_tag(:i) do %>
   <% end %>
   <%= content_tag(:span, nil,

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -48,6 +48,29 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
+      def warn_font_awesome_fallback
+        return "".html_safe if Rails.env.test? || Rails.env.production?
+        return "".html_safe if icon.nil? || icon.to_s.empty?
+
+        escaped_icon = icon.to_s.gsub("'", "\\\\'")
+        message = "[Playbook] Icon '#{escaped_icon}' not found in Playbook icons. Falling back to Font Awesome. Font Awesome will be removed from Nitro in the future. Please use Playbook Icons instead. See https://playbook.powerapp.cloud/playbook_icons for available icons."
+
+        script = "<script type=\"text/javascript\">\n"
+        script += "(function() {\n"
+        script += "  var hostname = window.location.hostname;\n"
+        script += "  var isLocalDev = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.local') || hostname.includes('local.') || !hostname;\n"
+        script += "  if (!isLocalDev) return;\n"
+        script += "  if (!window.__PB_WARNED_ICONS__) window.__PB_WARNED_ICONS__ = new Set();\n"
+        script += "  if (!window.__PB_WARNED_ICONS__.has('#{escaped_icon}')) {\n"
+        script += "    window.__PB_WARNED_ICONS__.add('#{escaped_icon}');\n"
+        script += "    console.warn('#{message}');\n"
+        script += "  }\n"
+        script += "})();\n"
+        script += "</script>"
+
+        script.html_safe
+      end
+
       def classname
         generate_classname(
           "pb_icon_kit",

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

@@ -0,0 +1,56 @@
+/**
+ * Tracks which icons have already logged fallback warnings in this session
+ * to ensure we only log once per page load per icon
+ */
+const warnedIcons = new Set<string>()
+
+/**
+ * Logs a warning when a Playbook icon falls back to Font Awesome
+ * - Only logs once per icon per page load (prevents spam on re-renders)
+ * - Only logs in local development (not in production, QA, or test environments)
+ * 
+ * @param iconName - The name of the icon that wasn't found in Playbook icons
+ * 
+ * @example
+ * if (!PowerIcon) {
+ *   warnFontAwesomeFallback('my-icon')
+ * }
+ */
+export const warnFontAwesomeFallback = (iconName: string): void => {
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+    return
+  }
+
+  if (typeof window !== 'undefined') {
+    const hostname = window.location?.hostname
+    const isLocalDev = hostname === 'localhost' ||
+                       hostname === '127.0.0.1' ||
+                       hostname?.endsWith('.local') ||
+                       hostname?.includes('local.') ||
+                       !hostname
+    
+    if (!isLocalDev) {
+      return
+    }
+  }
+
+  if (warnedIcons.has(iconName)) {
+    return
+  }
+
+  warnedIcons.add(iconName)
+
+  console.warn(
+    `[Playbook] Icon '${iconName}' not found in Playbook icons. ` +
+    `Falling back to Font Awesome. ` +
+    `Font Awesome will be removed from Nitro in the future. Please use Playbook Icons instead. See https://playbook.powerapp.cloud/playbook_icons for available icons.`
+  )
+}
+
+/**
+ * Resets the warned icons tracker (useful for testing)
+ * @internal
+ */
+export const resetIconFallbackWarnings = (): void => {
+  warnedIcons.clear()
+}