playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exporttypes1609

Sign up to get free protection for your applications and to get access to all the features.
Files changed (209) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.d.ts +20 -0
  3. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.d.ts +21 -0
  4. data/app/pb_kits/playbook/pb_background/_background.d.ts +33 -0
  5. data/app/pb_kits/playbook/pb_badge/_badge.d.ts +24 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.d.ts +35 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +32 -36
  8. data/app/pb_kits/playbook/pb_body/_body.d.ts +24 -0
  9. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.d.ts +12 -0
  10. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.d.ts +13 -0
  11. data/app/pb_kits/playbook/pb_button/_button.d.ts +37 -0
  12. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.d.ts +17 -0
  13. data/app/pb_kits/playbook/pb_caption/_caption.d.ts +20 -0
  14. data/app/pb_kits/playbook/pb_card/_card.d.ts +42 -0
  15. data/app/pb_kits/playbook/pb_checkbox/_checkbox.d.ts +24 -0
  16. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.d.ts +2 -0
  17. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.d.ts +35 -0
  18. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +63 -67
  19. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.d.ts +21 -0
  20. data/app/pb_kits/playbook/pb_collapsible/_collapsible.d.ts +29 -0
  21. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.d.ts +2 -0
  22. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.d.ts +7 -0
  23. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.d.ts +10 -0
  24. data/app/pb_kits/playbook/pb_collapsible/context.d.ts +3 -0
  25. data/app/pb_kits/playbook/pb_collapsible/useCollapsible.d.ts +2 -0
  26. data/app/pb_kits/playbook/pb_contact/_contact.d.ts +13 -0
  27. data/app/pb_kits/playbook/pb_currency/_currency.d.ts +24 -0
  28. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.d.ts +2 -0
  29. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.d.ts +3 -0
  30. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.d.ts +3 -0
  31. data/app/pb_kits/playbook/pb_dashboard/themeTypes.d.ts +40 -0
  32. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.d.ts +23 -0
  33. data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.d.ts +43 -0
  34. data/app/pb_kits/playbook/pb_date/_date.d.ts +18 -0
  35. data/app/pb_kits/playbook/pb_date_picker/_date_picker.d.ts +50 -0
  36. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.d.ts +23 -0
  37. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.d.ts +18 -0
  38. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.d.ts +44 -0
  39. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.d.ts +13 -0
  40. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.d.ts +10 -0
  41. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.d.ts +13 -0
  42. data/app/pb_kits/playbook/pb_date_time/_date_time.d.ts +18 -0
  43. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.d.ts +10 -0
  44. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.d.ts +10 -0
  45. data/app/pb_kits/playbook/pb_detail/_detail.d.ts +20 -0
  46. data/app/pb_kits/playbook/pb_dialog/_close_icon.d.ts +5 -0
  47. data/app/pb_kits/playbook/pb_dialog/_dialog.d.ts +68 -0
  48. data/app/pb_kits/playbook/pb_dialog/_dialog_context.d.ts +2 -0
  49. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.d.ts +8 -0
  50. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.d.ts +20 -0
  51. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.d.ts +19 -0
  52. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.d.ts +10 -0
  53. data/app/pb_kits/playbook/pb_enhanced_element/element_observer.d.ts +17 -0
  54. data/app/pb_kits/playbook/pb_enhanced_element/index.d.ts +17 -0
  55. data/app/pb_kits/playbook/pb_file_upload/_file_upload.d.ts +16 -0
  56. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.d.ts +10 -0
  57. data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.d.ts +10 -0
  58. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.d.ts +14 -0
  59. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.d.ts +14 -0
  60. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.d.ts +11 -0
  61. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.d.ts +8 -0
  62. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.d.ts +18 -0
  63. data/app/pb_kits/playbook/pb_filter/Filter/index.d.ts +8 -0
  64. data/app/pb_kits/playbook/pb_filter/_filter.d.ts +1 -0
  65. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.d.ts +18 -0
  66. data/app/pb_kits/playbook/pb_flex/_flex.d.ts +24 -0
  67. data/app/pb_kits/playbook/pb_flex/_flex_item.d.ts +14 -0
  68. data/app/pb_kits/playbook/pb_form_group/_form_group.d.ts +12 -0
  69. data/app/pb_kits/playbook/pb_form_pill/_form_pill.d.ts +20 -0
  70. data/app/pb_kits/playbook/pb_gauge/_gauge.d.ts +31 -0
  71. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +46 -57
  72. data/app/pb_kits/playbook/pb_hashtag/_hashtag.d.ts +17 -0
  73. data/app/pb_kits/playbook/pb_highlight/_highlight.d.ts +14 -0
  74. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.d.ts +23 -0
  75. data/app/pb_kits/playbook/pb_icon/_icon.d.ts +29 -0
  76. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.d.ts +16 -0
  77. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.d.ts +18 -0
  78. data/app/pb_kits/playbook/pb_icon_value/_icon_value.d.ts +14 -0
  79. data/app/pb_kits/playbook/pb_image/_image.d.ts +20 -0
  80. data/app/pb_kits/playbook/pb_kit/dateTime.d.ts +67 -0
  81. data/app/pb_kits/playbook/pb_label_pill/_label_pill.d.ts +15 -0
  82. data/app/pb_kits/playbook/pb_label_value/_label_value.d.ts +19 -0
  83. data/app/pb_kits/playbook/pb_layout/_layout.d.ts +48 -0
  84. data/app/pb_kits/playbook/pb_legend/_legend.d.ts +14 -0
  85. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.d.ts +12 -0
  86. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.d.ts +10 -0
  87. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.d.ts +11 -0
  88. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.d.ts +9 -0
  89. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.d.ts +16 -0
  90. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.d.ts +22 -0
  91. data/app/pb_kits/playbook/pb_lightbox/_lightbox.d.ts +45 -0
  92. data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.d.ts +2 -0
  93. data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.d.ts +3 -0
  94. data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.d.ts +6 -0
  95. data/app/pb_kits/playbook/pb_line_graph/_line_graph.d.ts +35 -0
  96. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +34 -39
  97. data/app/pb_kits/playbook/pb_list/_list.d.ts +22 -0
  98. data/app/pb_kits/playbook/pb_list/_list_item.d.ts +13 -0
  99. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.d.ts +13 -0
  100. data/app/pb_kits/playbook/pb_map/_map.d.ts +30 -0
  101. data/app/pb_kits/playbook/pb_map/_map_controls.d.ts +11 -0
  102. data/app/pb_kits/playbook/pb_map/_map_custom_button.d.ts +6 -0
  103. data/app/pb_kits/playbook/pb_map/pbMapTheme.d.ts +20 -0
  104. data/app/pb_kits/playbook/pb_message/_message.d.ts +33 -0
  105. data/app/pb_kits/playbook/pb_message/_message_mention.d.ts +13 -0
  106. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.d.ts +33 -0
  107. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.d.ts +25 -0
  108. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.d.ts +20 -0
  109. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
  110. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
  111. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
  112. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
  113. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
  114. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.d.ts +16 -0
  115. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
  116. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
  117. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
  118. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
  119. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
  120. data/app/pb_kits/playbook/pb_nav/_item.d.ts +40 -0
  121. data/app/pb_kits/playbook/pb_nav/_nav.d.ts +23 -0
  122. data/app/pb_kits/playbook/pb_nav/navTypes.d.ts +22 -0
  123. data/app/pb_kits/playbook/pb_online_status/_online_status.d.ts +14 -0
  124. data/app/pb_kits/playbook/pb_passphrase/_passphrase.d.ts +19 -0
  125. data/app/pb_kits/playbook/pb_person/_person.d.ts +15 -0
  126. data/app/pb_kits/playbook/pb_person_contact/_person_contact.d.ts +18 -0
  127. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.d.ts +34 -0
  128. data/app/pb_kits/playbook/pb_pill/_pill.d.ts +16 -0
  129. data/app/pb_kits/playbook/pb_popover/_popover.d.ts +22 -0
  130. data/app/pb_kits/playbook/pb_popover/index.d.ts +21 -0
  131. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.d.ts +17 -0
  132. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.d.ts +15 -0
  133. data/app/pb_kits/playbook/pb_progress_step/_progress_step.d.ts +19 -0
  134. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.d.ts +12 -0
  135. data/app/pb_kits/playbook/pb_radio/_radio.d.ts +355 -0
  136. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.d.ts +9 -0
  137. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.d.ts +9 -0
  138. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.d.ts +2 -0
  139. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.d.ts +2 -0
  140. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.d.ts +2 -0
  141. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.d.ts +2 -0
  142. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.d.ts +2 -0
  143. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.d.ts +31 -0
  144. data/app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.d.ts +2 -0
  145. data/app/pb_kits/playbook/pb_rich_text_editor/useFocus.d.ts +2 -0
  146. data/app/pb_kits/playbook/pb_section_separator/_section_separator.d.ts +19 -0
  147. data/app/pb_kits/playbook/pb_select/_select.d.ts +385 -0
  148. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.d.ts +30 -0
  149. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.d.ts +27 -0
  150. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.d.ts +21 -0
  151. data/app/pb_kits/playbook/pb_selectable_list/_item.d.ts +20 -0
  152. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.d.ts +17 -0
  153. data/app/pb_kits/playbook/pb_source/_source.d.ts +17 -0
  154. data/app/pb_kits/playbook/pb_star_rating/_star_rating.d.ts +14 -0
  155. data/app/pb_kits/playbook/pb_stat_change/_stat_change.d.ts +10 -0
  156. data/app/pb_kits/playbook/pb_stat_value/_stat_value.d.ts +9 -0
  157. data/app/pb_kits/playbook/pb_table/_table.d.ts +24 -0
  158. data/app/pb_kits/playbook/pb_table/_table_row.d.ts +15 -0
  159. data/app/pb_kits/playbook/pb_table/index.d.ts +5 -0
  160. data/app/pb_kits/playbook/pb_text_input/_text_input.d.ts +383 -0
  161. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
  162. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
  163. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
  164. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
  165. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
  166. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
  167. data/app/pb_kits/playbook/pb_textarea/_textarea.d.ts +380 -0
  168. data/app/pb_kits/playbook/pb_textarea/index.d.ts +10 -0
  169. data/app/pb_kits/playbook/pb_time/_time.d.ts +16 -0
  170. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.d.ts +20 -0
  171. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.d.ts +15 -0
  172. data/app/pb_kits/playbook/pb_timeline/_item.d.ts +11 -0
  173. data/app/pb_kits/playbook/pb_timeline/_timeline.d.ts +26 -0
  174. data/app/pb_kits/playbook/pb_timestamp/_timestamp.d.ts +22 -0
  175. data/app/pb_kits/playbook/pb_title/_title.d.ts +26 -0
  176. data/app/pb_kits/playbook/pb_title_count/_title_count.d.ts +18 -0
  177. data/app/pb_kits/playbook/pb_title_detail/_title_detail.d.ts +16 -0
  178. data/app/pb_kits/playbook/pb_toggle/_toggle.d.ts +21 -0
  179. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
  180. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
  181. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
  182. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
  183. data/app/pb_kits/playbook/pb_tooltip/_tooltip.d.ts +356 -0
  184. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.d.ts +27 -0
  185. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +28 -33
  186. data/app/pb_kits/playbook/pb_typeahead/_typeahead.d.ts +35 -0
  187. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.d.ts +2 -0
  188. data/app/pb_kits/playbook/pb_typeahead/components/Control.d.ts +5 -0
  189. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.d.ts +2 -0
  190. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.d.ts +2 -0
  191. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.d.ts +9 -0
  192. data/app/pb_kits/playbook/pb_typeahead/components/Option.d.ts +2 -0
  193. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.d.ts +2 -0
  194. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.d.ts +2 -0
  195. data/app/pb_kits/playbook/pb_typeahead/index.d.ts +39 -0
  196. data/app/pb_kits/playbook/pb_user/_user.d.ts +23 -0
  197. data/app/pb_kits/playbook/pb_user_badge/_user_badge.d.ts +14 -0
  198. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.d.ts +2 -0
  199. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.d.ts +2 -0
  200. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.d.ts +41 -0
  201. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.d.ts +15 -0
  202. data/app/pb_kits/playbook/utilities/globalProps.d.ts +113 -0
  203. data/app/pb_kits/playbook/utilities/object.d.ts +1 -0
  204. data/app/pb_kits/playbook/utilities/props.d.ts +38 -0
  205. data/app/pb_kits/playbook/utilities/text.d.ts +3 -0
  206. data/app/pb_kits/playbook/utilities/validEmojiChecker.d.ts +1 -0
  207. data/dist/playbook-rails.js +7 -7
  208. data/lib/playbook/version.rb +1 -1
  209. metadata +198 -2
@@ -3,6 +3,8 @@ import classnames from "classnames";
3
3
  import HighchartsReact from "highcharts-react-official";
4
4
  import highchartsMore from "highcharts/highcharts-more";
5
5
 
6
+ import Highcharts from "highcharts";
7
+
6
8
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
7
9
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
8
10
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,35 +12,35 @@ import { globalProps } from "../utilities/globalProps";
10
12
  import { buildAriaProps, buildDataProps } from "../utilities/props";
11
13
 
12
14
  type CircleChartProps = {
13
- align?: "left" | "right" | "center",
14
- aria: { [key: string]: string },
15
- chartData?: [],
16
- children?: Node,
17
- className?: string,
18
- colors?: string[],
19
- dark?: Boolean,
20
- data?: Object,
21
- dataLabelHtml?: string,
22
- dataLabels?: boolean,
23
- height?: string,
24
- id?: string,
25
- innerSize?: "sm" | "md" | "lg" | "none",
26
- legend?: boolean,
27
- maxPointSize?: number,
28
- minPointSize?: number,
29
- rounded?: boolean,
30
- startAngle?: number,
31
- style?: string,
32
- title?: string,
33
- tooltipHtml: string,
34
- useHtml?: boolean,
35
- zMin?: number,
36
- layout?: "horizontal" | "vertical" | "proximate",
37
- verticalAlign?: "top" | "middle" | "bottom",
38
- x?: number,
39
- y?: number,
40
- borderColor?: string,
41
- borderWidth?: number,
15
+ align?: "left" | "right" | "center";
16
+ aria: { [key: string]: string };
17
+ chartData?: [];
18
+ children?: Node;
19
+ className?: string;
20
+ colors?: string[];
21
+ dark?: Boolean;
22
+ data?: Object;
23
+ dataLabelHtml?: string;
24
+ dataLabels?: boolean;
25
+ height?: string;
26
+ id?: string;
27
+ innerSize?: "sm" | "md" | "lg" | "none";
28
+ legend?: boolean;
29
+ maxPointSize?: number;
30
+ minPointSize?: number;
31
+ rounded?: boolean;
32
+ startAngle?: number;
33
+ style?: string;
34
+ title?: string;
35
+ tooltipHtml: string;
36
+ useHtml?: boolean;
37
+ zMin?: number;
38
+ layout?: "horizontal" | "vertical" | "proximate";
39
+ verticalAlign?: "top" | "middle" | "bottom";
40
+ x?: number;
41
+ y?: number;
42
+ borderColor?: string;
43
+ borderWidth?: number;
42
44
  };
43
45
 
44
46
  // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -88,11 +90,29 @@ const CircleChart = ({
88
90
  }: CircleChartProps) => {
89
91
  const ariaProps = buildAriaProps(aria);
90
92
  const dataProps = buildDataProps(data);
93
+ highchartsMore(Highcharts);
94
+
95
+ const setupTheme = () => {
96
+ dark
97
+ ? Highcharts.setOptions(highchartsDarkTheme)
98
+ : Highcharts.setOptions(highchartsTheme);
99
+ };
100
+ setupTheme();
101
+
102
+ Highcharts.setOptions({
103
+ tooltip: {
104
+ headerFormat: null,
105
+ pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
106
+ useHTML: useHtml,
107
+ },
108
+ });
109
+
91
110
  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
92
- const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
111
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
112
+ innerSizes[size];
113
+
93
114
 
94
115
  const [options, setOptions] = useState({});
95
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
96
116
 
97
117
  useEffect(() => {
98
118
  const formattedChartData = chartData.map((obj: any) => {
@@ -149,50 +169,26 @@ const CircleChart = ({
149
169
  credits: false,
150
170
  };
151
171
  setOptions({ ...staticOptions });
152
-
153
- const interval = setInterval(() => {
154
- if (window.Highcharts) {
155
- clearInterval(interval)
156
- dark
157
- ? window.Highcharts.setOptions(highchartsDarkTheme)
158
- : window.Highcharts.setOptions(highchartsTheme)
159
-
160
- highchartsMore(window.Highcharts);
161
-
162
- window.Highcharts.setOptions({
163
- tooltip: {
164
- headerFormat: null,
165
- pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
166
- useHTML: useHtml,
167
- },
168
- });
169
-
170
- setIsHighchartsLoaded(true)
171
- }
172
- }, 0)
173
172
  }, [chartData]);
174
173
 
174
+
175
175
  return (
176
176
  <>
177
177
  {children ? (
178
178
  <div id={`wrapper-circle-chart-${id}`}>
179
- {
180
- isHighchartsLoaded &&
181
- <HighchartsReact
182
- containerProps={{
183
- className: classnames("pb_circle_chart", globalProps(props)),
184
- id: id,
185
- ...ariaProps,
186
- ...dataProps,
187
- }}
188
- highcharts={window.Highcharts}
189
- options={options}
190
- />
191
- }
179
+ <HighchartsReact
180
+ containerProps={{
181
+ className: classnames("pb_circle_chart", globalProps(props)),
182
+ id: id,
183
+ ...ariaProps,
184
+ ...dataProps,
185
+ }}
186
+ highcharts={Highcharts}
187
+ options={options}
188
+ />
192
189
  <div className="pb-circle-chart-block">{children}</div>
193
190
  </div>
194
191
  ) : (
195
- isHighchartsLoaded &&
196
192
  <HighchartsReact
197
193
  containerProps={{
198
194
  className: classnames("pb_circle_chart", globalProps(props)),
@@ -200,7 +196,7 @@ const CircleChart = ({
200
196
  ...ariaProps,
201
197
  ...dataProps,
202
198
  }}
203
- highcharts={window.Highcharts}
199
+ highcharts={Highcharts}
204
200
  options={options}
205
201
  />
206
202
  )}
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ declare type CircleIconButtonProps = {
3
+ aria?: {
4
+ [key: string]: string;
5
+ };
6
+ className?: string;
7
+ dark?: boolean;
8
+ data?: {
9
+ [key: string]: string;
10
+ };
11
+ disabled?: boolean;
12
+ icon: string;
13
+ id?: string;
14
+ link?: string;
15
+ onClick?: React.MouseEventHandler<HTMLElement>;
16
+ newWindow?: boolean;
17
+ type?: 'button' | 'submit' | 'reset' | undefined;
18
+ variant?: 'primary' | 'secondary' | 'link';
19
+ };
20
+ declare const CircleIconButton: (props: CircleIconButtonProps) => React.ReactElement;
21
+ export default CircleIconButton;
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { IconSizes } from "../pb_icon/_icon";
3
+ declare type CollapsibleProps = {
4
+ children?: JSX.Element | [] | any;
5
+ aria?: {
6
+ [key: string]: string;
7
+ };
8
+ className?: string;
9
+ collapsed?: boolean;
10
+ data?: object;
11
+ icon?: string | string[];
12
+ iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
13
+ iconSize?: IconSizes;
14
+ onIconClick?: () => void;
15
+ onClick?: () => void;
16
+ id?: string;
17
+ };
18
+ declare const Collapsible: {
19
+ ({ aria, className, children, collapsed, data, icon, iconColor, iconSize, onIconClick, onClick, id, ...props }: CollapsibleProps): JSX.Element;
20
+ Main: ({ children, className, cursor, ...props }: {
21
+ children: React.ReactNode | React.ReactNode[];
22
+ className?: string;
23
+ cursor?: string;
24
+ dark?: boolean;
25
+ onClick?: () => void;
26
+ }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
27
+ Content: ({ children, className, ...props }: import("./child_kits/CollapsibleContent").CollapsibleContentProps) => JSX.Element;
28
+ };
29
+ export default Collapsible;
@@ -0,0 +1,2 @@
1
+ export declare const showElement: (elem: any) => void;
2
+ export declare const hideElement: (elem: any) => void;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ export declare type CollapsibleContentProps = {
3
+ children?: React.ReactNode[] | React.ReactNode | string;
4
+ className?: string;
5
+ };
6
+ declare const CollapsibleContent: ({ children, className, ...props }: CollapsibleContentProps) => JSX.Element;
7
+ export default CollapsibleContent;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ declare type CollapsibleMainProps = {
3
+ children: React.ReactNode[] | React.ReactNode;
4
+ className?: string;
5
+ cursor?: string;
6
+ dark?: boolean;
7
+ onClick?: () => void;
8
+ };
9
+ declare const CollapsibleMain: ({ children, className, cursor, ...props }: CollapsibleMainProps) => React.ReactElement;
10
+ export default CollapsibleMain;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CollapsibleContext: import("react").Context<{}>;
3
+ export default CollapsibleContext;
@@ -0,0 +1,2 @@
1
+ declare const useCollapsible: (initial?: boolean) => any[];
2
+ export default useCollapsible;
@@ -0,0 +1,13 @@
1
+ declare type ContactProps = {
2
+ aria?: {
3
+ [key: string]: string;
4
+ };
5
+ className?: string | string[];
6
+ contactDetail?: string;
7
+ contactType?: string;
8
+ contactValue: string;
9
+ data?: object;
10
+ id?: string;
11
+ };
12
+ declare const Contact: (props: ContactProps) => JSX.Element;
13
+ export default Contact;
@@ -0,0 +1,24 @@
1
+ declare type CurrencyProps = {
2
+ abbreviate?: boolean;
3
+ align?: 'center' | 'left' | 'right';
4
+ amount: string;
5
+ aria?: {
6
+ [key: string]: string;
7
+ };
8
+ className?: string;
9
+ dark?: boolean;
10
+ data?: {
11
+ [key: string]: string;
12
+ };
13
+ decimals?: 'default' | 'matching';
14
+ emphasized?: boolean;
15
+ id?: string;
16
+ label?: string;
17
+ size?: 'sm' | 'md' | 'lg';
18
+ symbol?: string;
19
+ variant?: 'default' | 'light' | 'bold';
20
+ unit?: string;
21
+ unstyled?: boolean;
22
+ };
23
+ declare const Currency: (props: CurrencyProps) => JSX.Element;
24
+ export default Currency;
@@ -0,0 +1,2 @@
1
+ declare const mapColors: (array: string[]) => string[];
2
+ export default mapColors;
@@ -0,0 +1,3 @@
1
+ import { ThemeProps } from './themeTypes';
2
+ declare const highchartsDarkTheme: ThemeProps;
3
+ export { highchartsDarkTheme };
@@ -0,0 +1,3 @@
1
+ import { ThemeProps } from './themeTypes';
2
+ declare const highchartsTheme: ThemeProps;
3
+ export { highchartsTheme };
@@ -0,0 +1,40 @@
1
+ export declare type ThemeProps = {
2
+ lang?: {
3
+ [key: string]: string;
4
+ };
5
+ credits?: {
6
+ [key: string]: boolean;
7
+ };
8
+ colors?: string[];
9
+ chart?: {
10
+ [key: string]: any;
11
+ };
12
+ title?: {
13
+ [key: string]: string | {};
14
+ };
15
+ subtitle?: {
16
+ [key: string]: string | {};
17
+ };
18
+ xAxis?: {
19
+ [key: string]: any;
20
+ };
21
+ yAxis?: {
22
+ [key: string]: any;
23
+ };
24
+ legend?: {
25
+ [key: string]: string | {};
26
+ };
27
+ labels?: {
28
+ [key: string]: {};
29
+ };
30
+ tooltip?: {
31
+ [key: string]: any;
32
+ };
33
+ pane?: {
34
+ [key: string]: {};
35
+ };
36
+ plotOptions?: {
37
+ [key: string]: any;
38
+ };
39
+ colorKey?: string;
40
+ };
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ declare type DashboardValueProps = {
3
+ align?: 'left' | 'center' | 'right';
4
+ aria?: {
5
+ [key: string]: string;
6
+ };
7
+ className?: string;
8
+ data?: {
9
+ [key: string]: string;
10
+ };
11
+ id?: string;
12
+ statChange?: {
13
+ change?: 'increase' | 'decrease' | 'neutral';
14
+ value?: string | number;
15
+ };
16
+ statLabel?: string;
17
+ statValue?: {
18
+ unit?: string;
19
+ value?: string | number;
20
+ };
21
+ };
22
+ declare const DashboardValue: (props: DashboardValueProps) => React.ReactElement;
23
+ export default DashboardValue;
@@ -0,0 +1,43 @@
1
+ declare const pbIndicator: {
2
+ title: {
3
+ fontFamily: any;
4
+ color: any;
5
+ fontSizes: {
6
+ big: any;
7
+ medium: any;
8
+ small: any;
9
+ micro: any;
10
+ };
11
+ };
12
+ secondaryTitle: {
13
+ color: any;
14
+ fontFamily: any;
15
+ fontSizes: {
16
+ big: any;
17
+ medium: any;
18
+ small: any;
19
+ micro: any;
20
+ };
21
+ };
22
+ value: {
23
+ fontFamily: any;
24
+ color: any;
25
+ fontWeight: any;
26
+ fontSizes: {
27
+ big: any;
28
+ medium: any;
29
+ small: any;
30
+ micro: any;
31
+ };
32
+ };
33
+ secondaryValue: {
34
+ fontFamily: any;
35
+ fontSizes: {
36
+ big: any;
37
+ medium: any;
38
+ small: any;
39
+ micro: any;
40
+ };
41
+ };
42
+ };
43
+ export default pbIndicator;
@@ -0,0 +1,18 @@
1
+ declare type PbDateProps = {
2
+ alignment?: "left" | "center" | "right";
3
+ aria?: {
4
+ [key: string]: string;
5
+ };
6
+ className?: string;
7
+ data?: {
8
+ [key: string]: string;
9
+ };
10
+ id?: string;
11
+ showDayOfWeek?: boolean;
12
+ showIcon?: boolean;
13
+ size?: "sm" | "md" | "lg";
14
+ unstyled?: boolean;
15
+ value: Date;
16
+ };
17
+ declare const PbDate: (props: PbDateProps) => JSX.Element;
18
+ export default PbDate;
@@ -0,0 +1,50 @@
1
+ import React from 'react';
2
+ import { GlobalProps } from '../utilities/globalProps';
3
+ declare type DatePickerProps = {
4
+ allowInput?: boolean;
5
+ aria?: {
6
+ [key: string]: string;
7
+ };
8
+ className?: string;
9
+ dark?: boolean;
10
+ data?: {
11
+ [key: string]: string;
12
+ };
13
+ defaultDate?: string;
14
+ disableDate?: number[];
15
+ disableInput?: boolean;
16
+ disableRange?: number[];
17
+ disableWeekdays?: number[];
18
+ enableTime?: boolean;
19
+ error?: string;
20
+ format?: string;
21
+ hideIcon?: boolean;
22
+ hideLabel?: boolean;
23
+ id?: string;
24
+ inLine?: boolean;
25
+ inputAria?: {
26
+ [key: string]: string;
27
+ };
28
+ inputData?: {
29
+ [key: string]: string;
30
+ };
31
+ inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void;
32
+ inputValue?: string;
33
+ label?: string;
34
+ maxDate: string;
35
+ minDate: string;
36
+ name: string;
37
+ pickerId?: string;
38
+ placeholder?: string;
39
+ positionElement?: HTMLElement | null;
40
+ scrollContainer?: string;
41
+ selectionType?: "month" | "week" | "quickpick";
42
+ showTimezone?: boolean;
43
+ staticPosition: boolean;
44
+ thisRangesEndToday?: boolean;
45
+ timeFormat?: string;
46
+ type?: string;
47
+ yearRange?: number[];
48
+ } & GlobalProps;
49
+ declare const DatePicker: (props: DatePickerProps) => React.ReactElement;
50
+ export default DatePicker;
@@ -0,0 +1,23 @@
1
+ import { BaseOptions } from 'flatpickr/dist/types/options';
2
+ declare type DatePickerConfig = {
3
+ closeOnSelect?: boolean;
4
+ disableDate?: number[];
5
+ disableRange?: number[];
6
+ disableWeekdays?: number[];
7
+ format?: string;
8
+ pickerId?: ArrayLike<Node> | Node | string;
9
+ required: boolean;
10
+ hideIcon?: boolean;
11
+ inLine?: boolean;
12
+ onChange: (dateStr: string, selectedDates: Date[]) => void;
13
+ selectionType?: "month" | "week" | "quickpick" | "";
14
+ onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void;
15
+ showTimezone?: boolean;
16
+ staticPosition: boolean;
17
+ thisRangesEndToday?: boolean;
18
+ timeCaption?: string;
19
+ timeFormat?: string;
20
+ yearRange: number[];
21
+ } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement">;
22
+ declare const datePickerHelper: (config: DatePickerConfig, scrollContainer: string | HTMLElement) => any;
23
+ export default datePickerHelper;
@@ -0,0 +1,18 @@
1
+ declare type FpTypes = {
2
+ setDate: (arg0: any, arg1: boolean) => void;
3
+ config: {
4
+ [key: string]: string;
5
+ };
6
+ clear: (arg0: boolean, arg1: boolean) => void;
7
+ close: () => void;
8
+ calendarContainer?: {
9
+ classList: {
10
+ add: (arg0: string) => void;
11
+ };
12
+ prepend: (arg0: HTMLDivElement) => void;
13
+ append: (arg0: HTMLDivElement) => void;
14
+ };
15
+ loadedPlugins: string[];
16
+ };
17
+ declare const quickPickPlugin: (thisRangesEndToday: boolean) => (fp: FpTypes & any) => any;
18
+ export default quickPickPlugin;
@@ -0,0 +1,44 @@
1
+ declare type FpTypes = {
2
+ amPM?: {
3
+ style: {
4
+ display: string;
5
+ };
6
+ };
7
+ selectedDates: string | any[];
8
+ setDate: (arg0: any, arg1: boolean) => void;
9
+ input: {
10
+ id: any;
11
+ };
12
+ timeContainer?: {
13
+ classList: {
14
+ add: (arg0: string) => void;
15
+ };
16
+ prepend: (arg0: HTMLDivElement) => void;
17
+ append: (arg0: HTMLDivElement) => void;
18
+ };
19
+ minuteElement?: {
20
+ step: string;
21
+ };
22
+ _initialDate: {
23
+ toLocaleDateString: (arg0: string, arg1: {
24
+ day: string;
25
+ timeZoneName: string;
26
+ }) => string | any[];
27
+ };
28
+ loadedPlugins: string[];
29
+ };
30
+ export declare const getTimezoneText: (inputDate: {
31
+ toLocaleDateString: (arg0: string, arg1: {
32
+ day: string;
33
+ timeZoneName: string;
34
+ }) => string | any[];
35
+ }) => string;
36
+ declare function timeSelectPlugin(props: {
37
+ caption: string;
38
+ showTimezone: boolean;
39
+ }): (fp: FpTypes & any) => {
40
+ onValueUpdate(): void;
41
+ onOpen(): void;
42
+ onReady(): void;
43
+ };
44
+ export default timeSelectPlugin;
@@ -0,0 +1,13 @@
1
+ declare type DateRangeInlineProps = {
2
+ className?: string;
3
+ id?: string;
4
+ data?: string;
5
+ align?: "left" | "center" | "vertical";
6
+ size?: "sm" | "xs";
7
+ dark?: boolean;
8
+ icon?: boolean;
9
+ startDate?: Date;
10
+ endDate?: Date;
11
+ };
12
+ declare const DateRangeInline: (props: DateRangeInlineProps) => JSX.Element;
13
+ export default DateRangeInline;
@@ -0,0 +1,10 @@
1
+ declare type DateRangeStackedProps = {
2
+ className?: string | string[];
3
+ data?: string;
4
+ dark?: boolean;
5
+ endDate: Date;
6
+ id?: string;
7
+ startDate: Date;
8
+ };
9
+ declare const DateRangeStacked: (props: DateRangeStackedProps) => JSX.Element;
10
+ export default DateRangeStacked;
@@ -0,0 +1,13 @@
1
+ declare type DateStackedProps = {
2
+ align?: "left" | "center" | "right";
3
+ bold?: boolean;
4
+ className?: string | string[];
5
+ dark?: boolean;
6
+ data?: string;
7
+ date: Date;
8
+ size?: "sm" | "md";
9
+ id?: string;
10
+ reverse?: boolean;
11
+ };
12
+ declare const DateStacked: (props: DateStackedProps) => JSX.Element;
13
+ export default DateStacked;
@@ -0,0 +1,18 @@
1
+ declare type DateTimeProps = {
2
+ align?: "left" | "center" | "right";
3
+ aria?: {
4
+ [key: string]: string;
5
+ };
6
+ className?: string;
7
+ data?: {
8
+ [key: string]: string;
9
+ };
10
+ datetime: Date;
11
+ id?: string;
12
+ size?: "sm" | "md";
13
+ showDayOfWeek: boolean;
14
+ showIcon?: boolean;
15
+ timeZone?: string;
16
+ };
17
+ declare const DateTime: (props: DateTimeProps) => JSX.Element;
18
+ export default DateTime;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ declare type DateTimeStackedProps = {
3
+ id?: string;
4
+ date: Date;
5
+ datetime: Date;
6
+ dark: boolean;
7
+ timeZone?: string;
8
+ };
9
+ declare const DateTimeStacked: (props: DateTimeStackedProps) => React.ReactElement;
10
+ export default DateTimeStacked;
@@ -0,0 +1,10 @@
1
+ declare type DateYearStackedProps = {
2
+ align?: "left" | "center" | "right";
3
+ className?: string | string[];
4
+ dark?: boolean;
5
+ data?: string;
6
+ date: Date;
7
+ id?: string;
8
+ };
9
+ declare const DateYearStacked: (props: DateYearStackedProps) => JSX.Element;
10
+ export default DateYearStacked;