playbook_ui 7.4.0.pre.test3 → 7.4.0.pre.test4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4211d32c465852e435e15c2ef8f84f09eb8c3b7a1688fe716cd8e5a7dbe3010
-  data.tar.gz: aa2b0edb1d453cfa833e456d05ba66cd3d673c03aefb489e1354f30fbf896a95
+  metadata.gz: 1d151ef3cff4768236575ceebde14f0a8c69f98848681e01424a3febc5dc8c7f
+  data.tar.gz: 0fe849875c8dbbb2efdbefdcc2bcd0ec543b716b91fa6772d209c4b9e1844cbd
 SHA512:
-  metadata.gz: b485cc3abd09ab954532ac9dd39a97c841b58be95a35b1e2ae1d6fc985d081131431f552eb50be5e9254257895041b0f278941f0a7d17810244d6742f5d34024
-  data.tar.gz: fc0c06ccb718a5b0b77ac77080836a3865f27f98ad63ed5cb4cf7e584114de508e95384307d535855aef5214cbb6e74bc9415f37049c1e3117ba193a2de2297d
+  metadata.gz: f774d74a9b4e82ac9849ca8b94ed0f6f1430e43f3433960ad80ec68bf27a40d24d3232a849ec6e8585f9b8346c1309efb790a59f2a3edb10472988d829623ff0
+  data.tar.gz: b48821c3e44673cbb671c770ce5938c273e0b94937993b429711d99e80bbb0a59a8b75171caeee61065021a4e57b13dc7589c3d0ab06c64f3af1c28ac93c3b5e

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -50,6 +50,7 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    id: 'react-select-input',
     isClearable: true,
     isSearchable: true,
     name,
@@ -63,15 +64,15 @@ const Typeahead = (props: Props) => {
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
-      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: option })
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
       document.dispatchEvent(multiValueClearEvent)
     }
     if (action === 'remove-value' || action === 'pop-value') {
-      const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: removedValue })
+      const multiValueRemoveEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-remove`, { detail: removedValue })
       document.dispatchEvent(multiValueRemoveEvent)
     }
     if (action === 'clear') {
-      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-clear`)
       document.dispatchEvent(multiValueClearEvent)
     }
   }

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx

@@ -4,8 +4,9 @@ import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
 const ClearContainer = (props: any) => {
+  const { selectProps, clearValue } = props
   useEffect(() => {
-    document.addEventListener('pb-typeahead-kit:clear', props.clearValue)
+    document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, true)
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,25 +7,25 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
     console.log('Option selected')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
     console.log('Option removed')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-result-clear", function() {
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
     console.log('All options cleared')
   })
 
   document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit:clear'))
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
   })
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -9,9 +9,16 @@ You can also pass `default_options` which will populate the initial pill selecti
 `default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
 #### Rails: Subscribing to JS Events
-`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
-`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
-`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
+This kit utilizes a default `id` prop named `react-select-input`. It is **highly advised** to send your own unique `id` prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1-result-option-select` event to perform custom work when an option is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-remove` event to perform custom work when a pill is clicked.
+`pb-typeahead-kit-typeahead-pills-example1-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
 
 #### Rails: Publishing JS Events
-`pb-typeahead-kit:clear` event to clear all options.
+
+The same rule regarding the `id` prop applies to publishing JS events. The examples below will use the unique `id` prop named `typeahead-pills-example1`:
+
+`pb-typeahead-kit-typeahead-pills-example1:clear` event to clear all options.

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -8,6 +8,7 @@ module Playbook
       prop :async, type: Playbook::Props::Boolean,
                     default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :id
       prop :label
       prop :load_options
       prop :name
@@ -37,6 +38,7 @@ module Playbook
       def typeahead_with_pills_options
         base_options = {
           defaultValue: default_options,
+          id: id,
           isMulti: true,
           label: label,
           options: options,

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.4.0.pre.test3"
+  VERSION = "7.4.0.pre.test4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.4.0.pre.test3
+  version: 7.4.0.pre.test4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-28 00:00:00.000000000 Z
+date: 2020-10-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack