playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175 → 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4123

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
4
- data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
3
+ metadata.gz: 3eef39be443e3cd1b5d31fbf6c45383f7efbcdd3f41194ba4a977c21700bd862
4
+ data.tar.gz: 47fb682efcfea59eb34f2fcdcb3f15e52a254ee12d7c9974d18fbe2a411ca6b0
5
5
  SHA512:
6
- metadata.gz: 225b32c1ce7e41af851a4bfd0d40cc502d3458ec796146f76511dc9db8504316f154060857c35737a93dc4ecfb0e6a9d2d36690883b463f1dc23e16b135a44dd
7
- data.tar.gz: e31d7f5cad0f0e456e2afb580573650eb72391230227dcad825a32fcb221f906660609baf3941ff8cbdebec68185fc064c0685e318825b594668b04601649527
6
+ metadata.gz: 80c6b66534b581c9c5bf5494928b003eeac846f2346fd9a7a394361abe00fdcfe616f8772df66edbbf8a9cb01f9bfddd6c23ac81ff19df22bd96de4fb5e71de9
7
+ data.tar.gz: 2698718348044f92ad1589b367d5c51d36a7c371f717855b9da6b4b45caab620291ffa0253c98090dd1b731709286498a6a9c274b1ced957f0d76b5b76a7f1d4
@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
91
91
  const columnHelper = createColumnHelper()
92
92
 
93
93
  //Create cells for first columns
