playbook_ui_docs 14.21.2.pre.alpha.PLAY22558410 β†’ 14.21.2

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 (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +3 -5
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +2 -3
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -4
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +4 -7
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -6
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +3 -6
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +4 -7
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -7
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +10 -19
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +10 -19
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +11 -20
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +14 -23
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +3 -6
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +3 -6
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +3 -6
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +3 -6
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
  55. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
  56. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
  57. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -1
  58. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
  60. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
  61. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
  62. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  63. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
  64. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
  65. data/dist/playbook-doc.js +3 -3
  66. metadata +2 -22
  67. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +0 -51
  68. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +0 -7
  69. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +0 -77
  70. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +0 -1
  71. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +0 -63
  72. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +0 -1
  73. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +0 -38
  74. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +0 -7
  75. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +0 -3
  76. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +0 -64
  77. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +0 -7
  78. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +0 -52
  79. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +0 -99
  80. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +0 -1
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +0 -1
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +0 -28
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +0 -47
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +0 -1
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +0 -1
  86. data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +0 -224
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '08a94a6085bc1f5ee206581d3332ddd579a4b73d20d8f9c9a170e64baaf308f7'
4
- data.tar.gz: 63310bbd92bbd291aa484d784c8d0dbe22665502d9a3739b835024f67433c719
3
+ metadata.gz: 9405f31a27844f27804b22e9f155bedd90ad625774877f925a3c02b461930d6e
4
+ data.tar.gz: 1de767071ea6b45fedd73e4e73d9bd701fc2ee6c29332cd20a6bdc1514ea5a7c
5
5
  SHA512:
6
- metadata.gz: 37de6ed182395dcdee05998682e54b2ccc2d29ecebf832832a199f4b6005ca6f74a2e7bee5914b91a0bd095ceac438ed82a1a739900a1acfc2217675a9ac5485
7
- data.tar.gz: 1c14e87c74d65af5f759d968e5d721effdc6881a2d663c48d27ed9f2992b6810d388ad24e2b10b0d0ad609c4acc8154adeeeea34f40d2ae0f0da003950699589
6
+ metadata.gz: 91d5c6d8364aa43ac0bc697ae7ee82d99f03d564b21c4318a17bf96b7b56ecb6a18cec06dcbdb94a420a7208995d8e94f43cade2ddcb84e6ac7c90a8bf52a0d2
7
+ data.tar.gz: 91f13104947d7ef99ddfe3794de30919b2f95c8e8b73a10fbfa7f126e656e6daa90ef7aab24219ad031b42ea0f292e524d849784719a2d973a1517307aefb117
@@ -51,7 +51,7 @@
51
51
  ]
52
52
  %>
53
53
 
54
- <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
54
+ <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
55
55
  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
56
56
  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
57
57
  <% end %>
@@ -34,7 +34,7 @@
34
34
  subrow_headers = ["Quarter", "Month", "Day"]
35
35
  %>
36
36
 
37
- <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
37
+ <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
38
38
  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
39
39
  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
40
40
  <% end %>
@@ -55,4 +55,4 @@
55
55
  },
56
56
  ] %>
57
57
 
58
- <%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
58
+ <%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
@@ -30,4 +30,4 @@
30
30
  }
31
31
  ] %>
32
32
 
33
- <%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
33
+ <%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
35
35
  },
36
36
  ]
37
37
 
38
- const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
38
+ const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
39
39
 
40
40
  return (
41
41
  <div>
@@ -1,7 +1,5 @@
1
- Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
1
+ Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
2
2
 
3
- **NOTE:**
3
+ **NOTE:** This prop is in Beta. Current Requirements for V1:
4
4
  - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
5
- - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.
6
- - `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below.
7
- - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned.
5
+ - Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually
@@ -47,14 +47,14 @@ const CustomActions = () => {
47
47
  <CircleIconButton
48
48
  icon="file-csv"
49
49
  onClick={() =>
50
- alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
50
+ alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be exported!`)
51
51
  }
52
52
  variant="link"
53
53
  />
54
54
  <CircleIconButton
55
55
  icon="trash-alt"
