playbook_ui_docs 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593

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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +1 -3
  5. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
  9. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  10. data/app/pb_kits/playbook/pb_phone_number_input/docs/{_phone_number_input_default.html.erb → _phone_number_input_default_rails.html.erb} +1 -1
  11. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.md +2 -0
  12. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -4
  13. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
  14. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  15. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
  18. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  19. data/dist/playbook-doc.js +1 -1
  20. metadata +5 -14
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +0 -102
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +0 -4
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +0 -39
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +0 -39
  25. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +0 -91
  26. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +0 -1
  27. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +0 -5
  28. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +0 -1
  29. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +0 -22
  30. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +0 -66
  31. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +0 -1
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700
4
+ version: 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-03-14 00:00:00.000000000 Z
12
+ date: 2025-03-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -59,8 +59,6 @@ files:
59
59
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
60
60
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
61
61
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
62
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
63
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
64
62
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
65
63
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
66
64
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
@@ -539,10 +537,8 @@ files:
539
537
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb
540
538
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx
541
539
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
542
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb
543
540
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
544
541
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
545
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb
546
542
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
547
543
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
548
544
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
@@ -1267,8 +1263,6 @@ files:
1267
1263
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
1268
1264
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb
1269
1265
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx
1270
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
1271
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
1272
1266
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
1273
1267
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
1274
1268
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
@@ -1469,14 +1463,13 @@ files:
1469
1463
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
1470
1464
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
1471
1465
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
1472
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
1473
1466
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
1474
1467
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
1468
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.html.erb
1469
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default_rails.md
1475
1470
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
1476
1471
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
1477
1472
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
1478
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb
1479
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md
1480
1473
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
1481
1474
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
1482
1475
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
@@ -2099,9 +2092,9 @@ files:
2099
2092
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
2100
2093
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
2101
2094
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
2095
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
2102
2096
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
2103
2097
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
2104
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
2105
2098
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
2106
2099
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
2107
2100
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
@@ -2156,8 +2149,6 @@ files:
2156
2149
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
2157
2150
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
2158
2151
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
2159
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
2160
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
2161
2152
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
2162
2153
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
2163
2154
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
@@ -1,102 +0,0 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable, TextInput, Body } from "playbook-ui";
3
- import MOCK_DATA from "./advanced_table_mock_data.json";
4
-
5
- const AdvancedTableInlineEditing = (props) => {
6
- const [editedValues, setEditedValues] = useState({});
7
-
8
- const EditableCell = ({ rowId, originalValue, onSave }) => {
9
- const [localValue, setLocalValue] = useState(originalValue);
10
-
11
- const handleChange = (e) => setLocalValue(e.target.value);
12
-
13
- const handleBlur = () => {
14
- originalValue !== localValue && onSave(rowId, localValue);
15
- };
16
-
17
- return (
18
- <TextInput inline
19
- marginBottom="none"
20
- {...props}
21
- >
22
- <input
23
- onBlur={handleBlur}
24
- onChange={handleChange}
25
- onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
26
- value={localValue}
27
- />
28
- </TextInput>
29
- );
30
- };
31
-
32
- const columnDefinitions = [
33
- {
34
- accessor: "year",
35
- label: "Year",
36
- cellAccessors: ["quarter", "month", "day"],
37
- },
38
- {
39
- accessor: "newEnrollments",
40
- label: "New Enrollments",
41
- },
42
- {
43
- accessor: "scheduledMeetings",
44
- label: "Scheduled Meetings",
45
- editable: true,
46
- customRenderer: (row) => {
47
- return (
48
- <EditableCell
49
- onSave={(id, val) => {
50
- setEditedValues((prev) => ({ ...prev, [id]: val }));
51
- }}
52
- originalValue={
53
- editedValues[row.id] ?? row.original.scheduledMeetings
54
- }
55
- rowId={row.id}
56
- />
57
- );
58
- },
59
- },
60
- {
61
- accessor: "attendanceRate",
62
- label: "Attendance Rate",
63
- },
64
- {
65
- accessor: "completedClasses",
66
- label: "Completed Classes",
67
- },
68
- {
69
- accessor: "classCompletionRate",
70
- label: "Class Completion Rate",
71
- },
72
- {
73
- accessor: "graduatedStudents",
74
- label: "Graduated Students",
75
- },
76
- ];
77
-
78
- return (
79
- <div className="App">
80
- <AdvancedTable
81
- columnDefinitions={columnDefinitions}
82
- tableData={MOCK_DATA}
83
- {...props}
84
- />
85
- {
86
- editedValues && Object.keys(editedValues).length > 0 && (
87
- <>
88
- <Body
89
- marginTop="md"
90
- {...props}
91
- >
92
- Edited Values by Row Id:
93
- </Body>
94
- <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
95
- </>
96
- )
97
- }
98
- </div>
99
- );
100
- };
101
-
102
- export default AdvancedTableInlineEditing;
@@ -1,4 +0,0 @@
1
- Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
2
-
3
- Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
4
- See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.
@@ -1,39 +0,0 @@
1
- <%= pb_rails("date_picker", props: {
2
- label: "Date Picker",
3
- picker_id: "date-picker-onchange",
4
- margin_bottom: "lg"
5
- }) %>
6
- <%= pb_rails("caption", props: { text: "Date Object" }) %>
7
- <%= pb_rails("body", props: {
8
- label: "Date Object",
9
- text: "Select Date",
10
- margin_bottom: "lg",
11
- id: "date-picker-onchange-object",
12
- }) %>
13
- <%= pb_rails("caption", props: { text: "Date String" }) %>
14
- <%= pb_rails("body", props: {
15
- label: "Date String",
16
- text: "Select Date",
17
- margin_bottom: "lg",
18
- id: "date-picker-onchange-string",
19
- }) %>
20
-
21
-
22
- <%= javascript_tag do %>
23
- window.addEventListener("DOMContentLoaded", () => {
24
- <%# Access flatpickr instance with picker id and assign it a variable %>
25
- const fp = document.querySelector("#date-picker-onchange")._flatpickr
26
-
27
- <%# Define Hook %>
28
- const changeHook = (selectedDates, dateStr) => {
29
- const object = document.querySelector('#date-picker-onchange-object')
30
- object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
31
-
32
- const string = document.querySelector('#date-picker-onchange-string')
33
- string.textContent = dateStr
34
- }
35
-
36
- <%# Push one or more hooks to onChange config array %>
37
- fp.config.onChange.push(changeHook)
38
- })
39
- <% end %>
@@ -1,39 +0,0 @@
1
- <%= pb_rails("date_picker", props: {
2
- label: "Date Picker",
3
- picker_id: "date-picker-onclose",
4
- margin_bottom: "lg"
5
- }) %>
6
- <%= pb_rails("caption", props: { text: "Date Object" }) %>
7
- <%= pb_rails("body", props: {
8
- label: "Date Object",
9
- text: "Select Date",
10
- margin_bottom: "lg",
11
- id: "date-picker-onclose-object",
12
- }) %>
13
- <%= pb_rails("caption", props: { text: "Date String" }) %>
14
- <%= pb_rails("body", props: {
15
- label: "Date String",
16
- text: "Select Date",
17
- margin_bottom: "lg",
18
- id: "date-picker-onclose-string",
19
- }) %>
20
-
21
-
22
- <%= javascript_tag do %>
23
- window.addEventListener("DOMContentLoaded", () => {
24
- <%# Access flatpickr instance with picker id and assign it a variable %>
25
- const fp = document.querySelector("#date-picker-onclose")._flatpickr
26
-
27
- <%# Define Hook %>
28
- const closeHook = (selectedDates, dateStr) => {
29
- const object = document.querySelector('#date-picker-onclose-object')
30
- object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
31
-
32
- const string = document.querySelector('#date-picker-onclose-string')
33
- string.textContent = dateStr
34
- }
35
-
36
- <%# Push one or more hooks to onClose config array %>
37
- fp.config.onClose.push(closeHook)
38
- })
39
- <% end %>
@@ -1,91 +0,0 @@
1
- import React from "react"
2
- import MultiLevelSelect from "../_multi_level_select"
3
- import { useForm } from "react-hook-form"
4
-
5
- const treeData = [
6
- {
7
- label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
9
- id: "powerhome1",
10
- expanded: true,
11
- children: [
12
- {
13
- label: "People",
14
- value: "People",
15
- id: "people1",
16
- expanded: true,
17
- children: [
18
- {
19
- label: "Talent Acquisition",
20
- value: "Talent Acquisition",
21
- id: "talent1",
22
- },
23
- {
24
- label: "Business Affairs",
25
- value: "Business Affairs",
26
- id: "business1",
27
- children: [
28
- {
29
- label: "Initiatives",
30
- value: "Initiatives",
31
- id: "initiative1",
32
- },
33
- {
34
- label: "Learning & Development",
35
- value: "Learning & Development",
36
- id: "development1",
37
- },
38
- ],
39
- },
40
- {
41
- label: "People Experience",
42
- value: "People Experience",
43
- id: "experience1",
44
- },
45
- ],
46
- },
47
- {
48
- label: "Contact Center",
49
- value: "Contact Center",
50
- id: "contact1",
51
- children: [
52
- {
53
- label: "Appointment Management",
54
- value: "Appointment Management",
55
- id: "appointment1",
56
- },
57
- {
58
- label: "Customer Service",
59
- value: "Customer Service",
60
- id: "customer1",
61
- },
62
- {
63
- label: "Energy",
64
- value: "Energy",
65
- id: "energy1",
66
- },
67
- ],
68
- },
69
- ],
70
- },
71
- ]
72
-
73
- const MultiLevelSelectReactHook = (props) => {
74
- const { register, watch } = useForm()
75
- const selectedItems = watch("departments")
76
- selectedItems && console.log("Selected Items", selectedItems)
77
-
78
- return (
79
- <div>
80
- <MultiLevelSelect
81
- id="multiselect-default"
82
- marginBottom="md"
83
- treeData={treeData}
84
- {...register("departments")}
85
- {...props}
86
- />
87
- </div>
88
- )
89
- }
90
-
91
- export default MultiLevelSelectReactHook
@@ -1 +0,0 @@
1
- You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
@@ -1,5 +0,0 @@
1
- <%= pb_rails("phone_number_input", props: {
2
- hidden_inputs: true,
3
- id: "hidden_inputs",
4
- name: "hidden_inputs",
5
- }) %>
@@ -1 +0,0 @@
1
- The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.
@@ -1,22 +0,0 @@
1
- <%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
2
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
3
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
4
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
5
- Send Email
6
- <% end %>
7
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
8
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
9
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
10
- Send Email
11
- <% end %>
12
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
13
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
14
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
15
- Send Email
16
- <% end %>
17
- <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
18
- <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
19
- <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
20
- Send Email
21
- <% end %>
22
- <% end %>
@@ -1,66 +0,0 @@
1
- import React from 'react'
2
-
3
- import { Typeahead, Title } from 'playbook-ui'
4
- import { useForm } from 'react-hook-form'
5
-
6
- const languages = [
7
- { label: 'JavaScript', value: '1995', category: 'Web Development' },
8
- { label: 'Python', value: '1991', category: 'General Purpose' },
9
- { label: 'Java', value: '1995', category: 'Enterprise' },
10
- { label: 'C++', value: '1985', category: 'Systems Programming' },
11
- { label: 'Go', value: '2009', category: 'Systems Programming' },
12
- { label: 'Rust', value: '2010', category: 'Systems Programming' },
13
- { label: 'Swift', value: '2014', category: 'Mobile Development' },
14
- { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
15
- { label: 'Ruby', value: '1995', category: 'General Purpose' },
16
- { label: 'PHP', value: '1995', category: 'Web Development' },
17
- ]
18
-
19
- const colors = [
20
- { label: 'Orange', value: '#FFA500' },
21
- { label: 'Red', value: '#FF0000' },
22
- { label: 'Green', value: '#00FF00' },
23
- { label: 'Blue', value: '#0000FF' },
24
- ]
25
-
26
- const TypeaheadReactHook = (props) => {
27
- const { register, watch } = useForm()
28
-
29
- const selectedLanguages = watch('languages')
30
- const selectedColor = watch('color')
31
-
32
- return (
33
- <>
34
- <Typeahead
35
- isMulti
36
- label="Multi Select Languages"
37
- multiKit="language"
38
- options={languages}
39
- {...props}
40
- {...register('languages')}
41
- />
42
- <Title
43
- size={4}
44
- text='Selected Languages'
45
- />
46
- {selectedLanguages && selectedLanguages.map(language => (
47
- <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
48
- ))}
49
-
50
- <Typeahead
51
- label="Colors"
52
- marginTop="lg"
53
- options={colors}
54
- {...props}
55
- {...register('color')}
56
- />
57
- <Title
58
- size={4}
59
- text='Selected Color'
60
- />
61
- <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
62
- </>
63
- )
64
- }
65
-
66
- export default TypeaheadReactHook
@@ -1 +0,0 @@
1
- You can pass `react-hook-form` props to the Typeahead kit.