@zendeskgarden/react-datepickers 9.0.0-next.1 → 9.0.0-next.10

package/dist/esm/elements/DatePickerRange/utils/date-picker-range-reducer.js

@@ -0,0 +1,319 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { addMonths } from 'date-fns/addMonths';
+import { subMonths } from 'date-fns/subMonths';
+import { isBefore } from 'date-fns/isBefore';
+import { isValid } from 'date-fns/isValid';
+import { isSameDay } from 'date-fns/isSameDay';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { parse } from 'date-fns/parse';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { compareAsc } from 'date-fns/compareAsc';
+import { isAfter } from 'date-fns/isAfter';
+
+function formatValue(_ref) {
+  let {
+    value,
+    locale,
+    formatDate
+  } = _ref;
+  let stringValue = '';
+  if (value !== undefined && isValid(value)) {
+    if (formatDate) {
+      stringValue = formatDate(value);
+    } else {
+      stringValue = new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric'
+      }).format(value);
+    }
+  }
+  return stringValue;
+}
+function parseInputValue(_ref2) {
+  let {
+    inputValue
+  } = _ref2;
+  const MINIMUM_DATE = new Date(1001, 0, 0);
+  let tryParseDate = parse(inputValue || '', 'P', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  tryParseDate = parse(inputValue || '', 'PP', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  tryParseDate = parse(inputValue || '', 'PPP', new Date());
+  if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
+    return tryParseDate;
+  }
+  return new Date(NaN);
+}
+const datepickerRangeReducer = _ref3 => {
+  let {
+    startValue,
+    endValue,
+    locale,
+    formatDate,
+    customParseDate
+  } = _ref3;
+  return (state, action) => {
+    switch (action.type) {
+      case 'START_FOCUS':
+        {
+          let previewDate = state.previewDate;
+          if (startValue) {
+            if (compareAsc(startValue, startOfMonth(state.previewDate)) === 1 && compareAsc(startValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
+              previewDate = state.previewDate;
+            } else {
+              previewDate = startOfMonth(startValue);
+            }
+          }
+          return {
+            ...state,
+            previewDate,
+            isStartFocused: true,
+            isEndFocused: false
+          };
+        }
+      case 'END_FOCUS':
+        {
+          let previewDate = state.previewDate;
+          if (endValue) {
+            if (compareAsc(endValue, startOfMonth(state.previewDate)) === 1 && compareAsc(endValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
+              previewDate = state.previewDate;
+            } else {
+              previewDate = startOfMonth(endValue);
+            }
+          }
+          return {
+            ...state,
+            previewDate,
+            isEndFocused: true,
+            isStartFocused: false
+          };
+        }
+      case 'START_BLUR':
+        {
+          let parsedDate;
+          if (customParseDate) {
+            parsedDate = customParseDate(state.startInputValue);
+          } else {
+            parsedDate = parseInputValue({
+              inputValue: state.startInputValue
+            });
+          }
+          const startInputValue = formatValue({
+            value: parsedDate,
+            locale,
+            formatDate
+          });
+          return {
+            ...state,
+            startInputValue: startInputValue || formatValue({
+              value: startValue,
+              locale,
+              formatDate
+            }),
+            isStartFocused: false
+          };
+        }
+      case 'END_BLUR':
+        {
+          let parsedDate;
+          if (customParseDate) {
+            parsedDate = customParseDate(state.endInputValue);
+          } else {
+            parsedDate = parseInputValue({
+              inputValue: state.endInputValue
+            });
+          }
+          const endInputValue = formatValue({
+            value: parsedDate,
+            locale,
+            formatDate
+          }) || formatValue({
+            value: endValue,
+            locale,
+            formatDate
+          });
+          return {
+            ...state,
+            endInputValue,
+            isEndFocused: false
+          };
+        }
+      case 'CONTROLLED_START_VALUE_CHANGE':
+        {
+          const startInputValue = formatValue({
+            value: action.value,
+            locale,
+            formatDate
+          });
+          let previewDate = state.previewDate;
+          if (action.value) {
+            if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
+              previewDate = state.previewDate;
+            } else {
+              previewDate = startOfMonth(action.value);
+            }
+          }
+          return {
+            ...state,
+            startInputValue,
+            hoverDate: undefined,
+            previewDate
+          };
+        }
+      case 'CONTROLLED_END_VALUE_CHANGE':
+        {
+          const endInputValue = formatValue({
+            value: action.value,
+            locale,
+            formatDate
+          });
+          let previewDate = state.previewDate;
+          if (action.value) {
+            if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
+              previewDate = state.previewDate;
+            } else {
+              previewDate = startOfMonth(action.value);
+            }
+          }
+          return {
+            ...state,
+            endInputValue,
+            hoverDate: undefined,
+            previewDate
+          };
+        }
+      case 'CLICK_DATE':
+        if (state.isStartFocused) {
+          if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
+            return {
+              ...state,
+              startInputValue: formatValue({
+                value: action.value
+              })
+            };
+          }
+          return {
+            ...state,
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          };
+        } else if (state.isEndFocused) {
+          if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
+            return {
+              ...state,
+              endInputValue: formatValue({
+                value: action.value
+              })
+            };
+          }
+          return {
+            ...state,
+            startInputValue: formatValue({
+              value: action.value
+            })
+          };
+        } else if (startValue === undefined) {
+          return {
+            ...state,
+            startInputValue: formatValue({
+              value: action.value
+            }),
+            endInputValue: undefined
+          };
+        } else if (endValue === undefined) {
+          if (isBefore(action.value, startValue)) {
+            return {
+              ...state,
+              startInputValue: formatValue({
+                value: action.value
+              }),
+              endInputValue: undefined
+            };
+          }
+          return {
+            ...state,
+            endInputValue: formatValue({
+              value: action.value
+            })
+          };
+        }
+        return state;
+      case 'START_INPUT_ONCHANGE':
+        {
+          return {
+            ...state,
+            startInputValue: action.value
+          };
+        }
+      case 'END_INPUT_ONCHANGE':
+        {
+          return {
+            ...state,
+            endInputValue: action.value
+          };
+        }
+      case 'HOVER_DATE':
+        return {
+          ...state,
+          hoverDate: action.value
+        };
+      case 'PREVIEW_NEXT_MONTH':
+        {
+          const previewDate = addMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate,
+            hoverDate: undefined
+          };
+        }
+      case 'PREVIEW_PREVIOUS_MONTH':
+        {
+          const previewDate = subMonths(state.previewDate, 1);
+          return {
+            ...state,
+            previewDate,
+            hoverDate: undefined
+          };
+        }
+      default:
+        throw new Error();
+    }
+  };
+};
+function retrieveInitialState(initialProps) {
+  let previewDate = initialProps.startValue;
+  if (previewDate === undefined || !isValid(previewDate)) {
+    previewDate = new Date();
+  }
+  const startInputValue = formatValue({
+    value: initialProps.startValue,
+    locale: initialProps.locale,
+    formatDate: initialProps.formatDate
+  });
+  const endInputValue = formatValue({
+    value: initialProps.endValue,
+    locale: initialProps.locale,
+    formatDate: initialProps.formatDate
+  });
+  return {
+    previewDate,
+    startInputValue,
+    endInputValue,
+    isStartFocused: false,
+    isEndFocused: false
+  };
+}
+
+export { datepickerRangeReducer, formatValue, parseInputValue, retrieveInitialState };

