playbook_ui 14.22.0.pre.alpha.PLAY22958842 → 14.22.0.pre.alpha.PLAY23038941

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3de603024c411735f4b6673b7c73777346e08a9b2e8d7dcce3340443d29b9901
4
- data.tar.gz: ca20dcd09408cba7ba7dd9a9967940929ddd63b223810d63b16fa37ca8a8aaed
3
+ metadata.gz: 5f50300e33da8154703fe359498c9858c3470612348a2ca22970787b3ebd6e03
4
+ data.tar.gz: d7265cc165aec24b1e6f86a88df3621e3534bbf2146555c235486bf44d370619
5
5
  SHA512:
6
- metadata.gz: 3ec985ee66de08ee512f089eb0e96b0e35d50453ea46bd9d81065ed05886b1bc0311d9f7eda4fae5d993851dc5dc263a8e9b118398c2a5e720cfd1508c5159d9
7
- data.tar.gz: 4b01826de7c7604e8d91e4844037cb788fc0d57000057b9e41352598c8f5f737255ad15f86d52be9fe7157918f5e9092f815a65cb3efaa0fb435f5b5a44fa0f5
6
+ metadata.gz: 5e88eef568e04462cc0e31219558d6ab146f208bacdf23c1d2ca2f395c1cff84348aa4469cf0a7e4d1d3cb254a000b582108d11390aeb01a988af9d9593afbd5
7
+ data.tar.gz: 6aaa5a5f886bf02b488c5ba129df3b46b38f0e03abb07610a72588f6ba9e112a82d3e1fa8050dbc63879056c9912ec1fffa02b26a2767d49dd7daad0276e6857
@@ -12,7 +12,6 @@ examples:
12
12
  - advanced_table_custom_cell_rails: Custom Components for Cells
13
13
  - advanced_table_column_headers: Multi-Header Columns
14
14
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
15
- - advanced_table_column_border_color_rails: Column Group Border Color
16
15
  - advanced_table_no_subrows: Table with No Subrows or Expansion
17
16
  - advanced_table_selectable_rows_rails: Selectable Rows
18
17
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -21,10 +20,11 @@ examples:
21
20
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
22
21
  - advanced_table_column_styling_rails: Column Styling
23
22
  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
23
+ - advanced_table_column_border_color_rails: Column Group Border Color
24
+
24
25
 
25
26
  react:
26
27
  - advanced_table_default: Default (Required Props)
27
- - advanced_table_loading: Loading State
28
28
  - advanced_table_sort: Enable Sorting
29
29
  - advanced_table_sort_control: Sort Control
30
30
  - advanced_table_custom_sort: Custom Sort
@@ -38,30 +38,31 @@ examples:
38
38
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
39
39
  - advanced_table_sticky_columns: Sticky Columns
40
40
  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
41
- - advanced_table_inline_row_loading: Inline Row Loading
42
41
  - advanced_table_responsive: Responsive Tables
43
42
  - advanced_table_custom_cell: Custom Components for Cells
44
43
  - advanced_table_with_custom_header: Custom Header Cell
45
44
  - advanced_table_pagination: Pagination
46
45
  - advanced_table_pagination_with_props: Pagination Props
46
+ - advanced_table_loading: Loading State
47
+ - advanced_table_inline_row_loading: Inline Row Loading
47
48
  - advanced_table_column_headers: Multi-Header Columns
48
49
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
49
50
  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
50
- - advanced_table_column_border_color: Column Group Border Color
51
51
  - advanced_table_no_subrows: Table with No Subrows or Expansion
52
+ - advanced_table_pinned_rows: Pinned Rows
52
53
  - advanced_table_selectable_rows: Selectable Rows
53
54
  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
54
55
  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
55
56
  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
56
57
  - advanced_table_inline_editing: Inline Cell Editing
57
- - advanced_table_fullscreen: Fullscreen
58
58
  - advanced_table_column_visibility: Column Visibility Control
59
59
  - advanced_table_column_visibility_with_state: Column Visibility Control With State
60
60
  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
61
61
  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
62
- - advanced_table_pinned_rows: Pinned Rows
63
62
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
64
63
  - advanced_table_row_styling: Row Styling
