playbook_ui 14.17.0.pre.alpha.PLAY20547307 → 14.17.0.pre.alpha.PLAY20547327
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +8 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +1 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +5 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +19 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/dist/chunks/{_typeahead-DytFGjSn.js → _typeahead-aRwivA3u.js} +1 -1
- data/dist/chunks/_weekday_stacked-Bm5175-u.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 +6 -4
- data/dist/chunks/_weekday_stacked-B7twaUlt.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: 9fcf2c083e29de497b80eedc979e33e2380754f0e5c7da746dd2bd0a825db844
|
4
|
+
data.tar.gz: e26b2e09e2e7c403eed4cb5ae1b3ab356b1235d19de1ddf4af635764b9e56d60
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 28d405dfcfd84f35a79e7b2228a30df54dc323b27120b56ebbf2e92f119cf8b704034791d33525a60fa21e3f1182f6b46f1f1c7df6e6e7ec58234fcfa5a31a32
|
7
|
+
data.tar.gz: 4e4f3d1af055445096f0850a06323c722636e70d2bab273ba81aaeab762acf62d778311ba1f157e0842d81def66b671c525b69bdb480d9e54318f45f2b883993
|
@@ -50,6 +50,7 @@ export const TableHeaderCell = ({
|
|
50
50
|
expanded,
|
51
51
|
setExpanded,
|
52
52
|
expandByDepth,
|
53
|
+
onExpandByDepthClick,
|
53
54
|
toggleExpansionIcon,
|
54
55
|
sortControl,
|
55
56
|
responsive,
|
@@ -119,6 +120,10 @@ const isToggleExpansionEnabled =
|
|
119
120
|
}
|
120
121
|
|
121
122
|
const handleExpandDepth = (depth: number) => {
|
123
|
+
if (onExpandByDepthClick) {
|
124
|
+
const flatRows = table?.getRowModel().flatRows
|
125
|
+
onExpandByDepthClick(depth, flatRows)
|
126
|
+
}
|
122
127
|
const updated = updateExpandAndCollapseState(
|
123
128
|
table.getRowModel(),
|
124
129
|
expanded,
|
@@ -169,7 +174,9 @@ const isToggleExpansionEnabled =
|
|
169
174
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
170
175
|
)}
|
171
176
|
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
172
|
-
<Dropdown
|
177
|
+
<Dropdown className="expand-by-depth-dropdown-wrapper"
|
178
|
+
options={expandByDepth}
|
179
|
+
>
|
173
180
|
<DropdownTrigger className="gray-icon toggle-all-icon">
|
174
181
|
<Icon icon={displayIcon(toggleExpansionIcon)[0]} />
|
175
182
|
</DropdownTrigger>
|
@@ -130,8 +130,12 @@
|
|
130
130
|
box-sizing: border-box !important;
|
131
131
|
}
|
132
132
|
}
|
133
|
+
.expand-by-depth-dropdown-wrapper {
|
134
|
+
position: unset !important;
|
135
|
+
}
|
133
136
|
.expand-by-depth-dropdown {
|
134
|
-
|
137
|
+
width: unset !important;
|
138
|
+
text-align: left;
|
135
139
|
}
|
136
140
|
}
|
137
141
|
|
@@ -39,6 +39,7 @@ type AdvancedTableProps = {
|
|
39
39
|
enableToggleExpansion?: "all" | "header" | "none"
|
40
40
|
expandedControl?: GenericObject
|
41
41
|
expandByDepth?: { [key: string]: string | number }
|
42
|
+
onExpandByDepthClick?: (arg: number, arg1: any) => void
|
42
43
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
43
44
|
id?: string
|
44
45
|
initialLoadingRowsCount?: number
|
@@ -75,6 +76,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
75
76
|
enableToggleExpansion = "header",
|
76
77
|
expandedControl,
|
77
78
|
expandByDepth,
|
79
|
+
onExpandByDepthClick,
|
78
80
|
htmlOptions = {},
|
79
81
|
id,
|
80
82
|
initialLoadingRowsCount = 10,
|
@@ -291,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
291
293
|
isActionBarVisible={isActionBarVisible}
|
292
294
|
isFullscreen={isFullscreen}
|
293
295
|
loading={loading}
|
296
|
+
onExpandByDepthClick={onExpandByDepthClick}
|
294
297
|
responsive={responsive}
|
295
298
|
selectableRows={selectableRows}
|
296
299
|
setExpanded={setExpanded}
|
@@ -6,4 +6,5 @@ The `expandByDepth` prop enables users to expand or collapse table rows by speci
|
|
6
6
|
|
7
7
|
**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
|
8
8
|
|
9
|
+
If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
|
9
10
|
|
@@ -97,7 +97,7 @@
|
|
97
97
|
}
|
98
98
|
}
|
99
99
|
|
100
|
-
& > [class^=pb_phone_number_input]:not(:first-child) {
|
100
|
+
& > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
|
101
101
|
.text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
|
102
102
|
border-bottom-left-radius: 0;
|
103
103
|
border-top-left-radius: 0;
|
@@ -243,4 +243,8 @@
|
|
243
243
|
padding-left: calc(var(--iti-flag-width) + 1px);
|
244
244
|
}
|
245
245
|
}
|
246
|
+
|
247
|
+
&:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
|
248
|
+
align-self: baseline;
|
249
|
+
}
|
246
250
|
}
|
@@ -1,12 +1,16 @@
|
|
1
|
-
import React from 'react'
|
1
|
+
import React, {useState} from 'react'
|
2
2
|
|
3
3
|
import FormGroup from '../_form_group'
|
4
4
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
5
5
|
import Select from '../../pb_select/_select'
|
6
6
|
import TextInput from '../../pb_text_input/_text_input'
|
7
7
|
import Flex from '../../pb_flex/_flex'
|
8
|
+
import Passphrase from '../../pb_passphrase/_passphrase'
|
8
9
|
|
9
10
|
const FormGroupSelect = (props) => {
|
11
|
+
const [input, setInput] = useState("");
|
12
|
+
const handleChange = (e) => setInput(e.target.value);
|
13
|
+
|
10
14
|
const options = [
|
11
15
|
{ value: 'Country' },
|
12
16
|
{ value: 'Pop' },
|
@@ -63,6 +67,20 @@ const FormGroupSelect = (props) => {
|
|
63
67
|
{...props}
|
64
68
|
/>
|
65
69
|
</FormGroup>
|
70
|
+
<FormGroup>
|
71
|
+
<Select
|
72
|
+
blankSelection="Phone"
|
73
|
+
options={phoneOptions}
|
74
|
+
{...props}
|
75
|
+
/>
|
76
|
+
<Passphrase
|
77
|
+
id="my-passphrase"
|
78
|
+
label=""
|
79
|
+
onChange={handleChange}
|
80
|
+
value={input}
|
81
|
+
{...props}
|
82
|
+
/>
|
83
|
+
</FormGroup>
|
66
84
|
</Flex>
|
67
85
|
)
|
68
86
|
}
|
@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
84
84
|
'single-line': singleLine,
|
85
85
|
'no-hover': disableHover,
|
86
86
|
'sticky-header': sticky,
|
87
|
-
'sticky-left-column': stickyLeftColumn,
|
88
|
-
'sticky-right-column': stickyRightColumn,
|
87
|
+
'sticky-left-column': stickyLeftColumn.length,
|
88
|
+
'sticky-right-column': stickyRightColumn.length,
|
89
89
|
'striped': striped,
|
90
90
|
'header-borderless': headerStyle === 'borderless',
|
91
91
|
'header-floating': headerStyle === 'floating',
|
@@ -25,7 +25,7 @@ type TextInputProps = {
|
|
25
25
|
name: string,
|
26
26
|
label: string,
|
27
27
|
mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
|
28
|
-
onChange: (e: React.FormEvent<HTMLInputElement
|
28
|
+
onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
|
29
29
|
placeholder: string,
|
30
30
|
required?: boolean,
|
31
31
|
type: string,
|
@@ -102,10 +102,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
102
102
|
|
103
103
|
let cursorPosition = e.target.selectionStart;
|
104
104
|
const isAtEnd = cursorPosition === inputValue.length;
|
105
|
-
|
105
|
+
|
106
106
|
const formattedValue = INPUTMASKS[mask].format(inputValue)
|
107
|
+
|
108
|
+
let sanitizedValue = formattedValue;
|
109
|
+
if (INPUTMASKS[mask].sanitize) {
|
110
|
+
sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
|
111
|
+
}
|
112
|
+
|
107
113
|
e.target.value = formattedValue
|
108
|
-
|
114
|
+
|
109
115
|
// Keep cursor position
|
110
116
|
if (!isAtEnd) {
|
111
117
|
// Account for extra characters (e.g., commas added/removed in currency)
|
@@ -116,9 +122,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
116
122
|
}
|
117
123
|
e.target.selectionStart = e.target.selectionEnd = cursorPosition
|
118
124
|
}
|
125
|
+
|
126
|
+
onChange(e, sanitizedValue);
|
127
|
+
} else {
|
128
|
+
onChange(e)
|
119
129
|
}
|
120
|
-
|
121
|
-
onChange(e)
|
122
130
|
}
|
123
131
|
|
124
132
|
const childInput = children ? children.type === "input" : undefined
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import TextInput from '../../pb_text_input/_text_input'
|
4
|
+
|
5
|
+
const TextInputSanitize = (props) => {
|
6
|
+
const ref = React.createRef()
|
7
|
+
|
8
|
+
const [currency, setCurrency] = useState('')
|
9
|
+
const [sanitizedCurrency, setSanitizedCurrency] = useState('')
|
10
|
+
const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
|
11
|
+
setCurrency(target.value)
|
12
|
+
setSanitizedCurrency(sanitizedValue);
|
13
|
+
}
|
14
|
+
|
15
|
+
const [creditCard, setCreditCard] = useState('')
|
16
|
+
const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
|
17
|
+
const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
|
18
|
+
setCreditCard(target.value)
|
19
|
+
setSanitizedCreditCard(sanitizedValue);
|
20
|
+
}
|
21
|
+
|
22
|
+
const [ssn, setSSN] = useState('')
|
23
|
+
const [sanitizedSSN, setSanitizedSSN] = useState('')
|
24
|
+
const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
|
25
|
+
setSSN(target.value)
|
26
|
+
setSanitizedSSN(sanitizedValue);
|
27
|
+
}
|
28
|
+
|
29
|
+
return (
|
30
|
+
<div>
|
31
|
+
<TextInput
|
32
|
+
label="Currency"
|
33
|
+
mask="currency"
|
34
|
+
onChange={handleOnChangeSanitizeCurrency}
|
35
|
+
placeholder="Enter Amount"
|
36
|
+
ref={ref}
|
37
|
+
value={currency}
|
38
|
+
{...props}
|
39
|
+
/>
|
40
|
+
|
41
|
+
{currency !== "" && (
|
42
|
+
<React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
|
43
|
+
)}
|
44
|
+
<br />
|
45
|
+
{sanitizedCurrency !== "" && (
|
46
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
|
47
|
+
)}
|
48
|
+
|
49
|
+
<br />
|
50
|
+
<br />
|
51
|
+
|
52
|
+
<TextInput
|
53
|
+
label="Credit Card"
|
54
|
+
mask="creditCard"
|
55
|
+
onChange={handleOnChangeSanitizeCC}
|
56
|
+
placeholder="Enter Card"
|
57
|
+
ref={ref}
|
58
|
+
value={creditCard}
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
|
62
|
+
{creditCard !== "" && (
|
63
|
+
<React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
|
64
|
+
)}
|
65
|
+
<br />
|
66
|
+
{sanitizedCreditCard !== "" && (
|
67
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
|
68
|
+
)}
|
69
|
+
|
70
|
+
<br />
|
71
|
+
<br />
|
72
|
+
|
73
|
+
<TextInput
|
74
|
+
label="SSN"
|
75
|
+
mask="ssn"
|
76
|
+
onChange={handleOnChangeSanitizeSSN}
|
77
|
+
placeholder="Enter Amount"
|
78
|
+
ref={ref}
|
79
|
+
value={ssn}
|
80
|
+
{...props}
|
81
|
+
/>
|
82
|
+
|
83
|
+
{ssn !== "" && (
|
84
|
+
<React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
|
85
|
+
)}
|
86
|
+
<br />
|
87
|
+
{sanitizedSSN !== "" && (
|
88
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
|
89
|
+
)}
|
90
|
+
</div>
|
91
|
+
)
|
92
|
+
}
|
93
|
+
|
94
|
+
export default TextInputSanitize
|
@@ -0,0 +1 @@
|
|
1
|
+
When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
|
@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
|
|
6
6
|
export { default as TextInputInline } from './_text_input_inline.jsx'
|
7
7
|
export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
|
8
8
|
export { default as TextInputMask } from './_text_input_mask.jsx'
|
9
|
+
export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
|
@@ -3,6 +3,7 @@ type InputMask = {
|
|
3
3
|
formatDefaultValue: (value: string) => string
|
4
4
|
pattern: string
|
5
5
|
placeholder: string
|
6
|
+
sanitize?: (value: string) => string;
|
6
7
|
}
|
7
8
|
|
8
9
|
type InputMaskDictionary = {
|
@@ -73,35 +74,41 @@ export const INPUTMASKS: InputMaskDictionary = {
|
|
73
74
|
// eslint-disable-next-line no-useless-escape
|
74
75
|
pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
|
75
76
|
placeholder: '$0.00',
|
77
|
+
sanitize: (value: string) => value.replace(/[$,]/g, ''),
|
76
78
|
},
|
77
79
|
zipCode: {
|
78
80
|
format: formatBasicPostal,
|
79
81
|
formatDefaultValue: formatBasicPostal,
|
80
82
|
pattern: '\\d{5}',
|
81
83
|
placeholder: '12345',
|
84
|
+
sanitize: (value: string) => value,
|
82
85
|
},
|
83
86
|
postalCode: {
|
84
87
|
format: formatExtendedPostal,
|
85
88
|
formatDefaultValue: formatExtendedPostal,
|
86
89
|
pattern: '\\d{5}-\\d{4}',
|
87
90
|
placeholder: '12345-6789',
|
91
|
+
sanitize: (value: string) => value.replace(/-/g, ''),
|
88
92
|
},
|
89
93
|
ssn: {
|
90
94
|
format: formatSSN,
|
91
95
|
formatDefaultValue: formatSSN,
|
92
96
|
pattern: '\\d{3}-\\d{2}-\\d{4}',
|
93
97
|
placeholder: '123-45-6789',
|
98
|
+
sanitize: (value: string) => value.replace(/-/g, ''),
|
94
99
|
},
|
95
100
|
creditCard: {
|
96
101
|
format: formatCreditCard,
|
97
102
|
formatDefaultValue: formatCreditCard,
|
98
103
|
pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
|
99
104
|
placeholder: '1234 5678 9012 3456',
|
105
|
+
sanitize: (value: string) => value.replace(/\s/g, ''),
|
100
106
|
},
|
101
107
|
cvv: {
|
102
108
|
format: formatCVV,
|
103
109
|
formatDefaultValue: formatCVV,
|
104
110
|
pattern: '\\d{3,4}',
|
105
111
|
placeholder: '123',
|
112
|
+
sanitize: (value: string) => value,
|
106
113
|
},
|
107
|
-
}
|
114
|
+
}
|