playbook_ui 14.11.1.pre.alpha.PBNTR769sticky5359 → 14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83c318646e50eb8f4974a79029c4553c98dd90c0c878ec0fdd60fd77045d36a8
-  data.tar.gz: 777f930d187a4815ab702202437cbb96868039c9e115acfd97cee157bbd42d07
+  metadata.gz: f652f813944aec48c8bc973298758ac7c9cd498e72bdbe76c35d4153f23de637
+  data.tar.gz: aeb06568f624527493457b48c19964e1ce23add8a44dfc90f6453a4757e01063
 SHA512:
-  metadata.gz: b8a756512afdc408c56dbcccb9c6660ea746e14a3656f1fef48557bb09c57140f5f069c2160d2a6ac31883fae34861b9f909eb5fb0c05ec9fa4230145db24da9
-  data.tar.gz: 1cbeb5057637f11e479097c70b6e1e59b52abc1bd88d8f4ff0bf329e8ba56c1847eee4b3680c54c7b8cc423c0ad4c052cd77a3e9c5a348c58148a2747d0af1a0
+  metadata.gz: c730aad6b384918b56a6695814c71016baa1f8295ed5e0ba879cf9f620ecd3fb9e74c9fd9ddc3b84bd8396b84e83c4b0c90580754284671b59823bdf596ee470
+  data.tar.gz: f3043409e34d7a6c0b00576e83e3e6eeebb0e9d6e307f6075c157a9c8e4323261fe22c6f6372956be0bab4d9e95cb61935bcec6ce147a005008cdd3a26f1c14a

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

@@ -15,12 +15,6 @@
     word-wrap: normal;
   }
 
-  .sticky-header {
-    thead {
-      z-index: 3 !important;
-    }
-  }
-
   .bg-silver {
     background-color: lighten($silver, $opacity_7);
   }

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

@@ -22,7 +22,6 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
-  - advanced_table_sticky_header_responsive: Sticky Header and Responsive
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props

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

@@ -13,5 +13,4 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
-export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

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

@@ -35,6 +35,7 @@ type PhoneNumberInputProps = {
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
+  formatAsYouType?: boolean,
 }
 
 enum ValidationError {
@@ -87,6 +88,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     required = false,
     preferredCountries = [],
     value = "",
+    formatAsYouType = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -99,8 +101,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   )
 
   const inputRef = useRef<HTMLInputElement>()
+  const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
@@ -130,8 +132,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     }
   })
 
+  const unformatNumber = (formattedNumber: any) => {
+    return formattedNumber.replace(/\D/g, "")
+  }
+
   const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
+    const countryName = itiRef.current.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
     setError(`Invalid ${countryName} phone number${reasonText}`)
     return true
@@ -189,12 +195,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
-    if (itiInit) isValid(itiInit.isValidNumber())
-    if (validateOnlyNumbers(itiInit)) return
-    if (validateTooLongNumber(itiInit)) return
-    if (validateTooShortNumber(itiInit)) return
-    if (validateUnhandledError(itiInit)) return
-    if (validateMissingAreaCode(itiInit)) return
+    if (itiRef.current) isValid(itiRef.current.isValidNumber())
+    if (validateOnlyNumbers(itiRef.current)) return
+    if (validateTooLongNumber(itiRef.current)) return
+    if (validateTooShortNumber(itiRef.current)) return
+    if (validateUnhandledError(itiRef.current)) return
+    if (validateMissingAreaCode(itiRef.current)) return
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -203,10 +209,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
-    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    let phoneNumberData
+    if (formatAsYouType) {
+      const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+      phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+    } else {
+      phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
+    }
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
-    isValid(itiInit.isValidNumber())
+    isValid(itiRef.current.isValidNumber())
   }
 
   // Separating Concerns as React Docs Recommend
@@ -230,9 +242,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       onlyCountries,
       countrySearch: false,
       fixDropdownWidth: false,
-      formatAsYouType: false,
+      formatAsYouType: formatAsYouType,
     })
 
+    itiRef.current = telInputInit;
+
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
@@ -243,7 +257,11 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-    setItiInit(telInputInit)
+    if (formatAsYouType) {
+      inputRef.current?.addEventListener("input", (evt) => {
+        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
+      });
+    }
   }, [])
 
   let textInputProps: {[key: string]: any} = {

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

@@ -0,0 +1,15 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "phone_number_input",
+    format_as_you_type: true
+}) %>
+
+<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
+
+<%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => {
+        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
+        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
+
+        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
+    })
+<% end %>

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

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { PhoneNumberInput, Body } from "playbook-ui";
+
+const PhoneNumberInputFormat = (props) => {
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    const handleOnChange = ({ number }) => {
+        setPhoneNumber(number);
+    };
+
+    return (
+        <>
+            <PhoneNumberInput
+                formatAsYouType
+                id="format"
+                onChange={handleOnChange}
+                {...props}
+            />
+            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
+        </>
+    );
+};
+
+export default PhoneNumberInputFormat;

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

@@ -0,0 +1 @@
+NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -8,10 +8,12 @@ examples:
   - 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
+  - phone_number_input_format: Format as You Type
 
   rails:
   - 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_validation: Form Validation
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_format: Format as You Type

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

@@ -5,3 +5,4 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
 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'
+export { default as PhoneNumberInputFormat } from './_phone_number_input_format'

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

@@ -21,6 +21,8 @@ module Playbook
                    default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
+      prop :format_as_you_type, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -32,6 +34,7 @@ module Playbook
           dark: dark,
           disabled: disabled,
           error: error,
+          formatAsYouType: format_as_you_type,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../utilities/test-utils";
+import { render, screen, act } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -120,3 +120,22 @@ test("should trigger callback", () => {
 
   expect(handleOnValidate).toBeCalledWith(true)
 });
+
+test("should format phone number as '555-555-5555' with formatAsYouType and 'us' country", () => {
+    const props = {
+        initialCountry: 'us',
+        formatAsYouType: true,
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    
+    const input = screen.getByRole("textbox");
+    
+    act(() => {
+        input.value = "5555555555";
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(input.value).toBe("555-555-5555");
+});

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,7 +1,7 @@
 @import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
-    display: block;
     overflow-x: scroll;
 
     // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
@@ -27,11 +27,12 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-            border-radius: 4px;
-            box-shadow: 1px 0 0 0px $border_light,
+                &:has(> table.table-card) {
+                    border-radius: $border_rad_light;
+                    box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
-        }
-
+                }
+            }
         &[class^=pb_table].table-sm.table-card thead tr th:first-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;