@zendeskgarden/react-datepickers 8.49.2 → 8.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -195,6 +195,9 @@ function _nonIterableRest() {
195
195
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
196
196
  }
197
197
 
198
+ var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
199
+ var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
200
+
198
201
  function getPopperPlacement(gardenPlacement) {
199
202
  switch (gardenPlacement) {
200
203
  case 'end':
@@ -416,7 +419,7 @@ function getDate(dirtyDate) {
416
419
  var COMPONENT_ID$b = 'datepickers.menu';
417
420
  var StyledMenu = styled__default["default"].div.attrs({
418
421
  'data-garden-id': COMPONENT_ID$b,
419
- 'data-garden-version': '8.49.2'
422
+ 'data-garden-version': '8.50.0'
420
423
  }).withConfig({
421
424
  displayName: "StyledMenu",
422
425
  componentId: "sc-1npbkk0-0"
@@ -3441,7 +3444,7 @@ Datepicker.propTypes = {
3441
3444
  isCompact: PropTypes__default["default"].bool,
3442
3445
  customParseDate: PropTypes__default["default"].any,
3443
3446
  refKey: PropTypes__default["default"].string,
3444
- placement: PropTypes__default["default"].oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
3447
+ placement: PropTypes__default["default"].oneOf(PLACEMENT),
3445
3448
  popperModifiers: PropTypes__default["default"].any,
3446
3449
  isAnimated: PropTypes__default["default"].bool,
3447
3450
  eventsEnabled: PropTypes__default["default"].bool,
@@ -3887,19 +3890,18 @@ function subDays(dirtyDate, dirtyAmount) {
3887
3890
  }
3888
3891
 
3889
3892
  var Month = React.forwardRef(function (_ref, ref) {
3890
- var locale = _ref.locale,
3891
- displayDate = _ref.displayDate,
3892
- isCompact = _ref.isCompact,
3893
+ var displayDate = _ref.displayDate,
3893
3894
  isPreviousHidden = _ref.isPreviousHidden,
3894
- isNextHidden = _ref.isNextHidden,
3895
- dispatch = _ref.dispatch,
3896
- minValue = _ref.minValue,
3897
- maxValue = _ref.maxValue,
3898
- startValue = _ref.startValue,
3899
- endValue = _ref.endValue,
3900
- hoverDate = _ref.hoverDate;
3895
+ isNextHidden = _ref.isNextHidden;
3901
3896
  var _useDatepickerRangeCo = useDatepickerContext(),
3902
3897
  state = _useDatepickerRangeCo.state,
3898
+ dispatch = _useDatepickerRangeCo.dispatch,
3899
+ locale = _useDatepickerRangeCo.locale,
3900
+ isCompact = _useDatepickerRangeCo.isCompact,
3901
+ minValue = _useDatepickerRangeCo.minValue,
3902
+ maxValue = _useDatepickerRangeCo.maxValue,
3903
+ startValue = _useDatepickerRangeCo.startValue,
3904
+ endValue = _useDatepickerRangeCo.endValue,
3903
3905
  onChange = _useDatepickerRangeCo.onChange;
3904
3906
  var headerLabelFormatter = React.useCallback(function (date) {
3905
3907
  var formatter = new Intl.DateTimeFormat(locale, {
@@ -3975,11 +3977,11 @@ var Month = React.forwardRef(function (_ref, ref) {
3975
3977
  var isHighlighted = false;
3976
3978
  if (startValue !== undefined && endValue !== undefined) {
3977
3979
  isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
3978
- } else if (startValue !== undefined && hoverDate !== undefined) {
3979
- isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, hoverDate) || isSameDay(date, hoverDate));
3980
+ } else if (startValue !== undefined && state.hoverDate !== undefined) {
3981
+ isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
3980
3982
  }
3981
3983
  var isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
3982
- var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || hoverDate && isSameDay(date, hoverDate) && !isBefore(date, endValue) || false;
3984
+ var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
3983
3985
  var isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
3984
3986
  if (minValue) {
3985
3987
  if (startValue) {
@@ -4117,40 +4119,17 @@ Month.displayName = 'Month';
4117
4119
 
4118
4120
  var Calendar = React.forwardRef(function (props, ref) {
4119
4121
  var _useDatepickerRangeCo = useDatepickerContext(),
4120
- state = _useDatepickerRangeCo.state,
4121
- dispatch = _useDatepickerRangeCo.dispatch,
4122
- locale = _useDatepickerRangeCo.locale,
4123
- isCompact = _useDatepickerRangeCo.isCompact,
4124
- minValue = _useDatepickerRangeCo.minValue,
4125
- maxValue = _useDatepickerRangeCo.maxValue,
4126
- startValue = _useDatepickerRangeCo.startValue,
4127
- endValue = _useDatepickerRangeCo.endValue;
4122
+ state = _useDatepickerRangeCo.state;
4128
4123
  return React__default["default"].createElement(StyledRangeCalendar, _extends$2({
4129
4124
  ref: ref,
4130
4125
  "data-garden-id": "datepickers.range",
4131
- "data-garden-version": '8.49.2'
4126
+ "data-garden-version": '8.50.0'
4132
4127
  }, props), React__default["default"].createElement(Month, {
4133
- locale: locale,
4134
4128
  displayDate: state.previewDate,
4135
- isCompact: isCompact,
4136
- isNextHidden: true,
4137
- dispatch: dispatch,
4138
- minValue: minValue,
4139
- maxValue: maxValue,
4140
- startValue: startValue,
4141
- endValue: endValue,
4142
- hoverDate: state.hoverDate
4129
+ isNextHidden: true
4143
4130
  }), React__default["default"].createElement(Month, {
4144
- locale: locale,
4145
4131
  displayDate: addMonths(state.previewDate, 1),
4146
- isCompact: isCompact,
4147
- isPreviousHidden: true,
4148
- dispatch: dispatch,
4149
- minValue: minValue,
4150
- maxValue: maxValue,
4151
- startValue: startValue,
4152
- endValue: endValue,
4153
- hoverDate: state.hoverDate
4132
+ isPreviousHidden: true
4154
4133
  }));
4155
4134
  });
4156
4135
  Calendar.displayName = 'DatepickerRange.Calendar';
package/dist/index.esm.js CHANGED
@@ -167,6 +167,9 @@ function _nonIterableRest() {
167
167
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
168
168
  }
169
169
 
170
+ var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
171
+ var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
172
+
170
173
  function getPopperPlacement(gardenPlacement) {
171
174
  switch (gardenPlacement) {
172
175
  case 'end':
@@ -388,7 +391,7 @@ function getDate(dirtyDate) {
388
391
  var COMPONENT_ID$b = 'datepickers.menu';
389
392
  var StyledMenu = styled.div.attrs({
390
393
  'data-garden-id': COMPONENT_ID$b,
391
- 'data-garden-version': '8.49.2'
394
+ 'data-garden-version': '8.50.0'
392
395
  }).withConfig({
393
396
  displayName: "StyledMenu",
394
397
  componentId: "sc-1npbkk0-0"
@@ -3413,7 +3416,7 @@ Datepicker.propTypes = {
3413
3416
  isCompact: PropTypes.bool,
3414
3417
  customParseDate: PropTypes.any,
3415
3418
  refKey: PropTypes.string,
3416
- placement: PropTypes.oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
3419
+ placement: PropTypes.oneOf(PLACEMENT),
3417
3420
  popperModifiers: PropTypes.any,
3418
3421
  isAnimated: PropTypes.bool,
3419
3422
  eventsEnabled: PropTypes.bool,
@@ -3859,19 +3862,18 @@ function subDays(dirtyDate, dirtyAmount) {
3859
3862
  }
3860
3863
 
3861
3864
  var Month = forwardRef(function (_ref, ref) {
3862
- var locale = _ref.locale,
3863
- displayDate = _ref.displayDate,
3864
- isCompact = _ref.isCompact,
3865
+ var displayDate = _ref.displayDate,
3865
3866
  isPreviousHidden = _ref.isPreviousHidden,
3866
- isNextHidden = _ref.isNextHidden,
3867
- dispatch = _ref.dispatch,
3868
- minValue = _ref.minValue,
3869
- maxValue = _ref.maxValue,
3870
- startValue = _ref.startValue,
3871
- endValue = _ref.endValue,
3872
- hoverDate = _ref.hoverDate;
3867
+ isNextHidden = _ref.isNextHidden;
3873
3868
  var _useDatepickerRangeCo = useDatepickerContext(),
3874
3869
  state = _useDatepickerRangeCo.state,
3870
+ dispatch = _useDatepickerRangeCo.dispatch,
3871
+ locale = _useDatepickerRangeCo.locale,
3872
+ isCompact = _useDatepickerRangeCo.isCompact,
3873
+ minValue = _useDatepickerRangeCo.minValue,
3874
+ maxValue = _useDatepickerRangeCo.maxValue,
3875
+ startValue = _useDatepickerRangeCo.startValue,
3876
+ endValue = _useDatepickerRangeCo.endValue,
3875
3877
  onChange = _useDatepickerRangeCo.onChange;
3876
3878
  var headerLabelFormatter = useCallback(function (date) {
3877
3879
  var formatter = new Intl.DateTimeFormat(locale, {
@@ -3947,11 +3949,11 @@ var Month = forwardRef(function (_ref, ref) {
3947
3949
  var isHighlighted = false;
3948
3950
  if (startValue !== undefined && endValue !== undefined) {
3949
3951
  isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, endValue) || isSameDay(date, endValue)) && !isSameDay(startValue, endValue);
3950
- } else if (startValue !== undefined && hoverDate !== undefined) {
3951
- isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, hoverDate) || isSameDay(date, hoverDate));
3952
+ } else if (startValue !== undefined && state.hoverDate !== undefined) {
3953
+ isHighlighted = (isAfter(date, startValue) || isSameDay(date, startValue)) && (isBefore(date, state.hoverDate) || isSameDay(date, state.hoverDate));
3952
3954
  }
3953
3955
  var isHighlightStart = isHighlighted && startValue && isSameDay(date, startValue) || false;
3954
- var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || hoverDate && isSameDay(date, hoverDate) && !isBefore(date, endValue) || false;
3956
+ var isHighlightEnd = isHighlighted && endValue && isSameDay(date, endValue) || state.hoverDate && isSameDay(date, state.hoverDate) && !isBefore(date, endValue) || false;
3955
3957
  var isInvalidDateRange = endValue && startValue && compareAsc(endValue, startValue) === -1 || false;
3956
3958
  if (minValue) {
3957
3959
  if (startValue) {
@@ -4089,40 +4091,17 @@ Month.displayName = 'Month';
4089
4091
 
4090
4092
  var Calendar = forwardRef(function (props, ref) {
4091
4093
  var _useDatepickerRangeCo = useDatepickerContext(),
4092
- state = _useDatepickerRangeCo.state,
4093
- dispatch = _useDatepickerRangeCo.dispatch,
4094
- locale = _useDatepickerRangeCo.locale,
4095
- isCompact = _useDatepickerRangeCo.isCompact,
4096
- minValue = _useDatepickerRangeCo.minValue,
4097
- maxValue = _useDatepickerRangeCo.maxValue,
4098
- startValue = _useDatepickerRangeCo.startValue,
4099
- endValue = _useDatepickerRangeCo.endValue;
4094
+ state = _useDatepickerRangeCo.state;
4100
4095
  return React__default.createElement(StyledRangeCalendar, _extends$2({
4101
4096
  ref: ref,
4102
4097
  "data-garden-id": "datepickers.range",
4103
- "data-garden-version": '8.49.2'
4098
+ "data-garden-version": '8.50.0'
4104
4099
  }, props), React__default.createElement(Month, {
4105
- locale: locale,
4106
4100
  displayDate: state.previewDate,
4107
- isCompact: isCompact,
4108
- isNextHidden: true,
4109
- dispatch: dispatch,
4110
- minValue: minValue,
4111
- maxValue: maxValue,
4112
- startValue: startValue,
4113
- endValue: endValue,
4114
- hoverDate: state.hoverDate
4101
+ isNextHidden: true
4115
4102
  }), React__default.createElement(Month, {
4116
- locale: locale,
4117
4103
  displayDate: addMonths(state.previewDate, 1),
4118
- isCompact: isCompact,
4119
- isPreviousHidden: true,
4120
- dispatch: dispatch,
4121
- minValue: minValue,
4122
- maxValue: maxValue,
4123
- startValue: startValue,
4124
- endValue: endValue,
4125
- hoverDate: state.hoverDate
4104
+ isPreviousHidden: true
4126
4105
  }));
4127
4106
  });
4128
4107
  Calendar.displayName = 'DatepickerRange.Calendar';
@@ -4,77 +4,9 @@
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
- import React, { HTMLAttributes } from 'react';
8
- import { Modifiers } from 'popper.js';
9
- import { GARDEN_PLACEMENT } from './utils/garden-placements';
7
+ import React from 'react';
8
+ import { IDatepickerProps } from '../../types';
10
9
  /**
11
10
  * @extends HTMLAttributes<HTMLDivElement>
12
11
  */
13
- export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
14
- /**
15
- * Sets the selected date
16
- */
17
- value?: Date;
18
- /**
19
- * Handles date change
20
- *
21
- * @param {Date} date The selected date
22
- */
23
- onChange?: (date: Date) => void;
24
- /**
25
- * Customizes the input element's date formatting
26
- *
27
- * @param {Date} date The selected date
28
- * @returns {string} a formatted date string
29
- */
30
- formatDate?: (date: Date) => string;
31
- /**
32
- * Applies locale-based formatting.
33
- * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
34
- */
35
- locale?: string;
36
- /**
37
- * Disables dates before this value on the calendar
38
- */
39
- minValue?: Date;
40
- /**
41
- * Disables dates after this value on the calendar
42
- */
43
- maxValue?: Date;
44
- /**
45
- * Applies compact styling
46
- */
47
- isCompact?: boolean;
48
- /**
49
- * Overrides default date parsing
50
- *
51
- * @param {string} inputValue A localized input value
52
- * @returns {Date} the parsed date
53
- */
54
- customParseDate?: (inputValue: string) => Date;
55
- /**
56
- * Defines the ref key used to position the calendar
57
- */
58
- refKey?: string;
59
- /**
60
- * Adjusts the position of the calendar
61
- **/
62
- placement?: GARDEN_PLACEMENT;
63
- /**
64
- * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
65
- */
66
- popperModifiers?: Modifiers;
67
- /**
68
- * Animates the calendar
69
- */
70
- isAnimated?: boolean;
71
- /**
72
- * Allows the calendar to reposition during browser resize events
73
- */
74
- eventsEnabled?: boolean;
75
- /**
76
- * Sets the `z-index` of the calendar
77
- */
78
- zIndex?: number;
79
- }
80
12
  export declare const Datepicker: React.ForwardRefExoticComponent<IDatepickerProps & React.RefAttributes<HTMLDivElement>>;
@@ -4,7 +4,7 @@
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
- import { IDatepickerProps } from '../Datepicker';
7
+ import { IDatepickerProps } from '../../../types';
8
8
  export interface IDatepickerState {
9
9
  isOpen: boolean;
10
10
  previewDate: Date;
@@ -4,22 +4,18 @@
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
- import { MENU_POSITION } from '@zendeskgarden/react-theming';
8
- declare type SHARED_PLACEMENT = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
9
- export declare type GARDEN_PLACEMENT = SHARED_PLACEMENT | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
10
- export declare type POPPER_PLACEMENT = SHARED_PLACEMENT | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
7
+ import { GardenPlacement, PopperPlacement } from '../../../types';
11
8
  /**
12
9
  * Convert Garden RTL aware placement to Popper.JS valid placement
13
10
  */
14
- export declare function getPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
11
+ export declare function getPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
15
12
  /**
16
13
  * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
17
14
  * @param {String} gardenPlacement
18
15
  */
19
- export declare function getRtlPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
16
+ export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
20
17
  /**
21
18
  * Convert Popper.JS placement to corresponding menu position
22
19
  * @param {String} popperPlacement
23
20
  */
24
- export declare function getMenuPosition(popperPlacement?: POPPER_PLACEMENT): MENU_POSITION;
25
- export {};
21
+ export declare function getMenuPosition(popperPlacement?: PopperPlacement): "top" | "bottom" | "right" | "left";
@@ -6,61 +6,10 @@
6
6
  */
7
7
  import { PropsWithChildren } from 'react';
8
8
  import PropTypes from 'prop-types';
9
+ import { IDatepickerRangeProps } from '../../types';
9
10
  import { Start } from './components/Start';
10
11
  import { End } from './components/End';
11
12
  import { Calendar } from './components/Calendar';
12
- export interface IDatepickerRangeProps {
13
- /**
14
- * Applies locale-based formatting.
15
- * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
16
- */
17
- locale?: string;
18
- /**
19
- * Sets the start date
20
- */
21
- startValue?: Date;
22
- /**
23
- * Sets the end date
24
- */
25
- endValue?: Date;
26
- /**
27
- * Disables dates before this value on the calendar
28
- */
29
- minValue?: Date;
30
- /**
31
- * Disables dates after this value on the calendar
32
- */
33
- maxValue?: Date;
34
- /**
35
- * Handles start and end date changes
36
- *
37
- * @param {Object} values The selected dates
38
- * @param {Date} [values.startValue] Optional start date
39
- * @param {Date} [values.endValue] Optional end date
40
- */
41
- onChange?: (values: {
42
- startValue?: Date;
43
- endValue?: Date;
44
- }) => void;
45
- /**
46
- * Adjusts the input element's date formatting
47
- *
48
- * @param {Date} date The selected date
49
- * @returns {string} a formatted date string
50
- */
51
- formatDate?: (date: Date) => string;
52
- /**
53
- * Overrides the default date parsing
54
- *
55
- * @param {string} inputValue A date string
56
- * @returns {Date} the parsed date
57
- */
58
- customParseDate?: (inputValue?: string) => Date;
59
- /**
60
- * Applies compact styling
61
- */
62
- isCompact?: boolean;
63
- }
64
13
  export declare const DatepickerRange: {
65
14
  (props: PropsWithChildren<IDatepickerRangeProps>): JSX.Element;
66
15
  propTypes: {
@@ -5,19 +5,10 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React, { HTMLAttributes } from 'react';
8
- import { DatepickerRangeAction } from '../utils/datepicker-range-reducer';
9
8
  interface IMonthProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
10
- locale?: string;
11
9
  displayDate: Date;
12
- isCompact?: boolean;
13
10
  isPreviousHidden?: boolean;
14
11
  isNextHidden?: boolean;
15
- dispatch: React.Dispatch<DatepickerRangeAction>;
16
- minValue?: Date;
17
- maxValue?: Date;
18
- startValue?: Date;
19
- endValue?: Date;
20
- hoverDate?: Date;
21
12
  }
22
13
  export declare const Month: React.ForwardRefExoticComponent<IMonthProps & React.RefAttributes<HTMLDivElement>>;
23
14
  export {};
@@ -4,7 +4,7 @@
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
- import { IDatepickerRangeProps } from '../DatepickerRange';
7
+ import { IDatepickerRangeProps } from '../../../types';
8
8
  export interface IDatepickerRangeState {
9
9
  previewDate: Date;
10
10
  hoverDate?: Date;
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export { Datepicker } from './elements/Datepicker/Datepicker';
8
- export type { IDatepickerProps } from './elements/Datepicker/Datepicker';
9
8
  export { DatepickerRange } from './elements/DatepickerRange/DatepickerRange';
10
- export type { IDatepickerRangeProps } from './elements/DatepickerRange/DatepickerRange';
11
- export type { GARDEN_PLACEMENT } from './elements/Datepicker/utils/garden-placements';
9
+ export type { IDatepickerProps, IDatepickerRangeProps,
10
+ /** @deprecated type can be dereferenced via IDatePickerProps['placement'] */
11
+ GardenPlacement as GARDEN_PLACEMENT } from './types';
@@ -4,12 +4,12 @@
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
- import { POPPER_PLACEMENT } from '../elements/Datepicker/utils/garden-placements';
7
+ import { PopperPlacement } from '../types';
8
8
  interface IStyledMenuWrapperProps {
9
9
  isHidden?: boolean;
10
10
  isAnimated?: boolean;
11
11
  zIndex?: number;
12
- placement?: POPPER_PLACEMENT;
12
+ placement?: PopperPlacement;
13
13
  }
14
14
  export declare const StyledMenuWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledMenuWrapperProps, never>;
15
15
  export {};
@@ -0,0 +1,107 @@
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 { HTMLAttributes } from 'react';
8
+ import { Modifiers } from 'popper.js';
9
+ export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
10
+ export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
11
+ export declare type GardenPlacement = typeof PLACEMENT[number];
12
+ export declare type PopperPlacement = typeof POPPER_PLACEMENT[number];
13
+ export interface IDatepickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
14
+ /**
15
+ * Sets the selected date
16
+ */
17
+ value?: Date;
18
+ /**
19
+ * Handles date change
20
+ *
21
+ * @param {Date} date The selected date
22
+ */
23
+ onChange?: (date: Date) => void;
24
+ /**
25
+ * Customizes the input element's date formatting
26
+ *
27
+ * @param {Date} date The selected date
28
+ * @returns {string} a formatted date string
29
+ */
30
+ formatDate?: (date: Date) => string;
31
+ /**
32
+ * Applies locale-based formatting.
33
+ * Accepts all valid `Intl` [locales](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).
34
+ */
35
+ locale?: string;
36
+ /**
37
+ * Disables dates before this value on the calendar
38
+ */
39
+ minValue?: Date;
40
+ /**
41
+ * Disables dates after this value on the calendar
42
+ */
43
+ maxValue?: Date;
44
+ /**
45
+ * Applies compact styling
46
+ */
47
+ isCompact?: boolean;
48
+ /**
49
+ * Overrides default date parsing
50
+ *
51
+ * @param {string} inputValue A localized input value
52
+ * @returns {Date} the parsed date
53
+ */
54
+ customParseDate?: (inputValue: string) => Date;
55
+ /**
56
+ * Defines the ref key used to position the calendar
57
+ */
58
+ refKey?: string;
59
+ /**
60
+ * Adjusts the position of the calendar
61
+ **/
62
+ placement?: GardenPlacement;
63
+ /**
64
+ * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
65
+ */
66
+ popperModifiers?: Modifiers;
67
+ /**
68
+ * Animates the calendar
69
+ */
70
+ isAnimated?: boolean;
71
+ /**
72
+ * Allows the calendar to reposition during browser resize events
73
+ */
74
+ eventsEnabled?: boolean;
75
+ /**
76
+ * Sets the `z-index` of the calendar
77
+ */
78
+ zIndex?: number;
79
+ }
80
+ export interface IDatepickerRangeProps extends Pick<IDatepickerProps, 'locale' | 'minValue' | 'maxValue' | 'formatDate' | 'isCompact'> {
81
+ /**
82
+ * Sets the start date
83
+ */
84
+ startValue?: Date;
85
+ /**
86
+ * Sets the end date
87
+ */
88
+ endValue?: Date;
89
+ /**
90
+ * Handles start and end date changes
91
+ *
92
+ * @param {Object} values The selected dates
93
+ * @param {Date} [values.startValue] Optional start date
94
+ * @param {Date} [values.endValue] Optional end date
95
+ */
96
+ onChange?: (values: {
97
+ startValue?: Date;
98
+ endValue?: Date;
99
+ }) => void;
100
+ /**
101
+ * Overrides the default date parsing
102
+ *
103
+ * @param {string} inputValue A date string
104
+ * @returns {Date} the parsed date
105
+ */
106
+ customParseDate?: (inputValue?: string) => Date;
107
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-datepickers",
3
- "version": "8.49.2",
3
+ "version": "8.50.0",
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>",
@@ -33,8 +33,8 @@
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^8.49.2",
37
- "@zendeskgarden/svg-icons": "6.30.2"
36
+ "@zendeskgarden/react-theming": "^8.50.0",
37
+ "@zendeskgarden/svg-icons": "6.31.1"
38
38
  },
39
39
  "keywords": [
40
40
  "components",
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
49
+ "gitHead": "d5b66e1980faf0fd40818c9e74801dfa1c3550a0"
50
50
  }