56
56
  onClick={() =>
57
- alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
57
+ alert(rowIds.length === 0 ? "No Selection Made" : `Row ids ${rowIds.join(", ")} will be deleted!`)
58
58
  }
59
59
  variant="link"
60
60
  />
@@ -88,11 +88,10 @@ actions = [
88
88
  if (!selectedRowIds || selectedRowIds.length === 0) {
89
89
  alert('No Selection Made');
90
90
  } else {
91
- const selectedRowsString = selectedRowIds.join(', ');
92
91
  if (actionType === 'export') {
93
- alert('Row ids ' + selectedRowsString + ' will be exported!');
92
+ alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
94
93
  } else if (actionType === 'delete') {
95
- alert('Row ids ' + selectedRowsString + ' will be deleted!');
94
+ alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
96
95
  }
97
96
  }
98
97
  };
@@ -30,4 +30,4 @@
30
30
  }
31
31
  ] %>
32
32
 
33
- <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
33
+ <%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
@@ -19,8 +19,6 @@ examples:
19
19
  - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
20
20
  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
21
21
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
22
- # - advanced_table_column_styling_rails: Column Styling
23
- # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
24
22
 
25
23
  react:
26
24
  - advanced_table_default: Default (Required Props)
@@ -59,7 +57,3 @@ examples:
59
57
  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
60
58
  - advanced_table_pinned_rows: Pinned Rows
61
59
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
62
- - advanced_table_row_styling: Row Styling
63
- - advanced_table_column_styling: Column Styling
64
- - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
65
- - advanced_table_infinite_scroll: Infinite Scroll
@@ -34,7 +34,3 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
34
34
  export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
35
35
  export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
36
36
  export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
37
- export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
38
- export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
39
- export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
40
- export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,20 +5,17 @@ const DropdownBlankSelection = (props) => {
5
5
  const options = [
6
6
  {
7
7
  label: "United States",
8
- value: "unitedStates",
9
- id: "us"
8
+ value: "United States",
10
9
  },
11
10
  {
12
11
  label: "Canada",
13
- value: "canada",
14
- id: "ca"
12
+ value: "Canada",
15
13
  },
16
14
  {
17
15
  label: "Pakistan",
18
- value: "pakistan",
19
- id: "pk"
16
+ value: "Pakistan",
20
17
  }
21
- ];
18
+ ];
22
19
 
23
20
  return (
24
21
  <>
@@ -6,18 +6,15 @@ import Dropdown from '../../pb_dropdown/_dropdown'
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "unitedStates",
10
- id: "us"
9
+ value: "United States",
11
10
  },
12
11
  {
13
12
  label: "Canada",
14
- value: "canada",
15
- id: "ca"
13
+ value: "Canada",
16
14
  },
17
15
  {
18
16
  label: "Pakistan",
19
- value: "pakistan",
20
- id: "pk"
17
+ value: "Pakistan",
21
18
  }
22
19
  ]
23
20
 
@@ -6,18 +6,15 @@ const DropdownDefault = (props) => {
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "unitedStates",
10
- id: "us"
9
+ value: "United States",
11
10
  },
12
11
  {
13
12
  label: "Canada",
14
- value: "canada",
15
- id: "ca"
13
+ value: "Canada",
16
14
  },
17
15
  {
18
16
  label: "Pakistan",
19
- value: "pakistan",
20
- id: "pk"
17
+ value: "Pakistan",
21
18
  }
22
19
  ];
23
20
 
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,20 +5,17 @@ const DropdownDefaultValue = (props) => {
5
5
  const options = [
6
6
  {
7
7
  label: "United States",
8
- value: "unitedStates",
9
- id: "us"
8
+ value: "United States",
10
9
  },
11
10
  {
12
11
  label: "Canada",
13
- value: "canada",
14
- id: "ca"
12
+ value: "Canada",
15
13
  },
16
14
  {
17
15
  label: "Pakistan",
18
- value: "pakistan",
19
- id: "pk"
16
+ value: "Pakistan",
20
17
  }
21
- ];
18
+ ];
22
19
 
