@telus-uds/components-web 4.19.2 → 4.19.3
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.
- package/CHANGELOG.md +11 -1
- package/lib/cjs/DatePicker/CalendarContainer.js +3 -2
- package/lib/cjs/DatePicker/DatePicker.js +1 -0
- package/lib/esm/DatePicker/CalendarContainer.js +3 -2
- package/lib/esm/DatePicker/DatePicker.js +1 -0
- package/package.json +3 -3
- package/src/DatePicker/CalendarContainer.jsx +3 -2
- package/src/DatePicker/DatePicker.jsx +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-web
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 16 Apr 2026 21:04:33 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 4.19.3
|
|
8
|
+
|
|
9
|
+
Thu, 16 Apr 2026 21:04:33 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- `DatePicker`: Remove z-index from inline variant (david.melara1@telus.com)
|
|
14
|
+
- Bump @telus-uds/components-base to v3.30.0
|
|
15
|
+
- Bump @telus-uds/system-theme-tokens to v4.21.0
|
|
16
|
+
|
|
7
17
|
## 4.19.2
|
|
8
18
|
|
|
9
19
|
Mon, 06 Apr 2026 21:25:56 GMT
|
|
@@ -16,6 +16,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
|
|
|
16
16
|
})(_ref => {
|
|
17
17
|
let {
|
|
18
18
|
daySize,
|
|
19
|
+
isInline = false,
|
|
19
20
|
remainingTokens,
|
|
20
21
|
calendarMonthFontTokens,
|
|
21
22
|
calendarDayDefaultHeight,
|
|
@@ -26,7 +27,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
|
|
|
26
27
|
return `
|
|
27
28
|
${_reactDatesCss.default}
|
|
28
29
|
> div {
|
|
29
|
-
z-index: 1000;
|
|
30
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
30
31
|
}
|
|
31
32
|
.SingleDatePicker,
|
|
32
33
|
.SingleDatePickerInput {
|
|
@@ -38,7 +39,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
|
|
|
38
39
|
border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
|
|
39
40
|
border-radius: ${remainingTokens.singleDatePickerRadius}px;
|
|
40
41
|
padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
|
|
41
|
-
z-index: 1000;
|
|
42
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
42
43
|
}
|
|
43
44
|
.DateInput {
|
|
44
45
|
width: 100%;
|
|
@@ -339,6 +339,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
|
|
|
339
339
|
calendarMonthFontTokens: calendarMonthFontTokens,
|
|
340
340
|
calendarWeekFontTokens: calendarWeekFontTokens,
|
|
341
341
|
defaultFontTokens: defaultFontTokens,
|
|
342
|
+
isInline: inline,
|
|
342
343
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDates.DayPickerSingleDateController, {
|
|
343
344
|
date: inputDate,
|
|
344
345
|
onDateChange: onChange,
|
|
@@ -10,6 +10,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
10
10
|
})(_ref => {
|
|
11
11
|
let {
|
|
12
12
|
daySize,
|
|
13
|
+
isInline = false,
|
|
13
14
|
remainingTokens,
|
|
14
15
|
calendarMonthFontTokens,
|
|
15
16
|
calendarDayDefaultHeight,
|
|
@@ -20,7 +21,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
20
21
|
return `
|
|
21
22
|
${defaultReactDatesCss}
|
|
22
23
|
> div {
|
|
23
|
-
z-index: 1000;
|
|
24
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
24
25
|
}
|
|
25
26
|
.SingleDatePicker,
|
|
26
27
|
.SingleDatePickerInput {
|
|
@@ -32,7 +33,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
32
33
|
border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
|
|
33
34
|
border-radius: ${remainingTokens.singleDatePickerRadius}px;
|
|
34
35
|
padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
|
|
35
|
-
z-index: 1000;
|
|
36
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
36
37
|
}
|
|
37
38
|
.DateInput {
|
|
38
39
|
width: 100%;
|
|
@@ -332,6 +332,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
|
|
|
332
332
|
calendarMonthFontTokens: calendarMonthFontTokens,
|
|
333
333
|
calendarWeekFontTokens: calendarWeekFontTokens,
|
|
334
334
|
defaultFontTokens: defaultFontTokens,
|
|
335
|
+
isInline: inline,
|
|
335
336
|
children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
|
|
336
337
|
date: inputDate,
|
|
337
338
|
onDateChange: onChange,
|
package/package.json
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
],
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@gorhom/portal": "^1.0.14",
|
|
8
|
-
"@telus-uds/components-base": "^3.
|
|
8
|
+
"@telus-uds/components-base": "^3.30.0",
|
|
9
9
|
"@telus-uds/system-constants": "^3.0.0",
|
|
10
|
-
"@telus-uds/system-theme-tokens": "^4.
|
|
10
|
+
"@telus-uds/system-theme-tokens": "^4.21.0",
|
|
11
11
|
"fscreen": "^1.2.0",
|
|
12
12
|
"lodash.omit": "^4.5.0",
|
|
13
13
|
"lodash.throttle": "^4.1.1",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"skip": true
|
|
83
83
|
},
|
|
84
84
|
"types": "types/index.d.ts",
|
|
85
|
-
"version": "4.19.
|
|
85
|
+
"version": "4.19.3"
|
|
86
86
|
}
|
|
@@ -7,6 +7,7 @@ import defaultReactDatesCss from './reactDatesCss'
|
|
|
7
7
|
const CalendarContainer = styled.div(
|
|
8
8
|
({
|
|
9
9
|
daySize,
|
|
10
|
+
isInline = false,
|
|
10
11
|
remainingTokens,
|
|
11
12
|
calendarMonthFontTokens,
|
|
12
13
|
calendarDayDefaultHeight,
|
|
@@ -16,7 +17,7 @@ const CalendarContainer = styled.div(
|
|
|
16
17
|
}) => `
|
|
17
18
|
${defaultReactDatesCss}
|
|
18
19
|
> div {
|
|
19
|
-
z-index: 1000;
|
|
20
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
20
21
|
}
|
|
21
22
|
.SingleDatePicker,
|
|
22
23
|
.SingleDatePickerInput {
|
|
@@ -30,7 +31,7 @@ const CalendarContainer = styled.div(
|
|
|
30
31
|
padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
|
|
31
32
|
remainingTokens.singleDatePickerLeftRight
|
|
32
33
|
}px;
|
|
33
|
-
z-index: 1000;
|
|
34
|
+
z-index: ${isInline ? 'auto' : 1000};
|
|
34
35
|
}
|
|
35
36
|
.DateInput {
|
|
36
37
|
width: 100%;
|
|
@@ -329,6 +329,7 @@ const DatePicker = React.forwardRef(
|
|
|
329
329
|
calendarMonthFontTokens={calendarMonthFontTokens}
|
|
330
330
|
calendarWeekFontTokens={calendarWeekFontTokens}
|
|
331
331
|
defaultFontTokens={defaultFontTokens}
|
|
332
|
+
isInline={inline}
|
|
332
333
|
>
|
|
333
334
|
<DayPickerSingleDateController
|
|
334
335
|
date={inputDate}
|