playbook_ui 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8856 → 14.22.0.pre.alpha.testdialog8898

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.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  3. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
  4. data/app/pb_kits/playbook/pb_filter/filter.test.js +1 -1
  5. data/app/pb_kits/playbook/pb_popover/_popover.tsx +20 -16
  6. data/app/pb_kits/playbook/pb_popover/index.ts +15 -33
  7. data/app/pb_kits/playbook/pb_popover/popover.test.js +220 -0
  8. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js +47 -0
  9. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  10. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
  11. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +3 -3
  12. data/dist/chunks/{_circle_chart-DVSbcau1.js → _circle_chart-CE1dVeaK.js} +1 -1
  13. data/dist/chunks/_typeahead-CEZhT0Qr.js +6 -0
  14. data/dist/chunks/_weekday_stacked-Zjg_MJ-c.js +61 -0
  15. data/dist/chunks/lib-CP6s-TZS.js +29 -0
  16. data/dist/chunks/{pb_form_validation-DczEjrcc.js → pb_form_validation-DO8gKaSb.js} +1 -1
  17. data/dist/chunks/vendor.js +1 -1
  18. data/dist/playbook-doc.js +19 -1
  19. data/dist/playbook-rails-react-bindings.js +1 -1
  20. data/dist/playbook-rails.js +1 -1
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +13 -9
  23. data/dist/chunks/_typeahead-Dw_aUsLL.js +0 -22
  24. data/dist/chunks/_weekday_stacked-BNHzzslr.js +0 -21
  25. data/dist/chunks/lib-Ca_BDmX1.js +0 -29
  26. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
  27. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 59d57ab06058a892e57dd3b0d53fefa41c0d1adf9803a3ec5a7789081d6c1ace
4
- data.tar.gz: 942847d4121460050421a8a9f91a1f64a938ac0d27ee2127f28758f6b351342e
3
+ metadata.gz: 6e1bf28ca8680821d3cd9d6360cca29bffb179c412ed8cd66759fd52c58fd2af
4
+ data.tar.gz: f79d1c5490859c4baecf9a55e5b1c4808556967d5b29ab2373e1042c4cb955e6
5
5
  SHA512:
6
- metadata.gz: 9ef39200a1259638dca57438674c2e24355baf2e7f7cb526d547d7951a86e3b6c352f4835c17c7b1e4ba0d3fd4cf78c387497c5e5586cd4cf419b9a762062475
7
- data.tar.gz: 453208815eb6f1fd971bb2c9ec535b9b222f40d7ead0eb42386a48eaba66d72c605d4e4b54f3069d5189f8f89764b64671e62fc0eb43b14ba44c5985ed6d6228
6
+ metadata.gz: 8d7e6ab914230e202d9d862e4883ee0d56770cb4ca06c8f2c1c0595b016f156d322e8678abf2bbbf6f19799030e28892bbcc7ff727c5a7045364f027220c183f
7
+ data.tar.gz: 208a2115288440a4455b76b5aaddb60ddf532493282aa9bf7263d1f1fe8bef8328e2968757e50ff45dd1ee9034c6c227be4ada975169b4fe7818d47c6e491645
@@ -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.
@@ -57,7 +57,7 @@ function FilterTest(props) {
57
57
  );
58
58
  }
59
59
 
60
- test.skip("triggers popover on filter button click", () => {
60
+ test("triggers popover on filter button click", () => {
61
61
  const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
62
62
 
63
63
  const btn = screen.getAllByRole("button")[0];
@@ -1,13 +1,13 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
2
  import React, { useEffect, useState } from "react";
3
3
  import ReactDOM from "react-dom";
4
- // import {
5
- // Popper,
6
- // Manager as PopperManager,
7
- // Modifier,
8
- // PopperProps,
9
- // Reference as PopperReference,
10
- // } from "react-popper";
4
+ import {
5
+ Popper,
6
+ Manager as PopperManager,
7
+ Modifier,
8
+ PopperProps,
9
+ Reference as PopperReference,
10
+ } from "react-popper";
11
11
 
12
12
  import {
13
13
  buildAriaProps,
@@ -31,10 +31,10 @@ type PbPopoverProps = {
31
31
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
32
32
  id?: string;
33
33
  offset?: boolean;
34
- reference: any;
34
+ reference: PopperReference & any;
35
35
  show?: boolean;
36
36
  shouldClosePopover?: (arg0: boolean) => void;
37
- } & ModifiedGlobalProps & Omit<any, 'children'>
37
+ } & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
38
38
  & { children?: React.ReactChild[] | React.ReactChild }
39
39
 
40
40
  // Prop enabled default modifiers here
@@ -56,7 +56,7 @@ const popoverModifiers = ({
56
56
  modifiers,
57
57
  offset,
58
58
  }: {
59
- modifiers: any;
59
+ modifiers: Modifier<any> & any;
60
60
  offset: boolean;
61
61
  }) => {
62
62
  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
@@ -112,7 +112,11 @@ const Popover = (props: PbPopoverProps) => {
112
112
  );
113
113
 
114
114
  return (
115
- <>
115
+ <Popper
116
+ modifiers={popoverModifiers({ modifiers, offset })}
117
+ placement={placement}
118
+ referenceElement={referenceElement}
119
+ >
116
120
  {({ placement, ref, style }) => {
117
121
  return (
118
122
  <div
@@ -143,7 +147,7 @@ const Popover = (props: PbPopoverProps) => {
143
147
  </div>
144
148
  );
145
149
  }}
146
- </>
150
+ </Popper>
147
151
  );
148
152
  };
149
153
 
@@ -224,9 +228,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
224
228
  );
225
229
 
226
230
  return (
227
- // <PopperManager>
231
+ <PopperManager>
228
232
  <>
229
- {/* {reference && !referenceElement && (
233
+ {reference && !referenceElement && (
230
234
  <PopperReference>
231
235
  {({ ref }) => (
232
236
  <span
@@ -249,9 +253,9 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
249
253
  </>
250
254
  ) : (
251
255
  { popoverComponent }
252
- ))} */}
256
+ ))}
253
257
  </>
254
- // </PopperManager>
258
+ </PopperManager>
255
259
  );
256
260
  };
257
261
 
@@ -1,12 +1,12 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
- import { computePosition, offset, flip, shift, autoUpdate, Placement } from '@floating-ui/dom'
2
+ import { createPopper, Instance, Placement } from '@popperjs/core'
3
3
 
4
4
  const POPOVER_OFFSET_Y = [0, 20]
5
5
 
6
6
  export default class PbPopover extends PbEnhancedElement {
7
+ popper: Instance
7
8
  _triggerElement: HTMLElement
8
9
  _tooltip: HTMLElement
9
- cleanupAutoUpdate: () => void
10
10
  element: HTMLElement
11
11
  static get selector() {
12
12
  return '[data-pb-popover-kit]'
@@ -31,15 +31,18 @@ export default class PbPopover extends PbEnhancedElement {
31
31
  }
32
32
  this.moveTooltip()
33
33
 
34
- // Initial position
35
- this.updatePosition()
36
-
37
- // Update position (i.e., scroll or resize)
38
- this.cleanupAutoUpdate = autoUpdate(
39
- this.triggerElement,
40
- this.tooltip,
41
- () => this.updatePosition()
42
- )
34
+ this.popper = createPopper (this.triggerElement, this.tooltip, {
35
+ placement: this.position as Placement,
36
+ strategy: 'fixed',
37
+ modifiers: [
38
+ {
39
+ name: 'offset',
40
+ options: {
41
+ offset: this.offset,
42
+ },
43
+ },
44
+ ],
45
+ })
43
46
 
44
47
  this.triggerElement.addEventListener('click', (event: Event) => {
45
48
  event.preventDefault()
@@ -51,32 +54,11 @@ export default class PbPopover extends PbEnhancedElement {
51
54
 
52
55
  setTimeout(() => {
53
56
  this.toggleTooltip()
54
- this.updatePosition()
57
+ this.popper.update()
55
58
  }, 0)
56
59
  })
57
60
  }
58
61
 
59
- updatePosition() {
60
- computePosition(this.triggerElement, this.tooltip, {
61
- placement: this.position as Placement,
62
- strategy: 'fixed',
63
- middleware: [
64
- offset(() => {
65
- const [ crossAxis, mainAxis ] = this.offset
66
- return { mainAxis, crossAxis }
67
- }),
68
- flip(),
69
- shift(),
70
- ],
71
- }).then(({ x, y }) => {
72
- Object.assign(this.tooltip.style, {
73
- left: `${x}px`,
74
- top: `${y}px`,
75
- position: 'fixed',
76
- })
77
- })
78
- }
79
-
80
62
  checkCloseTooltip() {
81
63
  document.querySelector('body').addEventListener('click', ({ target } ) => {
82
64
  const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
@@ -0,0 +1,220 @@
1
+ import React from "react";
2
+ import { render, screen, fireEvent } from "../utilities/test-utils";
3
+ import { Button, PbReactPopover } from "playbook-ui";
4
+
5
+ const testId = "popover-kit";
6
+
7
+ //Test default popover
8
+ const PopoverTest = () => {
9
+ const [mockState, setMockState] = React.useState(false)
10
+ const togglePopover = () => {
11
+ setMockState(!mockState)
12
+ }
13
+
14
+ const popoverReference = (
15
+ <Button onClick={togglePopover}
16
+ text="Click Me"
17
+ />
18
+ );
19
+ return (
20
+ <PbReactPopover
21
+ offset
22
+ reference={popoverReference}
23
+ show={mockState}
24
+ >
25
+ {"Click Anywhere"}
26
+ </PbReactPopover>
27
+ )
28
+ };
29
+ //Test popover with z-index
30
+ const PopoverTestZIndex = () => {
31
+ const [mockState, setMockState] = React.useState(false)
32
+ const togglePopover = () => {
33
+ setMockState(!mockState)
34
+ }
35
+
36
+ const popoverReference = (
37
+ <Button onClick={togglePopover}
38
+ text="Click Me"
39
+ />
40
+ );
41
+ return (
42
+ <PbReactPopover
43
+ offset
44
+ reference={popoverReference}
45
+ show={mockState}
46
+ zIndex={3}
47
+ >
48
+ {"Click Anywhere"}
49
+ </PbReactPopover>
50
+ )
51
+ };
52
+
53
+ //Test popover with max-height and max-width
54
+ const PopoverTestHeight = () => {
55
+ const [mockState, setMockState] = React.useState(false)
56
+ const togglePopover = () => {
57
+ setMockState(!mockState)
58
+ }
59
+
60
+ const popoverReference = (
61
+ <Button onClick={togglePopover}
62
+ text="Click Me"
63
+ />
64
+ );
65
+ return (
66
+ <PbReactPopover
67
+ maxHeight="150px"
68
+ maxWidth="240px"
69
+ offset
70
+ reference={popoverReference}
71
+ show={mockState}
72
+ >
73
+ {"Click Anywhere"}
74
+ </PbReactPopover>
75
+ )
76
+ };
77
+
78
+ //Test Popover with click to close 'anywhere'
79
+ const PopoverTestClicktoClose = () => {
80
+ const [mockState, setMockState] = React.useState(false)
81
+ const togglePopover = () => {
82
+ setMockState(!mockState)
83
+ }
84
+ const handleShouldClosePopover = (shouldClosePopover) => {
85
+ setMockState(!shouldClosePopover)
86
+ }
87
+
88
+ const popoverReference = (
89
+ <Button onClick={togglePopover}
90
+ text="Click Me"
91
+ />
92
+ );
93
+ return (
94
+ <PbReactPopover
95
+ closeOnClick="any"
96
+ offset
97
+ reference={popoverReference}
98
+ shouldClosePopover={handleShouldClosePopover}
99
+ show={mockState}
100
+ >
101
+ {"Click Anywhere"}
102
+ </PbReactPopover>
103
+ )
104
+ };
105
+
106
+ //Test Popover with click to close 'inside'
107
+ const PopoverTestClicktoClose2 = () => {
108
+ const [mockState, setMockState] = React.useState(false)
109
+ const togglePopover = () => {
110
+ setMockState(!mockState)
111
+ }
112
+ const handleShouldClosePopover = (shouldClosePopover) => {
113
+ setMockState(!shouldClosePopover)
114
+ }
115
+
116
+ const popoverReference = (
117
+ <Button onClick={togglePopover}
118
+ text="Click Me"
119
+ />
120
+ );
121
+ return (
122
+ <PbReactPopover
123
+ closeOnClick="inside"
124
+ offset
125
+ reference={popoverReference}
126
+ shouldClosePopover={handleShouldClosePopover}
127
+ show={mockState}
128
+ >
129
+ {"Click Inside"}
130
+ </PbReactPopover>
131
+ )
132
+ };
133
+
134
+ //Test Popover with click to close 'outside'
135
+ const PopoverTestClicktoClose3 = () => {
136
+ const [mockState, setMockState] = React.useState(false)
137
+ const togglePopover = () => {
138
+ setMockState(!mockState)
139
+ }
140
+ const handleShouldClosePopover = (shouldClosePopover) => {
141
+ setMockState(!shouldClosePopover)
142
+ }
143
+
144
+ const popoverReference = (
145
+ <Button onClick={togglePopover}
146
+ text="Click Me"
147
+ />
148
+ );
149
+ return (
150
+ <PbReactPopover
151
+ closeOnClick="outside"
152
+ offset
153
+ reference={popoverReference}
154
+ shouldClosePopover={handleShouldClosePopover}
155
+ show={mockState}
156
+ >
157
+ {"Click Outside"}
158
+ </PbReactPopover>
159
+ )
160
+ };
161
+
162
+
163
+ test("renders Popover", () => {
164
+ render(<PopoverTest data={{ testid: testId}}/>)
165
+ const btn = screen.getByText(/click me/i)
166
+ fireEvent.click(btn);
167
+ const kit = screen.getByText("Click Anywhere");
168
+ expect(kit).toBeInTheDocument();
169
+ });
170
+
171
+ test("renders Popover with z index", () => {
172
+ render(<PopoverTestZIndex data={{ testid: testId}}/>)
173
+ const btn = screen.getByText(/click me/i)
174
+ fireEvent.click(btn);
175
+ const kit = screen.getByText("Click Anywhere");
176
+ expect(kit).toHaveClass("pb_popover_body z_index_3");
177
+ });
178
+
179
+ test("renders Popover with max height and max width", () => {
180
+ render(<PopoverTestHeight data={{ testid: testId}}/>)
181
+ const btn = screen.getByText(/click me/i)
182
+ fireEvent.click(btn);
183
+ const kit = screen.getByText("Click Anywhere");
184
+ expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
185
+ });
186
+
187
+ test("closes Popover on click anywhere", async () => {
188
+ render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
189
+ const btn = screen.getByText(/click me/i)
190
+ fireEvent.click(btn);
191
+ const kit = screen.getByText("Click Anywhere");
192
+ expect(kit).toBeInTheDocument();
193
+ fireEvent.click(document.body);
194
+
195
+ expect(kit).not.toBeInTheDocument;
196
+ });
197
+
198
+ test("closes Popover on click inside", async () => {
199
+ render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
200
+ const btn = screen.getByText(/click me/i)
201
+ fireEvent.click(btn);
202
+ const kit = screen.getByText("Click Inside");
203
+ expect(kit).toBeInTheDocument();
204
+ fireEvent.click(kit);
205
+
206
+ expect(kit).not.toBeInTheDocument;
207
+ });
208
+
209
+ test("closes Popover on click outside", async () => {
210
+ render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
211
+ const btn = screen.getByText(/click me/i)
212
+ fireEvent.click(btn);
213
+ const kit = screen.getByText("Click Outside");
214
+ expect(kit).toBeInTheDocument();
215
+ fireEvent.click(kit);
216
+ expect(kit).toBeInTheDocument();
217
+ fireEvent.click(btn);
218
+
219
+ expect(kit).not.toBeInTheDocument;
220
+ });
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+ import { render } from "../utilities/test-utils";
3
+ import { useEditor, EditorContent } from "@tiptap/react";
4
+ import StarterKit from "@tiptap/starter-kit";
5
+ import Link from "@tiptap/extension-link";
6
+
7
+ import RichTextEditor from "./_rich_text_editor";
8
+
9
+ const kitClass = "pb_rich_text_editor_advanced_container";
10
+
11
+ const EditorTest = (props) => {
12
+ const editor = useEditor({
13
+ extensions: [StarterKit, Link],
14
+ content: "",
15
+ });
16
+
17
+ return (
18
+ <RichTextEditor
19
+ advancedEditor={editor}
20
+ {...props}
21
+ >
22
+ <EditorContent editor={editor} />
23
+ </RichTextEditor>
24
+ );
25
+ };
26
+
27
+ test("returns namespaced class name", () => {
28
+ const { container } = render(<EditorTest />);
29
+
30
+ expect(container.getElementsByClassName(kitClass).length).toBeGreaterThan(0);
31
+ });
32
+
33
+ test("returns toolbar class name", () => {
34
+ const { container } = render(<EditorTest />);
35
+
36
+ expect(
37
+ container.getElementsByClassName(`${kitClass} toolbar-active`).length
38
+ ).toBeGreaterThan(0);
39
+ });
40
+
41
+ test("doesn't returns toolbar class name", () => {
42
+ const { container } = render(<EditorTest advancedEditorToolbar={false} />);
43
+
44
+ expect(
45
+ container.getElementsByClassName(`${kitClass} toolbar-active`).length
46
+ ).toBe(0);
47
+ });
@@ -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.
@@ -4,7 +4,7 @@ import React from 'react'
4
4
  import classnames from 'classnames'
5
5
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
6
6
  import { globalProps } from '../utilities/globalProps'
7
- // import Joyride, { TooltipRenderProps } from 'react-joyride'
7
+ import Joyride, { TooltipRenderProps } from 'react-joyride'
8
8
  import Button from '../pb_button/_button'
9
9
  import Flex from '../pb_flex/_flex'
10
10
  import SectionSeparator from '../pb_section_separator/_section_separator'
@@ -181,7 +181,7 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
181
181
  className={classes}
182
182
  id={id}
183
183
  >
184
- {/* <Joyride
184
+ <Joyride
185
185
  callback={callback}
186
186
  continuous={continuous}
187
187
  disableOverlay={disableOverlay}
@@ -193,7 +193,7 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
193
193
  styles={styles}
194
194
  tooltipComponent={Tooltip}
195
195
  {...props}
196
- /> */}
196
+ />
197
197
  </div>
198
198
 
199
199
  )
@@ -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-Dw_aUsLL.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-Ca_BDmX1.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-CEZhT0Qr.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-CP6s-TZS.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};