@zendeskgarden/react-datepickers 9.0.0-next.7 → 9.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/esm/elements/DatePicker/DatePicker.js +169 -0
  2. package/dist/esm/elements/DatePicker/components/Calendar.js +125 -0
  3. package/dist/esm/elements/DatePicker/components/Input.js +75 -0
  4. package/dist/esm/elements/DatePicker/components/MonthSelector.js +61 -0
  5. package/dist/esm/elements/DatePicker/utils/date-picker-reducer.js +187 -0
  6. package/dist/esm/elements/DatePicker/utils/useDatePickerContext.js +14 -0
  7. package/dist/esm/elements/DatePickerRange/DatePickerRange.js +101 -0
  8. package/dist/esm/elements/DatePickerRange/components/Calendar.js +42 -0
  9. package/dist/esm/elements/DatePickerRange/components/End.js +79 -0
  10. package/dist/esm/elements/DatePickerRange/components/Month.js +270 -0
  11. package/dist/esm/elements/DatePickerRange/components/Start.js +79 -0
  12. package/dist/esm/elements/DatePickerRange/utils/date-picker-range-reducer.js +319 -0
  13. package/dist/esm/elements/DatePickerRange/utils/useDatePickerRangeContext.js +14 -0
  14. package/dist/esm/index.js +8 -0
  15. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
  16. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
  17. package/dist/esm/styled/StyledCalendar.js +21 -0
  18. package/dist/esm/styled/StyledCalendarItem.js +34 -0
  19. package/dist/esm/styled/StyledDatePicker.js +32 -0
  20. package/dist/esm/styled/StyledDay.js +54 -0
  21. package/dist/esm/styled/StyledDayLabel.js +21 -0
  22. package/dist/esm/styled/StyledHeader.js +21 -0
  23. package/dist/esm/styled/StyledHeaderLabel.js +21 -0
  24. package/dist/esm/styled/StyledHeaderPaddle.js +38 -0
  25. package/dist/esm/styled/StyledHighlight.js +50 -0
  26. package/dist/esm/styled/StyledMenu.js +22 -0
  27. package/dist/esm/styled/StyledMenuWrapper.js +27 -0
  28. package/dist/esm/styled/StyledRangeCalendar.js +22 -0
  29. package/dist/esm/types/index.js +12 -0
  30. package/dist/esm/utils/calendar-utils.js +88 -0
  31. package/dist/index.cjs.js +12 -28
  32. package/package.json +5 -5
  33. package/dist/index.esm.js +0 -1687
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled, { css } from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'datepickers.highlight';
11
+ const retrieveBorderRadius = _ref => {
12
+ let {
13
+ theme,
14
+ isEnd,
15
+ isStart
16
+ } = _ref;
17
+ const startValue = 'border-radius: 0 50% 50% 0;';
18
+ const endValue = 'border-radius: 50% 0 0 50%;';
19
+ if (theme.rtl) {
20
+ if (isStart) {
21
+ return startValue;
22
+ } else if (isEnd) {
23
+ return endValue;
24
+ }
25
+ }
26
+ if (isStart) {
27
+ return endValue;
28
+ } else if (isEnd) {
29
+ return startValue;
30
+ }
31
+ return '';
32
+ };
33
+ const retrieveColor = _ref2 => {
34
+ let {
35
+ isHighlighted,
36
+ theme
37
+ } = _ref2;
38
+ return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
39
+ };
40
+ const StyledHighlight = styled.div.attrs({
41
+ 'data-garden-id': COMPONENT_ID
42
+ }).withConfig({
43
+ displayName: "StyledHighlight",
44
+ componentId: "sc-16vr32x-0"
45
+ })(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => retrieveComponentStyles(COMPONENT_ID, props));
46
+ StyledHighlight.defaultProps = {
47
+ theme: DEFAULT_THEME
48
+ };
49
+
50
+ export { StyledHighlight };
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'datepickers.menu';
11
+ const StyledMenu = styled.div.attrs({
12
+ 'data-garden-id': COMPONENT_ID,
13
+ 'data-garden-version': '9.0.0-next.9'
14
+ }).withConfig({
15
+ displayName: "StyledMenu",
16
+ componentId: "sc-1npbkk0-0"
17
+ })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
18
+ StyledMenu.defaultProps = {
19
+ theme: DEFAULT_THEME
20
+ };
21
+
22
+ export { StyledMenu };
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { menuStyles, getMenuPosition, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+
10
+ const COMPONENT_ID = 'datepickers.menu_wrapper';
11
+ const StyledMenuWrapper = styled.div.attrs(props => ({
12
+ className: props.isAnimated && 'is-animated'
13
+ })).withConfig({
14
+ displayName: "StyledMenuWrapper",
15
+ componentId: "sc-6fowoz-0"
16
+ })(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
17
+ theme: props.theme,
18
+ hidden: props.isHidden,
19
+ margin: `${props.theme.space.base}px`,
20
+ zIndex: props.zIndex,
21
+ animationModifier: props.isAnimated ? '.is-animated' : undefined
22
+ }), props => retrieveComponentStyles(COMPONENT_ID, props));
23
+ StyledMenuWrapper.defaultProps = {
24
+ theme: DEFAULT_THEME
25
+ };
26
+
27
+ export { StyledMenuWrapper };
@@ -0,0 +1,22 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import styled from 'styled-components';
8
+ import { StyledDatePicker } from './StyledDatePicker.js';
9
+ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
10
+
11
+ const COMPONENT_ID = 'datepickers.range_calendar';
12
+ const StyledRangeCalendar = styled.div.attrs({
13
+ 'data-garden-id': COMPONENT_ID
14
+ }).withConfig({
15
+ displayName: "StyledRangeCalendar",
16
+ componentId: "sc-1og46sy-0"
17
+ })(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatePicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => retrieveComponentStyles(COMPONENT_ID, props));
18
+ StyledRangeCalendar.defaultProps = {
19
+ theme: DEFAULT_THEME
20
+ };
21
+
22
+ export { StyledRangeCalendar };
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
8
+
9
+ const WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
10
+ const PLACEMENT = ['auto', ...PLACEMENT$1];
11
+
12
+ export { PLACEMENT, WEEK_STARTS_ON };
@@ -0,0 +1,88 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ const REGION_MAPPINGS = {
8
+ 'ar-DZ': 0,
9
+ 'ar-SA': 0,
10
+ 'en-CA': 0,
11
+ 'en-GB': 1,
12
+ 'en-US': 0,
13
+ 'fa-IR': 0,
14
+ 'fr-CH': 1,
15
+ 'nl-BE': 1,
16
+ 'pt-BR': 0,
17
+ 'zh-CN': 1,
18
+ 'zh-TW': 1
19
+ };
20
+ const LANGUAGE_MAPPINGS = {
21
+ af: 0,
22
+ ar: 6,
23
+ be: 1,
24
+ bg: 1,
25
+ bn: 0,
26
+ ca: 1,
27
+ cs: 1,
28
+ da: 1,
29
+ de: 1,
30
+ el: 1,
31
+ en: 0,
32
+ eo: 1,
33
+ es: 1,
34
+ et: 1,
35
+ fa: 0,
36
+ fi: 1,
37
+ fil: 0,
38
+ fr: 1,
39
+ gl: 1,
40
+ he: 0,
41
+ hr: 1,
42
+ hu: 1,
43
+ id: 1,
44
+ is: 1,
45
+ it: 1,
46
+ ja: 1,
47
+ ka: 1,
48
+ ko: 0,
49
+ lt: 1,
50
+ lv: 1,
51
+ mk: 1,
52
+ ms: 1,
53
+ nb: 1,
54
+ nl: 1,
55
+ nn: 1,
56
+ pl: 1,
57
+ pt: 0,
58
+ ro: 1,
59
+ ru: 1,
60
+ sk: 1,
61
+ sl: 1,
62
+ sr: 1,
63
+ sv: 1,
64
+ th: 1,
65
+ tr: 1,
66
+ ug: 0,
67
+ uk: 1,
68
+ vi: 1,
69
+ zh: 1
70
+ };
71
+ function getStartOfWeek(locale) {
72
+ if (!locale) {
73
+ return 0;
74
+ }
75
+ for (const region in REGION_MAPPINGS) {
76
+ if (locale.startsWith(region)) {
77
+ return REGION_MAPPINGS[region];
78
+ }
79
+ }
80
+ for (const language in LANGUAGE_MAPPINGS) {
81
+ if (locale.startsWith(language)) {
82
+ return LANGUAGE_MAPPINGS[language];
83
+ }
84
+ }
85
+ return 0;
86
+ }
87
+
88
+ export { getStartOfWeek };
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -63,7 +62,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
63
62
  const COMPONENT_ID$b = 'datepickers.menu';
