playbook_ui 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 → 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d29efc1387739988efa50765a736b0388d28d4127c2e757512a060491b1ed873
-  data.tar.gz: f444ac00a01b6ad4c04d4fb1173989c537757b3460336250fb81c501f763ec85
+  metadata.gz: bc05d54c9a3beeca0cdfd89f672b2aa6a3b5ed7cd3eb0ce9fe49aad64c2c5cf4
+  data.tar.gz: 40811095a508f62f3b0be30ba0910c8f7bf1e0a058b3c3cef71418c2db782382
 SHA512:
-  metadata.gz: 1bafc61037c2a1464d26592a4d341aae0d9897318be213a6cc5e55e1cb8757e063c0ca7b0e220a10148699e9a72a7c41de0390f78c567a5ec0dd5cbfcba45ec2
-  data.tar.gz: 71899073dbfd3874b8e9ac40787bc21529c961561474482599c71b59deb92a78e93985dd52ebd3b63f7b891877f364b073d4763bb84e9c12e22ceb2fa7e25ed3
+  metadata.gz: 21ae38d7936b12cafb50c6fb7a6bd7a1c250359e0c375eb34e713c9127876c583f22e7b983dea3fb8c54207997ea55e15221af2dc78cc87765b99868bd22b1ba
+  data.tar.gz: 1253d8ba46fb06dab662b03797e95f5b82ed240d613e4d8277d1b65c185823933ac54985828fc782c05de3cd72a889902393ffb9d0445d5ca9bbb35ebf011f11

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

@@ -1,16 +1,11 @@
-import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import 'intl-tel-input/build/js/utils.js'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/css/intlTelInput.css'
 import TextInput from '../pb_text_input/_text_input'
-import { Callback } from '../types'
-import { isEmpty } from '../utilities/object'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -24,25 +19,20 @@ type PhoneNumberInputProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
-  error?: string,
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
   label?: string,
   name?: string,
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
   preferredCountries?: string[],
-  required?: boolean,
   value?: string,
 }
 
 enum ValidationError {
   TooShort = 2,
   TooLong = 3,
-  MissingAreaCode = 4,
-  SomethingWentWrong = -99
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
@@ -50,10 +40,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  let countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    const country = countryData[i]
+    let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -64,7 +54,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const {
     aria = {},
     className,
@@ -81,9 +71,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     onChange = () => {
       void 0
     },
-    onValidate = () => null,
     onlyCountries = [],
-    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -99,100 +87,39 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
-  useEffect(() => {
-    if (error?.length > 0) {
-      onValidate(false)
-    } else {
-      onValidate(true)
-    }
-  }, [error, onValidate])
-
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-      },
-      inputNode() {
-        return inputRef.current
-      }
-    }
-  })
-
-  const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
-    const reasonText = reason.length > 0 ? ` (${reason})` : ''
-    setError(`Invalid ${countryName} phone number${reasonText}`)
-    return true
-  }
-
   const validateTooLongNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooLong) {
-      return showFormattedError('too long')
-    } else {
-      setError('')
-    }
-  }
+    const error = itiInit.getValidationError()
 
-  const validateTooShortNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooShort) {
-      return showFormattedError('too short')
+    if (error === ValidationError.TooLong) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else {
-        setError('')
-      }
+      setError("")
     }
   }
 
