playbook_ui 14.22.0.pre.alpha.PLAY22958843 → 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: a9a87afb49108649bafb3fa308cee33115818ed3a5124a09959a76a4811ef422
4
- data.tar.gz: 2dd4dfda4f2d09be8a4ebb425749fcac4709a05b21117cff44c26c7cfad8b973
3
+ metadata.gz: 5f50300e33da8154703fe359498c9858c3470612348a2ca22970787b3ebd6e03
4
+ data.tar.gz: d7265cc165aec24b1e6f86a88df3621e3534bbf2146555c235486bf44d370619
5
5
  SHA512:
6
- metadata.gz: 3c69443a12f8a545f7612e929657b3f0d0d1bba708433659e30240a61cc6f8790d11895c86b79664013cff05f3edcf5352685b7a36f6dfb91b1dbf8002b84a3b
7
- data.tar.gz: 38989c166335cd6be1f3068876066b1226e49940b05e12fa335b76395e9525783a56f4897dbdc03af2779701254b39d08e61d680b3579504508100f9c346ca6e
6
+ metadata.gz: 5e88eef568e04462cc0e31219558d6ab146f208bacdf23c1d2ca2f395c1cff84348aa4469cf0a7e4d1d3cb254a000b582108d11390aeb01a988af9d9593afbd5
7
+ data.tar.gz: 6aaa5a5f886bf02b488c5ba129df3b46b38f0e03abb07610a72588f6ba9e112a82d3e1fa8050dbc63879056c9912ec1fffa02b26a2767d49dd7daad0276e6857
@@ -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};