playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2140upgraderailsdependency8003

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: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
         id: "marketingPHL1",
       },
       {
         label: "Installation Office PHL",
-        value: "Installation Office PHL",
+        value: "installationOfficePhl",
         id: "installationPHL1",
       },
       {
         label: "Warehouse PHL",
-        value: "Warehouse PHL",
+        value: "warehousePhl",
         id: "warehousePHL1",
       },
     ]
   },
   {
     label: "New Jersey",
-    value: "New Jersey",
+    value: "newJersey",
     id: "nj2",
     hideRadio: true,
     children: [
       {
         label: "New Jersey",
-        value: "New Jersey",
+        value: "newJersey",
         id: "nj3",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales NJ",
-            value: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
             id: "marketingNJ1",
           },
           {
             label: "Installation Office NJ",
-            value: "Installation Office NJ",
+            value: "installationOfficeNj",
             id: "installationNJ1",
           },
           {
             label: "Warehouse NJ",
-            value: "Warehouse NJ",
+            value: "warehouseNj",
             id: "warehouseNJ1",
           },
         ],
       },
       {
         label: "Princeton",
-        value: "Princeton",
+        value: "princeton",
         id: "princeton1",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales Princeton",
-            value: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
             id: "marketingPR1",
           },
           {
             label: "Installation Office Princeton",
-            value: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
             id: "installationPR1",
           },
           {
             label: "Warehouse Princeton",
-            value: "Warehouse Princeton",
+            value: "warehousePrinceton",
             id: "warehousePR1",
           },
         ]
@@ -86,46 +86,46 @@ const treeData = [
   },
   {
     label: "Maryland",
-    value: "Maryland",
+    value: "maryland",
     id: "MD1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales MD",
-        value: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
         id: "marketingMD1",
       },
       {
         label: "Installation Office MD",
-        value: "Installation Office MD",
+        value: "installationOfficeMd",
         id: "installationMD1",
       },
       {
         label: "Warehouse MD",
-        value: "Warehouse MD",
+        value: "warehouseMd",
         id: "warehouseMD1",
       },
     ]
   },
   {
     label: "Connecticut",
-    value: "Connecticut",
+    value: "connecticut",
     id: "CT1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales CT",
-        value: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
         id: "marketingCT1",
       },
       {
         label: "Installation Office CT",
-        value: "Installation Office CT",
+        value: "installationOfficeCt",
         id: "installationCT1",
       },
       {
         label: "Warehouse CT",
-        value: "Warehouse CT",
+        value: "warehouseCt",
         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: "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_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_overlay/_overlay.scss

@@ -78,7 +78,8 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
+    & [class*="overflow_auto"],
+    .overlay_token_container {
       &::-webkit-scrollbar {
         display: none !important;
       }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref} 
+            ref={ref}
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
         if (container) {
             const { scrollLeft, scrollWidth, clientWidth } = container;
             const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
 
             setIsAtStart(atStart);
             setIsAtEnd(atEnd);
@@ -64,16 +64,17 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
             <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ? 
+            {dynamic ?
                 <div
+                    className="overlay_token_container"
                     ref={scrollContainerRef}
                     style={{
-                        overflowX: 'auto',     
+                        overflowX: 'auto',
                     }}
                 >
                     {children}
                 </div>
-                : 
+                :
                     children
                 }
             {hasSubsequentOverlay &&

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_phone_number_input/_phone_number_input.tsx

@@ -33,6 +33,7 @@ type PhoneNumberInputProps = {
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
+  excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
@@ -88,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     },
     onValidate = () => null,
     onlyCountries = [],
+    excludeCountries = [],
     required = false,
     preferredCountries = [],
     value = "",
@@ -234,6 +236,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const fallbackCountry =
     preferredCountries.length > 0 ? preferredCountries[0] :
       onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+      excludeCountries.length > 0 ? excludeCountries.sort()[0] :
         "af";
 
   useEffect(() => {
@@ -244,6 +247,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
+      excludeCountries,
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: 'gb',
+    exclude_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputExcludeCountries = (props) => (
+  <>
+    <PhoneNumberInput
+        excludeCountries={['us', 'br']}
+        id='exclude'
+        initialCountry='gb'
+        {...props}
+    />
+  </>
+)
+
+export default PhoneNumberInputExcludeCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md

@@ -0,0 +1 @@
+Excluding countries removes the selected countries from the dropdown.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -6,7 +6,7 @@ const PhoneNumberInputOnlyCountries = (props) => (
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
-        {...props} 
+        {...props}
     />
   </>
 )

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

@@ -4,7 +4,8 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
@@ -15,9 +16,9 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  

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

@@ -2,6 +2,7 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputExcludeCountries } from './_phone_number_input_exclude_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -15,6 +15,8 @@ module Playbook
                   default: ""
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
+      prop :exclude_countries, type: Playbook::Props::Array,
+                               default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
       prop :error, type: Playbook::Props::String,
@@ -44,6 +46,7 @@ module Playbook
           label: label,
           name: name,
           onlyCountries: only_countries,
+          excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
           value: value,