playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863

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 (123) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +6 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  5. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +2 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +19 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -2
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  16. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  17. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  30. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  31. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  34. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  53. data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
  54. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
  55. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
  56. data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
  57. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  58. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  60. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  61. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  62. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  63. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  64. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  65. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
  66. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  70. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
  71. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  72. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  74. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  75. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  76. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  77. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  78. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  79. data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
  80. data/dist/chunks/_typeahead-Do6525vz.js +22 -0
  81. data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
  82. data/dist/chunks/{lib-CTkMyvfQ.js → lib-DYpq0k8j.js} +2 -2
  83. data/dist/chunks/{pb_form_validation-BVF3TmcL.js → pb_form_validation-BUOKwfvW.js} +1 -1
  84. data/dist/chunks/vendor.js +1 -1
  85. data/dist/menu.yml +0 -9
  86. data/dist/playbook-doc.js +2 -2
  87. data/dist/playbook-rails-react-bindings.js +1 -1
  88. data/dist/playbook-rails.js +1 -1
  89. data/dist/playbook.css +1 -1
  90. data/lib/playbook/version.rb +2 -2
  91. metadata +23 -37
  92. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  93. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  94. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  95. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  96. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  97. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  98. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
  99. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
  100. data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
  101. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
  102. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
  103. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
  104. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
  105. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
  106. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
  107. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
  108. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
  109. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
  110. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
  111. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
  112. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
  113. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
  114. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
  115. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
  116. data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
  117. data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
  118. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
  119. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
  120. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
  121. data/dist/chunks/_typeahead-B80UsDrG.js +0 -22
  122. data/dist/chunks/_weekday_stacked-D1bqIne1.js +0 -45
  123. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -1,32 +1,41 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataWithLegend = [{
6
7
  name: 'Bugs',
7
- value: 8,
8
-
8
+ y: 8,
9
9
  },
10
10
  {
11
11
  name: 'Chores',
12
- value: 1,
13
-
12
+ y: 1,
14
13
  },
15
14
  {
16
15
  name: 'Stories',
17
- value: 12,
18
- },
19
- ]
16
+ y: 12,
17
+ }]
18
+
19
+ const CircleChartWithLegendKit = () => {
20
+ const chartOptions = {
21
+ series: [{ data: dataWithLegend }],
22
+ plotOptions: {
23
+ pie: {
24
+ showInLegend: true
25
+ }
26
+ }
27
+ }
28
+
29
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
20
30
 
21
- const CircleChartWithLegendKit = (props) => (
22
- <div>
23
- <CircleChart
24
- chartData={dataWithLegend}
25
- id="with-legend-example"
26
- legend
27
- {...props}
28
- />
29
- </div>
30
- )
31
+ return (
32
+ <div>
33
+ <HighchartsReact
34
+ highcharts={Highcharts}
35
+ options={options}
36
+ />
37
+ </div>
38
+ )
39
+ }
31
40
 
32
- export default CircleChartWithLegendKit
41
+ export default CircleChartWithLegendKit
@@ -1,47 +1,55 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataWithTitle = [
6
7
  {
7
8
  name: 'Facebook',
8
- value: 2498,
9
+ y: 2498,
9
10
  },
10
11
  {
11
12
  name: 'YouTube',
12
- value: 2000,
13
+ y: 2000,
13
14
  },
14
15
  {
15
16
  name: 'WhatsApp',
16
- value: 2000,
17
+ y: 2000,
17
18
  },
18
19
  {
19
20
  name: 'Facebook Messenger',
20
- value: 1300,
21
+ y: 1300,
21
22
  },
22
23
  {
23
24
  name: 'WeChat',
24
- value: 1165,
25
+ y: 1165,
25
26
  },
26
27
  {
27
28
  name: 'Instagram',
28
- value: 1000,
29
+ y: 1000,
29
30
  },
30
31
  {
31
32
  name: 'Tik Tok',
32
- value: 800,
33
+ y: 800,
33
34
  },
34
35
  ]
35
36
 
