playbook_ui_docs 14.14.0.pre.alpha.play1853typeaheadreacthookform6373 → 14.14.0.pre.alpha.play1853typeaheadreacthookform6461
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +18 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f000c462ba58b72b8c524fa51d39e24578cef37cbc567bfb3fd32c9e4eea4812
|
|
4
|
+
data.tar.gz: 973b557c7b01e21351290c2e861a506bd20f703409003c810723634cd21c8887
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: afebb7f33aecb4b799eee8523c242e92ef2ba83b4f2ea3814fb4099bd4618b1e127166bd3d5698f3287b97b3c8bb14923957d4962529fe45d64495cb5e8b2647
|
|
7
|
+
data.tar.gz: 83a6586504e14fb0a54a44a04fcc8ae492f55df2b53c2dfc1aa9fb2009ca2448aa81e37915fc0f8d9f94762e6da803762814f9c99c24976926fde8bf4e5ed6f0
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-12",
|
|
6
|
+
overlay: false,
|
|
7
|
+
border: "right"
|
|
8
|
+
}) do %>
|
|
9
|
+
Test me (Border Right)
|
|
10
|
+
<% end %>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("drawer", props: {
|
|
16
|
+
id:"drawer-13",
|
|
17
|
+
overlay: false,
|
|
18
|
+
border: "left"
|
|
19
|
+
}) do %>
|
|
20
|
+
Test me (Border Left)
|
|
21
|
+
<% end %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("drawer", props: {
|
|
26
|
+
id:"drawer-14",
|
|
27
|
+
overlay: false,
|
|
28
|
+
border: "full"
|
|
29
|
+
}) do %>
|
|
30
|
+
Test me (Border Full)
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
|
|
File without changes
|
|
@@ -1 +1,20 @@
|
|
|
1
|
-
<%= pb_rails("
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-1",
|
|
6
|
+
}) do %>
|
|
7
|
+
Test me (Left Drawer)
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-2",
|
|
15
|
+
placement: "right"
|
|
16
|
+
}) do %>
|
|
17
|
+
Test me (Right Drawer)
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
|
|
2
|
+
<%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("drawer", props: {
|
|
6
|
+
id:"drawer-4",
|
|
7
|
+
within_element: true,
|
|
8
|
+
placement: "bottom",
|
|
9
|
+
breakpoint: "md",
|
|
10
|
+
size: "full"
|
|
11
|
+
}) do %>
|
|
12
|
+
<%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
|
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
|
14
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
|
|
19
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
21
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
|
22
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-10",
|
|
6
|
+
overlay: false
|
|
7
|
+
}) do %>
|
|
8
|
+
Test me (No Overlay)
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("drawer", props: {
|
|
15
|
+
id:"drawer-11",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
Test me (Has Overlay)
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Click the button to close the drawer when there is no overlay.
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<%= pb_rails("flex") do %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("drawer", props: {
|
|
5
|
+
id:"drawer-5",
|
|
6
|
+
size: "xs"
|
|
7
|
+
}) do %>
|
|
8
|
+
XS
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("drawer", props: {
|
|
14
|
+
id:"drawer-6",
|
|
15
|
+
size: "sm",
|
|
16
|
+
placement: "right"
|
|
17
|
+
}) do %>
|
|
18
|
+
This is a small drawer
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("drawer", props: {
|
|
24
|
+
id:"drawer-7",
|
|
25
|
+
size: "md"
|
|
26
|
+
}) do %>
|
|
27
|
+
This is a medium drawer
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
|
|
31
|
+
|
|
32
|
+
<%= pb_rails("drawer", props: {
|
|
33
|
+
id:"drawer-8",
|
|
34
|
+
size: "lg",
|
|
35
|
+
placement: "right"
|
|
36
|
+
}) do %>
|
|
37
|
+
This is a large drawer
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
<%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
|
|
41
|
+
|
|
42
|
+
<%= pb_rails("drawer", props: {
|
|
43
|
+
id:"drawer-9",
|
|
44
|
+
size: "xl"
|
|
45
|
+
}) do %>
|
|
46
|
+
This is an extra large drawer
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
|
33
33
|
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
|
34
34
|
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
|
35
|
-
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
35
|
+
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
|
36
36
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
|
37
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
|
38
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
|
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
|
3
|
+
<% 15.times do %>
|
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
5
|
+
<%= pb_rails("card") do %>
|
|
6
|
+
Card content
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Overlay,
|
|
4
|
+
Card,
|
|
5
|
+
Flex,
|
|
6
|
+
FlexItem,
|
|
7
|
+
} from 'playbook-ui'
|
|
8
|
+
|
|
9
|
+
const InlineCardsExample = () => {
|
|
10
|
+
return (
|
|
11
|
+
<Flex
|
|
12
|
+
columnGap="lg"
|
|
13
|
+
orientation="row"
|
|
14
|
+
overflowX="auto"
|
|
15
|
+
>
|
|
16
|
+
{Array.from({ length: 15 }, (_, index) => (
|
|
17
|
+
<FlexItem key={index}>
|
|
18
|
+
<Card>{"Card Content"}</Card>
|
|
19
|
+
</FlexItem>
|
|
20
|
+
))}
|
|
21
|
+
</Flex>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const OverlayHideScrollBar = () => (
|
|
26
|
+
<>
|
|
27
|
+
<Overlay
|
|
28
|
+
color="card_light"
|
|
29
|
+
layout={{"x": "xl"}}
|
|
30
|
+
scrollBarNone
|
|
31
|
+
>
|
|
32
|
+
<InlineCardsExample />
|
|
33
|
+
</Overlay>
|
|
34
|
+
</>
|
|
35
|
+
)
|
|
36
|
+
|
|
37
|
+
export default OverlayHideScrollBar
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
|
data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
|
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
|
3
|
+
<% 15.times do %>
|
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
5
|
+
<%= pb_rails("card") do %>
|
|
6
|
+
Card content
|
|
7
|
+
<% end %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
|
|
@@ -4,8 +4,11 @@ examples:
|
|
|
4
4
|
- overlay_multi_directional: Multi-directional
|
|
5
5
|
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
|
6
6
|
- overlay_toggle: Toggle
|
|
7
|
+
- overlay_hide_scroll_bar: Hide Scroll Bar
|
|
7
8
|
|
|
8
9
|
rails:
|
|
9
10
|
- overlay_default: Default
|
|
10
11
|
- overlay_multi_directional: Multi-directional
|
|
12
|
+
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
|
11
13
|
- overlay_toggle: Toggle
|
|
14
|
+
- overlay_hide_scroll_bar: Hide Scroll Bar
|
|
@@ -2,3 +2,4 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
|
|
|
2
2
|
export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
|
|
3
3
|
export { default as OverlayToggle } from './_overlay_toggle.jsx'
|
|
4
4
|
export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
|
|
5
|
+
export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
3
|
+
<%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
|
|
4
|
+
<% end %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
7
|
+
<%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
|
|
11
|
+
<%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("tooltip", props: {
|
|
15
|
+
trigger_element_selector: ".tooltip-delay",
|
|
16
|
+
tooltip_id: "delay-tooltip",
|
|
17
|
+
position: 'top',
|
|
18
|
+
delay_open: 1000,
|
|
19
|
+
delay_close: 1000
|
|
20
|
+
}) do %>
|
|
21
|
+
1s open/close delay
|
|
22
|
+
<% end %>
|
|
23
|
+
<%= pb_rails("tooltip", props: {
|
|
24
|
+
trigger_element_selector: ".tooltip-open-delay",
|
|
25
|
+
tooltip_id: "open-tooltip",
|
|
26
|
+
position: 'top',
|
|
27
|
+
delay_open: 1000
|
|
28
|
+
}) do %>
|
|
29
|
+
1s open delay
|
|
30
|
+
<% end %>
|
|
31
|
+
<%= pb_rails("tooltip", props: {
|
|
32
|
+
trigger_element_selector: ".tooltip-close-delay",
|
|
33
|
+
tooltip_id: "close-tooltip",
|
|
34
|
+
position: 'top',
|
|
35
|
+
delay_close: 1000
|
|
36
|
+
}) do %>
|
|
37
|
+
1s close delay
|
|
38
|
+
<% end %>
|
|
39
|
+
<% end %>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("tooltip", props: {
|
|
6
|
+
trigger_element_selector: "#tooltip-interaction",
|
|
7
|
+
tooltip_id: "tooltip-with-interaction",
|
|
8
|
+
position: 'top',
|
|
9
|
+
interaction: true
|
|
10
|
+
}) do %>
|
|
11
|
+
You can copy me
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
16
|
+
<%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
|
|
17
|
+
|
|
18
|
+
<%= pb_rails("tooltip", props: {
|
|
19
|
+
trigger_element_selector: "#tooltip-no-interaction",
|
|
20
|
+
tooltip_id: "tooltip-without-interaction",
|
|
21
|
+
position: 'top',
|
|
22
|
+
}) do %>
|
|
23
|
+
I'm just a regular tooltip
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<% end %>
|
|
@@ -2,8 +2,10 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- tooltip_default: Default
|
|
5
|
+
- tooltip_interaction: Content Interaction
|
|
5
6
|
- tooltip_selectors: Using Common Selectors
|
|
6
7
|
- tooltip_with_icon_circle: Icon Circle Tooltip
|
|
8
|
+
- tooltip_delay_rails: Delay
|
|
7
9
|
- tooltip_show_tooltip: Show Tooltip
|
|
8
10
|
|
|
9
11
|
react:
|
|
@@ -12,7 +12,7 @@ const languages = [
|
|
|
12
12
|
{ label: 'Rust', value: '2010', category: 'Systems Programming' },
|
|
13
13
|
{ label: 'Swift', value: '2014', category: 'Mobile Development' },
|
|
14
14
|
{ label: 'Kotlin', value: '2011', category: 'Mobile Development' },
|
|
15
|
-
{ label: 'Ruby', value: '1995', category: '
|
|
15
|
+
{ label: 'Ruby', value: '1995', category: 'General Purpose' },
|
|
16
16
|
{ label: 'PHP', value: '1995', category: 'Web Development' },
|
|
17
17
|
]
|
|
18
18
|
|
|
@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
|
|
|
49
49
|
* @summary - for doc example purposes only
|
|
50
50
|
*/
|
|
51
51
|
const handleOnMultiValueClick = (value) => {
|
|
52
|
-
alert(`You
|
|
52
|
+
alert(`You added the user: "${value.label}"`)
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
return (
|
|
@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
|
|
|
56
56
|
* @summary - for doc example purposes only
|
|
57
57
|
*/
|
|
58
58
|
const handleOnMultiValueClick = (value) => {
|
|
59
|
-
alert(`You
|
|
59
|
+
alert(`You added the user: "${value.label}"`)
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
return (
|