94
- const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
94
+ const createCellFunction = (cellAccessors: string[]) => {
95
95
  const columnCells = ({
96
96
  row,
97
97
  getValue,
@@ -101,11 +101,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
101
101
  }) => {
102
102
  const rowData = row.original
103
103
 
104
- // Use customRenderer if provided, otherwise default rendering
105
- if (customRenderer) {
106
- return customRenderer(row, getValue())
107
- }
108
-
109
104
  switch (row.depth) {
110
105
  case 0: {
111
106
  return (
@@ -139,31 +134,18 @@ const AdvancedTable = (props: AdvancedTableProps) => {
139
134
  //Create column array in format needed by Tanstack
140
135
  const columns =
141
136
  columnDefinitions &&
142
- columnDefinitions.map((column, index) => {
137
+ columnDefinitions.map((column) => {
143
138
  // Define the base column structure
144
139
  const columnStructure = {
145
140
  ...columnHelper.accessor(column.accessor, {
146
141
  header: column.label,
147
142
  }),
148
143
  }
149
-
150
- // Use the custom renderer if provided, EXCEPT for the first column
151
- if (index !== 0) {
152
- if (column.cellAccessors || column.customRenderer) {
153
- columnStructure.cell = createCellFunction(
154
- column.cellAccessors,
155
- column.customRenderer
156
- )
157
- }
158
- } else {
159
- // For the first column, apply createCellFunction without customRenderer
160
- if (column.cellAccessors) {
161
- columnStructure.cell = createCellFunction(column.cellAccessors)
162
- }
163
- }
164
-
165
- return columnStructure
166
- })
144
+ if (column.cellAccessors) {
145
+ columnStructure.cell = createCellFunction(column.cellAccessors)
146
+ }
147
+ return columnStructure
148
+ })
167
149
 
168
150
  //Syntax for sorting Array if we want to manage state ourselves
169
151
  const sorting = [
@@ -3,7 +3,6 @@ examples:
3
3
  - advanced_table_beta: Default (Required Props)
4
4
  - advanced_table_beta_subrow_headers: SubRow Headers
5
5
  - advanced_table_beta_sort: Enable Sorting
6
-
7
6
  react:
8
7
  - advanced_table_default: Default (Required Props)
9
8
  - advanced_table_loading: Loading State
@@ -16,4 +15,3 @@ examples:
16
15
  - advanced_table_table_props: Table Props
17
16
  - advanced_table_inline_row_loading: Inline Row Loading
18
17
  - advanced_table_responsive: Responsive Tables
19
- - advanced_table_custom_cell: Custom Components for Cells
@@ -9,4 +9,3 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
9
9
  export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
10
10
  export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
11
11
  export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
12
- export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
@@ -5,54 +5,7 @@ $transform-rotate-deg: 135deg;
5
5
  $dropdown-min-width: 340px;
6
6
  $flag-min-resolution: 192dpi;
7
7
 
8
- :root {
9
- --iti-arrow-padding: #{$space_xs};
10
- --iti-spacer-horizontal: #{$space_sm};
11
- --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
12
- --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
13
- --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
14
- --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
15
- }
16
-
17
8
  .pb_phone_number_input {
18
- .iti {
19
- width: 100%;
20
- }
21
-
22
- .iti__flag {
23
- margin-right: 6px;
24
- }
25
-
26
- .iti__a11y-text {
27
- display: none;
28
- }
29
-
30
- .iti__selected-dial-code {
31
- font-family: $font_family_base;
32
- font-size: $font_base;
33
- line-height: 1.5;
34
- letter-spacing: $lspace_normal;
35
- font-weight: $regular;
36
- font-style: normal;
37
- text-rendering: optimizeLegibility;
38
- -moz-font-feature-settings: "liga" on;
39
- color: $charcoal;
40
- }
41
-
42
- // iti-spacer-horizontal's default is 8px, or $space_xs
43
- .iti__country-list .iti__flag, .iti__country-name {
44
- margin-right: $space_xs;
45
- }
46
- [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
47
- margin-right: 0;
48
- margin-left: $space_xs;
49
- }
50
-
51
- .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
52
- .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
53
- background-color: transparent;
54
- }
55
-
56
9
  input::placeholder {
57
10
  color: $focus_input_light;
58
11
  }
@@ -62,13 +15,13 @@ $flag-min-resolution: 192dpi;
62
15
  border-color: $primary !important;
63
16
  }
64
17
 
65
- .iti__selected-country:focus-visible {
18
+ .iti__selected-flag:focus-visible {
66
19
  outline-style: none;
67
20
  }
68
21
  }
69
22
 
70
23
  .iti__country {
71
- padding: 5px $space_xs 5px $space_sm;
24
+ padding: 5px 10px 5px 16px;
72
25
  transition: $transition_default;
73
26
  }
74
27
 
@@ -76,23 +29,8 @@ $flag-min-resolution: 192dpi;
76
29
  border-bottom: 1px solid $border_light !important;
77
30
  }
78
31
 
79
- .iti__selected-country-primary {
80
- display: flex;
81
- justify-content: center;
82
- align-items: center;
83
- .iti__flag {
84
- margin-right: 0;
85
- }
86
- }
87
-
88
- .iti__selected-country {
89
- position: absolute;
90
- top: 0;
91
- display: flex;
92
- height: 100%;
93
- justify-content: center;
94
- align-items: center;
95
- border-width: 0;
32
+ .iti__selected-flag {
33
+ padding: 0 $space_xxs 0 $space_sm;
96
34
  border-radius: $space_xxs;
97
35
 
98
36
  &[aria-expanded="true"] {
@@ -113,24 +51,24 @@ $flag-min-resolution: 192dpi;
113
51
  }
114
52
  }
115
53
 
116
- .iti__country-container:hover + .text_input {
54
+ .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
55
+ background-color: $focus_input_light;
56
+ }
57
+
58
+ .iti__flag-container:hover + .text_input {
117
59
  background-color: $focus_input_light;
118
60
  }
119
61
 
120
62
  .iti__flag {
121
- background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
63
+ background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
122
64
  border-radius: 1px;
123
65
  }
124
66
 
125
- .iti__flag.iti__globe {
126
- background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
127
- background-position: center;
128
- height: 16px;
129
- width: 16px;
130
- background-size: 16px 16px;
67
+ .iti--separate-dial-code {
68
+ width: 100%;
131
69
  }
132
70
 
133
- .iti--show-flags .iti__selected-country {
71
+ .iti--separate-dial-code .iti__selected-flag {
134
72
  background-color: rgba($white, $opacity_1);
135
73
  }
136
74
 
@@ -198,12 +136,10 @@ $flag-min-resolution: 192dpi;
198
136
  .iti__dropdown-content {
199
137
  border-radius: $space_xs;
200
138
  border: 1px solid $border_light !important;
201
- position: absolute;
202
- top: 100%;
203
139
  }
204
140
 
205
141
  &.dark {
206
- .iti--allow-dropdown .iti__country-container {
142
+ .iti--allow-dropdown .iti__flag-container {
207
143
  background-color: rgba($white, 0);
208
144
 
209
145
  &:hover {
@@ -213,13 +149,13 @@ $flag-min-resolution: 192dpi;
213
149
  background-color: rgba($white, 0.15);
214
150
  }
215
151
 
216
- .iti__selected-country {
152
+ .iti__selected-flag {
217
153
  background-color: rgba($white, 0);
218
154
  }
219
155
  }
220
156
  }
221
157
 
222
- .iti__selected-country {
158
+ .iti__selected-flag {
223
159
  background-color: rgba($white, 0);
224
160
  color: $white;
225
161
  }
@@ -260,15 +196,11 @@ $flag-min-resolution: 192dpi;
260
196
  background-color: rgba($white, 0.025) !important;
261
197
  }
262
198
  }
263
-
264
- .iti__selected-dial-code {
265
- color: $white;
266
- }
267
199
  }
268
-
200
+
269
201
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
270
202
  .iti__flag {
271
- background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
203
+ background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
272
204
  }
273
205
  }
274
206
  }
@@ -1,7 +1,8 @@
1
1
  import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
- import intlTelInput from 'intl-tel-input/build/js/intlTelInputWithUtils.js'
4
+ import intlTelInput from 'intl-tel-input'
5
+ import 'intl-tel-input/build/js/utils.js'
5
6
 
6
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
8
  import { globalProps } from '../utilities/globalProps'
@@ -49,7 +50,7 @@ const formatToGlobalCountryName = (countryName: string) => {
49
50
  }
50
51
 
51
52
  const formatAllCountries = () => {
52
- const countryData = intlTelInput.getCountryData()
53
+ const countryData = window.intlTelInputGlobals.getCountryData()
53
54
 
54
55
  for (let i = 0; i < countryData.length; i++) {
55
56
  const country = countryData[i]
@@ -213,24 +214,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
213
214
  // This also Fixes things for our react_component rendering on the Rails Side
214
215
  useEffect(formatAllCountries, [])
215
216
 
216
- // If an initial country is not specified, the "globe" icon will show
217
- // Always set a country
218
- const fallbackCountry =
219
- preferredCountries.length > 0 ? preferredCountries[0] :
220
- onlyCountries.length > 0 ? onlyCountries.sort()[0] :
221
- "af";
222
-
223
217
  useEffect(() => {
224
218
  const telInputInit = intlTelInput(inputRef.current, {
225
219
  separateDialCode: true,
226
- countryOrder: preferredCountries,
220
+ preferredCountries,
227
221
  allowDropdown: !disabled,
228
222
  autoInsertDialCode: false,
229
- initialCountry: initialCountry || fallbackCountry,
230
- onlyCountries,
231
- countrySearch: false,
232
- fixDropdownWidth: false,
233
- formatAsYouType: false,
223
+ initialCountry,
224
+ onlyCountries
234
225
  })
235
226
 
236
227
  inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -1 +1 @@
1
- Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
1
+ Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.