1 | import 'core-js/modules/es.function.name';
|
2 | import _extends from '@babel/runtime-corejs2/helpers/extends';
|
3 | import _objectWithoutProperties from '@babel/runtime-corejs2/helpers/objectWithoutProperties';
|
4 | import _taggedTemplateLiteral from '@babel/runtime-corejs2/helpers/taggedTemplateLiteral';
|
5 | import React, { useContext, useState, useRef, Children, useEffect, useReducer } from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import styled, { ThemeContext, css, createGlobalStyle, withTheme, keyframes } from 'styled-components';
|
8 | import _noop from 'lodash/noop';
|
9 | import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
10 | import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
11 | import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
12 | import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
|
13 | import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
|
14 | import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
|
15 | import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
|
16 | import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
17 | import _slicedToArray from '@babel/runtime-corejs2/helpers/slicedToArray';
|
18 | import _defineProperty from '@babel/runtime-corejs2/helpers/defineProperty';
|
19 | import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
20 | import _spliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/splice';
|
21 | import _indexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/index-of';
|
22 | import _toConsumableArray from '@babel/runtime-corejs2/helpers/toConsumableArray';
|
23 | import AnimateHeight from 'react-animate-height';
|
24 | import ReactDOM from 'react-dom';
|
25 | import { Manager, Reference, Popper } from 'react-popper';
|
26 | import Transition from 'react-transition-group/Transition';
|
27 | import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
|
28 | import _setInterval from '@babel/runtime-corejs3/core-js-stable/set-interval';
|
29 | import { RootCloseWrapper, Modal as Modal$1 } from 'react-overlays';
|
30 | import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
31 | import _Object$assign from '@babel/runtime-corejs3/core-js-stable/object/assign';
|
32 | import Modal$1$1 from 'react-modal';
|
33 | import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
|
34 | import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
|
35 | import _findIndex from 'lodash/findIndex';
|
36 | import MaskedInput from 'react-text-mask';
|
37 | import createautoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';
|
38 | import createNumberMask from 'text-mask-addons/dist/createNumberMask';
|
39 | import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
|
40 | import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
|
41 | import _omit from 'lodash/omit';
|
42 | import _pick from 'lodash/pick';
|
43 | import { parse, isValid, format, isAfter, isBefore } from 'date-fns';
|
44 | import ReactDatePicker from 'react-datepicker';
|
45 | import 'core-js/modules/es.object.to-string';
|
46 | import 'core-js/modules/es.regexp.to-string';
|
47 | import _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
|
48 | import _parseInt$1 from 'lodash/parseInt';
|
49 | import _isFinite from 'lodash/isFinite';
|
50 | import _findIndexInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find-index';
|
51 | import formatMessage from 'format-message';
|
52 | import { formatChildren } from 'format-message/react';
|
53 | import 'core-js/modules/es.symbol';
|
54 | import 'core-js/modules/es.symbol.description';
|
55 | import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
|
56 | import _classCallCheck from '@babel/runtime-corejs2/helpers/classCallCheck';
|
57 | import _createClass from '@babel/runtime-corejs2/helpers/createClass';
|
58 | import _possibleConstructorReturn from '@babel/runtime-corejs2/helpers/possibleConstructorReturn';
|
59 | import _getPrototypeOf from '@babel/runtime-corejs2/helpers/getPrototypeOf';
|
60 | import _assertThisInitialized from '@babel/runtime-corejs2/helpers/assertThisInitialized';
|
61 | import _inherits from '@babel/runtime-corejs2/helpers/inherits';
|
62 |
|
63 | var regular = {
|
64 | 'im-icon-accessibility': '600',
|
65 | 'im-icon-add': '601',
|
66 | 'im-icon-add-circle': '602',
|
67 | 'im-icon-agent': '603',
|
68 | 'im-icon-align-center': '604',
|
69 | 'im-icon-align-justify': '605',
|
70 | 'im-icon-align-left': '606',
|
71 | 'im-icon-align-right': '607',
|
72 | 'im-icon-archive': '608',
|
73 | 'im-icon-arrow-down': '609',
|
74 | 'im-icon-arrow-left': '60a',
|
75 | 'im-icon-arrow-right': '60b',
|
76 | 'im-icon-arrow-up': '60c',
|
77 | 'im-icon-asterisk': '60d',
|
78 | 'im-icon-attachment': '60e',
|
79 | 'im-icon-bell': '60f',
|
80 | 'im-icon-bicycle': '610',
|
81 | 'im-icon-bold': '611',
|
82 | 'im-icon-book': '612',
|
83 | 'im-icon-bookmark': '613',
|
84 | 'im-icon-boy': '614',
|
85 | 'im-icon-briefcase': '615',
|
86 | 'im-icon-bullhorn': '616',
|
87 | 'im-icon-calendar': '617',
|
88 | 'im-icon-camera': '618',
|
89 | 'im-icon-certificate': '619',
|
90 | 'im-icon-check-document': '61a',
|
91 | 'im-icon-checkbox': '61b',
|
92 | 'im-icon-checkbox-checked': '61c',
|
93 | 'im-icon-chevron-down': '61d',
|
94 | 'im-icon-chevron-left': '61e',
|
95 | 'im-icon-chevron-right': '61f',
|
96 | 'im-icon-chevron-up': '620',
|
97 | 'im-icon-circle-arrow-down': '621',
|
98 | 'im-icon-circle-arrow-left': '622',
|
99 | 'im-icon-circle-arrow-right': '623',
|
100 | 'im-icon-circle-arrow-up': '624',
|
101 | 'im-icon-cog': '625',
|
102 | 'im-icon-comment': '626',
|
103 | 'im-icon-copy': '627',
|
104 | 'im-icon-cut': '628',
|
105 | 'im-icon-dashboard': '629',
|
106 | 'im-icon-discussion': '62a',
|
107 | 'im-icon-dollar-sign': '62b',
|
108 | 'im-icon-double-chevron-down': '62c',
|
109 | 'im-icon-double-chevron-left': '62d',
|
110 | 'im-icon-double-chevron-right': '62e',
|
111 | 'im-icon-double-chevron-up': '62f',
|
112 | 'im-icon-download': '630',
|
113 | 'im-icon-download-alt': '631',
|
114 | 'im-icon-edit': '632',
|
115 | 'im-icon-edit-document': '633',
|
116 | 'im-icon-element-block': '634',
|
117 | 'im-icon-element-page': '635',
|
118 | 'im-icon-element-section': '636',
|
119 | 'im-icon-envelope': '637',
|
120 | 'im-icon-exclamation': '638',
|
121 | 'im-icon-exclamation-circle': '639',
|
122 | 'im-icon-exclamation-sign': '63a',
|
123 | 'im-icon-export': '63b',
|
124 | 'im-icon-external-link': '63c',
|
125 | 'im-icon-eye-closed': '63d',
|
126 | 'im-icon-eye-open': '63e',
|
127 | 'im-icon-federal': '63f',
|
128 | 'im-icon-file': '640',
|
129 | 'im-icon-file-open': '641',
|
130 | 'im-icon-fill': '642',
|
131 | 'im-icon-film': '643',
|
132 | 'im-icon-fire': '644',
|
133 | 'im-icon-flag-empty': '645',
|
134 | 'im-icon-flag-filled': '646',
|
135 | 'im-icon-flash': '647',
|
136 | 'im-icon-folder-close': '648',
|
137 | 'im-icon-folder-open': '649',
|
138 | 'im-icon-folder-up-level': '64a',
|
139 | 'im-icon-font': '64b',
|
140 | 'im-icon-form-agreement': '64c',
|
141 | 'im-icon-form-checkbox': '64d',
|
142 | 'im-icon-form-dropdown': '64e',
|
143 | 'im-icon-form-number': '64f',
|
144 | 'im-icon-form-radio': '650',
|
145 | 'im-icon-form-text': '651',
|
146 | 'im-icon-form-text-box': '652',
|
147 | 'im-icon-fullscreen': '653',
|
148 | 'im-icon-funnel': '654',
|
149 | 'im-icon-girl': '655',
|
150 | 'im-icon-globe': '656',
|
151 | 'im-icon-hand-down': '657',
|
152 | 'im-icon-hand-left': '658',
|
153 | 'im-icon-hand-right': '659',
|
154 | 'im-icon-hand-up': '65a',
|
155 | 'im-icon-health': '65b',
|
156 | 'im-icon-heart-empty': '65c',
|
157 | 'im-icon-heart-filled': '65d',
|
158 | 'im-icon-history': '65e',
|
159 | 'im-icon-home': '65f',
|
160 | 'im-icon-hourglass': '660',
|
161 | 'im-icon-household': '661',
|
162 | 'im-icon-inbox': '662',
|
163 | 'im-icon-indent-left': '663',
|
164 | 'im-icon-indent-right': '664',
|
165 | 'im-icon-info': '665',
|
166 | 'im-icon-info-circle': '666',
|
167 | 'im-icon-italic': '667',
|
168 | 'im-icon-leaf': '668',
|
169 | 'im-icon-list': '669',
|
170 | 'im-icon-list-numbered': '66a',
|
171 | 'im-icon-list-thumbnails': '66b',
|
172 | 'im-icon-list-unordered': '66c',
|
173 | 'im-icon-lock': '66d',
|
174 | 'im-icon-lock-open': '66e',
|
175 | 'im-icon-log-in': '66f',
|
176 | 'im-icon-log-out': '670',
|
177 | 'im-icon-man': '671',
|
178 | 'im-icon-map-marker': '672',
|
179 | 'im-icon-medical': '673',
|
180 | 'im-icon-menu-btn': '674',
|
181 | 'im-icon-minus': '675',
|
182 | 'im-icon-minus-circle': '676',
|
183 | 'im-icon-move': '677',
|
184 | 'im-icon-new-window': '678',
|
185 | 'im-icon-no-symbol': '679',
|
186 | 'im-icon-non-smoker': '67a',
|
187 | 'im-icon-ok': '67b',
|
188 | 'im-icon-ok-circle': '67c',
|
189 | 'im-icon-options-horizontal': '67d',
|
190 | 'im-icon-options-vertical': '67e',
|
191 | 'im-icon-paragraph': '67f',
|
192 | 'im-icon-paste': '680',
|
193 | 'im-icon-phone': '681',
|
194 | 'im-icon-picture': '682',
|
195 | 'im-icon-piggy-bank': '683',
|
196 | 'im-icon-play-circle': '684',
|
197 | 'im-icon-power': '685',
|
198 | 'im-icon-print': '686',
|
199 | 'im-icon-push-pin': '687',
|
200 | 'im-icon-question': '688',
|
201 | 'im-icon-question-circle': '689',
|
202 | 'im-icon-random': '68a',
|
203 | 'im-icon-read-message': '68b',
|
204 | 'im-icon-redo': '68c',
|
205 | 'im-icon-refresh': '68d',
|
206 | 'im-icon-remove': '68e',
|
207 | 'im-icon-remove-circle': '68f',
|
208 | 'im-icon-repeat': '690',
|
209 | 'im-icon-resize-full': '691',
|
210 | 'im-icon-resize-horizontal': '692',
|
211 | 'im-icon-resize-small': '693',
|
212 | 'im-icon-resize-vertical': '694',
|
213 | 'im-icon-retweet': '695',
|
214 | 'im-icon-road': '696',
|
215 | 'im-icon-rx': '697',
|
216 | 'im-icon-save': '698',
|
217 | 'im-icon-screenshot': '699',
|
218 | 'im-icon-search': '69a',
|
219 | 'im-icon-share': '69b',
|
220 | 'im-icon-shopping-cart': '69c',
|
221 | 'im-icon-smoker': '69d',
|
222 | 'im-icon-sort': '69e',
|
223 | 'im-icon-sort-alpha': '69f',
|
224 | 'im-icon-sort-alpha-reverse': '6a0',
|
225 | 'im-icon-sort-ascending': '6a1',
|
226 | 'im-icon-sort-descending': '6a2',
|
227 | 'im-icon-sort-num': '6a3',
|
228 | 'im-icon-sort-num-reverse': '6a4',
|
229 | 'im-icon-speak-to-expert': '6a5',
|
230 | 'im-icon-star-empty': '6a6',
|
231 | 'im-icon-star-filled': '6a7',
|
232 | 'im-icon-stats': '6a8',
|
233 | 'im-icon-switch': '6a9',
|
234 | 'im-icon-tag': '6aa',
|
235 | 'im-icon-tags': '6ab',
|
236 | 'im-icon-tasks': '6ac',
|
237 | 'im-icon-text-color': '6ad',
|
238 | 'im-icon-text-height': '6ae',
|
239 | 'im-icon-text-size': '6af',
|
240 | 'im-icon-text-width': '6b0',
|
241 | 'im-icon-thumbnails': '6b1',
|
242 | 'im-icon-thumbnails-large': '6b2',
|
243 | 'im-icon-thumbs-down': '6b3',
|
244 | 'im-icon-thumbs-up': '6b4',
|
245 | 'im-icon-time': '6b5',
|
246 | 'im-icon-transfer': '6b6',
|
247 | 'im-icon-trash': '6b7',
|
248 | 'im-icon-umbrella': '6b8',
|
249 | 'im-icon-undo': '6b9',
|
250 | 'im-icon-upload': '6ba',
|
251 | 'im-icon-user': '6bb',
|
252 | 'im-icon-user-shield': '6bc',
|
253 | 'im-icon-users': '6bd',
|
254 | 'im-icon-video': '6be',
|
255 | 'im-icon-voice-check': '6bf',
|
256 | 'im-icon-wallet': '6c0',
|
257 | 'im-icon-woman': '6c1',
|
258 | 'im-icon-wrench': '6c2',
|
259 | 'im-icon-zoom-in': '6c3',
|
260 | 'im-icon-zoom-out': '6c4',
|
261 | 'im-icon-keyhole-shield': '6c5',
|
262 | 'im-icon-security-checked': '6c6'
|
263 | };
|
264 |
|
265 | function _templateObject() {
|
266 | var data = _taggedTemplateLiteral(["\n display: inline-block;\n font-family: indv-mkt-icons !important;\n font-size: ", ";\n font-style: normal;\n font-weight: inherit;\n font-variant: normal;\n line-height: 1;\n speak: none;\n text-decoration: none;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: text-bottom;\n\n &:before {\n content: \"\\e", "\";\n }\n"], ["\n display: inline-block;\n font-family: indv-mkt-icons !important;\n font-size: ", ";\n font-style: normal;\n font-weight: inherit;\n font-variant: normal;\n line-height: 1;\n speak: none;\n text-decoration: none;\n text-transform: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: text-bottom;\n\n &:before {\n content: \"\\\\e", "\";\n }\n"]);
|
267 |
|
268 | _templateObject = function _templateObject() {
|
269 | return data;
|
270 | };
|
271 |
|
272 | return data;
|
273 | }
|
274 | var StyledIcon = styled.i(_templateObject(), function (props) {
|
275 | return props.fontSize;
|
276 | }, function (props) {
|
277 | return props.content;
|
278 | });
|
279 |
|
280 | function Icon(_ref) {
|
281 | var name = _ref.name,
|
282 | size = _ref.size,
|
283 | other = _objectWithoutProperties(_ref, ["name", "size"]);
|
284 |
|
285 | var iconName = "im-icon-".concat(name);
|
286 | var styledIconProps = {
|
287 | content: regular[iconName],
|
288 | fontSize: size !== undefined ? "".concat(size, "px") : 'inherit'
|
289 | };
|
290 | return React.createElement(StyledIcon, _extends({
|
291 | "aria-hidden": true
|
292 | }, styledIconProps, other));
|
293 | }
|
294 |
|
295 | Icon.propTypes = process.env.NODE_ENV !== "production" ? {
|
296 |
|
297 | name: PropTypes.string.isRequired,
|
298 |
|
299 |
|
300 | size: PropTypes.number
|
301 | } : {};
|
302 | Icon.defaultProps = {
|
303 | size: undefined
|
304 | };
|
305 |
|
306 | var useTheme = function useTheme() {
|
307 | return useContext(ThemeContext);
|
308 | };
|
309 |
|
310 | function _templateObject$1() {
|
311 | var data = _taggedTemplateLiteral(["\n position: absolute !important;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n "]);
|
312 |
|
313 | _templateObject$1 = function _templateObject() {
|
314 | return data;
|
315 | };
|
316 |
|
317 | return data;
|
318 | }
|
319 |
|
320 |
|
321 | function screenReaderOnly(Component) {
|
322 | var ScreenReaderOnly = styled(Component)(_templateObject$1());
|
323 | return ScreenReaderOnly;
|
324 | }
|
325 |
|
326 | function _templateObject$2() {
|
327 | var data = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: flex;\n font-weight: bold;\n opacity: 0.2;\n padding: 0;\n\n &:hover,\n &:focus {\n opacity: 0.5;\n }\n"]);
|
328 |
|
329 | _templateObject$2 = function _templateObject() {
|
330 | return data;
|
331 | };
|
332 |
|
333 | return data;
|
334 | }
|
335 | var DismissButtonBase = styled.button(_templateObject$2());
|
336 | var ScreenReaderText = screenReaderOnly('span');
|
337 | var DismissButton = React.forwardRef(function DismissButton(props, ref) {
|
338 | return React.createElement(DismissButtonBase, _extends({
|
339 | "aria-label": "Close",
|
340 | type: "button"
|
341 | }, props, {
|
342 | ref: ref
|
343 | }), React.createElement(Icon, {
|
344 | name: "remove"
|
345 | }), React.createElement(ScreenReaderText, null, "Close"));
|
346 | });
|
347 |
|
348 | function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
349 |
|
350 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
351 |
|
352 | function _templateObject4() {
|
353 | var data = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n border-radius: 2px;\n color: ", ";\n display: flex;\n margin-bottom: 25px;\n padding: 15px;\n\n a {\n color: ", ";\n text-decoration: underline;\n\n &:hover {\n text-decoration: none;\n }\n }\n\n button[aria-expanded] {\n color: ", ";\n }\n"]);
|
354 |
|
355 | _templateObject4 = function _templateObject4() {
|
356 | return data;
|
357 | };
|
358 |
|
359 | return data;
|
360 | }
|
361 |
|
362 | function _templateObject3() {
|
363 | var data = _taggedTemplateLiteral(["\n align-self: center;\n flex-grow: 1;\n word-break: break-word;\n"]);
|
364 |
|
365 | _templateObject3 = function _templateObject3() {
|
366 | return data;
|
367 | };
|
368 |
|
369 | return data;
|
370 | }
|
371 |
|
372 | function _templateObject2() {
|
373 | var data = _taggedTemplateLiteral(["\n align-self: start;\n color: ", ";\n font-weight: normal;\n opacity: 0.8;\n\n i {\n font-size: 27px;\n }\n"]);
|
374 |
|
375 | _templateObject2 = function _templateObject2() {
|
376 | return data;
|
377 | };
|
378 |
|
379 | return data;
|
380 | }
|
381 |
|
382 | function _templateObject$3() {
|
383 | var data = _taggedTemplateLiteral(["\n align-self: start;\n color: ", ";\n display: none;\n\n @media (min-width: ", ") {\n display: inline;\n margin-right: 8px;\n }\n"]);
|
384 |
|
385 | _templateObject$3 = function _templateObject() {
|
386 | return data;
|
387 | };
|
388 |
|
389 | return data;
|
390 | }
|
391 | var NotificationIcon = styled(Icon)(_templateObject$3(), function (props) {
|
392 | return props.iconColor;
|
393 | }, function (props) {
|
394 | return props.theme.screenSize.tablet;
|
395 | });
|
396 | var Dismiss = styled(DismissButton)(_templateObject2(), function (props) {
|
397 | return props.color.textColor;
|
398 | });
|
399 | var ContentWrapper = styled.div(_templateObject3());
|
400 |
|
401 | function NotificationContent(props) {
|
402 | var includeIcon = props.includeIcon,
|
403 | isDismissable = props.isDismissable,
|
404 | onDismiss = props.onDismiss,
|
405 | children = props.children,
|
406 | iconName = props.iconName,
|
407 | iconColor = props.iconColor,
|
408 | color = props.color,
|
409 | dismissNotification = props.dismissNotification;
|
410 |
|
411 | function dismiss() {
|
412 | onDismiss();
|
413 | dismissNotification();
|
414 | }
|
415 |
|
416 | return React.createElement(React.Fragment, null, includeIcon && React.createElement(NotificationIcon, {
|
417 | name: iconName,
|
418 | iconColor: iconColor,
|
419 | size: 28
|
420 | }), React.createElement(ContentWrapper, null, children), isDismissable && React.createElement(Dismiss, {
|
421 | onClick: dismiss,
|
422 | color: color
|
423 | }));
|
424 | }
|
425 |
|
426 | var Notification = styled.div(_templateObject4(), function (props) {
|
427 | return props.variant.bgColor;
|
428 | }, function (props) {
|
429 | return props.variant.textColor;
|
430 | }, function (props) {
|
431 | return props.variant.textColor;
|
432 | }, function (props) {
|
433 | return props.variant.textColor;
|
434 | });
|
435 | function useNotification() {
|
436 | var styleType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'base';
|
437 | return function BaseNotification(_ref) {
|
438 | var role = _ref.role,
|
439 | type = _ref.type,
|
440 | children = _ref.children,
|
441 | rest = _objectWithoutProperties(_ref, ["role", "type", "children"]);
|
442 |
|
443 | var theme = useTheme();
|
444 | var color = theme.notificationStyles[type][styleType];
|
445 | var iconName = theme.validationIconName[type];
|
446 | var iconColor = styleType === 'light' ? theme.colors[type] : theme.colors.white;
|
447 |
|
448 | var notificationContentProps = _objectSpread({
|
449 | color: color,
|
450 | iconName: iconName,
|
451 | iconColor: iconColor
|
452 | }, rest);
|
453 |
|
454 | var _useState = useState(false),
|
455 | _useState2 = _slicedToArray(_useState, 2),
|
456 | isDismissed = _useState2[0],
|
457 | setIsDismissed = _useState2[1];
|
458 |
|
459 | function dismissNotification() {
|
460 | setIsDismissed(true);
|
461 | }
|
462 |
|
463 | return !isDismissed && React.createElement(Notification, {
|
464 | role: role,
|
465 | variant: color
|
466 | }, React.createElement(NotificationContent, _extends({
|
467 | dismissNotification: dismissNotification
|
468 | }, notificationContentProps), children));
|
469 | };
|
470 | }
|
471 |
|
472 | var DefaultNotification = useNotification();
|
473 |
|
474 | function Notification$1(props) {
|
475 | return React.createElement(DefaultNotification, props);
|
476 | }
|
477 |
|
478 | Notification$1.propTypes = process.env.NODE_ENV !== "production" ? {
|
479 |
|
480 | type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
|
481 |
|
482 |
|
483 | includeIcon: PropTypes.bool,
|
484 |
|
485 |
|
486 | isDismissable: PropTypes.bool,
|
487 | role: PropTypes.oneOf(['dialog', 'alert']),
|
488 |
|
489 |
|
490 | onDismiss: PropTypes.func,
|
491 | children: PropTypes.node
|
492 | } : {};
|
493 | Notification$1.defaultProps = {
|
494 | includeIcon: false,
|
495 | isDismissable: false,
|
496 | children: null,
|
497 | role: 'dialog',
|
498 | onDismiss: _noop
|
499 | };
|
500 |
|
501 | var Notification$2 = useNotification('light');
|
502 |
|
503 | function LightNotification(props) {
|
504 | return React.createElement(Notification$2, props);
|
505 | }
|
506 |
|
507 | LightNotification.propTypes = process.env.NODE_ENV !== "production" ? {
|
508 |
|
509 | type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
|
510 |
|
511 |
|
512 | includeIcon: PropTypes.bool,
|
513 |
|
514 |
|
515 | isDismissable: PropTypes.bool,
|
516 | role: PropTypes.oneOf(['dialog', 'alert']),
|
517 |
|
518 |
|
519 | onDismiss: PropTypes.func,
|
520 | children: PropTypes.node
|
521 | } : {};
|
522 | LightNotification.defaultProps = {
|
523 | includeIcon: false,
|
524 | isDismissable: false,
|
525 | children: null,
|
526 | role: 'dialog',
|
527 | onDismiss: _noop
|
528 | };
|
529 |
|
530 | var Notification$3 = useNotification('messageOnly');
|
531 |
|
532 | function MessageNotification(props) {
|
533 | return React.createElement(Notification$3, props);
|
534 | }
|
535 |
|
536 | MessageNotification.propTypes = process.env.NODE_ENV !== "production" ? {
|
537 |
|
538 | type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
|
539 |
|
540 |
|
541 | includeIcon: PropTypes.bool,
|
542 |
|
543 |
|
544 | isDismissable: PropTypes.bool,
|
545 | role: PropTypes.oneOf(['dialog', 'alert']),
|
546 |
|
547 |
|
548 | onDismiss: PropTypes.func,
|
549 | children: PropTypes.node
|
550 | } : {};
|
551 | MessageNotification.defaultProps = {
|
552 | includeIcon: false,
|
553 | isDismissable: false,
|
554 | children: null,
|
555 | role: 'dialog',
|
556 | onDismiss: _noop
|
557 | };
|
558 |
|
559 | var propTypes = process.env.NODE_ENV !== "production" ? {
|
560 | emphasizedText: PropTypes.string,
|
561 | text: PropTypes.string.isRequired
|
562 | } : {};
|
563 | var defaultProps = {
|
564 | emphasizedText: undefined
|
565 | };
|
566 | function InlineMessage(_ref) {
|
567 | var emphasizedText = _ref.emphasizedText,
|
568 | text = _ref.text;
|
569 | return React.createElement("span", null, emphasizedText !== undefined ? React.createElement("strong", null, emphasizedText) : null, ' ', text);
|
570 | }
|
571 | InlineMessage.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
572 | InlineMessage.defaultProps = defaultProps;
|
573 | function Message(_ref2) {
|
574 | var emphasizedText = _ref2.emphasizedText,
|
575 | text = _ref2.text;
|
576 | return React.createElement("span", null, emphasizedText !== undefined ? React.createElement(React.Fragment, null, React.createElement("strong", null, emphasizedText), React.createElement("br", null)) : null, text);
|
577 | }
|
578 | Message.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
579 | Message.defaultProps = defaultProps;
|
580 |
|
581 | var DrawerContext = React.createContext({});
|
582 |
|
583 | function generateAlphaName() {
|
584 | var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
|
585 | var text = '';
|
586 |
|
587 | for (var i = 0; i < 6; i++) {
|
588 | text += possible.charAt(Math.floor(Math.random() * possible.length));
|
589 | }
|
590 |
|
591 | return text;
|
592 | }
|
593 |
|
594 | function useUniqueId(providedId) {
|
595 | var idRef = useRef(providedId || generateAlphaName());
|
596 | return idRef.current;
|
597 | }
|
598 |
|
599 | function _templateObject4$1() {
|
600 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n\n > div {\n border-bottom: 4px solid ", ";\n padding: ", ";\n }\n"]);
|
601 |
|
602 | _templateObject4$1 = function _templateObject4() {
|
603 | return data;
|
604 | };
|
605 |
|
606 | return data;
|
607 | }
|
608 |
|
609 | function _templateObject3$1() {
|
610 | var data = _taggedTemplateLiteral(["\n margin-right: 0.4em;\n position: relative;\n top: -2px;\n"]);
|
611 |
|
612 | _templateObject3$1 = function _templateObject3() {
|
613 | return data;
|
614 | };
|
615 |
|
616 | return data;
|
617 | }
|
618 |
|
619 | function _templateObject2$1() {
|
620 | var data = _taggedTemplateLiteral(["\n background: none;\n border: 0;\n color: ", ";\n cursor: pointer;\n display: flex;\n font-size: 18px;\n justify-content: space-between;\n padding: 10px 15px;\n width: 100%;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n"]);
|
621 |
|
622 | _templateObject2$1 = function _templateObject2() {
|
623 | return data;
|
624 | };
|
625 |
|
626 | return data;
|
627 | }
|
628 |
|
629 | function _templateObject$4() {
|
630 | var data = _taggedTemplateLiteral(["\n border-bottom: 1px solid ", ";\n"]);
|
631 |
|
632 | _templateObject$4 = function _templateObject() {
|
633 | return data;
|
634 | };
|
635 |
|
636 | return data;
|
637 | }
|
638 | var PanelWrapper = styled.div(_templateObject$4(), function (props) {
|
639 | return props.theme.colors.gray3;
|
640 | });
|
641 | var PanelButton = styled.button(_templateObject2$1(), function (props) {
|
642 | return props.theme.colors.primary;
|
643 | }, function (props) {
|
644 | return props.theme.colors.gray2;
|
645 | }, function (props) {
|
646 | return props.theme.brandColors.vbBlue;
|
647 | });
|
648 | var PanelIcon = styled(Icon)(_templateObject3$1());
|
649 | var PanelBody = styled(function (_ref) {
|
650 | var noPadding = _ref.noPadding,
|
651 | rest = _objectWithoutProperties(_ref, ["noPadding"]);
|
652 |
|
653 | return React.createElement(AnimateHeight, rest);
|
654 | })(_templateObject4$1(), function (props) {
|
655 | return props.theme.colors.white;
|
656 | }, function (props) {
|
657 | return props.theme.colors.gray9;
|
658 | }, function (props) {
|
659 | return props.theme.colors.gray3;
|
660 | }, function (props) {
|
661 | return props.noPadding ? '0' : '10px 10px 10px 40px';
|
662 | });
|
663 |
|
664 | function DrawerPanel(props) {
|
665 | var children = props.children,
|
666 | isOpen = props.isOpen,
|
667 | noPadding = props.noPadding,
|
668 | onItemClick = props.onItemClick,
|
669 | title = props.title,
|
670 | titleAside = props.titleAside,
|
671 | other = _objectWithoutProperties(props, ["children", "isOpen", "noPadding", "onItemClick", "title", "titleAside"]);
|
672 |
|
673 | var _React$useContext = React.useContext(DrawerContext),
|
674 | openedIconName = _React$useContext.openedIconName,
|
675 | closedIconName = _React$useContext.closedIconName;
|
676 |
|
677 | var headingAriaId = "".concat(useUniqueId(other.id), "-heading");
|
678 | var regionAriaId = "".concat(useUniqueId(other.id), "-region");
|
679 | return React.createElement(PanelWrapper, other, React.createElement("div", {
|
680 | id: headingAriaId,
|
681 | role: "heading"
|
682 | }, React.createElement(PanelButton, {
|
683 | "aria-expanded": isOpen,
|
684 | "aria-controls": regionAriaId,
|
685 | onClick: function onClick() {
|
686 | return onItemClick();
|
687 | }
|
688 | }, React.createElement("span", null, React.createElement(PanelIcon, {
|
689 | name: isOpen ? openedIconName : closedIconName
|
690 | }), title), titleAside && React.createElement("aside", null, titleAside))), React.createElement(PanelBody, {
|
691 | "aria-labelledby": headingAriaId,
|
692 | duration: 300,
|
693 | height: isOpen ? 'auto' : 0,
|
694 | id: regionAriaId,
|
695 | noPadding: noPadding,
|
696 | role: "region"
|
697 | }, children));
|
698 | }
|
699 |
|
700 | DrawerPanel.propTypes = process.env.NODE_ENV !== "production" ? {
|
701 | children: PropTypes.any.isRequired,
|
702 |
|
703 |
|
704 | title: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,
|
705 |
|
706 |
|
707 | titleAside: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
708 |
|
709 |
|
710 | isOpen: PropTypes.bool,
|
711 |
|
712 |
|
713 | noPadding: PropTypes.bool,
|
714 |
|
715 |
|
716 | onItemClick: PropTypes.func
|
717 | } : {};
|
718 | DrawerPanel.defaultProps = {
|
719 | isOpen: false,
|
720 | noPadding: false,
|
721 | titleAside: undefined,
|
722 | onItemClick: _noop
|
723 | };
|
724 |
|
725 | function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
726 |
|
727 | function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
728 |
|
729 | function _templateObject$5() {
|
730 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border-top: 1px solid ", ";\n box-shadow: 0 1px 1px ", ";\n margin-bottom: 25px;\n"]);
|
731 |
|
732 | _templateObject$5 = function _templateObject() {
|
733 | return data;
|
734 | };
|
735 |
|
736 | return data;
|
737 | }
|
738 | var StyledDrawer = styled.div(_templateObject$5(), function (props) {
|
739 | return props.theme.colors.white;
|
740 | }, function (props) {
|
741 | return props.theme.colors.gray3;
|
742 | }, function (props) {
|
743 | return props.theme.colors.boxShadowLight;
|
744 | });
|
745 |
|
746 | function Drawer(props) {
|
747 | var activeKeys = props.activeKeys,
|
748 | children = props.children,
|
749 | closedIconName = props.closedIconName,
|
750 | isAccordion = props.isAccordion,
|
751 | onActiveKeysChanged = props.onActiveKeysChanged,
|
752 | openedIconName = props.openedIconName,
|
753 | other = _objectWithoutProperties(props, ["activeKeys", "children", "closedIconName", "isAccordion", "onActiveKeysChanged", "openedIconName"]);
|
754 |
|
755 | function _onItemClick(key) {
|
756 | var nextActiveKeys = _toConsumableArray(activeKeys);
|
757 |
|
758 | if (isAccordion) {
|
759 | nextActiveKeys = nextActiveKeys[0] === key ? [] : [key];
|
760 | } else {
|
761 | var index = _indexOfInstanceProperty(nextActiveKeys).call(nextActiveKeys, key);
|
762 |
|
763 | var isOpen = index > -1;
|
764 |
|
765 | if (isOpen) {
|
766 | _spliceInstanceProperty(nextActiveKeys).call(nextActiveKeys, index, 1);
|
767 | } else {
|
768 | nextActiveKeys.push(key);
|
769 | }
|
770 | }
|
771 |
|
772 | onActiveKeysChanged(nextActiveKeys);
|
773 | }
|
774 |
|
775 | return React.createElement(DrawerContext.Provider, {
|
776 | value: {
|
777 | openedIconName: openedIconName,
|
778 | closedIconName: closedIconName
|
779 | }
|
780 | }, React.createElement(StyledDrawer, other, _mapInstanceProperty(Children).call(Children, children, function (child, index) {
|
781 | if (child) {
|
782 |
|
783 | var key = child && child.key || String(index + 1);
|
784 | var isOpen = false;
|
785 |
|
786 | if (isAccordion) {
|
787 | isOpen = activeKeys[0] === key;
|
788 | } else {
|
789 | isOpen = _indexOfInstanceProperty(activeKeys).call(activeKeys, key) > -1;
|
790 | }
|
791 |
|
792 | var childProps = _objectSpread$1({}, child.props, {
|
793 | key: key,
|
794 | isOpen: isOpen,
|
795 | onItemClick: function onItemClick() {
|
796 | return _onItemClick(key);
|
797 | }
|
798 | });
|
799 |
|
800 | return React.cloneElement(child, childProps);
|
801 | }
|
802 |
|
803 | return null;
|
804 | })));
|
805 | }
|
806 |
|
807 | Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
|
808 |
|
809 | activeKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
810 |
|
811 |
|
812 | children: PropTypes.node,
|
813 |
|
814 |
|
815 | closedIconName: PropTypes.string,
|
816 |
|
817 |
|
818 | isAccordion: PropTypes.bool,
|
819 |
|
820 |
|
821 | onActiveKeysChanged: PropTypes.func.isRequired,
|
822 |
|
823 |
|
824 | openedIconName: PropTypes.string
|
825 | } : {};
|
826 | Drawer.defaultProps = {
|
827 | activeKeys: [],
|
828 | isAccordion: false,
|
829 | closedIconName: 'add',
|
830 | openedIconName: 'minus',
|
831 | children: undefined
|
832 | };
|
833 | Drawer.Panel = DrawerPanel;
|
834 |
|
835 | var OrientationContext = React.createContext('stacked');
|
836 |
|
837 | function _templateObject2$2() {
|
838 | var data = _taggedTemplateLiteral(["\n color: ", ";\n flex: 0 0 auto;\n font-size: 21.6px;\n line-height: ", ";\n margin: 0 0 10px 0;\n width: 100%;\n"]);
|
839 |
|
840 | _templateObject2$2 = function _templateObject2() {
|
841 | return data;
|
842 | };
|
843 |
|
844 | return data;
|
845 | }
|
846 |
|
847 | function _templateObject$6() {
|
848 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n margin-bottom: 25px;\n width: 100%;\n\n > *:last-child {\n margin-bottom: 0;\n }\n\n ", ";\n"]);
|
849 |
|
850 | _templateObject$6 = function _templateObject() {
|
851 | return data;
|
852 | };
|
853 |
|
854 | return data;
|
855 | }
|
856 | var FieldsetBase = styled.div(_templateObject$6(), function (props) {
|
857 | return props.orientation === 'inline' && css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
|
858 | });
|
859 | var Legend = styled.div(_templateObject2$2(), function (props) {
|
860 | return props.theme.colors.black;
|
861 | }, function (props) {
|
862 | return props.theme.sizes.baseLineHeight;
|
863 | });
|
864 |
|
865 | function Fieldset(props) {
|
866 | var legendContent = props.legendContent,
|
867 | children = props.children,
|
868 | other = _objectWithoutProperties(props, ["legendContent", "children"]);
|
869 |
|
870 | var legendId = legendContent ? generateAlphaName() : undefined;
|
871 | var orientation = React.useContext(OrientationContext);
|
872 | return React.createElement(FieldsetBase, _extends({
|
873 | role: "group",
|
874 | "aria-labelledby": legendId,
|
875 | orientation: orientation
|
876 | }, other), legendContent && React.createElement(Legend, {
|
877 | id: legendId
|
878 | }, legendContent), children);
|
879 | }
|
880 |
|
881 | Fieldset.propTypes = process.env.NODE_ENV !== "production" ? {
|
882 |
|
883 | legendContent: PropTypes.node,
|
884 | children: PropTypes.node
|
885 | } : {};
|
886 | Fieldset.defaultProps = {
|
887 | legendContent: null,
|
888 | children: undefined
|
889 | };
|
890 | Fieldset.Legend = Legend;
|
891 |
|
892 | function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
893 |
|
894 | function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$2(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$2(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
895 |
|
896 | var Fade = function Fade(_ref) {
|
897 | var children = _ref.children,
|
898 | duration = _ref.duration,
|
899 | opacity = _ref.opacity,
|
900 | otherProps = _objectWithoutProperties(_ref, ["children", "duration", "opacity"]);
|
901 |
|
902 | var transitionStyles = {
|
903 | transition: "opacity ".concat(duration, "ms linear"),
|
904 | opacity: 0
|
905 | };
|
906 | var stateStyles = {
|
907 | entering: {
|
908 | opacity: opacity
|
909 | },
|
910 | entered: {
|
911 | opacity: opacity
|
912 | }
|
913 | };
|
914 | return React.createElement(Transition, _extends({}, otherProps, {
|
915 | timeout: duration
|
916 | }), function (state, innerProps) {
|
917 | return React.cloneElement(children, _objectSpread$2({}, innerProps, {
|
918 | style: _objectSpread$2({}, children.props.style, {}, transitionStyles, {}, stateStyles[state])
|
919 | }));
|
920 | });
|
921 | };
|
922 |
|
923 | Fade.propTypes = process.env.NODE_ENV !== "production" ? {
|
924 | children: PropTypes.any.isRequired,
|
925 | duration: PropTypes.number,
|
926 | opacity: PropTypes.number
|
927 | } : {};
|
928 | Fade.defaultProps = {
|
929 | duration: 150,
|
930 | opacity: 1
|
931 | };
|
932 |
|
933 | function _templateObject$7() {
|
934 | var data = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n box-shadow: none;\n cursor: pointer;\n color: ", ";\n font-size: inherit;\n line-height: ", ";\n padding: 0;\n text-decoration: underline;\n\n &:hover,\n &:focus,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n\n &:active {\n box-shadow: none;\n }\n\n &[disabled]:hover {\n color: ", ";\n text-decoration: underline;\n }\n"]);
|
935 |
|
936 | _templateObject$7 = function _templateObject() {
|
937 | return data;
|
938 | };
|
939 |
|
940 | return data;
|
941 | }
|
942 | var StyledButton = styled.button(_templateObject$7(), function (props) {
|
943 | return props.variant.textColor;
|
944 | }, function (props) {
|
945 | return props.theme.sizes.baseLineHeight;
|
946 | }, function (props) {
|
947 | return props.variant.hoverTextColor;
|
948 | }, function (props) {
|
949 | return props.variant.textColor;
|
950 | });
|
951 | var LinkButton = React.forwardRef(function LinkButton(props, ref) {
|
952 | var children = props.children,
|
953 | styleType = props.styleType,
|
954 | other = _objectWithoutProperties(props, ["children", "styleType"]);
|
955 |
|
956 | var theme = useTheme();
|
957 | var variant = theme.buttonStyles.linkButton.variant[styleType];
|
958 | return React.createElement(StyledButton, _extends({
|
959 | ref: ref,
|
960 | variant: variant,
|
961 | type: "button"
|
962 | }, other), children);
|
963 | });
|
964 | LinkButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
965 | children: PropTypes.node.isRequired,
|
966 |
|
967 |
|
968 | styleType: PropTypes.string
|
969 | } : {};
|
970 | LinkButton.defaultProps = {
|
971 | styleType: 'default'
|
972 | };
|
973 |
|
974 | function _templateObject$8() {
|
975 | var data = _taggedTemplateLiteral(["\n border-bottom: ", ";\n border-bottom-color: ", ";\n line-height: 1;\n text-decoration: none;\n\n &:hover,\n :focus {\n border-bottom: ", ";\n border-bottom-color: ", ";\n }\n"]);
|
976 |
|
977 | _templateObject$8 = function _templateObject() {
|
978 | return data;
|
979 | };
|
980 |
|
981 | return data;
|
982 | }
|
983 | var StyledButton$1 = styled(LinkButton)(_templateObject$8(), function (props) {
|
984 | return !props.suppressUnderline && "1px dashed";
|
985 | }, function (props) {
|
986 | return !props.suppressUnderline && props.variant.textColor;
|
987 | }, function (props) {
|
988 | return !props.suppressUnderline && "1px solid";
|
989 | }, function (props) {
|
990 | return !props.suppressUnderline && props.variant.textColor;
|
991 | });
|
992 | var PopoverLink = React.forwardRef(function PopoverLink(props, ref) {
|
993 | var children = props.children,
|
994 | styleType = props.styleType,
|
995 | suppressUnderline = props.suppressUnderline,
|
996 | other = _objectWithoutProperties(props, ["children", "styleType", "suppressUnderline"]);
|
997 |
|
998 | var theme = useTheme();
|
999 | var variant = theme.buttonStyles.linkButton.variant[styleType];
|
1000 | return React.createElement(StyledButton$1, _extends({
|
1001 | ref: ref,
|
1002 | variant: variant,
|
1003 | suppressUnderline: suppressUnderline
|
1004 | }, other), children);
|
1005 | });
|
1006 | PopoverLink.propTypes = process.env.NODE_ENV !== "production" ? {
|
1007 | children: PropTypes.node.isRequired,
|
1008 |
|
1009 |
|
1010 | styleType: PropTypes.string,
|
1011 |
|
1012 |
|
1013 | suppressUnderline: PropTypes.bool
|
1014 | } : {};
|
1015 | PopoverLink.defaultProps = {
|
1016 | styleType: 'primary',
|
1017 | suppressUnderline: false
|
1018 | };
|
1019 |
|
1020 | function _templateObject11() {
|
1021 | var data = _taggedTemplateLiteral(["\n border-left-color: ", ";\n border-width: 5px 0 5px 5px;\n right: 0;\n"]);
|
1022 |
|
1023 | _templateObject11 = function _templateObject11() {
|
1024 | return data;
|
1025 | };
|
1026 |
|
1027 | return data;
|
1028 | }
|
1029 |
|
1030 | function _templateObject10() {
|
1031 | var data = _taggedTemplateLiteral(["\n border-bottom-color: ", ";\n border-width: 0 5px 5px;\n top: 0;\n"]);
|
1032 |
|
1033 | _templateObject10 = function _templateObject10() {
|
1034 | return data;
|
1035 | };
|
1036 |
|
1037 | return data;
|
1038 | }
|
1039 |
|
1040 | function _templateObject9() {
|
1041 | var data = _taggedTemplateLiteral(["\n border-right-color: ", ";\n border-width: 5px 5px 5px 0;\n left: 0;\n"]);
|
1042 |
|
1043 | _templateObject9 = function _templateObject9() {
|
1044 | return data;
|
1045 | };
|
1046 |
|
1047 | return data;
|
1048 | }
|
1049 |
|
1050 | function _templateObject8() {
|
1051 | var data = _taggedTemplateLiteral(["\n border-top-color: ", ";\n border-width: 5px 5px 0;\n bottom: 0;\n"]);
|
1052 |
|
1053 | _templateObject8 = function _templateObject8() {
|
1054 | return data;
|
1055 | };
|
1056 |
|
1057 | return data;
|
1058 | }
|
1059 |
|
1060 | function _templateObject7() {
|
1061 | var data = _taggedTemplateLiteral(["\n padding: 0 5px;\n"]);
|
1062 |
|
1063 | _templateObject7 = function _templateObject7() {
|
1064 | return data;
|
1065 | };
|
1066 |
|
1067 | return data;
|
1068 | }
|
1069 |
|
1070 | function _templateObject6() {
|
1071 | var data = _taggedTemplateLiteral(["\n padding: 5px 0;\n"]);
|
1072 |
|
1073 | _templateObject6 = function _templateObject6() {
|
1074 | return data;
|
1075 | };
|
1076 |
|
1077 | return data;
|
1078 | }
|
1079 |
|
1080 | function _templateObject5() {
|
1081 | var data = _taggedTemplateLiteral(["\n padding: 0 5px;\n"]);
|
1082 |
|
1083 | _templateObject5 = function _templateObject5() {
|
1084 | return data;
|
1085 | };
|
1086 |
|
1087 | return data;
|
1088 | }
|
1089 |
|
1090 | function _templateObject4$2() {
|
1091 | var data = _taggedTemplateLiteral(["\n padding: 5px 0;\n"]);
|
1092 |
|
1093 | _templateObject4$2 = function _templateObject4() {
|
1094 | return data;
|
1095 | };
|
1096 |
|
1097 | return data;
|
1098 | }
|
1099 |
|
1100 | function _templateObject3$2() {
|
1101 | var data = _taggedTemplateLiteral(["\n border-color: transparent;\n border-style: solid;\n height: 0;\n position: absolute;\n width: 0;\n"]);
|
1102 |
|
1103 | _templateObject3$2 = function _templateObject3() {
|
1104 | return data;
|
1105 | };
|
1106 |
|
1107 | return data;
|
1108 | }
|
1109 |
|
1110 | function _templateObject2$3() {
|
1111 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: 2px;\n color: ", ";\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: 15px;\n line-height: ", ";\n max-width: 250px;\n padding: 3px 8px;\n text-align: left;\n"]);
|
1112 |
|
1113 | _templateObject2$3 = function _templateObject2() {
|
1114 | return data;
|
1115 | };
|
1116 |
|
1117 | return data;
|
1118 | }
|
1119 |
|
1120 | function _templateObject$9() {
|
1121 | var data = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 999;\n"]);
|
1122 |
|
1123 | _templateObject$9 = function _templateObject() {
|
1124 | return data;
|
1125 | };
|
1126 |
|
1127 | return data;
|
1128 | }
|
1129 | var TooltipBase = styled.div(_templateObject$9());
|
1130 | var TooltipInner = styled.div(_templateObject2$3(), function (props) {
|
1131 | return props.theme.colors.softwareBlue;
|
1132 | }, function (props) {
|
1133 | return props.theme.colors.white;
|
1134 | }, function (props) {
|
1135 | return props.theme.sizes.baseLineHeight;
|
1136 | });
|
1137 | var TooltipArrowBase = styled.div(_templateObject3$2());
|
1138 | var TooltipTop = styled(TooltipBase)(_templateObject4$2());
|
1139 | var TooltipRight = styled(TooltipBase)(_templateObject5());
|
1140 | var TooltipBottom = styled(TooltipBase)(_templateObject6());
|
1141 | var TooltipLeft = styled(TooltipBase)(_templateObject7());
|
1142 | var TooltipArrowTop = styled(TooltipArrowBase)(_templateObject8(), function (props) {
|
1143 | return props.theme.colors.softwareBlue;
|
1144 | });
|
1145 | var TooltipArrowRight = styled(TooltipArrowBase)(_templateObject9(), function (props) {
|
1146 | return props.theme.colors.softwareBlue;
|
1147 | });
|
1148 | var TooltipArrowBottom = styled(TooltipArrowBase)(_templateObject10(), function (props) {
|
1149 | return props.theme.colors.softwareBlue;
|
1150 | });
|
1151 | var TooltipArrowLeft = styled(TooltipArrowBase)(_templateObject11(), function (props) {
|
1152 | return props.theme.colors.softwareBlue;
|
1153 | });
|
1154 | var ScreenReaderContent = screenReaderOnly('div');
|
1155 |
|
1156 | function Tooltip(props) {
|
1157 | var _useState = useState(false),
|
1158 | _useState2 = _slicedToArray(_useState, 2),
|
1159 | show = _useState2[0],
|
1160 | setShow = _useState2[1];
|
1161 |
|
1162 | var name = props.name,
|
1163 | disableHover = props.disableHover,
|
1164 | disableFocus = props.disableFocus,
|
1165 | position = props.position,
|
1166 | content = props.content,
|
1167 | styleType = props.styleType,
|
1168 | children = props.children,
|
1169 | other = _objectWithoutProperties(props, ["name", "disableHover", "disableFocus", "position", "content", "styleType", "children"]);
|
1170 |
|
1171 | var TooltipStyled;
|
1172 | var TooltipArrow;
|
1173 | var tooltipId = name ? "es-tooltip__".concat(name) : undefined;
|
1174 |
|
1175 | switch (position) {
|
1176 | case 'right':
|
1177 | TooltipStyled = TooltipRight;
|
1178 | TooltipArrow = TooltipArrowRight;
|
1179 | break;
|
1180 |
|
1181 | case 'bottom':
|
1182 | TooltipStyled = TooltipBottom;
|
1183 | TooltipArrow = TooltipArrowBottom;
|
1184 | break;
|
1185 |
|
1186 | case 'left':
|
1187 | TooltipStyled = TooltipLeft;
|
1188 | TooltipArrow = TooltipArrowLeft;
|
1189 | break;
|
1190 |
|
1191 | default:
|
1192 | TooltipStyled = TooltipTop;
|
1193 | TooltipArrow = TooltipArrowTop;
|
1194 | break;
|
1195 | }
|
1196 |
|
1197 | function showTooltip() {
|
1198 | setShow(true);
|
1199 | }
|
1200 |
|
1201 | function hideTooltip() {
|
1202 | setShow(false);
|
1203 | }
|
1204 |
|
1205 | function toggleShow() {
|
1206 | setShow(!show);
|
1207 | }
|
1208 |
|
1209 | function closeOnEscape(event) {
|
1210 | if (event.keyCode === 27) {
|
1211 | setShow(false);
|
1212 | }
|
1213 | }
|
1214 |
|
1215 | var descriptionId = "".concat(useUniqueId(other.id), "-description");
|
1216 | return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref) {
|
1217 | var ref = _ref.ref;
|
1218 | return React.createElement(PopoverLink, {
|
1219 | ref: ref,
|
1220 | onBlur: hideTooltip,
|
1221 | onFocus: !disableFocus ? showTooltip : undefined,
|
1222 | onMouseEnter: !disableHover ? showTooltip : undefined,
|
1223 | onMouseLeave: !disableHover ? hideTooltip : undefined,
|
1224 | onKeyDown: closeOnEscape,
|
1225 | onClick: toggleShow,
|
1226 | "aria-describedby": descriptionId,
|
1227 | styleType: styleType
|
1228 | }, children);
|
1229 | }), React.createElement(ScreenReaderContent, {
|
1230 | id: descriptionId
|
1231 | }, content), ReactDOM.createPortal(React.createElement(Popper, {
|
1232 | placement: position
|
1233 | }, function (_ref2) {
|
1234 | var ref = _ref2.ref,
|
1235 | style = _ref2.style,
|
1236 | placement = _ref2.placement,
|
1237 | arrowProps = _ref2.arrowProps;
|
1238 | return React.createElement(Fade, {
|
1239 | in: show,
|
1240 | mountOnEnter: true,
|
1241 | unmountOnExit: true
|
1242 | }, React.createElement(TooltipStyled, _extends({
|
1243 | ref: ref,
|
1244 | role: "tooltip",
|
1245 | id: tooltipId,
|
1246 | style: style,
|
1247 | "aria-live": "polite"
|
1248 | }, other), React.createElement(TooltipArrow, {
|
1249 | ref: arrowProps.ref,
|
1250 | style: arrowProps.style
|
1251 | }), React.createElement(TooltipInner, null, content)));
|
1252 | }), document.querySelector('body')));
|
1253 | }
|
1254 |
|
1255 | Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
|
1256 | name: PropTypes.string.isRequired,
|
1257 | children: PropTypes.any.isRequired,
|
1258 |
|
1259 |
|
1260 | content: PropTypes.node.isRequired,
|
1261 |
|
1262 |
|
1263 | position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
1264 |
|
1265 |
|
1266 | disableHover: PropTypes.bool,
|
1267 |
|
1268 |
|
1269 | disableFocus: PropTypes.bool,
|
1270 |
|
1271 |
|
1272 | styleType: PropTypes.string
|
1273 | } : {};
|
1274 | Tooltip.defaultProps = {
|
1275 | position: 'top',
|
1276 | disableHover: false,
|
1277 | disableFocus: false,
|
1278 | styleType: undefined
|
1279 | };
|
1280 |
|
1281 | function _templateObject$a() {
|
1282 | var data = _taggedTemplateLiteral(["\n background: none;\n border: none;\n border-radius: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: block;\n outline: none;\n overflow: visible;\n padding: 0;\n text-decoration: none;\n width: 100%;\n\n @media (min-width: ", ") {\n display: ", ";\n width: ", ";\n }\n\n .es-button__display {\n background-color: ", ";\n border-color: transparent;\n box-shadow: 0 4px 0 0 ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n font-family: inherit;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n min-width: 100px;\n outline: none;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n position: relative;\n text-align: center;\n text-transform: ", ";\n transition: background-color 150ms linear, color 150ms linear;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n &:hover .es-button__display {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &:focus-within {\n box-shadow: 0 2px 4px 4px ", ";\n }\n\n &:active {\n box-shadow: none;\n }\n\n &&:active .es-button__display {\n box-shadow: 0 0 0 0 transparent;\n top: 4px;\n }\n\n &[disabled],\n &[disabled] .es-button__display {\n cursor: not-allowed;\n opacity: 0.65;\n\n > * {\n pointer-events: none;\n }\n }\n\n &[disabled]:hover .es-button__display {\n background-color: ", ";\n }\n"]);
|
1283 |
|
1284 | _templateObject$a = function _templateObject() {
|
1285 | return data;
|
1286 | };
|
1287 |
|
1288 | return data;
|
1289 | }
|
1290 | var StyledButton$2 = styled.button(_templateObject$a(), function (props) {
|
1291 | return props.buttonSize.borderRadius;
|
1292 | }, function (props) {
|
1293 | return props.theme.screenSize.tablet;
|
1294 | }, function (props) {
|
1295 | return props.block ? 'block' : 'inline-block';
|
1296 | }, function (props) {
|
1297 | return props.block ? '100%' : 'auto';
|
1298 | }, function (props) {
|
1299 | return props.variant.bgColor;
|
1300 | }, function (props) {
|
1301 | return props.variant.boxShadowColor;
|
1302 | }, function (props) {
|
1303 | return props.buttonSize.borderRadius;
|
1304 | }, function (props) {
|
1305 | return props.variant.textColor;
|
1306 | }, function (props) {
|
1307 | return props.buttonSize.fontSize;
|
1308 | }, function (props) {
|
1309 | return props.buttonSize.fontWeight || 'normal';
|
1310 | }, function (props) {
|
1311 | return props.buttonSize.lineHeight ? props.buttonSize.lineHeight : props.theme.sizes.baseLineHeight;
|
1312 | }, function (props) {
|
1313 | return props.buttonSize.paddingBottom;
|
1314 | }, function (props) {
|
1315 | return props.buttonSize.paddingSides;
|
1316 | }, function (props) {
|
1317 | return props.buttonSize.paddingSides;
|
1318 | }, function (props) {
|
1319 | return props.buttonSize.paddingTop;
|
1320 | }, function (props) {
|
1321 | return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
|
1322 | }, function (props) {
|
1323 | return props.variant.hoverBgColor;
|
1324 | }, function (props) {
|
1325 | return props.variant.hoverTextColor;
|
1326 | }, function (props) {
|
1327 | return props.theme.colors.inputFocus;
|
1328 | }, function (props) {
|
1329 | return props.variant.bgColor;
|
1330 | });
|
1331 | var Button = React.forwardRef(function Button(props, ref) {
|
1332 | var children = props.children,
|
1333 | styleType = props.styleType,
|
1334 | size = props.size,
|
1335 | block = props.block,
|
1336 | other = _objectWithoutProperties(props, ["children", "styleType", "size", "block"]);
|
1337 |
|
1338 | var theme = useTheme();
|
1339 | var buttonSize = theme.buttonStyles.button.size[size];
|
1340 | var variant = theme.buttonStyles.button.variant[styleType];
|
1341 | return React.createElement(StyledButton$2, _extends({
|
1342 | type: "button",
|
1343 | block: block,
|
1344 | buttonSize: buttonSize,
|
1345 | variant: variant,
|
1346 | ref: ref
|
1347 | }, other), React.createElement("div", {
|
1348 | className: "es-button__display"
|
1349 | }, children));
|
1350 | });
|
1351 | Button.propTypes = process.env.NODE_ENV !== "production" ? {
|
1352 | children: PropTypes.node.isRequired,
|
1353 |
|
1354 |
|
1355 | styleType: PropTypes.string,
|
1356 | size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
|
1357 |
|
1358 |
|
1359 | block: PropTypes.bool
|
1360 | } : {};
|
1361 | Button.defaultProps = {
|
1362 | styleType: 'default',
|
1363 | block: false,
|
1364 | size: 'default'
|
1365 | };
|
1366 |
|
1367 | function _templateObject2$4() {
|
1368 | var data = _taggedTemplateLiteral(["\n position: absolute;\n &::before,\n &::after {\n border: solid transparent;\n content: '';\n position: absolute;\n }\n &[data-placement*='bottom'] {\n top: 0;\n left: 0;\n margin-top: -", "px;\n &::before {\n border-width: ", ";\n border-color: transparent;\n border-bottom-color: ", ";\n margin-left: -", "px;\n }\n &::after {\n border-width: ", ";\n border-color: transparent;\n border-bottom-color: ", ";\n margin-left: -", "px;\n }\n }\n &[data-placement*='top'] {\n &::before {\n border-width: ", "px;\n border-color: transparent;\n border-top-color: ", ";\n margin-left: -", "px;\n }\n &::after {\n border-width: ", "px;\n border-color: transparent;\n border-top-color: ", ";\n margin-left: -", "px;\n }\n }\n &[data-placement*='right'] {\n margin-left: -", "px;\n &::before {\n border-width: ", ";\n border-color: transparent;\n border-right-color: ", ";\n margin-top: -", "px;\n }\n &::after {\n border-width: ", ";\n border-color: transparent;\n border-right-color: ", ";\n margin-top: -", "px;\n }\n }\n &[data-placement*='left'] {\n right: 0;\n &::before {\n border-width: ", "px;\n border-color: transparent;\n border-left-color: ", ";\n margin-top: -", "px;\n }\n &::after {\n border-width: ", "px;\n border-color: transparent;\n border-left-color: ", ";\n margin-top: -", "px;\n }\n }\n"]);
|
1369 |
|
1370 | _templateObject2$4 = function _templateObject2() {
|
1371 | return data;
|
1372 | };
|
1373 |
|
1374 | return data;
|
1375 | }
|
1376 |
|
1377 | function _templateObject$b() {
|
1378 | var data = _taggedTemplateLiteral(["\n border: 1px solid rgba(0, 0, 0, 0.3);\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n border-radius: 2px;\n margin: ", "px;\n max-width: 350px;\n min-width: 270px;\n position: absolute;\n text-align: center;\n z-index: 5;\n"]);
|
1379 |
|
1380 | _templateObject$b = function _templateObject() {
|
1381 | return data;
|
1382 | };
|
1383 |
|
1384 | return data;
|
1385 | }
|
1386 | var PopperBox = styled.div(_templateObject$b(), function (props) {
|
1387 | return props.arrowSize.marginSize;
|
1388 | });
|
1389 | var Arrow = styled.div(_templateObject2$4(), function (props) {
|
1390 | return props.arrowSize.size;
|
1391 | }, function (props) {
|
1392 | return props.arrowSize.bottomBorderWidth;
|
1393 | }, function (props) {
|
1394 | return props.arrowSize.borderColor;
|
1395 | }, function (props) {
|
1396 | return props.arrowSize.borderSize;
|
1397 | }, function (props) {
|
1398 | return props.arrowSize.bottomWidth;
|
1399 | }, function (props) {
|
1400 | return props.hasTitle ? props.theme.colors.popoverHeader : props.theme.colors.white;
|
1401 | }, function (props) {
|
1402 | return props.arrowSize.size;
|
1403 | }, function (props) {
|
1404 | return props.arrowSize.borderSize;
|
1405 | }, function (props) {
|
1406 | return props.arrowSize.borderColor;
|
1407 | }, function (props) {
|
1408 | return props.arrowSize.borderSize;
|
1409 | }, function (props) {
|
1410 | return props.arrowSize.size;
|
1411 | }, function (props) {
|
1412 | return props.theme.colors.white;
|
1413 | }, function (props) {
|
1414 | return props.arrowSize.size;
|
1415 | }, function (props) {
|
1416 | return props.arrowSize.size;
|
1417 | }, function (props) {
|
1418 | return props.arrowSize.rightBorderWidth;
|
1419 | }, function (props) {
|
1420 | return props.arrowSize.borderColor;
|
1421 | }, function (props) {
|
1422 | return props.arrowSize.borderSize;
|
1423 | }, function (props) {
|
1424 | return props.arrowSize.rightWidth;
|
1425 | }, function (props) {
|
1426 | return props.theme.colors.white;
|
1427 | }, function (props) {
|
1428 | return props.arrowSize.size;
|
1429 | }, function (props) {
|
1430 | return props.arrowSize.borderSize;
|
1431 | }, function (props) {
|
1432 | return props.arrowSize.borderColor;
|
1433 | }, function (props) {
|
1434 | return props.arrowSize.borderSize;
|
1435 | }, function (props) {
|
1436 | return props.arrowSize.size;
|
1437 | }, function (props) {
|
1438 | return props.theme.colors.white;
|
1439 | }, function (props) {
|
1440 | return props.arrowSize.size;
|
1441 | });
|
1442 | var arrowSizes = {
|
1443 | sm: {
|
1444 | size: '5',
|
1445 | borderSize: '6',
|
1446 | marginSize: '10',
|
1447 | bottomWidth: '0 5px 5px',
|
1448 | bottomBorderWidth: '0 6px 5px',
|
1449 | rightWidth: '5px 5px 5px 0',
|
1450 | rightBorderWidth: '6px 5px 6px 0',
|
1451 | borderColor: 'rgba(0, 0, 0, 0.3)'
|
1452 | },
|
1453 | md: {
|
1454 | size: '10',
|
1455 | borderSize: '11',
|
1456 | marginSize: '15',
|
1457 | bottomWidth: '0 10px 10px',
|
1458 | bottomBorderWidth: '0 11px 10px',
|
1459 | rightWidth: '10px 10px 10px 0',
|
1460 | rightBorderWidth: '11px 10px 11px 0',
|
1461 | borderColor: 'rgba(0, 0, 0, 0.3)'
|
1462 | },
|
1463 | lg: {
|
1464 | size: '20',
|
1465 | borderSize: '21',
|
1466 | marginSize: '30',
|
1467 | bottomWidth: '0 20px 20px',
|
1468 | bottomBorderWidth: '0 21px 20px',
|
1469 | rightWidth: '20px 20px 20px 0',
|
1470 | rightBorderWidth: '21px 20px 21px 0',
|
1471 | borderColor: 'rgba(0, 0, 0, 0.3)'
|
1472 | },
|
1473 | none: {
|
1474 | size: '0',
|
1475 | borderSize: '0',
|
1476 | marginSize: '10'
|
1477 | }
|
1478 | };
|
1479 |
|
1480 | function getArrowValues(size) {
|
1481 | switch (size) {
|
1482 | case 'sm':
|
1483 | return arrowSizes.sm;
|
1484 |
|
1485 | case 'lg':
|
1486 | return arrowSizes.lg;
|
1487 |
|
1488 | case 'none':
|
1489 | return arrowSizes.none;
|
1490 |
|
1491 | default:
|
1492 | return arrowSizes.md;
|
1493 | }
|
1494 | }
|
1495 |
|
1496 | function Popup(props) {
|
1497 | var name = props.name,
|
1498 | trigger = props.trigger,
|
1499 | children = props.children,
|
1500 | position = props.position,
|
1501 | arrowSize = props.arrowSize,
|
1502 | hasTitle = props.hasTitle,
|
1503 | transitionIn = props.transitionIn,
|
1504 | transitionTimeout = props.transitionTimeout,
|
1505 | disableFlipping = props.disableFlipping,
|
1506 | popperRef = props.popperRef;
|
1507 | var arrowValues = getArrowValues(arrowSize);
|
1508 | return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref) {
|
1509 | var ref = _ref.ref;
|
1510 | return React.createElement("div", {
|
1511 | className: "".concat(name, "-popper__trigger"),
|
1512 | ref: ref
|
1513 | }, trigger);
|
1514 | }), ReactDOM.createPortal(React.createElement(Popper, {
|
1515 | className: "".concat(name, "-popper"),
|
1516 | placement: position,
|
1517 | modifiers: {
|
1518 | preventOverflow: {
|
1519 | boundariesElement: document.body
|
1520 | },
|
1521 | flip: {
|
1522 | enabled: !disableFlipping,
|
1523 | behavior: ['left', 'right', 'top', 'bottom', 'top']
|
1524 | }
|
1525 | },
|
1526 | innerRef: popperRef
|
1527 | }, function (_ref2) {
|
1528 | var ref = _ref2.ref,
|
1529 | style = _ref2.style,
|
1530 | placement = _ref2.placement,
|
1531 | arrowProps = _ref2.arrowProps;
|
1532 | return React.createElement(Fade, {
|
1533 | in: transitionIn,
|
1534 | duration: transitionTimeout,
|
1535 | mountOnEnter: true,
|
1536 | unmountOnExit: true
|
1537 | }, React.createElement(PopperBox, {
|
1538 | ref: ref,
|
1539 | style: style,
|
1540 | arrowSize: arrowValues
|
1541 | }, children, React.createElement(Arrow, {
|
1542 | ref: arrowProps.ref,
|
1543 | "data-placement": placement,
|
1544 | style: arrowProps.style,
|
1545 | arrowSize: arrowValues,
|
1546 | hasTitle: hasTitle
|
1547 | })));
|
1548 | }), document.querySelector('body')));
|
1549 | }
|
1550 |
|
1551 | Popup.propTypes = process.env.NODE_ENV !== "production" ? {
|
1552 | name: PropTypes.string,
|
1553 | trigger: PropTypes.node,
|
1554 | children: PropTypes.node,
|
1555 | position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
1556 | arrowSize: PropTypes.oneOf(['sm', 'lg', 'none', 'default']),
|
1557 | transitionIn: PropTypes.bool,
|
1558 | transitionTimeout: PropTypes.number,
|
1559 | hasTitle: PropTypes.bool,
|
1560 | disableFlipping: PropTypes.bool,
|
1561 | popperRef: PropTypes.func
|
1562 | } : {};
|
1563 | Popup.defaultProps = {
|
1564 | name: '',
|
1565 | trigger: undefined,
|
1566 | children: undefined,
|
1567 | position: 'bottom',
|
1568 | arrowSize: 'default',
|
1569 | transitionIn: false,
|
1570 | transitionTimeout: 150,
|
1571 | hasTitle: false,
|
1572 | disableFlipping: false,
|
1573 | popperRef: undefined
|
1574 | };
|
1575 |
|
1576 | function _templateObject8$1() {
|
1577 | var data = _taggedTemplateLiteral(["\n color: transparent;\n flex: none;\n height: 1px;\n outline: 0;\n width: 1px;\n"]);
|
1578 |
|
1579 | _templateObject8$1 = function _templateObject8() {
|
1580 | return data;
|
1581 | };
|
1582 |
|
1583 | return data;
|
1584 | }
|
1585 |
|
1586 | function _templateObject7$1() {
|
1587 | var data = _taggedTemplateLiteral(["\n color: ", ";\n\n flex: 0 1;\n margin-left: auto;\n padding: 8px;\n"]);
|
1588 |
|
1589 | _templateObject7$1 = function _templateObject7() {
|
1590 | return data;
|
1591 | };
|
1592 |
|
1593 | return data;
|
1594 | }
|
1595 |
|
1596 | function _templateObject6$1() {
|
1597 | var data = _taggedTemplateLiteral(["\n display: inline-block;\n margin: 5px 0;\n width: auto;\n"]);
|
1598 |
|
1599 | _templateObject6$1 = function _templateObject6() {
|
1600 | return data;
|
1601 | };
|
1602 |
|
1603 | return data;
|
1604 | }
|
1605 |
|
1606 | function _templateObject5$1() {
|
1607 | var data = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n text-align: left;\n"]);
|
1608 |
|
1609 | _templateObject5$1 = function _templateObject5() {
|
1610 | return data;
|
1611 | };
|
1612 |
|
1613 | return data;
|
1614 | }
|
1615 |
|
1616 | function _templateObject4$3() {
|
1617 | var data = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n font-size: 18px;\n font-weight: normal;\n line-height: ", ";\n padding: ", ";\n text-align: right;\n"]);
|
1618 |
|
1619 | _templateObject4$3 = function _templateObject4() {
|
1620 | return data;
|
1621 | };
|
1622 |
|
1623 | return data;
|
1624 | }
|
1625 |
|
1626 | function _templateObject3$3() {
|
1627 | var data = _taggedTemplateLiteral(["\n flex: 1 1;\n font-size: 18px;\n margin: 0;\n padding: 8px 14px;\n text-align: left;\n"]);
|
1628 |
|
1629 | _templateObject3$3 = function _templateObject3() {
|
1630 | return data;
|
1631 | };
|
1632 |
|
1633 | return data;
|
1634 | }
|
1635 |
|
1636 | function _templateObject2$5() {
|
1637 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n display: flex;\n justify-content: space-between;\n line-height: ", ";\n outline: none;\n"]);
|
1638 |
|
1639 | _templateObject2$5 = function _templateObject2() {
|
1640 | return data;
|
1641 | };
|
1642 |
|
1643 | return data;
|
1644 | }
|
1645 |
|
1646 | function _templateObject$c() {
|
1647 | var data = _taggedTemplateLiteral(["\n display: inline-block;\n"]);
|
1648 |
|
1649 | _templateObject$c = function _templateObject() {
|
1650 | return data;
|
1651 | };
|
1652 |
|
1653 | return data;
|
1654 | }
|
1655 | var Container = styled.div(_templateObject$c());
|
1656 | var PopoverHeader = styled.div(_templateObject2$5(), function (props) {
|
1657 | return props.hasTitle ? props.theme.colors.popoverHeader : props.theme.colors.white;
|
1658 | }, function (props) {
|
1659 | return props.theme.colors.white;
|
1660 | }, function (props) {
|
1661 | return props.theme.sizes.baseLineHeight;
|
1662 | });
|
1663 | var TitleBar = styled.h3(_templateObject3$3());
|
1664 | var PopoverBody = styled.div(_templateObject4$3(), function (props) {
|
1665 | return props.theme.colors.white;
|
1666 | }, function (props) {
|
1667 | return props.theme.colors.gray9;
|
1668 | }, function (props) {
|
1669 | return props.theme.sizes.baseLineHeight;
|
1670 | }, function (props) {
|
1671 | return props.hasAltCloseWithNoTitle ? '0 14px 8px' : '8px 14px';
|
1672 | });
|
1673 | var PopoverContent = styled.div(_templateObject5$1(), function (props) {
|
1674 | return props.showCloseButton ? '8px' : '0';
|
1675 | });
|
1676 | var PopoverCloseButton = styled(Button)(_templateObject6$1());
|
1677 | var AltCloseButton = styled(DismissButton)(_templateObject7$1(), function (props) {
|
1678 | return props.hasTitle ? props.theme.colors.white : props.theme.colors.black;
|
1679 | });
|
1680 | var CloseHelpText = styled.span(_templateObject8$1());
|
1681 |
|
1682 | function Popover(props) {
|
1683 | var name = props.name,
|
1684 | title = props.title,
|
1685 | content = props.content,
|
1686 | placement = props.placement,
|
1687 | arrowSize = props.arrowSize,
|
1688 | renderTrigger = props.renderTrigger,
|
1689 | hasCloseButton = props.hasCloseButton,
|
1690 | hasAltCloseButton = props.hasAltCloseButton,
|
1691 | disableRootClose = props.disableRootClose,
|
1692 | disableFlipping = props.disableFlipping;
|
1693 | var hasTitle = title !== undefined;
|
1694 | var hasAltCloseWithNoTitle = !hasTitle && hasAltCloseButton;
|
1695 | var showCloseButton = hasCloseButton && !hasAltCloseButton;
|
1696 | var isFirstRun = useRef(true);
|
1697 | var triggerBtnRef = useRef(null);
|
1698 |
|
1699 | var _popperRef = useRef(null);
|
1700 |
|
1701 | var contentRef = useRef(null);
|
1702 | var escMsgRef = useRef(null);
|
1703 | var closeBtnRef = useRef(null);
|
1704 | var timeoutRef = useRef(null);
|
1705 |
|
1706 | var _useState = useState(false),
|
1707 | _useState2 = _slicedToArray(_useState, 2),
|
1708 | isOpen = _useState2[0],
|
1709 | setIsOpen = _useState2[1];
|
1710 |
|
1711 | function toggleShow(event) {
|
1712 | event.preventDefault();
|
1713 | event.stopPropagation();
|
1714 | setIsOpen(!isOpen);
|
1715 | }
|
1716 |
|
1717 | function hidePopover(event) {
|
1718 | if (isOpen) {
|
1719 | if (event.type !== 'click') {
|
1720 | triggerBtnRef.current.focus();
|
1721 | }
|
1722 |
|
1723 | setIsOpen(false);
|
1724 | }
|
1725 | }
|
1726 |
|
1727 | function hidePopOnScroll() {
|
1728 | _setInterval(function () {
|
1729 | if (_popperRef.current) {
|
1730 | var bounds = _popperRef.current.getBoundingClientRect();
|
1731 |
|
1732 | var inViewport = bounds.top >= 0 && bounds.bottom <= window.innerHeight;
|
1733 |
|
1734 | if (!inViewport && isOpen) {
|
1735 | setIsOpen(false);
|
1736 | }
|
1737 | }
|
1738 | }, 100);
|
1739 | }
|
1740 |
|
1741 | useEffect(function () {
|
1742 | if (isFirstRun.current) {
|
1743 | isFirstRun.current = false;
|
1744 | return;
|
1745 | }
|
1746 |
|
1747 | if (timeoutRef.current !== null) {
|
1748 | clearTimeout(timeoutRef.current);
|
1749 | }
|
1750 |
|
1751 | if (isOpen) {
|
1752 | timeoutRef.current = _setTimeout(function () {
|
1753 | if (closeBtnRef.current) {
|
1754 | closeBtnRef.current.focus();
|
1755 | } else if (escMsgRef.current) {
|
1756 | escMsgRef.current.focus();
|
1757 | }
|
1758 | }, 100);
|
1759 | } else {
|
1760 | triggerBtnRef.current.focus();
|
1761 | }
|
1762 | }, [isOpen]);
|
1763 | useEffect(function () {
|
1764 | if (isOpen) {
|
1765 | window.addEventListener('scroll', hidePopOnScroll);
|
1766 | }
|
1767 |
|
1768 | return function () {
|
1769 | return window.removeEventListener('scroll', hidePopOnScroll);
|
1770 | };
|
1771 | }, [isOpen]);
|
1772 | var closeButton = React.createElement(PopoverCloseButton, {
|
1773 | onClick: toggleShow,
|
1774 | ref: closeBtnRef
|
1775 | }, "Close");
|
1776 | var altCloseButton = React.createElement(AltCloseButton, {
|
1777 | "aria-label": "Close",
|
1778 | hasTitle: hasTitle,
|
1779 | onClick: toggleShow,
|
1780 | ref: closeBtnRef
|
1781 | });
|
1782 | return React.createElement(Container, null, React.createElement(Popup, {
|
1783 | name: name,
|
1784 | trigger: renderTrigger({
|
1785 | ref: triggerBtnRef,
|
1786 | toggleShow: toggleShow,
|
1787 | isOpen: isOpen
|
1788 | }),
|
1789 | position: placement,
|
1790 | arrowSize: arrowSize,
|
1791 | transitionIn: isOpen,
|
1792 | hasTitle: hasTitle,
|
1793 | disableFlipping: disableFlipping,
|
1794 | popperRef: function popperRef(elem) {
|
1795 | _popperRef.current = elem;
|
1796 | }
|
1797 | }, React.createElement(RootCloseWrapper, {
|
1798 | onRootClose: hidePopover,
|
1799 | disabled: disableRootClose
|
1800 | }, React.createElement("div", {
|
1801 | role: "dialog",
|
1802 | ref: contentRef
|
1803 | }, React.createElement(PopoverHeader, {
|
1804 | hasTitle: hasTitle
|
1805 | }, hasTitle && React.createElement(TitleBar, null, title), hasAltCloseButton && altCloseButton, React.createElement(CloseHelpText, {
|
1806 | tabIndex: -1,
|
1807 | ref: escMsgRef,
|
1808 | "aria-label": "Press escape to close the Popover"
|
1809 | })), React.createElement(PopoverBody, {
|
1810 | hasAltCloseWithNoTitle: hasAltCloseWithNoTitle
|
1811 | }, React.createElement(PopoverContent, {
|
1812 | showCloseButton: showCloseButton
|
1813 | }, content), showCloseButton && closeButton)))));
|
1814 | }
|
1815 |
|
1816 | Popover.propTypes = process.env.NODE_ENV !== "production" ? {
|
1817 |
|
1818 | name: PropTypes.string.isRequired,
|
1819 |
|
1820 |
|
1821 | title: PropTypes.string,
|
1822 |
|
1823 |
|
1824 | content: PropTypes.node.isRequired,
|
1825 |
|
1826 |
|
1827 | placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
1828 |
|
1829 |
|
1830 | arrowSize: PropTypes.oneOf(['sm', 'lg', 'none', 'default']),
|
1831 |
|
1832 |
|
1833 | disableRootClose: PropTypes.bool,
|
1834 |
|
1835 |
|
1836 | hasCloseButton: PropTypes.bool,
|
1837 |
|
1838 |
|
1839 | hasAltCloseButton: PropTypes.bool,
|
1840 |
|
1841 |
|
1842 | renderTrigger: PropTypes.func.isRequired,
|
1843 |
|
1844 |
|
1845 | disableFlipping: PropTypes.bool
|
1846 | } : {};
|
1847 | Popover.defaultProps = {
|
1848 | placement: 'bottom',
|
1849 | arrowSize: 'default',
|
1850 | disableRootClose: false,
|
1851 | hasCloseButton: false,
|
1852 | hasAltCloseButton: false,
|
1853 | disableFlipping: false,
|
1854 | title: undefined
|
1855 | };
|
1856 |
|
1857 | function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
1858 |
|
1859 | function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys$3(source, true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys$3(source)).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
1860 |
|
1861 | var DropIn = function DropIn(_ref) {
|
1862 | var _context;
|
1863 |
|
1864 | var children = _ref.children,
|
1865 | duration = _ref.duration,
|
1866 | otherProps = _objectWithoutProperties(_ref, ["children", "duration"]);
|
1867 |
|
1868 | var transitionStyles = {
|
1869 | opacity: 0,
|
1870 | transform: "translate(0, -25%)",
|
1871 | transition: _concatInstanceProperty(_context = "transform ".concat(duration, "ms ease-out, opacity ")).call(_context, duration, "ms linear")
|
1872 | };
|
1873 | var stateStyles = {
|
1874 | entering: {
|
1875 | opacity: 1,
|
1876 | transform: "translate(0, 0)"
|
1877 | },
|
1878 | entered: {
|
1879 | opacity: 1,
|
1880 | transform: "translate(0, 0)"
|
1881 | }
|
1882 | };
|
1883 | return React.createElement(Transition, _extends({}, otherProps, {
|
1884 | timeout: duration
|
1885 | }), function (state, innerProps) {
|
1886 | return React.cloneElement(children, _objectSpread$3({}, innerProps, {
|
1887 | style: _objectSpread$3({}, children.props.style, {}, transitionStyles, {}, stateStyles[state])
|
1888 | }));
|
1889 | });
|
1890 | };
|
1891 |
|
1892 | DropIn.propTypes = process.env.NODE_ENV !== "production" ? {
|
1893 | children: PropTypes.any.isRequired,
|
1894 | duration: PropTypes.number
|
1895 | } : {};
|
1896 | DropIn.defaultProps = {
|
1897 | duration: 300
|
1898 | };
|
1899 |
|
1900 | var ModalContext = React.createContext({});
|
1901 |
|
1902 | function _templateObject$d() {
|
1903 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border-bottom: ", ";\n color: ", ";\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: ", ";\n font-weight: 300;\n line-height: 1.1;\n margin-bottom: 0.45em;\n margin-top: 0;\n padding-bottom: ", ";\n padding: ", ";\n\n small {\n font-size: ", ";\n line-height: 1;\n }\n\n @media (min-width: ", ") {\n font-size: ", ";\n }\n"]);
|
1904 |
|
1905 | _templateObject$d = function _templateObject() {
|
1906 | return data;
|
1907 | };
|
1908 |
|
1909 | return data;
|
1910 | }
|
1911 | var HeadingBase = styled.h1(_templateObject$d(), function (props) {
|
1912 | return props.isKnockoutStyle && props.theme.colors.softwareBlue;
|
1913 | }, function (props) {
|
1914 | return props.underlineColor && "2px solid ".concat(props.underlineColor, ";");
|
1915 | }, function (props) {
|
1916 | return props.isKnockoutStyle ? 'white' : 'inherit';
|
1917 | }, function (props) {
|
1918 | return props.adjustedSize > 2 ? props.theme.headingSize[props.adjustedSize] : "calc(".concat(props.theme.headingSize[props.adjustedSize], " - 6px);");
|
1919 | }, function (props) {
|
1920 | return props.underlineColor && '0.22em';
|
1921 | }, function (props) {
|
1922 | return props.isKnockoutStyle && '20px 15px';
|
1923 | }, function (props) {
|
1924 | return props.adjustedSize > 3 ? '75%' : '65%';
|
1925 | }, function (props) {
|
1926 | return props.theme.screenSize.tablet;
|
1927 | }, function (props) {
|
1928 | return props.theme.headingSize[props.adjustedSize];
|
1929 | });
|
1930 |
|
1931 | function Heading(_ref) {
|
1932 | var children = _ref.children,
|
1933 | level = _ref.level,
|
1934 | size = _ref.size,
|
1935 | isKnockoutStyle = _ref.isKnockoutStyle,
|
1936 | underlineColor = _ref.underlineColor,
|
1937 | other = _objectWithoutProperties(_ref, ["children", "level", "size", "isKnockoutStyle", "underlineColor"]);
|
1938 |
|
1939 | var adjustedSize = size || level;
|
1940 | var hLevel = "h".concat(level);
|
1941 | return React.createElement(HeadingBase, _extends({
|
1942 | as: hLevel,
|
1943 | adjustedSize: adjustedSize,
|
1944 | isKnockoutStyle: isKnockoutStyle,
|
1945 | underlineColor: underlineColor
|
1946 | }, other), children);
|
1947 | }
|
1948 |
|
1949 | Heading.propTypes = process.env.NODE_ENV !== "production" ? {
|
1950 | children: PropTypes.node,
|
1951 |
|
1952 |
|
1953 | level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
|
1954 |
|
1955 |
|
1956 | size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
|
1957 |
|
1958 |
|
1959 | isKnockoutStyle: PropTypes.bool,
|
1960 |
|
1961 |
|
1962 | underlineColor: PropTypes.string
|
1963 | } : {};
|
1964 | Heading.defaultProps = {
|
1965 | children: undefined,
|
1966 | size: undefined,
|
1967 | isKnockoutStyle: false,
|
1968 | underlineColor: null
|
1969 | };
|
1970 |
|
1971 | function _templateObject3$4() {
|
1972 | var data = _taggedTemplateLiteral(["\n align-self: center;\n color: ", ";\n font-size: 18px;\n"]);
|
1973 |
|
1974 | _templateObject3$4 = function _templateObject3() {
|
1975 | return data;
|
1976 | };
|
1977 |
|
1978 | return data;
|
1979 | }
|
1980 |
|
1981 | function _templateObject2$6() {
|
1982 | var data = _taggedTemplateLiteral(["\n margin: 0;\n"]);
|
1983 |
|
1984 | _templateObject2$6 = function _templateObject2() {
|
1985 | return data;
|
1986 | };
|
1987 |
|
1988 | return data;
|
1989 | }
|
1990 |
|
1991 | function _templateObject$e() {
|
1992 | var data = _taggedTemplateLiteral(["\n align-items: baseline;\n border-bottom: 2px solid ", ";\n color: ", ";\n display: flex;\n font-size: 26px;\n justify-content: space-between;\n padding: 15px;\n"]);
|
1993 |
|
1994 | _templateObject$e = function _templateObject() {
|
1995 | return data;
|
1996 | };
|
1997 |
|
1998 | return data;
|
1999 | }
|
2000 |
|
2001 | var Header = styled.div(_templateObject$e(), function (props) {
|
2002 | return props.theme.brandColors.vbMagenta;
|
2003 | }, function (props) {
|
2004 | return props.theme.colors.gray9;
|
2005 | });
|
2006 | var Title = styled(Heading)(_templateObject2$6());
|
2007 | var DismissModal = styled(DismissButton)(_templateObject3$4(), function (props) {
|
2008 | return props.theme.colors.black;
|
2009 | });
|
2010 |
|
2011 | function ModalHeader(props) {
|
2012 | var hideCloseButton = props.hideCloseButton,
|
2013 | children = props.children,
|
2014 | level = props.level,
|
2015 | otherProps = _objectWithoutProperties(props, ["hideCloseButton", "children", "level"]);
|
2016 |
|
2017 | var _useContext = useContext(ModalContext),
|
2018 | onHide = _useContext.onHide,
|
2019 | ariaId = _useContext.ariaId;
|
2020 |
|
2021 | return React.createElement(Header, otherProps, React.createElement(Title, {
|
2022 | id: ariaId,
|
2023 | level: level
|
2024 | }, children), !hideCloseButton && React.createElement(DismissModal, {
|
2025 | onClick: onHide
|
2026 | }));
|
2027 | }
|
2028 |
|
2029 | ModalHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
2030 |
|
2031 | hideCloseButton: PropTypes.bool,
|
2032 | children: PropTypes.any,
|
2033 | level: PropTypes.oneOf([1, 2, 3, 4, 5, 6])
|
2034 | } : {};
|
2035 | ModalHeader.defaultProps = {
|
2036 | hideCloseButton: false,
|
2037 | children: undefined,
|
2038 | level: 4
|
2039 | };
|
2040 |
|
2041 | function _templateObject$f() {
|
2042 | var data = _taggedTemplateLiteral(["\n color: ", ";\n padding: 15px;\n"]);
|
2043 |
|
2044 | _templateObject$f = function _templateObject() {
|
2045 | return data;
|
2046 | };
|
2047 |
|
2048 | return data;
|
2049 | }
|
2050 |
|
2051 | var ModalBody = styled.div(_templateObject$f(), function (props) {
|
2052 | return props.theme.colors.gray9;
|
2053 | });
|
2054 |
|
2055 | function _templateObject$g() {
|
2056 | var data = _taggedTemplateLiteral(["\n align-items: baseline;\n display: flex;\n padding: 15px 15px 55px;\n text-align: right;\n\n button {\n width: auto;\n }\n\n @media (min-width: ", ") {\n padding: 15px 15px 19px;\n }\n"]);
|
2057 |
|
2058 | _templateObject$g = function _templateObject() {
|
2059 | return data;
|
2060 | };
|
2061 |
|
2062 | return data;
|
2063 | }
|
2064 |
|
2065 | var ModalFooter = styled.div(_templateObject$g(), function (props) {
|
2066 | return props.theme.screenSize.tablet;
|
2067 | });
|
2068 |
|
2069 | function _templateObject5$2() {
|
2070 | var data = _taggedTemplateLiteral(["\n background-clip: padding-box;\n background-color: ", ";\n border-radius: 3px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: ", ";\n outline: 0;\n position: relative;\n -webkit-overflow-scrolling: touch;\n"]);
|
2071 |
|
2072 | _templateObject5$2 = function _templateObject5() {
|
2073 | return data;
|
2074 | };
|
2075 |
|
2076 | return data;
|
2077 | }
|
2078 |
|
2079 | function _templateObject4$4() {
|
2080 | var data = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n width: ", ";\n }\n"]);
|
2081 |
|
2082 | _templateObject4$4 = function _templateObject4() {
|
2083 | return data;
|
2084 | };
|
2085 |
|
2086 | return data;
|
2087 | }
|
2088 |
|
2089 | function _templateObject3$5() {
|
2090 | var data = _taggedTemplateLiteral(["\n @media (min-width: ", ") {\n margin: 20vh auto;\n width: ", ";\n }\n"]);
|
2091 |
|
2092 | _templateObject3$5 = function _templateObject3() {
|
2093 | return data;
|
2094 | };
|
2095 |
|
2096 | return data;
|
2097 | }
|
2098 |
|
2099 | function _templateObject2$7() {
|
2100 | var data = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n\n @media (min-width: ", ") {\n margin: 20vh auto;\n width: ", ";\n }\n"]);
|
2101 |
|
2102 | _templateObject2$7 = function _templateObject2() {
|
2103 | return data;
|
2104 | };
|
2105 |
|
2106 | return data;
|
2107 | }
|
2108 |
|
2109 | function _templateObject$h() {
|
2110 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 1030;\n"]);
|
2111 |
|
2112 | _templateObject$h = function _templateObject() {
|
2113 | return data;
|
2114 | };
|
2115 |
|
2116 | return data;
|
2117 | }
|
2118 | var modalSize = {
|
2119 | small: '300px',
|
2120 | medium: '600px',
|
2121 | large: '900px'
|
2122 | };
|
2123 | var modalStyle = {
|
2124 | bottom: 0,
|
2125 | left: 0,
|
2126 | outline: 0,
|
2127 | overflowX: 'hidden',
|
2128 | overflowY: 'auto',
|
2129 | position: 'fixed',
|
2130 | right: 0,
|
2131 | top: 0,
|
2132 | zIndex: 1040
|
2133 | };
|
2134 | var Backdrop = styled.div(_templateObject$h(), function (props) {
|
2135 | return props.theme.colors.black;
|
2136 | });
|
2137 | var ModalDialogMedium = styled.div(_templateObject2$7(), function (props) {
|
2138 | return props.theme.screenSize.tablet;
|
2139 | }, modalSize.medium);
|
2140 | var ModalDialogSmall = styled(ModalDialogMedium)(_templateObject3$5(), function (props) {
|
2141 | return props.theme.screenSize.phone;
|
2142 | }, modalSize.small);
|
2143 | var ModalDialogLarge = styled(ModalDialogMedium)(_templateObject4$4(), function (props) {
|
2144 | return props.theme.screenSize.desktop;
|
2145 | }, modalSize.large);
|
2146 | var ModalContent = styled.div(_templateObject5$2(), function (props) {
|
2147 | return props.theme.colors.white;
|
2148 | }, function (props) {
|
2149 | return props.theme.sizes.baseFontSize;
|
2150 | });
|
2151 |
|
2152 | var BackdropFade = function BackdropFade(props) {
|
2153 | return React.createElement(Fade, _extends({
|
2154 | opacity: 0.5
|
2155 | }, props));
|
2156 | };
|
2157 |
|
2158 | var DialogDropIn = function DialogDropIn(props) {
|
2159 | return React.createElement(DropIn, props);
|
2160 | };
|
2161 |
|
2162 | function getModalBySize(size) {
|
2163 | switch (size) {
|
2164 | case 'small':
|
2165 | return ModalDialogSmall;
|
2166 |
|
2167 | case 'large':
|
2168 | return ModalDialogLarge;
|
2169 |
|
2170 | default:
|
2171 | return ModalDialogMedium;
|
2172 | }
|
2173 | }
|
2174 |
|
2175 | function Modal(props) {
|
2176 | var animation = props.animation,
|
2177 | backdrop = props.backdrop,
|
2178 | children = props.children,
|
2179 | escapeExits = props.escapeExits,
|
2180 | onEnter = props.onEnter,
|
2181 | onExit = props.onExit,
|
2182 | onHide = props.onHide,
|
2183 | show = props.show,
|
2184 | size = props.size,
|
2185 | other = _objectWithoutProperties(props, ["animation", "backdrop", "children", "escapeExits", "onEnter", "onExit", "onHide", "show", "size"]);
|
2186 |
|
2187 | var ModalDialog = getModalBySize(size);
|
2188 | var ariaId = useUniqueId(other.id);
|
2189 | return React.createElement(ModalContext.Provider, {
|
2190 | value: {
|
2191 | onHide: onHide,
|
2192 | ariaId: ariaId
|
2193 | }
|
2194 | }, React.createElement(Modal$1, {
|
2195 | "aria-labelledby": ariaId,
|
2196 | backdrop: backdrop,
|
2197 | renderBackdrop: function renderBackdrop(backdropProps) {
|
2198 | return React.createElement(Backdrop, backdropProps);
|
2199 | },
|
2200 | backdropTransition: animation ? BackdropFade : undefined,
|
2201 | keyboard: escapeExits,
|
2202 | onEnter: onEnter,
|
2203 | onExit: onExit,
|
2204 | onHide: onHide,
|
2205 | show: show,
|
2206 | style: modalStyle,
|
2207 | transition: animation ? DialogDropIn : undefined
|
2208 | }, React.createElement(RootCloseWrapper, {
|
2209 | onRootClose: onHide,
|
2210 | disabled: backdrop === 'static'
|
2211 | }, React.createElement(ModalDialog, _extends({
|
2212 | size: size
|
2213 | }, other), React.createElement(ModalContent, null, children)))));
|
2214 | }
|
2215 |
|
2216 | Modal.propTypes = process.env.NODE_ENV !== "production" ? {
|
2217 |
|
2218 | animation: PropTypes.bool,
|
2219 |
|
2220 | |
2221 |
|
2222 |
|
2223 |
|
2224 | backdrop: PropTypes.oneOf(['static', true, false]),
|
2225 |
|
2226 | |
2227 |
|
2228 |
|
2229 |
|
2230 | children: PropTypes.any,
|
2231 |
|
2232 |
|
2233 | escapeExits: PropTypes.bool,
|
2234 |
|
2235 |
|
2236 | onEnter: PropTypes.func,
|
2237 |
|
2238 |
|
2239 | onExit: PropTypes.func,
|
2240 |
|
2241 | |
2242 |
|
2243 |
|
2244 |
|
2245 | onHide: PropTypes.func,
|
2246 |
|
2247 |
|
2248 | show: PropTypes.bool,
|
2249 |
|
2250 |
|
2251 | size: PropTypes.oneOf(['small', 'medium', 'large'])
|
2252 | } : {};
|
2253 | Modal.defaultProps = {
|
2254 | animation: true,
|
2255 | backdrop: true,
|
2256 | escapeExits: true,
|
2257 | onEnter: _noop,
|
2258 | onExit: _noop,
|
2259 | onHide: _noop,
|
2260 | show: false,
|
2261 | size: 'medium',
|
2262 | children: undefined
|
2263 | };
|
2264 | Modal.Header = ModalHeader;
|
2265 | Modal.Body = ModalBody;
|
2266 | Modal.Footer = ModalFooter;
|
2267 |
|
2268 | function _templateObject$i() {
|
2269 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n width: 100%;\n\n @media (min-width: ", ") {\n flex-direction: row;\n }\n"]);
|
2270 |
|
2271 | _templateObject$i = function _templateObject() {
|
2272 | return data;
|
2273 | };
|
2274 |
|
2275 | return data;
|
2276 | }
|
2277 | var ModalButtonContainer = styled.div(_templateObject$i(), function (props) {
|
2278 | return props.theme.screenSize.tablet;
|
2279 | });
|
2280 |
|
2281 | function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
2282 |
|
2283 | function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$4(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$4(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
2284 |
|
2285 | function _templateObject11$1() {
|
2286 | var data = _taggedTemplateLiteral(["\n .ReactModal__Body--open {\n overflow-y: hidden;\n }\n\n .ReactModal__Overlay--after-open {\n background-color: rgba(0,0,0,0.3) !important;\n }\n\n .ReactModal__Overlay--before-close {\n background-color: rgba(0,0,0,0) !important;\n }\n"]);
|
2287 |
|
2288 | _templateObject11$1 = function _templateObject11() {
|
2289 | return data;
|
2290 | };
|
2291 |
|
2292 | return data;
|
2293 | }
|
2294 |
|
2295 | function _templateObject10$1() {
|
2296 | var data = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 1.5em;\n position: relative;\n"]);
|
2297 |
|
2298 | _templateObject10$1 = function _templateObject10() {
|
2299 | return data;
|
2300 | };
|
2301 |
|
2302 | return data;
|
2303 | }
|
2304 |
|
2305 | function _templateObject9$1() {
|
2306 | var data = _taggedTemplateLiteral(["\n font-size: 12px;\n margin-top: 2px;\n"]);
|
2307 |
|
2308 | _templateObject9$1 = function _templateObject9() {
|
2309 | return data;
|
2310 | };
|
2311 |
|
2312 | return data;
|
2313 | }
|
2314 |
|
2315 | function _templateObject8$2() {
|
2316 | var data = _taggedTemplateLiteral(["\n margin: 0;\n max-width: 80%;\n overflow: hidden;\n padding: 1px;\n text-overflow: ellipsis;\n white-space: nowrap;\n"]);
|
2317 |
|
2318 | _templateObject8$2 = function _templateObject8() {
|
2319 | return data;
|
2320 | };
|
2321 |
|
2322 | return data;
|
2323 | }
|
2324 |
|
2325 | function _templateObject7$2() {
|
2326 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n"]);
|
2327 |
|
2328 | _templateObject7$2 = function _templateObject7() {
|
2329 | return data;
|
2330 | };
|
2331 |
|
2332 | return data;
|
2333 | }
|
2334 |
|
2335 | function _templateObject6$2() {
|
2336 | var data = _taggedTemplateLiteral(["\n cursor: pointer;\n opacity: 0.7;\n padding: 16px;\n"]);
|
2337 |
|
2338 | _templateObject6$2 = function _templateObject6() {
|
2339 | return data;
|
2340 | };
|
2341 |
|
2342 | return data;
|
2343 | }
|
2344 |
|
2345 | function _templateObject5$3() {
|
2346 | var data = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex: 0 0 64px;\n height: 64px;\n"]);
|
2347 |
|
2348 | _templateObject5$3 = function _templateObject5() {
|
2349 | return data;
|
2350 | };
|
2351 |
|
2352 | return data;
|
2353 | }
|
2354 |
|
2355 | function _templateObject4$5() {
|
2356 | var data = _taggedTemplateLiteral(["\n height: 90vh;\n margin-top: 10vh;\n transform: translateY(100%);\n\n &.ReactModal__Content--after-open {\n transform: translateY(0%);\n }\n\n &.ReactModal__Content--before-close {\n transform: translateY(100%);\n }\n"]);
|
2357 |
|
2358 | _templateObject4$5 = function _templateObject4() {
|
2359 | return data;
|
2360 | };
|
2361 |
|
2362 | return data;
|
2363 | }
|
2364 |
|
2365 | function _templateObject3$6() {
|
2366 | var data = _taggedTemplateLiteral(["\n margin-right: auto;\n transform: translateX(-100%);\n\n &.ReactModal__Content--after-open {\n transform: translateX(0%);\n }\n\n &.ReactModal__Content--before-close {\n transform: translateX(-100%);\n }\n"]);
|
2367 |
|
2368 | _templateObject3$6 = function _templateObject3() {
|
2369 | return data;
|
2370 | };
|
2371 |
|
2372 | return data;
|
2373 | }
|
2374 |
|
2375 | function _templateObject2$8() {
|
2376 | var data = _taggedTemplateLiteral(["\n margin-left: auto;\n transform: translateX(100%);\n\n &.ReactModal__Content--after-open {\n transform: translateX(0%);\n }\n\n &.ReactModal__Content--before-close {\n transform: translateX(100%);\n }\n"]);
|
2377 |
|
2378 | _templateObject2$8 = function _templateObject2() {
|
2379 | return data;
|
2380 | };
|
2381 |
|
2382 | return data;
|
2383 | }
|
2384 |
|
2385 | function _templateObject$j() {
|
2386 | var data = _taggedTemplateLiteral(["\n background: ", ";\n box-shadow: 0 8px 8px ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 100px;\n transition: transform 0.5s;\n width: 100%;\n will-change: transform;\n\n &:focus {\n outline-style: none;\n }\n\n @media (min-width: ", ") {\n width: 900px;\n }\n"]);
|
2387 |
|
2388 | _templateObject$j = function _templateObject() {
|
2389 | return data;
|
2390 | };
|
2391 |
|
2392 | return data;
|
2393 | }
|
2394 | var PaneBase = styled(Modal$1$1)(_templateObject$j(), function (props) {
|
2395 | return props.theme.colors.white;
|
2396 | }, function (props) {
|
2397 | return props.theme.colors.boxShadowDark;
|
2398 | }, function (props) {
|
2399 | return props.theme.screenSize.tablet;
|
2400 | });
|
2401 | var PaneRight = styled(PaneBase)(_templateObject2$8());
|
2402 | var PaneLeft = styled(PaneBase)(_templateObject3$6());
|
2403 | var PaneBottom = styled(PaneBase)(_templateObject4$5());
|
2404 | var Header$1 = styled.div(_templateObject5$3(), function (props) {
|
2405 | return props.theme.colors.popoverHeader;
|
2406 | }, function (props) {
|
2407 | return props.theme.colors.white;
|
2408 | });
|
2409 | var CloseLink = styled(LinkButton)(_templateObject6$2());
|
2410 | var TitleWrapper = styled.div(_templateObject7$2());
|
2411 | var TitleText = styled(Heading)(_templateObject8$2());
|
2412 | var SubTitle = styled.div(_templateObject9$1());
|
2413 | var Content = styled.div(_templateObject10$1());
|
2414 | var ScreenReaderText$1 = screenReaderOnly('span');
|
2415 | var defaultStyles = {
|
2416 | overlay: {
|
2417 | backgroundColor: 'rgba(0,0,0,0)',
|
2418 | top: '0',
|
2419 | left: '0',
|
2420 | right: '0',
|
2421 | bottom: '0',
|
2422 | position: 'fixed',
|
2423 | zIndex: '1000',
|
2424 | transition: 'background-color 0.5s'
|
2425 | },
|
2426 | content: {}
|
2427 | };
|
2428 | var GlobalPaneStyles = createGlobalStyle(_templateObject11$1());
|
2429 |
|
2430 | function getPane(direction) {
|
2431 | switch (direction) {
|
2432 | case 'bottom':
|
2433 | return PaneBottom;
|
2434 |
|
2435 | case 'left':
|
2436 | return PaneLeft;
|
2437 |
|
2438 | default:
|
2439 | return PaneRight;
|
2440 | }
|
2441 | }
|
2442 |
|
2443 | function SlidingPane(_ref) {
|
2444 | var isOpen = _ref.isOpen,
|
2445 | title = _ref.title,
|
2446 | subTitle = _ref.subTitle,
|
2447 | shouldCloseOnEsc = _ref.shouldCloseOnEsc,
|
2448 | onRequestClose = _ref.onRequestClose,
|
2449 | onAfterOpen = _ref.onAfterOpen,
|
2450 | children = _ref.children,
|
2451 | closeIcon = _ref.closeIcon,
|
2452 | closeIconScreenReaderText = _ref.closeIconScreenReaderText,
|
2453 | from = _ref.from,
|
2454 | headingLevel = _ref.headingLevel,
|
2455 | headingSize = _ref.headingSize,
|
2456 | closeTimeout = _ref.closeTimeout,
|
2457 | overlayStyles = _ref.overlayStyles,
|
2458 | contentStyles = _ref.contentStyles,
|
2459 | appElement = _ref.appElement,
|
2460 | rest = _objectWithoutProperties(_ref, ["isOpen", "title", "subTitle", "shouldCloseOnEsc", "onRequestClose", "onAfterOpen", "children", "closeIcon", "closeIconScreenReaderText", "from", "headingLevel", "headingSize", "closeTimeout", "overlayStyles", "contentStyles", "appElement"]);
|
2461 |
|
2462 | var Pane = getPane(from);
|
2463 | var styles = {
|
2464 | overlay: _objectSpread$4({}, defaultStyles.overlay, {}, overlayStyles),
|
2465 | content: _objectSpread$4({}, defaultStyles.content, {}, contentStyles)
|
2466 | };
|
2467 |
|
2468 | if (appElement) {
|
2469 | Pane.setAppElement(appElement);
|
2470 | } else {
|
2471 | _Object$assign(rest, {
|
2472 | ariaHideApp: false
|
2473 | });
|
2474 | }
|
2475 |
|
2476 | return React.createElement(React.Fragment, null, React.createElement(GlobalPaneStyles, null), React.createElement(Pane, _extends({
|
2477 | style: styles,
|
2478 | closeTimeoutMS: closeTimeout,
|
2479 | isOpen: isOpen,
|
2480 | onAfterOpen: onAfterOpen,
|
2481 | onRequestClose: onRequestClose,
|
2482 | shouldCloseOnEsc: shouldCloseOnEsc,
|
2483 | contentLabel: "Modal \"".concat(title, "\"")
|
2484 | }, rest), React.createElement(Header$1, null, React.createElement(CloseLink, {
|
2485 | onClick: onRequestClose
|
2486 | }, closeIcon || React.createElement(Icon, {
|
2487 | name: "remove",
|
2488 | size: 34
|
2489 | }), React.createElement(ScreenReaderText$1, null, closeIconScreenReaderText)), React.createElement(TitleWrapper, null, React.createElement(TitleText, {
|
2490 | level: headingLevel,
|
2491 | size: headingSize
|
2492 | }, title), React.createElement(SubTitle, null, subTitle))), React.createElement(Content, null, children)));
|
2493 | }
|
2494 | SlidingPane.propTypes = process.env.NODE_ENV !== "production" ? {
|
2495 | isOpen: PropTypes.bool.isRequired,
|
2496 | title: PropTypes.any,
|
2497 | subTitle: PropTypes.any,
|
2498 | shouldCloseOnEsc: PropTypes.bool,
|
2499 | onRequestClose: PropTypes.func,
|
2500 | onAfterOpen: PropTypes.func,
|
2501 | children: PropTypes.any.isRequired,
|
2502 | from: PropTypes.oneOf(['left', 'right', 'bottom']),
|
2503 | closeIcon: PropTypes.any,
|
2504 | closeIconScreenReaderText: PropTypes.string,
|
2505 | headingLevel: Heading.propTypes.level,
|
2506 | headingSize: Heading.propTypes.size,
|
2507 | closeTimeout: PropTypes.number,
|
2508 | overlayStyles: PropTypes.object,
|
2509 | contentStyles: PropTypes.object,
|
2510 |
|
2511 | |
2512 |
|
2513 | appElement: PropTypes.string
|
2514 | } : {};
|
2515 | SlidingPane.defaultProps = {
|
2516 |
|
2517 | closeTimeout: 500,
|
2518 | from: 'right',
|
2519 | headingLevel: 2,
|
2520 | headingSize: 3,
|
2521 | shouldCloseOnEsc: true,
|
2522 | title: undefined,
|
2523 | subTitle: undefined,
|
2524 | onRequestClose: _noop,
|
2525 | onAfterOpen: _noop,
|
2526 | closeIcon: undefined,
|
2527 | closeIconScreenReaderText: 'Close',
|
2528 | overlayStyles: {},
|
2529 | contentStyles: {},
|
2530 | appElement: undefined
|
2531 | };
|
2532 |
|
2533 | function _templateObject$k() {
|
2534 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: block;\n font-family: inherit;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n min-width: 100px;\n outline: none;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n text-align: center;\n text-decoration: none;\n text-transform: ", ";\n transition: background-color 150ms linear, color 150ms linear;\n white-space: nowrap;\n width: 100%;\n\n @media (min-width: ", ") {\n display: ", ";\n width: ", ";\n }\n\n &:focus,\n &:focus-within {\n box-shadow: 0 0 3px 3px ", ";\n }\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n &[disabled] {\n cursor: not-allowed;\n opacity: 0.65;\n\n > * {\n pointer-events: none;\n }\n }\n\n &[disabled]:hover {\n color: ", ";\n background-color: ", ";\n }\n"]);
|
2535 |
|
2536 | _templateObject$k = function _templateObject() {
|
2537 | return data;
|
2538 | };
|
2539 |
|
2540 | return data;
|
2541 | }
|
2542 | var StyledButton$3 = styled.button(_templateObject$k(), function (props) {
|
2543 | return props.variant.bgColor;
|
2544 | }, function (props) {
|
2545 | return props.variant.borderColor;
|
2546 | }, function (props) {
|
2547 | return props.buttonSize.borderRadius;
|
2548 | }, function (props) {
|
2549 | return props.variant.textColor;
|
2550 | }, function (props) {
|
2551 | return props.buttonSize.fontSize;
|
2552 | }, function (props) {
|
2553 | return props.buttonSize.fontWeight || 'normal';
|
2554 | }, function (props) {
|
2555 | return props.buttonSize.lineHeight || props.theme.sizes.baseLineHeight;
|
2556 | }, function (props) {
|
2557 | return props.buttonSize.paddingBottom;
|
2558 | }, function (props) {
|
2559 | return props.buttonSize.paddingSides;
|
2560 | }, function (props) {
|
2561 | return props.buttonSize.paddingSides;
|
2562 | }, function (props) {
|
2563 | return props.buttonSize.paddingTop;
|
2564 | }, function (props) {
|
2565 | return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
|
2566 | }, function (props) {
|
2567 | return props.theme.screenSize.tablet;
|
2568 | }, function (props) {
|
2569 | return props.block ? 'block' : 'inline-block';
|
2570 | }, function (props) {
|
2571 | return props.block ? '100%' : 'auto';
|
2572 | }, function (props) {
|
2573 | return props.theme.colors.inputFocus;
|
2574 | }, function (props) {
|
2575 | return props.variant.hoverBgColor;
|
2576 | }, function (props) {
|
2577 | return props.variant.hoverTextColor;
|
2578 | }, function (props) {
|
2579 | return props.variant.activeBgColor;
|
2580 | }, function (props) {
|
2581 | return props.variant.activeTextColor;
|
2582 | }, function (props) {
|
2583 | return props.variant.textColor;
|
2584 | }, function (props) {
|
2585 | return props.variant.bgColor;
|
2586 | });
|
2587 | var OutlineButton = React.forwardRef(function OutlineButton(props, ref) {
|
2588 | var children = props.children,
|
2589 | styleType = props.styleType,
|
2590 | size = props.size,
|
2591 | block = props.block,
|
2592 | other = _objectWithoutProperties(props, ["children", "styleType", "size", "block"]);
|
2593 |
|
2594 | var theme = useTheme();
|
2595 | var buttonSize = theme.buttonStyles.outlineButton.size[size];
|
2596 | var variant = theme.buttonStyles.outlineButton.variant[styleType];
|
2597 | return React.createElement(StyledButton$3, _extends({
|
2598 | ref: ref,
|
2599 | block: block,
|
2600 | buttonSize: buttonSize,
|
2601 | variant: variant,
|
2602 | type: "button"
|
2603 | }, other), children);
|
2604 | });
|
2605 | OutlineButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
2606 | children: PropTypes.node.isRequired,
|
2607 |
|
2608 |
|
2609 | styleType: PropTypes.string,
|
2610 | size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
|
2611 |
|
2612 |
|
2613 | block: PropTypes.bool
|
2614 | } : {};
|
2615 | OutlineButton.defaultProps = {
|
2616 | styleType: 'default',
|
2617 | block: false,
|
2618 | size: 'default'
|
2619 | };
|
2620 |
|
2621 | function _templateObject2$9() {
|
2622 | var data = _taggedTemplateLiteral(["\n ", ";\n"]);
|
2623 |
|
2624 | _templateObject2$9 = function _templateObject2() {
|
2625 | return data;
|
2626 | };
|
2627 |
|
2628 | return data;
|
2629 | }
|
2630 |
|
2631 | function _templateObject$l() {
|
2632 | var data = _taggedTemplateLiteral(["\n .es-button__display {\n ", ";\n }\n"]);
|
2633 |
|
2634 | _templateObject$l = function _templateObject() {
|
2635 | return data;
|
2636 | };
|
2637 |
|
2638 | return data;
|
2639 | }
|
2640 | var buttonMixin = css(["background-color:", ";color:", ";"], function (props) {
|
2641 | return props.isPressed ? props.variant.hoverBgColor : props.variant.bgColor;
|
2642 | }, function (props) {
|
2643 | return props.isPressed ? props.variant.activeTextColor : props.variant.textColor;
|
2644 | });
|
2645 | var StyledButton$4 = styled(Button)(_templateObject$l(), buttonMixin);
|
2646 | var StyledOutlineButton = styled(OutlineButton)(_templateObject2$9(), buttonMixin);
|
2647 |
|
2648 | function ToggleButton(props) {
|
2649 | var theme = useTheme();
|
2650 |
|
2651 | var _useState = useState(props.isPressed),
|
2652 | _useState2 = _slicedToArray(_useState, 2),
|
2653 | isPressed = _useState2[0],
|
2654 | setIsPressed = _useState2[1];
|
2655 |
|
2656 | var prevPressedProp = useRef(props.isPressed);
|
2657 |
|
2658 | if (prevPressedProp.current !== props.isPressed) {
|
2659 | prevPressedProp.current = props.isPressed;
|
2660 | setIsPressed(props.isPressed);
|
2661 | }
|
2662 |
|
2663 | function toggleButton(event) {
|
2664 | setIsPressed(!isPressed);
|
2665 | props.onClick(event);
|
2666 | }
|
2667 |
|
2668 | var styleType = props.styleType,
|
2669 | size = props.size,
|
2670 | block = props.block,
|
2671 | isOutline = props.isOutline,
|
2672 | buttonProps = _objectWithoutProperties(props, ["styleType", "size", "block", "isOutline"]);
|
2673 |
|
2674 | var ToggleButtonType = isOutline ? StyledOutlineButton : StyledButton$4;
|
2675 | var styles = isOutline ? theme.buttonStyles.outlineButton : theme.buttonStyles.button;
|
2676 | return React.createElement(ToggleButtonType, _extends({}, buttonProps, {
|
2677 | onClick: toggleButton,
|
2678 | styleType: styleType,
|
2679 | size: size,
|
2680 | block: block,
|
2681 | isOutline: isOutline,
|
2682 | isPressed: isPressed,
|
2683 | variant: styles.variant[styleType],
|
2684 | "aria-pressed": isPressed
|
2685 | }), props.children);
|
2686 | }
|
2687 |
|
2688 | ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
2689 | onClick: PropTypes.func.isRequired,
|
2690 | children: PropTypes.node.isRequired,
|
2691 | styleType: PropTypes.string,
|
2692 | size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
|
2693 | block: PropTypes.bool,
|
2694 | isOutline: PropTypes.bool,
|
2695 | isPressed: PropTypes.bool
|
2696 | } : {};
|
2697 | ToggleButton.defaultProps = {
|
2698 | styleType: 'default',
|
2699 | size: 'default',
|
2700 | block: false,
|
2701 | isOutline: false,
|
2702 | isPressed: false
|
2703 | };
|
2704 |
|
2705 | var InlineContext = React.createContext(false);
|
2706 |
|
2707 | function _templateObject4$6() {
|
2708 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: ", ";\n flex-wrap: wrap;\n"]);
|
2709 |
|
2710 | _templateObject4$6 = function _templateObject4() {
|
2711 | return data;
|
2712 | };
|
2713 |
|
2714 | return data;
|
2715 | }
|
2716 |
|
2717 | function _templateObject3$7() {
|
2718 | var data = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding-bottom: ", ";\n padding-left: 11px;\n padding-right: 5px;\n padding-top: ", ";\n"]);
|
2719 |
|
2720 | _templateObject3$7 = function _templateObject3() {
|
2721 | return data;
|
2722 | };
|
2723 |
|
2724 | return data;
|
2725 | }
|
2726 |
|
2727 | function _templateObject2$a() {
|
2728 | var data = _taggedTemplateLiteral(["\n margin-left: auto;\n margin-right: 4px;\n"]);
|
2729 |
|
2730 | _templateObject2$a = function _templateObject2() {
|
2731 | return data;
|
2732 | };
|
2733 |
|
2734 | return data;
|
2735 | }
|
2736 |
|
2737 | function _templateObject$m() {
|
2738 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n display: ", ";\n position: absolute;\n z-index: 999;\n"]);
|
2739 |
|
2740 | _templateObject$m = function _templateObject() {
|
2741 | return data;
|
2742 | };
|
2743 |
|
2744 | return data;
|
2745 | }
|
2746 | var StyledPanel = styled.div(_templateObject$m(), function (props) {
|
2747 | return props.theme.colors.gray2;
|
2748 | }, function (props) {
|
2749 | return props.isOpen ? 'block' : 'none';
|
2750 | });
|
2751 | var StyledDismissButton = styled(DismissButton)(_templateObject2$a());
|
2752 | var Header$2 = styled.header(_templateObject3$7(), function (props) {
|
2753 | return props.hasHeaderContent ? '10px' : '0';
|
2754 | }, function (props) {
|
2755 | return props.hasHeaderContent ? '5px' : '0';
|
2756 | });
|
2757 | var StyledChildrenContainer = styled.div(_templateObject4$6(), function (props) {
|
2758 | return props.inline ? 'row' : 'column';
|
2759 | });
|
2760 |
|
2761 | function MenuPanel(props) {
|
2762 | function onEscape(_ref) {
|
2763 | var keyCode = _ref.keyCode;
|
2764 |
|
2765 | if (keyCode === 27) {
|
2766 | props.onClose();
|
2767 | }
|
2768 | }
|
2769 |
|
2770 | useEffect(function () {
|
2771 | document.addEventListener('keydown', onEscape);
|
2772 | return function removeKeydownListener() {
|
2773 | document.removeEventListener('keydown', onEscape);
|
2774 | };
|
2775 | });
|
2776 |
|
2777 | var children = props.children,
|
2778 | headerContent = props.headerContent,
|
2779 | isOpen = props.isOpen,
|
2780 | onClose = props.onClose,
|
2781 | other = _objectWithoutProperties(props, ["children", "headerContent", "isOpen", "onClose"]);
|
2782 |
|
2783 | var hasHeaderContent = !!headerContent;
|
2784 | var inline = useContext(InlineContext);
|
2785 | return React.createElement(StyledPanel, _extends({
|
2786 | isOpen: isOpen
|
2787 | }, other), React.createElement(Header$2, {
|
2788 | hasHeaderContent: hasHeaderContent
|
2789 | }, hasHeaderContent && React.createElement("span", null, headerContent), React.createElement(StyledDismissButton, {
|
2790 | onClick: onClose
|
2791 | })), React.createElement(StyledChildrenContainer, {
|
2792 | inline: inline
|
2793 | }, children));
|
2794 | }
|
2795 |
|
2796 | MenuPanel.propTypes = process.env.NODE_ENV !== "production" ? {
|
2797 | children: PropTypes.any.isRequired,
|
2798 | headerContent: PropTypes.node,
|
2799 | isOpen: PropTypes.bool,
|
2800 | onClose: PropTypes.func.isRequired
|
2801 | } : {};
|
2802 | MenuPanel.defaultProps = {
|
2803 | headerContent: null,
|
2804 | isOpen: false
|
2805 | };
|
2806 |
|
2807 | function _templateObject3$8() {
|
2808 | var data = _taggedTemplateLiteral(["\n padding: 15px 20px 0px 20px;\n"]);
|
2809 |
|
2810 | _templateObject3$8 = function _templateObject3() {
|
2811 | return data;
|
2812 | };
|
2813 |
|
2814 | return data;
|
2815 | }
|
2816 |
|
2817 | function _templateObject2$b() {
|
2818 | var data = _taggedTemplateLiteral(["\n padding-left: 10px;\n"]);
|
2819 |
|
2820 | _templateObject2$b = function _templateObject2() {
|
2821 | return data;
|
2822 | };
|
2823 |
|
2824 | return data;
|
2825 | }
|
2826 |
|
2827 | function _templateObject$n() {
|
2828 | var data = _taggedTemplateLiteral(["\n padding-top: ", ";\n padding-bottom: ", ";\n border-bottom: ", ";\n"]);
|
2829 |
|
2830 | _templateObject$n = function _templateObject() {
|
2831 | return data;
|
2832 | };
|
2833 |
|
2834 | return data;
|
2835 | }
|
2836 | var StyledMenuSection = styled.section(_templateObject$n(), function (props) {
|
2837 | return !props.isFirst && !props.inline && !props.isOnlySection ? '20px' : '0px';
|
2838 | }, function (props) {
|
2839 | return props.isLast ? '0px' : '20px';
|
2840 | }, function (props) {
|
2841 | return !props.isLast && !props.inline ? "1px solid ".concat(props.theme.colors.gray5) : 'none';
|
2842 | });
|
2843 | var StyledHeader = styled.header(_templateObject2$b());
|
2844 | var StyledChildrenContainer$1 = styled.section(_templateObject3$8());
|
2845 |
|
2846 | function MenuSection(props) {
|
2847 | var title = props.title,
|
2848 | children = props.children,
|
2849 | isLast = props.isLast,
|
2850 | isFirst = props.isFirst,
|
2851 | isOnlySection = props.isOnlySection,
|
2852 | other = _objectWithoutProperties(props, ["title", "children", "isLast", "isFirst", "isOnlySection"]);
|
2853 |
|
2854 | var inline = useContext(InlineContext);
|
2855 | return React.createElement(StyledMenuSection, _extends({
|
2856 | isLast: isLast,
|
2857 | isFirst: isFirst,
|
2858 | inline: inline,
|
2859 | isOnlySection: isOnlySection
|
2860 | }, other), title && React.createElement(StyledHeader, {
|
2861 | "aria-label": title
|
2862 | }, title), children && React.createElement(StyledChildrenContainer$1, null, children));
|
2863 | }
|
2864 |
|
2865 | MenuSection.propTypes = process.env.NODE_ENV !== "production" ? {
|
2866 | title: PropTypes.string,
|
2867 | children: PropTypes.any,
|
2868 | isLast: PropTypes.bool,
|
2869 | isFirst: PropTypes.bool,
|
2870 | isOnlySection: PropTypes.bool
|
2871 | } : {};
|
2872 | MenuSection.defaultProps = {
|
2873 | title: undefined,
|
2874 | children: undefined,
|
2875 | isLast: false,
|
2876 | isFirst: false,
|
2877 | isOnlySection: false
|
2878 | };
|
2879 |
|
2880 | function _templateObject$o() {
|
2881 | var data = _taggedTemplateLiteral(["\n background-color: black;\n bottom: 0;\n cursor: auto;\n left: 0;\n opacity: 0.5;\n position: fixed;\n right: 0;\n top: 0;\n z-index: auto;\n display: ", ";\n"]);
|
2882 |
|
2883 | _templateObject$o = function _templateObject() {
|
2884 | return data;
|
2885 | };
|
2886 |
|
2887 | return data;
|
2888 | }
|
2889 | var Backdrop$1 = styled.div(_templateObject$o(), function (props) {
|
2890 | return props.isMenuOpen ? 'inherit' : 'none';
|
2891 | });
|
2892 |
|
2893 | function Menu(props) {
|
2894 | var _useState = useState(false),
|
2895 | _useState2 = _slicedToArray(_useState, 2),
|
2896 | isMenuOpen = _useState2[0],
|
2897 | setIsMenuOpen = _useState2[1];
|
2898 |
|
2899 | function toggleMenu() {
|
2900 | setIsMenuOpen(!isMenuOpen);
|
2901 | }
|
2902 |
|
2903 | function closeMenu() {
|
2904 | setIsMenuOpen(false);
|
2905 | }
|
2906 |
|
2907 | var inline = props.inline,
|
2908 | children = props.children,
|
2909 | buttonContent = props.buttonContent,
|
2910 | openButtonType = props.openButtonType,
|
2911 | rootClose = props.rootClose,
|
2912 | hasBackdrop = props.hasBackdrop,
|
2913 | headerContent = props.headerContent,
|
2914 | other = _objectWithoutProperties(props, ["inline", "children", "buttonContent", "openButtonType", "rootClose", "hasBackdrop", "headerContent"]);
|
2915 |
|
2916 | return React.createElement(RootCloseWrapper, {
|
2917 | onRootClose: closeMenu,
|
2918 | disabled: !rootClose
|
2919 | }, React.createElement("div", other, hasBackdrop && React.createElement(Backdrop$1, {
|
2920 | isMenuOpen: isMenuOpen,
|
2921 | onClick: closeMenu
|
2922 | }), React.createElement(ToggleButton, {
|
2923 | onClick: toggleMenu,
|
2924 | isPressed: isMenuOpen,
|
2925 | styleType: openButtonType,
|
2926 | "aria-expanded": isMenuOpen
|
2927 | }, buttonContent), React.createElement(InlineContext.Provider, {
|
2928 | value: inline
|
2929 | }, React.createElement(MenuPanel, {
|
2930 | headerContent: headerContent,
|
2931 | isOpen: isMenuOpen,
|
2932 | onClose: closeMenu
|
2933 | }, children))));
|
2934 | }
|
2935 |
|
2936 | Menu.MenuSection = MenuSection;
|
2937 | Menu.propTypes = process.env.NODE_ENV !== "production" ? {
|
2938 | children: PropTypes.any.isRequired,
|
2939 | buttonContent: PropTypes.any.isRequired,
|
2940 | openButtonType: PropTypes.string,
|
2941 | rootClose: PropTypes.bool,
|
2942 | inline: PropTypes.bool,
|
2943 | hasBackdrop: PropTypes.bool,
|
2944 | headerContent: PropTypes.node
|
2945 | } : {};
|
2946 | Menu.defaultProps = {
|
2947 | rootClose: false,
|
2948 | openButtonType: 'default',
|
2949 | inline: false,
|
2950 | hasBackdrop: false,
|
2951 | headerContent: undefined
|
2952 | };
|
2953 |
|
2954 | function _templateObject$p() {
|
2955 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: ", ";\n color: ", ";\n display: inline-block;\n font-size: inherit;\n line-height: ", ";\n padding: 10px;\n text-align: left;\n z-index: 1;\n\n &:focus {\n outline: none;\n }\n\n @media (min-width: ", ") {\n background-color: ", ";\n border: ", ";\n border-bottom-color: ", ";\n box-shadow: none;\n color: ", ";\n padding: 10px 15px;\n margin: 0 2px 0px 0;\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n }\n"]);
|
2956 |
|
2957 | _templateObject$p = function _templateObject() {
|
2958 | return data;
|
2959 | };
|
2960 |
|
2961 | return data;
|
2962 | }
|
2963 | var TabButton = styled.button(_templateObject$p(), function (props) {
|
2964 | return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
|
2965 | }, function (props) {
|
2966 | return props.theme.colors.gray4;
|
2967 | }, function (props) {
|
2968 | return props.selected ? '0 6px 12px rgba(0, 0, 0, 0.175)' : 'none';
|
2969 | }, function (props) {
|
2970 | return props.selected ? props.theme.colors.black : props.theme.colors.primary;
|
2971 | }, function (props) {
|
2972 | return props.theme.sizes.baseLineHeight;
|
2973 | }, function (props) {
|
2974 | return props.theme.screenSize.desktop;
|
2975 | }, function (props) {
|
2976 | return props.theme.colors.white;
|
2977 | }, function (props) {
|
2978 | return props.selected ? "1px solid ".concat(props.theme.colors.gray4) : '1px solid transparent';
|
2979 | }, function (props) {
|
2980 | return props.selected ? ' transparent' : "".concat(props.theme.colors.gray4);
|
2981 | }, function (props) {
|
2982 | return props.selected ? props.theme.colors.black : props.theme.colors.primary;
|
2983 | }, function (props) {
|
2984 | return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
|
2985 | });
|
2986 | var AriaAnnouncer = screenReaderOnly('div');
|
2987 |
|
2988 | function Tab(_ref) {
|
2989 | var _context;
|
2990 |
|
2991 | var name = _ref.name,
|
2992 | selected = _ref.selected,
|
2993 | action = _ref.action,
|
2994 | children = _ref.children,
|
2995 | simpleName = _ref.simpleName,
|
2996 | announcerText = _ref.announcerText,
|
2997 | props = _objectWithoutProperties(_ref, ["name", "selected", "action", "children", "simpleName", "announcerText"]);
|
2998 |
|
2999 | return React.createElement(TabButton, _extends({
|
3000 | onClick: function onClick() {
|
3001 | return action(name, children, simpleName, announcerText);
|
3002 | },
|
3003 | selected: selected,
|
3004 | "aria-label": "".concat(simpleName || name, " tab"),
|
3005 | "aria-selected": selected,
|
3006 | role: "tab"
|
3007 | }, props), selected && (simpleName.length > 0 || announcerText.length > 0) && React.createElement(AriaAnnouncer, {
|
3008 | id: "announcer",
|
3009 | "aria-live": "assertive"
|
3010 | }, _concatInstanceProperty(_context = "".concat(simpleName, " ")).call(_context, announcerText)), name);
|
3011 | }
|
3012 |
|
3013 | Tab.propTypes = process.env.NODE_ENV !== "production" ? {
|
3014 | |
3015 |
|
3016 |
|
3017 | name: PropTypes.node.isRequired,
|
3018 |
|
3019 | |
3020 |
|
3021 |
|
3022 | selected: PropTypes.bool,
|
3023 |
|
3024 | |
3025 |
|
3026 |
|
3027 | action: PropTypes.func,
|
3028 |
|
3029 | |
3030 |
|
3031 |
|
3032 | children: PropTypes.node,
|
3033 |
|
3034 | |
3035 |
|
3036 |
|
3037 | simpleName: PropTypes.string,
|
3038 |
|
3039 | |
3040 |
|
3041 |
|
3042 | announcerText: PropTypes.string
|
3043 | } : {};
|
3044 | Tab.defaultProps = {
|
3045 | selected: false,
|
3046 | action: _noop,
|
3047 | children: undefined,
|
3048 | simpleName: '',
|
3049 | announcerText: ''
|
3050 | };
|
3051 |
|
3052 | function _templateObject2$c() {
|
3053 | var data = _taggedTemplateLiteral(["\n margin-top: -1px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"]);
|
3054 |
|
3055 | _templateObject2$c = function _templateObject2() {
|
3056 | return data;
|
3057 | };
|
3058 |
|
3059 | return data;
|
3060 | }
|
3061 |
|
3062 | function _templateObject$q() {
|
3063 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: inherit;\n overflow: hidden;\n @media (max-width: ", ") {\n width: 100%;\n }\n @media (min-width: ", ") {\n flex-direction: row;\n justify-content: flex-start;\n }\n"]);
|
3064 |
|
3065 | _templateObject$q = function _templateObject() {
|
3066 | return data;
|
3067 | };
|
3068 |
|
3069 | return data;
|
3070 | }
|
3071 | var TabList = styled.div(_templateObject$q(), function (props) {
|
3072 | return props.theme.screenSize.desktop;
|
3073 | }, function (props) {
|
3074 | return props.theme.screenSize.desktop;
|
3075 | });
|
3076 | var TabContent = styled.div(_templateObject2$c(), function (props) {
|
3077 | return props.theme.colors.white;
|
3078 | }, function (props) {
|
3079 | return props.theme.colors.gray4;
|
3080 | });
|
3081 |
|
3082 | function TabPanel(props) {
|
3083 | var _context;
|
3084 |
|
3085 | var children = props.children,
|
3086 | selectedKey = props.selectedKey,
|
3087 | tabChanged = props.tabChanged,
|
3088 | canTabChange = props.canTabChange;
|
3089 |
|
3090 | var _useState = useState(selectedKey),
|
3091 | _useState2 = _slicedToArray(_useState, 2),
|
3092 | value = _useState2[0],
|
3093 | setValue = _useState2[1];
|
3094 |
|
3095 | var selectedIndex = _findIndex(React.Children.toArray(children), function (child) {
|
3096 | var key = selectedKey || value || value.key;
|
3097 | return child.props.name.key ? child.props.name.key === key : child.props.name === key;
|
3098 | });
|
3099 |
|
3100 | if (selectedIndex < 0) {
|
3101 | selectedIndex = 0;
|
3102 | }
|
3103 |
|
3104 | var elements = _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, index) {
|
3105 | return React.cloneElement(child, {
|
3106 | selected: index === selectedIndex,
|
3107 | action: function action(header) {
|
3108 | var canChange = canTabChange(header);
|
3109 |
|
3110 | if (canChange) {
|
3111 | setValue(header);
|
3112 | tabChanged(header);
|
3113 | }
|
3114 | }
|
3115 | });
|
3116 | });
|
3117 |
|
3118 | return React.createElement(React.Fragment, null, React.createElement(TabList, {
|
3119 | role: "tablist"
|
3120 | }, elements), React.createElement(TabContent, {
|
3121 | role: "tabpanel"
|
3122 | }, elements[selectedIndex].props.children));
|
3123 | }
|
3124 |
|
3125 | function childrenRule(props, propName, component) {
|
3126 | var children = props[propName];
|
3127 |
|
3128 | if (!_Array$isArray(children)) {
|
3129 | children = [children];
|
3130 | }
|
3131 |
|
3132 | if (!_everyInstanceProperty(children).call(children, function (child) {
|
3133 | return child.type.name === 'Tab' || child.type.target === Tab;
|
3134 | })) {
|
3135 | return new Error('Tab Panel only accepts Tabs as direct descendants.');
|
3136 | }
|
3137 |
|
3138 | return null;
|
3139 | }
|
3140 |
|
3141 | TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
|
3142 | |
3143 |
|
3144 |
|
3145 | children: childrenRule,
|
3146 | selectedKey: PropTypes.any,
|
3147 |
|
3148 | |
3149 |
|
3150 |
|
3151 | canTabChange: PropTypes.func,
|
3152 |
|
3153 | |
3154 |
|
3155 |
|
3156 | tabChanged: PropTypes.func
|
3157 | } : {};
|
3158 | TabPanel.defaultProps = {
|
3159 | children: undefined,
|
3160 | selectedKey: '',
|
3161 | tabChanged: _noop,
|
3162 | canTabChange: function canTabChange() {
|
3163 | return true;
|
3164 | }
|
3165 | };
|
3166 | TabPanel.Tab = Tab;
|
3167 |
|
3168 | function _templateObject$r() {
|
3169 | var data = _taggedTemplateLiteral(["\n > * {\n display: block;\n padding: 20px;\n\n &:nth-child(even) {\n background-color: ", ";\n }\n\n &:nth-child(odd) {\n background-color: ", ";\n }\n }\n"]);
|
3170 |
|
3171 | _templateObject$r = function _templateObject() {
|
3172 | return data;
|
3173 | };
|
3174 |
|
3175 | return data;
|
3176 | }
|
3177 | var StripedContainerWrapper = styled.div(_templateObject$r(), function (props) {
|
3178 | return props.evenColor;
|
3179 | }, function (props) {
|
3180 | return props.oddColor;
|
3181 | });
|
3182 |
|
3183 | function StripedContainer(props) {
|
3184 | var _context;
|
3185 |
|
3186 | var theme = useTheme();
|
3187 | return React.createElement(StripedContainerWrapper, {
|
3188 | oddColor: theme.colors.gray2,
|
3189 | evenColor: theme.colors.gray4
|
3190 | }, _mapInstanceProperty(_context = React.Children).call(_context, props.children, function (child) {
|
3191 | return React.cloneElement(child);
|
3192 | }));
|
3193 | }
|
3194 |
|
3195 | StripedContainer.propTypes = process.env.NODE_ENV !== "production" ? {
|
3196 | children: PropTypes.node
|
3197 | } : {};
|
3198 | StripedContainer.defaultProps = {
|
3199 | children: undefined
|
3200 | };
|
3201 |
|
3202 | function _templateObject4$7() {
|
3203 | var data = _taggedTemplateLiteral([""]);
|
3204 |
|
3205 | _templateObject4$7 = function _templateObject4() {
|
3206 | return data;
|
3207 | };
|
3208 |
|
3209 | return data;
|
3210 | }
|
3211 |
|
3212 | function _templateObject3$9() {
|
3213 | var data = _taggedTemplateLiteral([""]);
|
3214 |
|
3215 | _templateObject3$9 = function _templateObject3() {
|
3216 | return data;
|
3217 | };
|
3218 |
|
3219 | return data;
|
3220 | }
|
3221 |
|
3222 | function _templateObject2$d() {
|
3223 | var data = _taggedTemplateLiteral([""]);
|
3224 |
|
3225 | _templateObject2$d = function _templateObject2() {
|
3226 | return data;
|
3227 | };
|
3228 |
|
3229 | return data;
|
3230 | }
|
3231 |
|
3232 | function _templateObject$s() {
|
3233 | var data = _taggedTemplateLiteral(["\n border-collapse: collapse;\n border: 0;\n border-spacing: 0;\n margin: 0 0 25px 0;\n padding: 0;\n width: 100%;\n\n caption {\n padding-top: 8px;\n padding-bottom: 8px;\n color: ", ";\n font-size: 1.3em;\n margin: 0.5em 0;\n text-align: left;\n }\n\n thead th {\n border-bottom: 2px solid ", ";\n }\n\n tbody tr:not(:first-child) {\n th,\n td {\n border-top: 1px solid ", ";\n }\n }\n\n th {\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n sans-serif;\n font-weight: bold;\n line-height: ", ";\n padding: ", ";\n text-align: left;\n vertical-align: bottom;\n }\n\n td {\n line-height: ", ";\n padding: ", ";\n vertical-align: top;\n }\n\n && tbody {\n ", ";\n\n th {\n vertical-align: top;\n }\n }\n\n && tbody {\n ", ";\n }\n"]);
|
3234 |
|
3235 | _templateObject$s = function _templateObject() {
|
3236 | return data;
|
3237 | };
|
3238 |
|
3239 | return data;
|
3240 | }
|
3241 | var TableBase = styled.table(_templateObject$s(), function (props) {
|
3242 | return props.theme.colors.gray8;
|
3243 | }, function (props) {
|
3244 | return props.theme.colors.gray4;
|
3245 | }, function (props) {
|
3246 | return props.theme.colors.gray4;
|
3247 | }, function (props) {
|
3248 | return props.theme.sizes.baseLineHeight;
|
3249 | }, function (props) {
|
3250 | return props.cellPadding;
|
3251 | }, function (props) {
|
3252 | return props.theme.sizes.baseLineHeight;
|
3253 | }, function (props) {
|
3254 | return props.cellPadding;
|
3255 | }, function (props) {
|
3256 | return props.hasStripes && css(["tr:nth-of-type(odd){background-color:", ";}"], props.theme.colors.gray0);
|
3257 | }, function (props) {
|
3258 | return props.hasHover && css(["tr:hover{background-color:", ";}"], props.theme.colors.gray1);
|
3259 | });
|
3260 |
|
3261 | function Table(props) {
|
3262 | var isCondensed = props.isCondensed,
|
3263 | isRoomy = props.isRoomy,
|
3264 | rest = _objectWithoutProperties(props, ["isCondensed", "isRoomy"]);
|
3265 |
|
3266 | var cellPadding = '8px';
|
3267 | cellPadding = isCondensed ? '5px' : cellPadding;
|
3268 | cellPadding = isRoomy ? '12px' : cellPadding;
|
3269 | return React.createElement(TableBase, _extends({
|
3270 | cellPadding: cellPadding
|
3271 | }, rest));
|
3272 | }
|
3273 |
|
3274 |
|
3275 | var TableRow = styled.tr(_templateObject2$d());
|
3276 | var TableBodyCell = styled.td(_templateObject3$9());
|
3277 | var TableHeaderCell = styled.th(_templateObject4$7());
|
3278 | Table.Row = TableRow;
|
3279 | Table.Cell = TableBodyCell;
|
3280 | Table.HeaderCell = TableHeaderCell;
|
3281 | Table.propTypes = process.env.NODE_ENV !== "production" ? {
|
3282 |
|
3283 | hasStripes: PropTypes.bool,
|
3284 |
|
3285 |
|
3286 | hasHover: PropTypes.bool,
|
3287 |
|
3288 |
|
3289 | isCondensed: PropTypes.bool,
|
3290 |
|
3291 |
|
3292 | isRoomy: PropTypes.bool
|
3293 | } : {};
|
3294 | Table.defaultProps = {
|
3295 | hasStripes: false,
|
3296 | hasHover: false,
|
3297 | isCondensed: false,
|
3298 | isRoomy: false
|
3299 | };
|
3300 |
|
3301 | function _templateObject$t() {
|
3302 | var data = _taggedTemplateLiteral(["\n tbody {\n th {\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n sans-serif;\n font-weight: normal;\n }\n }\n\n &&& {\n @media (max-width: ", ") {\n background-color: ", ";\n\n thead {\n border: none;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n tr {\n background-color: ", ";\n box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);\n display: block;\n margin: 0.625em;\n padding: 0.35em;\n }\n\n td,\n tbody th {\n border-top: 1px solid ", ";\n display: flex;\n justify-content: space-between;\n padding: 0.625em;\n text-align: right;\n\n &:before {\n content: attr(data-label);\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n sans-serif;\n font-weight: bold;\n margin-right: 2em;\n max-width: 25%;\n text-align: left;\n }\n\n &:first-child {\n border-top: 0;\n }\n\n &:last-child {\n border-bottom: 0;\n }\n }\n }\n }\n"]);
|
3303 |
|
3304 | _templateObject$t = function _templateObject() {
|
3305 | return data;
|
3306 | };
|
3307 |
|
3308 | return data;
|
3309 | }
|
3310 | var TableBase$1 = styled(Table)(_templateObject$t(), function (props) {
|
3311 | return props.theme.screenSize.phone;
|
3312 | }, function (props) {
|
3313 | return props.theme.colors.gray2;
|
3314 | }, function (props) {
|
3315 | return props.theme.colors.white;
|
3316 | }, function (props) {
|
3317 | return props.theme.colors.gray4;
|
3318 | });
|
3319 |
|
3320 | function ResponsiveTable(props) {
|
3321 | return React.createElement(TableBase$1, props);
|
3322 | }
|
3323 |
|
3324 | var ValidationContext = React.createContext('default');
|
3325 |
|
3326 | function _templateObject$u() {
|
3327 | var data = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n margin-bottom: 25px;\n\n >[role=\"group\"] {\n margin-bottom: 0;\n }\n\n select {\n border-color: ", ";\n box-shadow: ", ";\n }\n\n input:focus,\n select:focus {\n border-color: ", ";\n box-shadow: ", ";\n }\n\n ", "\n }\n\n ", ";\n"]);
|
3328 |
|
3329 | _templateObject$u = function _templateObject() {
|
3330 | return data;
|
3331 | };
|
3332 |
|
3333 | return data;
|
3334 | }
|
3335 | var FlexControl = styled.div(_templateObject$u(), function (props) {
|
3336 | return props.textColor;
|
3337 | }, function (props) {
|
3338 | return props.borderColor;
|
3339 | }, function (props) {
|
3340 | return props.boxShadow;
|
3341 | }, function (props) {
|
3342 | return props.focusBorderColor;
|
3343 | }, function (props) {
|
3344 | return props.focusBoxShadow;
|
3345 | }, function (props) {
|
3346 | return props.hasValidationBorder && props.validationState !== 'default' && css(["border-bottom:2px solid ", ";box-shadow:inset 0 7px 6px -6px ", ";padding:15px ", ";margin-left:-", ";margin-right:-", ";"], props.theme.colors.gray4, props.textColor, props.borderOffset, props.borderOffset, props.borderOffset);
|
3347 | }, function (props) {
|
3348 | return props.layoutOrientation === 'inline' && css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
|
3349 | });
|
3350 |
|
3351 | function Control(props) {
|
3352 | var validationState = props.validationState,
|
3353 | hasValidationBorder = props.hasValidationBorder,
|
3354 | orientation = props.orientation,
|
3355 | borderOffset = props.borderOffset,
|
3356 | children = props.children,
|
3357 | other = _objectWithoutProperties(props, ["validationState", "hasValidationBorder", "orientation", "borderOffset", "children"]);
|
3358 |
|
3359 | var theme = useTheme();
|
3360 | var textColor = theme.validationTextColor[validationState];
|
3361 | return React.createElement(OrientationContext.Provider, {
|
3362 | value: orientation
|
3363 | }, React.createElement(FlexControl, _extends({
|
3364 | textColor: textColor,
|
3365 | borderOffset: borderOffset,
|
3366 | validationState: validationState
|
3367 | }, theme.validationInputColor[validationState], {
|
3368 | layoutOrientation: orientation,
|
3369 | hasValidationBorder: hasValidationBorder
|
3370 | }, other), React.createElement(ValidationContext.Provider, {
|
3371 | value: validationState
|
3372 | }, children)));
|
3373 | }
|
3374 |
|
3375 | Control.propTypes = process.env.NODE_ENV !== "production" ? {
|
3376 | orientation: PropTypes.oneOf(['stacked', 'inline']),
|
3377 | validationState: PropTypes.oneOf(['default', 'success', 'warning', 'danger']),
|
3378 |
|
3379 |
|
3380 | hasValidationBorder: PropTypes.bool,
|
3381 |
|
3382 |
|
3383 | borderOffset: PropTypes.string,
|
3384 | children: PropTypes.node
|
3385 | } : {};
|
3386 | Control.defaultProps = {
|
3387 | orientation: 'stacked',
|
3388 | validationState: 'default',
|
3389 | hasValidationBorder: false,
|
3390 | borderOffset: '15px',
|
3391 | children: null
|
3392 | };
|
3393 |
|
3394 | function _templateObject2$e() {
|
3395 | var data = _taggedTemplateLiteral(["\n align-items: center;\n color: inherit;\n display: inline-flex;\n margin-top: 5px;\n margin-bottom: 10px;\n width: 100%;\n"]);
|
3396 |
|
3397 | _templateObject2$e = function _templateObject2() {
|
3398 | return data;
|
3399 | };
|
3400 |
|
3401 | return data;
|
3402 | }
|
3403 |
|
3404 | function _templateObject$v() {
|
3405 | var data = _taggedTemplateLiteral(["\n align-self: flex-start;\n font-size: 35px;\n margin-right: 5px;\n"]);
|
3406 |
|
3407 | _templateObject$v = function _templateObject() {
|
3408 | return data;
|
3409 | };
|
3410 |
|
3411 | return data;
|
3412 | }
|
3413 | var ValidationIcon = styled(Icon)(_templateObject$v());
|
3414 | var HelpText = styled.div(_templateObject2$e());
|
3415 |
|
3416 | function AdditionalHelp(_ref) {
|
3417 | var children = _ref.children,
|
3418 | hasValidationIcon = _ref.hasValidationIcon,
|
3419 | props = _objectWithoutProperties(_ref, ["children", "hasValidationIcon"]);
|
3420 |
|
3421 | var theme = useTheme();
|
3422 | var validationState = React.useContext(ValidationContext);
|
3423 | return React.createElement(HelpText, props, hasValidationIcon && children && validationState !== 'default' && React.createElement(ValidationIcon, {
|
3424 | "aria-hidden": "true",
|
3425 | name: theme.validationIconName[validationState]
|
3426 | }), children);
|
3427 | }
|
3428 |
|
3429 | AdditionalHelp.propTypes = process.env.NODE_ENV !== "production" ? {
|
3430 | children: PropTypes.any,
|
3431 |
|
3432 |
|
3433 | hasValidationIcon: PropTypes.bool
|
3434 | } : {};
|
3435 | AdditionalHelp.defaultProps = {
|
3436 | children: undefined,
|
3437 | hasValidationIcon: true
|
3438 | };
|
3439 |
|
3440 | function _templateObject$w() {
|
3441 | var data = _taggedTemplateLiteral(["\n color: ", ";\n cursor: pointer;\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: ", ";\n font-weight: bold;\n line-height: ", ";\n margin-bottom: 5px;\n display: inline-block;\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n @media (min-width: ", ") {\n margin-right: 20px;\n }\n"]);
|
3442 |
|
3443 | _templateObject$w = function _templateObject() {
|
3444 | return data;
|
3445 | };
|
3446 |
|
3447 | return data;
|
3448 | }
|
3449 | var Label = styled.label(_templateObject$w(), function (props) {
|
3450 | return props.theme.colors.gray9;
|
3451 | }, function (props) {
|
3452 | return props.theme.sizes.baseFontSize;
|
3453 | }, function (props) {
|
3454 | return props.theme.sizes.baseLineHeight;
|
3455 | }, function (props) {
|
3456 | return props.theme.screenSize.tablet;
|
3457 | });
|
3458 |
|
3459 | function _templateObject$x() {
|
3460 | var data = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 2px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: normal;\n height: 39px;\n line-height: ", ";\n min-width: 0;\n padding: 6px 12px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n width: 100%;\n\n &:focus {\n border-color: ", ";\n box-shadow: ", ";\n outline: 0;\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n &:read-only {\n background-color: ", ";\n cursor: text;\n }\n"]);
|
3461 |
|
3462 | _templateObject$x = function _templateObject() {
|
3463 | return data;
|
3464 | };
|
3465 |
|
3466 | return data;
|
3467 | }
|
3468 | var InputBase = styled.input(_templateObject$x(), function (props) {
|
3469 | return props.borderColor;
|
3470 | }, function (props) {
|
3471 | return props.boxShadow;
|
3472 | }, function (props) {
|
3473 | return props.theme.colors.black;
|
3474 | }, function (props) {
|
3475 | return props.theme.sizes.baseFontSize;
|
3476 | }, function (props) {
|
3477 | return props.theme.sizes.baseLineHeight;
|
3478 | }, function (props) {
|
3479 | return props.focusBorderColor;
|
3480 | }, function (props) {
|
3481 | return props.focusBoxShadow;
|
3482 | }, function (props) {
|
3483 | return props.theme.colors.gray2;
|
3484 | }, function (props) {
|
3485 | return props.theme.colors.gray2;
|
3486 | });
|
3487 |
|
3488 | function _templateObject4$8() {
|
3489 | var data = _taggedTemplateLiteral(["\n display: flex;\n"]);
|
3490 |
|
3491 | _templateObject4$8 = function _templateObject4() {
|
3492 | return data;
|
3493 | };
|
3494 |
|
3495 | return data;
|
3496 | }
|
3497 |
|
3498 | function _templateObject3$a() {
|
3499 | var data = _taggedTemplateLiteral(["\n border-bottom-left-radius: 0;\n border-left: none;\n border-top-left-radius: 0;\n"]);
|
3500 |
|
3501 | _templateObject3$a = function _templateObject3() {
|
3502 | return data;
|
3503 | };
|
3504 |
|
3505 | return data;
|
3506 | }
|
3507 |
|
3508 | function _templateObject2$f() {
|
3509 | var data = _taggedTemplateLiteral(["\n border-bottom-right-radius: 0;\n border-right: none;\n border-top-right-radius: 0;\n"]);
|
3510 |
|
3511 | _templateObject2$f = function _templateObject2() {
|
3512 | return data;
|
3513 | };
|
3514 |
|
3515 | return data;
|
3516 | }
|
3517 |
|
3518 | function _templateObject$y() {
|
3519 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n height: 39px;\n justify-content: center;\n line-height: 1;\n margin: 0;\n outline: 0;\n padding: 6px 11px;\n"]);
|
3520 |
|
3521 | _templateObject$y = function _templateObject() {
|
3522 | return data;
|
3523 | };
|
3524 |
|
3525 | return data;
|
3526 | }
|
3527 | var defaultBorderRadius = '2px';
|
3528 | var AddOn = styled.button(_templateObject$y(), function (props) {
|
3529 | return props.addOnBgColor;
|
3530 | }, function (props) {
|
3531 | return props.addOnBgColor === props.theme.colors.gray3 ? props.theme.colors.gray5 : props.addOnBgColor;
|
3532 | }, defaultBorderRadius, function (props) {
|
3533 | return props.addOnTextColor;
|
3534 | });
|
3535 | var Prepend = styled(AddOn)(_templateObject2$f());
|
3536 | var Append = styled(AddOn)(_templateObject3$a());
|
3537 | var InputWrapper = styled.div(_templateObject4$8());
|
3538 |
|
3539 | function _templateObject$z() {
|
3540 | var data = _taggedTemplateLiteral(["\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n display: table-cell;\n -webkit-appearance: none;\n"]);
|
3541 |
|
3542 | _templateObject$z = function _templateObject() {
|
3543 | return data;
|
3544 | };
|
3545 |
|
3546 | return data;
|
3547 | }
|
3548 | var defaultBorderRadius$1 = '2px';
|
3549 | var TextboxBase = styled(InputBase)(_templateObject$z(), function (props) {
|
3550 | return props.hasPrepend ? '0' : defaultBorderRadius$1;
|
3551 | }, function (props) {
|
3552 | return props.hasAppend ? '0' : defaultBorderRadius$1;
|
3553 | }, function (props) {
|
3554 | return props.hasPrepend ? '0' : defaultBorderRadius$1;
|
3555 | }, function (props) {
|
3556 | return props.hasAppend ? '0' : defaultBorderRadius$1;
|
3557 | });
|
3558 | var Textbox = React.forwardRef(function Textbox(props, ref) {
|
3559 | var prependIconName = props.prependIconName,
|
3560 | appendIconName = props.appendIconName,
|
3561 | additionalTextProps = _objectWithoutProperties(props, ["prependIconName", "appendIconName"]);
|
3562 |
|
3563 | var theme = useTheme();
|
3564 | var validationState = React.useContext(ValidationContext);
|
3565 | var inputRef = React.useRef();
|
3566 | React.useImperativeHandle(ref, function () {
|
3567 | return inputRef.current;
|
3568 | });
|
3569 | var hasPrepend = !!prependIconName;
|
3570 | var hasAppend = !!appendIconName;
|
3571 | var hasValidationState = validationState !== 'default';
|
3572 | var addOnTextColor = hasValidationState ? theme.colors.white : theme.colors.gray8;
|
3573 | var addOnBgColor = hasValidationState ? theme.validationTextColor[validationState] : theme.colors.gray3;
|
3574 |
|
3575 | function focusInput() {
|
3576 | inputRef.current.focus();
|
3577 | }
|
3578 |
|
3579 | return React.createElement(InputWrapper, null, hasPrepend && React.createElement(Prepend, {
|
3580 | addOnTextColor: addOnTextColor,
|
3581 | addOnBgColor: addOnBgColor,
|
3582 | "aria-hidden": "true",
|
3583 | onClick: focusInput
|
3584 | }, React.createElement(Icon, {
|
3585 | "aria-hidden": "true",
|
3586 | name: prependIconName,
|
3587 | size: 18
|
3588 | })), React.createElement(TextboxBase, _extends({
|
3589 | hasAppend: hasAppend,
|
3590 | hasPrepend: hasPrepend,
|
3591 | ref: inputRef
|
3592 | }, additionalTextProps, theme.validationInputColor[validationState])), hasAppend && React.createElement(Append, {
|
3593 | addOnTextColor: addOnTextColor,
|
3594 | addOnBgColor: addOnBgColor,
|
3595 | "aria-hidden": "true",
|
3596 | onClick: focusInput
|
3597 | }, React.createElement(Icon, {
|
3598 | "aria-hidden": "true",
|
3599 | name: appendIconName,
|
3600 | size: 18
|
3601 | })));
|
3602 | });
|
3603 | Textbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
3604 |
|
3605 | prependIconName: PropTypes.string,
|
3606 |
|
3607 |
|
3608 | appendIconName: PropTypes.string
|
3609 | } : {};
|
3610 | Textbox.defaultProps = {
|
3611 | prependIconName: undefined,
|
3612 | appendIconName: undefined
|
3613 | };
|
3614 |
|
3615 | function _templateObject$A() {
|
3616 | var data = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 2px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n font-size: ", ";\n font-weight: normal;\n line-height: ", ";\n min-width: 0;\n padding: 6px 12px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n\n &:focus {\n border-color: ", ";\n box-shadow: ", ";\n outline: 0;\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n &:read-only {\n background-color: ", ";\n cursor: text;\n }\n"]);
|
3617 |
|
3618 | _templateObject$A = function _templateObject() {
|
3619 | return data;
|
3620 | };
|
3621 |
|
3622 | return data;
|
3623 | }
|
3624 | var TextareaBase = styled.textarea(_templateObject$A(), function (props) {
|
3625 | return props.borderColor;
|
3626 | }, function (props) {
|
3627 | return props.boxShadow;
|
3628 | }, function (props) {
|
3629 | return props.theme.colors.black;
|
3630 | }, function (props) {
|
3631 | return props.theme.sizes.baseFontSize;
|
3632 | }, function (props) {
|
3633 | return props.theme.sizes.baseLineHeight;
|
3634 | }, function (props) {
|
3635 | return props.focusBorderColor;
|
3636 | }, function (props) {
|
3637 | return props.focusBoxShadow;
|
3638 | }, function (props) {
|
3639 | return props.theme.colors.gray2;
|
3640 | }, function (props) {
|
3641 | return props.theme.colors.gray2;
|
3642 | });
|
3643 | var Textarea = React.forwardRef(function Textarea(props, ref) {
|
3644 | var theme = useTheme();
|
3645 | var validationState = React.useContext(ValidationContext);
|
3646 | return React.createElement(TextareaBase, _extends({
|
3647 | ref: ref
|
3648 | }, props, theme.validationInputColor[validationState]));
|
3649 | });
|
3650 |
|
3651 | var inputMask = {
|
3652 | date: {
|
3653 | mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
|
3654 | pipe: createautoCorrectedDatePipe('mm/dd/yyyy'),
|
3655 | showMask: false,
|
3656 | keepCharPositions: true,
|
3657 | placeholderChar: "\u2000",
|
3658 | title: 'Enter month, day, and 4-digit year'
|
3659 | },
|
3660 | dollar: {
|
3661 | mask: createNumberMask({
|
3662 | prefix: '$'
|
3663 | })
|
3664 | },
|
3665 | phone: {
|
3666 | mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
|
3667 | showMask: false,
|
3668 | keepCharPositions: true,
|
3669 | placeholderChar: "\u2000",
|
3670 | title: 'Enter area code and phone number'
|
3671 | },
|
3672 | ssnum: {
|
3673 | mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
|
3674 | showMask: false,
|
3675 | keepCharPositions: true,
|
3676 | placeholderChar: "\u2000",
|
3677 | title: 'Enter 9-digit social security number'
|
3678 | },
|
3679 | zip: {
|
3680 | mask: [/\d/, /\d/, /\d/, /\d/, /\d/],
|
3681 | guide: false,
|
3682 | title: 'Enter 5-digit zip code'
|
3683 | }
|
3684 | };
|
3685 |
|
3686 | var MaskedTextbox = React.forwardRef(function MaskedTextbox(props, ref) {
|
3687 | var maskType = props.maskType,
|
3688 | customMask = props.customMask,
|
3689 | additionalTextProps = _objectWithoutProperties(props, ["maskType", "customMask"]);
|
3690 |
|
3691 | var inputRef = React.useRef();
|
3692 | React.useImperativeHandle(ref, function () {
|
3693 | return inputRef.current;
|
3694 | });
|
3695 | var maskArgs = maskType === 'custom' && customMask ? customMask : inputMask[maskType];
|
3696 | return React.createElement(MaskedInput, _extends({
|
3697 | render: function render(maskRef, textboxProps) {
|
3698 | var setRef = function setRef(inputElement) {
|
3699 |
|
3700 | maskRef(inputElement);
|
3701 | inputRef.current = inputElement;
|
3702 | };
|
3703 |
|
3704 | return React.createElement(Textbox, _extends({
|
3705 | ref: setRef
|
3706 | }, textboxProps));
|
3707 | }
|
3708 | }, maskArgs, {
|
3709 | type: "text"
|
3710 | }, additionalTextProps));
|
3711 | });
|
3712 | MaskedTextbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
3713 |
|
3714 | maskType: PropTypes.oneOf(['date', 'dollar', 'phone', 'ssnum', 'zip', 'custom']).isRequired,
|
3715 |
|
3716 |
|
3717 | customMask: PropTypes.shape({
|
3718 | mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
|
3719 | guide: PropTypes.bool,
|
3720 | placeholderChar: PropTypes.string,
|
3721 | keepCharPositions: PropTypes.bool,
|
3722 | pipe: PropTypes.func,
|
3723 | showMask: PropTypes.bool
|
3724 | })
|
3725 | } : {};
|
3726 | MaskedTextbox.defaultProps = {
|
3727 | customMask: undefined
|
3728 | };
|
3729 |
|
3730 | function _templateObject$B() {
|
3731 | var data = _taggedTemplateLiteral(["\n .es-button__display {\n background-color: ", ";\n box-shadow: 0 4px 0 0 ", ";\n color: ", ";\n transition: background-color 120ms linear, color 120ms linear;\n }\n\n &:hover .es-button__display {\n background-color: ", ";\n box-shadow: 0 4px 0 0 ", ";\n color: ", ";\n }\n"]);
|
3732 |
|
3733 | _templateObject$B = function _templateObject() {
|
3734 | return data;
|
3735 | };
|
3736 |
|
3737 | return data;
|
3738 | }
|
3739 | var StyledButton$5 = styled(Button)(_templateObject$B(), function (props) {
|
3740 | return props.defaultStyle.bgColor;
|
3741 | }, function (props) {
|
3742 | return props.defaultStyle.boxShadowColor;
|
3743 | }, function (props) {
|
3744 | return props.defaultStyle.textColor;
|
3745 | }, function (props) {
|
3746 | return props.hoverStyle.bgColor;
|
3747 | }, function (props) {
|
3748 | return props.hoverStyle.hoverBgColor;
|
3749 | }, function (props) {
|
3750 | return props.hoverStyle.textColor;
|
3751 | });
|
3752 | var ActionButton = React.forwardRef(function ActionButton(props, ref) {
|
3753 | var children = props.children,
|
3754 | styleType = props.styleType,
|
3755 | other = _objectWithoutProperties(props, ["children", "styleType"]);
|
3756 |
|
3757 | var theme = useTheme();
|
3758 | var defaultStyle = theme.buttonStyles.button.variant.default;
|
3759 | var hoverStyle = theme.buttonStyles.button.variant[styleType];
|
3760 | return React.createElement(StyledButton$5, _extends({
|
3761 | ref: ref,
|
3762 | defaultStyle: defaultStyle,
|
3763 | hoverStyle: hoverStyle,
|
3764 | styleType: styleType,
|
3765 | type: "button"
|
3766 | }, other), children);
|
3767 | });
|
3768 | ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
3769 | children: PropTypes.node.isRequired,
|
3770 |
|
3771 |
|
3772 | styleType: PropTypes.string
|
3773 | } : {};
|
3774 | ActionButton.defaultProps = {
|
3775 | styleType: 'primary'
|
3776 | };
|
3777 |
|
3778 | var Caret = styled.span(["border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px dashed;display:inline-block;height:0;margin-left:5px;vertical-align:middle;width:0;"]);
|
3779 | var ButtonPanel = styled.div(["background-color:", ";border:1px solid ", ";display:", ";margin-top:3px;position:relative;z-index:999;@media (min-width:", "){position:absolute;}"], function (props) {
|
3780 | return props.theme.colors.white;
|
3781 | }, function (props) {
|
3782 | return props.theme.colors.gray3;
|
3783 | }, function (props) {
|
3784 | return props.isOpen ? 'block' : 'none';
|
3785 | }, function (props) {
|
3786 | return props.theme.screenSize.tablet;
|
3787 | });
|
3788 | var ButtonPanelChildrenContainer = styled.div(["display:flex;flex-direction:column;"]);
|
3789 | var StyledButtonLink = styled(LinkButton)(["color:black;margin-bottom:0px;text-align:left;text-decoration:none;padding:10px 20px;&:active,&:focus,&:hover{background-color:", ";color:white;}"], function (props) {
|
3790 | return props.theme.colors.primary;
|
3791 | });
|
3792 | var TAB_KEY_CODE = 9;
|
3793 | var UP_ARROW_CODE = 38;
|
3794 | var DOWN_ARROW_CODE = 40;
|
3795 |
|
3796 | function getFocusables(node) {
|
3797 | var focusableElements = node.querySelectorAll('button');
|
3798 | var firstFocusable = focusableElements[0];
|
3799 | var lastFocusable = focusableElements[focusableElements.length - 1];
|
3800 | return {
|
3801 | focusableElements: focusableElements,
|
3802 | firstFocusable: firstFocusable,
|
3803 | lastFocusable: lastFocusable
|
3804 | };
|
3805 | }
|
3806 |
|
3807 | function isCurrentlyActive(node) {
|
3808 | return document.activeElement === node;
|
3809 | }
|
3810 |
|
3811 | function focusTrap(node) {
|
3812 | var _getFocusables = getFocusables(node),
|
3813 | firstFocusable = _getFocusables.firstFocusable,
|
3814 | lastFocusable = _getFocusables.lastFocusable;
|
3815 |
|
3816 | function handleTabFocus(event) {
|
3817 | if (event.key === 'Tab' || event.keyCode === TAB_KEY_CODE) {
|
3818 | if (event.shiftKey) {
|
3819 | if (isCurrentlyActive(firstFocusable)) {
|
3820 | lastFocusable.focus();
|
3821 | event.preventDefault();
|
3822 | }
|
3823 | } else if (isCurrentlyActive(lastFocusable)) {
|
3824 | firstFocusable.focus();
|
3825 | event.preventDefault();
|
3826 | }
|
3827 | }
|
3828 | }
|
3829 |
|
3830 | node.addEventListener('keydown', handleTabFocus);
|
3831 | return function removeKeydownListener() {
|
3832 | node.removeEventListener('keydown', handleTabFocus);
|
3833 | };
|
3834 | }
|
3835 |
|
3836 | function arrowMovement(node) {
|
3837 | var _getFocusables2 = getFocusables(node),
|
3838 | focusableElements = _getFocusables2.focusableElements,
|
3839 | firstFocusable = _getFocusables2.firstFocusable,
|
3840 | lastFocusable = _getFocusables2.lastFocusable;
|
3841 |
|
3842 | var focusables = _toConsumableArray(focusableElements);
|
3843 |
|
3844 | function handleArrowMovementKeys(event) {
|
3845 | if (event.keyCode === UP_ARROW_CODE) {
|
3846 | if (isCurrentlyActive(firstFocusable)) {
|
3847 | lastFocusable.focus();
|
3848 | event.preventDefault();
|
3849 | } else {
|
3850 | var index = _indexOfInstanceProperty(focusables).call(focusables, document.activeElement);
|
3851 |
|
3852 | focusables[index - 1].focus();
|
3853 | event.preventDefault();
|
3854 | }
|
3855 | }
|
3856 |
|
3857 | if (event.keyCode === DOWN_ARROW_CODE) {
|
3858 | if (isCurrentlyActive(lastFocusable)) {
|
3859 | firstFocusable.focus();
|
3860 | event.preventDefault();
|
3861 | } else {
|
3862 | var _index = _indexOfInstanceProperty(focusables).call(focusables, document.activeElement);
|
3863 |
|
3864 | focusableElements[_index + 1].focus();
|
3865 |
|
3866 | event.preventDefault();
|
3867 | }
|
3868 | }
|
3869 | }
|
3870 |
|
3871 | node.addEventListener('keydown', handleArrowMovementKeys);
|
3872 | return function removeArrowMovementListener() {
|
3873 | node.removeEventListener('keydown', handleArrowMovementKeys);
|
3874 | };
|
3875 | }
|
3876 |
|
3877 | var _StyledDiv = styled.div(["display:", ";flex-direction:column;position:relative;"], function (p) {
|
3878 | return p._css;
|
3879 | });
|
3880 |
|
3881 | var _StyledDiv2 = styled.div(["position:relative;"]);
|
3882 |
|
3883 | function DropdownButton(props) {
|
3884 | var _useState = useState(props.buttonValue),
|
3885 | _useState2 = _slicedToArray(_useState, 2),
|
3886 | buttonValue = _useState2[0],
|
3887 | setButtonValue = _useState2[1];
|
3888 |
|
3889 | var _useState3 = useState(false),
|
3890 | _useState4 = _slicedToArray(_useState3, 2),
|
3891 | isOpen = _useState4[0],
|
3892 | setIsOpen = _useState4[1];
|
3893 |
|
3894 | var initialRender = useRef(true);
|
3895 | var buttonDropdown = useRef();
|
3896 | var triggerButton = useRef();
|
3897 | var panelId = useUniqueId(props.id);
|
3898 | useEffect(function () {
|
3899 | var removeFocusTrapListener = focusTrap(buttonDropdown.current);
|
3900 | var removeArrowMovementListener = arrowMovement(buttonDropdown.current);
|
3901 | return function removeListeners() {
|
3902 | removeFocusTrapListener();
|
3903 | removeArrowMovementListener();
|
3904 | };
|
3905 | }, [isOpen]);
|
3906 | useEffect(function () {
|
3907 | if (!initialRender.current) {
|
3908 | triggerButton.current.focus();
|
3909 | }
|
3910 |
|
3911 | initialRender.current = false;
|
3912 | }, [isOpen]);
|
3913 |
|
3914 | var toggleDropdown = function toggleDropdown() {
|
3915 | return setIsOpen(!isOpen);
|
3916 | };
|
3917 |
|
3918 | function closeDropdown() {
|
3919 | if (isOpen) {
|
3920 | setIsOpen(false);
|
3921 | }
|
3922 | }
|
3923 |
|
3924 | function handleDropdownItemClick(buttonProps) {
|
3925 | var shouldCloseOnButtonClick = props.shouldCloseOnButtonClick,
|
3926 | shouldUpdateButtonValue = props.shouldUpdateButtonValue;
|
3927 | return function (event) {
|
3928 | if (shouldUpdateButtonValue) {
|
3929 | setButtonValue(buttonProps.children);
|
3930 | }
|
3931 |
|
3932 | if (shouldCloseOnButtonClick) {
|
3933 | closeDropdown();
|
3934 | }
|
3935 |
|
3936 | buttonProps.onClick(event, buttonProps.name);
|
3937 | };
|
3938 | }
|
3939 |
|
3940 | var rootClose = props.rootClose,
|
3941 | children = props.children,
|
3942 | manualButtonValue = props.manualButtonValue,
|
3943 | styleType = props.styleType,
|
3944 | inline = props.inline,
|
3945 | otherProps = _objectWithoutProperties(props, ["rootClose", "children", "manualButtonValue", "styleType", "inline"]);
|
3946 |
|
3947 | return React.createElement(RootCloseWrapper, {
|
3948 | onRootClose: closeDropdown,
|
3949 | disabled: !rootClose
|
3950 | }, React.createElement(_StyledDiv, {
|
3951 | ref: buttonDropdown,
|
3952 | role: "combobox",
|
3953 | "aria-controls": panelId,
|
3954 | "aria-expanded": isOpen,
|
3955 | "aria-haspopup": "listbox",
|
3956 | _css: inline ? 'inline-flex' : 'block'
|
3957 | }, React.createElement(Button, _extends({}, otherProps, {
|
3958 | onClick: toggleDropdown,
|
3959 | "aria-haspopup": "true",
|
3960 | "aria-pressed": isOpen,
|
3961 | ref: triggerButton,
|
3962 | styleType: styleType
|
3963 | }), manualButtonValue || buttonValue, React.createElement(Caret, null)), React.createElement(_StyledDiv2, null, React.createElement(ButtonPanel, {
|
3964 | isOpen: isOpen,
|
3965 | id: panelId
|
3966 | }, React.createElement(ButtonPanelChildrenContainer, null, _mapInstanceProperty(Children).call(Children, children, function (child) {
|
3967 | var onClickHandler = handleDropdownItemClick(child.props);
|
3968 | var newProps = {
|
3969 | onClick: onClickHandler,
|
3970 | role: 'option'
|
3971 | };
|
3972 | return React.cloneElement(child, newProps);
|
3973 | }))))));
|
3974 | }
|
3975 |
|
3976 | DropdownButton.Button = StyledButtonLink;
|
3977 | DropdownButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
3978 |
|
3979 | buttonValue: PropTypes.any,
|
3980 |
|
3981 | |
3982 |
|
3983 |
|
3984 |
|
3985 |
|
3986 | manualButtonValue: PropTypes.node,
|
3987 | children: PropTypes.any.isRequired,
|
3988 |
|
3989 | |
3990 |
|
3991 |
|
3992 |
|
3993 | shouldUpdateButtonValue: PropTypes.bool,
|
3994 |
|
3995 |
|
3996 | shouldCloseOnButtonClick: PropTypes.bool,
|
3997 |
|
3998 | |
3999 |
|
4000 |
|
4001 |
|
4002 | rootClose: PropTypes.bool,
|
4003 |
|
4004 |
|
4005 | styleType: PropTypes.string,
|
4006 |
|
4007 |
|
4008 | inline: PropTypes.bool,
|
4009 | id: PropTypes.string
|
4010 | } : {};
|
4011 | DropdownButton.defaultProps = {
|
4012 | buttonValue: undefined,
|
4013 | manualButtonValue: undefined,
|
4014 | shouldUpdateButtonValue: false,
|
4015 | shouldCloseOnButtonClick: false,
|
4016 | styleType: 'default',
|
4017 | rootClose: false,
|
4018 | inline: false,
|
4019 | id: undefined
|
4020 | };
|
4021 |
|
4022 | function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
4023 |
|
4024 | function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$5(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$5(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
4025 |
|
4026 | function _templateObject4$9() {
|
4027 | var data = _taggedTemplateLiteral(["\n clip-path: inset(100%);\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n\n &:focus + div {\n background-color: ", ";\n color: ", ";\n }\n"]);
|
4028 |
|
4029 | _templateObject4$9 = function _templateObject4() {
|
4030 | return data;
|
4031 | };
|
4032 |
|
4033 | return data;
|
4034 | }
|
4035 |
|
4036 | function _templateObject3$b() {
|
4037 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: ", "\n ", ";\n box-sizing: border-box;\n color: ", ";\n margin: 0;\n\n &:active {\n margin: 0;\n }\n"]);
|
4038 |
|
4039 | _templateObject3$b = function _templateObject3() {
|
4040 | return data;
|
4041 | };
|
4042 |
|
4043 | return data;
|
4044 | }
|
4045 |
|
4046 | function _templateObject2$g() {
|
4047 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: transparent;\n box-shadow: 0 4px 0 0 ", ";\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n margin-bottom: 4px;\n margin-top: 0;\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n text-align: center;\n text-transform: ", ";\n transition: background-color 250ms linear, color 250ms linear;\n user-select: none;\n\n &:active {\n background-color: ", ";\n box-shadow: 0 0 0 0 transparent;\n color: ", ";\n margin-bottom: 0;\n margin-top: 4px;\n }\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &[disabled] {\n cursor: not-allowed;\n opacity: 0.65;\n\n > * {\n pointer-events: none;\n }\n }\n"]);
|
4048 |
|
4049 | _templateObject2$g = function _templateObject2() {
|
4050 | return data;
|
4051 | };
|
4052 |
|
4053 | return data;
|
4054 | }
|
4055 |
|
4056 | function _templateObject$C() {
|
4057 | var data = _taggedTemplateLiteral(["\n flex-grow: 1;\n\n @media (min-width: ", ") {\n flex-grow: 0;\n min-width: ", ";\n }\n"]);
|
4058 |
|
4059 | _templateObject$C = function _templateObject() {
|
4060 | return data;
|
4061 | };
|
4062 |
|
4063 | return data;
|
4064 | }
|
4065 | var AnswerLabel = styled.label(_templateObject$C(), function (props) {
|
4066 | return props.theme.screenSize.tablet;
|
4067 | }, function (props) {
|
4068 | return props.itemWidth;
|
4069 | });
|
4070 | var AnswerDisplay = styled.div(_templateObject2$g(), function (props) {
|
4071 | return props.buttonStyle.bgColor;
|
4072 | }, function (props) {
|
4073 | return props.buttonStyle.boxShadowColor;
|
4074 | }, function (props) {
|
4075 | return props.buttonStyle.textColor;
|
4076 | }, function (props) {
|
4077 | return props.buttonSize.fontWeight || 'normal';
|
4078 | }, function (props) {
|
4079 | return props.buttonSize.fontSize;
|
4080 | }, function (props) {
|
4081 | return props.buttonSize.lineHeight;
|
4082 | }, function (props) {
|
4083 | return props.buttonSize.paddingTop;
|
4084 | }, function (props) {
|
4085 | return props.buttonSize.paddingSides;
|
4086 | }, function (props) {
|
4087 | return props.buttonSize.paddingBottom;
|
4088 | }, function (props) {
|
4089 | return props.buttonSize.paddingSides;
|
4090 | }, function (props) {
|
4091 | return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
|
4092 | }, function (props) {
|
4093 | return props.buttonStyle.activeBgColor;
|
4094 | }, function (props) {
|
4095 | return props.buttonStyle.activeTextColor;
|
4096 | }, function (props) {
|
4097 | return props.buttonStyle.hoverBgColor;
|
4098 | }, function (props) {
|
4099 | return props.buttonStyle.hoverTextColor;
|
4100 | });
|
4101 | var OutlineAnswerDisplay = styled(AnswerDisplay)(_templateObject3$b(), function (props) {
|
4102 | return props.isChecked ? props.buttonStyle.hoverBgColor : props.buttonStyle.bgColor;
|
4103 | }, function (props) {
|
4104 | return props.buttonStyle.borderColor;
|
4105 | }, function (props) {
|
4106 | return props.isChecked ? '0 0 0 0' : 'none';
|
4107 | }, function (props) {
|
4108 | return props.isChecked && props.buttonStyle.boxShadowColor;
|
4109 | }, function (props) {
|
4110 | return props.isChecked ? props.buttonStyle.hoverTextColor : props.buttonStyle.textColor;
|
4111 | });
|
4112 | var AnswerInput = styled.input(_templateObject4$9(), function (props) {
|
4113 | return props.buttonStyle.activeBgColor;
|
4114 | }, function (props) {
|
4115 | return props.buttonStyle.activeTextColor;
|
4116 | });
|
4117 |
|
4118 | function AnswerButton(_ref) {
|
4119 | var name = _ref.name,
|
4120 | children = _ref.children,
|
4121 | itemWidth = _ref.itemWidth,
|
4122 | styleType = _ref.styleType,
|
4123 | selectedType = _ref.selectedType,
|
4124 | size = _ref.size,
|
4125 | isOutline = _ref.isOutline,
|
4126 | checked = _ref.checked,
|
4127 | radioProps = _objectWithoutProperties(_ref, ["name", "children", "itemWidth", "styleType", "selectedType", "size", "isOutline", "checked"]);
|
4128 |
|
4129 | var id = useUniqueId(radioProps.id);
|
4130 | var isChecked = radioProps.checked || radioProps.defaultChecked;
|
4131 | var theme = useTheme();
|
4132 | var validationState = React.useContext(ValidationContext);
|
4133 | var buttonType = isOutline ? 'outlineButton' : 'button';
|
4134 | var buttonSize = theme.buttonStyles[buttonType].size[size];
|
4135 | var variant = validationState !== 'default' && !isOutline ? validationState : styleType;
|
4136 | var validationBorder = theme.buttonStyles[buttonType].variant[validationState].borderColor;
|
4137 | var selectedStyles = theme.buttonStyles[buttonType].variant[selectedType];
|
4138 | var unSelectedStyles = theme.buttonStyles[buttonType].variant[variant];
|
4139 |
|
4140 | if (isOutline && validationState !== 'default') {
|
4141 | selectedStyles = _objectSpread$5({}, selectedStyles, {
|
4142 | borderColor: validationBorder
|
4143 | });
|
4144 | unSelectedStyles = _objectSpread$5({}, unSelectedStyles, {
|
4145 | borderColor: validationBorder
|
4146 | });
|
4147 | }
|
4148 |
|
4149 | var buttonStyle = isChecked ? selectedStyles : unSelectedStyles;
|
4150 | var buttonProps = {
|
4151 | disabled: radioProps.disabled,
|
4152 | isChecked: isChecked,
|
4153 | buttonStyle: buttonStyle,
|
4154 | buttonSize: buttonSize
|
4155 | };
|
4156 | var labelProps = {
|
4157 | disabled: radioProps.disabled,
|
4158 | itemWidth: itemWidth,
|
4159 | htmlFor: id,
|
4160 | validationState: validationState
|
4161 | };
|
4162 | var Display = isOutline ? OutlineAnswerDisplay : AnswerDisplay;
|
4163 | return React.createElement(AnswerLabel, labelProps, React.createElement(AnswerInput, _extends({
|
4164 | type: "radio",
|
4165 | name: name,
|
4166 | id: id,
|
4167 | buttonStyle: buttonStyle
|
4168 | }, radioProps)), React.createElement(Display, buttonProps, children));
|
4169 | }
|
4170 |
|
4171 | function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
4172 |
|
4173 | function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys$6(source, true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys$6(source)).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
4174 |
|
4175 | function RadioGroup(_ref) {
|
4176 | var _context;
|
4177 |
|
4178 | var name = _ref.name,
|
4179 | disableAllOptions = _ref.disableAllOptions,
|
4180 | selectedValue = _ref.selectedValue,
|
4181 | children = _ref.children,
|
4182 | rest = _objectWithoutProperties(_ref, ["name", "disableAllOptions", "selectedValue", "children"]);
|
4183 |
|
4184 | return _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, index) {
|
4185 | var _context2;
|
4186 |
|
4187 | var key = _concatInstanceProperty(_context2 = "".concat(name, "-option-")).call(_context2, index + 1);
|
4188 |
|
4189 | var disabled = disableAllOptions || child.props.disabled;
|
4190 | var checked = selectedValue === child.props.value;
|
4191 | return React.cloneElement(child, _objectSpread$6({
|
4192 | key: key,
|
4193 | name: name,
|
4194 | disabled: disabled,
|
4195 | defaultChecked: checked
|
4196 | }, rest));
|
4197 | });
|
4198 | }
|
4199 |
|
4200 | RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
4201 |
|
4202 | name: PropTypes.string.isRequired,
|
4203 |
|
4204 |
|
4205 | selectedValue: PropTypes.any,
|
4206 |
|
4207 |
|
4208 | disableAllOptions: PropTypes.bool
|
4209 | } : {};
|
4210 | RadioGroup.defaultProps = {
|
4211 | selectedValue: undefined,
|
4212 | disableAllOptions: false
|
4213 | };
|
4214 |
|
4215 | function _templateObject$D() {
|
4216 | var data = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: nowrap;\n\n ", ";\n"]);
|
4217 |
|
4218 | _templateObject$D = function _templateObject() {
|
4219 | return data;
|
4220 | };
|
4221 |
|
4222 | return data;
|
4223 | }
|
4224 | var outlineStyles = css(["> label:first-child > div{border-radius:4px 0 0 4px;}> label:last-child > div{border-left:none;border-radius:0 4px 4px 0;}> label:not(:first-child):not(:last-child) > div{border-left:1px;}"]);
|
4225 | var AnswerSet = styled.div(_templateObject$D(), function (props) {
|
4226 | return props.isOutline && outlineStyles;
|
4227 | });
|
4228 |
|
4229 | function AnswerGroup(props) {
|
4230 | return React.createElement(AnswerSet, {
|
4231 | isOutline: props.isOutline
|
4232 | }, React.createElement(RadioGroup, props));
|
4233 | }
|
4234 |
|
4235 | AnswerGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
4236 |
|
4237 | name: PropTypes.string.isRequired,
|
4238 | children: PropTypes.node.isRequired,
|
4239 |
|
4240 |
|
4241 | itemWidth: PropTypes.string,
|
4242 |
|
4243 |
|
4244 | styleType: PropTypes.string,
|
4245 |
|
4246 |
|
4247 | selectedType: PropTypes.string,
|
4248 |
|
4249 |
|
4250 | size: PropTypes.string,
|
4251 |
|
4252 |
|
4253 | isOutline: PropTypes.bool,
|
4254 |
|
4255 |
|
4256 | disableAllOptions: PropTypes.bool,
|
4257 |
|
4258 |
|
4259 | selectedValue: PropTypes.any
|
4260 | } : {};
|
4261 | AnswerGroup.defaultProps = {
|
4262 | styleType: 'default',
|
4263 | selectedType: 'success',
|
4264 | size: 'default',
|
4265 | itemWidth: '100px',
|
4266 | isOutline: false,
|
4267 | disableAllOptions: false,
|
4268 | selectedValue: undefined
|
4269 | };
|
4270 |
|
4271 | function getRadioFillVariables(isChecked, isDisabled, validationState, colors) {
|
4272 | var isNotDisabled = !isDisabled;
|
4273 | var isValid = validationState === 'default';
|
4274 |
|
4275 | if (isDisabled) {
|
4276 | return {
|
4277 | fill: colors.gray5
|
4278 | };
|
4279 | }
|
4280 |
|
4281 | if (isNotDisabled && !isValid) {
|
4282 | return {
|
4283 | fill: colors[validationState],
|
4284 | hover: colors.gray3
|
4285 | };
|
4286 | }
|
4287 |
|
4288 | if (isChecked && isNotDisabled) {
|
4289 | return {
|
4290 | fill: colors.primary
|
4291 | };
|
4292 | }
|
4293 |
|
4294 | return {
|
4295 | fill: colors.gray8,
|
4296 | hover: colors.gray3
|
4297 | };
|
4298 | }
|
4299 |
|
4300 | function _templateObject3$c() {
|
4301 | var data = _taggedTemplateLiteral(["\n border: 3px solid ", ";\n border-radius: 50%;\n box-sizing: border-box;\n height: 25px;\n margin-right: 8px;\n min-width: 25px;\n\n &:before {\n ", ";\n }\n"]);
|
4302 |
|
4303 | _templateObject3$c = function _templateObject3() {
|
4304 | return data;
|
4305 | };
|
4306 |
|
4307 | return data;
|
4308 | }
|
4309 |
|
4310 | function _templateObject2$h() {
|
4311 | var data = _taggedTemplateLiteral(["\n clip: rect(0, 0, 0, 0);\n pointer-events: none;\n position: absolute;\n\n &:focus ~ .es-radio__fill {\n box-shadow: 0 0 3px 3px ", ";\n }\n"]);
|
4312 |
|
4313 | _templateObject2$h = function _templateObject2() {
|
4314 | return data;
|
4315 | };
|
4316 |
|
4317 | return data;
|
4318 | }
|
4319 |
|
4320 | function _templateObject$E() {
|
4321 | var data = _taggedTemplateLiteral(["\n align-self: flex-start;\n cursor: pointer;\n display: flex;\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: ", ";\n font-weight: normal;\n line-height: ", ";\n margin-right: 15px;\n margin-bottom: 10px;\n position: relative;\n padding: 10px 0 10px 10px;\n text-transform: none;\n\n &:hover .es-radio__fill:before {\n ", ";\n }\n\n @media (min-width: ", ") {\n padding: 5px 0;\n }\n"]);
|
4322 |
|
4323 | _templateObject$E = function _templateObject() {
|
4324 | return data;
|
4325 | };
|
4326 |
|
4327 | return data;
|
4328 | }
|
4329 |
|
4330 | function radioFill(color) {
|
4331 | return "\n background-color: ".concat(color, ";\n border-radius: 50%;\n content: '';\n display: block;\n height: 13px;\n left: 3px;\n position: relative;\n width: 13px;\n top: 3px;\n transition: background 0.25s linear;\n ");
|
4332 | }
|
4333 |
|
4334 | var RadioLabel = styled(Label)(_templateObject$E(), function (props) {
|
4335 | return props.theme.sizes.baseFontSize;
|
4336 | }, function (props) {
|
4337 | return props.theme.sizes.baseLineHeight;
|
4338 | }, function (props) {
|
4339 | return !props.checked && radioFill(props.hoverFillColor);
|
4340 | }, function (props) {
|
4341 | return props.theme.screenSize.tablet;
|
4342 | });
|
4343 | var RadioInput = styled.input(_templateObject2$h(), function (props) {
|
4344 | return props.theme.colors.inputFocus;
|
4345 | });
|
4346 | var RadioDisplay = styled.span(_templateObject3$c(), function (props) {
|
4347 | return props.borderColor;
|
4348 | }, function (props) {
|
4349 | return radioFill(_fillInstanceProperty(props));
|
4350 | });
|
4351 | function RadioButton(_ref) {
|
4352 | var children = _ref.children,
|
4353 | radioProps = _objectWithoutProperties(_ref, ["children"]);
|
4354 |
|
4355 | var id = useUniqueId(radioProps.id);
|
4356 | var isChecked = radioProps.checked || radioProps.defaultChecked;
|
4357 | var theme = useTheme();
|
4358 | var validationState = React.useContext(ValidationContext);
|
4359 |
|
4360 | var _getRadioFillVariable = getRadioFillVariables(isChecked, radioProps.disabled, validationState, theme.colors),
|
4361 | hover = _getRadioFillVariable.hover,
|
4362 | fill = _fillInstanceProperty(_getRadioFillVariable);
|
4363 |
|
4364 | var radioDisplayFill = isChecked ? fill : theme.colors.white;
|
4365 | var labelProps = {
|
4366 | disabled: radioProps.disabled,
|
4367 | htmlFor: id,
|
4368 | hoverFillColor: hover,
|
4369 | validationState: validationState,
|
4370 | checked: isChecked
|
4371 | };
|
4372 | return React.createElement(RadioLabel, labelProps, React.createElement(RadioInput, _extends({
|
4373 | type: "radio",
|
4374 | id: id
|
4375 | }, radioProps)), React.createElement(RadioDisplay, {
|
4376 | className: "es-radio__fill",
|
4377 | borderColor: fill,
|
4378 | fill: radioDisplayFill
|
4379 | }), children);
|
4380 | }
|
4381 | RadioButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
4382 | children: PropTypes.any
|
4383 | } : {};
|
4384 | RadioButton.defaultProps = {
|
4385 | children: undefined
|
4386 | };
|
4387 |
|
4388 | function _templateObject$F() {
|
4389 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 2px;\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n flex: auto;\n font-size: ", ";\n font-weight: normal;\n height: 39px;\n min-width: 100px;\n padding: 6px 12px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n\n &:focus {\n border-color: ", ";\n box-shadow: ", ";\n outline: 0;\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"]);
|
4390 |
|
4391 | _templateObject$F = function _templateObject() {
|
4392 | return data;
|
4393 | };
|
4394 |
|
4395 | return data;
|
4396 | }
|
4397 | var DropdownBase = styled.select(_templateObject$F(), function (props) {
|
4398 | return props.theme.colors.white;
|
4399 | }, function (props) {
|
4400 | return props.theme.colors.gray5;
|
4401 | }, function (props) {
|
4402 | return props.boxShadow;
|
4403 | }, function (props) {
|
4404 | return props.theme.colors.black;
|
4405 | }, function (props) {
|
4406 | return props.theme.sizes.baseFontSize;
|
4407 | }, function (props) {
|
4408 | return props.focusBorderColor;
|
4409 | }, function (props) {
|
4410 | return props.focusBoxShadow;
|
4411 | }, function (props) {
|
4412 | return props.theme.colors.gray2;
|
4413 | });
|
4414 |
|
4415 | function Dropdown(props) {
|
4416 | return React.createElement(DropdownBase, props);
|
4417 | }
|
4418 |
|
4419 | function _templateObject3$d() {
|
4420 | var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 3px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n cursor: pointer;\n height: 25px;\n left: 10px;\n position: absolute;\n top: 0.55em;\n transition: all 0.25s linear, box-shadow 0.15s linear;\n width: 25px;\n\n @media (min-width: ", ") {\n left: 0;\n top: 0.35em;\n }\n\n &:after {\n background: transparent;\n border: 3px solid ", ";\n border-right: none;\n border-top: none;\n box-sizing: border-box;\n content: '';\n display: block;\n height: 9px;\n margin: 3px 0 0 2px;\n transform: rotate(-45deg);\n transition: border 0.25s linear;\n width: 15px;\n }\n"]);
|
4421 |
|
4422 | _templateObject3$d = function _templateObject3() {
|
4423 | return data;
|
4424 | };
|
4425 |
|
4426 | return data;
|
4427 | }
|
4428 |
|
4429 | function _templateObject2$i() {
|
4430 | var data = _taggedTemplateLiteral(["\n clip: rect(0, 0, 0, 0);\n pointer-events: none;\n position: absolute;\n\n &:focus ~ .es-checkbox__fill {\n box-shadow: 0 0 3px 3px ", ";\n &:after {\n border-color: ", ";\n }\n }\n"]);
|
4431 |
|
4432 | _templateObject2$i = function _templateObject2() {
|
4433 | return data;
|
4434 | };
|
4435 |
|
4436 | return data;
|
4437 | }
|
4438 |
|
4439 | function _templateObject$G() {
|
4440 | var data = _taggedTemplateLiteral(["\n font-size: ", ";\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: ", ";\n font-weight: normal;\n line-height: ", ";\n margin-left: -10px;\n min-height: 25px;\n padding: 10px 0 10px 42px;\n position: relative;\n\n @media (min-width: ", ") {\n margin-left: 0;\n padding: 5px 0 5px 32px;\n }\n\n > .es-checkbox__fill {\n background-color: ", ";\n border-color: ", ";\n\n &:after {\n border-color: ", ";\n }\n }\n\n &:hover > .es-checkbox__fill:after {\n border-color: ", ";\n }\n\n &[disabled] > .es-checkbox__fill {\n background-color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n outline: 0;\n\n &:after {\n border-color: ", ";\n }\n }\n"]);
|
4441 |
|
4442 | _templateObject$G = function _templateObject() {
|
4443 | return data;
|
4444 | };
|
4445 |
|
4446 | return data;
|
4447 | }
|
4448 |
|
4449 | var backgroundColorSelect = function backgroundColorSelect(checked, theme, validationState) {
|
4450 | if (checked) {
|
4451 | return validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
|
4452 | }
|
4453 |
|
4454 | return theme.colors.white;
|
4455 | };
|
4456 |
|
4457 | var CheckboxLabel = styled(Label)(_templateObject$G(), function (props) {
|
4458 | return props.theme.sizes.baseFontSize;
|
4459 | }, function (props) {
|
4460 | return props.theme.sizes.baseFontSize;
|
4461 | }, function (props) {
|
4462 | return props.theme.sizes.baseLineHeight;
|
4463 | }, function (props) {
|
4464 | return props.theme.screenSize.tablet;
|
4465 | }, function (_ref) {
|
4466 | var checked = _ref.checked,
|
4467 | theme = _ref.theme,
|
4468 | validationState = _ref.validationState;
|
4469 | return backgroundColorSelect(checked, theme, validationState);
|
4470 | }, function (_ref2) {
|
4471 | var checked = _ref2.checked,
|
4472 | theme = _ref2.theme,
|
4473 | validationState = _ref2.validationState;
|
4474 | return checked && validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
|
4475 | }, function (props) {
|
4476 | return props.theme.colors.white;
|
4477 | }, function (_ref3) {
|
4478 | var checked = _ref3.checked,
|
4479 | theme = _ref3.theme;
|
4480 | return checked ? theme.colors.white : theme.colors.gray3;
|
4481 | }, function (_ref4) {
|
4482 | var checked = _ref4.checked,
|
4483 | theme = _ref4.theme;
|
4484 | return checked ? theme.colors.gray5 : theme.colors.white;
|
4485 | }, function (props) {
|
4486 | return props.theme.colors.gray5;
|
4487 | }, function (props) {
|
4488 | return props.theme.colors.white;
|
4489 | });
|
4490 | var CheckboxInput = styled.input(_templateObject2$i(), function (props) {
|
4491 | return props.theme.colors.inputFocus;
|
4492 | }, function (_ref5) {
|
4493 | var checked = _ref5.checked,
|
4494 | theme = _ref5.theme;
|
4495 | return checked ? theme.colors.white : theme.colors.gray3;
|
4496 | });
|
4497 | var CheckboxDisplay = styled.span(_templateObject3$d(), function (props) {
|
4498 | return props.theme.colors.white;
|
4499 | }, function (props) {
|
4500 | return props.theme.colors.gray8;
|
4501 | }, function (props) {
|
4502 | return props.theme.screenSize.tablet;
|
4503 | }, function (props) {
|
4504 | return props.theme.colors.white;
|
4505 | });
|
4506 |
|
4507 | function Checkbox(_ref6) {
|
4508 | var children = _ref6.children,
|
4509 | checkboxProps = _objectWithoutProperties(_ref6, ["children"]);
|
4510 |
|
4511 | var theme = useTheme();
|
4512 | var validationState = React.useContext(ValidationContext);
|
4513 | return React.createElement(CheckboxLabel, {
|
4514 | validationState: validationState,
|
4515 | checked: checkboxProps.checked,
|
4516 | disabled: checkboxProps.disabled
|
4517 | }, React.createElement(CheckboxInput, _extends({
|
4518 | type: "checkbox",
|
4519 | focusBorderColor: theme.colors.inputFocus
|
4520 | }, checkboxProps)), React.createElement(CheckboxDisplay, {
|
4521 | className: "es-checkbox__fill"
|
4522 | }), children);
|
4523 | }
|
4524 |
|
4525 | Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
4526 | children: PropTypes.any
|
4527 | } : {};
|
4528 | Checkbox.defaultProps = {
|
4529 | children: undefined
|
4530 | };
|
4531 |
|
4532 | function _templateObject2$j() {
|
4533 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n ul {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"]);
|
4534 |
|
4535 | _templateObject2$j = function _templateObject2() {
|
4536 | return data;
|
4537 | };
|
4538 |
|
4539 | return data;
|
4540 | }
|
4541 |
|
4542 | function _templateObject$H() {
|
4543 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: 2px 2px 5px ", ";\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"]);
|
4544 |
|
4545 | _templateObject$H = function _templateObject() {
|
4546 | return data;
|
4547 | };
|
4548 |
|
4549 | return data;
|
4550 | }
|
4551 | var VerticalNavigation = styled.nav(_templateObject$H(), function (props) {
|
4552 | return props.theme.colors.white;
|
4553 | }, function (props) {
|
4554 | return props.theme.colors.gray6;
|
4555 | });
|
4556 | var HorizontalNavigation = styled.nav(_templateObject2$j(), function (props) {
|
4557 | return props.theme.colors.white;
|
4558 | });
|
4559 | function useNavigation(orientation) {
|
4560 | var OrientedNavigation = orientation === 'horizontal' ? HorizontalNavigation : VerticalNavigation;
|
4561 |
|
4562 | function Navigation(props) {
|
4563 | var _context;
|
4564 |
|
4565 | var useAltStyle = props.useAltStyle,
|
4566 | children = props.children;
|
4567 |
|
4568 | var _React$useState = React.useState(props.selected),
|
4569 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
4570 | selected = _React$useState2[0],
|
4571 | setSelected = _React$useState2[1];
|
4572 |
|
4573 | React.useEffect(function () {
|
4574 | setSelected(props.selected);
|
4575 | }, [props.selected]);
|
4576 | return React.createElement(OrientedNavigation, {
|
4577 | className: "es-sidenav"
|
4578 | }, React.createElement("ul", null, _mapInstanceProperty(_context = React.Children).call(_context, children, function (child) {
|
4579 | return React.cloneElement(child, {
|
4580 | useAltStyle: useAltStyle,
|
4581 | highlightedId: selected
|
4582 | });
|
4583 | })));
|
4584 | }
|
4585 |
|
4586 | Navigation.propTypes = process.env.NODE_ENV !== "production" ? {
|
4587 |
|
4588 | useAltStyle: PropTypes.bool,
|
4589 | children: PropTypes.node.isRequired,
|
4590 |
|
4591 |
|
4592 | selected: PropTypes.string
|
4593 | } : {};
|
4594 | Navigation.defaultProps = {
|
4595 | useAltStyle: false,
|
4596 | selected: undefined
|
4597 | };
|
4598 | return Navigation;
|
4599 | }
|
4600 |
|
4601 | function _templateObject4$a() {
|
4602 | var data = _taggedTemplateLiteral(["\n align-content: center;\n background-color: transparent;\n border: 0;\n color: inherit;\n cursor: inherit;\n display: flex;\n font-size: inherit;\n height: 100%;\n justify-content: ", ";\n padding: 0;\n text-decoration: none;\n width: 100%;\n"]);
|
4603 |
|
4604 | _templateObject4$a = function _templateObject4() {
|
4605 | return data;
|
4606 | };
|
4607 |
|
4608 | return data;
|
4609 | }
|
4610 |
|
4611 | function _templateObject3$e() {
|
4612 | var data = _taggedTemplateLiteral(["\n align-self: flex-end;\n"]);
|
4613 |
|
4614 | _templateObject3$e = function _templateObject3() {
|
4615 | return data;
|
4616 | };
|
4617 |
|
4618 | return data;
|
4619 | }
|
4620 |
|
4621 | function _templateObject2$k() {
|
4622 | var data = _taggedTemplateLiteral(["\n ", "\n\n ", " ", ";\n"]);
|
4623 |
|
4624 | _templateObject2$k = function _templateObject2() {
|
4625 | return data;
|
4626 | };
|
4627 |
|
4628 | return data;
|
4629 | }
|
4630 |
|
4631 | function _templateObject$I() {
|
4632 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n cursor: pointer;\n line-height: ", ";\n min-width: 75px;\n padding: 10px;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n\n > i {\n color: ", ";\n }\n }\n\n ", " ", ";\n"]);
|
4633 |
|
4634 | _templateObject$I = function _templateObject() {
|
4635 | return data;
|
4636 | };
|
4637 |
|
4638 | return data;
|
4639 | }
|
4640 | var NavItemWrapper = styled.li(_templateObject$I(), function (props) {
|
4641 | return props.theme.colors.white;
|
4642 | }, function (props) {
|
4643 | return props.theme.colors.black;
|
4644 | }, function (props) {
|
4645 | return props.theme.sizes.baseLineHeight;
|
4646 | }, function (props) {
|
4647 | return props.theme.colors.gray2;
|
4648 | }, function (props) {
|
4649 | return props.theme.colors.primary;
|
4650 | }, function (props) {
|
4651 | return props.theme.colors.primary;
|
4652 | }, function (props) {
|
4653 | return props.isActive && css(["background-color:", ";color:", ";&:hover{background-color:", ";color:", ";> i{color:", ";}}"], props.theme.colors.primary, props.theme.colors.white, props.theme.colors.primary, props.theme.colors.white, props.theme.colors.white);
|
4654 | }, function (props) {
|
4655 | return props.isDisabled && css(["background-color:", ";color:", ";cursor:not-allowed;> span{pointer-events:none;}> i{color:", ";}&:hover{background-color:", ";color:", ";> i{color:", ";}}"], props.theme.colors.gray1, props.theme.colors.gray6, props.theme.colors.gray1, props.theme.colors.gray1, props.theme.colors.gray6, props.theme.colors.gray1);
|
4656 | });
|
4657 | var AltNavItemWrapper = styled(NavItemWrapper)(_templateObject2$k(), function (props) {
|
4658 | return css(["border-bottom:", " ", ";&:hover{border-", ":4px solid ", ";padding-left:", ";padding-bottom:", ";}"], props.isVertical ? 'none' : '2px solid', props.theme.colors.gray5, props.isVertical ? 'left' : 'bottom', props.theme.colors.primary, props.isVertical ? '6px' : '10px', props.isVertical ? '10px' : '6px');
|
4659 | }, function (props) {
|
4660 | return props.isActive && css(["background-color:", ";border-", ":4px solid ", ";color:", ";padding-left:", ";padding-bottom:", ";> i{color:", ";}&:hover{background-color:", ";border-", ":4px solid ", ";color:", ";> i{color:", ";}}"], props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.vbMagenta, props.theme.colors.black, props.isVertical ? '6px' : '10px', props.isVertical ? '10px' : '6px', props.theme.brandColors.vbMagenta, props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.vbMagenta, props.theme.colors.black, props.theme.brandColors.vbMagenta);
|
4661 | }, function (props) {
|
4662 | return props.isDisabled && css(["&:hover{border-left:none;padding-left:10px;}"]);
|
4663 | });
|
4664 | var NavIcon = styled(Icon)(_templateObject3$e());
|
4665 | var NavigationAnchor = styled.a(_templateObject4$a(), function (props) {
|
4666 | return props.isVertical ? 'space-between' : 'center';
|
4667 | });
|
4668 | function useNavigationItem(orientation) {
|
4669 | function NavItem(props) {
|
4670 | var highlightedId = props.highlightedId,
|
4671 | id = props.id,
|
4672 | isDisabled = props.isDisabled,
|
4673 | useAltStyle = props.useAltStyle,
|
4674 | children = props.children;
|
4675 | var isActive = id === highlightedId;
|
4676 | var Wrapper = useAltStyle ? AltNavItemWrapper : NavItemWrapper;
|
4677 | var isVertical = orientation === 'vertical';
|
4678 | var child = React.Children.only(children);
|
4679 |
|
4680 | var _child$props = child.props,
|
4681 | grandChildren = _child$props.children,
|
4682 | rest = _objectWithoutProperties(_child$props, ["children"]);
|
4683 |
|
4684 | var styledChild = React.createElement(NavigationAnchor, _extends({
|
4685 | as: child.type,
|
4686 | isVertical: isVertical
|
4687 | }, rest), React.createElement("span", null, grandChildren), isVertical ? React.createElement(NavIcon, {
|
4688 | name: "chevron-right"
|
4689 | }) : null);
|
4690 | return React.createElement(Wrapper, {
|
4691 | className: "es-sidenav__navitem",
|
4692 | isActive: isActive,
|
4693 | isDisabled: isDisabled,
|
4694 | isVertical: isVertical
|
4695 | }, styledChild);
|
4696 | }
|
4697 |
|
4698 | NavItem.propTypes = process.env.NODE_ENV !== "production" ? {
|
4699 |
|
4700 | useAltStyle: PropTypes.bool,
|
4701 |
|
4702 |
|
4703 | children: PropTypes.any,
|
4704 |
|
4705 |
|
4706 | highlightedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
4707 |
|
4708 |
|
4709 | id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
4710 |
|
4711 |
|
4712 | isDisabled: PropTypes.bool
|
4713 | } : {};
|
4714 | NavItem.defaultProps = {
|
4715 | useAltStyle: false,
|
4716 | isDisabled: false,
|
4717 | children: undefined,
|
4718 | highlightedId: undefined
|
4719 | };
|
4720 | return NavItem;
|
4721 | }
|
4722 |
|
4723 | var Navigation = useNavigation('vertical');
|
4724 |
|
4725 | function SideNav(props) {
|
4726 | return React.createElement(Navigation, props);
|
4727 | }
|
4728 |
|
4729 | SideNav.Item = useNavigationItem('vertical');
|
4730 |
|
4731 | var Navigation$1 = useNavigation('horizontal');
|
4732 |
|
4733 | function HorizontalNav(props) {
|
4734 | return React.createElement(Navigation$1, props);
|
4735 | }
|
4736 |
|
4737 | HorizontalNav.Item = useNavigationItem('horizontal');
|
4738 |
|
4739 | function useWindowWidth() {
|
4740 | var _React$useState = React.useState(document.body.clientWidth),
|
4741 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
4742 | width = _React$useState2[0],
|
4743 | setWidth = _React$useState2[1];
|
4744 |
|
4745 | React.useEffect(function () {
|
4746 | var handleResize = function handleResize() {
|
4747 | return setWidth(document.body.clientWidth);
|
4748 | };
|
4749 |
|
4750 | window.addEventListener('resize', handleResize);
|
4751 | return function () {
|
4752 | window.removeEventListener('resize', handleResize);
|
4753 | };
|
4754 | }, []);
|
4755 | return width;
|
4756 | }
|
4757 |
|
4758 | function _templateObject$J() {
|
4759 | var data = _taggedTemplateLiteral(["\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow {\n margin-left: -8px;\n position: absolute;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow,\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n box-sizing: content-box;\n position: absolute;\n border: 8px solid transparent;\n height: 0;\n width: 1px;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n content: \"\";\n z-index: -1;\n border-width: 8px;\n left: -8px;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n border-top: none;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow {\n bottom: 1px;\n margin-bottom: -8px;\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n border-bottom: none;\n border-top-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n bottom: -1px;\n border-top-color: ", ";\n }\n .react-datepicker-wrapper {\n display: inline-block;\n }\n .react-datepicker {\n font-size: 18px;\n background-color: ", ";\n border: solid 1px ", ";\n border-radius: 4px;\n color: ", ";\n box-shadow: 0 5px 10px ", ";\n display: inline-block;\n position: relative;\n }\n .react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n }\n .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n }\n .react-datepicker--time-only .react-datepicker__time {\n border-radius: 0.3rem;\n }\n .react-datepicker--time-only .react-datepicker__time-box {\n border-radius: 0.3rem;\n }\n .react-datepicker__triangle {\n position: absolute;\n left: 50px;\n }\n .react-datepicker-popper {\n z-index: 1060;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] {\n margin-top: 12px;\n }\n .react-datepicker-popper[data-placement^=\"top\"] {\n margin-bottom: 6px;\n }\n .react-datepicker-popper[data-placement^=\"right\"] {\n margin-left: 8px;\n }\n .react-datepicker-popper[data-placement^=\"right\"] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n }\n .react-datepicker-popper[data-placement^=\"left\"] {\n margin-right: 8px;\n }\n .react-datepicker-popper[data-placement^=\"left\"] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n }\n .react-datepicker__header {\n text-align: center;\n background-color: ", ";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n padding-top: 10px;\n position: relative;\n }\n .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n }\n .react-datepicker__year-dropdown-container--select,\n .react-datepicker__month-dropdown-container--select,\n .react-datepicker__month-year-dropdown-container--select,\n .react-datepicker__year-dropdown-container--scroll,\n .react-datepicker__month-dropdown-container--scroll,\n .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 2px;\n }\n .react-datepicker__current-month,\n .react-datepicker-time__header {\n margin-top: 0;\n color: ", ";\n font-weight: bold;\n font-size: 18px;\n }\n .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n .react-datepicker__navigation {\n background-color: transparent;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 10px;\n padding: 0;\n height: 10px;\n width: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n text-indent: -999em;\n overflow: hidden;\n }\n .react-datepicker__navigation--previous {\n left: 10px;\n border-right-color: ", ";\n }\n .react-datepicker__navigation--previous:hover {\n border-right-color: ", ";\n }\n .react-datepicker__navigation--previous--disabled,\n .react-datepicker__navigation--previous--disabled:hover {\n border-right-color: ", ";\n cursor: default;\n }\n .react-datepicker__navigation--next {\n right: 10px;\n border-left-color: ", ";\n }\n .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 110px;\n }\n .react-datepicker__navigation--next:hover {\n border-left-color: ", ";\n }\n .react-datepicker__navigation--next--disabled,\n .react-datepicker__navigation--next--disabled:hover {\n border-left-color: ", ";\n cursor: default;\n }\n .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n .react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: ", ";\n }\n .react-datepicker__navigation--years-previous:hover {\n border-top-color: ", ";\n }\n .react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: ", ";\n }\n .react-datepicker__navigation--years-upcoming:hover {\n border-bottom-color: ", ";\n }\n .react-datepicker__month-container {\n float: left;\n }\n .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n }\n .react-datepicker__time-container {\n float: right;\n border-left: 1px solid ", ";\n }\n .react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid ", ";\n border-radius: 0.3rem;\n position: absolute;\n right: -72px;\n top: 0;\n }\n .react-datepicker__time-container .react-datepicker__time {\n font-size: 14px;\n position: relative;\n background: white;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 102px;\n overflow-x: hidden;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: 204px;\n overflow-y: scroll;\n padding: 0;\n width: 100%;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n padding: 5px 10px;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: ", ";\n color: white;\n font-weight: bold;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n }\n .react-datepicker__week-number {\n color: ", ";\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n }\n .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n }\n .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: ", ";\n }\n .react-datepicker__day-names,\n .react-datepicker__week {\n white-space: nowrap;\n }\n .react-datepicker__day-names {\n font-weight: bold;\n }\n .react-datepicker__day-names .react-datepicker__day-name {\n color: ", ";\n }\n .react-datepicker__day-name,\n .react-datepicker__day,\n .react-datepicker__time-name {\n color: ", ";\n display: inline-block;\n width: 1.9rem;\n line-height: 1.9rem;\n text-align: center;\n margin: 0.2rem;\n }\n .react-datepicker__day {\n cursor: pointer;\n }\n .react-datepicker__day:hover {\n border-radius: 0.3rem;\n background-color: ", ";\n }\n .react-datepicker__day--today {\n font-weight: bold;\n }\n .react-datepicker__day--highlighted {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--highlighted:hover {\n background-color: ", ";\n color: ", "\n }\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--selected:hover,\n .react-datepicker__day--in-selecting-range:hover,\n .react-datepicker__day--in-range:hover {\n background-color: ", ";\n }\n .react-datepicker__day--keyboard-selected {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--keyboard-selected:hover {\n background-color: ", ";\n }\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--disabled {\n cursor: default;\n color: ", ";\n }\n .react-datepicker__day--disabled:hover {\n background-color: transparent;\n }\n .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n }\n .react-datepicker__year-read-view,\n .react-datepicker__month-read-view,\n .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n color: ", ";\n }\n .react-datepicker__year-read-view:hover,\n .react-datepicker__month-read-view:hover,\n .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n }\n .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: ", ";\n }\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow {\n border-top-color: ", ";\n float: right;\n margin-left: 20px;\n top: 5px;\n position: relative;\n border-width: 0.45rem;\n }\n .react-datepicker__year-dropdown,\n .react-datepicker__month-dropdown,\n .react-datepicker__month-year-dropdown {\n background-color: ", ";\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid ", ";\n }\n .react-datepicker__year-dropdown:hover,\n .react-datepicker__month-dropdown:hover,\n .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n }\n .react-datepicker__year-dropdown--scrollable,\n .react-datepicker__month-dropdown--scrollable,\n .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n }\n .react-datepicker__year-option,\n .react-datepicker__month-option,\n .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n .react-datepicker__year-option:first-of-type,\n .react-datepicker__month-option:first-of-type,\n .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n }\n .react-datepicker__year-option:last-of-type,\n .react-datepicker__month-option:last-of-type,\n .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n }\n .react-datepicker__year-option:hover,\n .react-datepicker__month-option:hover,\n .react-datepicker__month-year-option:hover {\n background-color: ", ";\n }\n .react-datepicker__year-option--selected,\n .react-datepicker__month-option--selected,\n .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n }\n .react-datepicker__close-icon {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: inline-block;\n height: 0;\n outline: 0;\n padding: 0;\n vertical-align: middle;\n }\n .react-datepicker__close-icon::after {\n background-color: ", ";\n border-radius: 50%;\n bottom: 0;\n box-sizing: border-box;\n color: ", void 0, ";\n border-top: 1px solid ", ";\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n }\n .react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: ", ";\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n }\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n }\n @media (max-width: 400px),\n (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n }\n .react-datepicker__portal .react-datepicker__current-month,\n .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n }\n .react-datepicker__portal .react-datepicker__navigation {\n border: 0.81rem solid transparent;\n }\n .react-datepicker__portal .react-datepicker__navigation--previous {\n border-right-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--previous:hover {\n border-right-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--previous--disabled,\n .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {\n border-right-color: ", ";\n cursor: default;\n }\n .react-datepicker__portal .react-datepicker__navigation--next {\n border-left-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--next:hover {\n border-left-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--next--disabled,\n .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {\n border-left-color: ", ";\n cursor: default;\n }\n"], ["\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow {\n margin-left: -8px;\n position: absolute;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow,\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n box-sizing: content-box;\n position: absolute;\n border: 8px solid transparent;\n height: 0;\n width: 1px;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n content: \"\";\n z-index: -1;\n border-width: 8px;\n left: -8px;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n top: 0;\n margin-top: -8px;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n border-top: none;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n top: -1px;\n border-bottom-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow {\n bottom: 1px;\n margin-bottom: -8px;\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow,\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n border-bottom: none;\n border-top-color: ", ";\n }\n .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n .react-datepicker__year-read-view--down-arrow::before,\n .react-datepicker__month-read-view--down-arrow::before,\n .react-datepicker__month-year-read-view--down-arrow::before {\n bottom: -1px;\n border-top-color: ", ";\n }\n .react-datepicker-wrapper {\n display: inline-block;\n }\n .react-datepicker {\n font-size: 18px;\n background-color: ", ";\n border: solid 1px ", ";\n border-radius: 4px;\n color: ", ";\n box-shadow: 0 5px 10px ", ";\n display: inline-block;\n position: relative;\n }\n .react-datepicker--time-only .react-datepicker__triangle {\n left: 35px;\n }\n .react-datepicker--time-only .react-datepicker__time-container {\n border-left: 0;\n }\n .react-datepicker--time-only .react-datepicker__time {\n border-radius: 0.3rem;\n }\n .react-datepicker--time-only .react-datepicker__time-box {\n border-radius: 0.3rem;\n }\n .react-datepicker__triangle {\n position: absolute;\n left: 50px;\n }\n .react-datepicker-popper {\n z-index: 1060;\n }\n .react-datepicker-popper[data-placement^=\"bottom\"] {\n margin-top: 12px;\n }\n .react-datepicker-popper[data-placement^=\"top\"] {\n margin-bottom: 6px;\n }\n .react-datepicker-popper[data-placement^=\"right\"] {\n margin-left: 8px;\n }\n .react-datepicker-popper[data-placement^=\"right\"] .react-datepicker__triangle {\n left: auto;\n right: 42px;\n }\n .react-datepicker-popper[data-placement^=\"left\"] {\n margin-right: 8px;\n }\n .react-datepicker-popper[data-placement^=\"left\"] .react-datepicker__triangle {\n left: 42px;\n right: auto;\n }\n .react-datepicker__header {\n text-align: center;\n background-color: ", ";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n padding-top: 10px;\n position: relative;\n }\n .react-datepicker__header--time {\n padding-bottom: 8px;\n padding-left: 5px;\n padding-right: 5px;\n }\n .react-datepicker__year-dropdown-container--select,\n .react-datepicker__month-dropdown-container--select,\n .react-datepicker__month-year-dropdown-container--select,\n .react-datepicker__year-dropdown-container--scroll,\n .react-datepicker__month-dropdown-container--scroll,\n .react-datepicker__month-year-dropdown-container--scroll {\n display: inline-block;\n margin: 0 2px;\n }\n .react-datepicker__current-month,\n .react-datepicker-time__header {\n margin-top: 0;\n color: ", ";\n font-weight: bold;\n font-size: 18px;\n }\n .react-datepicker-time__header {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n .react-datepicker__navigation {\n background-color: transparent;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n position: absolute;\n top: 10px;\n padding: 0;\n height: 10px;\n width: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n text-indent: -999em;\n overflow: hidden;\n }\n .react-datepicker__navigation--previous {\n left: 10px;\n border-right-color: ", ";\n }\n .react-datepicker__navigation--previous:hover {\n border-right-color: ", ";\n }\n .react-datepicker__navigation--previous--disabled,\n .react-datepicker__navigation--previous--disabled:hover {\n border-right-color: ", ";\n cursor: default;\n }\n .react-datepicker__navigation--next {\n right: 10px;\n border-left-color: ", ";\n }\n .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n right: 110px;\n }\n .react-datepicker__navigation--next:hover {\n border-left-color: ", ";\n }\n .react-datepicker__navigation--next--disabled,\n .react-datepicker__navigation--next--disabled:hover {\n border-left-color: ", ";\n cursor: default;\n }\n .react-datepicker__navigation--years {\n position: relative;\n top: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n .react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: ", ";\n }\n .react-datepicker__navigation--years-previous:hover {\n border-top-color: ", ";\n }\n .react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: ", ";\n }\n .react-datepicker__navigation--years-upcoming:hover {\n border-bottom-color: ", ";\n }\n .react-datepicker__month-container {\n float: left;\n }\n .react-datepicker__month {\n margin: 0.4rem;\n text-align: center;\n }\n .react-datepicker__time-container {\n float: right;\n border-left: 1px solid ", ";\n }\n .react-datepicker__time-container--with-today-button {\n display: inline;\n border: 1px solid ", ";\n border-radius: 0.3rem;\n position: absolute;\n right: -72px;\n top: 0;\n }\n .react-datepicker__time-container .react-datepicker__time {\n font-size: 14px;\n position: relative;\n background: white;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n width: 102px;\n overflow-x: hidden;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n list-style: none;\n margin: 0;\n height: 204px;\n overflow-y: scroll;\n padding: 0;\n width: 100%;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n padding: 5px 10px;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n cursor: pointer;\n background-color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n background-color: ", ";\n color: white;\n font-weight: bold;\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n background-color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n color: ", ";\n }\n .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n cursor: default;\n background-color: transparent;\n }\n .react-datepicker__week-number {\n color: ", ";\n display: inline-block;\n width: 1.7rem;\n line-height: 1.7rem;\n text-align: center;\n margin: 0.166rem;\n }\n .react-datepicker__week-number.react-datepicker__week-number--clickable {\n cursor: pointer;\n }\n .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n border-radius: 0.3rem;\n background-color: ", ";\n }\n .react-datepicker__day-names,\n .react-datepicker__week {\n white-space: nowrap;\n }\n .react-datepicker__day-names {\n font-weight: bold;\n }\n .react-datepicker__day-names .react-datepicker__day-name {\n color: ", ";\n }\n .react-datepicker__day-name,\n .react-datepicker__day,\n .react-datepicker__time-name {\n color: ", ";\n display: inline-block;\n width: 1.9rem;\n line-height: 1.9rem;\n text-align: center;\n margin: 0.2rem;\n }\n .react-datepicker__day {\n cursor: pointer;\n }\n .react-datepicker__day:hover {\n border-radius: 0.3rem;\n background-color: ", ";\n }\n .react-datepicker__day--today {\n font-weight: bold;\n }\n .react-datepicker__day--highlighted {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--highlighted:hover {\n background-color: ", ";\n color: ", "\n }\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--selected:hover,\n .react-datepicker__day--in-selecting-range:hover,\n .react-datepicker__day--in-range:hover {\n background-color: ", ";\n }\n .react-datepicker__day--keyboard-selected {\n border-radius: 0.3rem;\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--keyboard-selected:hover {\n background-color: ", ";\n }\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n background-color: ", ";\n color: ", ";\n }\n .react-datepicker__day--disabled {\n cursor: default;\n color: ", ";\n }\n .react-datepicker__day--disabled:hover {\n background-color: transparent;\n }\n .react-datepicker__input-container {\n position: relative;\n display: inline-block;\n }\n .react-datepicker__year-read-view,\n .react-datepicker__month-read-view,\n .react-datepicker__month-year-read-view {\n border: 1px solid transparent;\n color: ", ";\n }\n .react-datepicker__year-read-view:hover,\n .react-datepicker__month-read-view:hover,\n .react-datepicker__month-year-read-view:hover {\n cursor: pointer;\n }\n .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n border-top-color: ", ";\n }\n .react-datepicker__year-read-view--down-arrow,\n .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__month-year-read-view--down-arrow {\n border-top-color: ", ";\n float: right;\n margin-left: 20px;\n top: 5px;\n position: relative;\n border-width: 0.45rem;\n }\n .react-datepicker__year-dropdown,\n .react-datepicker__month-dropdown,\n .react-datepicker__month-year-dropdown {\n background-color: ", ";\n position: absolute;\n width: 50%;\n left: 25%;\n top: 30px;\n z-index: 1;\n text-align: center;\n border-radius: 0.3rem;\n border: 1px solid ", ";\n }\n .react-datepicker__year-dropdown:hover,\n .react-datepicker__month-dropdown:hover,\n .react-datepicker__month-year-dropdown:hover {\n cursor: pointer;\n }\n .react-datepicker__year-dropdown--scrollable,\n .react-datepicker__month-dropdown--scrollable,\n .react-datepicker__month-year-dropdown--scrollable {\n height: 150px;\n overflow-y: scroll;\n }\n .react-datepicker__year-option,\n .react-datepicker__month-option,\n .react-datepicker__month-year-option {\n line-height: 20px;\n width: 100%;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n .react-datepicker__year-option:first-of-type,\n .react-datepicker__month-option:first-of-type,\n .react-datepicker__month-year-option:first-of-type {\n border-top-left-radius: 0.3rem;\n border-top-right-radius: 0.3rem;\n }\n .react-datepicker__year-option:last-of-type,\n .react-datepicker__month-option:last-of-type,\n .react-datepicker__month-year-option:last-of-type {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-bottom-left-radius: 0.3rem;\n border-bottom-right-radius: 0.3rem;\n }\n .react-datepicker__year-option:hover,\n .react-datepicker__month-option:hover,\n .react-datepicker__month-year-option:hover {\n background-color: ", ";\n }\n .react-datepicker__year-option--selected,\n .react-datepicker__month-option--selected,\n .react-datepicker__month-year-option--selected {\n position: absolute;\n left: 15px;\n }\n .react-datepicker__close-icon {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: inline-block;\n height: 0;\n outline: 0;\n padding: 0;\n vertical-align: middle;\n }\n .react-datepicker__close-icon::after {\n background-color: ", ";\n border-radius: 50%;\n bottom: 0;\n box-sizing: border-box;\n color: ", ";\n content: \"\\00d7\";\n cursor: pointer;\n font-size: 12px;\n height: 16px;\n width: 16px;\n line-height: 1;\n margin: -8px auto 0;\n padding: 2px;\n position: absolute;\n right: 7px;\n text-align: center;\n top: 50%;\n }\n .react-datepicker__today-button {\n background: ", ";\n border-top: 1px solid ", ";\n cursor: pointer;\n text-align: center;\n font-weight: bold;\n padding: 5px 0;\n clear: left;\n }\n .react-datepicker__portal {\n position: fixed;\n width: 100vw;\n height: 100vh;\n background-color: ", ";\n left: 0;\n top: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n z-index: 2147483647;\n }\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 3rem;\n line-height: 3rem;\n }\n @media (max-width: 400px),\n (max-height: 550px) {\n .react-datepicker__portal .react-datepicker__day-name,\n .react-datepicker__portal .react-datepicker__day,\n .react-datepicker__portal .react-datepicker__time-name {\n width: 2rem;\n line-height: 2rem;\n }\n }\n .react-datepicker__portal .react-datepicker__current-month,\n .react-datepicker__portal .react-datepicker-time__header {\n font-size: 1.44rem;\n }\n .react-datepicker__portal .react-datepicker__navigation {\n border: 0.81rem solid transparent;\n }\n .react-datepicker__portal .react-datepicker__navigation--previous {\n border-right-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--previous:hover {\n border-right-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--previous--disabled,\n .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {\n border-right-color: ", ";\n cursor: default;\n }\n .react-datepicker__portal .react-datepicker__navigation--next {\n border-left-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--next:hover {\n border-left-color: ", ";\n }\n .react-datepicker__portal .react-datepicker__navigation--next--disabled,\n .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {\n border-left-color: ", ";\n cursor: default;\n }\n"]);
|
4760 |
|
4761 | _templateObject$J = function _templateObject() {
|
4762 | return data;
|
4763 | };
|
4764 |
|
4765 | return data;
|
4766 | }
|
4767 | function DatepickerStyles() {
|
4768 | var _useTheme = useTheme(),
|
4769 | colors = _useTheme.colors,
|
4770 | dpColors = _useTheme.datepickerColors;
|
4771 |
|
4772 | var Styles = createGlobalStyle(_templateObject$J(), colors.gray5, dpColors.dpBackground, colors.gray5, colors.white, colors.gray5, colors.white, colors.gray5, colors.gray9, colors.boxShadowLight, dpColors.dpBackground, colors.white, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.dpBackground, dpColors.dpBackground, dpColors.dpBackground, dpColors.dpBackground, colors.gray5, colors.gray5, colors.gray1, dpColors.selected, dpColors.selected, colors.gray2, colors.gray2, colors.gray1, colors.white, colors.gray9, colors.gray3, dpColors.highlight, colors.white, dpColors.highlightHover, colors.gray9, dpColors.selected, colors.white, dpColors.hover, dpColors.keyboard, colors.white, dpColors.hover, dpColors.inRange, colors.gray9, colors.gray3, colors.gray9, colors.gray5, colors.white, colors.gray5, colors.gray3, colors.gray1, colors.gray5, colors.gray3, dpColors.selected, colors.white, colors.gray1, colors.gray5, colors.boxShadowDark, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.navArrow, dpColors.navArrowHover, colors.gray3);
|
4773 | return React.createElement(Styles, null);
|
4774 | }
|
4775 |
|
4776 |
|
4777 |
|
4778 |
|
4779 | var popperPlacementPositions = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
|
4780 | var reactDatePickerPropTypes = {
|
4781 | adjustDateOnChange: PropTypes.bool,
|
4782 | allowSameDay: PropTypes.bool,
|
4783 | autoComplete: PropTypes.string,
|
4784 | autoFocus: PropTypes.bool,
|
4785 | calendarClassName: PropTypes.string,
|
4786 | calendarContainer: PropTypes.func,
|
4787 | children: PropTypes.node,
|
4788 | className: PropTypes.string,
|
4789 | customInput: PropTypes.element,
|
4790 | customInputRef: PropTypes.string,
|
4791 |
|
4792 | dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
4793 | dateFormatCalendar: PropTypes.string,
|
4794 | dayClassName: PropTypes.func,
|
4795 | disabled: PropTypes.bool,
|
4796 | disabledKeyboardNavigation: PropTypes.bool,
|
4797 | dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
|
4798 | endDate: PropTypes.instanceOf(Date),
|
4799 | excludeDates: PropTypes.array,
|
4800 | filterDate: PropTypes.func,
|
4801 | fixedHeight: PropTypes.bool,
|
4802 | formatWeekNumber: PropTypes.func,
|
4803 | highlightDates: PropTypes.array,
|
4804 | id: PropTypes.string,
|
4805 | includeDates: PropTypes.array,
|
4806 | includeTimes: PropTypes.array,
|
4807 | injectTimes: PropTypes.array,
|
4808 | inline: PropTypes.bool,
|
4809 | isClearable: PropTypes.bool,
|
4810 | locale: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
4811 | locale: PropTypes.object
|
4812 | })]),
|
4813 | maxDate: PropTypes.instanceOf(Date),
|
4814 | minDate: PropTypes.instanceOf(Date),
|
4815 | monthsShown: PropTypes.number,
|
4816 | name: PropTypes.string,
|
4817 | onBlur: PropTypes.func,
|
4818 | onChange: PropTypes.func.isRequired,
|
4819 | onSelect: PropTypes.func,
|
4820 | onWeekSelect: PropTypes.func,
|
4821 | onClickOutside: PropTypes.func,
|
4822 | onChangeRaw: PropTypes.func,
|
4823 | onFocus: PropTypes.func,
|
4824 | onInputClick: PropTypes.func,
|
4825 | onKeyDown: PropTypes.func,
|
4826 | onMonthChange: PropTypes.func,
|
4827 | onYearChange: PropTypes.func,
|
4828 | onInputError: PropTypes.func,
|
4829 | open: PropTypes.bool,
|
4830 | openToDate: PropTypes.instanceOf(Date),
|
4831 | peekNextMonth: PropTypes.bool,
|
4832 | placeholderText: PropTypes.string,
|
4833 | popperContainer: PropTypes.func,
|
4834 | popperClassName: PropTypes.string,
|
4835 |
|
4836 | popperModifiers: PropTypes.object,
|
4837 |
|
4838 | popperPlacement: PropTypes.oneOf(popperPlacementPositions),
|
4839 |
|
4840 | popperProps: PropTypes.object,
|
4841 | preventOpenOnFocus: PropTypes.bool,
|
4842 | readOnly: PropTypes.bool,
|
4843 | required: PropTypes.bool,
|
4844 | scrollableYearDropdown: PropTypes.bool,
|
4845 | scrollableMonthYearDropdown: PropTypes.bool,
|
4846 | selected: PropTypes.instanceOf(Date),
|
4847 | selectsEnd: PropTypes.bool,
|
4848 | selectsStart: PropTypes.bool,
|
4849 | showMonthDropdown: PropTypes.bool,
|
4850 | showMonthYearDropdown: PropTypes.bool,
|
4851 | showWeekNumbers: PropTypes.bool,
|
4852 | showYearDropdown: PropTypes.bool,
|
4853 | strictParsing: PropTypes.bool,
|
4854 | forceShowMonthNavigation: PropTypes.bool,
|
4855 | showDisabledMonthNavigation: PropTypes.bool,
|
4856 | startDate: PropTypes.instanceOf(Date),
|
4857 | startOpen: PropTypes.bool,
|
4858 | tabIndex: PropTypes.number,
|
4859 | timeCaption: PropTypes.string,
|
4860 | title: PropTypes.string,
|
4861 | todayButton: PropTypes.node,
|
4862 | useWeekdaysShort: PropTypes.bool,
|
4863 | formatWeekDay: PropTypes.func,
|
4864 | value: PropTypes.string,
|
4865 | weekLabel: PropTypes.string,
|
4866 | withPortal: PropTypes.bool,
|
4867 | yearDropdownItemNumber: PropTypes.number,
|
4868 | shouldCloseOnSelect: PropTypes.bool,
|
4869 | showTimeInput: PropTypes.bool,
|
4870 | showMonthYearPicker: PropTypes.bool,
|
4871 | showTimeSelect: PropTypes.bool,
|
4872 | showTimeSelectOnly: PropTypes.bool,
|
4873 | timeFormat: PropTypes.string,
|
4874 | timeIntervals: PropTypes.number,
|
4875 | minTime: PropTypes.instanceOf(Date),
|
4876 | maxTime: PropTypes.instanceOf(Date),
|
4877 | excludeTimes: PropTypes.array,
|
4878 | useShortMonthInDropdown: PropTypes.bool,
|
4879 | clearButtonTitle: PropTypes.string,
|
4880 | previousMonthButtonLabel: PropTypes.string,
|
4881 | nextMonthButtonLabel: PropTypes.string,
|
4882 | timeInputLabel: PropTypes.string,
|
4883 | renderCustomHeader: PropTypes.func,
|
4884 | renderDayContents: PropTypes.func,
|
4885 | inlineFocusSelectedMonth: PropTypes.bool,
|
4886 | onDayMouseEnter: PropTypes.func,
|
4887 | onMonthMouseLeave: PropTypes.func
|
4888 | };
|
4889 |
|
4890 | function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
4891 |
|
4892 | function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$7(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$7(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
4893 | var STRING_FORMAT = 'yyyy-MM-dd';
|
4894 |
|
4895 | function normalizeDateString(date) {
|
4896 | var stringFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : STRING_FORMAT;
|
4897 |
|
4898 | if (typeof date === 'string') {
|
4899 | var parsedDate = parse(date, stringFormat, new Date());
|
4900 | return isValid(parsedDate) ? format(parsedDate, stringFormat) : '';
|
4901 | }
|
4902 |
|
4903 | return isValid(date) ? format(date, stringFormat) : '';
|
4904 | }
|
4905 |
|
4906 | function normalizeDate(date) {
|
4907 | if (typeof date === 'string') {
|
4908 | var parsedDate = parse(date, STRING_FORMAT, new Date());
|
4909 | return isValid(parsedDate) ? parsedDate : null;
|
4910 | }
|
4911 |
|
4912 | return isValid(date) ? date : null;
|
4913 | }
|
4914 |
|
4915 |
|
4916 |
|
4917 | function NativeDatePicker(props) {
|
4918 | return React.createElement(Textbox, _extends({
|
4919 | prependIconName: "calendar",
|
4920 | type: "date",
|
4921 | value: normalizeDateString(props.selectedDate)
|
4922 | }, props));
|
4923 | }
|
4924 |
|
4925 | var _StyledMaskedTextbox = styled(MaskedTextbox)(["max-width:265px;"]);
|
4926 |
|
4927 | var DateTextbox = React.forwardRef(function DateTextbox(props, ref) {
|
4928 | var inputRef = React.useRef();
|
4929 | React.useImperativeHandle(ref, function () {
|
4930 | return {
|
4931 | focus: function focus() {
|
4932 | inputRef.current.focus();
|
4933 | }
|
4934 | };
|
4935 | });
|
4936 |
|
4937 |
|
4938 | var datepickerProps = _pick(props, _Object$keys(reactDatePickerPropTypes));
|
4939 |
|
4940 | var textboxProps = _omit(props, _Object$keys(reactDatePickerPropTypes));
|
4941 |
|
4942 |
|
4943 |
|
4944 | var textbox = React.createElement(_StyledMaskedTextbox, _extends({
|
4945 | maskType: "date",
|
4946 | placeholder: props.placeholder,
|
4947 | prependIconName: "calendar",
|
4948 | ref: inputRef
|
4949 | }, textboxProps));
|
4950 | return React.createElement(React.Fragment, null, React.createElement(DatepickerStyles, null), props.suppressDatepicker ? textbox : React.createElement(ReactDatePicker, _extends({
|
4951 | customInput: textbox,
|
4952 | placeholderText: props.placeholder,
|
4953 | selected: normalizeDate(props.selectedDate)
|
4954 | }, datepickerProps)));
|
4955 | });
|
4956 |
|
4957 |
|
4958 | var DatePicker = function DatePicker(props) {
|
4959 | var normalizedDateFromProps = props.selectedDate ? normalizeDate(props.selectedDate) : null;
|
4960 |
|
4961 | var _useState = useState(normalizedDateFromProps),
|
4962 | _useState2 = _slicedToArray(_useState, 2),
|
4963 | selectedDate = _useState2[0],
|
4964 | setSelectedDate = _useState2[1];
|
4965 |
|
4966 | function dateSelected(dateOrEvent) {
|
4967 | if (dateOrEvent) {
|
4968 | if (isValid(dateOrEvent)) {
|
4969 | setSelectedDate(dateOrEvent);
|
4970 | } else {
|
4971 | var normalizedDate = normalizeDate(dateOrEvent.target.value);
|
4972 | setSelectedDate(normalizedDate);
|
4973 | }
|
4974 | } else {
|
4975 | setSelectedDate(null);
|
4976 | }
|
4977 | }
|
4978 |
|
4979 | useEffect(function () {
|
4980 | if (normalizeDateString(selectedDate) !== normalizeDateString(props.selectedDate)) {
|
4981 | props.onChange(selectedDate);
|
4982 | }
|
4983 | }, [selectedDate]);
|
4984 | var windowWidth = useWindowWidth();
|
4985 | var theme = useTheme();
|
4986 | var phoneWidth = _parseInt(theme.screenSize.phone, 10) || 0;
|
4987 | var userAgent = navigator.userAgent.toLowerCase();
|
4988 | var isAndroid = _indexOfInstanceProperty(userAgent).call(userAgent, 'android') > -1;
|
4989 | var DatePickerInput = props.allowNativeDatepickerOnMobile && windowWidth <= phoneWidth && !isAndroid ? NativeDatePicker : DateTextbox;
|
4990 |
|
4991 | var actualProps = _objectSpread$7({}, props, {
|
4992 | selectedDate: selectedDate,
|
4993 | onChange: props.onChange ? dateSelected : _noop
|
4994 | });
|
4995 |
|
4996 | return React.createElement(DatePickerInput, actualProps);
|
4997 | };
|
4998 |
|
4999 | DatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
|
5000 | suppressDatepicker: PropTypes.bool,
|
5001 | allowNativeDatepickerOnMobile: PropTypes.bool,
|
5002 | selectedDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
|
5003 | onChange: PropTypes.func
|
5004 | } : {};
|
5005 | DatePicker.defaultProps = {
|
5006 | suppressDatepicker: false,
|
5007 | allowNativeDatepickerOnMobile: true,
|
5008 | selectedDate: '',
|
5009 | onChange: undefined
|
5010 | };
|
5011 |
|
5012 | function _templateObject$K() {
|
5013 | var data = _taggedTemplateLiteral(["\n appearance: textfield;\n flex: 1 0 35px;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n"]);
|
5014 |
|
5015 | _templateObject$K = function _templateObject() {
|
5016 | return data;
|
5017 | };
|
5018 |
|
5019 | return data;
|
5020 | }
|
5021 | var DayInput = styled(InputBase)(_templateObject$K());
|
5022 |
|
5023 | function Day(_ref) {
|
5024 | var onChange = _ref.onChange,
|
5025 | date = _ref.date,
|
5026 | props = _objectWithoutProperties(_ref, ["onChange", "date"]);
|
5027 |
|
5028 | var theme = useTheme();
|
5029 | var validationState = React.useContext(ValidationContext);
|
5030 |
|
5031 | var _React$useState = React.useState(date ? date.getDate() : ''),
|
5032 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
5033 | value = _React$useState2[0],
|
5034 | setValue = _React$useState2[1];
|
5035 |
|
5036 | function onDayChange(event) {
|
5037 | var day = event.target.value;
|
5038 | day = day.length > 2 ? _sliceInstanceProperty(day).call(day, 0, 2) : day;
|
5039 | setValue(day);
|
5040 | onChange('day', day);
|
5041 | }
|
5042 |
|
5043 | return React.createElement(DayInput, _extends({
|
5044 | type: "number",
|
5045 | inputmode: "numeric",
|
5046 | pattern: "[0-9]*",
|
5047 | min: "1",
|
5048 | max: "31",
|
5049 | onChange: onDayChange,
|
5050 | placeholder: "Day",
|
5051 | value: value
|
5052 | }, theme.validationInputColor[validationState], props));
|
5053 | }
|
5054 |
|
5055 | function _templateObject$L() {
|
5056 | var data = _taggedTemplateLiteral(["\n flex: 3 1 100px;\n"]);
|
5057 |
|
5058 | _templateObject$L = function _templateObject() {
|
5059 | return data;
|
5060 | };
|
5061 |
|
5062 | return data;
|
5063 | }
|
5064 | var MonthDropdown = styled(Dropdown)(_templateObject$L());
|
5065 |
|
5066 | function Month(_ref) {
|
5067 | var onChange = _ref.onChange,
|
5068 | monthNames = _ref.monthNames,
|
5069 | selectOptionText = _ref.selectOptionText,
|
5070 | date = _ref.date,
|
5071 | props = _objectWithoutProperties(_ref, ["onChange", "monthNames", "selectOptionText", "date"]);
|
5072 |
|
5073 | var theme = useTheme();
|
5074 | var validationState = React.useContext(ValidationContext);
|
5075 |
|
5076 | var _React$useState = React.useState(date ? date.getMonth() + 1 : ''),
|
5077 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
5078 | month = _React$useState2[0],
|
5079 | setMonth = _React$useState2[1];
|
5080 |
|
5081 | function onMonthChange(event) {
|
5082 | setMonth(event.target.value);
|
5083 | onChange('month', event.target.value);
|
5084 | }
|
5085 |
|
5086 | return React.createElement(MonthDropdown, _extends({
|
5087 | onChange: onMonthChange
|
5088 | }, theme.validationInputColor[validationState], {
|
5089 | value: month
|
5090 | }, props), selectOptionText && React.createElement("option", {
|
5091 | value: "none"
|
5092 | }, selectOptionText), _mapInstanceProperty(monthNames).call(monthNames, function (value, index) {
|
5093 | return React.createElement("option", {
|
5094 | value: index + 1,
|
5095 | key: value
|
5096 | }, value);
|
5097 | }));
|
5098 | }
|
5099 |
|
5100 | Month.propTypes = process.env.NODE_ENV !== "production" ? {
|
5101 |
|
5102 | monthNames: PropTypes.array,
|
5103 |
|
5104 |
|
5105 | selectOptionText: PropTypes.string
|
5106 | } : {};
|
5107 | Month.defaultProps = {
|
5108 | monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
5109 | selectOptionText: undefined
|
5110 | };
|
5111 |
|
5112 | function _templateObject$M() {
|
5113 | var data = _taggedTemplateLiteral(["\n appearance: textfield;\n flex: 2 0 40px;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n }\n"]);
|
5114 |
|
5115 | _templateObject$M = function _templateObject() {
|
5116 | return data;
|
5117 | };
|
5118 |
|
5119 | return data;
|
5120 | }
|
5121 | var YearInput = styled(InputBase)(_templateObject$M());
|
5122 |
|
5123 | function Year(_ref) {
|
5124 | var onChange = _ref.onChange,
|
5125 | date = _ref.date,
|
5126 | props = _objectWithoutProperties(_ref, ["onChange", "date"]);
|
5127 |
|
5128 | var theme = useTheme();
|
5129 | var validationState = React.useContext(ValidationContext);
|
5130 |
|
5131 | var _React$useState = React.useState(date ? date.getFullYear() : ''),
|
5132 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
5133 | value = _React$useState2[0],
|
5134 | setValue = _React$useState2[1];
|
5135 |
|
5136 | function onYearChange(event) {
|
5137 | var year = event.target.value;
|
5138 | year = year.length > 4 ? _sliceInstanceProperty(year).call(year, 0, 4) : year;
|
5139 | setValue(year);
|
5140 | onChange('year', year);
|
5141 | }
|
5142 |
|
5143 | return React.createElement(YearInput, _extends({
|
5144 | type: "number",
|
5145 | inputmode: "numeric",
|
5146 | pattern: "[0-9]*",
|
5147 | onChange: onYearChange,
|
5148 | placeholder: "Year",
|
5149 | value: value
|
5150 | }, theme.validationInputColor[validationState], props));
|
5151 | }
|
5152 |
|
5153 | function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
5154 |
|
5155 | function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty(_context5 = ownKeys$8(source, true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context6; _forEachInstanceProperty(_context6 = ownKeys$8(source)).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
5156 |
|
5157 | function _templateObject$N() {
|
5158 | var data = _taggedTemplateLiteral(["\n display: flex;\n\n && > * {\n margin-right: 2px;\n }\n\n @media (min-width: ", ") {\n max-width: 350px;\n }\n"]);
|
5159 |
|
5160 | _templateObject$N = function _templateObject() {
|
5161 | return data;
|
5162 | };
|
5163 |
|
5164 | return data;
|
5165 | }
|
5166 | var Wrapper = styled.div(_templateObject$N(), function (props) {
|
5167 | return props.theme.screenSize.tablet;
|
5168 | });
|
5169 |
|
5170 | function cleanZeroes(day) {
|
5171 | var cleanDay = day;
|
5172 |
|
5173 | while (cleanDay.charAt(0) === '0') {
|
5174 | cleanDay = cleanDay.substr(1);
|
5175 | }
|
5176 |
|
5177 | return cleanDay;
|
5178 | }
|
5179 |
|
5180 | function reducer(state, action) {
|
5181 | switch (action.type) {
|
5182 | case 'day_updated':
|
5183 | return _objectSpread$8({}, state, {
|
5184 | day: action.value
|
5185 | });
|
5186 |
|
5187 | case 'month_updated':
|
5188 | return _objectSpread$8({}, state, {
|
5189 | month: action.value
|
5190 | });
|
5191 |
|
5192 | case 'year_updated':
|
5193 | return _objectSpread$8({}, state, {
|
5194 | year: action.value
|
5195 | });
|
5196 |
|
5197 | default:
|
5198 | throw new Error();
|
5199 | }
|
5200 | }
|
5201 |
|
5202 | function DateInput(_ref) {
|
5203 | var _context4;
|
5204 |
|
5205 | var children = _ref.children,
|
5206 | defaultValue = _ref.defaultValue,
|
5207 | id = _ref.id,
|
5208 | maxDate = _ref.maxDate,
|
5209 | minDate = _ref.minDate,
|
5210 | onBlur = _ref.onBlur,
|
5211 | onChange = _ref.onChange,
|
5212 | props = _objectWithoutProperties(_ref, ["children", "defaultValue", "id", "maxDate", "minDate", "onBlur", "onChange"]);
|
5213 |
|
5214 | var _useReducer = useReducer(reducer, {
|
5215 | day: defaultValue ? defaultValue.getDate() : '',
|
5216 | month: defaultValue ? defaultValue.getMonth() + 1 : 1,
|
5217 | year: defaultValue ? defaultValue.getFullYear().toString() : ''
|
5218 | }),
|
5219 | _useReducer2 = _slicedToArray(_useReducer, 2),
|
5220 | state = _useReducer2[0],
|
5221 | dispatch = _useReducer2[1];
|
5222 |
|
5223 | var hasDayElement = useRef(false);
|
5224 | useEffect(function () {
|
5225 | var _context;
|
5226 |
|
5227 | _forEachInstanceProperty(_context = React.Children).call(_context, children, function (child) {
|
5228 | if (child.type === Month && !state.month) {
|
5229 | if (child.props.selectOptionText) {
|
5230 | dispatch({
|
5231 | type: 'month_updated',
|
5232 | value: 'none'
|
5233 | });
|
5234 | }
|
5235 | }
|
5236 |
|
5237 | if (child.type === Day) {
|
5238 | hasDayElement.current = true;
|
5239 | }
|
5240 | });
|
5241 | }, []);
|
5242 |
|
5243 | function createDate(year, month, day) {
|
5244 | var _context2, _context3;
|
5245 |
|
5246 | var cleanDay = day ? cleanZeroes(day.toString()) : day;
|
5247 | var date = new Date(_concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(year, "/")).call(_context3, month, "/")).call(_context2, cleanDay));
|
5248 | var dateIsValid = month !== 'none' && year.length === 4 && (hasDayElement.current ? date.getDate().toString() === cleanDay : true) && (month ? (date.getMonth() + 1).toString() === month.toString() : true) && date.getFullYear().toString() === year.toString();
|
5249 | var isInRange = dateIsValid && (minDate ? isAfter(date, minDate) : true) && (maxDate ? isBefore(date, maxDate) : true);
|
5250 | return {
|
5251 | value: dateIsValid ? date : undefined,
|
5252 | isInRange: isInRange
|
5253 | };
|
5254 | }
|
5255 |
|
5256 | function onChangeDatePart(datePart, value) {
|
5257 | switch (datePart) {
|
5258 | case 'day':
|
5259 | onChange(createDate(state.year, state.month, value));
|
5260 | dispatch({
|
5261 | type: 'day_updated',
|
5262 | value: value
|
5263 | });
|
5264 | return;
|
5265 |
|
5266 | case 'month':
|
5267 | onChange(createDate(state.year, value, state.day));
|
5268 | dispatch({
|
5269 | type: 'month_updated',
|
5270 | value: value
|
5271 | });
|
5272 | return;
|
5273 |
|
5274 | case 'year':
|
5275 | onChange(createDate(value, state.month, state.day));
|
5276 | dispatch({
|
5277 | type: 'year_updated',
|
5278 | value: value
|
5279 | });
|
5280 | return;
|
5281 |
|
5282 | default:
|
5283 | throw new Error();
|
5284 | }
|
5285 | }
|
5286 |
|
5287 | function onBlurComponent(event) {
|
5288 | var target = event.currentTarget;
|
5289 |
|
5290 | _setTimeout(function () {
|
5291 | if (!target.contains(document.activeElement)) {
|
5292 | onBlur(event);
|
5293 | }
|
5294 | }, 0);
|
5295 | }
|
5296 |
|
5297 | return React.createElement(Wrapper, _extends({
|
5298 | tabIndex: "-1"
|
5299 | }, props, {
|
5300 | onBlur: onBlurComponent
|
5301 | }), _mapInstanceProperty(_context4 = React.Children).call(_context4, children, function (child, index) {
|
5302 | return index === 0 ? React.cloneElement(child, {
|
5303 | id: id,
|
5304 | onChange: onChangeDatePart,
|
5305 | date: createDate(state.year, state.month, state.day).value
|
5306 | }) : React.cloneElement(child, {
|
5307 | onChange: onChangeDatePart,
|
5308 | date: createDate(state.year, state.month, state.day).value
|
5309 | });
|
5310 | }));
|
5311 | }
|
5312 |
|
5313 | DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
|
5314 | id: PropTypes.string,
|
5315 | children: PropTypes.node.isRequired,
|
5316 |
|
5317 |
|
5318 | maxDate: PropTypes.instanceOf(Date),
|
5319 |
|
5320 |
|
5321 | minDate: PropTypes.instanceOf(Date),
|
5322 |
|
5323 |
|
5324 | onChange: PropTypes.func.isRequired,
|
5325 | onBlur: PropTypes.func,
|
5326 |
|
5327 |
|
5328 | defaultValue: PropTypes.instanceOf(Date)
|
5329 | } : {};
|
5330 | DateInput.defaultProps = {
|
5331 | id: undefined,
|
5332 | maxDate: undefined,
|
5333 | minDate: undefined,
|
5334 | defaultValue: undefined,
|
5335 | onBlur: _noop
|
5336 | };
|
5337 | DateInput.Day = Day;
|
5338 | DateInput.Month = Month;
|
5339 | DateInput.Year = Year;
|
5340 |
|
5341 | function _templateObject3$f() {
|
5342 | var data = _taggedTemplateLiteral(["\n min-width: 0;\n\n .es-button__display {\n min-width: 0;\n }\n"]);
|
5343 |
|
5344 | _templateObject3$f = function _templateObject3() {
|
5345 | return data;
|
5346 | };
|
5347 |
|
5348 | return data;
|
5349 | }
|
5350 |
|
5351 | function _templateObject2$l() {
|
5352 | var data = _taggedTemplateLiteral(["\n margin: 0 10px;\n min-width: 60px;\n padding-right: 12px;\n text-align: center;\n\n @media (min-width: ", ") {\n width: 60px;\n }\n\n /* Hides browser-specific number controls */\n -moz-appearance: textfield;\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &::-ms-clear {\n display: none;\n }\n"]);
|
5353 |
|
5354 | _templateObject2$l = function _templateObject2() {
|
5355 | return data;
|
5356 | };
|
5357 |
|
5358 | return data;
|
5359 | }
|
5360 |
|
5361 | function _templateObject$O() {
|
5362 | var data = _taggedTemplateLiteral(["\n align-items: flex-start;\n display: flex;\n"]);
|
5363 |
|
5364 | _templateObject$O = function _templateObject() {
|
5365 | return data;
|
5366 | };
|
5367 |
|
5368 | return data;
|
5369 | }
|
5370 | var IncrementerWrapper = styled.div(_templateObject$O());
|
5371 | var IncrementerTextbox = styled(InputBase)(_templateObject2$l(), function (props) {
|
5372 | return props.theme.screenSize.tablet;
|
5373 | });
|
5374 | var IncrementerButton = styled(Button)(_templateObject3$f());
|
5375 |
|
5376 | function determineIsDisabled(threshold, newValue) {
|
5377 | return _isFinite(threshold) && newValue === threshold;
|
5378 | }
|
5379 |
|
5380 | function sanitizeValue(val, lower, upper) {
|
5381 | var enteredValue = _parseInt$1(val);
|
5382 |
|
5383 | if (_isFinite(enteredValue)) {
|
5384 | if (upper !== null && enteredValue > upper) {
|
5385 | return upper;
|
5386 | }
|
5387 |
|
5388 | if (lower !== null && enteredValue < lower) {
|
5389 | return lower;
|
5390 | }
|
5391 |
|
5392 | return enteredValue;
|
5393 | }
|
5394 |
|
5395 | return lower > 0 ? lower : 0;
|
5396 | }
|
5397 |
|
5398 | function updateCountReducer(state, action) {
|
5399 | switch (action.type) {
|
5400 | case 'increment':
|
5401 | return {
|
5402 | count: sanitizeValue(_parseInt$1(state.count) + _parseInt$1(action.amount), action.lower, action.upper)
|
5403 | };
|
5404 |
|
5405 | case 'decrement':
|
5406 | return {
|
5407 | count: sanitizeValue(_parseInt$1(state.count) - _parseInt$1(action.amount), action.lower, action.upper)
|
5408 | };
|
5409 |
|
5410 | case 'set':
|
5411 | return {
|
5412 | count: action.amount
|
5413 | };
|
5414 |
|
5415 | default:
|
5416 | }
|
5417 |
|
5418 | return null;
|
5419 | }
|
5420 |
|
5421 | var ScreenReaderButtonText = screenReaderOnly('span');
|
5422 |
|
5423 | function Incrementer(_ref) {
|
5424 | var startingValue = _ref.startingValue,
|
5425 | incrementAmount = _ref.incrementAmount,
|
5426 | decrementAmount = _ref.decrementAmount,
|
5427 | upperThreshold = _ref.upperThreshold,
|
5428 | lowerThreshold = _ref.lowerThreshold,
|
5429 | useOutlineButton = _ref.useOutlineButton,
|
5430 | onValueUpdated = _ref.onValueUpdated,
|
5431 | other = _objectWithoutProperties(_ref, ["startingValue", "incrementAmount", "decrementAmount", "upperThreshold", "lowerThreshold", "useOutlineButton", "onValueUpdated"]);
|
5432 |
|
5433 | var theme = useTheme();
|
5434 | var initialRender = useRef(true);
|
5435 |
|
5436 | var _React$useReducer = React.useReducer(updateCountReducer, {
|
5437 | count: startingValue === null ? '' : startingValue
|
5438 | }),
|
5439 | _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
|
5440 | state = _React$useReducer2[0],
|
5441 | dispatch = _React$useReducer2[1];
|
5442 |
|
5443 | var isIncrementDisabled = determineIsDisabled(upperThreshold, state.count);
|
5444 | var isDecrementDisabled = determineIsDisabled(lowerThreshold, state.count);
|
5445 | React.useEffect(function () {
|
5446 | if (!initialRender.current) {
|
5447 | onValueUpdated(state.count);
|
5448 | }
|
5449 |
|
5450 | initialRender.current = false;
|
5451 | }, [state.count]);
|
5452 |
|
5453 | function setValue(event) {
|
5454 | dispatch({
|
5455 | type: 'set',
|
5456 | amount: event.target.value
|
5457 | });
|
5458 | }
|
5459 |
|
5460 | function decrementValue() {
|
5461 | dispatch({
|
5462 | type: 'decrement',
|
5463 | amount: decrementAmount,
|
5464 | lower: lowerThreshold,
|
5465 | upper: upperThreshold
|
5466 | });
|
5467 | }
|
5468 |
|
5469 | function incrementValue() {
|
5470 | dispatch({
|
5471 | type: 'increment',
|
5472 | amount: incrementAmount,
|
5473 | lower: lowerThreshold,
|
5474 | upper: upperThreshold
|
5475 | });
|
5476 | }
|
5477 |
|
5478 | function handleOnBlur(event) {
|
5479 | var sanitizedValue = sanitizeValue(event.target.value, lowerThreshold, upperThreshold);
|
5480 |
|
5481 | if (event.target.value !== sanitizedValue) {
|
5482 | dispatch({
|
5483 | type: 'set',
|
5484 | amount: sanitizedValue
|
5485 | });
|
5486 | }
|
5487 | }
|
5488 |
|
5489 | function shortcutKeys(event) {
|
5490 | if (upperThreshold && event.keyCode === 35) {
|
5491 | dispatch({
|
5492 | type: 'set',
|
5493 | amount: upperThreshold
|
5494 | });
|
5495 | }
|
5496 |
|
5497 | if (lowerThreshold && event.keyCode === 36) {
|
5498 | dispatch({
|
5499 | type: 'set',
|
5500 | amount: lowerThreshold
|
5501 | });
|
5502 | }
|
5503 | }
|
5504 |
|
5505 | var RenderedButton = useOutlineButton ? OutlineButton : Button;
|
5506 | return React.createElement(IncrementerWrapper, null, React.createElement(IncrementerButton, {
|
5507 | as: RenderedButton,
|
5508 | styleType: "primary",
|
5509 | onClick: decrementValue,
|
5510 | disabled: isDecrementDisabled
|
5511 | }, React.createElement(ScreenReaderButtonText, null, "Decrement value by", decrementAmount), React.createElement(Icon, {
|
5512 | name: "minus",
|
5513 | size: 22
|
5514 | })), React.createElement(IncrementerTextbox, _extends({}, theme.validationInputColor.default, other, {
|
5515 | type: "number",
|
5516 | role: "spinbutton",
|
5517 | max: upperThreshold,
|
5518 | min: lowerThreshold,
|
5519 | step: incrementAmount,
|
5520 | value: state.count,
|
5521 | "aria-valuemin": lowerThreshold,
|
5522 | "aria-valuemax": upperThreshold,
|
5523 | "aria-valuenow": state.count,
|
5524 | onKeyDown: shortcutKeys,
|
5525 | onChange: setValue,
|
5526 | onBlur: handleOnBlur
|
5527 | })), React.createElement(IncrementerButton, {
|
5528 | as: RenderedButton,
|
5529 | styleType: "primary",
|
5530 | onClick: incrementValue,
|
5531 | disabled: isIncrementDisabled
|
5532 | }, React.createElement(ScreenReaderButtonText, null, "Increment value by", incrementAmount), React.createElement(Icon, {
|
5533 | name: "add",
|
5534 | size: 22
|
5535 | })));
|
5536 | }
|
5537 |
|
5538 | Incrementer.propTypes = process.env.NODE_ENV !== "production" ? {
|
5539 |
|
5540 | startingValue: PropTypes.number,
|
5541 |
|
5542 |
|
5543 | incrementAmount: PropTypes.number,
|
5544 |
|
5545 |
|
5546 | decrementAmount: PropTypes.number,
|
5547 |
|
5548 |
|
5549 | upperThreshold: PropTypes.number,
|
5550 |
|
5551 |
|
5552 | lowerThreshold: PropTypes.number,
|
5553 |
|
5554 |
|
5555 | useOutlineButton: PropTypes.bool,
|
5556 |
|
5557 |
|
5558 | onValueUpdated: PropTypes.func
|
5559 | } : {};
|
5560 | Incrementer.defaultProps = {
|
5561 | startingValue: 0,
|
5562 | incrementAmount: 1,
|
5563 | decrementAmount: 1,
|
5564 | onValueUpdated: _noop,
|
5565 | upperThreshold: null,
|
5566 | lowerThreshold: null,
|
5567 | useOutlineButton: false
|
5568 | };
|
5569 |
|
5570 | function getCallToActionChildren(children) {
|
5571 | var _context;
|
5572 |
|
5573 | var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
|
5574 | var allChildren = React.Children.toArray(children);
|
5575 |
|
5576 | var actions = _mapInstanceProperty(_context = _filterInstanceProperty(allChildren).call(allChildren, function (child) {
|
5577 | return child.type.name === 'Action';
|
5578 | })).call(_context, function (action) {
|
5579 | if (type === 'light') {
|
5580 | var _styleType = action.props.isPrimary ? 'primary' : 'darkDefault';
|
5581 |
|
5582 | return React.cloneElement(action, {
|
5583 | styleType: _styleType
|
5584 | });
|
5585 | }
|
5586 |
|
5587 | var styleType = action.props.isPrimary ? 'primary' : 'default';
|
5588 | return React.cloneElement(action, {
|
5589 | styleType: styleType
|
5590 | });
|
5591 | });
|
5592 |
|
5593 | var nonActions = _filterInstanceProperty(allChildren).call(allChildren, function (child) {
|
5594 | return child.type.name !== 'Action';
|
5595 | });
|
5596 |
|
5597 | return {
|
5598 | actions: actions,
|
5599 | nonActions: nonActions
|
5600 | };
|
5601 | }
|
5602 |
|
5603 | function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
5604 |
|
5605 | function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$9(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$9(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
5606 |
|
5607 | function _templateObject2$m() {
|
5608 | var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n"]);
|
5609 |
|
5610 | _templateObject2$m = function _templateObject2() {
|
5611 | return data;
|
5612 | };
|
5613 |
|
5614 | return data;
|
5615 | }
|
5616 |
|
5617 | function _templateObject$P() {
|
5618 | var data = _taggedTemplateLiteral(["\n flex-basis: 100%;\n"]);
|
5619 |
|
5620 | _templateObject$P = function _templateObject() {
|
5621 | return data;
|
5622 | };
|
5623 |
|
5624 | return data;
|
5625 | }
|
5626 | var Container$1 = styled.div(_templateObject$P());
|
5627 | var CallToActionContainer = styled.div(_templateObject2$m());
|
5628 |
|
5629 | function CallToAction(_ref) {
|
5630 | var children = _ref.children,
|
5631 | rest = _objectWithoutProperties(_ref, ["children"]);
|
5632 |
|
5633 | var _getCallToActionChild = getCallToActionChildren(children),
|
5634 | actions = _getCallToActionChild.actions,
|
5635 | nonActions = _getCallToActionChild.nonActions;
|
5636 |
|
5637 | var props = _objectSpread$9({}, rest, {
|
5638 | isDismissable: false
|
5639 | });
|
5640 |
|
5641 | return React.createElement(React.Fragment, null, React.createElement(Notification$1, props, React.createElement(Container$1, null, nonActions)), React.createElement(CallToActionContainer, null, actions));
|
5642 | }
|
5643 |
|
5644 | CallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
|
5645 | children: PropTypes.any
|
5646 | } : {};
|
5647 | CallToAction.defaultProps = {
|
5648 | children: undefined
|
5649 | };
|
5650 |
|
5651 | function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
|
5652 |
|
5653 | function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$a(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$a(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
5654 |
|
5655 | function _templateObject2$n() {
|
5656 | var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n"]);
|
5657 |
|
5658 | _templateObject2$n = function _templateObject2() {
|
5659 | return data;
|
5660 | };
|
5661 |
|
5662 | return data;
|
5663 | }
|
5664 |
|
5665 | function _templateObject$Q() {
|
5666 | var data = _taggedTemplateLiteral(["\n flex-basis: 100%;\n"]);
|
5667 |
|
5668 | _templateObject$Q = function _templateObject() {
|
5669 | return data;
|
5670 | };
|
5671 |
|
5672 | return data;
|
5673 | }
|
5674 | var Container$2 = styled.div(_templateObject$Q());
|
5675 | var CallToActionContainer$1 = styled.div(_templateObject2$n());
|
5676 |
|
5677 | function LightCallToAction(_ref) {
|
5678 | var children = _ref.children,
|
5679 | rest = _objectWithoutProperties(_ref, ["children"]);
|
5680 |
|
5681 | var _getCallToActionChild = getCallToActionChildren(children, 'light'),
|
5682 | actions = _getCallToActionChild.actions,
|
5683 | nonActions = _getCallToActionChild.nonActions;
|
5684 |
|
5685 | var props = _objectSpread$a({}, rest, {
|
5686 | isDismissable: false
|
5687 | });
|
5688 |
|
5689 | return React.createElement(LightNotification, props, React.createElement(Container$2, null, nonActions, React.createElement(CallToActionContainer$1, null, actions)));
|
5690 | }
|
5691 |
|
5692 | LightCallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
|
5693 | children: PropTypes.any
|
5694 | } : {};
|
5695 | LightCallToAction.defaultProps = {
|
5696 | children: undefined
|
5697 | };
|
5698 |
|
5699 | function _templateObject$R() {
|
5700 | var data = _taggedTemplateLiteral(["\n :not(:first-of-type) {\n margin-left: 15px;\n }\n"]);
|
5701 |
|
5702 | _templateObject$R = function _templateObject() {
|
5703 | return data;
|
5704 | };
|
5705 |
|
5706 | return data;
|
5707 | }
|
5708 | var ActionButton$1 = styled(Button)(_templateObject$R());
|
5709 | function Action(_ref) {
|
5710 | var isPrimary = _ref.isPrimary,
|
5711 | children = _ref.children,
|
5712 | rest = _objectWithoutProperties(_ref, ["isPrimary", "children"]);
|
5713 |
|
5714 | return React.createElement(ActionButton$1, rest, children);
|
5715 | }
|
5716 | Action.propTypes = process.env.NODE_ENV !== "production" ? {
|
5717 | isPrimary: PropTypes.bool,
|
5718 | children: PropTypes.node
|
5719 | } : {};
|
5720 | Action.defaultProps = {
|
5721 | isPrimary: false,
|
5722 | children: null
|
5723 | };
|
5724 |
|
5725 | var sizes = {
|
5726 | ACTIVE: 45,
|
5727 | INACTIVE: 20,
|
5728 | DESKTOP: 41,
|
5729 | TRACKING_LINE_HEIGHT: 3
|
5730 | };
|
5731 |
|
5732 | function _templateObject6$3() {
|
5733 | var data = _taggedTemplateLiteral(["\n list-style-type: none;\n max-width: ", "%;\n align-items: center;\n\n &:first-child {\n &,\n & button {\n align-items: flex-start;\n text-align: left;\n }\n }\n\n &:last-child {\n &,\n & button {\n align-items: flex-end;\n text-align: right;\n }\n }\n\n @media (min-width: ", ") {\n width: ", "%;\n\n &:first-child,\n &:last-child {\n &,\n & button {\n align-items: center;\n text-align: center;\n }\n }\n }\n"]);
|
5734 |
|
5735 | _templateObject6$3 = function _templateObject6() {
|
5736 | return data;
|
5737 | };
|
5738 |
|
5739 | return data;
|
5740 | }
|
5741 |
|
5742 | function _templateObject5$4() {
|
5743 | var data = _taggedTemplateLiteral(["\n margin-top: 0;\n\n &::before {\n border: 5px solid ", ";\n border-radius: ", "px;\n color: ", ";\n font-size: ", "px;\n font-weight: bold;\n height: ", "px;\n line-height: 1.5em;\n width: ", "px;\n\n @media (min-width: ", ") {\n border-width: 5px;\n font-size: ", "px;\n height: ", "px;\n line-height: 1.5em;\n width: ", "px;\n }\n }\n\n span {\n color: ", ";\n display: inline;\n font-weight: bold;\n\n @media (min-width: ", ") {\n font-weight: bold;\n }\n }\n"]);
|
5744 |
|
5745 | _templateObject5$4 = function _templateObject5() {
|
5746 | return data;
|
5747 | };
|
5748 |
|
5749 | return data;
|
5750 | }
|
5751 |
|
5752 | function _templateObject4$b() {
|
5753 | var data = _taggedTemplateLiteral(["\n cursor: pointer;\n\n &:hover {\n &::before {\n box-shadow: rgba(0, 0, 0, 0.35) 0 0 3px 1px;\n }\n }\n\n &:active,\n &:hover,\n &:focus {\n span {\n text-decoration: underline;\n }\n }\n\n &:focus {\n &::before {\n box-shadow: ", " 0 0 4px 2px;\n }\n span {\n outline: 1px dotted ", ";\n }\n }\n\n &::before {\n border-color: ", ";\n @media (min-width: ", ") {\n border-width: 5px;\n font-weight: bold;\n line-height: 1.5em;\n }\n }\n\n span {\n @media (min-width: ", ") {\n font-weight: bold;\n }\n }\n"]);
|
5754 |
|
5755 | _templateObject4$b = function _templateObject4() {
|
5756 | return data;
|
5757 | };
|
5758 |
|
5759 | return data;
|
5760 | }
|
5761 |
|
5762 | function _templateObject3$g() {
|
5763 | var data = _taggedTemplateLiteral(["\n cursor: pointer;\n &:hover {\n &::before {\n box-shadow: rgba(0, 0, 0, 0.35) 0 0 3px 1px;\n }\n }\n\n &:active,\n &:hover,\n &:focus {\n span {\n text-decoration: underline;\n }\n }\n"]);
|
5764 |
|
5765 | _templateObject3$g = function _templateObject3() {
|
5766 | return data;
|
5767 | };
|
5768 |
|
5769 | return data;
|
5770 | }
|
5771 |
|
5772 | function _templateObject2$o() {
|
5773 | var data = _taggedTemplateLiteral(["\n align-items: center;\n background: none;\n border: none;\n counter-increment: progress-tracker-counter;\n display: flex;\n flex-flow: column nowrap;\n font-family: 'Source Sans Pro', sans-serif;\n margin-top: ", "px;\n padding: 0;\n text-align: center;\n\n &:active,\n &:hover,\n &:focus {\n outline: none;\n }\n\n @media (min-width: ", ") {\n font-size: 18px;\n margin-top: 0;\n width: 100%;\n }\n\n span {\n color: ", ";\n display: none;\n font-size: 18px;\n line-height: 1.1em;\n\n @media (min-width: ", ") {\n display: inline;\n font-weight: normal;\n }\n }\n\n &::before {\n background-color: white;\n border: ", ";\n border-radius: ", "px;\n box-shadow: 0 0 0 3px white;\n box-sizing: border-box;\n color: ", ";\n content: counter(progress-tracker-counter);\n display: block;\n font-size: ", "px;\n height: ", "px;\n line-height: 1em;\n margin-bottom: 5px;\n text-align: center;\n width: ", "px;\n position: relative;\n\n @media (min-width: ", ") {\n border-radius: ", "px;\n border-width: 3px;\n font-size: ", "px;\n font-weight: normal;\n height: ", "px;\n line-height: 1.7em;\n width: ", "px;\n }\n }\n"]);
|
5774 |
|
5775 | _templateObject2$o = function _templateObject2() {
|
5776 | return data;
|
5777 | };
|
5778 |
|
5779 | return data;
|
5780 | }
|
5781 |
|
5782 | function _templateObject$S() {
|
5783 | var data = _taggedTemplateLiteral(["\n align-items: flex-start;\n background-image: linear-gradient(\n to right,\n ", " 0%,\n ", "\n ", "%,\n ", "\n ", "%,\n ", " 100%\n );\n background-size: 100% ", "px;\n background-position: 0\n ", "px;\n background-repeat: no-repeat;\n counter-reset: progress-tracker-counter;\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n margin-left: 0;\n padding-left: 0;\n width: 100%;\n\n @media (min-width: ", ") {\n background-position: center\n ", "px;\n background-size: ", "%\n ", "px;\n }\n"]);
|
5784 |
|
5785 | _templateObject$S = function _templateObject() {
|
5786 | return data;
|
5787 | };
|
5788 |
|
5789 | return data;
|
5790 | }
|
5791 | var ACTIVE = sizes.ACTIVE,
|
5792 | INACTIVE = sizes.INACTIVE,
|
5793 | DESKTOP = sizes.DESKTOP,
|
5794 | TRACKING_LINE_HEIGHT = sizes.TRACKING_LINE_HEIGHT;
|
5795 |
|
5796 | var getProgressLineBreakPercentage = function getProgressLineBreakPercentage(activeStepIndex, numberOfSteps) {
|
5797 | return activeStepIndex / (numberOfSteps - 1) * 100;
|
5798 | };
|
5799 |
|
5800 | var getProgressItemWidthPercentage = function getProgressItemWidthPercentage(baseAmount) {
|
5801 | return 1 / baseAmount * 100;
|
5802 | };
|
5803 |
|
5804 | var getCenterTopPosition = function getCenterTopPosition(containerHeight, itemHeight) {
|
5805 | return containerHeight / 2 - itemHeight / 2;
|
5806 | };
|
5807 |
|
5808 | var stepStates = {
|
5809 | active: 'active',
|
5810 | pastStep: 'isPastStep',
|
5811 | clickableFutureStep: 'clickableFutureStep'
|
5812 | };
|
5813 | var ProgressContainer = styled.ol(_templateObject$S(), function (props) {
|
5814 | return props.theme.colors.gray9;
|
5815 | }, function (props) {
|
5816 | return props.theme.colors.gray9;
|
5817 | }, function (props) {
|
5818 | return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
|
5819 | }, function (props) {
|
5820 | return props.theme.colors.gray5;
|
5821 | }, function (props) {
|
5822 | return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
|
5823 | }, function (props) {
|
5824 | return props.theme.colors.gray5;
|
5825 | }, function () {
|
5826 | return TRACKING_LINE_HEIGHT;
|
5827 | }, function () {
|
5828 | return getCenterTopPosition(ACTIVE, TRACKING_LINE_HEIGHT);
|
5829 | }, function (props) {
|
5830 | return props.theme.screenSize.tablet;
|
5831 | }, function () {
|
5832 | return getCenterTopPosition(DESKTOP, TRACKING_LINE_HEIGHT);
|
5833 | }, function (props) {
|
5834 | return 100 - getProgressItemWidthPercentage(props.numberOfSteps);
|
5835 | }, function () {
|
5836 | return TRACKING_LINE_HEIGHT;
|
5837 | });
|
5838 | ProgressContainer.propTypes = {
|
5839 | activePercentage: PropTypes.number
|
5840 | };
|
5841 | var BasicProgressButton = styled.button(_templateObject2$o(), function () {
|
5842 | return getCenterTopPosition(ACTIVE, INACTIVE);
|
5843 | }, function (props) {
|
5844 | return props.theme.screenSize.tablet;
|
5845 | }, function (props) {
|
5846 | return props.theme.colors.gray9;
|
5847 | }, function (props) {
|
5848 | return props.theme.screenSize.tablet;
|
5849 | }, function (props) {
|
5850 | return "1px solid ".concat(props.theme.colors.gray5);
|
5851 | }, function () {
|
5852 | return INACTIVE;
|
5853 | }, function (props) {
|
5854 | return props.theme.colors.gray9;
|
5855 | }, function () {
|
5856 | return INACTIVE * 0.8;
|
5857 | }, function () {
|
5858 | return INACTIVE;
|
5859 | }, function () {
|
5860 | return INACTIVE;
|
5861 | }, function (props) {
|
5862 | return props.theme.screenSize.tablet;
|
5863 | }, function () {
|
5864 | return DESKTOP;
|
5865 | }, function () {
|
5866 | return DESKTOP * 0.488;
|
5867 | }, function () {
|
5868 | return DESKTOP;
|
5869 | }, function () {
|
5870 | return DESKTOP;
|
5871 | });
|
5872 | var FutureProgressButton = styled(BasicProgressButton)(_templateObject3$g());
|
5873 | var PastProgressButton = styled(BasicProgressButton)(_templateObject4$b(), function (props) {
|
5874 | return props.theme.colors.inputFocus;
|
5875 | }, function (props) {
|
5876 | return props.theme.colors.inputFocus;
|
5877 | }, function (props) {
|
5878 | return props.theme.colors.gray9;
|
5879 | }, function (props) {
|
5880 | return props.theme.screenSize.tablet;
|
5881 | }, function (props) {
|
5882 | return props.theme.screenSize.tablet;
|
5883 | });
|
5884 | var ActiveProgressButton = styled(BasicProgressButton)(_templateObject5$4(), function (props) {
|
5885 | return props.theme.brandColors.vbMagenta;
|
5886 | }, ACTIVE, function (props) {
|
5887 | return props.theme.brandColors.vbMagenta;
|
5888 | }, ACTIVE * 0.488, ACTIVE, ACTIVE, function (props) {
|
5889 | return props.theme.screenSize.tablet;
|
5890 | }, function () {
|
5891 | return DESKTOP * 0.488;
|
5892 | }, function () {
|
5893 | return DESKTOP;
|
5894 | }, function () {
|
5895 | return DESKTOP;
|
5896 | }, function (props) {
|
5897 | return props.theme.brandColors.vbMagenta;
|
5898 | }, function (props) {
|
5899 | return props.theme.screenSize.tablet;
|
5900 | });
|
5901 | var ProgressLi = styled.li(_templateObject6$3(), function (props) {
|
5902 | return getProgressItemWidthPercentage(props.numberOfSteps - 1);
|
5903 | }, function (props) {
|
5904 | return props.theme.screenSize.tablet;
|
5905 | }, function (props) {
|
5906 | return getProgressItemWidthPercentage(props.numberOfSteps);
|
5907 | });
|
5908 |
|
5909 | function getProgressItemType(itemType) {
|
5910 | switch (itemType) {
|
5911 | case stepStates.active:
|
5912 | return ActiveProgressButton;
|
5913 |
|
5914 | case stepStates.pastStep:
|
5915 | return PastProgressButton;
|
5916 |
|
5917 | case stepStates.clickableFutureStep:
|
5918 | return FutureProgressButton;
|
5919 |
|
5920 | default:
|
5921 | return BasicProgressButton;
|
5922 | }
|
5923 | }
|
5924 |
|
5925 | function getStepState(isActiveStep, isPastStep, canClickFutureStep) {
|
5926 | if (isActiveStep) {
|
5927 | return stepStates.active;
|
5928 | }
|
5929 |
|
5930 | if (isPastStep) {
|
5931 | return stepStates.pastStep;
|
5932 | }
|
5933 |
|
5934 | if (canClickFutureStep) {
|
5935 | return stepStates.clickableFutureStep;
|
5936 | }
|
5937 |
|
5938 | return stepStates.active;
|
5939 | }
|
5940 |
|
5941 | function ProgressItem(_ref) {
|
5942 | var active = _ref.active,
|
5943 | isPastStep = _ref.isPastStep,
|
5944 | numberOfSteps = _ref.numberOfSteps,
|
5945 | onPastStepClicked = _ref.onPastStepClicked,
|
5946 | canClickFutureStep = _ref.canClickFutureStep,
|
5947 | label = _ref.label;
|
5948 | var itemType;
|
5949 |
|
5950 | if (isPastStep || active || canClickFutureStep) {
|
5951 | itemType = getStepState(active, isPastStep, canClickFutureStep);
|
5952 | }
|
5953 |
|
5954 | var ProgressItemType = getProgressItemType(itemType);
|
5955 | var listItemProps = {
|
5956 | numberOfSteps: numberOfSteps,
|
5957 | disabled: !isPastStep && !canClickFutureStep,
|
5958 | onClick: onPastStepClicked
|
5959 | };
|
5960 | return React.createElement(ProgressLi, {
|
5961 | numberOfSteps: numberOfSteps
|
5962 | }, React.createElement(ProgressItemType, listItemProps, React.createElement("span", null, label)));
|
5963 | }
|
5964 | ProgressItem.propTypes = process.env.NODE_ENV !== "production" ? {
|
5965 | active: PropTypes.bool.isRequired,
|
5966 | isPastStep: PropTypes.bool.isRequired,
|
5967 | numberOfSteps: PropTypes.number.isRequired,
|
5968 | onPastStepClicked: PropTypes.func,
|
5969 | label: PropTypes.string,
|
5970 | canClickFutureStep: PropTypes.bool
|
5971 | } : {};
|
5972 | ProgressItem.defaultProps = {
|
5973 | onPastStepClicked: function onPastStepClicked() {},
|
5974 | label: '',
|
5975 | canClickFutureStep: false
|
5976 | };
|
5977 |
|
5978 | var getMappedSteps = function getMappedSteps(steps, _onPastStepClicked, _onFutureStepClicked) {
|
5979 | var isPastStep = true;
|
5980 | return _mapInstanceProperty(steps).call(steps, function (step, index) {
|
5981 | var _context;
|
5982 |
|
5983 | isPastStep = !(step.active || !isPastStep);
|
5984 | return React.createElement(ProgressItem
|
5985 |
|
5986 | , {
|
5987 | key: _concatInstanceProperty(_context = "".concat(index, "-")).call(_context, step.label)
|
5988 |
|
5989 | ,
|
5990 | active: step.active,
|
5991 | isPastStep: isPastStep,
|
5992 | numberOfSteps: steps.length,
|
5993 | onPastStepClicked: function onPastStepClicked() {
|
5994 | return _onPastStepClicked(index);
|
5995 | },
|
5996 | canClickFutureStep: _onFutureStepClicked !== null && _onFutureStepClicked !== undefined,
|
5997 | onFutureStepClicked: function onFutureStepClicked() {
|
5998 | return _onFutureStepClicked(index);
|
5999 | },
|
6000 | label: step.label
|
6001 | });
|
6002 | });
|
6003 | };
|
6004 |
|
6005 | var getIndexOfActiveStep = function getIndexOfActiveStep(steps) {
|
6006 | return _findIndexInstanceProperty(steps).call(steps, function (step) {
|
6007 | return step.active;
|
6008 | });
|
6009 | };
|
6010 |
|
6011 | function ProgressTracker(_ref) {
|
6012 | var steps = _ref.steps,
|
6013 | onPastStepClicked = _ref.onPastStepClicked,
|
6014 | onFutureStepClicked = _ref.onFutureStepClicked;
|
6015 | return React.createElement(ProgressContainer, {
|
6016 | "data-testid": "progress-tracker",
|
6017 | activeStepIndex: getIndexOfActiveStep(steps),
|
6018 | numberOfSteps: steps.length
|
6019 | }, getMappedSteps(steps, onPastStepClicked, onFutureStepClicked));
|
6020 | }
|
6021 |
|
6022 | ProgressTracker.propTypes = process.env.NODE_ENV !== "production" ? {
|
6023 | steps: PropTypes.arrayOf(PropTypes.shape({
|
6024 | active: PropTypes.bool,
|
6025 | label: PropTypes.string
|
6026 | })),
|
6027 | onPastStepClicked: PropTypes.func,
|
6028 | onFutureStepClicked: PropTypes.func
|
6029 | } : {};
|
6030 | ProgressTracker.defaultProps = {
|
6031 | steps: [],
|
6032 | onPastStepClicked: function onPastStepClicked() {},
|
6033 | onFutureStepClicked: null
|
6034 | };
|
6035 | var ProgressTracker$1 = withTheme(ProgressTracker);
|
6036 |
|
6037 | function _templateObject4$c() {
|
6038 | var data = _taggedTemplateLiteral(["\n border: 1px solid black;\n text-align: left;\n margin: 15px 0px;\n thead {\n font-weight: bold;\n }\n th,\n td {\n border: 1px solid black;\n padding: 8px;\n vertical-align: middle;\n }\n td {\n height: 63px;\n }\n"]);
|
6039 |
|
6040 | _templateObject4$c = function _templateObject4() {
|
6041 | return data;
|
6042 | };
|
6043 |
|
6044 | return data;
|
6045 | }
|
6046 |
|
6047 | function _templateObject3$h() {
|
6048 | var data = _taggedTemplateLiteral(["\n background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);\n background-color: #ffc436;\n height: 28px;\n"]);
|
6049 |
|
6050 | _templateObject3$h = function _templateObject3() {
|
6051 | return data;
|
6052 | };
|
6053 |
|
6054 | return data;
|
6055 | }
|
6056 |
|
6057 | function _templateObject2$p() {
|
6058 | var data = _taggedTemplateLiteral(["\n background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);\n background-size: 100% 100%;\n height: 30px;\n width: 150px;\n"]);
|
6059 |
|
6060 | _templateObject2$p = function _templateObject2() {
|
6061 | return data;
|
6062 | };
|
6063 |
|
6064 | return data;
|
6065 | }
|
6066 |
|
6067 | function _templateObject$T() {
|
6068 | var data = _taggedTemplateLiteral(["\n ul {\n display: block;\n list-style-type: disc;\n margin-bottom: 10px;\n margin-left: 0;\n margin-right: 0;\n padding-left: 40px;\n ul {\n list-style-type: circle;\n }\n }\n"]);
|
6069 |
|
6070 | _templateObject$T = function _templateObject() {
|
6071 | return data;
|
6072 | };
|
6073 |
|
6074 | return data;
|
6075 | }
|
6076 | var HelpContent = styled(Modal.Body)(_templateObject$T());
|
6077 | var CautionRating = styled.div(_templateObject2$p());
|
6078 | var StarRating = styled.div(_templateObject3$h());
|
6079 | var RatingTable = styled(Table)(_templateObject4$c());
|
6080 | function StarRatingExplanation(props) {
|
6081 | return React.createElement(Modal, {
|
6082 | show: props.show,
|
6083 | size: "large",
|
6084 | onHide: props.closeModal
|
6085 | }, React.createElement(Modal.Header, null, formatMessage('Plan Ratings')), React.createElement(HelpContent, null, React.createElement("p", null, formatMessage('The Overall Plan Rating combines scores, as rated by Medicare, for the types of services each plan offers.')), React.createElement(RatingTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, formatMessage('Legend')), React.createElement("th", null, formatMessage('Description')))), React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, React.createElement(CautionRating, null)), React.createElement("td", null, formatMessage('Caution - The plan has received low summary ratings from Medicare three years in a row.'))), React.createElement("tr", null, React.createElement("td", null, React.createElement(StarRating, null)), React.createElement("td", null, formatMessage("The plan has been given a 5 out 5 stars rating. People with Medicare can switch into these plans at any time during the year, even if it's not during an enrollment period."))))), React.createElement("strong", null, formatMessage('What is being measured?')), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering health services</0>, the overall score for quality of those services covers <0>36 different topics in 5 categories:</0>'), [React.createElement("strong", {
|
6086 | key: "bold"
|
6087 | })]), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>Staying healthy: screenings, tests, and vaccines:</0> Includes how often members got various screening tests, vaccines, and other check-ups that help them stay healthy.'), [React.createElement("strong", {
|
6088 | key: "bold"
|
6089 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Managing chronic (long-term) conditions:</0> Includes how often members with different conditions got certain tests and treatments that help them manage their condition.'), [React.createElement("strong", {
|
6090 | key: "bold"
|
6091 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Ratings of health plan responsiveness and care:</0> Includes ratings of member satisfaction with the plan.'), [React.createElement("strong", {
|
6092 | key: "bold"
|
6093 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Member complaints, problems getting services, and choosing to leave the plan:</0> Includes how often members filed complaints against the plan and how often members choose to leave the plan. Includes how often Medicare found problems with the plan.'), [React.createElement("strong", {
|
6094 | key: "bold"
|
6095 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Health plan customer service:</0> Includes how well the plan handles calls and makes decisions about member appeals for health coverage.'), [React.createElement("strong", {
|
6096 | key: "bold"
|
6097 | })])))), React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering drug services,</0> the overall score for quality of those services covers <0>17 different topics in 4 categories:</0>'), [React.createElement("strong", {
|
6098 | key: "bold"
|
6099 | })]), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>Drug plan customer service:</0> Includes how well the plan handles calls and makes decisions about member appeals for drug coverage.'), [React.createElement("strong", {
|
6100 | key: "bold"
|
6101 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Member complaints, problems getting services, and choosing to leave the plan:</0> Includes how often members filed complaints about the plan and how often members choose to leave the plan. Includes how often Medicare found problems with the plan.'), [React.createElement("strong", {
|
6102 | key: "bold"
|
6103 | })])), React.createElement("li", null, formatChildren(formatMessage("<0>Member experience with plan's drug services:</0> Includes ratings of member satisfaction with the plan."), [React.createElement("strong", {
|
6104 | key: "bold"
|
6105 | })])), React.createElement("li", null, formatChildren(formatMessage('<0>Drug pricing and patient safety:</0> Includes how well the plan prices prescriptions and provides updated and accurate pricing information for the Medicare website. Includes information on how often members with certain medical conditions get prescription drugs that are considered safer and clinically recommended for their condition. Includes information on whether members are taking certain medications as directed.'), [React.createElement("strong", {
|
6106 | key: "bold"
|
6107 | })])))), React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering both health and drug services,</0> the overall score for quality of those services covers <0>all of the 53 topics listed above.</0>'), [React.createElement("strong", {
|
6108 | key: "bold"
|
6109 | })]))), React.createElement("p", null, React.createElement("strong", null, formatMessage('Where does the information for the Overall Plan Rating come from?'))), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('For quality of <0>health services</0>, the information comes from sources that include:'), [React.createElement("strong", {
|
6110 | key: "bold"
|
6111 | })]), React.createElement("ul", null, React.createElement("li", null, formatMessage('Member surveys done by Medicare')), React.createElement("li", null, formatMessage('Information from clinicians')), React.createElement("li", null, formatMessage('Information submitted by the plans')), React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities")))), React.createElement("li", null, formatChildren(formatMessage('For quality of <0>drug services</0>, the information comes from sources that include:'), [React.createElement("strong", {
|
6112 | key: "bold"
|
6113 | })]), React.createElement("ul", null, React.createElement("li", null, formatMessage('Member surveys done by Medicare')), React.createElement("li", null, formatMessage('Reviews of billing and other information that plans submit to Medicare')), React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities"))))), React.createElement("p", null, React.createElement("strong", null, formatMessage('Why is the Overall Plan Rating important?'))), React.createElement("p", null, formatMessage('The Overall Plan Rating gives you a single summary score that makes it easy for you to compare plans based on quality and performance. Learn more about differences among plans by looking at the detailed ratings.')), React.createElement("p", null, formatMessage('Medicare evaluates plans based on a 5-Star rating system. Star Ratings are calculated each year and may change from one year to the next.'))), React.createElement(Modal.Footer, null, React.createElement(ModalButtonContainer, null, React.createElement(Button, {
|
6114 | onClick: props.closeModal
|
6115 | }, formatMessage('Close')))));
|
6116 | }
|
6117 |
|
6118 | function _templateObject5$5() {
|
6119 | var data = _taggedTemplateLiteral(["\n background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);\n background-size: 100% 100%;\n height: 30px;\n margin-top: -5px;\n"]);
|
6120 |
|
6121 | _templateObject5$5 = function _templateObject5() {
|
6122 | return data;
|
6123 | };
|
6124 |
|
6125 | return data;
|
6126 | }
|
6127 |
|
6128 | function _templateObject4$d() {
|
6129 | var data = _taggedTemplateLiteral(["\n background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);\n height: 25px;\n margin-top: -23px;\n"]);
|
6130 |
|
6131 | _templateObject4$d = function _templateObject4() {
|
6132 | return data;
|
6133 | };
|
6134 |
|
6135 | return data;
|
6136 | }
|
6137 |
|
6138 | function _templateObject3$i() {
|
6139 | var data = _taggedTemplateLiteral(["\n background-color: #ffc436;\n display: block;\n height: 21px;\n margin-left: 2px;\n width: ", ";\n"]);
|
6140 |
|
6141 | _templateObject3$i = function _templateObject3() {
|
6142 | return data;
|
6143 | };
|
6144 |
|
6145 | return data;
|
6146 | }
|
6147 |
|
6148 | function _templateObject2$q() {
|
6149 | var data = _taggedTemplateLiteral(["\n color: ", ";\n border-bottom: 1px dashed;\n text-decoration: none;\n &:hover,\n &:focus {\n color: ", ";\n border-bottom: 1px solid;\n }\n"]);
|
6150 |
|
6151 | _templateObject2$q = function _templateObject2() {
|
6152 | return data;
|
6153 | };
|
6154 |
|
6155 | return data;
|
6156 | }
|
6157 |
|
6158 | function _templateObject$U() {
|
6159 | var data = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 21px;\n margin-top: 3px;\n width: 133px;\n"]);
|
6160 |
|
6161 | _templateObject$U = function _templateObject() {
|
6162 | return data;
|
6163 | };
|
6164 |
|
6165 | return data;
|
6166 | }
|
6167 | var StarContainer = styled.div(_templateObject$U(), function (props) {
|
6168 | return !props.isPoorPerformer ? props.theme.colors.gray5 : 'transparent';
|
6169 | });
|
6170 | var StarRatingLink = styled(LinkButton)(_templateObject2$q(), function (props) {
|
6171 | return props.theme.colors.gray8;
|
6172 | }, function (props) {
|
6173 | return props.theme.colors.gray8;
|
6174 | });
|
6175 | var StarFill = styled.span(_templateObject3$i(), function (props) {
|
6176 | return props.fillWidth;
|
6177 | });
|
6178 | var StarOverlay = styled.div(_templateObject4$d());
|
6179 | var PoorPerformerOverlay = styled.div(_templateObject5$5());
|
6180 |
|
6181 | function getStarRatingBackgroundWidth(rating) {
|
6182 | var starWidth = 20.2;
|
6183 | var spaceWidth = 7;
|
6184 | var ratingFloor = Math.floor(rating);
|
6185 | var spaceNumber = ratingFloor === rating && rating !== 0 ? ratingFloor - 1 : ratingFloor;
|
6186 | var spacingAmount = spaceWidth * spaceNumber;
|
6187 | var width = starWidth * rating;
|
6188 | return "".concat(width + spacingAmount, "px");
|
6189 | }
|
6190 |
|
6191 | function getAriaText(isPoorPerformer, rating) {
|
6192 | if (isPoorPerformer) {
|
6193 | return formatMessage('CMS has indicated that this plan is a poor performer');
|
6194 | }
|
6195 |
|
6196 | if (rating !== null) {
|
6197 | return formatMessage("CMS has rated this plan {rating} out of five stars", {
|
6198 | rating: rating
|
6199 | });
|
6200 | }
|
6201 |
|
6202 | return '';
|
6203 | }
|
6204 |
|
6205 | function StarRating$1(_ref) {
|
6206 | var rating = _ref.rating,
|
6207 | isPoorPerformer = _ref.isPoorPerformer,
|
6208 | onExplanationOpen = _ref.onExplanationOpen;
|
6209 |
|
6210 | var _useState = useState(false),
|
6211 | _useState2 = _slicedToArray(_useState, 2),
|
6212 | showHelp = _useState2[0],
|
6213 | updateShowHelp = _useState2[1];
|
6214 |
|
6215 | var ariaText = getAriaText(isPoorPerformer, rating);
|
6216 | return React.createElement(React.Fragment, null, React.createElement(StarRatingLink, {
|
6217 | onClick: function onClick() {
|
6218 | if (onExplanationOpen) {
|
6219 | onExplanationOpen();
|
6220 | }
|
6221 |
|
6222 | updateShowHelp(true);
|
6223 | }
|
6224 | }, rating === null && React.createElement("span", null, formatMessage('Star Rating not available')), rating !== null && React.createElement(StarContainer, {
|
6225 | "aria-label": ariaText,
|
6226 | isPoorPerformer: isPoorPerformer
|
6227 | }, !isPoorPerformer ? React.createElement("div", null, React.createElement(StarFill, {
|
6228 | fillWidth: getStarRatingBackgroundWidth(rating)
|
6229 | }), React.createElement(StarOverlay, null)) : React.createElement("div", null, React.createElement(PoorPerformerOverlay, null)))), React.createElement(StarRatingExplanation, {
|
6230 | show: showHelp,
|
6231 | closeModal: function closeModal() {
|
6232 | return updateShowHelp(false);
|
6233 | }
|
6234 | }));
|
6235 | }
|
6236 |
|
6237 | StarRating$1.propTypes = process.env.NODE_ENV !== "production" ? {
|
6238 | rating: PropTypes.number.isRequired,
|
6239 | isPoorPerformer: PropTypes.bool,
|
6240 | onExplanationOpen: PropTypes.func
|
6241 | } : {};
|
6242 | StarRating$1.defaultProps = {
|
6243 | isPoorPerformer: false,
|
6244 | onExplanationOpen: function onExplanationOpen() {}
|
6245 | };
|
6246 |
|
6247 | function _templateObject2$r() {
|
6248 | var data = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-dasharray: 187;\n stroke-dashoffset: 37.4;\n transform-origin: center;\n animation: ", " 1.4s ease-in-out infinite,\n ", " 3.5s ease-in-out infinite;\n"]);
|
6249 |
|
6250 | _templateObject2$r = function _templateObject2() {
|
6251 | return data;
|
6252 | };
|
6253 |
|
6254 | return data;
|
6255 | }
|
6256 |
|
6257 | function _templateObject$V() {
|
6258 | var data = _taggedTemplateLiteral(["\n animation: ", " 1.4s linear infinite;\n\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n animation: ", " 1.4s linear infinite;\n }\n"]);
|
6259 |
|
6260 | _templateObject$V = function _templateObject() {
|
6261 | return data;
|
6262 | };
|
6263 |
|
6264 | return data;
|
6265 | }
|
6266 | var rotatorAnimation = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(270deg);}"]);
|
6267 | var ieAnimation = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
|
6268 | var dashAnimation = keyframes(["0%{stroke-dashoffset:187;}50%{stroke-dashoffset:37.4;transform:rotate(135deg);}100%{stroke-dashoffset:187;transform:rotate(450deg);}"]);
|
6269 |
|
6270 | var colorsAnimation = function colorsAnimation(props) {
|
6271 | return keyframes(["0%{stroke:", ";}40%{stroke:", ";}80%{stroke:", ";}100%{stroke:", ";}"], props.theme.brandColors.vbBlue, props.theme.brandColors.vbGreen, props.theme.brandColors.vbMagenta, props.theme.brandColors.vbBlue);
|
6272 | };
|
6273 |
|
6274 | var SpinnerSvg = styled.svg(_templateObject$V(), rotatorAnimation, ieAnimation);
|
6275 | var SpinnerCircle = styled.circle(_templateObject2$r(), function (props) {
|
6276 | return props.theme.colors.violet;
|
6277 | }, dashAnimation, colorsAnimation);
|
6278 |
|
6279 | var Spinner = function Spinner(_ref) {
|
6280 | var _context, _context2;
|
6281 |
|
6282 | var title = _ref.title,
|
6283 | description = _ref.description,
|
6284 | other = _objectWithoutProperties(_ref, ["title", "description"]);
|
6285 |
|
6286 | var titleId = title && "".concat(useUniqueId(other.id), "-title");
|
6287 | var descId = description && "".concat(useUniqueId(other.id), "-desc");
|
6288 | return React.createElement(SpinnerSvg, _extends({
|
6289 | viewBox: "0 0 66 66",
|
6290 | xmlns: "http://www.w3.org/2000/svg",
|
6291 | role: "img",
|
6292 | "aria-labelledby": _trimInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(titleId, " ")).call(_context2, descId)).call(_context)
|
6293 | }, other), title && React.createElement("title", {
|
6294 | id: titleId
|
6295 | }, title), description && React.createElement("desc", {
|
6296 | id: descId
|
6297 | }, description), React.createElement(SpinnerCircle, {
|
6298 | fill: "none",
|
6299 | strokeWidth: "6",
|
6300 | strokeLinecap: "round",
|
6301 | cx: "33",
|
6302 | cy: "33",
|
6303 | r: "30"
|
6304 | }));
|
6305 | };
|
6306 |
|
6307 |
|
6308 | var descriptionTitleProp = process.env.NODE_ENV !== "production" ? function (props, propName, componentName) {
|
6309 | if (!props.title && !props.description) {
|
6310 | return new Error("You must provide a title, description, or both to ".concat(componentName, "."));
|
6311 | }
|
6312 | } : {};
|
6313 | Spinner.propTypes = process.env.NODE_ENV !== "production" ? {
|
6314 | |
6315 |
|
6316 | title: descriptionTitleProp,
|
6317 |
|
6318 | |
6319 |
|
6320 | description: descriptionTitleProp
|
6321 | } : {};
|
6322 | Spinner.defaultProps = {
|
6323 | title: '',
|
6324 | description: ''
|
6325 | };
|
6326 |
|
6327 | function getWindowSize() {
|
6328 | var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
6329 | defaultWidth = _ref.defaultWidth,
|
6330 | defaultHeight = _ref.defaultHeight;
|
6331 |
|
6332 | return {
|
6333 | windowWidth: defaultWidth || document.body.clientWidth,
|
6334 | windowHeight: defaultHeight || document.body.clientHeight
|
6335 | };
|
6336 | }
|
6337 |
|
6338 | function withWindowSize(ComponentClass) {
|
6339 | var windowSize =
|
6340 |
|
6341 | function (_React$Component) {
|
6342 | _inherits(windowSize, _React$Component);
|
6343 |
|
6344 | function windowSize() {
|
6345 | var _getPrototypeOf2, _context;
|
6346 |
|
6347 | var _this;
|
6348 |
|
6349 | _classCallCheck(this, windowSize);
|
6350 |
|
6351 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
6352 | args[_key] = arguments[_key];
|
6353 | }
|
6354 |
|
6355 | _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(windowSize)).call.apply(_getPrototypeOf2, _concatInstanceProperty(_context = [this]).call(_context, args)));
|
6356 |
|
6357 | _defineProperty(_assertThisInitialized(_this), "state", getWindowSize(_this.props));
|
6358 |
|
6359 | _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
|
6360 | var activeTag = document.activeElement.tagName.toLocaleLowerCase();
|
6361 |
|
6362 | if (activeTag === 'input' || activeTag === 'select') {
|
6363 | return;
|
6364 | }
|
6365 |
|
6366 | _this.setState(getWindowSize());
|
6367 | });
|
6368 |
|
6369 | return _this;
|
6370 | }
|
6371 |
|
6372 | _createClass(windowSize, [{
|
6373 | key: "componentDidMount",
|
6374 | value: function componentDidMount() {
|
6375 | window.addEventListener('resize', this.handleResize);
|
6376 | }
|
6377 | }, {
|
6378 | key: "componentWillUnmount",
|
6379 | value: function componentWillUnmount() {
|
6380 | window.removeEventListener('resize', this.handleResize);
|
6381 | }
|
6382 | }, {
|
6383 | key: "render",
|
6384 | value: function render() {
|
6385 | return React.createElement(ComponentClass, _extends({}, this.props, {
|
6386 | windowWidth: this.state.windowWidth,
|
6387 | windowHeight: this.state.windowHeight
|
6388 | }));
|
6389 | }
|
6390 | }]);
|
6391 |
|
6392 | return windowSize;
|
6393 | }(React.Component);
|
6394 |
|
6395 | _defineProperty(windowSize, "defaultProps", {
|
6396 | defaultWidth: null,
|
6397 | defaultHeight: null
|
6398 | });
|
6399 |
|
6400 | windowSize.propTypes = process.env.NODE_ENV !== "production" ? {
|
6401 | defaultWidth: PropTypes.number,
|
6402 | defaultHeight: PropTypes.number
|
6403 | } : {};
|
6404 | return windowSize;
|
6405 | }
|
6406 |
|
6407 | function _templateObject$W() {
|
6408 | var data = _taggedTemplateLiteral(["\n html, body, div, span, applet, object, iframe,\n a, big, cite, code, del, dfn, em, img, ins, kbd,\n q, s, samp, strike, tt, var,\n b, u, i, center, fieldset, form, label, legend\n table, caption, tbody, tfoot, thead, tr, th, td,\n article, aside, canvas, details, embed,\n figure, figcaption, footer, header, hgroup,\n menu, nav, output, ruby, section, summary,\n time, mark, audio, video {\n border: 0;\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-size: 100%;\n margin: 0;\n padding: 0;\n vertical-align: baseline;\n }\n\n ul, ol {\n margin: 0 1em 25px;\n padding-left: 1em;\n list-style-position: outside;\n }\n\n input, button {\n font: inherit;\n }\n\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n\n small {\n font-size: 85%;\n }\n\n strong, b {\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-weight: bold;\n }\n\n h1, h2, h3, h4, h5, h6 {\n color: inherit;\n font: inherit;\n font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n font-weight: 300;\n line-height: 1.1;\n margin-bottom: 0.45em;\n margin-top: 0;\n }\n\n h1 {\n font-size: 44.78976px;\n }\n h2 {\n font-size: 37.3248px;\n }\n h3 {\n font-size: 31.104px;\n }\n h4 {\n font-size: 25.92px;\n }\n h5 {\n font-size: 21.6px;\n }\n h6 {\n font-size: 18px;\n }\n"]);
|
6409 |
|
6410 | _templateObject$W = function _templateObject() {
|
6411 | return data;
|
6412 | };
|
6413 |
|
6414 | return data;
|
6415 | }
|
6416 | var StyleReset = createGlobalStyle(_templateObject$W());
|
6417 |
|
6418 | function isValidEmail(emailAddress) {
|
6419 | var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
6420 | return re.test(emailAddress);
|
6421 | }
|
6422 |
|
6423 | export { Action, ActionButton, AdditionalHelp, AnswerButton, AnswerGroup, Button, CallToAction, Checkbox, Control, DateInput, DatePicker, Drawer, Dropdown, DropdownButton, Fade, Fieldset, Heading, HorizontalNav, Icon, Incrementer, InlineMessage, Label, LightCallToAction, LightNotification, LinkButton, MaskedTextbox, Menu, Message, MessageNotification, Modal, ModalButtonContainer, Notification$1 as Notification, OutlineButton, Popover, PopoverLink, ProgressTracker$1 as ProgressTracker, RadioButton, RadioGroup, ResponsiveTable, SideNav, SlidingPane, Spinner, StarRating$1 as StarRating, StripedContainer, StyleReset, TabPanel, Table, Textarea, Textbox, ToggleButton, Tooltip, generateAlphaName, isValidEmail, screenReaderOnly, useTheme, useWindowWidth, withWindowSize };
|