playbook_ui_docs 14.15.0.pre.alpha.play1757pbcontenttag6677 → 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572
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_advanced_table/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -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/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +3 -9
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +0 -102
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +0 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +0 -22
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +0 -66
- 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.
|
4
|
+
version: 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572
|
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-
|
12
|
+
date: 2025-03-10 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
|
@@ -1473,8 +1471,6 @@ files:
|
|
1473
1471
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
|
1474
1472
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
|
1475
1473
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
|
1476
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb
|
1477
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md
|
1478
1474
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
|
1479
1475
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
|
1480
1476
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
|
@@ -2097,9 +2093,9 @@ files:
|
|
2097
2093
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
|
2098
2094
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
|
2099
2095
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
|
2096
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
|
2100
2097
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
|
2101
2098
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
|
2102
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
|
2103
2099
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
|
2104
2100
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
|
2105
2101
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
|
@@ -2154,8 +2150,6 @@ files:
|
|
2154
2150
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
2155
2151
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
2156
2152
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
2157
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
2158
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
2159
2153
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
2160
2154
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
|
2161
2155
|
- 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 +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.
|