@zendeskgarden/react-datepickers 9.0.0-next.22 → 9.0.0-next.24

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.
@@ -128,11 +128,11 @@ const DatePicker = forwardRef((props, calendarRef) => {
128
128
  style: {
129
129
  transform
130
130
  },
131
- $isAnimated: isAnimated && (state.isOpen || isVisible),
131
+ $isAnimated: !!isAnimated && (state.isOpen || isVisible),
132
132
  $placement: placement,
133
133
  $zIndex: zIndex,
134
134
  "aria-hidden": !state.isOpen || undefined
135
- }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar, {
135
+ }, !!(state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar, {
136
136
  ref: calendarRef,
137
137
  isCompact: isCompact,
138
138
  value: value,
@@ -76,7 +76,7 @@ const Calendar = forwardRef((_ref, ref) => {
76
76
  const items = eachDayOfInterval({
77
77
  start: startDate,
78
78
  end: endDate
79
- }).map((date, itemsIndex) => {
79
+ }).map(date => {
80
80
  const formattedDayLabel = getDate(date);
81
81
  const isCurrentDate = isToday(date);
82
82
  const isPreviousMonth = !isSameMonth(date, state.previewDate);
@@ -89,7 +89,7 @@ const Calendar = forwardRef((_ref, ref) => {
89
89
  isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
90
90
  }
91
91
  return React__default.createElement(StyledCalendarItem, {
92
- key: `day-${itemsIndex}`,
92
+ key: date.toISOString(),
93
93
  $isCompact: isCompact
94
94
  }, React__default.createElement(StyledDay, {
95
95
  $isToday: isCurrentDate,
@@ -28,7 +28,7 @@ const Calendar = forwardRef((props, ref) => {
28
28
  return React__default.createElement(StyledRangeCalendar, Object.assign({
29
29
  ref: ref,
30
30
  "data-garden-id": "datepickers.range",
31
- "data-garden-version": '9.0.0-next.22'
31
+ "data-garden-version": '9.0.0-next.24'
32
32
  }, props), React__default.createElement(Month, {
33
33
  displayDate: state.previewDate,
34
34
  isNextHidden: true
@@ -96,13 +96,13 @@ const Month = forwardRef((_ref, ref) => {
96
96
  const items = eachDayOfInterval({
97
97
  start: startDate,
98
98
  end: endDate
99
- }).map((date, itemsIndex) => {
99
+ }).map(date => {
100
100
  const formattedDayLabel = dayFormatter(date);
101
101
  const isCurrentDate = isToday(date);
102
102
  const isPreviousMonth = !isSameMonth(date, displayDate);
103
103
  if (isPreviousMonth) {
104
104
  return React__default.createElement(StyledCalendarItem, {
105
- key: `day-${itemsIndex}`,
105
+ key: date.toISOString(),
106
106
  $isCompact: isCompact
107
107
  }, React__default.createElement(StyledDay, {
108
108
  $isCompact: isCompact,
@@ -150,10 +150,10 @@ const Month = forwardRef((_ref, ref) => {
150
150
  }
151
151
  }
152
152
  return React__default.createElement(StyledCalendarItem, {
153
- key: `day-${itemsIndex}`,
153
+ key: date.toISOString(),
154
154
  $isCompact: isCompact
155
155
  }, React__default.createElement(StyledHighlight, {
156
- $isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
156
+ $isHighlighted: !isInvalidDateRange && !!isHighlighted && !isDisabled,
157
157
  $isStart: !isInvalidDateRange && isHighlightStart,
158
158
  $isEnd: !isInvalidDateRange && isHighlightEnd
159
159
  }), React__default.createElement(StyledDay, {
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'datepickers.calendar';
11
11
  const StyledCalendar = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledCalendar",
16
16
  componentId: "sc-g5hoe8-0"
@@ -23,7 +23,7 @@ const sizeStyles = _ref => {
23
23
  };
24
24
  const StyledCalendarItem = styled.div.attrs({
25
25
  'data-garden-id': COMPONENT_ID,
26
- 'data-garden-version': '9.0.0-next.22'
26
+ 'data-garden-version': '9.0.0-next.24'
27
27
  }).withConfig({
28
28
  displayName: "StyledCalendarItem",
29
29
  componentId: "sc-143w8wb-0"
@@ -28,7 +28,7 @@ const colorStyles = _ref2 => {
28
28
  };
29
29
  const StyledDatePicker = styled.div.attrs({
30
30
  'data-garden-id': COMPONENT_ID,
31
- 'data-garden-version': '9.0.0-next.22'
31
+ 'data-garden-version': '9.0.0-next.24'
32
32
  }).withConfig({
33
33
  displayName: "StyledDatePicker",
34
34
  componentId: "sc-15hwqzh-0"
@@ -83,7 +83,7 @@ const colorStyles = _ref => {
83
83
  const COMPONENT_ID = 'datepickers.day';
84
84
  const StyledDay = styled.div.attrs({
85
85
  'data-garden-id': COMPONENT_ID,
86
- 'data-garden-version': '9.0.0-next.22'
86
+ 'data-garden-version': '9.0.0-next.24'
87
87
  }).withConfig({
88
88
  displayName: "StyledDay",
89
89
  componentId: "sc-v42uk5-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'datepickers.day_label';
11
11
  const StyledDayLabel = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledDayLabel",
16
16
  componentId: "sc-9bh1p7-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'datepickers.header';
11
11
  const StyledHeader = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledHeader",
16
16
  componentId: "sc-upq318-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'datepickers.header_label';
11
11
  const StyledHeaderLabel = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledHeaderLabel",
16
16
  componentId: "sc-1ryf5ub-0"
@@ -59,7 +59,7 @@ const colorStyles = _ref2 => {
59
59
  const COMPONENT_ID = 'datepickers.header_paddle';
60
60
  const StyledHeaderPaddle = styled.div.attrs({
61
61
  'data-garden-id': COMPONENT_ID,
62
- 'data-garden-version': '9.0.0-next.22'
62
+ 'data-garden-version': '9.0.0-next.24'
63
63
  }).withConfig({
64
64
  displayName: "StyledHeaderPaddle",
65
65
  componentId: "sc-2oqh0g-0"
@@ -44,7 +44,7 @@ const colorStyles = _ref2 => {
44
44
  };
45
45
  const StyledHighlight = styled.div.attrs({
46
46
  'data-garden-id': COMPONENT_ID,
47
- 'data-garden-version': '9.0.0-next.22'
47
+ 'data-garden-version': '9.0.0-next.24'
48
48
  }).withConfig({
49
49
  displayName: "StyledHighlight",
50
50
  componentId: "sc-16vr32x-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'datepickers.menu';
11
11
  const StyledMenu = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22'
13
+ 'data-garden-version': '9.0.0-next.24'
14
14
  }).withConfig({
15
15
  displayName: "StyledMenu",
16
16
  componentId: "sc-1npbkk0-0"
@@ -10,7 +10,7 @@ import { menuStyles, getMenuPosition, retrieveComponentStyles, DEFAULT_THEME } f
10
10
  const COMPONENT_ID = 'datepickers.menu_wrapper';
11
11
  const StyledMenuWrapper = styled.div.attrs(props => ({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.22',
13
+ 'data-garden-version': '9.0.0-next.24',
14
14
  className: props.$isAnimated && 'is-animated'
15
15
  })).withConfig({
16
16
  displayName: "StyledMenuWrapper",
@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
11
11
  const COMPONENT_ID = 'datepickers.range_calendar';
12
12
  const StyledRangeCalendar = styled.div.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.0.0-next.22'
14
+ 'data-garden-version': '9.0.0-next.24'
15
15
  }).withConfig({
16
16
  displayName: "StyledRangeCalendar",
17
17
  componentId: "sc-1og46sy-0"
package/dist/index.cjs.js CHANGED
@@ -62,7 +62,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
62
62
  const COMPONENT_ID$b = 'datepickers.menu';
63
63
  const StyledMenu = styled__default.default.div.attrs({
64
64
  'data-garden-id': COMPONENT_ID$b,
65
- 'data-garden-version': '9.0.0-next.22'
65
+ 'data-garden-version': '9.0.0-next.24'
66
66
  }).withConfig({
67
67
  displayName: "StyledMenu",
68
68
  componentId: "sc-1npbkk0-0"
@@ -74,7 +74,7 @@ StyledMenu.defaultProps = {
74
74
  const COMPONENT_ID$a = 'datepickers.menu_wrapper';
75
75
  const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
76
76
  'data-garden-id': COMPONENT_ID$a,
77
- 'data-garden-version': '9.0.0-next.22',
77
+ 'data-garden-version': '9.0.0-next.24',
78
78
  className: props.$isAnimated && 'is-animated'
79
79
  })).withConfig({
80
80
  displayName: "StyledMenuWrapper",
@@ -111,7 +111,7 @@ const colorStyles$3 = _ref2 => {
111
111
  };
112
112
  const StyledDatePicker = styled__default.default.div.attrs({
113
113
  'data-garden-id': COMPONENT_ID$9,
114
- 'data-garden-version': '9.0.0-next.22'
114
+ 'data-garden-version': '9.0.0-next.24'
115
115
  }).withConfig({
116
116
  displayName: "StyledDatePicker",
117
117
  componentId: "sc-15hwqzh-0"
@@ -123,7 +123,7 @@ StyledDatePicker.defaultProps = {
123
123
  const COMPONENT_ID$8 = 'datepickers.range_calendar';
124
124
  const StyledRangeCalendar = styled__default.default.div.attrs({
125
125
  'data-garden-id': COMPONENT_ID$8,
126
- 'data-garden-version': '9.0.0-next.22'
126
+ 'data-garden-version': '9.0.0-next.24'
127
127
  }).withConfig({
128
128
  displayName: "StyledRangeCalendar",
129
129
  componentId: "sc-1og46sy-0"
@@ -135,7 +135,7 @@ StyledRangeCalendar.defaultProps = {
135
135
  const COMPONENT_ID$7 = 'datepickers.header';
136
136
  const StyledHeader = styled__default.default.div.attrs({
137
137
  'data-garden-id': COMPONENT_ID$7,
138
- 'data-garden-version': '9.0.0-next.22'
138
+ 'data-garden-version': '9.0.0-next.24'
139
139
  }).withConfig({
140
140
  displayName: "StyledHeader",
141
141
  componentId: "sc-upq318-0"
@@ -196,7 +196,7 @@ const colorStyles$2 = _ref2 => {
196
196
  const COMPONENT_ID$6 = 'datepickers.header_paddle';
197
197
  const StyledHeaderPaddle = styled__default.default.div.attrs({
198
198
  'data-garden-id': COMPONENT_ID$6,
199
- 'data-garden-version': '9.0.0-next.22'
199
+ 'data-garden-version': '9.0.0-next.24'
200
200
  }).withConfig({
201
201
  displayName: "StyledHeaderPaddle",
202
202
  componentId: "sc-2oqh0g-0"
@@ -208,7 +208,7 @@ StyledHeaderPaddle.defaultProps = {
208
208
  const COMPONENT_ID$5 = 'datepickers.header_label';
209
209
  const StyledHeaderLabel = styled__default.default.div.attrs({
210
210
  'data-garden-id': COMPONENT_ID$5,
211
- 'data-garden-version': '9.0.0-next.22'
211
+ 'data-garden-version': '9.0.0-next.24'
212
212
  }).withConfig({
213
213
  displayName: "StyledHeaderLabel",
214
214
  componentId: "sc-1ryf5ub-0"
@@ -220,7 +220,7 @@ StyledHeaderLabel.defaultProps = {
220
220
  const COMPONENT_ID$4 = 'datepickers.calendar';
221
221
  const StyledCalendar = styled__default.default.div.attrs({
222
222
  'data-garden-id': COMPONENT_ID$4,
223
- 'data-garden-version': '9.0.0-next.22'
223
+ 'data-garden-version': '9.0.0-next.24'
224
224
  }).withConfig({
225
225
  displayName: "StyledCalendar",
226
226
  componentId: "sc-g5hoe8-0"
@@ -245,7 +245,7 @@ const sizeStyles$2 = _ref => {
245
245
  };
246
246
  const StyledCalendarItem = styled__default.default.div.attrs({
247
247
  'data-garden-id': COMPONENT_ID$3,
248
- 'data-garden-version': '9.0.0-next.22'
248
+ 'data-garden-version': '9.0.0-next.24'
249
249
  }).withConfig({
250
250
  displayName: "StyledCalendarItem",
251
251
  componentId: "sc-143w8wb-0"
@@ -257,7 +257,7 @@ StyledCalendarItem.defaultProps = {
257
257
  const COMPONENT_ID$2 = 'datepickers.day_label';
258
258
  const StyledDayLabel = styled__default.default.div.attrs({
259
259
  'data-garden-id': COMPONENT_ID$2,
260
- 'data-garden-version': '9.0.0-next.22'
260
+ 'data-garden-version': '9.0.0-next.24'
261
261
  }).withConfig({
262
262
  displayName: "StyledDayLabel",
263
263
  componentId: "sc-9bh1p7-0"
@@ -303,7 +303,7 @@ const colorStyles$1 = _ref2 => {
303
303
  };
304
304
  const StyledHighlight = styled__default.default.div.attrs({
305
305
  'data-garden-id': COMPONENT_ID$1,
306
- 'data-garden-version': '9.0.0-next.22'
306
+ 'data-garden-version': '9.0.0-next.24'
307
307
  }).withConfig({
308
308
  displayName: "StyledHighlight",
309
309
  componentId: "sc-16vr32x-0"
@@ -388,7 +388,7 @@ const colorStyles = _ref => {
388
388
  const COMPONENT_ID = 'datepickers.day';
389
389
  const StyledDay = styled__default.default.div.attrs({
390
390
  'data-garden-id': COMPONENT_ID,
391
- 'data-garden-version': '9.0.0-next.22'
391
+ 'data-garden-version': '9.0.0-next.24'
392
392
  }).withConfig({
393
393
  displayName: "StyledDay",
394
394
  componentId: "sc-v42uk5-0"
@@ -595,7 +595,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
595
595
  const items = eachDayOfInterval.eachDayOfInterval({
596
596
  start: startDate,
597
597
  end: endDate
598
- }).map((date, itemsIndex) => {
598
+ }).map(date => {
599
599
  const formattedDayLabel = getDate.getDate(date);
600
600
  const isCurrentDate = isToday.isToday(date);
601
601
  const isPreviousMonth = !isSameMonth.isSameMonth(date, state.previewDate);
@@ -608,7 +608,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
608
608
  isDisabled = isDisabled || isAfter.isAfter(date, maxValue) && !isSameDay.isSameDay(date, maxValue);
609
609
  }
610
610
  return React__namespace.default.createElement(StyledCalendarItem, {
611
- key: `day-${itemsIndex}`,
611
+ key: date.toISOString(),
612
612
  $isCompact: isCompact
613
613
  }, React__namespace.default.createElement(StyledDay, {
614
614
  $isToday: isCurrentDate,
@@ -979,11 +979,11 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
979
979
  style: {
980
980
  transform
981
981
  },
982
- $isAnimated: isAnimated && (state.isOpen || isVisible),
982
+ $isAnimated: !!isAnimated && (state.isOpen || isVisible),
983
983
  $placement: placement,
984
984
  $zIndex: zIndex,
985
985
  "aria-hidden": !state.isOpen || undefined
986
- }, (state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
986
+ }, !!(state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
987
987
  ref: calendarRef,
988
988
  isCompact: isCompact,
989
989
  value: value,
@@ -1514,13 +1514,13 @@ const Month = React.forwardRef((_ref, ref) => {
1514
1514
  const items = eachDayOfInterval.eachDayOfInterval({
1515
1515
  start: startDate,
1516
1516
  end: endDate
1517
- }).map((date, itemsIndex) => {
1517
+ }).map(date => {
1518
1518
  const formattedDayLabel = dayFormatter(date);
1519
1519
  const isCurrentDate = isToday.isToday(date);
1520
1520
  const isPreviousMonth = !isSameMonth.isSameMonth(date, displayDate);
1521
1521
  if (isPreviousMonth) {
1522
1522
  return React__namespace.default.createElement(StyledCalendarItem, {
1523
- key: `day-${itemsIndex}`,
1523
+ key: date.toISOString(),
1524
1524
  $isCompact: isCompact
1525
1525
  }, React__namespace.default.createElement(StyledDay, {
1526
1526
  $isCompact: isCompact,
@@ -1568,10 +1568,10 @@ const Month = React.forwardRef((_ref, ref) => {
1568
1568
  }
1569
1569
  }
1570
1570
  return React__namespace.default.createElement(StyledCalendarItem, {
1571
- key: `day-${itemsIndex}`,
1571
+ key: date.toISOString(),
1572
1572
  $isCompact: isCompact
1573
1573
  }, React__namespace.default.createElement(StyledHighlight, {
1574
- $isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
1574
+ $isHighlighted: !isInvalidDateRange && !!isHighlighted && !isDisabled,
1575
1575
  $isStart: !isInvalidDateRange && isHighlightStart,
1576
1576
  $isEnd: !isInvalidDateRange && isHighlightEnd
1577
1577
  }), React__namespace.default.createElement(StyledDay, {
@@ -1692,7 +1692,7 @@ const Calendar = React.forwardRef((props, ref) => {
1692
1692
  return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
1693
1693
  ref: ref,
1694
1694
  "data-garden-id": "datepickers.range",
1695
- "data-garden-version": '9.0.0-next.22'
1695
+ "data-garden-version": '9.0.0-next.24'
1696
1696
  }, props), React__namespace.default.createElement(Month, {
1697
1697
  displayDate: state.previewDate,
1698
1698
  isNextHidden: true
@@ -4,7 +4,6 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- /// <reference types="react" />
8
7
  import { IDatePickerState, DatePickerAction } from './date-picker-reducer';
9
8
  export interface IDatePickerContext {
10
9
  state: IDatePickerState;
@@ -10,7 +10,7 @@ import { IDatePickerRangeProps } from '../../types';
10
10
  import { Start } from './components/Start';
11
11
  import { End } from './components/End';
12
12
  import { Calendar } from './components/Calendar';
13
- export declare const DatePickerRange: {
13
+ declare const DatePickerRangeComponent: {
14
14
  (props: PropsWithChildren<IDatePickerRangeProps>): React.JSX.Element;
15
15
  propTypes: {
16
16
  locale: PropTypes.Requireable<string>;
@@ -28,8 +28,10 @@ export declare const DatePickerRange: {
28
28
  locale: string;
29
29
  isCompact: boolean;
30
30
  };
31
- } & {
31
+ };
32
+ export declare const DatePickerRange: typeof DatePickerRangeComponent & {
32
33
  Calendar: typeof Calendar;
33
34
  End: typeof End;
34
35
  Start: typeof Start;
35
36
  };
37
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-datepickers",
3
- "version": "9.0.0-next.22",
3
+ "version": "9.0.0-next.24",
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>",
@@ -29,13 +29,13 @@
29
29
  },
30
30
  "peerDependencies": {
31
31
  "@zendeskgarden/react-theming": ">=9.0.0-next",
32
- "react": ">=16.8.0",
33
- "react-dom": ">=16.8.0",
32
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
33
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
34
34
  "styled-components": "^5.3.1"
35
35
  },
36
36
  "devDependencies": {
37
- "@zendeskgarden/react-theming": "^9.0.0-next.22",
38
- "@zendeskgarden/svg-icons": "7.1.1"
37
+ "@zendeskgarden/react-theming": "^9.0.0-next.24",
38
+ "@zendeskgarden/svg-icons": "7.2.0"
39
39
  },
40
40
  "keywords": [
41
41
  "components",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
50
+ "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
51
51
  }