playbook_ui 12.10.0.pre.alpha.PLAY677richtexteditorts370 → 12.10.0.pre.alpha.PLAY705phonenumberreturn372

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6065952cf0606995f373c8718e0a1895be1177aee77691a23ebc0626a3d8245e
-  data.tar.gz: 275df6169d763462916e7a01ebdfd12518689c3e2d826e5da6cfb2cf774aba7a
+  metadata.gz: 203044cb15b22597397b39bf38a531a0c158c55ec72ae4e3cdebe8ad8ec6a64a
+  data.tar.gz: e8fa151f4da651ffbf4789f3b160fbef3f5e70a0762512c0b1350b2c457f8459
 SHA512:
-  metadata.gz: 492c73dd0792f7a0e52db3c0052d430dcb030f8dfdd5bba0a227c43888d8dfb8e761702ceb2a0d662462b3dc0d2fd1a988b7b39effaad14298b2cbb72c528d49
-  data.tar.gz: 150a33c6b0d6b4f1246d8e7125944cb645cae7faa5f41bed277e8911a20f1b8a16d5925f774b48e9d0dbb9140beedb5b6caa9069e83c11ec9abc1ccd89e7de6b
+  metadata.gz: 7498a9c8f75ce5a49924ca0df255b9a62c71197b850c443ee2f7216298583018fb43d106d217b3afd230356c1e1d2f642fa0d0f4e85fc12a70c8e4a3ceadff5e
+  data.tar.gz: 235cbf4d84f40cf6c557fb986acc5c8665a0d837895740609957445c9a810fab8c2d306dc10bd9518d94a4a3d8c27f548ef00484c4f5210cc5f18527837b885f

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

@@ -121,10 +121,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     validateOnlyNumbers()
   }
 
+  const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
+    return {...itiInit.getSelectedCountryData(), number: inputValue}
+  }
+
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
     validateTooLongNumber(itiInit)
-    onChange(evt)
+    const selectedData = getCurrentSelectedData(itiInit, evt.target.value)
+    onChange(selectedData)
     isValid(itiInit.isValidNumber())
   }
 
@@ -144,7 +149,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       }
     )
     
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
+      const selectedData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      onChange(selectedData)
+    })
+
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 

data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.tsx → _rich_text_editor.jsx}

@@ -1,3 +1,6 @@
+/* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
+
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
@@ -15,21 +18,11 @@ try {
 
 import { TrixEditor } from "react-trix"
 
-type Editor = {
-  attributeIsActive?: Function,
-  element?: HTMLElement,
-  getSelectedDocument?: Function,
-  getSelectedRange?: () => Array<number>,
-  insertHTML?: Function,
-  loadHTML?: Function,
-  setSelectedRange?: (range: Array<number>) => void,  
-}
-
 type RichTextEditorProps = {
-  aria?: { [key: string]: string },
+  aria?: object,
   toolbarBottom?: Boolean,
   className?: string,
-  data?: { [key: string]: string },
+  data?: object,
   focus?: boolean,
   id?: string,
   inline?: boolean,
@@ -60,19 +53,19 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria),
-    dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>()
+  dataProps = buildDataProps(data),
+  [editor, setEditor] = useState()
 
-  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
-    element = editor?.element
+  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
+  element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
   if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
-      blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
+    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
 
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
 
     // set button attributes
     inlineCodeButton.dataset.trixAttribute = 'inlineCode'
@@ -100,8 +93,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
     focus
       ? (document.addEventListener('trix-focus', useFocus),
-        document.addEventListener('trix-blur', useFocus),
-        useFocus())
+      document.addEventListener('trix-blur', useFocus),
+      useFocus())
       : null
 
     document.addEventListener('trix-focus', inlineFocus)
@@ -117,11 +110,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   useEffect(() => {
     if (!element) return
-    element.addEventListener('click', ({ target }: Event) => {
-      const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
+    element.addEventListener('click', ({target}) => {
+      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
-      const anchorElement = (target as Element).closest('a')
+      const anchorElement = target.closest('a')
       if (!anchorElement) return
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
@@ -129,11 +122,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
-    simpleClass = simple ? 'simple' : '',
-    focusClass = focus ? 'focus-editor-targets' : '',
-    stickyClass = sticky ? 'sticky' : '',
-    inlineClass = inline ? 'inline' : '',
-    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+  simpleClass = simple ? 'simple' : '',
+  focusClass = focus ? 'focus-editor-targets' : '',
+  stickyClass = sticky ? 'sticky' : '',
+  inlineClass = inline ? 'inline' : '',
+  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
   let css = classnames(globalProps(props), className)
   css = classnames(
@@ -148,18 +141,17 @@ const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={css}
+        {...ariaProps}
+        {...dataProps}
+        className={css}
     >
       <TrixEditor
-        className=""
-        fileParamName={name}
-        mergeTags={[]}
-        onChange={onChange}
-        onEditorReady={handleOnEditorReady}
-        placeholder={placeholder}
-        value={value}
+          className=""
+          fileParamName={name}
+          onChange={onChange}
+          onEditorReady={handleOnEditorReady}
+          placeholder={placeholder}
+          value={value}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/{inlineFocus.ts → inlineFocus.js}

@@ -1,5 +1,5 @@
 const inlineFocus = () => {
-  const trixEditorElement = event.target as Element
+  const trixEditorElement = event.target
   const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
 
   if (!trixEditorContainer.classList.contains('inline')) return

data/app/pb_kits/playbook/pb_rich_text_editor/{useFocus.ts → useFocus.js}

@@ -2,7 +2,7 @@ const useFocus = () => {
   const allTrixEditors = document.querySelectorAll(
     '.focus-editor-targets trix-editor'
   )
-  allTrixEditors.forEach((editorElement: any) => {
+  allTrixEditors.forEach((editorElement) => {
     const toolbarElement = editorElement.toolbarElement
     if (editorElement == document.activeElement) {
       editorElement.classList.add('focused-editor')

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.10.0"
-  VERSION = "12.10.0.pre.alpha.PLAY677richtexteditorts370"
+  VERSION = "12.10.0.pre.alpha.PLAY705phonenumberreturn372"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.10.0.pre.alpha.PLAY677richtexteditorts370
+  version: 12.10.0.pre.alpha.PLAY705phonenumberreturn372
 platform: ruby
 authors:
 - Power UX
@@ -1710,8 +1710,8 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.html.erb
 - app/pb_kits/playbook/pb_radio/radio.rb
 - app/pb_kits/playbook/pb_radio/radio.test.js
+- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
-- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
@@ -1734,11 +1734,11 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
 - app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
 - app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
-- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.ts
+- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
-- app/pb_kits/playbook/pb_rich_text_editor/useFocus.ts
+- app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
 - app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss