playbook_ui 14.17.0.pre.alpha.play1499backgroundkitoverlay7105 → 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7365

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 (139) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -128
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +5 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_background/_background.scss +2 -2
  30. data/app/pb_kits/playbook/pb_background/_background.tsx +3 -5
  31. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  32. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +3 -4
  33. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -1
  34. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  35. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +45 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -1
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  40. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  41. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  42. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  43. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  45. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  46. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  49. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  50. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  51. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  53. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  54. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  55. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  56. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  57. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +10 -6
  58. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  59. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
  60. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  61. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  62. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  63. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  64. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  65. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  66. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  67. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  68. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  69. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  70. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  71. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  72. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  73. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  74. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  75. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  76. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  77. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  78. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  79. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  80. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  81. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  82. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  83. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  84. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  85. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  86. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  87. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  88. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  89. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  90. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  91. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  92. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  93. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  94. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  95. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  96. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  97. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  98. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  99. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  100. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  101. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  102. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  103. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  104. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  105. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  106. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  107. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  108. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  109. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  110. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  111. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  112. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  113. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  114. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  115. data/dist/chunks/_typeahead-B8ZHFkS2.js +22 -0
  116. data/dist/chunks/_weekday_stacked-BHIbkVpj.js +45 -0
  117. data/dist/chunks/lib-D4SkptW4.js +29 -0
  118. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-CUMPJ9As.js} +1 -1
  119. data/dist/chunks/vendor.js +1 -1
  120. data/dist/playbook-doc.js +19 -1
  121. data/dist/playbook-rails-react-bindings.js +1 -1
  122. data/dist/playbook-rails.js +1 -1
  123. data/dist/playbook.css +1 -1
  124. data/lib/playbook/version.rb +1 -1
  125. metadata +59 -18
  126. data/dist/chunks/_typeahead-ySWHB-7p.js +0 -22
  127. data/dist/chunks/_weekday_stacked-36N8xzXL.js +0 -45
  128. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  129. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  130. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  131. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  132. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  133. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  134. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  135. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  136. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  137. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  138. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  139. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
10
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
11
  import { globalProps } from "../utilities/globalProps";
12
12
  import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
13
- import { merge } from '../utilities/object'
13
+ import { merge } from '../utilities/object'
14
14
 