64
63
  const StyledMenu = styled__default.default.div.attrs({
65
64
  'data-garden-id': COMPONENT_ID$b,
66
- 'data-garden-version': '9.0.0-next.7'
65
+ 'data-garden-version': '9.0.0-next.9'
67
66
  }).withConfig({
68
67
  displayName: "StyledMenu",
69
68
  componentId: "sc-1npbkk0-0"
@@ -389,9 +388,9 @@ function getStartOfWeek(locale) {
389
388
  }
390
389
 
391
390
  var _path$1;
392
- function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
391
+ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
393
392
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
394
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
393
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
395
394
  xmlns: "http://www.w3.org/2000/svg",
396
395
  width: 16,
397
396
  height: 16,
@@ -405,9 +404,9 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
405
404
  };
406
405
 
407
406
  var _path;
408
- function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
407
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
409
408
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
410
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
409
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
411
410
  xmlns: "http://www.w3.org/2000/svg",
412
411
  width: 16,
413
412
  height: 16,
@@ -1358,21 +1357,6 @@ const End = props => {
1358
1357
  };
1359
1358
  End.displayName = 'DatePickerRange.End';
1360
1359
 
1361
- function _extends() {
1362
- _extends = Object.assign ? Object.assign.bind() : function (target) {
1363
- for (var i = 1; i < arguments.length; i++) {
1364
- var source = arguments[i];
1365
- for (var key in source) {
1366
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1367
- target[key] = source[key];
1368
- }
1369
- }
1370
- }
1371
- return target;
1372
- };
1373
- return _extends.apply(this, arguments);
1374
- }
1375
-
1376
1360
  const Month = React.forwardRef((_ref, ref) => {
1377
1361
  let {
1378
1362
  displayDate,
@@ -1609,10 +1593,10 @@ const Calendar = React.forwardRef((props, ref) => {
1609
1593
  const {
1610
1594
  state
1611
1595
  } = useDatePickerContext();
1612
- return React__namespace.default.createElement(StyledRangeCalendar, _extends({
1596
+ return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
1613
1597
  ref: ref,
1614
1598
  "data-garden-id": "datepickers.range",
1615
- "data-garden-version": '9.0.0-next.7'
1599
+ "data-garden-version": '9.0.0-next.9'
1616
1600
  }, props), React__namespace.default.createElement(Month, {
1617
1601
  displayDate: state.previewDate,
1618
1602
  isNextHidden: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-datepickers",
3
- "version": "9.0.0-next.7",
3
+ "version": "9.0.0-next.9",
4
4
  "description": "Components relating to datepickers in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -28,13 +28,13 @@
28
28
  "react-merge-refs": "^2.0.0"
29
29
  },
30
30
  "peerDependencies": {
31
- "@zendeskgarden/react-theming": "^8.1.0",
31
+ "@zendeskgarden/react-theming": ">=9.0.0-next",
32
32
  "react": ">=16.8.0",
33
33
  "react-dom": ">=16.8.0",
34
34
  "styled-components": "^5.3.1"
35
35
  },
36
36
  "devDependencies": {
37
- "@zendeskgarden/react-theming": "^9.0.0-next.7",
37
+ "@zendeskgarden/react-theming": "^9.0.0-next.9",
38
38
  "@zendeskgarden/svg-icons": "7.0.0"
39
39
  },
40
40
  "keywords": [
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
50
+ "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
51
51
  }