-  const validateOnlyNumbers = (itiInit: any) => {
-    if (!itiInit) return
-    if (inputValue && !containOnlyNumbers(inputValue)) {
-      return showFormattedError('enter numbers only')
-    }
-  }
+  const validateTooShortNumber = () => {
+    const error = itiInit.getValidationError()
 
-  const validateUnhandledError = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else if (inputValue.length === 0) {
-        setError('Missing phone number')
-        return true
-      } else {
-        return showFormattedError()
-      }
+    if (error === ValidationError.TooShort) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too short)`)
     }
   }
 
-  const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
-      showFormattedError('missing area code')
-      return true
+  const validateOnlyNumbers = () => {
+    if (inputValue && !containOnlyNumbers(inputValue)) {
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
   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
+    validateTooShortNumber()
+    validateOnlyNumbers()
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -201,6 +128,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
+    validateTooLongNumber(itiInit)
     const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
@@ -209,24 +137,25 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
-  useEffect(formatAllCountries, [])
+  useEffect(() => {
+    formatAllCountries()
+  }, [])
 
   useEffect(() => {
-    const telInputInit = intlTelInput(inputRef.current, {
+    const telInputInit = new intlTelInput(inputRef.current, {
       separateDialCode: true,
       preferredCountries,
       allowDropdown: !disabled,
-      autoInsertDialCode: false,
       initialCountry,
       onlyCountries,
-      utilsScript: "intl-tel-input/build/js/utils.js"
-    })
+    }
+    )
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
-      validateErrors()
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -235,40 +164,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     setItiInit(telInputInit)
   }, [])
 
-  let textInputProps: {[key: string]: any} = {
-    className: dropDownIsOpen ? 'dropdown_open' : '',
-    dark,
-    "data-phone-number": JSON.stringify(selectedData),
-    disabled,
-    error,
-    type: 'tel',
-    id,
-    label,
-    name,
-    onBlur: validateErrors,
-    onChange: handleOnChange,
-    value: inputValue
-  }
-
-  let wrapperProps: Record<string, unknown> = { className: classes }
-
-  if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
-  if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}
-  if (required) textInputProps.required = true
-
   return (
-    <div {...wrapperProps}>
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
-          ref={
-            inputNode => {
-              ref ? ref.current = inputNode : null
-              inputRef.current = inputNode
-            }
-          }
-          {...textInputProps}
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
+        dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
+        disabled={disabled}
+        error={error}
+        id={id}
+        label={label}
+        name={name}
+        onBlur={() => validateErrors()}
+        onChange={handleOnChange}
+        ref={inputRef}
+        value={inputValue}
       />
     </div>
   )
 }
 
-export default forwardRef(PhoneNumberInput)
+export default PhoneNumberInput

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

@@ -5,13 +5,9 @@ examples:
   - 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_clear_field: Clearing the Input Field
-  - phone_number_input_access_input_element: Accessing the Input Element
 
   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_only_countries: Limited Countries

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

@@ -2,6 +2,3 @@ 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 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

@@ -5,8 +5,6 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -17,8 +15,6 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
-      prop :error, type: Playbook::Props::String,
-                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -31,13 +27,11 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
-          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
-          required: required,
           value: value,
         }
       end

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

@@ -1,122 +1,74 @@
-import React from "react";
-import { render, screen } from "../utilities/test-utils";
-import PhoneNumberInput from "./_phone_number_input";
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PhoneNumberInput from './_phone_number_input'
 
-const testId = "phoneNumberInput";
+const testId = "phoneNumberInput"
 
-test("should be disabled", () => {
-    const props = {
-        disabled: true,
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toBeDisabled();
-});
-
-test("should be enabled by default", () => {
-    const props = {
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).not.toBeDisabled();
-});
-
-test("should have label", () => {
-    const label = "Phone Number";
-    const props = {
-        id: testId,
-        label,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByText(label);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass data prop", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass className prop", () => {
-    const className = "custom-class-name";
-    const props = {
-        className,
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass(className);
-});
-
-test("should pass value prop", () => {
-    const value = "1234567890";
-    const props = {
-        id: testId,
-        value,
-    };
+test('should be disabled', () => {
+  const props = {
+    disabled: true,
+    id: testId,
+  }
 
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveDisplayValue(value);
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toBeDisabled()
+})
 
-//TODO: test required field presence
-test("should pass required prop", () => {
-    const props = {
-        id: testId,
-    };
+test('should be enabled by default', () => {
+  const props = {
+    id: testId,
+  }
 
-    render(
-        <PhoneNumberInput
-            required
-            {...props}
-        />
-    );
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveAttribute("required");
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).not.toBeDisabled()
+})
 
-test("should have error attribute when invalid", () => {
+test('should have label', () => {
+  const label = 'Phone Number'
   const props = {
-      id: testId,
-      error: "Something isn't right here."
-  };
+    id: testId,
+    label,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
-  const kit = screen.getByRole("textbox");
-  expect(kit).toHaveAttribute("error");
-});
-
-test("should trigger callback", () => {
-  const handleOnValidate = jest.fn((valid) => valid)
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByText(label)
+  expect(kit).toBeInTheDocument()
+})
 
+test('should pass data prop', () => {
   const props = {
-      id: testId,
-      onValidate: handleOnValidate
-  };
+    data: { testid: testId },
+    id: testId,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})
 
-  expect(handleOnValidate).toBeCalledWith(true)
-});
+test('should pass className prop', () => {
+  const className = 'custom-class-name'
+  const props = {
+    className,
+    data: { testid: testId },
+    id: testId,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(className)
+})
+
+test('should pass value prop', () => {
+  const value = '1234567890'
+  const props = {
+    id: testId,
+    value,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toHaveDisplayValue(value)
+})

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,17 +171,19 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover || targetIsReference) {
+            if (!targetIsPopover && !targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover || targetIsReference) {
+            if (targetIsPopover) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            shouldClosePopover(true);
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
+      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        this.hideTooltip()
+        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
+          this.hideTooltip()
+        }
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (!isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break