playbook_ui 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx

@@ -4,80 +4,80 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "HQ",
-    value: "hQ",
+    value: "HQ",
     id: "hq1",
   },
   {
     label: "Philadelphia",
-    value: "philadelphia",
+    value: "Philadelphia",
     id: "phl1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales PHL",
-        value: "marketingAndSalesPhl",
+        value: "Marketing & Sales PHL",
         id: "marketingPHL1",
       },
       {
         label: "Installation Office PHL",
-        value: "installationOfficePhl",
+        value: "Installation Office PHL",
         id: "installationPHL1",
       },
       {
         label: "Warehouse PHL",
-        value: "warehousePhl",
+        value: "Warehouse PHL",
         id: "warehousePHL1",
       },
     ]
   },
   {
     label: "New Jersey",
-    value: "newJersey",
+    value: "New Jersey",
     id: "nj2",
     hideRadio: true,
     children: [
       {
         label: "New Jersey",
-        value: "newJersey",
+        value: "New Jersey",
         id: "nj3",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales NJ",
-            value: "marketingAndSalesNj",
+            value: "Marketing & Sales NJ",
             id: "marketingNJ1",
           },
           {
             label: "Installation Office NJ",
-            value: "installationOfficeNj",
+            value: "Installation Office NJ",
             id: "installationNJ1",
           },
           {
             label: "Warehouse NJ",
-            value: "warehouseNj",
+            value: "Warehouse NJ",
             id: "warehouseNJ1",
           },
         ],
       },
       {
         label: "Princeton",
-        value: "princeton",
+        value: "Princeton",
         id: "princeton1",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales Princeton",
-            value: "marketingAndSalesPrinceton",
+            value: "Marketing & Sales Princeton",
             id: "marketingPR1",
           },
           {
             label: "Installation Office Princeton",
-            value: "installationOfficePrinceton",
+            value: "Installation Office Princeton",
             id: "installationPR1",
           },
           {
             label: "Warehouse Princeton",
-            value: "warehousePrinceton",
+            value: "Warehouse Princeton",
             id: "warehousePR1",
           },
         ]
@@ -86,46 +86,46 @@ const treeData = [
   },
   {
     label: "Maryland",
-    value: "maryland",
+    value: "Maryland",
     id: "MD1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales MD",
-        value: "marketingAndSalesMd",
+        value: "Marketing & Sales MD",
         id: "marketingMD1",
       },
       {
         label: "Installation Office MD",
-        value: "installationOfficeMd",
+        value: "Installation Office MD",
         id: "installationMD1",
       },
       {
         label: "Warehouse MD",
-        value: "warehouseMd",
+        value: "Warehouse MD",
         id: "warehouseMD1",
       },
     ]
   },
   {
     label: "Connecticut",
-    value: "connecticut",
+    value: "Connecticut",
     id: "CT1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales CT",
-        value: "marketingAndSalesCt",
+        value: "Marketing & Sales CT",
         id: "marketingCT1",
       },
       {
         label: "Installation Office CT",
-        value: "installationOfficeCt",
+        value: "Installation Office CT",
         id: "installationCT1",
       },
       {
         label: "Warehouse CT",
-        value: "warehouseCt",
+        value: "Warehouse CT",
         id: "warehouseCT1",
       },
     ]

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx

@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         status: "active",
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             status: "active",
             variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
                 status: "Inactive",
               },
@@ -44,31 +44,31 @@ const treeData = [
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         status: "Inactive",
         variant: "error",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx

@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         status: "active",
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             status: "active",
             variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
                 status: "Inactive",
               },