package/dist/esm/elements/DatePickerRange/utils/useDatePickerRangeContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const DatePickerRangeContext = createContext(undefined);
+const useDatePickerContext = () => {
+  return useContext(DatePickerRangeContext);
+};
+
+export { DatePickerRangeContext, useDatePickerContext as default };

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { DatePicker } from './elements/DatePicker/DatePicker.js';
+export { DatePickerRange } from './elements/DatePickerRange/DatePickerRange.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _path;
+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); }
+var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
+  })));
+};
+
+export { SvgChevronLeftStroke as default };

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import * as React from 'react';
+
+var _path;
+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); }
+var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
+  })));
+};
+
+export { SvgChevronRightStroke as default };

package/dist/esm/styled/StyledCalendar.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.calendar';
+const StyledCalendar = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledCalendar",
+  componentId: "sc-g5hoe8-0"
+})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCalendar.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCalendar };

package/dist/esm/styled/StyledCalendarItem.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.calendar_item';
+const retrieveSize = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let size;
+  if (isCompact) {
+    size = `${theme.space.base * 8}px`;
+  } else {
+    size = `${theme.space.base * 10}px`;
+  }
+  return css(["width:", ";height:", ";"], size, size);
+};
+const StyledCalendarItem = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledCalendarItem",
+  componentId: "sc-143w8wb-0"
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCalendarItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCalendarItem, retrieveSize };