23
20
  return (
24
21
  <>
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
  %>
8
8
 
@@ -10,20 +10,17 @@ const DropdownError = (props) => {
10
10
  const options = [
11
11
  {
12
12
  label: "United States",
13
- value: "unitedStates",
14
- id: "us"
13
+ value: "United States",
15
14
  },
16
15
  {
17
16
  label: "Canada",
18
- value: "canada",
19
- id: "ca"
17
+ value: "Canada",
20
18
  },
21
19
  {
22
20
  label: "Pakistan",
23
- value: "pakistan",
24
- id: "pk"
21
+ value: "Pakistan",
25
22
  }
26
- ];
23
+ ]
27
24
 
28
25
  return (
29
26
  <>
@@ -6,48 +6,39 @@ const DropdownMultiSelect = (props) => {
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "unitedStates",
10
- id: "us"
9
+ value: "United States",
11
10
  },
12
11
  {
13
- label: "United Kingdom",
14
- value: "unitedKingdom",
15
- id: "gb"
12
+ label: "United Kingdom",
13
+ value: "United Kingdom",
16
14
  },
17
15
  {
18
16
  label: "Canada",
19
- value: "canada",
20
- id: "ca"
17
+ value: "Canada",
21
18
  },
22
19
  {
23
20
  label: "Pakistan",
24
- value: "pakistan",
25
- id: "pk"
21
+ value: "Pakistan",
26
22
  },
27
23
  {
28
24
  label: "India",
29
- value: "india",
30
- id: "in"
25
+ value: "India",
31
26
  },
32
27
  {
33
28
  label: "Australia",
34
- value: "australia",
35
- id: "au"
29
+ value: "Australia",
36
30
  },
37
31
  {
38
32
  label: "New Zealand",
39
- value: "new Zealand",
40
- id: "nz"
33
+ value: "New Zealand",
41
34
  },
42
35
  {
43
36
  label: "Italy",
44
- value: "italy",
45
- id: "it"
37
+ value: "Italy",
46
38
  },
47
39
  {
48
40
  label: "Spain",
49
- value: "spain",
50
- id: "es"
41
+ value: "Spain",
51
42
  }
52
43
  ];
53
44
 
@@ -6,48 +6,39 @@ const DropdownMultiSelectDisplay = (props) => {
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "unitedStates",
10
- id: "us"
9
+ value: "United States",
11
10
  },
12
11
  {
13
- label: "United Kingdom",
14
- value: "unitedKingdom",
15
- id: "gb"
12
+ label: "United Kingdom",
13
+ value: "United Kingdom",
16
14
  },
17
15
  {
18
16
  label: "Canada",
19
- value: "canada",
20
- id: "ca"
17
+ value: "Canada",
21
18
  },
22
19
  {
23
20
  label: "Pakistan",
24
- value: "pakistan",
25
- id: "pk"
21
+ value: "Pakistan",
26
22
  },
27
23
  {
28
24
  label: "India",
29
- value: "india",
30
- id: "in"
25
+ value: "India",
31
26
  },
32
27
  {
33
28
  label: "Australia",
34
- value: "australia",
35
- id: "au"
29
+ value: "Australia",
36
30
  },
37
31
  {
38
32
  label: "New Zealand",
39
- value: "new Zealand",
40
- id: "nz"
33
+ value: "New Zealand",
41
34
  },
42
35
  {
43
36
  label: "Italy",
44
- value: "italy",
45
- id: "it"
37
+ value: "Italy",
46
38
  },
47
39
  {
48
40
  label: "Spain",
49
- value: "spain",
50
- id: "es"
41
+ value: "Spain",
51
42
  }
52
43
  ];
53
44
 