@@ -44,31 +44,31 @@ const treeData = [
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         status: "Inactive",
         variant: "error",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb

@@ -2,62 +2,62 @@
 
   <% treeData = [{
   label: "Power Home Remodeling",
-  value: "powerHomeRemodeling",
+  value: "Power Home Remodeling",
   id: "powerhome1",
   expanded: true,
   children: [
     {
       label: "People",
-      value: "people",
+      value: "People",
       id: "people1",
       children: [
         {
           label: "Talent Acquisition",
-          value: "talentAcquisition",
+          value: "Talent Acquisition",
           id: "talent1",
         },
         {
           label: "Business Affairs",
-          value: "businessAffairs",
+          value: "Business Affairs",
           id: "business1",
           children: [
             {
               label: "Initiatives",
-              value: "initiatives",
+              value: "Initiatives",
               id: "initiative1",
             },
             {
               label: "Learning & Development",
-              value: "learningAndDevelopment",
+              value: "Learning & Development",
               id: "development1",
             },
           ],
         },
         {
           label: "People Experience",
-          value: "peopleExperience",
+          value: "People Experience",
           id: "experience1",
         },
       ],
     },
     {
       label: "Contact Center",
-      value: "contactCenter",
+      value: "Contact Center",
       id: "contact1",
       children: [
         {
           label: "Appointment Management",
-          value: "appointmentManagement",
+          value: "Appointment Management",
           id: "appointment1",
         },
         {
           label: "Customer Service",
-          value: "customerService",
+          value: "Customer Service",
           id: "customer1",
         },
         {
           label: "Energy",
-          value: "energy",
+          value: "Energy",
           id: "energy1",
         },
       ],

data/app/pb_kits/playbook/pb_person/_person.tsx

@@ -41,16 +41,6 @@ const Person = (props: PersonProps): React.ReactElement => {
     className
   )
 
-  const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
-
-  if (hasAllEmptyProps) {
-    return (
-      <>
-        —
-      </>
-    )
-  }
-
   return (
     <div
         {...ariaProps}
@@ -63,13 +53,13 @@ const Person = (props: PersonProps): React.ReactElement => {
           className="pb_person_first"
           tag="span"
       >
-        {firstName ?? ''}
+        {firstName}
       </Body>
       {lastName && 
         <Title
             className="pb_person_first"
             size={4}
-            text={lastName ? ` ${lastName}` : ''}
+            text={` ${lastName}`}
         />
       }
     </div>

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

@@ -29,7 +29,6 @@ import { GenericObject, Noop } from '../types'
  * @prop {boolean} async - whether Typeahead should fetch data from
  * a remote location to populate the options
  * @prop {string} label - the text for the optional typeahead input label
- * @prop {boolean} preserveSearchInput - whether to preserve the input value when the field loses focus
  */
 
 type TypeaheadProps = {
@@ -55,7 +54,6 @@ type TypeaheadProps = {
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
-  preserveSearchInput?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -95,44 +93,8 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   optionsByContext = {},
   searchContextSelector,
   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("")
-
-  // 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
-      }
-    : 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
-
   const selectProps = {
     cacheOptions: true,
     components: {
@@ -162,29 +124,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
-    ...(preserveSearchInput ? { inputValue } : {}),
-    onInputChange: handleInputChange,
-    onBlur: handleBlur,
     ...props,
   }
 
   const [contextValue, setContextValue] = useState("")
 
-  // Add listener for clearing
-  useEffect(() => {
-    const handleClear = () => {
-      if (preserveSearchInput) {
-        setInputValue('')
-      }
-    }
-
-    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)
@@ -193,12 +137,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       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 (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
       }
 
       if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
@@ -207,7 +146,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
         if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
       }
     }
-  }, [searchContextSelector, clearOnContextChange, selectProps.id, preserveSearchInput])
+  }, [searchContextSelector])
 
   const contextArray = optionsByContext[contextValue]
   if (Array.isArray(contextArray) && contextArray.length > 0) {
@@ -229,12 +168,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
         onChange(_data)
       }
     }
-
-    // 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) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -247,10 +181,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     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('')
-      }
     }
   }
 

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

@@ -34,4 +34,3 @@ examples:
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
-    - typeahead_preserve_input: Preserve Search Input

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

@@ -15,4 +15,3 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 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'