15
15
  type CircleChartProps = {
16
16
  align?: "left" | "right" | "center";
@@ -0,0 +1,45 @@
1
+ import colors from '../tokens/exports/_colors.module.scss'
2
+ import typography from '../tokens/exports/_typography.module.scss'
3
+
4
+ const circleChartTheme = {
5
+ title: { text: "" },
6
+ chart: {
7
+ type: "pie",
8
+ },
9
+ tooltip: {
10
+ backgroundColor: {
11
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
12
+ stops: [
13
+ [0, colors.bg_dark],
14
+ [1, colors.bg_dark],
15
+ ],
16
+ },
17
+ pointFormat:
18
+ '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
19
+ "<b>{point.y}</b>",
20
+ followPointer: true,
21
+ shadow: false,
22
+ borderWidth: 0,
23
+ borderRadius: 10,
24
+ style: {
25
+ fontFamily: typography.font_family_base,
26
+ color: colors.text_dk_default,
27
+ fontWeight: typography.regular,
28
+ fontSize: typography.text_smaller,
29
+ },
30
+ },
31
+ plotOptions: {
32
+ pie: {
33
+ dataLabels: {
34
+ enabled: false,
35
+ },
36
+ innerSize: '50%',
37
+ borderColor: "",
38
+ borderWidth: null as number | null,
39
+ },
40
+ },
41
+ credits: false,
42
+
43
+ }
44
+
45
+ export default circleChartTheme;
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
5
+
6
+ const data = [
7
+ {
8
+ name: 'Waiting for Calls',
9
+ y: 41,
10
+ },
11
+ {
12
+ name: 'On Call',
13
+ y: 49,
14
+ },
15
+ {
16
+ name: 'After call',
17
+ y: 10,
18
+ },
19
+ ]
20
+
21
+ const baseOptions = {
22
+ series: [{ data: data }],
23
+ }
24
+
25
+ const CircleChartPbStyles = () => {
26
+ const options = Highcharts.merge({}, circleChartTheme, baseOptions )
27
+
28
+ return (
29
+ <div>
30
+ <HighchartsReact
31
+ highcharts={Highcharts}
32
+ options={options}
33
+ />
34
+ </div>
35
+ );
36
+ };
37
+
38
+ export default CircleChartPbStyles;
@@ -0,0 +1 @@
1
+ You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
@@ -14,6 +14,7 @@ examples:
14
14
 
15
15
  react:
16
16
  - circle_chart_default: Default Style
17
+ - circle_chart_pb_styles: Playbook Styles
17
18
  - circle_chart_live_data: Live Data
18
19
  - circle_chart_rounded: Rounded Corners
19
20
  - circle_chart_block: Accepts Any Block
@@ -22,7 +23,7 @@ examples:
22
23
  - circle_chart_with_legend_kit: Legend
23
24
  - circle_chart_legend_position: Legend Position
24
25
  - circle_chart_with_title: Title
25
- - circle_chart_inner_sizes: Inner Circle Size Options
26
+ - circle_chart_inner_sizes: Inner Circle Size Options
26
27
  - circle_chart_custom_tooltip: Tooltip Customization
27
28
 
28
29
 
@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
8
8
  export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
9
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
10
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
11
- export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
11
+ export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
12
+ export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
@@ -1,5 +1,4 @@
1
-
2
- import React, { useState } from 'react'
1
+ import React from 'react'
3
2
  import classnames from 'classnames'
4
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
4
  import { globalProps } from '../utilities/globalProps'
@@ -7,16 +6,19 @@ import { globalProps } from '../utilities/globalProps'
7
6
  import Button from '../pb_button/_button'
8
7
  import Tooltip from '../pb_tooltip/_tooltip'
9
8
 
9
+ import usePBCopy from './usePBCopy'
10
+
10
11
  type CopyButtonProps = {
11
- aria?: { [key: string]: string },
12
- className?: string,
13
- data?: { [key: string]: string },
14
- id?: string,
15
- from?: string,
16
- text?: string,
17
- tooltipPlacement?: "top" | "right" | "bottom" | "left",
18
- tooltipText?: string,
19
- value?: string,
12
+ aria?: { [key: string]: string }
13
+ className?: string
14
+ data?: { [key: string]: string }
15
+ id?: string
16
+ from?: string
17
+ text?: string
18
+ tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
19
+ tooltipText?: string
20
+ value?: string
21
+ timeout?: number
20
22
  }
21
23
 
22
24
  const CopyButton = (props: CopyButtonProps) => {
@@ -27,62 +29,34 @@ const CopyButton = (props: CopyButtonProps) => {
27
29
  from = '',
28
30
  id,
29
31
  text= 'Copy',
32
+ timeout = 1000,
30
33
  tooltipPlacement= 'bottom',
31
34
  tooltipText = 'Copied!',
32
35
  value = '',
33
36
  } = props
34
37
 
35
- const [copied, setCopied] = useState(false)
38
+ const [copied, copy] = usePBCopy({ value, from, timeout })
36
39
 
37
40
  const ariaProps = buildAriaProps(aria)
38
41
  const dataProps = buildDataProps(data)
39
42
  const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
40
43
 
41
- const copy = () => {
42
- if (!from && !value) {
43
- return
44
- }
45
-
46
- if (value) {
47
- navigator.clipboard.writeText(value)
48
- } else if (from) {
49
- const copyElement = document.getElementById(from);
50
- let copyText = copyElement?.innerText
51
-
52
- if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
53
- copyText = copyElement.value;
54
- }
55
-
56
- if (copyText) {
57
- navigator.clipboard.writeText(copyText)
58
- }
59
- }
60
-
61
- setCopied(true)
62
-
63
- setTimeout(() => {
64
- setCopied(false)
65
- }, 1000);
66
- }
67
-
68
44
  return (
69
- <div
70
- {...ariaProps}
45
+ <div {...ariaProps}
71
46
  {...dataProps}
72
47
  className={classes}
73
48
  id={id}
74
49
  >
75
- <Tooltip
50
+ <Tooltip
76
51
  forceOpenTooltip={copied}
77
52
  placement={tooltipPlacement}
78
53
  showTooltip={false}
79
54
  text={tooltipText}
80
55
  >
81
- <Button
82
- icon='copy'
56
+ <Button icon="copy"
83
57
  onClick={copy}
84
58
  >
85
- { text }
59
+ {text}
86
60
  </Button>
87
61
  </Tooltip>
88
62
  </div>
@@ -0,0 +1,54 @@
1
+ import React, { useEffect, useState } from 'react'
2
+ import usePBCopy from '../../pb_copy_button/usePBCopy'
3
+ import Body from '../../pb_body/_body'
4
+ import Textarea from '../../pb_textarea/_textarea'
5
+ import Tooltip from '../../pb_tooltip/_tooltip'
6
+
7
+ const CopyButtonHook = ({...props}) => {
8
+ // This is how you can use the copy button hook to copy text to the clipboard
9
+ // eslint-disable-next-line no-unused-vars
10
+ const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
11
+ // I added a tooltip so it looks better in the ui
12
+ const [showTooltip, setShowTooltip] = useState(false)
13
+
14
+ const handleCopy = () => {
15
+ copyToClipboard()
16
+ setShowTooltip(true)
17
+ setTimeout(() => setShowTooltip(false), 1500)
18
+ }
19
+
20
+ useEffect(() => {
21
+ const el = document.getElementById('hookbody')
22
+ if (!el) return
23
+
24
+ el.addEventListener('click', handleCopy)
25
+ return () => {
26
+ el.removeEventListener('click', handleCopy)
27
+ }
28
+ }, [copyToClipboard])
29
+
30
+ return (
31
+ <div>
32
+ <Tooltip
33
+ delay={{ close: 1000 }}
34
+ forceOpenTooltip={showTooltip}
35
+ placement="top"
36
+ showTooltip={false}
37
+ text="Copied!"
38
+ >
39
+ <Body
40
+ cursor="pointer"
41
+ id="hookbody"
42
+ text="I'm a custom copy hook! Click this body to copy this text!"
43
+ />
44
+ </Tooltip>
45
+
46
+ <Textarea
47
+ {...props}
48
+ placeholder="Paste here"
49
+ />
50
+ </div>
51
+ )
52
+ }
53
+
54
+ export default CopyButtonHook
@@ -0,0 +1,3 @@
1
+ We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
2
+
3
+ `usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.
@@ -6,3 +6,4 @@ examples:
6
6
  react:
7
7
  - copy_button_default: Default
8
8
  - copy_button_from: Copy From
9
+ - copy_button_hook: Copy Hook
@@ -1,2 +1,3 @@
1
1
  export { default as CopyButtonDefault } from './_copy_button_default.jsx'
2
- export { default as CopyButtonFrom } from './_copy_button_from.jsx'
2
+ export { default as CopyButtonFrom } from './_copy_button_from.jsx'
3
+ export { default as CopyButtonHook } from './_copy_button_hook.jsx'
@@ -0,0 +1,45 @@
1
+ import { useState, useRef, useEffect } from 'react'
2
+
3
+ type UsePBCopyProps = {
4
+ value?: string
5
+ from?: string
6
+ timeout?: number
7
+ }
8
+
9
+ export default function usePBCopy({
10
+ value = '',
11
+ from = '',
12
+ timeout = 0,
13
+ }: UsePBCopyProps) {
14
+ const [copied, setCopied] = useState(false)
15
+ const timerRef = useRef<number>()
16
+
17
+ const copy = () => {
18
+ if (!value && !from) return
19
+
20
+ if (value) {
21
+ navigator.clipboard.writeText(value)
22
+ } else {
23
+ const el = document.getElementById(from)
24
+ let text = el?.innerText
25
+ if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
26
+ text = el.value
27
+ }
28
+ if (text) navigator.clipboard.writeText(text)
29
+ }
30
+
31
+ setCopied(true)
32
+ window.clearTimeout(timerRef.current)
33
+ timerRef.current = window.setTimeout(() => {
34
+ setCopied(false)
35
+ }, timeout)
36
+ }
37
+
38
+ useEffect(() => {
39
+ return () => {
40
+ window.clearTimeout(timerRef.current)
41
+ }
42
+ }, [])
43
+
44
+ return [copied, copy] as const
45
+ }
@@ -1,5 +1,6 @@
1
1
  @import "../tokens/colors";
2
2
  @import "../tokens/opacity";
3
+ @import "../tokens/border_radius";
3
4
 
4
5
  .pb_draggable_container {
5
6
  .pb_draggable_item {
@@ -34,7 +35,7 @@
34
35
  width: 100%;
35
36
  height: 100%;
36
37
  border: 2px dashed $neutral;
37
- border-radius: $border-radius-sm;
38
+ border-radius: $border_radius_sm;
38
39
  box-sizing: border-box;
39
40
  z-index: 10;
40
41
  pointer-events: none;
@@ -64,7 +65,7 @@
64
65
  width: 100%;
65
66
  height: 100%;
66
67
  background-color: rgba($neutral, $opacity_5);
67
- border-radius: $border-radius-sm;
68
+ border-radius: $border_radius_sm;
68
69
  z-index: 10;
69
70
  pointer-events: none;
70
71
  }
@@ -73,48 +74,70 @@
73
74
  &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
74
75
  &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
75
76
  }
76
-
77
- // Line variant
77
+ }
78
+ }
79
+ // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
80
+ &.line_vertical {
81
+ .pb_draggable_item {
82
+ position: relative;
78
83
  &.drop_zone_line {
79
- // Hide the original content to show the line
84
+ // Hide the original content to show the line only (held draggable item should not take up space in drop zone)
85
+ position: relative;
86
+ z-index: 2;
80
87
  & > * {
81
88
  opacity: 0;
82
89
  }
83
-
90
+ height: 4px;
84
91
  // Style for horizontal line (default)
85
92
  &::before {
86
93
  content: '';
87
94
  position: absolute;
88
95
  left: 0;
89
96
  top: 0;
90
- width: 4px;
91
- height: 100%;
97
+ width: 100%;
98
+ height: 4px;
92
99
  background-color: $neutral;
93
- border-radius: 1000px;
100
+ border-radius: $border_radius_rounded;
94
101
  z-index: 10;
95
102
  pointer-events: none;
103
+ transform: translateY(-50%);
96
104
  }
97
-
98
- // Apply color variants
105
+ // Apply color variants to the ::before element
99
106
  &.drop_zone_color_primary::before { background-color: $primary; }
100
107
  &.drop_zone_color_purple::before { background-color: $purple; }
101
108
  }
102
109
  }
103
110
  }
104
- }
105
-
106
- // Support for vertical layouts (horizontal line)
107
- .pb_draggable_container.vertical {
108
- .pb_draggable_item {
109
- &.is_dragging {
110
- // Line variant for vertical layouts (horizontal line)
111
+ // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
112
+ &.line_horizontal {
113
+ .pb_draggable_item {
114
+ position: relative;
111
115
  &.drop_zone_line {
116
+ position: relative;
117
+ z-index: 2;
118
+ & > * {
119
+ opacity: 0;
120
+ }
121
+ width: 4px;
122
+ height: auto;
123
+ // Style for vertical line
112
124
  &::before {
113
- width: 100%;
114
- height: 4px;
125
+ content: '';
126
+ position: absolute;
115
127
  left: 0;
116
128
  top: 0;
129
+ width: 4px;
130
+ height: 100%;
131
+ background-color: $neutral;
132
+ border-radius: $border_radius_rounded;
133
+ z-index: 10;
134
+ pointer-events: none;
135
+ transform: translateX(-50%);
117
136
  }
137
+
138
+ // Apply color variants to the ::before element
139
+ &.drop_zone_color_primary::before { background-color: $primary; }
140
+ &.drop_zone_color_purple::before { background-color: $purple; }
118
141
  }
119
142
  }
120
143
  }