playbook_ui 15.7.0.pre.alpha.play270013292 → 15.7.0.pre.alpha.play270013367
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_fixed_confirmation_toast/fixed_confirmation_toast.rb +9 -7
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +3 -8
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md +6 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md +6 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md +6 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +6 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +41 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.html.erb +7 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.jsx +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_emoji_mask.md +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/index.js +49 -8
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +53 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +38 -2
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb +5 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx +24 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.md +1 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_textarea/index.ts +62 -5
- data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +8 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.test.js +57 -2
- data/app/pb_kits/playbook/utilities/emojiMask.ts +42 -0
- data/dist/chunks/{_pb_line_graph-BD1q16F4.js → _pb_line_graph-hxi01lk7.js} +1 -1
- data/dist/chunks/_typeahead-CXDxFWiJ.js +1 -0
- data/dist/chunks/{globalProps-DEelyJQ8.js → globalProps-DgYwLYNx.js} +1 -1
- data/dist/chunks/{lib-kKvUARMY.js → lib-NLxTo8OB.js} +1 -1
- data/dist/chunks/vendor.js +5 -5
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +13 -6
- data/dist/chunks/_typeahead-8dL5voQX.js +0 -1
|
@@ -1,19 +1,76 @@
|
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
|
2
|
+
import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
|
|
2
3
|
|
|
3
4
|
export default class PbTextarea extends PbEnhancedElement {
|
|
4
5
|
style: {[key: string]: string}
|
|
5
6
|
scrollHeight: string
|
|
7
|
+
private skipNextEmojiFilter = false
|
|
8
|
+
|
|
6
9
|
static get selector(): string {
|
|
7
|
-
return '.resize_auto textarea'
|
|
10
|
+
return '.resize_auto textarea, [data-pb-emoji-mask="true"]'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
hasEmojiMask(): boolean {
|
|
14
|
+
return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
|
|
8
15
|
}
|
|
9
16
|
|
|
10
17
|
onInput(): void {
|
|
11
|
-
this.
|
|
12
|
-
|
|
18
|
+
if ((this.element as HTMLElement).closest('.resize_auto')) {
|
|
19
|
+
this.style.height = 'auto'
|
|
20
|
+
this.style.height = (this.scrollHeight) + 'px'
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
handleEmojiInput = (): void => {
|
|
25
|
+
if (!this.hasEmojiMask()) return
|
|
26
|
+
|
|
27
|
+
if (this.skipNextEmojiFilter) {
|
|
28
|
+
this.skipNextEmojiFilter = false
|
|
29
|
+
return
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
applyEmojiMask(this.element as HTMLTextAreaElement)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
handleEmojiPaste = (event: ClipboardEvent): void => {
|
|
36
|
+
if (!this.hasEmojiMask()) return
|
|
37
|
+
|
|
38
|
+
const pastedText = event.clipboardData?.getData('text') || ''
|
|
39
|
+
const filteredText = stripEmojisForPaste(pastedText)
|
|
40
|
+
|
|
41
|
+
if (pastedText !== filteredText) {
|
|
42
|
+
event.preventDefault()
|
|
43
|
+
const textarea = this.element as HTMLTextAreaElement
|
|
44
|
+
const start = textarea.selectionStart || 0
|
|
45
|
+
const end = textarea.selectionEnd || 0
|
|
46
|
+
const currentValue = textarea.value
|
|
47
|
+
const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
|
|
48
|
+
const newCursor = start + filteredText.length
|
|
49
|
+
|
|
50
|
+
textarea.value = newValue
|
|
51
|
+
textarea.selectionStart = textarea.selectionEnd = newCursor
|
|
52
|
+
|
|
53
|
+
this.skipNextEmojiFilter = true
|
|
54
|
+
|
|
55
|
+
textarea.dispatchEvent(new Event('input', { bubbles: true }))
|
|
56
|
+
}
|
|
13
57
|
}
|
|
14
58
|
|
|
15
59
|
connect(): void {
|
|
16
|
-
|
|
17
|
-
|
|
60
|
+
if ((this.element as HTMLElement).closest('.resize_auto')) {
|
|
61
|
+
this.element.setAttribute('style', 'height:' + (this.element as HTMLTextAreaElement).scrollHeight + 'px;overflow-y:hidden;')
|
|
62
|
+
this.element.addEventListener('input', this.onInput, false)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (this.hasEmojiMask()) {
|
|
66
|
+
this.element.addEventListener('input', this.handleEmojiInput, false)
|
|
67
|
+
this.element.addEventListener('paste', this.handleEmojiPaste as EventListener, false)
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
disconnect(): void {
|
|
72
|
+
this.element.removeEventListener('input', this.onInput, false)
|
|
73
|
+
this.element.removeEventListener('input', this.handleEmojiInput, false)
|
|
74
|
+
this.element.removeEventListener('paste', this.handleEmojiPaste as EventListener, false)
|
|
18
75
|
}
|
|
19
76
|
}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbTextarea
|
|
5
5
|
class Textarea < Playbook::KitBase
|
|
6
|
+
prop :emoji_mask, type: Playbook::Props::Boolean,
|
|
7
|
+
default: false
|
|
6
8
|
prop :error
|
|
7
9
|
prop :inline, type: Playbook::Props::Boolean,
|
|
8
10
|
default: false
|
|
@@ -28,6 +30,12 @@ module Playbook
|
|
|
28
30
|
max_characters && character_count ? "#{character_count} / #{max_characters}" : character_count
|
|
29
31
|
end
|
|
30
32
|
|
|
33
|
+
def textarea_options
|
|
34
|
+
{
|
|
35
|
+
data: emoji_mask ? { pb_emoji_mask: true } : {},
|
|
36
|
+
}
|
|
37
|
+
end
|
|
38
|
+
|
|
31
39
|
private
|
|
32
40
|
|
|
33
41
|
def error_class
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import { render, screen } from "../utilities/test-utils"
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import { render, screen, fireEvent } from "../utilities/test-utils"
|
|
3
3
|
|
|
4
4
|
import Textarea from "./_textarea"
|
|
5
5
|
|
|
@@ -211,3 +211,58 @@ describe("TextArea Kit Props", () => {
|
|
|
211
211
|
expect(textarea.required).toBeTruthy()
|
|
212
212
|
})
|
|
213
213
|
})
|
|
214
|
+
|
|
215
|
+
describe("Textarea Emoji Mask", () => {
|
|
216
|
+
const TextareaEmojiMask = (props) => {
|
|
217
|
+
const [value, setValue] = useState('')
|
|
218
|
+
const handleOnChange = ({ target }) => {
|
|
219
|
+
setValue(target.value)
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
return (
|
|
223
|
+
<Textarea
|
|
224
|
+
emojiMask
|
|
225
|
+
onChange={handleOnChange}
|
|
226
|
+
value={value}
|
|
227
|
+
{...props}
|
|
228
|
+
/>
|
|
229
|
+
)
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
test("removes emoji characters when emojiMask is enabled", () => {
|
|
233
|
+
render(
|
|
234
|
+
<TextareaEmojiMask
|
|
235
|
+
data={{ testid: testId }}
|
|
236
|
+
/>
|
|
237
|
+
)
|
|
238
|
+
|
|
239
|
+
const kit = screen.getByTestId(testId)
|
|
240
|
+
const textarea = kit.querySelector("textarea")
|
|
241
|
+
|
|
242
|
+
fireEvent.change(textarea, { target: { value: 'Hello 👋 World 🌍' } })
|
|
243
|
+
expect(textarea.value).toBe('Hello World ')
|
|
244
|
+
|
|
245
|
+
fireEvent.change(textarea, { target: { value: '😀😂🎉' } })
|
|
246
|
+
expect(textarea.value).toBe('')
|
|
247
|
+
|
|
248
|
+
fireEvent.change(textarea, { target: { value: 'Hello World' } })
|
|
249
|
+
expect(textarea.value).toBe('Hello World')
|
|
250
|
+
})
|
|
251
|
+
|
|
252
|
+
test("allows accented characters when emojiMask is enabled", () => {
|
|
253
|
+
render(
|
|
254
|
+
<TextareaEmojiMask
|
|
255
|
+
data={{ testid: testId }}
|
|
256
|
+
/>
|
|
257
|
+
)
|
|
258
|
+
|
|
259
|
+
const kit = screen.getByTestId(testId)
|
|
260
|
+
const textarea = kit.querySelector("textarea")
|
|
261
|
+
|
|
262
|
+
fireEvent.change(textarea, { target: { value: 'Café résumé naïve' } })
|
|
263
|
+
expect(textarea.value).toBe('Café résumé naïve')
|
|
264
|
+
|
|
265
|
+
fireEvent.change(textarea, { target: { value: 'àëǒüñ' } })
|
|
266
|
+
expect(textarea.value).toBe('àëǒüñ')
|
|
267
|
+
})
|
|
268
|
+
})
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// Regex to match emoji/pictographic characters
|
|
2
|
+
// With modifiers: Zero Width Joiner, Variation Selectors, Skin Tone Modifiers
|
|
3
|
+
export const EMOJI_REGEX = /\p{Extended_Pictographic}|\u200D|\uFE0F|[\u{1F3FB}-\u{1F3FF}]/gu
|
|
4
|
+
|
|
5
|
+
// Utility function to strip emojis from text when typing emojis
|
|
6
|
+
export const stripEmojisForTyping = (text: string): string => {
|
|
7
|
+
return text.replace(EMOJI_REGEX, '')
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// Utility function to strip emojis and clean up whitespace when pasting emojis
|
|
11
|
+
export const stripEmojisForPaste = (text: string): string => {
|
|
12
|
+
return stripEmojisForTyping(text)
|
|
13
|
+
.replace(/\s+/g, ' ')
|
|
14
|
+
.trim()
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
type EmojiMaskResult = {
|
|
18
|
+
value: string
|
|
19
|
+
cursor: number | null
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// Union type for elements that support emoji masking
|
|
23
|
+
type TextInputElement = HTMLInputElement | HTMLTextAreaElement
|
|
24
|
+
|
|
25
|
+
export const applyEmojiMask = (
|
|
26
|
+
element: TextInputElement
|
|
27
|
+
): EmojiMaskResult => {
|
|
28
|
+
const cursor = element.selectionStart
|
|
29
|
+
const original = element.value
|
|
30
|
+
const filtered = stripEmojisForTyping(original)
|
|
31
|
+
|
|
32
|
+
if (original !== filtered) {
|
|
33
|
+
const beforeCursor = original.slice(0, cursor || 0)
|
|
34
|
+
const newCursor = stripEmojisForTyping(beforeCursor).length
|
|
35
|
+
element.value = filtered
|
|
36
|
+
element.selectionStart = element.selectionEnd = newCursor
|
|
37
|
+
return { value: filtered, cursor: newCursor }
|
|
38
|
+
}
|
|
39
|
+
return { value: original, cursor }
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
|
|
@@ -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-DgYwLYNx.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-NLxTo8OB.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};
|