36
- const CircleChartWithLegendKit = (props) => (
37
- <div>
38
- <CircleChart
39
- chartData={dataWithTitle}
40
- id="with-title-example"
41
- title="Active Users on Social Media"
42
- {...props}
43
- />
44
- </div>
45
- )
37
+ const CircleChartWithTitle = () => {
38
+ const chartOptions = {
39
+ title: { text: "Active Users on Social Media" },
40
+ series: [{ data: dataWithTitle }],
41
+ }
42
+
43
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
44
+
45
+ return (
46
+ <div>
47
+ <HighchartsReact
48
+ highcharts={Highcharts}
49
+ options={options}
50
+ />
51
+ </div>
52
+ )
53
+ }
46
54
 
47
- export default CircleChartWithLegendKit
55
+ export default CircleChartWithTitle
@@ -0,0 +1 @@
1
+ **Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
@@ -14,7 +14,6 @@ examples:
14
14
 
15
15
  react:
16
16
  - circle_chart_default: Default Style
17
- - circle_chart_pb_styles: Playbook Styles
18
17
  - circle_chart_live_data: Live Data
19
18
  - circle_chart_rounded: Rounded Corners
20
19
  - circle_chart_block: Accepts Any Block
@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
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
11
  export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
12
- export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
@@ -77,12 +77,12 @@ test('returns correct icon', () => {
77
77
 
78
78
  expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
79
79
  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
80
- expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
80
+ expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
81
81
  expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
82
82
  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
83
83
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
84
84
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
85
- expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
85
+ expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
86
86
  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
87
87
  })
88
88
 
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
7
-
8
6
  const highchartsDarkTheme: ThemeProps = {
9
7
  lang: {
10
8
  thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
166
164
  marker: {
167
165
  lineColor: colors.border_dark,
168
166
  },
169
- },
170
-
171
- //TREEMAP CHART STYLES
172
- treemap: {
173
- layoutAlgorithm: "squarified",
174
- allowTraversingTree: false,
175
- animationLimit: 1000,
176
- colors: [
177
- colors.data_1,
178
- colors.data_2,
179
- colors.data_3,
180
- colors.data_4,
181
- colors.data_5,
182
- colors.data_6,
183
- colors.data_7,
184
- colors.data_8,
185
- ],
186
- dataLabels: {
187
- enabled: true,
188
- style: {
189
- fontFamily: typography.font_family_base,
190
- fontWeight: typography.bold,
191
- fontSize: typography.heading_4,
192
- },
193
- },
194
- levels: [
195
- {
196
- level: 1,
197
- dataLabels: {
198
- enabled: false,
199
- },
200
- },
201
- ],
202
- traverseUpButton: {
203
- position: { y: -50 },
204
- },
205
- } as PlotTreemapOptions,
167
+ }
206
168
  },
207
169
  credits: {
208
170
  enabled: false
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
7
-
8
6
  const highchartsTheme: ThemeProps = {
9
7
  lang: {
10
8
  thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
165
163
  marker: {
166
164
  lineColor: '#333',
167
165
  },
168
- },
169
-
170
- //TREEMAP CHART STYLES
171
- treemap: {
172
- layoutAlgorithm: "squarified",
173
- allowTraversingTree: false,
174
- animationLimit: 1000,
175
- colors: [
176
- colors.data_1,
177
- colors.data_2,
178
- colors.data_3,
179
- colors.data_4,
180
- colors.data_5,
181
- colors.data_6,
182
- colors.data_7,
183
- colors.data_8,
184
- ],
185
- dataLabels: {
186
- enabled: true,
187
- style: {
188
- fontFamily: typography.font_family_base,
189
- fontWeight: typography.bold,
190
- fontSize: typography.heading_4,
191
- },
192
- },
193
- levels: [
194
- {
195
- level: 1,
196
- dataLabels: {
197
- enabled: false,
198
- },
199
- },
200
- ],
201
- traverseUpButton: {
202
- position: { y: -50 },
203
- },
204
- } as PlotTreemapOptions,
166
+ }
205
167
  },