65
64
  - advanced_table_column_styling: Column Styling
66
65
  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
66
+ - advanced_table_column_border_color: Column Group Border Color
67
+ - advanced_table_fullscreen: Fullscreen
67
68
  - advanced_table_infinite_scroll: Infinite Scroll
@@ -19,7 +19,7 @@ const BodyTruncate = (props) => {
19
19
  <Body
20
20
  marginBottom="md"
21
21
  text={lorem}
22
- truncate="1"
22
+ truncate={1}
23
23
  {...props}
24
24
  />
25
25
 
@@ -30,7 +30,7 @@ const BodyTruncate = (props) => {
30
30
  <Body
31
31
  marginBottom="md"
32
32
  text={lorem}
33
- truncate="2"
33
+ truncate={2}
34
34
  {...props}
35
35
  />
36
36
 
@@ -40,7 +40,7 @@ const BodyTruncate = (props) => {
40
40
  />
41
41
  <Body
42
42
  text={lorem}
43
- truncate="3"
43
+ truncate={3}
44
44
  {...props}
45
45
  />
46
46
  </Flex>
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
3
3
 
4
4
  const initialState: InitialStateType = {
5
5
  items: [],
6
- dragData: { id: "", initialGroup: "" },
6
+ dragData: { id: "", initialGroup: "", originId: "" },
7
7
  isDragging: "",
8
8
  activeContainer: ""
9
9
  };
@@ -60,7 +60,8 @@ export const DraggableProvider = ({
60
60
  onDragEnd,
61
61
  onDrop,
62
62
  onDragOver,
63
- dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
63
+ dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
64
+ providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
64
65
  }: DraggableProviderType) => {
65
66
  const [state, dispatch] = useReducer(reducer, initialState);
66
67
 
@@ -93,15 +94,17 @@ export const DraggableProvider = ({
93
94
  }, [state.items]);
94
95
 
95
96
  const handleDragStart = (id: string, container: string) => {
96
- dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
97
+ dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
97
98
  dispatch({ type: 'SET_IS_DRAGGING', payload: id });
98
99
  if (onDragStart) onDragStart(id, container);
99
100
  };
100
101
 
101
102
  const handleDragEnter = (id: string, container: string) => {
103
+ if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
104
+
102
105
  if (state.dragData.id !== id) {
103
106
  dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
104
- dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
107
+ dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
105
108
  }
106
109
  if (onDragEnter) onDragEnter(id, container);
107
110
  };
@@ -109,6 +112,7 @@ export const DraggableProvider = ({
109
112
  const handleDragEnd = () => {
110
113
  dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
111
114
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
115
+ dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
112
116
  if (onDragEnd) onDragEnd();
113
117
  };
114
118
 
@@ -117,6 +121,8 @@ export const DraggableProvider = ({
117
121
  };
118
122
 
119
123
  const handleDrop = (container: string) => {
124
+ if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
125
+
120
126
  dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
121
127
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
122
128
  changeCategory(state.dragData.id, container);
@@ -124,6 +130,8 @@ export const DraggableProvider = ({
124
130
  };
125
131
 
126
132
  const handleDragOver = (e: Event, container: string) => {
133
+ if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
134
+
127
135
  e.preventDefault();
128
136
  dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
129
137
  if (onDragOver) onDragOver(e, container);
@@ -6,14 +6,16 @@ export interface ItemType {
6
6
 
7
7
  export interface InitialStateType {
8
8
  items: ItemType[];
9
- dragData: { id: string; initialGroup: string };
9
+ dragData: { id: string; initialGroup: string, originId?: string };
10
10
  isDragging: string;
11
11
  activeContainer: string;
12
12
  }
13
13
 
14
14
  export type ActionType =
15
15
  | { type: 'SET_ITEMS'; payload: ItemType[] }
16
- | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
16
+ | { type: 'SET_DRAG_DATA'; payload: {
17
+ originId: string; id: string; initialGroup: string
18
+ } }
17
19
  | { type: 'SET_IS_DRAGGING'; payload: string }
18
20
  | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
19
21
  | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -35,4 +37,5 @@ export type ActionType =
35
37
  onDrop?: (container: string) => void;
36
38
  onDragOver?: (e: Event, container: string) => void;
37
39
  dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
40
+ providerId?: string;
38
41
  }
@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
68
68
  return /^[()+\-\ .\d]*$/g.test(value)
69
69
  }
70
70
 
71
- const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
71
+ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
72
72
  const {
73
73
  aria = {},
74
74
  className,
@@ -106,15 +106,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
106
106
  className
107
107
  )
108
108
 
109
- const inputRef = useRef<HTMLInputElement>()
109
+ const inputRef = useRef<HTMLInputElement | null>(null)
110
110
  const itiRef = useRef<any>(null);
111
111
  const [inputValue, setInputValue] = useState(value)
112
112
  const [error, setError] = useState(props.error)
113
113
  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
114
114
  const [selectedData, setSelectedData] = useState()
115
+ const [hasTyped, setHasTyped] = useState(false)
115
116
 
116
117
  useEffect(() => {
117
- if (error?.length > 0) {
118
+ if ((error ?? '').length > 0) {
118
119
  onValidate(false)
119
120
  } else {
120
121
  onValidate(true)
@@ -131,6 +132,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
131
132
  clearField() {
132
133
  setInputValue("")
133
134
  setError("")
135
+ setHasTyped(false)
134
136
  },
135
137
  inputNode() {
136
138
  return inputRef.current
@@ -201,6 +203,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
201
203
  }
202
204
 
203
205
  const validateErrors = () => {
206
+ if (!hasTyped && !error) return
207
+
204
208
  if (itiRef.current) isValid(itiRef.current.isValidNumber())
205
209
  if (validateOnlyNumbers(itiRef.current)) return
206
210
  if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
214
218
  }
215
219
 
216
220
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
221
+ if (!hasTyped) setHasTyped(true)
217
222
  setInputValue(evt.target.value)
218
223
  let phoneNumberData
219
224
  if (formatAsYouType) {
@@ -259,16 +264,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
259
264
 
260
265
  itiRef.current = telInputInit;
261
266
 
262
- inputRef.current.addEventListener("countrychange", (evt: Event) => {
263
- const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
264
- setSelectedData(phoneNumberData)
265
- onChange(phoneNumberData)
266
- validateErrors()
267
- })
268
-
269
- inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
270
- inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
267
+ if (inputRef.current) {
268
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
269
+ const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
270
+ setSelectedData(phoneNumberData)
271
+ onChange(phoneNumberData)
272
+ validateErrors()
273
+ })
271
274
 
275
+ inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
276
+ inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
277
+ }
272
278
  if (formatAsYouType) {
273
279
  inputRef.current?.addEventListener("input", (evt) => {
274
280
  handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -303,12 +309,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
303
309
  {...htmlProps}
304
310
  >
305
311
  <TextInput
306
- ref={
307
- inputNode => {
308
- ref ? ref.current = inputNode : null
309
- inputRef.current = inputNode
312
+ ref={inputNode => {
313
+ if (ref) {
314
+ if (typeof ref === 'function') {
315
+ ref(inputNode)
316
+ } else {
317
+ (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
318
+ }
310
319
  }
311
- }
320
+ inputRef.current = inputNode
321
+ }}
312
322
  {...textInputProps}
313
323
  />
314
324
  </div>
@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
20
20
  marginBottom="md"
21
21
  size={4}
22
22
  text={lorem}
23
- truncate="1"
23
+ truncate={1}
24
24
  {...props}
25
25
  />
26
26
 
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
32
32
  marginBottom="md"
33
33
  size={4}
34
34
  text={lorem}
35
- truncate="2"
35
+ truncate={2}
36
36
  {...props}
37
37
  />
38
38
 
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
43
43
  <Title
44
44
  size={4}
45
45
  text={lorem}
46
- truncate="3"
46
+ truncate={3}
47
47
  {...props}
48
48
  />
49
49
  </Flex>
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1 +1 @@
1
- import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-CuwY9iVi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};
1
+ import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-B1tu_vWi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};