playbook_ui 14.19.0 → 14.20.0.pre.alpha.play2168firstcolumnborderbug7950

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: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "People",
+        value: "people",
         id: "people1",
         expanded: true,
         status: "active",
         children: [
           {
             label: "Talent Acquisition",
-            value: "Talent Acquisition",
+            value: "talentAcquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "Business Affairs",
+            value: "businessAffairs",
             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: "Learning & Development",
+                value: "learningAndDevelopment",
                 id: "development1",
                 status: "Inactive",
               },
@@ -44,31 +44,31 @@ const treeData = [
           },
           {
             label: "People Experience",
-            value: "People Experience",
+            value: "peopleExperience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "Contact Center",
+        value: "contactCenter",
         id: "contact1",
         status: "Inactive",
         variant: "error",
         children: [
           {
             label: "Appointment Management",
-            value: "Appointment Management",
+            value: "appointmentManagement",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "Customer Service",
+            value: "customerService",
             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: "Power Home Remodeling",
+  value: "powerHomeRemodeling",
   id: "powerhome1",
   expanded: true,
   children: [
     {
       label: "People",
-      value: "People",
+      value: "people",
       id: "people1",
       children: [
         {
           label: "Talent Acquisition",
-          value: "Talent Acquisition",
+          value: "talentAcquisition",
           id: "talent1",
         },
         {
           label: "Business Affairs",
-          value: "Business Affairs",
+          value: "businessAffairs",
           id: "business1",
           children: [
             {
               label: "Initiatives",
-              value: "Initiatives",
+              value: "initiatives",
               id: "initiative1",
             },
             {
               label: "Learning & Development",
-              value: "Learning & Development",
+              value: "learningAndDevelopment",
               id: "development1",
             },
           ],
         },
         {
           label: "People Experience",
-          value: "People Experience",
+          value: "peopleExperience",
           id: "experience1",
         },
       ],
     },
     {
       label: "Contact Center",
-      value: "Contact Center",
+      value: "contactCenter",
       id: "contact1",
       children: [
         {
           label: "Appointment Management",
-          value: "Appointment Management",
+          value: "appointmentManagement",
           id: "appointment1",
         },
         {
           label: "Customer Service",
-          value: "Customer Service",
+          value: "customerService",
           id: "customer1",
         },
         {
           label: "Energy",
-          value: "Energy",
+          value: "energy",
           id: "energy1",
         },
       ],

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

@@ -41,6 +41,16 @@ const Person = (props: PersonProps): React.ReactElement => {
     className
   )
 
+  const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
+
+  if (hasAllEmptyProps) {
+    return (
+      <>
+        —
+      </>
+    )
+  }
+
   return (
     <div
         {...ariaProps}
@@ -53,13 +63,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}`}
+            text={lastName ? ` ${lastName}` : ''}
         />
       }
     </div>

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

@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
   .iti__country-list {
     min-width: $dropdown-min-width;
   }
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  // iti-spacer-horizontal's default is 8px, or $space_xs
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open {
+  .dropdown_open:not(.error) {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;  
+    border-bottom: 1px solid $border_light !important;
   }
 
   .iti__selected-country-primary {
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs; 
+    border-radius: $space_xxs;
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs; 
+    border-radius: $space_xs;
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs; 
+      border-radius: $space_xs;
       border: 1px solid $border_dark !important;
       .iti__search-input {
         background-color: $bg_dark_card;
         &:hover {
           background-color: $bg_dark_card;
-        }      
+        }
         &:active,
         &:focus {
           background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;  
+      border-bottom: 1px solid $border_dark !important;
     }
 
     .iti__country-list {
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-}
+} & GlobalProps
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+  <select name="animal" id="animal">
+    <optgroup label="Mammal">
+      <option value="1">Cat</option>
+      <option value="2">Dog</option>
+    </optgroup>
+    <optgroup label="Amphibian">
+      <option value="3">Frog</option>
+      <option value="4">Salamander</option>
+    </optgroup>
+  </select>
+<% end %>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectCustomSelectSubheaders = (props) => {
+  return (
+    <div>
+      <Select
+          label="Favorite Animal"
+          {...props}
+      >
+        <select
+            id="animal"
+            name="animal"
+            {...props}
+        >
+          <optgroup label="Mammal">
+            <option value="1">{'Cat'}</option>
+            <option value="2">{'Dog'}</option>
+          </optgroup>
+          <optgroup label="Amphibian">
+            <option value="3">{'Frog'}</option>
+            <option value="4">{'Salamander'}</option>
+          </optgroup>
+        </select>
+      </Select>
+    </div>
+  )
+}
+
+export default SelectCustomSelectSubheaders

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md

@@ -0,0 +1 @@
+To create a select with non-selectable subheaders, use a Custom Select component to render a native `<select>` containing `<optgroup>` elements. The [optgroup HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup) groups related options under a non-selectable label in the dropdown.

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

@@ -8,6 +8,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
@@ -25,6 +26,7 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
+  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)

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

@@ -11,3 +11,4 @@ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.js
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
+export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,7 +71,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input,
+        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+        input:not(.iti__search-input),
         .text_input {
           border-color: $error_dark;
         }
@@ -102,7 +103,8 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input,
+      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+      input:not(.iti__search-input),
       .text_input {
         border-color: $error;
       }

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

@@ -29,6 +29,7 @@ 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 = {
@@ -54,6 +55,7 @@ type TypeaheadProps = {
   optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
   searchContextSelector?: string,
   clearOnContextChange?: boolean,
+  preserveSearchInput?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -93,8 +95,44 @@ 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: {
@@ -124,11 +162,29 @@ 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)
@@ -137,7 +193,12 @@ 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 (clearOnContextChange) {
+          document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
+          if (preserveSearchInput) {
+            setInputValue('')
+          }
+        }
       }
 
       if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
@@ -146,7 +207,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
         if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
       }
     }
-  }, [searchContextSelector])
+  }, [searchContextSelector, clearOnContextChange, selectProps.id, preserveSearchInput])
 
   const contextArray = optionsByContext[contextValue]
   if (Array.isArray(contextArray) && contextArray.length > 0) {
@@ -168,7 +229,12 @@ 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 })
@@ -181,6 +247,10 @@ 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/_typeahead_preserve_input.jsx

@@ -0,0 +1,23 @@
+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' },
+]
+
+const TypeaheadPreserveInput = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+        preserveSearchInput
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadPreserveInput

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

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus

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

@@ -34,3 +34,4 @@ 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,3 +15,4 @@ 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'