@zendeskgarden/react-datepickers 8.75.1 → 8.76.1

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 +211 -0
  2. package/dist/esm/elements/Datepicker/components/Calendar.js +125 -0
  3. package/dist/esm/elements/Datepicker/components/MonthSelector.js +61 -0
  4. package/dist/esm/elements/Datepicker/utils/datepicker-reducer.js +187 -0
  5. package/dist/esm/elements/Datepicker/utils/garden-placements.js +56 -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/datepicker-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 +28 -0
  28. package/dist/esm/styled/StyledRangeCalendar.js +22 -0
  29. package/dist/esm/types/index.js +11 -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 -1714
@@ -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': '8.76.1'
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,28 @@
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, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
9
+ import { getMenuPosition } from '../elements/Datepicker/utils/garden-placements.js';
10
+
11
+ const COMPONENT_ID = 'datepickers.menu_wrapper';
12
+ const StyledMenuWrapper = styled.div.attrs(props => ({
13
+ className: props.isAnimated && 'is-animated'
14
+ })).withConfig({
15
+ displayName: "StyledMenuWrapper",
16
+ componentId: "sc-6fowoz-0"
17
+ })(["", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
18
+ theme: props.theme,
19
+ hidden: props.isHidden,
20
+ margin: `${props.theme.space.base}px`,
21
+ zIndex: props.zIndex,
22
+ animationModifier: props.isAnimated ? '.is-animated' : undefined
23
+ }), props => retrieveComponentStyles(COMPONENT_ID, props));
24
+ StyledMenuWrapper.defaultProps = {
25
+ theme: DEFAULT_THEME
26
+ };
27
+
28
+ 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,11 @@
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 WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
8
+ const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
9
+ const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
10
+
11
+ 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');
@@ -112,7 +111,7 @@ function getMenuPosition(popperPlacement) {
112
111
  const COMPONENT_ID$b = 'datepickers.menu';
113
112
  const StyledMenu = styled__default.default.div.attrs({
114
113
  'data-garden-id': COMPONENT_ID$b,
115
- 'data-garden-version': '8.75.1'
114
+ 'data-garden-version': '8.76.1'
116
115
  }).withConfig({
117
116
  displayName: "StyledMenu",
118
117
  componentId: "sc-1npbkk0-0"
@@ -438,9 +437,9 @@ function getStartOfWeek(locale) {
438
437
  }
439
438
 
440
439
  var _path$1;
441
- 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); }
440
+ 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); }
442
441
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
443
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
442
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
444
443
  xmlns: "http://www.w3.org/2000/svg",
445
444
  width: 16,
446
445
  height: 16,
@@ -454,9 +453,9 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
454
453
  };
455
454
 
456
455
  var _path;
457
- 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); }
456
+ 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); }
458
457
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
459
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
458
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
460
459
  xmlns: "http://www.w3.org/2000/svg",
461
460
  width: 16,
462
461
  height: 16,
@@ -1385,21 +1384,6 @@ const End = props => {
1385
1384
  };
1386
1385
  End.displayName = 'DatepickerRange.End';
1387
1386
 
1388
- function _extends() {
1389
- _extends = Object.assign ? Object.assign.bind() : function (target) {
1390
- for (var i = 1; i < arguments.length; i++) {
1391
- var source = arguments[i];
1392
- for (var key in source) {
1393
- if (Object.prototype.hasOwnProperty.call(source, key)) {
1394
- target[key] = source[key];
1395
- }
1396
- }
1397
- }
1398
- return target;
1399
- };
1400
- return _extends.apply(this, arguments);
1401
- }
1402
-
1403
1387
  const Month = React.forwardRef((_ref, ref) => {
1404
1388
  let {
1405
1389
  displayDate,
@@ -1636,10 +1620,10 @@ const Calendar = React.forwardRef((props, ref) => {
1636
1620
  const {
1637
1621
  state
1638
1622
  } = useDatepickerContext();
1639
- return React__namespace.default.createElement(StyledRangeCalendar, _extends({
1623
+ return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
1640
1624
  ref: ref,
1641
1625
  "data-garden-id": "datepickers.range",
1642
- "data-garden-version": '8.75.1'
1626
+ "data-garden-version": '8.76.1'
1643
1627
  }, props), React__namespace.default.createElement(Month, {
1644
1628
  displayDate: state.previewDate,
1645
1629
  isNextHidden: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-datepickers",
3
- "version": "8.75.1",
3
+ "version": "8.76.1",
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
  ],
@@ -27,13 +27,13 @@
27
27
  "react-popper": "^1.3.4"
28
28
  },
29
29
  "peerDependencies": {
30
- "@zendeskgarden/react-theming": "^8.1.0",
30
+ "@zendeskgarden/react-theming": "^8.75.0",
31
31
  "react": ">=16.8.0",
32
32
  "react-dom": ">=16.8.0",
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^8.75.1",
36
+ "@zendeskgarden/react-theming": "^8.76.1",
37
37
  "@zendeskgarden/svg-icons": "7.0.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "8e2bb36bcfef722db47a135fc987f72597be5000"
49
+ "gitHead": "8351e305688a65273cb18741c0800be8027cf878"
50
50
  }