playbook_ui 16.2.0.pre.rc.1 → 16.2.0.pre.rc.3
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/Components/RegularTableView.tsx +12 -2
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx +71 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +20 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +51 -16
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx +44 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +28 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/index.ts +29 -27
- data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-CG2X7d4a.js} +1 -1
- data/dist/chunks/_typeahead-DjDiMPdY.js +1 -0
- data/dist/chunks/{globalProps-BhVYCqRf.js → globalProps-B_OY_vR9.js} +1 -1
- data/dist/chunks/{lib-DD34ZrWL.js → lib-9vEH4omL.js} +1 -1
- data/dist/chunks/vendor.js +2 -2
- data/dist/menu.yml +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +12 -6
- data/dist/chunks/_typeahead-CWA5wlah.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 32329d30bbf7b450881c2b19834055c65a16a4cdea81592c6ef6da112fd9b59a
|
|
4
|
+
data.tar.gz: c576862ae25937f8c5ef5a06a2553884fccabb24260db9a6931f8a54312dab42
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 350cd02e41b535c9d5977c06e33a05cc4bfec6313c9cbd9dd55893ce6fb1cb8d07dcb532fd89a156da273294f69126f06f31a2920cf9825ef414185a94365f2b
|
|
7
|
+
data.tar.gz: a5c055399e9712400063347fb1c1413539b391ff588a1f4102b5cfe525a6e6c54fcb895825e7d460996940064be2ac4d68a904f867b05f7588f8b6bf573924b1
|
|
@@ -66,8 +66,18 @@ const TableCellRenderer = ({
|
|
|
66
66
|
// Find the "owning" colDefinition by accessor. Needed for multi column logic
|
|
67
67
|
const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
|
|
68
68
|
const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
|
|
70
|
+
// Support function-based styling for conditional rendering
|
|
71
|
+
const cellFontColorValue = colDef?.columnStyling?.fontColor
|
|
72
|
+
const cellFontColor = typeof cellFontColorValue === 'function'
|
|
73
|
+
? cellFontColorValue(row)
|
|
74
|
+
: cellFontColorValue
|
|
75
|
+
|
|
76
|
+
const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
|
|
77
|
+
const cellBackgroundColor = typeof cellBackgroundColorValue === 'function'
|
|
78
|
+
? cellBackgroundColorValue(row)
|
|
79
|
+
: cellBackgroundColorValue
|
|
80
|
+
|
|
71
81
|
const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
|
|
72
82
|
const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
|
|
73
83
|
|
|
@@ -920,6 +920,39 @@ test("columnStyling.backgroundColor works as excpected", () => {
|
|
|
920
920
|
expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
|
|
921
921
|
});
|
|
922
922
|
|
|
923
|
+
test("columnStyling.cellBackgroundColor works as expected with function", () => {
|
|
924
|
+
const styledColumnDefs = [
|
|
925
|
+
{
|
|
926
|
+
accessor: "year",
|
|
927
|
+
label: "Year",
|
|
928
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
929
|
+
},
|
|
930
|
+
{
|
|
931
|
+
accessor: "newEnrollments",
|
|
932
|
+
label: "New Enrollments",
|
|
933
|
+
columnStyling:{
|
|
934
|
+
cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
|
|
935
|
+
fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
|
|
936
|
+
},
|
|
937
|
+
},
|
|
938
|
+
{
|
|
939
|
+
accessor: "scheduledMeetings",
|
|
940
|
+
label: "Scheduled Meetings",
|
|
941
|
+
},
|
|
942
|
+
];
|
|
943
|
+
|
|
944
|
+
render(
|
|
945
|
+
<AdvancedTable
|
|
946
|
+
columnDefinitions={styledColumnDefs}
|
|
947
|
+
data={{ testid: testId }}
|
|
948
|
+
tableData={MOCK_DATA}
|
|
949
|
+
/>
|
|
950
|
+
);
|
|
951
|
+
|
|
952
|
+
const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
|
|
953
|
+
expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
|
|
954
|
+
});
|
|
955
|
+
|
|
923
956
|
test("columnStyling.headerBackgroundColor works as excpected", () => {
|
|
924
957
|
const styledColumnDefs = [
|
|
925
958
|
{
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import colors from '../../tokens/exports/_colors.module.scss'
|
|
4
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
|
6
|
+
import Title from '../../pb_title/_title'
|
|
7
|
+
import Body from '../../pb_body/_body'
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
const AdvancedTableColumnStylingBackgroundCustom = (props) => {
|
|
11
|
+
const columnDefinitions = [
|
|
12
|
+
{
|
|
13
|
+
accessor: "year",
|
|
14
|
+
label: "Year",
|
|
15
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
16
|
+
customRenderer: (row, value) => (
|
|
17
|
+
<Flex flexDirection="column">
|
|
18
|
+
<Title size={4}
|
|
19
|
+
text={value}
|
|
20
|
+
/>
|
|
21
|
+
<Body text="lorem ipsum" />
|
|
22
|
+
<Body text="lorem ipsum" />
|
|
23
|
+
</Flex>
|
|
24
|
+
),
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
accessor: "newEnrollments",
|
|
28
|
+
label: "New Enrollments",
|
|
29
|
+
columnStyling:{
|
|
30
|
+
cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
|
|
31
|
+
fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
accessor: "scheduledMeetings",
|
|
36
|
+
label: "Scheduled Meetings",
|
|
37
|
+
columnStyling:{
|
|
38
|
+
cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
accessor: "attendanceRate",
|
|
43
|
+
label: "Attendance Rate",
|
|
44
|
+
columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "completedClasses",
|
|
48
|
+
label: "Completed Classes",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "classCompletionRate",
|
|
52
|
+
label: "Class Completion Rate",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
accessor: "graduatedStudents",
|
|
56
|
+
label: "Graduated Students",
|
|
57
|
+
},
|
|
58
|
+
]
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<div>
|
|
62
|
+
<AdvancedTable
|
|
63
|
+
columnDefinitions={columnDefinitions}
|
|
64
|
+
tableData={MOCK_DATA}
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default AdvancedTableColumnStylingBackgroundCustom
|
|
@@ -78,6 +78,7 @@ examples:
|
|
|
78
78
|
- advanced_table_column_styling: Column Styling
|
|
79
79
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
|
80
80
|
- advanced_table_column_styling_background: Column Styling Background Color
|
|
81
|
+
- advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
|
|
81
82
|
- advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
|
|
82
83
|
- advanced_table_padding_control: Padding Control using Column Styling
|
|
83
84
|
- advanced_table_column_border_color: Column Group Border Color
|
|
@@ -47,4 +47,5 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
|
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
48
|
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
49
|
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
|
-
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
50
|
+
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
51
|
+
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
@@ -178,22 +178,40 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
|
|
|
178
178
|
{...inputProps}
|
|
179
179
|
/>
|
|
180
180
|
<span
|
|
181
|
+
aria-label={
|
|
182
|
+
showPassphrase
|
|
183
|
+
? "Passphrase currently visible. Click icon to hide password"
|
|
184
|
+
: "Passphrase currently hidden. Click icon to reveal password"
|
|
185
|
+
}
|
|
186
|
+
aria-pressed={showPassphrase}
|
|
181
187
|
className="show-passphrase-icon"
|
|
182
188
|
onClick={toggleShowPassphrase}
|
|
189
|
+
onKeyDown={(e) => {
|
|
190
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
191
|
+
e.preventDefault()
|
|
192
|
+
toggleShowPassphrase(e as any)
|
|
193
|
+
}
|
|
194
|
+
}}
|
|
195
|
+
role="button"
|
|
196
|
+
tabIndex={0}
|
|
183
197
|
>
|
|
184
198
|
<Body
|
|
185
199
|
className={showPassphrase ? "hide-icon" : ""}
|
|
186
200
|
color="light"
|
|
187
201
|
dark={dark}
|
|
188
202
|
>
|
|
189
|
-
<Icon
|
|
203
|
+
<Icon
|
|
204
|
+
aria={{ label: "eye icon" }}
|
|
205
|
+
icon="eye-slash"
|
|
206
|
+
/>
|
|
190
207
|
</Body>
|
|
191
208
|
<Body
|
|
192
209
|
className={showPassphrase ? "" : "hide-icon"}
|
|
193
210
|
color="light"
|
|
194
211
|
dark={dark}
|
|
195
212
|
>
|
|
196
|
-
<Icon
|
|
213
|
+
<Icon
|
|
214
|
+
aria={{ label: "eye icon" }}
|
|
197
215
|
className="svg-inline--fa"
|
|
198
216
|
customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
|
|
199
217
|
/>
|
|
@@ -94,25 +94,51 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
94
94
|
|
|
95
95
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
96
96
|
|
|
97
|
+
const fieldId = id ? (id as string) : null
|
|
98
|
+
const labelElementId = fieldId ? `${fieldId}-label` : null
|
|
99
|
+
|
|
97
100
|
const handleOnEditorReady = (editorInstance: Editor) => {
|
|
98
101
|
setEditor(editorInstance)
|
|
102
|
+
|
|
99
103
|
setTimeout(() => {
|
|
100
|
-
const oldId = editorInstance.element
|
|
101
|
-
if (oldId)
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
104
|
+
const oldId = editorInstance.element?.getAttribute("input")
|
|
105
|
+
if (!oldId) return
|
|
106
|
+
|
|
107
|
+
const hiddenInput = document.getElementById(oldId) as HTMLElement | null
|
|
108
|
+
if (!hiddenInput) return
|
|
109
|
+
|
|
110
|
+
const hiddenInputId = (inputOptions.id as string) || oldId
|
|
111
|
+
|
|
112
|
+
if (hiddenInputId !== oldId) {
|
|
113
|
+
hiddenInput.id = hiddenInputId
|
|
114
|
+
editorInstance.element?.setAttribute("input", hiddenInputId)
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if (inputOptions.name) {
|
|
118
|
+
hiddenInput.setAttribute("name", inputOptions.name as string)
|
|
112
119
|
}
|
|
120
|
+
|
|
121
|
+
const editorDomId = (id as string) || `${hiddenInputId}_trix`
|
|
122
|
+
const trixLabelId = ((id as string) || hiddenInputId) + "-label"
|
|
123
|
+
|
|
124
|
+
if (label) {
|
|
125
|
+
editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
|
|
126
|
+
}
|
|
127
|
+
editorInstance.element!.id = editorDomId
|
|
113
128
|
})
|
|
114
129
|
}
|
|
115
130
|
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
if (!advancedEditor || !fieldId || !labelElementId) return
|
|
133
|
+
|
|
134
|
+
const dom = advancedEditor.view?.dom as HTMLElement | undefined
|
|
135
|
+
if (!dom) return
|
|
136
|
+
|
|
137
|
+
dom.setAttribute("aria-labelledby", labelElementId)
|
|
138
|
+
dom.setAttribute("role", "textbox")
|
|
139
|
+
dom.setAttribute("aria-multiline", "true")
|
|
140
|
+
}, [advancedEditor, fieldId, labelElementId])
|
|
141
|
+
|
|
116
142
|
// DOM manipulation must wait for editor to be ready
|
|
117
143
|
if (editor && editor.element) {
|
|
118
144
|
const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
|
|
@@ -214,6 +240,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
214
240
|
// Determine if toolbar should be shown
|
|
215
241
|
const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
|
|
216
242
|
|
|
243
|
+
const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
|
|
244
|
+
|
|
217
245
|
return (
|
|
218
246
|
<div
|
|
219
247
|
{...ariaProps}
|
|
@@ -223,7 +251,14 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
223
251
|
ref={focus ? containerRef : undefined}
|
|
224
252
|
>
|
|
225
253
|
{label && (
|
|
226
|
-
<label
|
|
254
|
+
<label
|
|
255
|
+
{...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
|
|
256
|
+
onMouseDown={(e) => {
|
|
257
|
+
if (!advancedEditor || !fieldId) return
|
|
258
|
+
e.preventDefault()
|
|
259
|
+
advancedEditor.commands.focus()
|
|
260
|
+
}}
|
|
261
|
+
>
|
|
227
262
|
{
|
|
228
263
|
requiredIndicator ? (
|
|
229
264
|
<Caption className="pb_text_input_kit_label"
|
|
@@ -246,9 +281,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
246
281
|
advancedEditor ? (
|
|
247
282
|
<div
|
|
248
283
|
className={classnames(
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
284
|
+
"pb_rich_text_editor_advanced_container",
|
|
285
|
+
{ [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
|
|
286
|
+
)}
|
|
252
287
|
>
|
|
253
288
|
{shouldShowToolbar && (
|
|
254
289
|
<EditorToolbar editor={advancedEditor}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
|
+
import { useEditor, EditorContent } from "@tiptap/react"
|
|
4
|
+
import StarterKit from "@tiptap/starter-kit"
|
|
5
|
+
import Link from '@tiptap/extension-link'
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
const RichTextEditorAdvancedLabel = (props) => {
|
|
9
|
+
|
|
10
|
+
const editor = useEditor({
|
|
11
|
+
extensions: [StarterKit, Link],
|
|
12
|
+
content: "Add your text here. You can format your text, add links, quotes, and bullets.",
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const editorNoLabel = useEditor({
|
|
16
|
+
extensions: [StarterKit, Link],
|
|
17
|
+
content: "Add your text here. You can format your text, add links, quotes, and bullets.",
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
if (!editor || !editorNoLabel) return null
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<RichTextEditor
|
|
25
|
+
advancedEditor={editor}
|
|
26
|
+
id={"advanced-example"}
|
|
27
|
+
label="Advanced Example Label"
|
|
28
|
+
{...props}
|
|
29
|
+
>
|
|
30
|
+
<EditorContent editor={editor}/>
|
|
31
|
+
</RichTextEditor>
|
|
32
|
+
<br/>
|
|
33
|
+
<RichTextEditor
|
|
34
|
+
advancedEditor={editorNoLabel}
|
|
35
|
+
label="Advanced Example Label No ID"
|
|
36
|
+
{...props}
|
|
37
|
+
>
|
|
38
|
+
<EditorContent editor={editorNoLabel}/>
|
|
39
|
+
</RichTextEditor>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default RichTextEditorAdvancedLabel
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
|
+
|
|
4
|
+
const RichTextEditorLabel = (props) => {
|
|
5
|
+
const [value, setValue] = useState(''),
|
|
6
|
+
handleOnChange = (html) => setValue(html)
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<RichTextEditor
|
|
11
|
+
id="example"
|
|
12
|
+
label="Example Label"
|
|
13
|
+
onChange={handleOnChange}
|
|
14
|
+
value={value}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
<br/>
|
|
18
|
+
<RichTextEditor
|
|
19
|
+
label="Example Label No ID"
|
|
20
|
+
onChange={handleOnChange}
|
|
21
|
+
value={value}
|
|
22
|
+
{...props}
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default RichTextEditorLabel
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.
|
|
@@ -32,6 +32,8 @@ examples:
|
|
|
32
32
|
- rich_text_editor_advanced_inline: Advanced (Inline)
|
|
33
33
|
- rich_text_editor_advanced_height: Advanced Height
|
|
34
34
|
- rich_text_editor_advanced_min_height: Advanced Min Height
|
|
35
|
+
- rich_text_editor_label: Label
|
|
36
|
+
- rich_text_editor_advanced_label: Advanced (Label)
|
|
35
37
|
- rich_text_editor_required_indicator: Required Indicator
|
|
36
38
|
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
37
39
|
- rich_text_editor_preview: Preview
|
|
@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
|
|
|
21
21
|
export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
|
|
22
22
|
export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
|
|
23
23
|
export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
|
|
24
|
+
export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
|
|
25
|
+
export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'
|
|
@@ -79,21 +79,22 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
79
79
|
header.classList.add('sticky-left-shadow');
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
const headerWidth = (header as HTMLElement).offsetWidth;
|
|
83
|
+
accumulatedWidth += headerWidth;
|
|
84
|
+
|
|
85
|
+
cells.forEach((cell) => {
|
|
86
|
+
cell.classList.add('sticky');
|
|
87
|
+
(cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
|
|
88
|
+
|
|
89
|
+
if (!isLastColumn) {
|
|
90
|
+
cell.classList.add('with-border-right');
|
|
91
|
+
cell.classList.remove('sticky-left-shadow');
|
|
92
|
+
} else {
|
|
93
|
+
cell.classList.remove('with-border-right');
|
|
94
|
+
cell.classList.add('sticky-left-shadow');
|
|
95
|
+
}
|
|
96
|
+
});
|
|
83
97
|
}
|
|
84
|
-
|
|
85
|
-
cells.forEach((cell) => {
|
|
86
|
-
cell.classList.add('sticky');
|
|
87
|
-
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
|
88
|
-
|
|
89
|
-
if (!isLastColumn) {
|
|
90
|
-
cell.classList.add('with-border-right');
|
|
91
|
-
cell.classList.remove('sticky-left-shadow');
|
|
92
|
-
} else {
|
|
93
|
-
cell.classList.remove('with-border-right');
|
|
94
|
-
cell.classList.add('sticky-left-shadow');
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
98
|
});
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -140,21 +141,22 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
140
141
|
header.classList.add('sticky-right-shadow');
|
|
141
142
|
}
|
|
142
143
|
|
|
143
|
-
|
|
144
|
-
|
|
144
|
+
const headerWidth = (header as HTMLElement).offsetWidth;
|
|
145
|
+
accumulatedWidth += headerWidth;
|
|
145
146
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
147
|
+
cells.forEach((cell) => {
|
|
148
|
+
cell.classList.add('sticky');
|
|
149
|
+
(cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
|
|
149
150
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
151
|
+
if (!isLastColumn) {
|
|
152
|
+
cell.classList.add('with-border-left');
|
|
153
|
+
cell.classList.remove('sticky-right-shadow');
|
|
154
|
+
} else {
|
|
155
|
+
cell.classList.remove('with-border-left');
|
|
156
|
+
cell.classList.add('sticky-right-shadow');
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
}
|
|
158
160
|
});
|
|
159
161
|
}
|
|
160
162
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-B_OY_vR9.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-9vEH4omL.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|