playbook_ui 14.22.0.pre.alpha.PLAY2303optB8977 → 14.22.0.pre.alpha.PLAY22578709

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

@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -106,16 +106,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     className
   )
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputRef = useRef<HTMLInputElement>()
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
-  const [hasTyped, setHasTyped] = useState(false)
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    if (error?.length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
@@ -132,7 +131,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       clearField() {
         setInputValue("")
         setError("")
-        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -203,8 +201,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    if (!hasTyped && !error) return
-
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -218,7 +214,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -264,17 +259,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     itiRef.current = telInputInit;
 
-    if (inputRef.current) {
-      inputRef.current.addEventListener("countrychange", (evt: Event) => {
-        const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
-        setSelectedData(phoneNumberData)
-        onChange(phoneNumberData)
-        validateErrors()
-      })
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+      validateErrors()
+    })
+
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-      inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-      inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
     if (formatAsYouType) {
       inputRef.current?.addEventListener("input", (evt) => {
         handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -309,16 +303,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         {...htmlProps}
     >
       <TextInput
-          ref={inputNode => {
-            if (ref) {
-              if (typeof ref === 'function') {
-                ref(inputNode)
-              } else {
-                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
-              }
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
             }
-            inputRef.current = inputNode
-          }}
+          }
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx

@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={1}
+          truncate="1"
           {...props}
       />
 
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={2}
+          truncate="2"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
       <Title
           size={4}
           text={lorem}
-          truncate={3}
+          truncate="3"
           {...props}
       />
     </Flex>

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

@@ -9,7 +9,6 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
-  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -19,75 +19,60 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.effectiveTriggerMethod
+      const method = this.triggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', (e) => {
-          if (this.useClickToOpen) {
-            e.preventDefault()
-            if (this.isTooltipVisible()) {
-              this.hideTooltip()
-            } else {
-              this.showTooltip(trigger)
-            }
-          } else {
-            this.showTooltip(trigger)
-          }
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
         })
       } else {
-        if (!this.useClickToOpen) {
-          trigger.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
-            clearTimeout(this.mouseleaveTimeout)
-            this.currentTrigger = trigger
-            const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
-            this.mouseenterTimeout = setTimeout(() => {
-              this.showTooltip(trigger)
-              if (interactionEnabled) {
-                this.checkCloseTooltip(trigger)
-              }
-            }, delayOpen)
-          })
+        trigger.addEventListener('mouseenter', () => {
+          clearSafeZoneListener(this)
+          clearTimeout(this.mouseleaveTimeout)
+          this.currentTrigger = trigger
+          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
+        })
 
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            if (this.delayClose) {
-              const delayClose = parseInt(this.delayClose)
-              this.mouseleaveTimeout = setTimeout(() => {
-                if (interactionEnabled) {
-                  this.attachSafeZoneListener()
-                } else {
-                  this.hideTooltip()
-                }
-              }, delayClose)
-            } else {
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
+          if (this.delayClose) {
+            const delayClose = parseInt(this.delayClose)
+            this.mouseleaveTimeout = setTimeout(() => {
               if (interactionEnabled) {
                 this.attachSafeZoneListener()
               } else {
                 this.hideTooltip()
               }
+            }, delayClose)
+          } else {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
             }
-          })
+          }
+        })
 
-          if (interactionEnabled) {
-            this.tooltip.addEventListener('mouseenter', () => {
-              clearSafeZoneListener(this)
-            })
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
 
-            this.tooltip.addEventListener('mouseleave', () => {
-              this.attachSafeZoneListener()
-            })
-          }
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
         }
       }
     })
   }
 
-  isTooltipVisible() {
-    return this.tooltip && this.tooltip.classList.contains('show')
-  }
-
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -160,7 +145,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
+    if (this.triggerMethod === 'click') {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -239,14 +224,6 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
-  get useClickToOpen() {
-    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
-  }
-
-  get effectiveTriggerMethod() {
-    return this.useClickToOpen ? 'click' : this.triggerMethod
-  }
-
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
-      prop :use_click_to_open, type: Playbook::Props::Boolean,
-                               default: false
       prop :width
 
       def classname
@@ -48,10 +46,6 @@ module Playbook
         out
       end
 
-      def effective_trigger_method
-        use_click_to_open ? "click" : (trigger_method || "hover")
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,
@@ -60,9 +54,8 @@ module Playbook
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: effective_trigger_method,
-          pb_tooltip_interaction: interaction,
-          pb_tooltip_use_click_to_open: use_click_to_open
+          pb_tooltip_trigger_method: trigger_method,
+          pb_tooltip_interaction: interaction
         )
         data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
         data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close