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 +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -25
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +18 -86
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +6 -15
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +931 -849
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +1 -4
- data/dist/chunks/{_typeahead-ICFw7Umq.js → _typeahead-C9g4qCcE.js} +1 -1
- data/dist/chunks/_weekday_stacked-DZpRml83.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +0 -72
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +0 -5
- data/dist/chunks/_weekday_stacked-PLi3twbe.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3eef39be443e3cd1b5d31fbf6c45383f7efbcdd3f41194ba4a977c21700bd862
|
4
|
+
data.tar.gz: 47fb682efcfea59eb34f2fcdcb3f15e52a254ee12d7c9974d18fbe2a411ca6b0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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[]
|
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
|
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
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
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-
|
18
|
+
.iti__selected-flag:focus-visible {
|
66
19
|
outline-style: none;
|
67
20
|
}
|
68
21
|
}
|
69
22
|
|
70
23
|
.iti__country {
|
71
|
-
padding: 5px
|
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-
|
80
|
-
|
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
|
-
.
|
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/
|
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
|
-
.
|
126
|
-
|
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--
|
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 .
|
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-
|
152
|
+
.iti__selected-flag {
|
217
153
|
background-color: rgba($white, 0);
|
218
154
|
}
|
219
155
|
}
|
220
156
|
}
|
221
157
|
|
222
|
-
.iti__selected-
|
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/
|
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
|
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 =
|
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
|
-
|
220
|
+
preferredCountries,
|
227
221
|
allowDropdown: !disabled,
|
228
222
|
autoInsertDialCode: false,
|
229
|
-
initialCountry
|
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) => {
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
CHANGED
@@ -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
|
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.
|