playbook_ui 16.6.0.pre.rc.1 → 16.6.0.pre.rc.2
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/table_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +33 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +35 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb +29 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/kit.schema.json +4 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -1
- data/dist/chunks/{_pb_line_graph-D6s5rymw.js → _pb_line_graph-EzcacMw_.js} +1 -1
- data/dist/chunks/{_typeahead-BNp_YiTh.js → _typeahead-BYUXg9ZT.js} +1 -1
- data/dist/chunks/{globalProps-Ds_6HBhX.js → globalProps-6Hsm3bJX.js} +1 -1
- data/dist/chunks/{lib-BaO72ugL.js → lib-o4u12zAw.js} +1 -1
- data/dist/chunks/vendor.js +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 +8 -7
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -58
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0241a7424fee89393c3ca82262e22d714fd04ab5f2b97875c2753c5ce7718190
|
|
4
|
+
data.tar.gz: afdc40a7c200a413984f782045860916b5b7bf9d16dfd1b66c0f5ca55281e81c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d3a2788e7b6b60d30c2e3d4bf3ff44a62b882c1ffed409d6348e332f91f644f9ef4c0f03a5d765734162d02b94d0f93a350a025818a6b4019e629ed816fe2be0
|
|
7
|
+
data.tar.gz: 7c29e7c8ca1734cb4b04cc79cfc64e4f783837108e969bec29fd254ed355dd74786851cf40470526c7cab32503a11e7eafd01c3930e09526fd48c963c2668117
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<% header_row.each_with_index do |cell, cell_index| %>
|
|
8
8
|
<% header_component = object.header_component_info(cell, cell_index, row_index) %>
|
|
9
9
|
<%= pb_rails(header_component[:name], props: header_component[:props]) do %>
|
|
10
|
-
<%= pb_rails("flex", props: { align: "center", justify:
|
|
10
|
+
<%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
|
|
11
11
|
<% if cell_index.zero? && row_index === header_rows.size - 1 %>
|
|
12
12
|
<% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
|
|
13
13
|
<%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
|
|
@@ -192,6 +192,19 @@ module Playbook
|
|
|
192
192
|
{ name: component_name, props: component_props }
|
|
193
193
|
end
|
|
194
194
|
|
|
195
|
+
# Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
|
|
196
|
+
def header_flex_justify(cell, cell_index, row_index)
|
|
197
|
+
ha = cell[:header_alignment]
|
|
198
|
+
return header_alignment_to_justify(ha) if ha.present?
|
|
199
|
+
|
|
200
|
+
default_header_flex_justify(cell_index, row_index)
|
|
201
|
+
end
|
|
202
|
+
|
|
203
|
+
# Flex text_align from column_styling header_alignment (default is end)
|
|
204
|
+
def header_flex_text_align(cell)
|
|
205
|
+
(cell[:header_alignment].presence || "end").to_s
|
|
206
|
+
end
|
|
207
|
+
|
|
195
208
|
private
|
|
196
209
|
|
|
197
210
|
# Find the original column definition for a cell
|
|
@@ -351,6 +364,26 @@ module Playbook
|
|
|
351
364
|
row[:children] || row["children"]
|
|
352
365
|
end
|
|
353
366
|
end
|
|
367
|
+
|
|
368
|
+
# 2 header alignment helper methods
|
|
369
|
+
def header_alignment_to_justify(header_alignment)
|
|
370
|
+
case header_alignment.to_s
|
|
371
|
+
when "left" then "start"
|
|
372
|
+
when "center" then "center"
|
|
373
|
+
when "right" then "end"
|
|
374
|
+
else "end"
|
|
375
|
+
end
|
|
376
|
+
end
|
|
377
|
+
|
|
378
|
+
def default_header_flex_justify(cell_index, row_index)
|
|
379
|
+
if cell_index.zero?
|
|
380
|
+
"start"
|
|
381
|
+
elsif row_index == header_rows.size - 1
|
|
382
|
+
"end"
|
|
383
|
+
else
|
|
384
|
+
"center"
|
|
385
|
+
end
|
|
386
|
+
end
|
|
354
387
|
end
|
|
355
388
|
end
|
|
356
389
|
end
|
|
@@ -612,6 +612,41 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
612
612
|
}
|
|
613
613
|
// === End of Automatic Sync Logic ===
|
|
614
614
|
|
|
615
|
+
// Label click toggles calendar: stop pointer bubbling to document, then toggle (avoids flatpickr close + input-focus reopen).
|
|
616
|
+
const datePickerLabel = document.querySelector(`label[for="${pickerId}"]`)
|
|
617
|
+
if (datePickerLabel) {
|
|
618
|
+
type LabelHandlerRefs = { stopPointer?: (e: Event) => void, click?: (e: MouseEvent) => void }
|
|
619
|
+
const labelWithRefs = datePickerLabel as HTMLElement & { _pbDatePickerLabelHandlers?: LabelHandlerRefs }
|
|
620
|
+
const prev = labelWithRefs._pbDatePickerLabelHandlers
|
|
621
|
+
if (prev?.stopPointer) {
|
|
622
|
+
datePickerLabel.removeEventListener('mousedown', prev.stopPointer)
|
|
623
|
+
datePickerLabel.removeEventListener('touchstart', prev.stopPointer)
|
|
624
|
+
}
|
|
625
|
+
if (prev?.click) {
|
|
626
|
+
datePickerLabel.removeEventListener('click', prev.click)
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
const stopPointerForFlatpickrDocClose = (e: Event) => {
|
|
630
|
+
e.stopPropagation()
|
|
631
|
+
}
|
|
632
|
+
const onDatePickerLabelClick = (e: MouseEvent) => {
|
|
633
|
+
e.preventDefault()
|
|
634
|
+
e.stopPropagation()
|
|
635
|
+
if (picker.input.disabled) return
|
|
636
|
+
picker.toggle()
|
|
637
|
+
if (picker.isOpen) {
|
|
638
|
+
picker.input.focus()
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
datePickerLabel.addEventListener('mousedown', stopPointerForFlatpickrDocClose)
|
|
642
|
+
datePickerLabel.addEventListener('touchstart', stopPointerForFlatpickrDocClose, { passive: true })
|
|
643
|
+
datePickerLabel.addEventListener('click', onDatePickerLabelClick)
|
|
644
|
+
|
|
645
|
+
labelWithRefs._pbDatePickerLabelHandlers = {
|
|
646
|
+
stopPointer: stopPointerForFlatpickrDocClose,
|
|
647
|
+
click: onDatePickerLabelClick,
|
|
648
|
+
}
|
|
649
|
+
}
|
|
615
650
|
|
|
616
651
|
// Adding dropdown icons to year and month select
|
|
617
652
|
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
|
|
@@ -516,18 +516,18 @@ const resolvedLoadOptions =
|
|
|
516
516
|
}
|
|
517
517
|
|
|
518
518
|
// Reset form submitted state when a selection is made (this is all for react rendered rails kit)
|
|
519
|
-
if (action === "select-option") {
|
|
519
|
+
if (action === "select-option" || action === "create-option") {
|
|
520
520
|
setFormSubmitted(false)
|
|
521
521
|
// Mark that user has made a selection to disable default value focus behavior
|
|
522
522
|
setHasUserSelected(true)
|
|
523
523
|
}
|
|
524
524
|
|
|
525
|
-
// If a value is selected and we're preserving input on blur, clear the input
|
|
526
|
-
if (action === "select-option" && preserveSearchInput) {
|
|
525
|
+
// If a value is selected/created and we're preserving input on blur, clear the input
|
|
526
|
+
if ((action === "select-option" || action === "create-option") && preserveSearchInput) {
|
|
527
527
|
setInputValue("")
|
|
528
528
|
}
|
|
529
529
|
|
|
530
|
-
if (action === "select-option") {
|
|
530
|
+
if (action === "select-option" || action === "create-option") {
|
|
531
531
|
if (selectProps.onMultiValueClick && option)
|
|
532
532
|
selectProps.onMultiValueClick(option)
|
|
533
533
|
const multiValueClearEvent = new CustomEvent(
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#00FF00' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
]
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("typeahead", props: {
|
|
11
|
+
id: "typeahead-creatable",
|
|
12
|
+
placeholder: "All Colors",
|
|
13
|
+
options: options,
|
|
14
|
+
label: "Colors",
|
|
15
|
+
name: :foo,
|
|
16
|
+
createable: true,
|
|
17
|
+
pills: true,
|
|
18
|
+
})
|
|
19
|
+
%>
|
|
20
|
+
|
|
21
|
+
<%= javascript_tag defer: "defer" do %>
|
|
22
|
+
document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-option-select", function(event) {
|
|
23
|
+
console.log('Single Option selected')
|
|
24
|
+
console.dir(event.detail)
|
|
25
|
+
})
|
|
26
|
+
document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-clear", function() {
|
|
27
|
+
console.log('All options cleared')
|
|
28
|
+
})
|
|
29
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `createable` prop allows users to create new options by typing a value that doesn't exist in the options list.
|
|
@@ -11,6 +11,7 @@ examples:
|
|
|
11
11
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
12
12
|
- typeahead_inline: Inline
|
|
13
13
|
- typeahead_multi_kit: Multi Kit Options
|
|
14
|
+
- typeahead_createable: Createable
|
|
14
15
|
- typeahead_error_state: Error State
|
|
15
16
|
- typeahead_margin_bottom: Margin Bottom
|
|
16
17
|
- typeahead_with_pills_color: With Pills (Custom Color)
|
|
@@ -62,6 +62,8 @@ module Playbook
|
|
|
62
62
|
default: false
|
|
63
63
|
prop :required_indicator, type: Playbook::Props::Boolean,
|
|
64
64
|
default: false
|
|
65
|
+
prop :createable, type: Playbook::Props::Boolean,
|
|
66
|
+
default: false
|
|
65
67
|
def classname
|
|
66
68
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
|
67
69
|
generate_classname("pb_typeahead_kit") + default_margin_bottom
|
|
@@ -83,7 +85,7 @@ module Playbook
|
|
|
83
85
|
end
|
|
84
86
|
|
|
85
87
|
def is_react?
|
|
86
|
-
pills || !is_multi || wrapped || input_display == "none"
|
|
88
|
+
pills || !is_multi || wrapped || input_display == "none" || createable
|
|
87
89
|
end
|
|
88
90
|
|
|
89
91
|
def typeahead_react_options
|
|
@@ -115,6 +117,7 @@ module Playbook
|
|
|
115
117
|
clearOnContextChange: clear_on_context_change,
|
|
116
118
|
disabled: disabled,
|
|
117
119
|
preserveSearchInput: preserve_search_input,
|
|
120
|
+
createable: createable,
|
|
118
121
|
}
|
|
119
122
|
|
|
120
123
|
base_options[:getOptionLabel] = get_option_label if get_option_label.present?
|
|
@@ -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-6Hsm3bJX.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-o4u12zAw.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};
|