@telus-uds/components-web 2.21.2 → 2.22.0
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 +13 -2
- package/lib/Badge/Badge.js +2 -14
- package/lib/Badge/index.js +0 -3
- package/lib/BlockQuote/BlockQuote.js +4 -25
- package/lib/BlockQuote/index.js +0 -3
- package/lib/Breadcrumbs/Breadcrumbs.js +9 -36
- package/lib/Breadcrumbs/Item/Item.js +15 -25
- package/lib/Breadcrumbs/index.js +0 -2
- package/lib/Callout/Callout.js +2 -24
- package/lib/Callout/index.js +0 -3
- package/lib/Card/Card.js +15 -29
- package/lib/Card/CardContent.js +5 -18
- package/lib/Card/CardFooter.js +7 -19
- package/lib/Card/index.js +0 -3
- package/lib/Countdown/Countdown.js +5 -24
- package/lib/Countdown/Segment.js +3 -15
- package/lib/Countdown/index.js +0 -3
- package/lib/Countdown/types.js +2 -7
- package/lib/Countdown/useCountdown.js +0 -7
- package/lib/DatePicker/CalendarContainer.js +0 -5
- package/lib/DatePicker/DatePicker.js +9 -61
- package/lib/DatePicker/dictionary.js +0 -8
- package/lib/DatePicker/index.js +0 -3
- package/lib/DatePicker/reactDatesCss.js +0 -2
- package/lib/Disclaimer/Disclaimer.js +5 -14
- package/lib/Disclaimer/index.js +0 -2
- package/lib/ExpandCollapseMini/ExpandCollapseMini.js +6 -17
- package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js +12 -25
- package/lib/ExpandCollapseMini/index.js +0 -3
- package/lib/Footnote/Footnote.js +17 -63
- package/lib/Footnote/FootnoteLink.js +3 -24
- package/lib/Footnote/index.js +0 -4
- package/lib/IconButton/IconButton.js +4 -14
- package/lib/IconButton/index.js +0 -3
- package/lib/Image/Image.js +5 -24
- package/lib/Image/index.js +0 -3
- package/lib/List/List.js +0 -2
- package/lib/List/ListItem.js +0 -8
- package/lib/List/index.js +0 -4
- package/lib/NavigationBar/NavigationBar.js +10 -35
- package/lib/NavigationBar/NavigationItem.js +5 -17
- package/lib/NavigationBar/NavigationSubMenu.js +3 -19
- package/lib/NavigationBar/collapseItems.js +6 -9
- package/lib/NavigationBar/index.js +0 -3
- package/lib/NavigationBar/resolveItemSelection.js +2 -3
- package/lib/OptimizeImage/OptimizeImage.js +6 -27
- package/lib/OptimizeImage/index.js +0 -3
- package/lib/OptimizeImage/utils/getFallbackUrl.js +0 -4
- package/lib/OptimizeImage/utils/getOptimizedUrl.js +0 -8
- package/lib/OptimizeImage/utils/hasWebpSupport.js +1 -5
- package/lib/OptimizeImage/utils/index.js +0 -4
- package/lib/OptimizeImage/utils/isSvgUrl.js +0 -1
- package/lib/OrderedList/Item.js +4 -21
- package/lib/OrderedList/ItemBase.js +2 -9
- package/lib/OrderedList/OrderedList.js +11 -22
- package/lib/OrderedList/OrderedListBase.js +3 -13
- package/lib/OrderedList/index.js +0 -4
- package/lib/Paragraph/Paragraph.js +3 -18
- package/lib/Paragraph/index.js +0 -3
- package/lib/PreviewCard/AuthorDate.js +1 -10
- package/lib/PreviewCard/PreviewCard.js +15 -35
- package/lib/PreviewCard/index.js +0 -3
- package/lib/PriceLockup/PriceLockup.js +78 -75
- package/lib/PriceLockup/index.js +0 -3
- package/lib/PriceLockup/tokens.js +0 -2
- package/lib/Progress/ProgressBar.js +5 -16
- package/lib/Progress/index.js +0 -4
- package/lib/QuantitySelector/QuantitySelector.js +8 -42
- package/lib/QuantitySelector/SideButton.js +4 -11
- package/lib/QuantitySelector/index.js +0 -3
- package/lib/QuantitySelector/styles.js +0 -6
- package/lib/ResponsiveImage/ResponsiveImage.js +5 -20
- package/lib/ResponsiveImage/index.js +0 -3
- package/lib/Ribbon/Ribbon.js +4 -20
- package/lib/Ribbon/index.js +0 -3
- package/lib/SkeletonProvider/SkeletonImage.js +0 -10
- package/lib/SkeletonProvider/SkeletonProvider.js +4 -22
- package/lib/SkeletonProvider/SkeletonTypography.js +0 -10
- package/lib/SkeletonProvider/index.js +0 -3
- package/lib/Span/Span.js +3 -17
- package/lib/Span/index.js +0 -3
- package/lib/Spinner/Spinner.js +11 -39
- package/lib/Spinner/SpinnerContent.js +2 -18
- package/lib/Spinner/index.js +0 -3
- package/lib/StoryCard/StoryCard.js +11 -31
- package/lib/StoryCard/index.js +0 -3
- package/lib/Table/Body.js +0 -6
- package/lib/Table/Cell.js +4 -24
- package/lib/Table/Header.js +0 -9
- package/lib/Table/Row.js +0 -8
- package/lib/Table/SubHeading.js +0 -9
- package/lib/Table/Table.js +5 -23
- package/lib/Table/index.js +0 -8
- package/lib/TermsAndConditions/ExpandCollapse.js +4 -14
- package/lib/TermsAndConditions/TermsAndConditions.js +7 -29
- package/lib/TermsAndConditions/index.js +0 -2
- package/lib/Testimonial/Testimonial.js +2 -26
- package/lib/Testimonial/index.js +0 -3
- package/lib/Toast/Toast.js +4 -25
- package/lib/Toast/index.js +0 -3
- package/lib/Video/ControlBar/ControlBar.js +2 -25
- package/lib/Video/ControlBar/Controls/VideoButton/VideoButton.js +4 -17
- package/lib/Video/ControlBar/Controls/VideoMenu/VideoMenu.js +4 -20
- package/lib/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js +12 -26
- package/lib/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js +8 -23
- package/lib/Video/MiddleControlButton/MiddleControlButton.js +2 -12
- package/lib/Video/Video.js +122 -194
- package/lib/Video/index.js +0 -3
- package/lib/VideoPicker/VideoPicker.js +6 -32
- package/lib/VideoPicker/VideoPickerPlayer.js +2 -10
- package/lib/VideoPicker/VideoPickerThumbnail.js +7 -28
- package/lib/VideoPicker/VideoSlider.js +7 -17
- package/lib/VideoPicker/index.js +0 -3
- package/lib/VideoPicker/videoPropType.js +2 -8
- package/lib/WaffleGrid/WaffleGrid.js +11 -28
- package/lib/WaffleGrid/index.js +0 -3
- package/lib/WebPortal/WebPortal.js +1 -5
- package/lib/WebPortal/index.js +0 -3
- package/lib/WebVideo/WebVideo.js +4 -30
- package/lib/WebVideo/index.js +0 -3
- package/lib/baseExports.js +6 -1
- package/lib/index.js +0 -49
- package/lib/shared/FullBleedContent/FullBleedContent.js +5 -17
- package/lib/shared/FullBleedContent/getFullBleedBorderRadius.js +0 -11
- package/lib/shared/FullBleedContent/index.js +0 -5
- package/lib/shared/FullBleedContent/useFullBleedContentProps.js +1 -12
- package/lib/shared/VideoSplash/SplashButton/SplashButton.js +2 -12
- package/lib/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js +7 -23
- package/lib/shared/VideoSplash/VideoSplash.js +4 -17
- package/lib/shared/VideoSplash/helpers.js +0 -6
- package/lib/utils/index.js +0 -9
- package/lib/utils/logger.js +0 -6
- package/lib/utils/media.js +2 -11
- package/lib/utils/renderStructuredContent.js +14 -31
- package/lib/utils/ssr.js +0 -6
- package/lib/utils/transforms.js +0 -2
- package/lib/utils/useOverlaidPosition.js +6 -28
- package/lib/utils/useTypographyTheme.js +4 -5
- package/lib-module/Badge/Badge.js +2 -5
- package/lib-module/BlockQuote/BlockQuote.js +4 -15
- package/lib-module/Breadcrumbs/Breadcrumbs.js +9 -25
- package/lib-module/Breadcrumbs/Item/Item.js +15 -12
- package/lib-module/Callout/Callout.js +2 -16
- package/lib-module/Card/Card.js +14 -17
- package/lib-module/Card/CardContent.js +5 -8
- package/lib-module/Card/CardFooter.js +7 -9
- package/lib-module/Countdown/Countdown.js +6 -11
- package/lib-module/Countdown/Segment.js +6 -8
- package/lib-module/Countdown/types.js +2 -1
- package/lib-module/Countdown/useCountdown.js +0 -6
- package/lib-module/DatePicker/CalendarContainer.js +3 -1
- package/lib-module/DatePicker/DatePicker.js +9 -39
- package/lib-module/DatePicker/dictionary.js +0 -8
- package/lib-module/Disclaimer/Disclaimer.js +5 -4
- package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js +6 -8
- package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js +13 -19
- package/lib-module/Footnote/Footnote.js +17 -41
- package/lib-module/Footnote/FootnoteLink.js +3 -12
- package/lib-module/IconButton/IconButton.js +4 -6
- package/lib-module/Image/Image.js +5 -14
- package/lib-module/NavigationBar/NavigationBar.js +10 -20
- package/lib-module/NavigationBar/NavigationItem.js +5 -5
- package/lib-module/NavigationBar/NavigationSubMenu.js +3 -8
- package/lib-module/NavigationBar/collapseItems.js +6 -8
- package/lib-module/NavigationBar/resolveItemSelection.js +2 -2
- package/lib-module/OptimizeImage/OptimizeImage.js +6 -16
- package/lib-module/OptimizeImage/utils/getFallbackUrl.js +0 -1
- package/lib-module/OptimizeImage/utils/getOptimizedUrl.js +0 -5
- package/lib-module/OptimizeImage/utils/hasWebpSupport.js +1 -5
- package/lib-module/OrderedList/Item.js +4 -7
- package/lib-module/OrderedList/ItemBase.js +2 -3
- package/lib-module/OrderedList/OrderedList.js +11 -9
- package/lib-module/OrderedList/OrderedListBase.js +3 -3
- package/lib-module/Paragraph/Paragraph.js +3 -8
- package/lib-module/PreviewCard/AuthorDate.js +1 -4
- package/lib-module/PreviewCard/PreviewCard.js +16 -19
- package/lib-module/PriceLockup/PriceLockup.js +78 -57
- package/lib-module/Progress/ProgressBar.js +7 -8
- package/lib-module/QuantitySelector/QuantitySelector.js +8 -30
- package/lib-module/QuantitySelector/SideButton.js +4 -6
- package/lib-module/ResponsiveImage/ResponsiveImage.js +5 -12
- package/lib-module/Ribbon/Ribbon.js +4 -9
- package/lib-module/SkeletonProvider/SkeletonImage.js +0 -5
- package/lib-module/SkeletonProvider/SkeletonProvider.js +4 -12
- package/lib-module/SkeletonProvider/SkeletonTypography.js +0 -5
- package/lib-module/Span/Span.js +3 -7
- package/lib-module/Spinner/Spinner.js +11 -24
- package/lib-module/Spinner/SpinnerContent.js +2 -8
- package/lib-module/StoryCard/StoryCard.js +12 -17
- package/lib-module/Table/Body.js +0 -2
- package/lib-module/Table/Cell.js +4 -14
- package/lib-module/Table/Header.js +0 -2
- package/lib-module/Table/Row.js +0 -2
- package/lib-module/Table/SubHeading.js +0 -2
- package/lib-module/Table/Table.js +5 -6
- package/lib-module/TermsAndConditions/ExpandCollapse.js +4 -2
- package/lib-module/TermsAndConditions/TermsAndConditions.js +7 -9
- package/lib-module/Testimonial/Testimonial.js +2 -11
- package/lib-module/Toast/Toast.js +4 -15
- package/lib-module/Video/ControlBar/ControlBar.js +2 -9
- package/lib-module/Video/ControlBar/Controls/VideoButton/VideoButton.js +4 -8
- package/lib-module/Video/ControlBar/Controls/VideoMenu/VideoMenu.js +4 -8
- package/lib-module/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js +12 -13
- package/lib-module/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js +8 -10
- package/lib-module/Video/MiddleControlButton/MiddleControlButton.js +2 -3
- package/lib-module/Video/Video.js +122 -173
- package/lib-module/VideoPicker/VideoPicker.js +6 -15
- package/lib-module/VideoPicker/VideoPickerPlayer.js +2 -3
- package/lib-module/VideoPicker/VideoPickerThumbnail.js +7 -13
- package/lib-module/VideoPicker/VideoSlider.js +6 -9
- package/lib-module/VideoPicker/videoPropType.js +2 -1
- package/lib-module/WaffleGrid/WaffleGrid.js +11 -15
- package/lib-module/WebPortal/WebPortal.js +1 -1
- package/lib-module/WebVideo/WebVideo.js +4 -15
- package/lib-module/baseExports.js +3 -2
- package/lib-module/index.js +0 -1
- package/lib-module/shared/FullBleedContent/FullBleedContent.js +5 -10
- package/lib-module/shared/FullBleedContent/getFullBleedBorderRadius.js +0 -10
- package/lib-module/shared/FullBleedContent/useFullBleedContentProps.js +1 -11
- package/lib-module/shared/VideoSplash/SplashButton/SplashButton.js +2 -3
- package/lib-module/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js +7 -12
- package/lib-module/shared/VideoSplash/VideoSplash.js +4 -4
- package/lib-module/utils/logger.js +2 -2
- package/lib-module/utils/media.js +2 -9
- package/lib-module/utils/renderStructuredContent.js +14 -25
- package/lib-module/utils/ssr.js +0 -4
- package/lib-module/utils/useOverlaidPosition.js +8 -27
- package/lib-module/utils/useTypographyTheme.js +4 -4
- package/package.json +3 -3
- package/src/PriceLockup/PriceLockup.jsx +36 -11
- package/src/baseExports.js +1 -0
- package/src/index.js +0 -1
- package/lib/Modal/Modal.js +0 -146
- package/lib/Modal/ModalContent.js +0 -203
- package/lib/Modal/index.js +0 -13
- package/lib-module/Modal/Modal.js +0 -132
- package/lib-module/Modal/ModalContent.js +0 -181
- package/lib-module/Modal/index.js +0 -2
- package/src/Modal/Modal.jsx +0 -121
- package/src/Modal/ModalContent.jsx +0 -167
- package/src/Modal/index.js +0 -3
|
@@ -4,67 +4,42 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
|
|
15
|
-
|
|
16
11
|
require("react-dates/initialize");
|
|
17
|
-
|
|
18
12
|
var _SingleDatePicker = _interopRequireDefault(require("react-dates/lib/components/SingleDatePicker"));
|
|
19
|
-
|
|
20
13
|
var _DayPickerSingleDateController = _interopRequireDefault(require("react-dates/lib/components/DayPickerSingleDateController"));
|
|
21
|
-
|
|
22
14
|
var _componentsBase = require("@telus-uds/components-base");
|
|
23
|
-
|
|
24
15
|
var _moment = _interopRequireDefault(require("moment"));
|
|
25
|
-
|
|
26
16
|
var _lodash = require("lodash");
|
|
27
|
-
|
|
28
17
|
var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
|
|
29
|
-
|
|
30
18
|
var _dictionary = _interopRequireDefault(require("./dictionary"));
|
|
31
|
-
|
|
32
19
|
var _utils = require("../utils");
|
|
33
|
-
|
|
34
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
35
|
-
|
|
36
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
37
|
-
|
|
38
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
39
|
-
|
|
40
23
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
41
|
-
|
|
42
24
|
const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
|
|
43
25
|
const dateFormat = 'DD / MM / YYYY';
|
|
44
26
|
const dateFormatWithoutSpaces = 'DD/MM/YYYY';
|
|
45
|
-
|
|
46
27
|
const getResponsiveDaySize = function () {
|
|
47
28
|
let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
48
29
|
let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
|
|
49
|
-
|
|
50
30
|
if (viewport === 'xs') {
|
|
51
31
|
return inline ? undefined : 36;
|
|
52
32
|
}
|
|
53
|
-
|
|
54
33
|
return inline ? 60 : 44;
|
|
55
34
|
};
|
|
56
|
-
|
|
57
35
|
const getResponsiveCircleSize = function () {
|
|
58
36
|
let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
59
37
|
let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
|
|
60
|
-
|
|
61
38
|
if (viewport === 'xs') {
|
|
62
39
|
return 26;
|
|
63
40
|
}
|
|
64
|
-
|
|
65
41
|
return inline ? 44 : 26;
|
|
66
42
|
};
|
|
67
|
-
|
|
68
43
|
const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
69
44
|
displayName: "DatePicker__MonthCenterContainer",
|
|
70
45
|
componentId: "components-web__sc-mz8fi3-0"
|
|
@@ -72,7 +47,6 @@ const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConf
|
|
|
72
47
|
display: 'flex',
|
|
73
48
|
justifyContent: 'center'
|
|
74
49
|
});
|
|
75
|
-
|
|
76
50
|
const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
77
51
|
displayName: "DatePicker__DateInputWrapper",
|
|
78
52
|
componentId: "components-web__sc-mz8fi3-1"
|
|
@@ -80,6 +54,7 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
|
80
54
|
display: 'flex',
|
|
81
55
|
flexDirection: 'column'
|
|
82
56
|
});
|
|
57
|
+
|
|
83
58
|
/**
|
|
84
59
|
* Use DatePicker to select a date on a calendar.
|
|
85
60
|
*
|
|
@@ -101,11 +76,8 @@ const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
|
101
76
|
* - Optimized for keyboard interaction and tablet touch
|
|
102
77
|
* - Recommended for viewports greater than or equal to 576px
|
|
103
78
|
*/
|
|
104
|
-
|
|
105
|
-
|
|
106
79
|
const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
107
80
|
var _dictionary$copy;
|
|
108
|
-
|
|
109
81
|
let {
|
|
110
82
|
copy = 'en',
|
|
111
83
|
id,
|
|
@@ -144,25 +116,20 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
144
116
|
setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
|
|
145
117
|
}
|
|
146
118
|
}, [date, inputDate]);
|
|
147
|
-
|
|
148
119
|
const onFocusChange = _ref2 => {
|
|
149
120
|
let {
|
|
150
121
|
focused
|
|
151
122
|
} = _ref2;
|
|
152
|
-
|
|
153
123
|
if (!isClickedInside) {
|
|
154
124
|
setIsFocused(focused);
|
|
155
125
|
}
|
|
156
|
-
|
|
157
126
|
setIsClickedInside(false);
|
|
158
127
|
};
|
|
159
|
-
|
|
160
128
|
const handleFocus = event => {
|
|
161
129
|
if (event.target.tagName === 'INPUT' && !disabled) {
|
|
162
130
|
setIsFocused(true);
|
|
163
131
|
}
|
|
164
132
|
};
|
|
165
|
-
|
|
166
133
|
const handleMouseDown = event => {
|
|
167
134
|
if (!disabled) {
|
|
168
135
|
if (event.target.tagName === 'INPUT') {
|
|
@@ -177,14 +144,12 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
177
144
|
}
|
|
178
145
|
}
|
|
179
146
|
};
|
|
180
|
-
|
|
181
147
|
const onChange = value => {
|
|
182
148
|
setInputDate(value);
|
|
183
149
|
setInputText(value.format(dateFormat));
|
|
184
150
|
setIsFocused(false);
|
|
185
151
|
if (onDateChange) onDateChange(value);
|
|
186
152
|
};
|
|
187
|
-
|
|
188
153
|
const onChangeInput = value => {
|
|
189
154
|
if ((0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
|
|
190
155
|
setInputDate((0, _moment.default)(value, dateFormat));
|
|
@@ -194,23 +159,21 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
194
159
|
setInputText(value);
|
|
195
160
|
}
|
|
196
161
|
};
|
|
197
|
-
|
|
198
162
|
const viewport = (0, _componentsBase.useViewport)();
|
|
199
163
|
const daySize = getResponsiveDaySize(inline, viewport);
|
|
200
164
|
const circleSize = getResponsiveCircleSize(inline, viewport);
|
|
201
|
-
|
|
202
165
|
const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
203
166
|
displayName: "DatePicker__HiddenInputFieldContainer",
|
|
204
167
|
componentId: "components-web__sc-mz8fi3-2"
|
|
205
168
|
})(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
|
|
206
|
-
|
|
207
169
|
const {
|
|
208
170
|
hiddenInputFieldContainerHeight,
|
|
209
171
|
hiddenInputFieldContainerWidth,
|
|
210
172
|
previousIcon,
|
|
211
173
|
nextIcon,
|
|
212
174
|
...remainingTokens
|
|
213
|
-
} = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, {
|
|
175
|
+
} = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, {
|
|
176
|
+
...variant,
|
|
214
177
|
inline
|
|
215
178
|
}, {
|
|
216
179
|
viewport
|
|
@@ -227,7 +190,6 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
227
190
|
fontName: remainingTokens.dayPickerWeekHeaderFontName,
|
|
228
191
|
fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
|
|
229
192
|
});
|
|
230
|
-
|
|
231
193
|
const renderPrevButton = _ref3 => {
|
|
232
194
|
let {
|
|
233
195
|
onClick
|
|
@@ -243,7 +205,6 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
243
205
|
testID: prevTestID
|
|
244
206
|
});
|
|
245
207
|
};
|
|
246
|
-
|
|
247
208
|
const renderNextButton = _ref4 => {
|
|
248
209
|
let {
|
|
249
210
|
onClick
|
|
@@ -259,11 +220,12 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
259
220
|
testID: nextTestID
|
|
260
221
|
});
|
|
261
222
|
};
|
|
262
|
-
|
|
263
|
-
|
|
223
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
|
|
224
|
+
...selectProps(rest),
|
|
264
225
|
daySize: daySize,
|
|
265
226
|
validation: validation,
|
|
266
|
-
remainingTokens: {
|
|
227
|
+
remainingTokens: {
|
|
228
|
+
...remainingTokens
|
|
267
229
|
},
|
|
268
230
|
calendarDayDefaultHeight: circleSize,
|
|
269
231
|
calendarDayDefaultWidth: circleSize,
|
|
@@ -358,85 +320,71 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
358
320
|
});
|
|
359
321
|
});
|
|
360
322
|
DatePicker.displayName = 'DatePicker';
|
|
361
|
-
DatePicker.propTypes = {
|
|
323
|
+
DatePicker.propTypes = {
|
|
324
|
+
...selectedSystemPropTypes,
|
|
362
325
|
tokens: (0, _componentsBase.getTokensPropType)('DatePicker'),
|
|
363
|
-
|
|
364
326
|
/**
|
|
365
327
|
* A unique identifier.
|
|
366
328
|
*/
|
|
367
329
|
id: _propTypes.default.string.isRequired,
|
|
368
|
-
|
|
369
330
|
/**
|
|
370
331
|
* Whether the English or French copy will be used (e.g. for accessibility labels).
|
|
371
332
|
*/
|
|
372
333
|
copy: _propTypes.default.oneOf(['en', 'fr']),
|
|
373
|
-
|
|
374
334
|
/**
|
|
375
335
|
* A Moment instance representing the currently selected date, i.e. `moment()`
|
|
376
336
|
*/
|
|
377
337
|
date: _reactMomentProptypes.default.momentObj,
|
|
378
|
-
|
|
379
338
|
/**
|
|
380
339
|
* A detailed description of validation error/success or additional instructions.
|
|
381
340
|
* Visual variant is determined based on the `validation` prop.
|
|
382
341
|
*/
|
|
383
342
|
feedback: _propTypes.default.string,
|
|
384
|
-
|
|
385
343
|
/**
|
|
386
344
|
* Event triggered every time a new date is clicked on
|
|
387
345
|
* @param {Moment} date The new date that was selected
|
|
388
346
|
*/
|
|
389
347
|
onDateChange: _propTypes.default.func,
|
|
390
|
-
|
|
391
348
|
/**
|
|
392
349
|
* A function determining whether a given date should be disabled
|
|
393
350
|
* @param {Moment} date The date to optionally disable
|
|
394
351
|
* @returns {bool}
|
|
395
352
|
*/
|
|
396
353
|
isDayDisabled: _propTypes.default.func,
|
|
397
|
-
|
|
398
354
|
/**
|
|
399
355
|
* The field label to be displayed above the calendar
|
|
400
356
|
*/
|
|
401
357
|
label: _propTypes.default.string,
|
|
402
|
-
|
|
403
358
|
/**
|
|
404
359
|
* A flag determining if the calendar picker is standalone or an input with overlay
|
|
405
360
|
*/
|
|
406
361
|
inline: _propTypes.default.bool,
|
|
407
|
-
|
|
408
362
|
/**
|
|
409
363
|
* A short description of the expected input.
|
|
410
364
|
*/
|
|
411
365
|
hint: _propTypes.default.string,
|
|
412
|
-
|
|
413
366
|
/**
|
|
414
367
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
415
368
|
*/
|
|
416
369
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
417
|
-
|
|
418
370
|
/**
|
|
419
371
|
* Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
|
|
420
372
|
*/
|
|
421
373
|
tooltip: _propTypes.default.string,
|
|
422
|
-
|
|
423
374
|
/**
|
|
424
375
|
* Use to visually mark an input as valid or invalid.
|
|
425
376
|
*/
|
|
426
377
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
427
|
-
|
|
428
378
|
/**
|
|
429
379
|
* Disable the input which will not open the calendar picker
|
|
430
380
|
*/
|
|
431
381
|
disabled: _propTypes.default.bool,
|
|
432
|
-
|
|
433
382
|
/**
|
|
434
383
|
* A unique identifier for the previous icon button located on the datepicker.
|
|
435
384
|
* This is for automation testing purposes.
|
|
436
385
|
* Will be added as a `data-testid-prev` attribute for example.
|
|
437
386
|
*/
|
|
438
387
|
prevTestID: _propTypes.default.string,
|
|
439
|
-
|
|
440
388
|
/**
|
|
441
389
|
* A unique identifier for the next icon button located on the datepicker.
|
|
442
390
|
* This is for automation testing purposes.
|
|
@@ -40,56 +40,48 @@ const weekDays = {
|
|
|
40
40
|
Fr: 'Ven',
|
|
41
41
|
Sa: 'Sam'
|
|
42
42
|
};
|
|
43
|
-
|
|
44
43
|
const chooseAvailableStartDate = _ref => {
|
|
45
44
|
let {
|
|
46
45
|
date
|
|
47
46
|
} = _ref;
|
|
48
47
|
return `Choisir ${date}. Disponible.`;
|
|
49
48
|
};
|
|
50
|
-
|
|
51
49
|
const chooseAvailableEndDate = _ref2 => {
|
|
52
50
|
let {
|
|
53
51
|
date
|
|
54
52
|
} = _ref2;
|
|
55
53
|
return `Non disponible. ${date}`;
|
|
56
54
|
};
|
|
57
|
-
|
|
58
55
|
const chooseAvailableDate = _ref3 => {
|
|
59
56
|
let {
|
|
60
57
|
date
|
|
61
58
|
} = _ref3;
|
|
62
59
|
return date;
|
|
63
60
|
};
|
|
64
|
-
|
|
65
61
|
const dateIsUnavailable = _ref4 => {
|
|
66
62
|
let {
|
|
67
63
|
date
|
|
68
64
|
} = _ref4;
|
|
69
65
|
return `Not available. ${date}`;
|
|
70
66
|
};
|
|
71
|
-
|
|
72
67
|
const dateIsSelected = _ref5 => {
|
|
73
68
|
let {
|
|
74
69
|
date
|
|
75
70
|
} = _ref5;
|
|
76
71
|
return `Choisie. ${date}`;
|
|
77
72
|
};
|
|
78
|
-
|
|
79
73
|
const dateIsSelectedAsStartDate = _ref6 => {
|
|
80
74
|
let {
|
|
81
75
|
date
|
|
82
76
|
} = _ref6;
|
|
83
77
|
return `Choisie comme date de début. ${date}`;
|
|
84
78
|
};
|
|
85
|
-
|
|
86
79
|
const dateIsSelectedAsEndDate = _ref7 => {
|
|
87
80
|
let {
|
|
88
81
|
date
|
|
89
82
|
} = _ref7;
|
|
90
83
|
return `Choisie comme date de fin. ${date}`;
|
|
91
84
|
};
|
|
92
|
-
|
|
93
85
|
const dictionary = {
|
|
94
86
|
en: undefined,
|
|
95
87
|
// uses react-dates defaults
|
package/lib/DatePicker/index.js
CHANGED
|
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _DatePicker = _interopRequireDefault(require("./DatePicker"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
var _default = _DatePicker.default;
|
|
13
10
|
exports.default = _default;
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _styledComponents = require("styled-components");
|
|
9
|
-
|
|
10
8
|
const defaultReactDatesCss = /*#__PURE__*/(0, _styledComponents.css)([".PresetDateRangePicker_panel{padding:0 22px 11px;}.PresetDateRangePicker_button{position:relative;height:100%;text-align:center;background:0 0;border:2px solid #00a699;color:#00a699;padding:4px 12px;margin-right:8px;font:inherit;font-weight:700;line-height:normal;overflow:visible;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;}.PresetDateRangePicker_button:active{outline:0;}.PresetDateRangePicker_button__selected{color:#fff;background:#00a699;}.SingleDatePickerInput{display:inline-block;background-color:#fff;position:absolute;top:-55px;}.SingleDatePickerInput__disabled{background-color:#f2f2f2;}.SingleDatePickerInput__block{display:block;}.SingleDatePickerInput__showClearDate{padding-right:30px;}.SingleDatePickerInput_clearDate{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover{background:#dbdbdb;border-radius:50%;}.SingleDatePickerInput_clearDate__small{padding:6px;}.SingleDatePickerInput_clearDate__hide{visibility:hidden;}.SingleDatePickerInput_clearDate_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle;}.SingleDatePickerInput_clearDate_svg__small{height:9px;}.SingleDatePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px;}.SingleDatePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle;}.SingleDatePicker{position:relative;display:inline-block;}.SingleDatePicker__block{display:block;}.SingleDatePicker_picker{z-index:1;background-color:#fff;position:absolute;}.SingleDatePicker_picker__rtl{direction:rtl;}.SingleDatePicker_picker__directionLeft{left:0;}.SingleDatePicker_picker__directionRight{right:0;}.SingleDatePicker_picker__portal{background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;height:100%;width:100%;}.SingleDatePicker_picker__fullScreenPortal{background-color:#fff;}.SingleDatePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2;}.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none;}.SingleDatePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd;}.DayPickerKeyboardShortcuts_buttonReset{background:0 0;border:0;border-radius:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer;font-size:14px;}.DayPickerKeyboardShortcuts_buttonReset:active{outline:0;}.DayPickerKeyboardShortcuts_show{width:33px;height:26px;position:absolute;z-index:2;}.DayPickerKeyboardShortcuts_show::before{content:'';display:block;position:absolute;}.DayPickerKeyboardShortcuts_show__bottomRight{bottom:0;right:0;}.DayPickerKeyboardShortcuts_show__bottomRight::before{border-top:26px solid transparent;border-right:33px solid #00a699;bottom:0;right:0;}.DayPickerKeyboardShortcuts_show__bottomRight:hover::before{border-right:33px solid #008489;}.DayPickerKeyboardShortcuts_show__topRight{top:0;right:0;}.DayPickerKeyboardShortcuts_show__topRight::before{border-bottom:26px solid transparent;border-right:33px solid #00a699;top:0;right:0;}.DayPickerKeyboardShortcuts_show__topRight:hover::before{border-right:33px solid #008489;}.DayPickerKeyboardShortcuts_show__topLeft{top:0;left:0;}.DayPickerKeyboardShortcuts_show__topLeft::before{border-bottom:26px solid transparent;border-left:33px solid #00a699;top:0;left:0;}.DayPickerKeyboardShortcuts_show__topLeft:hover::before{border-left:33px solid #008489;}.DayPickerKeyboardShortcuts_showSpan{color:#fff;position:absolute;}.DayPickerKeyboardShortcuts_showSpan__bottomRight{bottom:0;right:5px;}.DayPickerKeyboardShortcuts_showSpan__topRight{top:1px;right:5px;}.DayPickerKeyboardShortcuts_showSpan__topLeft{top:1px;left:5px;}.DayPickerKeyboardShortcuts_panel{overflow:auto;background:#fff;border:1px solid #dbdbdb;border-radius:2px;position:absolute;top:0;bottom:0;right:0;left:0;z-index:2;padding:22px;margin:33px;text-align:left;}.DayPickerKeyboardShortcuts_title{font-size:16px;font-weight:700;margin:0;}.DayPickerKeyboardShortcuts_list{list-style:none;padding:0;font-size:14px;}.DayPickerKeyboardShortcuts_close{position:absolute;right:22px;top:22px;z-index:2;}.DayPickerKeyboardShortcuts_close:active{outline:0;}.DayPickerKeyboardShortcuts_closeSvg{height:15px;width:15px;fill:#cacccd;}.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover{fill:#82888a;}.CalendarDay{-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;}.CalendarDay:active{outline:0;}.CalendarDay__defaultCursor{cursor:default;}.CalendarDay__default{border:1px solid #e4e7e7;color:#484848;background:#fff;}.CalendarDay__default:hover{background:#e4e7e7;border:1px solid #e4e7e7;color:inherit;}.CalendarDay__hovered_offset{background:#f4f5f5;border:1px double #e4e7e7;color:inherit;}.CalendarDay__outside{border:0;background:#fff;color:#484848;}.CalendarDay__outside:hover{border:0;}.CalendarDay__blocked_minimum_nights{background:#fff;border:1px solid #eceeee;color:#cacccd;}.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover{background:#fff;color:#cacccd;}.CalendarDay__highlighted_calendar{background:#ffe8bc;color:#484848;}.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover{background:#ffce71;color:#484848;}.CalendarDay__selected_span{background:#66e2da;border:1px double #33dacd;color:#fff;}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:#33dacd;border:1px double #33dacd;color:#fff;}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:#00a699;border:1px double #00a699;color:#fff;}.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover{background:#b2f1ec;border:1px double #80e8e0;color:#007a87;}.CalendarDay__hovered_span:active{background:#80e8e0;border:1px double #80e8e0;color:#007a87;}.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover{background:#cacccd;border:1px solid #cacccd;color:#82888a;}.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover{background:#fff;border:1px solid #e4e7e7;color:#cacccd;}.CalendarDay__hovered_start_first_possible_end{background:#eceeee;border:1px double #eceeee;}.CalendarDay__hovered_start_blocked_min_nights{background:#eceeee;border:1px double #e4e7e7;}.CalendarMonth{background:#fff;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.CalendarMonth_table{border-collapse:collapse;border-spacing:0;}.CalendarMonth_verticalSpacing{border-collapse:separate;}.CalendarMonth_caption{color:#484848;font-size:18px;text-align:center;padding-top:22px;padding-bottom:37px;caption-side:initial;}.CalendarMonth_caption__verticalScrollable{padding-top:12px;padding-bottom:7px;}.CalendarMonthGrid{background:#fff;text-align:left;z-index:0;}.CalendarMonthGrid__animating{z-index:1;}.CalendarMonthGrid__horizontal{position:absolute;left:9px;}.CalendarMonthGrid__vertical,.CalendarMonthGrid__vertical_scrollable{margin:0 auto;}.CalendarMonthGrid_month__horizontal{display:inline-block;vertical-align:top;min-height:100%;}.CalendarMonthGrid_month__hideForAnimation{position:absolute;z-index:-1;opacity:0;pointer-events:none;}.CalendarMonthGrid_month__hidden{visibility:hidden;}.DayPickerNavigation{position:relative;z-index:2;}.DayPickerNavigation__horizontal{height:0;}.DayPickerNavigation__verticalScrollable_prevNav{z-index:1;}.DayPickerNavigation__verticalDefault{position:absolute;width:100%;height:52px;bottom:0;left:0;}.DayPickerNavigation__verticalScrollableDefault{position:relative;}.DayPickerNavigation__bottom{height:auto;}.DayPickerNavigation__bottomDefault{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}.DayPickerNavigation_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;padding:0;margin:0;}.DayPickerNavigation_button__default{border:1px solid #e4e7e7;background-color:#fff;color:#757575;}.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover{border:1px solid #c4c4c4;}.DayPickerNavigation_button__default:active{background:#f2f2f2;}.DayPickerNavigation_button__disabled{cursor:default;border:1px solid #f2f2f2;}.DayPickerNavigation_button__disabled:focus,.DayPickerNavigation_button__disabled:hover{border:1px solid #f2f2f2;}.DayPickerNavigation_button__disabled:active{background:0 0;}.DayPickerNavigation_button__horizontalDefault{position:absolute;top:18px;line-height:0.78;border-radius:3px;padding:6px 9px;}.DayPickerNavigation_bottomButton__horizontalDefault{position:static;margin:-10px 22px 30px;}.DayPickerNavigation_leftButton__horizontalDefault{left:22px;}.DayPickerNavigation_rightButton__horizontalDefault{right:22px;}.DayPickerNavigation_button__verticalDefault{padding:5px;background:#fff;box-shadow:0 0 5px 2px rgba(0,0,0,0.1);position:relative;display:inline-block;text-align:center;height:100%;width:50%;}.DayPickerNavigation_nextButton__verticalDefault{border-left:0;}.DayPickerNavigation_nextButton__verticalScrollableDefault,.DayPickerNavigation_prevButton__verticalScrollableDefault{width:100%;}.DayPickerNavigation_svg__horizontal{height:19px;width:19px;fill:#82888a;display:block;}.DayPickerNavigation_svg__vertical{height:42px;width:42px;fill:#484848;}.DayPickerNavigation_svg__disabled{fill:#f2f2f2;}.DayPicker{background:#fff;position:relative;text-align:left;}.DayPicker__horizontal{background:#fff;}.DayPicker__verticalScrollable{height:100%;}.DayPicker__hidden{visibility:hidden;}.DayPicker__withBorder{box-shadow:0 2px 6px rgba(0,0,0,0.05),0 0 0 1px rgba(0,0,0,0.07);border-radius:3px;}.DayPicker_portal__horizontal{box-shadow:none;position:absolute;left:50%;top:50%;}.DayPicker_portal__vertical{position:initial;}.DayPicker_focusRegion{outline:0;}.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal{display:inline-block;vertical-align:top;}.DayPicker_weekHeaders{position:relative;}.DayPicker_weekHeaders__horizontal{margin-left:9px;}.DayPicker_weekHeader{color:#757575;position:absolute;top:62px;z-index:2;text-align:left;}.DayPicker_weekHeader__vertical{left:50%;}.DayPicker_weekHeader__verticalScrollable{top:0;display:table-row;border-bottom:1px solid #dbdbdb;background:#fff;margin-left:0;left:0;width:100%;text-align:center;}.DayPicker_weekHeader_ul{list-style:none;margin:1px 0;padding-left:0;padding-right:0;font-size:14px;}.DayPicker_weekHeader_li{display:inline-block;text-align:center;}.DayPicker_transitionContainer{position:relative;overflow:hidden;border-radius:3px;}.DayPicker_transitionContainer__horizontal{-webkit-transition:height 0.2s ease-in-out;-moz-transition:height 0.2s ease-in-out;transition:height 0.2s ease-in-out;}.DayPicker_transitionContainer__vertical{width:100%;}.DayPicker_transitionContainer__verticalScrollable{padding-top:20px;height:100%;position:absolute;top:0;bottom:0;right:0;left:0;overflow-y:scroll;}.DateInput_input{display:none;}.DateInput_screenReaderMessage{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}.DateInput_fang{position:absolute;top:55px;width:20px;height:10px;left:22px;z-index:2;}.DateInput_fangShape{fill:#fff;}.DateInput_fangStroke{stroke:#dbdbdb;fill:transparent;}.DateRangePickerInput{background-color:#fff;display:inline-block;}.DateRangePickerInput__disabled{background:#f2f2f2;}.DateRangePickerInput__withBorder{border-radius:2px;border:1px solid #dbdbdb;}.DateRangePickerInput__rtl{direction:rtl;}.DateRangePickerInput__block{display:block;}.DateRangePickerInput__showClearDates{padding-right:30px;}.DateRangePickerInput_arrow{display:inline-block;vertical-align:middle;color:#484848;}.DateRangePickerInput_arrow_svg{vertical-align:middle;fill:#484848;height:24px;width:24px;}.DateRangePickerInput_clearDates{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}.DateRangePickerInput_clearDates__small{padding:6px;}.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover{background:#dbdbdb;border-radius:50%;}.DateRangePickerInput_clearDates__hide{visibility:hidden;}.DateRangePickerInput_clearDates_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle;}.DateRangePickerInput_clearDates_svg__small{height:9px;}.DateRangePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px;}.DateRangePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle;}.DateRangePicker{position:relative;display:inline-block;}.DateRangePicker__block{display:block;}.DateRangePicker_picker{z-index:1;background-color:#fff;position:absolute;}.DateRangePicker_picker__rtl{direction:rtl;}.DateRangePicker_picker__directionLeft{left:0;}.DateRangePicker_picker__directionRight{right:0;}.DateRangePicker_picker__portal{background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;height:100%;width:100%;}.DateRangePicker_picker__fullScreenPortal{background-color:#fff;}.DateRangePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2;}.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none;}.DateRangePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd;}"]);
|
|
11
9
|
var _default = defaultReactDatesCss;
|
|
12
10
|
exports.default = _default;
|
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
var _componentsBase = require("@telus-uds/components-base");
|
|
15
|
-
|
|
16
11
|
var _utils = require("../utils");
|
|
17
|
-
|
|
18
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
14
|
const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
|
|
23
|
-
|
|
24
15
|
const StyledDisclaimer = /*#__PURE__*/_styledComponents.default.p.withConfig({
|
|
25
16
|
displayName: "Disclaimer__StyledDisclaimer",
|
|
26
17
|
componentId: "components-web__sc-1l4xf7u-0"
|
|
@@ -43,25 +34,25 @@ const StyledDisclaimer = /*#__PURE__*/_styledComponents.default.p.withConfig({
|
|
|
43
34
|
...tokens
|
|
44
35
|
};
|
|
45
36
|
});
|
|
37
|
+
|
|
46
38
|
/**
|
|
47
39
|
* Use Disclaimer to display singular legal statement and must be displayed
|
|
48
40
|
* immediately adjacent to the related, originating content.
|
|
49
41
|
*/
|
|
50
|
-
|
|
51
|
-
|
|
52
42
|
const Disclaimer = _ref2 => {
|
|
53
43
|
let {
|
|
54
44
|
children,
|
|
55
45
|
...rest
|
|
56
46
|
} = _ref2;
|
|
57
47
|
const themeTokens = (0, _componentsBase.useThemeTokens)('Disclaimer');
|
|
58
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDisclaimer, {
|
|
48
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDisclaimer, {
|
|
49
|
+
...selectProps(rest),
|
|
59
50
|
...themeTokens,
|
|
60
51
|
children: children
|
|
61
52
|
});
|
|
62
53
|
};
|
|
63
|
-
|
|
64
|
-
|
|
54
|
+
Disclaimer.propTypes = {
|
|
55
|
+
...selectedSystemPropTypes,
|
|
65
56
|
tokens: (0, _componentsBase.getTokensPropType)('Disclaimer'),
|
|
66
57
|
children: _propTypes.default.node.isRequired
|
|
67
58
|
};
|
package/lib/Disclaimer/index.js
CHANGED
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _componentsBase = require("@telus-uds/components-base");
|
|
13
|
-
|
|
14
10
|
var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
|
|
15
|
-
|
|
16
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
-
|
|
22
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
-
|
|
24
15
|
const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
25
16
|
let {
|
|
26
17
|
children,
|
|
@@ -29,17 +20,16 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
29
20
|
nativeID,
|
|
30
21
|
...rest
|
|
31
22
|
} = _ref;
|
|
32
|
-
|
|
33
23
|
const handleChange = (openPanels, event) => {
|
|
34
24
|
if (typeof onToggle === 'function') {
|
|
35
25
|
const isOpen = openPanels.length > 0;
|
|
36
26
|
onToggle(event, isOpen);
|
|
37
27
|
}
|
|
38
28
|
};
|
|
39
|
-
|
|
40
29
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
|
|
41
30
|
onChange: handleChange,
|
|
42
|
-
children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
|
|
31
|
+
children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
|
|
32
|
+
...expandProps,
|
|
43
33
|
panelId: "ExpandCollapseMiniPanel",
|
|
44
34
|
variant: {
|
|
45
35
|
mini: true
|
|
@@ -50,7 +40,8 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
50
40
|
borderColor: 'transparent',
|
|
51
41
|
textLine: 'none',
|
|
52
42
|
backgroundColor: 'transparent'
|
|
53
|
-
}
|
|
43
|
+
}
|
|
44
|
+
// TODO refactor
|
|
54
45
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
55
46
|
,
|
|
56
47
|
control: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseMiniControl.default, {
|
|
@@ -64,18 +55,16 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
64
55
|
});
|
|
65
56
|
});
|
|
66
57
|
ExpandCollapseMini.displayName = 'ExpandCollapseMini';
|
|
67
|
-
ExpandCollapseMini.propTypes = {
|
|
68
|
-
|
|
58
|
+
ExpandCollapseMini.propTypes = {
|
|
59
|
+
..._ExpandCollapseMiniControl.default.propTypes,
|
|
69
60
|
/**
|
|
70
61
|
* Function to call on pressing the panel's control, which should open or close the panel.
|
|
71
62
|
*/
|
|
72
63
|
onToggle: _propTypes.default.func,
|
|
73
|
-
|
|
74
64
|
/**
|
|
75
65
|
* ID for DOM element on web
|
|
76
66
|
*/
|
|
77
67
|
nativeID: _propTypes.default.string,
|
|
78
|
-
|
|
79
68
|
/**
|
|
80
69
|
* Children nodes that can be added
|
|
81
70
|
*/
|
|
@@ -4,29 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _componentsBase = require("@telus-uds/components-base");
|
|
13
|
-
|
|
14
10
|
var _utils = require("../utils");
|
|
15
|
-
|
|
16
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
|
|
19
14
|
|
|
20
|
-
|
|
15
|
+
// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
|
|
21
16
|
// and a more appropriate press area, defer interaction handling to it.
|
|
22
|
-
|
|
23
17
|
const presentationOnly = {
|
|
24
18
|
accessibilityRole: null,
|
|
25
19
|
// Treat as regular flow content with the Control
|
|
26
20
|
pointerEvents: 'none',
|
|
27
21
|
// Stop RNW from stopping clicks from bubbling to Control
|
|
28
22
|
focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
|
|
29
|
-
|
|
30
23
|
};
|
|
31
24
|
|
|
32
25
|
const selectLinkTokens = _ref => {
|
|
@@ -43,7 +36,6 @@ const selectLinkTokens = _ref => {
|
|
|
43
36
|
blockFontSize: fontSize
|
|
44
37
|
};
|
|
45
38
|
};
|
|
46
|
-
|
|
47
39
|
const ExpandCollapseMiniControl = _ref2 => {
|
|
48
40
|
let {
|
|
49
41
|
pressableState,
|
|
@@ -58,8 +50,8 @@ const ExpandCollapseMiniControl = _ref2 => {
|
|
|
58
50
|
expanded,
|
|
59
51
|
hover,
|
|
60
52
|
focus
|
|
61
|
-
} = pressableState || {};
|
|
62
|
-
|
|
53
|
+
} = pressableState || {};
|
|
54
|
+
// we only want focus outline when focusing, if user is pressing we don't want the border.
|
|
63
55
|
const {
|
|
64
56
|
outerBorderColor
|
|
65
57
|
} = (0, _componentsBase.useThemeTokens)('Link', {}, {}, {
|
|
@@ -72,33 +64,32 @@ const ExpandCollapseMiniControl = _ref2 => {
|
|
|
72
64
|
} = (0, _componentsBase.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
|
|
73
65
|
expanded,
|
|
74
66
|
focus
|
|
75
|
-
});
|
|
67
|
+
});
|
|
76
68
|
|
|
77
|
-
|
|
69
|
+
// Choose hover styles when any part of Control is hoverred
|
|
70
|
+
const appearance = {
|
|
71
|
+
...variant,
|
|
78
72
|
hover
|
|
79
73
|
};
|
|
80
|
-
|
|
81
74
|
const getTokens = linkState => {
|
|
82
75
|
const {
|
|
83
76
|
hover: linkHover
|
|
84
77
|
} = linkState || {};
|
|
85
78
|
const isHovered = hover || linkHover;
|
|
86
|
-
|
|
87
79
|
if (isHovered) {
|
|
88
80
|
// Include vertical icon animation on hover alongside built-in Link theme, the size is size4
|
|
89
81
|
return {
|
|
90
82
|
iconTranslateY: (expanded ? -1 : 1) * size
|
|
91
83
|
};
|
|
92
84
|
}
|
|
93
|
-
|
|
94
85
|
return {};
|
|
95
86
|
};
|
|
96
|
-
|
|
97
87
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
|
|
98
88
|
variant: appearance,
|
|
99
89
|
icon: icon,
|
|
100
90
|
iconPosition: iconPosition,
|
|
101
|
-
tokens: linkState => ({
|
|
91
|
+
tokens: linkState => ({
|
|
92
|
+
...getTokens(linkState),
|
|
102
93
|
...selectLinkTokens(themeTokens),
|
|
103
94
|
outerBorderColor
|
|
104
95
|
}),
|
|
@@ -107,25 +98,21 @@ const ExpandCollapseMiniControl = _ref2 => {
|
|
|
107
98
|
children: expanded ? expandTitle : collapseTitle
|
|
108
99
|
});
|
|
109
100
|
};
|
|
110
|
-
|
|
111
|
-
|
|
101
|
+
ExpandCollapseMiniControl.propTypes = {
|
|
102
|
+
...selectedSystemPropTypes,
|
|
112
103
|
..._componentsBase.Link.propTypes,
|
|
113
|
-
|
|
114
104
|
/**
|
|
115
105
|
* Optional function to call on pressing the panel's control, in addition to opening or closing the panel
|
|
116
106
|
*/
|
|
117
107
|
onPress: _propTypes.default.func,
|
|
118
|
-
|
|
119
108
|
/**
|
|
120
109
|
* ExpandCollapseMiniControl title when expanded
|
|
121
110
|
*/
|
|
122
111
|
expandTitle: _propTypes.default.string.isRequired,
|
|
123
|
-
|
|
124
112
|
/**
|
|
125
113
|
* ExpandCollapseMiniControl title when collapsed
|
|
126
114
|
*/
|
|
127
115
|
collapseTitle: _propTypes.default.string.isRequired,
|
|
128
|
-
|
|
129
116
|
/**
|
|
130
117
|
* React Native's `Pressable`'s state object
|
|
131
118
|
*/
|
|
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
var _default = _ExpandCollapseMini.default;
|
|
13
10
|
exports.default = _default;
|