@@ -1,15 +1,15 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedsStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- { label: 'India', value: 'india', id: 'in' },
7
- { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
8
- { label: 'Australia', value: 'australia', id: 'au' },
9
- { label: 'New Zealand', value: 'newZealand', id: 'nz' },
10
- { label: 'Germany', value: 'germany', id: 'de' },
11
- { label: 'France', value: 'france', id: 'fr' },
12
- { label: 'Italy', value: 'italy', id: 'it' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ { label: 'India', value: 'India', id: 'in' },
7
+ { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
8
+ { label: 'Australia', value: 'Australia', id: 'au' },
9
+ { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
10
+ { label: 'Germany', value: 'Germany', id: 'de' },
11
+ { label: 'France', value: 'France', id: 'fr' },
12
+ { label: 'Italy', value: 'Italy', id: 'it' },
13
13
  ]
14
14
  %>
15
15
 
@@ -1,15 +1,15 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedsStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- { label: 'India', value: 'india', id: 'in' },
7
- { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
8
- { label: 'Australia', value: 'australia', id: 'au' },
9
- { label: 'New Zealand', value: 'newZealand', id: 'nz' },
10
- { label: 'Germany', value: 'germany', id: 'de' },
11
- { label: 'France', value: 'france', id: 'fr' },
12
- { label: 'Italy', value: 'italy', id: 'it' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ { label: 'India', value: 'India', id: 'in' },
7
+ { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
8
+ { label: 'Australia', value: 'Australia', id: 'au' },
9
+ { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
10
+ { label: 'Germany', value: 'Germany', id: 'de' },
11
+ { label: 'France', value: 'France', id: 'fr' },
12
+ { label: 'Italy', value: 'Italy', id: 'it' },
13
13
  ]
14
14
  %>
15
15
 
@@ -1,15 +1,15 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'unitedsStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- { label: 'India', value: 'india', id: 'in' },
7
- { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
8
- { label: 'Australia', value: 'australia', id: 'au' },
9
- { label: 'New Zealand', value: 'newZealand', id: 'nz' },
10
- { label: 'Germany', value: 'germany', id: 'de' },
11
- { label: 'France', value: 'france', id: 'fr' },
12
- { label: 'Italy', value: 'italy', id: 'it' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ { label: 'India', value: 'India', id: 'in' },
7
+ { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
8
+ { label: 'Australia', value: 'Australia', id: 'au' },
9
+ { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
10
+ { label: 'Germany', value: 'Germany', id: 'de' },
11
+ { label: 'France', value: 'France', id: 'fr' },
12
+ { label: 'Italy', value: 'Italy', id: 'it' },
13
13
  ]
14
14
  %>
15
15
 
@@ -6,50 +6,41 @@ const DropdownMultiSelectWithAutocomplete = (props) => {
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "unitedStates",
10
- id: "us"
9
+ value: "United States",
11
10
  },
12
11
  {
13
- label: "United Kingdom",
14
- value: "unitedKingdom",
15
- id: "gb"
12
+ label: "United Kingdom",
13
+ value: "United Kingdom",
16
14
  },
17
15
  {
18
16
  label: "Canada",
19
- value: "canada",
20
- id: "ca"
17
+ value: "Canada",
21
18
  },
22
19
  {
23
20
  label: "Pakistan",
24
- value: "pakistan",
25
- id: "pk"
21
+ value: "Pakistan",
26
22
  },
27
23
  {
28
24
  label: "India",
29
- value: "india",
30
- id: "in"
25
+ value: "India",
31
26
  },
32
27
  {
33
28
  label: "Australia",
34
- value: "australia",
35
- id: "au"
29
+ value: "Australia",
36
30
  },
37
31
  {
38
32
  label: "New Zealand",
39
- value: "new Zealand",
40
- id: "nz"
33
+ value: "New Zealand",
41
34
  },
42
35
  {
43
36
  label: "Italy",
44
- value: "italy",
45
- id: "it"
37
+ value: "Italy",
46
38
  },
47
39
  {
48
40
  label: "Spain",
49
- value: "spain",
50
- id: "es"
41
+ value: "Spain",
51
42
  }
52
- ];
43
+ ];
53
44
 
54
45
  return (
55
46
  <div>
@@ -2,21 +2,21 @@
2
2
  options = [
3
3
  {
4
4
  label: "United States",
5
- value: "unitedsStates",
5
+ value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "πŸ‡ΊπŸ‡Έ",
8
8
  id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
- value: "canada",
12
+ value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
15
  id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
- value: "pakistan",
19
+ value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
22
  id: "pk"