playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175 → 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4123

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
-  data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
+  metadata.gz: 3eef39be443e3cd1b5d31fbf6c45383f7efbcdd3f41194ba4a977c21700bd862
+  data.tar.gz: 47fb682efcfea59eb34f2fcdcb3f15e52a254ee12d7c9974d18fbe2a411ca6b0
 SHA512:
-  metadata.gz: 225b32c1ce7e41af851a4bfd0d40cc502d3458ec796146f76511dc9db8504316f154060857c35737a93dc4ecfb0e6a9d2d36690883b463f1dc23e16b135a44dd
-  data.tar.gz: e31d7f5cad0f0e456e2afb580573650eb72391230227dcad825a32fcb221f906660609baf3941ff8cbdebec68185fc064c0685e318825b594668b04601649527
+  metadata.gz: 80c6b66534b581c9c5bf5494928b003eeac846f2346fd9a7a394361abe00fdcfe616f8772df66edbbf8a9cb01f9bfddd6c23ac81ff19df22bd96de4fb5e71de9
+  data.tar.gz: 2698718348044f92ad1589b367d5c51d36a7c371f717855b9da6b4b45caab620291ffa0253c98090dd1b731709286498a6a9c274b1ced957f0d76b5b76a7f1d4

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
 
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
+  const createCellFunction = (cellAccessors: string[]) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,11 +101,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    // Use customRenderer if provided, otherwise default rendering
-    if (customRenderer) {
-      return customRenderer(row, getValue())
-    }
-
       switch (row.depth) {
         case 0: {
           return (
@@ -139,31 +134,18 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column, index) => {
+      columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-
-  // Use the custom renderer if provided, EXCEPT for the first column
-  if (index !== 0) {
-    if (column.cellAccessors || column.customRenderer) {
-      columnStructure.cell = createCellFunction(
-        column.cellAccessors,
-        column.customRenderer
-      )
-    }
-  } else {
-    // For the first column, apply createCellFunction without customRenderer
-    if (column.cellAccessors) {
-      columnStructure.cell = createCellFunction(column.cellAccessors)
-    }
-  }
-
-  return columnStructure
-})
+      if (column.cellAccessors) {
+        columnStructure.cell = createCellFunction(column.cellAccessors)
+      }
+      return columnStructure
+    })
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
-
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -16,4 +15,3 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
-  - advanced_table_custom_cell: Custom Components for Cells

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

@@ -9,4 +9,3 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
-export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'

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

@@ -5,54 +5,7 @@ $transform-rotate-deg: 135deg;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
-:root {
-  --iti-arrow-padding: #{$space_xs};
-  --iti-spacer-horizontal: #{$space_sm};
-  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
-  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
-  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
-  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
-}
-
 .pb_phone_number_input {
-  .iti {
-    width: 100%;
-  }
-
-  .iti__flag {
-    margin-right: 6px;
-  }
-
-  .iti__a11y-text {
-    display: none;
-  }
-
-  .iti__selected-dial-code {
-    font-family: $font_family_base;
-    font-size: $font_base;
-    line-height: 1.5;
-    letter-spacing: $lspace_normal;
-    font-weight: $regular;
-    font-style: normal;
-    text-rendering: optimizeLegibility;
-    -moz-font-feature-settings: "liga" on;
-    color: $charcoal;
-  }
-
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
-  .iti__country-list .iti__flag, .iti__country-name {
-    margin-right: $space_xs;
-  }
-  [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
-    margin-right: 0;
-    margin-left: $space_xs;
-  }
-
-  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
-  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
-    background-color: transparent;
-  }
-
   input::placeholder {
     color: $focus_input_light;
   }
@@ -62,13 +15,13 @@ $flag-min-resolution: 192dpi;
       border-color: $primary !important;
     }
 
-    .iti__selected-country:focus-visible {
+    .iti__selected-flag:focus-visible {
       outline-style: none;
     }
   }
 
   .iti__country {
-    padding: 5px $space_xs 5px $space_sm;
+    padding: 5px 10px 5px 16px;
     transition: $transition_default;
   }
 
@@ -76,23 +29,8 @@ $flag-min-resolution: 192dpi;
     border-bottom: 1px solid $border_light !important;  
   }
 
-  .iti__selected-country-primary {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .iti__flag {
-      margin-right: 0;
-    }
-  }
-
-  .iti__selected-country {
-    position: absolute;
-    top: 0;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    border-width: 0;
+  .iti__selected-flag {
+    padding: 0 $space_xxs 0 $space_sm;
     border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
@@ -113,24 +51,24 @@ $flag-min-resolution: 192dpi;
     }
   }
 
-  .iti__country-container:hover + .text_input {
+  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
+    background-color: $focus_input_light;
+  }
+
+  .iti__flag-container:hover + .text_input {
     background-color: $focus_input_light;
   }
 
   .iti__flag {
-    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
+    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     border-radius: 1px;
   }
 
-  .iti__flag.iti__globe {
-    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
-    background-position: center;
-    height: 16px;
-    width: 16px;
-    background-size: 16px 16px;
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
-  .iti--show-flags .iti__selected-country {
+  .iti--separate-dial-code .iti__selected-flag {
     background-color: rgba($white, $opacity_1);
   }
 
@@ -198,12 +136,10 @@ $flag-min-resolution: 192dpi;
   .iti__dropdown-content {
     border-radius: $space_xs; 
     border: 1px solid $border_light !important;
-    position: absolute;
-    top: 100%;
   }
 
   &.dark {
-    .iti--allow-dropdown .iti__country-container {
+    .iti--allow-dropdown .iti__flag-container {
       background-color: rgba($white, 0);
 
       &:hover {
@@ -213,13 +149,13 @@ $flag-min-resolution: 192dpi;
           background-color: rgba($white, 0.15);
         }
 
-        .iti__selected-country {
+        .iti__selected-flag {
           background-color: rgba($white, 0);
         }
       }
     }
 
-    .iti__selected-country {
+    .iti__selected-flag {
       background-color: rgba($white, 0);
       color: $white;
     }
@@ -260,15 +196,11 @@ $flag-min-resolution: 192dpi;
         background-color: rgba($white, 0.025) !important;
       }
     }
-
-    .iti__selected-dial-code {
-      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");
+      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     }
   }
 }

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

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
-import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/js/utils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -49,7 +50,7 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = intlTelInput.getCountryData()
+  const countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
     const country = countryData[i]
@@ -213,24 +214,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(formatAllCountries, [])
 
-  // If an initial country is not specified, the "globe" icon will show
-  // Always set a country
-  const fallbackCountry =
-    preferredCountries.length > 0 ? preferredCountries[0] :
-      onlyCountries.length > 0 ? onlyCountries.sort()[0] :
-        "af";
-
   useEffect(() => {
     const telInputInit = intlTelInput(inputRef.current, {
       separateDialCode: true,
-      countryOrder: preferredCountries,
+      preferredCountries,
       allowDropdown: !disabled,
       autoInsertDialCode: false,
-      initialCountry: initialCountry || fallbackCountry,
-      onlyCountries,
-      countrySearch: false,
-      fixDropdownWidth: false,
-      formatAsYouType: false,
+      initialCountry,
+      onlyCountries
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {

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

@@ -1 +1 @@
-Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.