package/dist/esm/styled/StyledDatePicker.js

@@ -0,0 +1,32 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.datepicker';
+const retrievePadding = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let value = theme.space.base * 5;
+  if (isCompact) {
+    value = theme.space.base * 4;
+  }
+  return `margin: ${value}px;`;
+};
+const StyledDatePicker = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledDatePicker",
+  componentId: "sc-15hwqzh-0"
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => getColorV8('background', 600 , props.theme), props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDatePicker.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDatePicker };

package/dist/esm/styled/StyledDay.js

@@ -0,0 +1,54 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const retrieveStyledDayColors = _ref => {
+  let {
+    isSelected,
+    isDisabled,
+    isToday,
+    isPreviousMonth,
+    theme
+  } = _ref;
+  let backgroundColor = 'inherit';
+  let color = getColorV8('primaryHue', 600, theme);
+  if (isSelected && !isDisabled) {
+    backgroundColor = getColorV8('primaryHue', 600, theme);
+    color = getColorV8('background', 600 , theme);
+  } else if (isDisabled) {
+    color = getColorV8('neutralHue', 400, theme);
+  } else if (isToday) {
+    color = 'inherit';
+  } else if (isPreviousMonth) {
+    color = getColorV8('neutralHue', 600, theme);
+  }
+  return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
+      :hover {
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${getColorV8('primaryHue', 800, theme)};
+      }
+
+      :active {
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${getColorV8('primaryHue', 800, theme)};
+      }
+  `);
+};
+const COMPONENT_ID = 'datepickers.day';
+const StyledDay = styled.div.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'aria-disabled': props.isDisabled ? 'true' : 'false'
+})).withConfig({
+  displayName: "StyledDay",
+  componentId: "sc-v42uk5-0"
+})(["display:flex;position:absolute;align-items:center;justify-content:center;border-radius:50%;cursor:", ";width:100%;height:100%;font-size:", ";font-weight:", ";", " ", ";"], props => props.isDisabled ? 'inherit' : 'pointer', props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.isToday && !props.isDisabled ? props.theme.fontWeights.semibold : 'inherit', retrieveStyledDayColors, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDay.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDay };

package/dist/esm/styled/StyledDayLabel.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.day_label';
+const StyledDayLabel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledDayLabel",
+  componentId: "sc-9bh1p7-0"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledDayLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledDayLabel };

package/dist/esm/styled/StyledHeader.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.header';
+const StyledHeader = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledHeader",
+  componentId: "sc-upq318-0"
+})(["display:flex;width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeader.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeader };

package/dist/esm/styled/StyledHeaderLabel.js

@@ -0,0 +1,21 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'datepickers.header_label';
+const StyledHeaderLabel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledHeaderLabel",
+  componentId: "sc-1ryf5ub-0"
+})(["display:flex;flex-grow:1;align-items:center;justify-content:center;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderLabel };

package/dist/esm/styled/StyledHeaderPaddle.js

@@ -0,0 +1,38 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const retrieveSizing = _ref => {
+  let {
+    isCompact,
+    theme
+  } = _ref;
+  let size = theme.space.base * 10;
+  if (isCompact) {
+    size = theme.space.base * 8;
+  }
+  return css(["width:", "px;height:", "px;"], size, size);
+};
+const retrieveColor = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), getColorV8('foreground', 600 , theme), getColorV8('primaryHue', 600, theme, 0.2), getColorV8('foreground', 600 , theme), getColorV8('neutralHue', 600, theme));
+};
+const COMPONENT_ID = 'datepickers.header_paddle';
+const StyledHeaderPaddle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID
+}).withConfig({
+  displayName: "StyledHeaderPaddle",
+  componentId: "sc-2oqh0g-0"
+})(["display:flex;align-items:center;justify-content:center;transform:", ";visibility:", ";border-radius:50%;cursor:pointer;", " ", " svg{width:", ";height:", ";}", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isHidden && 'hidden', retrieveSizing, retrieveColor, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledHeaderPaddle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledHeaderPaddle };