playbook_ui 16.2.0.pre.rc.2 → 16.2.0.pre.rc.3

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

@@ -1,12 +1,12 @@
-import React, {useState, useEffect, forwardRef, useRef} from "react"
-import Select from "react-select"
-import AsyncSelect from "react-select/async"
-import CreateableSelect from "react-select/creatable"
-import AsyncCreateableSelect from "react-select/async-creatable"
-import {get, isString, uniqueId} from "../utilities/object"
+import React, { useState, useEffect, forwardRef, useRef} from 'react'
+import Select from 'react-select'
+import AsyncSelect from 'react-select/async'
+import CreateableSelect from 'react-select/creatable'
+import AsyncCreateableSelect from 'react-select/async-creatable'
+import { get, isString, uniqueId } from '../utilities/object'
 
-import {globalProps, GlobalProps} from "../utilities/globalProps"
-import classnames from "classnames"
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+import classnames from 'classnames'
 
 import {
   Control,
@@ -21,8 +21,8 @@ import {
 
 import * as kitComponents from "./components"
 
-import {noop, buildDataProps, buildHtmlProps} from "../utilities/props"
-import {GenericObject, Noop} from "../types"
+import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GenericObject, Noop } from '../types'
 
 /**
  * @typedef {object} Props
@@ -33,55 +33,32 @@ import {GenericObject, Noop} from "../types"
  */
 
 type TypeaheadProps = {
-  async?: boolean
-  className?: string
-  components?: GenericObject
-  createable?: boolean
-  dark?: boolean
-  data?: {[key: string]: string}
-  disabled?: boolean
-  error?: string
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)}
-  id?: string
-  inputDisplay?: "pills" | "none"
-  label?: string
-  loadOptions?: string | Noop
-  getOptionLabel?: string | (() => string)
-  getOptionValue?: string | (() => string)
-  name?: string
-  options?: Array<{label: string; value?: string}>
-  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl"
-  pillColor?:
-    | "primary"
-    | "neutral"
-    | "success"
-    | "warning"
-    | "error"
-    | "info"
-    | "data_1"
-    | "data_2"
-    | "data_3"
-    | "data_4"
-    | "data_5"
-    | "data_6"
-    | "data_7"
-    | "data_8"
-    | "windows"
-    | "siding"
-    | "roofing"
-    | "doors"
-    | "gutters"
-    | "solar"
-    | "insulation"
-    | "accessories"
-  onChange?: any
-  optionsByContext?: Record<string, Array<{label: string; value?: string}>>
-  required?: boolean
-  requiredIndicator?: boolean
-  validation?: {message: string}
-  searchContextSelector?: string
-  clearOnContextChange?: boolean
-  preserveSearchInput?: boolean
+  async?: boolean,
+  className?: string,
+  components?: GenericObject,
+  createable?: boolean,
+  dark?: boolean,
+  data?: { [key: string]: string },
+  disabled?: boolean,
+  error?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  inputDisplay?: "pills" | "none",
+  label?: string,
+  loadOptions?: string | Noop,
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
+  name?: string,
+  options?: Array<{ label: string; value?: string }>,
+  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  onChange?: any,
+  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
+  required?: boolean,
+  validation?: { message: string },
+  searchContextSelector?: string,
+  clearOnContextChange?: boolean,
+  preserveSearchInput?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -93,390 +70,329 @@ export type SelectValueType = {
 }
 
 type TagOnChangeValues = {
-  action?: string
-  option?: SelectValueType
-  removedValue?: string
+  action?: string,
+  option?: SelectValueType,
+  removedValue?: string,
 }
 
 /**
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
-  ({
-    async,
-    className,
-    components = {},
-    createable,
-    error = "",
-    data = {},
-    disabled = false,
-    getOptionLabel,
-    getOptionValue,
-    htmlOptions = {},
-    id,
-    inputDisplay = "pills",
-    name,
-    label,
-    loadOptions = noop,
-    marginBottom = "sm",
-    pillColor,
-    onChange,
-    optionsByContext = {},
-    searchContextSelector,
-    required = false,
-    requiredIndicator = false,
-    validation,
-    clearOnContextChange = false,
-    preserveSearchInput = false, // Default to false to maintain backward compatibility
-    ...props
-  }: TypeaheadProps) => {
-    // State to manage the input value when preserveSearchInput is true
-    const [inputValue, setInputValue] = useState("")
-    // State to track if form has been submitted to control validation display for react rendered rails kit
-    const [formSubmitted, setFormSubmitted] = useState(false)
-    // State to track if user has made a selection (to disable defaultValue focus behavior)
-    const [hasUserSelected, setHasUserSelected] = useState(false)
-
-    // If preserveSearchInput is true, we need to control the input value
-    const handleInputChange = preserveSearchInput
-      ? (newValue: string, actionMeta: {action: string}) => {
-          // Only update the input value for certain actions
-          if (actionMeta.action === "input-change") {
-            setInputValue(newValue)
-          } else if (actionMeta.action === "menu-close" && !props.value) {
-            // Don't clear the input when the menu closes without a selection
-            // unless the component is controlled and has a value
-          } else if (actionMeta.action === "set-value") {
-            // When an option is selected, clear the input
-            setInputValue("")
-          }
-
-          // If the original onInputChange was provided, call it too
-          if (props.onInputChange) {
-            return props.onInputChange(newValue, actionMeta)
-          }
-          return newValue
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
+  async,
+  className,
+  components = {},
+  createable,
+  error = "",
+  data = {},
+  disabled = false,
+  getOptionLabel,
+  getOptionValue,
+  htmlOptions = {},
+  id,
+  inputDisplay = "pills",
+  name,
+  loadOptions = noop,
+  marginBottom = "sm",
+  pillColor,
+  onChange,
+  optionsByContext = {},
+  searchContextSelector,
+  required = false,
+  validation,
+  clearOnContextChange = false,
+  preserveSearchInput = false, // Default to false to maintain backward compatibility
+  ...props
+}: TypeaheadProps) => {
+  // State to manage the input value when preserveSearchInput is true
+  const [inputValue, setInputValue] = useState("")
+  // State to track if form has been submitted to control validation display for react rendered rails kit
+  const [formSubmitted, setFormSubmitted] = useState(false)
+  // State to track if user has made a selection (to disable defaultValue focus behavior)
+  const [hasUserSelected, setHasUserSelected] = useState(false)
+
+  // If preserveSearchInput is true, we need to control the input value
+  const handleInputChange = preserveSearchInput
+    ? (newValue: string, actionMeta: {action: string}) => {
+        // Only update the input value for certain actions
+        if (actionMeta.action === 'input-change') {
+          setInputValue(newValue)
+        } else if (actionMeta.action === 'menu-close' && !props.value) {
+          // Don't clear the input when the menu closes without a selection
+          // unless the component is controlled and has a value
+        } else if (actionMeta.action === 'set-value') {
+          // When an option is selected, clear the input
+          setInputValue('')
         }
-      : props.onInputChange
-
-    // Handle blur events if we're preserving input
-    const handleBlur = preserveSearchInput
-      ? (event: React.FocusEvent<HTMLInputElement>) => {
-          // Do not clear input on blur - the value is preserved in our state
-          if (props.onBlur) {
-            props.onBlur(event)
-          }
-        }
-      : props.onBlur
-
-    // Create a ref to access React Select instance
-    const selectRef = useRef<any>(null)
-
-    // Helper function to flatten grouped options if custom groups are used
-    const flattenOptions = (options: any[]): any[] => {
-      if (!options) return []
 
-      return options.reduce((acc, option) => {
-        if (option.options && Array.isArray(option.options)) {
-          return [...acc, ...option.options]
+        // If the original onInputChange was provided, call it too
+        if (props.onInputChange) {
+          return props.onInputChange(newValue, actionMeta)
         }
-        return [...acc, option]
-      }, [])
-    }
-
-    // Configure focus on selected option using React Select's API
-    const handleMenuOpen = () => {
-      setTimeout(() => {
-        let currentValue = props.value || props.defaultValue
-
-        // Handle react rendered rails version which passes arrays even for single selects
-        if (Array.isArray(currentValue) && currentValue.length > 0) {
-          currentValue = currentValue[0]
+        return newValue
+      }
+    : props.onInputChange
+
+  // Handle blur events if we're preserving input
+  const handleBlur = preserveSearchInput
+    ? (event: React.FocusEvent<HTMLInputElement>) => {
+        // Do not clear input on blur - the value is preserved in our state
+        if (props.onBlur) {
+          props.onBlur(event)
         }
-
-        // Only apply custom focus if user has NOT made a selection yet
-        if (
-          currentValue &&
-          selectRef.current &&
-          !hasUserSelected &&
-          !props.isMulti
-        ) {
-          const options = props.options
-          if (options) {
-            // Flatten grouped options to find the matching option and find matching option
-            const flatOptions = flattenOptions(options)
-
-            const targetOption = flatOptions.find((option: any) => {
-              const optionValue = props.getOptionValue
-                ? props.getOptionValue(option)
-                : option.value
-              const currentOptionValue = props.getOptionValue
-                ? props.getOptionValue(currentValue)
-                : currentValue.value
-              return optionValue === currentOptionValue
-            })
-
-            if (targetOption) {
-              // Use React Select's internal state to set focused option
-              if (selectRef.current && selectRef.current.setState) {
-                selectRef.current.setState({
-                  focusedOption: targetOption,
-                  focusedValue: null,
-                })
-
-                // Handle scrolling so selected option is visible
-                setTimeout(() => {
-                  if (selectRef.current && selectRef.current.menuListRef) {
-                    const menuElement = selectRef.current.menuListRef
-                    // Find the focused option using React Select's class
-                    const focusedElement = menuElement.querySelector(
-                      ".typeahead-kit-select__option--is-focused",
-                    )
-
-                    if (focusedElement) {
-                      const optionTop = focusedElement.offsetTop
-                      const optionHeight = focusedElement.offsetHeight
-                      const menuHeight = menuElement.clientHeight
-
-                      // Set the menu's scrollTop to position the selected option in the middle
-                      const scrollToMiddle =
-                        optionTop - menuHeight / 2 + optionHeight / 2
-                      menuElement.scrollTop = Math.max(0, scrollToMiddle)
-                    }
+      }
+    : props.onBlur
+
+  // Create a ref to access React Select instance
+  const selectRef = useRef<any>(null)
+
+  // Helper function to flatten grouped options if custom groups are used
+  const flattenOptions = (options: any[]): any[] => {
+    if (!options) return []
+    
+    return options.reduce((acc, option) => {
+      if (option.options && Array.isArray(option.options)) {
+        return [...acc, ...option.options]
+      }
+      return [...acc, option]
+    }, [])
+  }
+
+  // Configure focus on selected option using React Select's API
+  const handleMenuOpen = () => {
+    setTimeout(() => {
+      let currentValue = props.value || props.defaultValue
+
+      // Handle react rendered rails version which passes arrays even for single selects
+      if (Array.isArray(currentValue) && currentValue.length > 0) {
+        currentValue = currentValue[0]
+      }
+      
+      // Only apply custom focus if user has NOT made a selection yet
+      if (currentValue && selectRef.current && !hasUserSelected && !props.isMulti) {
+
+        const options = props.options
+        if (options) {
+          // Flatten grouped options to find the matching option and find matching option
+          const flatOptions = flattenOptions(options)
+          
+          const targetOption = flatOptions.find((option: any) => {
+            const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
+            const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
+            return optionValue === currentOptionValue
+          })
+          
+          if (targetOption) {
+            // Use React Select's internal state to set focused option
+            if (selectRef.current && selectRef.current.setState) {
+              selectRef.current.setState({
+                focusedOption: targetOption,
+                focusedValue: null
+              })
+              
+              // Handle scrolling so selected option is visible
+              setTimeout(() => {
+                if (selectRef.current && selectRef.current.menuListRef) {
+                  const menuElement = selectRef.current.menuListRef
+                  // Find the focused option using React Select's class
+                  const focusedElement = menuElement.querySelector('.typeahead-kit-select__option--is-focused')
+                  
+                  if (focusedElement) {
+                    const optionTop = focusedElement.offsetTop
+                    const optionHeight = focusedElement.offsetHeight
+                    const menuHeight = menuElement.clientHeight
+                    
+                    // Set the menu's scrollTop to position the selected option in the middle
+                    const scrollToMiddle = optionTop - (menuHeight / 2) + (optionHeight / 2)
+                    menuElement.scrollTop = Math.max(0, scrollToMiddle)
                   }
-                }, 20)
-              }
+                }
+              }, 20)
             }
           }
         }
-      }, 0)
-
-      // Call original onMenuOpen if provided
-      if (props.onMenuOpen) {
-        props.onMenuOpen()
       }
+    }, 0)
+    
+    // Call original onMenuOpen if provided
+    if (props.onMenuOpen) {
+      props.onMenuOpen()
     }
-
-    const selectProps = {
-      cacheOptions: true,
-      components: {
-        Control,
-        ClearIndicator,
-        IndicatorsContainer,
-        IndicatorSeparator: null as null,
-        MenuList,
-        MultiValue,
-        Option,
-        Placeholder,
-        ValueContainer,
-        ...components,
-      },
-      loadOptions: isString(loadOptions)
-        ? get(window, loadOptions)
-        : loadOptions,
-      getOptionLabel: isString(getOptionLabel)
-        ? get(window, getOptionLabel)
-        : getOptionLabel,
-      getOptionValue: isString(getOptionValue)
-        ? get(window, getOptionValue)
-        : getOptionValue,
-      defaultOptions: true,
-      id: id || uniqueId(),
-      inputDisplay: inputDisplay,
-      inline: false,
-      isClearable: true,
-      isSearchable: true,
-      label: label,
-      name,
-      multiKit: "",
-      onCreateOption: null as null,
-      plusIcon: false,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onMultiValueClick: (_option: SelectValueType): any => undefined,
-      pillColor: pillColor,
-      ...(preserveSearchInput ? {inputValue} : {}),
-      onInputChange: handleInputChange,
-      onBlur: handleBlur,
-      onMenuOpen: handleMenuOpen,
-      required,
-      requiredIndicator: requiredIndicator,
-      ...props,
-    }
-
-    const [contextValue, setContextValue] = useState("")
-
-    // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
-    useEffect(() => {
-      const handleInvalid = (event: Event) => {
-        const target = event.target as HTMLInputElement
-        const typeaheadContainer = target.closest(
-          '[data-pb-react-component="Typeahead"]',
-        )
-
-        if (typeaheadContainer) {
-          // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
-          const invalidInputName = target.name || target.getAttribute("name")
-          if (invalidInputName === name) {
-            setFormSubmitted(true)
-          }
+  }
+
+  const selectProps = {
+    cacheOptions: true,
+    required,
+    components: {
+      Control,
+      ClearIndicator,
+      IndicatorsContainer,
+      IndicatorSeparator: null as null,
+      MenuList,
+      MultiValue,
+      Option,
+      Placeholder,
+      ValueContainer,
+      ...components
+    },
+    loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
+    getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
+    getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
+    defaultOptions: true,
+    id: id || uniqueId(),
+    inputDisplay: inputDisplay,
+    inline: false,
+    isClearable: true,
+    isSearchable: true,
+    name,
+    multiKit: '',
+    onCreateOption: null as null,
+    plusIcon: false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onMultiValueClick: (_option: SelectValueType): any => undefined,
+    pillColor: pillColor,
+    ...(preserveSearchInput ? { inputValue } : {}),
+    onInputChange: handleInputChange,
+    onBlur: handleBlur,
+    onMenuOpen: handleMenuOpen,
+    ...props,
+  }
+
+  const [contextValue, setContextValue] = useState("")
+
+  // Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
+
+      if (typeaheadContainer) {
+        // Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
         }
       }
-      document.addEventListener("invalid", handleInvalid, true)
-
-      return () => {
-        document.removeEventListener("invalid", handleInvalid, true)
-      }
-    }, [name])
+    }
+    document.addEventListener('invalid', handleInvalid, true)
+    
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name])
 
-    // Add listener for clearing
-    useEffect(() => {
-      const handleClear = () => {
-        if (preserveSearchInput) {
-          setInputValue("")
-        }
+  // Add listener for clearing
+  useEffect(() => {
+    const handleClear = () => {
+      if (preserveSearchInput) {
+        setInputValue('')
       }
+    }
 
-      document.addEventListener(
-        `pb-typeahead-kit-${selectProps.id}:clear`,
-        handleClear,
-      )
+    document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
 
-      return () => {
-        document.removeEventListener(
-          `pb-typeahead-kit-${selectProps.id}:clear`,
-          handleClear,
-        )
-      }
-    }, [selectProps.id, preserveSearchInput])
-
-    useEffect(() => {
-      if (searchContextSelector) {
-        const searchContextElement = document.getElementById(
-          searchContextSelector,
-        )
-
-        setContextValue((searchContextElement as HTMLInputElement)?.value)
-        const handleContextChange = (e: Event) => {
-          const target = e.target as HTMLInputElement
-          setContextValue(target.value)
-          if (clearOnContextChange) {
-            document.dispatchEvent(
-              new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`),
-            )
-            if (preserveSearchInput) {
-              setInputValue("")
-            }
+    return () => {
+      document.removeEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, handleClear)
+    }
+  }, [selectProps.id, preserveSearchInput])
+
+  useEffect(() => {
+    if (searchContextSelector) {
+      const searchContextElement = document.getElementById(searchContextSelector)
+
+      setContextValue((searchContextElement as HTMLInputElement)?.value)
+      const handleContextChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        setContextValue(target.value);
+        if (clearOnContextChange) {
+          document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
+          if (preserveSearchInput) {
+            setInputValue('')
           }
         }
+      }
 
-        if (searchContextElement)
-          searchContextElement.addEventListener("change", handleContextChange)
+      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
 
-        return () => {
-          if (searchContextElement)
-            searchContextElement.removeEventListener(
-              "change",
-              handleContextChange,
-            )
-        }
+      return () => {
+        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
       }
-    }, [
-      searchContextSelector,
-      clearOnContextChange,
-      selectProps.id,
-      preserveSearchInput,
-    ])
-
-    const contextArray = optionsByContext[contextValue]
-    if (Array.isArray(contextArray) && contextArray.length > 0) {
-      selectProps.options = contextArray
     }
-
-    const Tag = createable
-      ? async
-        ? AsyncCreateableSelect
-        : CreateableSelect
-      : async
-        ? AsyncSelect
-        : Select
-
-    const handleOnChange = (
-      _data: SelectValueType,
-      {action, option, removedValue}: TagOnChangeValues,
-    ) => {
-      if (onChange) {
-        const isReactHookForm = onChange.toString().includes("target")
-        if (isReactHookForm) {
-          onChange({target: {name, value: _data}})
-        } else {
-          onChange(_data)
-        }
+  }, [searchContextSelector, clearOnContextChange, selectProps.id, preserveSearchInput])
+
+  const contextArray = optionsByContext[contextValue]
+  if (Array.isArray(contextArray) && contextArray.length > 0) {
+    selectProps.options = contextArray
+  }
+
+  const Tag = (
+    createable
+      ? (async ? AsyncCreateableSelect : CreateableSelect)
+      : (async ? AsyncSelect : Select)
+  )
+
+  const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+    if (onChange) {
+      const isReactHookForm = onChange.toString().includes("target")
+      if (isReactHookForm) {
+        onChange({ target: { name, value: _data } })
+      } else {
+        onChange(_data)
       }
+    }
 
-      // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
-      if (action === "select-option") {
-        setFormSubmitted(false)
-        // Mark that user has made a selection to disable default value focus behavior
-        setHasUserSelected(true)
-      }
+    // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
+    if (action === 'select-option') {
+      setFormSubmitted(false)
+      // Mark that user has made a selection to disable default value focus behavior
+      setHasUserSelected(true)
+    }
 
-      // If a value is selected and we're preserving input on blur, clear the input
-      if (action === "select-option" && preserveSearchInput) {
-        setInputValue("")
-      }
+    // If a value is selected and we're preserving input on blur, clear the input
+    if (action === 'select-option' && preserveSearchInput) {
+      setInputValue('')
+    }
 
-      if (action === "select-option") {
-        if (selectProps.onMultiValueClick && option)
-          selectProps.onMultiValueClick(option)
-        const multiValueClearEvent = new CustomEvent(
-          `pb-typeahead-kit-${selectProps.id}-result-option-select`,
-          {detail: option ? option : _data},
-        )
-        document.dispatchEvent(multiValueClearEvent)
-      }
-      if (action === "remove-value" || action === "pop-value") {
-        const multiValueRemoveEvent = new CustomEvent(
-          `pb-typeahead-kit-${selectProps.id}-result-option-remove`,
-          {detail: removedValue},
-        )
-        document.dispatchEvent(multiValueRemoveEvent)
-      }
-      if (action === "clear") {
-        const multiValueClearEvent = new CustomEvent(
-          `pb-typeahead-kit-${selectProps.id}-result-clear`,
-        )
-        document.dispatchEvent(multiValueClearEvent)
-        // If preserving input on blur, also clear input on explicit clear
-        if (preserveSearchInput) {
-          setInputValue("")
-        }
+    if (action === 'select-option') {
+      if (selectProps.onMultiValueClick && option) selectProps.onMultiValueClick(option)
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
+      document.dispatchEvent(multiValueClearEvent)
+    }
+    if (action === 'remove-value' || action === 'pop-value') {
+      const multiValueRemoveEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-remove`, { detail: removedValue })
+      document.dispatchEvent(multiValueRemoveEvent)
+    }
+    if (action === 'clear') {
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
+      document.dispatchEvent(multiValueClearEvent)
+      // If preserving input on blur, also clear input on explicit clear
+      if (preserveSearchInput) {
+        setInputValue('')
       }
     }
+  }
 
-    const filteredProps: TypeaheadProps = {...props}
-    delete filteredProps.truncate
+  const filteredProps: TypeaheadProps = {...props}
+  delete filteredProps.truncate
 
-    const dataProps = buildDataProps(data)
-    const htmlProps = buildHtmlProps(htmlOptions)
-    const classes = classnames(
-      "pb_typeahead_kit react-select",
-      `mb_${marginBottom}`,
-      globalProps(filteredProps),
-      className
-    )
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(
+    'pb_typeahead_kit react-select',
+    `mb_${marginBottom}`,
+    globalProps(filteredProps),
+    className
+  )
 
-    const inlineClass = selectProps.inline ? "inline" : null
+  const inlineClass = selectProps.inline ? 'inline' : null
 
-    const shouldShowValidationError = required && formSubmitted
+  const shouldShowValidationError = required && 
+                                   formSubmitted
 
-    const errorDisplay =
-      error ||
-      (shouldShowValidationError
-        ? validation?.message || "Please fill out this field."
-        : "")
+  const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
 
-    return (
+  return (
     <div
         {...dataProps}
         {...htmlProps}
@@ -491,15 +407,12 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
           {...selectProps}
       />
     </div>
-    )
-  },
-)
+  )
+})
 
 Object.keys(kitComponents).forEach((k) => {
-  (Typeahead as GenericObject)[k] = (
-    kitComponents as {[key: string]: unknown}
-  )[k]
+  (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
-Typeahead.displayName = "Typeahead"
+Typeahead.displayName = 'Typeahead'
 export default Typeahead