206
168
  credits: {
207
169
  enabled: false
@@ -58,12 +58,12 @@ function FilterTest(props) {
58
58
  }
59
59
 
60
60
  test("triggers popover on filter button click", () => {
61
- render(<FilterTest data={{ testid: "render-test" }}/>);
61
+ const { container } = render(<FilterTest data={{ testid: "render-test" }}/>);
62
62
 
63
63
  const btn = screen.getAllByRole("button")[0];
64
64
 
65
65
  // checks if the sort menu rendered
66
- expect(screen.getByLabelText("sort-amount-down icon")).toBeInTheDocument()
66
+ expect(container.querySelector('.pb_custom_icon')).toBeInTheDocument()
67
67
  expect(screen.getByText('Popularity')).toBeInTheDocument() // check if filter/sort is rendered
68
68
 
69
69
  // hits the filter button and triggers popover
@@ -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>
@@ -104,8 +104,8 @@ const Table = (props: TableProps): React.ReactElement => {
104
104
 
105
105
  stickyLeftColumn.forEach((colId, index) => {
106
106
  const isLastColumn = index === stickyLeftColumn.length - 1;
107
- const header = document.querySelector(`th[id="${colId}"]`);
108
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
107
+ const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
108
+ const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
109
109
 
110
110
  if (header) {
111
111
  header.classList.add('sticky');
@@ -155,8 +155,8 @@ const Table = (props: TableProps): React.ReactElement => {
155
155
 
156
156
  stickyRightColumnReversed.forEach((colId, index) => {
157
157
  const isLastColumn = index === stickyRightColumn.length - 1;
158
- const header = document.querySelector(`th[id="${colId}"]`);
159
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
158
+ const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
159
+ const cells = document.querySelectorAll(`td[data-sticky-id="${colId}"]`);
160
160
 
161
161
  if (header) {
162
162
  header.classList.add('sticky');
@@ -11,7 +11,7 @@ const TableStickyColumns = () => {
11
11
  >
12
12
  <thead>
13
13
  <tr>
14
- <th id="a">{'Column 1'}</th>
14
+ <th data-sticky-id="a">{'Column 1'}</th>
15
15
  <th>{'Column 2'}</th>
16
16
  <th>{'Column 3'}</th>
17
17
  <th>{'Column 4'}</th>
@@ -25,12 +25,12 @@ const TableStickyColumns = () => {
25
25
  <th>{'Column 12'}</th>
26
26
  <th>{'Column 13'}</th>
27
27
  <th>{'Column 14'}</th>
28
- <th id="b">{'Column 15'}</th>
28
+ <th data-sticky-id="b">{'Column 15'}</th>
29
29
  </tr>
30
30
  </thead>
31
31
  <tbody>
32
32
  <tr>
33
- <td id="a">{'Value 1'}</td>
33
+ <td data-sticky-id="a">{'Value 1'}</td>
34
34
  <td>{'Value 2'}</td>
35
35
  <td>{'Value 3'}</td>
36
36
  <td>{'Value 4'}</td>
@@ -44,10 +44,10 @@ const TableStickyColumns = () => {
44
44
  <td>{'Value 12'}</td>
45
45
  <td>{'Value 13'}</td>
46
46
  <td>{'Value 14'}</td>
47
- <td id="b">{'Value 15'}</td>
47
+ <td data-sticky-id="b">{'Value 15'}</td>
48
48
  </tr>
49
49
  <tr>
50
- <td id="a">{'Value 1'}</td>
50
+ <td data-sticky-id="a">{'Value 1'}</td>
51
51
  <td>{'Value 2'}</td>
52
52
  <td>{'Value 3'}</td>
53
53
  <td>{'Value 4'}</td>
@@ -61,10 +61,10 @@ const TableStickyColumns = () => {
61
61
  <td>{'Value 12'}</td>
62
62
  <td>{'Value 13'}</td>
63
63
  <td>{'Value 14'}</td>
64
- <td id="b">{'Value 15'}</td>
64
+ <td data-sticky-id="b">{'Value 15'}</td>
65
65
  </tr>
66
66
  <tr>
67
- <td id="a">{'Value 1'}</td>
67
+ <td data-sticky-id="a">{'Value 1'}</td>
68
68
  <td>{'Value 2'}</td>
69
69
  <td>{'Value 3'}</td>
70
70
  <td>{'Value 4'}</td>
@@ -78,7 +78,7 @@ const TableStickyColumns = () => {
78
78
  <td>{'Value 12'}</td>
79
79
  <td>{'Value 13'}</td>
80
80
  <td>{'Value 14'}</td>
81
- <td id="b">{'Value 15'}</td>
81
+ <td data-sticky-id="b">{'Value 15'}</td>
82
82
  </tr>
83
83
  </tbody>
84
84
  </Table>
@@ -1,3 +1,3 @@
1
1
  The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
2
2
 
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
3
+ Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.
@@ -10,9 +10,9 @@ const TableStickyLeftColumns = () => {
10
10
  >
11
11
  <thead>
12
12
  <tr>
13
- <th id="1">{'Column 1'}</th>
14
- <th id="2">{'Column 2'}</th>
15
- <th id="3">{'Column 3'}</th>
13
+ <th data-sticky-id="1">{'Column 1'}</th>
14
+ <th data-sticky-id="2">{'Column 2'}</th>
15
+ <th data-sticky-id="3">{'Column 3'}</th>
16
16
  <th>{'Column 4'}</th>
17
17
  <th>{'Column 5'}</th>
18
18
  <th>{'Column 6'}</th>
@@ -29,9 +29,9 @@ const TableStickyLeftColumns = () => {
29
29
  </thead>
30
30
  <tbody>
31
31
  <tr>
32
- <td id="1">{'Value 1'}</td>
33
- <td id="2">{'Value 2'}</td>
34
- <td id="3">{'Value 3'}</td>
32
+ <td data-sticky-id="1">{'Value 1'}</td>
33
+ <td data-sticky-id="2">{'Value 2'}</td>
34
+ <td data-sticky-id="3">{'Value 3'}</td>
35
35
  <td>{'Value 4'}</td>
36
36
  <td>{'Value 5'}</td>
37
37
  <td>{'Value 6'}</td>
@@ -46,9 +46,9 @@ const TableStickyLeftColumns = () => {
46
46
  <td>{'Value 15'}</td>
47
47
  </tr>
48
48
  <tr>
49
- <td id="1">{'Value 1'}</td>
50
- <td id="2">{'Value 2'}</td>
51
- <td id="3">{'Value 3'}</td>
49
+ <td data-sticky-id="1">{'Value 1'}</td>
50
+ <td data-sticky-id="2">{'Value 2'}</td>
51
+ <td data-sticky-id="3">{'Value 3'}</td>
52
52
  <td>{'Value 4'}</td>
53
53
  <td>{'Value 5'}</td>
54
54
  <td>{'Value 6'}</td>
@@ -63,9 +63,9 @@ const TableStickyLeftColumns = () => {
63
63
  <td>{'Value 15'}</td>
64
64
  </tr>
65
65
  <tr>
66
- <td id="1">{'Value 1'}</td>
67
- <td id="2">{'Value 2'}</td>
68
- <td id="3">{'Value 3'}</td>
66
+ <td data-sticky-id="1">{'Value 1'}</td>
67
+ <td data-sticky-id="2">{'Value 2'}</td>
68
+ <td data-sticky-id="3">{'Value 3'}</td>
69
69
  <td>{'Value 4'}</td>
70
70
  <td>{'Value 5'}</td>
71
71
  <td>{'Value 6'}</td>
@@ -1,5 +1,5 @@
1
- The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
1
+ The `stickyLeftColumn` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
2
2
 
3
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
3
+ If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
4
4
 
5
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
5
+ Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using `stickyLeftColumn` prop.
@@ -22,9 +22,9 @@ const TableStickyRightColumns = () => {
22
22
  <th>{'Column 10'}</th>
23
23
  <th>{'Column 11'}</th>
24
24
  <th>{'Column 12'}</th>
25
- <th id="13">{'Column 13'}</th>
26
- <th id="14">{'Column 14'}</th>
27
- <th id="15">{'Column 15'}</th>
25
+ <th data-sticky-id="13">{'Column 13'}</th>
26
+ <th data-sticky-id="14">{'Column 14'}</th>
27
+ <th data-sticky-id="15">{'Column 15'}</th>
28
28
  </tr>
29
29
  </thead>
30
30
  <tbody>
@@ -41,9 +41,9 @@ const TableStickyRightColumns = () => {
41
41
  <td>{'Value 10'}</td>
42
42
  <td>{'Value 11'}</td>
43
43
  <td>{'Value 12'}</td>
44
- <td id="13">{'Value 13'}</td>
45
- <td id="14">{'Value 14'}</td>
46
- <td id="15">{'Value 15'}</td>
44
+ <td data-sticky-id="13">{'Value 13'}</td>
45
+ <td data-sticky-id="14">{'Value 14'}</td>
46
+ <td data-sticky-id="15">{'Value 15'}</td>
47
47
  </tr>
48
48
  <tr>
49
49
  <td>{'Value 1'}</td>
@@ -58,9 +58,9 @@ const TableStickyRightColumns = () => {
58
58
  <td>{'Value 10'}</td>
59
59
  <td>{'Value 11'}</td>
60
60
  <td>{'Value 12'}</td>
61
- <td id="13">{'Value 13'}</td>
62
- <td id="14">{'Value 14'}</td>
63
- <td id="15">{'Value 15'}</td>
61
+ <td data-sticky-id="13">{'Value 13'}</td>
62
+ <td data-sticky-id="14">{'Value 14'}</td>
63
+ <td data-sticky-id="15">{'Value 15'}</td>
64
64
  </tr>
65
65
  <tr>
66
66
  <td>{'Value 1'}</td>
@@ -75,9 +75,9 @@ const TableStickyRightColumns = () => {
75
75
  <td>{'Value 10'}</td>
76
76
  <td>{'Value 11'}</td>
77
77
  <td>{'Value 12'}</td>
78
- <td id="13">{'Value 13'}</td>
79
- <td id="14">{'Value 14'}</td>
80
- <td id="15">{'Value 15'}</td>
78
+ <td data-sticky-id="13">{'Value 13'}</td>
79
+ <td data-sticky-id="14">{'Value 14'}</td>
80
+ <td data-sticky-id="15">{'Value 15'}</td>
81
81
  </tr>
82
82
  </tbody>
83
83
  </Table>
@@ -1,5 +1,5 @@
1
- The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
1
+ The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
2
2
 
3
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
3
+ If you are using the sub-component variant, then you will pass the `data-sticky-id` to `<Table.Header>` and `<Table.Cell>`
4
4
 
5
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.
5
+ Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using the `stickyRightColumn` prop.
@@ -22,6 +22,10 @@
22
22
  border-radius: 0 4px 0 0;
23
23
  border-width: 1px 1px 1px 0;
24
24
  }
25
+ &:only-child {
26
+ border-radius: 4px 4px 0 0;
27
+ border-width: 1px 1px 1px 1px;
28
+ }
25
29
  }
26
30
  }
27
31
  }
@@ -39,6 +43,9 @@
39
43
  &:last-child {
40
44
  border-width: 0 1px 1px 0;
41
45
  }
46
+ &:only-child {
47
+ border-width: 0 1px 1px 1px;
48
+ }
42
49
  }
43
50
 
44
51
  &:last-child {
@@ -53,6 +60,10 @@
53
60
  border-radius: 0 0 4px 0;
54
61
  border-width: 0 1px 1px 0;
55
62
  }
63
+ &:only-child {
64
+ border-radius: 0 0 4px 4px;
65
+ border-width: 0 1px 1px 1px;
66
+ }
56
67
  }
57
68
  }
58
69
  }